elements-kit 0.5.1 → 0.5.2

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { i as Props, s as Require } from "./infer-K2Te9gn1.mjs";
+import { i as Props, s as Require } from "./infer-DGtBn6Nm.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/{infer-K2Te9gn1.d.mts → infer-DGtBn6Nm.d.mts}

@@ -418,6 +418,21 @@ type JsxNamespaces<E extends Element = Element> = {
   ref?: (el: E) => void;
   [cls: `class:${string}`]: MaybeReactive<boolean>;
 } & StyleNamespace & PropNamespace<E>;
+type XlinkAttrs = {
+  "xlink:href"?: MaybeReactive<string | undefined>;
+  "xlink:title"?: MaybeReactive<string | undefined>;
+  "xlink:show"?: MaybeReactive<"new" | "replace" | "embed" | "other" | "none" | undefined>;
+  "xlink:role"?: MaybeReactive<string | undefined>;
+  "xlink:type"?: MaybeReactive<"simple" | "extended" | "locator" | "arc" | "resource" | "title" | undefined>;
+  "xlink:arcrole"?: MaybeReactive<string | undefined>;
+  "xlink:actuate"?: MaybeReactive<"onLoad" | "onRequest" | "other" | "none" | undefined>;
+};
+type XmlAttrs = {
+  "xml:lang"?: MaybeReactive<string | undefined>;
+  "xml:space"?: MaybeReactive<"default" | "preserve" | undefined>;
+  "xml:base"?: MaybeReactive<string | undefined>;
+};
+type SvgNamespaceAttrs = XlinkAttrs & XmlAttrs;
 type JsxNamespaceKeys = "ref" | `class:${string}` | `style:${string}` | `prop:${string}`;
 type WithJsxNamespaces<T, E extends Element = Element> = Omit<T, JsxNamespaceKeys> & JsxNamespaces<E>;
 type IntrinsicElementOf<T> = T extends {
@@ -434,7 +449,7 @@ declare namespace JSX$1 {
   }
   export type LibraryManagedAttributes<C, P> = ResolveProps<C, P>;
   type RegisteredElements = { [K in keyof CustomElementRegistry]: CustomElementRegistry[K] extends AnyElementCtor ? WithJsxNamespaces<MaybeReactiveProps<ElementProps<CustomElementRegistry[K]>>, InstanceType<CustomElementRegistry[K]>> : never };
-  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K], IntrinsicElementOf<JSX.IntrinsicElements[K]>> } & RegisteredElements;
+  export type IntrinsicElements = { [K in keyof JSX.IntrinsicElements]: WithJsxNamespaces<JSX.IntrinsicElements[K], IntrinsicElementOf<JSX.IntrinsicElements[K]>> & (IntrinsicElementOf<JSX.IntrinsicElements[K]> extends SVGElement ? SvgNamespaceAttrs : {}) } & RegisteredElements;
   export {};
 }
 //#endregion

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { y as Computed } from "../infer-K2Te9gn1.mjs";
+import { y as Computed } from "../infer-DGtBn6Nm.mjs";
 
 //#region src/integrations/react.d.ts
 /**

package/dist/jsx-runtime/index.d.mts

@@ -1,2 +1,2 @@
-import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-K2Te9gn1.mjs";
+import { U as createElement, _ as SlotProps, a as RawProps, b as MaybeReactive, c as ResolveProps, d as ComponentClass, f as ComponentFn, g as JSX, h as Attrs, i as Props, l as Child, m as PropsTarget, n as ElementProps, o as ReactiveProps, p as ComponentInstance, r as MaybeReactiveProps, s as Require, t as ComponentProps, u as Component, v as Fragment } from "../infer-DGtBn6Nm.mjs";
 export { Attrs, Child, Component, ComponentClass, ComponentFn, ComponentInstance, ComponentProps, ElementProps, Fragment, JSX, MaybeReactive, MaybeReactiveProps, Props, PropsTarget, RawProps, ReactiveProps, Require, ResolveProps, SlotProps, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-K2Te9gn1.mjs";
+import { A as SIGNAL, B as signal, C as isReactive, D as COMPUTED, E as resolveProps, F as isComputed, H as untracked, I as isEffect, L as isEffectScope, M as computed, N as effect, O as EFFECT, P as effectScope, R as isSignal, S as Updater, T as resolve, V as trigger, b as MaybeReactive, j as batch, k as EFFECT_SCOPE, w as reactive, x as Signal, y as Computed, z as onCleanup } from "../infer-DGtBn6Nm.mjs";
 export { COMPUTED, Computed, EFFECT, EFFECT_SCOPE, MaybeReactive, SIGNAL, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, resolveProps, signal, trigger, untracked };

package/dist/ui/badge/badge.css

@@ -16,7 +16,7 @@
   letter-spacing: var(--letter-spacing-1);
   padding: calc(var(--space-1) * .5) calc(var(--space-1) * 1.5);
   gap: calc(var(--space-1) * 1.5);
-  border-radius: max(var(--radius-1), var(--radius-full));
+  border-radius: max(var(--radius-1), var(--radius-pill));
 }
 
 .x-badge:where([data-size="2"]) {
@@ -25,7 +25,7 @@
   letter-spacing: var(--letter-spacing-1);
   padding: var(--space-1) var(--space-2);
   gap: calc(var(--space-1) * 1.5);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  border-radius: max(var(--radius-2), var(--radius-pill));
 }
 
 .x-badge:where([data-size="3"]) {
@@ -34,55 +34,55 @@
   letter-spacing: var(--letter-spacing-2);
   padding: var(--space-1) calc(var(--space-2) * 1.25);
   gap: var(--space-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  border-radius: max(var(--radius-2), var(--radius-pill));
 }
 
 .x-badge:where([data-variant="solid"]) {
-  background-color: var(--accent-9);
+  background-color: var(--color-9);
   color: var(--accent-contrast);
 }
 
 .x-badge:where([data-variant="solid"])::selection {
-  background-color: var(--accent-7);
-  color: var(--accent-12);
+  background-color: var(--color-7);
+  color: var(--color-12);
 }
 
 .x-badge:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
+  background-color: var(--color-12);
+  color: var(--color-1);
 }
 
 .x-badge:where([data-variant="solid"]):where([data-high-contrast])::selection {
-  background-color: var(--accent-a11);
-  color: var(--accent-1);
+  background-color: var(--color-a11);
+  color: var(--color-1);
 }
 
 .x-badge:where([data-variant="surface"]) {
   background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-  color: var(--accent-a11);
+  box-shadow: inset 0 0 0 1px var(--color-a6);
+  color: var(--color-a11);
 }
 
 .x-badge:where([data-variant="surface"]):where([data-high-contrast]) {
-  color: var(--accent-12);
+  color: var(--color-12);
 }
 
 .x-badge:where([data-variant="soft"]) {
-  background-color: var(--accent-a3);
-  color: var(--accent-a11);
+  background-color: var(--color-a3);
+  color: var(--color-a11);
 }
 
 .x-badge:where([data-variant="soft"]):where([data-high-contrast]) {
-  color: var(--accent-12);
+  color: var(--color-12);
 }
 
 .x-badge:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-  color: var(--accent-a11);
+  box-shadow: inset 0 0 0 1px var(--color-a8);
+  color: var(--color-a11);
 }
 
 .x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 1px var(--accent-a7),
+  box-shadow: inset 0 0 0 1px var(--color-a7),
       inset 0 0 0 1px var(--gray-a11);
-  color: var(--accent-12);
+  color: var(--color-12);
 }

package/dist/ui/button/button.css

@@ -31,25 +31,25 @@
 .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));
+  border-radius: max(var(--radius-1), var(--radius-pill));
 }
 
 .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));
+  border-radius: max(var(--radius-2), var(--radius-pill));
 }
 
 .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));
+  border-radius: max(var(--radius-3), var(--radius-pill));
 }
 
 .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));
+  border-radius: max(var(--radius-4), var(--radius-pill));
 }
 
 :where(:root) {
@@ -83,13 +83,13 @@
 }
 
 .x-button:where([data-variant="classic"]) {
-  background-color: var(--accent-9);
+  background-color: var(--color-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%);
+    linear-gradient(to bottom, transparent 50%, var(--color-9) 80%);
   box-shadow: var(--base-button-classic-box-shadow-top),
-    inset 0 0 0 1px var(--accent-9),
+    inset 0 0 0 1px var(--color-9),
     var(--base-button-classic-box-shadow-bottom);
   position: relative;
 }
@@ -111,12 +111,12 @@
 }
 
 .x-button:where([data-variant="classic"]):where([data-high-contrast]) {
-  background-color: var(--accent-12);
+  background-color: var(--color-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%);
+      linear-gradient(to bottom, transparent 50%, var(--color-12) 80%);
   box-shadow: var(--base-button-classic-box-shadow-top),
-      inset 0 0 0 1px var(--accent-12),
+      inset 0 0 0 1px var(--color-12),
       var(--base-button-classic-box-shadow-bottom);
 }
 
@@ -128,7 +128,7 @@
 
 @media (pointer: coarse) {
   .x-button:where([data-variant="classic"]):where(:active:not([data-state="open"])) {
-    outline: .5em solid var(--accent-a4);
+    outline: .5em solid var(--color-a4);
     outline-offset: 0;
   }
 }
@@ -140,7 +140,7 @@
 
 @media (hover: hover) {
   .x-button:where([data-variant="classic"]):where(:hover):after {
-    background-color: var(--accent-10);
+    background-color: var(--color-10);
     background-image: linear-gradient(var(--black-a2) -15%,
           transparent,
           var(--white-a3));
@@ -151,7 +151,7 @@
   }
 
   .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]):after {
-    background-color: var(--accent-12);
+    background-color: var(--color-12);
     background-image: linear-gradient(var(--black-a5),
             transparent,
             var(--white-a2));
@@ -159,7 +159,7 @@
 }
 
 .x-button:where([data-variant="classic"]):where([data-state="open"]):after {
-  background-color: var(--accent-10);
+  background-color: var(--color-10);
   background-image: linear-gradient(var(--black-a2) -15%,
         transparent,
         var(--white-a3));
@@ -170,20 +170,20 @@
 }
 
 .x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]):after {
-  background-color: var(--accent-12);
+  background-color: var(--color-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-color: var(--color-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 0 0 1px var(--color-9),
       inset 0 3px 2px var(--gray-a3),
       inset 0 0 0 1px var(--white-a7),
       inset 0 -2px 1px var(--white-a5);
@@ -198,10 +198,10 @@
 }
 
 .x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]) {
-  background-color: var(--accent-12);
+  background-color: var(--color-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),
+        inset 0 0 0 1px var(--color-12),
         var(--base-button__classic-active__shadow-bottom-layer);
 }
 
@@ -245,28 +245,28 @@
 }
 
 .x-button:where([data-variant="solid"]) {
-  background-color: var(--accent-9);
+  background-color: var(--color-9);
   color: var(--accent-contrast);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="solid"]):where(:hover) {
-    background-color: var(--accent-10);
+    background-color: var(--color-10);
   }
 }
 
 .x-button:where([data-variant="solid"]):where([data-state="open"]) {
-  background-color: var(--accent-10);
+  background-color: var(--color-10);
 }
 
 .x-button:where([data-variant="solid"]):where(:active:not([data-state="open"])) {
-  background-color: var(--accent-10);
+  background-color: var(--color-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: .5em solid var(--color-a4);
     outline-offset: 0;
   }
 }
@@ -277,24 +277,24 @@
 }
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]) {
-  background-color: var(--accent-12);
+  background-color: var(--color-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);
+    background-color: var(--color-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);
+  background-color: var(--color-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);
+  background-color: var(--color-12);
   filter: var(--base-button-solid-high-contrast-active-filter);
 }
 
@@ -306,11 +306,11 @@
 }
 
 .x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]) {
-  color: var(--accent-a11);
+  color: var(--color-a11);
 }
 
 .x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-high-contrast]) {
-  color: var(--accent-12);
+  color: var(--color-12);
 }
 
 .x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
@@ -319,26 +319,26 @@
 }
 
 .x-button:where([data-variant="soft"]) {
-  background-color: var(--accent-a3);
+  background-color: var(--color-a3);
 }
 
 .x-button:where([data-variant="soft"]):where(:focus-visible) {
-  outline: 2px solid var(--accent-8);
+  outline: 2px solid var(--color-8);
   outline-offset: -1px;
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="soft"]):where(:hover) {
-    background-color: var(--accent-a4);
+    background-color: var(--color-a4);
   }
 }
 
 .x-button:where([data-variant="soft"]):where([data-state="open"]) {
-  background-color: var(--accent-a4);
+  background-color: var(--color-a4);
 }
 
 .x-button:where([data-variant="soft"]):where(:active:not([data-state="open"])) {
-  background-color: var(--accent-a5);
+  background-color: var(--color-a5);
 }
 
 .x-button:where([data-variant="soft"]):where([data-disabled]) {
@@ -348,7 +348,7 @@
 
 @media (hover: hover) {
   .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:hover) {
-    background-color: var(--accent-a3);
+    background-color: var(--color-a3);
   }
 }
 
@@ -358,11 +358,11 @@
 }
 
 .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-state="open"]) {
-  background-color: var(--accent-a3);
+  background-color: var(--color-a3);
 }
 
 .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:active:not([data-state="open"])) {
-  background-color: var(--accent-a4);
+  background-color: var(--color-a4);
 }
 
 .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
@@ -371,22 +371,22 @@
 }
 
 .x-button:where([data-variant="outline"]) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-  color: var(--accent-a11);
+  box-shadow: inset 0 0 0 1px var(--color-a8);
+  color: var(--color-a11);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="outline"]):where(:hover) {
-    background-color: var(--accent-a2);
+    background-color: var(--color-a2);
   }
 }
 
 .x-button:where([data-variant="outline"]):where([data-state="open"]) {
-  background-color: var(--accent-a2);
+  background-color: var(--color-a2);
 }
 
 .x-button:where([data-variant="outline"]):where(:active:not([data-state="open"])) {
-  background-color: var(--accent-a3);
+  background-color: var(--color-a3);
 }
 
 .x-button:where([data-variant="outline"]):where(:focus-visible) {
@@ -395,9 +395,9 @@
 }
 
 .x-button:where([data-variant="outline"]):where([data-high-contrast]) {
-  box-shadow: inset 0 0 0 1px var(--accent-a7),
+  box-shadow: inset 0 0 0 1px var(--color-a7),
       inset 0 0 0 1px var(--gray-a11);
-  color: var(--accent-12);
+  color: var(--color-12);
 }
 
 .x-button:where([data-variant="outline"]):where([data-disabled]) {
@@ -408,23 +408,23 @@
 
 .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);
+  box-shadow: inset 0 0 0 1px var(--color-a7);
+  color: var(--color-a11);
 }
 
 @media (hover: hover) {
   .x-button:where([data-variant="surface"]):where(:hover) {
-    box-shadow: inset 0 0 0 1px var(--accent-a8);
+    box-shadow: inset 0 0 0 1px var(--color-a8);
   }
 }
 
 .x-button:where([data-variant="surface"]):where([data-state="open"]) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  box-shadow: inset 0 0 0 1px var(--color-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);
+  background-color: var(--color-a3);
+  box-shadow: inset 0 0 0 1px var(--color-a8);
 }
 
 .x-button:where([data-variant="surface"]):where(:focus-visible) {
@@ -433,7 +433,7 @@
 }
 
 .x-button:where([data-variant="surface"]):where([data-high-contrast]) {
-  color: var(--accent-12);
+  color: var(--color-12);
 }
 
 .x-button:where([data-variant="surface"]):where([data-disabled]) {

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

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --amber-1: #fefdfb;
-  --amber-2: #fefbe9;
-  --amber-3: #fff7c2;
-  --amber-4: #ffee9c;
-  --amber-5: #fbe577;
-  --amber-6: #f3d673;
-  --amber-7: #e9c162;
-  --amber-8: #e2a336;
-  --amber-9: #ffc53d;
-  --amber-10: #ffba18;
-  --amber-11: #ab6400;
-  --amber-12: #4f3422;
-  --amber-a1: #c0800004;
-  --amber-a2: #f4d10016;
-  --amber-a3: #ffde003d;
-  --amber-a4: #ffd40063;
-  --amber-a5: #f8cf0088;
-  --amber-a6: #eab5008c;
-  --amber-a7: #dc9b009d;
-  --amber-a8: #da8a00c9;
-  --amber-a9: #ffb300c2;
-  --amber-a10: #ffb300e7;
-  --amber-a11: #ab6400;
-  --amber-a12: #341500dd;
-  --amber-surface: #fefae4cc;
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --amber-1: color(display-p3 .995 .992 .985);
-      --amber-2: color(display-p3 .994 .986 .921);
-      --amber-3: color(display-p3 .994 .969 .782);
-      --amber-4: color(display-p3 .989 .937 .65);
-      --amber-5: color(display-p3 .97 .902 .527);
-      --amber-6: color(display-p3 .936 .844 .506);
-      --amber-7: color(display-p3 .89 .762 .443);
-      --amber-8: color(display-p3 .85 .65 .3);
-      --amber-9: color(display-p3 1 .77 .26);
-      --amber-10: color(display-p3 .959 .741 .274);
-      --amber-11: color(display-p3 .64 .4 0);
-      --amber-12: color(display-p3 .294 .208 .145);
-      --amber-a1: color(display-p3 .757 .514 .024 / .016);
-      --amber-a2: color(display-p3 .902 .804 .008 / .079);
-      --amber-a3: color(display-p3 .965 .859 .004 / .22);
-      --amber-a4: color(display-p3 .969 .82 .004 / .35);
-      --amber-a5: color(display-p3 .933 .796 .004 / .475);
-      --amber-a6: color(display-p3 .875 .682 .004 / .495);
-      --amber-a7: color(display-p3 .804 .573 0 / .557);
-      --amber-a8: color(display-p3 .788 .502 0 / .699);
-      --amber-a9: color(display-p3 1 .686 0 / .742);
-      --amber-a10: color(display-p3 .945 .643 0 / .726);
-      --amber-a11: color(display-p3 .64 .4 0);
-      --amber-a12: color(display-p3 .294 .208 .145);
-      --amber-surface: color(display-p3 .9922 .9843 .902 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --amber-1: #16120c;
-  --amber-2: #1d180f;
-  --amber-3: #302008;
-  --amber-4: #3f2700;
-  --amber-5: #4d3000;
-  --amber-6: #5c3d05;
-  --amber-7: #714f19;
-  --amber-8: #8f6424;
-  --amber-9: #ffc53d;
-  --amber-10: #ffd60a;
-  --amber-11: #ffca16;
-  --amber-12: #ffe7b3;
-  --amber-a1: #e63c0006;
-  --amber-a2: #fd9b000d;
-  --amber-a3: #fa820022;
-  --amber-a4: #fc820032;
-  --amber-a5: #fd8b0041;
-  --amber-a6: #fd9b0051;
-  --amber-a7: #ffab2567;
-  --amber-a8: #ffae3587;
-  --amber-a9: #ffc53d;
-  --amber-a10: #ffd60a;
-  --amber-a11: #ffca16;
-  --amber-a12: #ffe7b3;
-  --amber-surface: #271f1380;
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --amber-1: color(display-p3 .082 .07 .05);
-      --amber-2: color(display-p3 .111 .094 .064);
-      --amber-3: color(display-p3 .178 .128 .049);
-      --amber-4: color(display-p3 .239 .156 0);
-      --amber-5: color(display-p3 .29 .193 0);
-      --amber-6: color(display-p3 .344 .245 .076);
-      --amber-7: color(display-p3 .422 .314 .141);
-      --amber-8: color(display-p3 .535 .399 .189);
-      --amber-9: color(display-p3 1 .77 .26);
-      --amber-10: color(display-p3 1 .87 .15);
-      --amber-11: color(display-p3 1 .8 .29);
-      --amber-12: color(display-p3 .984 .909 .726);
-      --amber-a1: color(display-p3 .992 .298 0 / .017);
-      --amber-a2: color(display-p3 .988 .651 0 / .047);
-      --amber-a3: color(display-p3 1 .6 0 / .118);
-      --amber-a4: color(display-p3 1 .557 0 / .185);
-      --amber-a5: color(display-p3 1 .592 0 / .24);
-      --amber-a6: color(display-p3 1 .659 .094 / .299);
-      --amber-a7: color(display-p3 1 .714 .263 / .383);
-      --amber-a8: color(display-p3 .996 .729 .306 / .5);
-      --amber-a9: color(display-p3 1 .769 .259);
-      --amber-a10: color(display-p3 1 .871 .149);
-      --amber-a11: color(display-p3 1 .8 .29);
-      --amber-a12: color(display-p3 .984 .909 .726);
-      --amber-surface: color(display-p3 .1412 .1176 .0784 / .5);
-    }
-  }
-}
-
-:root {
-  --amber-contrast: #21201c;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
-  }
+[data-color="amber"] {
+  --color-1: var(--amber-1);
+  --color-2: var(--amber-2);
+  --color-3: var(--amber-3);
+  --color-4: var(--amber-4);
+  --color-5: var(--amber-5);
+  --color-6: var(--amber-6);
+  --color-7: var(--amber-7);
+  --color-8: var(--amber-8);
+  --color-9: var(--amber-9);
+  --color-10: var(--amber-10);
+  --color-11: var(--amber-11);
+  --color-12: var(--amber-12);
+  --color-a1: var(--amber-a1);
+  --color-a2: var(--amber-a2);
+  --color-a3: var(--amber-a3);
+  --color-a4: var(--amber-a4);
+  --color-a5: var(--amber-a5);
+  --color-a6: var(--amber-a6);
+  --color-a7: var(--amber-a7);
+  --color-a8: var(--amber-a8);
+  --color-a9: var(--amber-a9);
+  --color-a10: var(--amber-a10);
+  --color-a11: var(--amber-a11);
+  --color-a12: var(--amber-a12);
+  --accent-contrast: var(--amber-contrast);
+  --accent-surface: var(--amber-surface);
+  --accent-indicator: var(--amber-indicator);
+  --accent-track: var(--amber-track);
 }