@codenhub/styles 0.2.0 → 0.4.0

package/dist/palette.css

@@ -0,0 +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

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@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))}: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}
+@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}

package/dist/tw/aesthetics/chunky-tile.css

@@ -73,6 +73,12 @@
      `.btn`. */
   --ui-clip: none;
   --ui-clip-tight: none;
+  /* Round corners, said explicitly, and the pill and chip corners cleared back
+     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
+     its bevel, its diamond pills, and its square chips. */
+  --ui-corner-shape: round;
+  --ui-radius-pill: initial;
+  --ui-radius-tight: initial;
   --ui-shadow-inset: ;
   --ui-shadow-edge: initial;
   --ui-backdrop: none;
@@ -123,3 +129,68 @@
 .chunky-tile .btn.icon.p-xs {
   --ui-shadow-y: 2px;
 }
+
+/* Solo: the same look painted onto the one element carrying the class, for an
+   element the package does not style. See docs/internal/solo-utilities.md and
+   the note on `.glass-solo`: own knobs and foundation tokens with literal
+   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
+   token, unlayered, and not for this package's own components. */
+.chunky-tile-solo {
+  --_tile-lift: var(--tile-lift, 4px);
+  --_tile-ink: light-dark(var(--color-neutral-400, oklch(70.8% 0 0)), var(--color-neutral-600, oklch(43.9% 0 0)));
+  /* With no fill to shade, the bar shades the edge: the colour an unfilled
+     tile's bar already is under the aesthetic class. */
+  --_tile-bar: color-mix(in oklab, var(--_tile-ink) 72%, rgb(0 0 0));
+
+  border: 2px solid var(--_tile-ink);
+  border-radius: var(--tile-radius, 0.75rem);
+  box-shadow: 0 var(--_tile-lift) 0 0 var(--_tile-bar);
+  font-family: var(--font-rounded, var(--font-default, ui-sans-serif, system-ui, sans-serif));
+  transition:
+    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* The heavier, tracked label is an action's, as under the aesthetic class. */
+.chunky-tile-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+/* The press, only on something pressed: an action, not disabled. A solo
+   container -- a toast clicked to dismiss -- stays put, the way only `.btn` and
+   an opted-in card press under the aesthetic class. */
+.chunky-tile-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):active:not(:disabled, [aria-disabled="true"]) {
+  box-shadow: 0 0 0 0 var(--_tile-bar);
+  transform: translateY(var(--_tile-lift));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chunky-tile-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):active:not(:disabled, [aria-disabled="true"]) {
+    transform: none;
+  }
+}

package/dist/tw/aesthetics/cyber.css

