@deriv-ds/design-intelligence-layer 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -428,7 +428,7 @@ function AccordionTrigger(_a) {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-on-subtle transition-transform duration-200" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-subtle transition-transform duration-200" })
       ]
     })
   ) });
@@ -460,8 +460,8 @@ var alertVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        info: "bg-transparent text-alert-info-text border-alert-info-border *:data-[slot=alert-description]:text-on-subtle [&>svg]:text-current",
-        error: "bg-transparent text-alert-error-text border-alert-error-border *:data-[slot=alert-description]:text-on-subtle [&>svg]:text-current"
+        info: "bg-transparent text-alert-info-text border-alert-info-border *:data-[slot=alert-description]:text-subtle [&>svg]:text-current",
+        error: "bg-transparent text-alert-error-text border-alert-error-border *:data-[slot=alert-description]:text-subtle [&>svg]:text-current"
       }
     },
     defaultVariants: {
@@ -525,14 +525,13 @@ var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
   {
     variants: {
       variant: {
-        // Primary brand blue (#2323FF)
-        primary: "bg-primary text-on-prominent-static-inverse hover:bg-primary-hover",
-        secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
-        tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
+        primary: "bg-primary text-prominent-static-inverse hover:bg-primary-hover active:bg-primary-hover",
+        secondary: "bg-transparent border-[1.5px] border-[var(--button-secondary-normal-border)] text-[var(--button-secondary-normal-text)] hover:bg-[var(--button-secondary-normal-bg-hover)] active:bg-[var(--button-secondary-normal-bg-pressed)]",
+        tertiary: "bg-[var(--button-tertiary-normal-bg-default)] text-[var(--button-tertiary-normal-text)] hover:bg-[var(--button-tertiary-normal-bg-hover)] active:bg-[var(--button-tertiary-normal-bg-pressed)]"
       },
       size: {
         lg: "h-12 w-fit gap-3 rounded-xs px-6 py-[14px] text-base [&_svg:not([class*='size-'])]:size-4",
@@ -627,7 +626,7 @@ function AlertDialogContent(_a) {
         "data-slot": "alert-dialog-content",
         "data-size": size,
         className: cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-prominent p-6 shadow-lg duration-base data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-default bg-primary-surface p-6 shadow-lg duration-base data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
           className
         )
       }, props)
@@ -695,7 +694,7 @@ function AlertDialogDescription(_a) {
     import_radix_ui3.AlertDialog.Description,
     __spreadValues({
       "data-slot": "alert-dialog-description",
-      className: cn("text-sm text-on-subtle", className)
+      className: cn("text-sm text-subtle", className)
     }, props)
   );
 }
@@ -710,7 +709,7 @@ function AlertDialogMedia(_a) {
     __spreadValues({
       "data-slot": "alert-dialog-media",
       className: cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-subtle sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-secondary-surface sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
         className
       )
     }, props)
@@ -807,7 +806,7 @@ function AvatarFallback(_a) {
     __spreadValues({
       "data-slot": "avatar-fallback",
       className: cn(
-        "flex size-full items-center justify-center overflow-hidden rounded-full bg-subtle text-sm text-on-subtle group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-base",
+        "flex size-full items-center justify-center overflow-hidden rounded-full bg-secondary-surface text-sm text-subtle group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-base",
         className
       )
     }, props)
@@ -820,7 +819,7 @@ function AvatarBadge(_a) {
     __spreadValues({
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-prominent-static-inverse ring-2 ring-prominent select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-prominent-static-inverse ring-2 ring-primary-surface select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -837,7 +836,7 @@ function AvatarGroup(_a) {
     __spreadValues({
       "data-slot": "avatar-group",
       className: cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-prominent",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-primary-surface",
         className
       )
     }, props)
@@ -854,7 +853,7 @@ function AvatarGroupCount(_a) {
     __spreadValues({
       "data-slot": "avatar-group-count",
       className: cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-subtle text-sm text-on-subtle ring-2 ring-prominent group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=xl]/avatar-group:[width:var(--avatar-size-xl)] group-has-data-[size=xl]/avatar-group:[height:var(--avatar-size-xl)] [&>svg]:size-4 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=xl]/avatar-group:[&>svg]:size-6",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-surface text-sm text-subtle ring-2 ring-primary-surface group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=xl]/avatar-group:[width:var(--avatar-size-xl)] group-has-data-[size=xl]/avatar-group:[height:var(--avatar-size-xl)] [&>svg]:size-4 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=xl]/avatar-group:[&>svg]:size-6",
         className
       )
     }, props)
@@ -871,20 +870,20 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
     variants: {
       variant: {
         // Default (solid)
-        default: "bg-primary text-on-prominent-static-inverse [a&]:hover:bg-primary/90",
-        "default-success": "bg-semantic-win text-on-prominent-static-inverse [a&]:hover:bg-semantic-win/90",
-        "default-fail": "bg-semantic-loss text-on-prominent-static-inverse [a&]:hover:bg-semantic-loss/90",
-        "default-warning": "bg-semantic-warning text-on-prominent-static-inverse [a&]:hover:bg-semantic-warning/90",
+        default: "bg-primary text-prominent-static-inverse [a&]:hover:bg-primary/90",
+        "default-success": "bg-[var(--badge-bg-status-green)] text-[var(--badge-text-default)] [a&]:hover:bg-[var(--badge-bg-status-green)]/90",
+        "default-fail": "bg-[var(--badge-bg-status-red)] text-[var(--badge-text-default)] [a&]:hover:bg-[var(--badge-bg-status-red)]/90",
+        "default-warning": "bg-warning text-prominent-static-inverse [a&]:hover:bg-warning/90",
         // Fill (tint)
         fill: "bg-primary/10 border-transparent text-primary",
-        "fill-success": "bg-semantic-win/10 border-transparent text-semantic-win",
-        "fill-fail": "bg-semantic-loss/10 border-transparent text-semantic-loss",
-        "fill-warning": "bg-semantic-warning/10 border-transparent text-semantic-warning",
+        "fill-success": "bg-[var(--badge-bg-status-green)]/10 border-transparent text-[var(--badge-bg-status-green)]",
+        "fill-fail": "bg-[var(--badge-bg-status-red)]/10 border-transparent text-[var(--badge-bg-status-red)]",
+        "fill-warning": "bg-warning/10 border-transparent text-warning",
         // Ghost (transparent)
         ghost: "bg-transparent border-transparent text-primary [a&]:hover:bg-secondary-hover [a&]:hover:text-primary",
-        "ghost-success": "bg-transparent border-transparent text-semantic-win [a&]:hover:bg-semantic-win/10 [a&]:hover:text-semantic-win",
-        "ghost-fail": "bg-transparent border-transparent text-semantic-loss [a&]:hover:bg-semantic-loss/10 [a&]:hover:text-semantic-loss",
-        "ghost-warning": "bg-transparent border-transparent text-semantic-warning [a&]:hover:bg-semantic-warning/10 [a&]:hover:text-semantic-warning"
+        "ghost-success": "bg-transparent border-transparent text-[var(--badge-bg-status-green)] [a&]:hover:bg-[var(--badge-bg-status-green)]/10",
+        "ghost-fail": "bg-transparent border-transparent text-[var(--badge-bg-status-red)] [a&]:hover:bg-[var(--badge-bg-status-red)]/10",
+        "ghost-warning": "bg-transparent border-transparent text-warning [a&]:hover:bg-warning/10 [a&]:hover:text-warning"
       },
       size: {
         sm: "h-6 px-2.5 py-0.5 text-xs",
@@ -936,7 +935,7 @@ function BreadcrumbList(_a) {
     __spreadValues({
       "data-slot": "breadcrumb-list",
       className: cn(
-        "flex flex-wrap items-center gap-1.5 text-sm break-words text-on-subtle sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-subtle sm:gap-2.5",
         className
       )
     }, props)
@@ -965,7 +964,7 @@ function BreadcrumbLink(_a) {
     Comp,
     __spreadValues({
       "data-slot": "breadcrumb-link",
-      className: cn("transition-colors hover:text-on-prominent", className)
+      className: cn("transition-colors hover:text-prominent", className)
     }, props)
   );
 }
@@ -1053,7 +1052,7 @@ function Calendar(_a) {
     __spreadValues({
       showOutsideDays,
       className: cn(
-        "group/calendar bg-prominent p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-primary-surface p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -1096,18 +1095,18 @@ function Calendar(_a) {
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute inset-0 bg-popover opacity-0",
+          "absolute inset-0 bg-primary-surface opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
           "font-body font-medium select-none",
-          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-on-subtle",
+          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-subtle",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 rounded-md text-[0.8rem] font-body font-normal text-on-subtle select-none",
+          "flex-1 rounded-md text-[0.8rem] font-body font-normal text-subtle select-none",
           defaultClassNames.weekday
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
@@ -1116,7 +1115,7 @@ function Calendar(_a) {
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] text-on-subtle select-none",
+          "text-[0.8rem] text-subtle select-none",
           defaultClassNames.week_number
         ),
         day: cn(
@@ -1135,11 +1134,11 @@ function Calendar(_a) {
           defaultClassNames.today
         ),
         outside: cn(
-          "text-on-subtle aria-selected:text-on-subtle",
+          "text-subtle aria-selected:text-subtle",
           defaultClassNames.outside
         ),
         disabled: cn(
-          "text-on-subtle opacity-50",
+          "text-subtle opacity-50",
           defaultClassNames.disabled
         ),
         hidden: cn("invisible", defaultClassNames.hidden)
@@ -1209,7 +1208,7 @@ function CalendarDayButton(_a) {
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
       className: cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-body font-normal bg-transparent border-transparent shadow-none text-on-prominent hover:!bg-secondary-hover hover:text-on-prominent hover:no-underline hover:shadow-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:text-primary [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:relative [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:absolute [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:bottom-0.5 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:left-1/2 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:-translate-x-1/2 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:size-1 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:rounded-full [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:bg-primary data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-secondary-hover data-[range-end=true]:border-transparent data-[range-end=true]:text-primary data-[range-end=true]:font-bold data-[range-end=true]:hover:!bg-secondary-hover data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-secondary-hover data-[range-middle=true]:text-primary data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-secondary-hover data-[range-start=true]:border-transparent data-[range-start=true]:text-primary data-[range-start=true]:font-bold data-[range-start=true]:hover:!bg-secondary-hover data-[selected-single=true]:bg-secondary-hover data-[selected-single=true]:border-transparent data-[selected-single=true]:text-primary data-[selected-single=true]:font-bold data-[selected-single=true]:hover:!bg-secondary-hover [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-body font-normal bg-transparent border-transparent shadow-none text-prominent hover:!bg-secondary-hover hover:text-prominent hover:no-underline hover:shadow-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:text-primary [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:relative [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:absolute [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:bottom-0.5 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:left-1/2 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:-translate-x-1/2 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:size-1 [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:rounded-full [&[data-today='true']:not([data-selected-single='true']):not([data-range-start='true']):not([data-range-end='true'])]:after:bg-primary data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-secondary-hover data-[range-end=true]:border-transparent data-[range-end=true]:text-primary data-[range-end=true]:font-bold data-[range-end=true]:hover:!bg-secondary-hover data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-secondary-hover data-[range-middle=true]:text-primary data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-secondary-hover data-[range-start=true]:border-transparent data-[range-start=true]:text-primary data-[range-start=true]:font-bold data-[range-start=true]:hover:!bg-secondary-hover data-[selected-single=true]:bg-secondary-hover data-[selected-single=true]:border-transparent data-[selected-single=true]:text-primary data-[selected-single=true]:font-bold data-[selected-single=true]:hover:!bg-secondary-hover [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )
@@ -1226,7 +1225,7 @@ function Card(_a) {
     __spreadValues({
       "data-slot": "card",
       className: cn(
-        "flex flex-col gap-6 rounded-sm border border-border-subtle bg-card py-6 text-card-foreground",
+        "flex flex-col gap-6 rounded-sm border border-default bg-primary-surface py-6 text-prominent",
         className
       )
     }, props)
@@ -1261,7 +1260,7 @@ function CardDescription(_a) {
     "div",
     __spreadValues({
       "data-slot": "card-description",
-      className: cn("text-sm text-on-subtle", className)
+      className: cn("text-sm text-subtle", className)
     }, props)
   );
 }
@@ -1624,7 +1623,7 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border-subtle/50 bg-prominent px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-default/50 bg-primary-surface px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
       children: [
@@ -1637,7 +1636,7 @@ function ChartTooltipContent({
             "div",
             {
               className: cn(
-                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-on-subtle",
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-subtle",
                 indicator === "dot" && "items-center"
               ),
               children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
@@ -1669,9 +1668,9 @@ function ChartTooltipContent({
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-on-subtle", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-subtle", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
                       ] }),
-                      item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-mono font-medium text-on-prominent tabular-nums", children: item.value.toLocaleString() })
+                      item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-mono font-medium text-prominent tabular-nums", children: item.value.toLocaleString() })
                     ]
                   }
                 )
@@ -1711,7 +1710,7 @@ function ChartLegendContent({
           "div",
           {
             className: cn(
-              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-on-subtle"
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-subtle"
             ),
             children: [
               (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1761,7 +1760,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-prominent-static-inverse",
+        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-prominent-static-inverse",
         className
       )
     }, props), {
@@ -1821,8 +1820,8 @@ function Input(_a) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-9 w-full min-w-0 rounded-sm border border-border-subtle bg-white/5 px-3 py-1 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-on-prominent placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08]",
+        "h-9 w-full min-w-0 rounded-sm border border-[var(--field-outline-border-default)] bg-[var(--field-outline-bg-default)] px-3 py-1 text-base text-[var(--field-text-prominent)] font-body shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-prominent-static-inverse file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--field-text-prominent)] placeholder:text-[var(--field-text-subtle)] hover:bg-[var(--field-outline-bg-hover)] focus-visible:bg-[var(--field-outline-bg-focus)] disabled:bg-[var(--field-outline-bg-disabled)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-[var(--field-text-disabled)] disabled:opacity-50 md:text-sm",
+        "focus-visible:border-[var(--field-outline-border-focus)] focus-visible:ring-[3px] focus-visible:ring-primary/[0.08]",
         className
       )
     }, props)
@@ -1838,7 +1837,7 @@ function Textarea(_a) {
     __spreadValues({
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full rounded-sm border border-border-subtle bg-white/5 px-3 py-2 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none placeholder:text-on-subtle focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-sm border border-[var(--field-outline-border-default)] bg-[var(--field-outline-bg-default)] px-3 py-2 text-base text-[var(--field-text-prominent)] font-body shadow-xs transition-[color,box-shadow] outline-none placeholder:text-[var(--field-text-subtle)] hover:bg-[var(--field-outline-bg-hover)] focus-visible:bg-[var(--field-outline-bg-focus)] focus-visible:border-[var(--field-outline-border-focus)] focus-visible:ring-[3px] focus-visible:ring-primary/[0.08] disabled:bg-[var(--field-outline-bg-disabled)] disabled:text-[var(--field-text-disabled)] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm",
         className
       )
     }, props)
@@ -1855,7 +1854,7 @@ function InputGroup(_a) {
       "data-slot": "input-group",
       role: "group",
       className: cn(
-        "group/input-group relative flex w-full items-center rounded-sm border border-border-subtle bg-white/5 shadow-xs transition-[color,box-shadow] outline-none",
+        "group/input-group relative flex w-full items-center rounded-sm border border-default bg-white/5 shadow-xs transition-[color,box-shadow] outline-none",
         "h-9 min-w-0 has-[>textarea]:h-auto",
         // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
@@ -1872,7 +1871,7 @@ function InputGroup(_a) {
   );
 }
 var inputGroupAddonVariants = (0, import_class_variance_authority4.cva)(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-on-subtle select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-subtle select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -1956,7 +1955,7 @@ function InputGroupText(_a) {
     "span",
     __spreadValues({
       className: cn(
-        "flex items-center gap-2 text-sm text-on-subtle [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-sm text-subtle [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props)
@@ -2024,7 +2023,7 @@ function ComboboxTrigger(_a) {
           import_lucide_react6.ChevronDownIcon,
           {
             "data-slot": "combobox-trigger-icon",
-            className: "pointer-events-none size-4 text-on-subtle"
+            className: "pointer-events-none size-4 text-subtle"
           }
         )
       ]
@@ -2114,7 +2113,7 @@ function ComboboxContent(_a) {
           "data-slot": "combobox-content",
           "data-chips": !!anchor,
           className: cn(
-            "group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-border-subtle duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-primary-surface text-prominent shadow-md ring-1 ring-default duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )
         }, props)
@@ -2148,7 +2147,7 @@ function ComboboxItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "combobox-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-primary/10 data-highlighted:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-primary/10 data-highlighted:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -2187,7 +2186,7 @@ function ComboboxLabel(_a) {
     __spreadValues({
       "data-slot": "combobox-label",
       className: cn(
-        "px-2 py-1.5 text-xs text-on-subtle pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
+        "px-2 py-1.5 text-xs text-subtle pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
         className
       )
     }, props)
@@ -2204,7 +2203,7 @@ function ComboboxEmpty(_a) {
     __spreadValues({
       "data-slot": "combobox-empty",
       className: cn(
-        "hidden w-full justify-center py-2 text-center text-sm text-on-subtle group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-sm text-subtle group-data-empty/combobox-content:flex",
         className
       )
     }, props)
@@ -2256,7 +2255,7 @@ function ComboboxChip(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "combobox-chip",
       className: cn(
-        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-subtle px-1.5 text-xs font-medium whitespace-nowrap text-on-prominent has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-secondary-surface px-1.5 text-xs font-medium whitespace-nowrap text-prominent has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
         className
       )
     }, props), {
@@ -2353,7 +2352,7 @@ function DialogContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-prominent p-6 shadow-lg duration-base outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-default bg-primary-surface p-6 shadow-lg duration-base outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         )
       }, props), {
@@ -2363,7 +2362,7 @@ function DialogContent(_a) {
             import_radix_ui10.Dialog.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-prominent transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-on-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-primary-surface transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.XIcon, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "Close" })
@@ -2435,7 +2434,7 @@ function DialogDescription(_a) {
     import_radix_ui10.Dialog.Description,
     __spreadValues({
       "data-slot": "dialog-description",
-      className: cn("text-base text-on-subtle", className)
+      className: cn("text-base text-subtle", className)
     }, props)
   );
 }
@@ -2453,7 +2452,7 @@ function Command(_a) {
     __spreadValues({
       "data-slot": "command",
       className: cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-sm bg-popover text-popover-foreground",
+        "flex h-full w-full flex-col overflow-hidden rounded-sm bg-primary-surface text-prominent",
         className
       )
     }, props)
@@ -2483,7 +2482,7 @@ function CommandDialog(_a) {
       {
         className: cn("overflow-hidden p-0", className),
         showCloseButton,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Command, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-on-subtle [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Command, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-subtle [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
       }
     )
   ] }));
@@ -2506,7 +2505,7 @@ function CommandInput(_a) {
           __spreadValues({
             "data-slot": "command-input",
             className: cn(
-              "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-on-subtle disabled:cursor-not-allowed disabled:opacity-50",
+              "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-subtle disabled:cursor-not-allowed disabled:opacity-50",
               className
             )
           }, props)
@@ -2553,7 +2552,7 @@ function CommandGroup(_a) {
     __spreadValues({
       "data-slot": "command-group",
       className: cn(
-        "overflow-hidden p-1 text-on-prominent [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-on-subtle",
+        "overflow-hidden p-1 text-prominent [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-subtle",
         className
       )
     }, props)
@@ -2584,7 +2583,7 @@ function CommandItem(_a) {
     __spreadValues({
       "data-slot": "command-item",
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-primary/10 data-[selected=true]:text-on-prominent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-primary/10 data-[selected=true]:text-prominent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle",
         className
       )
     }, props)
@@ -2601,7 +2600,7 @@ function CommandShortcut(_a) {
     __spreadValues({
       "data-slot": "command-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs tracking-widest text-subtle",
         className
       )
     }, props)
@@ -2657,7 +2656,7 @@ function ContextMenuSubTrigger(_a) {
       "data-slot": "context-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-secondary-hover data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle",
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-secondary-hover data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle",
         className
       )
     }, props), {
@@ -2679,7 +2678,7 @@ function ContextMenuSubContent(_a) {
     __spreadValues({
       "data-slot": "context-menu-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border border-border-subtle bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border border-default bg-primary-surface p-1 text-prominent shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -2696,7 +2695,7 @@ function ContextMenuContent(_a) {
     __spreadValues({
       "data-slot": "context-menu-content",
       className: cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-subtle bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-default bg-primary-surface p-1 text-prominent shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -2719,7 +2718,7 @@ function ContextMenuItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )
     }, props)
@@ -2790,7 +2789,7 @@ function ContextMenuLabel(_a) {
       "data-slot": "context-menu-label",
       "data-inset": inset,
       className: cn(
-        "px-2 py-1.5 text-sm font-medium text-on-prominent data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium text-prominent data-[inset]:pl-8",
         className
       )
     }, props)
@@ -2821,7 +2820,7 @@ function ContextMenuShortcut(_a) {
     __spreadValues({
       "data-slot": "context-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs tracking-widest text-subtle",
         className
       )
     }, props)
@@ -2891,16 +2890,16 @@ function DrawerContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "drawer-content",
         className: cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-prominent",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=top]:border-border-subtle",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=bottom]:border-border-subtle",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-border-subtle data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-border-subtle data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-primary-surface",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=top]:border-default",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=bottom]:border-default",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-default data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:border-default data-[vaul-drawer-direction=left]:sm:max-w-sm",
           className
         )
       }, props), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-subtle group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-secondary-surface group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
           children
         ]
       })
@@ -2940,7 +2939,7 @@ function DrawerTitle(_a) {
     import_vaul.Drawer.Title,
     __spreadValues({
       "data-slot": "drawer-title",
-      className: cn("font-semibold font-display text-on-prominent", className)
+      className: cn("font-semibold font-display text-prominent", className)
     }, props)
   );
 }
@@ -2954,7 +2953,7 @@ function DrawerDescription(_a) {
     import_vaul.Drawer.Description,
     __spreadValues({
       "data-slot": "drawer-description",
-      className: cn("text-sm text-on-subtle", className)
+      className: cn("text-sm text-subtle", className)
     }, props)
   );
 }
@@ -2994,7 +2993,7 @@ function DropdownMenuContent(_a) {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border border-border-subtle bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border border-default bg-primary-surface p-1 text-prominent shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -3021,7 +3020,7 @@ function DropdownMenuItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )
     }, props)
@@ -3042,7 +3041,7 @@ function DropdownMenuCheckboxItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked
@@ -3076,7 +3075,7 @@ function DropdownMenuRadioItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -3132,7 +3131,7 @@ function DropdownMenuShortcut(_a) {
     __spreadValues({
       "data-slot": "dropdown-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs tracking-widest text-subtle",
         className
       )
     }, props)
@@ -3158,7 +3157,7 @@ function DropdownMenuSubTrigger(_a) {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[inset]:pl-8 data-[state=open]:bg-secondary-hover data-[state=open]:text-on-prominent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle",
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-prominent data-[inset]:pl-8 data-[state=open]:bg-secondary-hover data-[state=open]:text-prominent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle",
         className
       )
     }, props), {
@@ -3180,7 +3179,7 @@ function DropdownMenuSubContent(_a) {
     __spreadValues({
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-sm border border-border-subtle bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-sm border border-default bg-primary-surface p-1 text-prominent shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -3222,7 +3221,7 @@ var emptyMediaVariants = (0, import_class_variance_authority5.cva)(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-subtle text-on-prominent [&_svg:not([class*='size-'])]:size-6"
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-secondary-surface text-prominent [&_svg:not([class*='size-'])]:size-6"
       }
     },
     defaultVariants: {
@@ -3264,7 +3263,7 @@ function EmptyDescription(_a) {
     __spreadValues({
       "data-slot": "empty-description",
       className: cn(
-        "text-sm/relaxed text-on-subtle [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "text-sm/relaxed text-subtle [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )
     }, props)
@@ -3480,7 +3479,7 @@ function FieldDescription(_a) {
     __spreadValues({
       "data-slot": "field-description",
       className: cn(
-        "text-sm leading-normal font-normal text-on-subtle group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-sm leading-normal font-normal text-subtle group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
@@ -3511,7 +3510,7 @@ function FieldSeparator(_a) {
         children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "span",
           {
-            className: "relative mx-auto block w-fit bg-prominent px-2 text-on-subtle",
+            className: "relative mx-auto block w-fit bg-primary-surface px-2 text-subtle",
             "data-slot": "field-separator-content",
             children
           }
@@ -3646,7 +3645,7 @@ function FormDescription(_a) {
     __spreadValues({
       "data-slot": "form-description",
       id: formDescriptionId,
-      className: cn("text-sm text-on-subtle", className)
+      className: cn("text-sm text-subtle", className)
     }, props)
   );
 }
@@ -3698,7 +3697,7 @@ function HoverCardContent(_a) {
       align,
       sideOffset,
       className: cn(
-        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-border-subtle bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-default bg-primary-surface p-4 text-prominent shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -3757,7 +3756,7 @@ function InputOTPSlot(_a) {
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border border-border-subtle bg-white/5 text-sm font-body text-on-prominent shadow-xs transition-[color,box-shadow] outline-none first:rounded-l-sm last:rounded-r-sm aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[active=true]:z-10 data-[active=true]:border-primary data-[active=true]:ring-[3px] data-[active=true]:ring-primary/[0.08] data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20",
+        "relative flex h-9 w-9 items-center justify-center border border-default bg-white/5 text-sm font-body text-prominent shadow-xs transition-[color,box-shadow] outline-none first:rounded-l-sm last:rounded-r-sm aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[active=true]:z-10 data-[active=true]:border-primary data-[active=true]:ring-[3px] data-[active=true]:ring-primary/[0.08] data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20",
         className
       )
     }, props), {
@@ -3808,9 +3807,9 @@ var itemVariants = (0, import_class_variance_authority7.cva)(
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border-border-subtle text-on-prominent hover:bg-secondary-hover",
-        muted: "bg-subtle/50"
+        default: "bg-[var(--list-item-primary-bg-default)] hover:bg-[var(--list-item-primary-bg-hover)] active:bg-[var(--list-item-primary-bg-pressed)]",
+        outline: "border-[var(--list-item-border-selected)] text-[var(--list-item-text-prominent)] hover:bg-[var(--list-item-primary-bg-hover)] active:bg-[var(--list-item-primary-bg-pressed)]",
+        muted: "bg-[var(--list-item-secondary-bg-default)] hover:bg-[var(--list-item-secondary-bg-hover)] active:bg-[var(--list-item-secondary-bg-pressed)]"
       },
       size: {
         default: "gap-4 p-4",
@@ -3852,7 +3851,7 @@ var itemMediaVariants = (0, import_class_variance_authority7.cva)(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "size-8 rounded-sm border bg-subtle [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-8 rounded-sm border bg-secondary-surface [&_svg:not([class*='size-'])]:size-4",
         image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
       }
     },
@@ -3898,7 +3897,7 @@ function ItemTitle(_a) {
     __spreadValues({
       "data-slot": "item-title",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium text-[var(--list-item-text-prominent)]",
         className
       )
     }, props)
@@ -3911,7 +3910,7 @@ function ItemDescription(_a) {
     __spreadValues({
       "data-slot": "item-description",
       className: cn(
-        "line-clamp-2 text-sm leading-normal font-normal text-balance text-on-subtle",
+        "line-clamp-2 text-sm leading-normal font-normal text-balance text-subtle",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )
@@ -3964,9 +3963,9 @@ function Kbd(_a) {
     __spreadValues({
       "data-slot": "kbd",
       className: cn(
-        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-subtle px-1 font-sans text-xs font-medium text-on-subtle select-none",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-secondary-surface px-1 font-sans text-xs font-medium text-subtle select-none",
         "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-border [[data-slot=tooltip-content]_&]:text-on-prominent",
+        "[[data-slot=tooltip-content]_&]:bg-border [[data-slot=tooltip-content]_&]:text-prominent",
         className
       )
     }, props)
@@ -3988,7 +3987,7 @@ var import_class_variance_authority8 = require("class-variance-authority");
 var import_radix_ui19 = require("radix-ui");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority8.cva)(
-  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case tracking-wide text-primary hover:underline decoration-2 underline-offset-4",
+  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:text-[var(--link-primary-disabled)] disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case tracking-wide text-[var(--link-primary-default)] hover:underline decoration-2 underline-offset-4",
   {
     variants: {
       size: {
@@ -4038,7 +4037,7 @@ function Menubar(_a) {
     __spreadValues({
       "data-slot": "menubar",
       className: cn(
-        "flex h-9 items-center gap-1 rounded-md border border-border-subtle bg-prominent p-1 shadow-xs",
+        "flex h-9 items-center gap-1 rounded-md border border-default bg-primary-surface p-1 shadow-xs",
         className
       )
     }, props)
@@ -4071,7 +4070,7 @@ function MenubarTrigger(_a) {
     __spreadValues({
       "data-slot": "menubar-trigger",
       className: cn(
-        "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[state=open]:bg-secondary-hover data-[state=open]:text-primary",
+        "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent data-[state=open]:bg-secondary-hover data-[state=open]:text-primary",
         className
       )
     }, props)
@@ -4097,7 +4096,7 @@ function MenubarContent(_a) {
       alignOffset,
       sideOffset,
       className: cn(
-        "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-border-subtle bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-default bg-primary-surface p-1 text-prominent shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -4120,7 +4119,7 @@ function MenubarItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )
     }, props)
@@ -4141,7 +4140,7 @@ function MenubarCheckboxItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "menubar-checkbox-item",
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked
@@ -4166,7 +4165,7 @@ function MenubarRadioItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "menubar-radio-item",
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -4222,7 +4221,7 @@ function MenubarShortcut(_a) {
     __spreadValues({
       "data-slot": "menubar-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs tracking-widest text-subtle",
         className
       )
     }, props)
@@ -4248,7 +4247,7 @@ function MenubarSubTrigger(_a) {
       "data-slot": "menubar-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[inset]:pl-8 data-[state=open]:bg-secondary-hover data-[state=open]:text-on-prominent",
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent data-[inset]:pl-8 data-[state=open]:bg-secondary-hover data-[state=open]:text-prominent",
         className
       )
     }, props), {
@@ -4270,7 +4269,7 @@ function MenubarSubContent(_a) {
     __spreadValues({
       "data-slot": "menubar-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-border-subtle bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-default bg-primary-surface p-1 text-prominent shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -4300,7 +4299,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": size,
             className: cn(
-              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-prominent-static-inverse placeholder:text-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
               "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
               className
             )
@@ -4309,7 +4308,7 @@ function NativeSelect(_a) {
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           import_lucide_react13.ChevronDownIcon,
           {
-            className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-on-subtle opacity-50 select-none",
+            className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-subtle opacity-50 select-none",
             "aria-hidden": "true",
             "data-slot": "native-select-icon"
           }
@@ -4401,7 +4400,7 @@ function NavigationMenuItem(_a) {
   );
 }
 var navigationMenuTriggerStyle = (0, import_class_variance_authority9.cva)(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-prominent px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-secondary-hover data-[state=open]:text-on-prominent data-[state=open]:hover:bg-secondary-hover data-[state=open]:focus:bg-secondary-hover"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-primary-surface px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-secondary-hover data-[state=open]:text-prominent data-[state=open]:hover:bg-secondary-hover data-[state=open]:focus:bg-secondary-hover"
 );
 function NavigationMenuTrigger(_a) {
   var _b = _a, {
@@ -4443,7 +4442,7 @@ function NavigationMenuContent(_a) {
       "data-slot": "navigation-menu-content",
       className: cn(
         "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border-subtle group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-base **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-default group-data-[viewport=false]/navigation-menu:bg-primary-surface group-data-[viewport=false]/navigation-menu:text-prominent group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-base **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -4466,7 +4465,7 @@ function NavigationMenuViewport(_a) {
         __spreadValues({
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border-subtle bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-default bg-primary-surface text-prominent shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
             className
           )
         }, props)
@@ -4485,7 +4484,7 @@ function NavigationMenuLink(_a) {
     __spreadValues({
       "data-slot": "navigation-menu-link",
       className: cn(
-        "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-secondary-hover data-[active=true]:text-primary data-[active=true]:hover:bg-secondary-hover data-[active=true]:focus:bg-secondary-hover [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle",
+        "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-secondary-hover hover:text-prominent focus:bg-secondary-hover focus:text-prominent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-secondary-hover data-[active=true]:text-primary data-[active=true]:hover:bg-secondary-hover data-[active=true]:focus:bg-secondary-hover [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle",
         className
       )
     }, props)
@@ -4562,7 +4561,7 @@ function PaginationLink(_a) {
       "data-active": isActive,
       className: cn(
         "inline-flex shrink-0 items-center justify-center size-10 rounded-xs text-sm font-display font-bold uppercase tracking-wide whitespace-nowrap transition-[color,background-color,border-color] outline-none border",
-        isActive ? "bg-primary/10 border-primary text-primary" : "bg-transparent border-transparent text-on-prominent hover:bg-secondary-hover",
+        isActive ? "bg-[var(--pagination-bg-number-selected)] border-[var(--pagination-border-number-selected)] text-[var(--pagination-text-default)]" : "bg-[var(--pagination-bg-number-default)] border-transparent text-[var(--pagination-text-default)] hover:bg-[var(--pagination-bg-number-hover)] active:bg-[var(--pagination-bg-number-pressed)]",
         className
       )
     }, props)
@@ -4633,7 +4632,7 @@ function PopoverContent(_a) {
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-border-subtle bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-default bg-primary-surface p-4 text-prominent shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )
     }, props)
@@ -4673,7 +4672,7 @@ function PopoverDescription(_a) {
     "p",
     __spreadValues({
       "data-slot": "popover-description",
-      className: cn("text-on-subtle", className)
+      className: cn("text-subtle", className)
     }, props)
   );
 }
@@ -4694,7 +4693,7 @@ function Progress(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "progress",
       className: cn(
-        "relative h-2 w-full overflow-hidden rounded-2xs bg-primary/20",
+        "relative h-2 w-full overflow-hidden rounded-2xs bg-[var(--progress-bar-bg-normal-track-default)]",
         className
       )
     }, props), {
@@ -4702,7 +4701,7 @@ function Progress(_a) {
         import_radix_ui23.Progress.Indicator,
         {
           "data-slot": "progress-indicator",
-          className: "h-full w-full flex-1 bg-primary transition-all",
+          className: "h-full w-full flex-1 bg-[var(--progress-bar-bg-normal-progress-default)] transition-all",
           style: { transform: `translateX(-${100 - (value || 0)}%)` }
         }
       )
@@ -4901,7 +4900,7 @@ function SelectTrigger(_a) {
       "data-readonly": readOnly ? "" : void 0,
       disabled: readOnly || props.disabled,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-prominent appearance-none px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
+        "flex w-fit items-center justify-between gap-2 rounded-sm border border-[var(--dropdown-field-outline-border-default)] bg-[var(--dropdown-field-outline-bg-default)] appearance-none px-3 py-2 text-sm text-[var(--dropdown-field-text-prominent)] whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-[var(--dropdown-field-outline-bg-hover)] focus-visible:bg-[var(--dropdown-field-outline-bg-focus)] focus-visible:border-[var(--dropdown-field-outline-border-focus)] focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-[var(--dropdown-field-text-subtle)] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-[var(--dropdown-field-text-subtle)] data-[readonly]:cursor-default data-[readonly]:opacity-100",
         className
       )
     }, props), {
@@ -4929,7 +4928,7 @@ function SelectContent(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "select-content",
       className: cn(
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border border-border-subtle bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border border-[var(--menu-border)] bg-[var(--menu-background)] text-[var(--dropdown-field-text-prominent)] shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -4963,7 +4962,7 @@ function SelectLabel(_a) {
     import_radix_ui26.Select.Label,
     __spreadValues({
       "data-slot": "select-label",
-      className: cn("px-2 py-1.5 text-xs text-on-subtle", className)
+      className: cn("px-2 py-1.5 text-xs text-subtle", className)
     }, props)
   );
 }
@@ -4980,7 +4979,7 @@ function SelectItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[state=checked]:text-primary data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-prominent data-[state=checked]:text-primary data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-subtle *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )
     }, props), {
@@ -5107,11 +5106,11 @@ function SheetContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "sheet-content",
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-prominent shadow-lg transition ease-standard data-[state=closed]:animate-out data-[state=closed]:duration-slow data-[state=open]:animate-in data-[state=open]:duration-open",
-          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-border-subtle data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-border-subtle data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b border-border-subtle data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t border-border-subtle data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          "fixed z-50 flex flex-col gap-4 bg-primary-surface shadow-lg transition ease-standard data-[state=closed]:animate-out data-[state=closed]:duration-slow data-[state=open]:animate-in data-[state=open]:duration-open",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-default data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-default data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b border-default data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t border-default data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className
         )
       }, props), {
@@ -5156,7 +5155,7 @@ function SheetTitle(_a) {
     import_radix_ui27.Dialog.Title,
     __spreadValues({
       "data-slot": "sheet-title",
-      className: cn("font-semibold text-on-prominent", className)
+      className: cn("font-semibold text-prominent", className)
     }, props)
   );
 }
@@ -5170,7 +5169,7 @@ function SheetDescription(_a) {
     import_radix_ui27.Dialog.Description,
     __spreadValues({
       "data-slot": "sheet-description",
-      className: cn("text-sm text-on-subtle", className)
+      className: cn("text-sm text-subtle", className)
     }, props)
   );
 }
@@ -5206,7 +5205,7 @@ function Skeleton(_a) {
     "div",
     __spreadValues({
       "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-md bg-subtle", className)
+      className: cn("animate-pulse rounded-md bg-secondary-surface", className)
     }, props)
   );
 }
@@ -5252,13 +5251,13 @@ function TooltipContent(_a) {
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary border-0 px-3 py-1.5 text-xs font-medium text-balance text-on-prominent-static-inverse fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-[var(--tooltip-bg-default)] border-0 px-3 py-1.5 text-xs font-medium text-balance text-[var(--tooltip-text-default)] fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         className
       )
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui28.Tooltip.Arrow, { className: "fill-primary" })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui28.Tooltip.Arrow, { className: "fill-[var(--tooltip-bg-default)]" })
       ]
     })
   ) });
@@ -5515,7 +5514,7 @@ function SidebarInset(_a) {
     __spreadValues({
       "data-slot": "sidebar-inset",
       className: cn(
-        "relative flex w-full flex-1 flex-col bg-prominent",
+        "relative flex w-full flex-1 flex-col bg-primary-surface",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )
@@ -5533,7 +5532,7 @@ function SidebarInput(_a) {
     __spreadValues({
       "data-slot": "sidebar-input",
       "data-sidebar": "input",
-      className: cn("h-8 w-full bg-prominent shadow-none", className)
+      className: cn("h-8 w-full bg-primary-surface shadow-none", className)
     }, props)
   );
 }
@@ -5688,7 +5687,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority10.cva)(
     variants: {
       variant: {
         default: "",
-        outline: "bg-prominent ring-1 ring-sidebar-border hover:ring-primary/40 data-[active=true]:ring-primary/40"
+        outline: "bg-primary-surface ring-1 ring-sidebar-border hover:ring-primary/40 data-[active=true]:ring-primary/40"
       },
       size: {
         default: "h-8 text-sm",
@@ -5944,7 +5943,7 @@ function Slider(_a) {
           {
             "data-slot": "slider-track",
             className: cn(
-              "relative grow overflow-hidden rounded-full bg-subtle data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+              "relative grow overflow-hidden rounded-full bg-secondary-surface data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               import_radix_ui30.Slider.Range,
@@ -5991,10 +5990,12 @@ var Toaster = (_a) => {
         loading: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react21.Loader2Icon, { className: "size-4 animate-spin" })
       },
       style: {
-        "--normal-bg": "var(--popover)",
-        "--normal-text": "var(--popover-foreground)",
+        "--normal-bg": "var(--snackbar-bg-default)",
+        "--normal-text": "var(--snackbar-text)",
         "--normal-border": "var(--border)",
-        "--border-radius": "var(--radius)"
+        "--border-radius": "var(--radius)",
+        "--error-bg": "var(--snackbar-bg-fail)",
+        "--error-text": "var(--snackbar-text-fail)"
       }
     }, props)
   );
@@ -6174,7 +6175,7 @@ function Spinner(_a) {
               width: "12%",
               height: "30%",
               borderRadius: "9999px",
-              backgroundColor: "currentColor",
+              backgroundColor: "var(--loading-spinner-bg-default)",
               transformOrigin: "50% 167%",
               transform: `translateX(-50%) rotate(${i * 45}deg)`,
               animation: `spinner-fade 0.8s linear ${i * 0.8 / PILL_COUNT}s infinite`
@@ -6267,7 +6268,7 @@ function TableFooter(_a) {
     __spreadValues({
       "data-slot": "table-footer",
       className: cn(
-        "border-t bg-subtle/50 font-medium [&>tr]:last:border-b-0",
+        "border-t bg-secondary-surface/50 font-medium [&>tr]:last:border-b-0",
         className
       )
     }, props)
@@ -6280,7 +6281,7 @@ function TableRow(_a) {
     __spreadValues({
       "data-slot": "table-row",
       className: cn(
-        "border-b transition-colors hover:bg-subtle/50 data-[state=selected]:bg-subtle",
+        "border-b transition-colors hover:bg-secondary-surface/50 data-[state=selected]:bg-secondary-surface",
         className
       )
     }, props)
@@ -6293,7 +6294,7 @@ function TableHead(_a) {
     __spreadValues({
       "data-slot": "table-head",
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-on-prominent [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-prominent [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )
     }, props)
@@ -6322,7 +6323,7 @@ function TableCaption(_a) {
     "caption",
     __spreadValues({
       "data-slot": "table-caption",
-      className: cn("mt-4 text-sm text-on-subtle", className)
+      className: cn("mt-4 text-sm text-subtle", className)
     }, props)
   );
 }
@@ -6353,7 +6354,7 @@ function Tabs(_a) {
   );
 }
 var tabsListVariants = (0, import_class_variance_authority11.cva)(
-  "group/tabs-list inline-flex w-fit items-center justify-center text-on-subtle group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none has-[[data-icon-position=top]]:h-auto",
+  "group/tabs-list inline-flex w-fit items-center justify-center text-subtle group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none has-[[data-icon-position=top]]:h-auto",
   {
     variants: {
       variant: {
@@ -6388,7 +6389,7 @@ function TabsList(_a) {
       "data-slot": "tabs-list",
       "data-variant": variant,
       "data-size": size,
-      className: cn(tabsListVariants({ variant, size }), className)
+      className: cn(tabsListVariants({ variant, size }), "text-[var(--tab-text-default)]", className)
     }, props)
   );
 }
@@ -6406,11 +6407,11 @@ function TabsTrigger(_a) {
       "data-slot": "tabs-trigger",
       "data-icon-position": iconPosition,
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-normal whitespace-nowrap text-on-prominent/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-normal whitespace-nowrap text-[var(--tab-text-default)] transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-[var(--tab-bg-hover)] focus-visible:border-[var(--tab-border-focus)] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:text-[var(--tab-text-disabled)] disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:rounded-sm group-data-[size=sm]/tabs-list:px-2 group-data-[size=sm]/tabs-list:text-xs",
         "group-data-[size=lg]/tabs-list:gap-2 group-data-[size=lg]/tabs-list:rounded-lg group-data-[size=lg]/tabs-list:px-4 group-data-[size=lg]/tabs-list:text-base",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:hover:bg-transparent group-data-[variant=line]/tabs-list:hover:text-primary group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
-        "data-[state=active]:bg-tabs-active data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
+        "data-[state=active]:bg-tabs-active data-[state=active]:border-transparent data-[state=active]:text-[var(--tab-text-selected)] data-[state=active]:font-semibold",
         "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         iconPosition === "top" && "h-auto flex-col gap-1 py-2",
         iconPosition === "top" && "group-data-[size=sm]/tabs-list:gap-0.5 group-data-[size=sm]/tabs-list:py-1.5",
@@ -6454,28 +6455,28 @@ function TicketCard({
       "data-slot": "ticket-card",
       className: cn(
         "relative flex w-full items-stretch rounded-sm",
-        "bg-subtle",
+        "bg-secondary-surface",
         className
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "relative flex min-w-0 flex-1 items-center gap-3 px-4 py-4 sm:gap-4 sm:px-5", children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex shrink-0 size-11 rounded-full border-2 border-primary items-center justify-center text-primary sm:size-12", children: icon }),
           /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-on-subtle uppercase tracking-widest text-xs font-semibold", children: label }),
-            value && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "truncate text-lg font-bold text-on-prominent sm:text-xl", children: value })
+            label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-subtle uppercase tracking-widest text-xs font-semibold", children: label }),
+            value && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "truncate text-lg font-bold text-prominent sm:text-xl", children: value })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute right-0 top-0 z-10 size-5 -translate-y-1/2 translate-x-1/2 rounded-full bg-prominent"
+              className: "pointer-events-none absolute right-0 top-0 z-10 size-5 -translate-y-1/2 translate-x-1/2 rounded-full bg-primary-surface"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute bottom-0 right-0 z-10 size-5 translate-x-1/2 translate-y-1/2 rounded-full bg-prominent"
+              className: "pointer-events-none absolute bottom-0 right-0 z-10 size-5 translate-x-1/2 translate-y-1/2 rounded-full bg-primary-surface"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
@@ -6514,8 +6515,8 @@ function TicketCard({
                       }
                     }
                   ),
-                  stubIcon != null ? stubIcon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react23.ArrowRight, { className: "relative size-5 shrink-0 text-on-prominent-static-inverse" }),
-                  stubLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "max-w-full text-balance text-center text-xs font-bold uppercase leading-tight tracking-wide text-on-prominent-static-inverse sm:tracking-widest", children: stubLabel })
+                  stubIcon != null ? stubIcon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react23.ArrowRight, { className: "relative size-5 shrink-0 text-prominent-static-inverse" }),
+                  stubLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "max-w-full text-balance text-center text-xs font-bold uppercase leading-tight tracking-wide text-prominent-static-inverse sm:tracking-widest", children: stubLabel })
                 ]
               }
             )
@@ -6531,12 +6532,12 @@ var import_class_variance_authority12 = require("class-variance-authority");
 var import_radix_ui33 = require("radix-ui");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority12.cva)(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-secondary-hover data-[state=on]:border-transparent data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-secondary-hover data-[state=on]:border-transparent data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-border-prominent bg-transparent text-on-prominent shadow-xs hover:bg-secondary-hover"
+        outline: "border border-selected bg-transparent text-prominent shadow-xs hover:bg-secondary-hover"
       },
       size: {
         default: "h-9 min-w-9 px-2",