@titan-design/react-ui 0.4.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 (150) hide show
  1. package/dist/MesoStatusCard-CQk71hSi.d.mts +77 -0
  2. package/dist/MesoStatusCard-CQk71hSi.d.ts +77 -0
  3. package/dist/bodymap.d.mts +246 -3
  4. package/dist/bodymap.d.ts +246 -3
  5. package/dist/bodymap.js +232 -185
  6. package/dist/bodymap.js.map +1 -1
  7. package/dist/bodymap.mjs +1963 -11
  8. package/dist/bodymap.mjs.map +1 -1
  9. package/dist/index.d.mts +193 -744
  10. package/dist/index.d.ts +193 -744
  11. package/dist/index.js +1551 -1856
  12. package/dist/index.js.map +1 -1
  13. package/dist/index.mjs +10770 -8213
  14. package/dist/index.mjs.map +1 -1
  15. package/dist/pages-D7Jlssvp.d.ts +791 -0
  16. package/dist/pages-MO0JCySL.d.mts +791 -0
  17. package/dist/pages.d.mts +4 -0
  18. package/dist/pages.d.ts +4 -0
  19. package/dist/pages.js +6694 -0
  20. package/dist/pages.js.map +1 -0
  21. package/dist/pages.mjs +6674 -0
  22. package/dist/pages.mjs.map +1 -0
  23. package/dist/theme/index.d.mts +473 -211
  24. package/dist/theme/index.d.ts +473 -211
  25. package/dist/theme/index.js +341 -127
  26. package/dist/theme/index.js.map +1 -1
  27. package/dist/theme/index.mjs +2085 -2
  28. package/dist/theme/index.mjs.map +1 -1
  29. package/dist/theme/tokens-css.js +148 -139
  30. package/dist/theme/tokens-css.js.map +1 -1
  31. package/dist/theme/tokens-css.mjs +582 -1
  32. package/dist/theme/tokens-css.mjs.map +1 -1
  33. package/package.json +11 -7
  34. package/src/components/custom/DateTime/DateTime.stories.tsx +82 -6
  35. package/src/components/custom/DateTime/DateTime.test.tsx +29 -3
  36. package/src/components/custom/DateTime/DateTime.tsx +55 -15
  37. package/src/components/custom/Gauge/Gauge.test.tsx +2 -2
  38. package/src/components/custom/Gauge/Gauge.tsx +6 -3
  39. package/src/components/custom/Scatter/Scatter.tsx +3 -5
  40. package/src/components/custom/Treemap/Treemap.tsx +3 -5
  41. package/src/components/custom/Typography/Typography.stories.tsx +45 -27
  42. package/src/components/custom/Typography/Typography.test.tsx +13 -3
  43. package/src/components/custom/Typography/Typography.tsx +5 -0
  44. package/src/components/custom/Workout/ActiveWorkoutPage.tsx +2 -1
  45. package/src/components/custom/Workout/BaseBadge.stories.tsx +3 -3
  46. package/src/components/custom/Workout/BaseBadge.test.tsx +1 -1
  47. package/src/components/custom/Workout/BaseBadge.tsx +1 -1
  48. package/src/components/custom/Workout/BodyMap.tsx +6 -3
  49. package/src/components/custom/Workout/BodyMapDetailPanel.tsx +6 -3
  50. package/src/components/custom/Workout/CapacityBandChart.test.tsx +2 -2
  51. package/src/components/custom/Workout/CapacityBandChart.tsx +9 -6
  52. package/src/components/custom/Workout/DeviationBar.test.tsx +1 -1
  53. package/src/components/custom/Workout/DeviationBar.tsx +7 -4
  54. package/src/components/custom/Workout/ExerciseCard.tsx +5 -1
  55. package/src/components/custom/Workout/ExerciseDetailPage.tsx +19 -5
  56. package/src/components/custom/Workout/InputBar.tsx +2 -1
  57. package/src/components/custom/Workout/IntensityBar.test.tsx +112 -60
  58. package/src/components/custom/Workout/IntensityBar.tsx +113 -58
  59. package/src/components/custom/Workout/MesoCard.tsx +8 -3
  60. package/src/components/custom/Workout/MesoProgressBar.test.tsx +1 -1
  61. package/src/components/custom/Workout/MesoProgressBar.tsx +3 -2
  62. package/src/components/custom/Workout/MesoStatusCard.tsx +20 -13
  63. package/src/components/custom/Workout/MuscleGroupChip.tsx +7 -4
  64. package/src/components/custom/Workout/PlaceholderStrip.tsx +5 -9
  65. package/src/components/custom/Workout/PrBadge.tsx +7 -4
  66. package/src/components/custom/Workout/PrHistoryModal.tsx +6 -5
  67. package/src/components/custom/Workout/ProgramPlanningPage.tsx +2 -1
  68. package/src/components/custom/Workout/README.md +50 -0
  69. package/src/components/custom/Workout/ReadinessCheck.tsx +7 -4
  70. package/src/components/custom/Workout/RestTimer.test.tsx +41 -10
  71. package/src/components/custom/Workout/RestTimer.tsx +50 -44
  72. package/src/components/custom/Workout/SetRow.tsx +12 -2
  73. package/src/components/custom/Workout/Sparkline.tsx +2 -1
  74. package/src/components/custom/Workout/StatusDot.test.tsx +2 -2
  75. package/src/components/custom/Workout/StatusDot.tsx +12 -9
  76. package/src/components/custom/Workout/StrengthTrendChart.tsx +9 -6
  77. package/src/components/custom/Workout/SupersetWrapper.tsx +2 -1
  78. package/src/components/custom/Workout/TempoDisplay.stories.tsx +69 -2
  79. package/src/components/custom/Workout/TempoDisplay.test.tsx +35 -0
  80. package/src/components/custom/Workout/TempoDisplay.tsx +109 -3
  81. package/src/components/custom/Workout/VelocityStrip.test.tsx +89 -2
  82. package/src/components/custom/Workout/VelocityStrip.tsx +203 -38
  83. package/src/components/custom/Workout/WeekRow.test.tsx +2 -2
  84. package/src/components/custom/Workout/WeekRow.tsx +3 -2
  85. package/src/components/custom/Workout/WeightBadge.test.tsx +2 -2
  86. package/src/components/custom/Workout/WeightBadge.tsx +8 -4
  87. package/src/components/custom/Workout/WorkoutCard.tsx +5 -2
  88. package/src/components/custom/Workout/WorkoutPill.tsx +12 -8
  89. package/src/components/custom/Workout/icons.tsx +7 -0
  90. package/src/components/custom/Workout/index.ts +38 -47
  91. package/src/components/icons/SvgIcon.tsx +50 -0
  92. package/src/components/icons/icons.stories.tsx +57 -0
  93. package/src/components/icons/icons.test.tsx +43 -0
  94. package/src/components/icons/icons.tsx +45 -0
  95. package/src/components/icons/index.ts +4 -0
  96. package/src/components/index.ts +6 -0
  97. package/src/components/shell/BrandLockup.stories.tsx +27 -0
  98. package/src/components/shell/BrandLockup.test.tsx +23 -0
  99. package/src/components/shell/BrandLockup.tsx +47 -0
  100. package/src/components/shell/DeviceIndicator.stories.tsx +28 -0
  101. package/src/components/shell/DeviceIndicator.test.tsx +26 -0
  102. package/src/components/shell/DeviceIndicator.tsx +52 -0
  103. package/src/components/shell/DeviceMenu.stories.tsx +47 -0
  104. package/src/components/shell/DeviceMenu.test.tsx +40 -0
  105. package/src/components/shell/DeviceMenu.tsx +65 -0
  106. package/src/components/shell/DeviceRow.stories.tsx +38 -0
  107. package/src/components/shell/DeviceRow.test.tsx +37 -0
  108. package/src/components/shell/DeviceRow.tsx +58 -0
  109. package/src/components/shell/README.md +86 -0
  110. package/src/components/shell/SessionStatePill.stories.tsx +27 -0
  111. package/src/components/shell/SessionStatePill.test.tsx +25 -0
  112. package/src/components/shell/SessionStatePill.tsx +46 -0
  113. package/src/components/shell/TopBar.stories.tsx +49 -0
  114. package/src/components/shell/TopBar.test.tsx +36 -0
  115. package/src/components/shell/TopBar.tsx +89 -0
  116. package/src/components/shell/index.ts +8 -0
  117. package/src/components/ui/indicator/Indicator.stories.tsx +37 -1
  118. package/src/components/ui/indicator/Indicator.test.tsx +19 -1
  119. package/src/components/ui/indicator/Indicator.tsx +45 -6
  120. package/src/components/ui/indicator/index.ts +1 -1
  121. package/src/components/ui/spinner/Spinner.tsx +3 -2
  122. package/src/components/ui/toolbar-button/ToolbarButton.tsx +2 -1
  123. package/src/index.ts +3 -2
  124. package/src/pages.ts +61 -0
  125. package/src/test/stories-smoke.test.tsx +50 -0
  126. package/src/theme/ColorSystem.stories.tsx +323 -0
  127. package/src/theme/Colors.stories.tsx +69 -1
  128. package/src/theme/barrel.ts +54 -0
  129. package/src/theme/config.ts +16 -3
  130. package/src/theme/extracted-colors-dataviz.ts +21 -0
  131. package/src/theme/extracted-colors-ui.ts +20 -0
  132. package/src/theme/global.css +64 -52
  133. package/src/theme/gradients.test.ts +25 -0
  134. package/src/theme/gradients.ts +36 -0
  135. package/src/theme/index.ts +8 -43
  136. package/src/theme/native-theming-guard.test.ts +117 -0
  137. package/src/theme/tokens/primitives.test.ts +232 -0
  138. package/src/theme/tokens/primitives.ts +247 -0
  139. package/src/theme/tokens/semantic.ts +93 -81
  140. package/src/theme/workout-tokens.ts +22 -21
  141. package/src/utils/avatar-color.ts +3 -3
  142. package/tailwind.config.js +10 -3
  143. package/dist/bodymap-BhG55xHM.d.mts +0 -318
  144. package/dist/bodymap-BhG55xHM.d.ts +0 -318
  145. package/dist/chunk-2SISKTWM.mjs +0 -1027
  146. package/dist/chunk-2SISKTWM.mjs.map +0 -1
  147. package/dist/chunk-7XPB4NAO.mjs +0 -1013
  148. package/dist/chunk-7XPB4NAO.mjs.map +0 -1
  149. package/dist/chunk-SNVKL5WZ.mjs +0 -883
  150. package/dist/chunk-SNVKL5WZ.mjs.map +0 -1
