@bubo-squared/ui-framework 0.1.94 → 0.1.96

package/dist/index.js

@@ -237,7 +237,7 @@ var IconButtonGroup = (props) => {
           "aria-label": item.ariaLabel,
           disabled: item.disabled,
           className: cn(
-            "rounded-none border-1 border-(--border-secondary) text-(--text-primary) ",
+            "rounded-none border-1 border-(--border-secondary) text-primary ",
             index === 0 && "rounded-l-6",
             index === items.length - 1 && "rounded-r-6",
             index > 0 && "-ml-px"
@@ -383,7 +383,7 @@ import { cva as cva6 } from "class-variance-authority";
 import { UserIcon } from "@bubo-squared/icons";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var avatarVariants = cva6(
-  "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-(--text-primary) overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
+  "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
   {
     variants: {
       size: {
@@ -402,7 +402,7 @@ var avatarVariants = cva6(
   }
 );
 var avatarInitialsVariants = cva6(
-  "flex items-center justify-center text-(--text-primary) leading-none ",
+  "flex items-center justify-center text-primary leading-none ",
   {
     variants: {
       size: {
@@ -493,16 +493,16 @@ var badgeVariants = cva7(
         xl: "px-2 h6-title"
       },
       variant: {
-        primary: "bg-(--background-secondary) text-(--text-primary)",
-        secondary: "bg-(--background-primary) border-1 border-(--border-primary) text-(--text-primary)",
-        active: "bg-(--color-ac-lilac) text-(--text-neutral-badge-black)",
-        informal: "bg-(--color-ac-neon-blue) text-(--text-neutral-badge-black)",
-        success: "bg-(--color-ac-neon-green) text-(--text-neutral-badge-black)",
-        warning: "bg-(--color-ac-light-orange) text-(--text-neutral-badge-black)",
-        error: "bg-(--color-s-error-300) text-(--text-neutral-badge-black)",
-        disabled: "bg-(--background-primary-disabled) border-1 border-(--border-primary-disabled) text-(--text-primary-disabled)",
-        "double-default": "bg-(--background-secondary) text-(--text-primary)",
-        "double-current": "bg-(--color-ac-lilac) text-(--text-neutral-badge-black)"
+        primary: "bg-(--background-secondary) text-primary",
+        secondary: "bg-(--background-primary) border-1 border-(--border-primary) text-primary",
+        active: "bg-ac-lilac text-badge-black",
+        informal: "bg-ac-neon-blue text-badge-black",
+        success: "bg-ac-neon-green text-badge-black",
+        warning: "bg-ac-light-orange text-badge-black",
+        error: "bg-s-error-300 text-badge-black",
+        disabled: "bg-(--background-primary-disabled) border-1 border-(--border-primary-disabled) text-primary-disabled",
+        "double-default": "bg-(--background-secondary) text-primary",
+        "double-current": "bg-color-ac-lilac text-badge-black"
       }
     },
     defaultVariants: {
@@ -554,12 +554,12 @@ var badgeDigitVariants = cva8(
       },
       variant: {
         primary: "bg-(--background-brand)",
-        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--text-secondary)",
+        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--color-secondary)",
         informal: "bg-(--background-informal)",
         success: "bg-(--background-success)",
         warning: "bg-(--background-warning)",
         error: "bg-(--background-error)",
-        disabled: "bg-(--background-primary) border-1 border-(--border-primary-disabled) text-(--text-primary-disabled)"
+        disabled: "bg-(--background-primary) border-1 border-(--border-primary-disabled) text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -597,7 +597,7 @@ import { jsx as jsx11 } from "react/jsx-runtime";
 var badgeDotVariants = cva9("rounded-12 size-3", {
   variants: {
     status: {
-      disabled: "bg-(--text-primary)",
+      disabled: "bg-(--color-primary)",
       informal: "bg-(--background-informal)",
       "success/online": "bg-(--background-success)",
       warning: "bg-(--background-warning)",
@@ -625,7 +625,7 @@ var BadgeStatus = React10.forwardRef(
       dotClassName,
       ...rest
     } = props;
-    const textClasses = active ? "caption-medium text-(--text-primary)" : "caption-medium text-(--text-primary-disabled)";
+    const textClasses = active ? "caption-medium text-primary" : "caption-medium text-primary-disabled";
     const dotClasses = active ? "bg-(--background-informal)" : "bg-(--background-primary)";
     return /* @__PURE__ */ jsxs6(
       "div",
@@ -656,7 +656,6 @@ BadgeStatus.displayName = "BadgeStatus";
 import "react";
 import { TargetIcon } from "@bubo-squared/icons";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var lineClassBase = "flex-1 bg-(--border-secondary) h-px";
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -672,50 +671,74 @@ var textClassBySize = {
 var Divider = (props) => {
   const resolvedType = props.type ?? "default";
   const resolvedSize = props.size ?? "sm";
+  const resolvedOrientation = props.orientation ?? "horizontal";
+  const ariaOrientation = resolvedOrientation === "vertical" ? "vertical" : "horizontal";
   const showCenter = resolvedType !== "default";
-  const lineClass = lineClassBase;
+  const lineClass = resolvedOrientation === "vertical" ? "flex-1 bg-(--border-secondary) w-px" : "flex-1 bg-(--border-secondary) h-px";
   const wrapperClass = cn(
-    "flex w-full items-center",
+    "flex items-center",
+    resolvedOrientation === "vertical" ? "h-full flex-col" : "w-full",
     showCenter ? gapBySize[resolvedSize] : "gap-0",
     props.className
   );
   if (props.type === void 0 || props.type === "default") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       label: _label,
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsx13("div", { className: wrapperClass, ...divProps, children: /* @__PURE__ */ jsx13("div", { className: lineClass }) });
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: /* @__PURE__ */ jsx13("div", { className: lineClass })
+      }
+    );
   }
   if (props.type === "text") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       label,
       className: _className,
       ...divProps
     } = props;
     const textLabel = label ? label : "OR";
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(
-        "span",
-        {
-          className: cn(
-            textClassBySize[resolvedSize],
-            "text-(--text-secondary)"
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: cn(
+                textClassBySize[resolvedSize],
+                "text-(--color-secondary)"
+              ),
+              children: textLabel
+            }
           ),
-          children: textLabel
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButton") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       icon,
       iconButtonVariant,
@@ -724,38 +747,65 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(
-        IconButton,
-        {
-          variant: iconButtonVariant ?? "secondary",
-          size: resolvedSize,
-          "aria-label": ariaLabel ?? "More options",
-          icon: icon ?? /* @__PURE__ */ jsx13(TargetIcon, {}),
-          onClick: onIconClick
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            IconButton,
+            {
+              variant: iconButtonVariant ?? "secondary",
+              size: resolvedSize,
+              "aria-label": ariaLabel ?? "More options",
+              icon: icon ?? /* @__PURE__ */ jsx13(TargetIcon, {}),
+              onClick: onIconClick
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButtonGroup") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       iconGroupItems,
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(IconButtonGroup, { items: iconGroupItems, size: resolvedSize }),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            IconButtonGroup,
+            {
+              className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+              items: iconGroupItems,
+              size: resolvedSize
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "button") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       buttonLabel,
       onButtonClick,
@@ -763,19 +813,28 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(
-        Button,
-        {
-          variant: buttonVariant ?? "secondary",
-          size: resolvedSize,
-          onClick: onButtonClick,
-          children: buttonLabel
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            Button,
+            {
+              variant: buttonVariant ?? "secondary",
+              size: resolvedSize,
+              onClick: onButtonClick,
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   return null;
 };
@@ -817,8 +876,8 @@ var Progress = React12.forwardRef(
         ...rest,
         children: [
           showLabel && label && /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
-            /* @__PURE__ */ jsx14("span", { className: "paragraph-s-bold text-(--text-primary)", children: label }),
-            /* @__PURE__ */ jsx14("span", { className: "footnote text-(--text-secondary)", children: percentageLabel })
+            /* @__PURE__ */ jsx14("span", { className: "paragraph-s-bold text-primary", children: label }),
+            /* @__PURE__ */ jsx14("span", { className: "footnote text-(--color-secondary)", children: percentageLabel })
           ] }),
           /* @__PURE__ */ jsx14("div", { className: cn("w-full bg-(--chart-mono) overflow-hidden", barHeightClasses), children: /* @__PURE__ */ jsx14(
             "div",
@@ -830,7 +889,7 @@ var Progress = React12.forwardRef(
               style: { width: `${clamped}%` }
             }
           ) }),
-          showHint && hint && /* @__PURE__ */ jsx14("p", { className: "caption text-(--text-secondary)", children: hint })
+          showHint && hint && /* @__PURE__ */ jsx14("p", { className: "caption text-(--color-secondary)", children: hint })
         ]
       }
     );
@@ -850,7 +909,7 @@ import {
 } from "@bubo-squared/icons";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var iconStatusVariants = cva10(
-  "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--text-primary-inverse) p-1",
+  "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
     variants: {
       variant: {
@@ -868,10 +927,10 @@ var iconStatusVariants = cva10(
 );
 var presenceDotBase = "inline-flex h-5 w-5 items-center justify-center";
 var presenceDotByVariant = {
-  offline: "bg-(--background-primary) border-1 border-(--text-primary-inverse)",
-  online: "bg-(--background-success) border-1 border-(--text-primary-inverse)",
-  away: "bg-(--background-warning) border-1 border-(--text-primary-inverse)",
-  busy: "bg-(--background-error) border-1 border-(--text-primary-inverse)"
+  offline: "bg-(--background-primary) border-1 border-(--color-primary-inverse)",
+  online: "bg-(--background-success) border-1 border-(--color-primary-inverse)",
+  away: "bg-(--background-warning) border-1 border-(--color-primary-inverse)",
+  busy: "bg-(--background-error) border-1 border-(--color-primary-inverse)"
 };
 var StatusAvatar = React13.forwardRef((props, ref) => {
   const { variant = "verified", className, ...rest } = props;
@@ -898,11 +957,11 @@ var StatusAvatar = React13.forwardRef((props, ref) => {
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ jsx15(CheckIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ jsx15(BookmarkCheckIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "favorite" && /* @__PURE__ */ jsx15(StarIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "add" && /* @__PURE__ */ jsx15(PlusIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "remove" && /* @__PURE__ */ jsx15(CrossIcon, { className: "size-3 text-(--text-button-white)" })
+        iconVariant === "verified" && /* @__PURE__ */ jsx15(CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ jsx15(BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ jsx15(StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ jsx15(PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ jsx15(CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -928,8 +987,8 @@ var tagVariants = cva11(
     }
   }
 );
-var disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-(--text-primary-disabled)";
-var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-(--text-primary)";
+var disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-primary-disabled";
+var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-primary";
 var Tag = React14.forwardRef(
   (props, ref) => {
     const {
@@ -953,10 +1012,10 @@ var Tag = React14.forwardRef(
         children: [
           leading && /* @__PURE__ */ jsx16("div", { className: iconClasses, children: leading }),
           value ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ jsx16("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default", children: label }),
+            /* @__PURE__ */ jsx16("span", { className: "text-primary paragraph-l mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ jsx16("span", { className: "text-primary paragraph-l mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ jsx16("span", { className: "text-primary paragraph-l-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ jsx16("span", { className: "text-primary paragraph-l mb-0! cursor-default", children: label }),
           trailing && /* @__PURE__ */ jsx16("div", { className: iconClasses, children: trailing })
         ]
       }
@@ -976,9 +1035,9 @@ function Checkbox({ label, className, ...props }) {
       CheckboxPrimitive.Root,
       {
         className: cn(
-          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-(--text-primary)",
-          "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-(--text-button-white) data-[state=checked]:border-none",
-          "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-(--text-button-white) data-[state=indeterminate]:border-none",
+          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-primary-inverse",
+          "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
+          "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-button-white data-[state=indeterminate]:border-none",
           "data-[state=checked]:hover:bg-(--background-brand-hover) data-[state=indeterminate]:hover:bg-(--background-brand-hover)",
           "focus-visible:border-(--border-brand)",
           "disabled:bg-(--background-primary-disabled) disabled:border-none disabled:text-(--icon-primary-disabled)",
@@ -994,7 +1053,7 @@ function Checkbox({ label, className, ...props }) {
         ] })
       }
     ),
-    label && /* @__PURE__ */ jsx17("span", { className: "paragraph-m-medium text-(--text-primary)", children: label })
+    label && /* @__PURE__ */ jsx17("span", { className: "paragraph-m-medium text-primary", children: label })
   ] });
 }
 
@@ -1005,7 +1064,7 @@ import { ChevronDownIcon } from "@bubo-squared/icons";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var dropdownWrapperBase = "flex flex-col gap-2 items-start";
 var dropdownTriggerVariants = cva12(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-(--text-primary-disabled) disabled:cursor-default",
+  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
     variants: {
       size: {
@@ -1031,11 +1090,11 @@ var dropdownTextVariants = cva12("truncate", {
       "extra-large": "h6-title"
     },
     hasValue: {
-      false: "text-(--text-secondary)",
-      true: "text-(--text-primary)"
+      false: "text-(--color-secondary)",
+      true: "text-primary"
     },
     disabled: {
-      true: "text-(--text-primary-disabled)"
+      true: "text-primary-disabled"
     }
   },
   defaultVariants: {
@@ -1126,7 +1185,7 @@ var Dropdown = (props) => {
         id: labelId,
         className: cn(
           "paragraph-s",
-          disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+          disabled ? "text-primary-disabled" : "text-primary"
         ),
         children: label
       }
@@ -1188,7 +1247,7 @@ var Dropdown = (props) => {
               "button",
               {
                 type: "button",
-                className: "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) py-(--space-8) text-left paragraph-l text-(--text-primary) hover:bg-(--background-secondary)",
+                className: "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) py-(--space-8) text-left paragraph-l text-primary hover:bg-(--background-secondary)",
                 role: "option",
                 "aria-selected": selected,
                 onClick: () => handleSelect(opt.value),
@@ -1206,7 +1265,7 @@ var Dropdown = (props) => {
         id: hintId,
         className: cn(
           "caption",
-          disabled ? "text-(--text-primary-disabled)" : "text-(--text-secondary)"
+          disabled ? "text-primary-disabled" : "text-(--color-secondary)"
         ),
         children: hint
       }
@@ -1232,8 +1291,8 @@ var Field = (props) => {
   const fieldId = React17.useId();
   const labelId = label ? `${fieldId}-label` : void 0;
   const hintId = hint ? `${fieldId}-hint` : void 0;
-  const hintColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-secondary)";
-  const labelColorClass = disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)";
+  const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
+  const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
   return /* @__PURE__ */ jsxs13("div", { className: cn(fieldBase, className), children: [
     label && /* @__PURE__ */ jsx19(
       "label",
@@ -1265,7 +1324,7 @@ import * as React18 from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var Input = React18.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
-    const base = "text-(--text-primary) placeholder:text-(--text-secondary) disabled:text-(--text-primary-disabled) disabled:placeholder:text-(--text-primary-disabled) selection:bg-primary selection:text-primary-foreground file:text-foreground";
+    const base = "text-primary placeholder:text-(--color-secondary) disabled:text-primary-disabled disabled:placeholder:text-primary-disabled selection:bg-primary selection:text-primary-foreground file:text-foreground";
     const defaultStyles = "dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
     const bareStyles = "bg-transparent outline-none w-full";
     return /* @__PURE__ */ jsx20(
@@ -1304,7 +1363,7 @@ var inputShellVariants = cva13(
         error: "input-error"
       },
       disabled: {
-        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-(--text-primary-disabled) cursor-default"
+        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-primary-disabled cursor-default"
       }
     },
     defaultVariants: {
@@ -1340,8 +1399,8 @@ var passwordTextVariants = cva14("truncate", {
       "extra-large": "h6-title"
     },
     disabled: {
-      true: "text-(--text-primary-disabled)",
-      false: "text-(--text-primary)"
+      true: "text-primary-disabled",
+      false: "text-primary"
     }
   },
   defaultVariants: {
@@ -1375,7 +1434,7 @@ var actionButtonVariants = cva14(
         "extra-large": "paragraph-m"
       },
       disabled: {
-        true: "cursor-default text-(--text-primary-disabled) hover:text-(--text-primary-disabled)"
+        true: "cursor-default text-primary-disabled hover:text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -1589,13 +1648,13 @@ function CommandInput({
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ jsx25(SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--text-secondary)" }),
+        /* @__PURE__ */ jsx25(SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
         /* @__PURE__ */ jsx25(
           CommandPrimitive.Input,
           {
             "data-slot": "command-input",
             className: cn(
-              "placeholder:text-(--text-secondary) text-(--text-primary) flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              "placeholder:text-(--color-secondary) text-primary flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             ...props
@@ -1782,7 +1841,7 @@ var inputTextVariants = cva16("", {
       "extra-large": "h6-title"
     },
     disabled: {
-      true: "text-(--text-primary-disabled) border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-(--border-secondary-disabled)"
     }
   },
   defaultVariants: {
@@ -1881,7 +1940,7 @@ var CountrySelect = ({
           {
             type: "button",
             variant: "outline",
-            className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-(--text-primary-disabled) hover:text-(--text-primary-hover) focus:text-(--text-primary-focus)"),
+            className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-primary-disabled hover:text-(--color-primary-hover) focus:text-(--color-primary-focus)"),
             disabled,
             children: [
               /* @__PURE__ */ jsx28(
@@ -1931,7 +1990,7 @@ var CountrySelect = ({
               ),
               /* @__PURE__ */ jsx28(CommandList, { children: /* @__PURE__ */ jsxs18(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
                 /* @__PURE__ */ jsx28(CommandEmpty, { children: "No country found." }),
-                /* @__PURE__ */ jsx28(CommandGroup, { className: "[&>div>div]:pl-4 [&>div>div]:pr-2 [&>div>div]:py-2 [&>div>div]:border-b [&>div>div]:border-b-(--border-secondary) [&>div>div]:cursor-pointer [&>div>div]:hover:bg-(--background-primary-hover) [&>div>div]:text-(--text-primary) [&>div>div]:hover:text-(--text-primary) p-0 pr-4", children: countryList.map(
+                /* @__PURE__ */ jsx28(CommandGroup, { className: "[&>div>div]:pl-4 [&>div>div]:pr-2 [&>div>div]:py-2 [&>div>div]:border-b [&>div>div]:border-b-(--border-secondary) [&>div>div]:cursor-pointer [&>div>div]:hover:bg-(--background-primary-hover) [&>div>div]:text-primary [&>div>div]:hover:text-primary p-0 pr-4", children: countryList.map(
                   ({ value, label }) => value ? /* @__PURE__ */ jsx28(
                     CountrySelectOption,
                     {
@@ -1967,7 +2026,7 @@ var CountrySelectOption = (props) => {
   return /* @__PURE__ */ jsxs18(
     CommandItem,
     {
-      className: "gap-2 data-[selected=true]:text-(--text-primary)",
+      className: "gap-2 data-[selected=true]:text-primary",
       onSelect: handleSelect,
       children: [
         /* @__PURE__ */ jsx28(FlagComponent, { country, countryName }),
@@ -2017,8 +2076,8 @@ var RadioGroup = ({
       "span",
       {
         className: cn(
-          "paragraph-s text-(--text-primary)",
-          disabled && "text-(--text-primary-disabled)"
+          "paragraph-s text-primary",
+          disabled && "text-primary-disabled"
         ),
         children: label
       }
@@ -2097,8 +2156,8 @@ var RadioGroup = ({
                     "span",
                     {
                       className: cn(
-                        "paragraph-s text-(--text-primary)",
-                        "group-data-[disabled]:text-(--text-primary-disabled) whitespace-nowrap"
+                        "paragraph-s text-primary",
+                        "group-data-[disabled]:text-primary-disabled whitespace-nowrap"
                       ),
                       children: option.label
                     }
@@ -2116,8 +2175,8 @@ var RadioGroup = ({
       {
         id: hintId,
         className: cn(
-          "caption text-(--text-secondary)",
-          disabled && "text-(--text-primary-disabled)"
+          "caption text-(--color-secondary)",
+          disabled && "text-primary-disabled"
         ),
         children: hint ?? "\xA0"
       }
@@ -2468,7 +2527,7 @@ var Slider = (props) => {
               {
                 className: cn(
                   "paragraph-s",
-                  disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+                  disabled ? "text-primary-disabled" : "text-primary"
                 ),
                 children: labelText
               }
@@ -2560,8 +2619,8 @@ var Slider = (props) => {
       "p",
       {
         className: cn(
-          "paragraph-s text-(--text-primary)",
-          disabled && "text-(--text-primary-disabled)"
+          "paragraph-s text-primary",
+          disabled && "text-primary-disabled"
         ),
         children: formatNumericLabel()
       }
@@ -2629,8 +2688,8 @@ var TextArea = (props) => {
     success: "focus-within:border-(--border-success) focus-within:hover:border-(--border-success) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-success)]",
     error: "focus-within:border-(--border-error) focus-within:hover:border-(--border-error) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-error)]"
   };
-  const hintColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-secondary)";
-  const counterColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-primary)";
+  const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
+  const counterColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-primary";
   const handleResizePointerDown = (event) => {
     if (disabled) return;
     if (event.button !== 0) return;
@@ -2663,7 +2722,7 @@ var TextArea = (props) => {
         id: labelId,
         className: cn(
           "paragraph-s",
-          disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+          disabled ? "text-primary-disabled" : "text-primary"
         ),
         children: label
       }
@@ -2702,7 +2761,7 @@ var TextArea = (props) => {
               maxLength: effectiveMaxLength,
               className: cn(
                 "paragraph-m bg-transparent outline-none w-full h-full resize-none px-2 py-2 pr-8",
-                disabled ? "text-(--text-primary-disabled)" : hasValue ? "text-(--text-primary)" : "text-(--text-secondary)",
+                disabled ? "text-primary-disabled" : hasValue ? "text-primary" : "text-(--color-secondary)",
                 showCharacterLimit && "pr-16"
               ),
               ...textareaProps
@@ -2961,8 +3020,8 @@ var Toggle = (props) => {
           "span",
           {
             className: cn(
-              "paragraph-s text-(--text-primary)",
-              disabled && "text-(--text-primary-disabled)"
+              "paragraph-s text-primary",
+              disabled && "text-primary-disabled"
             ),
             children: label
           }
@@ -2996,7 +3055,7 @@ var WebsiteInput = (props) => {
   const addonTextClass = cn(
     "flex mb-0!",
     size === "extra-large" ? "paragraph-m" : "paragraph-s",
-    disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary) group-hover:text-(--text-primary-hover) group-focus-within:text-(--text-primary-focus)"
+    disabled ? "text-primary-disabled" : "text-primary group-hover:text-(--color-primary-hover) group-focus-within:text-(--color-primary-focus)"
   );
   const baseAddonClass = cn(
     "flex items-center gap-2 px-2 h-full",
@@ -3150,8 +3209,8 @@ var breadcrumbTextVariants = cva19(
   {
     variants: {
       variant: {
-        colored: "text-(--text-brand) group-hover:text-(--text-brand-hover) group-focus-visible:text-(--text-brand-focus) group-disabled:text-(--text-brand-disabled)",
-        flat: "text-(--text-primary) group-hover:text-(--text-primary-hover) group-focus-visible:text-(--text-primary-focus) group-disabled:text-(--text-primary-disabled)"
+        colored: "text-(--color-brand) group-hover:text-(--color-brand-hover) group-focus-visible:text-(--color-brand-focus) group-disabled:text-(--color-brand-disabled)",
+        flat: "text-primary group-hover:text-(--color-primary-hover) group-focus-visible:text-(--color-primary-focus) group-disabled:text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -3282,7 +3341,7 @@ var logoTextSizeVariants = cva21("", {
   }
 });
 var Logo = ({ className, textColor, variant = "inline" }) => {
-  const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-(--text-primary)";
+  const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-primary";
   return /* @__PURE__ */ jsxs29("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
     /* @__PURE__ */ jsx39(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
     /* @__PURE__ */ jsx39(LogoTextSvg, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })