npm - @l3mpire/ui - Versions diffs - 2.20.0 → 2.21.1 - Mend

@l3mpire/ui 2.20.0 → 2.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.mjs CHANGED Viewed

@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var badgeVariants = cva(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
-    "font-semibold",
+    "font-medium",
     "border border-transparent"
   ],
   {
@@ -116,7 +116,7 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva2(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
-    "font-semibold transition-colors",
+    "font-medium transition-colors",
     "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
     "disabled:pointer-events-none",
     "border",
@@ -420,7 +420,7 @@ var BrowserTabItem = React3.forwardRef(
               },
               onClick: (e) => e.stopPropagation(),
               className: cn(
-                "text-sm font-semibold leading-sm bg-transparent outline-none p-0 m-0",
+                "text-sm font-medium leading-sm bg-transparent outline-none p-0 m-0",
                 "border-b border-browser-tab-item-border border-dashed border-t-0 border-l-0 border-r-0",
                 isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
               ),
@@ -430,7 +430,7 @@ var BrowserTabItem = React3.forwardRef(
             "span",
             {
               className: cn(
-                "text-sm font-semibold leading-sm whitespace-nowrap",
+                "text-sm font-medium leading-sm whitespace-nowrap",
                 isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
               ),
               onDoubleClick: (e) => {
@@ -619,7 +619,7 @@ var BrowserTab = React3.forwardRef(
                         "span",
                         {
                           className: cn(
-                            "text-sm font-semibold leading-sm whitespace-nowrap",
+                            "text-sm font-medium leading-sm whitespace-nowrap",
                             item.isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
                           ),
                           children: item.label
@@ -667,14 +667,14 @@ import { Icon as Icon4 } from "@l3mpire/icons";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var textSm = "text-sm font-regular leading-sm";
 var textXs = "text-xs font-regular leading-xs";
-var textXsMedium = "text-xs font-semibold leading-xs";
-var textSmMedium = "text-sm font-semibold leading-sm";
+var textXsMedium = "text-xs font-medium leading-xs";
+var textSmMedium = "text-sm font-medium leading-sm";
 var containerStyle = [
   "flex flex-col gap-base overflow-clip",
   "bg-dropdown-bg",
   "border border-dropdown-border",
   "rounded-md",
-  "p-base",
+  "p-xs",
   "shadow-lg"
 ];
 var DropdownMenu = React4.forwardRef(
@@ -1092,7 +1092,7 @@ import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var linkVariants = cva4(
   [
     "inline-flex items-center",
-    "font-semibold",
+    "font-medium",
     "transition-colors cursor-pointer",
     "disabled:pointer-events-none",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
@@ -1224,7 +1224,7 @@ var InputLabel = React8.forwardRef(({ className, type = "default", disabled, inf
       className: cn(
         "inline-flex items-center gap-xs",
         "text-xs",
-        "font-semibold",
+        "font-medium",
         "leading-xs",
         textColor2,
         className
@@ -1303,7 +1303,7 @@ var typeIconMap = {
   warning: { icon: faTriangleExclamationSolid, color: "text-info-message-warning-icon" },
   empty: { icon: faCircleInfoSolid2, color: "text-info-message-empty-icon" }
 };
-var titleStyle = "text-sm font-semibold leading-sm text-info-message-title";
+var titleStyle = "text-sm font-medium leading-sm text-info-message-title";
 var descriptionStyle = "text-xs font-regular leading-xs text-info-message-description";
 var closeButtonStyle = "inline-flex shrink-0 items-center justify-center p-xs rounded-base text-info-message-close hover:bg-black/5 transition-colors";
 var typeLinkIntentMap = {
@@ -1408,7 +1408,7 @@ var typeIconMap2 = {
   alert: { icon: faCircleExclamationSolid2, color: "text-toast-alert-icon" },
   warning: { icon: faTriangleExclamationSolid2, color: "text-toast-warning-icon" }
 };
-var titleStyle2 = "text-sm font-semibold leading-sm text-toast-title";
+var titleStyle2 = "text-sm font-medium leading-sm text-toast-title";
 var subtitleStyle = "text-sm font-regular leading-sm text-toast-subtitle";
 var closeButtonStyle2 = "inline-flex shrink-0 items-center justify-center self-start p-sm rounded-md text-toast-close hover:bg-black/5 transition-colors";
 var ToastProvider = ToastPrimitive.Provider;
@@ -1483,7 +1483,7 @@ var trackStyles = {
   ]
 };
 var thumbStyle = "pointer-events-none block rounded-full size-3 translate-x-0.5 bg-switch-thumb-bg shadow-md transition-transform data-[state=checked]:translate-x-[13px]";
-var labelBase = "cursor-pointer select-none text-sm font-semibold leading-sm";
+var labelBase = "cursor-pointer select-none text-sm font-medium leading-sm";
 var labelColor = {
   default: "text-switch-label-text",
   disabled: "pointer-events-none text-switch-label-disabled"
@@ -2028,7 +2028,7 @@ var Avatar = React15.forwardRef(({ className, size = "xl", shape = "rounded", sr
             {
               delayMs: 0,
               className: cn(
-                "font-semibold",
+                "font-medium",
                 "text-avatar-fallback-text",
                 "select-none text-center",
                 initialsFontSize[size ?? "xl"]
@@ -2077,7 +2077,7 @@ var iconStyle = {
   default: "text-checkbox-checked-icon",
   disabled: "text-checkbox-disabled-icon"
 };
-var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-sm";
+var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
 var labelColor2 = {
   default: "text-checkbox-label-default",
   disabled: "pointer-events-none text-checkbox-label-disabled"
@@ -2165,7 +2165,7 @@ var dotStyle = {
   default: "bg-radio-selected-dot",
   disabled: "bg-radio-disabled-dot"
 };
-var labelBase3 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-sm";
+var labelBase3 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
 var labelColor3 = {
   default: "text-radio-label-default",
   disabled: "pointer-events-none text-radio-label-disabled"
@@ -2234,7 +2234,7 @@ var SidebarHeadingItem = React18.forwardRef(
         ref,
         className: cn(
           "flex items-center w-full",
-          "text-xs leading-xs font-semibold text-sidebar-heading-text mb-base",
+          "text-xs leading-xs font-medium text-sidebar-heading-text mb-base",
           className
         ),
         ...props,
@@ -2324,7 +2324,7 @@ var SidebarItem = React19.forwardRef(
               "span",
               {
                 className: cn(
-                  "flex-1 min-w-0 truncate text-sm leading-sm font-semibold",
+                  "flex-1 min-w-0 truncate text-sm leading-sm font-medium",
                   textColorClass
                 ),
                 children: label
@@ -2418,7 +2418,7 @@ var iconColor = {
 };
 var errorGuidance = {
   icon: "shrink-0 text-select-error-icon",
-  text: "text-xs font-semibold leading-xs text-select-error-text"
+  text: "text-xs font-medium leading-xs text-select-error-text"
 };
 function SelectChips({ tags, onTagRemove, chipHeightPx }) {
   const containerRef = React20.useRef(null);
@@ -2463,7 +2463,7 @@ function SelectChips({ tags, onTagRemove, chipHeightPx }) {
     "inline-flex items-center gap-xs shrink-0",
     "px-sm rounded-base",
     "bg-tag-neutral-bg text-tag-neutral-text",
-    "text-xs font-semibold leading-xs",
+    "text-xs font-medium leading-xs",
     "whitespace-nowrap"
   );
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
@@ -2708,7 +2708,7 @@ var TabTrigger = React21.forwardRef(({ className, badge, children, ...props }, r
             "span",
             {
               className: cn(
-                "text-sm font-semibold leading-sm whitespace-nowrap",
+                "text-sm font-medium leading-sm whitespace-nowrap",
                 "text-tab-item-default-text",
                 "group-data-[state=active]:text-tab-item-active-text"
               ),
@@ -2742,7 +2742,7 @@ var tagVariants = cva12(
     "inline-flex items-center",
     "gap-xs",
     "rounded-base",
-    "font-semibold",
+    "font-medium",
     "whitespace-nowrap"
   ],
   {
@@ -2847,7 +2847,7 @@ var fieldStates = {
 };
 var errorGuidance2 = {
   icon: "shrink-0 text-textarea-error-icon",
-  text: "text-xs font-semibold leading-xs text-textarea-error-text"
+  text: "text-xs font-medium leading-xs text-textarea-error-text"
 };
 var charLimitStyle = "shrink-0 text-right text-xs font-regular leading-xs text-textarea-char-limit";
 function resolveState(error, success, disabled) {
@@ -2979,7 +2979,7 @@ var attachedButtonStyles = {
 };
 var errorGuidance3 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-semibold leading-xs text-text-input-error-text"
+  text: "text-xs font-medium leading-xs text-text-input-error-text"
 };
 function resolveState2(error, success, disabled) {
   if (disabled) return "disabled";
@@ -3147,12 +3147,12 @@ var chipStyle = [
   "inline-flex items-center gap-xs shrink-0",
   "h-6 px-sm rounded-base",
   "bg-tag-neutral-bg text-tag-neutral-text",
-  "text-xs font-semibold leading-xs",
+  "text-xs font-medium leading-xs",
   "whitespace-nowrap"
 ];
 var errorGuidance4 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-semibold leading-xs text-text-input-error-text"
+  text: "text-xs font-medium leading-xs text-text-input-error-text"
 };
 var ChipInput = React25.forwardRef(
   ({
@@ -3347,7 +3347,7 @@ var wrapperStates3 = {
 };
 var errorGuidance5 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-semibold leading-xs text-text-input-error-text"
+  text: "text-xs font-medium leading-xs text-text-input-error-text"
 };
 var NumberInput = React26.forwardRef(
   ({
@@ -3528,6 +3528,7 @@ var typographyVariants = cva16("", {
     },
     weight: {
       regular: "font-regular",
+      medium: "font-medium",
       semibold: "font-semibold",
       bold: "font-bold"
     }
@@ -3548,12 +3549,14 @@ var defaultElementMap = {
 };
 var Typography = React27.forwardRef(
   ({ className, variant = "md", weight, as, asChild = false, ...props }, ref) => {
+    const isHeading = variant === "h1" || variant === "h2" || variant === "h3";
+    const resolvedWeight = weight ?? (isHeading ? "semibold" : "regular");
     const Comp = asChild ? Slot3 : as ?? defaultElementMap[variant ?? "md"] ?? "p";
     return /* @__PURE__ */ jsx27(
       Comp,
       {
         ref,
-        className: cn(typographyVariants({ variant, weight }), className),
+        className: cn(typographyVariants({ variant, weight: resolvedWeight }), className),
         ...props
       }
     );
@@ -3594,7 +3597,7 @@ var UserMenuInfoRow = React28.forwardRef(
       children: [
         avatar,
         /* @__PURE__ */ jsxs25("div", { className: "flex flex-1 flex-col min-w-0", children: [
-          /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold leading-sm text-user-menu-name truncate", children: name }),
+          /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
           subtitle && /* @__PURE__ */ jsx28("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
         ] }),
         action
@@ -3703,7 +3706,7 @@ var ModalTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-base font-semibold leading-base text-modal-header-title", className),
+    className: cn("text-base font-medium leading-base text-modal-header-title", className),
     ...props
   }
 ));
@@ -3865,7 +3868,7 @@ var EmptyState = React31.forwardRef(
               "p",
               {
                 className: cn(
-                  "font-semibold text-table-cell-text-primary",
+                  "font-medium text-table-cell-text-primary",
                   isMd ? "text-base leading-base" : "text-sm leading-sm"
                 ),
                 children: title
@@ -3934,7 +3937,7 @@ var AvatarCell = ({
 }) => /* @__PURE__ */ jsxs29("div", { className: cn("flex items-center gap-md", className), children: [
   /* @__PURE__ */ jsx32(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
   /* @__PURE__ */ jsxs29("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx32("span", { className: "text-sm font-semibold text-table-cell-text-primary leading-sm", children: name }),
+    /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
     subtitle && /* @__PURE__ */ jsx32("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
   ] })
 ] });
@@ -3943,7 +3946,7 @@ var StatusCell = ({
   label,
   variant = "light",
   type = "primary",
-  size = "sm",
+  size = "md",
   className
 }) => /* @__PURE__ */ jsx32("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx32(Badge, { variant, type, size, children: label }) });
 StatusCell.displayName = "StatusCell";
@@ -3972,7 +3975,7 @@ var NumberCell = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx32("span", { className: "text-sm font-semibold text-table-cell-text-primary", children: formatted }),
+        /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
         secondaryStat && /* @__PURE__ */ jsx32(
           "span",
           {
@@ -4040,7 +4043,7 @@ var TextCell = ({
   {
     className: cn(
       "text-sm",
-      secondary ? "font-regular text-table-cell-text-secondary" : "font-semibold text-table-cell-text-primary",
+      secondary ? "font-regular text-table-cell-text-secondary" : "font-medium text-table-cell-text-primary",
       className
     ),
     children: value
@@ -4089,7 +4092,7 @@ var EditableCell = ({
       {
         ref: inputRef,
         className: cn(
-          "w-full bg-transparent text-sm font-semibold text-table-cell-text-primary",
+          "w-full bg-transparent text-sm font-medium text-table-cell-text-primary",
           "outline-none border-b border-table-border py-0 h-[20px]",
           className
         ),
@@ -4106,7 +4109,7 @@ var EditableCell = ({
       role: "button",
       tabIndex: 0,
       className: cn(
-        "text-sm font-semibold text-table-cell-text-primary cursor-text leading-sm h-[20px] inline-block",
+        "text-sm font-medium text-table-cell-text-primary cursor-text leading-sm h-[20px] inline-block",
         className
       ),
       onDoubleClick: () => setIsEditing(true),
@@ -4202,7 +4205,7 @@ var TableFooter = React33.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "border-t border-table-border bg-table-bg font-semibold",
+      "border-t border-table-border bg-table-bg font-medium",
       className
     ),
     ...props
@@ -4228,7 +4231,7 @@ var TableHead = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "group/head h-10 px-md py-md text-left align-middle text-xs font-semibold leading-xs",
+      "group/head h-10 px-md py-md text-left align-middle text-xs font-medium leading-xs",
       "text-table-head-text bg-table-head-bg-default",
       "hover:bg-table-head-bg-hover",
       "border-b border-r border-table-border last:border-r-0",
@@ -4244,7 +4247,7 @@ var TableCell = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-md py-md align-middle text-sm font-semibold max-h-[52px]",
+      "px-md py-md align-middle text-sm font-medium max-h-[52px]",
       "text-table-cell-text-primary",
       "border-b border-r border-table-border last:border-r-0",
       "[&:has([role=checkbox])]:pr-0",
@@ -4343,7 +4346,7 @@ function ColumnFilterPopover({
         ),
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ jsx34("span", { className: "text-xs font-semibold text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ jsx34("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
           /* @__PURE__ */ jsx34(
             "select",
             {
@@ -4988,6 +4991,7 @@ SidePanelContent.displayName = "SidePanelContent";
 // src/components/ui/filter/filter-chip-segment.tsx
 import * as React36 from "react";
+import * as TooltipPrimitive3 from "@radix-ui/react-tooltip";
 import { cva as cva19 } from "class-variance-authority";
 import { Icon as Icon23 } from "@l3mpire/icons";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -5013,6 +5017,43 @@ var filterChipSegmentVariants = cva19(
     }
   }
 );
+function TruncatedLabel({
+  label,
+  truncate,
+  className
+}) {
+  const textRef = React36.useRef(null);
+  const [isTruncated, setIsTruncated] = React36.useState(false);
+  React36.useEffect(() => {
+    const el = textRef.current;
+    if (el && truncate) {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    }
+  }, [label, truncate]);
+  const span = /* @__PURE__ */ jsx36(
+    "span",
+    {
+      ref: textRef,
+      className: cn(className, truncate && "max-w-[160px] truncate"),
+      children: label
+    }
+  );
+  if (!isTruncated) return span;
+  return /* @__PURE__ */ jsx36(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs32(TooltipPrimitive3.Root, { children: [
+    /* @__PURE__ */ jsx36(TooltipPrimitive3.Trigger, { asChild: true, children: span }),
+    /* @__PURE__ */ jsx36(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ jsxs32(
+      TooltipPrimitive3.Content,
+      {
+        sideOffset: 4,
+        className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+        children: [
+          label,
+          /* @__PURE__ */ jsx36(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+        ]
+      }
+    ) })
+  ] }) });
+}
 var FilterChipSegment = React36.forwardRef(
   ({
     className,
@@ -5074,16 +5115,17 @@ var FilterChipSegment = React36.forwardRef(
             }
           ),
           label && /* @__PURE__ */ jsx36(
-            "span",
+            TruncatedLabel,
             {
+              label,
+              truncate: segmentType === "value",
               className: cn(
-                "text-sm font-semibold leading-sm whitespace-nowrap",
+                "text-sm font-medium leading-sm whitespace-nowrap",
                 segmentType === "placeholder" ? "text-filter-chip-segment-placeholder" : "text-filter-chip-segment-text"
-              ),
-              children: label
+              )
             }
           ),
-          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ jsx36("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx36("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
+          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ jsx36("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx36("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
           children
         ]
       }
@@ -5471,10 +5513,10 @@ var SortButton = ({
         className: cn(
           "flex items-center gap-xs",
           "min-h-[32px] max-h-[32px]",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+          "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+          "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
           "cursor-pointer transition-colors",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+          "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
           iconOnly ? "size-8 justify-center p-0" : "px-md py-sm min-w-[80px]",
           className
         ),
@@ -5484,15 +5526,15 @@ var SortButton = ({
             {
               icon: direction === "asc" ? faArrowUpSmallBigOutline : faArrowDownBigSmallOutline,
               size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
+              className: "shrink-0 text-foreground"
             }
           ),
-          !iconOnly && /* @__PURE__ */ jsxs34("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap", children: [
-            /* @__PURE__ */ jsxs34("span", { className: "text-[var(--color-muted-foreground)]", children: [
+          !iconOnly && /* @__PURE__ */ jsxs34("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+            /* @__PURE__ */ jsxs34("span", { className: "text-muted-foreground", children: [
               "Sort by",
               " "
             ] }),
-            /* @__PURE__ */ jsx39("span", { className: "text-[var(--color-foreground)]", children: activeLabel })
+            /* @__PURE__ */ jsx39("span", { className: "text-foreground", children: activeLabel })
           ] })
         ]
       }
@@ -5504,7 +5546,7 @@ var SortButton = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col gap-xs overflow-clip p-xs",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -5521,8 +5563,8 @@ var SortButton = ({
               },
               className: cn(
                 "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
-                "hover:bg-[var(--color-dropdown-item-hover)]",
-                field.id === activeField ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                "hover:bg-dropdown-item-hover",
+                field.id === activeField ? "bg-dropdown-item-hover" : ""
               ),
               children: [
                 /* @__PURE__ */ jsx39(
@@ -5532,7 +5574,7 @@ var SortButton = ({
                     size: "sm",
                     className: cn(
                       "shrink-0",
-                      field.id === activeField ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      field.id === activeField ? "text-foreground" : "text-dropdown-item-icon"
                     )
                   }
                 ),
@@ -5541,7 +5583,7 @@ var SortButton = ({
                   {
                     className: cn(
                       "flex-1 text-sm font-regular leading-sm text-left truncate",
-                      field.id === activeField ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      field.id === activeField ? "text-foreground" : "text-dropdown-item-icon"
                     ),
                     children: field.label
                   }
@@ -5550,7 +5592,7 @@ var SortButton = ({
             },
             field.id
           )) }),
-          /* @__PURE__ */ jsx39("div", { className: "h-px bg-[var(--color-border)]" }),
+          /* @__PURE__ */ jsx39("div", { className: "h-px bg-border" }),
           /* @__PURE__ */ jsxs34("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ jsxs34(
               "button",
@@ -5562,8 +5604,8 @@ var SortButton = ({
                 },
                 className: cn(
                   "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
-                  "hover:bg-[var(--color-dropdown-item-hover)]",
-                  direction === "asc" ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                  "hover:bg-dropdown-item-hover",
+                  direction === "asc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
                   /* @__PURE__ */ jsx39(
@@ -5573,7 +5615,7 @@ var SortButton = ({
                       size: "sm",
                       className: cn(
                         "shrink-0",
-                        direction === "asc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "asc" ? "text-foreground" : "text-dropdown-item-icon"
                       )
                     }
                   ),
@@ -5582,7 +5624,7 @@ var SortButton = ({
                     {
                       className: cn(
                         "flex-1 text-sm font-regular leading-sm text-left",
-                        direction === "asc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "asc" ? "text-foreground" : "text-dropdown-item-icon"
                       ),
                       children: "Ascending"
                     }
@@ -5600,8 +5642,8 @@ var SortButton = ({
                 },
                 className: cn(
                   "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
-                  "hover:bg-[var(--color-dropdown-item-hover)]",
-                  direction === "desc" ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                  "hover:bg-dropdown-item-hover",
+                  direction === "desc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
                   /* @__PURE__ */ jsx39(
@@ -5611,7 +5653,7 @@ var SortButton = ({
                       size: "sm",
                       className: cn(
                         "shrink-0",
-                        direction === "desc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "desc" ? "text-foreground" : "text-dropdown-item-icon"
                       )
                     }
                   ),
@@ -5620,7 +5662,7 @@ var SortButton = ({
                     {
                       className: cn(
                         "flex-1 text-sm font-regular leading-sm text-left",
-                        direction === "desc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "desc" ? "text-foreground" : "text-dropdown-item-icon"
                       ),
                       children: "Descending"
                     }
@@ -5648,10 +5690,10 @@ var FilterBarButton = React40.forwardRef(({ className, count, iconOnly = false,
     className: cn(
       "shrink-0 flex items-center gap-sm overflow-hidden",
       "min-h-[32px] max-h-[32px]",
-      "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-      "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+      "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+      "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
       "cursor-pointer transition-colors",
-      "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+      "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
       iconOnly ? count ? "px-sm justify-center" : "size-8 justify-center p-0" : "px-base py-sm min-w-[80px]",
       className
     ),
@@ -5662,11 +5704,11 @@ var FilterBarButton = React40.forwardRef(({ className, count, iconOnly = false,
         {
           icon: faFilterOutline2,
           size: "sm",
-          className: "shrink-0 text-[var(--color-foreground)]"
+          className: "shrink-0 text-foreground"
         }
       ),
-      !iconOnly && /* @__PURE__ */ jsx40("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
-      count != null && count > 0 && /* @__PURE__ */ jsx40("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx40("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+      !iconOnly && /* @__PURE__ */ jsx40("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: children ?? "Filters" }),
+      count != null && count > 0 && /* @__PURE__ */ jsx40("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx40("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
 ));
@@ -5681,10 +5723,10 @@ var SaveViewButton = React41.forwardRef(
     const sharedStyle = [
       "relative flex items-center justify-center",
       "min-h-[32px] max-h-[32px]",
-      "bg-gradient-to-t from-[var(--color-btn-solid-brand-bg-default)] from-[10%] to-[var(--color-btn-solid-brand-bg-gradient-to-default)]",
-      "border border-[var(--color-btn-solid-brand-border-default)]",
+      "bg-gradient-to-t from-btn-solid-brand-bg-default from-[10%] to-btn-solid-brand-bg-gradient-to-default",
+      "border border-btn-solid-brand-border-default",
       "shadow-sm cursor-pointer transition-colors",
-      "hover:from-[var(--color-btn-solid-brand-bg-hover)] hover:to-[var(--color-btn-solid-brand-bg-gradient-to-hover)]"
+      "hover:from-btn-solid-brand-bg-hover hover:to-btn-solid-brand-bg-gradient-to-hover"
     ];
     return /* @__PURE__ */ jsxs36(
       "div",
@@ -5704,8 +5746,8 @@ var SaveViewButton = React41.forwardRef(
                 "rounded-l-md -mr-px"
               ),
               children: [
-                /* @__PURE__ */ jsx41("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-btn-solid-brand-text-default)]", children: label }),
-                /* @__PURE__ */ jsx41("span", { className: "absolute inset-0 rounded-l-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
+                /* @__PURE__ */ jsx41("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
+                /* @__PURE__ */ jsx41("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           ),
@@ -5725,10 +5767,10 @@ var SaveViewButton = React41.forwardRef(
                   {
                     icon: faChevronDownOutline,
                     size: "sm",
-                    className: "text-[var(--color-btn-solid-brand-text-default)]"
+                    className: "text-btn-solid-brand-text-default"
                   }
                 ),
-                /* @__PURE__ */ jsx41("span", { className: "absolute inset-0 rounded-r-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
+                /* @__PURE__ */ jsx41("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           )
@@ -5760,7 +5802,7 @@ var OperatorSelector = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col p-xs overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -5773,8 +5815,8 @@ var OperatorSelector = ({
             onClick: () => onSelect(op),
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]",
-              op === activeOperator && "bg-[var(--color-dropdown-item-hover)]"
+              "hover:bg-dropdown-item-hover",
+              op === activeOperator && "bg-dropdown-item-hover"
             ),
             children: [
               /* @__PURE__ */ jsx42(
@@ -5782,12 +5824,12 @@ var OperatorSelector = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm",
-                    op === activeOperator ? "text-[var(--color-foreground)] font-semibold" : "text-[var(--color-dropdown-item-text)]"
+                    op === activeOperator ? "text-foreground font-medium" : "text-dropdown-item-text"
                   ),
                   children: op
                 }
               ),
-              isNoValueOperator(op) && /* @__PURE__ */ jsx42("span", { className: "ml-auto text-xs text-[var(--color-muted-foreground)]", children: "instant" })
+              isNoValueOperator(op) && /* @__PURE__ */ jsx42("span", { className: "ml-auto text-xs text-muted-foreground", children: "instant" })
             ]
           },
           op
@@ -5810,15 +5852,15 @@ var OperatorList = ({
       onClick: () => onSelect(op),
       className: cn(
         "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-        "hover:bg-[var(--color-dropdown-item-hover)]",
-        op === activeOperator && "bg-[var(--color-dropdown-item-hover)]"
+        "hover:bg-dropdown-item-hover",
+        op === activeOperator && "bg-dropdown-item-hover"
       ),
       children: /* @__PURE__ */ jsx42(
         "span",
         {
           className: cn(
             "text-sm font-regular leading-sm",
-            op === activeOperator ? "text-[var(--color-foreground)] font-semibold" : "text-[var(--color-dropdown-item-text)]"
+            op === activeOperator ? "text-foreground font-medium" : "text-dropdown-item-text"
           ),
           children: op
         }
@@ -5831,17 +5873,16 @@ OperatorList.displayName = "OperatorList";
 // src/components/ui/filter/value-inputs/shared.ts
 var inputClasses = [
-  "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
-  "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-  "placeholder:text-[var(--color-muted-foreground)]",
-  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
+  "w-full px-base py-sm rounded-base border border-input",
+  "bg-background text-sm font-regular leading-sm text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0"
 ].join(" ");
 var halfInputClasses = [
-  "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
-  "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+  "flex-1 px-base py-sm rounded-base border border-input",
+  "bg-background text-sm font-regular leading-sm text-foreground",
+  "focus:outline-none focus:ring-2 focus:ring-ring"
 ].join(" ");
-var applyBtnClasses = "self-end px-md py-sm text-sm font-semibold leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity";
 // src/components/ui/filter/value-inputs/text-value-input.tsx
 import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -5854,7 +5895,7 @@ var TextValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ jsx43(
       "input",
       {
@@ -5867,7 +5908,7 @@ var TextValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ jsx43("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ jsx43(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 TextValueInput.displayName = "TextValueInput";
@@ -5883,7 +5924,7 @@ var NumberValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ jsx44(
       "input",
       {
@@ -5896,7 +5937,7 @@ var NumberValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ jsx44("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ jsx44(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberValueInput.displayName = "NumberValueInput";
@@ -5907,7 +5948,7 @@ var NumberRangeValueInput = ({
   className
 }) => {
   const rangeVal = value ?? [0, 0];
-  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-base", children: [
       /* @__PURE__ */ jsx44(
         "input",
@@ -5920,7 +5961,7 @@ var NumberRangeValueInput = ({
           className: halfInputClasses
         }
       ),
-      /* @__PURE__ */ jsx44("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
+      /* @__PURE__ */ jsx44("span", { className: "text-sm text-muted-foreground", children: "and" }),
       /* @__PURE__ */ jsx44(
         "input",
         {
@@ -5932,7 +5973,7 @@ var NumberRangeValueInput = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx44("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ jsx44(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberRangeValueInput.displayName = "NumberRangeValueInput";
@@ -6155,7 +6196,7 @@ var DatePickerDay = ({ date, isOutside }) => {
       disabled: isOutside,
       className: cn(
         "relative flex flex-col items-center justify-center w-9 rounded-full p-2 cursor-pointer transition-colors",
-        "text-sm font-semibold leading-sm text-center",
+        "text-sm font-medium leading-sm text-center",
         // Default
         !isOutside && !isSelected && !isInRangeOrPreview && "text-datepicker-day-text-default hover:bg-datepicker-day-bg-hover",
         // Outside month (disabled)
@@ -6226,7 +6267,7 @@ var DatePickerCalendar = React42.forwardRef(({ className, header, ...props }, re
         header,
         /* @__PURE__ */ jsxs40("div", { className: "flex flex-col gap-lg p-lg", children: [
           /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs40("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
+            /* @__PURE__ */ jsxs40("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
@@ -6313,7 +6354,7 @@ var DatePickerSuggestions = React42.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx45("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx45("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx45("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ jsx45("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx45("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx45("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
           /* @__PURE__ */ jsx45("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs40(
             "button",
             {
@@ -6494,7 +6535,7 @@ var DateCalendarValueInput = ({
         ] }) : /* @__PURE__ */ jsx46(DatePickerCalendar, {}),
         isRange && /* @__PURE__ */ jsxs41(DatePickerFooter, { children: [
           /* @__PURE__ */ jsx46("div", {}),
-          /* @__PURE__ */ jsx46("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+          /* @__PURE__ */ jsx46(Button, { appearance: "solid", intent: "brand", size: "sm", onClick: onSubmit, children: "Apply" })
         ] })
       ]
     }
@@ -6506,8 +6547,8 @@ var PresetTagsValueInput = ({
   onChange,
   onSubmit,
   className
-}) => /* @__PURE__ */ jsx46("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-xs", children: [
-  /* @__PURE__ */ jsx46("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+}) => /* @__PURE__ */ jsx46("div", { className: cn("flex flex-col gap-base p-xs max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ jsx46("span", { className: "text-xs font-medium leading-xs text-muted-foreground uppercase px-xs", children: group.group }),
   /* @__PURE__ */ jsx46("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ jsx46(
     "button",
     {
@@ -6518,7 +6559,7 @@ var PresetTagsValueInput = ({
       },
       className: cn(
         "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
-        value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
+        value === preset ? "border-ring bg-primary text-primary-foreground" : "border-input bg-background text-foreground hover:bg-accent"
       ),
       children: preset
     },
@@ -6541,8 +6582,8 @@ var DynamicOptionRow = ({
     onClick,
     className: cn(
       "flex items-start gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-      "hover:bg-[var(--color-dropdown-item-hover)]",
-      selected && "bg-[var(--color-dropdown-item-hover)]"
+      "hover:bg-dropdown-item-hover",
+      selected && "bg-dropdown-item-hover"
     ),
     children: [
       multi && /* @__PURE__ */ jsx47(
@@ -6550,7 +6591,7 @@ var DynamicOptionRow = ({
         {
           className: cn(
             "mt-[2px] flex items-center justify-center size-4 rounded-xs border transition-colors shrink-0",
-            selected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+            selected ? "bg-primary border-primary" : "border-input bg-background"
           ),
           children: selected && /* @__PURE__ */ jsx47("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx47(
             "path",
@@ -6565,8 +6606,8 @@ var DynamicOptionRow = ({
         }
       ),
       /* @__PURE__ */ jsxs42("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
-        /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] truncate", children: option.label }),
-        option.description && /* @__PURE__ */ jsx47("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: option.description })
+        /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: option.label }),
+        option.description && /* @__PURE__ */ jsx47("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: option.description })
       ] })
     ]
   }
@@ -6587,7 +6628,7 @@ var SingleSelectValueInput = ({
     "div",
     {
       className: cn(
-        "flex flex-col gap-xs p-base max-h-[280px] overflow-y-auto",
+        "flex flex-col gap-xs p-xs max-h-[280px] overflow-y-auto",
         className
       ),
       children: [
@@ -6608,10 +6649,10 @@ var SingleSelectValueInput = ({
             onClick: () => pick(opt),
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]",
-              value === opt && "bg-[var(--color-dropdown-item-hover)]"
+              "hover:bg-dropdown-item-hover",
+              value === opt && "bg-dropdown-item-hover"
             ),
-            children: /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+            children: /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-foreground", children: opt })
           },
           opt
         ))
@@ -6633,7 +6674,7 @@ var MultiSelectValueInput = ({
     const next = selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v];
     onChange(next);
   };
-  return /* @__PURE__ */ jsxs42("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+  return /* @__PURE__ */ jsxs42("div", { className: cn("flex flex-col gap-xs p-xs", className), children: [
     /* @__PURE__ */ jsxs42("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
       dynamicOptions?.map((opt) => /* @__PURE__ */ jsx47(
         DynamicOptionRow,
@@ -6654,7 +6695,7 @@ var MultiSelectValueInput = ({
             onClick: () => toggle(opt),
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]"
+              "hover:bg-dropdown-item-hover"
             ),
             children: [
               /* @__PURE__ */ jsx47(
@@ -6662,7 +6703,7 @@ var MultiSelectValueInput = ({
                 {
                   className: cn(
                     "flex items-center justify-center size-4 rounded-xs border transition-colors",
-                    isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+                    isSelected ? "bg-primary border-primary" : "border-input bg-background"
                   ),
                   children: isSelected && /* @__PURE__ */ jsx47("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx47(
                     "path",
@@ -6676,14 +6717,14 @@ var MultiSelectValueInput = ({
                   ) })
                 }
               ),
-              /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+              /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-foreground", children: opt })
             ]
           },
           opt
         );
       })
     ] }),
-    /* @__PURE__ */ jsx47("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ jsx47(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 MultiSelectValueInput.displayName = "MultiSelectValueInput";
@@ -6699,7 +6740,7 @@ var RelationValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ jsxs43("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ jsxs43("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ jsx48(
       "input",
       {
@@ -6712,7 +6753,7 @@ var RelationValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ jsx48("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ jsx48(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 RelationValueInput.displayName = "RelationValueInput";
@@ -6795,25 +6836,25 @@ import {
 } from "@l3mpire/icons";
 import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
 var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs44(Fragment4, { children: [
-  /* @__PURE__ */ jsx50("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
+  /* @__PURE__ */ jsx50("div", { className: "h-px bg-dropdown-border mx-xs" }),
   /* @__PURE__ */ jsxs44(
     "button",
     {
       type: "button",
       onPointerDown: (e) => e.preventDefault(),
       onClick,
-      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
       children: [
         /* @__PURE__ */ jsx50(
           Icon28,
           {
             icon: faFilterOutline3,
             size: "sm",
-            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+            className: "shrink-0 text-dropdown-item-icon"
           }
         ),
-        /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: "Advanced filter" }),
-        count > 0 && /* @__PURE__ */ jsxs44("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
+        /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: "Advanced filter" }),
+        count > 0 && /* @__PURE__ */ jsxs44("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: [
           count,
           " ",
           count === 1 ? "rule" : "rules"
@@ -6895,7 +6936,7 @@ var PropertySelector = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col gap-xs overflow-clip p-xs",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -6905,13 +6946,13 @@ var PropertySelector = ({
           activeGroup === null ? (
             /* ── Level 1: Search + Categories ───────────────────────── */
             /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+              /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ jsx50(
                   Icon28,
                   {
                     icon: faMagnifyingGlassOutline,
                     size: "sm",
-                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                    className: "shrink-0 text-muted-foreground"
                   }
                 ),
                 /* @__PURE__ */ jsx50(
@@ -6922,7 +6963,7 @@ var PropertySelector = ({
                     onChange: (e) => setSearch(e.target.value),
                     placeholder: "Search...",
                     autoFocus: true,
-                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                    className: "flex-1 text-sm font-regular leading-sm text-foreground bg-transparent outline-none placeholder:text-muted-foreground"
                   }
                 )
               ] }),
@@ -6936,18 +6977,18 @@ var PropertySelector = ({
                       onSelect(prop);
                       onOpenChange?.(false);
                     },
-                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
                       /* @__PURE__ */ jsx50(
                         Icon28,
                         {
                           icon: prop.icon,
                           size: "sm",
-                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
-                      /* @__PURE__ */ jsx50("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
+                      /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
+                      /* @__PURE__ */ jsx50("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
                     ]
                   },
                   prop.id
@@ -6963,31 +7004,31 @@ var PropertySelector = ({
                         setActiveGroup(g.group);
                         setSearch("");
                       },
-                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                       children: [
                         /* @__PURE__ */ jsx50(
                           Icon28,
                           {
                             icon: g.groupIcon,
                             size: "sm",
-                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                            className: "shrink-0 text-dropdown-item-icon"
                           }
                         ),
-                        /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
-                        /* @__PURE__ */ jsx50("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                        /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ jsx50("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: g.count }),
                         /* @__PURE__ */ jsx50(
                           Icon28,
                           {
                             icon: faChevronRightOutline3,
                             size: "xs",
-                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                            className: "shrink-0 text-dropdown-item-icon"
                           }
                         )
                       ]
                     },
                     g.group
                   )),
-                  filteredGroups.length === 0 && /* @__PURE__ */ jsx50("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                  filteredGroups.length === 0 && /* @__PURE__ */ jsx50("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
                 ] })
               )
             ] })
@@ -7002,27 +7043,27 @@ var PropertySelector = ({
                     setActiveGroup(null);
                     setSearch("");
                   },
-                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                   children: [
                     /* @__PURE__ */ jsx50(
                       Icon28,
                       {
                         icon: faChevronLeftOutline3,
                         size: "sm",
-                        className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        className: "shrink-0 text-dropdown-item-icon"
                       }
                     ),
-                    /* @__PURE__ */ jsx50("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
+                    /* @__PURE__ */ jsx50("span", { className: "flex-1 text-xs font-medium leading-xs text-muted-foreground text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+              /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ jsx50(
                   Icon28,
                   {
                     icon: faMagnifyingGlassOutline,
                     size: "sm",
-                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                    className: "shrink-0 text-muted-foreground"
                   }
                 ),
                 /* @__PURE__ */ jsx50(
@@ -7033,7 +7074,7 @@ var PropertySelector = ({
                     onChange: (e) => setSearch(e.target.value),
                     placeholder: "Search...",
                     autoFocus: true,
-                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                    className: "flex-1 text-sm font-regular leading-sm text-foreground bg-transparent outline-none placeholder:text-muted-foreground"
                   }
                 )
               ] }),
@@ -7046,22 +7087,22 @@ var PropertySelector = ({
                       onSelect(prop);
                       onOpenChange?.(false);
                     },
-                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
                       /* @__PURE__ */ jsx50(
                         Icon28,
                         {
                           icon: prop.icon,
                           size: "sm",
-                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                      /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
                 )),
-                filteredProperties.length === 0 && /* @__PURE__ */ jsx50("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                filteredProperties.length === 0 && /* @__PURE__ */ jsx50("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
               ] })
             ] })
           ),
@@ -7099,7 +7140,7 @@ var KebabMenu = ({
       align: "end",
       className: cn(
         "z-50 flex flex-col p-xs overflow-clip",
-        "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+        "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2",
@@ -7114,21 +7155,21 @@ var KebabMenu = ({
               onConvertToAdvanced();
               onOpenChange?.(false);
             },
-            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
               /* @__PURE__ */ jsx51(
                 Icon29,
                 {
                   icon: faArrowRightOutline2,
                   size: "sm",
-                  className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                  className: "shrink-0 text-dropdown-item-icon"
                 }
               ),
-              /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
+              /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx51("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ jsx51("div", { className: "h-px mx-base my-xs bg-border" }),
         onDelete && /* @__PURE__ */ jsxs45(
           "button",
           {
@@ -7137,17 +7178,17 @@ var KebabMenu = ({
               onDelete();
               onOpenChange?.(false);
             },
-            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
               /* @__PURE__ */ jsx51(
                 Icon29,
                 {
                   icon: faTrashOutline,
                   size: "sm",
-                  className: "shrink-0 text-[var(--color-destructive)]"
+                  className: "shrink-0 text-destructive"
                 }
               ),
-              /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+              /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-destructive", children: "Delete filter" })
             ]
           }
         )
@@ -7215,29 +7256,29 @@ var FilterEditor = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
+          /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-border", children: [
             /* @__PURE__ */ jsx52(
               Icon30,
               {
                 icon: propertyDef.icon,
                 size: "sm",
-                className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                className: "shrink-0 text-dropdown-item-icon"
               }
             ),
-            /* @__PURE__ */ jsx52("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            /* @__PURE__ */ jsx52("span", { className: "text-sm font-medium leading-sm text-foreground", children: propertyDef.label }),
             localOperator && view === "value" && /* @__PURE__ */ jsxs46(
               "button",
               {
                 type: "button",
                 onClick: () => setView("operator"),
-                className: "ml-auto text-xs font-regular text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                className: "ml-auto text-xs font-regular text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
                 children: [
                   localOperator,
                   " \u25BE"
@@ -7291,7 +7332,7 @@ var SegmentPopover = ({
       align,
       className: cn(
         "z-50 flex flex-col overflow-clip",
-        "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+        "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2"
@@ -7498,10 +7539,10 @@ import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
-  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-  "border border-[var(--color-btn-outlined-neutral-border-default)] shadow-sm",
+  "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+  "border border-btn-outlined-neutral-border-default shadow-sm",
   "cursor-pointer transition-colors",
-  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+  "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
 ];
 var AdvancedChip = React47.forwardRef(
   ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs48("div", { className: cn("inline-flex items-center", className), children: [
@@ -7523,11 +7564,11 @@ var AdvancedChip = React47.forwardRef(
             {
               icon: faFilterOutline4,
               size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
+              className: "shrink-0 text-foreground"
             }
           ),
-          /* @__PURE__ */ jsx54("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
-          count > 0 && /* @__PURE__ */ jsx54("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx54("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ jsx54("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ jsx54("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx54("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ),
@@ -7545,7 +7586,7 @@ var AdvancedChip = React47.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ jsx54(Icon31, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ jsx54(Icon31, { icon: faXmarkOutline3, size: "sm", className: "text-foreground" })
       }
     )
   ] })
@@ -7560,7 +7601,7 @@ import { Icon as Icon35, faPlusOutline as faPlusOutline3, faChevronDownOutline a
 // src/components/ui/filter/advanced-row.tsx
 import * as React49 from "react";
 import * as PopoverPrimitive11 from "@radix-ui/react-popover";
-import * as TooltipPrimitive3 from "@radix-ui/react-tooltip";
+import * as TooltipPrimitive4 from "@radix-ui/react-tooltip";
 import { Icon as Icon33, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
 // src/components/ui/filter/filter-node-actions.tsx
@@ -7605,14 +7646,14 @@ var FilterNodeActions = ({
       "button",
       {
         type: "button",
-        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-accent",
         "aria-label": "More actions",
         children: /* @__PURE__ */ jsx55(
           Icon32,
           {
             icon: faEllipsisOutline2,
             size: "sm",
-            className: "text-[var(--color-foreground)]"
+            className: "text-foreground"
           }
         )
       }
@@ -7624,7 +7665,7 @@ var FilterNodeActions = ({
         align: "end",
         className: cn(
           "z-50 flex flex-col p-xs overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "min-w-[180px]"
@@ -7639,8 +7680,8 @@ var FilterNodeActions = ({
             },
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]",
-              item.destructive && "text-[var(--color-destructive,#ef4444)]"
+              "hover:bg-dropdown-item-hover",
+              item.destructive && "text-destructive"
             ),
             children: [
               /* @__PURE__ */ jsx55(
@@ -7650,7 +7691,7 @@ var FilterNodeActions = ({
                   size: "sm",
                   className: cn(
                     "shrink-0",
-                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-icon)]"
+                    item.destructive ? "text-destructive" : "text-dropdown-item-icon"
                   )
                 }
               ),
@@ -7659,7 +7700,7 @@ var FilterNodeActions = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm",
-                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-text)]"
+                    item.destructive ? "text-destructive" : "text-dropdown-item-text"
                   ),
                   children: item.label
                 }
@@ -7679,10 +7720,10 @@ import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
-  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-  "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+  "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+  "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
   "cursor-pointer transition-colors",
-  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+  "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
 ];
 var AdvancedRow = ({
   connector,
@@ -7715,25 +7756,25 @@ var AdvancedRow = ({
   const badgeCount = getBadgeCount(condition.value);
   const hasValue = displayValue != null;
   return /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx56(TooltipPrimitive3.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs50(TooltipPrimitive3.Root, { children: [
-      /* @__PURE__ */ jsx56(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] cursor-default", children: connector }) }),
-      /* @__PURE__ */ jsx56(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ jsxs50(
-        TooltipPrimitive3.Content,
+    connector === "Where" ? /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ jsx56("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx56(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs50(TooltipPrimitive4.Root, { children: [
+      /* @__PURE__ */ jsx56(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx56("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ jsx56(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs50(
+        TooltipPrimitive4.Content,
         {
           sideOffset: 4,
           className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
-            /* @__PURE__ */ jsx56(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ jsx56(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
     /* @__PURE__ */ jsxs50(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
       /* @__PURE__ */ jsx56(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs50("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx56(Icon33, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: propertyDef.label }),
-        /* @__PURE__ */ jsx56(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__PURE__ */ jsx56(Icon33, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
+        /* @__PURE__ */ jsx56(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
       /* @__PURE__ */ jsx56(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx56(
         PopoverPrimitive11.Content,
@@ -7742,7 +7783,7 @@ var AdvancedRow = ({
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip max-h-[300px] overflow-y-auto",
-            "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+            "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
@@ -7757,12 +7798,12 @@ var AdvancedRow = ({
               },
               className: cn(
                 "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-                "hover:bg-[var(--color-dropdown-item-hover)]",
-                p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
+                "hover:bg-dropdown-item-hover",
+                p.id === condition.propertyId && "bg-dropdown-item-hover"
               ),
               children: [
-                /* @__PURE__ */ jsx56(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+                /* @__PURE__ */ jsx56(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
               ]
             },
             p.id
@@ -7772,8 +7813,8 @@ var AdvancedRow = ({
     ] }),
     /* @__PURE__ */ jsxs50(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
       /* @__PURE__ */ jsx56(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs50("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ jsx56(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ jsx56(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
       /* @__PURE__ */ jsx56(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx56(
         PopoverPrimitive11.Content,
@@ -7782,7 +7823,7 @@ var AdvancedRow = ({
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip",
-            "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+            "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
@@ -7813,10 +7854,10 @@ var AdvancedRow = ({
             placeholder: "Enter value...",
             className: cn(
               "flex-1 min-w-[80px] px-base py-sm",
-              "bg-[var(--color-background)] border border-[var(--color-input)] rounded-base",
-              "text-sm font-regular leading-sm text-[var(--color-foreground)]",
-              "placeholder:text-[var(--color-muted-foreground)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
+              "bg-background border border-input rounded-base",
+              "text-sm font-regular leading-sm text-foreground",
+              "placeholder:text-muted-foreground",
+              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0"
             )
           }
         );
@@ -7839,7 +7880,7 @@ var AdvancedRow = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm whitespace-nowrap truncate text-left",
-                    hasValue ? "text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)]"
+                    hasValue ? "text-foreground" : "text-muted-foreground"
                   ),
                   title: hasValue ? displayValue : void 0,
                   children: hasValue ? displayValue : "Select a value"
@@ -7850,7 +7891,7 @@ var AdvancedRow = ({
                 {
                   icon: faChevronDownOutline2,
                   size: "xs",
-                  className: "shrink-0 text-[var(--color-foreground)]"
+                  className: "shrink-0 text-foreground"
                 }
               )
             ]
@@ -7863,7 +7904,7 @@ var AdvancedRow = ({
             align: "start",
             className: cn(
               "z-50 flex flex-col overflow-clip",
-              "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+              "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
               "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
               "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
             ),
@@ -7901,7 +7942,7 @@ AdvancedRow.displayName = "AdvancedRow";
 var tagChip = cn(
   "inline-flex items-center shrink-0 px-sm rounded-base",
   "bg-tag-neutral-bg text-tag-neutral-text",
-  "text-xs font-semibold leading-xs whitespace-nowrap",
+  "text-xs font-medium leading-xs whitespace-nowrap",
   "h-5"
 );
 function ValueTagRow({ tags }) {
@@ -7953,19 +7994,19 @@ function ValueTagRow({ tags }) {
     ),
     /* @__PURE__ */ jsxs50("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
       tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ jsx56("span", { className: tagChip, children: t }, t)),
-      overflowCount > 0 && /* @__PURE__ */ jsx56(TooltipPrimitive3.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs50(TooltipPrimitive3.Root, { children: [
-        /* @__PURE__ */ jsx56(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs50("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
+      overflowCount > 0 && /* @__PURE__ */ jsx56(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs50(TooltipPrimitive4.Root, { children: [
+        /* @__PURE__ */ jsx56(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs50("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
           "+",
           overflowCount
         ] }) }),
-        /* @__PURE__ */ jsx56(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ jsxs50(
-          TooltipPrimitive3.Content,
+        /* @__PURE__ */ jsx56(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs50(
+          TooltipPrimitive4.Content,
           {
             sideOffset: 4,
             className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-xs font-regular leading-xs flex flex-col gap-xs data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
             children: [
               overflowTags.map((t) => /* @__PURE__ */ jsx56("span", { children: t }, t)),
-              /* @__PURE__ */ jsx56(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+              /* @__PURE__ */ jsx56(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
             ]
           }
         ) })
@@ -7976,7 +8017,7 @@ function ValueTagRow({ tags }) {
 // src/components/ui/filter/advanced-group.tsx
 import * as React50 from "react";
-import * as TooltipPrimitive4 from "@radix-ui/react-tooltip";
+import * as TooltipPrimitive5 from "@radix-ui/react-tooltip";
 import { Icon as Icon34, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
 import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 var AdvancedGroup = ({
@@ -7991,21 +8032,21 @@ var AdvancedGroup = ({
 }) => {
   const [addOpen, setAddOpen] = React50.useState(false);
   return /* @__PURE__ */ jsxs51("div", { className: "flex items-start gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ jsx57("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx57("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsx57("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx57(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs51(TooltipPrimitive4.Root, { children: [
-      /* @__PURE__ */ jsx57(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx57("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] cursor-default", children: connector }) }),
-      /* @__PURE__ */ jsx57(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ jsxs51(
-        TooltipPrimitive4.Content,
+    connector === "Where" ? /* @__PURE__ */ jsx57("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ jsx57("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ jsx57(TooltipPrimitive5.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs51(TooltipPrimitive5.Root, { children: [
+      /* @__PURE__ */ jsx57(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ jsx57(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ jsxs51(
+        TooltipPrimitive5.Content,
         {
           sideOffset: 4,
           className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
-            /* @__PURE__ */ jsx57(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ jsx57(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ jsxs51("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-[var(--color-border)] rounded-md bg-[var(--color-secondary,var(--color-accent))]", children: [
+    /* @__PURE__ */ jsxs51("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
       children,
       onAddFilter && properties && /* @__PURE__ */ jsx57(
         PropertySelector,
@@ -8021,7 +8062,7 @@ var AdvancedGroup = ({
             "button",
             {
               type: "button",
-              className: "flex items-center gap-sm px-base py-sm text-sm font-semibold leading-sm text-[var(--color-muted-foreground)] cursor-pointer transition-colors rounded-md hover:bg-[var(--color-accent)] hover:text-[var(--color-foreground)] w-fit",
+              className: "flex items-center gap-sm px-base py-sm text-sm font-medium leading-sm text-muted-foreground cursor-pointer transition-colors rounded-md hover:bg-accent hover:text-foreground w-fit",
               children: [
                 /* @__PURE__ */ jsx57(Icon34, { icon: faPlusOutline2, size: "sm" }),
                 "Add filter"
@@ -8049,8 +8090,8 @@ import { jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
 var ghostBtn = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
-  "cursor-pointer transition-colors text-sm font-semibold leading-sm",
-  "rounded-md hover:bg-[var(--color-accent)]"
+  "cursor-pointer transition-colors text-sm font-medium leading-sm",
+  "rounded-md hover:bg-accent"
 ];
 var AdvancedPopover = ({
   filters,
@@ -8214,7 +8255,7 @@ var AdvancedPopover = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
-          "bg-[var(--color-background)] rounded-md shadow-lg",
+          "bg-background rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -8230,7 +8271,7 @@ var AdvancedPopover = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ jsxs52("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ jsxs52("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
             /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-sm", children: [
               /* @__PURE__ */ jsx58(
                 PropertySelector,
@@ -8239,8 +8280,8 @@ var AdvancedPopover = ({
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ jsxs52("button", { type: "button", className: cn(ghostBtn, "text-[var(--color-foreground)]"), children: [
-                    /* @__PURE__ */ jsx58(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  children: /* @__PURE__ */ jsxs52("button", { type: "button", className: cn(ghostBtn, "text-foreground"), children: [
+                    /* @__PURE__ */ jsx58(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
@@ -8250,9 +8291,9 @@ var AdvancedPopover = ({
                 {
                   type: "button",
                   onClick: handleAddGroup,
-                  className: cn(ghostBtn, "text-[var(--color-foreground)]"),
+                  className: cn(ghostBtn, "text-foreground"),
                   children: [
-                    /* @__PURE__ */ jsx58(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    /* @__PURE__ */ jsx58(Icon35, { icon: faPlusOutline3, size: "sm", className: "text-foreground" }),
                     "Add filters group"
                   ]
                 }
@@ -8263,9 +8304,9 @@ var AdvancedPopover = ({
               {
                 type: "button",
                 onClick: handleClearAll,
-                className: cn(ghostBtn, "text-[var(--color-destructive,#ef4444)]"),
+                className: cn(ghostBtn, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ jsx58(Icon35, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  /* @__PURE__ */ jsx58(Icon35, { icon: faXmarkOutline4, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8291,7 +8332,7 @@ var DraftRow = ({
     onOpenChange?.(v);
   };
   return /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx58("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ jsx58("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx58("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
     /* @__PURE__ */ jsx58(
       PropertySelector,
       {
@@ -8308,19 +8349,19 @@ var DraftRow = ({
             type: "button",
             className: cn(
               "flex items-center gap-base px-base py-sm min-w-0",
-              "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-              "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+              "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+              "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
               "cursor-pointer transition-colors",
-              "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+              "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
             ),
             children: [
-              /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+              /* @__PURE__ */ jsx58("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
               /* @__PURE__ */ jsx58(
                 Icon35,
                 {
                   icon: faChevronDownOutline3,
                   size: "xs",
-                  className: "shrink-0 text-[var(--color-foreground)]"
+                  className: "shrink-0 text-foreground"
                 }
               )
             ]
@@ -8334,14 +8375,14 @@ var DraftRow = ({
 // src/components/ui/filter/summary-chip.tsx
 import * as React52 from "react";
 import * as PopoverPrimitive13 from "@radix-ui/react-popover";
-import * as TooltipPrimitive5 from "@radix-ui/react-tooltip";
+import * as TooltipPrimitive6 from "@radix-ui/react-tooltip";
 import { Icon as Icon36, faFilterOutline as faFilterOutline6, faPlusOutline as faPlusOutline4, faChevronDownOutline as faChevronDownOutline4, faXmarkOutline as faXmarkOutline5 } from "@l3mpire/icons";
 import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 var ghostBtn2 = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
-  "cursor-pointer transition-colors text-sm font-semibold leading-sm",
-  "rounded-md hover:bg-[var(--color-accent)]"
+  "cursor-pointer transition-colors text-sm font-medium leading-sm",
+  "rounded-md hover:bg-accent"
 ];
 var SummaryChip = ({
   count,
@@ -8502,30 +8543,30 @@ var SummaryChip = ({
       className: cn(
         "inline-flex items-center gap-sm px-base py-sm",
         "min-h-[32px] max-h-[32px]",
-        "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-        "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+        "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+        "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
         "cursor-pointer transition-colors",
-        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+        "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx59(Icon36, { icon: faFilterOutline6, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
-        /* @__PURE__ */ jsx59("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-        count > 0 && /* @__PURE__ */ jsx59("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx59("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+        /* @__PURE__ */ jsx59(Icon36, { icon: faFilterOutline6, size: "sm", className: "shrink-0 text-foreground" }),
+        /* @__PURE__ */ jsx59("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Filters" }),
+        count > 0 && /* @__PURE__ */ jsx59("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx59("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
       ]
     }
   );
   const hasTooltip = tooltipContent && !open;
-  return /* @__PURE__ */ jsx59(TooltipPrimitive5.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsx59(TooltipPrimitive5.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ jsxs53(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx59(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx59(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
-    hasTooltip && /* @__PURE__ */ jsx59(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ jsxs53(
-      TooltipPrimitive5.Content,
+  return /* @__PURE__ */ jsx59(TooltipPrimitive6.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsx59(TooltipPrimitive6.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ jsxs53(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx59(TooltipPrimitive6.Trigger, { asChild: true, children: /* @__PURE__ */ jsx59(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
+    hasTooltip && /* @__PURE__ */ jsx59(TooltipPrimitive6.Portal, { children: /* @__PURE__ */ jsxs53(
+      TooltipPrimitive6.Content,
       {
         sideOffset: 4,
         className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           tooltipContent,
-          /* @__PURE__ */ jsx59(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ jsx59(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),
@@ -8539,7 +8580,7 @@ var SummaryChip = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -8555,7 +8596,7 @@ var SummaryChip = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
             /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-sm", children: [
               /* @__PURE__ */ jsx59(
                 PropertySelector,
@@ -8564,14 +8605,14 @@ var SummaryChip = ({
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ jsxs53("button", { type: "button", className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
-                    /* @__PURE__ */ jsx59(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  children: /* @__PURE__ */ jsxs53("button", { type: "button", className: cn(ghostBtn2, "text-foreground"), children: [
+                    /* @__PURE__ */ jsx59(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs53("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
-                /* @__PURE__ */ jsx59(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-[var(--color-foreground)]" }),
+              /* @__PURE__ */ jsxs53("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-foreground"), children: [
+                /* @__PURE__ */ jsx59(Icon36, { icon: faPlusOutline4, size: "sm", className: "text-foreground" }),
                 "Add filters group"
               ] })
             ] }),
@@ -8583,9 +8624,9 @@ var SummaryChip = ({
                   onClearAll();
                   setOpen(false);
                 },
-                className: cn(ghostBtn2, "text-[var(--color-destructive,#ef4444)]"),
+                className: cn(ghostBtn2, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ jsx59(Icon36, { icon: faXmarkOutline5, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  /* @__PURE__ */ jsx59(Icon36, { icon: faXmarkOutline5, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8606,7 +8647,7 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
     onOpenChange?.(v);
   };
   return /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ jsx59("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx59("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ jsx59("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
     /* @__PURE__ */ jsx59(PropertySelector, { properties, onSelect: (p) => {
       onSelect(p);
       setOpen(false);
@@ -8616,13 +8657,13 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
         type: "button",
         className: cn(
           "flex items-center gap-base px-base py-sm min-w-0",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm cursor-pointer transition-colors",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+          "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+          "border border-btn-outlined-neutral-border-default rounded-md shadow-sm cursor-pointer transition-colors",
+          "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
         ),
         children: [
-          /* @__PURE__ */ jsx59("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-          /* @__PURE__ */ jsx59(Icon36, { icon: faChevronDownOutline4, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+          /* @__PURE__ */ jsx59("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
+          /* @__PURE__ */ jsx59(Icon36, { icon: faChevronDownOutline4, size: "xs", className: "shrink-0 text-foreground" })
         ]
       }
     ) })
@@ -8849,8 +8890,8 @@ var FilterSystem = ({
                 "button",
                 {
                   type: "button",
-                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-[var(--color-btn-outlined-neutral-border-default)] bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)] shadow-sm cursor-pointer transition-colors hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
-                  children: /* @__PURE__ */ jsx60(Icon37, { icon: faPlusOutline5, size: "sm", className: "text-[var(--color-foreground)]" })
+                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-btn-outlined-neutral-border-default bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default shadow-sm cursor-pointer transition-colors hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+                  children: /* @__PURE__ */ jsx60(Icon37, { icon: faPlusOutline5, size: "sm", className: "text-foreground" })
                 }
               ) : /* @__PURE__ */ jsx60(FilterBarButton, {})
             }
@@ -8863,7 +8904,7 @@ var FilterSystem = ({
           type: "button",
           onClick: handleClearAll,
           className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors text-btn-ghost-brand-text-default hover:bg-btn-ghost-brand-bg-hover hover:text-btn-ghost-brand-text-hover active:bg-btn-ghost-brand-bg-pressed active:text-btn-ghost-brand-text-pressed",
-          children: /* @__PURE__ */ jsx60("span", { className: "text-sm font-semibold leading-sm", children: "Clear" })
+          children: /* @__PURE__ */ jsx60("span", { className: "text-sm font-medium leading-sm", children: "Clear" })
         }
       )
     ] }),
@@ -8895,7 +8936,7 @@ function buildFilterTooltip(nodes, properties) {
               connector,
               " "
             ] }),
-            /* @__PURE__ */ jsx60("span", { className: "font-semibold", children: prop.label }),
+            /* @__PURE__ */ jsx60("span", { className: "font-medium", children: prop.label }),
             " ",
             /* @__PURE__ */ jsx60("span", { className: "opacity-60", children: f.operator }),
             " ",