elements-kit 0.16.0 → 0.18.0

package/dist/ui/accordion/accordion.css

@@ -86,14 +86,14 @@
 .x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"]) {
   border-radius: var(--radius-4);
   --accordion-summary-bg: transparent;
-  --accordion-summary-hover-bg: var(--base-color-a2);
-  --accordion-body-bg: var(--base-color-a2);
+  --accordion-summary-hover-bg: var(--neutral-a2);
+  --accordion-body-bg: var(--neutral-a2);
   overflow: hidden;
 }
 
 :where(.dark, .dark-theme) .x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"]) {
-  --accordion-summary-bg: var(--base-color-a2);
-  --accordion-summary-hover-bg: var(--base-color-a3);
+  --accordion-summary-bg: var(--neutral-a2);
+  --accordion-summary-hover-bg: var(--neutral-a3);
   --accordion-body-bg: transparent;
 }
 
@@ -113,7 +113,7 @@
 
 .x-accordion:where(:not([data-variant]), [data-variant="surface"]) {
   background-color: var(--color-material, var(--color-surface));
-  border: 1px solid var(--base-color-a5);
+  border: 1px solid var(--neutral-a5);
 }
 
 .x-accordion:where([data-variant="soft"]) {

package/dist/ui/badge/badge.css

@@ -83,6 +83,6 @@
 
 .x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 1px var(--accent-a7),
-      inset 0 0 0 1px var(--base-color-a11);
+      inset 0 0 0 1px var(--neutral-a11);
   color: var(--accent-12);
 }

package/dist/ui/button/button.css

@@ -98,7 +98,7 @@
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]) {
   background-color: var(--accent-12);
-  color: var(--base-color-1);
+  color: var(--neutral-1);
 }
 
 @media (hover: hover) {
@@ -119,8 +119,8 @@
 }
 
 .x-button:where([data-variant="solid"]):where([data-disabled]) {
-  color: var(--base-color-a8);
-  background-color: var(--base-color-a3);
+  color: var(--neutral-a8);
+  background-color: var(--neutral-a3);
   filter: none;
   outline: none;
 }
@@ -134,8 +134,8 @@
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
-  color: var(--base-color-a8);
-  background-color: var(--base-color-a3);
+  color: var(--neutral-a8);
+  background-color: var(--neutral-a3);
 }
 
 .x-button:where([data-variant="soft"]) {
@@ -162,8 +162,8 @@
 }
 
 .x-button:where([data-variant="soft"]):where([data-disabled]) {
-  color: var(--base-color-a8);
-  background-color: var(--base-color-a3);
+  color: var(--neutral-a8);
+  background-color: var(--neutral-a3);
 }
 
 @media (hover: hover) {
@@ -186,7 +186,7 @@
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
-  color: var(--base-color-a8);
+  color: var(--neutral-a8);
   background-color: #0000;
 }
 
@@ -216,13 +216,13 @@
 
 .x-button:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 1px var(--accent-a7),
-      inset 0 0 0 1px var(--base-color-a11);
+      inset 0 0 0 1px var(--neutral-a11);
   color: var(--accent-12);
 }
 
 .x-button:where([data-variant="outline"]):where([data-disabled]) {
-  color: var(--base-color-a8);
-  box-shadow: inset 0 0 0 1px var(--base-color-a7);
+  color: var(--neutral-a8);
+  box-shadow: inset 0 0 0 1px var(--neutral-a7);
   background-color: #0000;
 }
 
@@ -257,9 +257,9 @@
 }
 
 .x-button:where([data-variant="surface"]):where([data-disabled]) {
-  color: var(--base-color-a8);
-  box-shadow: inset 0 0 0 1px var(--base-color-a6);
-  background-color: var(--base-color-a2);
+  color: var(--neutral-a8);
+  box-shadow: inset 0 0 0 1px var(--neutral-a6);
+  background-color: var(--neutral-a2);
 }
 
 .x-button:where(:not([data-variant="text"])) :where(svg) {

package/dist/ui/card/card.css

@@ -56,58 +56,58 @@
   --card-border-radius: var(--radius-6);
 }
 
