@titan-design/react-ui 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/dist/bodymap.js +232 -185
  2. package/dist/bodymap.js.map +1 -1
  3. package/dist/bodymap.mjs +232 -185
  4. package/dist/bodymap.mjs.map +1 -1
  5. package/dist/index.d.mts +164 -8
  6. package/dist/index.d.ts +164 -8
  7. package/dist/index.js +835 -342
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +816 -343
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/pages.js +570 -522
  12. package/dist/pages.js.map +1 -1
  13. package/dist/pages.mjs +570 -522
  14. package/dist/pages.mjs.map +1 -1
  15. package/dist/theme/index.d.mts +461 -199
  16. package/dist/theme/index.d.ts +461 -199
  17. package/dist/theme/index.js +311 -97
  18. package/dist/theme/index.js.map +1 -1
  19. package/dist/theme/index.mjs +303 -98
  20. package/dist/theme/index.mjs.map +1 -1
  21. package/dist/theme/tokens-css.js +148 -139
  22. package/dist/theme/tokens-css.js.map +1 -1
  23. package/dist/theme/tokens-css.mjs +148 -139
  24. package/dist/theme/tokens-css.mjs.map +1 -1
  25. package/package.json +3 -1
  26. package/src/components/custom/DateTime/DateTime.stories.tsx +82 -6
  27. package/src/components/custom/DateTime/DateTime.test.tsx +29 -3
  28. package/src/components/custom/DateTime/DateTime.tsx +55 -15
  29. package/src/components/custom/Gauge/Gauge.test.tsx +2 -2
  30. package/src/components/custom/Gauge/Gauge.tsx +6 -3
  31. package/src/components/custom/Scatter/Scatter.tsx +3 -5
  32. package/src/components/custom/Treemap/Treemap.tsx +3 -5
  33. package/src/components/custom/Typography/Typography.stories.tsx +45 -27
  34. package/src/components/custom/Typography/Typography.test.tsx +13 -3
  35. package/src/components/custom/Typography/Typography.tsx +5 -0
  36. package/src/components/custom/Workout/ActiveWorkoutPage.tsx +2 -1
  37. package/src/components/custom/Workout/BodyMap.tsx +6 -3
  38. package/src/components/custom/Workout/BodyMapDetailPanel.tsx +6 -3
  39. package/src/components/custom/Workout/CapacityBandChart.test.tsx +2 -2
  40. package/src/components/custom/Workout/CapacityBandChart.tsx +9 -6
  41. package/src/components/custom/Workout/DeviationBar.test.tsx +1 -1
  42. package/src/components/custom/Workout/DeviationBar.tsx +7 -4
  43. package/src/components/custom/Workout/ExerciseDetailPage.tsx +2 -1
  44. package/src/components/custom/Workout/InputBar.tsx +2 -1
  45. package/src/components/custom/Workout/IntensityBar.test.tsx +8 -8
  46. package/src/components/custom/Workout/IntensityBar.tsx +10 -6
  47. package/src/components/custom/Workout/MesoCard.tsx +8 -3
  48. package/src/components/custom/Workout/MesoProgressBar.test.tsx +1 -1
  49. package/src/components/custom/Workout/MesoProgressBar.tsx +3 -2
  50. package/src/components/custom/Workout/MesoStatusCard.tsx +20 -13
  51. package/src/components/custom/Workout/MuscleGroupChip.tsx +7 -4
  52. package/src/components/custom/Workout/PrBadge.tsx +5 -2
  53. package/src/components/custom/Workout/PrHistoryModal.tsx +4 -3
  54. package/src/components/custom/Workout/ProgramPlanningPage.tsx +2 -1
  55. package/src/components/custom/Workout/ReadinessCheck.tsx +7 -4
  56. package/src/components/custom/Workout/RestTimer.tsx +2 -1
  57. package/src/components/custom/Workout/SetRow.tsx +2 -1
  58. package/src/components/custom/Workout/Sparkline.tsx +2 -1
  59. package/src/components/custom/Workout/StatusDot.test.tsx +2 -2
  60. package/src/components/custom/Workout/StatusDot.tsx +12 -9
  61. package/src/components/custom/Workout/StrengthTrendChart.tsx +9 -6
  62. package/src/components/custom/Workout/SupersetWrapper.tsx +2 -1
  63. package/src/components/custom/Workout/TempoDisplay.tsx +6 -3
  64. package/src/components/custom/Workout/VelocityStrip.test.tsx +3 -3
  65. package/src/components/custom/Workout/WeekRow.tsx +3 -2
  66. package/src/components/custom/Workout/WeightBadge.tsx +6 -2
  67. package/src/components/custom/Workout/WorkoutCard.tsx +5 -2
  68. package/src/components/custom/Workout/WorkoutPill.tsx +12 -8
  69. package/src/components/custom/Workout/icons.tsx +6 -67
  70. package/src/components/icons/SvgIcon.tsx +50 -0
  71. package/src/components/icons/icons.stories.tsx +57 -0
  72. package/src/components/icons/icons.test.tsx +43 -0
  73. package/src/components/icons/icons.tsx +45 -0
  74. package/src/components/icons/index.ts +4 -0
  75. package/src/components/index.ts +6 -0
  76. package/src/components/shell/BrandLockup.stories.tsx +27 -0
  77. package/src/components/shell/BrandLockup.test.tsx +23 -0
  78. package/src/components/shell/BrandLockup.tsx +47 -0
  79. package/src/components/shell/DeviceIndicator.stories.tsx +28 -0
  80. package/src/components/shell/DeviceIndicator.test.tsx +26 -0
  81. package/src/components/shell/DeviceIndicator.tsx +52 -0
  82. package/src/components/shell/DeviceMenu.stories.tsx +47 -0
  83. package/src/components/shell/DeviceMenu.test.tsx +40 -0
  84. package/src/components/shell/DeviceMenu.tsx +65 -0
  85. package/src/components/shell/DeviceRow.stories.tsx +38 -0
  86. package/src/components/shell/DeviceRow.test.tsx +37 -0
  87. package/src/components/shell/DeviceRow.tsx +58 -0
  88. package/src/components/shell/README.md +86 -0
  89. package/src/components/shell/SessionStatePill.stories.tsx +27 -0
  90. package/src/components/shell/SessionStatePill.test.tsx +25 -0
  91. package/src/components/shell/SessionStatePill.tsx +46 -0
  92. package/src/components/shell/TopBar.stories.tsx +49 -0
  93. package/src/components/shell/TopBar.test.tsx +36 -0
  94. package/src/components/shell/TopBar.tsx +89 -0
  95. package/src/components/shell/index.ts +8 -0
  96. package/src/components/ui/indicator/Indicator.stories.tsx +37 -1
  97. package/src/components/ui/indicator/Indicator.test.tsx +19 -1
  98. package/src/components/ui/indicator/Indicator.tsx +45 -6
  99. package/src/components/ui/indicator/index.ts +1 -1
  100. package/src/components/ui/spinner/Spinner.tsx +3 -2
  101. package/src/components/ui/toolbar-button/ToolbarButton.tsx +2 -1
  102. package/src/theme/ColorSystem.stories.tsx +323 -0
  103. package/src/theme/Colors.stories.tsx +69 -1
  104. package/src/theme/barrel.ts +1 -0
  105. package/src/theme/config.ts +16 -3
  106. package/src/theme/extracted-colors-dataviz.ts +21 -0
  107. package/src/theme/extracted-colors-ui.ts +20 -0
  108. package/src/theme/global.css +64 -52
  109. package/src/theme/gradients.test.ts +25 -0
  110. package/src/theme/gradients.ts +36 -0
  111. package/src/theme/tokens/primitives.test.ts +232 -0
  112. package/src/theme/tokens/primitives.ts +247 -0
  113. package/src/theme/tokens/semantic.ts +93 -81
  114. package/src/theme/workout-tokens.ts +22 -21
  115. package/src/utils/avatar-color.ts +3 -3
  116. package/tailwind.config.js +10 -3
