@titan-design/react-ui 0.6.0 → 0.8.0

package/dist/theme/index.d.mts

@@ -142,30 +142,6 @@ declare const primitiveColors: {
         readonly 800: "#1E40AF";
         readonly 900: "#1E3A8A";
     };
-    readonly green: {
-        readonly 50: "#ECFDF5";
-        readonly 100: "#D1FAE5";
-        readonly 200: "#A7F3D0";
-        readonly 300: "#6EE7B7";
-        readonly 400: "#3FC79A";
-        readonly 500: "#10B981";
-        readonly 600: "#059669";
-        readonly 700: "#0B815A";
-        readonly 800: "#065F46";
-        readonly 900: "#064E3B";
-    };
-    readonly teal: {
-        readonly 50: "#F0FDFA";
-        readonly 100: "#CCFBF1";
-        readonly 200: "#99F6E4";
-        readonly 300: "#5EEAD4";
-        readonly 400: "#43C6B7";
-        readonly 500: "#14B8A6";
-        readonly 600: "#0D9488";
-        readonly 700: "#0E8074";
-        readonly 800: "#115E59";
-        readonly 900: "#134E4A";
-    };
     readonly red: {
         readonly 50: "#FEF2F2";
         readonly 100: "#FEE2E2";
@@ -178,18 +154,6 @@ declare const primitiveColors: {
         readonly 800: "#991B1B";
         readonly 900: "#7F1D1D";
     };
-    readonly greenVivid: {
-        readonly 50: "#E9FBF0";
-        readonly 100: "#C8F7DA";
-        readonly 200: "#9FF0BF";
-        readonly 300: "#6BE79D";
-        readonly 400: "#47DE84";
-        readonly 500: "#2ED573";
-        readonly 600: "#22B85F";
-        readonly 700: "#1A9950";
-        readonly 800: "#157A40";
-        readonly 900: "#105C30";
-    };
     readonly redVivid: {
         readonly 50: "#FFECEE";
         readonly 100: "#FFD6DB";
@@ -202,30 +166,6 @@ declare const primitiveColors: {
         readonly 800: "#9E1C2C";
         readonly 900: "#7A1520";
     };
-    readonly amber: {
-        readonly 50: "#FFFBEB";
-        readonly 100: "#FEF3C7";
-        readonly 200: "#FDE68A";
-        readonly 300: "#FCD34D";
-        readonly 400: "#FFBF4C";
-        readonly 500: "#FFB020";
-        readonly 600: "#B27B16";
-        readonly 700: "#B45309";
-        readonly 800: "#92400E";
-        readonly 900: "#78350F";
-    };
-    readonly sky: {
-        readonly 50: "#F0F9FF";
-        readonly 100: "#E0F2FE";
-        readonly 200: "#BAE6FD";
-        readonly 300: "#7DD3FC";
-        readonly 400: "#64B6F7";
-        readonly 500: "#2196F3";
-        readonly 600: "#0284C7";
-        readonly 700: "#0B79D0";
-        readonly 800: "#075985";
-        readonly 900: "#0C4A6E";
-    };
     readonly neutral: {
         readonly 50: "#FAFAFA";
         readonly 100: "#F3F4F6";
@@ -239,17 +179,6 @@ declare const primitiveColors: {
         readonly 900: "#111827";
         readonly 950: "#030712";
     };
-    readonly accent: {
-        readonly 100: "#FFA860";
-        readonly 200: "#FF9630";
-        readonly 300: "#FF8500";
-        readonly 400: "#FF7900";
-        readonly 500: "#F56C00";
-        readonly 600: "#E06D10";
-        readonly 700: "#D0620C";
-        readonly 800: "#B75500";
-        readonly 900: "#A34900";
-    };
     readonly charcoal: {
         readonly 0: "#6E6E6E";
         readonly 50: "#5D5D5D";
@@ -263,17 +192,6 @@ declare const primitiveColors: {
         readonly 800: "#131313";
         readonly 900: "#101010";
     };
-    readonly steel: {
-        readonly 100: "#8AA4B8";
-        readonly 200: "#7894A8";
-        readonly 300: "#678498";
-        readonly 400: "#557488";
-        readonly 500: "#406D87";
-        readonly 600: "#39617A";
-        readonly 700: "#32556D";
-        readonly 800: "#243D53";
-        readonly 900: "#1D3146";
-    };
     readonly white: "#FFFFFF";
     readonly black: "#000000";
     readonly transparent: "transparent";
@@ -612,6 +530,8 @@ declare const semanticColorsLight: {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -707,6 +627,8 @@ declare const semanticColorsDark: {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -902,6 +824,8 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -996,6 +920,8 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -1111,6 +1037,8 @@ declare const lightThemeCSSVars: {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "#FFF4F4";
     readonly '--color-status-warning': "#F9B415";
@@ -1224,6 +1152,8 @@ declare const darkThemeCSSVars: {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
     readonly '--color-status-warning': "#F9B415";
@@ -1337,6 +1267,8 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "#FFF4F4";
     readonly '--color-status-warning': "#F9B415";
@@ -1449,6 +1381,8 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
     readonly '--color-status-warning': "#F9B415";

package/dist/theme/index.d.ts

@@ -142,30 +142,6 @@ declare const primitiveColors: {
         readonly 800: "#1E40AF";
         readonly 900: "#1E3A8A";
     };
-    readonly green: {
-        readonly 50: "#ECFDF5";
-        readonly 100: "#D1FAE5";
-        readonly 200: "#A7F3D0";
-        readonly 300: "#6EE7B7";
-        readonly 400: "#3FC79A";
-        readonly 500: "#10B981";
-        readonly 600: "#059669";
-        readonly 700: "#0B815A";
-        readonly 800: "#065F46";
-        readonly 900: "#064E3B";
-    };
-    readonly teal: {
-        readonly 50: "#F0FDFA";
-        readonly 100: "#CCFBF1";
-        readonly 200: "#99F6E4";
-        readonly 300: "#5EEAD4";
-        readonly 400: "#43C6B7";
-        readonly 500: "#14B8A6";
-        readonly 600: "#0D9488";
-        readonly 700: "#0E8074";
-        readonly 800: "#115E59";
-        readonly 900: "#134E4A";
-    };
     readonly red: {
         readonly 50: "#FEF2F2";
         readonly 100: "#FEE2E2";
@@ -178,18 +154,6 @@ declare const primitiveColors: {
         readonly 800: "#991B1B";
         readonly 900: "#7F1D1D";
     };
-    readonly greenVivid: {
-        readonly 50: "#E9FBF0";
-        readonly 100: "#C8F7DA";
-        readonly 200: "#9FF0BF";
-        readonly 300: "#6BE79D";
-        readonly 400: "#47DE84";
-        readonly 500: "#2ED573";
-        readonly 600: "#22B85F";
-        readonly 700: "#1A9950";
-        readonly 800: "#157A40";
-        readonly 900: "#105C30";
-    };
     readonly redVivid: {
         readonly 50: "#FFECEE";
         readonly 100: "#FFD6DB";
@@ -202,30 +166,6 @@ declare const primitiveColors: {
         readonly 800: "#9E1C2C";
         readonly 900: "#7A1520";
     };
-    readonly amber: {
-        readonly 50: "#FFFBEB";
-        readonly 100: "#FEF3C7";
-        readonly 200: "#FDE68A";
-        readonly 300: "#FCD34D";
-        readonly 400: "#FFBF4C";
-        readonly 500: "#FFB020";
-        readonly 600: "#B27B16";
-        readonly 700: "#B45309";
-        readonly 800: "#92400E";
-        readonly 900: "#78350F";
-    };
-    readonly sky: {
-        readonly 50: "#F0F9FF";
-        readonly 100: "#E0F2FE";
-        readonly 200: "#BAE6FD";
-        readonly 300: "#7DD3FC";
-        readonly 400: "#64B6F7";
-        readonly 500: "#2196F3";
-        readonly 600: "#0284C7";
-        readonly 700: "#0B79D0";
-        readonly 800: "#075985";
-        readonly 900: "#0C4A6E";
-    };
     readonly neutral: {
         readonly 50: "#FAFAFA";
         readonly 100: "#F3F4F6";
@@ -239,17 +179,6 @@ declare const primitiveColors: {
         readonly 900: "#111827";
         readonly 950: "#030712";
     };
-    readonly accent: {
-        readonly 100: "#FFA860";
-        readonly 200: "#FF9630";
-        readonly 300: "#FF8500";
-        readonly 400: "#FF7900";
-        readonly 500: "#F56C00";
-        readonly 600: "#E06D10";
-        readonly 700: "#D0620C";
-        readonly 800: "#B75500";
-        readonly 900: "#A34900";
-    };
     readonly charcoal: {
         readonly 0: "#6E6E6E";
         readonly 50: "#5D5D5D";
@@ -263,17 +192,6 @@ declare const primitiveColors: {
         readonly 800: "#131313";
         readonly 900: "#101010";
     };
-    readonly steel: {
-        readonly 100: "#8AA4B8";
-        readonly 200: "#7894A8";
-        readonly 300: "#678498";
-        readonly 400: "#557488";
-        readonly 500: "#406D87";
-        readonly 600: "#39617A";
-        readonly 700: "#32556D";
-        readonly 800: "#243D53";
-        readonly 900: "#1D3146";
-    };
     readonly white: "#FFFFFF";
     readonly black: "#000000";
     readonly transparent: "transparent";
@@ -612,6 +530,8 @@ declare const semanticColorsLight: {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -707,6 +627,8 @@ declare const semanticColorsDark: {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -902,6 +824,8 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -996,6 +920,8 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly 'status-live': "#2ED573";
+    readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
@@ -1111,6 +1037,8 @@ declare const lightThemeCSSVars: {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "#FFF4F4";
     readonly '--color-status-warning': "#F9B415";
@@ -1224,6 +1152,8 @@ declare const darkThemeCSSVars: {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
     readonly '--color-status-warning': "#F9B415";
@@ -1337,6 +1267,8 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "#FFF4F4";
     readonly '--color-status-warning': "#F9B415";
@@ -1449,6 +1381,8 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-brand-secondary': "#FFFFFF";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
+    readonly '--color-status-live': "#2ED573";
+    readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
     readonly '--color-status-warning': "#F9B415";

package/dist/theme/index.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale (primary brand)
+  // Blue scale
   blue: {
     50: "#EFF6FF",
     100: "#DBEAFE",
@@ -15,124 +15,36 @@ var primitiveColors = {
     400: "#60A5FA",
     500: "#3B82F6",
     600: "#5048E5",
-    // Primary main
     700: "#3832A0",
-    // Primary dark
     800: "#1E40AF",
     900: "#1E3A8A"
   },
-  // Green scale (secondary brand)
-  green: {
-    50: "#ECFDF5",
-    100: "#D1FAE5",
-    200: "#A7F3D0",
-    300: "#6EE7B7",
-    400: "#3FC79A",
-    // Secondary light
-    500: "#10B981",
-    // Secondary main
-    600: "#059669",
-    700: "#0B815A",
-    // Secondary dark
-    800: "#065F46",
-    900: "#064E3B"
-  },
-  // Teal scale (success)
-  teal: {
-    50: "#F0FDFA",
-    100: "#CCFBF1",
-    200: "#99F6E4",
-    300: "#5EEAD4",
-    400: "#43C6B7",
-    // Success light
-    500: "#14B8A6",
-    // Success main
-    600: "#0D9488",
-    700: "#0E8074",
-    // Success dark
-    800: "#115E59",
-    900: "#134E4A"
-  },
-  // Red scale (error)
+  // Red scale
   red: {
     50: "#FEF2F2",
     100: "#FEE2E2",
     200: "#FECACA",
     300: "#FCA5A5",
     400: "#DA6868",
-    // Error light
     500: "#EF4444",
     600: "#D14343",
-    // Error main
     700: "#922E2E",
-    // Error dark
     800: "#991B1B",
     900: "#7F1D1D"
   },
-  // Vivid green scale (live/go success)
-  greenVivid: {
-    50: "#E9FBF0",
-    100: "#C8F7DA",
-    200: "#9FF0BF",
-    300: "#6BE79D",
-    400: "#47DE84",
-    // Success vivid light
-    500: "#2ED573",
-    // Success vivid main
-    600: "#22B85F",
-    700: "#1A9950",
-    // Success vivid dark
-    800: "#157A40",
-    900: "#105C30"
-  },
-  // Vivid red scale (alert)
+  // Vivid red scale
   redVivid: {
     50: "#FFECEE",
     100: "#FFD6DB",
     200: "#FFB3BC",
     300: "#FF8593",
     400: "#FF6070",
-    // Error vivid light
     500: "#FF4757",
-    // Error vivid main
     600: "#E63548",
     700: "#C42539",
-    // Error vivid dark
     800: "#9E1C2C",
     900: "#7A1520"
   },
-  // Amber scale (warning)
-  amber: {
-    50: "#FFFBEB",
-    100: "#FEF3C7",
-    200: "#FDE68A",
-    300: "#FCD34D",
-    400: "#FFBF4C",
-    // Warning light
-    500: "#FFB020",
-    // Warning main
-    600: "#B27B16",
-    // Warning dark
-    700: "#B45309",
-    800: "#92400E",
-    900: "#78350F"
-  },
-  // Sky/Blue scale (info)
-  sky: {
-    50: "#F0F9FF",
-    100: "#E0F2FE",
-    200: "#BAE6FD",
-    300: "#7DD3FC",
-    400: "#64B6F7",
-    // Info light
-    500: "#2196F3",
-    // Info main
-    600: "#0284C7",
-    700: "#0B79D0",
-    // Info dark
-    800: "#075985",
-    900: "#0C4A6E"
-  },
   // Neutral/Gray scale
   neutral: {
     50: "#FAFAFA",
@@ -147,18 +59,6 @@ var primitiveColors = {
     900: "#111827",
     950: "#030712"
   },
-  // Orange scale (accent/brand color)
-  accent: {
-    100: "#FFA860",
-    200: "#FF9630",
-    300: "#FF8500",
-    400: "#FF7900",
-    500: "#F56C00",
-    600: "#E06D10",
-    700: "#D0620C",
-    800: "#B75500",
-    900: "#A34900"
-  },
   // Charcoal scale (dark backgrounds)
   charcoal: {
     0: "#6E6E6E",
@@ -173,18 +73,6 @@ var primitiveColors = {
     800: "#131313",
     900: "#101010"
   },
-  // Steel scale (cool accent)
-  steel: {
-    100: "#8AA4B8",
-    200: "#7894A8",
-    300: "#678498",
-    400: "#557488",
-    500: "#406D87",
-    600: "#39617A",
-    700: "#32556D",
-    800: "#243D53",
-    900: "#1D3146"
-  },
   // Pure colors
   white: "#FFFFFF",
   black: "#000000",
@@ -575,6 +463,9 @@ var semanticColorsLight = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
@@ -708,6 +599,9 @@ var semanticColorsDark = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
@@ -950,6 +844,8 @@ var lightThemeCSSVars = {
   "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
   "--color-status-success": semanticColorsLight["status-success"],
   "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-live": semanticColorsLight["status-live"],
+  "--color-status-live-muted": semanticColorsLight["status-live-muted"],
   "--color-status-error": semanticColorsLight["status-error"],
   "--color-status-error-subtle": semanticColorsLight["status-error-subtle"],
   "--color-status-warning": semanticColorsLight["status-warning"],
@@ -1046,6 +942,8 @@ var darkThemeCSSVars = {
   "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
   "--color-status-success": semanticColorsDark["status-success"],
   "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-live": semanticColorsDark["status-live"],
+  "--color-status-live-muted": semanticColorsDark["status-live-muted"],
   "--color-status-error": semanticColorsDark["status-error"],
   "--color-status-error-subtle": semanticColorsDark["status-error-subtle"],
   "--color-status-warning": semanticColorsDark["status-warning"],