@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -11,27 +11,15 @@ export declare const selectTheme: 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: "";
     };
     invalid: {
         true: {
@@ -50,6 +38,7 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     searchInput: string;
     content: string;
     mobileContent: string;
+    mobilePanel: string;
     viewport: string;
     group: string;
     item: string;
@@ -69,27 +58,15 @@ export declare const selectTheme: 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: "";
     };
     invalid: {
         true: {
@@ -108,6 +85,7 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     searchInput: string;
     content: string;
     mobileContent: string;
+    mobilePanel: string;
     viewport: string;
     group: string;
     item: string;
@@ -127,27 +105,15 @@ export declare const selectTheme: 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: "";
     };
     invalid: {
         true: {
@@ -166,6 +132,7 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     searchInput: string;
     content: string;
     mobileContent: string;
+    mobilePanel: string;
     viewport: string;
     group: string;
     item: string;

package/dist/runtime/theme/select.js

@@ -7,8 +7,8 @@ export const selectTheme = tv({
     // true (unavoidable while interacting with the trigger or its options)
     // let the plain gray hover ring beat the primary one in the cascade,
     // since they're all equal-specificity pseudo-class/attribute selectors.
-    trigger: "inline-flex w-full min-h-10 flex-wrap items-center gap-1.5 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-focus-within:not-data-[state=open]:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 focus-within:ring-2 data-[state=open]:ring-2 disabled:opacity-50 disabled:pointer-events-none",
-    value: "flex-1 truncate text-start text-[var(--ui-text)] data-[placeholder]:text-[var(--ui-text-muted)]",
+    trigger: "inline-flex w-full min-h-10 flex-wrap items-center gap-1.5 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-focus-within: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)] focus-within:ring-2 focus-within: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",
+    value: "flex-1 truncate text-start text-[var(--selaras-resolved-text-default)] data-[placeholder]:text-[var(--selaras-resolved-text-muted)]",
     // Both chip display branches render a real Chip (see
     // ComboboxSelectBase.vue) instead of hand-rolled markup, styled/
     // colored via its own props and :ui override - only the "+N more"
@@ -19,29 +19,34 @@ export const selectTheme = tv({
     // matches the chips' own primary too, not text-muted - muted-on-
     // primary-soft measures 4.46:1, just under AA; primary-on-primary-
     // soft (the same pairing Chip's own soft variant uses) clears 6.5:1.
-    chipOverflow: "inline-flex items-center rounded-[var(--ui-radius-sm)] bg-[var(--ui-primary-soft)] px-2 py-0.5 text-xs text-[var(--ui-primary)]",
-    icon: "shrink-0 text-[var(--ui-text-muted)]",
+    chipOverflow: "inline-flex items-center rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--_selaras-color-subtle)] px-2 py-0.5 text-xs text-[var(--_selaras-color-text)]",
+    icon: "shrink-0 text-[var(--selaras-resolved-text-muted)]",
     // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring
     // and touch target come from Button's own theme; only rounded-full
     // (this dismiss-glyph family reads better circular) stays here.
     clear: "shrink-0 rounded-full",
-    dropdown: "shrink-0 rounded-[var(--ui-radius-sm)] p-0.5 text-[var(--ui-text-muted)] transition-colors hover:bg-[var(--ui-border)] hover:text-[var(--ui-text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
-    searchWrapper: "flex items-center gap-2 border-b border-[var(--ui-border)] px-2",
-    searchInput: "h-9 min-w-16 flex-1 bg-transparent text-sm text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)]",
-    content: "z-[var(--ui-z-dropdown)] max-h-72 min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] 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
+    dropdown: "shrink-0 rounded-[var(--selaras-resolved-radius-sm)] p-0.5 text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
+    searchWrapper: "flex items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-2",
+    searchInput: "h-9 min-w-16 flex-1 bg-transparent text-sm text-[var(--selaras-resolved-text-default)] outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
+    content: "z-[var(--selaras-resolved-z-dropdown)] max-h-72 min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] 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 (ring/shadow/rounded/animate-in, sized off the
     // trigger's own width via --reka-combobox-trigger-width, which is
     // only ever set while position="popper" is active) applies here,
     // since Modal's own card already provides that surface; this only
     // needs to fill Modal's content slot width.
     mobileContent: "w-full",
+    // Autocomplete keeps its editable ComboboxInput outside its popup. Its
+    // mobile presentation is therefore a wider nonmodal panel, not Modal's
+    // content wrapper. Inline geometry avoids inheriting popper width from the
+    // trigger while leaving consumer `ui.mobilePanel` overrides available.
+    mobilePanel: "",
     viewport: "max-h-72 overflow-y-auto p-1",
-    group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--ui-text-muted)]",
-    item: "relative flex items-center gap-2 rounded-[var(--ui-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--ui-text)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    itemIndicator: "absolute end-2 flex items-center text-[var(--ui-primary)]",
-    empty: "px-2 py-6 text-center text-sm text-[var(--ui-text-muted)]",
-    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+    group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
+    item: "relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-indicator)]",
+    empty: "px-2 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
+    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },
   variants: {
     size: {
@@ -49,22 +54,25 @@ export const selectTheme = tv({
       md: { trigger: "min-h-10" },
       lg: { trigger: "min-h-11 text-base" }
     },
-    // Focus-ring color only - the resting ring stays --ui-border regardless
-    // of `color`, matching Input's own scope (see input.ts).
+    // Registered custom roles have no finite Tailwind Variants branch. Keep
+    // the semantic focus styling in the base slot so every registered role
+    // resolves through --_selaras-color-focus; neutral alone overrides it.
+    // Empty built-in branches preserve the public recipe condition used by
+    // consumer compound variants.
     color: {
-      primary: { trigger: "focus:ring-[var(--ui-primary)] focus-within:ring-[var(--ui-primary)] data-[state=open]:ring-[var(--ui-primary)]" },
-      neutral: { trigger: "focus:ring-[var(--ui-bg-inverted)] focus-within:ring-[var(--ui-bg-inverted)] data-[state=open]:ring-[var(--ui-bg-inverted)]" },
-      secondary: { trigger: "focus:ring-[var(--ui-secondary)] focus-within:ring-[var(--ui-secondary)] data-[state=open]:ring-[var(--ui-secondary)]" },
-      success: { trigger: "focus:ring-[var(--ui-success)] focus-within:ring-[var(--ui-success)] data-[state=open]:ring-[var(--ui-success)]" },
-      danger: { trigger: "focus:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)] data-[state=open]:ring-[var(--ui-danger)]" },
-      info: { trigger: "focus:ring-[var(--ui-info)] focus-within:ring-[var(--ui-info)] data-[state=open]:ring-[var(--ui-info)]" },
-      warning: { trigger: "focus:ring-[var(--ui-warning)] focus-within:ring-[var(--ui-warning)] data-[state=open]:ring-[var(--ui-warning)]" }
+      primary: "",
+      neutral: { trigger: "focus:ring-[var(--selaras-resolved-surface-inverted)] focus-within:ring-[var(--selaras-resolved-surface-inverted)] data-[state=open]:ring-[var(--selaras-resolved-surface-inverted)]" },
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // Declared last (after color) so tailwind-merge lets its own ring
     // overrides win over color's - see input.ts for why declaration order
     // (not runtime call order) is what decides this.
     invalid: {
-      true: { trigger: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)] data-[state=open]:ring-[var(--ui-danger)]" }
+      true: { trigger: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)] focus-within:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

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

@@ -27,24 +27,12 @@ export declare const separatorTheme: import("tailwind-variants").TVReturnType<{
         neutral: {
             line: string;
         };
-        primary: {
-            line: string;
-        };
-        secondary: {
-            line: string;
-        };
-        success: {
-            line: string;
-        };
-        danger: {
-            line: string;
-        };
-        info: {
-            line: string;
-        };
-        warning: {
-            line: string;
-        };
+        primary: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     root: string;
@@ -79,24 +67,12 @@ export declare const separatorTheme: import("tailwind-variants").TVReturnType<{
         neutral: {
             line: string;
         };
-        primary: {
-            line: string;
-        };
-        secondary: {
-            line: string;
-        };
-        success: {
-            line: string;
-        };
-        danger: {
-            line: string;
-        };
-        info: {
-            line: string;
-        };
-        warning: {
-            line: string;
-        };
+        primary: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     root: string;
@@ -131,24 +107,12 @@ export declare const separatorTheme: import("tailwind-variants").TVReturnType<{
         neutral: {
             line: string;
         };
-        primary: {
-            line: string;
-        };
-        secondary: {
-            line: string;
-        };
-        success: {
-            line: string;
-        };
-        danger: {
-            line: string;
-        };
-        info: {
-            line: string;
-        };
-        warning: {
-            line: string;
-        };
+        primary: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     root: string;

package/dist/runtime/theme/separator.js

@@ -10,12 +10,12 @@ export const separatorTheme = tv({
     // plain bar; with a label, a second one of these renders after it
     // (see Separator.vue), splitting the available space evenly on both
     // sides of the text.
-    line: "shrink-0 border-[var(--ui-border)]",
+    line: "shrink-0 border-[var(--_selaras-color-indicator)]",
     // Always muted, independent of `color` - a colored line with
     // matching bright label text reads as garish rather than
     // informative; the label stays legible/neutral regardless of how
     // much the line itself is emphasized.
-    label: "shrink-0 px-2 text-xs text-[var(--ui-text-muted)] whitespace-nowrap"
+    label: "shrink-0 px-2 text-xs text-[var(--selaras-resolved-text-muted)] whitespace-nowrap"
   },
   variants: {
     orientation: {
@@ -36,19 +36,23 @@ export const separatorTheme = tv({
     // Unlike Input/PinInput's own `color` (focus-ring only), the line is
     // always visible with no interactive state to gate a color reveal
     // behind - it just tints directly. `neutral` here means the same
-    // subtle --ui-border this component always used, not the bold
-    // --ui-bg-inverted "neutral" means elsewhere (Checkbox, Slider, ...) -
+    // subtle --selaras-resolved-border-default this component always used, not the bold
+    // --selaras-resolved-surface-inverted "neutral" means elsewhere (Checkbox, Slider, ...) -
     // a divider's own default has to stay subtle, matching precedent for
     // "neutral" carrying whatever's contextually right per component
-    // (Badge's own soft variant does the same with --ui-bg-elevated).
+    // (Badge's own soft variant does the same with --selaras-resolved-surface-elevated).
+    // Semantic color is the base line treatment so registered roles work even
+    // without a finite built-in branch. Empty built-in entries preserve the
+    // public recipe condition, and neutral explicitly restores the subtle
+    // functional border.
     color: {
-      neutral: { line: "border-[var(--ui-border)]" },
-      primary: { line: "border-[var(--ui-primary)]" },
-      secondary: { line: "border-[var(--ui-secondary)]" },
-      success: { line: "border-[var(--ui-success)]" },
-      danger: { line: "border-[var(--ui-danger)]" },
-      info: { line: "border-[var(--ui-info)]" },
-      warning: { line: "border-[var(--ui-warning)]" }
+      neutral: { line: "border-[var(--selaras-resolved-border-default)]" },
+      primary: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     }
   },
   compoundVariants: [

package/dist/runtime/theme/skeleton.js

@@ -1,12 +1,12 @@
 import { tv } from "tailwind-variants";
 export const skeletonTheme = tv({
   slots: {
-    // --ui-bg-elevated (neutral-50) reads as barely-off-white against the
+    // --selaras-resolved-surface-elevated (neutral-50) reads as barely-off-white against the
     // page background it's normally shown on - fine for a soft surface
     // tint, but a loading placeholder needs to actually be visible.
-    // --ui-border is the same "visible neutral block on white" token
+    // --selaras-resolved-border-default is the same "visible neutral block on white" token
     // Slider's own track already uses for the identical reason.
-    base: "block rounded-[var(--ui-radius-md)] bg-[var(--ui-border)]"
+    base: "block rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-border-default)]"
   },
   variants: {
     animation: {
@@ -17,7 +17,7 @@ export const skeletonTheme = tv({
       // A 200%-wide gradient slides across the block's own width via
       // background-position, giving the light band somewhere to travel.
       shimmer: {
-        base: "bg-[linear-gradient(90deg,var(--ui-border)_25%,var(--ui-border-hover)_50%,var(--ui-border)_75%)] bg-[length:200%_100%] animate-[selaras-skeleton-shimmer_1.6s_ease-in-out_infinite]"
+        base: "bg-[linear-gradient(90deg,var(--selaras-resolved-border-default)_25%,var(--selaras-resolved-border-hover)_50%,var(--selaras-resolved-border-default)_75%)] bg-[length:200%_100%] animate-[selaras-skeleton-shimmer_1.6s_ease-in-out_infinite]"
       }
     }
   },

package/dist/runtime/theme/slideover.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
 export const slideoverTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50",
-    content: "fixed z-[var(--ui-z-modal)] flex flex-col bg-[var(--ui-bg)] shadow-[var(--ui-shadow-lg)] focus:outline-none",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)]",
+    content: "fixed z-[var(--selaras-resolved-z-modal)] flex flex-col bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-lg)] focus:outline-none",
     header: "flex items-start justify-between gap-4 p-4 sm:px-6",
-    title: "text-base font-semibold text-[var(--ui-text)]",
-    description: "mt-1 text-sm text-[var(--ui-text-muted)]",
+    title: "text-base font-semibold text-[var(--selaras-resolved-text-default)]",
+    description: "mt-1 text-sm text-[var(--selaras-resolved-text-muted)]",
     close: "shrink-0 rounded-full",
     body: "flex-1 overflow-y-auto p-4 sm:px-6",
     footer: "flex items-center justify-end gap-2 p-4 sm:px-6"
@@ -29,7 +29,7 @@ export const slideoverTheme = tv({
       right: { content: "max-w-md" }
     },
     inset: {
-      true: { content: "rounded-[var(--ui-radius-lg)] ring-1 ring-[var(--ui-border)]" }
+      true: { content: "rounded-[var(--selaras-resolved-radius-lg)] ring-1 ring-[var(--selaras-resolved-border-default)]" }
     },
     // The animation classes live entirely in this variant (and the
     // compoundVariants below) rather than the base slot strings above -

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

@@ -17,34 +17,13 @@ export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            range: string;
-            thumb: string;
-        };
-        neutral: {
-            range: string;
-            thumb: string;
-        };
-        secondary: {
-            range: string;
-            thumb: string;
-        };
-        success: {
-            range: string;
-            thumb: string;
-        };
-        danger: {
-            range: string;
-            thumb: string;
-        };
-        info: {
-            range: string;
-            thumb: string;
-        };
-        warning: {
-            range: string;
-            thumb: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
     orientation: {
         horizontal: {
@@ -92,34 +71,13 @@ export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            range: string;
-            thumb: string;
-        };
-        neutral: {
-            range: string;
-            thumb: string;
-        };
-        secondary: {
-            range: string;
-            thumb: string;
-        };
-        success: {
-            range: string;
-            thumb: string;
-        };
-        danger: {
-            range: string;
-            thumb: string;
-        };
-        info: {
-            range: string;
-            thumb: string;
-        };
-        warning: {
-            range: string;
-            thumb: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
     orientation: {
         horizontal: {
@@ -167,34 +125,13 @@ export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            range: string;
-            thumb: string;
-        };
-        neutral: {
-            range: string;
-            thumb: string;
-        };
-        secondary: {
-            range: string;
-            thumb: string;
-        };
-        success: {
-            range: string;
-            thumb: string;
-        };
-        danger: {
-            range: string;
-            thumb: string;
-        };
-        info: {
-            range: string;
-            thumb: string;
-        };
-        warning: {
-            range: string;
-            thumb: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
     orientation: {
         horizontal: {

package/dist/runtime/theme/slider.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const sliderTheme = tv({
   slots: {
     root: "relative flex touch-none select-none items-center data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    track: "relative grow rounded-full bg-[var(--ui-border)]",
+    track: "relative grow rounded-full bg-[var(--selaras-resolved-border-default)]",
     // Reka's own SliderRange sets left/right (horizontal) or top/bottom
     // (vertical) itself via inline style, to size the *main* axis - the
     // *cross* axis (this slot's own height for horizontal, width for
@@ -10,16 +10,16 @@ export const sliderTheme = tv({
     // positioned element with no top/bottom of its own collapses to 0
     // height. inset-y-0/inset-x-0 below (in the orientation variant)
     // supply that missing cross-axis size.
-    range: "absolute rounded-full",
-    thumb: "block shrink-0 rounded-full bg-[var(--ui-bg)] shadow-[var(--ui-shadow-sm)] ring-2 transition-shadow focus-visible:outline-none focus-visible:ring-4",
+    range: "absolute rounded-full bg-[var(--_selaras-color-indicator)]",
+    thumb: "block shrink-0 rounded-full bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)] ring-2 ring-[var(--_selaras-color-indicator)] transition-shadow focus-visible:outline-none focus-visible:ring-4",
     // Own addition - Reka's Slider has no tick/mark concept of its own.
     // Positioned via an inline style (percent along the track), not a
     // variant - see Slider.vue's own `ticks` computed.
-    tick: "absolute size-1 -translate-x-1/2 rounded-full bg-[var(--ui-border-hover)]",
+    tick: "absolute size-1 -translate-x-1/2 rounded-full bg-[var(--selaras-resolved-border-hover)]",
     // Own addition - flanking content (an icon, an emoji, a unit label)
     // either side of the track. Plain flex boxes, no Reka equivalent.
-    start: "flex shrink-0 items-center justify-center text-[var(--ui-text-muted)]",
-    end: "flex shrink-0 items-center justify-center text-[var(--ui-text-muted)]"
+    start: "flex shrink-0 items-center justify-center text-[var(--selaras-resolved-text-muted)]",
+    end: "flex shrink-0 items-center justify-center text-[var(--selaras-resolved-text-muted)]"
   },
   variants: {
     size: {
@@ -28,13 +28,13 @@ export const sliderTheme = tv({
       lg: { track: "h-2", thumb: "size-5", tick: "top-1/2 -translate-y-1/2" }
     },
     color: {
-      primary: { range: "bg-[var(--ui-primary)]", thumb: "ring-[var(--ui-primary)]" },
-      neutral: { range: "bg-[var(--ui-bg-inverted)]", thumb: "ring-[var(--ui-bg-inverted)]" },
-      secondary: { range: "bg-[var(--ui-secondary)]", thumb: "ring-[var(--ui-secondary)]" },
-      success: { range: "bg-[var(--ui-success)]", thumb: "ring-[var(--ui-success)]" },
-      danger: { range: "bg-[var(--ui-danger)]", thumb: "ring-[var(--ui-danger)]" },
-      info: { range: "bg-[var(--ui-info)]", thumb: "ring-[var(--ui-info)]" },
-      warning: { range: "bg-[var(--ui-warning)]", thumb: "ring-[var(--ui-warning)]" }
+      primary: {},
+      neutral: {},
+      secondary: {},
+      success: {},
+      danger: {},
+      info: {},
+      warning: {}
     },
     // Vertical needs a real, non-zero height to size against - unlike
     // horizontal, which sizes off its own intrinsic full width.
@@ -50,7 +50,7 @@ export const sliderTheme = tv({
     // per-size class here isn't enough on its own).
     thumbVariant: {
       circle: { thumb: "rounded-full" },
-      bar: { thumb: "rounded-[var(--ui-radius-sm)]" }
+      bar: { thumb: "rounded-[var(--selaras-resolved-radius-sm)]" }
     }
   },
   compoundVariants: [

package/dist/runtime/theme/splitter-resize-handle.d.ts

@@ -1,4 +1,13 @@
 export declare const splitterResizeHandleTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     direction: {
         horizontal: {
             root: string;
@@ -13,6 +22,15 @@ export declare const splitterResizeHandleTheme: import("tailwind-variants").TVRe
     root: string;
     line: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     direction: {
         horizontal: {
             root: string;
@@ -27,6 +45,15 @@ export declare const splitterResizeHandleTheme: import("tailwind-variants").TVRe
     root: string;
     line: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     direction: {
         horizontal: {
             root: string;