@@ -0,0 +1,190 @@
+/* Cyber: bevelled corners, a thin bright edge, and a glow in the component's own
+   colour. See docs/internal/cyber-aesthetic.md for the decision.
+
+   Tier 1 only. The bevel is `corner-shape`, not `clip-path`: a clip removes
+   every outer shadow, so a clipped chamfer has nothing left to glow, and an
+   inset ring cannot follow a diagonal cut the way `.pixel`'s follows its square
+   one. `corner-shape` draws the corner itself, and the border, the glow, and the
+   focus outline all follow it. Load after the base stylesheet. */
+.cyber {
+  /* Knobs, read with a fallback so an ancestor can set them (R8; see
+     model.md#rules-for-aesthetics). One cut size for controls and surfaces
+     alike, so a button and the card around it read as the same material; the
+     two shapes then place that cut on opposite diagonals, so they read as
+     different things. A shape knob takes any `border-radius` value -- the
+     documented presets are a hexagon, a parallelogram, and a single notch --
+     and the cut knob scales the default pair without restating it.
+
+     The cut is a ceiling, not a size: the default pair caps it at a quarter of
+     the element's own box, so a 40px button or a card takes the full cut and a
+     19px icon button about 5px rather than having its corners eaten. Nothing in
+     the model scales a corner with a component's size -- `.sm` and `.dense`
+     change padding and height, never the radius -- and a radius percentage is
+     the one length that already knows the box. Horizontal percentages resolve
+     against the width and vertical ones against the height, so on a small wide
+     button the cut runs slightly shallower than 45 degrees; at those sizes that
+     is not visible. A shape set through the knob is taken as written. */
+  --_cyber-cut: var(--cyber-cut, 0.625rem);
+  --_cyber-glow: var(--cyber-glow, 8px);
+  --_cyber-shape: var(--cyber-shape, min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);
+  --_cyber-shape-surface: var(--cyber-shape-surface, 0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));
+
+  /* The neutral line. A neon hue is the look's signature, but hue is intent's
+     (R1), so the default follows the theme the way neobrutalism's and pixel's
+     ink does, and `--cyber-ink` lets an application choose a neon neutral
+     without the aesthetic imposing one on every palette. A named intent keeps
+     its own edge colour. */
+  --ui-ink: var(--cyber-ink, light-dark(var(--color-neutral-950), var(--color-neutral-50)));
+
+  /* Controls cut top-left and bottom-right, surfaces top-right and bottom-left.
+     Anything fully round -- a badge, a switch, the progress track, the tooltip
+     icon, and through their own full radius a radio and a `.btn.pill` -- cuts
+     all the way to points: a diamond, or a hexagon on something wider than it
+     is tall. Chips square outright, which is what tells the checkbox from the
+     radio beside it. */
+  --ui-corner-shape: bevel;
+  --ui-radius: var(--_cyber-shape);
+  --ui-radius-surface: var(--_cyber-shape-surface);
+  --ui-radius-pill: calc(infinity * 1px);
+  --ui-radius-tight: 0;
+  --ui-border-width: 1px;
+  --ui-border-max: 100px;
+
+  /* The glow: the component's own ink, blurred, with no offset. `box` mixes
+     depth as `color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink),
+     var(--elevation-color))`, so a transparent depth colour turns 40% ink into
+     the intent colour at 40% alpha rather than into a darker shade of it.
+     Elevation scales the blur like every shadow, so the glow lights what rests
+     above zero -- buttons and cards -- and anything raised, and leaves fields
+     and chips crisp. */
+  --elevation-color: transparent;
+  --ui-shadow-ink: 40%;
+  --ui-shadow-x: 0px;
+  --ui-shadow-y: 0px;
+  --ui-shadow-blur: var(--_cyber-glow);
+  --ui-shadow-spread: 0px;
+
+  /* The glow holds still under the pointer and under a press; the press is the
+     base scale, restated because a region nested inside another aesthetic must
+     not inherit that one's travel. Reduced motion drops it below. */
+  --ui-hover-transform: none;
+  --ui-active-shadow-x: 0px;
+  --ui-active-shadow-y: 0px;
+  --ui-active-transform: scale(0.97);
+
+  /* Nothing here clips, blurs, thins its fill, or draws its edge as a ring, and
+     an aesthetic nested inside one that does has to say so rather than inherit
+     it. */
+  --ui-clip: none;
+  --ui-clip-tight: none;
+  --ui-shadow-inset: ;
+  --ui-shadow-edge: initial;
+  --ui-backdrop: none;
+  --ui-bg-alpha: 1;
+
+  /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships
+     no font binary; the monospace stack is the closest technical face every
+     platform already has. */
+  font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+
+/* Firefox and Safari do not draw `corner-shape` yet, and there the radius would
+   round the corners instead. A rounded cyber element reads as a different
+   aesthetic; a square one reads as the same aesthetic simplified. What is fully
+   round stays round rather than square: a square radio is a checkbox, and a
+   pill is the nearest a diamond gets without a bevel. */
+@supports not (corner-shape: bevel) {
+  .cyber {
+    --ui-radius: 0;
+    --ui-radius-surface: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber {
+    --ui-active-transform: none;
+  }
+}
+
+/* Solo: the same look painted onto the one element carrying the class, for an
+   element the package does not style. See docs/internal/solo-utilities.md and
+   the note on `.glass-solo`: own knobs and foundation tokens with literal
+   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
+   token, unlayered, and not for this package's own components. */
+.cyber-solo {
+  --_cyber-ink: var(
+    --cyber-ink,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+
+  border: 1px solid var(--_cyber-ink);
+  /* The surface shape: the element this exists for is usually a pane. An action
+     takes the control shape below. */
+  border-radius: var(
+    --cyber-shape-surface,
+    0 min(var(--cyber-cut, 0.625rem), 25%) / 0 min(var(--cyber-cut, 0.625rem), 25%)
+  );
+  corner-shape: bevel;
+  /* Always lit: the elevation gate the aesthetic class answers to is `box`'s,
+     and a solo element is one the consumer chose to light up. */
+  box-shadow: 0 0 var(--cyber-glow, 8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);
+  font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  transition: transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* An action takes the control shape, on the opposite diagonal to a pane's. */
+.cyber-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  border-radius: var(--cyber-shape, min(var(--cyber-cut, 0.625rem), 25%) 0 / min(var(--cyber-cut, 0.625rem), 25%) 0);
+}
+
+@supports not (corner-shape: bevel) {
+  .cyber-solo,
+  .cyber-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ) {
+    border-radius: 0;
+  }
+}
+
+/* The press, only on something pressed: an action, not disabled. A solo
+   container stays put, the way only `.btn` and an opted-in card press under
+   the aesthetic class. */
+.cyber-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):active:not(:disabled, [aria-disabled="true"]) {
+  transform: scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):active:not(:disabled, [aria-disabled="true"]) {
+    transform: none;
+  }
+}

package/dist/tw/aesthetics/glass.css

@@ -48,6 +48,12 @@
 
   --ui-clip: none;
   --ui-clip-tight: none;
+  /* Round corners, said explicitly, and the pill and chip corners cleared back
+     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
+     its bevel, its diamond pills, and its square chips. */
+  --ui-corner-shape: round;
+  --ui-radius-pill: initial;
+  --ui-radius-tight: initial;
   /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
      has to say so rather than inherit it. */
   --ui-shadow-edge: initial;
@@ -64,3 +70,43 @@
     --ui-surface-ground: var(--color-background);
   }
 }
+
+/* Solo: the same look painted onto the one element carrying the class, for an
+   element the package does not style -- a toast from another library, a plain
+   `<div>` on a page that never loaded the base stylesheet. See
+   docs/internal/solo-utilities.md.
+
+   It reads the aesthetic's own knobs and the theme's foundation tokens, each
+   with its shipped literal as the fallback, and never a `--ui-*`, `--intent-*`,
+   or `--elevation-color` token: those belong to whichever aesthetic an ancestor
+   carries, and a solo element has to look the same inside any of them.
+   Unlayered and one class deep, so it beats a foreign component's
+   zero-specificity rules wherever they load. Not for this package's own
+   components, which take the aesthetic class instead. */
+.glass-solo {
+  background-color: color-mix(
+    in srgb,
+    var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 45%,
+    transparent
+  );
+  border: 1px solid light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+  /* The surface corner: the element this exists for is a pane. */
+  border-radius: var(--glass-radius-surface, 1rem);
+  /* The theme's depth colour as a literal, for the reason above: inside a
+     `.chunky-tile` region the token is black. */
+  box-shadow:
+    0 1px 2px -1px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
+    0 18px 40px -16px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+  /* Prefixed first, for the reason `surface` gives: written second, the
+     minifier folds the pair into the prefixed one and Firefox loses the blur. */
+  -webkit-backdrop-filter: blur(14px) saturate(1.6);
+  backdrop-filter: blur(14px) saturate(1.6);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .glass-solo {
+    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/dist/tw/aesthetics/index.css

@@ -7,3 +7,4 @@
 @import "./glass.css";
 @import "./pixel.css";
 @import "./chunky-tile.css";
+@import "./cyber.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -43,6 +43,12 @@
      say so rather than inherit it. */
   --ui-clip: none;
   --ui-clip-tight: none;
+  /* Round corners, said explicitly, and the pill and chip corners cleared back
+     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
+     its bevel, its diamond pills, and its square chips. */
+  --ui-corner-shape: round;
+  --ui-radius-pill: initial;
+  --ui-radius-tight: initial;
   --ui-shadow-inset: ;
   /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
      button keeps it. Cleared rather than omitted, because a neobrutalist region
@@ -61,3 +67,50 @@
 .neobrutalism .alert {
   --_d-elevation: 1;
 }
+
+/* Solo: the same look painted onto the one element carrying the class, for an
+   element the package does not style. See docs/internal/solo-utilities.md and
+   the note on `.glass-solo`: own knobs and foundation tokens with literal
+   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
+   token, unlayered, and not for this package's own components. */
+.neobrutalism-solo {
+  --_neo-offset: var(--neo-offset, 4px);
+  --_neo-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+
+  border: 2px solid var(--_neo-ink);
+  border-radius: 0;
+  box-shadow: var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);
+  transition:
+    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* The press, only on something pressed: an action, not disabled. A solo
+   container -- a toast clicked to dismiss -- stays put, the way only `.btn` and
+   an opted-in card press under the aesthetic class. */
+.neobrutalism-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):active:not(:disabled, [aria-disabled="true"]) {
+  box-shadow: 0 0 0 0 var(--_neo-ink);
+  transform: translate(var(--_neo-offset), var(--_neo-offset));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neobrutalism-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):active:not(:disabled, [aria-disabled="true"]) {
+    transform: none;
+  }
+}

package/dist/tw/aesthetics/pixel.css

@@ -78,6 +78,14 @@
      a grid, and a square is on it. */
   --ui-clip-tight: none;
 
+  /* Square corners already, but a radius of zero draws no shape; it is
+     restated, and the pill and chip corners cleared back to `--ui-radius`, so
+     a region nested inside `.cyber` does not inherit its bevel onto anything
+     that sets a radius of its own. */
+  --ui-corner-shape: round;
+  --ui-radius-pill: initial;
+  --ui-radius-tight: initial;
+
   --ui-hover-transform: none;
   --ui-active-transform: none;
   --ui-backdrop: none;
@@ -86,3 +94,43 @@
      font to fall back to but a monospace stack. */
   font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 }
+
+/* Solo: the same look painted onto the one element carrying the class, for an
+   element the package does not style. See docs/internal/solo-utilities.md and
+   the note on `.glass-solo`: own knobs and foundation tokens with literal
+   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
+   token, unlayered, and not for this package's own components. */
+.pixel-solo {
+  --_pixel-unit: var(--pixel-unit, 4px);
+  --_pixel-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+
+  /* The clip removes a border at the straight sides, so the ring draws the
+     edge and the element's own border goes. */
+  border: 0;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);
+  clip-path: polygon(
+    0 var(--_pixel-unit),
+    var(--_pixel-unit) var(--_pixel-unit),
+    var(--_pixel-unit) 0,
+    calc(100% - var(--_pixel-unit)) 0,
+    calc(100% - var(--_pixel-unit)) var(--_pixel-unit),
+    100% var(--_pixel-unit),
+    100% calc(100% - var(--_pixel-unit)),
+    calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)),
+    calc(100% - var(--_pixel-unit)) 100%,
+    var(--_pixel-unit) 100%,
+    var(--_pixel-unit) calc(100% - var(--_pixel-unit)),
+    0 calc(100% - var(--_pixel-unit))
+  );
+  font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+
+/* The clip takes the focus outline too, so focus is a second inset layer under
+   the ring, wider than it so it shows -- shadows paint first-on-top. */
+.pixel-solo:focus-visible {
+  box-shadow:
+    inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink),
+    inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width, 3px))
+      var(--focus-ring, color-mix(in srgb, var(--_pixel-ink) 64%, transparent));
+}

package/dist/tw/box.css

@@ -153,6 +153,13 @@
   color: var(--_fg);
   border: var(--_width) solid var(--_edge);
   border-radius: var(--ui-radius, var(--radius-control));
+  /* What the radius draws: a round arc by default, a straight cut under an
+     aesthetic that bevels (`.cyber`). `round` is the property's initial value,
+     so with no aesthetic in scope this is a no-op, and an engine without
+     `corner-shape` drops the line at parse time. A component that overrides the
+     radius after `@apply box` keeps this, so it bevels by the same amount it
+     rounds. See model.md#material-tokens. */
+  corner-shape: var(--ui-corner-shape, round);
   box-shadow: var(--_shadow);
   clip-path: var(--ui-clip, none);
   transition:

package/dist/tw/components/button.css

@@ -91,6 +91,9 @@
     }
   }
 
+  /* A pill is a shape the author asked for, so it outranks the aesthetic's
+     radius. It still takes the corner shape from `box`, so under a bevelling
+     aesthetic the full radius cuts to points at both ends. */
   &.pill {
     @apply rounded-full;
   }