elements-kit 0.3.4 → 0.4.1

package/dist/ui/button/button.css

@@ -0,0 +1,547 @@
+.x-button {
+  -webkit-user-select: none;
+  user-select: none;
+  vertical-align: top;
+  font-family: var(--default-font-family);
+  text-align: center;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  display: inline-flex;
+}
+
+.x-button:where([data-disabled]) {
+  --spinner-opacity: 1;
+}
+
+.x-button:where([data-loading]) {
+  position: relative;
+}
+
+.x-button:where(:not([data-variant="ghost"])) {
+  height: var(--base-button-height);
+}
+
+.x-button:where([data-variant="ghost"]) {
+  box-sizing: content-box;
+  height: fit-content;
+}
+
+.x-button:where([data-size="1"]) {
+  --base-button-classic-active-padding-top: 1px;
+  --base-button-height: var(--space-5);
+  border-radius: max(var(--radius-1), var(--radius-full));
+}
+
+.x-button:where([data-size="2"]) {
+  --base-button-classic-active-padding-top: 2px;
+  --base-button-height: var(--space-6);
+  border-radius: max(var(--radius-2), var(--radius-full));
+}
+
+.x-button:where([data-size="3"]) {
+  --base-button-classic-active-padding-top: 2px;
+  --base-button-height: var(--space-7);
+  border-radius: max(var(--radius-3), var(--radius-full));
+}
+
+.x-button:where([data-size="4"]) {
+  --base-button-classic-active-padding-top: 2px;
+  --base-button-height: var(--space-8);
+  border-radius: max(var(--radius-4), var(--radius-full));
+}
+
+:where(:root) {
+  --base-button-classic-after-inset: 2px;
+  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--gray-a4),
+    inset 0 -2px 1px var(--gray-a3);
+  --base-button-classic-box-shadow-bottom: inset 0 4px 2px -2px var(--white-a9),
+    inset 0 2px 1px -1px var(--white-a9);
+  --base-button-classic-disabled-box-shadow: var(--base-button-classic-box-shadow-top),
+    var(--base-button-classic-box-shadow-bottom);
+  --base-button-classic-active-filter: brightness(.92) saturate(1.1);
+  --base-button-classic-high-contrast-hover-filter: contrast(.88) saturate(1.1) brightness(1.1);
+  --base-button-classic-high-contrast-active-filter: contrast(.82) saturate(1.2) brightness(1.16);
+}
+
+:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where(:root:not(.light, .light-theme)) {
+  --base-button-classic-after-inset: 1px;
+  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--white-a2),
+    inset 0 4px 2px -2px var(--white-a3),
+    inset 0 1px 1px var(--white-a6),
+    inset 0 -1px 1px var(--black-a6);
+  --base-button-classic-box-shadow-bottom: 0 0 transparent;
+  --base-button-classic-disabled-box-shadow: inset 0 0 0 1px var(--gray-a5),
+    inset 0 4px 2px -2px var(--gray-a2),
+    inset 0 1px 1px var(--gray-a5),
+    inset 0 -1px 1px var(--black-a3),
+    inset 0 0 0 1px var(--gray-a2);
+  --base-button-classic-active-filter: brightness(1.08);
+  --base-button-classic-high-contrast-hover-filter: contrast(.88) saturate(1.3) brightness(1.14);
+  --base-button-classic-high-contrast-active-filter: brightness(.95) saturate(1.2);
+}
+
+.x-button:where([data-variant="classic"]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+  z-index: 0;
+  background-image: linear-gradient(to bottom, transparent 50%, var(--gray-a4)),
+    linear-gradient(to bottom, transparent 50%, var(--accent-9) 80%);
+  box-shadow: var(--base-button-classic-box-shadow-top),
+    inset 0 0 0 1px var(--accent-9),
+    var(--base-button-classic-box-shadow-bottom);
+  position: relative;
+}
+
+.x-button:where([data-variant="classic"]):after {
+  content: "";
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: -1;
+  border: var(--base-button-classic-after-inset) solid transparent;
+  background-clip: content-box;
+  background-color: inherit;
+  background-image: linear-gradient(var(--black-a1),
+      transparent,
+      var(--white-a2));
+  box-shadow: inset 0 2px 3px -1px var(--white-a4);
+  position: absolute;
+  inset: 0;
+}
+
+.x-button:where([data-variant="classic"]):where([data-high-contrast]) {
+  background-color: var(--accent-12);
+  color: var(--gray-1);
+  background-image: linear-gradient(to bottom, transparent 50%, var(--gray-a4)),
+      linear-gradient(to bottom, transparent 50%, var(--accent-12) 80%);
+  box-shadow: var(--base-button-classic-box-shadow-top),
+      inset 0 0 0 1px var(--accent-12),
+      var(--base-button-classic-box-shadow-bottom);
+}
+
+.x-button:where([data-variant="classic"]):where([data-high-contrast]):after {
+  background-image: linear-gradient(var(--black-a3),
+        transparent,
+        var(--white-a2));
+}
+
+@media (pointer: coarse) {
+  .x-button:where([data-variant="classic"]):where(:active:not([data-state="open"])) {
+    outline: .5em solid var(--accent-a4);
+    outline-offset: 0;
+  }
+}
+
+.x-button:where([data-variant="classic"]):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .x-button:where([data-variant="classic"]):where(:hover):after {
+    background-color: var(--accent-10);
+    background-image: linear-gradient(var(--black-a2) -15%,
+          transparent,
+          var(--white-a3));
+  }
+
+  .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]) {
+    filter: var(--base-button-classic-high-contrast-hover-filter);
+  }
+
+  .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]):after {
+    background-color: var(--accent-12);
+    background-image: linear-gradient(var(--black-a5),
+            transparent,
+            var(--white-a2));
+  }
+}
+
+.x-button:where([data-variant="classic"]):where([data-state="open"]):after {
+  background-color: var(--accent-10);
+  background-image: linear-gradient(var(--black-a2) -15%,
+        transparent,
+        var(--white-a3));
+}
+
+.x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]) {
+  filter: var(--base-button-classic-high-contrast-hover-filter);
+}
+
+.x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]):after {
+  background-color: var(--accent-12);
+  background-image: linear-gradient(var(--black-a5),
+          transparent,
+          var(--white-a2));
+}
+
+.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])) {
+  background-color: var(--accent-9);
+  background-image: linear-gradient(var(--black-a1), transparent);
+  padding-top: var(--base-button-classic-active-padding-top);
+  box-shadow: inset 0 4px 2px -2px var(--gray-a4),
+      inset 0 1px 1px var(--gray-a7),
+      inset 0 0 0 1px var(--gray-a5),
+      inset 0 0 0 1px var(--accent-9),
+      inset 0 3px 2px var(--gray-a3),
+      inset 0 0 0 1px var(--white-a7),
+      inset 0 -2px 1px var(--white-a5);
+}
+
+.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):after {
+  box-shadow: none;
+  background-color: inherit;
+  background-image: linear-gradient(var(--black-a2),
+        transparent,
+        var(--white-a3));
+}
+
+.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]) {
+  background-color: var(--accent-12);
+  filter: var(--base-button-classic-high-contrast-active-filter);
+  box-shadow: var(--base-button__classic-active__shadow-front-layer),
+        inset 0 0 0 1px var(--accent-12),
+        var(--base-button__classic-active__shadow-bottom-layer);
+}
+
+.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]):after {
+  background-image: linear-gradient(var(--black-a5),
+          transparent,
+          var(--white-a3));
+}
+
+.x-button:where([data-variant="classic"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-2);
+  box-shadow: var(--base-button-classic-disabled-box-shadow);
+  filter: none;
+  background-image: none;
+  outline: none;
+}
+
+.x-button:where([data-variant="classic"]):where([data-disabled]):after {
+  box-shadow: none;
+  background-color: var(--gray-a2);
+  background-image: linear-gradient(var(--black-a1) -20%,
+        transparent,
+        var(--white-a1));
+}
+
+:where(:root) {
+  --base-button-solid-active-filter: brightness(.92) saturate(1.1);
+  --base-button-solid-high-contrast-hover-filter: contrast(.88) saturate(1.1)
+    brightness(1.1);
+  --base-button-solid-high-contrast-active-filter: contrast(.82) saturate(1.2)
+    brightness(1.16);
+}
+
+:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where(:root:not(.light, .light-theme)) {
+  --base-button-solid-active-filter: brightness(1.08);
+  --base-button-solid-high-contrast-hover-filter: contrast(.88) saturate(1.3)
+    brightness(1.18);
+  --base-button-solid-high-contrast-active-filter: brightness(.95)
+    saturate(1.2);
+}
+
+.x-button:where([data-variant="solid"]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+
+@media (hover: hover) {
+  .x-button:where([data-variant="solid"]):where(:hover) {
+    background-color: var(--accent-10);
+  }
+}
+
+.x-button:where([data-variant="solid"]):where([data-state="open"]) {
+  background-color: var(--accent-10);
+}
+
+.x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
+  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(--accent-a4);
+    outline-offset: 0;
+  }
+}
+
+.x-button:where([data-variant="solid"]):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+
+.x-button:where([data-variant="solid"]):where([data-high-contrast]) {
+  background-color: var(--accent-12);
+  color: var(--gray-1);
+}
+
+@media (hover: hover) {
+  .x-button:where([data-variant="solid"]):where([data-high-contrast]):where(:hover) {
+    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(--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(--accent-12);
+  filter: var(--base-button-solid-high-contrast-active-filter);
+}
+
+.x-button:where([data-variant="solid"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+  filter: none;
+  outline: none;
+}
+
+.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]) {
+  color: var(--accent-a11);
+}
+
+.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-high-contrast]) {
+  color: var(--accent-12);
+}
+
+.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+
+.x-button:where([data-variant="soft"]) {
+  background-color: var(--accent-a3);
+}
+
+.x-button:where([data-variant="soft"]):where(:focus-visible) {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -1px;
+}
+
+@media (hover: hover) {
+  .x-button:where([data-variant="soft"]):where(:hover) {
+    background-color: var(--accent-a4);
+  }
+}
+
+.x-button:where([data-variant="soft"]):where([data-state="open"]) {
+  background-color: var(--accent-a4);
+}
+
+.x-button:where([data-variant="soft"]):where(:active:not([data-state="open"])) {
+  background-color: var(--accent-a5);
+}
+
+.x-button:where([data-variant="soft"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+
+@media (hover: hover) {
+  .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:hover) {
+    background-color: var(--accent-a3);
+  }
+}
+
+.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-state="open"]) {
+  background-color: var(--accent-a3);
+}
+
+.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:active:not([data-state="open"])) {
+  background-color: var(--accent-a4);
+}
+
+.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: #0000;
+}
+
+.x-button:where([data-variant="outline"]) {
+  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(--accent-a2);
+  }
+}
+
+.x-button:where([data-variant="outline"]):where([data-state="open"]) {
+  background-color: var(--accent-a2);
+}
+
+.x-button:where([data-variant="outline"]):where(:active:not([data-state="open"])) {
+  background-color: var(--accent-a3);
+}
+
+.x-button:where([data-variant="outline"]):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.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(--gray-a11);
+  color: var(--accent-12);
+}
+
+.x-button:where([data-variant="outline"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+  background-color: #0000;
+}
+
+.x-button:where([data-variant="surface"]) {
+  background-color: var(--accent-surface);
+  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(--accent-a8);
+  }
+}
+
+.x-button:where([data-variant="surface"]):where([data-state="open"]) {
+  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(--accent-a3);
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+}
+
+.x-button:where([data-variant="surface"]):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.x-button:where([data-variant="surface"]):where([data-high-contrast]) {
+  color: var(--accent-12);
+}
+
+.x-button:where([data-variant="surface"]):where([data-disabled]) {
+  color: var(--gray-a8);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+  background-color: var(--gray-a2);
+}
+
+.x-button:where(:not([data-variant="ghost"])) :where(svg) {
+  opacity: .9;
+}
+
+.x-button:where([data-variant="ghost"]) {
+  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+  --margin-top: 0px;
+  --margin-right: 0px;
+  --margin-bottom: 0px;
+  --margin-left: 0px;
+  --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
+  --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
+  --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
+}
+
+:where(.x-button:where([data-variant="ghost"])) > * {
+  --margin-top-override: initial;
+  --margin-right-override: initial;
+  --margin-bottom-override: initial;
+  --margin-left-override: initial;
+}
+
+.x-button:where([data-variant="ghost"]) {
+  margin: var(--margin-top-override) var(--margin-right-override)
+      var(--margin-bottom-override) var(--margin-left-override);
+}
+
+.x-button:where([data-size="1"]) {
+  gap: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+}
+
+.x-button:where([data-size="1"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+
+.x-button:where([data-size="1"]):where([data-variant="ghost"]) {
+  gap: var(--space-1);
+  --button-ghost-padding-x: var(--space-2);
+  --button-ghost-padding-y: var(--space-1);
+}
+
+.x-button:where([data-size="2"]) {
+  gap: var(--space-2);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+}
+
+.x-button:where([data-size="2"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-3);
+  padding-right: var(--space-3);
+}
+
+.x-button:where([data-size="2"]):where([data-variant="ghost"]) {
+  gap: var(--space-1);
+  --button-ghost-padding-x: var(--space-2);
+  --button-ghost-padding-y: var(--space-1);
+}
+
+.x-button:where([data-size="3"]) {
+  gap: var(--space-3);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  letter-spacing: var(--letter-spacing-3);
+}
+
+.x-button:where([data-size="3"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+}
+
+.x-button:where([data-size="3"]):where([data-variant="ghost"]) {
+  gap: var(--space-2);
+  --button-ghost-padding-x: var(--space-3);
+  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+}
+
+.x-button:where([data-size="4"]) {
+  gap: var(--space-3);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  letter-spacing: var(--letter-spacing-4);
+}
+
+.x-button:where([data-size="4"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-5);
+  padding-right: var(--space-5);
+}
+
+.x-button:where([data-size="4"]):where([data-variant="ghost"]) {
+  gap: var(--space-2);
+  --button-ghost-padding-x: var(--space-4);
+  --button-ghost-padding-y: var(--space-2);
+}
+
+.x-button:where(:not([data-variant="ghost"])) {
+  font-weight: var(--font-weight-medium);
+}

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

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

@@ -0,0 +1,30 @@
+[data-accent-color="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-color="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-color="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-color="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);
+}