From 824aadaae536e0b6298a1216dfa259d6b936c6ec Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 30 Jul 2026 12:03:18 +0200 Subject: [PATCH 1/2] feat(tokens): ship the pastel palette by default (seed 100 + pastel) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Makes the pastel palette the shipped default: the app seed moves to saturation 100 with `pastel: true`, giving a softer, more even spread across hues. Rewritten onto the runtime-tunable palette that landed in #1277. The original version of this branch hand-edited the whole recipe in `palette.ts`; that file is now generated from `PaletteConfig`, which already exposes `saturation` and `pastel` as first-class options. So the change collapses from a few hundred lines of rewritten recipe to two defaults, and anything tuning the palette at runtime keeps working — opting back out is `{ saturation: 80, pastel: false }`. Also drops this branch's own "keep syntax highlighting out of the pastel base" commit. #1281 landed the same fix on main and did it better, pinning `pastel: false` on the code theme's instance config with tests, rather than splitting out a parallel code theme the way this branch had. **`DEFAULT_CODE_SATURATION` is the one genuinely new thing here.** The code seed read `DEFAULT_SATURATION`, deliberately not the palette-level saturation, so that tuning the app could not wash out a code block. Moving that single constant to 100 would have dragged the syntax colors along with it — reintroducing exactly the coupling `PaletteCodeSeed` and the `pastel` opt-out both exist to prevent. Splitting it lets the app seed move while the code palette stays on the value it was calibrated against. Four tests assumed non-pastel was the default and used `{ pastel: true }` as their perturbation, which is now a no-op. They are inverted to toggle pastel OFF rather than re-baselined, so each still asserts what it was written to assert. The exception is `anchors its contrast floors to the real surface`: bit-for-bit equality between the code theme's mirrored surface and the live one only holds while the page is non-pastel, so it now pins that explicitly — its sibling already covers the pastel case on tone, which is what the AA/AAA floors are solved against. Verified: 45 passing, and the 9 remaining failures are present on clean origin/main too (contrastLevel / renderPaletteTokens / glaze-interop). Typecheck is unchanged at 29 errors, 12 of them in src/tokens — all pre-existing on main, none in the files this touches. --- .changeset/pastel-palette-redesign.md | 15 + src/tokens/__snapshots__/palette.test.ts.snap | 312 +++++++++--------- src/tokens/palette-config.ts | 21 +- src/tokens/palette.test.ts | 23 +- 4 files changed, 207 insertions(+), 164 deletions(-) create mode 100644 .changeset/pastel-palette-redesign.md diff --git a/.changeset/pastel-palette-redesign.md b/.changeset/pastel-palette-redesign.md new file mode 100644 index 000000000..587cb81de --- /dev/null +++ b/.changeset/pastel-palette-redesign.md @@ -0,0 +1,15 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Make the pastel palette the default: the app seed moves to saturation 100 with +`pastel: true`, producing a softer, more even spread across hues. + +Both are `PaletteConfig` defaults rather than a rewritten recipe, so anything that +already tunes the palette at runtime keeps working and can opt back out with +`{ saturation: 80, pastel: false }`. + +The `code-*` syntax family is unaffected. It answers to its own seed, which now +reads a separate `DEFAULT_CODE_SATURATION` (still 80) instead of sharing +`DEFAULT_SATURATION`; sharing it would have pulled syntax colors to 100 as a side +effect of moving the app seed. `pastel` was already held off the code theme. diff --git a/src/tokens/__snapshots__/palette.test.ts.snap b/src/tokens/__snapshots__/palette.test.ts.snap index c0c17fa80..3927d52bc 100644 --- a/src/tokens/__snapshots__/palette.test.ts.snap +++ b/src/tokens/__snapshots__/palette.test.ts.snap @@ -2,161 +2,161 @@ exports[`palette tokens > resolves the default palette to a stable set of values 1`] = ` { - "#accent-disabled-surface": "(base)=oklch(0.8693 0.0337 280.3) | @dark=oklch(0.3575 0.0632 280.3) | @dark & @hc=oklch(0.2896 0.0519 280.3) | @hc=oklch(0.8693 0.0337 280.3)", - "#accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4517 0.0597 280.3) | @dark & @hc=oklch(0.3922 0.0533 280.3) | @hc=oklch(1 0 0)", - "#accent-icon": "(base)=oklch(0.6544 0.1501 280.3) | @dark=oklch(0.5032 0.1754 280.3) | @dark & @hc=oklch(0.4777 0.1719 280.3) | @hc=oklch(0.6544 0.1501 280.3)", - "#accent-selected-fill": "(base)=oklch(0.975 0.0087 287.16) | @dark=oklch(0.3014 0.0691 282.76) | @dark & @hc=oklch(0.208 0.0825 280.3) | @hc=oklch(0.9722 0.0062 288.22)", - "#accent-surface": "(base)=oklch(0.571 0.1871 280.3) | @dark=oklch(0.5411 0.191 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#accent-surface-2": "(base)=oklch(0.5491 0.1903 280.3) | @dark=oklch(0.5196 0.1916 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#accent-surface-3": "(base)=oklch(0.5275 0.1916 280.3) | @dark=oklch(0.4982 0.1906 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#accent-surface-border": "(base)=oklch(0.6701 0.1538 280.3) | @dark=oklch(0.638 0.1673 280.3) | @dark & @hc=oklch(0.557 0.1893 280.3) | @hc=oklch(0.557 0.1893 280.3)", - "#accent-surface-hover": "(base)=oklch(0.5061 0.1912 280.3) | @dark=oklch(0.477 0.1872 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0184 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#accent-text": "(base)=oklch(0.4829 0.1884 280.3) | @dark=oklch(0.7499 0.1157 280.3) | @dark & @hc=oklch(0.8444 0.0697 280.3) | @hc=oklch(0.3362 0.1399 280.3)", - "#accent-text-soft": "(base)=oklch(0.5537 0.1898 280.3) | @dark=oklch(0.676 0.1512 280.3) | @dark & @hc=oklch(0.7193 0.1307 280.3) | @hc=oklch(0.4453 0.179 280.3)", - "#border": "(base)=oklch(0.8981 0.0104 280.3) | @dark=oklch(0.3243 0.0185 280.3) | @dark & @hc=oklch(0.421 0.0232 280.3) | @hc=oklch(0.7187 0.0245 280.3)", - "#code-attribute": "(base)=oklch(0.5562 0.0847 200) | @dark=oklch(0.6211 0.0944 200) | @dark & @hc=oklch(0.6694 0.1016 200) | @hc=oklch(0.4541 0.0691 200)", - "#code-comment": "(base)=oklch(0.5637 0.0155 280) | @dark=oklch(0.6242 0.0155 280) | @dark & @hc=oklch(0.6726 0.015 280) | @hc=oklch(0.4642 0.014 280)", - "#code-function": "(base)=oklch(0.5347 0.1938 348) | @dark=oklch(0.6504 0.2034 348) | @dark & @hc=oklch(0.6961 0.1833 348) | @hc=oklch(0.4642 0.1723 348)", - "#code-keyword": "(base)=oklch(0.5347 0.1938 348) | @dark=oklch(0.6504 0.2034 348) | @dark & @hc=oklch(0.6961 0.1833 348) | @hc=oklch(0.4642 0.1723 348)", - "#code-number": "(base)=oklch(0.5541 0.0988 156) | @dark=oklch(0.6211 0.1099 156) | @dark & @hc=oklch(0.6694 0.1174 156) | @hc=oklch(0.4523 0.0811 156)", - "#code-punctuation": "(base)=oklch(0.5637 0.0671 348) | @dark=oklch(0.6324 0.0683 348) | @dark & @hc=oklch(0.6804 0.0655 348) | @hc=oklch(0.4642 0.0595 348)", - "#code-string": "(base)=oklch(0.5637 0.1884 280.3) | @dark=oklch(0.6352 0.1683 280.3) | @dark & @hc=oklch(0.6814 0.1487 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#danger-accent-disabled-surface": "(base)=oklch(0.8514 0.0396 23.1) | @dark=oklch(0.3707 0.0576 23.1) | @dark & @hc=oklch(0.3236 0.0506 23.1) | @hc=oklch(0.8319 0.0449 23.1)", - "#danger-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0571 23.1) | @dark & @hc=oklch(0.4494 0.0544 23.1) | @hc=oklch(1 0 0)", - "#danger-accent-icon": "(base)=oklch(0.6396 0.162 23.1) | @dark=oklch(0.5151 0.148 23.1) | @dark & @hc=oklch(0.5061 0.1458 23.1) | @hc=oklch(0.6234 0.1637 23.1)", - "#danger-accent-selected-fill": "(base)=oklch(0.9558 0.0084 18.36) | @dark=oklch(0.313 0.0566 20.94) | @dark & @hc=oklch(0.2462 0.0538 21.25) | @hc=oklch(0.932 0.0083 20.21)", - "#danger-accent-surface": "(base)=oklch(0.571 0.1709 23.1) | @dark=oklch(0.5411 0.165 23.1) | @dark & @hc=oklch(0.4642 0.1447 23.1) | @hc=oklch(0.4642 0.1447 23.1)", - "#danger-accent-surface-2": "(base)=oklch(0.5491 0.1667 23.1) | @dark=oklch(0.5196 0.1599 23.1) | @dark & @hc=oklch(0.4642 0.1447 23.1) | @hc=oklch(0.4642 0.1447 23.1)", - "#danger-accent-surface-3": "(base)=oklch(0.5275 0.1618 23.1) | @dark=oklch(0.4982 0.1543 23.1) | @dark & @hc=oklch(0.4642 0.1447 23.1) | @hc=oklch(0.4642 0.1447 23.1)", - "#danger-accent-surface-border": "(base)=oklch(0.6701 0.165 23.1) | @dark=oklch(0.638 0.1746 23.1) | @dark & @hc=oklch(0.557 0.1683 23.1) | @hc=oklch(0.557 0.1683 23.1)", - "#danger-accent-surface-hover": "(base)=oklch(0.5061 0.1564 23.1) | @dark=oklch(0.477 0.1484 23.1) | @dark & @hc=oklch(0.4642 0.1447 23.1) | @hc=oklch(0.4642 0.1447 23.1)", - "#danger-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0187 23.1) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#danger-accent-text": "(base)=oklch(0.4694 0.1463 23.1) | @dark=oklch(0.7668 0.1182 23.1) | @dark & @hc=oklch(0.8767 0.0575 23.1) | @hc=oklch(0.3034 0.0955 23.1)", - "#danger-accent-text-soft": "(base)=oklch(0.5403 0.1648 23.1) | @dark=oklch(0.6937 0.1556 23.1) | @dark & @hc=oklch(0.7522 0.1263 23.1) | @hc=oklch(0.4169 0.1307 23.1)", - "#danger-border": "(base)=oklch(0.8797 0.0203 23.1) | @dark=oklch(0.3376 0.0315 23.1) | @dark & @hc=oklch(0.4494 0.0406 23.1) | @hc=oklch(0.6861 0.0454 23.1)", - "#danger-surface": "(base)=oklch(0.9799 0.0023 23.1) | @dark=oklch(0.2618 0.0165 23.1) | @dark & @hc=oklch(0.1864 0.0118 23.1) | @hc=oklch(0.9581 0.0049 23.1)", - "#danger-surface-text": "(base)=oklch(0.201 0.0159 23.1) | @dark=oklch(0.9571 0.0061 23.1) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#danger-surface-text-soft": "(base)=oklch(0.3783 0.0291 23.1) | @dark=oklch(0.7591 0.032 23.1) | @dark & @hc=oklch(0.787 0.0291 23.1) | @hc=oklch(0.3626 0.0281 23.1)", - "#danger-surface-text-soft-2": "(base)=oklch(0.521 0.0374 23.1) | @dark=oklch(0.6404 0.0395 23.1) | @dark & @hc=oklch(0.7077 0.0364 23.1) | @hc=oklch(0.4355 0.0329 23.1)", - "#disabled": "(base)=oklch(0.8205 0.0376 280.3) | @dark=oklch(0.3859 0.0526 280.3) | @dark & @hc=oklch(0.3412 0.0471 280.3) | @hc=oklch(0.8119 0.0393 280.3)", - "#disabled-surface": "(base)=oklch(0.9633 0.0043 280.3) | @dark=oklch(0.2746 0.0182 280.3) | @dark & @hc=oklch(0.1778 0.0119 280.3) | @hc=oklch(0.9633 0.0043 280.3)", - "#disabled-surface-text": "(base)=oklch(0.7782 0.0348 280.3) | @dark=oklch(0.41 0.0403 280.3) | @dark & @hc=oklch(0.3701 0.037 280.3) | @hc=oklch(0.7782 0.0348 280.3)", - "#focus": "(base)=oklch(0.727 0.1109 280.3) | @dark=oklch(0.4474 0.1478 280.3) | @dark & @hc=oklch(0.4139 0.1391 280.3) | @hc=oklch(0.727 0.1109 280.3)", - "#loading-face-1": "(base)=oklch(0.9789 0.0035 280.3) | @dark=oklch(0.2618 0.0267 280.3) | @dark & @hc=oklch(0.1464 0.0151 280.3) | @hc=oklch(0.9789 0.0035 280.3)", - "#loading-face-2": "(base)=oklch(0.9079 0.0282 280.3) | @dark=oklch(0.3171 0.0727 280.3) | @dark & @hc=oklch(0.2507 0.0579 280.3) | @hc=oklch(0.9079 0.0282 280.3)", - "#loading-face-3": "(base)=oklch(0.7958 0.0659 280.3) | @dark=oklch(0.3974 0.0963 280.3) | @dark & @hc=oklch(0.3551 0.0871 280.3) | @hc=oklch(0.7958 0.0659 280.3)", - "#note-accent-disabled-surface": "(base)=oklch(0.8514 0.0418 302.3) | @dark=oklch(0.3707 0.0657 302.3) | @dark & @hc=oklch(0.3236 0.058 302.3) | @hc=oklch(0.8319 0.0471 302.3)", - "#note-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0627 302.3) | @dark & @hc=oklch(0.4494 0.06 302.3) | @hc=oklch(1 0 0)", - "#note-accent-icon": "(base)=oklch(0.6396 0.1766 302.3) | @dark=oklch(0.5151 0.1859 302.3) | @dark & @hc=oklch(0.5061 0.1842 302.3) | @hc=oklch(0.6234 0.1814 302.3)", - "#note-accent-selected-fill": "(base)=oklch(0.9557 0.0116 301.6) | @dark=oklch(0.3127 0.0733 302.03) | @dark & @hc=oklch(0.246 0.0726 302.08) | @hc=oklch(0.9319 0.011 301.77)", - "#note-accent-surface": "(base)=oklch(0.571 0.2079 302.3) | @dark=oklch(0.5411 0.2072 302.3) | @dark & @hc=oklch(0.4642 0.19 302.3) | @hc=oklch(0.4642 0.19 302.3)", - "#note-accent-surface-2": "(base)=oklch(0.5491 0.2079 302.3) | @dark=oklch(0.5196 0.2041 302.3) | @dark & @hc=oklch(0.4642 0.19 302.3) | @hc=oklch(0.4642 0.19 302.3)", - "#note-accent-surface-3": "(base)=oklch(0.5275 0.2054 302.3) | @dark=oklch(0.4982 0.1995 302.3) | @dark & @hc=oklch(0.4642 0.19 302.3) | @hc=oklch(0.4642 0.19 302.3)", - "#note-accent-surface-border": "(base)=oklch(0.6701 0.1785 302.3) | @dark=oklch(0.638 0.1919 302.3) | @dark & @hc=oklch(0.557 0.2084 302.3) | @hc=oklch(0.557 0.2084 302.3)", - "#note-accent-surface-hover": "(base)=oklch(0.5061 0.2013 302.3) | @dark=oklch(0.477 0.1938 302.3) | @dark & @hc=oklch(0.4642 0.19 302.3) | @hc=oklch(0.4642 0.19 302.3)", - "#note-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0216 302.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#note-accent-text": "(base)=oklch(0.4694 0.1916 302.3) | @dark=oklch(0.7642 0.128 302.3) | @dark & @hc=oklch(0.8744 0.0656 302.3) | @hc=oklch(0.3034 0.1281 302.3)", - "#note-accent-text-soft": "(base)=oklch(0.5402 0.2071 302.3) | @dark=oklch(0.6915 0.168 302.3) | @dark & @hc=oklch(0.7493 0.1365 302.3) | @hc=oklch(0.4169 0.1736 302.3)", - "#note-border": "(base)=oklch(0.8797 0.0211 302.3) | @dark=oklch(0.3376 0.0341 302.3) | @dark & @hc=oklch(0.4494 0.0436 302.3) | @hc=oklch(0.6861 0.0463 302.3)", - "#note-surface": "(base)=oklch(0.9799 0.0024 302.3) | @dark=oklch(0.2618 0.0174 302.3) | @dark & @hc=oklch(0.1864 0.0125 302.3) | @hc=oklch(0.9581 0.0051 302.3)", - "#note-surface-text": "(base)=oklch(0.201 0.017 302.3) | @dark=oklch(0.9571 0.0064 302.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#note-surface-text-soft": "(base)=oklch(0.3783 0.0311 302.3) | @dark=oklch(0.7591 0.0326 302.3) | @dark & @hc=oklch(0.787 0.0297 302.3) | @hc=oklch(0.3626 0.0299 302.3)", - "#note-surface-text-soft-2": "(base)=oklch(0.521 0.0394 302.3) | @dark=oklch(0.6396 0.0403 302.3) | @dark & @hc=oklch(0.7068 0.037 302.3) | @hc=oklch(0.4356 0.0349 302.3)", - "#overlay": "(base)=oklch(0.3023 0.1263 280.3 / 0.5) | @dark=oklch(0.8706 0.0574 280.3 / 0.5) | @dark & @hc=oklch(0.8981 0.0447 280.3 / 0.5) | @hc=oklch(0.2611 0.1093 280.3 / 0.5)", - "#placeholder": "(base)=oklch(0.6941 0.0256 280.3) | @dark=oklch(0.4722 0.0253 280.3) | @dark & @hc=oklch(0.4423 0.0241 280.3) | @hc=oklch(0.6941 0.0256 280.3)", - "#primary-accent-disabled-surface": "(base)=oklch(0.8514 0.0382 280.3) | @dark=oklch(0.3707 0.0653 280.3) | @dark & @hc=oklch(0.3236 0.0577 280.3) | @hc=oklch(0.8319 0.043 280.3)", - "#primary-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.062 280.3) | @dark & @hc=oklch(0.4494 0.0595 280.3) | @hc=oklch(1 0 0)", - "#primary-accent-icon": "(base)=oklch(0.6396 0.1554 280.3) | @dark=oklch(0.5151 0.1761 280.3) | @dark & @hc=oklch(0.5061 0.1756 280.3) | @hc=oklch(0.6234 0.1607 280.3)", - "#primary-accent-selected-fill": "(base)=oklch(0.9557 0.0112 285.73) | @dark=oklch(0.3127 0.0696 282.44) | @dark & @hc=oklch(0.246 0.0719 282.21) | @hc=oklch(0.932 0.0113 284.85)", - "#primary-accent-surface": "(base)=oklch(0.571 0.1871 280.3) | @dark=oklch(0.5411 0.191 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#primary-accent-surface-2": "(base)=oklch(0.5491 0.1903 280.3) | @dark=oklch(0.5196 0.1916 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#primary-accent-surface-3": "(base)=oklch(0.5275 0.1916 280.3) | @dark=oklch(0.4982 0.1906 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#primary-accent-surface-border": "(base)=oklch(0.6701 0.1538 280.3) | @dark=oklch(0.638 0.1673 280.3) | @dark & @hc=oklch(0.557 0.1893 280.3) | @hc=oklch(0.557 0.1893 280.3)", - "#primary-accent-surface-hover": "(base)=oklch(0.5061 0.1912 280.3) | @dark=oklch(0.477 0.1872 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#primary-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0184 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#primary-accent-text": "(base)=oklch(0.4696 0.1855 280.3) | @dark=oklch(0.7608 0.1104 280.3) | @dark & @hc=oklch(0.8731 0.0562 280.3) | @hc=oklch(0.3037 0.1268 280.3)", - "#primary-accent-text-soft": "(base)=oklch(0.5402 0.191 280.3) | @dark=oklch(0.686 0.1466 280.3) | @dark & @hc=oklch(0.7445 0.1184 280.3) | @hc=oklch(0.4171 0.1702 280.3)", - "#primary-border": "(base)=oklch(0.8797 0.0199 280.3) | @dark=oklch(0.3376 0.034 280.3) | @dark & @hc=oklch(0.4494 0.0433 280.3) | @hc=oklch(0.6861 0.0443 280.3)", - "#primary-surface": "(base)=oklch(0.9799 0.0023 280.3) | @dark=oklch(0.2618 0.0174 280.3) | @dark & @hc=oklch(0.1864 0.0125 280.3) | @hc=oklch(0.9581 0.0049 280.3)", - "#primary-surface-text": "(base)=oklch(0.201 0.017 280.3) | @dark=oklch(0.9571 0.0061 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#primary-surface-text-soft": "(base)=oklch(0.3783 0.031 280.3) | @dark=oklch(0.7591 0.0312 280.3) | @dark & @hc=oklch(0.787 0.0283 280.3) | @hc=oklch(0.3626 0.0298 280.3)", - "#primary-surface-text-soft-2": "(base)=oklch(0.521 0.0389 280.3) | @dark=oklch(0.6384 0.0391 280.3) | @dark & @hc=oklch(0.7055 0.0357 280.3) | @hc=oklch(0.4357 0.0348 280.3)", - "#purple-accent-disabled-surface": "(base)=oklch(0.8514 0.0382 280.3) | @dark=oklch(0.3707 0.0653 280.3) | @dark & @hc=oklch(0.3236 0.0577 280.3) | @hc=oklch(0.8319 0.043 280.3)", - "#purple-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.062 280.3) | @dark & @hc=oklch(0.4494 0.0595 280.3) | @hc=oklch(1 0 0)", - "#purple-accent-icon": "(base)=oklch(0.6396 0.1554 280.3) | @dark=oklch(0.5151 0.1761 280.3) | @dark & @hc=oklch(0.5061 0.1756 280.3) | @hc=oklch(0.6234 0.1607 280.3)", - "#purple-accent-selected-fill": "(base)=oklch(0.9557 0.0112 285.73) | @dark=oklch(0.3127 0.0696 282.44) | @dark & @hc=oklch(0.246 0.0719 282.21) | @hc=oklch(0.932 0.0113 284.85)", - "#purple-accent-surface": "(base)=oklch(0.571 0.1871 280.3) | @dark=oklch(0.5411 0.191 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#purple-accent-surface-2": "(base)=oklch(0.5491 0.1903 280.3) | @dark=oklch(0.5196 0.1916 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#purple-accent-surface-3": "(base)=oklch(0.5275 0.1916 280.3) | @dark=oklch(0.4982 0.1906 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#purple-accent-surface-border": "(base)=oklch(0.6701 0.1538 280.3) | @dark=oklch(0.638 0.1673 280.3) | @dark & @hc=oklch(0.557 0.1893 280.3) | @hc=oklch(0.557 0.1893 280.3)", - "#purple-accent-surface-hover": "(base)=oklch(0.5061 0.1912 280.3) | @dark=oklch(0.477 0.1872 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#purple-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0184 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#purple-accent-text": "(base)=oklch(0.4696 0.1855 280.3) | @dark=oklch(0.7608 0.1104 280.3) | @dark & @hc=oklch(0.8731 0.0562 280.3) | @hc=oklch(0.3037 0.1268 280.3)", - "#purple-accent-text-soft": "(base)=oklch(0.5402 0.191 280.3) | @dark=oklch(0.686 0.1466 280.3) | @dark & @hc=oklch(0.7445 0.1184 280.3) | @hc=oklch(0.4171 0.1702 280.3)", - "#purple-border": "(base)=oklch(0.8797 0.0199 280.3) | @dark=oklch(0.3376 0.034 280.3) | @dark & @hc=oklch(0.4494 0.0433 280.3) | @hc=oklch(0.6861 0.0443 280.3)", - "#purple-surface": "(base)=oklch(0.9799 0.0023 280.3) | @dark=oklch(0.2618 0.0174 280.3) | @dark & @hc=oklch(0.1864 0.0125 280.3) | @hc=oklch(0.9581 0.0049 280.3)", - "#purple-surface-text": "(base)=oklch(0.201 0.017 280.3) | @dark=oklch(0.9571 0.0061 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#purple-surface-text-soft": "(base)=oklch(0.3783 0.031 280.3) | @dark=oklch(0.7591 0.0312 280.3) | @dark & @hc=oklch(0.787 0.0283 280.3) | @hc=oklch(0.3626 0.0298 280.3)", - "#purple-surface-text-soft-2": "(base)=oklch(0.521 0.0389 280.3) | @dark=oklch(0.6384 0.0391 280.3) | @dark & @hc=oklch(0.7055 0.0357 280.3) | @hc=oklch(0.4357 0.0348 280.3)", - "#shadow-lg": "(base)=oklch(0.3015 0.0034 280.3 / 0.1971) | @dark=oklch(0.1367 0.0016 280.3) | @dark & @hc=oklch(0 0 0) | @hc=oklch(0.3015 0.0034 280.3 / 0.2185)", - "#shadow-md": "(base)=oklch(0.3015 0.0034 280.3 / 0.1321) | @dark=oklch(0.1367 0.0016 280.3 / 0.8444) | @dark & @hc=oklch(0 0 0) | @hc=oklch(0.3015 0.0034 280.3 / 0.1466)", - "#shadow-sm": "(base)=oklch(0.3015 0.0034 280.3 / 0.0662) | @dark=oklch(0.1367 0.0016 280.3 / 0.4974) | @dark & @hc=oklch(0 0 0) | @hc=oklch(0.3015 0.0034 280.3 / 0.0736)", - "#special-accent-disabled-surface": "(base)=oklch(0.3501 0.062 280.3) | @dark=oklch(0.3689 0.065 280.3) | @dark & @hc=oklch(0.3154 0.0563 280.3) | @hc=oklch(0.3154 0.0563 280.3)", - "#special-accent-disabled-surface-text": "(base)=oklch(0.4802 0.0622 280.3) | @dark=oklch(0.4977 0.0635 280.3) | @dark & @hc=oklch(0.4494 0.0595 280.3) | @hc=oklch(0.4494 0.0595 280.3)", - "#special-accent-surface": "(base)=oklch(0.571 0.1871 280.3) | @dark=oklch(0.5411 0.191 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#special-accent-surface-2": "(base)=oklch(0.5491 0.1903 280.3) | @dark=oklch(0.5196 0.1916 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#special-accent-surface-3": "(base)=oklch(0.5275 0.1916 280.3) | @dark=oklch(0.4982 0.1906 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#special-accent-surface-border": "(base)=oklch(0.6701 0.1538 280.3) | @dark=oklch(0.638 0.1673 280.3) | @dark & @hc=oklch(0.557 0.1893 280.3) | @hc=oklch(0.557 0.1893 280.3)", - "#special-accent-surface-hover": "(base)=oklch(0.5061 0.1912 280.3) | @dark=oklch(0.477 0.1872 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#special-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0184 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#special-accent-text": "(base)=oklch(0.5061 0.1912 280.3) | @dark=oklch(0.477 0.1872 280.3) | @dark & @hc=oklch(0.4642 0.1842 280.3) | @hc=oklch(0.4642 0.1842 280.3)", - "#special-surface": "(base)=oklch(0.3183 0.0535 280.3) | @dark=oklch(0.3382 0.0567 280.3) | @dark & @hc=oklch(0.2804 0.0474 280.3) | @hc=oklch(0.2804 0.0474 280.3)", - "#success-accent-disabled-surface": "(base)=oklch(0.8514 0.0565 156.9) | @dark=oklch(0.3707 0.0436 156.9) | @dark & @hc=oklch(0.3236 0.0382 156.9) | @hc=oklch(0.8319 0.0603 156.9)", - "#success-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0459 156.9) | @dark & @hc=oklch(0.4494 0.0436 156.9) | @hc=oklch(1 0 0)", - "#success-accent-icon": "(base)=oklch(0.6396 0.1157 156.9) | @dark=oklch(0.5151 0.0939 156.9) | @dark & @hc=oklch(0.5061 0.0923 156.9) | @hc=oklch(0.6234 0.1129 156.9)", - "#success-accent-selected-fill": "(base)=oklch(0.9552 0.0058 157.13) | @dark=oklch(0.3095 0.0356 157) | @dark & @hc=oklch(0.2421 0.0323 156.98) | @hc=oklch(0.9317 0.0075 157)", - "#success-accent-surface": "(base)=oklch(0.5533 0.1054 156.9) | @dark=oklch(0.5287 0.1007 156.9) | @dark & @hc=oklch(0.4517 0.0861 156.9) | @hc=oklch(0.4517 0.0861 156.9)", - "#success-accent-surface-2": "(base)=oklch(0.5491 0.1046 156.9) | @dark=oklch(0.5196 0.099 156.9) | @dark & @hc=oklch(0.4517 0.0861 156.9) | @hc=oklch(0.4517 0.0861 156.9)", - "#success-accent-surface-3": "(base)=oklch(0.5275 0.1005 156.9) | @dark=oklch(0.4982 0.0949 156.9) | @dark & @hc=oklch(0.4517 0.0861 156.9) | @hc=oklch(0.4517 0.0861 156.9)", - "#success-accent-surface-border": "(base)=oklch(0.651 0.1239 156.9) | @dark=oklch(0.6248 0.119 156.9) | @dark & @hc=oklch(0.5442 0.1037 156.9) | @hc=oklch(0.5442 0.1037 156.9)", - "#success-accent-surface-hover": "(base)=oklch(0.5061 0.0964 156.9) | @dark=oklch(0.477 0.0909 156.9) | @dark & @hc=oklch(0.4517 0.0861 156.9) | @hc=oklch(0.4517 0.0861 156.9)", - "#success-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0557 156.9) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#success-accent-text": "(base)=oklch(0.4576 0.0872 156.9) | @dark=oklch(0.7578 0.1435 156.9) | @dark & @hc=oklch(0.8723 0.1477 156.9) | @hc=oklch(0.2953 0.0563 156.9)", - "#success-accent-text-soft": "(base)=oklch(0.5233 0.0997 156.9) | @dark=oklch(0.6796 0.1293 156.9) | @dark & @hc=oklch(0.7393 0.1403 156.9) | @hc=oklch(0.4065 0.0775 156.9)", - "#success-border": "(base)=oklch(0.8797 0.0261 156.9) | @dark=oklch(0.3376 0.0264 156.9) | @dark & @hc=oklch(0.4494 0.0342 156.9) | @hc=oklch(0.6861 0.0427 156.9)", - "#success-surface": "(base)=oklch(0.9799 0.0028 156.9) | @dark=oklch(0.2618 0.0146 156.9) | @dark & @hc=oklch(0.1864 0.0105 156.9) | @hc=oklch(0.9581 0.0059 156.9)", - "#success-surface-text": "(base)=oklch(0.201 0.0137 156.9) | @dark=oklch(0.9571 0.0078 156.9) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#success-surface-text-soft": "(base)=oklch(0.3783 0.0251 156.9) | @dark=oklch(0.7591 0.0333 156.9) | @dark & @hc=oklch(0.787 0.0315 156.9) | @hc=oklch(0.3626 0.0242 156.9)", - "#success-surface-text-soft-2": "(base)=oklch(0.521 0.0327 156.9) | @dark=oklch(0.6361 0.0359 156.9) | @dark & @hc=oklch(0.7022 0.0355 156.9) | @hc=oklch(0.4307 0.0282 156.9)", - "#surface": "(base)=oklch(1 0 0) | @dark=oklch(0.2434 0.0095 280.3) | @dark & @hc=oklch(0 0 0) | @hc=oklch(1 0 0)", - "#surface-2": "(base)=oklch(0.9789 0.0013 280.3) | @dark=oklch(0.2618 0.0085 280.3) | @dark & @hc=oklch(0.1864 0.0061 280.3) | @hc=oklch(0.9581 0.0025 280.3)", - "#surface-2-text": "(base)=oklch(0.201 0.0134 280.3) | @dark=oklch(0.9392 0.007 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#surface-2-text-soft": "(base)=oklch(0.4067 0.026 280.3) | @dark=oklch(0.7301 0.0272 280.3) | @dark & @hc=oklch(0.7523 0.0257 280.3) | @hc=oklch(0.3922 0.0252 280.3)", - "#surface-3": "(base)=oklch(0.9581 0.0025 280.3) | @dark=oklch(0.2788 0.009 280.3) | @dark & @hc=oklch(0.2398 0.0078 280.3) | @hc=oklch(0.9178 0.005 280.3)", - "#surface-3-text": "(base)=oklch(0.201 0.0134 280.3) | @dark=oklch(0.9392 0.007 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#surface-3-text-soft": "(base)=oklch(0.4067 0.026 280.3) | @dark=oklch(0.7301 0.0272 280.3) | @dark & @hc=oklch(0.7695 0.0244 280.3) | @hc=oklch(0.3776 0.0244 280.3)", - "#surface-4": "(base)=oklch(0.9378 0.0038 280.3) | @dark=oklch(0.2947 0.0095 280.3) | @dark & @hc=oklch(0.2804 0.009 280.3) | @hc=oklch(0.8788 0.0072 280.3)", - "#surface-inverse": "(base)=oklch(0.3183 0.0535 280.3) | @dark=oklch(0.3382 0.0567 280.3) | @dark & @hc=oklch(0.2804 0.0474 280.3) | @hc=oklch(0.2804 0.0474 280.3)", - "#surface-text": "(base)=oklch(0.201 0.0134 280.3) | @dark=oklch(0.9571 0.005 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#surface-text-soft": "(base)=oklch(0.3922 0.0252 280.3) | @dark=oklch(0.7449 0.0262 280.3) | @dark & @hc=oklch(0.7523 0.0257 280.3) | @hc=oklch(0.3922 0.0252 280.3)", - "#surface-text-soft-2": "(base)=oklch(0.5347 0.0311 280.3) | @dark=oklch(0.6249 0.0314 280.3) | @dark & @hc=oklch(0.6733 0.0301 280.3) | @hc=oklch(0.4642 0.0288 280.3)", - "#warning-accent-disabled-surface": "(base)=oklch(0.8514 0.0519 84.3) | @dark=oklch(0.3707 0.0424 84.3) | @dark & @hc=oklch(0.3236 0.0372 84.3) | @hc=oklch(0.8319 0.0565 84.3)", - "#warning-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0449 84.3) | @dark & @hc=oklch(0.4494 0.0426 84.3) | @hc=oklch(1 0 0)", - "#warning-accent-icon": "(base)=oklch(0.6396 0.1107 84.3) | @dark=oklch(0.5151 0.0901 84.3) | @dark & @hc=oklch(0.5061 0.0885 84.3) | @hc=oklch(0.6234 0.1081 84.3)", - "#warning-accent-selected-fill": "(base)=oklch(0.9557 0.0053 78.45) | @dark=oklch(0.3119 0.0337 81.88) | @dark & @hc=oklch(0.246 0.0311 82.23) | @hc=oklch(0.932 0.007 81.83)", - "#warning-accent-surface": "(base)=oklch(0.5681 0.1035 84.3) | @dark=oklch(0.5381 0.0981 84.3) | @dark & @hc=oklch(0.4642 0.0847 84.3) | @hc=oklch(0.4642 0.0847 84.3)", - "#warning-accent-surface-2": "(base)=oklch(0.5491 0.1001 84.3) | @dark=oklch(0.5196 0.0947 84.3) | @dark & @hc=oklch(0.4642 0.0847 84.3) | @hc=oklch(0.4642 0.0847 84.3)", - "#warning-accent-surface-3": "(base)=oklch(0.5275 0.0962 84.3) | @dark=oklch(0.4982 0.0909 84.3) | @dark & @hc=oklch(0.4642 0.0847 84.3) | @hc=oklch(0.4642 0.0847 84.3)", - "#warning-accent-surface-border": "(base)=oklch(0.6669 0.121 84.3) | @dark=oklch(0.6348 0.1154 84.3) | @dark & @hc=oklch(0.557 0.1015 84.3) | @hc=oklch(0.557 0.1015 84.3)", - "#warning-accent-surface-hover": "(base)=oklch(0.5061 0.0923 84.3) | @dark=oklch(0.477 0.087 84.3) | @dark & @hc=oklch(0.4642 0.0847 84.3) | @hc=oklch(0.4642 0.0847 84.3)", - "#warning-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0386 84.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", - "#warning-accent-text": "(base)=oklch(0.4699 0.0857 84.3) | @dark=oklch(0.7608 0.1343 84.3) | @dark & @hc=oklch(0.8765 0.1078 84.3) | @hc=oklch(0.3041 0.0555 84.3)", - "#warning-accent-text-soft": "(base)=oklch(0.5372 0.0979 84.3) | @dark=oklch(0.6825 0.1236 84.3) | @dark & @hc=oklch(0.7443 0.1326 84.3) | @hc=oklch(0.4175 0.0762 84.3)", - "#warning-border": "(base)=oklch(0.8797 0.0244 84.3) | @dark=oklch(0.3376 0.026 84.3) | @dark & @hc=oklch(0.4494 0.0336 84.3) | @hc=oklch(0.6861 0.042 84.3)", - "#warning-surface": "(base)=oklch(0.9799 0.0027 84.3) | @dark=oklch(0.2618 0.0144 84.3) | @dark & @hc=oklch(0.1864 0.0103 84.3) | @hc=oklch(0.9581 0.0057 84.3)", - "#warning-surface-text": "(base)=oklch(0.201 0.0135 84.3) | @dark=oklch(0.9571 0.0074 84.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", - "#warning-surface-text-soft": "(base)=oklch(0.3783 0.0248 84.3) | @dark=oklch(0.7591 0.0328 84.3) | @dark & @hc=oklch(0.787 0.0309 84.3) | @hc=oklch(0.3626 0.0238 84.3)", - "#warning-surface-text-soft-2": "(base)=oklch(0.521 0.0323 84.3) | @dark=oklch(0.6375 0.0354 84.3) | @dark & @hc=oklch(0.7045 0.035 84.3) | @hc=oklch(0.4359 0.0281 84.3)", + "#accent-disabled-surface": "(base)=oklch(0.8693 0.0318 280.3) | @dark=oklch(0.3575 0.0304 280.3) | @dark & @hc=oklch(0.2896 0.0246 280.3) | @hc=oklch(0.8693 0.0318 280.3)", + "#accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4517 0.0307 280.3) | @dark & @hc=oklch(0.3922 0.0267 280.3) | @hc=oklch(1 0 0)", + "#accent-icon": "(base)=oklch(0.6544 0.1043 280.3) | @dark=oklch(0.5032 0.0802 280.3) | @dark & @hc=oklch(0.4777 0.0761 280.3) | @hc=oklch(0.6544 0.1043 280.3)", + "#accent-selected-fill": "(base)=oklch(0.975 0.0037 284.4) | @dark=oklch(0.3004 0.0314 281.68) | @dark & @hc=oklch(0.208 0.0354 280.3) | @hc=oklch(0.9722 0.002 284.43)", + "#accent-surface": "(base)=oklch(0.571 0.0971 280.3) | @dark=oklch(0.5377 0.0914 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#accent-surface-2": "(base)=oklch(0.5491 0.0934 280.3) | @dark=oklch(0.5196 0.0883 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#accent-surface-3": "(base)=oklch(0.5275 0.0897 280.3) | @dark=oklch(0.4982 0.0847 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#accent-surface-border": "(base)=oklch(0.6701 0.1139 280.3) | @dark=oklch(0.6343 0.1078 280.3) | @dark & @hc=oklch(0.557 0.0947 280.3) | @hc=oklch(0.557 0.0947 280.3)", + "#accent-surface-hover": "(base)=oklch(0.5061 0.086 280.3) | @dark=oklch(0.477 0.0811 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#accent-text": "(base)=oklch(0.4831 0.0821 280.3) | @dark=oklch(0.7528 0.1261 280.3) | @dark & @hc=oklch(0.8481 0.0746 280.3) | @hc=oklch(0.3364 0.0572 280.3)", + "#accent-text-soft": "(base)=oklch(0.5506 0.0936 280.3) | @dark=oklch(0.6748 0.1147 280.3) | @dark & @hc=oklch(0.7217 0.1227 280.3) | @hc=oklch(0.4455 0.0757 280.3)", + "#border": "(base)=oklch(0.8981 0.0086 280.3) | @dark=oklch(0.3243 0.0096 280.3) | @dark & @hc=oklch(0.421 0.0125 280.3) | @hc=oklch(0.7187 0.0214 280.3)", + "#code-attribute": "(base)=oklch(0.5562 0.0847 200) | @dark=oklch(0.621 0.0944 200) | @dark & @hc=oklch(0.6694 0.1016 200) | @hc=oklch(0.4541 0.0691 200)", + "#code-comment": "(base)=oklch(0.5637 0.0155 280) | @dark=oklch(0.6241 0.0155 280) | @dark & @hc=oklch(0.6726 0.015 280) | @hc=oklch(0.4642 0.014 280)", + "#code-function": "(base)=oklch(0.5347 0.1938 348) | @dark=oklch(0.6503 0.2034 348) | @dark & @hc=oklch(0.6961 0.1833 348) | @hc=oklch(0.4642 0.1723 348)", + "#code-keyword": "(base)=oklch(0.5347 0.1938 348) | @dark=oklch(0.6503 0.2034 348) | @dark & @hc=oklch(0.6961 0.1833 348) | @hc=oklch(0.4642 0.1723 348)", + "#code-number": "(base)=oklch(0.5541 0.0988 156) | @dark=oklch(0.621 0.1099 156) | @dark & @hc=oklch(0.6694 0.1174 156) | @hc=oklch(0.4523 0.0811 156)", + "#code-punctuation": "(base)=oklch(0.5637 0.0671 348) | @dark=oklch(0.6323 0.0683 348) | @dark & @hc=oklch(0.6804 0.0655 348) | @hc=oklch(0.4642 0.0595 348)", + "#code-string": "(base)=oklch(0.5637 0.1884 280.3) | @dark=oklch(0.6352 0.1684 280.3) | @dark & @hc=oklch(0.6814 0.1487 280.3) | @hc=oklch(0.4642 0.1842 280.3)", + "#danger-accent-disabled-surface": "(base)=oklch(0.8514 0.0364 23.1) | @dark=oklch(0.3707 0.0315 23.1) | @dark & @hc=oklch(0.3236 0.0275 23.1) | @hc=oklch(0.8319 0.0415 23.1)", + "#danger-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0325 23.1) | @dark & @hc=oklch(0.4494 0.0306 23.1) | @hc=oklch(1 0 0)", + "#danger-accent-icon": "(base)=oklch(0.6396 0.1019 23.1) | @dark=oklch(0.5151 0.0821 23.1) | @dark & @hc=oklch(0.5061 0.0807 23.1) | @hc=oklch(0.6234 0.0994 23.1)", + "#danger-accent-selected-fill": "(base)=oklch(0.9558 0.0051 20.59) | @dark=oklch(0.3128 0.031 21.88) | @dark & @hc=oklch(0.2461 0.029 22.1) | @hc=oklch(0.932 0.0057 21.84)", + "#danger-accent-surface": "(base)=oklch(0.571 0.0971 23.1) | @dark=oklch(0.5411 0.092 23.1) | @dark & @hc=oklch(0.4642 0.0789 23.1) | @hc=oklch(0.4642 0.0789 23.1)", + "#danger-accent-surface-2": "(base)=oklch(0.5491 0.0934 23.1) | @dark=oklch(0.5196 0.0883 23.1) | @dark & @hc=oklch(0.4642 0.0789 23.1) | @hc=oklch(0.4642 0.0789 23.1)", + "#danger-accent-surface-3": "(base)=oklch(0.5275 0.0897 23.1) | @dark=oklch(0.4982 0.0847 23.1) | @dark & @hc=oklch(0.4642 0.0789 23.1) | @hc=oklch(0.4642 0.0789 23.1)", + "#danger-accent-surface-border": "(base)=oklch(0.6701 0.1139 23.1) | @dark=oklch(0.638 0.1085 23.1) | @dark & @hc=oklch(0.557 0.0947 23.1) | @hc=oklch(0.557 0.0947 23.1)", + "#danger-accent-surface-hover": "(base)=oklch(0.5061 0.086 23.1) | @dark=oklch(0.477 0.0811 23.1) | @dark & @hc=oklch(0.4642 0.0789 23.1) | @hc=oklch(0.4642 0.0789 23.1)", + "#danger-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 23.1) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#danger-accent-text": "(base)=oklch(0.4696 0.0798 23.1) | @dark=oklch(0.7697 0.1167 23.1) | @dark & @hc=oklch(0.8793 0.0586 23.1) | @hc=oklch(0.3036 0.0516 23.1)", + "#danger-accent-text-soft": "(base)=oklch(0.5402 0.0918 23.1) | @dark=oklch(0.6918 0.1176 23.1) | @dark & @hc=oklch(0.7543 0.1252 23.1) | @hc=oklch(0.4171 0.0709 23.1)", + "#danger-border": "(base)=oklch(0.8797 0.0175 23.1) | @dark=oklch(0.3376 0.0172 23.1) | @dark & @hc=oklch(0.4494 0.0229 23.1) | @hc=oklch(0.6861 0.035 23.1)", + "#danger-surface": "(base)=oklch(0.9799 0.0019 23.1) | @dark=oklch(0.2618 0.0089 23.1) | @dark & @hc=oklch(0.1864 0.0063 23.1) | @hc=oklch(0.9581 0.0039 23.1)", + "#danger-surface-text": "(base)=oklch(0.201 0.0085 23.1) | @dark=oklch(0.9571 0.005 23.1) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#danger-surface-text-soft": "(base)=oklch(0.3783 0.0161 23.1) | @dark=oklch(0.7591 0.0306 23.1) | @dark & @hc=oklch(0.787 0.0268 23.1) | @hc=oklch(0.3626 0.0154 23.1)", + "#danger-surface-text-soft-2": "(base)=oklch(0.521 0.0221 23.1) | @dark=oklch(0.6396 0.0272 23.1) | @dark & @hc=oklch(0.7073 0.0301 23.1) | @hc=oklch(0.4356 0.0185 23.1)", + "#disabled": "(base)=oklch(0.8205 0.0356 280.3) | @dark=oklch(0.3859 0.0262 280.3) | @dark & @hc=oklch(0.3412 0.0232 280.3) | @hc=oklch(0.8119 0.0375 280.3)", + "#disabled-surface": "(base)=oklch(0.9633 0.0034 280.3) | @dark=oklch(0.2746 0.0093 280.3) | @dark & @hc=oklch(0.1778 0.006 280.3) | @hc=oklch(0.9633 0.0034 280.3)", + "#disabled-surface-text": "(base)=oklch(0.7782 0.0336 280.3) | @dark=oklch(0.41 0.0209 280.3) | @dark & @hc=oklch(0.3701 0.0189 280.3) | @hc=oklch(0.7782 0.0336 280.3)", + "#focus": "(base)=oklch(0.727 0.1066 280.3) | @dark=oklch(0.4474 0.0656 280.3) | @dark & @hc=oklch(0.4139 0.0607 280.3) | @hc=oklch(0.727 0.1066 280.3)", + "#loading-face-1": "(base)=oklch(0.9789 0.003 280.3) | @dark=oklch(0.2618 0.0134 280.3) | @dark & @hc=oklch(0.1464 0.0075 280.3) | @hc=oklch(0.9789 0.003 280.3)", + "#loading-face-2": "(base)=oklch(0.9079 0.0274 280.3) | @dark=oklch(0.3171 0.0334 280.3) | @dark & @hc=oklch(0.2507 0.0264 280.3) | @hc=oklch(0.9079 0.0274 280.3)", + "#loading-face-3": "(base)=oklch(0.7958 0.0676 280.3) | @dark=oklch(0.3974 0.0446 280.3) | @dark & @hc=oklch(0.3551 0.0398 280.3) | @hc=oklch(0.7958 0.0676 280.3)", + "#note-accent-disabled-surface": "(base)=oklch(0.8514 0.0364 302.3) | @dark=oklch(0.3707 0.0315 302.3) | @dark & @hc=oklch(0.3236 0.0275 302.3) | @hc=oklch(0.8319 0.0415 302.3)", + "#note-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0325 302.3) | @dark & @hc=oklch(0.4494 0.0306 302.3) | @hc=oklch(1 0 0)", + "#note-accent-icon": "(base)=oklch(0.6396 0.1019 302.3) | @dark=oklch(0.5151 0.0821 302.3) | @dark & @hc=oklch(0.5061 0.0807 302.3) | @hc=oklch(0.6234 0.0994 302.3)", + "#note-accent-selected-fill": "(base)=oklch(0.9557 0.0054 301.99) | @dark=oklch(0.3127 0.0318 302.17) | @dark & @hc=oklch(0.246 0.0296 302.2) | @hc=oklch(0.932 0.0058 302.14)", + "#note-accent-surface": "(base)=oklch(0.571 0.0971 302.3) | @dark=oklch(0.5411 0.092 302.3) | @dark & @hc=oklch(0.4642 0.0789 302.3) | @hc=oklch(0.4642 0.0789 302.3)", + "#note-accent-surface-2": "(base)=oklch(0.5491 0.0934 302.3) | @dark=oklch(0.5196 0.0883 302.3) | @dark & @hc=oklch(0.4642 0.0789 302.3) | @hc=oklch(0.4642 0.0789 302.3)", + "#note-accent-surface-3": "(base)=oklch(0.5275 0.0897 302.3) | @dark=oklch(0.4982 0.0847 302.3) | @dark & @hc=oklch(0.4642 0.0789 302.3) | @hc=oklch(0.4642 0.0789 302.3)", + "#note-accent-surface-border": "(base)=oklch(0.6701 0.1139 302.3) | @dark=oklch(0.638 0.1085 302.3) | @dark & @hc=oklch(0.557 0.0947 302.3) | @hc=oklch(0.557 0.0947 302.3)", + "#note-accent-surface-hover": "(base)=oklch(0.5061 0.086 302.3) | @dark=oklch(0.477 0.0811 302.3) | @dark & @hc=oklch(0.4642 0.0789 302.3) | @hc=oklch(0.4642 0.0789 302.3)", + "#note-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 302.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#note-accent-text": "(base)=oklch(0.4697 0.0799 302.3) | @dark=oklch(0.7678 0.1177 302.3) | @dark & @hc=oklch(0.8782 0.0591 302.3) | @hc=oklch(0.3037 0.0516 302.3)", + "#note-accent-text-soft": "(base)=oklch(0.5402 0.0918 302.3) | @dark=oklch(0.6898 0.1173 302.3) | @dark & @hc=oklch(0.752 0.1265 302.3) | @hc=oklch(0.4172 0.0709 302.3)", + "#note-border": "(base)=oklch(0.8797 0.0175 302.3) | @dark=oklch(0.3376 0.0172 302.3) | @dark & @hc=oklch(0.4494 0.0229 302.3) | @hc=oklch(0.6861 0.035 302.3)", + "#note-surface": "(base)=oklch(0.9799 0.0019 302.3) | @dark=oklch(0.2618 0.0089 302.3) | @dark & @hc=oklch(0.1864 0.0063 302.3) | @hc=oklch(0.9581 0.0039 302.3)", + "#note-surface-text": "(base)=oklch(0.201 0.0085 302.3) | @dark=oklch(0.9571 0.005 302.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#note-surface-text-soft": "(base)=oklch(0.3783 0.0161 302.3) | @dark=oklch(0.7591 0.0306 302.3) | @dark & @hc=oklch(0.787 0.0268 302.3) | @hc=oklch(0.3626 0.0154 302.3)", + "#note-surface-text-soft-2": "(base)=oklch(0.521 0.0221 302.3) | @dark=oklch(0.6389 0.0272 302.3) | @dark & @hc=oklch(0.7065 0.03 302.3) | @hc=oklch(0.4356 0.0185 302.3)", + "#overlay": "(base)=oklch(0.3023 0.0514 280.3 / 0.5) | @dark=oklch(0.8706 0.063 280.3 / 0.5) | @dark & @hc=oklch(0.8981 0.049 280.3 / 0.5) | @hc=oklch(0.2611 0.0444 280.3 / 0.5)", + "#placeholder": "(base)=oklch(0.6941 0.0207 280.3) | @dark=oklch(0.4722 0.014 280.3) | @dark & @hc=oklch(0.4423 0.0132 280.3) | @hc=oklch(0.6941 0.0207 280.3)", + "#primary-accent-disabled-surface": "(base)=oklch(0.8514 0.0364 280.3) | @dark=oklch(0.3707 0.0315 280.3) | @dark & @hc=oklch(0.3236 0.0275 280.3) | @hc=oklch(0.8319 0.0415 280.3)", + "#primary-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0325 280.3) | @dark & @hc=oklch(0.4494 0.0306 280.3) | @hc=oklch(1 0 0)", + "#primary-accent-icon": "(base)=oklch(0.6396 0.1019 280.3) | @dark=oklch(0.5151 0.0821 280.3) | @dark & @hc=oklch(0.5061 0.0807 280.3) | @hc=oklch(0.6234 0.0994 280.3)", + "#primary-accent-selected-fill": "(base)=oklch(0.9557 0.0057 283.04) | @dark=oklch(0.3118 0.0319 281.47) | @dark & @hc=oklch(0.246 0.0299 281.22) | @hc=oklch(0.932 0.006 281.74)", + "#primary-accent-surface": "(base)=oklch(0.571 0.0971 280.3) | @dark=oklch(0.5377 0.0914 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#primary-accent-surface-2": "(base)=oklch(0.5491 0.0934 280.3) | @dark=oklch(0.5196 0.0883 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#primary-accent-surface-3": "(base)=oklch(0.5275 0.0897 280.3) | @dark=oklch(0.4982 0.0847 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#primary-accent-surface-border": "(base)=oklch(0.6701 0.1139 280.3) | @dark=oklch(0.6343 0.1078 280.3) | @dark & @hc=oklch(0.557 0.0947 280.3) | @hc=oklch(0.557 0.0947 280.3)", + "#primary-accent-surface-hover": "(base)=oklch(0.5061 0.086 280.3) | @dark=oklch(0.477 0.0811 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#primary-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#primary-accent-text": "(base)=oklch(0.4699 0.0799 280.3) | @dark=oklch(0.7636 0.12 280.3) | @dark & @hc=oklch(0.8768 0.0598 280.3) | @hc=oklch(0.3039 0.0517 280.3)", + "#primary-accent-text-soft": "(base)=oklch(0.5371 0.0913 280.3) | @dark=oklch(0.6855 0.1165 280.3) | @dark & @hc=oklch(0.7481 0.1272 280.3) | @hc=oklch(0.4173 0.071 280.3)", + "#primary-border": "(base)=oklch(0.8797 0.0175 280.3) | @dark=oklch(0.3376 0.0172 280.3) | @dark & @hc=oklch(0.4494 0.0229 280.3) | @hc=oklch(0.6861 0.035 280.3)", + "#primary-surface": "(base)=oklch(0.9799 0.0019 280.3) | @dark=oklch(0.2618 0.0089 280.3) | @dark & @hc=oklch(0.1864 0.0063 280.3) | @hc=oklch(0.9581 0.0039 280.3)", + "#primary-surface-text": "(base)=oklch(0.201 0.0085 280.3) | @dark=oklch(0.9571 0.005 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#primary-surface-text-soft": "(base)=oklch(0.3783 0.0161 280.3) | @dark=oklch(0.7591 0.0306 280.3) | @dark & @hc=oklch(0.787 0.0268 280.3) | @hc=oklch(0.3626 0.0154 280.3)", + "#primary-surface-text-soft-2": "(base)=oklch(0.521 0.0221 280.3) | @dark=oklch(0.6381 0.0271 280.3) | @dark & @hc=oklch(0.7054 0.03 280.3) | @hc=oklch(0.4358 0.0185 280.3)", + "#purple-accent-disabled-surface": "(base)=oklch(0.8514 0.0364 280.3) | @dark=oklch(0.3707 0.0315 280.3) | @dark & @hc=oklch(0.3236 0.0275 280.3) | @hc=oklch(0.8319 0.0415 280.3)", + "#purple-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0325 280.3) | @dark & @hc=oklch(0.4494 0.0306 280.3) | @hc=oklch(1 0 0)", + "#purple-accent-icon": "(base)=oklch(0.6396 0.1019 280.3) | @dark=oklch(0.5151 0.0821 280.3) | @dark & @hc=oklch(0.5061 0.0807 280.3) | @hc=oklch(0.6234 0.0994 280.3)", + "#purple-accent-selected-fill": "(base)=oklch(0.9557 0.0057 283.04) | @dark=oklch(0.3118 0.0319 281.47) | @dark & @hc=oklch(0.246 0.0299 281.22) | @hc=oklch(0.932 0.006 281.74)", + "#purple-accent-surface": "(base)=oklch(0.571 0.0971 280.3) | @dark=oklch(0.5377 0.0914 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#purple-accent-surface-2": "(base)=oklch(0.5491 0.0934 280.3) | @dark=oklch(0.5196 0.0883 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#purple-accent-surface-3": "(base)=oklch(0.5275 0.0897 280.3) | @dark=oklch(0.4982 0.0847 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#purple-accent-surface-border": "(base)=oklch(0.6701 0.1139 280.3) | @dark=oklch(0.6343 0.1078 280.3) | @dark & @hc=oklch(0.557 0.0947 280.3) | @hc=oklch(0.557 0.0947 280.3)", + "#purple-accent-surface-hover": "(base)=oklch(0.5061 0.086 280.3) | @dark=oklch(0.477 0.0811 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#purple-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#purple-accent-text": "(base)=oklch(0.4699 0.0799 280.3) | @dark=oklch(0.7636 0.12 280.3) | @dark & @hc=oklch(0.8768 0.0598 280.3) | @hc=oklch(0.3039 0.0517 280.3)", + "#purple-accent-text-soft": "(base)=oklch(0.5371 0.0913 280.3) | @dark=oklch(0.6855 0.1165 280.3) | @dark & @hc=oklch(0.7481 0.1272 280.3) | @hc=oklch(0.4173 0.071 280.3)", + "#purple-border": "(base)=oklch(0.8797 0.0175 280.3) | @dark=oklch(0.3376 0.0172 280.3) | @dark & @hc=oklch(0.4494 0.0229 280.3) | @hc=oklch(0.6861 0.035 280.3)", + "#purple-surface": "(base)=oklch(0.9799 0.0019 280.3) | @dark=oklch(0.2618 0.0089 280.3) | @dark & @hc=oklch(0.1864 0.0063 280.3) | @hc=oklch(0.9581 0.0039 280.3)", + "#purple-surface-text": "(base)=oklch(0.201 0.0085 280.3) | @dark=oklch(0.9571 0.005 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#purple-surface-text-soft": "(base)=oklch(0.3783 0.0161 280.3) | @dark=oklch(0.7591 0.0306 280.3) | @dark & @hc=oklch(0.787 0.0268 280.3) | @hc=oklch(0.3626 0.0154 280.3)", + "#purple-surface-text-soft-2": "(base)=oklch(0.521 0.0221 280.3) | @dark=oklch(0.6381 0.0271 280.3) | @dark & @hc=oklch(0.7054 0.03 280.3) | @hc=oklch(0.4358 0.0185 280.3)", + "#shadow-lg": "(base)=oklch(0.3015 0.0018 280.3 / 0.1971) | @dark=oklch(0.1367 0.0008 280.3) | @dark & @hc=oklch(0 0 0) | @hc=oklch(0.3015 0.0018 280.3 / 0.2185)", + "#shadow-md": "(base)=oklch(0.3015 0.0018 280.3 / 0.1321) | @dark=oklch(0.1367 0.0008 280.3 / 0.8444) | @dark & @hc=oklch(0 0 0) | @hc=oklch(0.3015 0.0018 280.3 / 0.1466)", + "#shadow-sm": "(base)=oklch(0.3015 0.0018 280.3 / 0.0662) | @dark=oklch(0.1367 0.0008 280.3 / 0.4974) | @dark & @hc=oklch(0 0 0) | @hc=oklch(0.3015 0.0018 280.3 / 0.0736)", + "#special-accent-disabled-surface": "(base)=oklch(0.3501 0.0298 280.3) | @dark=oklch(0.3689 0.0314 280.3) | @dark & @hc=oklch(0.3154 0.0268 280.3) | @hc=oklch(0.3154 0.0268 280.3)", + "#special-accent-disabled-surface-text": "(base)=oklch(0.4802 0.0327 280.3) | @dark=oklch(0.4977 0.0338 280.3) | @dark & @hc=oklch(0.4494 0.0306 280.3) | @hc=oklch(0.4494 0.0306 280.3)", + "#special-accent-surface": "(base)=oklch(0.571 0.0971 280.3) | @dark=oklch(0.5377 0.0914 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#special-accent-surface-2": "(base)=oklch(0.5491 0.0934 280.3) | @dark=oklch(0.5196 0.0883 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#special-accent-surface-3": "(base)=oklch(0.5275 0.0897 280.3) | @dark=oklch(0.4982 0.0847 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#special-accent-surface-border": "(base)=oklch(0.6701 0.1139 280.3) | @dark=oklch(0.6343 0.1078 280.3) | @dark & @hc=oklch(0.557 0.0947 280.3) | @hc=oklch(0.557 0.0947 280.3)", + "#special-accent-surface-hover": "(base)=oklch(0.5061 0.086 280.3) | @dark=oklch(0.477 0.0811 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#special-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#special-accent-text": "(base)=oklch(0.5061 0.086 280.3) | @dark=oklch(0.477 0.0811 280.3) | @dark & @hc=oklch(0.4642 0.0789 280.3) | @hc=oklch(0.4642 0.0789 280.3)", + "#special-surface": "(base)=oklch(0.3183 0.0257 280.3) | @dark=oklch(0.3382 0.0273 280.3) | @dark & @hc=oklch(0.2804 0.0226 280.3) | @hc=oklch(0.2804 0.0226 280.3)", + "#success-accent-disabled-surface": "(base)=oklch(0.8514 0.0364 156.9) | @dark=oklch(0.3707 0.0315 156.9) | @dark & @hc=oklch(0.3236 0.0275 156.9) | @hc=oklch(0.8319 0.0415 156.9)", + "#success-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0325 156.9) | @dark & @hc=oklch(0.4494 0.0306 156.9) | @hc=oklch(1 0 0)", + "#success-accent-icon": "(base)=oklch(0.6396 0.1019 156.9) | @dark=oklch(0.5151 0.0821 156.9) | @dark & @hc=oklch(0.5061 0.0807 156.9) | @hc=oklch(0.6234 0.0994 156.9)", + "#success-accent-selected-fill": "(base)=oklch(0.9552 0.0045 157.13) | @dark=oklch(0.309 0.0289 157.02) | @dark & @hc=oklch(0.2424 0.0273 157) | @hc=oklch(0.9317 0.0054 157.01)", + "#success-accent-surface": "(base)=oklch(0.5545 0.0943 156.9) | @dark=oklch(0.527 0.0896 156.9) | @dark & @hc=oklch(0.4528 0.077 156.9) | @hc=oklch(0.4528 0.077 156.9)", + "#success-accent-surface-2": "(base)=oklch(0.5491 0.0934 156.9) | @dark=oklch(0.5196 0.0883 156.9) | @dark & @hc=oklch(0.4528 0.077 156.9) | @hc=oklch(0.4528 0.077 156.9)", + "#success-accent-surface-3": "(base)=oklch(0.5275 0.0897 156.9) | @dark=oklch(0.4982 0.0847 156.9) | @dark & @hc=oklch(0.4528 0.077 156.9) | @hc=oklch(0.4528 0.077 156.9)", + "#success-accent-surface-border": "(base)=oklch(0.6524 0.1109 156.9) | @dark=oklch(0.6229 0.1059 156.9) | @dark & @hc=oklch(0.5453 0.0927 156.9) | @hc=oklch(0.5453 0.0927 156.9)", + "#success-accent-surface-hover": "(base)=oklch(0.5061 0.086 156.9) | @dark=oklch(0.477 0.0811 156.9) | @dark & @hc=oklch(0.4528 0.077 156.9) | @hc=oklch(0.4528 0.077 156.9)", + "#success-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 156.9) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#success-accent-text": "(base)=oklch(0.4585 0.078 156.9) | @dark=oklch(0.7566 0.1239 156.9) | @dark & @hc=oklch(0.872 0.0622 156.9) | @hc=oklch(0.2957 0.0503 156.9)", + "#success-accent-text-soft": "(base)=oklch(0.5244 0.0892 156.9) | @dark=oklch(0.6785 0.1153 156.9) | @dark & @hc=oklch(0.7391 0.1257 156.9) | @hc=oklch(0.4073 0.0692 156.9)", + "#success-border": "(base)=oklch(0.8797 0.0175 156.9) | @dark=oklch(0.3376 0.0172 156.9) | @dark & @hc=oklch(0.4494 0.0229 156.9) | @hc=oklch(0.6861 0.035 156.9)", + "#success-surface": "(base)=oklch(0.9799 0.0019 156.9) | @dark=oklch(0.2618 0.0089 156.9) | @dark & @hc=oklch(0.1864 0.0063 156.9) | @hc=oklch(0.9581 0.0039 156.9)", + "#success-surface-text": "(base)=oklch(0.201 0.0085 156.9) | @dark=oklch(0.9571 0.005 156.9) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#success-surface-text-soft": "(base)=oklch(0.3783 0.0161 156.9) | @dark=oklch(0.7591 0.0306 156.9) | @dark & @hc=oklch(0.787 0.0268 156.9) | @hc=oklch(0.3626 0.0154 156.9)", + "#success-surface-text-soft-2": "(base)=oklch(0.521 0.0221 156.9) | @dark=oklch(0.6356 0.027 156.9) | @dark & @hc=oklch(0.702 0.0298 156.9) | @hc=oklch(0.4316 0.0183 156.9)", + "#surface": "(base)=oklch(1 0 0) | @dark=oklch(0.2434 0.005 280.3) | @dark & @hc=oklch(0 0 0) | @hc=oklch(1 0 0)", + "#surface-2": "(base)=oklch(0.9789 0.001 280.3) | @dark=oklch(0.2618 0.0045 280.3) | @dark & @hc=oklch(0.1864 0.0032 280.3) | @hc=oklch(0.9581 0.002 280.3)", + "#surface-2-text": "(base)=oklch(0.201 0.0068 280.3) | @dark=oklch(0.9392 0.0058 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#surface-2-text-soft": "(base)=oklch(0.4067 0.0138 280.3) | @dark=oklch(0.7301 0.0248 280.3) | @dark & @hc=oklch(0.7523 0.0253 280.3) | @hc=oklch(0.3922 0.0133 280.3)", + "#surface-3": "(base)=oklch(0.9581 0.002 280.3) | @dark=oklch(0.2788 0.0047 280.3) | @dark & @hc=oklch(0.2398 0.0041 280.3) | @hc=oklch(0.9178 0.0039 280.3)", + "#surface-3-text": "(base)=oklch(0.201 0.0068 280.3) | @dark=oklch(0.9392 0.0058 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#surface-3-text-soft": "(base)=oklch(0.4067 0.0138 280.3) | @dark=oklch(0.7301 0.0248 280.3) | @dark & @hc=oklch(0.7695 0.0234 280.3) | @hc=oklch(0.3776 0.0128 280.3)", + "#surface-4": "(base)=oklch(0.9378 0.0029 280.3) | @dark=oklch(0.2947 0.005 280.3) | @dark & @hc=oklch(0.2804 0.0048 280.3) | @hc=oklch(0.8788 0.0059 280.3)", + "#surface-inverse": "(base)=oklch(0.3183 0.0257 280.3) | @dark=oklch(0.3382 0.0273 280.3) | @dark & @hc=oklch(0.2804 0.0226 280.3) | @hc=oklch(0.2804 0.0226 280.3)", + "#surface-text": "(base)=oklch(0.201 0.0068 280.3) | @dark=oklch(0.9571 0.004 280.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#surface-text-soft": "(base)=oklch(0.3922 0.0133 280.3) | @dark=oklch(0.7449 0.0253 280.3) | @dark & @hc=oklch(0.7523 0.0253 280.3) | @hc=oklch(0.3922 0.0133 280.3)", + "#surface-text-soft-2": "(base)=oklch(0.5347 0.0182 280.3) | @dark=oklch(0.6246 0.0212 280.3) | @dark & @hc=oklch(0.6729 0.0229 280.3) | @hc=oklch(0.4642 0.0158 280.3)", + "#warning-accent-disabled-surface": "(base)=oklch(0.8514 0.0364 84.3) | @dark=oklch(0.3707 0.0315 84.3) | @dark & @hc=oklch(0.3236 0.0275 84.3) | @hc=oklch(0.8319 0.0415 84.3)", + "#warning-accent-disabled-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.4775 0.0325 84.3) | @dark & @hc=oklch(0.4494 0.0306 84.3) | @hc=oklch(1 0 0)", + "#warning-accent-icon": "(base)=oklch(0.6396 0.1019 84.3) | @dark=oklch(0.5151 0.0821 84.3) | @dark & @hc=oklch(0.5061 0.0807 84.3) | @hc=oklch(0.6234 0.0994 84.3)", + "#warning-accent-selected-fill": "(base)=oklch(0.9557 0.0043 78) | @dark=oklch(0.312 0.0282 81.08) | @dark & @hc=oklch(0.246 0.027 81.63) | @hc=oklch(0.932 0.0052 81.38)", + "#warning-accent-surface": "(base)=oklch(0.5681 0.0966 84.3) | @dark=oklch(0.5382 0.0915 84.3) | @dark & @hc=oklch(0.4642 0.0789 84.3) | @hc=oklch(0.4642 0.0789 84.3)", + "#warning-accent-surface-2": "(base)=oklch(0.5491 0.0934 84.3) | @dark=oklch(0.5196 0.0883 84.3) | @dark & @hc=oklch(0.4642 0.0789 84.3) | @hc=oklch(0.4642 0.0789 84.3)", + "#warning-accent-surface-3": "(base)=oklch(0.5275 0.0897 84.3) | @dark=oklch(0.4982 0.0847 84.3) | @dark & @hc=oklch(0.4642 0.0789 84.3) | @hc=oklch(0.4642 0.0789 84.3)", + "#warning-accent-surface-border": "(base)=oklch(0.6669 0.1134 84.3) | @dark=oklch(0.6349 0.1079 84.3) | @dark & @hc=oklch(0.557 0.0947 84.3) | @hc=oklch(0.557 0.0947 84.3)", + "#warning-accent-surface-hover": "(base)=oklch(0.5061 0.086 84.3) | @dark=oklch(0.477 0.0811 84.3) | @dark & @hc=oklch(0.4642 0.0789 84.3) | @hc=oklch(0.4642 0.0789 84.3)", + "#warning-accent-surface-text": "(base)=oklch(1 0 0) | @dark=oklch(0.9571 0.0202 84.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(1 0 0)", + "#warning-accent-text": "(base)=oklch(0.4699 0.0799 84.3) | @dark=oklch(0.7605 0.1218 84.3) | @dark & @hc=oklch(0.8755 0.0604 84.3) | @hc=oklch(0.3041 0.0517 84.3)", + "#warning-accent-text-soft": "(base)=oklch(0.5372 0.0913 84.3) | @dark=oklch(0.6823 0.116 84.3) | @dark & @hc=oklch(0.7442 0.1265 84.3) | @hc=oklch(0.4175 0.071 84.3)", + "#warning-border": "(base)=oklch(0.8797 0.0175 84.3) | @dark=oklch(0.3376 0.0172 84.3) | @dark & @hc=oklch(0.4494 0.0229 84.3) | @hc=oklch(0.6861 0.035 84.3)", + "#warning-surface": "(base)=oklch(0.9799 0.0019 84.3) | @dark=oklch(0.2618 0.0089 84.3) | @dark & @hc=oklch(0.1864 0.0063 84.3) | @hc=oklch(0.9581 0.0039 84.3)", + "#warning-surface-text": "(base)=oklch(0.201 0.0085 84.3) | @dark=oklch(0.9571 0.005 84.3) | @dark & @hc=oklch(1 0 0) | @hc=oklch(0 0 0)", + "#warning-surface-text-soft": "(base)=oklch(0.3783 0.0161 84.3) | @dark=oklch(0.7591 0.0306 84.3) | @dark & @hc=oklch(0.787 0.0268 84.3) | @hc=oklch(0.3626 0.0154 84.3)", + "#warning-surface-text-soft-2": "(base)=oklch(0.521 0.0221 84.3) | @dark=oklch(0.6374 0.0271 84.3) | @dark & @hc=oklch(0.7044 0.0299 84.3) | @hc=oklch(0.4359 0.0185 84.3)", } `; diff --git a/src/tokens/palette-config.ts b/src/tokens/palette-config.ts index f92d7aef9..753a7ca1e 100644 --- a/src/tokens/palette-config.ts +++ b/src/tokens/palette-config.ts @@ -24,7 +24,20 @@ export const DEFAULT_WARNING_HUE = 84.3; export const DEFAULT_NOTE_HUE = 302.3; /** Seed saturation. Per-color `saturation` in the recipe is a 0–1 factor of it. */ -export const DEFAULT_SATURATION = 80; +export const DEFAULT_SATURATION = 100; + +/** + * Seed saturation for the `code-*` syntax family, deliberately **not** the same + * constant as {@link DEFAULT_SATURATION}. + * + * The two were one value until the app seed moved to 100 for the pastel palette. + * Sharing it would have dragged the syntax colors along for the ride — the exact + * coupling that `PaletteCodeSeed` and the `pastel` opt-out both exist to prevent, + * and the reason the code family answers to its own saturation and nothing else. + * Splitting the constant is what lets the app seed move while the code palette + * stays on the value it was calibrated against. + */ +export const DEFAULT_CODE_SATURATION = 80; // ============================================================================ // Types @@ -50,7 +63,7 @@ export interface PaletteThemeSeed { * reason. */ export interface PaletteCodeSeed { - /** Saturation (0–100). Defaults to {@link DEFAULT_SATURATION}, not to `saturation`. */ + /** Saturation (0–100). Defaults to {@link DEFAULT_CODE_SATURATION}, not to `saturation`. */ saturation?: number; } @@ -168,7 +181,7 @@ function resolveConfig(input: PaletteConfig): ResolvedPaletteConfig { hue, baseHue: input.baseHue ?? hue, saturation, - pastel: input.pastel ?? false, + pastel: input.pastel ?? true, contrastLevel: input.contrastLevel ?? 'auto', themes: { success: { @@ -189,7 +202,7 @@ function resolveConfig(input: PaletteConfig): ResolvedPaletteConfig { }, // Deliberately NOT `?? saturation`: the code palette is calibrated once and // does not follow the palette-level seed. See `PaletteCodeSeed`. - code: { saturation: themes.code?.saturation ?? DEFAULT_SATURATION }, + code: { saturation: themes.code?.saturation ?? DEFAULT_CODE_SATURATION }, }, }; } diff --git a/src/tokens/palette.test.ts b/src/tokens/palette.test.ts index 1fbcfb40f..070ecb36e 100644 --- a/src/tokens/palette.test.ts +++ b/src/tokens/palette.test.ts @@ -8,6 +8,7 @@ import { renderPaletteTokens, } from './palette'; import { + DEFAULT_CODE_SATURATION, DEFAULT_PALETTE_CONFIG, getPaletteConfig, getPaletteConfigInput, @@ -334,7 +335,9 @@ describe('setPaletteConfig', () => { }); it('applies pastel and restores on reset', () => { - setPaletteConfig({ pastel: true }); + // Pastel is the shipped default, so turning it OFF is what perturbs the + // palette here. The round-trip being asserted is the same one either way. + setPaletteConfig({ pastel: false }); expect(dumpTokens(getPaletteTokens())).not.toEqual(baseline); @@ -365,7 +368,9 @@ describe('setPaletteConfig', () => { // it stops at the code theme's door. const before = CODE_TOKENS.map((name) => baseline[name]); - setPaletteConfig({ pastel: true }); + // Toggled OFF rather than on: pastel ships enabled, so this is the direction + // that actually moves the palette out from under the code theme. + setPaletteConfig({ pastel: false }); const tuned = dumpTokens(getPaletteTokens()); @@ -374,7 +379,7 @@ describe('setPaletteConfig', () => { expect(CODE_TOKENS.map((name) => tuned[name])).toEqual(before); expect(getCodeTheme().getConfig().pastel).toBe(false); - // Not a no-op config — the rest of the palette did soften. + // Not a no-op config — the rest of the palette did move. expect(tuned['#surface']).not.toBe(baseline['#surface']); }); @@ -551,8 +556,11 @@ describe('code syntax tokens', () => { it('defaults to the shipped saturation rather than inheriting', () => { setPaletteConfig({ saturation: 20 }); + // `DEFAULT_CODE_SATURATION`, not `DEFAULT_PALETTE_CONFIG.saturation`: the two + // parted ways when the app seed moved to 100 for pastel. Asserting against the + // palette-level default here would silently re-couple them. expect(getPaletteConfig().themes.code.saturation).toBe( - DEFAULT_PALETTE_CONFIG.saturation, + DEFAULT_CODE_SATURATION, ); }); @@ -568,6 +576,13 @@ describe('code syntax tokens', () => { }); it('anchors its contrast floors to the real surface', () => { + // Pinned non-pastel: bit-for-bit equality is the invariant only when the page + // is non-pastel too. Under the pastel default the code theme stays unsoftened + // while `surface` softens, so the mirror's chroma diverges by design — the + // sibling test below covers that case on tone, which is what the floors are + // actually solved against. + setPaletteConfig({ pastel: false }); + // The mirrored base must resolve to the same colour the code sits on, or the // AA/AAA floors would be solved against the wrong background. const mirrored = getCodeTheme().tokens({ From bffa100dd7c00b7c7abf021610a70d20bc9b8a8b Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 6 Aug 2026 16:29:50 +0200 Subject: [PATCH 2/2] docs(theming): pin `pastel: false` on the non-pastel presets, refresh stale defaults MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `Ocean`, `Forest` and `Ember` were authored on main, where `pastel` defaulted to `false`, and their saturation seeds are tuned for the per-hue chroma ceiling. Shipping the pastel palette silently restyled all three — 133 of 156 light-scheme tokens move per preset — and flattened them against `Slate`, whose entire identity is being the soft one. Pin the flag off so each preset states its own stance. `Slate` keeps its explicit `pastel: true`, now redundant against the default but kept so the four read as a set; its comment no longer claims pastel distinguishes it from the shipped palette, only from the three siblings that pin it off. `Cube` stays `{}` on purpose — it *is* the shipped palette and should follow the default wherever the default goes. The docs page had gone stale in the same commit that moved the default: - the options table still advertised `saturation: 80` and `pastel: false`; - the "pastel is a redesign, not a filter" caveat warned about opting *in* with seeds tuned for non-pastel, which is now exactly backwards — `pastel: false` is the departure, and the re-tuning warning applies in whichever direction you flip; - `themes.code.saturation` is still 80, but that is now its own constant rather than a value shared with the app seed, which is what keeps syntax colors put. Co-Authored-By: Claude Opus 5 --- src/stories/Theming.docs.mdx | 33 ++++++++++++++++++++------------- src/stories/Theming.stories.tsx | 26 ++++++++++++++++++++++---- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/src/stories/Theming.docs.mdx b/src/stories/Theming.docs.mdx index d5a12bb65..259ba0cc2 100644 --- a/src/stories/Theming.docs.mdx +++ b/src/stories/Theming.docs.mdx @@ -31,11 +31,11 @@ value so this stays true. | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `hue` | **Accent** hue in degrees — the brand. Drives the `accent-*` family, `primary` / `purple` / `special`, and the brand-tinted `focus`, loading faces and disabled chip. | `280.3` | | `baseHue` | **Base** hue in degrees — the neutral chrome: `surface` and its ladder, the `surface-text*` ramp, `border`, `placeholder`. | inherits `hue` | -| `saturation` | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none. | `80` | +| `saturation` | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none. | `100` | | `themes..hue` | Hue for `success` / `danger` / `warning` / `note`. | `156.9` / `23.1` / `84.3` / `302.3` | | `themes..saturation` | Saturation for that status theme. | inherits `saturation` | -| `themes.code.saturation` | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`. | `80` | -| `pastel` | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`. | `false` | +| `themes.code.saturation` | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`, nor track its default. | `80` | +| `pastel` | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`. | `true` | | `contrastLevel` | Global. `'auto'`, or a manual `0`–`100` level. | `'auto'` | ### The setter replaces @@ -107,9 +107,12 @@ Syntax colors are their own theme with their own seed, so neither the brand hue the palette saturation reaches them. Hues are absolute literals — a brand re-seeded toward green would otherwise collide `code-string` with `code-number` (156°) — and the saturation is fixed at `80` rather than inheriting, so muting the app cannot -wash out a code block. `pastel` skips them for the same reason: it lowers the chroma -ceiling far enough to take `code-keyword` from ~0.19 to ~0.07, collapsing the spread -that keeps the syntax hues apart. +wash out a code block. That `80` is its own constant (`DEFAULT_CODE_SATURATION`), +deliberately not the palette default it once shared a value with: the app seed moved +to `100` with the pastel palette and the syntax colors stayed put, which is the whole +point of them not inheriting. `pastel` skips them for the same reason: it lowers +the chroma ceiling far enough to take `code-keyword` from ~0.19 to ~0.07, +collapsing the spread that keeps the syntax hues apart. So `themes.code.saturation` is the only thing that moves them. Tune it on its own: @@ -123,7 +126,8 @@ and saturation are pinned. That separate seed is also a hard requirement, not a preference: a Glaze colour can never exceed its own theme seed, and four of these sit at factor `1.0`. Inside a -default theme seeded below 80 they simply could not hold their chroma. +default theme seeded below `80` they simply could not hold their chroma — which is +also why the pinned seed is a floor to respect rather than a number to tidy up. ### Inherited vs pinned @@ -147,7 +151,7 @@ setPaletteConfig(({ baseHue, ...config }) => config); An explicit `baseHue: undefined` is equivalent to omitting it; neither is a value. `getPaletteConfig()` resolves everything, which loses that distinction — it cannot -tell you whether `80` was chosen or inherited. `getPaletteConfigInput()` returns the +tell you whether `100` was chosen or inherited. `getPaletteConfigInput()` returns the sparse config as set, which is what a settings UI needs to render an inherited value as inherited and offer a way back: @@ -351,11 +355,14 @@ and not per request: ## Caveats -**`pastel: true` is a redesign, not a filter.** It changes every resolved color -outside the `code-*` family. The per-color saturation factors in this palette were -tuned for the non-pastel space — pastel equalizes chroma across hues, so a pastel -palette on the shipped seeds resolves more saturated than you may expect. Re-tune -the seeds alongside it. +**`pastel` is a redesign, not a filter — in either direction.** It changes every +resolved color outside the `code-*` family, and the shipped palette is now pastel +(`pastel: true`, seed `100`), so it is `pastel: false` that is the departure. The two +spaces want different seeds: pastel equalizes the chroma ceiling across hues, where +the non-pastel one is per-hue and lets warm hues run further. Flipping the flag alone +therefore re-tunes nothing — a seed picked in one space lands somewhere else in the +other, and the warm statuses move most. Re-tune the seeds alongside it, in whichever +direction you flip. **Re-seeding costs about 10 ms.** Rebuilding the eight themes and re-solving ~156 tokens across four scheme variants is not free, though it is inside a frame. diff --git a/src/stories/Theming.stories.tsx b/src/stories/Theming.stories.tsx index 7f0bbf26b..9cd0e4ef6 100644 --- a/src/stories/Theming.stories.tsx +++ b/src/stories/Theming.stories.tsx @@ -680,6 +680,13 @@ const GroupLabel = tasty({ * where it has to (`Forest` sits at moss rather than mid-green to leave room for an * emerald success; `Ember` at amber rather than orange to leave room for a crimson * danger). + * + * Every preset except `Cube` also states its `pastel` stance outright rather than + * inheriting it. `Ocean` / `Forest` / `Ember` pin it off because their saturation + * seeds were picked against the per-hue chroma ceiling, and `Slate` pins it on + * because being the soft one is its whole identity — a contrast that only reads + * while its siblings are pinned off. `Cube` stays empty by design: it is the + * shipped palette, so it should follow the default wherever the default goes. */ const THEME_PRESETS: { label: string; config: PaletteConfig }[] = [ // Empty on purpose: the setter replaces, so this *is* the shipped palette — the @@ -690,6 +697,13 @@ const THEME_PRESETS: { label: string; config: PaletteConfig }[] = [ config: { hue: 235, saturation: 70, + // Pinned off. These three were authored against a non-pastel default and + // their saturation seeds are tuned for the per-hue chroma ceiling; now that + // the shipped palette is pastel, inheriting it would quietly restyle them + // and flatten the contrast with `Slate`, whose whole point is being the + // muted one. Stating it also keeps all four presets explicit about a knob + // that visibly changes them. + pastel: false, themes: { success: { hue: 165 }, danger: { hue: 25 }, @@ -705,6 +719,7 @@ const THEME_PRESETS: { label: string; config: PaletteConfig }[] = [ config: { hue: 128, saturation: 65, + pastel: false, themes: { success: { hue: 172 }, danger: { hue: 25 }, @@ -718,6 +733,7 @@ const THEME_PRESETS: { label: string; config: PaletteConfig }[] = [ config: { hue: 48, saturation: 85, + pastel: false, themes: { success: { hue: 155 }, danger: { hue: 6 }, @@ -730,10 +746,12 @@ const THEME_PRESETS: { label: string; config: PaletteConfig }[] = [ label: 'Slate', config: { hue: 250, - // Pastel is what mutes this one: it swaps the per-hue chroma ceiling for a - // flat one, so the saturation seed can stay high and still land soft — 60 - // here resolves to the same accent chroma a non-pastel 30 does, but even - // across hues rather than letting the warm statuses run ahead. + // Pastel is what mutes this one relative to the three above, which pin it + // off: it swaps the per-hue chroma ceiling for a flat one, so the saturation + // seed can stay high and still land soft — 60 here resolves to the same + // accent chroma a non-pastel 30 does, but even across hues rather than + // letting the warm statuses run ahead. Kept explicit even though it now + // matches the shipped default, so the four presets read as a set. saturation: 60, pastel: true, themes: {