@sewadah/selaras 0.1.1 → 0.3.0

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

@@ -1,38 +1,14 @@
 export declare const proseTheme: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            h1?: import("tailwind-variants").ClassValue;
-            h2?: import("tailwind-variants").ClassValue;
-            h3?: import("tailwind-variants").ClassValue;
-            h4?: import("tailwind-variants").ClassValue;
-            h5?: import("tailwind-variants").ClassValue;
-            h6?: import("tailwind-variants").ClassValue;
-            pre?: import("tailwind-variants").ClassValue;
-            headingAnchor?: import("tailwind-variants").ClassValue;
-            preWrapper?: import("tailwind-variants").ClassValue;
-            preHeader?: import("tailwind-variants").ClassValue;
-            preFilename?: import("tailwind-variants").ClassValue;
-            preCopyButton?: import("tailwind-variants").ClassValue;
-        };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            h1?: import("tailwind-variants").ClassValue;
-            h2?: import("tailwind-variants").ClassValue;
-            h3?: import("tailwind-variants").ClassValue;
-            h4?: import("tailwind-variants").ClassValue;
-            h5?: import("tailwind-variants").ClassValue;
-            h6?: import("tailwind-variants").ClassValue;
-            pre?: import("tailwind-variants").ClassValue;
-            headingAnchor?: import("tailwind-variants").ClassValue;
-            preWrapper?: import("tailwind-variants").ClassValue;
-            preHeader?: import("tailwind-variants").ClassValue;
-            preFilename?: import("tailwind-variants").ClassValue;
-            preCopyButton?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
+}, {
     h1: string;
     h2: string;
     h3: string;
@@ -42,27 +18,22 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     headingAnchor: string;
     preWrapper: string;
     preHeader: string;
+    preLabel: string;
+    preIcon: string;
     preFilename: string;
     preCopyButton: string;
     pre: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            h1?: import("tailwind-variants").ClassValue;
-            h2?: import("tailwind-variants").ClassValue;
-            h3?: import("tailwind-variants").ClassValue;
-            h4?: import("tailwind-variants").ClassValue;
-            h5?: import("tailwind-variants").ClassValue;
-            h6?: import("tailwind-variants").ClassValue;
-            pre?: import("tailwind-variants").ClassValue;
-            headingAnchor?: import("tailwind-variants").ClassValue;
-            preWrapper?: import("tailwind-variants").ClassValue;
-            preHeader?: import("tailwind-variants").ClassValue;
-            preFilename?: import("tailwind-variants").ClassValue;
-            preCopyButton?: import("tailwind-variants").ClassValue;
-        };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
-} | {}, {
+}, {
     h1: string;
     h2: string;
     h3: string;
@@ -72,10 +43,22 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     headingAnchor: string;
     preWrapper: string;
     preHeader: string;
+    preLabel: string;
+    preIcon: string;
     preFilename: string;
     preCopyButton: string;
     pre: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+}, {
     h1: string;
     h2: string;
     h3: string;
@@ -85,6 +68,8 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     headingAnchor: string;
     preWrapper: string;
     preHeader: string;
+    preLabel: string;
+    preIcon: string;
     preFilename: string;
     preCopyButton: string;
     pre: string;

package/dist/runtime/theme/prose.js

@@ -1,17 +1,30 @@
 import { tv } from "tailwind-variants";
 export const proseTheme = tv({
   slots: {
-    h1: "text-3xl font-semibold tracking-tight text-[var(--ui-text)] scroll-mt-20",
-    h2: "text-2xl font-semibold tracking-tight text-[var(--ui-text)] scroll-mt-20",
-    h3: "text-xl font-semibold tracking-tight text-[var(--ui-text)] scroll-mt-20",
-    h4: "text-lg font-semibold text-[var(--ui-text)] scroll-mt-20",
-    h5: "text-base font-semibold text-[var(--ui-text)] scroll-mt-20",
-    h6: "text-sm font-semibold text-[var(--ui-text)] scroll-mt-20",
-    headingAnchor: "no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
-    preWrapper: "overflow-hidden rounded-[var(--ui-radius-md)] ring-1 ring-[var(--ui-border)]",
-    preHeader: "flex items-center justify-between gap-2 border-b border-[var(--ui-border)] bg-[var(--ui-bg-elevated)] px-3 py-1.5",
-    preFilename: "font-mono text-xs text-[var(--ui-text-muted)]",
+    h1: "text-3xl font-semibold tracking-tight text-[var(--selaras-resolved-text-default)] scroll-mt-20",
+    h2: "text-2xl font-semibold tracking-tight text-[var(--selaras-resolved-text-default)] scroll-mt-20",
+    h3: "text-xl font-semibold tracking-tight text-[var(--selaras-resolved-text-default)] scroll-mt-20",
+    h4: "text-lg font-semibold text-[var(--selaras-resolved-text-default)] scroll-mt-20",
+    h5: "text-base font-semibold text-[var(--selaras-resolved-text-default)] scroll-mt-20",
+    h6: "text-sm font-semibold text-[var(--selaras-resolved-text-default)] scroll-mt-20",
+    headingAnchor: "no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
+    preWrapper: "overflow-hidden rounded-[var(--selaras-resolved-radius-md)] ring-1 ring-[var(--selaras-resolved-border-default)]",
+    preHeader: "flex items-center justify-between gap-2 border-b border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-elevated)] px-3 py-1.5",
+    preLabel: "flex min-w-0 items-center gap-2",
+    preIcon: "size-4",
+    preFilename: "font-mono text-xs text-[var(--selaras-resolved-text-muted)]",
     preCopyButton: "shrink-0",
-    pre: "overflow-x-auto bg-[var(--ui-bg-elevated)] p-4 font-mono text-sm leading-relaxed"
+    pre: "overflow-x-auto bg-[var(--selaras-resolved-surface-elevated)] p-4 font-mono text-sm leading-relaxed"
+  },
+  variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    }
   }
 });

package/dist/runtime/theme/radio-group.d.ts

@@ -35,34 +35,13 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            item: string;
-            indicator: string;
-        };
-        neutral: {
-            item: string;
-            indicator: string;
-        };
-        secondary: {
-            item: string;
-            indicator: string;
-        };
-        success: {
-            item: string;
-            indicator: string;
-        };
-        danger: {
-            item: string;
-            indicator: string;
-        };
-        info: {
-            item: string;
-            indicator: string;
-        };
-        warning: {
-            item: string;
-            indicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     invalid: {
         true: {
@@ -114,34 +93,13 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            item: string;
-            indicator: string;
-        };
-        neutral: {
-            item: string;
-            indicator: string;
-        };
-        secondary: {
-            item: string;
-            indicator: string;
-        };
-        success: {
-            item: string;
-            indicator: string;
-        };
-        danger: {
-            item: string;
-            indicator: string;
-        };
-        info: {
-            item: string;
-            indicator: string;
-        };
-        warning: {
-            item: string;
-            indicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     invalid: {
         true: {
@@ -193,34 +151,13 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            item: string;
-            indicator: string;
-        };
-        neutral: {
-            item: string;
-            indicator: string;
-        };
-        secondary: {
-            item: string;
-            indicator: string;
-        };
-        success: {
-            item: string;
-            indicator: string;
-        };
-        danger: {
-            item: string;
-            indicator: string;
-        };
-        info: {
-            item: string;
-            indicator: string;
-        };
-        warning: {
-            item: string;
-            indicator: string;
-        };
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
     };
     invalid: {
         true: {

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

@@ -17,8 +17,8 @@ export const radioGroupTheme = tv({
     // color by the checked-state variant below - an explicit var per
     // state rather than currentColor, since this slot's own text color
     // isn't otherwise tied to checked/unchecked here. Uses
-    // --ui-border-hover for the gray fill - lighter than a plain mid-gray
-    // text color would give, while still clearing the plain --ui-border
+    // --selaras-resolved-border-hover for the gray fill - lighter than a plain mid-gray
+    // text color would give, while still clearing the plain --selaras-resolved-border-default
     // token, which reads as basically invisible at any reasonable opacity
     // since it's already very close to the page background. scale(0)/
     // scale(1) use Tailwind's arbitrary-value [transform:] syntax, not the
@@ -47,7 +47,7 @@ export const radioGroupTheme = tv({
     // rendered visibly jagged at normal (non-zoomed) browser scale; the
     // fractional width needs the arbitrary-value form since Tailwind's
     // named ring scale only has integer steps.
-    item: "relative isolate flex shrink-0 items-center justify-center rounded-full ring-[1.5px] ring-inset ring-[var(--ui-border)] transition-colors before:absolute 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-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)]",
+    item: "relative isolate flex shrink-0 items-center justify-center rounded-full ring-[1.5px] ring-inset ring-[var(--selaras-resolved-border-default)] transition-colors before:absolute 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-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)] data-[state=checked]:ring-[var(--_selaras-color-indicator)] data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]",
     // force-mount (see RadioGroup.vue) keeps this in the DOM for every
     // item regardless of checked state, so switching the selection scales
     // the old dot out and the new one in instead of an abrupt pop -
@@ -56,9 +56,9 @@ export const radioGroupTheme = tv({
     // detects them via computed animation-name), not plain CSS
     // transitions, so a transition-only version without force-mount would
     // just vanish instantly.
-    indicator: "rounded-full [transform:scale(0)] transition-transform duration-200 data-[state=checked]:[transform:scale(1)]",
-    label: "select-none text-[var(--ui-text)]",
-    description: "block select-none text-[var(--ui-text-muted)]",
+    indicator: "rounded-full bg-[var(--_selaras-color-indicator)] [transform:scale(0)] transition-transform duration-200 data-[state=checked]:[transform:scale(1)]",
+    label: "select-none text-[var(--selaras-resolved-text-default)]",
+    description: "block select-none text-[var(--selaras-resolved-text-muted)]",
     // Only rendered when an item has a description (wrapping the label and
     // description together so they stack under one another). The label
     // text visually sits a bit lower than its own line box's true center -
@@ -89,7 +89,7 @@ export const radioGroupTheme = tv({
     variant: {
       default: {},
       card: {
-        itemWrapper: "w-full items-start gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] px-3.5 py-3 transition-colors",
+        itemWrapper: "w-full items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] px-3.5 py-3 transition-colors",
         item: "mt-0.5"
       }
     },
@@ -97,13 +97,13 @@ export const radioGroupTheme = tv({
     // neutral ring regardless of `color`, matching Checkbox's/Switch's own
     // `color` variant exactly (same reasoning, same token pattern).
     color: {
-      primary: { item: "data-[state=checked]:ring-[var(--ui-primary)] data-[state=checked]:before:bg-[var(--ui-primary)]", indicator: "bg-[var(--ui-primary)]" },
-      neutral: { item: "data-[state=checked]:ring-[var(--ui-neutral)] data-[state=checked]:before:bg-[var(--ui-neutral)]", indicator: "bg-[var(--ui-neutral)]" },
-      secondary: { item: "data-[state=checked]:ring-[var(--ui-secondary)] data-[state=checked]:before:bg-[var(--ui-secondary)]", indicator: "bg-[var(--ui-secondary)]" },
-      success: { item: "data-[state=checked]:ring-[var(--ui-success)] data-[state=checked]:before:bg-[var(--ui-success)]", indicator: "bg-[var(--ui-success)]" },
-      danger: { item: "data-[state=checked]:ring-[var(--ui-danger)] data-[state=checked]:before:bg-[var(--ui-danger)]", indicator: "bg-[var(--ui-danger)]" },
-      info: { item: "data-[state=checked]:ring-[var(--ui-info)] data-[state=checked]:before:bg-[var(--ui-info)]", indicator: "bg-[var(--ui-info)]" },
-      warning: { item: "data-[state=checked]:ring-[var(--ui-warning)] data-[state=checked]:before:bg-[var(--ui-warning)]", indicator: "bg-[var(--ui-warning)]" }
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
     },
     // Recolors the existing ring rather than adding a second outline
     // outside it (an earlier version did that, which read as a double
@@ -112,18 +112,12 @@ export const radioGroupTheme = tv({
     // otherwise win the ring color back whenever an already-invalid group
     // has something selected.
     invalid: {
-      true: { item: "ring-[var(--ui-danger)] data-[state=checked]:ring-[var(--ui-danger)]" }
+      true: { item: "ring-[var(--_selaras-color-border)] data-[state=checked]:ring-[var(--_selaras-color-indicator)]" }
     }
   },
   compoundVariants: [
     // The card variant's own checked-state highlight, following `color`.
-    { variant: "card", color: "primary", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-primary)] has-[[data-state=checked]]:bg-[var(--ui-primary-soft)]" } },
-    { variant: "card", color: "neutral", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-neutral)] has-[[data-state=checked]]:bg-[var(--ui-neutral-soft)]" } },
-    { variant: "card", color: "secondary", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-secondary)] has-[[data-state=checked]]:bg-[var(--ui-secondary-soft)]" } },
-    { variant: "card", color: "success", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-success)] has-[[data-state=checked]]:bg-[var(--ui-success-soft)]" } },
-    { variant: "card", color: "danger", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-danger)] has-[[data-state=checked]]:bg-[var(--ui-danger-soft)]" } },
-    { variant: "card", color: "info", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-info)] has-[[data-state=checked]]:bg-[var(--ui-info-soft)]" } },
-    { variant: "card", color: "warning", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-warning)] has-[[data-state=checked]]:bg-[var(--ui-warning-soft)]" } }
+    { variant: "card", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--_selaras-color-border)] has-[[data-state=checked]]:bg-[var(--_selaras-color-subtle)]" } }
   ],
   defaultVariants: {
     size: "md",

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

@@ -25,27 +25,13 @@ export declare const ratingTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            fillIcon: string;
-        };
-        neutral: {
-            fillIcon: string;
-        };
-        secondary: {
-            fillIcon: string;
-        };
-        success: {
-            fillIcon: string;
-        };
-        danger: {
-            fillIcon: string;
-        };
-        info: {
-            fillIcon: string;
-        };
-        warning: {
-            fillIcon: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
 }, {
     root: string;
@@ -80,27 +66,13 @@ export declare const ratingTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            fillIcon: string;
-        };
-        neutral: {
-            fillIcon: string;
-        };
-        secondary: {
-            fillIcon: string;
-        };
-        success: {
-            fillIcon: string;
-        };
-        danger: {
-            fillIcon: string;
-        };
-        info: {
-            fillIcon: string;
-        };
-        warning: {
-            fillIcon: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
 }, {
     root: string;
@@ -135,27 +107,13 @@ export declare const ratingTheme: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        primary: {
-            fillIcon: string;
-        };
-        neutral: {
-            fillIcon: string;
-        };
-        secondary: {
-            fillIcon: string;
-        };
-        success: {
-            fillIcon: string;
-        };
-        danger: {
-            fillIcon: string;
-        };
-        info: {
-            fillIcon: string;
-        };
-        warning: {
-            fillIcon: string;
-        };
+        primary: {};
+        neutral: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        info: {};
+        warning: {};
     };
 }, {
     root: string;

package/dist/runtime/theme/rating.js

@@ -11,10 +11,10 @@ export const ratingTheme = tv({
     // narrower-than-the-whole-star) indicator button is current, but the
     // ring should still outline the *whole* star, not just that step's
     // own cropped hit region.
-    item: "relative shrink-0 rounded-[var(--ui-radius-sm)] transition-shadow has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--ui-primary)]",
+    item: "relative shrink-0 rounded-[var(--selaras-resolved-radius-sm)] transition-shadow has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--_selaras-color-focus)]",
     // The empty/outline star, always visible, sitting behind every step
     // indicator - what a not-yet-filled star reads as.
-    icon: "absolute inset-0 text-[var(--ui-border)]",
+    icon: "absolute inset-0 text-[var(--selaras-resolved-border-default)]",
     // One per fractional sub-step (Rating.vue renders one
     // RatingItemIndicator per entry in RatingItem's own `steps`, a single
     // entry `[N]` when `step` is the default 1, several overlapping ones
@@ -47,7 +47,7 @@ export const ratingTheme = tv({
     // backdrop through it, reading as "not filled" with no shape swap
     // needed - recolored once its own indicator's data-state flips to
     // active.
-    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--ui-primary)]"
+    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--_selaras-color-indicator)]"
   },
   variants: {
     orientation: {
@@ -60,13 +60,13 @@ export const ratingTheme = tv({
       lg: { item: "size-6", icon: "size-6", fillIcon: "size-6" }
     },
     color: {
-      primary: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-primary)]" },
-      neutral: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-bg-inverted)]" },
-      secondary: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-secondary)]" },
-      success: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-success)]" },
-      danger: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-danger)]" },
-      info: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-info)]" },
-      warning: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-warning)]" }
+      primary: {},
+      neutral: {},
+      secondary: {},
+      success: {},
+      danger: {},
+      info: {},
+      warning: {}
     }
   },
   defaultVariants: {

package/dist/runtime/theme/read-more.d.ts

@@ -1,4 +1,13 @@
 export declare const readMoreTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     open: {
         true: {
             triggerIcon: string;
@@ -11,6 +20,15 @@ export declare const readMoreTheme: import("tailwind-variants").TVReturnType<{
     trigger: string;
     triggerIcon: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     open: {
         true: {
             triggerIcon: string;
@@ -23,6 +41,15 @@ export declare const readMoreTheme: import("tailwind-variants").TVReturnType<{
     trigger: string;
     triggerIcon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     open: {
         true: {
             triggerIcon: string;

package/dist/runtime/theme/read-more.js

@@ -5,15 +5,24 @@ export const readMoreTheme = tv({
     // max-height (not height) is what actually animates - see
     // ReadMore.vue's own comment on why this needs a measured pixel value
     // rather than the `auto` keyword, which CSS transitions can't animate.
-    content: "overflow-hidden transition-[max-height] duration-300 ease-out",
+    content: "relative overflow-hidden transition-[max-height] duration-300 ease-out",
     // A fade rather than a hard cut - signals there's more below without a
-    // visible seam at the truncation line. Reads from --ui-bg since it
+    // visible seam at the truncation line. Reads from --selaras-resolved-surface-default since it
     // needs to blend into whatever's directly behind it, not a fixed color.
-    fade: "pointer-events-none absolute inset-x-0 bottom-8 h-16 bg-gradient-to-t from-[var(--ui-bg)] to-transparent",
-    trigger: "relative mt-2 inline-flex items-center gap-1 text-sm font-medium text-[var(--ui-primary)] transition-colors hover:text-[var(--ui-primary-hover)]",
+    fade: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-[var(--selaras-resolved-surface-default)] to-transparent",
+    trigger: "relative mt-2 inline-flex items-center gap-1 text-sm font-medium text-[var(--_selaras-color-text)] transition-colors hover:text-[var(--_selaras-color-text-hover)]",
     triggerIcon: "size-4 transition-transform duration-200"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     open: {
       true: { triggerIcon: "rotate-180" }
     }

package/dist/runtime/theme/scroll-area.d.ts

@@ -2,8 +2,8 @@ export declare const scrollAreaTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            viewport?: import("tailwind-variants").ClassValue;
             thumb?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
             scrollbar?: import("tailwind-variants").ClassValue;
             corner?: import("tailwind-variants").ClassValue;
         };
@@ -12,8 +12,8 @@ export declare const scrollAreaTheme: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            viewport?: import("tailwind-variants").ClassValue;
             thumb?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
             scrollbar?: import("tailwind-variants").ClassValue;
             corner?: import("tailwind-variants").ClassValue;
         };
@@ -28,8 +28,8 @@ export declare const scrollAreaTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
-            viewport?: import("tailwind-variants").ClassValue;
             thumb?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
             scrollbar?: import("tailwind-variants").ClassValue;
             corner?: import("tailwind-variants").ClassValue;
         };

package/dist/runtime/theme/scroll-area.js

@@ -4,7 +4,7 @@ export const scrollAreaTheme = tv({
     root: "relative overflow-hidden",
     viewport: "h-full w-full rounded-[inherit]",
     scrollbar: "flex touch-none select-none p-0.5 transition-colors data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col",
-    thumb: "relative flex-1 rounded-full bg-[var(--ui-border)] before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-11 before:w-full before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
-    corner: "bg-[var(--ui-bg-elevated)]"
+    thumb: "relative flex-1 rounded-full bg-[var(--selaras-resolved-border-default)] before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-11 before:w-full before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
+    corner: "bg-[var(--selaras-resolved-surface-elevated)]"
   }
 });