/* ============================================================ SLF — themes.css Color palettes (20) + Layout variants (4) Applied via data-palette / data-layout on ============================================================ */ /* ── Base: shape/layout variables (defaults) ── */ :root { --card-radius: 0px; --panel-radius: 6px; --btn-radius: 0px; --nav-radius: 8px; --field-radius: 4px; --card-shadow: none; /* Sidebar — default = current light paper style */ --side-bg: var(--paper); --side-text: var(--ink-soft); --side-hover-bg: var(--paper-warm); --side-hover-text: var(--ink); --side-active-bg: var(--ink); --side-active-text: var(--paper); --side-active-icon: var(--gold-soft); --side-icon: var(--gold); --side-brand-en: var(--gold-deep); --side-title: var(--ink); --side-tag: var(--ink-mute); --side-border: var(--rule); --side-accent: var(--gold-soft); } /* ============================================================ Layout variants ============================================================ */ html[data-layout="rounded"] { --card-radius: 12px; --panel-radius: 12px; --btn-radius: 8px; --nav-radius: 12px; --field-radius: 6px; --card-shadow: 0 2px 12px rgba(0,0,0,.07); } html[data-layout="sharp"] { --card-radius: 0px; --panel-radius: 0px; --btn-radius: 0px; --nav-radius: 0px; --field-radius: 0px; --card-shadow: none; } html[data-layout="soft"] { --card-radius: 20px; --panel-radius: 16px; --btn-radius: 24px; --nav-radius: 16px; --field-radius: 8px; --card-shadow: 0 4px 24px rgba(0,0,0,.09); } /* ============================================================ Color palettes — 20 presets ============================================================ */ /* 01. warm-ivory — デフォルト（現在のデザイン） */ html[data-palette="warm-ivory"] { --bg: #f2efea; --bg-deep: #e4dfd8; --bg-soft: #eae6e0; --paper: #ffffff; --paper-warm: #fdfbf9; --ink: #16110b; --ink-strong: #1e1610; --ink-soft: #4a3f33; --ink-mute: #7a6e5e; --rule: #cec8c0; --rule-strong: #b0a89e; --gold: #7a6050; --gold-deep: #1e1610; --gold-soft: #a09080; --gold-pale: #ece7e2; } /* 02. stitch-blush — ブラッシュピンク */ html[data-palette="stitch-blush"] { --bg: #fdf0f3; --bg-deep: #f5dfe4; --bg-soft: #fae8ec; --paper: #fff8fa; --paper-warm: #fdf0f3; --ink: #2a1520; --ink-strong: #1e0a14; --ink-soft: #6b3a4a; --ink-mute: #a07080; --rule: #f0ccd4; --rule-strong: #d8b0b8; --gold: #c07080; --gold-deep: #2a1520; --gold-soft: #d4a0a8; --gold-pale: #fce8ec; } /* 03. stitch-cream — シャンパンクリーム */ html[data-palette="stitch-cream"] { --bg: #f8f4ec; --bg-deep: #ede6d8; --bg-soft: #f4efe4; --paper: #fffef9; --paper-warm: #faf7f0; --ink: #1e1608; --ink-strong: #140e04; --ink-soft: #5a4a30; --ink-mute: #8a7a60; --rule: #e8dfc8; --rule-strong: #d0c8a8; --gold: #b08020; --gold-deep: #1e1608; --gold-soft: #c8a050; --gold-pale: #f5edd0; } /* 04. stitch-sage — ライトセージグリーン */ html[data-palette="stitch-sage"] { --bg: #f2f5f0; --bg-deep: #e0e8dc; --bg-soft: #eaedea; --paper: #fbfcfa; --paper-warm: #f6f8f4; --ink: #1a2018; --ink-strong: #101810; --ink-soft: #4a5848; --ink-mute: #7a8878; --rule: #d0d8cc; --rule-strong: #b8c4b4; --gold: #6a8060; --gold-deep: #1a2018; --gold-soft: #9ab090; --gold-pale: #e4eedc; } /* 05. stitch-lavender — ソフトラベンダー */ html[data-palette="stitch-lavender"] { --bg: #f4f2f8; --bg-deep: #e8e4f4; --bg-soft: #eeeaf8; --paper: #fdfcff; --paper-warm: #f8f6fc; --ink: #1e1828; --ink-strong: #140e20; --ink-soft: #4a3f60; --ink-mute: #7a6e90; --rule: #d8d0e8; --rule-strong: #c0b8d4; --gold: #8070b0; --gold-deep: #1e1828; --gold-soft: #a898c8; --gold-pale: #ece8f4; } /* 06. stitch-peach — ウォームピーチ */ html[data-palette="stitch-peach"] { --bg: #fdf4ef; --bg-deep: #f4e4d8; --bg-soft: #f9ede4; --paper: #fff9f7; --paper-warm: #fdf2ec; --ink: #281808; --ink-strong: #1c0e02; --ink-soft: #604838; --ink-mute: #907060; --rule: #e8d0c0; --rule-strong: #d0b8a4; --gold: #c07050; --gold-deep: #281808; --gold-soft: #d49070; --gold-pale: #f5e0d0; } /* 07. stitch-linen — ウォームリネン */ html[data-palette="stitch-linen"] { --bg: #f5f1e8; --bg-deep: #e8e0d0; --bg-soft: #f0eadc; --paper: #fffef9; --paper-warm: #faf7f0; --ink: #201808; --ink-strong: #160e02; --ink-soft: #504030; --ink-mute: #807060; --rule: #dcd4c0; --rule-strong: #c8c0a8; --gold: #a08060; --gold-deep: #201808; --gold-soft: #c0a880; --gold-pale: #ede8d8; } /* 08. stitch-rose — ダスティーローズ */ html[data-palette="stitch-rose"] { --bg: #faf0f2; --bg-deep: #f0dfe2; --bg-soft: #f5e8ea; --paper: #fff6f8; --paper-warm: #faeef0; --ink: #221018; --ink-strong: #180810; --ink-soft: #5a3040; --ink-mute: #906070; --rule: #e8cccc; --rule-strong: #d0b0b0; --gold: #b05870; --gold-deep: #221018; --gold-soft: #c88090; --gold-pale: #f5e0e4; } /* 09. rose-gold — ローズゴールド */ html[data-palette="rose-gold"] { --bg: #fdf3f0; --bg-deep: #f4e4df; --bg-soft: #f9ece8; --paper: #ffffff; --paper-warm: #fdf8f7; --ink: #281012; --ink-strong: #1c060a; --ink-soft: #6a3038; --ink-mute: #9a6068; --rule: #f0ccc8; --rule-strong: #d8b0a8; --gold: #c06050; --gold-deep: #281012; --gold-soft: #d89090; --gold-pale: #fce8e4; } /* 10. charcoal-gold — チャコール＋ゴールド（ダークサイドバー） */ html[data-palette="charcoal-gold"] { --bg: #f2efea; --bg-deep: #e4dfd8; --bg-soft: #eae6e0; --paper: #ffffff; --paper-warm: #fdfbf9; --ink: #16110b; --ink-strong: #1e1610; --ink-soft: #4a3f33; --ink-mute: #7a6e5e; --rule: #cec8c0; --rule-strong: #b0a89e; --gold: #c8a060; --gold-deep: #1e1610; --gold-soft: #d8b880; --gold-pale: #faf0d8; --side-bg: #2a2420; --side-text: #d0c8bc; --side-hover-bg: #38302a; --side-hover-text: #f0e8e0; --side-active-bg: #c8a060; --side-active-text: #1a1208; --side-active-icon: #f5e0a8; --side-icon: #c8a060; --side-brand-en: #c8a060; --side-title: #f0e8e0; --side-tag: #908070; --side-border: #38302a; --side-accent: #c8a060; } /* 11. forest-deep — フォレストグリーン（ダークサイドバー） */ html[data-palette="forest-deep"] { --bg: #f0f5f0; --bg-deep: #dceadc; --bg-soft: #e8eee8; --paper: #ffffff; --paper-warm: #f5faf5; --ink: #0a1a08; --ink-strong: #050f04; --ink-soft: #3a4a38; --ink-mute: #6a7868; --rule: #c8d8c4; --rule-strong: #b0c4ac; --gold: #5a9050; --gold-deep: #0a1a08; --gold-soft: #80b078; --gold-pale: #d8f0d0; --side-bg: #1a2a18; --side-text: #b8c0b0; --side-hover-bg: #243020; --side-hover-text: #d8e8d0; --side-active-bg: #5a9050; --side-active-text: #f0fff0; --side-active-icon: #b8e8a8; --side-icon: #7ab870; --side-brand-en: #7ab870; --side-title: #d8e8d0; --side-tag: #809878; --side-border: #243020; --side-accent: #5a9050; } /* 12. lavender-mist — ラベンダーミスト */ html[data-palette="lavender-mist"] { --bg: #f4f0fa; --bg-deep: #e8e0f4; --bg-soft: #eee8f8; --paper: #ffffff; --paper-warm: #faf8ff; --ink: #1a1028; --ink-strong: #100820; --ink-soft: #4a3868; --ink-mute: #7a6898; --rule: #d8d0ec; --rule-strong: #c0b8d8; --gold: #7860b0; --gold-deep: #1a1028; --gold-soft: #a890c8; --gold-pale: #ede8f8; } /* 13. coral-sunset — コーラルサンセット */ html[data-palette="coral-sunset"] { --bg: #fdf5f0; --bg-deep: #f4e4d8; --bg-soft: #f9ede4; --paper: #ffffff; --paper-warm: #fdf2e8; --ink: #281408; --ink-strong: #1c0a02; --ink-soft: #6a3818; --ink-mute: #a06040; --rule: #e8d0b8; --rule-strong: #d0b898; --gold: #d06040; --gold-deep: #281408; --gold-soft: #e89068; --gold-pale: #fae0d0; } /* 14. midnight — ミッドナイト（ダークモード） */ html[data-palette="midnight"] { --bg: #0e0e18; --bg-deep: #08080f; --bg-soft: #141422; --paper: #1a1a28; --paper-warm: #202032; --ink: #e8e4f4; --ink-strong: #f4f0ff; --ink-soft: #a8a0c0; --ink-mute: #706880; --rule: #2a2840; --rule-strong: #383650; --gold: #9080d8; --gold-deep: #c0b0ff; --gold-soft: #6858a8; --gold-pale: #221e38; --side-bg: #12121e; --side-text: #a098c8; --side-hover-bg: #1e1c30; --side-hover-text: #d8d0f0; --side-active-bg: #9080d8; --side-active-text: #ffffff; --side-active-icon: #c0b0ff; --side-icon: #9080d8; --side-brand-en: #9080d8; --side-title: #e8e4f4; --side-tag: #706880; --side-border: #2a2840; --side-accent: #9080d8; } /* 15. powder-blue — パウダーブルー */ html[data-palette="powder-blue"] { --bg: #f0f4fa; --bg-deep: #dde8f4; --bg-soft: #e8eef8; --paper: #ffffff; --paper-warm: #f5f8ff; --ink: #0a1828; --ink-strong: #060e1e; --ink-soft: #304058; --ink-mute: #607088; --rule: #c8d8ec; --rule-strong: #b0c4dc; --gold: #4878b8; --gold-deep: #0a1828; --gold-soft: #7098c8; --gold-pale: #dce8f8; } /* 16. terracotta — テラコッタ */ html[data-palette="terracotta"] { --bg: #f8f0ec; --bg-deep: #ecdcd4; --bg-soft: #f2e8e2; --paper: #ffffff; --paper-warm: #fdf6f2; --ink: #281808; --ink-strong: #1c1002; --ink-soft: #604030; --ink-mute: #906858; --rule: #e0c8b8; --rule-strong: #c8b098; --gold: #b86040; --gold-deep: #281808; --gold-soft: #d08860; --gold-pale: #f5ddd0; } /* 17. cherry-blossom — チェリーブロッサム */ html[data-palette="cherry-blossom"] { --bg: #fdf4f7; --bg-deep: #f5e4ec; --bg-soft: #faeaf0; --paper: #ffffff; --paper-warm: #fdf8fa; --ink: #281020; --ink-strong: #1c0818; --ink-soft: #5a2848; --ink-mute: #906878; --rule: #f0c8d4; --rule-strong: #d8b0c0; --gold: #d06090; --gold-deep: #281020; --gold-soft: #e090b0; --gold-pale: #fce8f0; } /* 18. mint-fresh — ミントフレッシュ */ html[data-palette="mint-fresh"] { --bg: #f0faf5; --bg-deep: #d8f0e4; --bg-soft: #e4f4ec; --paper: #ffffff; --paper-warm: #f5fdf8; --ink: #081e18; --ink-strong: #041410; --ink-soft: #286050; --ink-mute: #588878; --rule: #c0e8d8; --rule-strong: #a0d4c4; --gold: #308070; --gold-deep: #081e18; --gold-soft: #58a898; --gold-pale: #d0f0e8; } /* 19. caramel-latte — キャラメルラテ */ html[data-palette="caramel-latte"] { --bg: #f8f0e4; --bg-deep: #ecdcd0; --bg-soft: #f2e8d8; --paper: #fffcf8; --paper-warm: #faf4e8; --ink: #201008; --ink-strong: #160802; --ink-soft: #584030; --ink-mute: #886858; --rule: #e0d0b8; --rule-strong: #c8b898; --gold: #b88040; --gold-deep: #201008; --gold-soft: #d0a870; --gold-pale: #f5e8d0; } /* 20. dark-rose — ダークローズ（ダークモード） */ html[data-palette="dark-rose"] { --bg: #1a0e12; --bg-deep: #100810; --bg-soft: #200e18; --paper: #261016; --paper-warm: #301820; --ink: #f0e8ec; --ink-strong: #fff0f5; --ink-soft: #c0a0b0; --ink-mute: #907080; --rule: #402030; --rule-strong: #502838; --gold: #c06080; --gold-deep: #ffb0c8; --gold-soft: #904060; --gold-pale: #380a1e; --side-bg: #160a0e; --side-text: #c0a0b0; --side-hover-bg: #200e18; --side-hover-text: #f0e8ec; --side-active-bg: #c06080; --side-active-text: #ffffff; --side-active-icon: #ffb0c8; --side-icon: #c06080; --side-brand-en: #c06080; --side-title: #f0e8ec; --side-tag: #907080; --side-border: #402030; --side-accent: #c06080; }