elements-kit 0.14.0 → 0.16.0

package/dist/ui/accordion/accordion.css

@@ -36,7 +36,7 @@
   padding: var(--accordion-summary-padding-block)
     var(--accordion-summary-padding-inline);
   font-size: var(--accordion-font-size);
-  color: var(--color-11);
+  color: var(--accent-11);
   -webkit-user-select: none;
   user-select: none;
   font-weight: 500;
@@ -117,16 +117,16 @@
 }
 
 .x-accordion:where([data-variant="soft"]) {
-  background-color: var(--color-a2);
-  --accordion-summary-bg: var(--color-a2);
-  --accordion-summary-hover-bg: var(--color-a3);
+  background-color: var(--accent-a2);
+  --accordion-summary-bg: var(--accent-a2);
+  --accordion-summary-hover-bg: var(--accent-a3);
   --accordion-body-bg: transparent;
 }
 
 :where(.dark, .dark-theme) .x-accordion:where([data-variant="soft"]) {
-  background-color: var(--color-a2);
-  --accordion-summary-bg: var(--color-a2);
-  --accordion-summary-hover-bg: var(--color-a3);
+  background-color: var(--accent-a2);
+  --accordion-summary-bg: var(--accent-a2);
+  --accordion-summary-hover-bg: var(--accent-a3);
 }
 
 .x-accordion:where(:not([data-variant]), [data-variant="surface"]) + .x-accordion:where(:not([data-variant]), [data-variant="surface"]) {
@@ -151,19 +151,19 @@
 }
 
 .x-accordion:where([data-variant="borderless"]) > summary {
-  color: var(--color-a11);
+  color: var(--accent-a11);
   padding-inline: 0;
   transition: background-color .12s ease-out, color .12s ease-out;
 }
 
 @media (hover: hover) {
   .x-accordion:where([data-variant="borderless"]) > summary:where(:hover) {
-    color: var(--color-12);
+    color: var(--accent-12);
   }
 }
 
 .x-accordion:where([data-variant="borderless"][open]) > summary {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-accordion:where([data-variant="borderless"])::details-content {

package/dist/ui/alert/alert.css

@@ -1,7 +1,7 @@
 .x-alert {
   box-sizing: border-box;
   text-align: left;
-  color: var(--color-a11);
+  color: var(--accent-a11);
   grid-template-columns: auto 1fr;
   justify-content: flex-start;
   align-items: flex-start;
@@ -9,7 +9,7 @@
 }
 
 .x-alert:where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-alert-icon {
@@ -64,14 +64,14 @@
 }
 
 .x-alert:where(:not([data-variant="surface"], [data-variant="outline"])) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-alert:where([data-variant="surface"]) {
-  background-color: var(--color-a2);
-  box-shadow: inset 0 0 0 1px var(--color-a6);
+  background-color: var(--accent-a2);
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
 }
 
 .x-alert:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a7);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
 }

package/dist/ui/badge/badge.css

@@ -38,51 +38,51 @@
 }
 
 .x-badge:where([data-variant="solid"]) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
 .x-badge:where([data-variant="solid"])::selection {
-  background-color: var(--color-7);
-  color: var(--color-12);
+  background-color: var(--accent-7);
+  color: var(--accent-12);
 }
 
 .x-badge:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  color: var(--color-1);