-:where([data-base-color]) {
-  --card-surface-box-shadow: 0 0 0 1px var(--base-color-a5);
-  --card-surface-hover-box-shadow: 0 0 0 1px var(--base-color-a7);
-  --card-surface-active-box-shadow: 0 0 0 1px var(--base-color-a6);
-  --card-elevated-box-shadow-inner: 0 0 0 1px var(--base-color-a3), 0 0 0 1px transparent,
-    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--base-color-a2),
+:where([data-neutral]) {
+  --card-surface-box-shadow: 0 0 0 1px var(--neutral-a5);
+  --card-surface-hover-box-shadow: 0 0 0 1px var(--neutral-a7);
+  --card-surface-active-box-shadow: 0 0 0 1px var(--neutral-a6);
+  --card-elevated-box-shadow-inner: 0 0 0 1px var(--neutral-a3), 0 0 0 1px transparent,
+    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--neutral-a2),
     0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-  --card-elevated-box-shadow-outer: 0 0 0 0 var(--base-color-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
-    0 1px 1px -1px var(--base-color-a2), 0 2px 1px -2px var(--black-a1),
+  --card-elevated-box-shadow-outer: 0 0 0 0 var(--neutral-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
+    0 1px 1px -1px var(--neutral-a2), 0 2px 1px -2px var(--black-a1),
     0 1px 3px -1px var(--black-a1);
-  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--base-color-a4), 0 1px 1px 1px var(--black-a1),
-    0 2px 1px -1px var(--base-color-a3), 0 2px 3px -2px var(--black-a1),
-    0 3px 12px -4px var(--base-color-a3), 0 4px 16px -8px var(--black-a1);
-  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--base-color-a4), 0 1px 1px 0 var(--black-a1),
-    0 2px 1px -2px var(--base-color-a3), 0 2px 3px -3px var(--black-a1),
-    0 3px 12px -5px var(--base-color-a3), 0 4px 16px -9px var(--black-a1);
-  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--base-color-a3), 0 0 0 1px transparent,
-    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--base-color-a4),
+  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--neutral-a4), 0 1px 1px 1px var(--black-a1),
+    0 2px 1px -1px var(--neutral-a3), 0 2px 3px -2px var(--black-a1),
+    0 3px 12px -4px var(--neutral-a3), 0 4px 16px -8px var(--black-a1);
+  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--neutral-a4), 0 1px 1px 0 var(--black-a1),
+    0 2px 1px -2px var(--neutral-a3), 0 2px 3px -3px var(--black-a1),
+    0 3px 12px -5px var(--neutral-a3), 0 4px 16px -9px var(--black-a1);
+  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--neutral-a3), 0 0 0 1px transparent,
+    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--neutral-a4),
     0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
-  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--base-color-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
-    0 1px 1px -1px var(--base-color-a4), 0 2px 1px -2px var(--black-a1),
+  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--neutral-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
+    0 1px 1px -1px var(--neutral-a4), 0 2px 1px -2px var(--black-a1),
     0 1px 3px -1px var(--black-a1);
 }
 
 @supports (color: color-mix(in oklab, white, black)) {
-  :where([data-base-color]) {
+  :where([data-neutral]) {
     --card-surface-box-shadow: 0 0 0 1px
-      color-mix(in oklab, var(--base-color-a5), var(--base-color-5) 25%);
+      color-mix(in oklab, var(--neutral-a5), var(--neutral-5) 25%);
     --card-surface-hover-box-shadow: 0 0 0 1px
-      color-mix(in oklab, var(--base-color-a7), var(--base-color-7) 25%);
+      color-mix(in oklab, var(--neutral-a7), var(--neutral-7) 25%);
     --card-surface-active-box-shadow: 0 0 0 1px
-      color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%);
+      color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%);
   }
 }
 
-:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where([data-base-color]:not(.light, .light-theme)) {
-  --card-elevated-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 0 1px transparent,
+:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where([data-neutral]:not(.light, .light-theme)) {
+  --card-elevated-box-shadow-inner: 0 0 0 1px var(--neutral-a6), 0 0 0 1px transparent,
     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);
-  --card-elevated-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
+  --card-elevated-box-shadow-outer: 0 0 0 0 var(--neutral-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
     0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
     0 1px 3px -1px var(--black-a5);
-  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 1px 1px var(--base-color-a4),
-    0 0 1px -1px var(--base-color-a4), 0 0 3px -2px var(--base-color-a3),
-    0 0 12px -2px var(--base-color-a3), 0 0 16px -8px var(--base-color-a7);
-  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 1px 0 var(--base-color-a4),
-    0 0 1px -2px var(--base-color-a4), 0 0 3px -3px var(--base-color-a3),
-    0 0 12px -3px var(--base-color-a3), 0 0 16px -9px var(--base-color-a7);
-  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 0 1px transparent,
+  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--neutral-a6), 0 0 1px 1px var(--neutral-a4),
+    0 0 1px -1px var(--neutral-a4), 0 0 3px -2px var(--neutral-a3),
+    0 0 12px -2px var(--neutral-a3), 0 0 16px -8px var(--neutral-a7);
+  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--neutral-a6), 0 0 1px 0 var(--neutral-a4),
+    0 0 1px -2px var(--neutral-a4), 0 0 3px -3px var(--neutral-a3),
+    0 0 12px -3px var(--neutral-a3), 0 0 16px -9px var(--neutral-a7);
+  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--neutral-a6), 0 0 0 1px transparent,
     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);
-  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
+  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--neutral-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
     0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
     0 1px 3px -1px var(--black-a5);
 }
@@ -201,16 +201,16 @@
 
 @media (hover: hover) {
   .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:hover) {
-    background-color: var(--base-color-a3);
+    background-color: var(--neutral-a3);
   }
 }
 
 .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where([data-state="open"]) {
-  background-color: var(--base-color-a3);
+  background-color: var(--neutral-a3);
 }
 
 .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
-  background-color: var(--base-color-a4);
+  background-color: var(--neutral-a4);
 }
 
 .x-card:where(:focus-visible) {

package/dist/ui/checkbox/checkbox.css

@@ -73,7 +73,7 @@
 
 .x-checkbox:where(:not([data-variant="soft"])) {
   background-color: var(--color-surface);
-  box-shadow: inset 0 0 0 1px var(--base-color-a7);
+  box-shadow: inset 0 0 0 1px var(--neutral-a7);
 }
 
 .x-checkbox:where(:not([data-variant="soft"])):where(:checked, :indeterminate) {
@@ -84,12 +84,12 @@
 
 .x-checkbox:where(:not([data-variant="soft"])):where([data-high-contrast]):where(:checked, :indeterminate) {
   background-color: var(--accent-12);
-  color: var(--base-color-1);
+  color: var(--neutral-1);
 }
 
 .x-checkbox:where(:not([data-variant="soft"])):where([data-disabled], :disabled) {
-  box-shadow: inset 0 0 0 1px var(--base-color-a6);
-  color: var(--base-color-a8);
+  box-shadow: inset 0 0 0 1px var(--neutral-a6);
+  color: var(--neutral-a8);
   background-color: #0000;
 }
 
@@ -103,6 +103,6 @@
 }
 
 .x-checkbox:where([data-variant="soft"]):where([data-disabled], :disabled) {
-  background-color: var(--base-color-a3);
-  color: var(--base-color-a8);
+  background-color: var(--neutral-a3);
+  color: var(--neutral-a8);
 }

package/dist/ui/code/code.css

@@ -105,7 +105,7 @@
 
 .x-code:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 max(1px, .033em) var(--accent-a7),
-      inset 0 0 0 max(1px, .033em) var(--base-color-a11);
+      inset 0 0 0 max(1px, .033em) var(--neutral-a11);
   color: var(--accent-12);
 }
 

package/dist/ui/kbd/kbd.css

@@ -10,8 +10,8 @@
   min-width: 1.75em;
   letter-spacing: var(--letter-spacing, var(--default-letter-spacing));
   height: fit-content;
-  color: var(--base-color-12);
-  background-color: var(--base-color-a3);
+  color: var(--neutral-12);
+  background-color: var(--neutral-a3);
   flex-shrink: 0;
   justify-content: center;
   align-items: center;

package/dist/ui/marketing/marketing.css

@@ -164,11 +164,11 @@
   text-wrap: pretty;
   white-space: pre-line;
   overflow-wrap: break-word;
-  color: var(--base-color-11);
+  color: var(--neutral-11);
 }
 
 .section-paragraph em {
-  color: var(--base-color-12);
+  color: var(--neutral-12);
   font-style: normal;
 }
 
@@ -273,7 +273,7 @@
   font-size: var(--font-size-6);
   letter-spacing: var(--letter-spacing-9);
   text-wrap: pretty;
-  color: var(--base-color-11);
+  color: var(--neutral-11);
   font-weight: 600;
   line-height: 1.2;
 }
@@ -347,7 +347,7 @@
 
 .river-visual[data-border] {
   border-radius: var(--radius-4);
-  border: 1px solid var(--base-color-a6);
+  border: 1px solid var(--neutral-a6);
 }
 
 .pillar {
@@ -377,7 +377,7 @@
   line-height: var(--default-line-height, 1.5);
   font-weight: var(--font-weight-regular);
   letter-spacing: 0;
-  color: var(--base-color-11);
+  color: var(--neutral-11);
   margin-bottom: 1.5rem;
 }
 
@@ -406,7 +406,7 @@
   font-size: var(--font-size-6);
   letter-spacing: var(--letter-spacing-9);
   text-wrap: pretty;
-  color: var(--base-color-11);
+  color: var(--neutral-11);
   margin: 0;
   font-weight: 600;
   line-height: 1.3;
@@ -419,7 +419,7 @@
 }
 
 .testimonial > blockquote em {
-  color: var(--base-color-12);
+  color: var(--neutral-12);
   font-style: normal;
 }
 
@@ -447,7 +447,7 @@
   font-size: var(--font-size-5);
   line-height: var(--line-height-5);
   letter-spacing: var(--letter-spacing-9);
-  color: var(--base-color-12);
+  color: var(--neutral-12);
   font-style: normal;
   font-weight: 600;
 }
@@ -455,7 +455,7 @@
 .testimonial > figcaption > [data-title] {
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
-  color: var(--base-color-11);
+  color: var(--neutral-11);
 }
 
 .cta-banner {
@@ -550,7 +550,7 @@
   line-height: var(--line-height-2);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--letter-spacing-9);
-  color: var(--base-color-11);
+  color: var(--neutral-11);
   margin: 0 0 .25rem;
 }
 
@@ -558,7 +558,7 @@
   font-family: var(--font-heading);
   font-size: calc(48px * var(--scaling, 1));
   letter-spacing: -.04em;
-  color: var(--base-color-12);
+  color: var(--neutral-12);
   margin: 0;
   font-weight: 550;
   line-height: 1;
@@ -573,7 +573,7 @@
 .statistic > [data-description] {
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
-  color: var(--base-color-11);
+  color: var(--neutral-11);
   margin-top: .5rem;
 }
 

package/dist/ui/progress/progress.css

@@ -3,16 +3,16 @@
   width: 100%;
   height: var(--progress-height);
   border-radius: max(calc(var(--progress-height) / 3), var(--radius-thumb));
-  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);
   border: 0;
   display: block;
   overflow: hidden;
 }
 
 .x-progress::-webkit-progress-bar {
-  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);
   border-radius: inherit;
 }
 
@@ -45,12 +45,12 @@
 }
 
 .x-progress:where([data-variant="soft"]) {
-  background-color: var(--base-color-a4);
+  background-color: var(--neutral-a4);
   box-shadow: none;
 }
 
 .x-progress:where([data-variant="soft"])::-webkit-progress-bar {
-  background-color: var(--base-color-a4);
+  background-color: var(--neutral-a4);
   box-shadow: none;
 }
 

package/dist/ui/radio/radio.css

@@ -54,7 +54,7 @@
 
 .x-radio:where(:not([data-variant="soft"])) {
   background-color: var(--color-surface);
-  box-shadow: inset 0 0 0 1px var(--base-color-a7);
+  box-shadow: inset 0 0 0 1px var(--neutral-a7);
 }
 
 .x-radio:where(:not([data-variant="soft"])):where(:checked) {
@@ -65,13 +65,13 @@
 
 .x-radio:where(:not([data-variant="soft"])):where([data-high-contrast]):where(:checked) {
   background-color: var(--accent-12);
-  color: var(--base-color-1);
+  color: var(--neutral-1);
 }
 
 .x-radio: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-a6);
-  color: var(--base-color-a8);
+  background-color: var(--neutral-a3);
+  box-shadow: inset 0 0 0 1px var(--neutral-a6);
+  color: var(--neutral-a8);
 }
 
 .x-radio:where([data-variant="soft"]) {
@@ -84,6 +84,6 @@
 }
 
 .x-radio:where([data-variant="soft"]):where([data-disabled], :disabled) {
-  background-color: var(--base-color-a3);
-  color: var(--base-color-a8);
+  background-color: var(--neutral-a3);
+  color: var(--neutral-a8);
 }

package/dist/ui/segmented-control/segmented-control.css

@@ -2,9 +2,9 @@
   vertical-align: top;
   isolation: isolate;
   min-width: max-content;
-  color: var(--base-color-12);
+  color: var(--neutral-12);
   background-color: var(--color-surface);
-  background-image: linear-gradient(var(--base-color-a3), var(--base-color-a3));
+  background-image: linear-gradient(var(--neutral-a3), var(--neutral-a3));
   font-family: var(--default-font-family);
   text-align: center;
   --seg-inset: 1px;
@@ -26,7 +26,7 @@
 }
 
 :is(.dark, .dark-theme) :where(.x-segmented-control:not(.light, .light-theme)), :is(.dark, .dark-theme):where(.x-segmented-control:not(.light, .light-theme)) {
-  --seg-indicator-bg: var(--base-color-a3);
+  --seg-indicator-bg: var(--neutral-a3);
 }
 
 .x-segmented-control > label {
@@ -36,7 +36,7 @@
   -webkit-user-select: none;
   user-select: none;
   cursor: var(--cursor-button);
-  color: var(--base-color-a11);
+  color: var(--neutral-a11);
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--tab-inactive-letter-spacing);
   transition: color var(--seg-transition-duration);
@@ -69,7 +69,7 @@
 }
 
 .x-segmented-control > label:where(:has(:checked)) {
-  color: var(--base-color-12);
+  color: var(--neutral-12);
 }
 
 .x-segmented-control > label:where(:has(:focus-visible)) {
@@ -80,7 +80,7 @@
 
 @media (hover: hover) {
   .x-segmented-control > label:where(:not(:has(:checked, :disabled)):hover) {
-    background-color: var(--base-color-a2);
+    background-color: var(--neutral-a2);
   }
 }
 
@@ -89,7 +89,7 @@
   inset-inline-start: 0;
   top: var(--seg-inset);
   bottom: var(--seg-inset);
-  background-color: var(--base-color-a4);
+  background-color: var(--neutral-a4);
   z-index: -1;
   width: 1px;
   transition: opacity var(--seg-transition-duration) ease-out;
@@ -107,8 +107,8 @@
   z-index: -1;
   background-color: var(--seg-indicator-bg);
   border-radius: var(--seg-indicator-radius);
-  box-shadow: 0 0 0 .5px var(--base-color-a3),
-    0 1px 2px var(--base-color-a4);
+  box-shadow: 0 0 0 .5px var(--neutral-a3),
+    0 1px 2px var(--neutral-a4);
   opacity: 0;
   transition: opacity var(--seg-transition-duration) ease-out;
   position: absolute;
@@ -137,8 +137,8 @@
     background-color: var(--seg-indicator-bg);
     border-radius: var(--seg-indicator-radius);
     width: auto;
-    box-shadow: 0 0 0 .5px var(--base-color-a3),
-      0 1px 2px var(--base-color-a4);
+    box-shadow: 0 0 0 .5px var(--neutral-a3),
+      0 1px 2px var(--neutral-a4);
     transition: left var(--seg-transition-duration) cubic-bezier(.45, .05, .55, .95),
       right var(--seg-transition-duration) cubic-bezier(.45, .05, .55, .95);
     position: absolute;
@@ -150,23 +150,23 @@
 }
 
 .x-segmented-control:where(:disabled, [data-disabled]) {
-  color: var(--base-color-a8);
-  background-image: linear-gradient(var(--base-color-a2), var(--base-color-a2));
+  color: var(--neutral-a8);
+  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
 }
 
 .x-segmented-control:where(:disabled, [data-disabled]) > label, .x-segmented-control > label:where(:has(:disabled)) {
   cursor: var(--cursor-disabled);
-  color: var(--base-color-a8);
+  color: var(--neutral-a8);
 }
 
 .x-segmented-control:where(:disabled, [data-disabled]) > label:before, .x-segmented-control > label:where(:has(:disabled)):before {
-  background-color: var(--base-color-a3);
+  background-color: var(--neutral-a3);
   box-shadow: none;
 }
 
 @supports (anchor-name: --x) {
   .x-segmented-control:where(:disabled, [data-disabled]):after, .x-segmented-control:where(:has( > label:where(:has(:disabled)):has(:checked))):after {
-    background-color: var(--base-color-a3);
+    background-color: var(--neutral-a3);
     box-shadow: none;
   }
 }
