@codenhub/styles 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.es.md +8 -7
- package/README.md +7 -6
- package/README.pt-BR.md +8 -7
- package/dist/aesthetics/chunky-tile.css +1 -1
- package/dist/aesthetics/cyber.css +1 -1
- package/dist/aesthetics/glass.css +1 -1
- package/dist/aesthetics/index.css +2 -2
- package/dist/aesthetics/neobrutalism.css +1 -1
- package/dist/aesthetics/sketch.css +1 -1
- package/dist/cli.js +189 -0
- package/dist/components.css +2 -2
- package/dist/index.css +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/native.css +2 -2
- package/dist/palette.css +1 -1
- package/dist/theme.css +2 -2
- package/docs/accessibility.md +46 -27
- package/docs/changelog/0.8.0.md +70 -0
- package/docs/changelog/index.md +1 -0
- package/docs/es/accessibility.md +47 -28
- package/docs/es/index.md +3 -2
- package/docs/es/integrating/index.md +38 -10
- package/docs/es/integrating/tailwind.md +78 -8
- package/docs/es/integrating/without-a-bundler.md +128 -5
- package/docs/es/setup.md +42 -34
- package/docs/es/usage/aesthetics.md +19 -13
- package/docs/es/usage/buttons.md +6 -2
- package/docs/es/usage/composing.md +6 -2
- package/docs/es/usage/content-and-layout.md +8 -4
- package/docs/es/usage/customizing.md +19 -13
- package/docs/es/usage/feedback.md +5 -1
- package/docs/es/usage/forms.md +29 -4
- package/docs/es/usage/index.md +6 -2
- package/docs/es/usage/presets.md +92 -0
- package/docs/es/usage/solo.md +4 -2
- package/docs/es/usage/theming.md +28 -15
- package/docs/index.md +2 -1
- package/docs/integrating/index.md +38 -10
- package/docs/integrating/tailwind.md +77 -7
- package/docs/integrating/without-a-bundler.md +127 -4
- package/docs/pt-BR/accessibility.md +47 -28
- package/docs/pt-BR/index.md +3 -2
- package/docs/pt-BR/integrating/index.md +38 -10
- package/docs/pt-BR/integrating/tailwind.md +78 -8
- package/docs/pt-BR/integrating/without-a-bundler.md +128 -5
- package/docs/pt-BR/setup.md +42 -34
- package/docs/pt-BR/usage/aesthetics.md +19 -13
- package/docs/pt-BR/usage/buttons.md +6 -2
- package/docs/pt-BR/usage/composing.md +6 -2
- package/docs/pt-BR/usage/content-and-layout.md +8 -4
- package/docs/pt-BR/usage/customizing.md +19 -13
- package/docs/pt-BR/usage/feedback.md +5 -1
- package/docs/pt-BR/usage/forms.md +29 -4
- package/docs/pt-BR/usage/index.md +6 -2
- package/docs/pt-BR/usage/presets.md +92 -0
- package/docs/pt-BR/usage/solo.md +4 -2
- package/docs/pt-BR/usage/theming.md +21 -8
- package/docs/setup.md +30 -22
- package/docs/usage/aesthetics.md +18 -12
- package/docs/usage/buttons.md +5 -1
- package/docs/usage/composing.md +5 -1
- package/docs/usage/content-and-layout.md +7 -3
- package/docs/usage/customizing.md +18 -12
- package/docs/usage/feedback.md +4 -0
- package/docs/usage/forms.md +28 -3
- package/docs/usage/index.md +5 -1
- package/docs/usage/presets.md +91 -0
- package/docs/usage/solo.md +3 -1
- package/docs/usage/theming.md +20 -7
- package/llms-full.txt +592 -115
- package/package.json +113 -63
- package/{dist/tw → tw}/aesthetics/chunky-tile.css +39 -19
- package/{dist/tw → tw}/aesthetics/cyber.css +15 -24
- package/{dist/tw → tw}/aesthetics/glass.css +105 -36
- package/{dist/tw → tw}/aesthetics/neobrutalism.css +37 -20
- package/{dist/tw → tw}/aesthetics/sketch.css +152 -133
- package/{dist/tw → tw}/box.css +89 -12
- package/tw/components/button.css +11 -0
- package/tw/components/button.rules.css +187 -0
- package/tw/components/feedback.css +11 -0
- package/{dist/tw/components/feedback.css → tw/components/feedback.rules.css} +134 -30
- package/tw/components/form.css +11 -0
- package/{dist/tw/components/form.css → tw/components/form.rules.css} +524 -111
- package/tw/components/index.css +16 -0
- package/tw/components/rules.css +41 -0
- package/tw/components/surface.css +11 -0
- package/tw/components/surface.rules.css +222 -0
- package/tw/components/tooltip.css +11 -0
- package/{dist/tw/components/tooltip.css → tw/components/tooltip.rules.css} +43 -27
- package/{dist/tw → tw}/corner.css +18 -12
- package/{dist/tw → tw}/elevation.css +23 -17
- package/{dist/tw → tw}/index.css +11 -9
- package/tw/index.d.ts +1 -0
- package/tw/intent.css +312 -0
- package/tw/modifiers.css +127 -0
- package/tw/native.css +320 -0
- package/tw/presentation.css +139 -0
- package/tw/reset.css +10 -0
- package/{dist/tw/reset.css → tw/reset.rules.css} +7 -8
- package/tw/size.css +34 -0
- package/tw/surface.css +9 -0
- package/tw/surface.rules.css +212 -0
- package/{dist/tw → tw}/theme.css +92 -28
- package/tw/typography.css +8 -0
- package/{dist/tw/typography.css → tw/typography.rules.css} +0 -3
- package/{dist/tw → tw}/utilities/content.css +183 -63
- package/tw/utilities/index.css +11 -0
- package/tw/utilities/layout.css +208 -0
- package/tw/utilities/rules.css +8 -0
- package/dist/tw/components/button.css +0 -139
- package/dist/tw/components/index.css +0 -35
- package/dist/tw/components/surface.css +0 -184
- package/dist/tw/intent.css +0 -229
- package/dist/tw/native.css +0 -203
- package/dist/tw/palette.css +0 -460
- package/dist/tw/presentation.css +0 -68
- package/dist/tw/surface.css +0 -61
- package/dist/tw/utilities/index.css +0 -6
- package/dist/tw/utilities/layout.css +0 -144
- /package/{dist/tw → tw}/aesthetics/index.css +0 -0
- /package/{dist/tw → tw}/aesthetics/pixel.css +0 -0
package/dist/palette.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer theme{:root,.light,.theme-light,[data-theme=light]{--palette-neutral-solid-bg:oklab(81.7% 0 0);--palette-neutral-solid-fg:oklab(20.5% 0 0);--palette-neutral-solid-edge:oklab(0% 0 0/0);--palette-neutral-solid-bg-hover:oklab(77.624% 0 0);--palette-neutral-solid-edge-hover:oklab(0% 0 0/0);--palette-neutral-soft-fg:oklab(20.5% 0 0);--palette-neutral-soft-bg:oklab(14.5% 0 0/.12);--palette-neutral-soft-edge:oklab(70.8% 0 0/.88);--palette-neutral-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-neutral-soft-edge-hover:oklab(37.1% 0 0/.88);--palette-neutral-soft-page-bg:oklab(88.42% 0 0);--palette-neutral-soft-page-edge:oklab(70.8% 0 0/.88);--palette-neutral-soft-page-bg-hover:oklab(82.536% 0 0);--palette-neutral-soft-page-edge-hover:oklab(37.1% 0 0/.88);--palette-neutral-soft-subtle-bg:oklab(82.876% 0 0);--palette-neutral-soft-subtle-edge:oklab(70.8% 0 0/.88);--palette-neutral-soft-subtle-bg-hover:oklab(77.874% 0 0);--palette-neutral-soft-subtle-edge-hover:oklab(37.1% 0 0/.88);--palette-neutral-ghost-fg:oklab(20.5% 0 0);--palette-neutral-ghost-bg:oklab(0% 0 0/0);--palette-neutral-ghost-edge:oklab(70.8% 0 0);--palette-neutral-ghost-bg-hover:oklab(37.1% 0 0/.14);--palette-neutral-ghost-edge-hover:oklab(37.1% 0 0);--palette-neutral-ghost-page-bg:oklab(98.5% 0 0);--palette-neutral-ghost-page-edge:oklab(70.8% 0 0);--palette-neutral-ghost-page-bg-hover:oklab(89.904% 0 0);--palette-neutral-ghost-page-edge-hover:oklab(37.1% 0 0);--palette-neutral-ghost-subtle-bg:oklab(92.2% 0 0);--palette-neutral-ghost-subtle-edge:oklab(70.8% 0 0);--palette-neutral-ghost-subtle-bg-hover:oklab(84.486% 0 0);--palette-neutral-ghost-subtle-edge-hover:oklab(37.1% 0 0);--palette-primary-solid-bg:oklab(14.5% 0 0);--palette-primary-solid-fg:oklab(98.5% 0 0);--palette-primary-solid-edge:oklab(0% 0 0/0);--palette-primary-solid-bg-hover:oklab(37.1% 0 0);--palette-primary-solid-edge-hover:oklab(0% 0 0/0);--palette-primary-soft-fg:oklab(20.5% 0 0);--palette-primary-soft-bg:oklab(14.5% 0 0/.12);--palette-primary-soft-edge:oklab(14.5% 0 0/.88);--palette-primary-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-primary-soft-edge-hover:oklab(37.1% 0 0/.88);--palette-primary-soft-page-bg:oklab(88.42% 0 0);--palette-primary-soft-page-edge:oklab(14.5% 0 0/.88);--palette-primary-soft-page-bg-hover:oklab(82.536% 0 0);--palette-primary-soft-page-edge-hover:oklab(37.1% 0 0/.88);--palette-primary-soft-subtle-bg:oklab(82.876% 0 0);--palette-primary-soft-subtle-edge:oklab(14.5% 0 0/.88);--palette-primary-soft-subtle-bg-hover:oklab(77.874% 0 0);--palette-primary-soft-subtle-edge-hover:oklab(37.1% 0 0/.88);--palette-primary-ghost-fg:oklab(20.5% 0 0);--palette-primary-ghost-bg:oklab(0% 0 0/0);--palette-primary-ghost-edge:oklab(14.5% 0 0);--palette-primary-ghost-bg-hover:oklab(37.1% 0 0/.14);--palette-primary-ghost-edge-hover:oklab(37.1% 0 0);--palette-primary-ghost-page-bg:oklab(98.5% 0 0);--palette-primary-ghost-page-edge:oklab(14.5% 0 0);--palette-primary-ghost-page-bg-hover:oklab(89.904% 0 0);--palette-primary-ghost-page-edge-hover:oklab(37.1% 0 0);--palette-primary-ghost-subtle-bg:oklab(92.2% 0 0);--palette-primary-ghost-subtle-edge:oklab(14.5% 0 0);--palette-primary-ghost-subtle-bg-hover:oklab(84.486% 0 0);--palette-primary-ghost-subtle-edge-hover:oklab(37.1% 0 0);--palette-secondary-solid-bg:oklab(43.9% 0 0);--palette-secondary-solid-fg:oklab(98.5% 0 0);--palette-secondary-solid-edge:oklab(0% 0 0/0);--palette-secondary-solid-bg-hover:oklab(37.1% 0 0);--palette-secondary-solid-edge-hover:oklab(0% 0 0/0);--palette-secondary-soft-fg:oklab(26.9% 0 0);--palette-secondary-soft-bg:oklab(43.9% 0 0/.12);--palette-secondary-soft-edge:oklab(43.9% 0 0/.88);--palette-secondary-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-secondary-soft-edge-hover:oklab(37.1% 0 0/.88);--palette-secondary-soft-page-bg:oklab(91.948% 0 0);--palette-secondary-soft-page-edge:oklab(43.9% 0 0/.88);--palette-secondary-soft-page-bg-hover:oklab(82.536% 0 0);--palette-secondary-soft-page-edge-hover:oklab(37.1% 0 0/.88);--palette-secondary-soft-subtle-bg:oklab(90.628% 0 0);--palette-secondary-soft-subtle-edge:oklab(43.9% 0 0/.88);--palette-secondary-soft-subtle-bg-hover:oklab(81.426% 0 0);--palette-secondary-soft-subtle-edge-hover:oklab(37.1% 0 0/.88);--palette-secondary-ghost-fg:oklab(26.9% 0 0);--palette-secondary-ghost-bg:oklab(0% 0 0/0);--palette-secondary-ghost-edge:oklab(43.9% 0 0);--palette-secondary-ghost-bg-hover:oklab(37.1% 0 0/.14);--palette-secondary-ghost-edge-hover:oklab(37.1% 0 0);--palette-secondary-ghost-page-bg:oklab(98.5% 0 0);--palette-secondary-ghost-page-edge:oklab(43.9% 0 0);--palette-secondary-ghost-page-bg-hover:oklab(89.904% 0 0);--palette-secondary-ghost-page-edge-hover:oklab(37.1% 0 0);--palette-secondary-ghost-subtle-bg:oklab(97% 0 0);--palette-secondary-ghost-subtle-edge:oklab(43.9% 0 0);--palette-secondary-ghost-subtle-bg-hover:oklab(88.614% 0 0);--palette-secondary-ghost-subtle-edge-hover:oklab(37.1% 0 0);--palette-success-solid-bg:oklab(50.8% -.114299 .0293215);--palette-success-solid-fg:oklab(98.5% 0 0);--palette-success-solid-edge:oklab(0% 0 0/0);--palette-success-solid-bg-hover:oklab(49.7872% -.101989 .029308);--palette-success-solid-edge-hover:oklab(0% 0 0/0);--palette-success-soft-fg:oklab(43.2% -.0925326 .0215109);--palette-success-soft-bg:oklab(50.8% -.114299 .0293215/.12);--palette-success-soft-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-bg-hover:oklab(49.7872% -.101989 .029308/.26);--palette-success-soft-edge-hover:oklab(49.7872% -.101989 .029308/.88);--palette-success-soft-page-bg:oklab(92.776% -.0137159 .00351857);--palette-success-soft-page-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-page-bg-hover:oklab(85.8347% -.0265171 .00762008);--palette-success-soft-page-edge-hover:oklab(49.7872% -.101989 .029308/.88);--palette-success-soft-subtle-bg:oklab(89.696% -.0574883 .0168585);--palette-success-soft-subtle-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-subtle-bg-hover:oklab(83.2447% -.0633257 .0188378);--palette-success-soft-subtle-edge-hover:oklab(49.7872% -.101989 .029308/.88);--palette-success-ghost-fg:oklab(43.2% -.0925326 .0215109);--palette-success-ghost-bg:oklab(0% 0 0/0);--palette-success-ghost-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-bg-hover:oklab(49.7872% -.101989 .029308/.14);--palette-success-ghost-edge-hover:oklab(49.7872% -.101989 .029308);--palette-success-ghost-page-bg:oklab(98.5% 0 0);--palette-success-ghost-page-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-page-bg-hover:oklab(91.6802% -.0142784 .00410312);--palette-success-ghost-page-edge-hover:oklab(49.7872% -.101989 .029308);--palette-success-ghost-subtle-bg:oklab(95% -.0497414 .0151591);--palette-success-ghost-subtle-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-subtle-bg-hover:oklab(88.6702% -.057056 .0171399);--palette-success-ghost-subtle-edge-hover:oklab(49.7872% -.101989 .029308);--palette-warning-solid-bg:oklab(66.6% .0940116 .152325);--palette-warning-solid-fg:oklab(14.5% 0 0);--palette-warning-solid-edge:oklab(0% 0 0/0);--palette-warning-solid-bg-hover:oklab(63.3155% .100794 .128308);--palette-warning-solid-edge-hover:oklab(0% 0 0/0);--palette-warning-soft-fg:oklab(47.3% .0948219 .0988828);--palette-warning-soft-bg:oklab(66.6% .0940116 .152325/.12);--palette-warning-soft-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-bg-hover:oklab(63.3155% .100794 .128308/.26);--palette-warning-soft-edge-hover:oklab(63.3155% .100794 .128308/.88);--palette-warning-soft-page-bg:oklab(94.672% .0112814 .018279);--palette-warning-soft-page-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-page-bg-hover:oklab(89.352% .0262064 .0333601);--palette-warning-soft-page-edge-hover:oklab(63.3155% .100794 .128308/.88);--palette-warning-soft-subtle-bg:oklab(92.648% .00619956 .0699497);--palette-warning-soft-subtle-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-subtle-bg-hover:oklab(87.65% .0219331 .0768105);--palette-warning-soft-subtle-edge-hover:oklab(63.3155% .100794 .128308/.88);--palette-warning-ghost-fg:oklab(47.3% .0948219 .0988828);--palette-warning-ghost-bg:oklab(0% 0 0/0);--palette-warning-ghost-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-bg-hover:oklab(63.3155% .100794 .128308/.14);--palette-warning-ghost-edge-hover:oklab(63.3155% .100794 .128308);--palette-warning-ghost-page-bg:oklab(98.5% 0 0);--palette-warning-ghost-page-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-page-bg-hover:oklab(93.5742% .0141112 .0179631);--palette-warning-ghost-page-edge-hover:oklab(63.3155% .100794 .128308);--palette-warning-ghost-subtle-bg:oklab(96.2% -.0057748 .0587167);--palette-warning-ghost-subtle-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-subtle-bg-hover:oklab(91.5962% .00914482 .0684595);--palette-warning-ghost-subtle-edge-hover:oklab(63.3155% .100794 .128308);--palette-destructive-solid-bg:oklab(51.4% .212373 .0646656);--palette-destructive-solid-fg:oklab(98.5% 0 0);--palette-destructive-solid-edge:oklab(0% 0 0/0);--palette-destructive-solid-bg-hover:oklab(51.189% .194868 .0640785);--palette-destructive-solid-edge-hover:oklab(0% 0 0/0);--palette-destructive-soft-fg:oklab(45.5% .182654 .044516);--palette-destructive-soft-bg:oklab(51.4% .212373 .0646656/.12);--palette-destructive-soft-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-bg-hover:oklab(51.189% .194868 .0640785/.26);--palette-destructive-soft-edge-hover:oklab(51.189% .194868 .0640785/.88);--palette-destructive-soft-page-bg:oklab(92.848% .0254848 .00775988);--palette-destructive-soft-page-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-page-bg-hover:oklab(86.1991% .0506656 .0166604);--palette-destructive-soft-page-edge-hover:oklab(51.189% .194868 .0640785/.88);--palette-destructive-soft-subtle-bg:oklab(88.976% .051251 .0135099);--palette-destructive-soft-subtle-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-subtle-bg-hover:oklab(82.9431% .0723327 .0214956);--palette-destructive-soft-subtle-edge-hover:oklab(51.189% .194868 .0640785/.88);--palette-destructive-ghost-fg:oklab(45.5% .182654 .044516);--palette-destructive-ghost-bg:oklab(0% 0 0/0);--palette-destructive-ghost-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-bg-hover:oklab(51.189% .194868 .0640785/.14);--palette-destructive-ghost-edge-hover:oklab(51.189% .194868 .0640785);--palette-destructive-ghost-page-bg:oklab(98.5% 0 0);--palette-destructive-ghost-page-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-page-bg-hover:oklab(91.8765% .0272815 .00897099);--palette-destructive-ghost-page-edge-hover:oklab(51.189% .194868 .0640785);--palette-destructive-ghost-subtle-bg:oklab(94.1% .0292798 .00653408);--palette-destructive-ghost-subtle-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-subtle-bg-hover:oklab(88.0925% .0524621 .0145903);--palette-destructive-ghost-subtle-edge-hover:oklab(51.189% .194868 .0640785);--palette-info-solid-bg:oklab(51.1% .0317755 -.260066);--palette-info-solid-fg:oklab(98.5% 0 0);--palette-info-solid-edge:oklab(0% 0 0/0);--palette-info-solid-bg-hover:oklab(49.0714% .0309565 -.24875);--palette-info-solid-edge-hover:oklab(0% 0 0/0);--palette-info-soft-fg:oklab(39.8% .0250004 -.193391);--palette-info-soft-bg:oklab(51.1% .0317755 -.260066/.12);--palette-info-soft-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-bg-hover:oklab(49.0714% .0309565 -.24875/.26);--palette-info-soft-edge-hover:oklab(49.0714% .0309565 -.24875/.88);--palette-info-soft-page-bg:oklab(92.812% .00381305 -.0312079);--palette-info-soft-page-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-page-bg-hover:oklab(85.6486% .0080487 -.0646751);--palette-info-soft-page-edge-hover:oklab(49.0714% .0309565 -.24875/.88);--palette-info-soft-subtle-bg:oklab(87.972% .00526838 -.0610925);--palette-info-soft-subtle-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-subtle-bg-hover:oklab(81.5786% .0092725 -.0898053);--palette-info-soft-subtle-edge-hover:oklab(49.0714% .0309565 -.24875/.88);--palette-info-ghost-fg:oklab(39.8% .0250004 -.193391);--palette-info-ghost-bg:oklab(0% 0 0/0);--palette-info-ghost-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-bg-hover:oklab(49.0714% .0309565 -.24875/.14);--palette-info-ghost-edge-hover:oklab(49.0714% .0309565 -.24875);--palette-info-ghost-page-bg:oklab(98.5% 0 0);--palette-info-ghost-page-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-page-bg-hover:oklab(91.58% .00433391 -.034825);--palette-info-ghost-page-edge-hover:oklab(49.0714% .0309565 -.24875);--palette-info-ghost-subtle-bg:oklab(93% .00165378 -.0339598);--palette-info-ghost-subtle-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-subtle-bg-hover:oklab(86.85% .00575617 -.0640304);--palette-info-ghost-subtle-edge-hover:oklab(49.0714% .0309565 -.24875);--palette-border:oklch(70.8% 0 none);--palette-surface:oklch(92.2% 0 none);--palette-text:oklch(14.5% 0 none)}.dark,.theme-dark,[data-theme=dark]{--palette-neutral-solid-bg:oklab(31.3% 0 0);--palette-neutral-solid-fg:oklab(97% 0 0);--palette-neutral-solid-edge:oklab(0% 0 0/0);--palette-neutral-solid-bg-hover:oklab(40.918% 0 0);--palette-neutral-solid-edge-hover:oklab(0% 0 0/0);--palette-neutral-soft-fg:oklab(97% 0 0);--palette-neutral-soft-bg:oklab(98.5% 0 0/.12);--palette-neutral-soft-edge:oklab(37.1% 0 0/.88);--palette-neutral-soft-bg-hover:oklab(92.2% 0 0/.26);--palette-neutral-soft-edge-hover:oklab(92.2% 0 0/.88);--palette-neutral-soft-page-bg:oklab(24.58% 0 0);--palette-neutral-soft-page-edge:oklab(37.1% 0 0/.88);--palette-neutral-soft-page-bg-hover:oklab(34.702% 0 0);--palette-neutral-soft-page-edge-hover:oklab(92.2% 0 0/.88);--palette-neutral-soft-subtle-bg:oklab(35.492% 0 0);--palette-neutral-soft-subtle-edge:oklab(37.1% 0 0/.88);--palette-neutral-soft-subtle-bg-hover:oklab(43.878% 0 0);--palette-neutral-soft-subtle-edge-hover:oklab(92.2% 0 0/.88);--palette-neutral-ghost-fg:oklab(97% 0 0);--palette-neutral-ghost-bg:oklab(0% 0 0/0);--palette-neutral-ghost-edge:oklab(37.1% 0 0);--palette-neutral-ghost-bg-hover:oklab(92.2% 0 0/.14);--palette-neutral-ghost-edge-hover:oklab(92.2% 0 0);--palette-neutral-ghost-page-bg:oklab(14.5% 0 0);--palette-neutral-ghost-page-edge:oklab(37.1% 0 0);--palette-neutral-ghost-page-bg-hover:oklab(25.378% 0 0);--palette-neutral-ghost-page-edge-hover:oklab(92.2% 0 0);--palette-neutral-ghost-subtle-bg:oklab(26.9% 0 0);--palette-neutral-ghost-subtle-edge:oklab(37.1% 0 0);--palette-neutral-ghost-subtle-bg-hover:oklab(36.042% 0 0);--palette-neutral-ghost-subtle-edge-hover:oklab(92.2% 0 0);--palette-primary-solid-bg:oklab(98.5% 0 0);--palette-primary-solid-fg:oklab(14.5% 0 0);--palette-primary-solid-edge:oklab(0% 0 0/0);--palette-primary-solid-bg-hover:oklab(92.2% 0 0);--palette-primary-solid-edge-hover:oklab(0% 0 0/0);--palette-primary-soft-fg:oklab(97% 0 0);--palette-primary-soft-bg:oklab(98.5% 0 0/.12);--palette-primary-soft-edge:oklab(98.5% 0 0/.88);--palette-primary-soft-bg-hover:oklab(92.2% 0 0/.26);--palette-primary-soft-edge-hover:oklab(92.2% 0 0/.88);--palette-primary-soft-page-bg:oklab(24.58% 0 0);--palette-primary-soft-page-edge:oklab(98.5% 0 0/.88);--palette-primary-soft-page-bg-hover:oklab(34.702% 0 0);--palette-primary-soft-page-edge-hover:oklab(92.2% 0 0/.88);--palette-primary-soft-subtle-bg:oklab(29.86% 0 0);--palette-primary-soft-subtle-edge:oklab(98.5% 0 0/.88);--palette-primary-soft-subtle-bg-hover:oklab(39.142% 0 0);--palette-primary-soft-subtle-edge-hover:oklab(92.2% 0 0/.88);--palette-primary-ghost-fg:oklab(97% 0 0);--palette-primary-ghost-bg:oklab(0% 0 0/0);--palette-primary-ghost-edge:oklab(98.5% 0 0);--palette-primary-ghost-bg-hover:oklab(92.2% 0 0/.14);--palette-primary-ghost-edge-hover:oklab(92.2% 0 0);--palette-primary-ghost-page-bg:oklab(14.5% 0 0);--palette-primary-ghost-page-edge:oklab(98.5% 0 0);--palette-primary-ghost-page-bg-hover:oklab(25.378% 0 0);--palette-primary-ghost-page-edge-hover:oklab(92.2% 0 0);--palette-primary-ghost-subtle-bg:oklab(20.5% 0 0);--palette-primary-ghost-subtle-edge:oklab(98.5% 0 0);--palette-primary-ghost-subtle-bg-hover:oklab(30.538% 0 0);--palette-primary-ghost-subtle-edge-hover:oklab(92.2% 0 0);--palette-secondary-solid-bg:oklab(70.8% 0 0);--palette-secondary-solid-fg:oklab(14.5% 0 0);--palette-secondary-solid-edge:oklab(0% 0 0/0);--palette-secondary-solid-bg-hover:oklab(87% 0 0);--palette-secondary-solid-edge-hover:oklab(0% 0 0/0);--palette-secondary-soft-fg:oklab(92.2% 0 0);--palette-secondary-soft-bg:oklab(70.8% 0 0/.12);--palette-secondary-soft-edge:oklab(70.8% 0 0/.88);--palette-secondary-soft-bg-hover:oklab(87% 0 0/.26);--palette-secondary-soft-edge-hover:oklab(87% 0 0/.88);--palette-secondary-soft-page-bg:oklab(21.256% 0 0);--palette-secondary-soft-page-edge:oklab(70.8% 0 0/.88);--palette-secondary-soft-page-bg-hover:oklab(33.35% 0 0);--palette-secondary-soft-page-edge-hover:oklab(87% 0 0/.88);--palette-secondary-soft-subtle-bg:oklab(32.168% 0 0);--palette-secondary-soft-subtle-edge:oklab(70.8% 0 0/.88);--palette-secondary-soft-subtle-bg-hover:oklab(42.526% 0 0);--palette-secondary-soft-subtle-edge-hover:oklab(87% 0 0/.88);--palette-secondary-ghost-fg:oklab(92.2% 0 0);--palette-secondary-ghost-bg:oklab(0% 0 0/0);--palette-secondary-ghost-edge:oklab(70.8% 0 0);--palette-secondary-ghost-bg-hover:oklab(87% 0 0/.14);--palette-secondary-ghost-edge-hover:oklab(87% 0 0);--palette-secondary-ghost-page-bg:oklab(14.5% 0 0);--palette-secondary-ghost-page-edge:oklab(70.8% 0 0);--palette-secondary-ghost-page-bg-hover:oklab(24.65% 0 0);--palette-secondary-ghost-page-edge-hover:oklab(87% 0 0);--palette-secondary-ghost-subtle-bg:oklab(26.9% 0 0);--palette-secondary-ghost-subtle-edge:oklab(70.8% 0 0);--palette-secondary-ghost-subtle-bg-hover:oklab(35.314% 0 0);--palette-secondary-ghost-subtle-edge-hover:oklab(87% 0 0);--palette-success-solid-bg:oklab(50.8% -.114299 .0293215);--palette-success-solid-fg:oklab(98.5% 0 0);--palette-success-solid-edge:oklab(0% 0 0/0);--palette-success-solid-bg-hover:oklab(57.2945% -.116429 .0314383);--palette-success-solid-edge-hover:oklab(0% 0 0/0);--palette-success-soft-fg:oklab(84.5% -.138113 .0370641);--palette-success-soft-bg:oklab(50.8% -.114299 .0293215/.12);--palette-success-soft-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-bg-hover:oklab(57.2945% -.116429 .0314383/.26);--palette-success-soft-edge-hover:oklab(57.2945% -.116429 .0314383/.88);--palette-success-soft-page-bg:oklab(18.856% -.0137159 .00351857);--palette-success-soft-page-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-page-bg-hover:oklab(25.6266% -.0302715 .00817395);--palette-success-soft-page-edge-hover:oklab(57.2945% -.116429 .0314383/.88);--palette-success-soft-subtle-bg:oklab(39.36% -.0802174 .0165174);--palette-success-soft-subtle-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-subtle-bg-hover:oklab(42.8686% -.0861932 .0191048);--palette-success-soft-subtle-edge-hover:oklab(57.2945% -.116429 .0314383/.88);--palette-success-ghost-fg:oklab(84.5% -.138113 .0370641);--palette-success-ghost-bg:oklab(0% 0 0/0);--palette-success-ghost-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-bg-hover:oklab(57.2945% -.116429 .0314383/.14);--palette-success-ghost-edge-hover:oklab(57.2945% -.116429 .0314383);--palette-success-ghost-page-bg:oklab(14.5% 0 0);--palette-success-ghost-page-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-page-bg-hover:oklab(20.4912% -.0163 .00440136);--palette-success-ghost-page-edge-hover:oklab(57.2945% -.116429 .0314383);--palette-success-ghost-subtle-bg:oklab(37.8% -.0755699 .0147714);--palette-success-ghost-subtle-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-subtle-bg-hover:oklab(40.5292% -.0812901 .0171048);--palette-success-ghost-subtle-edge-hover:oklab(57.2945% -.116429 .0314383);--palette-warning-solid-bg:oklab(66.6% .0940116 .152325);--palette-warning-solid-fg:oklab(14.5% 0 0);--palette-warning-solid-edge:oklab(0% 0 0/0);--palette-warning-solid-bg-hover:oklab(70.431% .0802 .143076);--palette-warning-solid-edge-hover:oklab(0% 0 0/0);--palette-warning-soft-fg:oklab(87.9% -.00473352 .168934);--palette-warning-soft-bg:oklab(66.6% .0940116 .152325/.12);--palette-warning-soft-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-bg-hover:oklab(70.431% .0802 .143076/.26);--palette-warning-soft-edge-hover:oklab(70.431% .0802 .143076/.88);--palette-warning-soft-page-bg:oklab(20.752% .0112814 .018279);--palette-warning-soft-page-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-page-bg-hover:oklab(29.0421% .020852 .0371997);--palette-warning-soft-page-edge-hover:oklab(70.431% .0802 .143076/.88);--palette-warning-soft-subtle-bg:oklab(44.424% .0798656 .0890623);--palette-warning-soft-subtle-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-subtle-bg-hover:oklab(48.9481% .0785251 .0967221);--palette-warning-soft-subtle-edge-hover:oklab(70.431% .0802 .143076/.88);--palette-warning-ghost-fg:oklab(87.9% -.00473352 .168934);--palette-warning-ghost-bg:oklab(0% 0 0/0);--palette-warning-ghost-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-bg-hover:oklab(70.431% .0802 .143076/.14);--palette-warning-ghost-edge-hover:oklab(70.431% .0802 .143076);--palette-warning-ghost-page-bg:oklab(14.5% 0 0);--palette-warning-ghost-page-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-page-bg-hover:oklab(22.3303% .011228 .0200306);--palette-warning-ghost-page-edge-hover:oklab(70.431% .0802 .143076);--palette-warning-ghost-subtle-bg:oklab(41.4% .0779366 .0804356);--palette-warning-ghost-subtle-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-subtle-bg-hover:oklab(45.4643% .0782535 .0892052);--palette-warning-ghost-subtle-edge-hover:oklab(70.431% .0802 .143076);--palette-destructive-solid-bg:oklab(51.4% .212373 .0646656);--palette-destructive-solid-fg:oklab(98.5% 0 0);--palette-destructive-solid-edge:oklab(0% 0 0/0);--palette-destructive-solid-bg-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-solid-edge-hover:oklab(0% 0 0/0);--palette-destructive-soft-fg:oklab(81% .114595 .0236021);--palette-destructive-soft-bg:oklab(51.4% .212373 .0646656/.12);--palette-destructive-soft-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-bg-hover:oklab(54.9356% .21195 .0500346/.26);--palette-destructive-soft-edge-hover:oklab(54.9356% .21195 .0500346/.88);--palette-destructive-soft-page-bg:oklab(18.928% .0254848 .00775988);--palette-destructive-soft-page-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-page-bg-hover:oklab(25.0132% .0551069 .013009);--palette-destructive-soft-page-edge-hover:oklab(54.9356% .21195 .0500346/.88);--palette-destructive-soft-subtle-bg:oklab(42.248% .163162 .0327106);--palette-destructive-soft-subtle-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-subtle-bg-hover:oklab(44.6232% .170881 .0339903);--palette-destructive-soft-subtle-edge-hover:oklab(54.9356% .21195 .0500346/.88);--palette-destructive-ghost-fg:oklab(81% .114595 .0236021);--palette-destructive-ghost-bg:oklab(0% 0 0/0);--palette-destructive-ghost-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-bg-hover:oklab(54.9356% .21195 .0500346/.14);--palette-destructive-ghost-edge-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-ghost-page-bg:oklab(14.5% 0 0);--palette-destructive-ghost-page-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-page-bg-hover:oklab(20.161% .0296729 .00700485);--palette-destructive-ghost-page-edge-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-ghost-subtle-bg:oklab(41% .156452 .0283531);--palette-destructive-ghost-subtle-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-subtle-bg-hover:oklab(42.951% .164221 .0313885);--palette-destructive-ghost-subtle-edge-hover:oklab(54.9356% .21195 .0500346);--palette-info-solid-bg:oklab(51.1% .0317755 -.260066);--palette-info-solid-fg:oklab(98.5% 0 0);--palette-info-solid-edge:oklab(0% 0 0/0);--palette-info-solid-bg-hover:oklab(55.1929% .0373722 -.238521);--palette-info-solid-edge-hover:oklab(0% 0 0/0);--palette-info-soft-fg:oklab(78.5% .00944898 -.114611);--palette-info-soft-bg:oklab(51.1% .0317755 -.260066/.12);--palette-info-soft-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-bg-hover:oklab(55.1929% .0373722 -.238521/.26);--palette-info-soft-edge-hover:oklab(55.1929% .0373722 -.238521/.88);--palette-info-soft-page-bg:oklab(18.892% .00381305 -.0312079);--palette-info-soft-page-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-page-bg-hover:oklab(25.0801% .00971677 -.0620155);--palette-info-soft-page-edge-hover:oklab(55.1929% .0373722 -.238521/.88);--palette-info-soft-subtle-bg:oklab(37.724% .0229742 -.156471);--palette-info-soft-subtle-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-subtle-bg-hover:oklab(40.9161% .0258296 -.16735);--palette-info-soft-subtle-edge-hover:oklab(55.1929% .0373722 -.238521/.88);--palette-info-ghost-fg:oklab(78.5% .00944898 -.114611);--palette-info-ghost-bg:oklab(0% 0 0/0);--palette-info-ghost-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-bg-hover:oklab(55.1929% .0373722 -.238521/.14);--palette-info-ghost-edge-hover:oklab(55.1929% .0373722 -.238521);--palette-info-ghost-page-bg:oklab(14.5% 0 0);--palette-info-ghost-page-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-page-bg-hover:oklab(20.197% .00523211 -.033393);--palette-info-ghost-page-edge-hover:oklab(55.1929% .0373722 -.238521);--palette-info-ghost-subtle-bg:oklab(35.9% .0217741 -.142344);--palette-info-ghost-subtle-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-subtle-bg-hover:oklab(38.601% .0239578 -.155809);--palette-info-ghost-subtle-edge-hover:oklab(55.1929% .0373722 -.238521);--palette-border:oklch(37.1% 0 none);--palette-surface:oklch(26.9% 0 none);--palette-text:oklch(98.5% 0 none)}}@layer base,components,utilities;
|
|
1
|
+
@layer theme{:root,.light,.theme-light,[data-theme=light]{--palette-neutral-solid-bg:oklab(81.7% 0 0);--palette-neutral-solid-fg:oklab(20.5% 0 0);--palette-neutral-solid-edge:oklab(0% 0 0/0);--palette-neutral-solid-bg-hover:oklab(77.624% 0 0);--palette-neutral-solid-edge-hover:oklab(0% 0 0/0);--palette-neutral-soft-fg:oklab(20.5% 0 0);--palette-neutral-soft-bg:oklab(14.5% 0 0/.12);--palette-neutral-soft-edge:oklab(70.8% 0 0/.88);--palette-neutral-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-neutral-soft-edge-hover:oklab(37.1% 0 0/.88);--palette-neutral-soft-page-bg:oklab(97% 0 0);--palette-neutral-soft-page-edge:oklab(70.8% 0 0/.88);--palette-neutral-soft-page-bg-hover:oklab(88.614% 0 0);--palette-neutral-soft-page-edge-hover:oklab(37.1% 0 0/.88);--palette-neutral-soft-subtle-bg:oklab(92.2% 0 0);--palette-neutral-soft-subtle-edge:oklab(70.8% 0 0/.88);--palette-neutral-soft-subtle-bg-hover:oklab(84.486% 0 0);--palette-neutral-soft-subtle-edge-hover:oklab(37.1% 0 0/.88);--palette-neutral-ghost-fg:oklab(20.5% 0 0);--palette-neutral-ghost-bg:oklab(0% 0 0/0);--palette-neutral-ghost-edge:oklab(70.8% 0 0);--palette-neutral-ghost-bg-hover:oklab(37.1% 0 0/.14);--palette-neutral-ghost-edge-hover:oklab(37.1% 0 0);--palette-neutral-ghost-page-bg:oklab(98.5% 0 0);--palette-neutral-ghost-page-edge:oklab(70.8% 0 0);--palette-neutral-ghost-page-bg-hover:oklab(89.904% 0 0);--palette-neutral-ghost-page-edge-hover:oklab(37.1% 0 0);--palette-neutral-ghost-subtle-bg:oklab(92.2% 0 0);--palette-neutral-ghost-subtle-edge:oklab(70.8% 0 0);--palette-neutral-ghost-subtle-bg-hover:oklab(84.486% 0 0);--palette-neutral-ghost-subtle-edge-hover:oklab(37.1% 0 0);--palette-primary-solid-bg:oklab(14.5% 0 0);--palette-primary-solid-fg:oklab(98.5% 0 0);--palette-primary-solid-edge:oklab(0% 0 0/0);--palette-primary-solid-bg-hover:oklab(37.1% 0 0);--palette-primary-solid-edge-hover:oklab(0% 0 0/0);--palette-primary-soft-fg:oklab(20.5% 0 0);--palette-primary-soft-bg:oklab(14.5% 0 0/.12);--palette-primary-soft-edge:oklab(14.5% 0 0/.88);--palette-primary-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-primary-soft-edge-hover:oklab(37.1% 0 0/.88);--palette-primary-soft-page-bg:oklab(88.42% 0 0);--palette-primary-soft-page-edge:oklab(14.5% 0 0/.88);--palette-primary-soft-page-bg-hover:oklab(82.536% 0 0);--palette-primary-soft-page-edge-hover:oklab(37.1% 0 0/.88);--palette-primary-soft-subtle-bg:oklab(82.876% 0 0);--palette-primary-soft-subtle-edge:oklab(14.5% 0 0/.88);--palette-primary-soft-subtle-bg-hover:oklab(77.874% 0 0);--palette-primary-soft-subtle-edge-hover:oklab(37.1% 0 0/.88);--palette-primary-ghost-fg:oklab(20.5% 0 0);--palette-primary-ghost-bg:oklab(0% 0 0/0);--palette-primary-ghost-edge:oklab(14.5% 0 0);--palette-primary-ghost-bg-hover:oklab(37.1% 0 0/.14);--palette-primary-ghost-edge-hover:oklab(37.1% 0 0);--palette-primary-ghost-page-bg:oklab(98.5% 0 0);--palette-primary-ghost-page-edge:oklab(14.5% 0 0);--palette-primary-ghost-page-bg-hover:oklab(89.904% 0 0);--palette-primary-ghost-page-edge-hover:oklab(37.1% 0 0);--palette-primary-ghost-subtle-bg:oklab(92.2% 0 0);--palette-primary-ghost-subtle-edge:oklab(14.5% 0 0);--palette-primary-ghost-subtle-bg-hover:oklab(84.486% 0 0);--palette-primary-ghost-subtle-edge-hover:oklab(37.1% 0 0);--palette-secondary-solid-bg:oklab(43.9% 0 0);--palette-secondary-solid-fg:oklab(98.5% 0 0);--palette-secondary-solid-edge:oklab(0% 0 0/0);--palette-secondary-solid-bg-hover:oklab(37.1% 0 0);--palette-secondary-solid-edge-hover:oklab(0% 0 0/0);--palette-secondary-soft-fg:oklab(26.9% 0 0);--palette-secondary-soft-bg:oklab(43.9% 0 0/.12);--palette-secondary-soft-edge:oklab(43.9% 0 0/.88);--palette-secondary-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-secondary-soft-edge-hover:oklab(37.1% 0 0/.88);--palette-secondary-soft-page-bg:oklab(91.948% 0 0);--palette-secondary-soft-page-edge:oklab(43.9% 0 0/.88);--palette-secondary-soft-page-bg-hover:oklab(82.536% 0 0);--palette-secondary-soft-page-edge-hover:oklab(37.1% 0 0/.88);--palette-secondary-soft-subtle-bg:oklab(90.628% 0 0);--palette-secondary-soft-subtle-edge:oklab(43.9% 0 0/.88);--palette-secondary-soft-subtle-bg-hover:oklab(81.426% 0 0);--palette-secondary-soft-subtle-edge-hover:oklab(37.1% 0 0/.88);--palette-secondary-ghost-fg:oklab(26.9% 0 0);--palette-secondary-ghost-bg:oklab(0% 0 0/0);--palette-secondary-ghost-edge:oklab(43.9% 0 0);--palette-secondary-ghost-bg-hover:oklab(37.1% 0 0/.14);--palette-secondary-ghost-edge-hover:oklab(37.1% 0 0);--palette-secondary-ghost-page-bg:oklab(98.5% 0 0);--palette-secondary-ghost-page-edge:oklab(43.9% 0 0);--palette-secondary-ghost-page-bg-hover:oklab(89.904% 0 0);--palette-secondary-ghost-page-edge-hover:oklab(37.1% 0 0);--palette-secondary-ghost-subtle-bg:oklab(97% 0 0);--palette-secondary-ghost-subtle-edge:oklab(43.9% 0 0);--palette-secondary-ghost-subtle-bg-hover:oklab(88.614% 0 0);--palette-secondary-ghost-subtle-edge-hover:oklab(37.1% 0 0);--palette-success-solid-bg:oklab(50.8% -.114299 .0293215);--palette-success-solid-fg:oklab(98.5% 0 0);--palette-success-solid-edge:oklab(0% 0 0/0);--palette-success-solid-bg-hover:oklab(49.7872% -.101989 .029308);--palette-success-solid-edge-hover:oklab(0% 0 0/0);--palette-success-soft-fg:oklab(43.2% -.0925326 .0215109);--palette-success-soft-bg:oklab(50.8% -.114299 .0293215/.12);--palette-success-soft-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-bg-hover:oklab(49.7872% -.101989 .029308/.26);--palette-success-soft-edge-hover:oklab(49.7872% -.101989 .029308/.88);--palette-success-soft-page-bg:oklab(92.776% -.0137159 .00351857);--palette-success-soft-page-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-page-bg-hover:oklab(85.8347% -.0265171 .00762008);--palette-success-soft-page-edge-hover:oklab(49.7872% -.101989 .029308/.88);--palette-success-soft-subtle-bg:oklab(89.696% -.0574883 .0168585);--palette-success-soft-subtle-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-subtle-bg-hover:oklab(83.2447% -.0633257 .0188378);--palette-success-soft-subtle-edge-hover:oklab(49.7872% -.101989 .029308/.88);--palette-success-ghost-fg:oklab(43.2% -.0925326 .0215109);--palette-success-ghost-bg:oklab(0% 0 0/0);--palette-success-ghost-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-bg-hover:oklab(49.7872% -.101989 .029308/.14);--palette-success-ghost-edge-hover:oklab(49.7872% -.101989 .029308);--palette-success-ghost-page-bg:oklab(98.5% 0 0);--palette-success-ghost-page-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-page-bg-hover:oklab(91.6802% -.0142784 .00410312);--palette-success-ghost-page-edge-hover:oklab(49.7872% -.101989 .029308);--palette-success-ghost-subtle-bg:oklab(95% -.0497414 .0151591);--palette-success-ghost-subtle-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-subtle-bg-hover:oklab(88.6702% -.057056 .0171399);--palette-success-ghost-subtle-edge-hover:oklab(49.7872% -.101989 .029308);--palette-warning-solid-bg:oklab(66.6% .0940116 .152325);--palette-warning-solid-fg:oklab(14.5% 0 0);--palette-warning-solid-edge:oklab(0% 0 0/0);--palette-warning-solid-bg-hover:oklab(63.3155% .100794 .128308);--palette-warning-solid-edge-hover:oklab(0% 0 0/0);--palette-warning-soft-fg:oklab(47.3% .0948219 .0988828);--palette-warning-soft-bg:oklab(66.6% .0940116 .152325/.12);--palette-warning-soft-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-bg-hover:oklab(63.3155% .100794 .128308/.26);--palette-warning-soft-edge-hover:oklab(63.3155% .100794 .128308/.88);--palette-warning-soft-page-bg:oklab(94.672% .0112814 .018279);--palette-warning-soft-page-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-page-bg-hover:oklab(89.352% .0262064 .0333601);--palette-warning-soft-page-edge-hover:oklab(63.3155% .100794 .128308/.88);--palette-warning-soft-subtle-bg:oklab(92.648% .00619956 .0699497);--palette-warning-soft-subtle-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-subtle-bg-hover:oklab(87.65% .0219331 .0768105);--palette-warning-soft-subtle-edge-hover:oklab(63.3155% .100794 .128308/.88);--palette-warning-ghost-fg:oklab(47.3% .0948219 .0988828);--palette-warning-ghost-bg:oklab(0% 0 0/0);--palette-warning-ghost-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-bg-hover:oklab(63.3155% .100794 .128308/.14);--palette-warning-ghost-edge-hover:oklab(63.3155% .100794 .128308);--palette-warning-ghost-page-bg:oklab(98.5% 0 0);--palette-warning-ghost-page-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-page-bg-hover:oklab(93.5742% .0141112 .0179631);--palette-warning-ghost-page-edge-hover:oklab(63.3155% .100794 .128308);--palette-warning-ghost-subtle-bg:oklab(96.2% -.0057748 .0587167);--palette-warning-ghost-subtle-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-subtle-bg-hover:oklab(91.5962% .00914482 .0684595);--palette-warning-ghost-subtle-edge-hover:oklab(63.3155% .100794 .128308);--palette-destructive-solid-bg:oklab(51.4% .212373 .0646656);--palette-destructive-solid-fg:oklab(98.5% 0 0);--palette-destructive-solid-edge:oklab(0% 0 0/0);--palette-destructive-solid-bg-hover:oklab(51.189% .194868 .0640785);--palette-destructive-solid-edge-hover:oklab(0% 0 0/0);--palette-destructive-soft-fg:oklab(45.5% .182654 .044516);--palette-destructive-soft-bg:oklab(51.4% .212373 .0646656/.12);--palette-destructive-soft-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-bg-hover:oklab(51.189% .194868 .0640785/.26);--palette-destructive-soft-edge-hover:oklab(51.189% .194868 .0640785/.88);--palette-destructive-soft-page-bg:oklab(92.848% .0254848 .00775988);--palette-destructive-soft-page-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-page-bg-hover:oklab(86.1991% .0506656 .0166604);--palette-destructive-soft-page-edge-hover:oklab(51.189% .194868 .0640785/.88);--palette-destructive-soft-subtle-bg:oklab(88.976% .051251 .0135099);--palette-destructive-soft-subtle-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-subtle-bg-hover:oklab(82.9431% .0723327 .0214956);--palette-destructive-soft-subtle-edge-hover:oklab(51.189% .194868 .0640785/.88);--palette-destructive-ghost-fg:oklab(45.5% .182654 .044516);--palette-destructive-ghost-bg:oklab(0% 0 0/0);--palette-destructive-ghost-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-bg-hover:oklab(51.189% .194868 .0640785/.14);--palette-destructive-ghost-edge-hover:oklab(51.189% .194868 .0640785);--palette-destructive-ghost-page-bg:oklab(98.5% 0 0);--palette-destructive-ghost-page-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-page-bg-hover:oklab(91.8765% .0272815 .00897099);--palette-destructive-ghost-page-edge-hover:oklab(51.189% .194868 .0640785);--palette-destructive-ghost-subtle-bg:oklab(94.1% .0292798 .00653408);--palette-destructive-ghost-subtle-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-subtle-bg-hover:oklab(88.0925% .0524621 .0145903);--palette-destructive-ghost-subtle-edge-hover:oklab(51.189% .194868 .0640785);--palette-info-solid-bg:oklab(51.1% .0317755 -.260066);--palette-info-solid-fg:oklab(98.5% 0 0);--palette-info-solid-edge:oklab(0% 0 0/0);--palette-info-solid-bg-hover:oklab(49.0714% .0309565 -.24875);--palette-info-solid-edge-hover:oklab(0% 0 0/0);--palette-info-soft-fg:oklab(39.8% .0250004 -.193391);--palette-info-soft-bg:oklab(51.1% .0317755 -.260066/.12);--palette-info-soft-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-bg-hover:oklab(49.0714% .0309565 -.24875/.26);--palette-info-soft-edge-hover:oklab(49.0714% .0309565 -.24875/.88);--palette-info-soft-page-bg:oklab(92.812% .00381305 -.0312079);--palette-info-soft-page-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-page-bg-hover:oklab(85.6486% .0080487 -.0646751);--palette-info-soft-page-edge-hover:oklab(49.0714% .0309565 -.24875/.88);--palette-info-soft-subtle-bg:oklab(87.972% .00526838 -.0610925);--palette-info-soft-subtle-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-subtle-bg-hover:oklab(81.5786% .0092725 -.0898053);--palette-info-soft-subtle-edge-hover:oklab(49.0714% .0309565 -.24875/.88);--palette-info-ghost-fg:oklab(39.8% .0250004 -.193391);--palette-info-ghost-bg:oklab(0% 0 0/0);--palette-info-ghost-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-bg-hover:oklab(49.0714% .0309565 -.24875/.14);--palette-info-ghost-edge-hover:oklab(49.0714% .0309565 -.24875);--palette-info-ghost-page-bg:oklab(98.5% 0 0);--palette-info-ghost-page-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-page-bg-hover:oklab(91.58% .00433391 -.034825);--palette-info-ghost-page-edge-hover:oklab(49.0714% .0309565 -.24875);--palette-info-ghost-subtle-bg:oklab(93% .00165378 -.0339598);--palette-info-ghost-subtle-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-subtle-bg-hover:oklab(86.85% .00575617 -.0640304);--palette-info-ghost-subtle-edge-hover:oklab(49.0714% .0309565 -.24875);--palette-border:oklch(70.8% 0 none);--palette-surface:oklch(92.2% 0 none);--palette-text:oklch(14.5% 0 none)}.dark,.theme-dark,[data-theme=dark]{--palette-neutral-solid-bg:oklab(31.3% 0 0);--palette-neutral-solid-fg:oklab(97% 0 0);--palette-neutral-solid-edge:oklab(0% 0 0/0);--palette-neutral-solid-bg-hover:oklab(40.918% 0 0);--palette-neutral-solid-edge-hover:oklab(0% 0 0/0);--palette-neutral-soft-fg:oklab(97% 0 0);--palette-neutral-soft-bg:oklab(98.5% 0 0/.12);--palette-neutral-soft-edge:oklab(37.1% 0 0/.88);--palette-neutral-soft-bg-hover:oklab(92.2% 0 0/.26);--palette-neutral-soft-edge-hover:oklab(92.2% 0 0/.88);--palette-neutral-soft-page-bg:oklab(20.5% 0 0);--palette-neutral-soft-page-edge:oklab(37.1% 0 0/.88);--palette-neutral-soft-page-bg-hover:oklab(30.538% 0 0);--palette-neutral-soft-page-edge-hover:oklab(92.2% 0 0/.88);--palette-neutral-soft-subtle-bg:oklab(26.9% 0 0);--palette-neutral-soft-subtle-edge:oklab(37.1% 0 0/.88);--palette-neutral-soft-subtle-bg-hover:oklab(36.042% 0 0);--palette-neutral-soft-subtle-edge-hover:oklab(92.2% 0 0/.88);--palette-neutral-ghost-fg:oklab(97% 0 0);--palette-neutral-ghost-bg:oklab(0% 0 0/0);--palette-neutral-ghost-edge:oklab(37.1% 0 0);--palette-neutral-ghost-bg-hover:oklab(92.2% 0 0/.14);--palette-neutral-ghost-edge-hover:oklab(92.2% 0 0);--palette-neutral-ghost-page-bg:oklab(14.5% 0 0);--palette-neutral-ghost-page-edge:oklab(37.1% 0 0);--palette-neutral-ghost-page-bg-hover:oklab(25.378% 0 0);--palette-neutral-ghost-page-edge-hover:oklab(92.2% 0 0);--palette-neutral-ghost-subtle-bg:oklab(26.9% 0 0);--palette-neutral-ghost-subtle-edge:oklab(37.1% 0 0);--palette-neutral-ghost-subtle-bg-hover:oklab(36.042% 0 0);--palette-neutral-ghost-subtle-edge-hover:oklab(92.2% 0 0);--palette-primary-solid-bg:oklab(98.5% 0 0);--palette-primary-solid-fg:oklab(14.5% 0 0);--palette-primary-solid-edge:oklab(0% 0 0/0);--palette-primary-solid-bg-hover:oklab(92.2% 0 0);--palette-primary-solid-edge-hover:oklab(0% 0 0/0);--palette-primary-soft-fg:oklab(97% 0 0);--palette-primary-soft-bg:oklab(98.5% 0 0/.12);--palette-primary-soft-edge:oklab(98.5% 0 0/.88);--palette-primary-soft-bg-hover:oklab(92.2% 0 0/.26);--palette-primary-soft-edge-hover:oklab(92.2% 0 0/.88);--palette-primary-soft-page-bg:oklab(24.58% 0 0);--palette-primary-soft-page-edge:oklab(98.5% 0 0/.88);--palette-primary-soft-page-bg-hover:oklab(34.702% 0 0);--palette-primary-soft-page-edge-hover:oklab(92.2% 0 0/.88);--palette-primary-soft-subtle-bg:oklab(29.86% 0 0);--palette-primary-soft-subtle-edge:oklab(98.5% 0 0/.88);--palette-primary-soft-subtle-bg-hover:oklab(39.142% 0 0);--palette-primary-soft-subtle-edge-hover:oklab(92.2% 0 0/.88);--palette-primary-ghost-fg:oklab(97% 0 0);--palette-primary-ghost-bg:oklab(0% 0 0/0);--palette-primary-ghost-edge:oklab(98.5% 0 0);--palette-primary-ghost-bg-hover:oklab(92.2% 0 0/.14);--palette-primary-ghost-edge-hover:oklab(92.2% 0 0);--palette-primary-ghost-page-bg:oklab(14.5% 0 0);--palette-primary-ghost-page-edge:oklab(98.5% 0 0);--palette-primary-ghost-page-bg-hover:oklab(25.378% 0 0);--palette-primary-ghost-page-edge-hover:oklab(92.2% 0 0);--palette-primary-ghost-subtle-bg:oklab(20.5% 0 0);--palette-primary-ghost-subtle-edge:oklab(98.5% 0 0);--palette-primary-ghost-subtle-bg-hover:oklab(30.538% 0 0);--palette-primary-ghost-subtle-edge-hover:oklab(92.2% 0 0);--palette-secondary-solid-bg:oklab(70.8% 0 0);--palette-secondary-solid-fg:oklab(14.5% 0 0);--palette-secondary-solid-edge:oklab(0% 0 0/0);--palette-secondary-solid-bg-hover:oklab(87% 0 0);--palette-secondary-solid-edge-hover:oklab(0% 0 0/0);--palette-secondary-soft-fg:oklab(92.2% 0 0);--palette-secondary-soft-bg:oklab(70.8% 0 0/.12);--palette-secondary-soft-edge:oklab(70.8% 0 0/.88);--palette-secondary-soft-bg-hover:oklab(87% 0 0/.26);--palette-secondary-soft-edge-hover:oklab(87% 0 0/.88);--palette-secondary-soft-page-bg:oklab(21.256% 0 0);--palette-secondary-soft-page-edge:oklab(70.8% 0 0/.88);--palette-secondary-soft-page-bg-hover:oklab(33.35% 0 0);--palette-secondary-soft-page-edge-hover:oklab(87% 0 0/.88);--palette-secondary-soft-subtle-bg:oklab(32.168% 0 0);--palette-secondary-soft-subtle-edge:oklab(70.8% 0 0/.88);--palette-secondary-soft-subtle-bg-hover:oklab(42.526% 0 0);--palette-secondary-soft-subtle-edge-hover:oklab(87% 0 0/.88);--palette-secondary-ghost-fg:oklab(92.2% 0 0);--palette-secondary-ghost-bg:oklab(0% 0 0/0);--palette-secondary-ghost-edge:oklab(70.8% 0 0);--palette-secondary-ghost-bg-hover:oklab(87% 0 0/.14);--palette-secondary-ghost-edge-hover:oklab(87% 0 0);--palette-secondary-ghost-page-bg:oklab(14.5% 0 0);--palette-secondary-ghost-page-edge:oklab(70.8% 0 0);--palette-secondary-ghost-page-bg-hover:oklab(24.65% 0 0);--palette-secondary-ghost-page-edge-hover:oklab(87% 0 0);--palette-secondary-ghost-subtle-bg:oklab(26.9% 0 0);--palette-secondary-ghost-subtle-edge:oklab(70.8% 0 0);--palette-secondary-ghost-subtle-bg-hover:oklab(35.314% 0 0);--palette-secondary-ghost-subtle-edge-hover:oklab(87% 0 0);--palette-success-solid-bg:oklab(50.8% -.114299 .0293215);--palette-success-solid-fg:oklab(98.5% 0 0);--palette-success-solid-edge:oklab(0% 0 0/0);--palette-success-solid-bg-hover:oklab(57.2945% -.116429 .0314383);--palette-success-solid-edge-hover:oklab(0% 0 0/0);--palette-success-soft-fg:oklab(84.5% -.138113 .0370641);--palette-success-soft-bg:oklab(50.8% -.114299 .0293215/.12);--palette-success-soft-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-bg-hover:oklab(57.2945% -.116429 .0314383/.26);--palette-success-soft-edge-hover:oklab(57.2945% -.116429 .0314383/.88);--palette-success-soft-page-bg:oklab(18.856% -.0137159 .00351857);--palette-success-soft-page-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-page-bg-hover:oklab(25.6266% -.0302715 .00817395);--palette-success-soft-page-edge-hover:oklab(57.2945% -.116429 .0314383/.88);--palette-success-soft-subtle-bg:oklab(39.36% -.0802174 .0165174);--palette-success-soft-subtle-edge:oklab(50.8% -.114299 .0293215/.88);--palette-success-soft-subtle-bg-hover:oklab(42.8686% -.0861932 .0191048);--palette-success-soft-subtle-edge-hover:oklab(57.2945% -.116429 .0314383/.88);--palette-success-ghost-fg:oklab(84.5% -.138113 .0370641);--palette-success-ghost-bg:oklab(0% 0 0/0);--palette-success-ghost-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-bg-hover:oklab(57.2945% -.116429 .0314383/.14);--palette-success-ghost-edge-hover:oklab(57.2945% -.116429 .0314383);--palette-success-ghost-page-bg:oklab(14.5% 0 0);--palette-success-ghost-page-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-page-bg-hover:oklab(20.4912% -.0163 .00440136);--palette-success-ghost-page-edge-hover:oklab(57.2945% -.116429 .0314383);--palette-success-ghost-subtle-bg:oklab(37.8% -.0755699 .0147714);--palette-success-ghost-subtle-edge:oklab(50.8% -.114299 .0293215);--palette-success-ghost-subtle-bg-hover:oklab(40.5292% -.0812901 .0171048);--palette-success-ghost-subtle-edge-hover:oklab(57.2945% -.116429 .0314383);--palette-warning-solid-bg:oklab(66.6% .0940116 .152325);--palette-warning-solid-fg:oklab(14.5% 0 0);--palette-warning-solid-edge:oklab(0% 0 0/0);--palette-warning-solid-bg-hover:oklab(70.431% .0802 .143076);--palette-warning-solid-edge-hover:oklab(0% 0 0/0);--palette-warning-soft-fg:oklab(87.9% -.00473352 .168934);--palette-warning-soft-bg:oklab(66.6% .0940116 .152325/.12);--palette-warning-soft-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-bg-hover:oklab(70.431% .0802 .143076/.26);--palette-warning-soft-edge-hover:oklab(70.431% .0802 .143076/.88);--palette-warning-soft-page-bg:oklab(20.752% .0112814 .018279);--palette-warning-soft-page-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-page-bg-hover:oklab(29.0421% .020852 .0371997);--palette-warning-soft-page-edge-hover:oklab(70.431% .0802 .143076/.88);--palette-warning-soft-subtle-bg:oklab(44.424% .0798656 .0890623);--palette-warning-soft-subtle-edge:oklab(66.6% .0940116 .152325/.88);--palette-warning-soft-subtle-bg-hover:oklab(48.9481% .0785251 .0967221);--palette-warning-soft-subtle-edge-hover:oklab(70.431% .0802 .143076/.88);--palette-warning-ghost-fg:oklab(87.9% -.00473352 .168934);--palette-warning-ghost-bg:oklab(0% 0 0/0);--palette-warning-ghost-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-bg-hover:oklab(70.431% .0802 .143076/.14);--palette-warning-ghost-edge-hover:oklab(70.431% .0802 .143076);--palette-warning-ghost-page-bg:oklab(14.5% 0 0);--palette-warning-ghost-page-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-page-bg-hover:oklab(22.3303% .011228 .0200306);--palette-warning-ghost-page-edge-hover:oklab(70.431% .0802 .143076);--palette-warning-ghost-subtle-bg:oklab(41.4% .0779366 .0804356);--palette-warning-ghost-subtle-edge:oklab(66.6% .0940116 .152325);--palette-warning-ghost-subtle-bg-hover:oklab(45.4643% .0782535 .0892052);--palette-warning-ghost-subtle-edge-hover:oklab(70.431% .0802 .143076);--palette-destructive-solid-bg:oklab(51.4% .212373 .0646656);--palette-destructive-solid-fg:oklab(98.5% 0 0);--palette-destructive-solid-edge:oklab(0% 0 0/0);--palette-destructive-solid-bg-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-solid-edge-hover:oklab(0% 0 0/0);--palette-destructive-soft-fg:oklab(81% .114595 .0236021);--palette-destructive-soft-bg:oklab(51.4% .212373 .0646656/.12);--palette-destructive-soft-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-bg-hover:oklab(54.9356% .21195 .0500346/.26);--palette-destructive-soft-edge-hover:oklab(54.9356% .21195 .0500346/.88);--palette-destructive-soft-page-bg:oklab(18.928% .0254848 .00775988);--palette-destructive-soft-page-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-page-bg-hover:oklab(25.0132% .0551069 .013009);--palette-destructive-soft-page-edge-hover:oklab(54.9356% .21195 .0500346/.88);--palette-destructive-soft-subtle-bg:oklab(42.248% .163162 .0327106);--palette-destructive-soft-subtle-edge:oklab(51.4% .212373 .0646656/.88);--palette-destructive-soft-subtle-bg-hover:oklab(44.6232% .170881 .0339903);--palette-destructive-soft-subtle-edge-hover:oklab(54.9356% .21195 .0500346/.88);--palette-destructive-ghost-fg:oklab(81% .114595 .0236021);--palette-destructive-ghost-bg:oklab(0% 0 0/0);--palette-destructive-ghost-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-bg-hover:oklab(54.9356% .21195 .0500346/.14);--palette-destructive-ghost-edge-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-ghost-page-bg:oklab(14.5% 0 0);--palette-destructive-ghost-page-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-page-bg-hover:oklab(20.161% .0296729 .00700485);--palette-destructive-ghost-page-edge-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-ghost-subtle-bg:oklab(41% .156452 .0283531);--palette-destructive-ghost-subtle-edge:oklab(51.4% .212373 .0646656);--palette-destructive-ghost-subtle-bg-hover:oklab(42.951% .164221 .0313885);--palette-destructive-ghost-subtle-edge-hover:oklab(54.9356% .21195 .0500346);--palette-info-solid-bg:oklab(51.1% .0317755 -.260066);--palette-info-solid-fg:oklab(98.5% 0 0);--palette-info-solid-edge:oklab(0% 0 0/0);--palette-info-solid-bg-hover:oklab(55.1929% .0373722 -.238521);--palette-info-solid-edge-hover:oklab(0% 0 0/0);--palette-info-soft-fg:oklab(78.5% .00944898 -.114611);--palette-info-soft-bg:oklab(51.1% .0317755 -.260066/.12);--palette-info-soft-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-bg-hover:oklab(55.1929% .0373722 -.238521/.26);--palette-info-soft-edge-hover:oklab(55.1929% .0373722 -.238521/.88);--palette-info-soft-page-bg:oklab(18.892% .00381305 -.0312079);--palette-info-soft-page-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-page-bg-hover:oklab(25.0801% .00971677 -.0620155);--palette-info-soft-page-edge-hover:oklab(55.1929% .0373722 -.238521/.88);--palette-info-soft-subtle-bg:oklab(37.724% .0229742 -.156471);--palette-info-soft-subtle-edge:oklab(51.1% .0317755 -.260066/.88);--palette-info-soft-subtle-bg-hover:oklab(40.9161% .0258296 -.16735);--palette-info-soft-subtle-edge-hover:oklab(55.1929% .0373722 -.238521/.88);--palette-info-ghost-fg:oklab(78.5% .00944898 -.114611);--palette-info-ghost-bg:oklab(0% 0 0/0);--palette-info-ghost-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-bg-hover:oklab(55.1929% .0373722 -.238521/.14);--palette-info-ghost-edge-hover:oklab(55.1929% .0373722 -.238521);--palette-info-ghost-page-bg:oklab(14.5% 0 0);--palette-info-ghost-page-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-page-bg-hover:oklab(20.197% .00523211 -.033393);--palette-info-ghost-page-edge-hover:oklab(55.1929% .0373722 -.238521);--palette-info-ghost-subtle-bg:oklab(35.9% .0217741 -.142344);--palette-info-ghost-subtle-edge:oklab(51.1% .0317755 -.260066);--palette-info-ghost-subtle-bg-hover:oklab(38.601% .0239578 -.155809);--palette-info-ghost-subtle-edge-hover:oklab(55.1929% .0373722 -.238521);--palette-border:oklch(37.1% 0 none);--palette-surface:oklch(26.9% 0 none);--palette-text:oklch(98.5% 0 none)}}@layer base,components,utilities;
|
package/dist/theme.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
2
|
-
@layer theme{:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 none);--color-neutral-100:oklch(97% 0 none);--color-neutral-200:oklch(92.2% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-400:oklch(70.8% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-600:oklch(43.9% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-800:oklch(26.9% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-neutral-950:oklch(14.5% 0 none);--color-white:#fff;--font-default:"Segoe UI", system-ui, sans-serif;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:light-dark(var(--color-neutral-400),var(--color-neutral-700));--color-border-hover:light-dark(var(--color-neutral-600),var(--color-neutral-500));--color-control-border:var(--color-neutral-500);--color-background:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-foreground:light-dark(var(--color-neutral-100),var(--color-neutral-900));--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-secondary:light-dark(var(--color-neutral-700),var(--color-neutral-400));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring:color-mix(in srgb, light-dark(var(--color-neutral-950),var(--color-neutral-50)) 64%, transparent)}@supports (color:color-mix(in lab, red, red)){:root{--focus-ring:color-mix(in srgb, var(--color-primary) 64%, transparent)}}:root{--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}@media (prefers-reduced-motion:reduce){:root{--ui-active-transform:none}}.light,.theme-light,[data-theme=light]{color-scheme:light}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark}}@layer base;@layer components{:root,.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}.destructive{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip-bubble,.tooltip-icon,.badge,.kbd,.code,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch),:is(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch).neutral{--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:where(.data-table),.data-table.neutral,.data-table tr.neutral{--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}:where(.tooltip-bubble),.tooltip-bubble.neutral{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}.solid{--ui-fill:100%;--ui-fg-on-fill:100%}.soft{--ui-fill:12%;--ui-fg-on-fill:0%}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%}.edged{--ui-border:100%}.edgeless{--ui-border:0%}@property --ui-elevation{syntax:"*";inherits:false}@property --elevation-y{syntax:"*";inherits:false}@property --elevation-blur{syntax:"*";inherits:false}.flat{--ui-elevation:0}.raised,.floating{--elevation-y:1px;--elevation-blur:3px}.raised{--ui-elevation:1}.floating{--ui-elevation:2}.cut-diagonal{--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0}.cut-diagonal-reverse{--ui-corner-tl:0;--ui-corner-tr:1;--ui-corner-br:0;--ui-corner-bl:1}}@layer utilities;@media (forced-colors:active){*{--ui-border-max:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-line-style:solid;--ui-rule-style:solid;--ui-halo-ink:initial;--ui-surface-image:none;--ui-label-shadow:none}}
|
|
1
|
+
/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer theme{:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 none);--color-neutral-100:oklch(97% 0 none);--color-neutral-200:oklch(92.2% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-400:oklch(70.8% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-600:oklch(43.9% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-800:oklch(26.9% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-neutral-950:oklch(14.5% 0 none);--color-white:#fff;--font-default:"Segoe UI", system-ui, sans-serif;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:var(--_contrast-border,light-dark(var(--color-neutral-400),var(--color-neutral-700)));--color-border-hover:light-dark(var(--color-neutral-600),var(--color-neutral-500));--color-control-border:var(--color-neutral-500);--color-background:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-foreground:light-dark(var(--color-neutral-100),var(--color-neutral-900));--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-secondary:light-dark(var(--color-neutral-700),var(--color-neutral-400));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}.light,.theme-light,[data-theme=light]{color-scheme:light;color:var(--color-text)}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark;color:var(--color-text)}@media print{:root,.dark,.theme-dark,[data-theme=dark]{color-scheme:light}}@media (prefers-contrast:more){:root,:host{--_contrast-border:light-dark(var(--color-neutral-600),var(--color-neutral-400))}}}@layer base;@layer components{:root{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-fill-max:20%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip-bubble,.tooltip-icon,.badge,.kbd,.code,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch){--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:where(.data-table){--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}:where(.tooltip-bubble){--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}}@layer utilities{@layer families{.destructive{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}@media (prefers-contrast:more){.destructive{--intent-border:var(--color-destructive-strong)}}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}@media (prefers-contrast:more){.info{--intent-border:var(--color-info-strong)}}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}@media (prefers-contrast:more){.primary{--intent-border:var(--color-primary-strong)}}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}@media (prefers-contrast:more){.secondary{--intent-border:var(--color-accent-strong)}}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}@media (prefers-contrast:more){.success{--intent-border:var(--color-success-strong)}}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}@media (prefers-contrast:more){.warning{--intent-border:var(--color-warning-strong)}}.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.cut-diagonal{--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0}.cut-diagonal-reverse{--ui-corner-tl:0;--ui-corner-tr:1;--ui-corner-br:0;--ui-corner-bl:1}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%;--_own-fill:0%;--_holds-ink:none}.soft{--ui-fill:12%;--ui-fg-on-fill:0%;--_own-fill:12%;--_holds-ink:none}.solid{--ui-fill:100%;--ui-fg-on-fill:100%;--_own-fill:100%;--_holds-ink: }.floating{--elevation-y:1px;--elevation-blur:3px;--ui-elevation:2}.raised{--elevation-y:1px;--elevation-blur:3px;--ui-elevation:1}.edged{--ui-border:100%;--_own-edge:100%}.edgeless{--ui-border:0%;--_own-edge:0%}.flat{--ui-elevation:0}.lg{--_size-lg: }.sm{--_size-sm: }}}@layer utilities.families{:is(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch).neutral{--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:is(.data-table,.data-table tr).neutral{--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}.neutral.tooltip-bubble{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}}@property --_held-ink{syntax:"<color>";inherits:true;initial-value:#0000}@property --_held-on{syntax:"<percentage>";inherits:true;initial-value:0%}@property --_own-hold{syntax:"<percentage>";inherits:false;initial-value:0%}@property --_own-fill{syntax:"<percentage>";inherits:false;initial-value:0%}@property --_own-edge{syntax:"<percentage>";inherits:false;initial-value:100%}@property --ui-elevation{syntax:"*";inherits:false}@property --elevation-y{syntax:"*";inherits:false}@property --elevation-blur{syntax:"*";inherits:false}@property --_size-sm{syntax:"*";inherits:false}@property --_size-lg{syntax:"*";inherits:false}@media (forced-colors:active){*{--ui-border-max:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-line-style:solid;--ui-rule-style:solid;--ui-halo-ink:initial;--ui-surface-image:none;--ui-label-shadow:none}}
|
package/docs/accessibility.md
CHANGED
|
@@ -14,14 +14,14 @@ This page lists both halves: what the CSS provides, and what your application ha
|
|
|
14
14
|
|
|
15
15
|
### Focus and state
|
|
16
16
|
|
|
17
|
-
| Feature | Behavior
|
|
18
|
-
| ------------------ |
|
|
19
|
-
| `:focus-visible` | A focus outline on every element, drawn with `--focus-ring`, `--focus-ring-width`, and `--focus-ring-offset`.
|
|
20
|
-
| Form control focus | `.ipt`, `.textarea`, and `.select` draw the focus outline and change their border to the intent color. Typed text in a field with an intent class is in the intent's readable tone, `--intent-strong`.
|
|
21
|
-
| Invalid controls | `aria-invalid="true"` on a form control turns its border, focus color, and typed text destructive, the text in the destructive readable tone.
|
|
22
|
-
| Disabled controls | `disabled`, `aria-disabled="true"`, `data-disabled`, and `.disabled` show the disabled cursor and opacity, and a disabled control does not react to hover, including inside an `.input-group`.
|
|
23
|
-
| Open state | `data-state="open"` on a `.tooltip` shows its bubble without hover or focus, and `data-state="closed"` hides it while hovered or focused. No other component reads either.
|
|
24
|
-
| Native `<dialog>` | A `<dialog>` with `.card`, `.panel`, or
|
|
17
|
+
| Feature | Behavior |
|
|
18
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
19
|
+
| `:focus-visible` | A focus outline on every element, drawn with `--focus-ring`, `--focus-ring-width`, and `--focus-ring-offset`. On a component filled past half strength, such as a `.solid.primary` button, a 2px line of the page color runs inside the ring, so the ring stays visible on a fill of its own color. |
|
|
20
|
+
| Form control focus | `.ipt`, `.textarea`, and `.select` draw the focus outline and change their border to the intent color. Typed text in a field with an intent class is in the intent's readable tone, `--intent-strong`. |
|
|
21
|
+
| Invalid controls | `aria-invalid="true"` on a form control turns its border, focus color, and typed text destructive, the text in the destructive readable tone. A checkbox, radio, or switch is drawn exactly as its `.destructive` version, checked mark included. |
|
|
22
|
+
| Disabled controls | `disabled`, `aria-disabled="true"`, `data-disabled`, and `.disabled` show the disabled cursor and opacity, and a disabled control does not react to hover, including inside an `.input-group`. |
|
|
23
|
+
| Open state | `data-state="open"` on a `.tooltip` shows its bubble without hover or focus, and `data-state="closed"` hides it while hovered or focused. No other component reads either. |
|
|
24
|
+
| Native `<dialog>` | A `<dialog>` with `.card`, `.panel`, `.surface`, or your own class that does `@apply surface` stays hidden until it is opened, and opens centered. A margin you set on the dialog, as a utility or in your own CSS, still overrides the centering, except that a margin utility does not when your class applies `surface` in plain CSS; see [Customizing → Composition helpers](./usage/customizing.md#composition-helpers). With the [classless stylesheet](./setup.md#classless-html), a plain `<dialog>` is a `.card.floating` and behaves the same; with the other entrypoints, a dialog with none of these classes is left alone. Trapping focus, closing on Escape, and making the page behind it inert are up to your application. |
|
|
25
25
|
|
|
26
26
|
### Visually hidden content
|
|
27
27
|
|
|
@@ -33,7 +33,7 @@ WCAG 1.4.11 asks that the boundary of a control you need to see to use it measur
|
|
|
33
33
|
|
|
34
34
|
| Feature | Behavior |
|
|
35
35
|
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
36
|
-
| Text controls at rest | A text control's border rests lighter than its intent's full border, below 3:1 by choice, so hover and focus have a stronger tone to change to.
|
|
36
|
+
| Text controls at rest | A text control's border rests lighter than its intent's full border, below 3:1 by choice, so hover and focus have a stronger tone to change to. [Increased contrast](#increased-contrast) draws it whole. |
|
|
37
37
|
| Toggles | `.checkbox`, `.radio`, and `.switch` draw their full border, because the border is the only thing that shows an unchecked box. A `.switch` with its own `.edgeless` is the exception, below. |
|
|
38
38
|
| `.edgeless` from a container | Ignored by every text control and toggle: a container cannot remove the border of a field or toggle inside it. |
|
|
39
39
|
| `.edgeless` on the control | `.ipt`, `.textarea`, `.select`, and `.switch` drop their border and no longer meet 1.4.11 at rest. `.switch.ghost` keeps its border even then, because with no fill and no border nothing would show the track. |
|
|
@@ -58,11 +58,11 @@ With no intent class, the outline is the quiet border gray, `--color-border`. To
|
|
|
58
58
|
|
|
59
59
|
### Motion and transparency
|
|
60
60
|
|
|
61
|
-
| Feature | Behavior
|
|
62
|
-
| -------------------------- |
|
|
63
|
-
| Reduced motion, components | With `prefers-reduced-motion: reduce`, every component stops its own transitions and animations: the skeleton and progress shimmer, the indeterminate bar, the tooltip, the toggle marks, and the press. |
|
|
64
|
-
| Reduced motion, whole page | The reset also shortens every other animation and transition on the page.
|
|
65
|
-
| Reduced transparency | With `prefers-reduced-transparency: reduce`, `.glass
|
|
61
|
+
| Feature | Behavior |
|
|
62
|
+
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| Reduced motion, components | With `prefers-reduced-motion: reduce`, every component stops its own transitions and animations: the skeleton and progress shimmer, the indeterminate bar, the tooltip, the toggle marks, and the press's motion. The press itself still happens, at once, on the default look and under every aesthetic and solo class, since it is the feedback that a click landed. |
|
|
64
|
+
| Reduced motion, whole page | The reset also shortens every other animation and transition on the page. |
|
|
65
|
+
| Reduced transparency | With `prefers-reduced-transparency: reduce`, and in forced colors, `.glass`, `.glass-liquid`, and `.glass-solo` drop their blur and lens and become opaque. |
|
|
66
66
|
|
|
67
67
|
Each component's reduced-motion rule ships with the component, so every entrypoint that includes it respects reduced motion without the reset, including `@codenhub/styles/components`, `@codenhub/styles/tw/components`, and each `/tw/*` component entrypoint. The complete and native entrypoints add the reset's page-wide rule.
|
|
68
68
|
|
|
@@ -84,30 +84,49 @@ The reset's rule is `!important` inside the `base` layer, and a layered `!import
|
|
|
84
84
|
|
|
85
85
|
Respecting reduced motion is not the whole requirement. Motion that keeps going next to content, such as a shimmer left on a card after it has loaded, needs a way to stop it for every user; see [Feedback → Animation that keeps running](./usage/feedback.md#animation-that-keeps-running).
|
|
86
86
|
|
|
87
|
+
### Increased contrast
|
|
88
|
+
|
|
89
|
+
With `prefers-contrast: more`, the borders the package draws below 3:1 by choice are drawn at 3:1 or more against what is next to them, in both themes. Text, solid fills, and focus rings already meet their ratios and do not change. `prefers-contrast: less` is not read.
|
|
90
|
+
|
|
91
|
+
| Feature | Behavior |
|
|
92
|
+
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| Text controls | `.ipt`, `.textarea`, `.select`, and `.input-group` rest at their full border, so hover and focus no longer change its tone. The focus ring is the same. |
|
|
94
|
+
| Neutral borders | `--color-border` takes a heavier gray, `neutral-600` in light and `neutral-400` in dark, so a card's border, a divider, a table's rules, and a neutral button's or badge's border meet 3:1. If you set `--color-border` yourself, your color is kept; measure it. |
|
|
95
|
+
| Intent borders | An intent's border takes its strong tone, `--color-<intent>-strong`, so `.edged` on a `.soft` `.alert`, `.panel`, `.badge`, `.kbd`, `.code`, or `.pre` meets 3:1 against both its fill and the page, for every intent. |
|
|
96
|
+
| Progress track | The track draws an outline in its border color, which meets 3:1 with or without an intent class. `.edgeless` on the bar or on a container still removes it. |
|
|
97
|
+
| Glass | `.glass`, `.glass-liquid`, and `.glass-solo` drop their blur and lens and become opaque, as with reduced transparency, and their white hairline becomes a gray border. |
|
|
98
|
+
| Chunky tile | `.chunky-tile` draws tiles and surfaces in the heavier gray its controls use. |
|
|
99
|
+
|
|
100
|
+
What you remove stays removed: `.edgeless` on a control still drops its border, and a `.panel` still has none unless you add `.edged`.
|
|
101
|
+
|
|
87
102
|
### Color and contrast
|
|
88
103
|
|
|
89
104
|
The measurements below are for the shipped colors. Once you change a color token, measure your own pairs again; [Theming → Change the brand color](./usage/theming.md#change-the-brand-color) shows which pairs to check.
|
|
90
105
|
|
|
91
|
-
| Feature | Behavior
|
|
92
|
-
| ----------------------- |
|
|
93
|
-
| Filled labels | Every intent's `.solid` label meets 4.5:1 (WCAG 1.4.3) as normal text, in both themes. The lowest is success, at 5.14:1.
|
|
94
|
-
| Warning text | `--color-warning-contrast` is near-black, not the page color, because an amber dark enough to carry white text no longer looks amber.
|
|
95
|
-
| Partial fills | The contrast text color appears only on fills above half strength, so a text control's capped fill keeps the intent's own text color.
|
|
96
|
-
| Intent color in dark | In dark mode a `.soft` or `.ghost` label uses the `-300` shade of its intent, so it keeps its hue instead of turning white.
|
|
97
|
-
|
|
|
98
|
-
|
|
|
106
|
+
| Feature | Behavior |
|
|
107
|
+
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
108
|
+
| Filled labels | Every intent's `.solid` label meets 4.5:1 (WCAG 1.4.3) as normal text, in both themes. The lowest is success, at 5.14:1. |
|
|
109
|
+
| Warning text | `--color-warning-contrast` is near-black, not the page color, because an amber dark enough to carry white text no longer looks amber. |
|
|
110
|
+
| Partial fills | The contrast text color appears only on fills above half strength, so a text control's capped fill keeps the intent's own text color. |
|
|
111
|
+
| Intent color in dark | In dark mode a `.soft` or `.ghost` label uses the `-300` shade of its intent, so it keeps its hue instead of turning white. |
|
|
112
|
+
| Text on a filled parent | A neutral component that is not `.solid`, such as a badge in a `.btn.primary` or a ghost button in a `.card.solid.primary`, prints in its parent's text color instead of the page's, so it keeps the parent's contrast. |
|
|
113
|
+
| Print | A page prints in the light theme, and filled components print their background (`print-color-adjust: exact`), so contrast text never lands on blank paper. A `dark:` utility still applies in print; see [Theming → Printing](./usage/theming.md#printing). |
|
|
114
|
+
| Toggle marks | A checked mark measures at least 3:1 against every fill its presentation can give it, in both themes. |
|
|
115
|
+
| Soft fills with borders | `.edged` on a `.soft` `.alert`, `.panel`, `.badge`, `.kbd`, `.code`, or `.pre` draws a border that measures below 3:1 against the 12% fill for some intents, which ones depending on the theme. Measure the pair before relying on that border as a control's boundary. [Increased contrast](#increased-contrast) brings every one of them to 3:1. |
|
|
99
116
|
|
|
100
117
|
### Forced colors and direction
|
|
101
118
|
|
|
102
|
-
| Feature | Behavior
|
|
103
|
-
| -------------- |
|
|
104
|
-
| Forced colors | With `forced-colors: active`, borders, checked states,
|
|
105
|
-
| Text direction | Under `dir="rtl"`, the quote bar, the alert icon, the progress fill, the vertical divider, the switch knob, table alignment, and a select's chevron all switch sides. No class is needed.
|
|
119
|
+
| Feature | Behavior |
|
|
120
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
121
|
+
| Forced colors | With `forced-colors: active`, borders, checked states, a `.select`'s chevron, and a progress bar's value stay visible, drawn in system colors, under every aesthetic. An aesthetic that draws its border as an inner shadow, such as `.pixel`, draws a real border instead. Glass becomes opaque, because forced colors keep a background's transparency. |
|
|
122
|
+
| Text direction | Under `dir="rtl"`, the quote bar, the alert icon, the progress fill, the vertical divider, the switch knob, table alignment, and a select's chevron all switch sides. No class is needed. |
|
|
106
123
|
|
|
107
|
-
In forced colors, `.text-control`, `.ipt`, `.textarea`, `.select`,
|
|
124
|
+
In forced colors, `.text-control`, `.ipt`, `.textarea`, `.select`, the toggles, and your own class that does `@apply text-control` show a 2px `Highlight` focus outline. Inside an `.input-group`, the group draws the field's ring and the control inside draws none, so a focused field shows one ring. The native entrypoint gives unclassed text inputs, selects, textareas, checkboxes, and radios the same outline.
|
|
108
125
|
|
|
109
126
|
Checkboxes, radios, and switches use the system colors `Canvas`, `CanvasText`, `Highlight`, and `HighlightText`, so checked and unchecked stay distinct: a checked toggle is filled with `Highlight` and its mark is `HighlightText`, on the classes and in the native entrypoint alike. Shape, size, and spacing do not change.
|
|
110
127
|
|
|
128
|
+
A `.progress` bar does the same: its filled part is `CanvasText` on a `Canvas` track with a `CanvasText` outline, whatever its intent or presentation, so a half-full bar does not read as an empty one. The `.active` shimmer is not drawn.
|
|
129
|
+
|
|
111
130
|
## Required outside CSS
|
|
112
131
|
|
|
113
132
|
Use the HTML element that matches what the component does, and add the behavior the CSS cannot.
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: 0.8.0
|
|
3
|
+
date: 2026-11-10
|
|
4
|
+
description: Every class, modifier, and size is a Tailwind utility on /tw, a build command for projects without a bundler, sizes for text fields, a /tw build that emits only the classes you use, smaller compiled stylesheets, and fixes to applied helpers, input groups, focus rings, nested aesthetics, and forced colors.
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# 0.8.0
|
|
8
|
+
|
|
9
|
+
On `/tw` every intent, presentation, elevation, corner, size, and modifier class is a Tailwind utility, so `@apply btn primary soft sm` and `md:lg` work, and a `/tw` build emits only the classes your pages use. A `codenhub-styles build` command writes that trimmed stylesheet for a project that does not run Tailwind, with a bundler or without one. Text fields take `.sm` and `.lg`. The compiled stylesheets are about half their size before compression. The release also fixes a round of bugs in applied helpers, input groups, focus rings, nested aesthetics, and forced colors.
|
|
10
|
+
|
|
11
|
+
## Added
|
|
12
|
+
|
|
13
|
+
- **Every class is a utility on `/tw`.** The intents, the presentation (`solid`, `soft`, `ghost`, `edged`, `edgeless`), the elevation (`flat`, `raised`, `floating`), the corner patterns, and the sizes (`sm`, `lg`) are Tailwind utilities, so one class of yours can carry a whole recipe, `@utility btn-save { @apply btn primary soft sm; }`, and variants such as `hover:primary`, `md:lg`, and `dark:solid` apply a class under a condition. Before, they were plain classes: `@apply` could not name them and those variants compiled to nothing. See [Tailwind CSS v4 → Build your own components with `@apply`](../integrating/tailwind.md#build-your-own-components-with-apply).
|
|
14
|
+
- **Component modifiers are utilities too.** `tight`, `loose`, `vertical`, `horizontal`, `between`, `narrow`, `wide`, `p-xs`, `p-sm`, `p-lg`, `flush`, `icon`, `pill`, `active`, `indeterminate`, `ruled`, `ruleless`, `interactive`, `hoverable`, and `pressable` work in `@apply` and with variants: `@apply stack tight`, `@apply btn icon pill`, and `md:tight`. A modifier still changes only the components that read it; `.wide` or `.active` on an element of your own sets nothing visible. The disabled state is not a utility: it stays the `disabled`, `aria-disabled`, or `data-disabled` attribute, or the `.disabled` class in markup.
|
|
15
|
+
- **A build command for projects without a bundler.** `npx codenhub-styles build --content "app/views/**/*.erb" --output public/stylekit.css` reads your templates and writes one minified stylesheet with only the classes they use, for plain HTML, Rails, Laravel, Django, any server-rendered app, or a bundler build without Tailwind. It needs Node.js 24 or newer and `@tailwindcss/cli` and `tailwindcss` 4.3.2 or newer, below 5, installed, and stops with a one-line message naming whatever is missing. `@tailwindcss/cli` joins `tailwindcss` as an optional peer dependency, so a project that does not run the command installs nothing new. See [Without a bundler → Build only the classes you use](../integrating/without-a-bundler.md#build-only-the-classes-you-use).
|
|
16
|
+
- **Sizes for text fields.** `.ipt`, `.select`, `.textarea`, and `.input-group` take `.sm` and `.lg` with the button's heights, text sizes, and corner step, so a small field and a small button line up in a row. See [Forms → Sizes](../usage/forms.md#sizes).
|
|
17
|
+
- **`<dialog>` and `<progress>` under `/native`.** A plain `<dialog>` is a `.card.floating`, hidden until opened and centered, and a plain `<progress>` is a `.progress` filled to its `value`, or the indeterminate sweep with no `value`. See [Setup → Classless HTML](../setup.md#classless-html).
|
|
18
|
+
- **Pages print in the light theme.** Under `@media print` every theme resolves to its light values, a forced-dark region's included, and filled components print their background (`print-color-adjust: exact`), so a solid button's white label no longer prints on blank paper. A `dark:` utility still applies in print. See [Theming → Printing](../usage/theming.md#printing).
|
|
19
|
+
- **Presets.** A new guide, [Presets](../usage/presets.md), compares the three ways to set a look once: axis classes on a container, theme and material tokens, and your own component classes built with `@apply`.
|
|
20
|
+
- **Dropping Tailwind's palette.** [Tailwind CSS v4 → Drop Tailwind's palette](../integrating/tailwind.md#drop-tailwinds-palette) has the `@theme` block that clears the hues your design does not use, and names the six ramps the theme needs.
|
|
21
|
+
- **Parcel and `postcss-import`.** [Integrating → Bundlers that need a nudge](../integrating/index.md#bundlers-that-need-a-nudge) shows the one change each needs to find the stylesheet.
|
|
22
|
+
|
|
23
|
+
## Changed
|
|
24
|
+
|
|
25
|
+
- **Breaking: the `/tw` source moved from `dist/tw/` to `tw/`.** Imports through the package's exports, such as `@import "@codenhub/styles/tw"`, are unchanged. A path that reaches into `node_modules/@codenhub/styles/dist/tw/` breaks; point it at `tw/`. `dist/` now holds only finished CSS, plus an empty `index.d.ts` for TypeScript, so Django's `ManifestStaticFilesStorage` no longer fails `collectstatic` on it.
|
|
26
|
+
- **Breaking: a `/tw` build emits only the classes your files name.** The `/tw` copy no longer lists every package class for Tailwind to generate, so a page using one button compiles to about 28 KB minified where it compiled to the whole 416 KB stylesheet. The intent, presentation, elevation, corner, and size classes, and the modifiers, are now generated only when they are found too, where the intent, presentation, and elevation classes used to be emitted always. A class name built at runtime, such as `` `btn ${tone}` ``, or one that comes from a CMS, has no styling until you write it out where Tailwind scans or list it with `@source inline("btn primary destructive soft")`. See [Tailwind CSS v4 → Troubleshooting](../integrating/tailwind.md#troubleshooting). The aesthetic classes are still always emitted.
|
|
27
|
+
- **Breaking: the class families moved to a sublayer of `utilities`.** The intent, presentation, edge, elevation, corner, and size classes sat in the `components` layer; they now sit in `utilities.families`, which loses to every other rule in `utilities`. Your utilities and unlayered CSS still beat them. A rule of yours in the `components` layer, or in a layer of your own declared before `utilities`, no longer does: `@layer components { .my-card { --ui-fill: 50%; } }` now loses to `.solid` on the same element. Move such a rule into a utility, into unlayered CSS, or into a layer declared after `utilities`. See [Setup → Cascade layers](../setup.md#cascade-layers).
|
|
28
|
+
- **Your utility beats a modifier and a component's inner defaults.** A modifier or size used to be a 0-2-0 rule nested in its component, so it beat a utility on the same element. Now a modifier only raises a flag its component reads at the weight of its default, so `gap-2` on a `.stack.tight`, `px-8` on a `.btn.sm`, `text-sm` on a `.label`, and `p-0 text-center` on a `.data-table` cell all apply. If you wrote such a utility and relied on the modifier winning, remove the utility.
|
|
29
|
+
- **`.interactive`, `.hoverable`, and `.pressable` work on any element `box` paints, not only `.card`.** A `.badge`, a `.panel`, or your own `@apply box` element takes the hover and the press, and `.interactive` and `.pressable` set the pointer cursor on any element that carries them. If your own markup already uses one of these class names for something else, the element now takes the pointer cursor and the press; rename your class. A disabled `.interactive` or `.pressable` card shows the not-allowed cursor now, where it kept the pointer.
|
|
30
|
+
- **`.ruled` and `.ruleless` on a container reach every table inside it.** They reached only the `.data-table` carrying them; a `.ruleless` wrapper now drops the body rules of every table it holds.
|
|
31
|
+
- **The compiled stylesheets are about half their size before compression.** Each composed rule repeated its declarations once for every file that referenced it; they are stated once now. The compiled files also drop the fallbacks Tailwind writes for browsers without `color-mix()` or `@property`, which no supported browser needs. Minified, the complete stylesheet is about 198 KB, down from 416 KB, `/native` about 295 KB from 582 KB, and `/components` about 159 KB from 324 KB. With gzip they are about 17 KB, down from 20 KB, 22 KB from 26 KB, and 13 KB from 15 KB.
|
|
32
|
+
- **Under `.pixel`, cards, panels, and alerts take no cut.** A surface keeps the inset ring and square corners but no longer clips, because the clip cut everything inside it: a tooltip in a card was never painted, and a child's shadow and focus outline were trimmed. Buttons, fields, and code blocks keep their stepped corners. See [Aesthetics → Pixel](../usage/aesthetics.md#pixel).
|
|
33
|
+
- **A neutral component on a filled parent prints in the parent's text color.** A neutral badge in a `.btn.primary` read at 1.11:1, and a `.ghost` Cancel button in a `.card.solid.primary` printed the page's text on the card's fill. A neutral component that is not `.solid`, a text field included, now takes its label and its line from the filled component around it. A component with an intent keeps its own color. See [Buttons → Choose a fill and an edge](../usage/buttons.md#choose-a-fill-and-an-edge).
|
|
34
|
+
- **A filled component's focus ring carries a line of the page color inside it.** On a component filled past half, such as `.solid.primary`, the outline sat over a fill of its own color and part of it vanished. A 2px line of `--color-background` now runs inside the ring, as it already did under `.pixel`; a focused `.input-group` takes the same line.
|
|
35
|
+
- **A container's tracking no longer reaches its buttons and badges.** `.btn` and `.badge` fall back to `normal` letter spacing, and text fields set `normal`, so body copy's tracking under `/native` no longer widens every control. To track a region's buttons, set `--ui-label-tracking` on the container.
|
|
36
|
+
- **`/native` sets body text on `body`, not on `p` and `li`.** Paragraphs and list items inherit their type from what they sit in, so a container that sets its own size, weight, or tracking applies it to the Markdown inside it; a paragraph in a bold 20px container is no longer 14px regular.
|
|
37
|
+
- **Every press happens under reduced motion.** The default look, glass, cyber, sketch, and `.cyber-solo` dropped their press under `prefers-reduced-motion: reduce`, so a click gave no feedback. The press now lands at once, as the slab presses of neobrutalism and chunky tile already did.
|
|
38
|
+
- **Glass and neobrutalism regions set the theme's font.** They set `font-family` from `--font-default` on the region, so a glass or neobrutalist region nested in pixel, cyber, sketch, or chunky tile no longer takes that aesthetic's face. A font set only with `font-family` on `body` or a container stops at these regions; set `--font-default` too, as [Theming → Fonts](../usage/theming.md#fonts) describes.
|
|
39
|
+
- **`--focus-ring` is no longer declared at `:root`.** It resolved `--color-primary` there and inherited, so a region with its own `--color-primary` ringed its buttons in the page's color. Each focused element now falls back to its own primary at 64%, and a `--focus-ring` you set on an ancestor still inherits. `var(--focus-ring)` in your own CSS with nothing set now resolves to nothing; write the fallback, `var(--focus-ring, color-mix(in srgb, var(--color-primary) 64%, transparent))`.
|
|
40
|
+
- **Eight neutral palette values changed.** `/palette`'s neutral soft `page` and `subtle` cells are now read from the components that draw them, `.alert` and `.kbd`, so they match what those components render; `--palette-neutral-soft-page-bg` is lighter in the light theme and darker in the dark one. Every other palette value is unchanged.
|
|
41
|
+
- **The package declares its types.** Every stylesheet export leads with a `types` condition naming an empty declaration, and the top-level `types` field names `dist/index.d.ts`, so `import "@codenhub/styles";` typechecks under TypeScript 6's `noUncheckedSideEffectImports`, where it failed with TS2882. `tw/` holds its own `index.d.ts`.
|
|
42
|
+
- **`prefers-contrast: more` is honored.** Nothing read it before. With it, text fields rest at their full border, neutral borders take a heavier gray, an intent's border takes its strong tone, a progress track is outlined, and glass turns opaque with a gray border, so each of those lines measures at least 3:1 in both themes. Readers who have not asked for more contrast see no change. [Accessibility → Increased contrast](../accessibility.md#increased-contrast) lists each one.
|
|
43
|
+
|
|
44
|
+
## Removed
|
|
45
|
+
|
|
46
|
+
- **`--surface-padding`.** The variable `.card` and `.panel` read their padding from, and that `.p-xs`, `.p-sm`, `.p-lg`, and `.flush` wrote, is gone; the padding modifiers now set the padding through their own flags. It was documented as internal wiring, but CSS that set `--surface-padding` on a card to change its padding no longer does anything; use a padding modifier, or set `padding` in your own unlayered CSS.
|
|
47
|
+
|
|
48
|
+
## Fixed
|
|
49
|
+
|
|
50
|
+
- **`@apply text-control` and `@apply surface` behave like the classes.** An applied field missed the rules that named `.text-control` from outside it: it drew the faint surface line instead of the 3:1 control line, took the intent of any container around it, ignored the `.soft`, `.solid`, and `.edgeless` limits and `aria-invalid`, and kept the plain focus ring in forced colors. An applied surface missed the neutral reset, so inside a `.card.success` it drew the card's green line, and a `<dialog>` with your own `@apply surface` class rendered while closed and pinned to the top-left once open. All of that now travels with the utility. See [Customizing → Composition helpers](../usage/customizing.md#composition-helpers).
|
|
51
|
+
- **`@apply progress` draws its border.** An applied progress bar read an undefined border color and drew no track edge.
|
|
52
|
+
- **Liquid glass layers reach your own surfaces.** A `@apply surface` element in a `.glass-liquid` region took the backdrop but no lens or rim.
|
|
53
|
+
- **A neutral edged ghost button or badge under glass shows its edge.** Glass's white hairline needs a plate to be seen on, and on a light page it measured 1.01:1; an unfilled neutral button or badge draws glass's control line instead.
|
|
54
|
+
- **An input group is the height of the controls beside it.** The control inside kept its own height within the group's border, so a group was 42px beside 40px fields and buttons.
|
|
55
|
+
- **An input group draws one focus ring.** A focused field drew its own Highlight ring inside the group's in forced colors, and a focused button drew its ring inside the group's; the button keeps its ring and the group drops its own.
|
|
56
|
+
- **A disabled control in an input group dims once.** The group and the control both dimmed, so the value showed at about a third of its opacity.
|
|
57
|
+
- **A `.success` or invalid input group prints its typed text in that intent.** The control inside reset to neutral text while the group drew its line in the intent.
|
|
58
|
+
- **An invalid checkbox is drawn as a destructive one.** A checked invalid checkbox in the dark theme drew the neutral near-black mark on red, at 3.28:1.
|
|
59
|
+
- **Every intent hint is readable.** `.hint.destructive` printed a fill color at 3.28:1 on the dark page, and the other intents were not wired; each built-in intent now prints its strong tone, 4.5:1 or better in both themes.
|
|
60
|
+
- **A themed region re-resolves its text color.** `<aside class="dark">` on a light page kept the near-black text it inherited and printed it on its dark ground; the theme selectors now set `color` too.
|
|
61
|
+
- **A progress bar shows its value in forced colors.** The value was repainted as Canvas on a Canvas track, so a half-full bar read as empty.
|
|
62
|
+
- **Glass is opaque in forced colors.** `.glass`, `.glass-liquid`, and `.glass-solo` stayed translucent and showed the page through the pane; they now take the opaque ground of the reduced-transparency fallback.
|
|
63
|
+
- **A container's fill reaches a card, panel, or alert.** A `.card` inside a `.soft` container drew the grey slab of a `.card.soft`, and a container's `.ghost` or `.solid` landed a panel or alert on its quiet plate; they now draw the fill they resolve.
|
|
64
|
+
- **A box with no intent draws in the aesthetic's ink.** A bare `box` under `.neobrutalism` drew the theme's grey line and slab beside a `.neutral` sibling's black ink.
|
|
65
|
+
- **A `.raised` button keeps its shadow while pressed.** With no aesthetic it dropped from `0 1px 3px` to `0 0 3px` while held down.
|
|
66
|
+
- **Code in a native `pre` draws no chip.** `pre code` cleared only the chip's fill and padding, so `.cyber` drew a glowing box inside the block, neobrutalism's border indented the first line, and `.pixel` drew an inset ring.
|
|
67
|
+
- **A solo element keeps its own transition and transform.** A solo class replaced an element's `transition` list, so a toast stopped animating its fade and height; only actions take the press's transition now, and the press moves through `translate` or `scale`, leaving `transform` alone.
|
|
68
|
+
- **Nested aesthetics take the nearest region's look.** A liquid region inside another aesthetic nested in a liquid one lost its layers, and a sketch region in the same position lost its rotation and dashed accents.
|
|
69
|
+
- **`.alert.neobrutalism` sits on the slab.** An alert carrying the class itself rested flat, unlike one inside a `.neobrutalism` region and unlike `.card.neobrutalism`.
|
|
70
|
+
- **Native elements under `.sketch` take the dashed accents.** Under `/native`, a plain `<hr>`, `<table>`, and checkbox draw the dashes `.divider`, `.data-table`, and `.checkbox` do.
|