+  background-color: var(--accent-12);
+  color: var(--accent-1);
 }
 
 .x-badge:where([data-variant="solid"]):where([data-high-contrast])::selection {
-  background-color: var(--color-a11);
-  color: var(--color-1);
+  background-color: var(--accent-a11);
+  color: var(--accent-1);
 }
 
 .x-badge:where([data-variant="surface"]) {
   background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--color-a6);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+  color: var(--accent-a11);
 }
 
 .x-badge:where([data-variant="surface"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-badge:where([data-variant="soft"]) {
-  background-color: var(--color-a3);
-  color: var(--color-a11);
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
 }
 
 .x-badge:where([data-variant="soft"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-badge:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a8);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
 }
 
 .x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 1px var(--color-a7),
+  box-shadow: inset 0 0 0 1px var(--accent-a7),
       inset 0 0 0 1px var(--base-color-a11);
-  color: var(--color-12);
+  color: var(--accent-12);
 }

package/dist/ui/button/button.css

@@ -65,28 +65,28 @@
 }
 
 .x-button:where([data-variant="solid"]) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="solid"]):where(:hover) {
-    background-color: var(--color-10);
+    background-color: var(--accent-10);
   }
 }
 
 .x-button:where([data-variant="solid"]):where([data-state="open"]) {
-  background-color: var(--color-10);
+  background-color: var(--accent-10);
 }
 
 .x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-10);
+  background-color: var(--accent-10);
   filter: var(--base-button-solid-active-filter);
 }
 
 @media (pointer: coarse) {
   .x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
-    outline: .5em solid var(--color-a4);
+    outline: .5em solid var(--accent-a4);
     outline-offset: 0;
   }
 }
@@ -97,24 +97,24 @@
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   color: var(--base-color-1);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:hover) {
-    background-color: var(--color-12);
+    background-color: var(--accent-12);
     filter: var(--base-button-solid-high-contrast-hover-filter);
   }
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]):where([data-state="open"]) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   filter: var(--base-button-solid-high-contrast-hover-filter);
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   filter: var(--base-button-solid-high-contrast-active-filter);
 }
 
@@ -126,11 +126,11 @@
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]) {
-  color: var(--color-a11);
+  color: var(--accent-a11);
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
@@ -139,26 +139,26 @@
 }
 
 .x-button:where([data-variant="soft"]) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-button:where([data-variant="soft"]):where(:focus-visible) {
-  outline: 2px solid var(--color-8);
+  outline: 2px solid var(--accent-8);
   outline-offset: -1px;
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="soft"]):where(:hover) {
-    background-color: var(--color-a4);
+    background-color: var(--accent-a4);
   }
 }
 
 .x-button:where([data-variant="soft"]):where([data-state="open"]) {
-  background-color: var(--color-a4);
+  background-color: var(--accent-a4);
 }
 
 .x-button:where([data-variant="soft"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a5);
+  background-color: var(--accent-a5);
 }
 
 .x-button:where([data-variant="soft"]):where([data-disabled]) {
@@ -168,7 +168,7 @@
 
 @media (hover: hover) {
   .x-button:where([data-variant="text"], [data-variant="borderless"]):where(:hover) {
-    background-color: var(--color-a3);
+    background-color: var(--accent-a3);
   }
 }
 
@@ -178,11 +178,11 @@
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-state="open"]) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a4);
+  background-color: var(--accent-a4);
 }
 
 .x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
@@ -191,22 +191,22 @@
 }
 
 .x-button:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a8);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="outline"]):where(:hover) {
-    background-color: var(--color-a2);
+    background-color: var(--accent-a2);
   }
 }
 
 .x-button:where([data-variant="outline"]):where([data-state="open"]) {
-  background-color: var(--color-a2);
+  background-color: var(--accent-a2);
 }
 
 .x-button:where([data-variant="outline"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a3);
+  background-color: var(--accent-a3);
 }
 
 .x-button:where([data-variant="outline"]):where(:focus-visible) {
@@ -215,9 +215,9 @@
 }
 
 .x-button:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 1px var(--color-a7),
