myoperator-ui 0.0.120 → 0.0.122

package/dist/index.js

@@ -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 {
@@ -6972,6 +6509,7 @@ export default {
     },
     extend: {
       colors: {
+        // Legacy shadcn colors
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -7005,6 +6543,71 @@ export default {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        // Semantic colors - Primary UI
+        "semantic-primary": "var(--semantic-primary)",
+        "semantic-primary-hover": "var(--semantic-primary-hover)",
+        "semantic-primary-selected": "var(--semantic-primary-selected)",
+        "semantic-primary-selected-hover": "var(--semantic-primary-selected-hover)",
+        "semantic-primary-highlighted": "var(--semantic-primary-highlighted)",
+        "semantic-primary-surface": "var(--semantic-primary-surface)",
+        // Semantic colors - Brand
+        "semantic-brand": "var(--semantic-brand)",
+        "semantic-brand-hover": "var(--semantic-brand-hover)",
+        "semantic-brand-selected": "var(--semantic-brand-selected)",
+        "semantic-brand-selected-hover": "var(--semantic-brand-selected-hover)",
+        "semantic-brand-highlighted": "var(--semantic-brand-highlighted)",
+        "semantic-brand-surface": "var(--semantic-brand-surface)",
+        // Semantic colors - Background
+        "semantic-bg-primary": "var(--semantic-bg-primary)",
+        "semantic-bg-secondary": "var(--semantic-bg-secondary)",
+        "semantic-bg-ui": "var(--semantic-bg-ui)",
+        "semantic-bg-grey": "var(--semantic-bg-grey)",
+        "semantic-bg-grey-hover": "var(--semantic-bg-grey-hover)",
+        "semantic-bg-inverted": "var(--semantic-bg-inverted)",
+        "semantic-bg-hover": "var(--semantic-bg-hover)",
+        // Semantic colors - Text
+        "semantic-text-primary": "var(--semantic-text-primary)",
+        "semantic-text-secondary": "var(--semantic-text-secondary)",
+        "semantic-text-placeholder": "var(--semantic-text-placeholder)",
+        "semantic-text-link": "var(--semantic-text-link)",
+        "semantic-text-inverted": "var(--semantic-text-inverted)",
+        "semantic-text-muted": "var(--semantic-text-muted)",
+        // Semantic colors - Border
+        "semantic-border-primary": "var(--semantic-border-primary)",
+        "semantic-border-secondary": "var(--semantic-border-secondary)",
+        "semantic-border-accent": "var(--semantic-border-accent)",
+        "semantic-border-layout": "var(--semantic-border-layout)",
+        "semantic-border-input": "var(--semantic-border-input)",
+        "semantic-border-input-focus": "var(--semantic-border-input-focus)",
+        // Semantic colors - Disabled
+        "semantic-disabled-primary": "var(--semantic-disabled-primary)",
+        "semantic-disabled-secondary": "var(--semantic-disabled-secondary)",
+        "semantic-disabled-text": "var(--semantic-disabled-text)",
+        "semantic-disabled-border": "var(--semantic-disabled-border)",
+        // Semantic colors - Error
+        "semantic-error-primary": "var(--semantic-error-primary)",
+        "semantic-error-surface": "var(--semantic-error-surface)",
+        "semantic-error-text": "var(--semantic-error-text)",
+        "semantic-error-border": "var(--semantic-error-border)",
+        "semantic-error-hover": "var(--semantic-error-hover)",
+        // Semantic colors - Warning
+        "semantic-warning-primary": "var(--semantic-warning-primary)",
+        "semantic-warning-surface": "var(--semantic-warning-surface)",
+        "semantic-warning-text": "var(--semantic-warning-text)",
+        "semantic-warning-border": "var(--semantic-warning-border)",
+        "semantic-warning-hover": "var(--semantic-warning-hover)",
+        // Semantic colors - Success
+        "semantic-success-primary": "var(--semantic-success-primary)",
+        "semantic-success-surface": "var(--semantic-success-surface)",
+        "semantic-success-text": "var(--semantic-success-text)",
+        "semantic-success-border": "var(--semantic-success-border)",
+        "semantic-success-hover": "var(--semantic-success-hover)",
+        // Semantic colors - Info
+        "semantic-info-primary": "var(--semantic-info-primary)",
+        "semantic-info-surface": "var(--semantic-info-surface)",
+        "semantic-info-text": "var(--semantic-info-text)",
+        "semantic-info-border": "var(--semantic-info-border)",
+        "semantic-info-hover": "var(--semantic-info-hover)",
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -7246,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") {
@@ -7260,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...");
@@ -7292,9 +6908,24 @@ export function cn(...inputs: ClassValue[]) {
         tailwindUpdated = true;
       } else {
         const existingConfig = await fs3.readFile(tailwindConfigPath, "utf-8");
-        if (!existingConfig.includes("hsl(var(--destructive))") && !existingConfig.includes("hsl(var(--ring))")) {
+        const hasLegacyColors = existingConfig.includes("hsl(var(--destructive))") || existingConfig.includes("hsl(var(--ring))");
+        const hasSemanticColors = existingConfig.includes("semantic-text-primary");
+        if (!hasLegacyColors && !hasSemanticColors) {
           await fs3.writeFile(tailwindConfigPath, getTailwindConfig(userPrefix, hasBootstrap));
           tailwindUpdated = true;
+        } else if (hasLegacyColors && !hasSemanticColors) {
+          spinner.stop();
+          const result = await prompts2({
+            type: "confirm",
+            name: "updateTailwind",
+            message: `${tailwindConfig} is missing semantic color tokens. Update with full color set?`,
+            initial: true
+          });
+          spinner.start("Initializing project...");
+          if (result.updateTailwind) {
+            await fs3.writeFile(tailwindConfigPath, getTailwindConfig(userPrefix, hasBootstrap));
+            tailwindUpdated = true;
+          }
         }
       }
     }
@@ -7372,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`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.120",
+  "version": "0.0.122",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",