elements-kit 0.5.1 → 0.6.0

package/dist/ui/styles/palette/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/radius.css

@@ -9,30 +9,30 @@
 
 [data-radius="none"] {
   --radius-factor: 0;
-  --radius-full: 0px;
+  --radius-pill: 0px;
   --radius-thumb: .5px;
 }
 
 [data-radius="small"] {
   --radius-factor: .75;
-  --radius-full: 0px;
+  --radius-pill: 0px;
   --radius-thumb: .5px;
 }
 
 [data-radius="medium"] {
   --radius-factor: 1;
-  --radius-full: 0px;
+  --radius-pill: 0px;
   --radius-thumb: 9999px;
 }
 
 [data-radius="large"] {
   --radius-factor: 1.5;
-  --radius-full: 0px;
+  --radius-pill: 0px;
   --radius-thumb: 9999px;
 }
 
-[data-radius="full"] {
+[data-radius="pill"] {
   --radius-factor: 1.5;
-  --radius-full: 9999px;
+  --radius-pill: 9999px;
   --radius-thumb: 9999px;
 }

package/dist/ui/styles/scaling.css

@@ -2,22 +2,22 @@
   --scaling: 1;
 }
 
-:where([data-scaling="90%"]) {
+:where([data-scaling="xs"]) {
   --scaling: .9;
 }
 
-:where([data-scaling="95%"]) {
+:where([data-scaling="sm"]) {
   --scaling: .95;
 }
 
-:where([data-scaling="100%"]) {
+:where([data-scaling="md"]) {
   --scaling: 1;
 }
 
-:where([data-scaling="105%"]) {
+:where([data-scaling="lg"]) {
   --scaling: 1.05;
 }
 
-:where([data-scaling="110%"]) {
+:where([data-scaling="xl"]) {
   --scaling: 1.1;
 }

package/dist/ui/styles/shadow.css

@@ -1,76 +1,76 @@
 :where(:root) {
-  --shadow-1: inset 0 0 0 1px var(--gray-a5),
-    inset 0 1.5px 2px 0 var(--gray-a2),
+  --shadow-1: inset 0 0 0 1px var(--base-color-a5),
+    inset 0 1.5px 2px 0 var(--base-color-a2),
     inset 0 1.5px 2px 0 var(--black-a2);
-  --shadow-2: 0 0 0 1px var(--gray-a3),
+  --shadow-2: 0 0 0 1px var(--base-color-a3),
     0 0 0 .5px var(--black-a1),
-    0 1px 1px 0 var(--gray-a2),
+    0 1px 1px 0 var(--base-color-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),
+  --shadow-3: 0 0 0 1px var(--base-color-a3),
+    0 2px 3px -2px var(--base-color-a3),
     0 3px 12px -4px var(--black-a2),
     0 4px 16px -8px var(--black-a2);
-  --shadow-4: 0 0 0 1px var(--gray-a3),
+  --shadow-4: 0 0 0 1px var(--base-color-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 32px -16px var(--base-color-a3);
+  --shadow-5: 0 0 0 1px var(--base-color-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 32px -16px var(--base-color-a5);
+  --shadow-6: 0 0 0 1px var(--base-color-a3),
     0 12px 60px var(--black-a3),
-    0 16px 64px var(--gray-a2),
-    0 16px 36px -20px var(--gray-a7);
+    0 16px 64px var(--base-color-a2),
+    0 16px 36px -20px var(--base-color-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),
+    --shadow-1: inset 0 0 0 1px var(--base-color-a5),
+      inset 0 1.5px 2px 0 var(--base-color-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%),
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
       0 0 0 .5px var(--black-a1),
-      0 1px 1px 0 var(--gray-a2),
+      0 1px 1px 0 var(--base-color-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),
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
+      0 2px 3px -2px var(--base-color-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%),
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-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 32px -16px var(--base-color-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-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 32px -16px var(--base-color-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
       0 12px 60px var(--black-a3),
-      0 16px 64px var(--gray-a2),
-      0 16px 36px -20px var(--gray-a7);
+      0 16px 64px var(--base-color-a2),
+      0 16px 36px -20px var(--base-color-a7);
   }
 }
 
 :is(.dark, .dark-theme) {
-  --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
-    inset 0 0 0 1px var(--gray-a3),
+  --shadow-1: inset 0 -1px 1px 0 var(--base-color-a3),
+    inset 0 0 0 1px var(--base-color-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),
+    inset 0 0 0 1px var(--base-color-a4);
+  --shadow-2: 0 0 0 1px var(--base-color-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),
+  --shadow-3: 0 0 0 1px var(--base-color-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),
+  --shadow-4: 0 0 0 1px var(--base-color-a6),
     0 8px 40px var(--black-a3),
     0 12px 32px -16px var(--black-a5);
-  --shadow-5: 0 0 0 1px var(--gray-a6),
+  --shadow-5: 0 0 0 1px var(--base-color-a6),
     0 12px 60px var(--black-a5),
     0 12px 32px -16px var(--black-a7);
-  --shadow-6: 0 0 0 1px var(--gray-a6),
+  --shadow-6: 0 0 0 1px var(--base-color-a6),
     0 12px 60px var(--black-a4),
     0 16px 64px var(--black-a6),
     0 16px 36px -20px var(--black-a11);
@@ -78,26 +78,26 @@
 
 @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),
+    --shadow-1: inset 0 -1px 1px 0 var(--base-color-a3),
+      inset 0 0 0 1px var(--base-color-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%),
+      inset 0 0 0 1px var(--base-color-a4);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-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%),
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-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%),
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-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%),
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-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%),
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-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/theme.css

@@ -0,0 +1,301 @@
+:root, .light, .light-theme {
+  --gray-1: #fcfcfc;
+  --gray-2: #f9f9f9;
+  --gray-3: #f0f0f0;
+  --gray-4: #e8e8e8;
+  --gray-5: #e0e0e0;
+  --gray-6: #d9d9d9;
+  --gray-7: #cecece;
+  --gray-8: #bbb;
+  --gray-9: #8d8d8d;
+  --gray-10: #838383;
+  --gray-11: #646464;
+  --gray-12: #202020;
+  --gray-a1: #00000003;
+  --gray-a2: #00000006;
+  --gray-a3: #0000000f;
+  --gray-a4: #00000017;
+  --gray-a5: #0000001f;
+  --gray-a6: #00000026;
+  --gray-a7: #00000031;
+  --gray-a8: #0004;
+  --gray-a9: #00000072;
+  --gray-a10: #0000007c;
+  --gray-a11: #0000009b;
+  --gray-a12: #000000df;
+  --gray-surface: #fffc;
+  --gray-indicator: var(--gray-9);
+  --gray-track: var(--gray-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gray-1: color(display-p3 .988 .988 .988);
+      --gray-2: color(display-p3 .975 .975 .975);
+      --gray-3: color(display-p3 .939 .939 .939);
+      --gray-4: color(display-p3 .908 .908 .908);
+      --gray-5: color(display-p3 .88 .88 .88);
+      --gray-6: color(display-p3 .849 .849 .849);
+      --gray-7: color(display-p3 .807 .807 .807);
+      --gray-8: color(display-p3 .732 .732 .732);
+      --gray-9: color(display-p3 .553 .553 .553);
+      --gray-10: color(display-p3 .512 .512 .512);
+      --gray-11: color(display-p3 .392 .392 .392);
+      --gray-12: color(display-p3 .125 .125 .125);
+      --gray-a1: color(display-p3 0 0 0 / .012);
+      --gray-a2: color(display-p3 0 0 0 / .024);
+      --gray-a3: color(display-p3 0 0 0 / .063);
+      --gray-a4: color(display-p3 0 0 0 / .09);
+      --gray-a5: color(display-p3 0 0 0 / .122);
+      --gray-a6: color(display-p3 0 0 0 / .153);
+      --gray-a7: color(display-p3 0 0 0 / .192);
+      --gray-a8: color(display-p3 0 0 0 / .267);
+      --gray-a9: color(display-p3 0 0 0 / .447);
+      --gray-a10: color(display-p3 0 0 0 / .486);
+      --gray-a11: color(display-p3 0 0 0 / .608);
+      --gray-a12: color(display-p3 0 0 0 / .875);
+      --gray-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --gray-1: #111;
+  --gray-2: #191919;
+  --gray-3: #222;
+  --gray-4: #2a2a2a;
+  --gray-5: #313131;
+  --gray-6: #3a3a3a;
+  --gray-7: #484848;
+  --gray-8: #606060;
+  --gray-9: #6e6e6e;
+  --gray-10: #7b7b7b;
+  --gray-11: #b4b4b4;
+  --gray-12: #eee;
+  --gray-a1: #0000;
+  --gray-a2: #ffffff09;
+  --gray-a3: #ffffff12;
+  --gray-a4: #ffffff1b;
+  --gray-a5: #fff2;
+  --gray-a6: #ffffff2c;
+  --gray-a7: #ffffff3b;
+  --gray-a8: #fff5;
+  --gray-a9: #ffffff64;
+  --gray-a10: #ffffff72;
+  --gray-a11: #ffffffaf;
+  --gray-a12: #ffffffed;
+  --gray-surface: #21212180;
+  --gray-indicator: var(--gray-9);
+  --gray-track: var(--gray-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gray-1: color(display-p3 .067 .067 .067);
+      --gray-2: color(display-p3 .098 .098 .098);
+      --gray-3: color(display-p3 .135 .135 .135);
+      --gray-4: color(display-p3 .163 .163 .163);
+      --gray-5: color(display-p3 .192 .192 .192);
+      --gray-6: color(display-p3 .228 .228 .228);
+      --gray-7: color(display-p3 .283 .283 .283);
+      --gray-8: color(display-p3 .375 .375 .375);
+      --gray-9: color(display-p3 .431 .431 .431);
+      --gray-10: color(display-p3 .484 .484 .484);
+      --gray-11: color(display-p3 .706 .706 .706);
+      --gray-12: color(display-p3 .933 .933 .933);
+      --gray-a1: color(display-p3 0 0 0 / 0);
+      --gray-a2: color(display-p3 1 1 1 / .034);
+      --gray-a3: color(display-p3 1 1 1 / .071);
+      --gray-a4: color(display-p3 1 1 1 / .105);
+      --gray-a5: color(display-p3 1 1 1 / .134);
+      --gray-a6: color(display-p3 1 1 1 / .172);
+      --gray-a7: color(display-p3 1 1 1 / .231);
+      --gray-a8: color(display-p3 1 1 1 / .332);
+      --gray-a9: color(display-p3 1 1 1 / .391);
+      --gray-a10: color(display-p3 1 1 1 / .445);
+      --gray-a11: color(display-p3 1 1 1 / .685);
+      --gray-a12: color(display-p3 1 1 1 / .929);
+      --gray-surface: color(display-p3 .1255 .1255 .1255 / .5);
+    }
+  }
+}
+
+:root {
+  --gray-contrast: white;
+}
+
+:root, .light, .light-theme, .dark, .dark-theme {
+  --base-color-1: var(--gray-1);
+  --base-color-2: var(--gray-2);
+  --base-color-3: var(--gray-3);
+  --base-color-4: var(--gray-4);
+  --base-color-5: var(--gray-5);
+  --base-color-6: var(--gray-6);
+  --base-color-7: var(--gray-7);
+  --base-color-8: var(--gray-8);
+  --base-color-9: var(--gray-9);
+  --base-color-10: var(--gray-10);
+  --base-color-11: var(--gray-11);
+  --base-color-12: var(--gray-12);
+  --base-color-a1: var(--gray-a1);
+  --base-color-a2: var(--gray-a2);
+  --base-color-a3: var(--gray-a3);
+  --base-color-a4: var(--gray-a4);
+  --base-color-a5: var(--gray-a5);
+  --base-color-a6: var(--gray-a6);
+  --base-color-a7: var(--gray-a7);
+  --base-color-a8: var(--gray-a8);
+  --base-color-a9: var(--gray-a9);
+  --base-color-a10: var(--gray-a10);
+  --base-color-a11: var(--gray-a11);
+  --base-color-a12: var(--gray-a12);
+  --base-color-surface: var(--gray-surface);
+  --base-color-indicator: var(--gray-indicator);
+  --base-color-track: var(--gray-track);
+  --base-color-contrast: var(--gray-contrast);
+}
+
+:root {
+  --black-a1: #0000000d;
+  --black-a2: #0000001a;
+  --black-a3: #00000026;
+  --black-a4: #0003;
+  --black-a5: #0000004d;
+  --black-a6: #0006;
+  --black-a7: #00000080;
+  --black-a8: #0009;
+  --black-a9: #000000b3;
+  --black-a10: #000c;
+  --black-a11: #000000e6;
+  --black-a12: #000000f2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / .05);
+      --black-a2: color(display-p3 0 0 0 / .1);
+      --black-a3: color(display-p3 0 0 0 / .15);
+      --black-a4: color(display-p3 0 0 0 / .2);
+      --black-a5: color(display-p3 0 0 0 / .3);
+      --black-a6: color(display-p3 0 0 0 / .4);
+      --black-a7: color(display-p3 0 0 0 / .5);
+      --black-a8: color(display-p3 0 0 0 / .6);
+      --black-a9: color(display-p3 0 0 0 / .7);
+      --black-a10: color(display-p3 0 0 0 / .8);
+      --black-a11: color(display-p3 0 0 0 / .9);
+      --black-a12: color(display-p3 0 0 0 / .95);
+    }
+  }
+}
+
+: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);
+    }
+  }
+}
+
+:where(:root) {
+  --color-background: white;
+  --color-overlay: var(--black-a6);
+  --color-surface: #ffffffd9;
+}
+
+:is(.dark, .dark-theme) {
+  --color-background: var(--base-color-1);
+  --color-overlay: var(--black-a8);
+  --color-surface: #00000040;
+}
+
+:where(:root) {
+  --color-transparent: #0000;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --color-transparent: color(display-p3 0 0 0 / 0);
+    }
+  }
+}
+
+:where(.light, .light-theme) {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+}
+
+:where(.dark, .dark-theme) {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+}
+
+:root, [data-color]:where(:not([data-color=""], [data-color="gray"])) {
+  --focus-1: var(--color-1);
+  --focus-2: var(--color-2);
+  --focus-3: var(--color-3);
+  --focus-4: var(--color-4);
+  --focus-5: var(--color-5);
+  --focus-6: var(--color-6);
+  --focus-7: var(--color-7);
+  --focus-8: var(--color-8);
+  --focus-9: var(--color-9);
+  --focus-10: var(--color-10);
+  --focus-11: var(--color-11);
+  --focus-12: var(--color-12);
+  --focus-a1: var(--color-a1);
+  --focus-a2: var(--color-a2);
+  --focus-a3: var(--color-a3);
+  --focus-a4: var(--color-a4);
+  --focus-a5: var(--color-a5);
+  --focus-a6: var(--color-a6);
+  --focus-a7: var(--color-a7);
+  --focus-a8: var(--color-a8);
+  --focus-a9: var(--color-a9);
+  --focus-a10: var(--color-a10);
+  --focus-a11: var(--color-a11);
+  --focus-a12: var(--color-a12);
+}
+
+::selection {
+  background-color: var(--focus-a5);
+}
+
+:root {
+  color: var(--base-color-12);
+}
+
+:where([data-surface="page"]) {
+  background-color: var(--color-background);
+}

package/dist/utilities/active-element.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-K2Te9gn1.mjs";
+import { y as Computed } from "../infer-DGtBn6Nm.mjs";
 
 //#region src/utilities/active-element.d.ts
 declare const activeElement: Computed<Element | null>;

package/dist/utilities/async.d.mts

@@ -1,4 +1,4 @@
-import { b as MaybeReactive } from "../infer-K2Te9gn1.mjs";
+import { b as MaybeReactive } from "../infer-DGtBn6Nm.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts

package/dist/utilities/debounced.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-K2Te9gn1.mjs";
+import { y as Computed } from "../infer-DGtBn6Nm.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

package/dist/utilities/element-rect.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-K2Te9gn1.mjs";
+import { y as Computed } from "../infer-DGtBn6Nm.mjs";
 
 //#region src/utilities/element-rect.d.ts
 type RectResult = {

package/dist/utilities/element-scroll.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal } from "../infer-K2Te9gn1.mjs";
+import { x as Signal } from "../infer-DGtBn6Nm.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/event-driven.d.mts

@@ -1,4 +1,4 @@
-import { x as Signal, y as Computed } from "../infer-K2Te9gn1.mjs";
+import { x as Signal, y as Computed } from "../infer-DGtBn6Nm.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**