@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -1,33 +1,12 @@
 export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
     color: {
-        primary: {
-            box: string;
-            indicator: string;
-        };
-        neutral: {
-            box: string;
-            indicator: string;
-        };
-        secondary: {
-            box: string;
-            indicator: string;
-        };
-        success: {
-            box: string;
-            indicator: string;
-        };
-        danger: {
-            box: string;
-            indicator: string;
-        };
-        info: {
-            box: string;
-            indicator: string;
-        };
-        warning: {
-            box: string;
-            indicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     size: {
         sm: {
@@ -72,34 +51,13 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
     labelGroup: string;
 }, undefined, {
     color: {
-        primary: {
-            box: string;
-            indicator: string;
-        };
-        neutral: {
-            box: string;
-            indicator: string;
-        };
-        secondary: {
-            box: string;
-            indicator: string;
-        };
-        success: {
-            box: string;
-            indicator: string;
-        };
-        danger: {
-            box: string;
-            indicator: string;
-        };
-        info: {
-            box: string;
-            indicator: string;
-        };
-        warning: {
-            box: string;
-            indicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     size: {
         sm: {
@@ -144,34 +102,13 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
     labelGroup: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     color: {
-        primary: {
-            box: string;
-            indicator: string;
-        };
-        neutral: {
-            box: string;
-            indicator: string;
-        };
-        secondary: {
-            box: string;
-            indicator: string;
-        };
-        success: {
-            box: string;
-            indicator: string;
-        };
-        danger: {
-            box: string;
-            indicator: string;
-        };
-        info: {
-            box: string;
-            indicator: string;
-        };
-        warning: {
-            box: string;
-            indicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     size: {
         sm: {

package/dist/runtime/theme/checkbox.js

@@ -16,26 +16,26 @@ export const checkboxTheme = tv({
     // element's own isolated stacking context its own background paints
     // first and the negative-z halo paints after it, same as the check
     // icon itself. Only the unchecked resting background was dropped
-    // (transparent instead of --ui-bg), the same reason radio's item is
+    // (transparent instead of --selaras-resolved-surface-default), the same reason radio's item is
     // hollow - an opaque fill there would block the halo from showing as
     // a full disc instead of a ring cut off by the box's own edge.
-    box: "relative isolate flex shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] ring-[1.5px] ring-inset ring-[var(--ui-border)] transition-colors before:absolute before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--ui-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)]",
-    indicator: "flex items-center justify-center",
+    box: "relative isolate flex shrink-0 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] ring-[1.5px] ring-inset ring-[var(--selaras-resolved-border-default)] transition-colors before:absolute before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--selaras-resolved-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)] data-[state=checked]:bg-[var(--_selaras-color-fill)] data-[state=checked]:ring-[var(--_selaras-color-fill)] data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)] data-[state=indeterminate]:bg-[var(--_selaras-color-fill)] data-[state=indeterminate]:ring-[var(--_selaras-color-fill)] data-[state=indeterminate]:before:bg-[var(--_selaras-color-fill-hover)]",
+    indicator: "flex items-center justify-center text-[var(--_selaras-color-on-fill)]",
     // A hand-drawn stroke path (not an Icon/icon-registry glyph, unlike
     // every other icon in this library) animated via stroke-dasharray/
     // stroke-dashoffset - the classic "self-drawing" checkmark technique,
     // which needs a real path to control, not an arbitrary swappable
     // Iconify icon. This is a deliberate, one-off exception to the
     // icon-registry pattern documented in use-icons.ts: this glyph isn't
-    // overridable via app.config.icons, only restylable (stroke width/
+    // overridable via app.config.selaras.icons, only restylable (stroke width/
     // color/duration) via these two :ui slots. dasharray/dashoffset are
     // each set to the exact measured length of their own path
     // (path.getTotalLength(), not a guess) so the "draw" finishes exactly
     // at the stroke's own end with no visible overshoot or gap.
     checkIcon: "[stroke-dasharray:20px] [stroke-dashoffset:20px] transition-[stroke-dashoffset] duration-200 data-[state=checked]:[stroke-dashoffset:0]",
     indeterminateIcon: "[stroke-dasharray:14px] [stroke-dashoffset:14px] transition-[stroke-dashoffset] duration-200 data-[state=indeterminate]:[stroke-dashoffset:0]",
-    label: "select-none text-sm text-[var(--ui-text)]",
-    description: "block select-none text-xs text-[var(--ui-text-muted)]",
+    label: "select-none text-sm text-[var(--selaras-resolved-text-default)]",
+    description: "block select-none text-xs text-[var(--selaras-resolved-text-muted)]",
     // Only rendered when there's a description (wrapping the label and
     // description together so they stack under one another) - same font-
     // baseline correction as RadioGroup's own labelGroup slot (see its
@@ -51,34 +51,13 @@ export const checkboxTheme = tv({
     // pairing Button's own `solid` variant already uses. Unchecked always
     // stays the same neutral ring regardless of `color`.
     color: {
-      primary: {
-        box: "data-[state=checked]:bg-[var(--ui-primary)] data-[state=checked]:ring-[var(--ui-primary)] data-[state=checked]:before:bg-[var(--ui-primary)] data-[state=indeterminate]:bg-[var(--ui-primary)] data-[state=indeterminate]:ring-[var(--ui-primary)] data-[state=indeterminate]:before:bg-[var(--ui-primary)]",
-        indicator: "text-[var(--ui-primary-foreground)]"
-      },
-      neutral: {
-        box: "data-[state=checked]:bg-[var(--ui-bg-inverted)] data-[state=checked]:ring-[var(--ui-bg-inverted)] data-[state=checked]:before:bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:ring-[var(--ui-bg-inverted)] data-[state=indeterminate]:before:bg-[var(--ui-bg-inverted)]",
-        indicator: "text-[var(--ui-text-inverted)]"
-      },
-      secondary: {
-        box: "data-[state=checked]:bg-[var(--ui-secondary)] data-[state=checked]:ring-[var(--ui-secondary)] data-[state=checked]:before:bg-[var(--ui-secondary)] data-[state=indeterminate]:bg-[var(--ui-secondary)] data-[state=indeterminate]:ring-[var(--ui-secondary)] data-[state=indeterminate]:before:bg-[var(--ui-secondary)]",
-        indicator: "text-[var(--ui-secondary-foreground)]"
-      },
-      success: {
-        box: "data-[state=checked]:bg-[var(--ui-success)] data-[state=checked]:ring-[var(--ui-success)] data-[state=checked]:before:bg-[var(--ui-success)] data-[state=indeterminate]:bg-[var(--ui-success)] data-[state=indeterminate]:ring-[var(--ui-success)] data-[state=indeterminate]:before:bg-[var(--ui-success)]",
-        indicator: "text-[var(--ui-success-foreground)]"
-      },
-      danger: {
-        box: "data-[state=checked]:bg-[var(--ui-danger)] data-[state=checked]:ring-[var(--ui-danger)] data-[state=checked]:before:bg-[var(--ui-danger)] data-[state=indeterminate]:bg-[var(--ui-danger)] data-[state=indeterminate]:ring-[var(--ui-danger)] data-[state=indeterminate]:before:bg-[var(--ui-danger)]",
-        indicator: "text-[var(--ui-danger-foreground)]"
-      },
-      info: {
-        box: "data-[state=checked]:bg-[var(--ui-info)] data-[state=checked]:ring-[var(--ui-info)] data-[state=checked]:before:bg-[var(--ui-info)] data-[state=indeterminate]:bg-[var(--ui-info)] data-[state=indeterminate]:ring-[var(--ui-info)] data-[state=indeterminate]:before:bg-[var(--ui-info)]",
-        indicator: "text-[var(--ui-info-foreground)]"
-      },
-      warning: {
-        box: "data-[state=checked]:bg-[var(--ui-warning)] data-[state=checked]:ring-[var(--ui-warning)] data-[state=checked]:before:bg-[var(--ui-warning)] data-[state=indeterminate]:bg-[var(--ui-warning)] data-[state=indeterminate]:ring-[var(--ui-warning)] data-[state=indeterminate]:before:bg-[var(--ui-warning)]",
-        indicator: "text-[var(--ui-warning-foreground)]"
-      }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // Same +4px-per-step scale RadioGroup's own `size` variant uses.
     size: {
@@ -93,7 +72,7 @@ export const checkboxTheme = tv({
     variant: {
       default: {},
       card: {
-        root: "w-full items-start gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] px-3.5 py-3 transition-colors has-[[data-state=checked]]:border-[var(--ui-primary)] has-[[data-state=checked]]:bg-[var(--ui-primary-soft)]",
+        root: "w-full items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] px-3.5 py-3 transition-colors has-[[data-state=checked]]:border-[var(--_selaras-color-fill)] has-[[data-state=checked]]:bg-[var(--_selaras-color-subtle)]",
         box: "mt-0.5"
       }
     },
@@ -103,7 +82,7 @@ export const checkboxTheme = tv({
     // requested, not whichever variant happens to compose later. See
     // RadioGroup's own theme file, which already has this order right.
     invalid: {
-      true: { box: "ring-[var(--ui-danger)] data-[state=checked]:ring-[var(--ui-danger)] data-[state=indeterminate]:ring-[var(--ui-danger)]" }
+      true: { box: "ring-[var(--_selaras-color-border)] data-[state=checked]:ring-[var(--_selaras-color-border)] data-[state=indeterminate]:ring-[var(--_selaras-color-border)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/chip.js

@@ -5,7 +5,7 @@ export const chipTheme = tv({
     // specific chip into the fully-rounded pill look instead. Padding/
     // height below is Badge's original scale, carried over here; Badge
     // itself moved to a tighter one (see badge.ts).
-    root: "inline-flex items-center gap-1 rounded-[var(--ui-radius-sm)] font-medium whitespace-nowrap",
+    root: "inline-flex items-center gap-1 rounded-[var(--selaras-resolved-radius-sm)] font-medium whitespace-nowrap",
     leadingIcon: "shrink-0",
     label: "truncate",
     // inline-flex items-center justify-center centers the icon in both
@@ -56,27 +56,9 @@ export const chipTheme = tv({
     { size: "sm", removable: true, class: { root: "pe-1" } },
     { size: "md", removable: true, class: { root: "pe-1.5" } },
     { size: "lg", removable: true, class: { root: "pe-2" } },
-    { color: "primary", variant: "solid", class: { root: "bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]" } },
-    { color: "primary", variant: "soft", class: { root: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]" } },
-    { color: "primary", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-primary)] text-[var(--ui-primary)]" } },
-    { color: "neutral", variant: "solid", class: { root: "bg-[var(--ui-neutral)] text-[var(--ui-neutral-foreground)]" } },
-    { color: "neutral", variant: "soft", class: { root: "bg-[var(--ui-neutral-soft)] text-[var(--ui-text)]" } },
-    { color: "neutral", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text)]" } },
-    { color: "secondary", variant: "solid", class: { root: "bg-[var(--ui-secondary)] text-[var(--ui-secondary-foreground)]" } },
-    { color: "secondary", variant: "soft", class: { root: "bg-[var(--ui-secondary-soft)] text-[var(--ui-secondary)]" } },
-    { color: "secondary", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-secondary)] text-[var(--ui-secondary)]" } },
-    { color: "success", variant: "solid", class: { root: "bg-[var(--ui-success)] text-[var(--ui-success-foreground)]" } },
-    { color: "success", variant: "soft", class: { root: "bg-[var(--ui-success-soft)] text-[var(--ui-success)]" } },
-    { color: "success", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-success)] text-[var(--ui-success)]" } },
-    { color: "danger", variant: "solid", class: { root: "bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)]" } },
-    { color: "danger", variant: "soft", class: { root: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger)]" } },
-    { color: "danger", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-danger)] text-[var(--ui-danger)]" } },
-    { color: "info", variant: "solid", class: { root: "bg-[var(--ui-info)] text-[var(--ui-info-foreground)]" } },
-    { color: "info", variant: "soft", class: { root: "bg-[var(--ui-info-soft)] text-[var(--ui-info)]" } },
-    { color: "info", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-info)] text-[var(--ui-info)]" } },
-    { color: "warning", variant: "solid", class: { root: "bg-[var(--ui-warning)] text-[var(--ui-warning-foreground)]" } },
-    { color: "warning", variant: "soft", class: { root: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning)]" } },
-    { color: "warning", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-warning)] text-[var(--ui-warning)]" } }
+    { variant: "solid", class: { root: "bg-[var(--_selaras-color-fill)] text-[var(--_selaras-color-on-fill)]" } },
+    { variant: "soft", class: { root: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-text)]" } },
+    { variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--_selaras-color-border)] text-[var(--_selaras-color-text)]" } }
   ],
   defaultVariants: {
     color: "neutral",

package/dist/runtime/theme/code-button.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const codeButtonTheme = tv({
   slots: {
-    root: "inline-flex items-center gap-1.5 rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg-elevated)] px-2 py-1 font-mono text-sm text-[var(--ui-text)] transition-colors hover:bg-[var(--ui-bg-elevated)]/70",
-    icon: "size-3.5 shrink-0 text-[var(--ui-text-muted)]"
+    root: "inline-flex items-center gap-1.5 rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--selaras-resolved-surface-elevated)] px-2 py-1 font-mono text-sm text-[var(--selaras-resolved-text-default)] transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)]/70",
+    icon: "size-3.5 shrink-0 text-[var(--selaras-resolved-text-muted)]"
   }
 });

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

@@ -3,9 +3,9 @@ export declare const codeTreeTheme: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             content?: import("tailwind-variants").ClassValue;
+            tree?: import("tailwind-variants").ClassValue;
             pre?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
-            tree?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -13,9 +13,9 @@ export declare const codeTreeTheme: import("tailwind-variants").TVReturnType<{
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             content?: import("tailwind-variants").ClassValue;
+            tree?: import("tailwind-variants").ClassValue;
             pre?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
-            tree?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -29,9 +29,9 @@ export declare const codeTreeTheme: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
             content?: import("tailwind-variants").ClassValue;
+            tree?: import("tailwind-variants").ClassValue;
             pre?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
-            tree?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/runtime/theme/code-tree.js

@@ -1,13 +1,13 @@
 import { tv } from "tailwind-variants";
 export const codeTreeTheme = tv({
   slots: {
-    root: "flex overflow-hidden rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-bg)]",
+    root: "flex overflow-hidden rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)]",
     // FileTree's own root box (border/bg/padding) is stripped via its :ui
     // override below - this wrapper provides that framing instead, so the
     // two panels read as one split view rather than a box inside a box.
-    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--ui-border)] p-2",
+    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--selaras-resolved-border-default)] p-2",
     content: "min-w-0 flex-1 overflow-auto p-4",
-    pre: "whitespace-pre font-mono text-sm text-[var(--ui-text)]",
-    empty: "flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--ui-text-muted)]"
+    pre: "whitespace-pre font-mono text-sm text-[var(--selaras-resolved-text-default)]",
+    empty: "flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--selaras-resolved-text-muted)]"
   }
 });

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

@@ -1,4 +1,13 @@
 export declare const collapsibleTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             trigger: string;
@@ -30,6 +39,15 @@ export declare const collapsibleTheme: import("tailwind-variants").TVReturnType<
     content: string;
     contentInner: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             trigger: string;
@@ -61,6 +79,15 @@ export declare const collapsibleTheme: import("tailwind-variants").TVReturnType<
     content: string;
     contentInner: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             trigger: string;

package/dist/runtime/theme/collapsible.js

@@ -2,13 +2,13 @@ import { tv } from "tailwind-variants";
 export const collapsibleTheme = tv({
   slots: {
     root: "w-full",
-    trigger: "group flex w-full items-center justify-between gap-2 text-start font-medium text-[var(--ui-text)] transition-colors hover:text-[var(--ui-primary)] disabled:opacity-50 disabled:pointer-events-none",
-    chevron: "size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform group-data-[state=open]:rotate-180",
+    trigger: "group flex w-full items-center justify-between gap-2 text-start font-medium text-[var(--selaras-resolved-text-default)] transition-colors hover:text-[var(--_selaras-color-text-hover)] disabled:opacity-50 disabled:pointer-events-none",
+    chevron: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)] transition-transform group-data-[state=open]:rotate-180",
     // overflow-hidden clips the panel to its own animated height (without
     // it, content would visibly spill out mid-animation); the two
     // data-state keyframes interpolate between 0 and Reka's own measured
     // --reka-collapsible-content-height, so this never hardcodes a height.
-    content: "overflow-hidden text-[var(--ui-text-muted)] data-[state=open]:animate-[selaras-collapsible-down_200ms_ease-out] data-[state=closed]:animate-[selaras-collapsible-up_200ms_ease-out]",
+    content: "overflow-hidden text-[var(--selaras-resolved-text-muted)] data-[state=open]:animate-[selaras-collapsible-down_200ms_ease-out] data-[state=closed]:animate-[selaras-collapsible-up_200ms_ease-out]",
     // A separate slot (not `content` itself) for the padding - the padding
     // must NOT be part of the height being animated (animating a 0-to-N
     // height with vertical padding baked in either clips the last few
@@ -17,6 +17,15 @@ export const collapsibleTheme = tv({
     contentInner: "pt-2"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     size: {
       sm: { trigger: "text-sm", content: "text-sm" },
       md: { trigger: "text-sm", content: "text-sm" },

package/dist/runtime/theme/color-picker.d.ts

@@ -11,27 +11,15 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
         };
     };
     color: {
-        primary: {
-            trigger: string;
-        };
+        primary: "";
         neutral: {
             trigger: string;
         };
-        secondary: {
-            trigger: string;
-        };
-        success: {
-            trigger: string;
-        };
-        danger: {
-            trigger: string;
-        };
-        info: {
-            trigger: string;
-        };
-        warning: {
-            trigger: string;
-        };
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     trigger: string;
@@ -61,27 +49,15 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
         };
     };
     color: {
-        primary: {
-            trigger: string;
-        };
+        primary: "";
         neutral: {
             trigger: string;
         };
-        secondary: {
-            trigger: string;
-        };
-        success: {
-            trigger: string;
-        };
-        danger: {
-            trigger: string;
-        };
-        info: {
-            trigger: string;
-        };
-        warning: {
-            trigger: string;
-        };
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     trigger: string;
@@ -111,27 +87,15 @@ export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<
         };
     };
     color: {
-        primary: {
-            trigger: string;
-        };
+        primary: "";
         neutral: {
             trigger: string;
         };
-        secondary: {
-            trigger: string;
-        };
-        success: {
-            trigger: string;
-        };
-        danger: {
-            trigger: string;
-        };
-        info: {
-            trigger: string;
-        };
-        warning: {
-            trigger: string;
-        };
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     trigger: string;

package/dist/runtime/theme/color-picker.js

@@ -4,7 +4,7 @@ export const colorPickerTheme = tv({
     // Same chrome as Select's own trigger (select.ts) - both are a form
     // field that opens a popover, so they share the exact ring/hover/
     // focus/disabled treatment rather than reinventing it here.
-    trigger: "inline-flex w-full min-h-10 items-center gap-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--ui-border)] outline-none transition-[color,background-color,box-shadow] not-focus:not-data-[state=open]:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 data-[state=open]:ring-2 disabled:opacity-50 disabled:pointer-events-none",
+    trigger: "inline-flex w-full min-h-10 items-center gap-2 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] outline-none transition-[color,background-color,box-shadow] not-focus:not-data-[state=open]:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-2 data-[state=open]:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
     // Painted via ColorSwatch's own exposed --reka-color-swatch-color
     // custom property - ColorSwatch.js applies no background of its own,
     // only exposes that var, so every consumer of it (this trigger swatch
@@ -15,23 +15,23 @@ export const colorPickerTheme = tv({
     // so an abbreviated, non-CSS placeholder in place of the real value
     // gets a real attempt at CSS generation and chokes on it - confirmed:
     // that's exactly what produced a real build warning once.
-    triggerSwatch: "size-5 shrink-0 rounded-[var(--ui-radius-sm)] bg-[var(--reka-color-swatch-color)] ring-1 ring-inset ring-black/10",
-    triggerValue: "flex-1 truncate text-start font-mono text-[var(--ui-text)]",
-    content: "z-[var(--ui-z-dropdown)] w-64 space-y-3 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-3 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-    // The `mobileModal` path's own content wrapper - none of `content`'s
+    triggerSwatch: "size-5 shrink-0 rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--reka-color-swatch-color)] ring-1 ring-inset ring-black/10",
+    triggerValue: "flex-1 truncate text-start font-mono text-[var(--selaras-resolved-text-default)]",
+    content: "z-[var(--selaras-resolved-z-dropdown)] w-64 space-y-3 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-3 shadow-[var(--selaras-resolved-shadow-md)] ring-1 ring-[var(--selaras-resolved-border-default)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    // The `adaptive` path's own content wrapper - none of `content`'s
     // own popover chrome (width/background/shadow/ring/rounded/animate)
     // applies here, since Modal's own card already provides that surface;
     // this only needs this picker's own internal spacing/padding, same
     // reasoning as Select's own mobileContent (select.ts).
     mobileContent: "w-full space-y-3 p-4",
-    area: "relative h-40 w-full overflow-hidden rounded-[var(--ui-radius-sm)] cursor-crosshair",
+    area: "relative h-40 w-full overflow-hidden rounded-[var(--selaras-resolved-radius-sm)] cursor-crosshair",
     // Shared by the area thumb and both slider thumbs below - all three
     // are the same plain white ring-bordered circle sitting on top of a
     // color surface Reka itself paints (the area's own gradient, each
     // slider track's own gradient) - a colored ring here would fight
     // that surface instead of marking a position on it, the same reason
     // Slider.vue's own thumb stays neutral against its colored range.
-    thumb: "block size-4 shrink-0 rounded-full border-2 border-white shadow-[var(--ui-shadow-sm)] ring-1 ring-[var(--ui-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+    thumb: "block size-4 shrink-0 rounded-full border-2 border-white shadow-[var(--selaras-resolved-shadow-sm)] ring-1 ring-[var(--selaras-resolved-border-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--_selaras-color-focus)]",
     // ColorSliderRoot itself (bound onto directly, no dedicated slot of
     // its own since nothing else needs to reach it) - Reka's own default
     // `as` for it is a bare inline `span` (confirmed in Slider/SliderRoot.js,
@@ -45,9 +45,9 @@ export const colorPickerTheme = tv({
     // (ColorSliderTrack.js), not this class. Same inline-`span`-by-default
     // reasoning as sliderRoot above applies here too - `block` first.
     track: "relative block h-3 w-full cursor-pointer rounded-full ring-1 ring-inset ring-black/10",
-    field: "w-full rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg)] px-2 py-1.5 text-sm font-mono text-[var(--ui-text)] ring-1 ring-inset ring-[var(--ui-border)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--ui-border-hover)] focus:ring-2 focus:ring-[var(--ui-primary)]",
+    field: "w-full rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--selaras-resolved-surface-default)] px-2 py-1.5 text-sm font-mono text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)]",
     swatchList: "flex flex-wrap gap-1.5",
-    swatch: "relative size-6 shrink-0 rounded-[var(--ui-radius-sm)] ring-1 ring-inset ring-black/10 cursor-pointer data-[highlighted]:ring-2 data-[highlighted]:ring-[var(--ui-border-hover)] data-[state=checked]:ring-2 data-[state=checked]:ring-[var(--ui-primary)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    swatch: "relative size-6 shrink-0 rounded-[var(--selaras-resolved-radius-sm)] ring-1 ring-inset ring-black/10 cursor-pointer data-[highlighted]:ring-2 data-[highlighted]:ring-[var(--selaras-resolved-border-hover)] data-[state=checked]:ring-2 data-[state=checked]:ring-[var(--_selaras-color-fill)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
     // The preset item's own color fill - same --reka-color-swatch-color
     // var as triggerSwatch, sized to fill its parent `swatch` item
     // (rounded-[inherit] so it doesn't poke past that item's own corners).
@@ -64,16 +64,17 @@ export const colorPickerTheme = tv({
       md: { trigger: "min-h-10" },
       lg: { trigger: "min-h-11 text-base" }
     },
-    // Focus-ring color only, same scope as Select's own `color` variant -
-    // the resting ring stays --ui-border regardless.
+    // Registered custom roles have no finite Tailwind Variants branch. The
+    // base trigger therefore owns semantic focus styling; neutral overrides
+    // it, while empty built-in branches retain the public recipe condition.
     color: {
-      primary: { trigger: "focus:ring-[var(--ui-primary)] data-[state=open]:ring-[var(--ui-primary)]" },
-      neutral: { trigger: "focus:ring-[var(--ui-bg-inverted)] data-[state=open]:ring-[var(--ui-bg-inverted)]" },
-      secondary: { trigger: "focus:ring-[var(--ui-secondary)] data-[state=open]:ring-[var(--ui-secondary)]" },
-      success: { trigger: "focus:ring-[var(--ui-success)] data-[state=open]:ring-[var(--ui-success)]" },
-      danger: { trigger: "focus:ring-[var(--ui-danger)] data-[state=open]:ring-[var(--ui-danger)]" },
-      info: { trigger: "focus:ring-[var(--ui-info)] data-[state=open]:ring-[var(--ui-info)]" },
-      warning: { trigger: "focus:ring-[var(--ui-warning)] data-[state=open]:ring-[var(--ui-warning)]" }
+      primary: "",
+      neutral: { trigger: "focus:ring-[var(--selaras-resolved-surface-inverted)] data-[state=open]:ring-[var(--selaras-resolved-surface-inverted)]" },
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     }
   },
   defaultVariants: {

package/dist/runtime/theme/command-palette.d.ts

@@ -7,10 +7,10 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
             list?: import("tailwind-variants").ClassValue;
             overlay?: import("tailwind-variants").ClassValue;
             footer?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
-            group?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
             searchIcon?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
             groupLabel?: import("tailwind-variants").ClassValue;
             itemIcon?: import("tailwind-variants").ClassValue;
             itemLabel?: import("tailwind-variants").ClassValue;
@@ -27,10 +27,10 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
             list?: import("tailwind-variants").ClassValue;
             overlay?: import("tailwind-variants").ClassValue;
             footer?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
-            group?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
             searchIcon?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
             groupLabel?: import("tailwind-variants").ClassValue;
             itemIcon?: import("tailwind-variants").ClassValue;
             itemLabel?: import("tailwind-variants").ClassValue;
@@ -63,10 +63,10 @@ export declare const commandPaletteTheme: import("tailwind-variants").TVReturnTy
             list?: import("tailwind-variants").ClassValue;
             overlay?: import("tailwind-variants").ClassValue;
             footer?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
-            group?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
             searchIcon?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
             groupLabel?: import("tailwind-variants").ClassValue;
             itemIcon?: import("tailwind-variants").ClassValue;
             itemLabel?: import("tailwind-variants").ClassValue;