@titan-design/react-ui 0.4.0 → 0.6.0

package/dist/theme/tokens-css.js

@@ -8,37 +8,17 @@ var primitiveColors = {
     600: "#5048E5",
     // Primary main
     700: "#3832A0"},
-  // Teal scale (success)
-  teal: {
-    50: "#F0FDFA",
-    400: "#43C6B7",
-    // Success light
-    500: "#14B8A6",
-    700: "#0E8074"},
   // Red scale (error)
   red: {
-    50: "#FEF2F2",
-    400: "#DA6868",
     // Error light
     500: "#EF4444",
-    600: "#D14343",
-    // Error main
-    700: "#922E2E"},
-  // Amber scale (warning)
-  amber: {
-    50: "#FFFBEB",
-    400: "#FFBF4C",
-    // Warning light
-    500: "#FFB020",
-    // Warning main
-    600: "#B27B16"},
-  // Sky/Blue scale (info)
-  sky: {
-    50: "#F0F9FF",
-    400: "#64B6F7",
-    // Info light
-    500: "#2196F3",
-    700: "#0B79D0"},
+    600: "#D14343"},
+  // Vivid red scale (alert)
+  redVivid: {
+    400: "#FF6070",
+    // Error vivid light
+    500: "#FF4757",
+    700: "#C42539"},
   // Neutral/Gray scale
   neutral: {
     50: "#FAFAFA",
@@ -48,16 +28,9 @@ var primitiveColors = {
     500: "#6B7280",
     600: "#4B5563",
     900: "#111827"},
-  // Orange scale (accent/brand color)
-  accent: {
-    200: "#FF9630",
-    300: "#FF8500",
-    400: "#FF7900",
-    500: "#F56C00",
-    600: "#E06D10",
-    700: "#D0620C"},
   // Charcoal scale (dark backgrounds)
   charcoal: {
+    200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
     500: "#1C1C1C",
@@ -65,15 +38,45 @@ var primitiveColors = {
     700: "#161616",
     900: "#101010"
   },
-  // Steel scale (cool accent)
-  steel: {
-    300: "#678498",
-    400: "#557488",
-    500: "#406D87",
-    600: "#39617A",
-    700: "#32556D"},
   // Pure colors
   white: "#FFFFFF"};
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C"},
+  orange: {
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00"},
+  amber: {
+    50: "#FFF7DD",
+    200: "#FFD352",
+    300: "#F9B415",
+    500: "#C27400"},
+  green: {
+    50: "#E3FFEE",
+    200: "#58F69E",
+    300: "#2ED573",
+    600: "#298732"},
+  cyan: {
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F"},
+  blue: {
+    50: "#EFF8FF",
+    300: "#78C2FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB"}};
 var discreteRainbow = [
   "#E8ECFB",
   "#D9CCE3",
@@ -109,56 +112,43 @@ var discreteRainbow = [
 // src/theme/tokens/semantic.ts
 var semanticColorsLight = {
   // Brand colors (brand-*)
-  "brand-primary": primitiveColors.accent[400],
-  // #FF7900
-  "brand-primary-light": primitiveColors.accent[200],
-  // #FF9630
-  "brand-primary-dark": primitiveColors.accent[700],
-  // #D0620C
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
-  "brand-primary-hover": primitiveColors.accent[500],
-  "brand-primary-active": primitiveColors.accent[600],
-  "brand-secondary": primitiveColors.steel[500],
-  // #406D87
-  "brand-secondary-light": primitiveColors.steel[300],
-  // #678498
-  "brand-secondary-dark": primitiveColors.steel[700],
-  // #32556D
-  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
-  "brand-secondary-hover": primitiveColors.steel[600],
-  "brand-secondary-active": primitiveColors.steel[700],
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
   // Text on brand backgrounds (on-*)
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
   // Status colors (status-*)
-  "status-success": primitiveColors.teal[500],
-  // #14B8A6
-  "status-success-light": primitiveColors.teal[400],
-  // #43C6B7
-  "status-success-dark": primitiveColors.teal[700],
-  // #0E8074
-  "status-success-subtle": primitiveColors.teal[50],
-  "status-error": primitiveColors.red[600],
-  // #D14343
-  "status-error-light": primitiveColors.red[400],
-  // #DA6868
-  "status-error-dark": primitiveColors.red[700],
-  // #922E2E
-  "status-error-subtle": primitiveColors.red[50],
-  "status-warning": primitiveColors.amber[500],
-  // #FFB020
-  "status-warning-light": primitiveColors.amber[400],
-  // #FFBF4C
-  "status-warning-dark": primitiveColors.amber[600],
-  // #B27B16
-  "status-warning-subtle": primitiveColors.amber[50],
-  "status-info": primitiveColors.sky[500],
-  // #2196F3
-  "status-info-light": primitiveColors.sky[400],
-  // #64B6F7
-  "status-info-dark": primitiveColors.sky[700],
-  // #0B79D0
-  "status-info-subtle": primitiveColors.sky[50],
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -185,25 +175,25 @@ var semanticColorsLight = {
   // Data visualization colors (data-*)
   // First 10 colors from discrete rainbow optimized for charts
   "data-1": discreteRainbow[9],
-  // #1965B0 - Blue
+  // Blue
   "data-2": discreteRainbow[14],
-  // #4EB265 - Green
+  // Green
   "data-3": discreteRainbow[17],
-  // #F7F056 - Yellow
+  // Yellow
   "data-4": discreteRainbow[25],
-  // #DC050C - Red
+  // Red
   "data-5": discreteRainbow[8],
-  // #882E72 - Purple
+  // Purple
   "data-6": discreteRainbow[20],
-  // #F4A736 - Orange
+  // Orange
   "data-7": discreteRainbow[13],
-  // #7BAFDE - Light Blue
+  // Light Blue
   "data-8": discreteRainbow[15],
-  // #90C987 - Light Green
+  // Light Green
   "data-9": discreteRainbow[3],
-  // #CAACCB - Lavender
+  // Lavender
   "data-10": discreteRainbow[22],
-  // #EE8026 - Dark Orange
+  // Dark Orange
   // Text colors (text-*)
   "text-primary": "#121828",
   "text-secondary": "#65748B",
@@ -215,9 +205,9 @@ var semanticColorsLight = {
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
   "surface-elevated": primitiveColors.neutral[50],
-  // #FAFAFA - slightly off-white for elevated cards
+  // slightly off-white for elevated cards
   "surface-raised": primitiveColors.neutral[100],
-  // #F3F4F6 - light gray for raised cards
+  // light gray for raised cards
   "surface-overlay": primitiveColors.white,
   "surface-input": primitiveColors.neutral[50],
   // Input field background (filled variant)
@@ -229,6 +219,8 @@ var semanticColorsLight = {
   "border-default": "#E8E9EB",
   "border-subtle": primitiveColors.neutral[100],
   "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
   "border-focus": primitiveColors.blue[600],
   "border-input": primitiveColors.neutral[300],
   // Input field border
@@ -253,37 +245,41 @@ var semanticColorsLight = {
 };
 var semanticColorsDark = {
   // Brand colors stay the same in dark mode
-  "brand-primary": primitiveColors.accent[400],
-  "brand-primary-light": primitiveColors.accent[200],
-  "brand-primary-dark": primitiveColors.accent[700],
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
-  "brand-primary-hover": primitiveColors.accent[300],
-  "brand-primary-active": primitiveColors.accent[200],
-  "brand-secondary": primitiveColors.steel[500],
-  "brand-secondary-light": primitiveColors.steel[300],
-  "brand-secondary-dark": primitiveColors.steel[700],
-  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
-  "brand-secondary-hover": primitiveColors.steel[400],
-  "brand-secondary-active": primitiveColors.steel[300],
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
   // Text on brand backgrounds
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
   // Status colors
-  "status-success": primitiveColors.teal[500],
-  "status-success-light": primitiveColors.teal[400],
-  "status-success-dark": primitiveColors.teal[700],
-  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
-  "status-error": primitiveColors.red[600],
-  "status-error-light": primitiveColors.red[400],
-  "status-error-dark": primitiveColors.red[700],
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-warning": primitiveColors.amber[500],
-  "status-warning-light": primitiveColors.amber[400],
-  "status-warning-dark": primitiveColors.amber[600],
-  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
-  "status-info": primitiveColors.sky[500],
-  "status-info-light": primitiveColors.sky[400],
-  "status-info-dark": primitiveColors.sky[700],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": "rgba(33, 150, 243, 0.12)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
@@ -325,29 +321,31 @@ var semanticColorsDark = {
   "text-link-hover": primitiveColors.blue[400],
   // Surface colors - dark backgrounds
   "surface-base": primitiveColors.charcoal[700],
-  // #161616 - main surface
+  // main surface
   "surface-elevated": primitiveColors.charcoal[600],
-  // #191919 - elevated surface
+  // elevated surface
   "surface-raised": primitiveColors.charcoal[500],
-  // #1C1C1C - raised surface
+  // raised surface
   "surface-overlay": primitiveColors.charcoal[600],
-  // #191919 - overlay surface
+  // overlay surface
   "surface-input": primitiveColors.charcoal[600],
-  // #191919 - input surface
+  // input surface
   // Background colors
   "background-base": primitiveColors.charcoal[900],
-  // #101010 - darkest charcoal
+  // darkest charcoal
   "background-default": primitiveColors.charcoal[700],
-  // #161616 - main background
+  // main background
   "background-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle background
+  // subtle background
   // Border colors
   "border-default": primitiveColors.charcoal[400],
-  // #1F1F1F - default border
+  // default border
   "border-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle border
+  // subtle border
   "border-strong": primitiveColors.charcoal[300],
-  // #2C2C2C - strong border
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
   "border-focus": "#828DF8",
   "border-input": primitiveColors.neutral[600],
   "border-input-hover": primitiveColors.neutral[500],
@@ -362,7 +360,7 @@ var semanticColorsDark = {
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
   "divider": primitiveColors.charcoal[400],
-  // #1F1F1F - divider color
+  // divider color
   // Avatar default
   "avatar-background": primitiveColors.neutral[600],
   "avatar-text": primitiveColors.white
@@ -372,10 +370,11 @@ var semanticColorsDark = {
 var themeIndependentCSSVars = {
   // RGB decomposed values for glow shadows
   "--color-brand-primary-rgb": "255, 121, 0",
-  "--color-brand-secondary-rgb": "64, 109, 135",
-  "--color-status-success-rgb": "20, 184, 166",
+  "--color-brand-secondary-rgb": "48, 123, 155",
+  "--color-status-success-rgb": "46, 213, 115",
   "--color-status-error-rgb": "209, 67, 67",
-  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-error-vivid-rgb": "255, 71, 87",
+  "--color-status-warning-rgb": "249, 180, 21",
   "--color-status-info-rgb": "33, 150, 243",
   "--color-background-base-rgb": "16, 16, 16",
   // Font families
@@ -410,6 +409,10 @@ var lightThemeCSSVars = {
   "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
   "--color-status-info": semanticColorsLight["status-info"],
   "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
+  "--color-status-error-vivid": semanticColorsLight["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsLight["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsLight["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsLight["status-error-vivid-subtle"],
   "--color-text-primary": semanticColorsLight["text-primary"],
   "--color-text-secondary": semanticColorsLight["text-secondary"],
   "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -425,6 +428,7 @@ var lightThemeCSSVars = {
   "--color-border-default": semanticColorsLight["border-default"],
   "--color-border-subtle": semanticColorsLight["border-subtle"],
   "--color-border-strong": semanticColorsLight["border-strong"],
+  "--color-border-prominent": semanticColorsLight["border-prominent"],
   "--color-border-focus": semanticColorsLight["border-focus"],
   "--color-interactive-hover": semanticColorsLight["interactive-hover"],
   "--color-interactive-focus": semanticColorsLight["interactive-focus"],
@@ -501,6 +505,10 @@ var darkThemeCSSVars = {
   "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
   "--color-status-info": semanticColorsDark["status-info"],
   "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
+  "--color-status-error-vivid": semanticColorsDark["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsDark["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsDark["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsDark["status-error-vivid-subtle"],
   "--color-text-primary": semanticColorsDark["text-primary"],
   "--color-text-secondary": semanticColorsDark["text-secondary"],
   "--color-text-tertiary": semanticColorsDark["text-tertiary"],
@@ -516,6 +524,7 @@ var darkThemeCSSVars = {
   "--color-border-default": semanticColorsDark["border-default"],
   "--color-border-subtle": semanticColorsDark["border-subtle"],
   "--color-border-strong": semanticColorsDark["border-strong"],
+  "--color-border-prominent": semanticColorsDark["border-prominent"],
   "--color-border-focus": semanticColorsDark["border-focus"],
   "--color-interactive-hover": semanticColorsDark["interactive-hover"],
   "--color-interactive-focus": semanticColorsDark["interactive-focus"],