elements-kit 0.3.4 → 0.4.1

package/dist/ui/styles/colors/violet.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --violet-1: #fdfcfe;
+  --violet-2: #faf8ff;
+  --violet-3: #f4f0fe;
+  --violet-4: #ebe4ff;
+  --violet-5: #e1d9ff;
+  --violet-6: #d4cafe;
+  --violet-7: #c2b5f5;
+  --violet-8: #aa99ec;
+  --violet-9: #6e56cf;
+  --violet-10: #654dc4;
+  --violet-11: #6550b9;
+  --violet-12: #2f265f;
+  --violet-a1: #5500aa03;
+  --violet-a2: #4900ff07;
+  --violet-a3: #4400ee0f;
+  --violet-a4: #4300ff1b;
+  --violet-a5: #3600ff26;
+  --violet-a6: #3100fb35;
+  --violet-a7: #2d01dd4a;
+  --violet-a8: #2b00d066;
+  --violet-a9: #2400b7a9;
+  --violet-a10: #2300abb2;
+  --violet-a11: #1f0099af;
+  --violet-a12: #0b0043d9;
+  --violet-surface: #f9f6ffcc;
+  --violet-indicator: var(--violet-9);
+  --violet-track: var(--violet-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --violet-1: color(display-p3 .991 .988 .995);
+      --violet-2: color(display-p3 .978 .974 .998);
+      --violet-3: color(display-p3 .953 .943 .993);
+      --violet-4: color(display-p3 .916 .897 1);
+      --violet-5: color(display-p3 .876 .851 1);
+      --violet-6: color(display-p3 .825 .793 .981);
+      --violet-7: color(display-p3 .752 .712 .943);
+      --violet-8: color(display-p3 .654 .602 .902);
+      --violet-9: color(display-p3 .417 .341 .784);
+      --violet-10: color(display-p3 .381 .306 .741);
+      --violet-11: color(display-p3 .383 .317 .702);
+      --violet-12: color(display-p3 .179 .15 .359);
+      --violet-a1: color(display-p3 .349 .024 .675 / .012);
+      --violet-a2: color(display-p3 .161 .024 .863 / .028);
+      --violet-a3: color(display-p3 .204 .004 .871 / .059);
+      --violet-a4: color(display-p3 .196 .004 1 / .102);
+      --violet-a5: color(display-p3 .165 .008 1 / .15);
+      --violet-a6: color(display-p3 .153 .004 .906 / .208);
+      --violet-a7: color(display-p3 .141 .004 .796 / .287);
+      --violet-a8: color(display-p3 .133 .004 .753 / .397);
+      --violet-a9: color(display-p3 .114 0 .675 / .659);
+      --violet-a10: color(display-p3 .11 0 .627 / .695);
+      --violet-a11: color(display-p3 .383 .317 .702);
+      --violet-a12: color(display-p3 .179 .15 .359);
+      --violet-surface: color(display-p3 .9725 .9647 .9961 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --violet-1: #14121f;
+  --violet-2: #1b1525;
+  --violet-3: #291f43;
+  --violet-4: #33255b;
+  --violet-5: #3c2e69;
+  --violet-6: #473876;
+  --violet-7: #56468b;
+  --violet-8: #6958ad;
+  --violet-9: #6e56cf;
+  --violet-10: #7d66d9;
+  --violet-11: #baa7ff;
+  --violet-12: #e2ddfe;
+  --violet-a1: #4422ff0f;
+  --violet-a2: #853ff916;
+  --violet-a3: #8354fe36;
+  --violet-a4: #7d51fd50;
+  --violet-a5: #845ffd5f;
+  --violet-a6: #8f6cfd6d;
+  --violet-a7: #9879ff83;
+  --violet-a8: #977dfea8;
+  --violet-a9: #8668ffcc;
+  --violet-a10: #9176fed7;
+  --violet-a11: #baa7ff;
+  --violet-a12: #e3defffe;
+  --violet-surface: #25193980;
+  --violet-indicator: var(--violet-9);
+  --violet-track: var(--violet-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --violet-1: color(display-p3 .077 .071 .118);
+      --violet-2: color(display-p3 .101 .084 .141);
+      --violet-3: color(display-p3 .154 .123 .256);
+      --violet-4: color(display-p3 .191 .148 .345);
+      --violet-5: color(display-p3 .226 .182 .396);
+      --violet-6: color(display-p3 .269 .223 .449);
+      --violet-7: color(display-p3 .326 .277 .53);
+      --violet-8: color(display-p3 .399 .346 .656);
+      --violet-9: color(display-p3 .417 .341 .784);
+      --violet-10: color(display-p3 .477 .402 .823);
+      --violet-11: color(display-p3 .72 .65 1);
+      --violet-12: color(display-p3 .883 .867 .986);
+      --violet-a1: color(display-p3 .282 .141 .996 / .055);
+      --violet-a2: color(display-p3 .51 .263 1 / .08);
+      --violet-a3: color(display-p3 .494 .337 .996 / .202);
+      --violet-a4: color(display-p3 .49 .345 1 / .299);
+      --violet-a5: color(display-p3 .525 .392 1 / .353);
+      --violet-a6: color(display-p3 .569 .455 1 / .408);
+      --violet-a7: color(display-p3 .588 .494 1 / .496);
+      --violet-a8: color(display-p3 .596 .51 1 / .631);
+      --violet-a9: color(display-p3 .522 .424 1 / .769);
+      --violet-a10: color(display-p3 .576 .482 1 / .811);
+      --violet-a11: color(display-p3 .72 .65 1);
+      --violet-a12: color(display-p3 .883 .867 .986);
+      --violet-surface: color(display-p3 .1333 .102 .2118 / .5);
+    }
+  }
+}
+
+:root {
+  --violet-contrast: white;
+}