@@ -254,7 +254,7 @@
 }
 
 .x-segmented-control:where([data-high-contrast]) > label:where(:has(:checked)) {
-  color: var(--base-color-12);
+  color: var(--neutral-12);
 }
 
 .x-segmented-control:where([data-high-contrast][data-variant="soft"]) > label:where(:has(:checked)) {

package/dist/ui/select/select.css

@@ -107,21 +107,21 @@
 }
 
 .x-select:where(:not([data-variant]), [data-variant="surface"]) {
-  color: var(--base-color-12);
-  box-shadow: inset 0 0 0 1px var(--base-color-a7);
+  color: var(--neutral-12);
+  box-shadow: inset 0 0 0 1px var(--neutral-a7);
   background-color: #0000;
 }
 
 @media (hover: hover) {
   .x-select:where(:not([data-variant]), [data-variant="surface"]):where(:hover) {
-    box-shadow: inset 0 0 0 1px var(--base-color-a8);
+    box-shadow: inset 0 0 0 1px var(--neutral-a8);
   }
 }
 
 .x-select:where(:not([data-variant]), [data-variant="surface"]):where(:disabled) {
-  color: var(--base-color-a11);
-  background-color: var(--base-color-a2);
-  box-shadow: inset 0 0 0 1px var(--base-color-a6);
+  color: var(--neutral-a11);
+  background-color: var(--neutral-a2);
+  box-shadow: inset 0 0 0 1px var(--neutral-a6);
 }
 
 .x-select:where([data-variant="soft"]) {
@@ -140,8 +140,8 @@
 }
 
 .x-select:where([data-variant="soft"]):where(:disabled) {
-  color: var(--base-color-a11);
-  background-color: var(--base-color-a3);
+  color: var(--neutral-a11);
+  background-color: var(--neutral-a3);
 }
 
 .x-select:where([data-variant="text"]) {
@@ -155,6 +155,6 @@
 }
 
 .x-select:where([data-variant="text"]):where(:disabled) {
-  color: var(--base-color-a11);
+  color: var(--neutral-a11);
   background-color: #0000;
 }

package/dist/ui/slider/slider.css

@@ -8,7 +8,7 @@
 }
 
 .x-slider:where([data-disabled], :disabled) {
-  --slider-fill-color: var(--base-color-a6);
+  --slider-fill-color: var(--neutral-a6);
   opacity: .5;
   cursor: var(--cursor-disabled);
 }
@@ -86,16 +86,16 @@
 }
 
 .x-slider:where(:not([data-variant="soft"])) {
-  --slider-track-bg: var(--base-color-a3);
-  --slider-track-shadow: inset 0 0 0 1px var(--base-color-a5);
+  --slider-track-bg: var(--neutral-a3);
+  --slider-track-shadow: inset 0 0 0 1px var(--neutral-a5);
   --slider-thumb-shadow: 0 0 0 1px var(--black-a4);
   --slider-fill-color: var(--accent-9);
 }
 
 .x-slider:where([data-variant="soft"]) {
-  --slider-track-bg: var(--base-color-a4);
-  --slider-thumb-shadow: 0 0 0 1px var(--black-a3), 0 0 0 1px var(--base-color-a2),
-    0 0 0 1px var(--accent-a2), 0 1px 2px var(--base-color-a4),
-    0 1px 3px -.5px var(--base-color-a3);
+  --slider-track-bg: var(--neutral-a4);
+  --slider-thumb-shadow: 0 0 0 1px var(--black-a3), 0 0 0 1px var(--neutral-a2),
+    0 0 0 1px var(--accent-a2), 0 1px 2px var(--neutral-a4),
+    0 1px 3px -.5px var(--neutral-a3);
   --slider-fill-color: var(--accent-a8);
 }