@sewadah/selaras 0.1.1 → 0.3.0

package/dist/runtime/theme/textarea.d.ts

@@ -20,27 +20,13 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     hasLeadingIcon: {
         true: {
@@ -90,27 +76,13 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     hasLeadingIcon: {
         true: {
@@ -160,27 +132,13 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     hasLeadingIcon: {
         true: {

package/dist/runtime/theme/textarea.js

@@ -4,13 +4,13 @@ export const textareaTheme = tv({
     root: "relative w-full",
     // not-focus: on the hover ring - see input.ts's own base slot for why
     // (same fix, same reasoning).
-    base: "w-full resize-y rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] px-3 py-2 text-sm text-[var(--ui-text)] ring-1 ring-inset ring-[var(--ui-border)] placeholder:text-[var(--ui-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 disabled:opacity-50 disabled:pointer-events-none disabled:resize-none",
+    base: "w-full resize-y rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] px-3 py-2 text-sm text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none disabled:resize-none",
     // Anchored to the top corner (`top-2.5`), not vertically centered the
     // way Input's own icons are - once content wraps past one line,
     // centering against the whole (variable) box height would drift the
     // icon away from the first line of text it's meant to sit beside.
-    leadingIcon: "absolute start-3 top-2.5 shrink-0 text-[var(--ui-text-muted)]",
-    trailingIcon: "absolute end-3 top-2.5 shrink-0 text-[var(--ui-text-muted)]",
+    leadingIcon: "absolute start-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    trailingIcon: "absolute end-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     clear: "absolute end-1 top-1 shrink-0 rounded-full"
   },
   variants: {
@@ -19,16 +19,16 @@ export const textareaTheme = tv({
       md: { base: "text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5", clear: "size-9" },
       lg: { base: "text-base", leadingIcon: "size-5", trailingIcon: "size-5", clear: "size-10" }
     },
-    // Focus-ring color only - the resting ring stays --ui-border regardless
+    // Focus-ring color only - the resting ring stays --selaras-resolved-border-default regardless
     // of `color`, matching Input's own scope (see input.ts).
     color: {
-      primary: { base: "focus:ring-[var(--ui-primary)]" },
-      neutral: { base: "focus:ring-[var(--ui-bg-inverted)]" },
-      secondary: { base: "focus:ring-[var(--ui-secondary)]" },
-      success: { base: "focus:ring-[var(--ui-success)]" },
-      danger: { base: "focus:ring-[var(--ui-danger)]" },
-      info: { base: "focus:ring-[var(--ui-info)]" },
-      warning: { base: "focus:ring-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     hasLeadingIcon: {
       true: { base: "ps-9" }
@@ -46,7 +46,7 @@ export const textareaTheme = tv({
     // override win over color's - see input.ts for why declaration order
     // (not runtime call order) is what decides this.
     invalid: {
-      true: { base: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus:ring-[var(--ui-danger)]" }
+      true: { base: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/toast.d.ts

@@ -1,21 +1,9 @@
 export declare const toastTheme: import("tailwind-variants").TVReturnType<{
     color: {
-        success: {
-            icon: string;
-            root: string;
-        };
-        danger: {
-            icon: string;
-            root: string;
-        };
-        warning: {
-            icon: string;
-            root: string;
-        };
-        info: {
-            icon: string;
-            root: string;
-        };
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
     };
 }, {
     viewport: string;
@@ -26,22 +14,10 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
     close: string;
 }, undefined, {
     color: {
-        success: {
-            icon: string;
-            root: string;
-        };
-        danger: {
-            icon: string;
-            root: string;
-        };
-        warning: {
-            icon: string;
-            root: string;
-        };
-        info: {
-            icon: string;
-            root: string;
-        };
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
     };
 }, {
     viewport: string;
@@ -52,22 +28,10 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
     close: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     color: {
-        success: {
-            icon: string;
-            root: string;
-        };
-        danger: {
-            icon: string;
-            root: string;
-        };
-        warning: {
-            icon: string;
-            root: string;
-        };
-        info: {
-            icon: string;
-            root: string;
-        };
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
     };
 }, {
     viewport: string;

package/dist/runtime/theme/toast.js

@@ -1,14 +1,14 @@
 import { tv } from "tailwind-variants";
 export const toastTheme = tv({
   slots: {
-    viewport: "fixed bottom-0 end-0 z-[var(--ui-z-toast)] flex w-full max-w-sm flex-col gap-2 p-4 outline-none",
-    root: "relative flex items-start gap-3 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-4 pe-10 shadow-[var(--ui-shadow-lg)] ring-1 ring-[var(--ui-border)] data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-2 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-end-full",
-    title: "text-sm font-medium text-[var(--ui-text)]",
-    description: "mt-1 text-sm text-[var(--ui-text-muted)]",
+    viewport: "fixed bottom-0 end-0 z-[var(--selaras-resolved-z-toast)] flex w-full max-w-sm flex-col gap-2 p-4 outline-none",
+    root: "relative flex items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-4 pe-10 shadow-[var(--selaras-resolved-shadow-lg)] ring-1 ring-[var(--selaras-resolved-border-default)] border-s-2 border-s-[var(--_selaras-color-fill,var(--selaras-resolved-border-default))] data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-2 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-end-full",
+    title: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    description: "mt-1 text-sm text-[var(--selaras-resolved-text-muted)]",
     // Base (no color set) is a plain neutral glyph - only shown at all when
     // `icon` is set without a `color`, since a colorless toast otherwise
     // has nothing to render here.
-    icon: "size-5 shrink-0 text-[var(--ui-text-muted)]",
+    icon: "size-5 shrink-0 text-[var(--_selaras-color-fill,var(--selaras-resolved-text-muted))]",
     // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring and
     // touch target now come from Button's own theme; rounded-full overrides
     // its default rounded-md just for this dismiss-glyph family (close/clear).
@@ -22,10 +22,10 @@ export const toastTheme = tv({
     // elsewhere (Dropdown's own `destructive` only recolors text/icon + a
     // soft hover tint, never repaints the whole menu).
     color: {
-      success: { icon: "text-[var(--ui-success)]", root: "border-s-2 border-s-[var(--ui-success)]" },
-      danger: { icon: "text-[var(--ui-danger)]", root: "border-s-2 border-s-[var(--ui-danger)]" },
-      warning: { icon: "text-[var(--ui-warning)]", root: "border-s-2 border-s-[var(--ui-warning)]" },
-      info: { icon: "text-[var(--ui-info)]", root: "border-s-2 border-s-[var(--ui-info)]" }
+      success: "",
+      danger: "",
+      warning: "",
+      info: ""
     }
   }
 });

package/dist/runtime/theme/toggle-group.js

@@ -7,7 +7,10 @@ export const toggleGroupTheme = tv({
     // focus z-index bump keeps a hovered/focused item's own edge drawn
     // on top of its neighbor's instead of being clipped by it.
     root: "inline-flex [&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10",
-    item: "inline-flex items-center justify-center gap-1.5 font-medium rounded-[var(--ui-radius-md)] transition-colors ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-primary)]",
+    // Resting segments are neutral controls; the selected role begins when
+    // Reka exposes data-state="on" below. This keeps an unpressed group from
+    // looking preselected simply because its default role is primary.
+    item: "inline-flex items-center justify-center gap-1.5 font-medium rounded-[var(--selaras-resolved-radius-md)] transition-colors ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] text-[var(--selaras-resolved-text-muted)] hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)] disabled:opacity-50 disabled:pointer-events-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)] data-[state=on]:bg-[var(--_selaras-color-subtle)] data-[state=on]:text-[var(--_selaras-color-text)] data-[state=on]:hover:bg-[var(--_selaras-color-subtle-hover)]",
     icon: "shrink-0"
   },
   variants: {
@@ -30,16 +33,7 @@ export const toggleGroupTheme = tv({
       warning: ""
     }
   },
-  compoundVariants: [
-    // Pressed (data-[state=on]) - matches Toggle's own per-color treatment.
-    { color: "primary", class: { item: "data-[state=on]:bg-[var(--ui-primary-soft)] data-[state=on]:text-[var(--ui-primary)] data-[state=on]:hover:bg-[var(--ui-primary-soft)]/70" } },
-    { color: "neutral", class: { item: "data-[state=on]:bg-[var(--ui-neutral-soft)] data-[state=on]:text-[var(--ui-text)] data-[state=on]:hover:bg-[var(--ui-neutral-soft)]/70" } },
-    { color: "secondary", class: { item: "data-[state=on]:bg-[var(--ui-secondary-soft)] data-[state=on]:text-[var(--ui-secondary)] data-[state=on]:hover:bg-[var(--ui-secondary-soft)]/70" } },
-    { color: "success", class: { item: "data-[state=on]:bg-[var(--ui-success-soft)] data-[state=on]:text-[var(--ui-success)] data-[state=on]:hover:bg-[var(--ui-success-soft)]/70" } },
-    { color: "danger", class: { item: "data-[state=on]:bg-[var(--ui-danger-soft)] data-[state=on]:text-[var(--ui-danger)] data-[state=on]:hover:bg-[var(--ui-danger-soft)]/70" } },
-    { color: "info", class: { item: "data-[state=on]:bg-[var(--ui-info-soft)] data-[state=on]:text-[var(--ui-info)] data-[state=on]:hover:bg-[var(--ui-info-soft)]/70" } },
-    { color: "warning", class: { item: "data-[state=on]:bg-[var(--ui-warning-soft)] data-[state=on]:text-[var(--ui-warning)] data-[state=on]:hover:bg-[var(--ui-warning-soft)]/70" } }
-  ],
+  compoundVariants: [],
   defaultVariants: {
     orientation: "horizontal",
     size: "md",

package/dist/runtime/theme/toggle.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const toggleTheme = tv({
   slots: {
-    base: "inline-flex items-center justify-center gap-1.5 font-medium rounded-[var(--ui-radius-md)] transition-colors text-[var(--ui-text-muted)] hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
+    base: "inline-flex items-center justify-center gap-1.5 font-medium rounded-[var(--selaras-resolved-radius-md)] transition-colors text-[var(--selaras-resolved-text-muted)] hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)] disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)] data-[state=on]:bg-[var(--_selaras-color-subtle)] data-[state=on]:text-[var(--_selaras-color-text)] data-[state=on]:hover:bg-[var(--_selaras-color-subtle-hover)]",
     icon: "shrink-0"
   },
   variants: {
@@ -29,17 +29,7 @@ export const toggleTheme = tv({
     // Button's own `square` compound variants.
     { size: "sm", square: true, class: { base: "w-8 px-0" } },
     { size: "md", square: true, class: { base: "w-10 px-0" } },
-    { size: "lg", square: true, class: { base: "w-11 px-0" } },
-    // Pressed (data-[state=on]) - the same soft-variant look Button/Alert/
-    // Badge already use for this color at rest, so a pressed Toggle reads
-    // as "this color's own settled state" rather than a one-off treatment.
-    { color: "primary", class: { base: "data-[state=on]:bg-[var(--ui-primary-soft)] data-[state=on]:text-[var(--ui-primary)] data-[state=on]:hover:bg-[var(--ui-primary-soft)]/70" } },
-    { color: "neutral", class: { base: "data-[state=on]:bg-[var(--ui-neutral-soft)] data-[state=on]:text-[var(--ui-text)] data-[state=on]:hover:bg-[var(--ui-neutral-soft)]/70" } },
-    { color: "secondary", class: { base: "data-[state=on]:bg-[var(--ui-secondary-soft)] data-[state=on]:text-[var(--ui-secondary)] data-[state=on]:hover:bg-[var(--ui-secondary-soft)]/70" } },
-    { color: "success", class: { base: "data-[state=on]:bg-[var(--ui-success-soft)] data-[state=on]:text-[var(--ui-success)] data-[state=on]:hover:bg-[var(--ui-success-soft)]/70" } },
-    { color: "danger", class: { base: "data-[state=on]:bg-[var(--ui-danger-soft)] data-[state=on]:text-[var(--ui-danger)] data-[state=on]:hover:bg-[var(--ui-danger-soft)]/70" } },
-    { color: "info", class: { base: "data-[state=on]:bg-[var(--ui-info-soft)] data-[state=on]:text-[var(--ui-info)] data-[state=on]:hover:bg-[var(--ui-info-soft)]/70" } },
-    { color: "warning", class: { base: "data-[state=on]:bg-[var(--ui-warning-soft)] data-[state=on]:text-[var(--ui-warning)] data-[state=on]:hover:bg-[var(--ui-warning-soft)]/70" } }
+    { size: "lg", square: true, class: { base: "w-11 px-0" } }
   ],
   defaultVariants: {
     color: "primary",

package/dist/runtime/theme/tooltip.d.ts

@@ -2,18 +2,18 @@ export declare const tooltipTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             content?: import("tailwind-variants").ClassValue;
-            kbd?: import("tailwind-variants").ClassValue;
             arrow?: import("tailwind-variants").ClassValue;
             kbds?: import("tailwind-variants").ClassValue;
+            kbd?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             content?: import("tailwind-variants").ClassValue;
-            kbd?: import("tailwind-variants").ClassValue;
             arrow?: import("tailwind-variants").ClassValue;
             kbds?: import("tailwind-variants").ClassValue;
+            kbd?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -25,9 +25,9 @@ export declare const tooltipTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             content?: import("tailwind-variants").ClassValue;
-            kbd?: import("tailwind-variants").ClassValue;
             arrow?: import("tailwind-variants").ClassValue;
             kbds?: import("tailwind-variants").ClassValue;
+            kbd?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/runtime/theme/tooltip.js

@@ -1,14 +1,14 @@
 import { tv } from "tailwind-variants";
 export const tooltipTheme = tv({
   slots: {
-    content: "z-[var(--ui-z-tooltip)] flex items-center gap-2 rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg-inverted)] text-[var(--ui-text-inverted)] px-2.5 py-1.5 text-xs shadow-[var(--ui-shadow-md)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95",
-    arrow: "fill-[var(--ui-bg-inverted)]",
+    content: "z-[var(--selaras-resolved-z-tooltip)] flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--selaras-resolved-surface-inverted)] text-[var(--selaras-resolved-text-inverted)] px-2.5 py-1.5 text-xs shadow-[var(--selaras-resolved-shadow-md)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95",
+    arrow: "fill-[var(--selaras-resolved-surface-inverted)]",
     kbds: "ms-auto flex items-center gap-0.5",
     // bg-current/15 (not a fixed light/dark token) picks up whatever
     // text-inverted resolves to at this spot, so the badge reads as a
     // subtle overlay on the tooltip's own inverted surface in both themes -
     // the same currentColor-overlay technique Chip's own remove button
     // already uses against its (also currentColor-driven) surface.
-    kbd: "rounded-[var(--ui-radius-sm)] bg-current/15 px-1 py-0.5 text-[10px] font-medium"
+    kbd: "rounded-[var(--selaras-resolved-radius-sm)] bg-current/15 px-1 py-0.5 text-[10px] font-medium"
   }
 });

package/dist/runtime/theme/tree.d.ts

@@ -1,4 +1,13 @@
 export declare const treeTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             item: string;
@@ -25,6 +34,15 @@ export declare const treeTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     label: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             item: string;
@@ -51,6 +69,15 @@ export declare const treeTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     label: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             item: string;

package/dist/runtime/theme/tree.js

@@ -8,18 +8,27 @@ export const treeTheme = tv({
     // other component here keys off Reka's own data-* state, rather than
     // a JS-computed variant like FileTree.vue's own hand-rolled one (it
     // has no Reka data-attribute of its own to key off).
-    item: "flex w-full items-center gap-1.5 rounded-[var(--ui-radius-sm)] px-1.5 py-1 text-[var(--ui-text)] outline-none cursor-pointer select-none data-[selected]:bg-[var(--ui-primary-soft)] data-[selected]:text-[var(--ui-primary)] not-data-[selected]:hover:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-primary)]",
+    item: "flex w-full items-center gap-1.5 rounded-[var(--selaras-resolved-radius-sm)] px-1.5 py-1 text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none data-[selected]:bg-[var(--_selaras-color-subtle)] data-[selected]:text-[var(--_selaras-color-text)] not-data-[selected]:hover:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)]",
     // Same rotate-on-expand convention as Accordion/FileTree's own
     // chevron. A leaf row (no children) renders `spacer` instead, sized
     // identically, so labels still align into one column regardless of
     // depth.
-    toggle: "flex size-4 shrink-0 items-center justify-center text-[var(--ui-text-muted)] transition-transform rtl:rotate-180 data-[expanded]:rotate-90 rtl:data-[expanded]:rotate-90",
+    toggle: "flex size-4 shrink-0 items-center justify-center text-[var(--selaras-resolved-text-muted)] transition-transform rtl:rotate-180 data-[expanded]:rotate-90 rtl:data-[expanded]:rotate-90",
     spacer: "size-4 shrink-0",
     checkbox: "shrink-0 pointer-events-none",
-    icon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
+    icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     label: "truncate"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     size: {
       sm: { item: "text-xs", icon: "size-3.5", toggle: "size-3.5", spacer: "size-3.5" },
       md: { item: "text-sm" },
@@ -27,6 +36,7 @@ export const treeTheme = tv({
     }
   },
   defaultVariants: {
+    color: "primary",
     size: "md"
   }
 });

package/dist/runtime/theme-api.d.ts

@@ -0,0 +1,15 @@
+import type { ColorModePair, ColorRecipeInput } from './utils/color-registry.js';
+import { dtcgColorToCss } from './utils/dtcg-colors.js';
+import { defineColorFromSeed } from './utils/seed-colors.js';
+export type { ThemeComponentRegistry, ThemeConfiguration, ThemeDefaults, ThemeUiOverrides } from './theme-config.js';
+export type { BuiltinColorName, ColorModePair, ColorRecipe, ColorRecipeInput, ColorRole, RuntimeColorOverrides, RuntimeThemeMode, RuntimeTokenOverrides, } from './utils/color-registry.js';
+export type { DtcgColorComponent, DtcgColorConversionOptions, DtcgColorSpace, DtcgResolvedColor } from './utils/dtcg-colors.js';
+export type { FunctionalTokenOverrides, GeometryTokenOverrides, ThemeTokenOverrides } from './utils/functional-tokens.js';
+export type { SeedColorOptions, SeedColorSurfaces } from './utils/seed-colors.js';
+export { dtcgColorToCss };
+export { defineColorFromSeed };
+/**
+ * Validates a build-time semantic color while preserving its literal types.
+ * It derives no colors; each mode must provide the six required role leaves.
+ */
+export declare function defineColor<const T extends ColorModePair<ColorRecipeInput>>(color: T): T;

package/dist/runtime/theme-api.js

@@ -0,0 +1,12 @@
+import { normalizeColorRecipe } from "./utils/color-registry.js";
+import { dtcgColorToCss } from "./utils/dtcg-colors.js";
+import { defineColorFromSeed } from "./utils/seed-colors.js";
+export { dtcgColorToCss };
+export { defineColorFromSeed };
+export function defineColor(color) {
+  if (!color || typeof color !== "object" || !color.light || !color.dark)
+    throw new Error("defineColor requires both light and dark semantic color recipes.");
+  normalizeColorRecipe(color.light);
+  normalizeColorRecipe(color.dark);
+  return color;
+}