@sewadah/selaras 0.1.1 → 0.3.0

package/dist/runtime/theme/file-tree.js

@@ -4,7 +4,7 @@ export const fileTreeTheme = tv({
     // The outer box - only the top-level call renders this (see
     // FileTree.vue's own `isNested`); a recursive call for a directory's
     // children renders `list` directly instead, no extra wrapping element.
-    root: "flex flex-col gap-0.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-bg)] p-2 font-mono text-sm",
+    root: "flex flex-col gap-0.5 rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] p-2 font-mono text-sm",
     // Real indentation, not a border/padding trick - each recursive level
     // renders its own nested <FileTree>, so depth accumulates naturally
     // via this same left padding stacking once per level. `ps-4` also
@@ -12,13 +12,22 @@ export const fileTreeTheme = tv({
     // the `isNested` variant below) reaches back into.
     list: "flex flex-col gap-0.5 ps-4 font-mono text-sm ms-3",
     item: "flex flex-col",
-    row: "flex w-full items-center gap-1.5 rounded-[var(--ui-radius-sm)] px-1.5 py-1 text-start text-[var(--ui-text-muted)] transition-colors hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)]",
+    row: "flex w-full items-center gap-1.5 rounded-[var(--selaras-resolved-radius-sm)] px-1.5 py-1 text-start text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)]",
     icon: "size-4 shrink-0",
     label: "truncate"
   },
   variants: {
     selected: {
-      true: { row: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)] hover:bg-[var(--ui-primary-soft)] hover:text-[var(--ui-primary)]" }
+      true: { row: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle)] hover:text-[var(--_selaras-color-text)]" }
+    },
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // FileTree.vue recurses into itself for every directory's own
     // children, reusing this exact same `item` slot at every depth -

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

@@ -26,34 +26,16 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            icon: string;
-            dropzone: string;
-        };
+        primary: "";
         neutral: {
             icon: string;
             dropzone: string;
         };
-        secondary: {
-            icon: string;
-            dropzone: string;
-        };
-        success: {
-            icon: string;
-            dropzone: string;
-        };
-        danger: {
-            icon: string;
-            dropzone: string;
-        };
-        info: {
-            icon: string;
-            dropzone: string;
-        };
-        warning: {
-            icon: string;
-            dropzone: string;
-        };
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     invalid: {
         true: {
@@ -103,34 +85,16 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            icon: string;
-            dropzone: string;
-        };
+        primary: "";
         neutral: {
             icon: string;
             dropzone: string;
         };
-        secondary: {
-            icon: string;
-            dropzone: string;
-        };
-        success: {
-            icon: string;
-            dropzone: string;
-        };
-        danger: {
-            icon: string;
-            dropzone: string;
-        };
-        info: {
-            icon: string;
-            dropzone: string;
-        };
-        warning: {
-            icon: string;
-            dropzone: string;
-        };
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     invalid: {
         true: {
@@ -180,34 +144,16 @@ export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            icon: string;
-            dropzone: string;
-        };
+        primary: "";
         neutral: {
             icon: string;
             dropzone: string;
         };
-        secondary: {
-            icon: string;
-            dropzone: string;
-        };
-        success: {
-            icon: string;
-            dropzone: string;
-        };
-        danger: {
-            icon: string;
-            dropzone: string;
-        };
-        info: {
-            icon: string;
-            dropzone: string;
-        };
-        warning: {
-            icon: string;
-            dropzone: string;
-        };
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     invalid: {
         true: {

package/dist/runtime/theme/file-upload.js

@@ -7,24 +7,25 @@ export const fileUploadTheme = tv({
     // instead of needing hand-rolled keydown handling. dragging (a
     // component-set data attribute, not a native one) recolors it
     // toward `color` - see the color variant below.
-    dropzone: "flex w-full flex-col items-center justify-center gap-2 rounded-[var(--ui-radius-md)] border-2 border-dashed border-[var(--ui-border)] p-6 text-center transition-colors hover:border-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus-visible:outline-none focus-visible:ring-2 disabled:opacity-50 disabled:pointer-events-none",
-    icon: "text-[var(--ui-text-muted)]",
-    label: "font-medium text-[var(--ui-text)]",
-    description: "text-[var(--ui-text-muted)]",
+    dropzone: "flex w-full flex-col items-center justify-center gap-2 rounded-[var(--selaras-resolved-radius-md)] border-2 border-dashed border-[var(--selaras-resolved-border-default)] p-6 text-center transition-colors hover:border-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--_selaras-color-focus)] data-[dragging]:border-[var(--_selaras-color-border)] data-[dragging]:bg-[var(--_selaras-color-subtle)] disabled:opacity-50 disabled:pointer-events-none",
+    icon: "text-[var(--_selaras-color-fill)]",
+    label: "font-medium text-[var(--selaras-resolved-text-default)]",
+    description: "text-[var(--selaras-resolved-text-muted)]",
     // Purely an implementation detail - visually hidden and (via
     // tabindex="-1" in FileUpload.vue) not independently tab-reachable
     // either.
-    // The dropzone <button> wrapping it is the real focusable, Enter/
+    // The sibling dropzone <button> is the visible focusable, Enter/
     // Space-activatable control (free native semantics); this input just
-    // gets programmatically .click()'d to open the OS file dialog.
+    // gets programmatically .click()'d to open the OS file dialog. Native
+    // label/validation focus on the input is forwarded to the dropzone.
     input: "sr-only",
     fileList: "flex w-full flex-col gap-2",
-    file: "flex items-center gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] p-2",
-    fileThumbnail: "size-8 shrink-0 rounded-[var(--ui-radius-sm)] object-cover",
-    fileIcon: "size-8 shrink-0 text-[var(--ui-text-muted)]",
+    file: "flex items-center gap-3 rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] p-2",
+    fileThumbnail: "size-8 shrink-0 rounded-[var(--selaras-resolved-radius-sm)] object-cover",
+    fileIcon: "size-8 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     fileInfo: "flex min-w-0 flex-1 flex-col",
-    fileName: "truncate text-[var(--ui-text)]",
-    fileSize: "text-[var(--ui-text-muted)]",
+    fileName: "truncate text-[var(--selaras-resolved-text-default)]",
+    fileSize: "text-[var(--selaras-resolved-text-muted)]",
     fileRemove: "shrink-0"
   },
   variants: {
@@ -41,19 +42,19 @@ export const fileUploadTheme = tv({
     // actually demonstrating anything - confirmed as a real problem via
     // direct user feedback, not just a style preference.
     color: {
-      primary: { icon: "text-[var(--ui-primary)]", dropzone: "focus-visible:ring-[var(--ui-primary)] data-[dragging]:border-[var(--ui-primary)] data-[dragging]:bg-[var(--ui-primary-soft)]" },
-      neutral: { icon: "text-[var(--ui-bg-inverted)]", dropzone: "focus-visible:ring-[var(--ui-bg-inverted)] data-[dragging]:border-[var(--ui-bg-inverted)] data-[dragging]:bg-[var(--ui-bg-elevated)]" },
-      secondary: { icon: "text-[var(--ui-secondary)]", dropzone: "focus-visible:ring-[var(--ui-secondary)] data-[dragging]:border-[var(--ui-secondary)] data-[dragging]:bg-[var(--ui-secondary-soft)]" },
-      success: { icon: "text-[var(--ui-success)]", dropzone: "focus-visible:ring-[var(--ui-success)] data-[dragging]:border-[var(--ui-success)] data-[dragging]:bg-[var(--ui-success-soft)]" },
-      danger: { icon: "text-[var(--ui-danger)]", dropzone: "focus-visible:ring-[var(--ui-danger)] data-[dragging]:border-[var(--ui-danger)] data-[dragging]:bg-[var(--ui-danger-soft)]" },
-      info: { icon: "text-[var(--ui-info)]", dropzone: "focus-visible:ring-[var(--ui-info)] data-[dragging]:border-[var(--ui-info)] data-[dragging]:bg-[var(--ui-info-soft)]" },
-      warning: { icon: "text-[var(--ui-warning)]", dropzone: "focus-visible:ring-[var(--ui-warning)] data-[dragging]:border-[var(--ui-warning)] data-[dragging]:bg-[var(--ui-warning-soft)]" }
+      primary: "",
+      neutral: { icon: "text-[var(--selaras-resolved-surface-inverted)]", dropzone: "focus-visible:ring-[var(--selaras-resolved-surface-inverted)] data-[dragging]:border-[var(--selaras-resolved-surface-inverted)] data-[dragging]:bg-[var(--selaras-resolved-surface-elevated)]" },
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // Declared last (after color) so tailwind-merge lets its own border
     // override win over color's - matches Input's own documented
     // reasoning for this order.
     invalid: {
-      true: { dropzone: "border-[var(--ui-danger)] focus-visible:ring-[var(--ui-danger)]" }
+      true: { dropzone: "border-[var(--_selaras-color-border)] focus-visible:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/form-field.js

@@ -7,12 +7,12 @@ export const formFieldTheme = tv({
     // own default look exactly) in vertical.
     body: "flex flex-col gap-1.5",
     header: "",
-    label: "text-sm font-medium text-[var(--ui-text)]",
-    required: "ms-0.5 text-[var(--ui-danger)]",
-    description: "text-xs text-[var(--ui-text-muted)]",
+    label: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    required: "ms-0.5 text-[var(--selaras-resolved-color-danger-text)]",
+    description: "text-xs text-[var(--selaras-resolved-text-muted)]",
     container: "",
-    hint: "text-xs text-[var(--ui-text-muted)]",
-    error: "text-xs text-[var(--ui-danger)]"
+    hint: "text-xs text-[var(--selaras-resolved-text-muted)]",
+    error: "text-xs text-[var(--selaras-resolved-color-danger-text)]"
   },
   variants: {
     // Scales FormField's own label/description/hint/error text to match

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

@@ -2,16 +2,16 @@ export declare const headerTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            right?: 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;
+            right?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -22,8 +22,8 @@ export declare const headerTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            right?: import("tailwind-variants").ClassValue;
             left?: import("tailwind-variants").ClassValue;
+            right?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/runtime/theme/header.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const headerTheme = tv({
   slots: {
-    root: "sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-4 border-b border-[var(--ui-border)] bg-[var(--ui-bg)] px-4 sm:px-6",
+    root: "sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-4 border-b border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] px-4 sm:px-6",
     left: "flex min-w-0 items-center gap-2",
     right: "flex shrink-0 items-center gap-2"
   }

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

@@ -1,24 +1,15 @@
 export declare const iconTheme: import("tailwind-variants").TVReturnType<{
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    colored: {
+        true: {
             base: string;
         };
     };
@@ -26,25 +17,16 @@ export declare const iconTheme: import("tailwind-variants").TVReturnType<{
     base: string;
 }, undefined, {
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    colored: {
+        true: {
             base: string;
         };
     };
@@ -52,25 +34,16 @@ export declare const iconTheme: import("tailwind-variants").TVReturnType<{
     base: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     color: {
-        primary: {
-            base: string;
-        };
-        neutral: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        info: {
-            base: string;
-        };
-        warning: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    colored: {
+        true: {
             base: string;
         };
     };

package/dist/runtime/theme/icon.js

@@ -6,7 +6,7 @@ export const iconTheme = tv({
   variants: {
     // No default - an unset color inherits currentColor from wherever the
     // icon is placed, which is what every internal usage elsewhere in this
-    // library already relies on (e.g. Input's --ui-text-muted icon slots).
+    // library already relies on (e.g. Input's --selaras-resolved-text-muted icon slots).
     // No size variant (deliberately) - every internal consumer needs its
     // own precise size (size-2.5/3/3.5/4/4.5/5/6 depending on component and
     // slot), none of which map cleanly onto a shared sm/md/lg scale. Pass
@@ -14,13 +14,23 @@ export const iconTheme = tv({
     // icon usage - a raw `class="text-*"` still overrides `color` too,
     // since both just flow through the same tailwind-merge below.
     color: {
-      primary: { base: "text-[var(--ui-primary)]" },
-      neutral: { base: "text-[var(--ui-text)]" },
-      secondary: { base: "text-[var(--ui-secondary)]" },
-      success: { base: "text-[var(--ui-success)]" },
-      danger: { base: "text-[var(--ui-danger)]" },
-      info: { base: "text-[var(--ui-info)]" },
-      warning: { base: "text-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
+    // Runtime derives this from the optional color prop. It supplies the
+    // shared semantic treatment even when `color` is an application-registered
+    // role with no finite built-in branch, while leaving uncolored icons free
+    // to inherit currentColor.
+    colored: {
+      true: { base: "text-[var(--_selaras-color-indicator)]" }
     }
-  }
+  },
+  compoundVariants: [
+    { color: "neutral", colored: true, class: { base: "text-[var(--selaras-resolved-text-default)]" } }
+  ]
 });

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

@@ -14,27 +14,13 @@ export declare const inputNumberTheme: import("tailwind-variants").TVReturnType<
         };
     };
     color: {
-        primary: {
-            root: string;
-        };
-        neutral: {
-            root: string;
-        };
-        secondary: {
-            root: string;
-        };
-        success: {
-            root: string;
-        };
-        danger: {
-            root: string;
-        };
-        info: {
-            root: string;
-        };
-        warning: {
-            root: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     orientation: {
         horizontal: {};
@@ -68,27 +54,13 @@ export declare const inputNumberTheme: import("tailwind-variants").TVReturnType<
         };
     };
     color: {
-        primary: {
-            root: string;
-        };
-        neutral: {
-            root: string;
-        };
-        secondary: {
-            root: string;
-        };
-        success: {
-            root: string;
-        };
-        danger: {
-            root: string;
-        };
-        info: {
-            root: string;
-        };
-        warning: {
-            root: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     orientation: {
         horizontal: {};
@@ -122,27 +94,13 @@ export declare const inputNumberTheme: import("tailwind-variants").TVReturnType<
         };
     };
     color: {
-        primary: {
-            root: string;
-        };
-        neutral: {
-            root: string;
-        };
-        secondary: {
-            root: string;
-        };
-        success: {
-            root: string;
-        };
-        danger: {
-            root: string;
-        };
-        info: {
-            root: string;
-        };
-        warning: {
-            root: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     orientation: {
         horizontal: {};

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

@@ -25,12 +25,12 @@ export const inputNumberTheme = tv({
     // bg's own hover change is left unscoped - there's no competing
     // focus-driven background to conflict with, so it can keep showing
     // regardless of focus state.
-    root: "relative 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 has-[input:disabled]:opacity-50 has-[input:disabled]:pointer-events-none",
+    root: "relative 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-[input:disabled]:opacity-50 has-[input:disabled]:pointer-events-none",
     // Borderless/transparent - root already carries the visual box, this is
     // just the editable text. Centered + tabular-nums so digits don't shift
     // width as the value changes - orientation="vertical" overrides the
     // centering below, since the stepper only occupies the end edge there.
-    input: "w-full min-w-0 flex-1 border-0 bg-transparent text-center tabular-nums text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)] disabled:cursor-not-allowed",
+    input: "w-full min-w-0 flex-1 border-0 bg-transparent text-center tabular-nums text-[var(--selaras-resolved-text-default)] outline-none placeholder:text-[var(--selaras-resolved-text-muted)] disabled:cursor-not-allowed",
     // orientation="vertical" only - a compact up/down pair pinned to the
     // end edge, replacing the two full-height flanking buttons.
     stepper: "absolute end-1 inset-y-1 flex flex-col justify-center gap-px",
@@ -39,7 +39,7 @@ export const inputNumberTheme = tv({
     // own size scale has no step small enough for two of these to stack
     // inside one field's own height, and fighting its fixed sm classes with
     // overrides is more fragile than a plain, purpose-built button here.
-    stepperButton: "flex h-3.5 w-5 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none"
+    stepperButton: "flex h-3.5 w-5 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] text-[var(--selaras-resolved-text-muted)] transition-colors hover:text-[var(--selaras-resolved-text-default)] disabled:opacity-50 disabled:pointer-events-none"
   },
   variants: {
     size: {
@@ -47,16 +47,16 @@ export const inputNumberTheme = tv({
       md: { root: "h-10 px-1.5", input: "text-sm" },
       lg: { root: "h-11 px-2", input: "text-base" }
     },
-    // 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 Input's own scope (see input.ts).
     color: {
-      primary: { root: "focus-within:ring-[var(--ui-primary)]" },
-      neutral: { root: "focus-within:ring-[var(--ui-bg-inverted)]" },
-      secondary: { root: "focus-within:ring-[var(--ui-secondary)]" },
-      success: { root: "focus-within:ring-[var(--ui-success)]" },
-      danger: { root: "focus-within:ring-[var(--ui-danger)]" },
-      info: { root: "focus-within:ring-[var(--ui-info)]" },
-      warning: { root: "focus-within:ring-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     orientation: {
       horizontal: {},
@@ -66,7 +66,7 @@ export const inputNumberTheme = tv({
     // focus-within:ring override win over color's - see input.ts for why
     // declaration order (not runtime call order) is what decides this.
     invalid: {
-      true: { root: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)]" }
+      true: { root: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus-within:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {