elements-kit 0.15.0 → 0.17.0

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

@@ -238,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)) {
@@ -258,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);
 }

package/dist/ui/select/select.css

@@ -125,18 +125,18 @@
 }
 
 .x-select:where([data-variant="soft"]) {
-  color: var(--color-12);
-  background-color: var(--color-a3);
+  color: var(--accent-12);
+  background-color: var(--accent-a3);
 }
 
 @media (hover: hover) {
   .x-select:where([data-variant="soft"]):where(:hover) {
-    background-color: var(--color-a4);
+    background-color: var(--accent-a4);
   }
 }
 
 .x-select:where([data-variant="soft"]):where(:focus-visible) {
-  outline-color: var(--color-8);
+  outline-color: var(--accent-8);
 }
 
 .x-select:where([data-variant="soft"]):where(:disabled) {
@@ -145,12 +145,12 @@
 }
 
 .x-select:where([data-variant="text"]) {
-  color: var(--color-12);
+  color: var(--accent-12);
 }
 
 @media (hover: hover) {
   .x-select:where([data-variant="text"]):where(:hover) {
-    background-color: var(--color-a3);
+    background-color: var(--accent-a3);
   }
 }
 

package/dist/ui/slider/slider.css

@@ -1,6 +1,6 @@
 .x-slider {
   --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
-  --slider-fill-color: var(--color-9);
+  --slider-fill-color: var(--accent-9);
   height: var(--slider-thumb-size);
   appearance: auto;
   accent-color: var(--slider-fill-color);
@@ -89,13 +89,13 @@
   --slider-track-bg: var(--base-color-a3);
   --slider-track-shadow: inset 0 0 0 1px var(--base-color-a5);
   --slider-thumb-shadow: 0 0 0 1px var(--black-a4);
-  --slider-fill-color: var(--color-9);
+  --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(--color-a2), 0 1px 2px var(--base-color-a4),
+    0 0 0 1px var(--accent-a2), 0 1px 2px var(--base-color-a4),
     0 1px 3px -.5px var(--base-color-a3);
-  --slider-fill-color: var(--color-a8);
+  --slider-fill-color: var(--accent-a8);
 }

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

@@ -0,0 +1,30 @@
+[data-accent="amber"] {
+  --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/base.css

@@ -0,0 +1,30 @@
+[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/accent/blue.css

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+[data-accent="error"] {
+  --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/gold.css

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

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

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

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

@@ -0,0 +1,30 @@
+[data-accent="green"] {
+  --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/indigo.css

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