@bubo-squared/ui-framework 0.1.94 → 0.1.96

package/dist/index.cjs

@@ -304,7 +304,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"
@@ -450,7 +450,7 @@ var import_class_variance_authority6 = require("class-variance-authority");
 var import_icons = require("@bubo-squared/icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)(
-  "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: {
@@ -469,7 +469,7 @@ var avatarVariants = (0, import_class_variance_authority6.cva)(
   }
 );
 var avatarInitialsVariants = (0, import_class_variance_authority6.cva)(
-  "flex items-center justify-center text-(--text-primary) leading-none ",
+  "flex items-center justify-center text-primary leading-none ",
   {
     variants: {
       size: {
@@ -560,16 +560,16 @@ var badgeVariants = (0, import_class_variance_authority7.cva)(
         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: {
@@ -621,12 +621,12 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
       },
       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: {
@@ -664,7 +664,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeDotVariants = (0, import_class_variance_authority9.cva)("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)",
@@ -692,7 +692,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__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
@@ -723,7 +723,6 @@ BadgeStatus.displayName = "BadgeStatus";
 var React11 = require("react");
 var import_icons2 = require("@bubo-squared/icons");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var lineClassBase = "flex-1 bg-(--border-secondary) h-px";
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -739,50 +738,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__ */ (0, import_jsx_runtime13.jsx)("div", { className: wrapperClass, ...divProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "span",
-        {
-          className: cn(
-            textClassBySize[resolvedSize],
-            "text-(--text-secondary)"
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              className: cn(
+                textClassBySize[resolvedSize],
+                "text-(--color-secondary)"
+              ),
+              children: textLabel
+            }
           ),
-          children: textLabel
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButton") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       icon,
       iconButtonVariant,
@@ -791,38 +814,65 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        IconButton,
-        {
-          variant: iconButtonVariant ?? "secondary",
-          size: resolvedSize,
-          "aria-label": ariaLabel ?? "More options",
-          icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.TargetIcon, {}),
-          onClick: onIconClick
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            IconButton,
+            {
+              variant: iconButtonVariant ?? "secondary",
+              size: resolvedSize,
+              "aria-label": ariaLabel ?? "More options",
+              icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.TargetIcon, {}),
+              onClick: onIconClick
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButtonGroup") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       iconGroupItems,
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconButtonGroup, { items: iconGroupItems, size: resolvedSize }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            IconButtonGroup,
+            {
+              className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+              items: iconGroupItems,
+              size: resolvedSize
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "button") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       buttonLabel,
       onButtonClick,
@@ -830,19 +880,28 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Button,
-        {
-          variant: buttonVariant ?? "secondary",
-          size: resolvedSize,
-          onClick: onButtonClick,
-          children: buttonLabel
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Button,
+            {
+              variant: buttonVariant ?? "secondary",
+              size: resolvedSize,
+              onClick: onButtonClick,
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   return null;
 };
@@ -884,8 +943,8 @@ var Progress = React12.forwardRef(
         ...rest,
         children: [
           showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "paragraph-s-bold text-(--text-primary)", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "footnote text-(--text-secondary)", children: percentageLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "paragraph-s-bold text-primary", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("w-full bg-(--chart-mono) overflow-hidden", barHeightClasses), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
@@ -897,7 +956,7 @@ var Progress = React12.forwardRef(
               style: { width: `${clamped}%` }
             }
           ) }),
-          showHint && hint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "caption text-(--text-secondary)", children: hint })
+          showHint && hint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "caption text-(--color-secondary)", children: hint })
         ]
       }
     );
@@ -911,7 +970,7 @@ var import_class_variance_authority10 = require("class-variance-authority");
 var import_icons3 = require("@bubo-squared/icons");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var iconStatusVariants = (0, import_class_variance_authority10.cva)(
-  "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: {
@@ -929,10 +988,10 @@ var iconStatusVariants = (0, import_class_variance_authority10.cva)(
 );
 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;
@@ -959,11 +1018,11 @@ var StatusAvatar = React13.forwardRef((props, ref) => {
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CheckIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.StarIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.PlusIcon, { className: "size-3 text-(--text-button-white)" }),
-        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CrossIcon, { className: "size-3 text-(--text-button-white)" })
+        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -989,8 +1048,8 @@ var tagVariants = (0, import_class_variance_authority11.cva)(
     }
   }
 );
-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 {
@@ -1014,10 +1073,10 @@ var Tag = React14.forwardRef(
         children: [
           leading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: iconClasses, children: leading }),
           value ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-(--text-primary) paragraph-l mb-0! cursor-default", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary paragraph-l mb-0! cursor-default", children: label }),
           trailing && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: iconClasses, children: trailing })
         ]
       }