package/dist/ui/styles/colors/white-alpha.css

@@ -0,0 +1,33 @@
+:root {
+  --white-a1: #ffffff0d;
+  --white-a2: #ffffff1a;
+  --white-a3: #ffffff26;
+  --white-a4: #fff3;
+  --white-a5: #ffffff4d;
+  --white-a6: #fff6;
+  --white-a7: #ffffff80;
+  --white-a8: #fff9;
+  --white-a9: #ffffffb3;
+  --white-a10: #fffc;
+  --white-a11: #ffffffe6;
+  --white-a12: #fffffff2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --white-a1: color(display-p3 1 1 1 / .05);
+      --white-a2: color(display-p3 1 1 1 / .1);
+      --white-a3: color(display-p3 1 1 1 / .15);
+      --white-a4: color(display-p3 1 1 1 / .2);
+      --white-a5: color(display-p3 1 1 1 / .3);
+      --white-a6: color(display-p3 1 1 1 / .4);
+      --white-a7: color(display-p3 1 1 1 / .5);
+      --white-a8: color(display-p3 1 1 1 / .6);
+      --white-a9: color(display-p3 1 1 1 / .7);
+      --white-a10: color(display-p3 1 1 1 / .8);
+      --white-a11: color(display-p3 1 1 1 / .9);
+      --white-a12: color(display-p3 1 1 1 / .95);
+    }
+  }
+}

package/dist/ui/styles/colors/yellow.css

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --yellow-1: #fdfdf9;
+  --yellow-2: #fefce9;
+  --yellow-3: #fffab8;
+  --yellow-4: #fff394;
+  --yellow-5: #ffe770;
+  --yellow-6: #f3d768;
+  --yellow-7: #e4c767;
+  --yellow-8: #d5ae39;
+  --yellow-9: #ffe629;
+  --yellow-10: #ffdc00;
+  --yellow-11: #9e6c00;
+  --yellow-12: #473b1f;
+  --yellow-a1: #aaaa0006;
+  --yellow-a2: #f4dd0016;
+  --yellow-a3: #ffee0047;
+  --yellow-a4: #ffe3016b;
+  --yellow-a5: #ffd5008f;
+  --yellow-a6: #ebbc0097;
+  --yellow-a7: #d2a10098;
+  --yellow-a8: #c99700c6;
+  --yellow-a9: #ffe100d6;
+  --yellow-a10: #ffdc00;
+  --yellow-a11: #9e6c00;
+  --yellow-a12: #2e2000e0;
+  --yellow-surface: #fefbe4cc;
+  --yellow-indicator: var(--yellow-10);
+  --yellow-track: var(--yellow-10);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --yellow-1: color(display-p3 .992 .992 .978);
+      --yellow-2: color(display-p3 .995 .99 .922);
+      --yellow-3: color(display-p3 .997 .982 .749);
+      --yellow-4: color(display-p3 .992 .953 .627);
+      --yellow-5: color(display-p3 .984 .91 .51);
+      --yellow-6: color(display-p3 .934 .847 .474);
+      --yellow-7: color(display-p3 .876 .785 .46);
+      --yellow-8: color(display-p3 .811 .689 .313);
+      --yellow-9: color(display-p3 1 .92 .22);
+      --yellow-10: color(display-p3 .977 .868 .291);
+      --yellow-11: color(display-p3 .6 .44 0);
+      --yellow-12: color(display-p3 .271 .233 .137);
+      --yellow-a1: color(display-p3 .675 .675 .024 / .024);
+      --yellow-a2: color(display-p3 .953 .855 .008 / .079);
+      --yellow-a3: color(display-p3 .988 .925 .004 / .251);
+      --yellow-a4: color(display-p3 .98 .875 .004 / .373);
+      --yellow-a5: color(display-p3 .969 .816 .004 / .491);
+      --yellow-a6: color(display-p3 .875 .71 0 / .526);
+      --yellow-a7: color(display-p3 .769 .604 0 / .542);
+      --yellow-a8: color(display-p3 .725 .549 0 / .687);
+      --yellow-a9: color(display-p3 1 .898 0 / .781);
+      --yellow-a10: color(display-p3 .969 .812 0 / .71);
+      --yellow-a11: color(display-p3 .6 .44 0);
+      --yellow-a12: color(display-p3 .271 .233 .137);
+      --yellow-surface: color(display-p3 .9961 .9922 .902 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --yellow-1: #14120b;
+  --yellow-2: #1b180f;
+  --yellow-3: #2d2305;
+  --yellow-4: #362b00;
+  --yellow-5: #433500;
+  --yellow-6: #524202;
+  --yellow-7: #665417;
+  --yellow-8: #836a21;
+  --yellow-9: #ffe629;
+  --yellow-10: #ffff57;
+  --yellow-11: #f5e147;
+  --yellow-12: #f6eeb4;
+  --yellow-a1: #d1510004;
+  --yellow-a2: #f9b4000b;
+  --yellow-a3: #ffaa001e;
+  --yellow-a4: #fdb70028;
+  --yellow-a5: #febb0036;
+  --yellow-a6: #fec40046;
+  --yellow-a7: #fdcb225c;
+  --yellow-a8: #fdca327b;
+  --yellow-a9: #ffe629;
+  --yellow-a10: #ffff57;
+  --yellow-a11: #fee949f5;
+  --yellow-a12: #fef6baf6;
+  --yellow-surface: #231f1380;
+  --yellow-indicator: var(--yellow-9);
+  --yellow-track: var(--yellow-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --yellow-1: color(display-p3 .078 .069 .047);
+      --yellow-2: color(display-p3 .103 .094 .063);
+      --yellow-3: color(display-p3 .168 .137 .039);
+      --yellow-4: color(display-p3 .209 .169 0);
+      --yellow-5: color(display-p3 .255 .209 0);
+      --yellow-6: color(display-p3 .31 .261 .07);
+      --yellow-7: color(display-p3 .389 .331 .135);
+      --yellow-8: color(display-p3 .497 .42 .182);
+      --yellow-9: color(display-p3 1 .92 .22);
+      --yellow-10: color(display-p3 1 1 .456);
+      --yellow-11: color(display-p3 .948 .885 .392);
+      --yellow-12: color(display-p3 .959 .934 .731);
+      --yellow-a1: color(display-p3 .973 .369 0 / .013);
+      --yellow-a2: color(display-p3 .996 .792 0 / .038);
+      --yellow-a3: color(display-p3 .996 .71 0 / .11);
+      --yellow-a4: color(display-p3 .996 .741 0 / .152);
+      --yellow-a5: color(display-p3 .996 .765 0 / .202);
+      --yellow-a6: color(display-p3 .996 .816 .082 / .261);
+      --yellow-a7: color(display-p3 1 .831 .263 / .345);
+      --yellow-a8: color(display-p3 1 .831 .314 / .463);
+      --yellow-a9: color(display-p3 1 .922 .22);
+      --yellow-a10: color(display-p3 1 1 .455);
+      --yellow-a11: color(display-p3 .948 .885 .392);
+      --yellow-a12: color(display-p3 .959 .934 .731);
+      --yellow-surface: color(display-p3 .1333 .1176 .0706 / .5);
+    }
+  }
+}
+
+:root {
+  --yellow-contrast: #21201c;
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  .dark, .dark-theme {
+    --yellow-track: color-mix(in oklab, var(--yellow-8), var(--yellow-9) 65%);
+  }
+}

package/dist/ui/styles/cursor.css

@@ -0,0 +1,11 @@
+:where(:root) {
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: default;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+}

package/dist/ui/styles/gray/mauve.css

@@ -0,0 +1,30 @@
+[data-gray-color="mauve"] {
+  --gray-1: var(--mauve-1);
+  --gray-2: var(--mauve-2);
+  --gray-3: var(--mauve-3);
+  --gray-4: var(--mauve-4);
+  --gray-5: var(--mauve-5);
+  --gray-6: var(--mauve-6);
+  --gray-7: var(--mauve-7);
+  --gray-8: var(--mauve-8);
+  --gray-9: var(--mauve-9);
+  --gray-10: var(--mauve-10);
+  --gray-11: var(--mauve-11);
+  --gray-12: var(--mauve-12);
+  --gray-a1: var(--mauve-a1);
+  --gray-a2: var(--mauve-a2);
+  --gray-a3: var(--mauve-a3);
+  --gray-a4: var(--mauve-a4);
+  --gray-a5: var(--mauve-a5);
+  --gray-a6: var(--mauve-a6);
+  --gray-a7: var(--mauve-a7);
+  --gray-a8: var(--mauve-a8);
+  --gray-a9: var(--mauve-a9);
+  --gray-a10: var(--mauve-a10);
+  --gray-a11: var(--mauve-a11);
+  --gray-a12: var(--mauve-a12);
+  --gray-contrast: var(--mauve-contrast);
+  --gray-surface: var(--mauve-surface);
+  --gray-indicator: var(--mauve-indicator);
+  --gray-track: var(--mauve-track);
+}

package/dist/ui/styles/gray/olive.css

@@ -0,0 +1,30 @@
+[data-gray-color="olive"] {
+  --gray-1: var(--olive-1);
+  --gray-2: var(--olive-2);
+  --gray-3: var(--olive-3);
+  --gray-4: var(--olive-4);
+  --gray-5: var(--olive-5);
+  --gray-6: var(--olive-6);
+  --gray-7: var(--olive-7);
+  --gray-8: var(--olive-8);
+  --gray-9: var(--olive-9);
+  --gray-10: var(--olive-10);
+  --gray-11: var(--olive-11);
+  --gray-12: var(--olive-12);
+  --gray-a1: var(--olive-a1);
+  --gray-a2: var(--olive-a2);
+  --gray-a3: var(--olive-a3);
+  --gray-a4: var(--olive-a4);
+  --gray-a5: var(--olive-a5);
+  --gray-a6: var(--olive-a6);
+  --gray-a7: var(--olive-a7);
+  --gray-a8: var(--olive-a8);
+  --gray-a9: var(--olive-a9);
+  --gray-a10: var(--olive-a10);
+  --gray-a11: var(--olive-a11);
+  --gray-a12: var(--olive-a12);
+  --gray-contrast: var(--olive-contrast);
+  --gray-surface: var(--olive-surface);
+  --gray-indicator: var(--olive-indicator);
+  --gray-track: var(--olive-track);
+}

package/dist/ui/styles/gray/sage.css

@@ -0,0 +1,30 @@
+[data-gray-color="sage"] {
+  --gray-1: var(--sage-1);
+  --gray-2: var(--sage-2);
+  --gray-3: var(--sage-3);
+  --gray-4: var(--sage-4);
+  --gray-5: var(--sage-5);
+  --gray-6: var(--sage-6);
+  --gray-7: var(--sage-7);
+  --gray-8: var(--sage-8);
+  --gray-9: var(--sage-9);
+  --gray-10: var(--sage-10);
+  --gray-11: var(--sage-11);
+  --gray-12: var(--sage-12);
+  --gray-a1: var(--sage-a1);
+  --gray-a2: var(--sage-a2);
+  --gray-a3: var(--sage-a3);
+  --gray-a4: var(--sage-a4);
+  --gray-a5: var(--sage-a5);
+  --gray-a6: var(--sage-a6);
+  --gray-a7: var(--sage-a7);
+  --gray-a8: var(--sage-a8);
+  --gray-a9: var(--sage-a9);
+  --gray-a10: var(--sage-a10);
+  --gray-a11: var(--sage-a11);
+  --gray-a12: var(--sage-a12);
+  --gray-contrast: var(--sage-contrast);
+  --gray-surface: var(--sage-surface);
+  --gray-indicator: var(--sage-indicator);
+  --gray-track: var(--sage-track);
+}

package/dist/ui/styles/gray/sand.css

@@ -0,0 +1,30 @@
+[data-gray-color="sand"] {
+  --gray-1: var(--sand-1);
+  --gray-2: var(--sand-2);
+  --gray-3: var(--sand-3);
+  --gray-4: var(--sand-4);
+  --gray-5: var(--sand-5);
+  --gray-6: var(--sand-6);
+  --gray-7: var(--sand-7);
+  --gray-8: var(--sand-8);
+  --gray-9: var(--sand-9);
+  --gray-10: var(--sand-10);
+  --gray-11: var(--sand-11);
+  --gray-12: var(--sand-12);
+  --gray-a1: var(--sand-a1);
+  --gray-a2: var(--sand-a2);
+  --gray-a3: var(--sand-a3);
+  --gray-a4: var(--sand-a4);
+  --gray-a5: var(--sand-a5);
+  --gray-a6: var(--sand-a6);
+  --gray-a7: var(--sand-a7);
+  --gray-a8: var(--sand-a8);
+  --gray-a9: var(--sand-a9);
+  --gray-a10: var(--sand-a10);
+  --gray-a11: var(--sand-a11);
+  --gray-a12: var(--sand-a12);
+  --gray-contrast: var(--sand-contrast);
+  --gray-surface: var(--sand-surface);
+  --gray-indicator: var(--sand-indicator);
+  --gray-track: var(--sand-track);
+}

package/dist/ui/styles/gray/slate.css

@@ -0,0 +1,30 @@
+[data-gray-color="slate"] {
+  --gray-1: var(--slate-1);
+  --gray-2: var(--slate-2);
+  --gray-3: var(--slate-3);
+  --gray-4: var(--slate-4);
+  --gray-5: var(--slate-5);
+  --gray-6: var(--slate-6);
+  --gray-7: var(--slate-7);
+  --gray-8: var(--slate-8);
+  --gray-9: var(--slate-9);
+  --gray-10: var(--slate-10);
+  --gray-11: var(--slate-11);
+  --gray-12: var(--slate-12);
+  --gray-a1: var(--slate-a1);
+  --gray-a2: var(--slate-a2);
+  --gray-a3: var(--slate-a3);
+  --gray-a4: var(--slate-a4);
+  --gray-a5: var(--slate-a5);
+  --gray-a6: var(--slate-a6);
+  --gray-a7: var(--slate-a7);
+  --gray-a8: var(--slate-a8);
+  --gray-a9: var(--slate-a9);
+  --gray-a10: var(--slate-a10);
+  --gray-a11: var(--slate-a11);
+  --gray-a12: var(--slate-a12);
+  --gray-contrast: var(--slate-contrast);
+  --gray-surface: var(--slate-surface);
+  --gray-indicator: var(--slate-indicator);
+  --gray-track: var(--slate-track);
+}

package/dist/ui/styles/radius.css

@@ -0,0 +1,38 @@
+[data-radius] {
+  --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-5: calc(12px * var(--scaling) * var(--radius-factor));
+  --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
+}
+
+[data-radius="none"] {
+  --radius-factor: 0;
+  --radius-full: 0px;
+  --radius-thumb: .5px;
+}
+
+[data-radius="small"] {
+  --radius-factor: .75;
+  --radius-full: 0px;
+  --radius-thumb: .5px;
+}
+
+[data-radius="medium"] {
+  --radius-factor: 1;
+  --radius-full: 0px;
+  --radius-thumb: 9999px;
+}
+
+[data-radius="large"] {
+  --radius-factor: 1.5;
+  --radius-full: 0px;
+  --radius-thumb: 9999px;
+}
+
+[data-radius="full"] {
+  --radius-factor: 1.5;
+  --radius-full: 9999px;
+  --radius-thumb: 9999px;
+}

package/dist/ui/styles/scaling.css

@@ -0,0 +1,23 @@
+:where(:root) {
+  --scaling: 1;
+}
+
+:where([data-scaling="90%"]) {
+  --scaling: .9;
+}
+
+:where([data-scaling="95%"]) {
+  --scaling: .95;
+}
+
+:where([data-scaling="100%"]) {
+  --scaling: 1;
+}
+
+:where([data-scaling="105%"]) {
+  --scaling: 1.05;
+}
+
+:where([data-scaling="110%"]) {
+  --scaling: 1.1;
+}

package/dist/ui/styles/shadow.css

@@ -0,0 +1,105 @@
+:where(:root) {
+  --shadow-1: inset 0 0 0 1px var(--gray-a5),
+    inset 0 1.5px 2px 0 var(--gray-a2),
+    inset 0 1.5px 2px 0 var(--black-a2);
+  --shadow-2: 0 0 0 1px var(--gray-a3),
+    0 0 0 .5px var(--black-a1),
+    0 1px 1px 0 var(--gray-a2),
+    0 2px 1px -1px var(--black-a1),
+    0 1px 3px 0 var(--black-a1);
+  --shadow-3: 0 0 0 1px var(--gray-a3),
+    0 2px 3px -2px var(--gray-a3),
+    0 3px 12px -4px var(--black-a2),
+    0 4px 16px -8px var(--black-a2);
+  --shadow-4: 0 0 0 1px var(--gray-a3),
+    0 8px 40px var(--black-a1),
+    0 12px 32px -16px var(--gray-a3);
+  --shadow-5: 0 0 0 1px var(--gray-a3),
+    0 12px 60px var(--black-a3),
+    0 12px 32px -16px var(--gray-a5);
+  --shadow-6: 0 0 0 1px var(--gray-a3),
+    0 12px 60px var(--black-a3),
+    0 16px 64px var(--gray-a2),
+    0 16px 36px -20px var(--gray-a7);
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  :where(:root) {
+    --shadow-1: inset 0 0 0 1px var(--gray-a5),
+      inset 0 1.5px 2px 0 var(--gray-a2),
+      inset 0 1.5px 2px 0 var(--black-a2);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 0 0 .5px var(--black-a1),
+      0 1px 1px 0 var(--gray-a2),
+      0 2px 1px -1px var(--black-a1),
+      0 1px 3px 0 var(--black-a1);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 2px 3px -2px var(--gray-a3),
+      0 3px 12px -4px var(--black-a2),
+      0 4px 16px -8px var(--black-a2);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 8px 40px var(--black-a1),
+      0 12px 32px -16px var(--gray-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 12px 60px var(--black-a3),
+      0 12px 32px -16px var(--gray-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
+      0 12px 60px var(--black-a3),
+      0 16px 64px var(--gray-a2),
+      0 16px 36px -20px var(--gray-a7);
+  }
+}
+
+:is(.dark, .dark-theme) {
+  --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
+    inset 0 0 0 1px var(--gray-a3),
+    inset 0 3px 4px 0 var(--black-a5),
+    inset 0 0 0 1px var(--gray-a4);
+  --shadow-2: 0 0 0 1px var(--gray-a6),
+    0 0 0 .5px var(--black-a3),
+    0 1px 1px 0 var(--black-a6),
+    0 2px 1px -1px var(--black-a6),
+    0 1px 3px 0 var(--black-a5);
+  --shadow-3: 0 0 0 1px var(--gray-a6),
+    0 2px 3px -2px var(--black-a3),
+    0 3px 8px -2px var(--black-a6),
+    0 4px 12px -4px var(--black-a7);
+  --shadow-4: 0 0 0 1px var(--gray-a6),
+    0 8px 40px var(--black-a3),
+    0 12px 32px -16px var(--black-a5);
+  --shadow-5: 0 0 0 1px var(--gray-a6),
+    0 12px 60px var(--black-a5),
+    0 12px 32px -16px var(--black-a7);
+  --shadow-6: 0 0 0 1px var(--gray-a6),
+    0 12px 60px var(--black-a4),
+    0 16px 64px var(--black-a6),
+    0 16px 36px -20px var(--black-a11);
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  :is(.dark, .dark-theme) {
+    --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
+      inset 0 0 0 1px var(--gray-a3),
+      inset 0 3px 4px 0 var(--black-a5),
+      inset 0 0 0 1px var(--gray-a4);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 0 0 .5px var(--black-a3),
+      0 1px 1px 0 var(--black-a6),
+      0 2px 1px -1px var(--black-a6),
+      0 1px 3px 0 var(--black-a5);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 2px 3px -2px var(--black-a3),
+      0 3px 8px -2px var(--black-a6),
+      0 4px 12px -4px var(--black-a7);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 8px 40px var(--black-a3),
+      0 12px 32px -16px var(--black-a5);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 12px 60px var(--black-a5),
+      0 12px 32px -16px var(--black-a7);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
+      0 12px 60px var(--black-a4),
+      0 16px 64px var(--black-a6),
+      0 16px 36px -20px var(--black-a11);
+  }
+}

package/dist/ui/styles/space.css

@@ -0,0 +1,11 @@
+:where(:root) {
+  --space-1: calc(4px * var(--scaling));
+  --space-2: calc(8px * var(--scaling));
+  --space-3: calc(12px * var(--scaling));
+  --space-4: calc(16px * var(--scaling));
+  --space-5: calc(24px * var(--scaling));
+  --space-6: calc(32px * var(--scaling));
+  --space-7: calc(40px * var(--scaling));
+  --space-8: calc(48px * var(--scaling));
+  --space-9: calc(64px * var(--scaling));
+}