elements-kit 0.16.0 → 0.18.0

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

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

package/dist/ui/styles/material.css

@@ -4,7 +4,7 @@
 }
 
 :is(.dark, .dark-theme) {
-  --color-material-solid: var(--base-color-2);
+  --color-material-solid: var(--neutral-2);
   --color-material-translucent: var(--black-a7);
 }
 

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/ui/styles/shadow.css

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

@@ -73,7 +73,7 @@
 }
 
 :is(.dark, .dark-theme) {
-  --color-background: var(--base-color-1);
+  --color-background: var(--neutral-1);
   --color-overlay: var(--black-a8);
   --color-surface: #00000040;
 }
@@ -134,7 +134,7 @@
 }
 
 :root {
-  color: var(--base-color-12);
+  color: var(--neutral-12);
 }
 
 :where([data-surface="page"]) {

package/dist/ui/switch/switch.css

@@ -64,8 +64,8 @@
 }
 
 .x-switch:where(:not([data-variant="soft"])) {
-  background-color: var(--base-color-a3);
-  box-shadow: inset 0 0 0 1px var(--base-color-a5);
+  background-color: var(--neutral-a3);
+  box-shadow: inset 0 0 0 1px var(--neutral-a5);
 }
 
 .x-switch:where(:not([data-variant="soft"])):where(:checked) {
@@ -91,19 +91,19 @@
 }
 
 .x-switch:where(:not([data-variant="soft"])):where([data-disabled], :disabled) {
-  background-color: var(--base-color-a3);
-  box-shadow: inset 0 0 0 1px var(--base-color-a3);
+  background-color: var(--neutral-a3);
+  box-shadow: inset 0 0 0 1px var(--neutral-a3);
   opacity: .7;
 }
 
 .x-switch:where(:not([data-variant="soft"])):where([data-disabled], :disabled):after {
-  background-color: var(--base-color-2);
-  box-shadow: 0 0 0 1px var(--base-color-a2),
+  background-color: var(--neutral-2);
+  box-shadow: 0 0 0 1px var(--neutral-a2),
       0 1px 3px var(--black-a1);
 }
 
 .x-switch:where([data-variant="soft"]) {
-  background-color: var(--base-color-a3);
+  background-color: var(--neutral-a3);
 }
 
 .x-switch:where([data-variant="soft"]):where(:checked) {

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

@@ -46,7 +46,7 @@
 }
 
 .x-text-input:where(input)::-webkit-calendar-picker-indicator:where(:hover) {
-  background-color: var(--base-color-a3);
+  background-color: var(--neutral-a3);
 }
 
 .x-text-input:where(input)::-webkit-calendar-picker-indicator:where(:focus-visible) {
@@ -60,13 +60,13 @@
 
 @supports selector(:has(*)) {
   .x-text-input:where(input):where(:-webkit-autofill, [data-com-onepassword-filled]) {
-    -webkit-text-fill-color: var(--base-color-12);
+    -webkit-text-fill-color: var(--neutral-12);
     -webkit-background-clip: text;
     background-clip: text;
   }
 
   .x-text-input:where(input):where(:autofill, [data-com-onepassword-filled]) {
-    -webkit-text-fill-color: var(--base-color-12);
+    -webkit-text-fill-color: var(--neutral-12);
     -webkit-background-clip: text;
     background-clip: text;
   }
@@ -96,14 +96,14 @@
 }
 
 .x-text-input:where(textarea)::-webkit-scrollbar-thumb {
-  background-color: var(--base-color-a5);
+  background-color: var(--neutral-a5);
   border-radius: var(--space-3);
   background-clip: padding-box;
   border: 3px solid #0000;
 }
 
 .x-text-input:where(textarea)::-webkit-scrollbar-thumb:where(:hover) {
-  background-color: var(--base-color-a7);
+  background-color: var(--neutral-a7);
 }
 
 .x-text-input:where(textarea):where(:focus-visible) {
@@ -113,13 +113,13 @@
 
 @supports selector(:has(*)) {
   .x-text-input:where(textarea):where(:-webkit-autofill, [data-com-onepassword-filled]) {
-    -webkit-text-fill-color: var(--base-color-12);
+    -webkit-text-fill-color: var(--neutral-12);
     -webkit-background-clip: text;
     background-clip: text;
   }
 
   .x-text-input:where(textarea):where(:autofill, [data-com-onepassword-filled]) {
-    -webkit-text-fill-color: var(--base-color-12);
+    -webkit-text-fill-color: var(--neutral-12);
     -webkit-background-clip: text;
     background-clip: text;
   }
@@ -308,16 +308,16 @@
   --text-input-selection-color: var(--focus-a5);
   --text-input-focus-color: var(--focus-8);
   background-color: var(--color-surface);
-  border: var(--text-input-border-width) solid var(--base-color-a7);
-  color: var(--base-color-12);
+  border: var(--text-input-border-width) solid var(--neutral-a7);
+  color: var(--neutral-12);
 }
 
 .x-text-input:where(:not([data-variant="soft"])):where(input)::placeholder, .x-text-input:where(:not([data-variant="soft"])):where(textarea)::placeholder, .x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea))) > :where(:is(input, textarea))::placeholder {
-  color: var(--base-color-a10);
+  color: var(--neutral-a10);
 }
 
 .x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea)) {
-  color: var(--base-color-a11);
+  color: var(--neutral-a11);
 }
 
 .x-text-input:where(:not([data-variant="soft"])) > :where(:not(input, textarea))[data-accent] {
@@ -347,8 +347,8 @@
 
 .x-text-input:where(:is(input, textarea)):where(:disabled, :read-only) {
   cursor: text;
-  color: var(--base-color-a11);
-  -webkit-text-fill-color: var(--base-color-a11);
+  color: var(--neutral-a11);
+  -webkit-text-fill-color: var(--neutral-a11);
 }
 
 .x-text-input:where(:is(input, textarea)):where(:disabled, :read-only)::placeholder {
@@ -360,13 +360,13 @@
 }
 
 .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
-  background-color: var(--base-color-a2);
+  background-color: var(--neutral-a2);
 }
 
 .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) > :where(:is(input, textarea)) {
   cursor: text;
-  color: var(--base-color-a11);
-  -webkit-text-fill-color: var(--base-color-a11);
+  color: var(--neutral-a11);
+  -webkit-text-fill-color: var(--neutral-a11);
 }
 
 .x-text-input:where(:has( > :is(input, textarea):is(:disabled, :read-only))) > :where(:is(input, textarea))::placeholder {
@@ -382,5 +382,5 @@
 }
 
 .x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