+  box-shadow: inset 0 0 0 1px var(--accent-a7),
       inset 0 0 0 1px var(--base-color-a11);
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-button:where([data-variant="outline"]):where([data-disabled]) {
@@ -228,23 +228,23 @@
 
 .x-button:where([data-variant="surface"]) {
   background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--color-a7);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  color: var(--accent-a11);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="surface"]):where(:hover) {
-    box-shadow: inset 0 0 0 1px var(--color-a8);
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
   }
 }
 
 .x-button:where([data-variant="surface"]):where([data-state="open"]) {
-  box-shadow: inset 0 0 0 1px var(--color-a8);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
 }
 
 .x-button:where([data-variant="surface"]):where(:active:not([data-state="open"])) {
-  background-color: var(--color-a3);
-  box-shadow: inset 0 0 0 1px var(--color-a8);
+  background-color: var(--accent-a3);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
 }
 
 .x-button:where([data-variant="surface"]):where(:focus-visible) {
@@ -253,7 +253,7 @@
 }
 
 .x-button:where([data-variant="surface"]):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-button:where([data-variant="surface"]):where([data-disabled]) {

package/dist/ui/checkbox/checkbox.css

@@ -77,13 +77,13 @@
 }
 
 .x-checkbox:where(:not([data-variant="soft"])):where(:checked, :indeterminate) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
   box-shadow: none;
 }
 
 .x-checkbox:where(:not([data-variant="soft"])):where([data-high-contrast]):where(:checked, :indeterminate) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   color: var(--base-color-1);
 }
 
@@ -94,12 +94,12 @@
 }
 
 .x-checkbox:where([data-variant="soft"]) {
-  background-color: var(--color-a5);
-  color: var(--color-a11);
+  background-color: var(--accent-a5);
+  color: var(--accent-a11);
 }
 
 .x-checkbox:where([data-variant="soft"]):where([data-high-contrast]):where(:checked, :indeterminate) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-checkbox:where([data-variant="soft"]):where([data-disabled], :disabled) {

package/dist/ui/code/code.css

@@ -75,38 +75,38 @@
 }
 
 .x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="text"])) {
-  background-color: var(--color-a3);
-  color: var(--color-a11);
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
 }
 
 .x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="text"])):where([data-high-contrast]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-code:where([data-variant="solid"]) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
 }
 
 .x-code:where([data-variant="solid"])::selection {
-  background-color: var(--color-7);
-  color: var(--color-12);
+  background-color: var(--accent-7);
+  color: var(--accent-12);
 }
 
 .x-code:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  color: var(--color-1);
+  background-color: var(--accent-12);
+  color: var(--accent-1);
 }
 
 .x-code:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 max(1px, .033em) var(--color-a8);
-  color: var(--color-a11);
+  box-shadow: inset 0 0 0 max(1px, .033em) var(--accent-a8);
+  color: var(--accent-a11);
 }
 
 .x-code:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 max(1px, .033em) var(--color-a7),
+  box-shadow: inset 0 0 0 max(1px, .033em) var(--accent-a7),
       inset 0 0 0 max(1px, .033em) var(--base-color-a11);
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-code:where([data-variant="text"]) {
@@ -114,10 +114,10 @@
   padding: 0;
 }
 
