elements-kit 0.17.0 → 0.18.1

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);
 }

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);
+}