@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -20,27 +20,13 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     hasLeadingIcon: {
         true: {};
@@ -81,27 +67,13 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     hasLeadingIcon: {
         true: {};
@@ -142,27 +114,13 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     hasLeadingIcon: {
         true: {};

package/dist/runtime/theme/input.js

@@ -9,9 +9,9 @@ export const inputTheme = tv({
     // focus ring's own color comes from the `color` variant below, not
     // hardcoded here - hover's own color stays neutral regardless of
     // `color`, matching every other component's own hover state.
-    base: "w-full rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] text-[var(--ui-text)] ring-1 ring-inset ring-[var(--ui-border)] placeholder:text-[var(--ui-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 disabled:opacity-50 disabled:pointer-events-none",
-    leadingIcon: "absolute start-2.5 shrink-0 text-[var(--ui-text-muted)]",
-    trailingIcon: "absolute end-2.5 shrink-0 text-[var(--ui-text-muted)]",
+    base: "w-full rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    leadingIcon: "absolute start-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    trailingIcon: "absolute end-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     // A separate slot from trailingIcon (not reused) - that one is a
     // decorative, non-interactive icon; this is a real dismiss button.
     // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring
@@ -30,17 +30,17 @@ export const inputTheme = tv({
       md: { base: "h-10 px-3 text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5", clear: "size-9" },
       lg: { base: "h-11 px-3.5 text-base", leadingIcon: "size-5", trailingIcon: "size-5", clear: "size-10" }
     },
-    // Focus-ring color only - the resting ring stays --ui-border regardless
+    // Focus-ring color only - the resting ring stays --selaras-resolved-border-default regardless
     // of `color`, matching a Nuxt-ecosystem component kit's own Input
     // (confirmed by reading its docs directly, not assumed).
     color: {
-      primary: { base: "focus:ring-[var(--ui-primary)]" },
-      neutral: { base: "focus:ring-[var(--ui-bg-inverted)]" },
-      secondary: { base: "focus:ring-[var(--ui-secondary)]" },
-      success: { base: "focus:ring-[var(--ui-success)]" },
-      danger: { base: "focus:ring-[var(--ui-danger)]" },
-      info: { base: "focus:ring-[var(--ui-info)]" },
-      warning: { base: "focus:ring-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     hasLeadingIcon: {
       true: {}
@@ -54,7 +54,7 @@ export const inputTheme = tv({
     // Checkbox/Switch fix for why declaration order (not runtime call
     // order) is what decides this.
     invalid: {
-      true: { base: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus:ring-[var(--ui-danger)]" }
+      true: { base: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   compoundVariants: [

package/dist/runtime/theme/kbd.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const kbdTheme = tv({
   slots: {
-    base: "inline-flex items-center justify-center rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)] bg-[var(--ui-bg-elevated)] font-mono font-medium text-[var(--ui-text-muted)]"
+    base: "inline-flex items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] border border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-elevated)] font-mono font-medium text-[var(--selaras-resolved-text-muted)]"
   },
   variants: {
     size: {

package/dist/runtime/theme/modal.js

@@ -1,16 +1,16 @@
 import { tv } from "tailwind-variants";
 export const modalTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)]",
     // flex flex-col + the header/footer's own shrink-0 (native to a flex
     // child, no extra class needed) let a tall body scroll internally via
     // its own overflow-y-auto below, capped to the viewport height so a
     // centered dialog can never overflow past the screen edges regardless
     // of content length.
-    content: "fixed left-1/2 top-1/2 z-[var(--ui-z-modal)] flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-lg)] focus:outline-none",
+    content: "fixed left-1/2 top-1/2 z-[var(--selaras-resolved-z-modal)] flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col rounded-[var(--selaras-resolved-radius-lg)] 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)]",
     // Groups the maximize + close buttons as header's second flex item, so
     // `header`'s own justify-between still splits [title block] / [buttons]
     // correctly regardless of how many buttons are actually shown.

package/dist/runtime/theme/navigation-menu.d.ts

@@ -1,3 +1,4 @@
+import type { VariantProps } from 'tailwind-variants';
 export declare const navigationMenuTheme: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
@@ -222,3 +223,4 @@ export declare const navigationMenuTheme: import("tailwind-variants").TVReturnTy
     separator: string;
 }>>;
 export type NavigationMenuThemeSlots = keyof (typeof navigationMenuTheme)['slots'];
+export type NavigationMenuThemeVariants = VariantProps<typeof navigationMenuTheme>;

package/dist/runtime/theme/navigation-menu.js

@@ -29,7 +29,7 @@ export const navigationMenuTheme = tv({
     // `childLink` used from 2nd level down, `ps-0`/gap fixes chasing each
     // new place the two silently drifted apart) - genuinely not worth it;
     // one style everywhere is both simpler and correct by construction.
-    link: "group relative flex items-center gap-2 rounded-[var(--ui-radius-md)] px-2.5 py-1.5 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
+    link: "group relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-md)] px-2.5 py-1.5 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
     linkIcon: "size-4 shrink-0",
     // Collapsed-rail fallback for a top-level item with no icon (see the
     // `collapsed` variant below) - same box size as `linkIcon` so it
@@ -51,18 +51,18 @@ export const navigationMenuTheme = tv({
     // indented nested list into a multi-column grid). Both now live in
     // the `orientation` variant below instead, so vertical gets none of it.
     content: "p-2",
-    viewport: "absolute inset-x-0 top-full z-[var(--ui-z-dropdown)] h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] transition-[height] duration-200",
+    viewport: "absolute inset-x-0 top-full z-[var(--selaras-resolved-z-dropdown)] h-[var(--reka-navigation-menu-viewport-height)] w-full 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)] transition-[height] duration-200",
     childList: "grid gap-1",
     childItem: "",
-    childLink: "group relative flex items-center gap-2 rounded-[var(--ui-radius-md)] px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
+    childLink: "group relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-md)] px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
     childLinkLabel: "truncate",
     // `type: 'label'`/`'separator'` items (see NavigationMenuItem's own
     // doc comment) - non-interactive, so neither gets `link`'s own
     // hover/focus/active treatment. groupLabel's own px-2.5 matches
     // link's, so a "Links"-style heading sits flush with the real items
     // below it.
-    groupLabel: "px-2.5 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-[var(--ui-text-muted)] first:pt-0",
-    separator: "my-1 h-px bg-[var(--ui-border)]"
+    groupLabel: "px-2.5 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-[var(--selaras-resolved-text-muted)] first:pt-0",
+    separator: "my-1 h-px bg-[var(--selaras-resolved-border-default)]"
   },
   variants: {
     orientation: {
@@ -139,7 +139,7 @@ export const navigationMenuTheme = tv({
     },
     active: {
       true: {},
-      false: { link: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]", childLink: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]" }
+      false: { link: "text-[var(--selaras-resolved-text-muted)] hover:text-[var(--selaras-resolved-text-default)]", childLink: "text-[var(--selaras-resolved-text-muted)] hover:text-[var(--selaras-resolved-text-default)]" }
     },
     disabled: {
       true: { link: "pointer-events-none opacity-50", childLink: "pointer-events-none opacity-50" }
@@ -190,31 +190,20 @@ export const navigationMenuTheme = tv({
     }
   },
   compoundVariants: [
-    { variant: "pill", active: false, class: { link: "hover:bg-[var(--ui-bg-elevated)]", childLink: "hover:bg-[var(--ui-bg-elevated)]" } },
-    { variant: "pill", active: true, color: "primary", class: { link: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]" } },
-    { variant: "pill", active: true, color: "neutral", class: { link: "bg-[var(--ui-neutral-soft)] text-[var(--ui-text)]" } },
-    { variant: "pill", active: true, color: "secondary", class: { link: "bg-[var(--ui-secondary-soft)] text-[var(--ui-secondary)]" } },
-    { variant: "pill", active: true, color: "success", class: { link: "bg-[var(--ui-success-soft)] text-[var(--ui-success)]" } },
-    { variant: "pill", active: true, color: "danger", class: { link: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger)]" } },
-    { variant: "pill", active: true, color: "info", class: { link: "bg-[var(--ui-info-soft)] text-[var(--ui-info)]" } },
-    { variant: "pill", active: true, color: "warning", class: { link: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning)]" } },
-    { variant: "link", active: true, color: "primary", class: { link: "text-[var(--ui-primary)]" } },
-    { variant: "link", active: true, color: "neutral", class: { link: "text-[var(--ui-text)]" } },
-    { variant: "link", active: true, color: "secondary", class: { link: "text-[var(--ui-secondary)]" } },
-    { variant: "link", active: true, color: "success", class: { link: "text-[var(--ui-success)]" } },
-    { variant: "link", active: true, color: "danger", class: { link: "text-[var(--ui-danger)]" } },
-    { variant: "link", active: true, color: "info", class: { link: "text-[var(--ui-info)]" } },
-    { variant: "link", active: true, color: "warning", class: { link: "text-[var(--ui-warning)]" } },
+    { variant: "pill", active: false, class: { link: "hover:bg-[var(--selaras-resolved-surface-elevated)]", childLink: "hover:bg-[var(--selaras-resolved-surface-elevated)]" } },
+    // All registered non-neutral roles use the selected semantic recipe.
+    // Neutral follows these entries so its functional-token classes win via
+    // tailwind-merge. Keeping color as a real variant still lets consumer
+    // compound extensions match registered role names.
+    { variant: "pill", active: true, class: { link: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-text)]" } },
+    { variant: "pill", active: true, color: "neutral", class: { link: "bg-[var(--_selaras-color-subtle)] text-[var(--selaras-resolved-text-default)]" } },
+    { variant: "link", active: true, class: { link: "text-[var(--_selaras-color-text)]" } },
+    { variant: "link", active: true, color: "neutral", class: { link: "text-[var(--selaras-resolved-text-default)]" } },
     // Child links (inside horizontal's own dropdown panel) always get the
     // "active" text-color treatment regardless of `variant` - a pill-style
     // background on every list row in a dropdown would be visual noise.
-    { active: true, color: "primary", class: { childLink: "text-[var(--ui-primary)]" } },
-    { active: true, color: "neutral", class: { childLink: "text-[var(--ui-text)]" } },
-    { active: true, color: "secondary", class: { childLink: "text-[var(--ui-secondary)]" } },
-    { active: true, color: "success", class: { childLink: "text-[var(--ui-success)]" } },
-    { active: true, color: "danger", class: { childLink: "text-[var(--ui-danger)]" } },
-    { active: true, color: "info", class: { childLink: "text-[var(--ui-info)]" } },
-    { active: true, color: "warning", class: { childLink: "text-[var(--ui-warning)]" } },
+    { active: true, class: { childLink: "text-[var(--_selaras-color-text)]" } },
+    { active: true, color: "neutral", class: { childLink: "text-[var(--selaras-resolved-text-default)]" } },
     // The highlight bar reuses whatever text color `active` already set via
     // the compound variants above (`after:bg-current`) instead of a second,
     // parallel per-color axis - it's only ever visible together with the

package/dist/runtime/theme/page-header.js

@@ -1,8 +1,8 @@
 import { tv } from "tailwind-variants";
 export const pageHeaderTheme = tv({
   slots: {
-    root: "flex flex-col gap-2 border-b border-[var(--ui-border)] pb-6",
-    title: "text-3xl font-semibold tracking-tight text-[var(--ui-text)]",
-    description: "text-base text-[var(--ui-text-muted)]"
+    root: "flex flex-col gap-2 border-b border-[var(--selaras-resolved-border-default)] pb-6",
+    title: "text-3xl font-semibold tracking-tight text-[var(--selaras-resolved-text-default)]",
+    description: "text-base text-[var(--selaras-resolved-text-muted)]"
   }
 });

package/dist/runtime/theme/pagination.js

@@ -6,7 +6,7 @@ export const paginationTheme = tv({
     // Sized per-variant to match Button's own square icon-button dimensions
     // (w-8/w-10/w-11) so the ellipsis lines up with the surrounding
     // page-number buttons instead of collapsing to its own text size.
-    ellipsis: "inline-flex items-center justify-center text-[var(--ui-text-muted)]"
+    ellipsis: "inline-flex items-center justify-center text-[var(--selaras-resolved-text-muted)]"
   },
   variants: {
     size: {

package/dist/runtime/theme/pin-input.d.ts

@@ -11,27 +11,13 @@ export declare const pinInputTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            input: string;
-        };
-        neutral: {
-            input: string;
-        };
-        secondary: {
-            input: string;
-        };
-        success: {
-            input: string;
-        };
-        danger: {
-            input: string;
-        };
-        info: {
-            input: string;
-        };
-        warning: {
-            input: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
     invalid: {
         true: {
@@ -54,27 +40,13 @@ export declare const pinInputTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            input: string;
-        };
-        neutral: {
-            input: string;
-        };
-        secondary: {
-            input: string;
-        };
-        success: {
-            input: string;
-        };
-        danger: {
-            input: string;
-        };
-        info: {
-            input: string;
-        };
-        warning: {
-            input: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
     invalid: {
         true: {
@@ -97,27 +69,13 @@ export declare const pinInputTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            input: string;
-        };
-        neutral: {
-            input: string;
-        };
-        secondary: {
-            input: string;
-        };
-        success: {
-            input: string;
-        };
-        danger: {
-            input: string;
-        };
-        info: {
-            input: string;
-        };
-        warning: {
-            input: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
     invalid: {
         true: {

package/dist/runtime/theme/pin-input.js

@@ -5,7 +5,7 @@ export const pinInputTheme = tv({
     // Mirrors Input.vue's own `base` slot look (theme/input.ts) - same
     // ring/hover/focus/disabled treatment - but square instead of
     // full-width, one box per character.
-    input: "rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] text-center font-medium 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)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 disabled:opacity-50 disabled:pointer-events-none"
+    input: "rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-center font-medium 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)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none"
   },
   variants: {
     // Square boxes matching Input's own h-8/h-10/h-11 height scale for
@@ -15,22 +15,24 @@ export const pinInputTheme = tv({
       md: { input: "size-10 text-base" },
       lg: { input: "size-11 text-lg" }
     },
-    // Focus-ring color only - the resting ring stays --ui-border
-    // regardless, matching Input's own `color` variant exactly.
+    // Color is intentionally a structural variant: the selected role binds
+    // the CSS recipe at the component root. Keeping the known keys lets
+    // theme extensions add their own role conditions without coercing a
+    // registered custom role back to primary.
     color: {
-      primary: { input: "focus:ring-[var(--ui-primary)]" },
-      neutral: { input: "focus:ring-[var(--ui-bg-inverted)]" },
-      secondary: { input: "focus:ring-[var(--ui-secondary)]" },
-      success: { input: "focus:ring-[var(--ui-success)]" },
-      danger: { input: "focus:ring-[var(--ui-danger)]" },
-      info: { input: "focus:ring-[var(--ui-info)]" },
-      warning: { input: "focus:ring-[var(--ui-warning)]" }
+      primary: {},
+      neutral: {},
+      secondary: {},
+      success: {},
+      danger: {},
+      info: {},
+      warning: {}
     },
     // Declared last (after color) so tailwind-merge lets its own
     // focus:ring override win over color's - matches Input's own
     // documented reasoning for this order.
     invalid: {
-      true: { input: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus:ring-[var(--ui-danger)]" }
+      true: { input: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/popover.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const popoverTheme = tv({
   slots: {
-    content: "z-[var(--ui-z-dropdown)] rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-4 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+    content: "z-[var(--selaras-resolved-z-dropdown)] rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-4 shadow-[var(--selaras-resolved-shadow-md)] ring-1 ring-[var(--selaras-resolved-border-default)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   }
 });

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

@@ -11,34 +11,13 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        neutral: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        secondary: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        success: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        danger: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        info: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        warning: {
-            indicator: string;
-            circleIndicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     indeterminate: {
         true: {
@@ -72,34 +51,13 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        neutral: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        secondary: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        success: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        danger: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        info: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        warning: {
-            indicator: string;
-            circleIndicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     indeterminate: {
         true: {
@@ -133,34 +91,13 @@ export declare const progressTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        neutral: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        secondary: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        success: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        danger: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        info: {
-            indicator: string;
-            circleIndicator: string;
-        };
-        warning: {
-            indicator: string;
-            circleIndicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     indeterminate: {
         true: {

package/dist/runtime/theme/progress.js

@@ -2,17 +2,17 @@ import { tv } from "tailwind-variants";
 export const progressTheme = tv({
   slots: {
     // Linear
-    root: "relative w-full overflow-hidden rounded-full bg-[var(--ui-bg-elevated)]",
-    indicator: "h-full rounded-full bg-[var(--ui-primary)]",
+    root: "relative w-full overflow-hidden rounded-full bg-[var(--selaras-resolved-surface-elevated)]",
+    indicator: "h-full rounded-full bg-[var(--_selaras-color-indicator)]",
     // Circular - a relative wrapper (for the centered label overlay) around
     // an SVG pair: a static background track circle plus an animated
     // foreground arc whose stroke-dasharray/dashoffset (computed in the
     // component, from the real geometry) draws the current percentage.
     circleRoot: "relative inline-flex items-center justify-center",
     circleWrapper: "",
-    circleTrack: "stroke-[var(--ui-bg-elevated)]",
-    circleIndicator: "stroke-[var(--ui-primary)]",
-    label: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--ui-text)]"
+    circleTrack: "stroke-[var(--selaras-resolved-surface-elevated)]",
+    circleIndicator: "stroke-[var(--_selaras-color-indicator)]",
+    label: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--selaras-resolved-text-default)]"
   },
   variants: {
     size: {
@@ -21,13 +21,13 @@ export const progressTheme = tv({
       lg: { root: "h-3" }
     },
     color: {
-      primary: { indicator: "bg-[var(--ui-primary)]", circleIndicator: "stroke-[var(--ui-primary)]" },
-      neutral: { indicator: "bg-[var(--ui-text)]", circleIndicator: "stroke-[var(--ui-text)]" },
-      secondary: { indicator: "bg-[var(--ui-secondary)]", circleIndicator: "stroke-[var(--ui-secondary)]" },
-      success: { indicator: "bg-[var(--ui-success)]", circleIndicator: "stroke-[var(--ui-success)]" },
-      danger: { indicator: "bg-[var(--ui-danger)]", circleIndicator: "stroke-[var(--ui-danger)]" },
-      info: { indicator: "bg-[var(--ui-info)]", circleIndicator: "stroke-[var(--ui-info)]" },
-      warning: { indicator: "bg-[var(--ui-warning)]", circleIndicator: "stroke-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // No `value` (Reka's own ProgressRoot "indeterminate" semantics) - the
     // linear indicator slides back and forth instead of tracking a width,