@sewadah/selaras 0.1.1 → 0.3.0

package/dist/runtime/theme/command-palette.js

@@ -1,23 +1,25 @@
 import { tv } from "tailwind-variants";
 export const commandPaletteTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
     // Top-anchored (not vertically centered like Modal) - the conventional
     // command-palette position, and it means the dialog doesn't visibly
     // jump up and down as the result list grows/shrinks while typing.
-    content: "fixed left-1/2 top-24 z-[var(--ui-z-modal)] flex max-h-[min(28rem,calc(100vh-8rem))] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 flex-col overflow-hidden rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-lg)] focus:outline-none 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",
-    header: "flex shrink-0 items-center gap-2 border-b border-[var(--ui-border)] px-4",
-    searchIcon: "size-4.5 shrink-0 text-[var(--ui-text-muted)]",
-    input: "h-12 flex-1 bg-transparent text-sm text-[var(--ui-text)] placeholder:text-[var(--ui-text-muted)] focus:outline-none",
+    // The search input is the palette's only editor. Keep focus local to the
+    // editor rather than tinting the palette's whole dialog frame or divider.
+    content: "fixed left-1/2 top-24 z-[var(--selaras-resolved-z-modal)] flex max-h-[min(28rem,calc(100vh-8rem))] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 flex-col overflow-hidden rounded-[var(--selaras-resolved-radius-lg)] bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-lg)] focus:outline-none 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",
+    header: "flex shrink-0 items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-4",
+    searchIcon: "size-4.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    input: "h-12 flex-1 rounded-[var(--selaras-resolved-radius-sm)] bg-transparent text-sm text-[var(--selaras-resolved-text-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)]",
     list: "flex-1 overflow-y-auto p-1",
     group: "py-1",
-    groupLabel: "px-2 py-1 text-xs font-medium text-[var(--ui-text-muted)]",
-    item: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-2 text-sm text-[var(--ui-text)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    itemIcon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
+    groupLabel: "px-2 py-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
+    item: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-2 text-sm text-[var(--selaras-resolved-text-default)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    itemIcon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     itemLabel: "flex-1",
     itemShortcut: "flex shrink-0 items-center gap-1",
-    empty: "p-6 text-center text-sm text-[var(--ui-text-muted)]",
-    footer: "flex shrink-0 items-center gap-3 border-t border-[var(--ui-border)] px-3 py-2 text-xs text-[var(--ui-text-muted)]",
+    empty: "p-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
+    footer: "flex shrink-0 items-center gap-3 border-t border-[var(--selaras-resolved-border-default)] px-3 py-2 text-xs text-[var(--selaras-resolved-text-muted)]",
     footerKey: "flex items-center gap-1"
   }
 });

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

@@ -1,4 +1,13 @@
 export declare const contentNavigationTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     isNested: {
         true: {
             item: string;
@@ -14,6 +23,15 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     chevron: string;
     content: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     isNested: {
         true: {
             item: string;
@@ -29,6 +47,15 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     chevron: string;
     content: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     isNested: {
         true: {
             item: string;

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

@@ -6,13 +6,13 @@ export const contentNavigationTheme = tv({
     // py-2.5 (+ text-sm's 20px line-height) lands close to the 44px touch
     // target guideline without doubling the sidebar's height the way a
     // literal py-3 would across ~40 entries.
-    link: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-2.5 text-[var(--ui-text-muted)] transition-colors hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)]",
-    linkActive: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] bg-[var(--ui-primary-soft)] px-2 py-2.5 text-[var(--ui-primary)]",
-    trigger: "group flex w-full items-center justify-between gap-2 rounded-[var(--ui-radius-sm)] px-2 py-2.5 text-start font-medium text-[var(--ui-text)] transition-colors hover:bg-[var(--ui-bg-elevated)]",
+    link: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-2.5 text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)]",
+    linkActive: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--_selaras-color-subtle)] px-2 py-2.5 text-[var(--_selaras-color-text)]",
+    trigger: "group flex w-full items-center justify-between gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-2.5 text-start font-medium text-[var(--selaras-resolved-text-default)] transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)]",
     // A separate slot from label - this styles the icon a link/group-header
     // shows before its title, not the title text itself.
-    icon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
-    chevron: "size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform group-data-[state=open]:rotate-180",
+    icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    chevron: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)] transition-transform group-data-[state=open]:rotate-180",
     // `ps-4` (16px) reserves the gutter each child's own trunk segment
     // and elbow (on the `item` slot above) reach back into - the trunk
     // line itself has no presence here at all, see theme.css's own