@@ -67,6 +67,38 @@ var primitiveColors = {
67
67
  800: "#991B1B",
68
68
  900: "#7F1D1D"
69
69
  },
70
+ // Vivid green scale (live/go success)
71
+ greenVivid: {
72
+ 50: "#E9FBF0",
73
+ 100: "#C8F7DA",
74
+ 200: "#9FF0BF",
75
+ 300: "#6BE79D",
76
+ 400: "#47DE84",
77
+ // Success vivid light
78
+ 500: "#2ED573",
79
+ // Success vivid main
80
+ 600: "#22B85F",
81
+ 700: "#1A9950",
82
+ // Success vivid dark
83
+ 800: "#157A40",
84
+ 900: "#105C30"
85
+ },
86
+ // Vivid red scale (alert)
87
+ redVivid: {
88
+ 50: "#FFECEE",
89
+ 100: "#FFD6DB",
90
+ 200: "#FFB3BC",
91
+ 300: "#FF8593",
92
+ 400: "#FF6070",
93
+ // Error vivid light
94
+ 500: "#FF4757",
95
+ // Error vivid main
96
+ 600: "#E63548",
97
+ 700: "#C42539",
98
+ // Error vivid dark
99
+ 800: "#9E1C2C",
100
+ 900: "#7A1520"
101
+ },
70
102
  // Amber scale (warning)
