@codenhub/styles 0.1.1 → 0.3.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.md +2 -1
- package/dist/aesthetics/chunky-tile.css +1 -1
- package/dist/aesthetics/index.css +1 -1
- package/dist/components.css +1 -1
- package/dist/index.css +1 -1
- package/dist/native.css +1 -1
- package/dist/palette.css +1 -0
- package/dist/theme.css +1 -1
- package/dist/tw/aesthetics/chunky-tile.css +16 -0
- package/dist/tw/box.css +24 -2
- package/dist/tw/components/button.css +22 -33
- package/dist/tw/components/feedback.css +87 -48
- package/dist/tw/components/form.css +139 -45
- package/dist/tw/components/index.css +1 -1
- package/dist/tw/components/loader.css +2 -16
- package/dist/tw/components/surface.css +93 -0
- package/dist/tw/components/tooltip.css +102 -91
- package/dist/tw/elevation.css +43 -7
- package/dist/tw/index.css +7 -4
- package/dist/tw/intent.css +16 -12
- package/dist/tw/palette.css +451 -0
- package/dist/tw/reset.css +21 -0
- package/dist/tw/theme.css +54 -8
- package/dist/tw/utilities/content.css +90 -16
- package/dist/tw/utilities/index.css +1 -1
- package/dist/tw/utilities/layout.css +33 -0
- package/docs/accessibility.md +34 -23
- package/docs/changelog/0.2.0.md +41 -0
- package/docs/changelog/0.3.0.md +15 -0
- package/docs/changelog/index.md +2 -0
- package/docs/concepts.md +1 -0
- package/docs/setup.md +42 -22
- package/docs/usage/aesthetics.md +4 -3
- package/docs/usage/buttons.md +17 -13
- package/docs/usage/composing.md +28 -21
- package/docs/usage/content-and-layout.md +10 -3
- package/docs/usage/customizing.md +27 -0
- package/docs/usage/feedback.md +18 -10
- package/docs/usage/forms.md +36 -26
- package/docs/usage/tooltips.md +48 -22
- package/llms-full.txt +318 -143
- package/package.json +9 -2
package/dist/palette.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--palette-neutral-solid-bg:oklab(14.5% 0 0/.2);--palette-neutral-solid-fg:oklab(20.5% 0 0);--palette-neutral-solid-edge:oklab(14.5% 0 0/.2);--palette-neutral-solid-bg-hover:oklab(37.1% 0 0/.34);--palette-neutral-solid-edge-hover:oklab(37.1% 0 0/.34);--palette-neutral-soft-fg:oklab(20.5% 0 0);--palette-neutral-soft-bg:oklab(14.5% 0 0/.12);--palette-neutral-soft-edge:oklab(69.8936% 0 0/.8944);--palette-neutral-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-neutral-soft-edge-hover:oklab(37.1% 0 0/.9112);--palette-neutral-soft-page-bg:oklab(88.42% 0 0);--palette-neutral-soft-page-edge:oklab(72.9144% 0 0);--palette-neutral-soft-page-bg-hover:oklab(82.536% 0 0);--palette-neutral-soft-page-edge-hover:oklab(42.5523% 0 0);--palette-neutral-soft-subtle-bg:oklab(82.876% 0 0);--palette-neutral-soft-subtle-edge:oklab(72.2491% 0 0);--palette-neutral-soft-subtle-bg-hover:oklab(77.874% 0 0);--palette-neutral-soft-subtle-edge-hover:oklab(41.9929% 0 0);--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(14.5% 0 0);--palette-primary-solid-bg-hover:oklab(37.1% 0 0);--palette-primary-solid-edge-hover:oklab(37.1% 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/.8944);--palette-primary-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-primary-soft-edge-hover:oklab(37.1% 0 0/.9112);--palette-primary-soft-page-bg:oklab(88.42% 0 0);--palette-primary-soft-page-edge:oklab(23.3704% 0 0);--palette-primary-soft-page-bg-hover:oklab(82.536% 0 0);--palette-primary-soft-page-edge-hover:oklab(42.5523% 0 0);--palette-primary-soft-subtle-bg:oklab(82.876% 0 0);--palette-primary-soft-subtle-edge:oklab(22.7051% 0 0);--palette-primary-soft-subtle-bg-hover:oklab(77.874% 0 0);--palette-primary-soft-subtle-edge-hover:oklab(41.9929% 0 0);--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(43.9% 0 0);--palette-secondary-solid-bg-hover:oklab(37.1% 0 0);--palette-secondary-solid-edge-hover:oklab(37.1% 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/.8944);--palette-secondary-soft-bg-hover:oklab(37.1% 0 0/.26);--palette-secondary-soft-edge-hover:oklab(37.1% 0 0/.9112);--palette-secondary-soft-page-bg:oklab(91.948% 0 0);--palette-secondary-soft-page-edge:oklab(49.6658% 0 0);--palette-secondary-soft-page-bg-hover:oklab(82.536% 0 0);--palette-secondary-soft-page-edge-hover:oklab(42.5523% 0 0);--palette-secondary-soft-subtle-bg:oklab(90.628% 0 0);--palette-secondary-soft-subtle-edge:oklab(49.5074% 0 0);--palette-secondary-soft-subtle-bg-hover:oklab(81.426% 0 0);--palette-secondary-soft-subtle-edge-hover:oklab(42.4191% 0 0);--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(50.8% -.114299 .0293215);--palette-success-solid-bg-hover:oklab(49.7872% -.101989 .029308);--palette-success-solid-edge-hover:oklab(49.7872% -.101989 .029308);--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/.8944);--palette-success-soft-bg-hover:oklab(49.7872% -.101989 .029308/.26);--palette-success-soft-edge-hover:oklab(49.7872% -.101989 .029308/.9112);--palette-success-soft-page-bg:oklab(92.776% -.0137159 .00351857);--palette-success-soft-page-edge:oklab(55.8371% -.102229 .0262251);--palette-success-soft-page-bg-hover:oklab(85.8347% -.0265171 .00762008);--palette-success-soft-page-edge-hover:oklab(54.1129% -.0929323 .0267054);--palette-success-soft-subtle-bg:oklab(89.696% -.0574883 .0168585);--palette-success-soft-subtle-edge:oklab(55.4675% -.107482 .0278259);--palette-success-soft-subtle-bg-hover:oklab(83.2447% -.0633257 .0188378);--palette-success-soft-subtle-edge-hover:oklab(53.8021% -.0973493 .0280516);--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(66.6% .0940116 .152325);--palette-warning-solid-bg-hover:oklab(63.3155% .100794 .128308);--palette-warning-solid-edge-hover:oklab(63.3155% .100794 .128308);--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/.8944);--palette-warning-soft-bg-hover:oklab(63.3155% .100794 .128308/.26);--palette-warning-soft-edge-hover:oklab(63.3155% .100794 .128308/.9112);--palette-warning-soft-page-bg:oklab(94.672% .0112814 .018279);--palette-warning-soft-page-edge:oklab(69.9686% .0840839 .136239);--palette-warning-soft-page-bg-hover:oklab(89.352% .0262064 .0333601);--palette-warning-soft-page-edge-hover:oklab(66.4399% .0918435 .116914);--palette-warning-soft-subtle-bg:oklab(92.648% .00619956 .0699497);--palette-warning-soft-subtle-edge:oklab(69.7258% .0834741 .14244);--palette-warning-soft-subtle-bg-hover:oklab(87.65% .0219331 .0768105);--palette-warning-soft-subtle-edge-hover:oklab(66.2356% .0913307 .122128);--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(51.4% .212373 .0646656);--palette-destructive-solid-bg-hover:oklab(51.189% .194868 .0640785);--palette-destructive-solid-edge-hover:oklab(51.189% .194868 .0640785);--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/.8944);--palette-destructive-soft-bg-hover:oklab(51.189% .194868 .0640785/.26);--palette-destructive-soft-edge-hover:oklab(51.189% .194868 .0640785/.9112);--palette-destructive-soft-page-bg:oklab(92.848% .0254848 .00775988);--palette-destructive-soft-page-edge:oklab(56.3738% .189947 .0578369);--palette-destructive-soft-page-bg-hover:oklab(86.1991% .0506656 .0166604);--palette-destructive-soft-page-edge-hover:oklab(55.3902% .177564 .0583884);--palette-destructive-soft-subtle-bg:oklab(88.976% .051251 .0135099);--palette-destructive-soft-subtle-edge:oklab(55.9091% .193038 .0585269);--palette-destructive-soft-subtle-bg-hover:oklab(82.9431% .0723327 .0214956);--palette-destructive-soft-subtle-edge-hover:oklab(54.9995% .180164 .0589686);--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(51.1% .0317755 -.260066);--palette-info-solid-bg-hover:oklab(49.0714% .0309565 -.24875);--palette-info-solid-edge-hover:oklab(49.0714% .0309565 -.24875);--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/.8944);--palette-info-soft-bg-hover:oklab(49.0714% .0309565 -.24875/.26);--palette-info-soft-edge-hover:oklab(49.0714% .0309565 -.24875/.9112);--palette-info-soft-page-bg:oklab(92.812% .00381305 -.0312079);--palette-info-soft-page-edge:oklab(56.1054% .02842 -.232603);--palette-info-soft-page-bg-hover:oklab(85.6486% .0080487 -.0646751);--palette-info-soft-page-edge-hover:oklab(53.4607% .0282076 -.226661);--palette-info-soft-subtle-bg:oklab(87.972% .00526838 -.0610925);--palette-info-soft-subtle-edge:oklab(55.5246% .0285946 -.236189);--palette-info-soft-subtle-bg-hover:oklab(81.5786% .0092725 -.0898053);--palette-info-soft-subtle-edge-hover:oklab(52.9723% .0283545 -.229677);--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 0);--palette-surface:oklch(92.2% 0 0);--palette-text:oklch(14.5% 0 0)}.dark,.theme-dark,[data-theme=dark]{--palette-neutral-solid-bg:oklab(98.5% 0 0/.2);--palette-neutral-solid-fg:oklab(97% 0 0);--palette-neutral-solid-edge:oklab(98.5% 0 0/.2);--palette-neutral-solid-bg-hover:oklab(92.2% 0 0/.34);--palette-neutral-solid-edge-hover:oklab(92.2% 0 0/.34);--palette-neutral-soft-fg:oklab(97% 0 0);--palette-neutral-soft-bg:oklab(98.5% 0 0/.12);--palette-neutral-soft-edge:oklab(38.0886% 0 0/.8944);--palette-neutral-soft-bg-hover:oklab(92.2% 0 0/.26);--palette-neutral-soft-edge-hover:oklab(92.2% 0 0/.9112);--palette-neutral-soft-page-bg:oklab(24.58% 0 0);--palette-neutral-soft-page-edge:oklab(35.5976% 0 0);--palette-neutral-soft-page-bg-hover:oklab(34.702% 0 0);--palette-neutral-soft-page-edge-hover:oklab(85.3002% 0 0);--palette-neutral-soft-subtle-bg:oklab(35.492% 0 0);--palette-neutral-soft-subtle-edge:oklab(36.907% 0 0);--palette-neutral-soft-subtle-bg-hover:oklab(43.878% 0 0);--palette-neutral-soft-subtle-edge-hover:oklab(86.4014% 0 0);--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(98.5% 0 0);--palette-primary-solid-bg-hover:oklab(92.2% 0 0);--palette-primary-solid-edge-hover:oklab(92.2% 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/.8944);--palette-primary-soft-bg-hover:oklab(92.2% 0 0/.26);--palette-primary-soft-edge-hover:oklab(92.2% 0 0/.9112);--palette-primary-soft-page-bg:oklab(24.58% 0 0);--palette-primary-soft-page-edge:oklab(89.6296% 0 0);--palette-primary-soft-page-bg-hover:oklab(34.702% 0 0);--palette-primary-soft-page-edge-hover:oklab(85.3002% 0 0);--palette-primary-soft-subtle-bg:oklab(29.86% 0 0);--palette-primary-soft-subtle-edge:oklab(90.2632% 0 0);--palette-primary-soft-subtle-bg-hover:oklab(39.142% 0 0);--palette-primary-soft-subtle-edge-hover:oklab(85.833% 0 0);--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(70.8% 0 0);--palette-secondary-solid-bg-hover:oklab(87% 0 0);--palette-secondary-solid-edge-hover:oklab(87% 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/.8944);--palette-secondary-soft-bg-hover:oklab(87% 0 0/.26);--palette-secondary-soft-edge-hover:oklab(87% 0 0/.9112);--palette-secondary-soft-page-bg:oklab(21.256% 0 0);--palette-secondary-soft-page-edge:oklab(64.8547% 0 0);--palette-secondary-soft-page-bg-hover:oklab(33.35% 0 0);--palette-secondary-soft-page-edge-hover:oklab(80.562% 0 0);--palette-secondary-soft-subtle-bg:oklab(32.168% 0 0);--palette-secondary-soft-subtle-edge:oklab(66.1642% 0 0);--palette-secondary-soft-subtle-bg-hover:oklab(42.526% 0 0);--palette-secondary-soft-subtle-edge-hover:oklab(81.6631% 0 0);--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(50.8% -.114299 .0293215);--palette-success-solid-bg-hover:oklab(57.2945% -.116429 .0314383);--palette-success-solid-edge-hover:oklab(57.2945% -.116429 .0314383);--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/.8944);--palette-success-soft-bg-hover:oklab(57.2945% -.116429 .0314383/.26);--palette-success-soft-edge-hover:oklab(57.2945% -.116429 .0314383/.9112);--palette-success-soft-page-bg:oklab(18.856% -.0137159 .00351857);--palette-success-soft-page-edge:oklab(46.9667% -.102229 .0262251);--palette-success-soft-page-bg-hover:oklab(25.6266% -.0302715 .00817395);--palette-success-soft-page-edge-hover:oklab(53.4944% -.10609 .0286465);--palette-success-soft-subtle-bg:oklab(39.36% -.0802174 .0165174);--palette-success-soft-subtle-edge:oklab(49.4272% -.110209 .027785);--palette-success-soft-subtle-bg-hover:oklab(42.8686% -.0861932 .0191048);--palette-success-soft-subtle-edge-hover:oklab(55.5634% -.1128 .0299582);--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(66.6% .0940116 .152325);--palette-warning-solid-bg-hover:oklab(70.431% .0802 .143076);--palette-warning-solid-edge-hover:oklab(70.431% .0802 .143076);--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/.8944);--palette-warning-soft-bg-hover:oklab(70.431% .0802 .143076/.26);--palette-warning-soft-edge-hover:oklab(70.431% .0802 .143076/.9112);--palette-warning-soft-page-bg:oklab(20.752% .0112814 .018279);--palette-warning-soft-page-edge:oklab(61.0982% .0840839 .136239);--palette-warning-soft-page-bg-hover:oklab(29.0421% .020852 .0371997);--palette-warning-soft-page-edge-hover:oklab(65.4644% .0730783 .130371);--palette-warning-soft-subtle-bg:oklab(44.424% .0798656 .0890623);--palette-warning-soft-subtle-edge:oklab(63.9389% .092314 .144733);--palette-warning-soft-subtle-bg-hover:oklab(48.9481% .0785251 .0967221);--palette-warning-soft-subtle-edge-hover:oklab(67.8531% .079999 .137513);--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(51.4% .212373 .0646656);--palette-destructive-solid-bg-hover:oklab(54.9356% .21195 .0500346);--palette-destructive-solid-edge-hover:oklab(54.9356% .21195 .0500346);--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/.8944);--palette-destructive-soft-bg-hover:oklab(54.9356% .21195 .0500346/.26);--palette-destructive-soft-edge-hover:oklab(54.9356% .21195 .0500346/.9112);--palette-destructive-soft-page-bg:oklab(18.928% .0254848 .00775988);--palette-destructive-soft-page-edge:oklab(47.5034% .189947 .0578369);--palette-destructive-soft-page-bg-hover:oklab(25.0132% .0551069 .013009);--palette-destructive-soft-page-edge-hover:oklab(51.3449% .193128 .0455916);--palette-destructive-soft-subtle-bg:oklab(42.248% .163162 .0327106);--palette-destructive-soft-subtle-edge:oklab(50.3018% .206468 .060831);--palette-destructive-soft-subtle-bg-hover:oklab(44.6232% .170881 .0339903);--palette-destructive-soft-subtle-edge-hover:oklab(53.6981% .207021 .0481093);--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(51.1% .0317755 -.260066);--palette-info-solid-bg-hover:oklab(55.1929% .0373722 -.238521);--palette-info-solid-edge-hover:oklab(55.1929% .0373722 -.238521);--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/.8944);--palette-info-soft-bg-hover:oklab(55.1929% .0373722 -.238521/.26);--palette-info-soft-edge-hover:oklab(55.1929% .0373722 -.238521/.9112);--palette-info-soft-page-bg:oklab(18.892% .00381305 -.0312079);--palette-info-soft-page-edge:oklab(47.235% .02842 -.232603);--palette-info-soft-page-bg-hover:oklab(25.0801% .00971677 -.0620155);--palette-info-soft-page-edge-hover:oklab(51.5793% .0340535 -.217341);--palette-info-soft-subtle-bg:oklab(37.724% .0229742 -.156471);--palette-info-soft-subtle-edge:oklab(49.4949% .0307193 -.247635);--palette-info-soft-subtle-bg-hover:oklab(40.9161% .0258296 -.16735);--palette-info-soft-subtle-edge-hover:oklab(53.4797% .0359871 -.229981);--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 0);--palette-surface:oklch(26.9% 0 0);--palette-text:oklch(98.5% 0 0)}
|
package/dist/theme.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
: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 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-white:#fff;--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-
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--ui-elevation:initial;--elevation-y:initial;--elevation-blur:initial}}}: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 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-white:#fff;--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-control-border:var(--color-neutral-500);--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-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));--color-border-hover:light-dark(var(--color-neutral-600),var(--color-neutral-500))}: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,.danger,.error{--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,.loader,.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-ink,var(--color-control-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(.loader,.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}.elevation-none,.flat{--ui-elevation:0}.elevation-sm,.raised,.elevation-md,.floating{--elevation-y:1px;--elevation-blur:3px}.elevation-sm,.raised{--ui-elevation:1}.elevation-md,.floating{--ui-elevation:2}: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-offset:calc(-1 * var(--border-width));--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}
|
|
@@ -107,3 +107,19 @@
|
|
|
107
107
|
font-weight: 800;
|
|
108
108
|
letter-spacing: 0.04em;
|
|
109
109
|
}
|
|
110
|
+
|
|
111
|
+
/* `--tile-lift` alone cannot reach this: it resolves once, on `.chunky-tile`
|
|
112
|
+
itself (`--_tile-lift: var(--tile-lift, 4px)`), and inherits down already a
|
|
113
|
+
plain `4px` -- a nested `--tile-lift` on a descendant button is a fresh
|
|
114
|
+
declaration nothing downstream reads. `--ui-shadow-y` is what `box` actually
|
|
115
|
+
multiplies by elevation, so that is the token restated here, at half the
|
|
116
|
+
resting lift. A `.btn.icon` at `.dense`/`.p-xs` is close to the smallest
|
|
117
|
+
button the package draws (~20px, once the size floor both tiers drop for
|
|
118
|
+
`.icon` is gone -- see `button.css`), and a flat 4px bar under a target that
|
|
119
|
+
size sits close enough to the glyph's own footprint to read as a solid fill
|
|
120
|
+
behind it -- a `.ghost` button that looks `.solid`. 2px keeps the bar
|
|
121
|
+
legible as depth without swallowing the icon. */
|
|
122
|
+
.chunky-tile .btn.icon.dense,
|
|
123
|
+
.chunky-tile .btn.icon.p-xs {
|
|
124
|
+
--ui-shadow-y: 2px;
|
|
125
|
+
}
|
package/dist/tw/box.css
CHANGED
|
@@ -12,8 +12,30 @@
|
|
|
12
12
|
by `--intent-fill-max` -- neutral stops early because a full fill of the
|
|
13
13
|
page's ink is a slab. The cap lands before the hover step, so a capped
|
|
14
14
|
intent still deepens on hover instead of pinning rest and hover together.
|
|
15
|
-
See model.md#the-ink-is-gated-by-the-plate-not-tied-to-the-fill.
|
|
16
|
-
|
|
15
|
+
See model.md#the-ink-is-gated-by-the-plate-not-tied-to-the-fill.
|
|
16
|
+
|
|
17
|
+
`--_fill-cap` is the matching slot for a component that reinterprets what a
|
|
18
|
+
presentation means for itself rather than merely bounding it -- `.card.soft`
|
|
19
|
+
uses it to rest at 0% regardless of what `.soft` asks for. It has to be a
|
|
20
|
+
separate term rather than a rewrite of `--ui-fill`: `presentation.css`'s
|
|
21
|
+
`.soft` is unlayered CSS and `@utility card`'s own rule compiles into
|
|
22
|
+
Tailwind's `utilities` layer, and an unlayered declaration always wins over
|
|
23
|
+
a layered one for the same property, at any specificity -- so `.card.soft`
|
|
24
|
+
writing `--ui-fill: 0%` directly was silently losing to `.soft`'s `12%`
|
|
25
|
+
every time. `--_fill-cap` is a token `.soft` never touches, so nothing
|
|
26
|
+
contests it.
|
|
27
|
+
|
|
28
|
+
Restated here at `100%` -- a no-op -- for the same reason `--_d-ground`
|
|
29
|
+
is restated `transparent` below rather than left to its `var()` fallback:
|
|
30
|
+
`--_fill-cap` inherits like any custom property, so `.card.soft` setting
|
|
31
|
+
it to `0%` would otherwise reach every box nested inside, not just the
|
|
32
|
+
card itself -- a badge sitting in a `.data-table:not(.solid, .ghost)`
|
|
33
|
+
cell inherited the table's `0%` cap and rendered with no fill and no
|
|
34
|
+
visible chip at all. An own declaration beats an inherited one at any
|
|
35
|
+
specificity, so restating it here is what keeps a nested box reading its
|
|
36
|
+
own presentation instead of the container's reinterpretation of one. */
|
|
37
|
+
--_fill-cap: 100%;
|
|
38
|
+
--_capped: min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%), var(--intent-fill-max, 100%));
|
|
17
39
|
--_fill: calc(var(--_capped) * var(--ui-bg-alpha, 1));
|
|
18
40
|
--_hover-fill: calc(min(100%, var(--_capped) + var(--hover-step)) * var(--ui-bg-alpha, 1));
|
|
19
41
|
/* How much of the foreground is the contrast ink: what the presentation asks
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
@reference "tailwindcss";
|
|
2
2
|
@import "../theme.css";
|
|
3
|
-
@reference "./loader.css";
|
|
4
3
|
@reference "../box.css";
|
|
5
4
|
|
|
6
5
|
/* A filled, edgeless, raised box you can press. `box` paints it; everything
|
|
@@ -39,17 +38,26 @@
|
|
|
39
38
|
`.destructive`/`.danger`/`.error` uses on the intent axis. Bare `sm`/`lg`
|
|
40
39
|
are already the size modifier's class names, so `p-` prefixes here to
|
|
41
40
|
avoid colliding with a button's own size. `.p-xs` is the tightest step,
|
|
42
|
-
below `.compact`: a chip-sized button in a toolbar or a table cell.
|
|
41
|
+
below `.compact`: a chip-sized button in a toolbar or a table cell.
|
|
42
|
+
|
|
43
|
+
`.icon` drops both floors -- `min-width` from its own base rule below and
|
|
44
|
+
`min-height` from `--control-height` -- at every padding tier, labeled
|
|
45
|
+
buttons keep the height floor everywhere but `.p-xs`/`.dense`. `.icon`
|
|
46
|
+
already asks to be square: `aspect-square` ties its width to whatever
|
|
47
|
+
height it lands on, so a height floor that survives keeps the button
|
|
48
|
+
bigger than its own glyph regardless of how tight the padding asked to be
|
|
49
|
+
-- the one combination `.p-xs`/`.dense` used to get right and the other two
|
|
50
|
+
tiers did not, leaving a `.icon.compact` floating in a box far bigger than
|
|
51
|
+
it needed and a `.icon.spacious` doing the same one step further out. */
|
|
43
52
|
&.p-xs,
|
|
44
53
|
&.dense {
|
|
45
54
|
@apply px-2 py-0.5;
|
|
46
55
|
|
|
47
|
-
/* The one padding step that also drops the size floor
|
|
48
|
-
button is a chip in a toolbar or a table
|
|
49
|
-
is taller than the row it sits in;
|
|
50
|
-
keeps the floor, so a plain button
|
|
51
|
-
|
|
52
|
-
box is padding around whatever the consumer sized their glyph to. */
|
|
56
|
+
/* The one padding step that also drops the size floor for a labeled
|
|
57
|
+
button. At this tier the button is a chip in a toolbar or a table
|
|
58
|
+
cell, where `--control-height` is taller than the row it sits in;
|
|
59
|
+
every other size and padding class keeps the floor, so a plain button
|
|
60
|
+
stays a comfortable target. */
|
|
53
61
|
min-height: 0;
|
|
54
62
|
|
|
55
63
|
&.icon {
|
|
@@ -65,6 +73,9 @@
|
|
|
65
73
|
|
|
66
74
|
&.icon {
|
|
67
75
|
@apply p-1;
|
|
76
|
+
|
|
77
|
+
min-width: 0;
|
|
78
|
+
min-height: 0;
|
|
68
79
|
}
|
|
69
80
|
}
|
|
70
81
|
|
|
@@ -74,35 +85,13 @@
|
|
|
74
85
|
|
|
75
86
|
&.icon {
|
|
76
87
|
@apply p-3;
|
|
88
|
+
|
|
89
|
+
min-width: 0;
|
|
90
|
+
min-height: 0;
|
|
77
91
|
}
|
|
78
92
|
}
|
|
79
93
|
|
|
80
94
|
&.pill {
|
|
81
95
|
@apply rounded-full;
|
|
82
96
|
}
|
|
83
|
-
|
|
84
|
-
&.loading {
|
|
85
|
-
/* `text-transparent!` forces the label invisible whatever the intent
|
|
86
|
-
resolved to, so the spinner is the only thing left to read. */
|
|
87
|
-
@apply pointer-events-none text-transparent!;
|
|
88
|
-
|
|
89
|
-
& > * {
|
|
90
|
-
opacity: 0 !important;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/* The spinner takes the label's colour, which `box` already resolved
|
|
94
|
-
against this button's own intent and presentation. It reads `--_fg`
|
|
95
|
-
rather than `currentColor`: the rule above forces `color` to transparent
|
|
96
|
-
to hide the label, and a spinner painted in `currentColor` inherits that
|
|
97
|
-
and paints nothing at all. */
|
|
98
|
-
&::after {
|
|
99
|
-
@apply loader-mask absolute block size-4 -translate-x-1/2 -translate-y-1/2;
|
|
100
|
-
|
|
101
|
-
background-color: var(--_fg);
|
|
102
|
-
|
|
103
|
-
top: calc(50% + var(--border-width));
|
|
104
|
-
left: calc(50% + var(--border-width));
|
|
105
|
-
content: "";
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
97
|
}
|
|
@@ -30,54 +30,59 @@
|
|
|
30
30
|
/* A soft, edged surface, so an aesthetic that blurs surfaces blurs this too: an
|
|
31
31
|
alert is a container carrying a message, not a control. */
|
|
32
32
|
@utility alert {
|
|
33
|
-
@apply surface flex p-4 leading-5;
|
|
33
|
+
@apply surface flex items-start gap-3 p-4 leading-5;
|
|
34
34
|
|
|
35
35
|
--_d-fill: 12%;
|
|
36
36
|
--_d-fg-on-fill: 0%;
|
|
37
37
|
--_d-border: 100%;
|
|
38
38
|
--_d-elevation: 0;
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
&.warning::before {
|
|
63
|
-
mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
|
|
64
|
-
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&.destructive::before,
|
|
68
|
-
&.danger::before,
|
|
69
|
-
&.error::before {
|
|
70
|
-
mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
|
|
71
|
-
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&.info::before {
|
|
75
|
-
mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
|
|
76
|
-
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
|
|
77
|
-
}
|
|
40
|
+
/* Same carve-out as `.panel`'s, and for the same reason: a neutral alert
|
|
41
|
+
mixes 12% of near-black ink onto the page, measured `217, 217, 217`
|
|
42
|
+
against `250, 250, 250` -- the identical slab `.panel` read before its
|
|
43
|
+
own fix, not a status-signaling problem, since this is scoped to no
|
|
44
|
+
named intent. A named intent keeps its ordinary wash; untinting
|
|
45
|
+
`.alert.soft.destructive` too would silence the status it exists to
|
|
46
|
+
carry rather than quiet it, which is why an earlier, unconditional
|
|
47
|
+
version of this fix was rejected for `.alert` specifically. This
|
|
48
|
+
version never reaches that case: `:not(...)` names every intent class,
|
|
49
|
+
plus `.solid`/`.ghost` so an explicit presentation on the element is
|
|
50
|
+
never clamped to a cap it did not ask for.
|
|
51
|
+
|
|
52
|
+
Grounds on `--color-foreground` through the public `--ui-surface-ground`
|
|
53
|
+
escape hatch, exactly like `.panel` and a resting `.card.soft` -- an
|
|
54
|
+
alert has no hover state to reveal a tint into either, so this is
|
|
55
|
+
permanent rather than revealed. Unlike a neutral panel or badge, an
|
|
56
|
+
alert cannot lose its visual identity from this: `--_d-border: 100%`
|
|
57
|
+
above holds regardless of fill, so a neutral alert still reads as a
|
|
58
|
+
framed box, just a quiet one instead of a grey slab. */
|
|
59
|
+
&:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
|
|
60
|
+
--_fill-cap: 0%;
|
|
61
|
+
--ui-surface-ground: var(--color-foreground);
|
|
78
62
|
}
|
|
79
63
|
}
|
|
80
64
|
|
|
65
|
+
/* No icon is shipped: the five hardcoded per-intent masks this used to paint on
|
|
66
|
+
a `::before` are gone, the same way the per-input-type icon was removed from
|
|
67
|
+
`.input-group` -- see `docs/internal/model.md#input-group-owns-the-box-the-control-inside-gives-it-up`.
|
|
68
|
+
`.alert` is
|
|
69
|
+
already `flex`, so an icon dropped in as a real child is spaced by `gap-3`
|
|
70
|
+
with nothing to trigger: `.alert-icon` only fixes its size and alignment, not
|
|
71
|
+
whether one is present. Any icon element works, the same contract
|
|
72
|
+
`.input-group` documents -- an inline `<svg>`, an `<img>`, or a class from an
|
|
73
|
+
icon set such as `@codenhub/icons`. */
|
|
74
|
+
@utility alert-icon {
|
|
75
|
+
@apply inline-flex flex-none items-center justify-center;
|
|
76
|
+
|
|
77
|
+
/* `!important`: an icon-set glyph (`@codenhub/icons` among them) carries its
|
|
78
|
+
own `width`/`height` on a selector this utility cannot outrank -- an
|
|
79
|
+
attribute selector reads more specific than one class regardless of
|
|
80
|
+
stylesheet order. Sizing what you drop in is this utility's one job, so it
|
|
81
|
+
has to win over the glyph's own opinion. */
|
|
82
|
+
width: 1.25rem !important;
|
|
83
|
+
height: 1.25rem !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
81
86
|
/* A soft, edgeless chip. Small enough that the structural silhouette would be
|
|
82
87
|
most of its height, so it takes the tight one where an aesthetic ships a pair. */
|
|
83
88
|
@utility badge {
|
|
@@ -112,14 +117,48 @@
|
|
|
112
117
|
border-radius: var(--ui-radius, var(--radius-control));
|
|
113
118
|
}
|
|
114
119
|
|
|
115
|
-
/* The
|
|
116
|
-
|
|
117
|
-
|
|
120
|
+
/* The track is a box, the fill is not: `box.css`'s formula composes the frame,
|
|
121
|
+
the value fill stays `--intent-color` at full strength with no presentation,
|
|
122
|
+
same contract as `.loader`/`.skeleton`. `.progress` cannot `@apply box`
|
|
123
|
+
(the fill is a `::after`, not the element's own background), so it hand-
|
|
124
|
+
reimplements the formula the way `.quote` does -- see
|
|
125
|
+
docs/internal/progress-presentation-axes.md for the decision and why the
|
|
126
|
+
other three indicators do not get the same treatment. */
|
|
118
127
|
@utility progress {
|
|
119
|
-
--
|
|
120
|
-
--
|
|
121
|
-
|
|
122
|
-
|
|
128
|
+
--_d-fill: 12%;
|
|
129
|
+
--_d-fg-on-fill: 0%;
|
|
130
|
+
--_d-border: 0%;
|
|
131
|
+
--_d-elevation: 0;
|
|
132
|
+
/* `--progress-color`/`--progress-surface`/`--progress-edge` are the Tier 1
|
|
133
|
+
override path an aesthetic or consumer reaches `.progress` through (see
|
|
134
|
+
model.md's pseudo-element budget section), so they stay undeclared here:
|
|
135
|
+
redeclaring one on `.progress` itself would win over a value set on an
|
|
136
|
+
ancestor regardless of specificity, the same reasoning `box.css` gives
|
|
137
|
+
for `--_fill-cap`. Each is read with this formula as its fallback, in
|
|
138
|
+
private `--_progress-*` slots, at the point it paints below. */
|
|
139
|
+
/* Presentation capped by the intent, the same `--_capped` `box` composes. */
|
|
140
|
+
--_progress-capped: min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%));
|
|
141
|
+
--_progress-fill: calc(var(--_progress-capped) * var(--ui-bg-alpha, 1));
|
|
142
|
+
/* Grounded on `transparent`, the same choice `.badge` and `.btn` make --
|
|
143
|
+
not `.pre`/`.code`/`.kbd`'s opaque `--intent-subtle` ground. */
|
|
144
|
+
--_progress-surface: color-mix(in oklab, var(--intent-color) var(--_progress-fill), transparent);
|
|
145
|
+
/* One `color-mix()`, not `box`/`.quote`'s two chained through a `--_line`
|
|
146
|
+
step: a WebKit build measurably destabilizes composing dozens of tracks
|
|
147
|
+
each carrying a three-level color-mix chain into the same page -- fine
|
|
148
|
+
at ten, a reproducible ~30-minute CI hang at forty, isolated by removing
|
|
149
|
+
one variable at a time (element count, then border at all, then chain
|
|
150
|
+
depth) until only chain depth reproduced it. `box`/`.quote`'s extra step
|
|
151
|
+
blends the line toward the fill first so a heavily filled box does not
|
|
152
|
+
draw a ring of a different colour around its own plate -- a real risk up
|
|
153
|
+
to `.solid`'s 100% fill. `.progress` never reaches that: `.solid` is
|
|
154
|
+
unsupported here (`registry.json`), so the fill this reads never exceeds
|
|
155
|
+
`.soft`'s 12%, and mixing straight from `--intent-border` at that fill
|
|
156
|
+
is indistinguishable from blending through the surface first. */
|
|
157
|
+
--_progress-edge: color-mix(in oklab, var(--intent-border) var(--ui-border, var(--_d-border)), transparent);
|
|
158
|
+
|
|
159
|
+
@apply relative h-2.5 w-full overflow-hidden;
|
|
160
|
+
background-color: var(--progress-surface, var(--_progress-surface));
|
|
161
|
+
border: var(--ui-border-width, var(--border-width)) solid var(--progress-edge, var(--_progress-edge));
|
|
123
162
|
/* Round by default; an aesthetic that declares no radius squares the track and
|
|
124
163
|
its fill together. */
|
|
125
164
|
border-radius: var(--ui-radius, calc(infinity * 1px));
|
|
@@ -129,7 +168,7 @@
|
|
|
129
168
|
@apply absolute start-0 top-0 bottom-0 block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
|
|
130
169
|
|
|
131
170
|
border-radius: var(--ui-radius, calc(infinity * 1px));
|
|
132
|
-
background-color: var(--progress-color);
|
|
171
|
+
background-color: var(--progress-color, var(--intent-color));
|
|
133
172
|
width: var(--progress-value, 0%);
|
|
134
173
|
z-index: 2;
|
|
135
174
|
}
|
|
@@ -141,7 +180,7 @@
|
|
|
141
180
|
background: linear-gradient(
|
|
142
181
|
90deg,
|
|
143
182
|
transparent,
|
|
144
|
-
color-mix(in srgb, var(--progress-color) 15%, transparent),
|
|
183
|
+
color-mix(in srgb, var(--progress-color, var(--intent-color)) 15%, transparent),
|
|
145
184
|
transparent
|
|
146
185
|
);
|
|
147
186
|
background-size: 200% 100%;
|