-.x-code:where([data-variant="text"]):where([data-color]) {
-  color: var(--color-a11);
+.x-code:where([data-variant="text"]):where([data-accent]) {
+  color: var(--accent-a11);
 }
 
-.x-code:where([data-variant="text"]):where([data-color][data-high-contrast]) {
-  color: var(--color-12);
+.x-code:where([data-variant="text"]):where([data-accent][data-high-contrast]) {
+  color: var(--accent-12);
 }

package/dist/ui/link/link.css

@@ -1,5 +1,5 @@
 .x-link {
-  color: var(--color-a11);
+  color: var(--accent-a11);
 }
 
 .x-link:where(:any-link, button) {
@@ -8,8 +8,8 @@
   text-decoration-line: none;
   text-decoration-style: solid;
   text-decoration-thickness: min(2px, max(1px, .05em));
-  -webkit-text-decoration-color: var(--color-a5);
-  text-decoration-color: var(--color-a5);
+  -webkit-text-decoration-color: var(--accent-a5);
+  text-decoration-color: var(--accent-a5);
 }
 
 .x-link:where(:disabled, [aria-disabled="true"]) {

package/dist/ui/marketing/marketing.css

@@ -367,7 +367,7 @@
 }
 
 .pillar > svg:first-child {
-  color: var(--color-9);
+  color: var(--accent-9);
   margin-bottom: 1.5rem;
   font-size: 2rem;
 }
@@ -426,7 +426,7 @@
 .testimonial > blockquote:before {
   content: "“";
   font-size: calc(96px * var(--scaling, 1));
-  color: var(--color-9);
+  color: var(--accent-9);
   font-weight: 700;
   line-height: 1;
   display: block;

package/dist/ui/progress/progress.css

@@ -17,13 +17,13 @@
 }
 
 .x-progress::-webkit-progress-value {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   border-radius: inherit;
   transition: width .12s linear;
 }
 
 .x-progress::-moz-progress-bar {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   border-radius: inherit;
   transition: width .12s linear;
 }
@@ -55,9 +55,9 @@
 }
 
 .x-progress:where([data-variant="soft"])::-webkit-progress-value {
-  background-color: var(--color-a8);
+  background-color: var(--accent-a8);
 }
 
 .x-progress:where([data-variant="soft"])::-moz-progress-bar {
-  background-color: var(--color-a8);
+  background-color: var(--accent-a8);
 }

package/dist/ui/radio/radio.css

@@ -58,13 +58,13 @@
 }
 
 .x-radio:where(:not([data-variant="soft"])):where(:checked) {
-  background-color: var(--color-9);
+  background-color: var(--accent-9);
   color: var(--accent-contrast);
   box-shadow: none;
 }
 
 .x-radio:where(:not([data-variant="soft"])):where([data-high-contrast]):where(:checked) {
-  background-color: var(--color-12);
+  background-color: var(--accent-12);
   color: var(--base-color-1);
 }
 
@@ -75,12 +75,12 @@
 }
 
 .x-radio:where([data-variant="soft"]) {
-  background-color: var(--color-a4);
-  color: var(--color-a11);
+  background-color: var(--accent-a4);
+  color: var(--accent-a11);
 }
 
 .x-radio:where([data-variant="soft"]):where([data-high-contrast]):where(:checked) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 .x-radio:where([data-variant="soft"]):where([data-disabled], :disabled) {

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

@@ -4,8 +4,7 @@
   min-width: max-content;
   color: var(--base-color-12);
   background-color: var(--color-surface);
-  background-image: linear-gradient(var(--base-color-a3),
-    var(--base-color-a3));
+  background-image: linear-gradient(var(--base-color-a3), var(--base-color-a3));
   font-family: var(--default-font-family);
   text-align: center;
   --seg-inset: 1px;
@@ -152,8 +151,7 @@
 
 .x-segmented-control:where(:disabled, [data-disabled]) {
   color: var(--base-color-a8);
-  background-image: linear-gradient(var(--base-color-a2),
-    var(--base-color-a2));
+  background-image: linear-gradient(var(--base-color-a2), var(--base-color-a2));
 }
 
 .x-segmented-control:where(:disabled, [data-disabled]) > label, .x-segmented-control > label:where(:has(:disabled)) {
@@ -240,19 +238,19 @@
 }
 
 .x-segmented-control:where([data-variant="soft"]) {
-  background-image: linear-gradient(var(--color-a3), var(--color-a3));
+  background-image: linear-gradient(var(--accent-a3), var(--accent-a3));
 }
 
 .x-segmented-control:where([data-variant="soft"]) > label {
-  color: var(--color-a11);
+  color: var(--accent-a11);
 }
 
 .x-segmented-control:where([data-variant="soft"]) > label:where(:has(:checked)) {
-  color: var(--color-a12, var(--color-12));
+  color: var(--accent-a12, var(--accent-12));
 }
 
 .x-segmented-control:where([data-variant="soft"]) > label + label:after {
-  background-color: var(--color-a4);
+  background-color: var(--accent-a4);
 }
 
 .x-segmented-control:where([data-high-contrast]) > label:where(:has(:checked)) {
@@ -260,5 +258,5 @@
 }
 
 .x-segmented-control:where([data-high-contrast][data-variant="soft"]) > label:where(:has(:checked)) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }