@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 export const avatarGroupTheme = tv({
   slots: {
     root: "inline-flex flex-row-reverse justify-end",
-    item: "relative rounded-full ring-[var(--ui-bg)]",
-    count: "relative rounded-full bg-[var(--ui-bg-elevated)] text-[var(--ui-text-muted)] font-medium flex items-center justify-center"
+    item: "relative rounded-full ring-[var(--selaras-resolved-surface-default)]",
+    count: "relative rounded-full bg-[var(--selaras-resolved-surface-elevated)] text-[var(--selaras-resolved-text-muted)] font-medium flex items-center justify-center"
   },
   variants: {
     size: {

package/dist/runtime/theme/avatar.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const avatarTheme = tv({
   slots: {
     // `relative` anchors the absolutely-positioned status dot to the corner.
-    base: "relative inline-flex shrink-0 select-none items-center justify-center align-middle",
+    base: "relative inline-flex shrink-0 select-none items-center justify-center bg-[var(--_selaras-color-subtle)] align-middle",
     // `content` wraps image + fallback with overflow-hidden so text/images
     // can't escape the avatar bounds, while the status dot (a sibling, not
     // a child) stays unclipped outside this wrapper. items-center/
@@ -11,11 +11,11 @@ export const avatarTheme = tv({
     // fallback icon/text sits flush at the start corner instead of centered.
     content: "flex size-full items-center justify-center overflow-hidden",
     image: "h-full w-full object-cover",
-    fallback: "flex h-full w-full items-center justify-center",
+    fallback: "flex h-full w-full items-center justify-center text-[var(--_selaras-color-text)]",
     icon: "shrink-0",
     // The ring separates the dot from the avatar itself, using the page
     // background so it reads as a clean offset indicator at any size.
-    status: "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--ui-bg)]"
+    status: "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--selaras-resolved-surface-default)]"
   },
   variants: {
     color: {
@@ -31,13 +31,13 @@ export const avatarTheme = tv({
     // (online, offline, ...) rarely match the avatar's own identity color, so
     // it gets its own variant rather than tracking the avatar's.
     statusColor: {
-      primary: { status: "bg-[var(--ui-primary)]" },
-      neutral: { status: "bg-[var(--ui-text-muted)]" },
-      secondary: { status: "bg-[var(--ui-secondary)]" },
-      success: { status: "bg-[var(--ui-success)]" },
-      danger: { status: "bg-[var(--ui-danger)]" },
-      info: { status: "bg-[var(--ui-info)]" },
-      warning: { status: "bg-[var(--ui-warning)]" }
+      primary: { status: "bg-[var(--selaras-resolved-color-primary-indicator)]" },
+      neutral: { status: "bg-[var(--selaras-resolved-color-neutral-indicator)]" },
+      secondary: { status: "bg-[var(--selaras-resolved-color-secondary-indicator)]" },
+      success: { status: "bg-[var(--selaras-resolved-color-success-indicator)]" },
+      danger: { status: "bg-[var(--selaras-resolved-color-danger-indicator)]" },
+      info: { status: "bg-[var(--selaras-resolved-color-info-indicator)]" },
+      warning: { status: "bg-[var(--selaras-resolved-color-warning-indicator)]" }
     },
     size: {
       sm: { base: "size-6", fallback: "text-[10px]", icon: "size-3", status: "size-1.5" },
@@ -46,17 +46,11 @@ export const avatarTheme = tv({
     },
     shape: {
       circle: { base: "rounded-full" },
-      rounded: { base: "rounded-[var(--ui-radius-md)]" }
+      rounded: { base: "rounded-[var(--selaras-resolved-radius-md)]" }
     }
   },
   compoundVariants: [
-    { color: "primary", class: { base: "bg-[var(--ui-primary-soft)]", fallback: "text-[var(--ui-primary)]" } },
-    { color: "neutral", class: { base: "bg-[var(--ui-neutral-soft)]", fallback: "text-[var(--ui-text-muted)]" } },
-    { color: "secondary", class: { base: "bg-[var(--ui-secondary-soft)]", fallback: "text-[var(--ui-secondary)]" } },
-    { color: "success", class: { base: "bg-[var(--ui-success-soft)]", fallback: "text-[var(--ui-success)]" } },
-    { color: "danger", class: { base: "bg-[var(--ui-danger-soft)]", fallback: "text-[var(--ui-danger)]" } },
-    { color: "info", class: { base: "bg-[var(--ui-info-soft)]", fallback: "text-[var(--ui-info)]" } },
-    { color: "warning", class: { base: "bg-[var(--ui-warning-soft)]", fallback: "text-[var(--ui-warning)]" } }
+    { color: "neutral", class: { fallback: "text-[var(--selaras-resolved-text-muted)]" } }
   ],
   defaultVariants: {
     color: "neutral",

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

@@ -9,9 +9,15 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     variant: {
-        solid: "";
-        soft: "";
-        outline: "";
+        solid: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        outline: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -33,6 +39,10 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
             dot: string;
         };
     };
+    dotOnly: {
+        true: "";
+        false: "";
+    };
     iconOnly: {
         true: {
             base: string;
@@ -55,9 +65,15 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     variant: {
-        solid: "";
-        soft: "";
-        outline: "";
+        solid: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        outline: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -79,6 +95,10 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
             dot: string;
         };
     };
+    dotOnly: {
+        true: "";
+        false: "";
+    };
     iconOnly: {
         true: {
             base: string;
@@ -101,9 +121,15 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     variant: {
-        solid: "";
-        soft: "";
-        outline: "";
+        solid: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        outline: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -125,6 +151,10 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
             dot: string;
         };
     };
+    dotOnly: {
+        true: "";
+        false: "";
+    };
     iconOnly: {
         true: {
             base: string;

package/dist/runtime/theme/badge.js

@@ -5,15 +5,12 @@ export const badgeTheme = tv({
     // already defines the width, no slack to distribute) but is required
     // once iconOnly gives the root a fixed width wider than its one child -
     // without it the icon sits flush left, all the slack pushed right.
-    base: "inline-flex items-center justify-center gap-1 font-medium rounded-[var(--ui-radius-sm)] whitespace-nowrap",
+    base: "inline-flex items-center justify-center gap-1 font-medium rounded-[var(--selaras-resolved-radius-sm)] whitespace-nowrap",
     leadingIcon: "shrink-0",
     label: "truncate",
     trailingIcon: "shrink-0",
-    // Always the color's solid background, regardless of `variant` - a
-    // pale "soft" dot barely reads as a status indicator at this size.
-    // Used both inline (next to a label) and standalone (dot-only, no
-    // padded base around it at all - see Badge.vue's dotOnly branch).
-    dot: "shrink-0 rounded-full"
+    // Standalone dots are unpaired graphics; inline dots use the pill foreground.
+    dot: "shrink-0 rounded-full bg-[var(--_selaras-color-indicator)]"
   },
   variants: {
     color: {
@@ -26,15 +23,16 @@ export const badgeTheme = tv({
       warning: ""
     },
     variant: {
-      solid: "",
-      soft: "",
-      outline: ""
+      solid: { base: "bg-[var(--_selaras-color-fill)] text-[var(--_selaras-color-on-fill)]" },
+      soft: { base: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-on-subtle)]" },
+      outline: { base: "ring-1 ring-inset ring-[var(--_selaras-color-border)] text-[var(--_selaras-color-text)]" }
     },
     size: {
       sm: { base: "h-4 px-1 text-xs", leadingIcon: "size-2.5", trailingIcon: "size-2.5", dot: "size-1.5" },
       md: { base: "h-5 px-1.5 text-xs", leadingIcon: "size-3", trailingIcon: "size-3", dot: "size-2" },
       lg: { base: "h-6 px-2 text-sm", leadingIcon: "size-3.5", trailingIcon: "size-3.5", dot: "size-2.5" }
     },
+    dotOnly: { true: "", false: "" },
     // No label - just an icon (or nothing but a dot, handled separately in
     // Badge.vue) - reads better as a circle than a flat pill, doubling as
     // an avatar-adjacent status/count indicator. Chip stays a pill even
@@ -45,36 +43,8 @@ export const badgeTheme = tv({
     }
   },
   compoundVariants: [
-    { color: "primary", variant: "solid", class: { base: "bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]" } },
-    { color: "primary", variant: "soft", class: { base: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]" } },
-    { color: "primary", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-primary)] text-[var(--ui-primary)]" } },
-    { color: "neutral", variant: "solid", class: { base: "bg-[var(--ui-neutral)] text-[var(--ui-neutral-foreground)]" } },
-    { color: "neutral", variant: "soft", class: { base: "bg-[var(--ui-neutral-soft)] text-[var(--ui-text)]" } },
-    { color: "neutral", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text)]" } },
-    { color: "secondary", variant: "solid", class: { base: "bg-[var(--ui-secondary)] text-[var(--ui-secondary-foreground)]" } },
-    { color: "secondary", variant: "soft", class: { base: "bg-[var(--ui-secondary-soft)] text-[var(--ui-secondary)]" } },
-    { color: "secondary", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-secondary)] text-[var(--ui-secondary)]" } },
-    { color: "success", variant: "solid", class: { base: "bg-[var(--ui-success)] text-[var(--ui-success-foreground)]" } },
-    { color: "success", variant: "soft", class: { base: "bg-[var(--ui-success-soft)] text-[var(--ui-success)]" } },
-    { color: "success", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-success)] text-[var(--ui-success)]" } },
-    { color: "danger", variant: "solid", class: { base: "bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)]" } },
-    { color: "danger", variant: "soft", class: { base: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger)]" } },
-    { color: "danger", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-danger)] text-[var(--ui-danger)]" } },
-    { color: "info", variant: "solid", class: { base: "bg-[var(--ui-info)] text-[var(--ui-info-foreground)]" } },
-    { color: "info", variant: "soft", class: { base: "bg-[var(--ui-info-soft)] text-[var(--ui-info)]" } },
-    { color: "info", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-info)] text-[var(--ui-info)]" } },
-    { color: "warning", variant: "solid", class: { base: "bg-[var(--ui-warning)] text-[var(--ui-warning-foreground)]" } },
-    { color: "warning", variant: "soft", class: { base: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning)]" } },
-    { color: "warning", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-warning)] text-[var(--ui-warning)]" } },
-    // The dot's own background always tracks the color's solid token,
-    // independent of `variant` - see the `dot` slot comment above.
-    { color: "primary", class: { dot: "bg-[var(--ui-primary)]" } },
-    { color: "neutral", class: { dot: "bg-[var(--ui-text-muted)]" } },
-    { color: "secondary", class: { dot: "bg-[var(--ui-secondary)]" } },
-    { color: "success", class: { dot: "bg-[var(--ui-success)]" } },
-    { color: "danger", class: { dot: "bg-[var(--ui-danger)]" } },
-    { color: "info", class: { dot: "bg-[var(--ui-info)]" } },
-    { color: "warning", class: { dot: "bg-[var(--ui-warning)]" } },
+    // Inline dots follow the foreground, remaining visible on filled pills.
+    { dotOnly: false, class: { dot: "bg-current" } },
     // iconOnly needs an equal width/height square-that-reads-as-a-circle -
     // same trick Button's own square variant uses: swap the size's
     // horizontal padding for a matching width instead.
@@ -85,6 +55,7 @@ export const badgeTheme = tv({
   defaultVariants: {
     color: "neutral",
     variant: "soft",
-    size: "md"
+    size: "md",
+    dotOnly: false
   }
 });

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

@@ -1,36 +1,14 @@
 export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            disabled?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
-            current?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            separatorIcon?: import("tailwind-variants").ClassValue;
-            ellipsis?: import("tailwind-variants").ClassValue;
-        };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            disabled?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
-            current?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            separatorIcon?: import("tailwind-variants").ClassValue;
-            ellipsis?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
+}, {
     root: string;
     list: string;
     item: string;
@@ -43,22 +21,16 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     separatorIcon: string;
     ellipsis: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            disabled?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
-            current?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            separatorIcon?: import("tailwind-variants").ClassValue;
-            ellipsis?: import("tailwind-variants").ClassValue;
-        };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
-} | {}, {
+}, {
     root: string;
     list: string;
     item: string;
@@ -70,7 +42,17 @@ export declare const breadcrumbTheme: import("tailwind-variants").TVReturnType<{
     separator: string;
     separatorIcon: string;
     ellipsis: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+}, {
     root: string;
     list: string;
     item: string;

package/dist/runtime/theme/breadcrumb.js

@@ -4,19 +4,30 @@ export const breadcrumbTheme = tv({
     root: "",
     list: "flex items-center gap-1.5 text-sm",
     item: "flex items-center",
-    link: "flex items-center gap-1 text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
+    link: "flex items-center gap-1 text-[var(--selaras-resolved-text-muted)] transition-colors hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
     // The trail's last item - "you are here", visually emphasized
     // rather than muted like the earlier, clickable steps.
-    current: "flex items-center gap-1 font-medium text-[var(--ui-text)]",
+    current: "flex items-center gap-1 font-medium text-[var(--selaras-resolved-text-default)]",
     // An earlier item with neither `to` nor `disabled` unset - nothing
     // to link to, so it renders like `link` but inert.
-    disabled: "flex items-center gap-1 text-[var(--ui-text-muted)] opacity-50",
+    disabled: "flex items-center gap-1 text-[var(--selaras-resolved-text-muted)] opacity-50",
     icon: "size-4 shrink-0",
     // `block` (not `inline`) so an inline-max-width set by the
     // `truncate` prop actually applies.
     label: "block truncate",
-    separator: "flex items-center text-[var(--ui-text-muted)]",
+    separator: "flex items-center text-[var(--selaras-resolved-text-muted)]",
     separatorIcon: "size-4 shrink-0 rtl:rotate-180",
-    ellipsis: "flex items-center text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)]"
+    ellipsis: "flex items-center text-[var(--selaras-resolved-text-muted)] transition-colors hover:text-[var(--selaras-resolved-text-default)]"
+  },
+  variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    }
   }
 });

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

@@ -9,11 +9,21 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     variant: {
-        solid: "";
-        soft: "";
-        outline: "";
-        ghost: "";
-        text: "";
+        solid: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        outline: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        text: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -60,11 +70,21 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     variant: {
-        solid: "";
-        soft: "";
-        outline: "";
-        ghost: "";
-        text: "";
+        solid: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        outline: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        text: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -111,11 +131,21 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     variant: {
-        solid: "";
-        soft: "";
-        outline: "";
-        ghost: "";
-        text: "";
+        solid: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        outline: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        text: {
+            base: string;
+        };
     };
     size: {
         sm: {

package/dist/runtime/theme/button.js

@@ -1,11 +1,12 @@
 import { tv } from "tailwind-variants";
 export const buttonTheme = tv({
   slots: {
-    base: "inline-flex items-center justify-center gap-1.5 font-medium rounded-[var(--ui-radius-md)] transition-colors 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 disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
     leadingIcon: "shrink-0",
     trailingIcon: "shrink-0"
   },
   variants: {
+    // Keep color conditions available to recipe extensions; bindings own color CSS.
     color: {
       primary: "",
       neutral: "",
@@ -16,11 +17,12 @@ export const buttonTheme = tv({
       warning: ""
     },
     variant: {
-      solid: "",
-      soft: "",
-      outline: "",
-      ghost: "",
-      text: ""
+      solid: { base: "bg-[var(--_selaras-color-fill)] text-[var(--_selaras-color-on-fill)] hover:bg-[var(--_selaras-color-fill-hover)] active:bg-[var(--_selaras-color-fill-pressed)]" },
+      soft: { base: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-on-subtle)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
+      outline: { base: "ring-1 ring-inset ring-[var(--_selaras-color-border)] text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
+      ghost: { base: "text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
+      // Text actions never paint a background, including their interaction states.
+      text: { base: "text-[var(--_selaras-color-text)] hover:text-[var(--_selaras-color-text-hover)] active:text-[var(--_selaras-color-text-pressed)]" }
     },
     size: {
       sm: { base: "h-8 px-3 text-sm", leadingIcon: "size-4", trailingIcon: "size-4" },
@@ -31,65 +33,16 @@ export const buttonTheme = tv({
       true: { base: "w-full" }
     },
     raised: {
-      true: { base: "shadow-[var(--ui-shadow-md)]" }
+      true: { base: "shadow-[var(--selaras-resolved-shadow-md)]" }
     },
     square: {
       true: {}
     }
   },
   compoundVariants: [
-    // Icon-only: swap the size's text-oriented horizontal padding for an
-    // equal-width square matching its own height.
     { 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" } },
-    // :active (mouse-down) always goes one step further than :hover in the
-    // same direction - solid presses to the -active (700) token, soft/
-    // outline/ghost (which have no visible bg by default, or a pale -soft
-    // one on hover) press to a stronger tint of the role's own main color
-    // rather than a new token. Tailwind's default variant order puts
-    // active after hover, so :active wins when both apply (mouse down
-    // while hovering) - no extra specificity needed.
-    { color: "primary", variant: "solid", class: { base: "bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)] hover:bg-[var(--ui-primary-hover)] active:bg-[var(--ui-primary-active)]" } },
-    { color: "primary", variant: "soft", class: { base: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)] hover:bg-[var(--ui-primary-soft)]/70 active:bg-[var(--ui-primary)]/20" } },
-    { color: "primary", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-primary)] text-[var(--ui-primary)] hover:bg-[var(--ui-primary-soft)] active:bg-[var(--ui-primary)]/10" } },
-    { color: "primary", variant: "ghost", class: { base: "text-[var(--ui-primary)] hover:bg-[var(--ui-primary-soft)] active:bg-[var(--ui-primary)]/10" } },
-    { color: "neutral", variant: "solid", class: { base: "bg-[var(--ui-neutral)] text-[var(--ui-neutral-foreground)] hover:bg-[var(--ui-neutral-hover)] active:bg-[var(--ui-neutral-active)]" } },
-    { color: "neutral", variant: "soft", class: { base: "bg-[var(--ui-neutral-soft)] text-[var(--ui-text)] hover:bg-[var(--ui-neutral-soft)]/70 active:bg-[var(--ui-neutral)]/20" } },
-    { color: "neutral", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text)] hover:bg-[var(--ui-neutral-soft)] active:bg-[var(--ui-neutral)]/10" } },
-    { color: "neutral", variant: "ghost", class: { base: "text-[var(--ui-text)] hover:bg-[var(--ui-neutral-soft)] active:bg-[var(--ui-neutral)]/10" } },
-    { color: "secondary", variant: "solid", class: { base: "bg-[var(--ui-secondary)] text-[var(--ui-secondary-foreground)] hover:bg-[var(--ui-secondary-hover)] active:bg-[var(--ui-secondary-active)]" } },
-    { color: "secondary", variant: "soft", class: { base: "bg-[var(--ui-secondary-soft)] text-[var(--ui-secondary)] hover:bg-[var(--ui-secondary-soft)]/70 active:bg-[var(--ui-secondary)]/20" } },
-    { color: "secondary", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-secondary)] text-[var(--ui-secondary)] hover:bg-[var(--ui-secondary-soft)] active:bg-[var(--ui-secondary)]/10" } },
-    { color: "secondary", variant: "ghost", class: { base: "text-[var(--ui-secondary)] hover:bg-[var(--ui-secondary-soft)] active:bg-[var(--ui-secondary)]/10" } },
-    { color: "success", variant: "solid", class: { base: "bg-[var(--ui-success)] text-[var(--ui-success-foreground)] hover:bg-[var(--ui-success-hover)] active:bg-[var(--ui-success-active)]" } },
-    { color: "success", variant: "soft", class: { base: "bg-[var(--ui-success-soft)] text-[var(--ui-success)] hover:bg-[var(--ui-success-soft)]/70 active:bg-[var(--ui-success)]/20" } },
-    { color: "success", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-success)] text-[var(--ui-success)] hover:bg-[var(--ui-success-soft)] active:bg-[var(--ui-success)]/10" } },
-    { color: "success", variant: "ghost", class: { base: "text-[var(--ui-success)] hover:bg-[var(--ui-success-soft)] active:bg-[var(--ui-success)]/10" } },
-    { color: "danger", variant: "solid", class: { base: "bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)] hover:bg-[var(--ui-danger-hover)] active:bg-[var(--ui-danger-active)]" } },
-    { color: "danger", variant: "soft", class: { base: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger)] hover:bg-[var(--ui-danger-soft)]/70 active:bg-[var(--ui-danger)]/20" } },
-    { color: "danger", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-danger)] text-[var(--ui-danger)] hover:bg-[var(--ui-danger-soft)] active:bg-[var(--ui-danger)]/10" } },
-    { color: "danger", variant: "ghost", class: { base: "text-[var(--ui-danger)] hover:bg-[var(--ui-danger-soft)] active:bg-[var(--ui-danger)]/10" } },
-    { color: "info", variant: "solid", class: { base: "bg-[var(--ui-info)] text-[var(--ui-info-foreground)] hover:bg-[var(--ui-info-hover)] active:bg-[var(--ui-info-active)]" } },
-    { color: "info", variant: "soft", class: { base: "bg-[var(--ui-info-soft)] text-[var(--ui-info)] hover:bg-[var(--ui-info-soft)]/70 active:bg-[var(--ui-info)]/20" } },
-    { color: "info", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-info)] text-[var(--ui-info)] hover:bg-[var(--ui-info-soft)] active:bg-[var(--ui-info)]/10" } },
-    { color: "info", variant: "ghost", class: { base: "text-[var(--ui-info)] hover:bg-[var(--ui-info-soft)] active:bg-[var(--ui-info)]/10" } },
-    { color: "warning", variant: "solid", class: { base: "bg-[var(--ui-warning)] text-[var(--ui-warning-foreground)] hover:bg-[var(--ui-warning-hover)] active:bg-[var(--ui-warning-active)]" } },
-    { color: "warning", variant: "soft", class: { base: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning)] hover:bg-[var(--ui-warning-soft)]/70 active:bg-[var(--ui-warning)]/20" } },
-    { color: "warning", variant: "outline", class: { base: "ring-1 ring-inset ring-[var(--ui-warning)] text-[var(--ui-warning)] hover:bg-[var(--ui-warning-soft)] active:bg-[var(--ui-warning)]/10" } },
-    { color: "warning", variant: "ghost", class: { base: "text-[var(--ui-warning)] hover:bg-[var(--ui-warning-soft)] active:bg-[var(--ui-warning)]/10" } },
-    // `text`: for an icon button sitting tight against another control's own
-    // border (a field's clear button, a stepper) - `ghost`'s hover background
-    // fill would visually compete with that adjacent border, so this variant
-    // never paints a background at any state and only shifts the text/icon
-    // color on hover.
-    { color: "primary", variant: "text", class: { base: "text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)]" } },
-    { color: "neutral", variant: "text", class: { base: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]" } },
-    { color: "secondary", variant: "text", class: { base: "text-[var(--ui-secondary)] hover:text-[var(--ui-secondary-hover)]" } },
-    { color: "success", variant: "text", class: { base: "text-[var(--ui-success)] hover:text-[var(--ui-success-hover)]" } },
-    { color: "danger", variant: "text", class: { base: "text-[var(--ui-danger)] hover:text-[var(--ui-danger-hover)]" } },
-    { color: "info", variant: "text", class: { base: "text-[var(--ui-info)] hover:text-[var(--ui-info-hover)]" } },
-    { color: "warning", variant: "text", class: { base: "text-[var(--ui-warning)] hover:text-[var(--ui-warning-hover)]" } }
+    { size: "lg", square: true, class: { base: "w-11 px-0" } }
   ],
   defaultVariants: {
     color: "primary",

package/dist/runtime/theme/callout.js

@@ -4,17 +4,17 @@ export const calloutTheme = tv({
     // Border-only accent (not a filled background like Alert) - a callout
     // sits inline in a long stretch of prose, so it stays closer to a
     // styled blockquote than a standalone UI element.
-    root: "flex gap-3 rounded-[var(--ui-radius-md)] border-s-4 bg-[var(--ui-bg-elevated)] p-4",
+    root: "flex gap-3 rounded-[var(--selaras-resolved-radius-md)] border-s-4 bg-[var(--selaras-resolved-surface-elevated)] p-4",
     icon: "mt-0.5 size-5 shrink-0",
-    content: "min-w-0 flex-1 text-sm text-[var(--ui-text-muted)] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
-    title: "font-medium text-[var(--ui-text)]"
+    content: "min-w-0 flex-1 text-sm text-[var(--selaras-resolved-text-muted)] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+    title: "font-medium text-[var(--selaras-resolved-text-default)]"
   },
   variants: {
     type: {
-      note: { root: "border-s-[var(--ui-info)]", icon: "text-[var(--ui-info)]" },
-      tip: { root: "border-s-[var(--ui-success)]", icon: "text-[var(--ui-success)]" },
-      warning: { root: "border-s-[var(--ui-warning)]", icon: "text-[var(--ui-warning)]" },
-      danger: { root: "border-s-[var(--ui-danger)]", icon: "text-[var(--ui-danger)]" }
+      note: { root: "border-s-[var(--selaras-resolved-color-info-border)]", icon: "text-[var(--selaras-resolved-color-info-text)]" },
+      tip: { root: "border-s-[var(--selaras-resolved-color-success-border)]", icon: "text-[var(--selaras-resolved-color-success-text)]" },
+      warning: { root: "border-s-[var(--selaras-resolved-color-warning-border)]", icon: "text-[var(--selaras-resolved-color-warning-text)]" },
+      danger: { root: "border-s-[var(--selaras-resolved-color-danger-border)]", icon: "text-[var(--selaras-resolved-color-danger-text)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/card.js

@@ -1,20 +1,20 @@
 import { tv } from "tailwind-variants";
 export const cardTheme = tv({
   slots: {
-    root: "rounded-[var(--ui-radius-md)] overflow-hidden",
-    header: "p-4 border-b border-[var(--ui-border)]",
+    root: "rounded-[var(--selaras-resolved-radius-md)] overflow-hidden",
+    header: "p-4 border-b border-[var(--selaras-resolved-border-default)]",
     body: "p-4",
-    footer: "p-4 border-t border-[var(--ui-border)]"
+    footer: "p-4 border-t border-[var(--selaras-resolved-border-default)]"
   },
   variants: {
     variant: {
-      outline: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-border)]" },
-      solid: { root: "bg-[var(--ui-bg-elevated)] shadow-[var(--ui-shadow-md)]" },
-      soft: { root: "bg-[var(--ui-bg-elevated)]" },
+      outline: { root: "bg-[var(--selaras-resolved-surface-default)] ring-1 ring-[var(--selaras-resolved-border-default)]" },
+      solid: { root: "bg-[var(--selaras-resolved-surface-elevated)] shadow-[var(--selaras-resolved-shadow-md)]" },
+      soft: { root: "bg-[var(--selaras-resolved-surface-elevated)]" },
       // Same elevated background as soft, plus outline's own border - a
       // middle ground between the two rather than a combination of their
       // literal classes, so it stays its own single, ordinary variant.
-      subtle: { root: "bg-[var(--ui-bg-elevated)] ring-1 ring-[var(--ui-border)]" }
+      subtle: { root: "bg-[var(--selaras-resolved-surface-elevated)] ring-1 ring-[var(--selaras-resolved-border-default)]" }
     }
   },
   defaultVariants: {