elements-kit 0.5.0 → 0.5.2

package/dist/ui/styles/palette/teal.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --teal-1: #fafefd;
+  --teal-2: #f3fbf9;
+  --teal-3: #e0f8f3;
+  --teal-4: #ccf3ea;
+  --teal-5: #b8eae0;
+  --teal-6: #a1ded2;
+  --teal-7: #83cdc1;
+  --teal-8: #53b9ab;
+  --teal-9: #12a594;
+  --teal-10: #0d9b8a;
+  --teal-11: #008573;
+  --teal-12: #0d3d38;
+  --teal-a1: #00cc9905;
+  --teal-a2: #00aa800c;
+  --teal-a3: #00c69d1f;
+  --teal-a4: #00c39633;
+  --teal-a5: #00b49047;
+  --teal-a6: #00a6855e;
+  --teal-a7: #0099807c;
+  --teal-a8: #009783ac;
+  --teal-a9: #009e8ced;
+  --teal-a10: #009684f2;
+  --teal-a11: #008573;
+  --teal-a12: #00332df2;
+  --teal-surface: #f0faf8cc;
+  --teal-indicator: var(--teal-9);
+  --teal-track: var(--teal-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --teal-1: color(display-p3 .983 .996 .992);
+      --teal-2: color(display-p3 .958 .983 .976);
+      --teal-3: color(display-p3 .895 .971 .952);
+      --teal-4: color(display-p3 .831 .949 .92);
+      --teal-5: color(display-p3 .761 .914 .878);
+      --teal-6: color(display-p3 .682 .864 .825);
+      --teal-7: color(display-p3 .581 .798 .756);
+      --teal-8: color(display-p3 .433 .716 .671);
+      --teal-9: color(display-p3 .297 .637 .581);
+      --teal-10: color(display-p3 .275 .599 .542);
+      --teal-11: color(display-p3 .08 .5 .43);
+      --teal-12: color(display-p3 .11 .235 .219);
+      --teal-a1: color(display-p3 .024 .757 .514 / .016);
+      --teal-a2: color(display-p3 .02 .647 .467 / .044);
+      --teal-a3: color(display-p3 .004 .741 .557 / .106);
+      --teal-a4: color(display-p3 .004 .702 .537 / .169);
+      --teal-a5: color(display-p3 .004 .643 .494 / .24);
+      --teal-a6: color(display-p3 .004 .569 .447 / .318);
+      --teal-a7: color(display-p3 .004 .518 .424 / .42);
+      --teal-a8: color(display-p3 0 .506 .424 / .569);
+      --teal-a9: color(display-p3 0 .482 .404 / .702);
+      --teal-a10: color(display-p3 0 .451 .369 / .726);
+      --teal-a11: color(display-p3 .08 .5 .43);
+      --teal-a12: color(display-p3 .11 .235 .219);
+      --teal-surface: color(display-p3 .9451 .9804 .9725 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --teal-1: #0d1514;
+  --teal-2: #111c1b;
+  --teal-3: #0d2d2a;
+  --teal-4: #023b37;
+  --teal-5: #084843;
+  --teal-6: #145750;
+  --teal-7: #1c6961;
+  --teal-8: #207e73;
+  --teal-9: #12a594;
+  --teal-10: #0eb39e;
+  --teal-11: #0bd8b6;
+  --teal-12: #adf0dd;
+  --teal-a1: #00deab05;
+  --teal-a2: #12fbe60c;
+  --teal-a3: #00ffe61e;
+  --teal-a4: #00ffe92d;
+  --teal-a5: #00ffea3b;
+  --teal-a6: #1cffe84b;
+  --teal-a7: #2efde85f;
+  --teal-a8: #32ffe775;
+  --teal-a9: #13ffe49f;
+  --teal-a10: #0dffe0ae;
+  --teal-a11: #0afed5d6;
+  --teal-a12: #b8ffebef;
+  --teal-surface: #13272580;
+  --teal-indicator: var(--teal-9);
+  --teal-track: var(--teal-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --teal-1: color(display-p3 .059 .083 .079);
+      --teal-2: color(display-p3 .075 .11 .107);
+      --teal-3: color(display-p3 .087 .175 .165);
+      --teal-4: color(display-p3 .087 .227 .214);
+      --teal-5: color(display-p3 .12 .277 .261);
+      --teal-6: color(display-p3 .162 .335 .314);
+      --teal-7: color(display-p3 .205 .406 .379);
+      --teal-8: color(display-p3 .245 .489 .453);
+      --teal-9: color(display-p3 .297 .637 .581);
+      --teal-10: color(display-p3 .319 .69 .62);
+      --teal-11: color(display-p3 .388 .835 .719);
+      --teal-12: color(display-p3 .734 .934 .87);
+      --teal-a1: color(display-p3 0 .992 .761 / .017);
+      --teal-a2: color(display-p3 .235 .988 .902 / .047);
+      --teal-a3: color(display-p3 .235 1 .898 / .118);
+      --teal-a4: color(display-p3 .18 .996 .929 / .173);
+      --teal-a5: color(display-p3 .31 1 .933 / .227);
+      --teal-a6: color(display-p3 .396 1 .933 / .286);
+      --teal-a7: color(display-p3 .443 1 .925 / .366);
+      --teal-a8: color(display-p3 .459 1 .925 / .454);
+      --teal-a9: color(display-p3 .443 .996 .906 / .61);
+      --teal-a10: color(display-p3 .439 .996 .89 / .669);
+      --teal-a11: color(display-p3 .388 .835 .719);
+      --teal-a12: color(display-p3 .734 .934 .87);
+      --teal-surface: color(display-p3 .0863 .149 .1412 / .5);
+    }
+  }
+}
+
+:root {
+  --teal-contrast: white;
+}

package/dist/ui/styles/palette/tomato.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --tomato-1: #fffcfc;
+  --tomato-2: #fff8f7;
+  --tomato-3: #feebe7;
+  --tomato-4: #ffdcd3;
+  --tomato-5: #ffcdc2;
+  --tomato-6: #fdbdaf;
+  --tomato-7: #f5a898;
+  --tomato-8: #ec8e7b;
+  --tomato-9: #e54d2e;
+  --tomato-10: #dd4425;
+  --tomato-11: #d13415;
+  --tomato-12: #5c271f;
+  --tomato-a1: #ff000003;
+  --tomato-a2: #ff200008;
+  --tomato-a3: #f52b0018;
+  --tomato-a4: #ff35002c;
+  --tomato-a5: #ff2e003d;
+  --tomato-a6: #f92d0050;
+  --tomato-a7: #e7280067;
+  --tomato-a8: #db250084;
+  --tomato-a9: #df2600d1;
+  --tomato-a10: #d72400da;
+  --tomato-a11: #cd2200ea;
+  --tomato-a12: #460900e0;
+  --tomato-surface: #fff6f5cc;
+  --tomato-indicator: var(--tomato-9);
+  --tomato-track: var(--tomato-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --tomato-1: color(display-p3 .998 .989 .988);
+      --tomato-2: color(display-p3 .994 .974 .969);
+      --tomato-3: color(display-p3 .985 .924 .909);
+      --tomato-4: color(display-p3 .996 .868 .835);
+      --tomato-5: color(display-p3 .98 .812 .77);
+      --tomato-6: color(display-p3 .953 .75 .698);
+      --tomato-7: color(display-p3 .917 .673 .611);
+      --tomato-8: color(display-p3 .875 .575 .502);
+      --tomato-9: color(display-p3 .831 .345 .231);
+      --tomato-10: color(display-p3 .802 .313 .2);
+      --tomato-11: color(display-p3 .755 .259 .152);
+      --tomato-12: color(display-p3 .335 .165 .132);
+      --tomato-a1: color(display-p3 .675 .024 .024 / .012);
+      --tomato-a2: color(display-p3 .757 .145 .02 / .032);
+      --tomato-a3: color(display-p3 .831 .184 .012 / .091);
+      --tomato-a4: color(display-p3 .976 .192 .004 / .165);
+      --tomato-a5: color(display-p3 .918 .192 .004 / .232);
+      --tomato-a6: color(display-p3 .847 .173 .004 / .302);
+      --tomato-a7: color(display-p3 .788 .165 .004 / .389);
+      --tomato-a8: color(display-p3 .749 .153 .004 / .499);
+      --tomato-a9: color(display-p3 .78 .149 0 / .769);
+      --tomato-a10: color(display-p3 .757 .141 0 / .8);
+      --tomato-a11: color(display-p3 .755 .259 .152);
+      --tomato-a12: color(display-p3 .335 .165 .132);
+      --tomato-surface: color(display-p3 .9922 .9647 .9608 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --tomato-1: #181111;
+  --tomato-2: #1f1513;
+  --tomato-3: #391714;
+  --tomato-4: #4e1511;
+  --tomato-5: #5e1c16;
+  --tomato-6: #6e2920;
+  --tomato-7: #853a2d;
+  --tomato-8: #ac4d39;
+  --tomato-9: #e54d2e;
+  --tomato-10: #ec6142;
+  --tomato-11: #ff977d;
+  --tomato-12: #fbd3cb;
+  --tomato-a1: #f1121208;
+  --tomato-a2: #ff55330f;
+  --tomato-a3: #ff35232b;
+  --tomato-a4: #fd201142;
+  --tomato-a5: #fe332153;
+  --tomato-a6: #ff4f3864;
+  --tomato-a7: #fd644a7d;
+  --tomato-a8: #fe6d4ea7;
+  --tomato-a9: #fe5431e4;
+  --tomato-a10: #ff6847eb;
+  --tomato-a11: #ff977d;
+  --tomato-a12: #ffd6cefb;
+  --tomato-surface: #2d191580;
+  --tomato-indicator: var(--tomato-9);
+  --tomato-track: var(--tomato-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --tomato-1: color(display-p3 .09 .068 .067);
+      --tomato-2: color(display-p3 .115 .084 .076);
+      --tomato-3: color(display-p3 .205 .097 .083);
+      --tomato-4: color(display-p3 .282 .099 .077);
+      --tomato-5: color(display-p3 .339 .129 .101);
+      --tomato-6: color(display-p3 .398 .179 .141);
+      --tomato-7: color(display-p3 .487 .245 .194);
+      --tomato-8: color(display-p3 .629 .322 .248);
+      --tomato-9: color(display-p3 .831 .345 .231);
+      --tomato-10: color(display-p3 .862 .415 .298);
+      --tomato-11: color(display-p3 1 .585 .455);
+      --tomato-12: color(display-p3 .959 .833 .802);
+      --tomato-a1: color(display-p3 .973 .071 .071 / .026);
+      --tomato-a2: color(display-p3 .992 .376 .224 / .051);
+      --tomato-a3: color(display-p3 .996 .282 .176 / .148);
+      --tomato-a4: color(display-p3 1 .204 .118 / .232);
+      --tomato-a5: color(display-p3 1 .286 .192 / .29);
+      --tomato-a6: color(display-p3 1 .392 .278 / .353);
+      --tomato-a7: color(display-p3 1 .459 .349 / .45);
+      --tomato-a8: color(display-p3 1 .49 .369 / .601);
+      --tomato-a9: color(display-p3 1 .408 .267 / .82);
+      --tomato-a10: color(display-p3 1 .478 .341 / .853);
+      --tomato-a11: color(display-p3 1 .585 .455);
+      --tomato-a12: color(display-p3 .959 .833 .802);
+      --tomato-surface: color(display-p3 .1569 .0941 .0784 / .5);
+    }
+  }
+}
+
+:root {
+  --tomato-contrast: white;
+}

package/dist/ui/styles/palette/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/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/{base.css → theme.css}

@@ -69,16 +69,12 @@
 :where(:root) {
   --color-background: white;
   --color-overlay: var(--black-a6);
-  --color-panel-solid: white;
-  --color-panel-translucent: #ffffffb3;
   --color-surface: #ffffffd9;
 }
 
 :is(.dark, .dark-theme) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
-  --color-panel-solid: var(--gray-2);
-  --color-panel-translucent: var(--gray-a2);
   --color-surface: #00000040;
 }
 
@@ -106,31 +102,31 @@
   color-scheme: dark;
 }
 
-:root, [data-accent-color]:where(:not([data-accent-color=""], [data-accent-color="gray"])) {
-  --focus-1: var(--accent-1);
-  --focus-2: var(--accent-2);
-  --focus-3: var(--accent-3);
-  --focus-4: var(--accent-4);
-  --focus-5: var(--accent-5);
-  --focus-6: var(--accent-6);
-  --focus-7: var(--accent-7);
-  --focus-8: var(--accent-8);
-  --focus-9: var(--accent-9);
-  --focus-10: var(--accent-10);
-  --focus-11: var(--accent-11);
-  --focus-12: var(--accent-12);
-  --focus-a1: var(--accent-a1);
-  --focus-a2: var(--accent-a2);
-  --focus-a3: var(--accent-a3);
-  --focus-a4: var(--accent-a4);
-  --focus-a5: var(--accent-a5);
-  --focus-a6: var(--accent-a6);
-  --focus-a7: var(--accent-a7);
-  --focus-a8: var(--accent-a8);
-  --focus-a9: var(--accent-a9);
-  --focus-a10: var(--accent-a10);
-  --focus-a11: var(--accent-a11);
-  --focus-a12: var(--accent-a12);
+: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 {
@@ -144,13 +140,3 @@
 :where([data-has-background="true"]) {
   background-color: var(--color-background);
 }
-
-:where([data-panel-background="solid"]) {
-  --color-panel: var(--color-panel-solid);
-  --backdrop-filter-panel: none;
-}
-
-:where([data-panel-background="translucent"]) {
-  --color-panel: var(--color-panel-translucent);
-  --backdrop-filter-panel: blur(64px);
-}

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 = {