elements-kit 0.14.0 → 0.16.0

package/dist/ui/styles/accent/mint.css

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

package/dist/ui/styles/accent/orange.css

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

package/dist/ui/styles/accent/pink.css

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

package/dist/ui/styles/accent/plum.css

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

package/dist/ui/styles/accent/purple.css

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

package/dist/ui/styles/accent/red.css

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

package/dist/ui/styles/accent/ruby.css

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

package/dist/ui/styles/accent/sky.css

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

package/dist/ui/styles/accent/success.css

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

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

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

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

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

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

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

package/dist/ui/styles/accent/warning.css

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

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

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

package/dist/ui/styles/theme.css

@@ -102,31 +102,31 @@
   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);
+:root, [data-accent]:where(:not([data-accent=""], [data-accent="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);
 }
 
 ::selection {

package/dist/ui/switch/switch.css

@@ -69,12 +69,12 @@
 }
 
 .x-switch:where(:not([data-variant="soft"])):where(:checked) {
-  background-color: var(--color-9);
-  box-shadow: inset 0 0 0 1px var(--color-a4);
+  background-color: var(--accent-9);
+  box-shadow: inset 0 0 0 1px var(--accent-a4);
 }
 
 .x-switch:where(:not([data-variant="soft"])):where([data-high-contrast]:checked) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
 }
 
 .x-switch:where(:not([data-variant="soft"])):after {
@@ -86,7 +86,7 @@
 .x-switch:where(:not([data-variant="soft"])):where(:checked):after {
   box-shadow: 0 1px 3px var(--black-a2),
       0 2px 4px -1px var(--black-a1),
-      0 0 0 1px var(--color-a4),
+      0 0 0 1px var(--accent-a4),
       -1px 0 1px var(--black-a2);
 }
 
@@ -107,7 +107,7 @@
 }
 
 .x-switch:where([data-variant="soft"]):where(:checked) {
-  background-color: var(--color-a5);
+  background-color: var(--accent-a5);
 }
 
 .x-switch:where([data-variant="soft"]):after {
@@ -118,8 +118,8 @@
 
 .x-switch:where([data-variant="soft"]):where(:checked):after {
   box-shadow: 0 0 0 1px var(--black-a1),
-      0 1px 3px var(--color-a3),
-      0 2px 4px -1px var(--color-a3);
+      0 1px 3px var(--accent-a3),
+      0 2px 4px -1px var(--accent-a3);
 }
 
 .x-switch:where([data-variant="soft"]):where([data-disabled], :disabled) {

package/dist/ui/text-input/text-input.css

@@ -320,29 +320,29 @@
   color: var(--base-color-a11);
 }
 
-.x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea))[data-accent-color] {
-  color: var(--color-a11);
+.x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea))[data-accent] {
+  color: var(--accent-a11);
 }
 
 .x-text-input:where([data-variant="soft"]) {
   --text-input-border-width: 0px;
-  --text-input-selection-color: var(--color-a5);
-  --text-input-focus-color: var(--color-8);
-  background-color: var(--color-a3);
-  color: var(--color-12);
+  --text-input-selection-color: var(--accent-a5);
+  --text-input-focus-color: var(--accent-8);
+  background-color: var(--accent-a3);
+  color: var(--accent-12);
 }
 
 .x-text-input:where([data-variant="soft"]):where(input)::placeholder, .x-text-input:where([data-variant="soft"]):where(textarea)::placeholder, .x-text-input:where([data-variant="soft"]):where(:has( > :is(input, textarea))) > :where(:is(input, textarea))::placeholder {
-  color: var(--color-12);
+  color: var(--accent-12);
   opacity: .6;
 }
 
 .x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea)) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
-.x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea))[data-accent-color] {
-  color: var(--color-a11);
+.x-text-input:where([data-variant="soft"]) > :where(:not(input, textarea))[data-accent] {
+  color: var(--accent-a11);
 }
 
 .x-text-input:where(:is(input, textarea)):where(:disabled, :read-only) {

package/dist/ui/toggle/toggle.css

@@ -79,15 +79,15 @@
 }
 
 .x-toggle:where(:not([data-variant]), [data-variant="surface"]):where(:has(input:checked)) {
-  background-color: var(--color-a4);
-  box-shadow: inset 0 0 0 1px var(--color-a8);
-  color: var(--color-a12, var(--color-12));
+  background-color: var(--accent-a4);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a12, var(--accent-12));
   font-weight: 600;
 }
 
 @media (hover: hover) {
   .x-toggle:where(:not([data-variant]), [data-variant="surface"]):where(:has(input:checked):hover) {
-    background-color: var(--color-a5);
+    background-color: var(--accent-a5);
   }
 }
 
@@ -104,13 +104,13 @@
 }
 
 .x-toggle:where([data-variant="soft"]):where(:has(input:checked)) {
-  background-color: var(--color-a4);
-  color: var(--color-a12, var(--color-12));
+  background-color: var(--accent-a4);
+  color: var(--accent-a12, var(--accent-12));
   font-weight: 600;
 }
 
 @media (hover: hover) {
   .x-toggle:where([data-variant="soft"]):where(:has(input:checked):hover) {
-    background-color: var(--color-a6);
+    background-color: var(--accent-a6);
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",

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

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