elements-kit 0.14.0 → 0.16.0

package/dist/ui/select/select.css

@@ -0,0 +1,160 @@
+.x-select {
+  -webkit-user-select: none;
+  user-select: none;
+  vertical-align: top;
+  appearance: none;
+  font-family: var(--default-font-family);
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: var(--cursor-button);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right var(--select-chevron-inset) center;
+  background-size: var(--select-chevron-size) var(--select-chevron-size);
+  flex-shrink: 0;
+  justify-content: space-between;
+  align-items: center;
+  font-style: normal;
+  font-weight: 500;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.x-select:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.x-select:where([data-size="1"]) {
+  --select-chevron-size: 9px;
+  --select-chevron-inset: var(--space-2);
+  gap: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  border-radius: max(var(--radius-1), var(--radius-pill));
+}
+
+.x-select:where([data-size="1"]):where(:not([data-variant="text"])) {
+  padding-block: calc((var(--space-5) - var(--line-height-1)) / 2);
+  padding-inline-start: var(--space-2);
+  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-1));
+}
+
+.x-select:where([data-size="1"]):where([data-variant="text"]) {
+  --select-text-padding-x: var(--space-2);
+  --select-text-padding-y: var(--space-1);
+}
+
+.x-select:where(:not([data-size]), [data-size="2"]) {
+  --select-chevron-size: 9px;
+  --select-chevron-inset: var(--space-3);
+  gap: calc(var(--space-1) * 1.5);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  border-radius: max(var(--radius-2), var(--radius-pill));
+}
+
+.x-select:where(:not([data-size]), [data-size="2"]):where(:not([data-variant="text"])) {
+  padding-block: calc((var(--space-6) - var(--line-height-2)) / 2);
+  padding-inline-start: var(--space-3);
+  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-1));
+}
+
+.x-select:where(:not([data-size]), [data-size="2"]):where([data-variant="text"]) {
+  --select-text-padding-x: var(--space-2);
+  --select-text-padding-y: var(--space-1);
+}
+
+.x-select:where([data-size="3"]) {
+  --select-chevron-size: 11px;
+  --select-chevron-inset: var(--space-4);
+  gap: var(--space-2);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  letter-spacing: var(--letter-spacing-3);
+  border-radius: max(var(--radius-3), var(--radius-pill));
+}
+
+.x-select:where([data-size="3"]):where(:not([data-variant="text"])) {
+  padding-block: calc((var(--space-7) - var(--line-height-3)) / 2);
+  padding-inline-start: var(--space-4);
+  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-2));
+}
+
+.x-select:where([data-size="3"]):where([data-variant="text"]) {
+  --select-text-padding-x: var(--space-3);
+  --select-text-padding-y: calc(var(--space-1) * 1.5);
+}
+
+.x-select:where([data-variant="text"]) {
+  box-sizing: content-box;
+  height: fit-content;
+  padding: var(--select-text-padding-y) var(--select-text-padding-x);
+  --margin-top: 0px;
+  --margin-right: 0px;
+  --margin-bottom: 0px;
+  --margin-left: 0px;
+  --margin-top-override: calc(var(--margin-top) - var(--select-text-padding-y));
+  --margin-right-override: calc(var(--margin-right) - var(--select-text-padding-x));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--select-text-padding-y));
+  --margin-left-override: calc(var(--margin-left) - var(--select-text-padding-x));
+  margin: var(--margin-top-override) var(--margin-right-override)
+    var(--margin-bottom-override) var(--margin-left-override);
+  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-1));
+}
+
+.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);
+  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);
+  }
+}
+
+.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);
+}
+
+.x-select:where([data-variant="soft"]) {
+  color: var(--accent-12);
+  background-color: var(--accent-a3);
+}
+
+@media (hover: hover) {
+  .x-select:where([data-variant="soft"]):where(:hover) {
+    background-color: var(--accent-a4);
+  }
+}
+
+.x-select:where([data-variant="soft"]):where(:focus-visible) {
+  outline-color: var(--accent-8);
+}
+
+.x-select:where([data-variant="soft"]):where(:disabled) {
+  color: var(--base-color-a11);
+  background-color: var(--base-color-a3);
+}
+
+.x-select:where([data-variant="text"]) {
+  color: var(--accent-12);
+}
+
+@media (hover: hover) {
+  .x-select:where([data-variant="text"]):where(:hover) {
+    background-color: var(--accent-a3);
+  }
+}
+
+.x-select:where([data-variant="text"]):where(:disabled) {
+  color: var(--base-color-a11);
+  background-color: #0000;
+}

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

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

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

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

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

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

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

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

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