@@ -1037,9 +1096,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)",
@@ -1055,7 +1114,7 @@ function Checkbox({ label, className, ...props }) {
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "paragraph-m-medium text-(--text-primary)", children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "paragraph-m-medium text-primary", children: label })
   ] });
 }
 
@@ -1066,7 +1125,7 @@ var import_icons6 = require("@bubo-squared/icons");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var dropdownWrapperBase = "flex flex-col gap-2 items-start";
 var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
-  "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: {
@@ -1092,11 +1151,11 @@ var dropdownTextVariants = (0, import_class_variance_authority12.cva)("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: {
@@ -1187,7 +1246,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
       }
@@ -1249,7 +1308,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),
@@ -1267,7 +1326,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
       }
@@ -1293,8 +1352,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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn(fieldBase, className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "label",
@@ -1326,7 +1385,7 @@ var React18 = __toESM(require("react"), 1);
 var import_jsx_runtime20 = require("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__ */ (0, import_jsx_runtime20.jsx)(
@@ -1365,7 +1424,7 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
         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: {
@@ -1401,8 +1460,8 @@ var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate"
       "extra-large": "h6-title"
     },
     disabled: {
-      true: "text-(--text-primary-disabled)",
-      false: "text-(--text-primary)"
+      true: "text-primary-disabled",
+      false: "text-primary"
     }
   },
   defaultVariants: {
@@ -1436,7 +1495,7 @@ var actionButtonVariants = (0, import_class_variance_authority14.cva)(
         "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: {
@@ -1650,13 +1709,13 @@ function CommandInput({
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons7.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--text-secondary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons7.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           import_cmdk.Command.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
@@ -1843,7 +1902,7 @@ var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
       "extra-large": "h6-title"
     },
     disabled: {
-      true: "text-(--text-primary-disabled) border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-(--border-secondary-disabled)"
     }
   },
   defaultVariants: {
@@ -1942,7 +2001,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__ */ (0, import_jsx_runtime28.jsx)(
@@ -1992,7 +2051,7 @@ var CountrySelect = ({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandList, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandEmpty, { children: "No country found." }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(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__ */ (0, import_jsx_runtime28.jsx)(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__ */ (0, import_jsx_runtime28.jsx)(
                     CountrySelectOption,
                     {
@@ -2028,7 +2087,7 @@ var CountrySelectOption = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     CommandItem,
     {
-      className: "gap-2 data-[selected=true]:text-(--text-primary)",
+      className: "gap-2 data-[selected=true]:text-primary",
       onSelect: handleSelect,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FlagComponent, { country, countryName }),
@@ -2078,8 +2137,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
       }
@@ -2158,8 +2217,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
                     }
@@ -2177,8 +2236,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"
       }
@@ -2529,7 +2588,7 @@ var Slider = (props) => {
               {
                 className: cn(
                   "paragraph-s",
-                  disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)"
+                  disabled ? "text-primary-disabled" : "text-primary"
                 ),
                 children: labelText
               }
@@ -2621,8 +2680,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()
       }
@@ -2690,8 +2749,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;
@@ -2724,7 +2783,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
       }
@@ -2763,7 +2822,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
@@ -3022,8 +3081,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
           }
@@ -3057,7 +3116,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",
@@ -3211,8 +3270,8 @@ var breadcrumbTextVariants = (0, import_class_variance_authority19.cva)(
   {
     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: {
@@ -3343,7 +3402,7 @@ var logoTextSizeVariants = (0, import_class_variance_authority21.cva)("", {
   }
 });
 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__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LogoTextSvg, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })