@titan-design/react-ui 0.12.0 → 0.13.0

package/dist/theme/tokens-css.mjs

@@ -1,6 +1,7 @@
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
   white: "#FFFFFF"};
+var alertRedVivid = "#FF4757";
 var greyRamp = {
   50: "#F9F6F3",
   //  L*97.0  W6
@@ -110,12 +111,16 @@ var semanticColorsLight = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "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-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "brand-secondary-hover": primitiveRamps.cyan[700],
   "brand-secondary-active": primitiveRamps.cyan[800],
   // Text on brand backgrounds (on-*)
@@ -126,6 +131,8 @@ var semanticColorsLight = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.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],
@@ -133,19 +140,27 @@ var semanticColorsLight = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveRamps.red[600],
-  // vivid alert red
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
+  // NOT red[600], that is status-error
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
   "status-warning-dark": primitiveRamps.amber[500],
   "status-warning-subtle": primitiveRamps.amber[50],
+  "status-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "status-info": primitiveRamps.blue[500],
   "status-info-light": primitiveRamps.blue[300],
   "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": primitiveRamps.blue[50],
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -240,7 +255,7 @@ var semanticColorsLight = {
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
   "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  "divider": "#E8E9EB",
+  divider: "#E8E9EB",
   // Avatar default
   "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
@@ -251,12 +266,16 @@ var semanticColorsDark = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "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-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "brand-secondary-hover": primitiveRamps.cyan[500],
   "brand-secondary-active": primitiveRamps.cyan[400],
   // Text on brand backgrounds
@@ -267,6 +286,8 @@ var semanticColorsDark = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.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],
@@ -274,18 +295,26 @@ var semanticColorsDark = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-error-vivid": primitiveRamps.red[600],
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "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-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "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)",
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -425,7 +454,7 @@ var semanticColorsDark = {
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": "rgba(255, 255, 255, 0.09)",
+  divider: "rgba(255, 255, 255, 0.09)",
   // Avatar default
   "avatar-background": greyRamp[700],
   "avatar-text": primitiveColors.white
@@ -460,26 +489,40 @@ var lightThemeCSSVars = {
   "--color-brand-primary-light": semanticColorsLight["brand-primary-light"],
   "--color-brand-primary-dark": semanticColorsLight["brand-primary-dark"],
   "--color-brand-primary-subtle": semanticColorsLight["brand-primary-subtle"],
+  "--color-brand-primary-muted": semanticColorsLight["brand-primary-muted"],
+  "--color-brand-primary-strong": semanticColorsLight["brand-primary-strong"],
   "--color-brand-secondary": semanticColorsLight["brand-secondary"],
   "--color-brand-secondary-light": semanticColorsLight["brand-secondary-light"],
   "--color-brand-secondary-dark": semanticColorsLight["brand-secondary-dark"],
   "--color-brand-secondary-subtle": semanticColorsLight["brand-secondary-subtle"],
+  "--color-brand-secondary-muted": semanticColorsLight["brand-secondary-muted"],
+  "--color-brand-secondary-strong": semanticColorsLight["brand-secondary-strong"],
   "--color-on-brand-primary": semanticColorsLight["on-brand-primary"],
   "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
   "--color-status-success": semanticColorsLight["status-success"],
   "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-success-muted": semanticColorsLight["status-success-muted"],
+  "--color-status-success-strong": semanticColorsLight["status-success-strong"],
   "--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-error-muted": semanticColorsLight["status-error-muted"],
+  "--color-status-error-strong": semanticColorsLight["status-error-strong"],
   "--color-status-warning": semanticColorsLight["status-warning"],
   "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
+  "--color-status-warning-muted": semanticColorsLight["status-warning-muted"],
+  "--color-status-warning-strong": semanticColorsLight["status-warning-strong"],
   "--color-status-info": semanticColorsLight["status-info"],
   "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
+  "--color-status-info-muted": semanticColorsLight["status-info-muted"],
+  "--color-status-info-strong": semanticColorsLight["status-info-strong"],
   "--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-status-error-vivid-muted": semanticColorsLight["status-error-vivid-muted"],
+  "--color-status-error-vivid-strong": semanticColorsLight["status-error-vivid-strong"],
   "--color-text-primary": semanticColorsLight["text-primary"],
   "--color-text-secondary": semanticColorsLight["text-secondary"],
   "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -559,26 +602,40 @@ var darkThemeCSSVars = {
   "--color-brand-primary-light": semanticColorsDark["brand-primary-light"],
   "--color-brand-primary-dark": semanticColorsDark["brand-primary-dark"],
   "--color-brand-primary-subtle": semanticColorsDark["brand-primary-subtle"],
+  "--color-brand-primary-muted": semanticColorsDark["brand-primary-muted"],
+  "--color-brand-primary-strong": semanticColorsDark["brand-primary-strong"],
   "--color-brand-secondary": semanticColorsDark["brand-secondary"],
   "--color-brand-secondary-light": semanticColorsDark["brand-secondary-light"],
   "--color-brand-secondary-dark": semanticColorsDark["brand-secondary-dark"],
   "--color-brand-secondary-subtle": semanticColorsDark["brand-secondary-subtle"],
+  "--color-brand-secondary-muted": semanticColorsDark["brand-secondary-muted"],
+  "--color-brand-secondary-strong": semanticColorsDark["brand-secondary-strong"],
   "--color-on-brand-primary": semanticColorsDark["on-brand-primary"],
   "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
   "--color-status-success": semanticColorsDark["status-success"],
   "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-success-muted": semanticColorsDark["status-success-muted"],
+  "--color-status-success-strong": semanticColorsDark["status-success-strong"],
   "--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-error-muted": semanticColorsDark["status-error-muted"],
+  "--color-status-error-strong": semanticColorsDark["status-error-strong"],
   "--color-status-warning": semanticColorsDark["status-warning"],
   "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
+  "--color-status-warning-muted": semanticColorsDark["status-warning-muted"],
+  "--color-status-warning-strong": semanticColorsDark["status-warning-strong"],
   "--color-status-info": semanticColorsDark["status-info"],
   "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
+  "--color-status-info-muted": semanticColorsDark["status-info-muted"],
+  "--color-status-info-strong": semanticColorsDark["status-info-strong"],
   "--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-status-error-vivid-muted": semanticColorsDark["status-error-vivid-muted"],
+  "--color-status-error-vivid-strong": semanticColorsDark["status-error-vivid-strong"],
   "--color-text-primary": semanticColorsDark["text-primary"],
   "--color-text-secondary": semanticColorsDark["text-secondary"],
   "--color-text-tertiary": semanticColorsDark["text-tertiary"],