/* GENERATED by solve.py — 手で編集しない */ /* 使い方: テーマとアクセントは必ず同じ要素に書くこと。 アクセントの値はテーマごとに違う（面との ΔE で C を解いているため）ので、 片方だけを別の要素に置くと、噛み合わない組の色が出る。 入れ子にすれば領域ごとに別テーマにできる。プレビューはこれで並べている。 */ /* 属性が無いときの既定 … hadal / jelly */ :root { --suisou-bg: oklch(15.00% 0.0060 286); --suisou-bg-hex: "#0b0b0e"; --suisou-panel: oklch(22.00% 0.0060 286); --suisou-panel-hex: "#1a1a1d"; --suisou-item: oklch(28.00% 0.0060 286); --suisou-item-hex: "#28282c"; --suisou-overlay: oklch(34.00% 0.0060 286); --suisou-overlay-hex: "#37373b"; --suisou-hover-surface: oklch(19.00% 0.0060 286); --suisou-hover-surface-hex: "#131316"; --suisou-selected-neutral-surface: oklch(33.00% 0.0060 286); --suisou-selected-neutral-surface-hex: "#353538"; --suisou-line-weak: oklch(31.35% 0.0060 286); --suisou-line-weak-hex: "#313134"; --suisou-line-weak-panel: oklch(34.70% 0.0060 286); --suisou-line-weak-panel-hex: "#39393d"; --suisou-line-weak-item: oklch(38.91% 0.0060 286); --suisou-line-weak-item-hex: "#444448"; --suisou-line-weak-overlay: oklch(43.99% 0.0060 286); --suisou-line-weak-overlay-hex: "#525256"; --suisou-line-weak-hover: oklch(33.04% 0.0060 286); --suisou-line-weak-hover-hex: "#353538"; --suisou-line-weak-selected: oklch(43.70% 0.0060 286); --suisou-line-weak-selected-hex: "#515155"; --suisou-line-strong: oklch(48.76% 0.0060 286); --suisou-line-strong-hex: "#5f5f63"; --suisou-line-strong-panel: oklch(51.74% 0.0060 286); --suisou-line-strong-panel-hex: "#68686c"; --suisou-line-strong-item: oklch(55.78% 0.0060 286); --suisou-line-strong-item-hex: "#737377"; --suisou-line-strong-overlay: oklch(61.04% 0.0060 286); --suisou-line-strong-overlay-hex: "#838387"; --suisou-line-strong-hover: oklch(50.23% 0.0060 286); --suisou-line-strong-hover-hex: "#636367"; --suisou-line-strong-selected: oklch(60.73% 0.0060 286); --suisou-line-strong-selected-hex: "#828286"; --suisou-text-disabled: oklch(62.00% 0.0060 286); --suisou-text-disabled-hex: "#86868a"; --suisou-text-sub: oklch(78.00% 0.0060 286); --suisou-text-sub-hex: "#b7b7bb"; --suisou-text-main: oklch(94.00% 0.0060 286); --suisou-text-main-hex: "#ebebef"; --suisou-scrim: oklch(8.00% 0.0060 286 / 0.72); --suisou-scrim-hex: "#020203"; --suisou-error: oklch(73.00% 0.1580 22); --suisou-error-hex: "#fb7a7a"; --suisou-warning: oklch(82.00% 0.1592 90); --suisou-warning-hex: "#ecbe26"; --suisou-success: oklch(76.00% 0.1785 155); --suisou-success-hex: "#27d17d"; --suisou-error-active: oklch(70.00% 0.1816 22); --suisou-error-active-hex: "#fb6769"; --suisou-error-surface: oklch(33.00% 0.0531 22); --suisou-error-surface-hex: "#4d2a29"; --suisou-warning-surface: oklch(33.00% 0.0483 90); --suisou-warning-surface-hex: "#3f3416"; --suisou-success-surface: oklch(33.00% 0.0500 155); --suisou-success-surface-hex: "#1f3d2a"; --suisou-accent: oklch(74.00% 0.1096 212); --suisou-accent-hex: "#43bdd3"; --suisou-accent-active: oklch(71.00% 0.1052 212); --suisou-accent-active-hex: "#3fb3c8"; --suisou-focus-ring: oklch(74.00% 0.1096 212); --suisou-focus-ring-hex: "#43bdd3"; --suisou-selected-surface: oklch(33.00% 0.0554 212); --suisou-selected-surface-hex: "#043d46"; } /* ── テーマ層 ───────────────────────────── */ [data-suisou-theme="hadal"] { --suisou-bg: oklch(15.00% 0.0060 286); --suisou-bg-hex: "#0b0b0e"; --suisou-panel: oklch(22.00% 0.0060 286); --suisou-panel-hex: "#1a1a1d"; --suisou-item: oklch(28.00% 0.0060 286); --suisou-item-hex: "#28282c"; --suisou-overlay: oklch(34.00% 0.0060 286); --suisou-overlay-hex: "#37373b"; --suisou-hover-surface: oklch(19.00% 0.0060 286); --suisou-hover-surface-hex: "#131316"; --suisou-selected-neutral-surface: oklch(33.00% 0.0060 286); --suisou-selected-neutral-surface-hex: "#353538"; --suisou-line-weak: oklch(31.35% 0.0060 286); --suisou-line-weak-hex: "#313134"; --suisou-line-weak-panel: oklch(34.70% 0.0060 286); --suisou-line-weak-panel-hex: "#39393d"; --suisou-line-weak-item: oklch(38.91% 0.0060 286); --suisou-line-weak-item-hex: "#444448"; --suisou-line-weak-overlay: oklch(43.99% 0.0060 286); --suisou-line-weak-overlay-hex: "#525256"; --suisou-line-weak-hover: oklch(33.04% 0.0060 286); --suisou-line-weak-hover-hex: "#353538"; --suisou-line-weak-selected: oklch(43.70% 0.0060 286); --suisou-line-weak-selected-hex: "#515155"; --suisou-line-strong: oklch(48.76% 0.0060 286); --suisou-line-strong-hex: "#5f5f63"; --suisou-line-strong-panel: oklch(51.74% 0.0060 286); --suisou-line-strong-panel-hex: "#68686c"; --suisou-line-strong-item: oklch(55.78% 0.0060 286); --suisou-line-strong-item-hex: "#737377"; --suisou-line-strong-overlay: oklch(61.04% 0.0060 286); --suisou-line-strong-overlay-hex: "#838387"; --suisou-line-strong-hover: oklch(50.23% 0.0060 286); --suisou-line-strong-hover-hex: "#636367"; --suisou-line-strong-selected: oklch(60.73% 0.0060 286); --suisou-line-strong-selected-hex: "#828286"; --suisou-text-disabled: oklch(62.00% 0.0060 286); --suisou-text-disabled-hex: "#86868a"; --suisou-text-sub: oklch(78.00% 0.0060 286); --suisou-text-sub-hex: "#b7b7bb"; --suisou-text-main: oklch(94.00% 0.0060 286); --suisou-text-main-hex: "#ebebef"; --suisou-scrim: oklch(8.00% 0.0060 286 / 0.72); --suisou-scrim-hex: "#020203"; --suisou-error: oklch(73.00% 0.1580 22); --suisou-error-hex: "#fb7a7a"; --suisou-warning: oklch(82.00% 0.1592 90); --suisou-warning-hex: "#ecbe26"; --suisou-success: oklch(76.00% 0.1785 155); --suisou-success-hex: "#27d17d"; --suisou-error-active: oklch(70.00% 0.1816 22); --suisou-error-active-hex: "#fb6769"; --suisou-error-surface: oklch(33.00% 0.0531 22); --suisou-error-surface-hex: "#4d2a29"; --suisou-warning-surface: oklch(33.00% 0.0483 90); --suisou-warning-surface-hex: "#3f3416"; --suisou-success-surface: oklch(33.00% 0.0500 155); --suisou-success-surface-hex: "#1f3d2a"; } [data-suisou-theme="trench"] { --suisou-bg: oklch(15.00% 0.0440 262); --suisou-bg-hex: "#030a1d"; --suisou-panel: oklch(22.00% 0.0440 262); --suisou-panel-hex: "#0f1a2f"; --suisou-item: oklch(28.00% 0.0440 262); --suisou-item-hex: "#1d293f"; --suisou-overlay: oklch(34.00% 0.0440 262); --suisou-overlay-hex: "#2b384f"; --suisou-hover-surface: oklch(19.00% 0.0440 262); --suisou-hover-surface-hex: "#091327"; --suisou-selected-neutral-surface: oklch(33.00% 0.0440 262); --suisou-selected-neutral-surface-hex: "#29354c"; --suisou-line-weak: oklch(31.33% 0.0440 262); --suisou-line-weak-hex: "#253148"; --suisou-line-weak-panel: oklch(34.69% 0.0440 262); --suisou-line-weak-panel-hex: "#2d3a51"; --suisou-line-weak-item: oklch(38.89% 0.0440 262); --suisou-line-weak-item-hex: "#38455d"; --suisou-line-weak-overlay: oklch(43.98% 0.0440 262); --suisou-line-weak-overlay-hex: "#45536b"; --suisou-line-weak-hover: oklch(33.02% 0.0440 262); --suisou-line-weak-hover-hex: "#29354c"; --suisou-line-weak-selected: oklch(43.63% 0.0440 262); --suisou-line-weak-selected-hex: "#44526a"; --suisou-line-strong: oklch(48.73% 0.0440 262); --suisou-line-strong-hex: "#526079"; --suisou-line-strong-panel: oklch(51.70% 0.0440 262); --suisou-line-strong-panel-hex: "#5a6982"; --suisou-line-strong-item: oklch(55.75% 0.0440 262); --suisou-line-strong-item-hex: "#66748e"; --suisou-line-strong-overlay: oklch(61.01% 0.0440 262); --suisou-line-strong-overlay-hex: "#75849e"; --suisou-line-strong-hover: oklch(50.19% 0.0440 262); --suisou-line-strong-hover-hex: "#56647d"; --suisou-line-strong-selected: oklch(60.63% 0.0440 262); --suisou-line-strong-selected-hex: "#74839d"; --suisou-text-disabled: oklch(62.00% 0.0440 262); --suisou-text-disabled-hex: "#7887a1"; --suisou-text-sub: oklch(78.00% 0.0440 262); --suisou-text-sub-hex: "#a8b8d4"; --suisou-text-main: oklch(90.50% 0.0440 262); --suisou-text-main-hex: "#d0e0fe"; --suisou-scrim: oklch(8.00% 0.0440 262 / 0.72); --suisou-scrim-hex: "#00010d"; --suisou-error: oklch(73.00% 0.1580 22); --suisou-error-hex: "#fb7a7a"; --suisou-warning: oklch(82.00% 0.1592 90); --suisou-warning-hex: "#ecbe26"; --suisou-success: oklch(76.00% 0.1785 155); --suisou-success-hex: "#27d17d"; --suisou-error-active: oklch(70.00% 0.1816 22); --suisou-error-active-hex: "#fb6769"; --suisou-error-surface: oklch(33.00% 0.0164 22); --suisou-error-surface-hex: "#3d3232"; --suisou-warning-surface: oklch(33.00% 0.0102 90); --suisou-warning-surface-hex: "#373530"; --suisou-success-surface: oklch(33.00% 0.0211 155); --suisou-success-surface-hex: "#2d3931"; } [data-suisou-theme="fjord"] { --suisou-bg: oklch(15.00% 0.0440 278); --suisou-bg-hex: "#08081d"; --suisou-panel: oklch(22.00% 0.0440 278); --suisou-panel-hex: "#16182f"; --suisou-item: oklch(28.00% 0.0440 278); --suisou-item-hex: "#24273e"; --suisou-overlay: oklch(34.00% 0.0440 278); --suisou-overlay-hex: "#32364f"; --suisou-hover-surface: oklch(19.00% 0.0440 278); --suisou-hover-surface-hex: "#0f1127"; --suisou-selected-neutral-surface: oklch(33.00% 0.0440 278); --suisou-selected-neutral-surface-hex: "#30334c"; --suisou-line-weak: oklch(31.43% 0.0440 278); --suisou-line-weak-hex: "#2c2f48"; --suisou-line-weak-panel: oklch(34.75% 0.0440 278); --suisou-line-weak-panel-hex: "#343851"; --suisou-line-weak-item: oklch(38.92% 0.0440 278); --suisou-line-weak-item-hex: "#3f435c"; --suisou-line-weak-overlay: oklch(44.00% 0.0440 278); --suisou-line-weak-overlay-hex: "#4d506b"; --suisou-line-weak-hover: oklch(33.10% 0.0440 278); --suisou-line-weak-hover-hex: "#30334c"; --suisou-line-weak-selected: oklch(43.74% 0.0440 278); --suisou-line-weak-selected-hex: "#4c506a"; --suisou-line-strong: oklch(48.84% 0.0440 278); --suisou-line-strong-hex: "#5a5e79"; --suisou-line-strong-panel: oklch(51.77% 0.0440 278); --suisou-line-strong-panel-hex: "#626682"; --suisou-line-strong-item: oklch(55.78% 0.0440 278); --suisou-line-strong-item-hex: "#6d728e"; --suisou-line-strong-overlay: oklch(61.01% 0.0440 278); --suisou-line-strong-overlay-hex: "#7d819e"; --suisou-line-strong-hover: oklch(50.28% 0.0440 278); --suisou-line-strong-hover-hex: "#5e627d"; --suisou-line-strong-selected: oklch(60.74% 0.0440 278); --suisou-line-strong-selected-hex: "#7c809d"; --suisou-text-disabled: oklch(62.00% 0.0440 278); --suisou-text-disabled-hex: "#7f84a1"; --suisou-text-sub: oklch(78.00% 0.0440 278); --suisou-text-sub-hex: "#b0b5d4"; --suisou-text-main: oklch(90.50% 0.0440 278); --suisou-text-main-hex: "#d8defd"; --suisou-scrim: oklch(8.00% 0.0440 278 / 0.72); --suisou-scrim-hex: "#01000d"; --suisou-error: oklch(73.00% 0.1580 22); --suisou-error-hex: "#fb7a7a"; --suisou-warning: oklch(82.00% 0.1592 90); --suisou-warning-hex: "#ecbe26"; --suisou-success: oklch(76.00% 0.1785 155); --suisou-success-hex: "#27d17d"; --suisou-error-active: oklch(70.00% 0.1816 22); --suisou-error-active-hex: "#fb6769"; --suisou-error-surface: oklch(33.00% 0.0226 22); --suisou-error-surface-hex: "#403130"; --suisou-warning-surface: oklch(33.00% 0.0102 90); --suisou-warning-surface-hex: "#373530"; --suisou-success-surface: oklch(33.00% 0.0156 155); --suisou-success-surface-hex: "#2f3832"; } [data-suisou-theme="shoal"] { --suisou-bg: oklch(26.00% 0.0200 265); --suisou-bg-hex: "#1f242e"; --suisou-panel: oklch(33.00% 0.0200 265); --suisou-panel-hex: "#303540"; --suisou-item: oklch(39.00% 0.0200 265); --suisou-item-hex: "#404550"; --suisou-overlay: oklch(45.00% 0.0200 265); --suisou-overlay-hex: "#505561"; --suisou-hover-surface: oklch(30.00% 0.0200 265); --suisou-hover-surface-hex: "#292e38"; --suisou-selected-neutral-surface: oklch(44.00% 0.0200 265); --suisou-selected-neutral-surface-hex: "#4d535e"; --suisou-line-weak: oklch(37.38% 0.0200 265); --suisou-line-weak-hex: "#3c414c"; --suisou-line-weak-panel: oklch(43.09% 0.0200 265); --suisou-line-weak-panel-hex: "#4b505b"; --suisou-line-weak-item: oklch(48.69% 0.0200 265); --suisou-line-weak-item-hex: "#5a606b"; --suisou-line-weak-overlay: oklch(54.68% 0.0200 265); --suisou-line-weak-overlay-hex: "#6b717d"; --suisou-line-weak-hover: oklch(40.52% 0.0200 265); --suisou-line-weak-hover-hex: "#444954"; --suisou-line-weak-selected: oklch(54.36% 0.0200 265); --suisou-line-weak-selected-hex: "#6a707c"; --suisou-line-strong: oklch(54.28% 0.0200 265); --suisou-line-strong-hex: "#6a707c"; --suisou-line-strong-panel: oklch(60.08% 0.0200 265); --suisou-line-strong-panel-hex: "#7b818d"; --suisou-line-strong-item: oklch(66.15% 0.0200 265); --suisou-line-strong-item-hex: "#8d939f"; --suisou-line-strong-overlay: oklch(72.95% 0.0200 265); --suisou-line-strong-overlay-hex: "#a1a8b5"; --suisou-line-strong-hover: oklch(57.40% 0.0200 265); --suisou-line-strong-hover-hex: "#737985"; --suisou-line-strong-selected: oklch(72.58% 0.0200 265); --suisou-line-strong-selected-hex: "#a0a6b3"; --suisou-text-disabled: oklch(74.00% 0.0200 265); --suisou-text-disabled-hex: "#a5abb8"; --suisou-text-sub: oklch(90.00% 0.0200 265); --suisou-text-sub-hex: "#d7deec"; --suisou-text-main: oklch(95.50% 0.0200 265); --suisou-text-main-hex: "#eaf0fe"; --suisou-scrim: oklch(8.00% 0.0200 265 / 0.72); --suisou-scrim-hex: "#010205"; --suisou-error: oklch(85.00% 0.0612 22); --suisou-error-hex: "#f4bfbc"; --suisou-warning: oklch(85.00% 0.1303 90); --suisou-warning-hex: "#efca61"; --suisou-success: oklch(83.00% 0.1539 155); --suisou-success-hex: "#67e49a"; --suisou-error-active: oklch(82.00% 0.0757 22); --suisou-error-active-hex: "#f2b1ae"; --suisou-error-surface: oklch(44.00% 0.0420 22); --suisou-error-surface-hex: "#684948"; --suisou-warning-surface: oklch(44.00% 0.0341 90); --suisou-warning-surface-hex: "#5a523d"; --suisou-success-surface: oklch(44.00% 0.0439 155); --suisou-success-surface-hex: "#3f5a48"; } /* ── アクセント層（テーマとの組でしか決まらない） ── */ [data-suisou-theme="hadal"][data-suisou-accent="clown"] { --suisou-accent: oklch(74.00% 0.1549 55); --suisou-accent-hex: "#f48d3c"; --suisou-accent-active: oklch(71.00% 0.1495 55); --suisou-accent-active-hex: "#e78538"; --suisou-focus-ring: oklch(74.00% 0.1549 55); --suisou-focus-ring-hex: "#f48d3c"; --suisou-selected-surface: oklch(33.00% 0.0501 55); --suisou-selected-surface-hex: "#492e1b"; } [data-suisou-theme="hadal"][data-suisou-accent="turtle"] { --suisou-accent: oklch(74.00% 0.1526 122); --suisou-accent-hex: "#9bb93d"; --suisou-accent-active: oklch(71.00% 0.1464 122); --suisou-accent-active-hex: "#92af39"; --suisou-focus-ring: oklch(74.00% 0.1526 122); --suisou-focus-ring-hex: "#9bb93d"; --suisou-selected-surface: oklch(33.00% 0.0483 122); --suisou-selected-surface-hex: "#31391c"; } [data-suisou-theme="hadal"][data-suisou-accent="teal"] { --suisou-accent: oklch(74.00% 0.1094 188); --suisou-accent-hex: "#44c1b8"; --suisou-accent-active: oklch(71.00% 0.1050 188); --suisou-accent-active-hex: "#40b6ae"; --suisou-focus-ring: oklch(74.00% 0.1094 188); --suisou-focus-ring-hex: "#44c1b8"; --suisou-selected-surface: oklch(33.00% 0.0529 188); --suisou-selected-surface-hex: "#093e3a"; } [data-suisou-theme="hadal"][data-suisou-accent="jelly"] { --suisou-accent: oklch(74.00% 0.1096 212); --suisou-accent-hex: "#43bdd3"; --suisou-accent-active: oklch(71.00% 0.1052 212); --suisou-accent-active-hex: "#3fb3c8"; --suisou-focus-ring: oklch(74.00% 0.1096 212); --suisou-focus-ring-hex: "#43bdd3"; --suisou-selected-surface: oklch(33.00% 0.0554 212); --suisou-selected-surface-hex: "#043d46"; } [data-suisou-theme="hadal"][data-suisou-accent="blue"] { --suisou-accent: oklch(74.00% 0.1159 255); --suisou-accent-hex: "#78aef3"; --suisou-accent-active: oklch(71.00% 0.1308 255); --suisou-accent-active-hex: "#67a4f1"; --suisou-focus-ring: oklch(74.00% 0.1159 255); --suisou-focus-ring-hex: "#78aef3"; --suisou-selected-surface: oklch(33.00% 0.0591 255); --suisou-selected-surface-hex: "#1f3653"; } [data-suisou-theme="hadal"][data-suisou-accent="indigo"] { --suisou-accent: oklch(74.00% 0.1171 282); --suisou-accent-hex: "#9fa1f3"; --suisou-accent-active: oklch(71.00% 0.1322 282); --suisou-accent-active-hex: "#9596f1"; --suisou-focus-ring: oklch(74.00% 0.1171 282); --suisou-focus-ring-hex: "#9fa1f3"; --suisou-selected-surface: oklch(33.00% 0.0601 282); --suisou-selected-surface-hex: "#313153"; } [data-suisou-theme="hadal"][data-suisou-accent="coral"] { --suisou-accent: oklch(74.00% 0.1495 308); --suisou-accent-hex: "#c58ff3"; --suisou-accent-active: oklch(71.00% 0.1689 308); --suisou-accent-active-hex: "#bf81f2"; --suisou-focus-ring: oklch(74.00% 0.1495 308); --suisou-focus-ring-hex: "#c58ff3"; --suisou-selected-surface: oklch(33.00% 0.0596 308); --suisou-selected-surface-hex: "#3e2d4d"; } [data-suisou-theme="hadal"][data-suisou-accent="magenta"] { --suisou-accent: oklch(74.00% 0.2122 332); --suisou-accent-hex: "#f46fe5"; --suisou-accent-active: oklch(71.00% 0.2451 332); --suisou-accent-active-hex: "#f355e3"; --suisou-focus-ring: oklch(74.00% 0.2122 332); --suisou-focus-ring-hex: "#f46fe5"; --suisou-selected-surface: oklch(33.00% 0.0581 332); --suisou-selected-surface-hex: "#472a43"; } [data-suisou-theme="hadal"][data-suisou-accent="seal"] { --suisou-accent: oklch(74.00% 0.1535 355); --suisou-accent-hex: "#f47eb0"; --suisou-accent-active: oklch(71.00% 0.1775 355); --suisou-accent-active-hex: "#f36ba7"; --suisou-focus-ring: oklch(74.00% 0.1535 355); --suisou-focus-ring-hex: "#f47eb0"; --suisou-selected-surface: oklch(33.00% 0.0559 355); --suisou-selected-surface-hex: "#4c2937"; } [data-suisou-theme="trench"][data-suisou-accent="clown"] { --suisou-accent: oklch(74.00% 0.1549 55); --suisou-accent-hex: "#f48d3c"; --suisou-accent-active: oklch(71.00% 0.1495 55); --suisou-accent-active-hex: "#e78538"; --suisou-focus-ring: oklch(74.00% 0.1549 55); --suisou-focus-ring-hex: "#f48d3c"; --suisou-selected-surface: oklch(33.00% 0.0111 55); --suisou-selected-surface-hex: "#3a3430"; } [data-suisou-theme="trench"][data-suisou-accent="turtle"] { --suisou-accent: oklch(74.00% 0.1526 122); --suisou-accent-hex: "#9bb93d"; --suisou-accent-active: oklch(71.00% 0.1464 122); --suisou-accent-active-hex: "#92af39"; --suisou-focus-ring: oklch(74.00% 0.1526 122); --suisou-focus-ring-hex: "#9bb93d"; --suisou-selected-surface: oklch(33.00% 0.0124 122); --suisou-selected-surface-hex: "#34362f"; } [data-suisou-theme="trench"][data-suisou-accent="teal"] { --suisou-accent: oklch(74.00% 0.1094 188); --suisou-accent-hex: "#44c1b8"; --suisou-accent-active: oklch(71.00% 0.1050 188); --suisou-accent-active-hex: "#40b6ae"; --suisou-focus-ring: oklch(74.00% 0.1094 188); --suisou-focus-ring-hex: "#44c1b8"; --suisou-selected-surface: oklch(33.00% 0.0458 188); --suisou-selected-surface-hex: "#143d3a"; } /* ★推奨しない … 選択下地が面と近い ΔE 0.046（目標 0.055） */ [data-suisou-theme="trench"][data-suisou-accent="jelly"] { --suisou-accent: oklch(74.00% 0.1096 212); --suisou-accent-hex: "#43bdd3"; --suisou-accent-active: oklch(71.00% 0.1052 212); --suisou-accent-active-hex: "#3fb3c8"; --suisou-focus-ring: oklch(74.00% 0.1096 212); --suisou-focus-ring-hex: "#43bdd3"; --suisou-selected-surface: oklch(33.00% 0.0577 212); --suisou-selected-surface-hex: "#003d47"; } [data-suisou-theme="trench"][data-suisou-accent="blue"] { --suisou-accent: oklch(74.00% 0.1159 255); --suisou-accent-hex: "#78aef3"; --suisou-accent-active: oklch(71.00% 0.1308 255); --suisou-accent-active-hex: "#67a4f1"; --suisou-focus-ring: oklch(74.00% 0.1159 255); --suisou-focus-ring-hex: "#78aef3"; --suisou-selected-surface: oklch(33.00% 0.0975 255); --suisou-selected-surface-hex: "#093566"; } [data-suisou-theme="trench"][data-suisou-accent="indigo"] { --suisou-accent: oklch(74.00% 0.1171 282); --suisou-accent-hex: "#9fa1f3"; --suisou-accent-active: oklch(71.00% 0.1322 282); --suisou-accent-active-hex: "#9596f1"; --suisou-focus-ring: oklch(74.00% 0.1171 282); --suisou-focus-ring-hex: "#9fa1f3"; --suisou-selected-surface: oklch(33.00% 0.0933 282); --suisou-selected-surface-hex: "#2f2d63"; } [data-suisou-theme="trench"][data-suisou-accent="coral"] { --suisou-accent: oklch(74.00% 0.1495 308); --suisou-accent-hex: "#c58ff3"; --suisou-accent-active: oklch(71.00% 0.1689 308); --suisou-accent-active-hex: "#bf81f2"; --suisou-focus-ring: oklch(74.00% 0.1495 308); --suisou-focus-ring-hex: "#c58ff3"; --suisou-selected-surface: oklch(33.00% 0.0744 308); --suisou-selected-surface-hex: "#402a53"; } [data-suisou-theme="trench"][data-suisou-accent="magenta"] { --suisou-accent: oklch(74.00% 0.2122 332); --suisou-accent-hex: "#f46fe5"; --suisou-accent-active: oklch(71.00% 0.2451 332); --suisou-accent-active-hex: "#f355e3"; --suisou-focus-ring: oklch(74.00% 0.2122 332); --suisou-focus-ring-hex: "#f46fe5"; --suisou-selected-surface: oklch(33.00% 0.0499 332); --suisou-selected-surface-hex: "#442c41"; } [data-suisou-theme="trench"][data-suisou-accent="seal"] { --suisou-accent: oklch(74.00% 0.1535 355); --suisou-accent-hex: "#f47eb0"; --suisou-accent-active: oklch(71.00% 0.1775 355); --suisou-accent-active-hex: "#f36ba7"; --suisou-focus-ring: oklch(74.00% 0.1535 355); --suisou-focus-ring-hex: "#f47eb0"; --suisou-selected-surface: oklch(33.00% 0.0292 355); --suisou-selected-surface-hex: "#422f36"; } [data-suisou-theme="fjord"][data-suisou-accent="clown"] { --suisou-accent: oklch(74.00% 0.1549 55); --suisou-accent-hex: "#f48d3c"; --suisou-accent-active: oklch(71.00% 0.1495 55); --suisou-accent-active-hex: "#e78538"; --suisou-focus-ring: oklch(74.00% 0.1549 55); --suisou-focus-ring-hex: "#f48d3c"; --suisou-selected-surface: oklch(33.00% 0.0128 55); --suisou-selected-surface-hex: "#3b342f"; } [data-suisou-theme="fjord"][data-suisou-accent="turtle"] { --suisou-accent: oklch(74.00% 0.1526 122); --suisou-accent-hex: "#9bb93d"; --suisou-accent-active: oklch(71.00% 0.1464 122); --suisou-accent-active-hex: "#92af39"; --suisou-focus-ring: oklch(74.00% 0.1526 122); --suisou-focus-ring-hex: "#9bb93d"; --suisou-selected-surface: oklch(33.00% 0.0108 122); --suisou-selected-surface-hex: "#343630"; } [data-suisou-theme="fjord"][data-suisou-accent="teal"] { --suisou-accent: oklch(74.00% 0.1094 188); --suisou-accent-hex: "#44c1b8"; --suisou-accent-active: oklch(71.00% 0.1050 188); --suisou-accent-active-hex: "#40b6ae"; --suisou-focus-ring: oklch(74.00% 0.1094 188); --suisou-focus-ring-hex: "#44c1b8"; --suisou-selected-surface: oklch(33.00% 0.0314 188); --suisou-selected-surface-hex: "#223b38"; } [data-suisou-theme="fjord"][data-suisou-accent="jelly"] { --suisou-accent: oklch(74.00% 0.1096 212); --suisou-accent-hex: "#43bdd3"; --suisou-accent-active: oklch(71.00% 0.1052 212); --suisou-accent-active-hex: "#3fb3c8"; --suisou-focus-ring: oklch(74.00% 0.1096 212); --suisou-focus-ring-hex: "#43bdd3"; --suisou-selected-surface: oklch(33.00% 0.0541 212); --suisou-selected-surface-hex: "#073d45"; } [data-suisou-theme="fjord"][data-suisou-accent="blue"] { --suisou-accent: oklch(74.00% 0.1159 255); --suisou-accent-hex: "#78aef3"; --suisou-accent-active: oklch(71.00% 0.1308 255); --suisou-accent-active-hex: "#67a4f1"; --suisou-focus-ring: oklch(74.00% 0.1159 255); --suisou-focus-ring-hex: "#78aef3"; --suisou-selected-surface: oklch(33.00% 0.0918 255); --suisou-selected-surface-hex: "#0e3563"; } [data-suisou-theme="fjord"][data-suisou-accent="indigo"] { --suisou-accent: oklch(74.00% 0.1171 282); --suisou-accent-hex: "#9fa1f3"; --suisou-accent-active: oklch(71.00% 0.1322 282); --suisou-accent-active-hex: "#9596f1"; --suisou-focus-ring: oklch(74.00% 0.1171 282); --suisou-focus-ring-hex: "#9fa1f3"; --suisou-selected-surface: oklch(33.00% 0.0979 282); --suisou-selected-surface-hex: "#2f2c65"; } [data-suisou-theme="fjord"][data-suisou-accent="coral"] { --suisou-accent: oklch(74.00% 0.1495 308); --suisou-accent-hex: "#c58ff3"; --suisou-accent-active: oklch(71.00% 0.1689 308); --suisou-accent-active-hex: "#bf81f2"; --suisou-focus-ring: oklch(74.00% 0.1495 308); --suisou-focus-ring-hex: "#c58ff3"; --suisou-selected-surface: oklch(33.00% 0.0875 308); --suisou-selected-surface-hex: "#422757"; } [data-suisou-theme="fjord"][data-suisou-accent="magenta"] { --suisou-accent: oklch(74.00% 0.2122 332); --suisou-accent-hex: "#f46fe5"; --suisou-accent-active: oklch(71.00% 0.2451 332); --suisou-accent-active-hex: "#f355e3"; --suisou-focus-ring: oklch(74.00% 0.2122 332); --suisou-focus-ring-hex: "#f46fe5"; --suisou-selected-surface: oklch(33.00% 0.0666 332); --suisou-selected-surface-hex: "#492844"; } [data-suisou-theme="fjord"][data-suisou-accent="seal"] { --suisou-accent: oklch(74.00% 0.1535 355); --suisou-accent-hex: "#f47eb0"; --suisou-accent-active: oklch(71.00% 0.1775 355); --suisou-accent-active-hex: "#f36ba7"; --suisou-focus-ring: oklch(74.00% 0.1535 355); --suisou-focus-ring-hex: "#f47eb0"; --suisou-selected-surface: oklch(33.00% 0.0429 355); --suisou-selected-surface-hex: "#472c36"; } [data-suisou-theme="shoal"][data-suisou-accent="clown"] { --suisou-accent: oklch(80.00% 0.0797 55); --suisou-accent-hex: "#e7b18d"; --suisou-accent-active: oklch(77.00% 0.0941 55); --suisou-accent-active-hex: "#e3a47a"; --suisou-focus-ring: oklch(80.00% 0.0797 55); --suisou-focus-ring-hex: "#e7b18d"; --suisou-selected-surface: oklch(44.00% 0.0358 55); --suisou-selected-surface-hex: "#624e40"; } [data-suisou-theme="shoal"][data-suisou-accent="turtle"] { --suisou-accent: oklch(80.00% 0.1165 122); --suisou-accent-hex: "#b1ca72"; --suisou-accent-active: oklch(77.00% 0.1121 122); --suisou-accent-active-hex: "#a8c06c"; --suisou-focus-ring: oklch(80.00% 0.1165 122); --suisou-focus-ring-hex: "#b1ca72"; --suisou-selected-surface: oklch(44.00% 0.0368 122); --suisou-selected-surface-hex: "#4f563f"; } [data-suisou-theme="shoal"][data-suisou-accent="teal"] { --suisou-accent: oklch(80.00% 0.0835 188); --suisou-accent-hex: "#7bcfc8"; --suisou-accent-active: oklch(77.00% 0.0804 188); --suisou-accent-active-hex: "#74c5be"; --suisou-focus-ring: oklch(80.00% 0.0835 188); --suisou-focus-ring-hex: "#7bcfc8"; --suisou-selected-surface: oklch(44.00% 0.0549 188); --suisou-selected-surface-hex: "#2a5c58"; } [data-suisou-theme="shoal"][data-suisou-accent="jelly"] { --suisou-accent: oklch(80.00% 0.0837 212); --suisou-accent-hex: "#7accdd"; --suisou-accent-active: oklch(77.00% 0.0805 212); --suisou-accent-active-hex: "#74c2d2"; --suisou-focus-ring: oklch(80.00% 0.0837 212); --suisou-focus-ring-hex: "#7accdd"; --suisou-selected-surface: oklch(44.00% 0.0637 212); --suisou-selected-surface-hex: "#1f5c67"; } [data-suisou-theme="shoal"][data-suisou-accent="blue"] { --suisou-accent: oklch(80.00% 0.0615 255); --suisou-accent-hex: "#a4c0e5"; --suisou-accent-active: oklch(77.00% 0.0716 255); --suisou-accent-active-hex: "#96b7e2"; --suisou-focus-ring: oklch(80.00% 0.0615 255); --suisou-focus-ring-hex: "#a4c0e5"; --suisou-selected-surface: oklch(44.00% 0.0737 255); --suisou-selected-surface-hex: "#36547b"; } [data-suisou-theme="shoal"][data-suisou-accent="indigo"] { --suisou-accent: oklch(80.00% 0.0621 282); --suisou-accent-hex: "#b7bae5"; --suisou-accent-active: oklch(77.00% 0.0723 282); --suisou-accent-active-hex: "#acafe2"; --suisou-focus-ring: oklch(80.00% 0.0621 282); --suisou-focus-ring-hex: "#b7bae5"; --suisou-selected-surface: oklch(44.00% 0.0729 282); --suisou-selected-surface-hex: "#4c4d7a"; } [data-suisou-theme="shoal"][data-suisou-accent="coral"] { --suisou-accent: oklch(80.00% 0.0791 308); --suisou-accent-hex: "#ccb1e6"; --suisou-accent-active: oklch(77.00% 0.0922 308); --suisou-accent-active-hex: "#c4a5e2"; --suisou-focus-ring: oklch(80.00% 0.0791 308); --suisou-focus-ring-hex: "#ccb1e6"; --suisou-selected-surface: oklch(44.00% 0.0670 308); --suisou-selected-surface-hex: "#5d486f"; } [data-suisou-theme="shoal"][data-suisou-accent="magenta"] { --suisou-accent: oklch(80.00% 0.1079 332); --suisou-accent-hex: "#e7a4dd"; --suisou-accent-active: oklch(77.00% 0.1281 332); --suisou-accent-active-hex: "#e495d8"; --suisou-focus-ring: oklch(80.00% 0.1079 332); --suisou-focus-ring-hex: "#e7a4dd"; --suisou-selected-surface: oklch(44.00% 0.0587 332); --suisou-selected-surface-hex: "#664661"; } [data-suisou-theme="shoal"][data-suisou-accent="seal"] { --suisou-accent: oklch(80.00% 0.0779 355); --suisou-accent-hex: "#e7a9c0"; --suisou-accent-active: oklch(77.00% 0.0926 355); --suisou-accent-active-hex: "#e49cb7"; --suisou-focus-ring: oklch(80.00% 0.0779 355); --suisou-focus-ring-hex: "#e7a9c0"; --suisou-selected-surface: oklch(44.00% 0.0502 355); --suisou-selected-surface-hex: "#694754"; } /* ★推奨しない組み合わせ（値は出してある。見づらいだけで壊れてはいない）: trench/jelly: 選択下地が面と近い ΔE 0.046（目標 0.055） */ /* 出していない組み合わせ（色域外。意図した色が表示できない）: これらを指定しても CSS は無反応で、:root の既定アクセントが残る。 静かに噛み合わない色になるので、指定する側で避けること。 */