myoperator-ui 0.0.121 → 0.0.123

package/dist/index.js

@@ -292,20 +292,20 @@ import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-[#343E55] text-white hover:bg-[#2F384D]",
-        primary: "bg-[#343E55] text-white hover:bg-[#2F384D]",
-        destructive: "bg-[#F04438] text-white hover:bg-[#D92D20]",
+        default: "bg-semantic-primary text-semantic-text-inverted hover:bg-semantic-primary-hover",
+        primary: "bg-semantic-primary text-semantic-text-inverted hover:bg-semantic-primary-hover",
+        destructive: "bg-semantic-error-primary text-semantic-text-inverted hover:bg-semantic-error-hover",
         outline:
-          "border border-[#343E55] bg-transparent text-[#343E55] hover:bg-[#EBECEE]",
-        secondary: "bg-[#EBECEE] text-[#343E55] hover:bg-[#D5D7DA]",
-        ghost: "text-[#717680] hover:bg-[#F5F5F5] hover:text-[#181D27]",
-        link: "text-[#343E55] underline-offset-4 hover:underline",
+          "border border-semantic-border-primary bg-transparent text-semantic-text-secondary hover:bg-semantic-primary-surface",
+        secondary: "bg-semantic-primary-surface text-semantic-text-secondary hover:bg-semantic-bg-hover",
+        ghost: "text-semantic-text-muted hover:bg-semantic-bg-ui hover:text-semantic-text-primary",
+        link: "text-semantic-text-secondary underline-offset-4 hover:underline",
         dashed:
-          "border border-dashed border-[#D5D7DA] bg-transparent text-[#717680] hover:border-[#343E55] hover:text-[#343E55] hover:bg-[#FAFAFA]",
+          "border border-dashed border-semantic-bg-hover bg-transparent text-semantic-text-muted hover:border-semantic-border-primary hover:text-semantic-text-secondary hover:bg-[var(--color-neutral-50)]",
       },
       size: {
         default: "min-w-20 py-2.5 px-4 [&_svg]:size-4",
@@ -426,15 +426,15 @@ const badgeVariants = cva(
     variants: {
       variant: {
         // Status-based variants (existing)
-        active: "bg-[#ECFDF3] text-[#17B26A]",
-        failed: "bg-[#FEF3F2] text-[#F04438]",
-        disabled: "bg-[#F5F5F5] text-[#717680]",
-        default: "bg-[#F5F5F5] text-[#181D27]",
-        primary: "bg-[#F5F5F5] text-[#181D27]",
+        active: "bg-semantic-success-surface text-semantic-success-primary",
+        failed: "bg-semantic-error-surface text-semantic-error-primary",
+        disabled: "bg-semantic-bg-ui text-semantic-text-muted",
+        default: "bg-semantic-bg-ui text-semantic-text-primary",
+        primary: "bg-semantic-bg-ui text-semantic-text-primary",
         // shadcn-style variants (new)
-        secondary: "bg-[#F5F5F5] text-[#181D27]",
-        outline: "border border-[#E9EAEB] bg-transparent text-[#181D27]",
-        destructive: "bg-[#FEF3F2] text-[#F04438]",
+        secondary: "bg-semantic-bg-ui text-semantic-text-primary",
+        outline: "border border-semantic-border-layout bg-transparent text-semantic-text-primary",
+        destructive: "bg-semantic-error-surface text-semantic-error-primary",
       },
       size: {
         default: "px-3 py-1",
@@ -610,14 +610,14 @@ const mapClassName: { [key in Key]: string } = {
  * Maps color variants to Tailwind text color classes
  */
 const mapColorClassName: { [key in Color]: string } = {
-  primary: "text-[#181D27]",
-  secondary: "text-[#343E55]",
-  muted: "text-[#717680]",
-  placeholder: "text-[#A2A6B1]",
-  link: "text-[#4275D6]",
-  inverted: "text-white",
-  error: "text-[#F04438]",
-  success: "text-[#17B26A]",
+  primary: "text-semantic-text-primary",
+  secondary: "text-semantic-text-secondary",
+  muted: "text-semantic-text-muted",
+  placeholder: "text-semantic-text-placeholder",
+  link: "text-semantic-text-link",
+  inverted: "text-semantic-text-inverted",
+  error: "text-semantic-error-primary",
+  success: "text-semantic-success-primary",
 };
 
 /**
@@ -748,14 +748,14 @@ import { cn } from "../../lib/utils";
  * Input variants for different visual states
  */
 const inputVariants = cva(
-  "h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#181D27] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#181D27] placeholder:text-[#A2A6B1] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA]",
+  "h-10 w-full rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
         default:
-          "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -822,14 +822,14 @@ import { cn } from "../../lib/utils";
  * SelectTrigger variants matching TextField styling
  */
 const selectTriggerVariants = cva(
-  "flex h-10 w-full items-center justify-between rounded bg-white px-4 py-2.5 text-sm text-[#181D27] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA] [&>span]:line-clamp-1",
+  "flex h-10 w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:line-clamp-1",
   {
     variants: {
       state: {
         default:
-          "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -860,7 +860,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-4 text-[#717680] opacity-70" />
+      <ChevronDown className="size-4 text-semantic-text-muted opacity-70" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -878,7 +878,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="size-4 text-[#717680]" />
+    <ChevronUp className="size-4 text-semantic-text-muted" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -895,7 +895,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="size-4 text-[#717680]" />
+    <ChevronDown className="size-4 text-semantic-text-muted" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -909,7 +909,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded bg-white border border-[#E9EAEB] shadow-md",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -944,7 +944,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("px-4 py-1.5 text-xs font-medium text-[#717680]", className)}
+    className={cn("px-4 py-1.5 text-xs font-medium text-semantic-text-muted", className)}
     {...props}
   />
 ));
@@ -957,8 +957,8 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#181D27] outline-none",
-      "hover:bg-[#F5F5F5] focus:bg-[#F5F5F5]",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-semantic-text-primary outline-none",
+      "hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
@@ -966,7 +966,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute right-2 flex size-4 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4 text-[#2BBCCA]" />
+        <Check className="size-4 text-semantic-brand" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -980,7 +980,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-[#E9EAEB]", className)}
+    className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
     {...props}
   />
 ));
@@ -1027,7 +1027,7 @@ import { cn } from "../../lib/utils";
  * Checkbox box variants (the outer container)
  */
 const checkboxVariants = cva(
-  "peer inline-flex items-center justify-center shrink-0 rounded border-2 transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#343E55] data-[state=checked]:border-[#343E55] data-[state=checked]:text-white data-[state=indeterminate]:bg-[#343E55] data-[state=indeterminate]:border-[#343E55] data-[state=indeterminate]:text-white data-[state=unchecked]:bg-white data-[state=unchecked]:border-[#E9EAEB] data-[state=unchecked]:hover:border-[#A4A7AE]",
+  "peer inline-flex items-center justify-center shrink-0 rounded border-2 transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-semantic-primary data-[state=checked]:border-semantic-primary data-[state=checked]:text-semantic-text-inverted data-[state=indeterminate]:bg-semantic-primary data-[state=indeterminate]:border-semantic-primary data-[state=indeterminate]:text-semantic-text-inverted data-[state=unchecked]:bg-semantic-bg-primary data-[state=unchecked]:border-semantic-border-input data-[state=unchecked]:hover:border-[var(--color-neutral-400)]",
   {
     variants: {
       size: {
@@ -1159,7 +1159,7 @@ const Checkbox = React.forwardRef<
                 htmlFor={id}
                 className={cn(
                   labelSizeVariants({ size }),
-                  "text-[#181D27] cursor-pointer",
+                  "text-semantic-text-primary cursor-pointer",
                   disabled && "opacity-50 cursor-not-allowed",
                   labelClassName
                 )}
@@ -1173,7 +1173,7 @@ const Checkbox = React.forwardRef<
                 htmlFor={id}
                 className={cn(
                   labelSizeVariants({ size }),
-                  "text-[#181D27] cursor-pointer",
+                  "text-semantic-text-primary cursor-pointer",
                   disabled && "opacity-50 cursor-not-allowed",
                   labelClassName
                 )}
@@ -1197,7 +1197,7 @@ const Checkbox = React.forwardRef<
             <span
               className={cn(
                 labelSizeVariants({ size }),
-                "text-[#181D27]",
+                "text-semantic-text-primary",
                 disabled && "opacity-50",
                 labelClassName
               )}
@@ -1210,7 +1210,7 @@ const Checkbox = React.forwardRef<
             <span
               className={cn(
                 labelSizeVariants({ size }),
-                "text-[#181D27]",
+                "text-semantic-text-primary",
                 disabled && "opacity-50",
                 labelClassName
               )}
@@ -1254,7 +1254,7 @@ import { cn } from "../../lib/utils";
  * Switch track variants (the outer container)
  */
 const switchVariants = cva(
-  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#343E55] data-[state=unchecked]:bg-[#E9EAEB]",
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-semantic-primary data-[state=unchecked]:bg-semantic-bg-grey",
   {
     variants: {
       size: {
@@ -1358,7 +1358,7 @@ const Switch = React.forwardRef<
             <span
               className={cn(
                 labelSizeVariants({ size }),
-                "text-[#181D27]",
+                "text-semantic-text-primary",
                 disabled && "opacity-50"
               )}
             >
@@ -1370,7 +1370,7 @@ const Switch = React.forwardRef<
             <span
               className={cn(
                 labelSizeVariants({ size }),
-                "text-[#181D27]",
+                "text-semantic-text-primary",
                 disabled && "opacity-50"
               )}
             >
@@ -1413,17 +1413,17 @@ import { cn } from "../../lib/utils";
  * TextField container variants for when icons/prefix/suffix are present
  */
 const textFieldContainerVariants = cva(
-  "relative flex items-center rounded bg-white transition-all",
+  "relative flex items-center rounded bg-semantic-bg-primary transition-all",
   {
     variants: {
       state: {
         default:
-          "border border-[#E9EAEB] focus-within:border-[#2BBCCA]/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus-within:border-semantic-border-input-focus/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-[#F04438]/40 focus-within:border-[#F04438]/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus-within:border-semantic-error-primary/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
       disabled: {
-        true: "cursor-not-allowed opacity-50 bg-[#FAFAFA]",
+        true: "cursor-not-allowed opacity-50 bg-[var(--color-neutral-50)]",
         false: "",
       },
     },
@@ -1438,14 +1438,14 @@ const textFieldContainerVariants = cva(
  * TextField input variants (standalone without container)
  */
 const textFieldInputVariants = cva(
-  "h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#181D27] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#181D27] placeholder:text-[#A2A6B1] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA]",
+  "h-10 w-full rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
         default:
-          "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -1566,7 +1566,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         id={inputId}
         className={cn(
           hasAddons
-            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-[#181D27] placeholder:text-[#A2A6B1] disabled:cursor-not-allowed"
+            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed"
             : textFieldInputVariants({ state: derivedState, className })
         )}
         disabled={disabled || loading}
@@ -1586,10 +1586,10 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         {label && (
           <label
             htmlFor={inputId}
-            className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
+            className={cn("text-sm font-medium text-semantic-text-primary", labelClassName)}
           >
             {label}
-            {required && <span className="text-[#F04438] ml-0.5">*</span>}
+            {required && <span className="text-semantic-error-primary ml-0.5">*</span>}
           </label>
         )}
 
@@ -1606,26 +1606,26 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             )}
           >
             {prefix && (
-              <span className="text-sm text-[#717680] mr-2 select-none">
+              <span className="text-sm text-semantic-text-muted mr-2 select-none">
                 {prefix}
               </span>
             )}
             {leftIcon && (
-              <span className="mr-2 text-[#717680] [&_svg]:size-4 flex-shrink-0">
+              <span className="mr-2 text-semantic-text-muted [&_svg]:size-4 flex-shrink-0">
                 {leftIcon}
               </span>
             )}
             {inputElement}
             {loading && (
-              <Loader2 className="animate-spin size-4 text-[#717680] ml-2 flex-shrink-0" />
+              <Loader2 className="animate-spin size-4 text-semantic-text-muted ml-2 flex-shrink-0" />
             )}
             {!loading && rightIcon && (
-              <span className="ml-2 text-[#717680] [&_svg]:size-4 flex-shrink-0">
+              <span className="ml-2 text-semantic-text-muted [&_svg]:size-4 flex-shrink-0">
                 {rightIcon}
               </span>
             )}
             {suffix && (
-              <span className="text-sm text-[#717680] ml-2 select-none">
+              <span className="text-sm text-semantic-text-muted ml-2 select-none">
                 {suffix}
               </span>
             )}
@@ -1638,11 +1638,11 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         {(error || helperText || (showCount && maxLength)) && (
           <div className="flex justify-between items-start gap-2">
             {error ? (
-              <span id={errorId} className="text-xs text-[#F04438]">
+              <span id={errorId} className="text-xs text-semantic-error-primary">
                 {error}
               </span>
             ) : helperText ? (
-              <span id={helperId} className="text-xs text-[#717680]">
+              <span id={helperId} className="text-xs text-semantic-text-muted">
                 {helperText}
               </span>
             ) : (
@@ -1652,7 +1652,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
               <span
                 className={cn(
                   "text-xs",
-                  charCount > maxLength ? "text-[#F04438]" : "text-[#717680]"
+                  charCount > maxLength ? "text-semantic-error-primary" : "text-semantic-text-muted"
                 )}
               >
                 {charCount}/{maxLength}
@@ -1849,10 +1849,10 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
         {label && (
           <label
             htmlFor={selectId}
-            className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
+            className={cn("text-sm font-medium text-semantic-text-primary", labelClassName)}
           >
             {label}
-            {required && <span className="text-[#F04438] ml-0.5">*</span>}
+            {required && <span className="text-semantic-error-primary ml-0.5">*</span>}
           </label>
         )}
 
@@ -1875,7 +1875,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
           >
             <SelectValue placeholder={placeholder} />
             {loading && (
-              <Loader2 className="absolute right-8 size-4 animate-spin text-[#717680]" />
+              <Loader2 className="absolute right-8 size-4 animate-spin text-semantic-text-muted" />
             )}
           </SelectTrigger>
           <SelectContent>
@@ -1887,7 +1887,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
                   placeholder={searchPlaceholder}
                   value={searchQuery}
                   onChange={handleSearchChange}
-                  className="w-full h-8 px-3 text-sm border border-[#E9EAEB] rounded bg-white placeholder:text-[#A2A6B1] focus:outline-none focus:border-[#2BBCCA]/50"
+                  className="w-full h-8 px-3 text-sm border border-semantic-border-input rounded bg-semantic-bg-primary placeholder:text-semantic-text-placeholder focus:outline-none focus:border-semantic-border-input-focus/50"
                   // Prevent closing dropdown when clicking input
                   onClick={(e) => e.stopPropagation()}
                   onKeyDown={(e) => e.stopPropagation()}
@@ -1930,7 +1930,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
               searchQuery &&
               groupedOptions.ungrouped.length === 0 &&
               Object.keys(groupedOptions.groups).length === 0 && (
-                <div className="py-6 text-center text-sm text-[#717680]">
+                <div className="py-6 text-center text-sm text-semantic-text-muted">
                   No results found
                 </div>
               )}
@@ -1941,11 +1941,11 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
         {(error || helperText) && (
           <div className="flex justify-between items-start gap-2">
             {error ? (
-              <span id={errorId} className="text-xs text-[#F04438]">
+              <span id={errorId} className="text-xs text-semantic-error-primary">
                 {error}
               </span>
             ) : helperText ? (
-              <span id={helperId} className="text-xs text-[#717680]">
+              <span id={helperId} className="text-xs text-semantic-text-muted">
                 {helperText}
               </span>
             ) : null}
@@ -1984,14 +1984,14 @@ import { cn } from "../../lib/utils";
  * MultiSelect trigger variants matching TextField styling
  */
 const multiSelectTriggerVariants = cva(
-  "flex min-h-10 w-full items-center justify-between rounded bg-white px-4 py-2 text-sm text-[#181D27] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA]",
+  "flex min-h-10 w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2 text-sm text-semantic-text-primary transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
         default:
-          "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -2209,10 +2209,10 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
         {label && (
           <label
             htmlFor={selectId}
-            className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
+            className={cn("text-sm font-medium text-semantic-text-primary", labelClassName)}
           >
             {label}
-            {required && <span className="text-[#F04438] ml-0.5">*</span>}
+            {required && <span className="text-semantic-error-primary ml-0.5">*</span>}
           </label>
         )}
 
@@ -2237,12 +2237,12 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
         >
           <div className="flex-1 flex flex-wrap gap-1">
             {selectedValues.length === 0 ? (
-              <span className="text-[#A2A6B1]">{placeholder}</span>
+              <span className="text-semantic-text-placeholder">{placeholder}</span>
             ) : (
               selectedLabels.map((label, index) => (
                 <span
                   key={selectedValues[index]}
-                  className="inline-flex items-center gap-1 bg-[#F5F5F5] text-[#181D27] text-xs px-2 py-0.5 rounded"
+                  className="inline-flex items-center gap-1 bg-semantic-bg-ui text-semantic-text-primary text-xs px-2 py-0.5 rounded"
                 >
                   {label}
                   <span
@@ -2258,7 +2258,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
                         );
                       }
                     }}
-                    className="cursor-pointer hover:text-[#F04438] focus:outline-none"
+                    className="cursor-pointer hover:text-semantic-error-primary focus:outline-none"
                     aria-label={\`Remove \${label}\`}
                   >
                     <X className="size-3" />
@@ -2279,18 +2279,18 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
                     clearAll(e as unknown as React.MouseEvent);
                   }
                 }}
-                className="p-0.5 cursor-pointer hover:text-[#F04438] focus:outline-none"
+                className="p-0.5 cursor-pointer hover:text-semantic-error-primary focus:outline-none"
                 aria-label="Clear all"
               >
-                <X className="size-4 text-[#717680]" />
+                <X className="size-4 text-semantic-text-muted" />
               </span>
             )}
             {loading ? (
-              <Loader2 className="size-4 animate-spin text-[#717680]" />
+              <Loader2 className="size-4 animate-spin text-semantic-text-muted" />
             ) : (
               <ChevronDown
                 className={cn(
-                  "size-4 text-[#717680] transition-transform",
+                  "size-4 text-semantic-text-muted transition-transform",
                   isOpen && "rotate-180"
                 )}
               />
@@ -2302,7 +2302,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
         {isOpen && (
           <div
             className={cn(
-              "absolute z-50 mt-1 w-full rounded bg-white border border-[#E9EAEB] shadow-md",
+              "absolute z-50 mt-1 w-full rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
               "top-full"
             )}
             role="listbox"
@@ -2310,13 +2310,13 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
           >
             {/* Search input */}
             {searchable && (
-              <div className="p-2 border-b border-[#E9EAEB]">
+              <div className="p-2 border-b border-semantic-border-layout">
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full h-8 px-3 text-sm border border-[#E9EAEB] rounded bg-white placeholder:text-[#A2A6B1] focus:outline-none focus:border-[#2BBCCA]/50"
+                  className="w-full h-8 px-3 text-sm border border-semantic-border-input rounded bg-semantic-bg-primary placeholder:text-semantic-text-placeholder focus:outline-none focus:border-semantic-border-input-focus/50"
                   onClick={(e) => e.stopPropagation()}
                 />
               </div>
@@ -2325,7 +2325,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
             {/* Options */}
             <div className="max-h-60 overflow-auto p-1">
               {filteredOptions.length === 0 ? (
-                <div className="py-6 text-center text-sm text-[#717680]">
+                <div className="py-6 text-center text-sm text-semantic-text-muted">
                   No results found
                 </div>
               ) : (
@@ -2347,15 +2347,15 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
                       disabled={isDisabled}
                       onClick={() => !isDisabled && toggleOption(option.value)}
                       className={cn(
-                        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#181D27] outline-none",
-                        "hover:bg-[#F5F5F5] focus:bg-[#F5F5F5]",
-                        isSelected && "bg-[#F5F5F5]",
+                        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-semantic-text-primary outline-none",
+                        "hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui",
+                        isSelected && "bg-semantic-bg-ui",
                         isDisabled && "pointer-events-none opacity-50"
                       )}
                     >
                       <span className="absolute right-2 flex size-4 items-center justify-center">
                         {isSelected && (
-                          <Check className="size-4 text-[#2BBCCA]" />
+                          <Check className="size-4 text-semantic-brand" />
                         )}
                       </span>
                       {option.label}
@@ -2367,7 +2367,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
 
             {/* Footer with count */}
             {maxSelections && (
-              <div className="p-2 border-t border-[#E9EAEB] text-xs text-[#717680]">
+              <div className="p-2 border-t border-semantic-border-layout text-xs text-semantic-text-muted">
                 {selectedValues.length} / {maxSelections} selected
               </div>
             )}
@@ -2384,11 +2384,11 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
         {(error || helperText) && (
           <div className="flex justify-between items-start gap-2">
             {error ? (
-              <span id={errorId} className="text-xs text-[#F04438]">
+              <span id={errorId} className="text-xs text-semantic-error-primary">
                 {error}
               </span>
             ) : helperText ? (
-              <span id={helperId} className="text-xs text-[#717680]">
+              <span id={helperId} className="text-xs text-semantic-text-muted">
                 {helperText}
               </span>
             ) : null}
@@ -2473,7 +2473,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     <div
       className={cn(
         "relative w-full overflow-auto",
-        !withoutBorder && "rounded-lg border border-[#E9EAEB]"
+        !withoutBorder && "rounded-lg border border-semantic-border-layout"
       )}
     >
       <table
@@ -2492,7 +2492,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn("bg-[#FAFAFA] [&_tr]:border-b", className)}
+    className={cn("bg-[var(--color-neutral-50)] [&_tr]:border-b", className)}
     {...props}
   />
 ));
@@ -2517,7 +2517,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-[#FAFAFA] font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[var(--color-neutral-50)] font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -2535,10 +2535,10 @@ const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
     <tr
       ref={ref}
       className={cn(
-        "border-b border-[#E9EAEB] transition-colors",
+        "border-b border-semantic-border-layout transition-colors",
         highlighted
-          ? "bg-[#ECF1FB]"
-          : "hover:bg-[#FAFAFA]/50 data-[state=selected]:bg-[#F5F5F5]",
+          ? "bg-semantic-info-surface"
+          : "hover:bg-[var(--color-neutral-50)]/50 data-[state=selected]:bg-semantic-bg-ui",
         className
       )}
       {...props}
@@ -2564,8 +2564,8 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
     <th
       ref={ref}
       className={cn(
-        "h-12 px-4 text-left align-middle font-medium text-[#717680] text-sm [&:has([role=checkbox])]:pr-0",
-        sticky && "sticky left-0 bg-[#FAFAFA] z-10",
+        "h-12 px-4 text-left align-middle font-medium text-semantic-text-muted text-sm [&:has([role=checkbox])]:pr-0",
+        sticky && "sticky left-0 bg-[var(--color-neutral-50)] z-10",
         sortDirection && "cursor-pointer select-none",
         className
       )}
@@ -2574,12 +2574,12 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
       <div className="flex items-center gap-1">
         {children}
         {sortDirection && (
-          <span className="text-[#A4A7AE]">
+          <span className="text-[var(--color-neutral-400)]">
             {sortDirection === "asc" ? "\u2191" : "\u2193"}
           </span>
         )}
         {infoTooltip && (
-          <span className="text-[#A4A7AE] cursor-help" title={infoTooltip}>
+          <span className="text-[var(--color-neutral-400)] cursor-help" title={infoTooltip}>
             \u24D8
           </span>
         )}
@@ -2599,8 +2599,8 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
     <td
       ref={ref}
       className={cn(
-        "px-4 align-middle text-[#181D27] [&:has([role=checkbox])]:pr-0",
-        sticky && "sticky left-0 bg-white z-10",
+        "px-4 align-middle text-semantic-text-primary [&:has([role=checkbox])]:pr-0",
+        sticky && "sticky left-0 bg-semantic-bg-primary z-10",
         className
       )}
       {...props}
@@ -2615,7 +2615,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-[#717680]", className)}
+    className={cn("mt-4 text-sm text-semantic-text-muted", className)}
     {...props}
   />
 ));
@@ -2638,7 +2638,7 @@ const TableSkeleton = ({ rows = 5, columns = 5 }: TableSkeletonProps) => (
         {Array.from({ length: columns }).map((_, colIndex) => (
           <TableCell key={colIndex}>
             <div
-              className="h-4 bg-[#E9EAEB] rounded animate-pulse"
+              className="h-4 bg-semantic-bg-grey rounded animate-pulse"
               style={{
                 width: colIndex === 1 ? "80%" : colIndex === 2 ? "30%" : "60%",
               }}
@@ -2663,7 +2663,7 @@ export interface TableEmptyProps {
 
 const TableEmpty = ({ colSpan, children }: TableEmptyProps) => (
   <TableRow>
-    <TableCell colSpan={colSpan} className="text-center py-8 text-[#717680]">
+    <TableCell colSpan={colSpan} className="text-center py-8 text-semantic-text-muted">
       {children || "No data available"}
     </TableCell>
   </TableRow>
@@ -2956,7 +2956,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[#F5F5F5] data-[state=open]:bg-[#F5F5F5]",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-semantic-bg-ui data-[state=open]:bg-semantic-bg-ui",
       inset && "pl-8",
       className
     )}
@@ -2976,7 +2976,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#E9EAEB] bg-white p-1 text-[#181D27] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-semantic-border-layout bg-semantic-bg-primary p-1 text-semantic-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
       className
     )}
     {...props}
@@ -2994,7 +2994,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#E9EAEB] bg-white p-1 text-[#181D27] shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-semantic-border-layout bg-semantic-bg-primary p-1 text-semantic-text-primary shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
         className
       )}
@@ -3013,7 +3013,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[#F5F5F5] focus:text-[#181D27] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -3029,7 +3029,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F5F5F5] focus:text-[#181D27] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -3053,7 +3053,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F5F5F5] focus:text-[#181D27] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -3092,7 +3092,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-[#E9EAEB]", className)}
+    className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
     {...props}
   />
 ));
@@ -3163,7 +3163,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md bg-[#343E55] px-3 py-1.5 text-xs text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 overflow-hidden rounded-md bg-semantic-primary px-3 py-1.5 text-xs text-semantic-text-inverted shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -3178,7 +3178,7 @@ const TooltipArrow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TooltipPrimitive.Arrow
     ref={ref}
-    className={cn("fill-[#343E55]", className)}
+    className={cn("fill-semantic-primary", className)}
     {...props}
   />
 ));
@@ -3552,14 +3552,14 @@ import { cn } from "../../lib/utils";
 const tagVariants = cva("inline-flex items-center rounded text-sm", {
   variants: {
     variant: {
-      default: "bg-[#F5F5F5] text-[#181D27]",
-      primary: "bg-[#F5F5F5] text-[#181D27]",
-      accent: "bg-[#EBECEE] text-[#343E55]",
-      secondary: "bg-[#E9EAEB] text-[#414651]",
-      success: "bg-[#ECFDF3] text-[#17B26A]",
-      warning: "bg-[#FFFAEB] text-[#F79009]",
-      error: "bg-[#FEF3F2] text-[#F04438]",
-      destructive: "bg-[#FEF3F2] text-[#F04438]",
+      default: "bg-semantic-bg-ui text-semantic-text-primary",
+      primary: "bg-semantic-bg-ui text-semantic-text-primary",
+      accent: "bg-semantic-primary-surface text-semantic-text-secondary",
+      secondary: "bg-semantic-bg-grey text-[var(--color-neutral-700)]",
+      success: "bg-semantic-success-surface text-semantic-success-primary",
+      warning: "bg-semantic-warning-surface text-semantic-warning-primary",
+      error: "bg-semantic-error-surface text-semantic-error-primary",
+      destructive: "bg-semantic-error-surface text-semantic-error-primary",
     },
     size: {
       default: "px-2 py-1",
@@ -3702,16 +3702,16 @@ import { cn } from "../../lib/utils";
  * Colors are hardcoded for Bootstrap compatibility.
  */
 const alertVariants = cva(
-  "relative w-full rounded border p-4 text-sm text-[#181D27] [&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+  "relative w-full rounded border p-4 text-sm text-semantic-text-primary [&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
   {
     variants: {
       variant: {
-        default: "bg-[#F5F5F5] border-[#E9EAEB] [&>svg]:text-[#181D27]",
-        success: "bg-[#ECFDF3] border-[#17B26A]/20 [&>svg]:text-[#17B26A]",
-        error: "bg-[#FEF3F2] border-[#F04438]/20 [&>svg]:text-[#F04438]",
-        destructive: "bg-[#FEF3F2] border-[#F04438]/20 [&>svg]:text-[#F04438]",
-        warning: "bg-[#FFFAEB] border-[#F79009]/20 [&>svg]:text-[#F79009]",
-        info: "bg-[#EBF5FF] border-[#4275D6]/20 [&>svg]:text-[#4275D6]",
+        default: "bg-semantic-bg-ui border-semantic-border-layout [&>svg]:text-semantic-text-primary",
+        success: "bg-semantic-success-surface border-semantic-success-border [&>svg]:text-semantic-success-primary",
+        error: "bg-semantic-error-surface border-semantic-error-border [&>svg]:text-semantic-error-primary",
+        destructive: "bg-semantic-error-surface border-semantic-error-border [&>svg]:text-semantic-error-primary",
+        warning: "bg-semantic-warning-surface border-semantic-warning-border [&>svg]:text-semantic-warning-primary",
+        info: "bg-semantic-info-surface border-semantic-info-border [&>svg]:text-semantic-info-primary",
       },
     },
     defaultVariants: {
@@ -3843,12 +3843,12 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
                   onClick={handleClose}
                   className={cn(
                     "rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
-                    variant === "default" && "focus:ring-[#181D27]",
-                    variant === "success" && "focus:ring-[#17B26A]",
+                    variant === "default" && "focus:ring-semantic-text-primary",
+                    variant === "success" && "focus:ring-semantic-success-primary",
                     (variant === "error" || variant === "destructive") &&
-                      "focus:ring-[#F04438]",
-                    variant === "warning" && "focus:ring-[#F79009]",
-                    variant === "info" && "focus:ring-[#4275D6]"
+                      "focus:ring-semantic-error-primary",
+                    variant === "warning" && "focus:ring-semantic-warning-primary",
+                    variant === "info" && "focus:ring-semantic-info-primary"
                   )}
                   aria-label="Close alert"
                 >
@@ -3937,11 +3937,11 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-[#E9EAEB] bg-white text-[#181D27]",
-        success: "border-[#17B26A]/20 bg-[#ECFDF3] text-[#067647]",
-        error: "border-[#F04438]/20 bg-[#FEF3F2] text-[#B42318]",
-        warning: "border-[#F79009]/20 bg-[#FFFAEB] text-[#B54708]",
-        info: "border-[#4275D6]/20 bg-[#EBF5FF] text-[#1849A9]",
+        default: "border-semantic-border-layout bg-semantic-bg-primary text-semantic-text-primary",
+        success: "border-semantic-success-border bg-semantic-success-surface text-semantic-success-hover",
+        error: "border-semantic-error-border bg-semantic-error-surface text-semantic-error-hover",
+        warning: "border-semantic-warning-border bg-semantic-warning-surface text-semantic-warning-hover",
+        info: "border-semantic-info-border bg-semantic-info-surface text-semantic-info-hover",
       },
     },
     defaultVariants: {
@@ -3972,11 +3972,11 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded border border-[#E9EAEB] bg-transparent px-3 text-sm font-medium transition-colors hover:bg-[#F5F5F5] focus:outline-none focus:ring-2 focus:ring-[#4275D6] focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "group-[.success]:border-[#17B26A]/30 group-[.success]:hover:border-[#17B26A]/50 group-[.success]:hover:bg-[#17B26A]/10",
-      "group-[.error]:border-[#F04438]/30 group-[.error]:hover:border-[#F04438]/50 group-[.error]:hover:bg-[#F04438]/10",
-      "group-[.warning]:border-[#F79009]/30 group-[.warning]:hover:border-[#F79009]/50 group-[.warning]:hover:bg-[#F79009]/10",
-      "group-[.info]:border-[#4275D6]/30 group-[.info]:hover:border-[#4275D6]/50 group-[.info]:hover:bg-[#4275D6]/10",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded border border-semantic-border-layout bg-transparent px-3 text-sm font-medium transition-colors hover:bg-semantic-bg-ui focus:outline-none focus:ring-2 focus:ring-semantic-info-primary focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "group-[.success]:border-semantic-success-primary/30 group-[.success]:hover:border-semantic-success-primary/50 group-[.success]:hover:bg-semantic-success-primary/10",
+      "group-[.error]:border-semantic-error-primary/30 group-[.error]:hover:border-semantic-error-primary/50 group-[.error]:hover:bg-semantic-error-primary/10",
+      "group-[.warning]:border-semantic-warning-primary/30 group-[.warning]:hover:border-semantic-warning-primary/50 group-[.warning]:hover:bg-semantic-warning-primary/10",
+      "group-[.info]:border-semantic-info-primary/30 group-[.info]:hover:border-semantic-info-primary/50 group-[.info]:hover:bg-semantic-info-primary/10",
       className
     )}
     {...props}
@@ -3991,11 +3991,11 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-[#717680] opacity-0 transition-opacity hover:text-[#181D27] focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
-      "group-[.success]:text-[#067647] group-[.success]:hover:text-[#067647]",
-      "group-[.error]:text-[#B42318] group-[.error]:hover:text-[#B42318]",
-      "group-[.warning]:text-[#B54708] group-[.warning]:hover:text-[#B54708]",
-      "group-[.info]:text-[#1849A9] group-[.info]:hover:text-[#1849A9]",
+      "absolute right-2 top-2 rounded-md p-1 text-semantic-text-muted opacity-0 transition-opacity hover:text-semantic-text-primary focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
+      "group-[.success]:text-semantic-success-hover group-[.success]:hover:text-semantic-success-hover",
+      "group-[.error]:text-semantic-error-hover group-[.error]:hover:text-semantic-error-hover",
+      "group-[.warning]:text-semantic-warning-hover group-[.warning]:hover:text-semantic-warning-hover",
+      "group-[.info]:text-semantic-info-hover group-[.info]:hover:text-semantic-info-hover",
       className
     )}
     toast-close=""
@@ -4289,10 +4289,10 @@ function Toaster() {
                 <Icon
                   className={cn(
                     "h-5 w-5 shrink-0",
-                    variant === "success" && "text-[#17B26A]",
-                    variant === "error" && "text-[#F04438]",
-                    variant === "warning" && "text-[#F79009]",
-                    variant === "info" && "text-[#4275D6]"
+                    variant === "success" && "text-semantic-success-primary",
+                    variant === "error" && "text-semantic-error-primary",
+                    variant === "warning" && "text-semantic-warning-primary",
+                    variant === "info" && "text-semantic-info-primary"
                   )}
                 />
               )}
@@ -4404,7 +4404,7 @@ const accordionVariants = cva("w-full", {
   variants: {
     variant: {
       default: "",
-      bordered: "border border-[#E9EAEB] rounded-lg divide-y divide-[#E9EAEB]",
+      bordered: "border border-semantic-border-layout rounded-lg divide-y divide-semantic-border-layout",
     },
   },
   defaultVariants: {
@@ -4431,12 +4431,12 @@ const accordionItemVariants = cva("", {
  * Accordion trigger variants
  */
 const accordionTriggerVariants = cva(
-  "flex w-full items-center justify-between text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full items-center justify-between text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "py-3",
-        bordered: "p-4 hover:bg-[#FAFAFA]",
+        bordered: "p-4 hover:bg-[var(--color-neutral-50)]",
       },
     },
     defaultVariants: {
@@ -4674,7 +4674,7 @@ const AccordionTrigger = React.forwardRef<
       {showChevron && (
         <ChevronDown
           className={cn(
-            "h-4 w-4 shrink-0 text-[#717680] transition-transform duration-300",
+            "h-4 w-4 shrink-0 text-semantic-text-muted transition-transform duration-300",
             isOpen && "rotate-180"
           )}
         />
@@ -4761,7 +4761,7 @@ import { Button } from "./button";
  * PageHeader variants for layout styles.
  */
 const pageHeaderVariants = cva(
-  "flex flex-col sm:flex-row sm:items-center w-full bg-white",
+  "flex flex-col sm:flex-row sm:items-center w-full bg-semantic-bg-primary",
   {
     variants: {},
     defaultVariants: {},
@@ -4852,7 +4852,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
           <button
             type="button"
             onClick={onBackClick}
-            className="flex items-center justify-center w-10 h-10 rounded hover:bg-[#F5F5F5] transition-colors text-[#181D27]"
+            className="flex items-center justify-center w-10 h-10 rounded hover:bg-semantic-bg-ui transition-colors text-semantic-text-primary"
             aria-label="Go back"
           >
             <ArrowLeft className="w-5 h-5" />
@@ -4861,7 +4861,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
       }
       if (icon) {
         return (
-          <div className="flex items-center justify-center w-10 h-10 [&_svg]:w-6 [&_svg]:h-6 text-[#717680]">
+          <div className="flex items-center justify-center w-10 h-10 [&_svg]:w-6 [&_svg]:h-6 text-semantic-text-muted">
             {icon}
           </div>
         );
@@ -4993,10 +4993,10 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
       <div
         ref={ref}
         className={cn(
-          "flex w-full bg-white px-4",
+          "flex w-full bg-semantic-bg-primary px-4",
           layoutClasses[layout],
           heightClasses[layout],
-          showBorder && "border-b border-[#E9EAEB]",
+          showBorder && "border-b border-semantic-border-layout",
           className
         )}
         {...props}
@@ -5011,17 +5011,17 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
           {/* Content Section: Title + Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <h1 className="m-0 text-base font-semibold text-[#181D27] truncate">
+              <h1 className="m-0 text-base font-semibold text-semantic-text-primary truncate">
                 {title}
               </h1>
               {infoIcon && (
-                <span className="flex-shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-[#717680]">
+                <span className="flex-shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-semantic-text-muted">
                   {infoIcon}
                 </span>
               )}
             </div>
             {description && (
-              <p className="m-0 text-sm text-[#181D27] font-normal mt-1 line-clamp-2">
+              <p className="m-0 text-sm text-semantic-text-primary font-normal mt-1 line-clamp-2">
                 {description}
               </p>
             )}
@@ -6201,30 +6201,10 @@ import path3 from "path";
 import prompts2 from "prompts";
 import ora2 from "ora";
 import { execSync } from "child_process";
-var CSS_VARIABLES_V4 = `@import "tailwindcss";
-
-@theme {
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-card: hsl(0 0% 100%);
-  --color-card-foreground: hsl(222.2 84% 4.9%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(222.2 84% 4.9%);
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  --color-primary-foreground: hsl(210 40% 98%);
-  --color-secondary: hsl(210 40% 96.1%);
-  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --color-muted: hsl(210 40% 96.1%);
-  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --color-accent: hsl(210 40% 96.1%);
-  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --color-destructive: hsl(0 84.2% 60.2%);
-  --color-destructive-foreground: hsl(210 40% 98%);
-  --color-border: hsl(214.3 31.8% 91.4%);
-  --color-input: hsl(214.3 31.8% 91.4%);
-  --color-ring: hsl(222.2 84% 4.9%);
-  --radius: 0.5rem;
-}
+var MYOPERATOR_THEME_CSS = `/* myOperator UI Theme - Design System Variables
+ * Auto-generated by myoperator-ui CLI
+ * Do not edit directly - run 'npx myoperator-ui init' to update
+ */
 
 :root {
   /* =========================================================================
@@ -6459,253 +6439,46 @@ var CSS_VARIABLES_V4 = `@import "tailwindcss";
   --ring: 213 27% 84%;
 }
 `;
+var CSS_VARIABLES_V4 = `@import "tailwindcss";
+@import "./lib/myoperator-ui-theme.css";
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+  --radius: 0.5rem;
+}
+`;
 var CSS_VARIABLES_V4_BOOTSTRAP = `/* myOperator UI - Tailwind CSS for Bootstrap projects */
 /* Selective imports to avoid Preflight conflicts with Bootstrap */
 @layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
+@import "./lib/myoperator-ui-theme.css";
 
 /* Tell Tailwind to scan component files for utility classes */
 @source "./components/**/*.{js,ts,jsx,tsx}";
 @source "./lib/**/*.{js,ts,jsx,tsx}";
-
-:root {
-  /* =========================================================================
-     PRIMITIVE COLORS - CSS Custom Properties
-     ========================================================================= */
-
-  /* Base */
-  --color-white: #FFFFFF;
-  --color-black: #000000;
-
-  /* Neutral (Gray) */
-  --color-neutral-25: #FDFDFD;
-  --color-neutral-50: #FAFAFA;
-  --color-neutral-100: #F5F5F5;
-  --color-neutral-200: #E9EAEB;
-  --color-neutral-300: #D5D7DA;
-  --color-neutral-400: #A4A7AE;
-  --color-neutral-500: #717680;
-  --color-neutral-600: #535862;
-  --color-neutral-700: #414651;
-  --color-neutral-800: #252B37;
-  --color-neutral-900: #181D27;
-  --color-neutral-950: #0A0D12;
-
-  /* Primary (Blue Gray) */
-  --color-primary-25: #F9FAFB;
-  --color-primary-50: #EBECEE;
-  --color-primary-100: #C0C3CA;
-  --color-primary-200: #A2A6B1;
-  --color-primary-300: #777E8D;
-  --color-primary-400: #5D6577;
-  --color-primary-500: #343E55;
-  --color-primary-600: #2F384D;
-  --color-primary-700: #252C3C;
-  --color-primary-800: #1D222F;
-  --color-primary-900: #161A24;
-  --color-primary-950: #0C0F12;
-
-  /* Secondary (Turquoise) */
-  --color-secondary-25: #F6FCFD;
-  --color-secondary-50: #EAF8FA;
-  --color-secondary-100: #BDEAEF;
-  --color-secondary-200: #9DE0E7;
-  --color-secondary-300: #71D2DB;
-  --color-secondary-400: #55C9D5;
-  --color-secondary-500: #2BBCCA;
-  --color-secondary-600: #27ABB8;
-  --color-secondary-700: #1F858F;
-  --color-secondary-800: #18676F;
-  --color-secondary-900: #124F55;
-  --color-secondary-950: #0F3D3D;
-
-  /* Error (Red) */
-  --color-error-25: #FFFBFA;
-  --color-error-50: #FEF3F2;
-  --color-error-100: #FEE4E2;
-  --color-error-200: #FECDCA;
-  --color-error-300: #FDA29B;
-  --color-error-400: #F97066;
-  --color-error-500: #F04438;
-  --color-error-600: #D92D20;
-  --color-error-700: #B42318;
-  --color-error-800: #912018;
-  --color-error-900: #7A271A;
-  --color-error-950: #55160C;
-
-  /* Warning (Amber) */
-  --color-warning-25: #FFFCF5;
-  --color-warning-50: #FFFAEB;
-  --color-warning-100: #FEF0C7;
-  --color-warning-200: #FEDF89;
-  --color-warning-300: #FEC84B;
-  --color-warning-400: #FDB022;
-  --color-warning-500: #F79009;
-  --color-warning-600: #DC6803;
-  --color-warning-700: #B54708;
-  --color-warning-800: #93370D;
-  --color-warning-900: #7A2E0E;
-  --color-warning-950: #4E1D09;
-
-  /* Success (Green) */
-  --color-success-25: #F6FEF9;
-  --color-success-50: #ECFDF3;
-  --color-success-100: #DCFAE6;
-  --color-success-200: #ABEFC6;
-  --color-success-300: #75E0A7;
-  --color-success-400: #47CD89;
-  --color-success-500: #17B26A;
-  --color-success-600: #079455;
-  --color-success-700: #067647;
-  --color-success-800: #085D3A;
-  --color-success-900: #074D31;
-  --color-success-950: #053321;
-
-  /* Info (Blue) */
-  --color-info-25: #F6F8FD;
-  --color-info-50: #ECF1FB;
-  --color-info-100: #C4D4F2;
-  --color-info-200: #A8C0EC;
-  --color-info-300: #80A3E4;
-  --color-info-400: #6891DE;
-  --color-info-500: #4275D6;
-  --color-info-600: #3C6AC3;
-  --color-info-700: #2F5398;
-  --color-info-800: #244076;
-  --color-info-900: #1C315A;
-  --color-info-950: #182A44;
-
-  /* =========================================================================
-     SEMANTIC COLORS - Purpose-driven tokens
-     ========================================================================= */
-
-  /* Primary UI Colors */
-  --semantic-primary: var(--color-primary-500);
-  --semantic-primary-hover: var(--color-primary-600);
-  --semantic-primary-selected: var(--color-primary-300);
-  --semantic-primary-selected-hover: var(--color-primary-400);
-  --semantic-primary-highlighted: var(--color-primary-700);
-  --semantic-primary-surface: var(--color-primary-50);
-
-  /* Brand Colors */
-  --semantic-brand: var(--color-secondary-500);
-  --semantic-brand-hover: var(--color-secondary-700);
-  --semantic-brand-selected: var(--color-secondary-300);
-  --semantic-brand-selected-hover: var(--color-secondary-600);
-  --semantic-brand-highlighted: var(--color-secondary-600);
-  --semantic-brand-surface: var(--color-secondary-50);
-
-  /* Background Colors */
-  --semantic-bg-primary: var(--color-white);
-  --semantic-bg-secondary: var(--color-primary-950);
-  --semantic-bg-ui: var(--color-neutral-100);
-  --semantic-bg-grey: var(--color-neutral-200);
-  --semantic-bg-grey-hover: var(--color-neutral-400);
-  --semantic-bg-inverted: var(--color-black);
-  --semantic-bg-hover: var(--color-neutral-300);
-
-  /* Text Colors */
-  --semantic-text-primary: var(--color-neutral-900);
-  --semantic-text-secondary: var(--color-primary-500);
-  --semantic-text-placeholder: var(--color-primary-200);
-  --semantic-text-link: var(--color-info-500);
-  --semantic-text-inverted: var(--color-white);
-  --semantic-text-muted: var(--color-neutral-500);
-
-  /* Border Colors */
-  --semantic-border-primary: var(--color-primary-500);
-  --semantic-border-secondary: var(--color-primary-300);
-  --semantic-border-accent: var(--color-secondary-600);
-  --semantic-border-layout: var(--color-neutral-200);
-  --semantic-border-input: var(--color-neutral-200);
-  --semantic-border-input-focus: var(--color-secondary-500);
-
-  /* Disabled State */
-  --semantic-disabled-primary: var(--color-primary-200);
-  --semantic-disabled-secondary: var(--color-primary-50);
-  --semantic-disabled-text: var(--color-neutral-500);
-  --semantic-disabled-border: var(--color-neutral-300);
-
-  /* Error State */
-  --semantic-error-primary: var(--color-error-500);
-  --semantic-error-surface: var(--color-error-50);
-  --semantic-error-text: var(--color-error-700);
-  --semantic-error-border: var(--color-error-300);
-  --semantic-error-hover: var(--color-error-600);
-
-  /* Warning State */
-  --semantic-warning-primary: var(--color-warning-500);
-  --semantic-warning-surface: var(--color-warning-50);
-  --semantic-warning-text: var(--color-warning-700);
-  --semantic-warning-border: var(--color-warning-300);
-  --semantic-warning-hover: var(--color-warning-600);
-
-  /* Success State */
-  --semantic-success-primary: var(--color-success-500);
-  --semantic-success-surface: var(--color-success-50);
-  --semantic-success-text: var(--color-success-700);
-  --semantic-success-border: var(--color-success-300);
-  --semantic-success-hover: var(--color-success-600);
-
-  /* Info State */
-  --semantic-info-primary: var(--color-info-500);
-  --semantic-info-surface: var(--color-info-50);
-  --semantic-info-text: var(--color-info-700);
-  --semantic-info-border: var(--color-info-200);
-  --semantic-info-hover: var(--color-info-600);
-
-  /* =========================================================================
-     LEGACY SHADCN VARIABLES (for compatibility)
-     ========================================================================= */
-  --background: 0 0% 100%;
-  --foreground: 220 20% 12%;
-  --card: 0 0% 100%;
-  --card-foreground: 220 20% 12%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 220 20% 12%;
-  --primary: 222 26% 27%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 183 64% 46%;
-  --secondary-foreground: 0 0% 100%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 220 9% 46%;
-  --accent: 183 64% 46%;
-  --accent-foreground: 0 0% 100%;
-  --destructive: 4 89% 58%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 220 13% 91%;
-  --input: 220 13% 91%;
-  --ring: 222 26% 27%;
-  --radius: 0.5rem;
-}
-
-.dark {
-  --background: 222 47% 5%;
-  --foreground: 210 40% 98%;
-  --card: 222 47% 5%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222 47% 5%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222 47% 11%;
-  --secondary: 217 33% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217 33% 17.5%;
-  --muted-foreground: 215 20% 65%;
-  --accent: 217 33% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 63% 31%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217 33% 17.5%;
-  --input: 217 33% 17.5%;
-  --ring: 213 27% 84%;
-}
-
-/* End myOperator UI imports */
-
 `;
-var CSS_VARIABLES_V3 = `@tailwind base;
+var CSS_VARIABLES_V3 = `@import "./lib/myoperator-ui-theme.css";
+
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -6719,242 +6492,6 @@ var CSS_VARIABLES_V3 = `@tailwind base;
     box-shadow: none;
   }
 }
-
-@layer base {
-  :root {
-    /* =========================================================================
-       PRIMITIVE COLORS - CSS Custom Properties
-       ========================================================================= */
-
-    /* Base */
-    --color-white: #FFFFFF;
-    --color-black: #000000;
-
-    /* Neutral (Gray) */
-    --color-neutral-25: #FDFDFD;
-    --color-neutral-50: #FAFAFA;
-    --color-neutral-100: #F5F5F5;
-    --color-neutral-200: #E9EAEB;
-    --color-neutral-300: #D5D7DA;
-    --color-neutral-400: #A4A7AE;
-    --color-neutral-500: #717680;
-    --color-neutral-600: #535862;
-    --color-neutral-700: #414651;
-    --color-neutral-800: #252B37;
-    --color-neutral-900: #181D27;
-    --color-neutral-950: #0A0D12;
-
-    /* Primary (Blue Gray) */
-    --color-primary-25: #F9FAFB;
-    --color-primary-50: #EBECEE;
-    --color-primary-100: #C0C3CA;
-    --color-primary-200: #A2A6B1;
-    --color-primary-300: #777E8D;
-    --color-primary-400: #5D6577;
-    --color-primary-500: #343E55;
-    --color-primary-600: #2F384D;
-    --color-primary-700: #252C3C;
-    --color-primary-800: #1D222F;
-    --color-primary-900: #161A24;
-    --color-primary-950: #0C0F12;
-
-    /* Secondary (Turquoise) */
-    --color-secondary-25: #F6FCFD;
-    --color-secondary-50: #EAF8FA;
-    --color-secondary-100: #BDEAEF;
-    --color-secondary-200: #9DE0E7;
-    --color-secondary-300: #71D2DB;
-    --color-secondary-400: #55C9D5;
-    --color-secondary-500: #2BBCCA;
-    --color-secondary-600: #27ABB8;
-    --color-secondary-700: #1F858F;
-    --color-secondary-800: #18676F;
-    --color-secondary-900: #124F55;
-    --color-secondary-950: #0F3D3D;
-
-    /* Error (Red) */
-    --color-error-25: #FFFBFA;
-    --color-error-50: #FEF3F2;
-    --color-error-100: #FEE4E2;
-    --color-error-200: #FECDCA;
-    --color-error-300: #FDA29B;
-    --color-error-400: #F97066;
-    --color-error-500: #F04438;
-    --color-error-600: #D92D20;
-    --color-error-700: #B42318;
-    --color-error-800: #912018;
-    --color-error-900: #7A271A;
-    --color-error-950: #55160C;
-
-    /* Warning (Amber) */
-    --color-warning-25: #FFFCF5;
-    --color-warning-50: #FFFAEB;
-    --color-warning-100: #FEF0C7;
-    --color-warning-200: #FEDF89;
-    --color-warning-300: #FEC84B;
-    --color-warning-400: #FDB022;
-    --color-warning-500: #F79009;
-    --color-warning-600: #DC6803;
-    --color-warning-700: #B54708;
-    --color-warning-800: #93370D;
-    --color-warning-900: #7A2E0E;
-    --color-warning-950: #4E1D09;
-
-    /* Success (Green) */
-    --color-success-25: #F6FEF9;
-    --color-success-50: #ECFDF3;
-    --color-success-100: #DCFAE6;
-    --color-success-200: #ABEFC6;
-    --color-success-300: #75E0A7;
-    --color-success-400: #47CD89;
-    --color-success-500: #17B26A;
-    --color-success-600: #079455;
-    --color-success-700: #067647;
-    --color-success-800: #085D3A;
-    --color-success-900: #074D31;
-    --color-success-950: #053321;
-
-    /* Info (Blue) */
-    --color-info-25: #F6F8FD;
-    --color-info-50: #ECF1FB;
-    --color-info-100: #C4D4F2;
-    --color-info-200: #A8C0EC;
-    --color-info-300: #80A3E4;
-    --color-info-400: #6891DE;
-    --color-info-500: #4275D6;
-    --color-info-600: #3C6AC3;
-    --color-info-700: #2F5398;
-    --color-info-800: #244076;
-    --color-info-900: #1C315A;
-    --color-info-950: #182A44;
-
-    /* =========================================================================
-       SEMANTIC COLORS - Purpose-driven tokens
-       ========================================================================= */
-
-    /* Primary UI Colors */
-    --semantic-primary: var(--color-primary-500);
-    --semantic-primary-hover: var(--color-primary-600);
-    --semantic-primary-selected: var(--color-primary-300);
-    --semantic-primary-selected-hover: var(--color-primary-400);
-    --semantic-primary-highlighted: var(--color-primary-700);
-    --semantic-primary-surface: var(--color-primary-50);
-
-    /* Brand Colors */
-    --semantic-brand: var(--color-secondary-500);
-    --semantic-brand-hover: var(--color-secondary-700);
-    --semantic-brand-selected: var(--color-secondary-300);
-    --semantic-brand-selected-hover: var(--color-secondary-600);
-    --semantic-brand-highlighted: var(--color-secondary-600);
-    --semantic-brand-surface: var(--color-secondary-50);
-
-    /* Background Colors */
-    --semantic-bg-primary: var(--color-white);
-    --semantic-bg-secondary: var(--color-primary-950);
-    --semantic-bg-ui: var(--color-neutral-100);
-    --semantic-bg-grey: var(--color-neutral-200);
-    --semantic-bg-grey-hover: var(--color-neutral-400);
-    --semantic-bg-inverted: var(--color-black);
-    --semantic-bg-hover: var(--color-neutral-300);
-
-    /* Text Colors */
-    --semantic-text-primary: var(--color-neutral-900);
-    --semantic-text-secondary: var(--color-primary-500);
-    --semantic-text-placeholder: var(--color-primary-200);
-    --semantic-text-link: var(--color-info-500);
-    --semantic-text-inverted: var(--color-white);
-    --semantic-text-muted: var(--color-neutral-500);
-
-    /* Border Colors */
-    --semantic-border-primary: var(--color-primary-500);
-    --semantic-border-secondary: var(--color-primary-300);
-    --semantic-border-accent: var(--color-secondary-600);
-    --semantic-border-layout: var(--color-neutral-200);
-    --semantic-border-input: var(--color-neutral-200);
-    --semantic-border-input-focus: var(--color-secondary-500);
-
-    /* Disabled State */
-    --semantic-disabled-primary: var(--color-primary-200);
-    --semantic-disabled-secondary: var(--color-primary-50);
-    --semantic-disabled-text: var(--color-neutral-500);
-    --semantic-disabled-border: var(--color-neutral-300);
-
-    /* Error State */
-    --semantic-error-primary: var(--color-error-500);
-    --semantic-error-surface: var(--color-error-50);
-    --semantic-error-text: var(--color-error-700);
-    --semantic-error-border: var(--color-error-300);
-    --semantic-error-hover: var(--color-error-600);
-
-    /* Warning State */
-    --semantic-warning-primary: var(--color-warning-500);
-    --semantic-warning-surface: var(--color-warning-50);
-    --semantic-warning-text: var(--color-warning-700);
-    --semantic-warning-border: var(--color-warning-300);
-    --semantic-warning-hover: var(--color-warning-600);
-
-    /* Success State */
-    --semantic-success-primary: var(--color-success-500);
-    --semantic-success-surface: var(--color-success-50);
-    --semantic-success-text: var(--color-success-700);
-    --semantic-success-border: var(--color-success-300);
-    --semantic-success-hover: var(--color-success-600);
-
-    /* Info State */
-    --semantic-info-primary: var(--color-info-500);
-    --semantic-info-surface: var(--color-info-50);
-    --semantic-info-text: var(--color-info-700);
-    --semantic-info-border: var(--color-info-200);
-    --semantic-info-hover: var(--color-info-600);
-
-    /* =========================================================================
-       LEGACY SHADCN VARIABLES (for compatibility)
-       ========================================================================= */
-    --background: 0 0% 100%;
-    --foreground: 220 20% 12%;
-    --card: 0 0% 100%;
-    --card-foreground: 220 20% 12%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 220 20% 12%;
-    --primary: 222 26% 27%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 183 64% 46%;
-    --secondary-foreground: 0 0% 100%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 220 9% 46%;
-    --accent: 183 64% 46%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 4 89% 58%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 222 26% 27%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222 47% 5%;
-    --foreground: 210 40% 98%;
-    --card: 222 47% 5%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222 47% 5%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222 47% 11%;
-    --secondary: 217 33% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217 33% 17.5%;
-    --muted-foreground: 215 20% 65%;
-    --accent: 217 33% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217 33% 17.5%;
-    --input: 217 33% 17.5%;
-    --ring: 213 27% 84%;
-  }
-}
-
 `;
 var getTailwindConfig = (prefix = "tw-", hasBootstrap = false) => `/** @type {import('tailwindcss').Config} */
 export default {
@@ -7312,6 +6849,19 @@ export function cn(...inputs: ClassValue[]) {
     }
     const componentsFullPath = path3.join(cwd, componentsPath);
     await fs3.ensureDir(componentsFullPath);
+    const themeFilePath = path3.join(cwd, "src/lib/myoperator-ui-theme.css");
+    let themeCreated = false;
+    if (!await fs3.pathExists(themeFilePath)) {
+      await fs3.ensureDir(path3.dirname(themeFilePath));
+      await fs3.writeFile(themeFilePath, MYOPERATOR_THEME_CSS);
+      themeCreated = true;
+    } else {
+      const existingTheme = await fs3.readFile(themeFilePath, "utf-8");
+      if (!existingTheme.includes("--semantic-text-primary")) {
+        await fs3.writeFile(themeFilePath, MYOPERATOR_THEME_CSS);
+        themeCreated = true;
+      }
+    }
     const globalCssPath = path3.join(cwd, globalCss);
     let cssContent;
     if (tailwindVersion === "v4") {
@@ -7326,13 +6876,13 @@ export function cn(...inputs: ClassValue[]) {
       cssUpdated = true;
     } else {
       const existingCss = await fs3.readFile(globalCssPath, "utf-8");
-      const hasSemanticVariables = existingCss.includes("--semantic-text-primary");
-      if (!hasSemanticVariables) {
+      const hasThemeImport = existingCss.includes("myoperator-ui-theme.css");
+      if (!hasThemeImport) {
         spinner.stop();
         const result = await prompts2({
           type: "confirm",
           name: "updateCss",
-          message: `${globalCss} is missing semantic CSS variables. Update with full variable set?`,
+          message: `${globalCss} is missing myOperator UI theme import. Update?`,
           initial: true
         });
         spinner.start("Initializing project...");
@@ -7453,8 +7003,11 @@ export function cn(...inputs: ClassValue[]) {
       console.log(chalk2.green(`  \u2713 ${utilsPath} already has cn() function`));
     }
     console.log(chalk2.green(`  \u2713 Created ${componentsPath}`));
+    if (themeCreated) {
+      console.log(chalk2.green(`  \u2713 Created src/lib/myoperator-ui-theme.css (CSS variables)`));
+    }
     if (cssUpdated) {
-      console.log(chalk2.green(`  \u2713 Updated ${globalCss} with CSS variables`));
+      console.log(chalk2.green(`  \u2713 Updated ${globalCss} with theme import`));
     }
     if (tailwindUpdated) {
       console.log(chalk2.green(`  \u2713 Updated ${tailwindConfig} with theme colors`));