@@ -69,6 +69,38 @@ var primitiveColors = {
69
69
  800: "#991B1B",
70
70
  900: "#7F1D1D"
71
71
  },
72
+ // Vivid green scale (live/go success)
73
+ greenVivid: {
74
+ 50: "#E9FBF0",
75
+ 100: "#C8F7DA",
76
+ 200: "#9FF0BF",
77
+ 300: "#6BE79D",
78
+ 400: "#47DE84",
79
+ // Success vivid light
80
+ 500: "#2ED573",
81
+ // Success vivid main
82
+ 600: "#22B85F",
83
+ 700: "#1A9950",
84
+ // Success vivid dark
85
+ 800: "#157A40",
86
+ 900: "#105C30"
87
+ },
88
+ // Vivid red scale (alert)
89
+ redVivid: {
90
+ 50: "#FFECEE",
91
+ 100: "#FFD6DB",
92
+ 200: "#FFB3BC",
93
+ 300: "#FF8593",
94
+ 400: "#FF6070",
95
+ // Error vivid light
96
+ 500: "#FF4757",
97
+ // Error vivid main
98
+ 600: "#E63548",
99
+ 700: "#C42539",
100
+ // Error vivid dark
101
+ 800: "#9E1C2C",
102
+ 900: "#7A1520"
103
+ },
72
104
  // Amber scale (warning)
73
105
  amber: {
74
106
  50: "#FFFBEB",
@@ -158,6 +190,162 @@ var primitiveColors = {
158
190
  black: "#000000",
159
191
  transparent: "transparent"
160
192
  };
193
+ var primitiveRamps = {
194
+ red: {
195
+ 50: "#FFF4F4",
196
+ 100: "#FFE3E5",
197
+ 200: "#FFC2C5",
198
+ 300: "#FF9A9D",
199
+ 400: "#F77175",
200
+ 500: "#E05254",
201
+ 600: "#D14343",
202
+ // pin
203
+ 700: "#A4221C",
204
+ 800: "#7E1002",
205
+ 900: "#5A0900",
206
+ 950: "#3D0400"
207
+ },
208
+ orange: {
209
+ 50: "#FFF5ED",
210
+ 100: "#FFE6D4",
211
+ 200: "#FFC7A2",
212
+ 300: "#FFA063",
213
+ 400: "#FF7900",
214
+ // pin
215
+ 500: "#DA5F00",
216
+ 600: "#B94A00",
217
+ 700: "#983804",
218
+ 800: "#6F290F",
219
+ 900: "#4E1C0C",
220
+ 950: "#331107"
221
+ },
222
+ amber: {
223
+ 50: "#FFF7DD",
224
+ 100: "#FFEAA9",
225
+ 200: "#FFD352",
226
+ 300: "#F9B415",
227
+ // pin
228
+ 400: "#E08C00",
229
+ 500: "#C27400",
230
+ 600: "#A45E00",
231
+ 700: "#814D14",
232
+ 800: "#5B3A1A",
233
+ 900: "#442503",
234
+ 950: "#301500"
235
+ },
236
+ green: {
237
+ 50: "#E3FFEE",
238
+ 100: "#B5FFD2",
239
+ 200: "#58F69E",
240
+ 300: "#2ED573",
241
+ // pin
242
+ 400: "#21C05D",
243
+ 500: "#22A444",
244
+ 600: "#298732",
245
+ 700: "#2B6B25",
246
+ 800: "#264D1C",
247
+ 900: "#1B3515",
248
+ 950: "#11220D"
249
+ },
250
+ cyan: {
251
+ 50: "#E6FBFF",
252
+ 100: "#C2F6FF",
253
+ 200: "#62EAFF",
254
+ 300: "#22D3EE",
255
+ // pin
256
+ 400: "#01B5D1",
257
+ 500: "#2697B7",
258
+ 600: "#307B9B",
259
+ 700: "#2A617F",
260
+ 800: "#22465F",
261
+ 900: "#0B3149",
262
+ 950: "#001F36"
263
+ },
264
+ blue: {
265
+ 50: "#EFF8FF",
266
+ 100: "#D9EFFF",
267
+ 200: "#ACDBFF",
268
+ 300: "#78C2FF",
269
+ 400: "#3CA8FF",
270
+ 500: "#2196F3",
271
+ // pin
272
+ 600: "#1072CB",
273
+ 700: "#135AA8",
274
+ 800: "#14407E",
275
+ 900: "#112C5A",
276
+ 950: "#091B3C"
277
+ },
278
+ magenta: {
279
+ 50: "#FFF3F9",
280
+ 100: "#FFE2F1",
281
+ 200: "#FFBDE2",
282
+ 300: "#FF8FD5",
283
+ 400: "#ED69C3",
284
+ 500: "#D548AF",
285
+ 600: "#BA2996",
286
+ 700: "#9C0D7A",
287
+ // pin
288
+ 800: "#77005A",
289
+ 900: "#56003F",
290
+ 950: "#3B0029"
291
+ }
292
+ };
293
+ var categoricalPalette = {
294
+ default: [
295
+ primitiveRamps.blue[500],
296
+ primitiveRamps.magenta[500],
297
+ primitiveRamps.red[500],
298
+ primitiveRamps.orange[400],
299
+ primitiveRamps.green[300],
300
+ primitiveRamps.cyan[300],
301
+ primitiveRamps.amber[600]
302
+ // extended (7th) — pair with a legend
303
+ ],
304
+ dark: [
305
+ primitiveRamps.blue[600],
306
+ primitiveRamps.magenta[600],
307
+ primitiveRamps.red[500],
308
+ primitiveRamps.orange[600],
309
+ primitiveRamps.green[800],
310
+ primitiveRamps.cyan[800],
311
+ primitiveRamps.amber[500]
312
+ // extended (7th) — pair with a legend
313
+ ]
314
+ };
315
+ var CATEGORICAL_CVD_SAFE_MAX = 6;
316
+ function getCategoricalColor(index, variant = "default") {
317
+ const palette = categoricalPalette[variant];
318
+ index = Math.max(0, Math.floor(index));
319
+ return palette[index % palette.length];
320
+ }
321
+ var divergingScale = [
322
+ primitiveRamps.blue[500],
323
+ // under
324
+ primitiveRamps.cyan[300],
325
+ // maintenance
326
+ primitiveRamps.green[200],
327
+ // optimal (light center)
328
+ primitiveRamps.amber[300],
329
+ // approaching
330
+ primitiveRamps.red[600]
331
+ // over
332
+ ];
333
+ var sequentialEffort = [
334
+ primitiveRamps.green[300],
335
+ primitiveRamps.amber[200],
336
+ primitiveRamps.amber[300],
337
+ primitiveRamps.orange[400],
338
+ primitiveRamps.red[600],
339
+ primitiveRamps.red[700]
340
+ ];
341
+ function bestTextColor(hex) {
342
+ const [r, g, b] = [0, 2, 4].map((i) => {
343
+ const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
344
+ return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
345
+ });
346
+ const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
347
+ return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
348
+ }
161
349
  var discreteRainbow = [
162
350
  "#E8ECFB",
163
351
  "#D9CCE3",
@@ -367,56 +555,43 @@ var primitiveZIndex = {
367
555
  // src/theme/tokens/semantic.ts
368
556
  var semanticColorsLight = {
369
557
  // Brand colors (brand-*)
370
- "brand-primary": primitiveColors.accent[400],
371
- // #FF7900
372
- "brand-primary-light": primitiveColors.accent[200],
373
- // #FF9630
374
- "brand-primary-dark": primitiveColors.accent[700],
375
- // #D0620C
558
+ "brand-primary": primitiveRamps.orange[400],
559
+ "brand-primary-light": primitiveRamps.orange[300],
560
+ "brand-primary-dark": primitiveRamps.orange[500],
376
561
  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
377
- "brand-primary-hover": primitiveColors.accent[500],
378
- "brand-primary-active": primitiveColors.accent[600],
379
- "brand-secondary": primitiveColors.steel[500],
380
- // #406D87
381
- "brand-secondary-light": primitiveColors.steel[300],
382
- // #678498
383
- "brand-secondary-dark": primitiveColors.steel[700],
384
- // #32556D
385
- "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
386
- "brand-secondary-hover": primitiveColors.steel[600],
387
- "brand-secondary-active": primitiveColors.steel[700],
562
+ "brand-primary-hover": primitiveRamps.orange[500],
563
+ "brand-primary-active": primitiveRamps.orange[600],
564
+ "brand-secondary": primitiveRamps.cyan[600],
565
+ "brand-secondary-light": primitiveRamps.cyan[500],
566
+ "brand-secondary-dark": primitiveRamps.cyan[700],
567
+ "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
568
+ "brand-secondary-hover": primitiveRamps.cyan[700],
569
+ "brand-secondary-active": primitiveRamps.cyan[800],
388
570
  // Text on brand backgrounds (on-*)
389
571
  "on-brand-primary": primitiveColors.white,
390
572
  "on-brand-secondary": primitiveColors.white,
391
573
  // Status colors (status-*)
392
- "status-success": primitiveColors.teal[500],
393
- // #14B8A6
394
- "status-success-light": primitiveColors.teal[400],
395
- // #43C6B7
396
- "status-success-dark": primitiveColors.teal[700],
397
- // #0E8074
398
- "status-success-subtle": primitiveColors.teal[50],
399
- "status-error": primitiveColors.red[600],
400
- // #D14343
401
- "status-error-light": primitiveColors.red[400],
402
- // #DA6868
403
- "status-error-dark": primitiveColors.red[700],
404
- // #922E2E
405
- "status-error-subtle": primitiveColors.red[50],
406
- "status-warning": primitiveColors.amber[500],
407
- // #FFB020
408
- "status-warning-light": primitiveColors.amber[400],
409
- // #FFBF4C
410
- "status-warning-dark": primitiveColors.amber[600],
411
- // #B27B16
412
- "status-warning-subtle": primitiveColors.amber[50],
413
- "status-info": primitiveColors.sky[500],
414
- // #2196F3
415
- "status-info-light": primitiveColors.sky[400],
416
- // #64B6F7
417
- "status-info-dark": primitiveColors.sky[700],
418
- // #0B79D0
419
- "status-info-subtle": primitiveColors.sky[50],
574
+ "status-success": primitiveRamps.green[300],
575
+ "status-success-light": primitiveRamps.green[200],
576
+ "status-success-dark": primitiveRamps.green[600],
577
+ "status-success-subtle": primitiveRamps.green[50],
578
+ "status-error": primitiveRamps.red[600],
579
+ "status-error-light": primitiveRamps.red[500],
580
+ "status-error-dark": primitiveRamps.red[700],
581
+ "status-error-subtle": primitiveRamps.red[50],
582
+ "status-error-vivid": primitiveColors.redVivid[500],
583
+ // vivid alert red
584
+ "status-error-vivid-light": primitiveColors.redVivid[400],
585
+ "status-error-vivid-dark": primitiveColors.redVivid[700],
586
+ "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
587
+ "status-warning": primitiveRamps.amber[300],
588
+ "status-warning-light": primitiveRamps.amber[200],
589
+ "status-warning-dark": primitiveRamps.amber[500],
590
+ "status-warning-subtle": primitiveRamps.amber[50],
591
+ "status-info": primitiveRamps.blue[500],
592
+ "status-info-light": primitiveRamps.blue[300],
593
+ "status-info-dark": primitiveRamps.blue[600],
594
+ "status-info-subtle": primitiveRamps.blue[50],
420
595
  // Text on status backgrounds (on-status-*)
421
596
  "on-status-success": primitiveColors.white,
422
597
  "on-status-error": primitiveColors.white,
@@ -443,25 +618,25 @@ var semanticColorsLight = {
443
618
  // Data visualization colors (data-*)
444
619
  // First 10 colors from discrete rainbow optimized for charts
445
620
  "data-1": discreteRainbow[9],
446
- // #1965B0 - Blue
621
+ // Blue
447
622
  "data-2": discreteRainbow[14],
448
- // #4EB265 - Green
623
+ // Green
449
624
  "data-3": discreteRainbow[17],
450
- // #F7F056 - Yellow
625
+ // Yellow
451
626
  "data-4": discreteRainbow[25],
452
- // #DC050C - Red
627
+ // Red
453
628
  "data-5": discreteRainbow[8],
454
- // #882E72 - Purple
629
+ // Purple
455
630
  "data-6": discreteRainbow[20],
456
- // #F4A736 - Orange
631
+ // Orange
457
632
  "data-7": discreteRainbow[13],
458
- // #7BAFDE - Light Blue
633
+ // Light Blue
459
634
  "data-8": discreteRainbow[15],
460
- // #90C987 - Light Green
635
+ // Light Green
461
636
  "data-9": discreteRainbow[3],
462
- // #CAACCB - Lavender
637
+ // Lavender
463
638
  "data-10": discreteRainbow[22],
464
- // #EE8026 - Dark Orange
639
+ // Dark Orange
465
640
  // Text colors (text-*)
466
641
  "text-primary": "#121828",
467
642
  "text-secondary": "#65748B",
@@ -473,9 +648,9 @@ var semanticColorsLight = {
473
648
  // Surface colors (surface-*) - for elevated containers
474
649
  "surface-base": primitiveColors.white,
475
650
  "surface-elevated": primitiveColors.neutral[50],
476
- // #FAFAFA - slightly off-white for elevated cards
651
+ // slightly off-white for elevated cards
477
652
  "surface-raised": primitiveColors.neutral[100],
478
- // #F3F4F6 - light gray for raised cards
653
+ // light gray for raised cards
479
654
  "surface-overlay": primitiveColors.white,
480
655
  "surface-input": primitiveColors.neutral[50],
481
656
  // Input field background (filled variant)
@@ -487,6 +662,8 @@ var semanticColorsLight = {
487
662
  "border-default": "#E8E9EB",
488
663
  "border-subtle": primitiveColors.neutral[100],
489
664
  "border-strong": primitiveColors.neutral[300],
665
+ "border-prominent": primitiveColors.neutral[400],
666
+ // high-visibility divider
490
667
  "border-focus": primitiveColors.blue[600],
491
668
  "border-input": primitiveColors.neutral[300],
492
669
  // Input field border
@@ -511,37 +688,41 @@ var semanticColorsLight = {
511
688
  };
512
689
  var semanticColorsDark = {
513
690
  // Brand colors stay the same in dark mode
514
- "brand-primary": primitiveColors.accent[400],
515
- "brand-primary-light": primitiveColors.accent[200],
516
- "brand-primary-dark": primitiveColors.accent[700],
691
+ "brand-primary": primitiveRamps.orange[400],
692
+ "brand-primary-light": primitiveRamps.orange[300],
693
+ "brand-primary-dark": primitiveRamps.orange[500],
517
694
  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
518
- "brand-primary-hover": primitiveColors.accent[300],
519
- "brand-primary-active": primitiveColors.accent[200],
520
- "brand-secondary": primitiveColors.steel[500],
521
- "brand-secondary-light": primitiveColors.steel[300],
522
- "brand-secondary-dark": primitiveColors.steel[700],
523
- "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
524
- "brand-secondary-hover": primitiveColors.steel[400],
525
- "brand-secondary-active": primitiveColors.steel[300],
695
+ "brand-primary-hover": primitiveRamps.orange[300],
696
+ "brand-primary-active": primitiveRamps.orange[200],
697
+ "brand-secondary": primitiveRamps.cyan[600],
698
+ "brand-secondary-light": primitiveRamps.cyan[500],
699
+ "brand-secondary-dark": primitiveRamps.cyan[700],
700
+ "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
701
+ "brand-secondary-hover": primitiveRamps.cyan[500],
702
+ "brand-secondary-active": primitiveRamps.cyan[400],
526
703
  // Text on brand backgrounds
527
704
  "on-brand-primary": primitiveColors.white,
528
705
  "on-brand-secondary": primitiveColors.white,
529
706
  // Status colors
530
- "status-success": primitiveColors.teal[500],
531
- "status-success-light": primitiveColors.teal[400],
532
- "status-success-dark": primitiveColors.teal[700],
533
- "status-success-subtle": "rgba(20, 184, 166, 0.12)",
534
- "status-error": primitiveColors.red[600],
535
- "status-error-light": primitiveColors.red[400],
536
- "status-error-dark": primitiveColors.red[700],
707
+ "status-success": primitiveRamps.green[300],
708
+ "status-success-light": primitiveRamps.green[200],
709
+ "status-success-dark": primitiveRamps.green[600],
710
+ "status-success-subtle": "rgba(46, 213, 115, 0.12)",
711
+ "status-error": primitiveRamps.red[600],
712
+ "status-error-light": primitiveRamps.red[500],
713
+ "status-error-dark": primitiveRamps.red[700],
537
714
  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
538
- "status-warning": primitiveColors.amber[500],
539
- "status-warning-light": primitiveColors.amber[400],
540
- "status-warning-dark": primitiveColors.amber[600],
541
- "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
542
- "status-info": primitiveColors.sky[500],
543
- "status-info-light": primitiveColors.sky[400],
544
- "status-info-dark": primitiveColors.sky[700],
715
+ "status-error-vivid": primitiveColors.redVivid[500],
716
+ "status-error-vivid-light": primitiveColors.redVivid[400],
717
+ "status-error-vivid-dark": primitiveColors.redVivid[700],
718
+ "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
719
+ "status-warning": primitiveRamps.amber[300],
720
+ "status-warning-light": primitiveRamps.amber[200],
721
+ "status-warning-dark": primitiveRamps.amber[500],
722
+ "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
723
+ "status-info": primitiveRamps.blue[500],
724
+ "status-info-light": primitiveRamps.blue[300],
725
+ "status-info-dark": primitiveRamps.blue[600],
545
726
  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
546
727
  // Text on status backgrounds
547
728
  "on-status-success": primitiveColors.white,
@@ -583,29 +764,31 @@ var semanticColorsDark = {
583
764
  "text-link-hover": primitiveColors.blue[400],
584
765
  // Surface colors - dark backgrounds
585
766
  "surface-base": primitiveColors.charcoal[700],
586
- // #161616 - main surface
767
+ // main surface
587
768
  "surface-elevated": primitiveColors.charcoal[600],
588
- // #191919 - elevated surface
769
+ // elevated surface
589
770
  "surface-raised": primitiveColors.charcoal[500],
590
- // #1C1C1C - raised surface
771
+ // raised surface
591
772
  "surface-overlay": primitiveColors.charcoal[600],
592
- // #191919 - overlay surface
773
+ // overlay surface
593
774
  "surface-input": primitiveColors.charcoal[600],
594
- // #191919 - input surface
775
+ // input surface
595
776
  // Background colors
596
777
  "background-base": primitiveColors.charcoal[900],
597
- // #101010 - darkest charcoal
778
+ // darkest charcoal
598
779
  "background-default": primitiveColors.charcoal[700],
599
- // #161616 - main background
780
+ // main background
600
781
  "background-subtle": primitiveColors.charcoal[500],
601
- // #1C1C1C - subtle background
782
+ // subtle background
602
783
  // Border colors
603
784
  "border-default": primitiveColors.charcoal[400],
604
- // #1F1F1F - default border
785
+ // default border
605
786
  "border-subtle": primitiveColors.charcoal[500],
606
- // #1C1C1C - subtle border
787
+ // subtle border
607
788
  "border-strong": primitiveColors.charcoal[300],
608
- // #2C2C2C - strong border
789
+ // strong border
790
+ "border-prominent": primitiveColors.charcoal[200],
791
+ // high-visibility divider
609
792
  "border-focus": "#828DF8",
610
793
  "border-input": primitiveColors.neutral[600],
611
794
  "border-input-hover": primitiveColors.neutral[500],
@@ -620,7 +803,7 @@ var semanticColorsDark = {
620
803
  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
621
804
  // Divider
622
805
  "divider": primitiveColors.charcoal[400],
623
- // #1F1F1F - divider color
806
+ // divider color
624
807
  // Avatar default
625
808
  "avatar-background": primitiveColors.neutral[600],
626
809
  "avatar-text": primitiveColors.white
@@ -734,10 +917,11 @@ function getSemanticColors(mode) {
734
917
  var themeIndependentCSSVars = {
735
918
  // RGB decomposed values for glow shadows
736
919
  "--color-brand-primary-rgb": "255, 121, 0",
737
- "--color-brand-secondary-rgb": "64, 109, 135",
738
- "--color-status-success-rgb": "20, 184, 166",
920
+ "--color-brand-secondary-rgb": "48, 123, 155",
921
+ "--color-status-success-rgb": "46, 213, 115",
739
922
  "--color-status-error-rgb": "209, 67, 67",
740
- "--color-status-warning-rgb": "255, 176, 32",
923
+ "--color-status-error-vivid-rgb": "255, 71, 87",
924
+ "--color-status-warning-rgb": "249, 180, 21",
741
925
  "--color-status-info-rgb": "33, 150, 243",
742
926
  "--color-background-base-rgb": "16, 16, 16",
743
927
  // Font families
@@ -772,6 +956,10 @@ var lightThemeCSSVars = {
772
956
  "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
773
957
  "--color-status-info": semanticColorsLight["status-info"],
774
958
  "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
959
+ "--color-status-error-vivid": semanticColorsLight["status-error-vivid"],
960
+ "--color-status-error-vivid-light": semanticColorsLight["status-error-vivid-light"],
961
+ "--color-status-error-vivid-dark": semanticColorsLight["status-error-vivid-dark"],
962
+ "--color-status-error-vivid-subtle": semanticColorsLight["status-error-vivid-subtle"],
775
963
  "--color-text-primary": semanticColorsLight["text-primary"],
776
964
  "--color-text-secondary": semanticColorsLight["text-secondary"],
777
965
  "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -787,6 +975,7 @@ var lightThemeCSSVars = {
787
975
  "--color-border-default": semanticColorsLight["border-default"],
788
976
  "--color-border-subtle": semanticColorsLight["border-subtle"],
789
977
  "--color-border-strong": semanticColorsLight["border-strong"],
978
+ "--color-border-prominent": semanticColorsLight["border-prominent"],
790
979
  "--color-border-focus": semanticColorsLight["border-focus"],
791
980
  "--color-interactive-hover": semanticColorsLight["interactive-hover"],
792
981
  "--color-interactive-focus": semanticColorsLight["interactive-focus"],
@@ -863,6 +1052,10 @@ var darkThemeCSSVars = {
863
1052
  "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
864
1053
  "--color-status-info": semanticColorsDark["status-info"],
865
1054
  "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
1055
+ "--color-status-error-vivid": semanticColorsDark["status-error-vivid"],
1056
+ "--color-status-error-vivid-light": semanticColorsDark["status-error-vivid-light"],
1057
+ "--color-status-error-vivid-dark": semanticColorsDark["status-error-vivid-dark"],
1058
+ "--color-status-error-vivid-subtle": semanticColorsDark["status-error-vivid-subtle"],
866
1059
  "--color-text-primary": semanticColorsDark["text-primary"],
867
1060
  "--color-text-secondary": semanticColorsDark["text-secondary"],
868
1061
  "--color-text-tertiary": semanticColorsDark["text-tertiary"],
@@ -878,6 +1071,7 @@ var darkThemeCSSVars = {
878
1071
  "--color-border-default": semanticColorsDark["border-default"],
879
1072
  "--color-border-subtle": semanticColorsDark["border-subtle"],
880
1073
  "--color-border-strong": semanticColorsDark["border-strong"],
1074
+ "--color-border-prominent": semanticColorsDark["border-prominent"],
881
1075
  "--color-border-focus": semanticColorsDark["border-focus"],
882
1076
  "--color-interactive-hover": semanticColorsDark["interactive-hover"],
883
1077
  "--color-interactive-focus": semanticColorsDark["interactive-focus"],
@@ -1682,40 +1876,21 @@ function validateCssPropertyManifest(candidate) {
1682
1876
  function isCssPropertyManifest(candidate) {
1683
1877
  return validateCssPropertyManifest(candidate).valid;
1684
1878
  }
1685
- function wrapJsx(fn) {
1686
- return function(type, props, ...rest) {
1687
- if (props && typeof props.className === "string" && props.className) {
1688
- const cn = props.className;
1689
- const cssStyle = { $$css: true, [cn]: cn };
1690
- const existing = props.style;
1691
- props = {
1692
- ...props,
1693
- style: existing ? [cssStyle, existing] : cssStyle
1694
- };
1695
- delete props.className;
1696
- }
1697
- return fn(type, props, ...rest);
1698
- };
1699
- }
1700
- var jsx = wrapJsx(jsxRuntime.jsx);
1701
-
1702
- // src/theme/ThemeProvider.tsx
1703
- var MODE_VARS = {
1704
- dark: nativewind.vars(darkThemeCSSVars),
1705
- light: nativewind.vars(lightThemeCSSVars)
1706
- };
1707
- function ThemeProvider({
1708
- mode = "dark",
1709
- style,
1710
- children,
1711
- ...props
1712
- }) {
1713
- return /* @__PURE__ */ jsx(reactNative.View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
1714
- }
1715
1879
  function resolveColor(token, mode = "dark") {
1716
1880
  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
1717
1881
  }
1718
1882
 
1883
+ // src/theme/gradients.ts
1884
+ function linearGradient(from, to, angle = 180, mode = "dark") {
1885
+ return {
1886
+ backgroundImage: `linear-gradient(${angle}deg, ${resolveColor(from, mode)}, ${resolveColor(to, mode)})`
1887
+ };
1888
+ }
1889
+ var surfaceGradient = {
1890
+ /** Chrome bands (top bar, headers): elevated → base, a subtle dark wash. */
1891
+ chrome: (mode = "dark") => linearGradient("surface-elevated", "background-base", 180, mode)
1892
+ };
1893
+
1719
1894
  // src/theme/presets/apply.ts
1720
1895
  function colorKeyToVar(key) {
1721
1896
  return `--color-${key}`;
@@ -1878,11 +2053,44 @@ var audiobookPreset = {
1878
2053
  },
1879
2054
  rootClasses: ["atmosphere-warm", "grain"]
1880
2055
  };
2056
+ function wrapJsx(fn) {
2057
+ return function(type, props, ...rest) {
2058
+ if (props && typeof props.className === "string" && props.className) {
2059
+ const cn = props.className;
2060
+ const cssStyle = { $$css: true, [cn]: cn };
2061
+ const existing = props.style;
2062
+ props = {
2063
+ ...props,
2064
+ style: existing ? [cssStyle, existing] : cssStyle
2065
+ };
2066
+ delete props.className;
2067
+ }
2068
+ return fn(type, props, ...rest);
2069
+ };
2070
+ }
2071
+ var jsx = wrapJsx(jsxRuntime.jsx);
2072
+
2073
+ // src/theme/ThemeProvider.tsx
2074
+ var MODE_VARS = {
2075
+ dark: nativewind.vars(darkThemeCSSVars),
2076
+ light: nativewind.vars(lightThemeCSSVars)
2077
+ };
2078
+ function ThemeProvider({
2079
+ mode = "dark",
2080
+ style,
2081
+ children,
2082
+ ...props
2083
+ }) {
2084
+ return /* @__PURE__ */ jsx(reactNative.View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
2085
+ }
1881
2086
 
2087
+ exports.CATEGORICAL_CVD_SAFE_MAX = CATEGORICAL_CVD_SAFE_MAX;
1882
2088
  exports.ThemeProvider = ThemeProvider;
1883
2089
  exports.applyThemePreset = applyThemePreset;
1884
2090
  exports.audiobookPreset = audiobookPreset;
2091
+ exports.bestTextColor = bestTextColor;
1885
2092
  exports.buttonSizes = buttonSizes;
2093
+ exports.categoricalPalette = categoricalPalette;
1886
2094
  exports.componentElevationRanges = componentElevationRanges;
1887
2095
  exports.createFlatShadow = createFlatShadow;
1888
2096
  exports.createPressedHoverShadow = createPressedHoverShadow;
@@ -1893,8 +2101,10 @@ exports.darkThemeCSSVars = darkThemeCSSVars;
1893
2101
  exports.darken = darken;
1894
2102
  exports.defaultPreset = defaultPreset;
1895
2103
  exports.discreteRainbow = discreteRainbow;
2104
+ exports.divergingScale = divergingScale;
1896
2105
  exports.elevationSystem = elevationSystem;
1897
2106
  exports.getBaseSurfaceColor = getBaseSurfaceColor;
2107
+ exports.getCategoricalColor = getCategoricalColor;
1898
2108
  exports.getDiscreteRainbowColor = getDiscreteRainbowColor;
1899
2109
  exports.getElevationConfig = getElevationConfig;
1900
2110
  exports.getElevationShadow = getElevationShadow;
@@ -1911,10 +2121,12 @@ exports.isCssPropertyManifest = isCssPropertyManifest;
1911
2121
  exports.isDark = isDark;
1912
2122
  exports.lightThemeCSSVars = lightThemeCSSVars;
1913
2123
  exports.lighten = lighten;
2124
+ exports.linearGradient = linearGradient;
1914
2125
  exports.neumorphicShadows = neumorphicShadows;
1915
2126
  exports.primitiveBorderRadius = primitiveBorderRadius;
1916
2127
  exports.primitiveBreakpoints = primitiveBreakpoints;
1917
2128
  exports.primitiveColors = primitiveColors;
2129
+ exports.primitiveRamps = primitiveRamps;
1918
2130
  exports.primitiveShadows = primitiveShadows;
1919
2131
  exports.primitiveSpacing = primitiveSpacing;
1920
2132
  exports.primitiveTypography = primitiveTypography;
@@ -1925,7 +2137,9 @@ exports.rgbToHsv = rgbToHsv;
1925
2137
  exports.semanticColorsDark = semanticColorsDark;
1926
2138
  exports.semanticColorsLight = semanticColorsLight;
1927
2139
  exports.semanticTypography = semanticTypography;
2140
+ exports.sequentialEffort = sequentialEffort;
1928
2141
  exports.shadowColors = shadowColors;
2142
+ exports.surfaceGradient = surfaceGradient;
1929
2143
  exports.validateCssPropertyManifest = validateCssPropertyManifest;
1930
2144
  //# sourceMappingURL=index.js.map
1931
2145
  //# sourceMappingURL=index.js.map