@@ -20,6 +20,15 @@ export const contentNavigationTheme = tv({
     content: "ms-3 flex flex-col gap-0.5 ps-4"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     // ContentNavigation.vue recurses into itself for every nested group,
     // reusing this exact same `item` slot at every depth - unlike
     // NavigationMenu's own `item`/`childItem` (genuinely different slot

package/dist/runtime/theme/content-surround.d.ts

@@ -1,4 +1,13 @@
 export declare const contentSurroundTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     align: {
         start: {
             link: string;
@@ -16,6 +25,15 @@ export declare const contentSurroundTheme: import("tailwind-variants").TVReturnT
     icon: string;
     title: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     align: {
         start: {
             link: string;
@@ -33,6 +51,15 @@ export declare const contentSurroundTheme: import("tailwind-variants").TVReturnT
     icon: string;
     title: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     align: {
         start: {
             link: string;

package/dist/runtime/theme/content-surround.js

@@ -1,13 +1,22 @@
 import { tv } from "tailwind-variants";
 export const contentSurroundTheme = tv({
   slots: {
-    root: "grid grid-cols-2 gap-4 border-t border-[var(--ui-border)] pt-6",
-    link: "group flex flex-col gap-1 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] p-4 transition-colors hover:border-[var(--ui-border-hover)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
-    label: "flex items-center gap-1 text-xs font-medium text-[var(--ui-text-muted)]",
+    root: "grid grid-cols-2 gap-4 border-t border-[var(--selaras-resolved-border-default)] pt-6",
+    link: "group flex flex-col gap-1 rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] p-4 transition-colors hover:border-[var(--_selaras-color-border)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
+    label: "flex items-center gap-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
     icon: "size-3.5 shrink-0 rtl:rotate-180",
-    title: "text-sm font-medium text-[var(--ui-text)] transition-colors group-hover:text-[var(--ui-primary)]"
+    title: "text-sm font-medium text-[var(--selaras-resolved-text-default)] transition-colors group-hover:text-[var(--_selaras-color-text)]"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     // `next` right-aligns its own text and flips the label's icon+text
     // order (icon trailing, not leading) - `prev`/`next` read as mirror
     // images of each other, not two copies of the same layout.

package/dist/runtime/theme/content-toc.d.ts

@@ -1,4 +1,13 @@
 export declare const contentTocTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     active: {
         true: {
             link: string;
@@ -17,6 +26,15 @@ export declare const contentTocTheme: import("tailwind-variants").TVReturnType<{
     railSegments: string;
     railSegment: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     active: {
         true: {
             link: string;
@@ -35,6 +53,15 @@ export declare const contentTocTheme: import("tailwind-variants").TVReturnType<{
     railSegments: string;
     railSegment: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     active: {
         true: {
             link: string;

package/dist/runtime/theme/content-toc.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const contentTocTheme = tv({
   slots: {
     root: "flex flex-col gap-2 text-sm",
-    title: "font-medium text-[var(--ui-text)]",
+    title: "font-medium text-[var(--selaras-resolved-text-default)]",
     // relative + start padding reserves room for the rail (an absolutely
     // positioned box, sized/placed entirely by ContentToc.vue's JS
     // measurement - this only wraps the <ul>, not the title, matching the
@@ -14,7 +14,7 @@ export const contentTocTheme = tv({
     // supplementary "on this page" list, not primary navigation - but
     // still meaningfully bigger than the original py-0.5. No left
     // border/padding for the indicator anymore - the rail owns that job.
-    link: "block py-1.5 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: "block py-1.5 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)]",
     content: "ms-3 flex flex-col gap-1",
     // The rail is a single continuous "wire" connecting every heading
     // (not just the active one), drawn as an SVG path and applied as a
@@ -25,17 +25,26 @@ export const contentTocTheme = tv({
     // Two masked divs share that same path shape:
     railContainer: "absolute start-0 top-0 rtl:-scale-x-100",
     // - a faint always-visible track (the full path, every heading).
-    railTrack: "absolute inset-0 bg-[var(--ui-text-muted)]/25",
+    railTrack: "absolute inset-0 bg-[var(--selaras-resolved-text-muted)]/25",
     // - a primary-colored overlay, masked identically, whose own child
     //   blocks (railSegment, one per contiguous run of active headings)
     //   only paint where they fall within the path - so the "lit"
     //   portion follows the same curves as the track under it.
     railSegments: "absolute inset-0",
-    railSegment: "absolute w-full bg-[var(--ui-primary)] transition-[top,height] duration-200 ease-out"
+    railSegment: "absolute w-full bg-[var(--_selaras-color-fill)] transition-[top,height] duration-200 ease-out"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     active: {
-      true: { link: "text-[var(--ui-primary)]" }
+      true: { link: "text-[var(--_selaras-color-text)]" }
     }
   }
 });

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

@@ -1,20 +1,20 @@
 import { tv } from "tailwind-variants";
 export const contextMenuTheme = tv({
   slots: {
-    // Same transient-popover layering tier as Dropdown - --ui-z-dropdown,
+    // Same transient-popover layering tier as Dropdown - --selaras-resolved-z-dropdown,
     // not a separate token of its own.
-    content: "z-[var(--ui-z-dropdown)] min-w-40 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-1 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",
-    item: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-1.5 text-sm text-[var(--ui-text)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    icon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
-    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]"
+    content: "z-[var(--selaras-resolved-z-dropdown)] min-w-40 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-1 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",
+    item: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-1.5 text-sm text-[var(--selaras-resolved-text-default)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--selaras-resolved-border-default)]"
   },
   variants: {
     // For a delete/remove-style action - same single flag Dropdown's own
     // theme uses, rather than the full 7-color palette Badge/Chip expose.
     destructive: {
       true: {
-        item: "text-[var(--ui-danger)] data-[highlighted]:bg-[var(--ui-danger-soft)]",
-        icon: "text-[var(--ui-danger)]"
+        item: "text-[var(--selaras-resolved-color-danger-text)] data-[highlighted]:bg-[var(--selaras-resolved-color-danger-subtle-hover)] data-[highlighted]:text-[var(--selaras-resolved-color-danger-on-subtle)]",
+        icon: "text-current"
       }
     }
   }

package/dist/runtime/theme/dashboard-navbar.d.ts

@@ -2,18 +2,18 @@ export declare const dashboardNavbarTheme: import("tailwind-variants").TVReturnT
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            right?: import("tailwind-variants").ClassValue;
-            left?: import("tailwind-variants").ClassValue;
             title?: import("tailwind-variants").ClassValue;
+            left?: import("tailwind-variants").ClassValue;
+            right?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            right?: import("tailwind-variants").ClassValue;
-            left?: import("tailwind-variants").ClassValue;
             title?: import("tailwind-variants").ClassValue;
+            left?: import("tailwind-variants").ClassValue;
+            right?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -25,9 +25,9 @@ export declare const dashboardNavbarTheme: import("tailwind-variants").TVReturnT
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            right?: import("tailwind-variants").ClassValue;
-            left?: import("tailwind-variants").ClassValue;
             title?: import("tailwind-variants").ClassValue;
+            left?: import("tailwind-variants").ClassValue;
+            right?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/runtime/theme/dashboard-navbar.js

@@ -1,9 +1,9 @@
 import { tv } from "tailwind-variants";
 export const dashboardNavbarTheme = tv({
   slots: {
-    root: "flex h-14 shrink-0 items-center justify-between gap-4 border-b border-[var(--ui-border)] bg-[var(--ui-bg)] px-4",
+    root: "flex h-14 shrink-0 items-center justify-between gap-4 border-b border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] px-4",
     left: "flex min-w-0 items-center gap-2",
-    title: "truncate font-medium text-[var(--ui-text)]",
+    title: "truncate font-medium text-[var(--selaras-resolved-text-default)]",
     right: "flex shrink-0 items-center gap-2"
   }
 });

package/dist/runtime/theme/dashboard-resize-handle.js

@@ -5,13 +5,13 @@ export const dashboardResizeHandleTheme = tv({
     // visible line (a comfortable grab target, invisible padding on
     // either side) - harmless when both adjacent panels share one
     // background, but once DashboardSidebar's own root reads as
-    // --ui-bg-elevated (a step apart from DashboardPanel's own plain
-    // --ui-bg), that "invisible" padding stops being invisible: it reads
+    // --selaras-resolved-surface-elevated (a step apart from DashboardPanel's own plain
+    // --selaras-resolved-surface-default), that "invisible" padding stops being invisible: it reads
     // as a sliver of the wrong background bleeding through right at the
     // sidebar's own edge. A background split exactly down the middle -
     // matching each side's real background - makes the hit area blend
     // into whichever panel it happens to be sitting over instead of
     // showing through as its own separate strip.
-    root: "bg-[linear-gradient(to_right,var(--ui-bg-elevated)_50%,var(--ui-bg)_50%)]"
+    root: "bg-[linear-gradient(to_right,var(--selaras-resolved-surface-elevated)_50%,var(--selaras-resolved-surface-default)_50%)]"
   }
 });

package/dist/runtime/theme/dashboard-sidebar.js

@@ -12,14 +12,14 @@ export const dashboardSidebarTheme = tv({
     // every pointermove instead, frequently enough that a short duration
     // like this reads as smoothed-out tracking rather than lag, not a
     // rubber-band fight against the cursor.
-    // --ui-bg-elevated (not the base --ui-bg the main content area sits
+    // --selaras-resolved-surface-elevated (not the base --selaras-resolved-surface-default the main content area sits
     // on) - a step darker/lighter than the page background, the same
     // token hover states elsewhere already use for "a surface slightly
     // apart from the page" - gives the sidebar a genuine, real contrast
     // against DashboardPanel's own content instead of both areas reading
     // as one contiguous white/dark surface with only the resize-handle's
     // thin line between them.
-    root: "flex h-full flex-col overflow-hidden bg-[var(--ui-bg-elevated)] transition-[flex-grow] duration-200 ease-out",
+    root: "flex h-full flex-col overflow-hidden bg-[var(--selaras-resolved-surface-elevated)] transition-[flex-grow] duration-200 ease-out",
     // No border, no height lock to DashboardNavbar's own h-14 - an
     // earlier version of this tried exactly that (to fix a real reported
     // bug: the two areas' bottom borders landing a few px apart), but
@@ -35,6 +35,6 @@ export const dashboardSidebarTheme = tv({
     header: "shrink-0 p-4",
     scrollArea: "flex-1 min-h-0",
     body: "p-2",
-    footer: "shrink-0 border-t border-[var(--ui-border)] p-4"
+    footer: "shrink-0 border-t border-[var(--selaras-resolved-border-default)] p-4"
   }
 });

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

@@ -10,19 +10,19 @@ export const datePickerTheme = tv({
     // slot for why (same fix, same reasoning: hovering while focused is
     // unavoidable here, and would otherwise let the plain gray hover ring
     // beat the primary focus-within ring).
-    field: "inline-flex w-full items-center gap-1 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] ring-1 ring-inset ring-[var(--ui-border)] transition-[color,background-color,box-shadow] not-focus-within:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus-within:ring-2 focus-within:ring-[var(--ui-primary)] has-[[data-disabled]]:opacity-50 has-[[data-disabled]]:pointer-events-none",
+    field: "inline-flex w-full items-center gap-1 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] transition-[color,background-color,box-shadow] not-focus-within:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus-within:ring-2 focus-within:ring-[var(--_selaras-color-focus)] has-[[data-disabled]]:opacity-50 has-[[data-disabled]]:pointer-events-none",
     // rounded-sm + tabular-nums keeps digit width stable as a segment's
     // value changes; the segment itself is the contenteditable element
     // Reka renders, so focus state is real :focus, not a data-attribute.
-    segment: "rounded-[var(--ui-radius-sm)] px-0.5 text-[var(--ui-text)] tabular-nums outline-none focus:bg-[var(--ui-primary)]/15 data-[reka-date-field-segment=literal]:px-0 data-[reka-date-field-segment=literal]:text-[var(--ui-text-muted)]",
+    segment: "rounded-[var(--selaras-resolved-radius-sm)] px-0.5 text-[var(--selaras-resolved-text-default)] tabular-nums outline-none focus:bg-[var(--_selaras-color-subtle)]/15 data-[reka-date-field-segment=literal]:px-0 data-[reka-date-field-segment=literal]:text-[var(--selaras-resolved-text-muted)]",
     // Between the two segment groups in range mode - a plain en dash, not an
     // arrow glyph, so there's nothing directional to mirror under RTL.
-    separator: "px-0.5 text-[var(--ui-text-muted)]",
+    separator: "px-0.5 text-[var(--selaras-resolved-text-muted)]",
     // Copied from theme/dropdown.ts's `content` - the more complete of this
     // library's two floating-panel precedents (directional slide-in, not
     // just fade/zoom).
-    content: "z-[var(--ui-z-dropdown)] rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-3 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",
-    // The `mobileModal` path's own content wrapper - none of `content`'s
+    content: "z-[var(--selaras-resolved-z-dropdown)] rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-3 shadow-[var(--selaras-resolved-shadow-md)] ring-1 ring-[var(--selaras-resolved-border-default)] data-[state=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",
+    // The `adaptive` path's own content wrapper - none of `content`'s
     // own popover chrome (ring/shadow/rounded/animate-in/slide-in, all
     // tied to a data-[side=] this never gets since it isn't Floating-UI
     // positioned) applies here, since Modal's own card already provides
@@ -30,14 +30,14 @@ export const datePickerTheme = tv({
     // wants the same breathing room it gets in the popover.
     mobileContent: "p-3",
     header: "mb-2 flex items-center justify-between gap-2",
-    heading: "text-sm font-medium text-[var(--ui-text)]",
+    heading: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
     // Wraps one <table> per visible month (numberOfMonths>1, e.g. range
     // mode's default of 2) - without it, multiple month tables just stack
     // vertically (block-level default), not side by side.
     grids: "flex flex-col gap-4 sm:flex-row",
     grid: "w-full border-collapse",
     gridHead: "",
-    headCell: "size-8 text-xs font-medium text-[var(--ui-text-muted)]",
+    headCell: "size-8 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
     // The <td> wrapper - just spacing, not the day's own look (that's the
     // nested Button inside it, styled directly in DatePicker.vue via a
     // plain :ui override string, same as Pagination's page buttons - no
@@ -49,8 +49,8 @@ export const datePickerTheme = tv({
     viewGrid: "grid grid-cols-3 gap-1",
     // Hour/minute granularity only - sits below the day grid, separated by
     // a divider so it doesn't read as part of the grid itself.
-    timeSection: "mt-3 flex items-center justify-center gap-1.5 border-t border-[var(--ui-border)] pt-3",
-    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+    timeSection: "mt-3 flex items-center justify-center gap-1.5 border-t border-[var(--selaras-resolved-border-default)] pt-3",
+    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },
   variants: {
     size: {
@@ -59,7 +59,7 @@ export const datePickerTheme = tv({
       lg: { field: "h-11 px-3.5 text-base" }
     },
     invalid: {
-      true: { field: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)]" }
+      true: { field: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus-within:ring-[var(--_selaras-color-focus)]" }
     },
     // Range mode's day cells butt up against each other with no horizontal
     // gap, so a highlighted run of days reads as one continuous connected

package/dist/runtime/theme/drawer.js

@@ -1,16 +1,16 @@
 import { tv } from "tailwind-variants";
 export const drawerTheme = 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",
     // A small rounded grip bar - purely visual, signals "draggable" the
     // same way a real bottom sheet's handle does. Centered via the
     // header's own flex row would fight the header's title/close layout,
     // so it gets its own row above everything else instead.
-    handle: "mx-auto my-2 h-1.5 w-12 shrink-0 rounded-full bg-[var(--ui-border)]",
+    handle: "mx-auto my-2 h-1.5 w-12 shrink-0 rounded-full bg-[var(--selaras-resolved-border-default)]",
     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"
@@ -25,10 +25,10 @@ export const drawerTheme = tv({
     // identity, distinct from Slideover's flush-by-default/optional-
     // floating-inset treatment.
     side: {
-      top: { content: "rounded-b-[var(--ui-radius-lg)]" },
-      bottom: { content: "rounded-t-[var(--ui-radius-lg)]" },
-      left: { content: "max-w-md rounded-e-[var(--ui-radius-lg)]" },
-      right: { content: "max-w-md rounded-s-[var(--ui-radius-lg)]" }
+      top: { content: "rounded-b-[var(--selaras-resolved-radius-lg)]" },
+      bottom: { content: "rounded-t-[var(--selaras-resolved-radius-lg)]" },
+      left: { content: "max-w-md rounded-e-[var(--selaras-resolved-radius-lg)]" },
+      right: { content: "max-w-md rounded-s-[var(--selaras-resolved-radius-lg)]" }
     },
     // See slideover.ts for why this lives entirely in the variant (and
     // compoundVariants below), not the base slot strings - tailwind-merge

package/dist/runtime/theme/dropdown.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
 export const dropdownTheme = tv({
   slots: {
-    content: "z-[var(--ui-z-dropdown)] min-w-40 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-1 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",
-    item: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-1.5 text-sm text-[var(--ui-text)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    icon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
-    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
-    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+    content: "z-[var(--selaras-resolved-z-dropdown)] min-w-40 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-1 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",
+    item: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-1.5 text-sm text-[var(--selaras-resolved-text-default)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--selaras-resolved-border-default)]",
+    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },
   variants: {
     // For a delete/remove-style action - deliberately just this one flag
@@ -13,8 +13,8 @@ export const dropdownTheme = tv({
     // item realistically only ever needs this one special case.
     destructive: {
       true: {
-        item: "text-[var(--ui-danger)] data-[highlighted]:bg-[var(--ui-danger-soft)]",
-        icon: "text-[var(--ui-danger)]"
+        item: "text-[var(--selaras-resolved-color-danger-text)] data-[highlighted]:bg-[var(--selaras-resolved-color-danger-subtle-hover)] data-[highlighted]:text-[var(--selaras-resolved-color-danger-on-subtle)]",
+        icon: "text-current"
       }
     }
   }

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

@@ -4,6 +4,15 @@ export declare const fileTreeTheme: import("tailwind-variants").TVReturnType<{
             row: string;
         };
     };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     isNested: {
         true: {
             item: string;
@@ -22,6 +31,15 @@ export declare const fileTreeTheme: import("tailwind-variants").TVReturnType<{
             row: string;
         };
     };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     isNested: {
         true: {
             item: string;
@@ -40,6 +58,15 @@ export declare const fileTreeTheme: import("tailwind-variants").TVReturnType<{
             row: string;
         };
     };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     isNested: {
         true: {
             item: string;