-  border-color: var(--base-color-a6);
+  border-color: var(--neutral-a6);
 }

package/dist/ui/toggle/toggle.css

@@ -66,15 +66,15 @@
 }
 
 .x-toggle:where(:not([data-variant]), [data-variant="surface"]) {
-  box-shadow: inset 0 0 0 1px var(--base-color-a5);
-  color: var(--base-color-a11);
+  box-shadow: inset 0 0 0 1px var(--neutral-a5);
+  color: var(--neutral-a11);
   background-color: #0000;
   font-weight: 500;
 }
 
 @media (hover: hover) {
   .x-toggle:where(:not([data-variant]), [data-variant="surface"]):where(:hover) {
-    background-color: var(--base-color-a2);
+    background-color: var(--neutral-a2);
   }
 }
 
@@ -92,14 +92,14 @@
 }
 
 .x-toggle:where([data-variant="soft"]) {
-  background-color: var(--base-color-a3);
-  color: var(--base-color-a11);
+  background-color: var(--neutral-a3);
+  color: var(--neutral-a11);
   font-weight: 500;
 }
 
 @media (hover: hover) {
   .x-toggle:where([data-variant="soft"]):where(:hover) {
-    background-color: var(--base-color-a4);
+    background-color: var(--neutral-a4);
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.18.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/accent/base.css

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

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

@@ -1,30 +0,0 @@
-[data-base-color="gray"] {
-  --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);
-}