@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -4,15 +4,25 @@ export const splitterResizeHandleTheme = tv({
     // A slim hit area with a thinner visible line inside it - the visible
     // line alone would be too narrow a target to reliably grab.
     root: "group relative shrink-0 bg-transparent outline-none",
-    line: "absolute bg-[var(--ui-border)] transition-colors group-hover:bg-[var(--ui-primary)] group-data-[state=drag]:bg-[var(--ui-primary)]"
+    line: "absolute bg-[var(--selaras-resolved-border-default)] transition-colors group-hover:bg-[var(--_selaras-color-indicator)] group-data-[state=drag]:bg-[var(--_selaras-color-indicator)]"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     direction: {
       horizontal: { root: "w-1 cursor-col-resize", line: "inset-y-0 start-1/2 w-px -translate-x-1/2" },
       vertical: { root: "h-1 cursor-row-resize", line: "inset-x-0 top-1/2 h-px -translate-y-1/2" }
     }
   },
   defaultVariants: {
+    color: "primary",
     direction: "horizontal"
   }
 });

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

@@ -31,34 +31,13 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            indicator: string;
-            separator: string;
-        };
-        neutral: {
-            indicator: string;
-            separator: string;
-        };
-        secondary: {
-            indicator: string;
-            separator: string;
-        };
-        success: {
-            indicator: string;
-            separator: string;
-        };
-        danger: {
-            indicator: string;
-            separator: string;
-        };
-        info: {
-            indicator: string;
-            separator: string;
-        };
-        warning: {
-            indicator: string;
-            separator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     root: string;
@@ -104,34 +83,13 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            indicator: string;
-            separator: string;
-        };
-        neutral: {
-            indicator: string;
-            separator: string;
-        };
-        secondary: {
-            indicator: string;
-            separator: string;
-        };
-        success: {
-            indicator: string;
-            separator: string;
-        };
-        danger: {
-            indicator: string;
-            separator: string;
-        };
-        info: {
-            indicator: string;
-            separator: string;
-        };
-        warning: {
-            indicator: string;
-            separator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     root: string;
@@ -177,34 +135,13 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            indicator: string;
-            separator: string;
-        };
-        neutral: {
-            indicator: string;
-            separator: string;
-        };
-        secondary: {
-            indicator: string;
-            separator: string;
-        };
-        success: {
-            indicator: string;
-            separator: string;
-        };
-        danger: {
-            indicator: string;
-            separator: string;
-        };
-        info: {
-            indicator: string;
-            separator: string;
-        };
-        warning: {
-            indicator: string;
-            separator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
 }, {
     root: string;

package/dist/runtime/theme/stepper.js

@@ -15,16 +15,16 @@ export const stepperTheme = tv({
     // flow entirely (see its own comment) rather than laid out as a flex
     // sibling here, precisely so it can't push the indicator off-center.
     connector: "relative flex items-center",
-    trigger: "shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] disabled:opacity-50 disabled:pointer-events-none",
-    indicator: "relative z-10 flex shrink-0 items-center justify-center rounded-full bg-[var(--ui-bg)] font-medium text-[var(--ui-text-muted)] ring-2 ring-[var(--ui-border)] transition-colors",
+    trigger: "shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--_selaras-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--selaras-resolved-surface-default)] disabled:opacity-50 disabled:pointer-events-none",
+    indicator: "relative z-10 flex shrink-0 items-center justify-center rounded-full bg-[var(--selaras-resolved-surface-default)] font-medium text-[var(--selaras-resolved-text-muted)] ring-2 ring-[var(--selaras-resolved-border-default)] transition-colors data-[state=active]:ring-[var(--_selaras-color-focus)] data-[state=active]:text-[var(--_selaras-color-text)] data-[state=completed]:bg-[var(--_selaras-color-fill)] data-[state=completed]:ring-[var(--_selaras-color-fill)] data-[state=completed]:text-[var(--_selaras-color-on-fill)]",
     icon: "shrink-0",
     labels: "flex flex-col",
-    title: "text-sm font-medium text-[var(--ui-text)]",
-    description: "text-xs text-[var(--ui-text-muted)]",
+    title: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    description: "text-xs text-[var(--selaras-resolved-text-muted)]",
     // bg-border by default, switching to the color's own solid shade via
     // data-[state=completed] (set by Reka from the *preceding* item's own
     // state) - that's what makes the line "fill in" as steps complete.
-    separator: "absolute bg-[var(--ui-border)] transition-colors"
+    separator: "absolute bg-[var(--selaras-resolved-border-default)] transition-colors data-[state=completed]:bg-[var(--_selaras-color-fill)]"
   },
   variants: {
     orientation: {
@@ -68,34 +68,13 @@ export const stepperTheme = tv({
       lg: { indicator: "size-10 text-base", title: "text-base", description: "text-sm" }
     },
     color: {
-      primary: {
-        indicator: "data-[state=active]:ring-[var(--ui-primary)] data-[state=active]:text-[var(--ui-primary)] data-[state=completed]:bg-[var(--ui-primary)] data-[state=completed]:ring-[var(--ui-primary)] data-[state=completed]:text-[var(--ui-primary-foreground)]",
-        separator: "data-[state=completed]:bg-[var(--ui-primary)]"
-      },
-      neutral: {
-        indicator: "data-[state=active]:ring-[var(--ui-bg-inverted)] data-[state=active]:text-[var(--ui-text)] data-[state=completed]:bg-[var(--ui-bg-inverted)] data-[state=completed]:ring-[var(--ui-bg-inverted)] data-[state=completed]:text-[var(--ui-text-inverted)]",
-        separator: "data-[state=completed]:bg-[var(--ui-bg-inverted)]"
-      },
-      secondary: {
-        indicator: "data-[state=active]:ring-[var(--ui-secondary)] data-[state=active]:text-[var(--ui-secondary)] data-[state=completed]:bg-[var(--ui-secondary)] data-[state=completed]:ring-[var(--ui-secondary)] data-[state=completed]:text-[var(--ui-secondary-foreground)]",
-        separator: "data-[state=completed]:bg-[var(--ui-secondary)]"
-      },
-      success: {
-        indicator: "data-[state=active]:ring-[var(--ui-success)] data-[state=active]:text-[var(--ui-success)] data-[state=completed]:bg-[var(--ui-success)] data-[state=completed]:ring-[var(--ui-success)] data-[state=completed]:text-[var(--ui-success-foreground)]",
-        separator: "data-[state=completed]:bg-[var(--ui-success)]"
-      },
-      danger: {
-        indicator: "data-[state=active]:ring-[var(--ui-danger)] data-[state=active]:text-[var(--ui-danger)] data-[state=completed]:bg-[var(--ui-danger)] data-[state=completed]:ring-[var(--ui-danger)] data-[state=completed]:text-[var(--ui-danger-foreground)]",
-        separator: "data-[state=completed]:bg-[var(--ui-danger)]"
-      },
-      info: {
-        indicator: "data-[state=active]:ring-[var(--ui-info)] data-[state=active]:text-[var(--ui-info)] data-[state=completed]:bg-[var(--ui-info)] data-[state=completed]:ring-[var(--ui-info)] data-[state=completed]:text-[var(--ui-info-foreground)]",
-        separator: "data-[state=completed]:bg-[var(--ui-info)]"
-      },
-      warning: {
-        indicator: "data-[state=active]:ring-[var(--ui-warning)] data-[state=active]:text-[var(--ui-warning)] data-[state=completed]:bg-[var(--ui-warning)] data-[state=completed]:ring-[var(--ui-warning)] data-[state=completed]:text-[var(--ui-warning-foreground)]",
-        separator: "data-[state=completed]:bg-[var(--ui-warning)]"
-      }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     }
   },
   defaultVariants: {

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

@@ -1,33 +1,12 @@
 export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     color: {
-        primary: {
-            track: string;
-            thumb: string;
-        };
-        neutral: {
-            track: string;
-            thumb: string;
-        };
-        secondary: {
-            track: string;
-            thumb: string;
-        };
-        success: {
-            track: string;
-            thumb: string;
-        };
-        danger: {
-            track: string;
-            thumb: string;
-        };
-        info: {
-            track: string;
-            thumb: string;
-        };
-        warning: {
-            track: string;
-            thumb: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     size: {
         sm: {
@@ -68,34 +47,13 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     labelGroup: string;
 }, undefined, {
     color: {
-        primary: {
-            track: string;
-            thumb: string;
-        };
-        neutral: {
-            track: string;
-            thumb: string;
-        };
-        secondary: {
-            track: string;
-            thumb: string;
-        };
-        success: {
-            track: string;
-            thumb: string;
-        };
-        danger: {
-            track: string;
-            thumb: string;
-        };
-        info: {
-            track: string;
-            thumb: string;
-        };
-        warning: {
-            track: string;
-            thumb: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     size: {
         sm: {
@@ -136,34 +94,13 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     labelGroup: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     color: {
-        primary: {
-            track: string;
-            thumb: string;
-        };
-        neutral: {
-            track: string;
-            thumb: string;
-        };
-        secondary: {
-            track: string;
-            thumb: string;
-        };
-        success: {
-            track: string;
-            thumb: string;
-        };
-        danger: {
-            track: string;
-            thumb: string;
-        };
-        info: {
-            track: string;
-            thumb: string;
-        };
-        warning: {
-            track: string;
-            thumb: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     size: {
         sm: {

package/dist/runtime/theme/switch.js

@@ -12,7 +12,7 @@ export const switchTheme = tv({
     // (the checked-state fill) comes entirely from the `color` variant
     // below now, not hardcoded here - same reasoning as every other
     // themed component that exposes `color`.
-    track: "group relative inline-flex h-4.5 w-8 shrink-0 items-center rounded-[var(--ui-radius-full)] bg-[var(--ui-border)] transition-colors focus-visible:outline-none",
+    track: "group relative inline-flex h-4.5 w-8 shrink-0 items-center rounded-[var(--selaras-resolved-radius-full)] bg-[var(--selaras-resolved-border-default)] transition-colors focus-visible:outline-none data-[state=checked]:bg-[var(--_selaras-color-fill)]",
     // Track/thumb sized down from the original 40x24/20px to 32x18/16px - a
     // 1px inset on each side at rest (translate-x-px, thumb centered
     // vertically via the track's own items-center), traveling to 15px when
@@ -24,14 +24,14 @@ export const switchTheme = tv({
     // (group-hover/group-focus-visible) - the -z-10 pseudo itself still
     // needs its own stacking context to stay scoped to the thumb, not
     // escape past it.
-    thumb: "relative isolate flex items-center justify-center size-4 translate-x-px rounded-full bg-white shadow-[var(--ui-shadow-sm)] transition-transform before:absolute before:-inset-[8px] before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--ui-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] group-hover:before:[transform:scale(1)] group-focus-visible:before:[transform:scale(1)] data-[state=checked]:translate-x-[15px]",
+    thumb: "relative isolate flex items-center justify-center size-4 translate-x-px rounded-full bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-muted)] shadow-[var(--selaras-resolved-shadow-sm)] transition-transform before:absolute before:-inset-[8px] before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--selaras-resolved-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] group-hover:before:[transform:scale(1)] group-focus-visible:before:[transform:scale(1)] data-[state=checked]:translate-x-[15px] data-[state=checked]:bg-[var(--_selaras-color-on-fill)] data-[state=checked]:text-[var(--_selaras-color-fill)] data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]",
     // The checked/unchecked/loading glyph rendered inside the thumb -
     // muted gray by default (the thumb itself stays white regardless of
     // `color`, so an icon needs its own contrast rather than inheriting
     // currentColor from a colored parent).
-    icon: "size-2.5 text-[var(--ui-text-muted)]",
-    label: "select-none text-sm text-[var(--ui-text)]",
-    description: "block select-none text-xs text-[var(--ui-text-muted)]",
+    icon: "size-2.5",
+    label: "select-none text-sm text-[var(--selaras-resolved-text-default)]",
+    description: "block select-none text-xs text-[var(--selaras-resolved-text-muted)]",
     // Only rendered when there's a description (wrapping the label and
     // description together so they stack under one another) - same font-
     // baseline correction as RadioGroup's own labelGroup slot (see its
@@ -46,13 +46,13 @@ export const switchTheme = tv({
     // library's other "off" states (e.g. Chip's unselected variant) never
     // take on the color prop either.
     color: {
-      primary: { track: "data-[state=checked]:bg-[var(--ui-primary)]", thumb: "data-[state=checked]:before:bg-[var(--ui-primary)]" },
-      neutral: { track: "data-[state=checked]:bg-[var(--ui-bg-inverted)]", thumb: "data-[state=checked]:before:bg-[var(--ui-bg-inverted)]" },
-      secondary: { track: "data-[state=checked]:bg-[var(--ui-secondary)]", thumb: "data-[state=checked]:before:bg-[var(--ui-secondary)]" },
-      success: { track: "data-[state=checked]:bg-[var(--ui-success)]", thumb: "data-[state=checked]:before:bg-[var(--ui-success)]" },
-      danger: { track: "data-[state=checked]:bg-[var(--ui-danger)]", thumb: "data-[state=checked]:before:bg-[var(--ui-danger)]" },
-      info: { track: "data-[state=checked]:bg-[var(--ui-info)]", thumb: "data-[state=checked]:before:bg-[var(--ui-info)]" },
-      warning: { track: "data-[state=checked]:bg-[var(--ui-warning)]", thumb: "data-[state=checked]:before:bg-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // Same +4px-per-step scale RadioGroup's own `size` variant uses (its
     // item goes size-3.5/4.5/5.5 across sm/md/lg) - track/thumb/halo/travel
@@ -74,7 +74,7 @@ export const switchTheme = tv({
       // its own to recolor (unlike Radio/Checkbox's ring-inset), but an
       // offset outline left a visible gap between it and the pill, unlike
       // every other invalid state in this library, which sits flush.
-      true: { track: "ring-2 ring-[var(--ui-danger)] data-[state=checked]:bg-[var(--ui-danger)]", thumb: "data-[state=checked]:before:bg-[var(--ui-danger)]" }
+      true: { track: "ring-2 ring-[var(--_selaras-color-border)]", thumb: "data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]" }
     }
   },
   defaultVariants: {

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

@@ -1,4 +1,13 @@
 export declare const tableTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             th: string;
@@ -57,6 +66,15 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     columnTogglePanel: string;
     columnToggleItem: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             th: string;
@@ -115,6 +133,15 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     columnTogglePanel: string;
     columnToggleItem: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             th: string;

package/dist/runtime/theme/table.js

@@ -2,23 +2,23 @@ import { tv } from "tailwind-variants";
 export const tableTheme = tv({
   slots: {
     root: "relative w-full",
-    wrapper: "overflow-x-auto rounded-[var(--ui-radius-md)] ring-1 ring-[var(--ui-border)]",
+    wrapper: "overflow-x-auto rounded-[var(--selaras-resolved-radius-md)] ring-1 ring-[var(--selaras-resolved-border-default)]",
     table: "w-full border-collapse",
-    thead: "bg-[var(--ui-bg-elevated)]",
-    tr: "border-b border-[var(--ui-border)] last:border-b-0",
-    th: "text-start font-medium text-[var(--ui-text-muted)] whitespace-nowrap data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--ui-bg-elevated)]",
-    thSortable: "cursor-pointer select-none hover:text-[var(--ui-text)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-primary)]",
-    sortIcon: "ms-1 inline-block size-3.5 align-text-bottom text-[var(--ui-text-muted)]",
-    td: "text-[var(--ui-text)] data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--ui-bg)]",
-    tfoot: "bg-[var(--ui-bg-elevated)] font-medium",
-    emptyState: "px-3 py-8 text-center text-sm text-[var(--ui-text-muted)]",
+    thead: "bg-[var(--selaras-resolved-surface-elevated)]",
+    tr: "border-b border-[var(--selaras-resolved-border-default)] last:border-b-0",
+    th: "text-start font-medium text-[var(--selaras-resolved-text-muted)] whitespace-nowrap data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--selaras-resolved-surface-elevated)]",
+    thSortable: "cursor-pointer select-none hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)]",
+    sortIcon: "ms-1 inline-block size-3.5 align-text-bottom text-[var(--selaras-resolved-text-muted)]",
+    td: "text-[var(--selaras-resolved-text-default)] data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--selaras-resolved-surface-default)]",
+    tfoot: "bg-[var(--selaras-resolved-surface-elevated)] font-medium",
+    emptyState: "px-3 py-8 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
     filterInput: "mt-1",
     paginationWrapper: "flex items-center justify-between gap-3 px-3 py-2",
-    paginationInfo: "text-sm text-[var(--ui-text-muted)]",
+    paginationInfo: "text-sm text-[var(--selaras-resolved-text-muted)]",
     paginationButtons: "flex items-center gap-2",
-    loadingOverlay: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--ui-bg)]/60",
-    loadingIcon: "size-6 animate-spin text-[var(--ui-primary)]",
-    expandButton: "flex size-5 shrink-0 items-center justify-center text-[var(--ui-text-muted)]",
+    loadingOverlay: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--selaras-resolved-surface-default)]/60",
+    loadingIcon: "size-6 animate-spin text-[var(--_selaras-color-text)]",
+    expandButton: "flex size-5 shrink-0 items-center justify-center text-[var(--selaras-resolved-text-muted)]",
     // Points toward the reading-start direction while collapsed - 0deg
     // (right) under LTR, 180deg (left) under RTL - then always rotates to
     // an absolute 90deg once expanded, which already points down under
@@ -27,13 +27,22 @@ export const tableTheme = tv({
     // for the one case where both conditions hold at once, rather than
     // leaving the outcome to rely on Tailwind's variant cascade order.
     expandChevron: "size-4 transition-transform rtl:rotate-180 data-[expanded]:rotate-90 rtl:data-[expanded]:rotate-90",
-    expandedRow: "border-b border-[var(--ui-border)] last:border-b-0",
-    expandedCell: "bg-[var(--ui-bg-elevated)] px-3 py-3 text-[var(--ui-text)]",
+    expandedRow: "border-b border-[var(--selaras-resolved-border-default)] last:border-b-0",
+    expandedCell: "bg-[var(--selaras-resolved-surface-elevated)] px-3 py-3 text-[var(--selaras-resolved-text-default)]",
     columnToggle: "relative",
-    columnTogglePanel: "absolute end-0 z-20 mt-1 flex min-w-40 flex-col gap-1 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-2 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)]",
-    columnToggleItem: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-1.5 text-sm text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)]"
+    columnTogglePanel: "absolute end-0 z-20 mt-1 flex min-w-40 flex-col gap-1 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] p-2 shadow-[var(--selaras-resolved-shadow-md)] ring-1 ring-[var(--selaras-resolved-border-default)]",
+    columnToggleItem: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-1.5 text-sm text-[var(--selaras-resolved-text-default)] hover:bg-[var(--selaras-resolved-surface-elevated)]"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     size: {
       sm: { th: "px-2 py-1.5 text-xs", td: "px-2 py-1.5 text-xs" },
       md: { th: "px-3 py-2 text-sm", td: "px-3 py-2 text-sm" },
@@ -41,19 +50,20 @@ export const tableTheme = tv({
     },
     gridlines: {
       true: {
-        table: "border border-[var(--ui-border)]",
-        th: "border border-[var(--ui-border)]",
-        td: "border border-[var(--ui-border)]"
+        table: "border border-[var(--selaras-resolved-border-default)]",
+        th: "border border-[var(--selaras-resolved-border-default)]",
+        td: "border border-[var(--selaras-resolved-border-default)]"
       }
     },
     striped: {
-      true: { table: "[&>tbody>tr:nth-child(even)]:bg-[var(--ui-bg-elevated)]" }
+      true: { table: "[&>tbody>tr:nth-child(even)]:bg-[var(--selaras-resolved-surface-elevated)]" }
     },
     scrollable: {
       true: { wrapper: "overflow-y-auto", thead: "sticky top-0 z-[1]" }
     }
   },
   defaultVariants: {
+    color: "primary",
     size: "md"
   }
 });

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

@@ -10,6 +10,15 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
 }, {
     root: string;
     list: string;
@@ -29,6 +38,15 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
 }, {
     root: string;
     list: string;
@@ -48,6 +66,15 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
 }, {
     root: string;
     list: string;

package/dist/runtime/theme/tabs.js

@@ -4,11 +4,11 @@ export const tabsTheme = tv({
     root: "w-full",
     // relative - the positioned ancestor both the triggers' own offsetLeft
     // and the sliding indicator's absolute positioning resolve against.
-    list: "relative flex items-center border-b border-[var(--ui-border)]",
+    list: "relative flex items-center border-b border-[var(--selaras-resolved-border-default)]",
     // z-10 unconditionally (not just for `pill`) - harmless for `underline`
     // (its indicator never overlaps the trigger's own text anyway) and
     // keeps this one class instead of a compound variant.
-    trigger: "relative z-10 inline-flex items-center gap-1.5 px-1 py-2 text-sm font-medium text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none data-[state=active]:text-[var(--ui-primary)]",
+    trigger: "relative z-10 inline-flex items-center gap-1.5 px-1 py-2 text-sm font-medium text-[var(--selaras-resolved-text-muted)] transition-colors hover:text-[var(--selaras-resolved-text-default)] disabled:opacity-50 disabled:pointer-events-none data-[state=active]:text-[var(--_selaras-color-text)]",
     icon: "size-4 shrink-0",
     // Positioned via Reka's own TabsIndicator - it measures the active
     // trigger's offsetLeft/offsetWidth itself (ResizeObserver-driven, and
@@ -29,16 +29,26 @@ export const tabsTheme = tv({
     variant: {
       underline: {
         list: "gap-4",
-        indicator: "inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--ui-primary)]"
+        indicator: "inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--_selaras-color-fill)]"
       },
       pill: {
-        list: "gap-1 rounded-[var(--ui-radius-md)] border-0 bg-[var(--ui-bg-elevated)] p-1",
-        trigger: "rounded-[var(--ui-radius-sm)] px-3",
-        indicator: "inset-y-1 rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-sm)]"
+        list: "gap-1 rounded-[var(--selaras-resolved-radius-md)] border-0 bg-[var(--selaras-resolved-surface-elevated)] p-1",
+        trigger: "rounded-[var(--selaras-resolved-radius-sm)] px-3",
+        indicator: "inset-y-1 rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)]"
       }
+    },
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     }
   },
   defaultVariants: {
-    variant: "underline"
+    variant: "underline",
+    color: "primary"
   }
 });