/* * Token desain. * * Empat pilihan warna (Sakura/Mint Klinik/Lavender Senja/Peach Sorbet), dipilih * di halaman Pengaturan lewat atribut [data-palette] di , disetel oleh * js/ui/theme.js dan selalu ada nilainya (default 'sakura' — lihat DEFAULTS di * js/config.js). Karena atribut itu tidak pernah kosong, setiap blok warna di * bawah cukup menimpa "biji" warnanya sendiri (plane, surface, ink, muted, * border, accent) — token turunan (plane-tint, grid, axis, bayangan, ink * sekunder, dst.) ditulis SEKALI lewat color-mix() dan otomatis menghitung * ulang memakai biji yang sedang aktif, tanpa perlu ditulis ulang per tema. * Detail ini penting dipahami sebelum menambah tema kelima: tambahkan blok * biji terang + gelap saja, jangan menyalin seluruh berkas. * * Bentuknya ("Level 2" di design/theme-preview.html) berlaku sama untuk * keempat warna — sudut 13→20 px, tombol kapsul, bayangan lebih empuk — jadi * radius dan bayangan didefinisikan sekali di :root, bukan per tema. * * Warna status (kritis/serius/peringatan/aman) dan palet grafik (series/ramp) * SENGAJA tidak ikut tema — warnanya membawa arti klinis, jadi cuma * didefinisikan di blok dasar (terang) dan blok gelap umum, lalu menurun ke * keempat tema apa adanya. * * PERINGATAN: validator skill dataviz sebelumnya hanya diuji terhadap * permukaan biru lama (#ffffff terang / #15181e gelap). Permukaan gelap * keempat tema sekarang berbeda-beda (merah muda/hijau/ungu/oranye tua), jadi * kontras warna series dan ramp grafik di mode gelap belum divalidasi ulang * terhadap permukaan barunya. Jalankan ulang validatornya sebelum * mengandalkan grafik di mode gelap non-default. */ :root { color-scheme: light; /* Permukaan — Sakura (default). Surface tetap putih di keempat tema terang; yang membedakan hanya plane dan surface-sunken. */ --plane: #fdf5f7; --plane-tint: color-mix(in srgb, var(--plane), var(--ink) 4%); --surface: #ffffff; --surface-raised: var(--surface); --surface-sunken: #fbeef2; --surface-hover: color-mix(in srgb, var(--ink) 4%, transparent); --surface-active: color-mix(in srgb, var(--ink) 7%, transparent); --surface-accent: var(--accent-wash); /* Tinta */ --ink: #2e1f26; --ink-secondary: color-mix(in srgb, var(--ink), var(--ink-muted) 65%); --ink-muted: #7d6371; --ink-inverse: #ffffff; /* Garis */ --border: rgba(142, 90, 110, 0.16); --border-strong: rgba(142, 90, 110, 0.32); --grid: color-mix(in srgb, var(--surface), var(--ink) 9%); --axis: color-mix(in srgb, var(--surface), var(--ink) 22%); --highlight: rgba(255, 255, 255, 0.7); /* Status — tetap, tidak ikut tema */ --critical: #d03b3b; --serious: #ec835a; --warning: #fab219; --info: #2a78d6; --good: #0ca30c; --critical-wash: rgba(208, 59, 59, 0.1); --serious-wash: rgba(236, 131, 90, 0.14); --warning-wash: rgba(250, 178, 25, 0.16); --info-wash: rgba(42, 120, 214, 0.1); --good-wash: rgba(12, 163, 12, 0.1); --muted-wash: rgba(133, 146, 166, 0.13); --critical-ink: #a52121; --serious-ink: #97410f; --warning-ink: #7a5300; --info-ink: #1c5cab; --good-ink: #04720a; --muted-ink: #55627a; /* Grafik: kategorikal (maksimum tiga slot, semuanya diberi label langsung) */ --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; /* Grafik: ramp ordinal, paling pucat = paling ringan risikonya */ --ramp-1: #86b6ef; --ramp-2: #5598e7; --ramp-3: #2a78d6; --ramp-4: #1c5cab; --ramp-5: #104281; /* Aksen antarmuka — biji warna tema, ditimpa per tema di bawah */ --accent: #de6f97; --accent-strong: #c14f7b; --accent-ink: #ffffff; --accent-wash: rgba(222, 111, 151, 0.14); --focus: var(--accent); /* Bentuk & ritme — "Level 2": sudut dan bayangan lebih membulat/empuk */ --radius-xs: 6px; --radius-sm: 10px; --radius: 20px; --radius-lg: 26px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Bayangan berlapis, warnanya ikut tinta supaya tetap netral di tiap tema */ --shadow-xs: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); --shadow-sm: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent), 0 2px 5px color-mix(in srgb, var(--ink) 5%, transparent); --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 20px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-md: 0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 14px 32px color-mix(in srgb, var(--ink) 9%, transparent); --shadow-lg: 0 3px 6px color-mix(in srgb, var(--ink) 7%, transparent), 0 26px 56px color-mix(in srgb, var(--ink) 16%, transparent); --shadow-accent: 0 1px 3px color-mix(in srgb, var(--accent-strong) 30%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 26%, transparent); --font: ui-sans-serif, system-ui, 'Segoe UI Variable Text', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: ui-sans-serif, system-ui, 'Segoe UI Variable Display', 'Segoe UI', Inter, Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace; --sidebar-w: 250px; --topbar-h: 62px; } /* Biji warna terang untuk tiga tema lain. Hanya properti yang benar-benar beda per tema yang ditulis di sini — sisanya (plane-tint, grid, axis, ink sekunder, dst.) menurun dari :root dan menghitung ulang sendiri. */ :root[data-palette='mint'] { --plane: #eff7f3; --surface-sunken: #e6f3ed; --ink: #12251f; --ink-muted: #5f7a72; --border: rgba(30, 90, 74, 0.15); --border-strong: rgba(30, 90, 74, 0.3); --accent: #2aa385; --accent-strong: #178066; --accent-wash: rgba(42, 163, 133, 0.14); } :root[data-palette='lavender'] { --plane: #f5f3fd; --surface-sunken: #efebfb; --ink: #211d33; --ink-muted: #6d6890; --border: rgba(90, 80, 160, 0.16); --border-strong: rgba(90, 80, 160, 0.32); --accent: #7a67d9; --accent-strong: #5f4ac0; --accent-wash: rgba(122, 103, 217, 0.13); } :root[data-palette='peach'] { --plane: #fff5ee; --surface-sunken: #ffece0; --ink: #33211a; --ink-muted: #85685a; --border: rgba(160, 90, 50, 0.16); --border-strong: rgba(160, 90, 50, 0.32); --accent: #ef7746; --accent-strong: #bd4a1d; --accent-wash: rgba(239, 119, 70, 0.14); } /* Mode gelap dari preferensi sistem — dilewati kalau pengguna memilih terang. Blok umum ini membawa Sakura (default) DAN seluruh turunan yang rumusnya beda dari mode terang (plane-tint, surface-raised, grid, axis, ink-inverse, accent-ink, focus, bayangan). Ketiga tema lain di bawahnya cuma menimpa biji warnanya sendiri — [data-palette='mint'] lebih spesifik daripada :not([data-theme='light']) sehingga selalu menang tanpa peduli urutan. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --plane: #161014; --surface: #1f171d; --surface-sunken: #191219; --ink: #f7eef2; --ink-muted: #ab8f9c; --border: rgba(255, 214, 229, 0.13); --border-strong: rgba(255, 214, 229, 0.26); --accent: #ef8fb2; --accent-strong: #f7b3cb; --accent-wash: rgba(239, 143, 178, 0.17); --plane-tint: color-mix(in srgb, var(--plane), white 3%); --surface-raised: color-mix(in srgb, var(--surface), white 6%); --surface-hover: rgba(255, 255, 255, 0.05); --surface-active: rgba(255, 255, 255, 0.09); --ink-inverse: var(--plane); --accent-ink: var(--plane); --focus: var(--accent-strong); --grid: color-mix(in srgb, var(--surface), white 8%); --axis: color-mix(in srgb, var(--surface), white 16%); --highlight: rgba(255, 255, 255, 0.06); --critical-wash: rgba(208, 59, 59, 0.18); --serious-wash: rgba(236, 131, 90, 0.16); --warning-wash: rgba(250, 178, 25, 0.15); --info-wash: rgba(57, 135, 229, 0.16); --good-wash: rgba(12, 163, 12, 0.16); --muted-wash: rgba(168, 179, 196, 0.14); --critical-ink: #f19392; --serious-ink: #f0a882; --warning-ink: #f5c460; --info-ink: #8fbdf3; --good-ink: #5fca5f; --muted-ink: #a8b3c4; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --ramp-1: #cde2fb; --ramp-2: #9ec5f4; --ramp-3: #6da7ec; --ramp-4: #3987e5; --ramp-5: #184f95; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.38); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.32); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 22px rgba(0, 0, 0, 0.36); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.4); --shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.45), 0 28px 60px rgba(0, 0, 0, 0.52); --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } :root[data-palette='mint']:not([data-theme='light']) { --plane: #0a1411; --surface: #121e1a; --surface-sunken: #0e1815; --ink: #e9f6f1; --ink-muted: #7fa398; --border: rgba(180, 240, 220, 0.12); --border-strong: rgba(180, 240, 220, 0.24); --accent: #3fc39f; --accent-strong: #6ed9bd; --accent-wash: rgba(63, 195, 159, 0.16); } :root[data-palette='lavender']:not([data-theme='light']) { --plane: #0f0e18; --surface: #17162a; --surface-sunken: #121124; --ink: #efecfd; --ink-muted: #9791c4; --border: rgba(200, 190, 255, 0.13); --border-strong: rgba(200, 190, 255, 0.26); --accent: #9b8bf0; --accent-strong: #b9adf7; --accent-wash: rgba(155, 139, 240, 0.17); } :root[data-palette='peach']:not([data-theme='light']) { --plane: #17100c; --surface: #211711; --surface-sunken: #1b120e; --ink: #fbeee6; --ink-muted: #b2907c; --border: rgba(255, 210, 180, 0.13); --border-strong: rgba(255, 210, 180, 0.26); --accent: #f78d5f; --accent-strong: #ffab84; --accent-wash: rgba(247, 141, 95, 0.17); } } /* Pilihan eksplisit pengguna harus menang di kedua arah — sama seperti blok media di atas, hanya tanpa syarat preferensi sistem. */ :root[data-theme='dark'] { color-scheme: dark; --plane: #161014; --surface: #1f171d; --surface-sunken: #191219; --ink: #f7eef2; --ink-muted: #ab8f9c; --border: rgba(255, 214, 229, 0.13); --border-strong: rgba(255, 214, 229, 0.26); --accent: #ef8fb2; --accent-strong: #f7b3cb; --accent-wash: rgba(239, 143, 178, 0.17); --plane-tint: color-mix(in srgb, var(--plane), white 3%); --surface-raised: color-mix(in srgb, var(--surface), white 6%); --surface-hover: rgba(255, 255, 255, 0.05); --surface-active: rgba(255, 255, 255, 0.09); --ink-inverse: var(--plane); --accent-ink: var(--plane); --focus: var(--accent-strong); --grid: color-mix(in srgb, var(--surface), white 8%); --axis: color-mix(in srgb, var(--surface), white 16%); --highlight: rgba(255, 255, 255, 0.06); --critical-wash: rgba(208, 59, 59, 0.18); --serious-wash: rgba(236, 131, 90, 0.16); --warning-wash: rgba(250, 178, 25, 0.15); --info-wash: rgba(57, 135, 229, 0.16); --good-wash: rgba(12, 163, 12, 0.16); --muted-wash: rgba(168, 179, 196, 0.14); --critical-ink: #f19392; --serious-ink: #f0a882; --warning-ink: #f5c460; --info-ink: #8fbdf3; --good-ink: #5fca5f; --muted-ink: #a8b3c4; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --ramp-1: #cde2fb; --ramp-2: #9ec5f4; --ramp-3: #6da7ec; --ramp-4: #3987e5; --ramp-5: #184f95; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.38); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.32); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 22px rgba(0, 0, 0, 0.36); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.4); --shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.45), 0 28px 60px rgba(0, 0, 0, 0.52); --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } :root[data-palette='mint'][data-theme='dark'] { --plane: #0a1411; --surface: #121e1a; --surface-sunken: #0e1815; --ink: #e9f6f1; --ink-muted: #7fa398; --border: rgba(180, 240, 220, 0.12); --border-strong: rgba(180, 240, 220, 0.24); --accent: #3fc39f; --accent-strong: #6ed9bd; --accent-wash: rgba(63, 195, 159, 0.16); } :root[data-palette='lavender'][data-theme='dark'] { --plane: #0f0e18; --surface: #17162a; --surface-sunken: #121124; --ink: #efecfd; --ink-muted: #9791c4; --border: rgba(200, 190, 255, 0.13); --border-strong: rgba(200, 190, 255, 0.26); --accent: #9b8bf0; --accent-strong: #b9adf7; --accent-wash: rgba(155, 139, 240, 0.17); } :root[data-palette='peach'][data-theme='dark'] { --plane: #17100c; --surface: #211711; --surface-sunken: #1b120e; --ink: #fbeee6; --ink-muted: #b2907c; --border: rgba(255, 210, 180, 0.13); --border-strong: rgba(255, 210, 180, 0.26); --accent: #f78d5f; --accent-strong: #ffab84; --accent-wash: rgba(247, 141, 95, 0.17); }