71
103
  amber: {
72
104
  50: "#FFFBEB",
@@ -156,6 +188,162 @@ var primitiveColors = {
156
188
  black: "#000000",
157
189
  transparent: "transparent"
158
190
  };
191
+ var primitiveRamps = {
192
+ red: {
193
+ 50: "#FFF4F4",
194
+ 100: "#FFE3E5",
195
+ 200: "#FFC2C5",
196
+ 300: "#FF9A9D",
197
+ 400: "#F77175",
198
+ 500: "#E05254",
199
+ 600: "#D14343",
200
+ // pin
201
+ 700: "#A4221C",
202
+ 800: "#7E1002",
203
+ 900: "#5A0900",
204
+ 950: "#3D0400"
205
+ },
206
+ orange: {
207
+ 50: "#FFF5ED",
208
+ 100: "#FFE6D4",
209
+ 200: "#FFC7A2",
210
+ 300: "#FFA063",
211
+ 400: "#FF7900",
212
+ // pin
213
+ 500: "#DA5F00",
214
+ 600: "#B94A00",
215
+ 700: "#983804",
216
+ 800: "#6F290F",
217
+ 900: "#4E1C0C",
218
+ 950: "#331107"
219
+ },
220
+ amber: {
221
+ 50: "#FFF7DD",
222
+ 100: "#FFEAA9",
223
+ 200: "#FFD352",
224
+ 300: "#F9B415",
225
+ // pin
226
+ 400: "#E08C00",
227
+ 500: "#C27400",
228
+ 600: "#A45E00",
229
+ 700: "#814D14",
230
+ 800: "#5B3A1A",
231
+ 900: "#442503",
232
+ 950: "#301500"
233
+ },
234
+ green: {
235
+ 50: "#E3FFEE",
236
+ 100: "#B5FFD2",
237
+ 200: "#58F69E",
238
+ 300: "#2ED573",
239
+ // pin
240
+ 400: "#21C05D",
241
+ 500: "#22A444",
242
+ 600: "#298732",
243
+ 700: "#2B6B25",
244
+ 800: "#264D1C",
245
+ 900: "#1B3515",
246
+ 950: "#11220D"
247
+ },
248
+ cyan: {
249
+ 50: "#E6FBFF",
250
+ 100: "#C2F6FF",
251
+ 200: "#62EAFF",
252
+ 300: "#22D3EE",
253
+ // pin
254
+ 400: "#01B5D1",
255
+ 500: "#2697B7",
256
+ 600: "#307B9B",
257
+ 700: "#2A617F",
258
+ 800: "#22465F",
259
+ 900: "#0B3149",
260
+ 950: "#001F36"
261
+ },
262
+ blue: {
263
+ 50: "#EFF8FF",
264
+ 100: "#D9EFFF",
265
+ 200: "#ACDBFF",
266
+ 300: "#78C2FF",
267
+ 400: "#3CA8FF",
268
+ 500: "#2196F3",
269
+ // pin
270
+ 600: "#1072CB",
271
+ 700: "#135AA8",
272
+ 800: "#14407E",
273
+ 900: "#112C5A",
274
+ 950: "#091B3C"
275
+ },
276
+ magenta: {
277
+ 50: "#FFF3F9",
278
+ 100: "#FFE2F1",
279
+ 200: "#FFBDE2",
280
+ 300: "#FF8FD5",
281
+ 400: "#ED69C3",
282
+ 500: "#D548AF",
283
+ 600: "#BA2996",
284
+ 700: "#9C0D7A",
285
+ // pin
286
+ 800: "#77005A",
287
+ 900: "#56003F",
288
+ 950: "#3B0029"
289
+ }
290
+ };
291
+ var categoricalPalette = {
292
+ default: [
293
+ primitiveRamps.blue[500],
294
+ primitiveRamps.magenta[500],
295
+ primitiveRamps.red[500],
296
+ primitiveRamps.orange[400],
297
+ primitiveRamps.green[300],
298
+ primitiveRamps.cyan[300],
299
+ primitiveRamps.amber[600]
300
+ // extended (7th) — pair with a legend
301
+ ],
302
+ dark: [
303
+ primitiveRamps.blue[600],
304
+ primitiveRamps.magenta[600],
305
+ primitiveRamps.red[500],
306
+ primitiveRamps.orange[600],
307
+ primitiveRamps.green[800],
308
+ primitiveRamps.cyan[800],
309
+ primitiveRamps.amber[500]
310
+ // extended (7th) — pair with a legend
311
+ ]
312
+ };
313
+ var CATEGORICAL_CVD_SAFE_MAX = 6;
314
+ function getCategoricalColor(index, variant = "default") {
315
+ const palette = categoricalPalette[variant];
316
+ index = Math.max(0, Math.floor(index));
317
+ return palette[index % palette.length];
318
+ }
319
+ var divergingScale = [
320
+ primitiveRamps.blue[500],
321
+ // under
322
+ primitiveRamps.cyan[300],
323
+ // maintenance
324
+ primitiveRamps.green[200],
325
+ // optimal (light center)
326
+ primitiveRamps.amber[300],
327
+ // approaching
328
+ primitiveRamps.red[600]
329
+ // over
330
+ ];
331
+ var sequentialEffort = [
332
+ primitiveRamps.green[300],
333
+ primitiveRamps.amber[200],
334
+ primitiveRamps.amber[300],
335
+ primitiveRamps.orange[400],
336
+ primitiveRamps.red[600],
337
+ primitiveRamps.red[700]
338
+ ];
339
+ function bestTextColor(hex) {
340
+ const [r, g, b] = [0, 2, 4].map((i) => {
341
+ const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
342
+ return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
343
+ });
344
+ const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
345
+ return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
346
+ }
159
347
  var discreteRainbow = [
160
348
  "#E8ECFB",
161
349
  "#D9CCE3",
@@ -365,56 +553,43 @@ var primitiveZIndex = {
365
553
  // src/theme/tokens/semantic.ts
366
554
  var semanticColorsLight = {
367
555
  // Brand colors (brand-*)
368
- "brand-primary": primitiveColors.accent[400],
369
- // #FF7900
370
- "brand-primary-light": primitiveColors.accent[200],
371
- // #FF9630
372
- "brand-primary-dark": primitiveColors.accent[700],
373
- // #D0620C
556
+ "brand-primary": primitiveRamps.orange[400],
557
+ "brand-primary-light": primitiveRamps.orange[300],
558
+ "brand-primary-dark": primitiveRamps.orange[500],
374
559
  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
375
- "brand-primary-hover": primitiveColors.accent[500],
376
- "brand-primary-active": primitiveColors.accent[600],
377
- "brand-secondary": primitiveColors.steel[500],
378
- // #406D87
379
- "brand-secondary-light": primitiveColors.steel[300],
380
- // #678498
381
- "brand-secondary-dark": primitiveColors.steel[700],
382
- // #32556D
383
- "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
384
- "brand-secondary-hover": primitiveColors.steel[600],
385
- "brand-secondary-active": primitiveColors.steel[700],
560
+ "brand-primary-hover": primitiveRamps.orange[500],
561
+ "brand-primary-active": primitiveRamps.orange[600],
562
+ "brand-secondary": primitiveRamps.cyan[600],
563
+ "brand-secondary-light": primitiveRamps.cyan[500],
564
+ "brand-secondary-dark": primitiveRamps.cyan[700],
565
+ "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
566
+ "brand-secondary-hover": primitiveRamps.cyan[700],
567
+ "brand-secondary-active": primitiveRamps.cyan[800],
386
568
  // Text on brand backgrounds (on-*)
387
569
  "on-brand-primary": primitiveColors.white,
388
570
  "on-brand-secondary": primitiveColors.white,
389
571
  // Status colors (status-*)
390
- "status-success": primitiveColors.teal[500],
391
- // #14B8A6
392
- "status-success-light": primitiveColors.teal[400],
393
- // #43C6B7
394
- "status-success-dark": primitiveColors.teal[700],
395
- // #0E8074
396
- "status-success-subtle": primitiveColors.teal[50],
397
- "status-error": primitiveColors.red[600],
398
- // #D14343
399
- "status-error-light": primitiveColors.red[400],
400
- // #DA6868
401
- "status-error-dark": primitiveColors.red[700],
402
- // #922E2E
403
- "status-error-subtle": primitiveColors.red[50],
404
- "status-warning": primitiveColors.amber[500],
405
- // #FFB020
406
- "status-warning-light": primitiveColors.amber[400],
407
- // #FFBF4C
408
- "status-warning-dark": primitiveColors.amber[600],
409
- // #B27B16
410
- "status-warning-subtle": primitiveColors.amber[50],
411
- "status-info": primitiveColors.sky[500],
412
- // #2196F3
413
- "status-info-light": primitiveColors.sky[400],
414
- // #64B6F7
415
- "status-info-dark": primitiveColors.sky[700],
416
- // #0B79D0
417
- "status-info-subtle": primitiveColors.sky[50],
572
+ "status-success": primitiveRamps.green[300],
573
+ "status-success-light": primitiveRamps.green[200],
574
+ "status-success-dark": primitiveRamps.green[600],
575
+ "status-success-subtle": primitiveRamps.green[50],
576
+ "status-error": primitiveRamps.red[600],
577
+ "status-error-light": primitiveRamps.red[500],
578
+ "status-error-dark": primitiveRamps.red[700],
579
+ "status-error-subtle": primitiveRamps.red[50],
580
+ "status-error-vivid": primitiveColors.redVivid[500],
581
+ // vivid alert red
582
+ "status-error-vivid-light": primitiveColors.redVivid[400],
583
+ "status-error-vivid-dark": primitiveColors.redVivid[700],
584
+ "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
585
+ "status-warning": primitiveRamps.amber[300],
586
+ "status-warning-light": primitiveRamps.amber[200],
587
+ "status-warning-dark": primitiveRamps.amber[500],
588
+ "status-warning-subtle": primitiveRamps.amber[50],
589
+ "status-info": primitiveRamps.blue[500],
590
+ "status-info-light": primitiveRamps.blue[300],
591
+ "status-info-dark": primitiveRamps.blue[600],
592
+ "status-info-subtle": primitiveRamps.blue[50],
418
593
  // Text on status backgrounds (on-status-*)
419
594
  "on-status-success": primitiveColors.white,
420
595
  "on-status-error": primitiveColors.white,
@@ -441,25 +616,25 @@ var semanticColorsLight = {
441
616
  // Data visualization colors (data-*)
442
617
  // First 10 colors from discrete rainbow optimized for charts
443
618
  "data-1": discreteRainbow[9],
444
- // #1965B0 - Blue
619
+ // Blue
445
620
  "data-2": discreteRainbow[14],
446
- // #4EB265 - Green
621
+ // Green
447
622
  "data-3": discreteRainbow[17],
448
- // #F7F056 - Yellow
623
+ // Yellow
449
624
  "data-4": discreteRainbow[25],
450
- // #DC050C - Red
625
+ // Red
451
626
  "data-5": discreteRainbow[8],
452
- // #882E72 - Purple
627
+ // Purple
453
628
  "data-6": discreteRainbow[20],
454
- // #F4A736 - Orange
629
+ // Orange
455
630
  "data-7": discreteRainbow[13],
456
- // #7BAFDE - Light Blue
631
+ // Light Blue
457
632
  "data-8": discreteRainbow[15],
458
- // #90C987 - Light Green
633
+ // Light Green
459
634
  "data-9": discreteRainbow[3],
460
- // #CAACCB - Lavender
635
+ // Lavender
461
636
  "data-10": discreteRainbow[22],
462
- // #EE8026 - Dark Orange
637
+ // Dark Orange
463
638
  // Text colors (text-*)
464
639
  "text-primary": "#121828",
465
640
  "text-secondary": "#65748B",
@@ -471,9 +646,9 @@ var semanticColorsLight = {
471
646
  // Surface colors (surface-*) - for elevated containers
472
647
  "surface-base": primitiveColors.white,
473
648
  "surface-elevated": primitiveColors.neutral[50],
474
- // #FAFAFA - slightly off-white for elevated cards
649
+ // slightly off-white for elevated cards
475
650
  "surface-raised": primitiveColors.neutral[100],
476
- // #F3F4F6 - light gray for raised cards
651
+ // light gray for raised cards
477
652
  "surface-overlay": primitiveColors.white,
478
653
  "surface-input": primitiveColors.neutral[50],
479
654
  // Input field background (filled variant)
@@ -485,6 +660,8 @@ var semanticColorsLight = {
485
660
  "border-default": "#E8E9EB",
486
661
  "border-subtle": primitiveColors.neutral[100],
487
662
  "border-strong": primitiveColors.neutral[300],
663
+ "border-prominent": primitiveColors.neutral[400],
664
+ // high-visibility divider
488
665
  "border-focus": primitiveColors.blue[600],
489
666
  "border-input": primitiveColors.neutral[300],
490
667
  // Input field border
@@ -509,37 +686,41 @@ var semanticColorsLight = {
509
686
  };
510
687
  var semanticColorsDark = {
511
688
  // Brand colors stay the same in dark mode
512
- "brand-primary": primitiveColors.accent[400],
513
- "brand-primary-light": primitiveColors.accent[200],
514
- "brand-primary-dark": primitiveColors.accent[700],
689
+ "brand-primary": primitiveRamps.orange[400],
690
+ "brand-primary-light": primitiveRamps.orange[300],
691
+ "brand-primary-dark": primitiveRamps.orange[500],
515
692
  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
516
- "brand-primary-hover": primitiveColors.accent[300],
517
- "brand-primary-active": primitiveColors.accent[200],
518
- "brand-secondary": primitiveColors.steel[500],
519
- "brand-secondary-light": primitiveColors.steel[300],
520
- "brand-secondary-dark": primitiveColors.steel[700],
521
- "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
522
- "brand-secondary-hover": primitiveColors.steel[400],
523
- "brand-secondary-active": primitiveColors.steel[300],
693
+ "brand-primary-hover": primitiveRamps.orange[300],
694
+ "brand-primary-active": primitiveRamps.orange[200],
695
+ "brand-secondary": primitiveRamps.cyan[600],
696
+ "brand-secondary-light": primitiveRamps.cyan[500],
697
+ "brand-secondary-dark": primitiveRamps.cyan[700],
698
+ "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
699
+ "brand-secondary-hover": primitiveRamps.cyan[500],
700
+ "brand-secondary-active": primitiveRamps.cyan[400],
524
701
  // Text on brand backgrounds
525
702
  "on-brand-primary": primitiveColors.white,
526
703
  "on-brand-secondary": primitiveColors.white,
527
704
  // Status colors
528
- "status-success": primitiveColors.teal[500],
529
- "status-success-light": primitiveColors.teal[400],
530
- "status-success-dark": primitiveColors.teal[700],
531
- "status-success-subtle": "rgba(20, 184, 166, 0.12)",
532
- "status-error": primitiveColors.red[600],
533
- "status-error-light": primitiveColors.red[400],
534
- "status-error-dark": primitiveColors.red[700],
705
+ "status-success": primitiveRamps.green[300],
706
+ "status-success-light": primitiveRamps.green[200],
707
+ "status-success-dark": primitiveRamps.green[600],
708
+ "status-success-subtle": "rgba(46, 213, 115, 0.12)",
709
+ "status-error": primitiveRamps.red[600],
710
+ "status-error-light": primitiveRamps.red[500],
711
+ "status-error-dark": primitiveRamps.red[700],
535
712
  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
536
- "status-warning": primitiveColors.amber[500],
537
- "status-warning-light": primitiveColors.amber[400],
538
- "status-warning-dark": primitiveColors.amber[600],
539
- "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
540
- "status-info": primitiveColors.sky[500],
541
- "status-info-light": primitiveColors.sky[400],
542
- "status-info-dark": primitiveColors.sky[700],
713
+ "status-error-vivid": primitiveColors.redVivid[500],
714
+ "status-error-vivid-light": primitiveColors.redVivid[400],
715
+ "status-error-vivid-dark": primitiveColors.redVivid[700],
716
+ "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
717
+ "status-warning": primitiveRamps.amber[300],
718
+ "status-warning-light": primitiveRamps.amber[200],
719
+ "status-warning-dark": primitiveRamps.amber[500],
720
+ "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
721
+ "status-info": primitiveRamps.blue[500],
722
+ "status-info-light": primitiveRamps.blue[300],
723
+ "status-info-dark": primitiveRamps.blue[600],
543
724
  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
544
725
  // Text on status backgrounds
545
726
  "on-status-success": primitiveColors.white,
@@ -581,29 +762,31 @@ var semanticColorsDark = {
581
762
  "text-link-hover": primitiveColors.blue[400],
582
763
  // Surface colors - dark backgrounds
583
764
  "surface-base": primitiveColors.charcoal[700],
584
- // #161616 - main surface
765
+ // main surface
585
766
  "surface-elevated": primitiveColors.charcoal[600],
586
- // #191919 - elevated surface
767
+ // elevated surface
587
768
  "surface-raised": primitiveColors.charcoal[500],
588
- // #1C1C1C - raised surface
769
+ // raised surface
589
770
  "surface-overlay": primitiveColors.charcoal[600],
590
- // #191919 - overlay surface
771
+ // overlay surface
591
772
  "surface-input": primitiveColors.charcoal[600],
592
- // #191919 - input surface
773
+ // input surface
593
774
  // Background colors
594
775
  "background-base": primitiveColors.charcoal[900],
595
- // #101010 - darkest charcoal
776
+ // darkest charcoal
596
777
  "background-default": primitiveColors.charcoal[700],
597
- // #161616 - main background
778
+ // main background
598
779
  "background-subtle": primitiveColors.charcoal[500],
599
- // #1C1C1C - subtle background
780
+ // subtle background
600
781
  // Border colors
601
782
  "border-default": primitiveColors.charcoal[400],
602
- // #1F1F1F - default border
783
+ // default border
603
784
  "border-subtle": primitiveColors.charcoal[500],
604
- // #1C1C1C - subtle border
785
+ // subtle border
605
786
  "border-strong": primitiveColors.charcoal[300],
606
- // #2C2C2C - strong border
787
+ // strong border
788
+ "border-prominent": primitiveColors.charcoal[200],
789
+ // high-visibility divider
607
790
  "border-focus": "#828DF8",
608
791
  "border-input": primitiveColors.neutral[600],
609
792
  "border-input-hover": primitiveColors.neutral[500],
@@ -618,7 +801,7 @@ var semanticColorsDark = {
618
801
  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
619
802
  // Divider
620
803
  "divider": primitiveColors.charcoal[400],
621
- // #1F1F1F - divider color
804
+ // divider color
622
805
  // Avatar default
623
806
  "avatar-background": primitiveColors.neutral[600],
624
807
  "avatar-text": primitiveColors.white
@@ -732,10 +915,11 @@ function getSemanticColors(mode) {
732
915
  var themeIndependentCSSVars = {
733
916
  // RGB decomposed values for glow shadows
734
917
  "--color-brand-primary-rgb": "255, 121, 0",
735
- "--color-brand-secondary-rgb": "64, 109, 135",
736
- "--color-status-success-rgb": "20, 184, 166",
918
+ "--color-brand-secondary-rgb": "48, 123, 155",
919
+ "--color-status-success-rgb": "46, 213, 115",
737
920
  "--color-status-error-rgb": "209, 67, 67",
738
- "--color-status-warning-rgb": "255, 176, 32",
921
+ "--color-status-error-vivid-rgb": "255, 71, 87",
922
+ "--color-status-warning-rgb": "249, 180, 21",
739
923
  "--color-status-info-rgb": "33, 150, 243",
740
924
  "--color-background-base-rgb": "16, 16, 16",
741
925
  // Font families
@@ -770,6 +954,10 @@ var lightThemeCSSVars = {
770
954
  "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
771
955
  "--color-status-info": semanticColorsLight["status-info"],
772
956
  "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
957
+ "--color-status-error-vivid": semanticColorsLight["status-error-vivid"],
958
+ "--color-status-error-vivid-light": semanticColorsLight["status-error-vivid-light"],
959
+ "--color-status-error-vivid-dark": semanticColorsLight["status-error-vivid-dark"],
960
+ "--color-status-error-vivid-subtle": semanticColorsLight["status-error-vivid-subtle"],
773
961
  "--color-text-primary": semanticColorsLight["text-primary"],
774
962
  "--color-text-secondary": semanticColorsLight["text-secondary"],
775
963
  "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -785,6 +973,7 @@ var lightThemeCSSVars = {
785
973
  "--color-border-default": semanticColorsLight["border-default"],
786
974
  "--color-border-subtle": semanticColorsLight["border-subtle"],
787
975
  "--color-border-strong": semanticColorsLight["border-strong"],
976
+ "--color-border-prominent": semanticColorsLight["border-prominent"],
788
977
  "--color-border-focus": semanticColorsLight["border-focus"],
789
978
  "--color-interactive-hover": semanticColorsLight["interactive-hover"],
790
979
  "--color-interactive-focus": semanticColorsLight["interactive-focus"],
@@ -861,6 +1050,10 @@ var darkThemeCSSVars = {
861
1050
  "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
862
1051
  "--color-status-info": semanticColorsDark["status-info"],
863
1052
  "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
1053
+ "--color-status-error-vivid": semanticColorsDark["status-error-vivid"],
1054
+ "--color-status-error-vivid-light": semanticColorsDark["status-error-vivid-light"],
1055
+ "--color-status-error-vivid-dark": semanticColorsDark["status-error-vivid-dark"],
1056
+ "--color-status-error-vivid-subtle": semanticColorsDark["status-error-vivid-subtle"],
864
1057
  "--color-text-primary": semanticColorsDark["text-primary"],
865
1058
  "--color-text-secondary": semanticColorsDark["text-secondary"],
866
1059
  "--color-text-tertiary": semanticColorsDark["text-tertiary"],
@@ -876,6 +1069,7 @@ var darkThemeCSSVars = {
876
1069
  "--color-border-default": semanticColorsDark["border-default"],
877
1070
  "--color-border-subtle": semanticColorsDark["border-subtle"],
878
1071
  "--color-border-strong": semanticColorsDark["border-strong"],
1072
+ "--color-border-prominent": semanticColorsDark["border-prominent"],
879
1073
  "--color-border-focus": semanticColorsDark["border-focus"],
880
1074
  "--color-interactive-hover": semanticColorsDark["interactive-hover"],
881
1075
  "--color-interactive-focus": semanticColorsDark["interactive-focus"],
@@ -1684,6 +1878,17 @@ function resolveColor(token, mode = "dark") {
1684
1878
  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
1685
1879
  }
1686
1880
 
1881
+ // src/theme/gradients.ts
1882
+ function linearGradient(from, to, angle = 180, mode = "dark") {
1883
+ return {
1884
+ backgroundImage: `linear-gradient(${angle}deg, ${resolveColor(from, mode)}, ${resolveColor(to, mode)})`
1885
+ };
1886
+ }
1887
+ var surfaceGradient = {
1888
+ /** Chrome bands (top bar, headers): elevated → base, a subtle dark wash. */
1889
+ chrome: (mode = "dark") => linearGradient("surface-elevated", "background-base", 180, mode)
1890
+ };
1891
+
1687
1892
  // src/theme/presets/apply.ts
1688
1893
  function colorKeyToVar(key) {
1689
1894
  return `--color-${key}`;
@@ -1877,6 +2082,6 @@ function ThemeProvider({
1877
2082
  return /* @__PURE__ */ jsx(View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
1878
2083
  }
1879
2084
 
1880
- export { ThemeProvider, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors, validateCssPropertyManifest };
2085
+ export { CATEGORICAL_CVD_SAFE_MAX, ThemeProvider, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, surfaceGradient, validateCssPropertyManifest };
1881
2086
  //# sourceMappingURL=index.mjs.map
1882
2087
  //# sourceMappingURL=index.mjs.map