@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.
- package/dist/bodymap.js +232 -185
- package/dist/bodymap.js.map +1 -1
- package/dist/bodymap.mjs +232 -185
- package/dist/bodymap.mjs.map +1 -1
- package/dist/index.d.mts +164 -8
- package/dist/index.d.ts +164 -8
- package/dist/index.js +835 -342
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +816 -343
- package/dist/index.mjs.map +1 -1
- package/dist/pages.js +570 -522
- package/dist/pages.js.map +1 -1
- package/dist/pages.mjs +570 -522
- package/dist/pages.mjs.map +1 -1
- package/dist/theme/index.d.mts +461 -199
- package/dist/theme/index.d.ts +461 -199
- package/dist/theme/index.js +311 -97
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +303 -98
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/tokens-css.js +148 -139
- package/dist/theme/tokens-css.js.map +1 -1
- package/dist/theme/tokens-css.mjs +148 -139
- package/dist/theme/tokens-css.mjs.map +1 -1
- package/package.json +3 -1
- package/src/components/custom/DateTime/DateTime.stories.tsx +82 -6
- package/src/components/custom/DateTime/DateTime.test.tsx +29 -3
- package/src/components/custom/DateTime/DateTime.tsx +55 -15
- package/src/components/custom/Gauge/Gauge.test.tsx +2 -2
- package/src/components/custom/Gauge/Gauge.tsx +6 -3
- package/src/components/custom/Scatter/Scatter.tsx +3 -5
- package/src/components/custom/Treemap/Treemap.tsx +3 -5
- package/src/components/custom/Typography/Typography.stories.tsx +45 -27
- package/src/components/custom/Typography/Typography.test.tsx +13 -3
- package/src/components/custom/Typography/Typography.tsx +5 -0
- package/src/components/custom/Workout/ActiveWorkoutPage.tsx +2 -1
- package/src/components/custom/Workout/BodyMap.tsx +6 -3
- package/src/components/custom/Workout/BodyMapDetailPanel.tsx +6 -3
- package/src/components/custom/Workout/CapacityBandChart.test.tsx +2 -2
- package/src/components/custom/Workout/CapacityBandChart.tsx +9 -6
- package/src/components/custom/Workout/DeviationBar.test.tsx +1 -1
- package/src/components/custom/Workout/DeviationBar.tsx +7 -4
- package/src/components/custom/Workout/ExerciseDetailPage.tsx +2 -1
- package/src/components/custom/Workout/InputBar.tsx +2 -1
- package/src/components/custom/Workout/IntensityBar.test.tsx +8 -8
- package/src/components/custom/Workout/IntensityBar.tsx +10 -6
- package/src/components/custom/Workout/MesoCard.tsx +8 -3
- package/src/components/custom/Workout/MesoProgressBar.test.tsx +1 -1
- package/src/components/custom/Workout/MesoProgressBar.tsx +3 -2
- package/src/components/custom/Workout/MesoStatusCard.tsx +20 -13
- package/src/components/custom/Workout/MuscleGroupChip.tsx +7 -4
- package/src/components/custom/Workout/PrBadge.tsx +5 -2
- package/src/components/custom/Workout/PrHistoryModal.tsx +4 -3
- package/src/components/custom/Workout/ProgramPlanningPage.tsx +2 -1
- package/src/components/custom/Workout/ReadinessCheck.tsx +7 -4
- package/src/components/custom/Workout/RestTimer.tsx +2 -1
- package/src/components/custom/Workout/SetRow.tsx +2 -1
- package/src/components/custom/Workout/Sparkline.tsx +2 -1
- package/src/components/custom/Workout/StatusDot.test.tsx +2 -2
- package/src/components/custom/Workout/StatusDot.tsx +12 -9
- package/src/components/custom/Workout/StrengthTrendChart.tsx +9 -6
- package/src/components/custom/Workout/SupersetWrapper.tsx +2 -1
- package/src/components/custom/Workout/TempoDisplay.tsx +6 -3
- package/src/components/custom/Workout/VelocityStrip.test.tsx +3 -3
- package/src/components/custom/Workout/WeekRow.tsx +3 -2
- package/src/components/custom/Workout/WeightBadge.tsx +6 -2
- package/src/components/custom/Workout/WorkoutCard.tsx +5 -2
- package/src/components/custom/Workout/WorkoutPill.tsx +12 -8
- package/src/components/custom/Workout/icons.tsx +6 -67
- package/src/components/icons/SvgIcon.tsx +50 -0
- package/src/components/icons/icons.stories.tsx +57 -0
- package/src/components/icons/icons.test.tsx +43 -0
- package/src/components/icons/icons.tsx +45 -0
- package/src/components/icons/index.ts +4 -0
- package/src/components/index.ts +6 -0
- package/src/components/shell/BrandLockup.stories.tsx +27 -0
- package/src/components/shell/BrandLockup.test.tsx +23 -0
- package/src/components/shell/BrandLockup.tsx +47 -0
- package/src/components/shell/DeviceIndicator.stories.tsx +28 -0
- package/src/components/shell/DeviceIndicator.test.tsx +26 -0
- package/src/components/shell/DeviceIndicator.tsx +52 -0
- package/src/components/shell/DeviceMenu.stories.tsx +47 -0
- package/src/components/shell/DeviceMenu.test.tsx +40 -0
- package/src/components/shell/DeviceMenu.tsx +65 -0
- package/src/components/shell/DeviceRow.stories.tsx +38 -0
- package/src/components/shell/DeviceRow.test.tsx +37 -0
- package/src/components/shell/DeviceRow.tsx +58 -0
- package/src/components/shell/README.md +86 -0
- package/src/components/shell/SessionStatePill.stories.tsx +27 -0
- package/src/components/shell/SessionStatePill.test.tsx +25 -0
- package/src/components/shell/SessionStatePill.tsx +46 -0
- package/src/components/shell/TopBar.stories.tsx +49 -0
- package/src/components/shell/TopBar.test.tsx +36 -0
- package/src/components/shell/TopBar.tsx +89 -0
- package/src/components/shell/index.ts +8 -0
- package/src/components/ui/indicator/Indicator.stories.tsx +37 -1
- package/src/components/ui/indicator/Indicator.test.tsx +19 -1
- package/src/components/ui/indicator/Indicator.tsx +45 -6
- package/src/components/ui/indicator/index.ts +1 -1
- package/src/components/ui/spinner/Spinner.tsx +3 -2
- package/src/components/ui/toolbar-button/ToolbarButton.tsx +2 -1
- package/src/theme/ColorSystem.stories.tsx +323 -0
- package/src/theme/Colors.stories.tsx +69 -1
- package/src/theme/barrel.ts +1 -0
- package/src/theme/config.ts +16 -3
- package/src/theme/extracted-colors-dataviz.ts +21 -0
- package/src/theme/extracted-colors-ui.ts +20 -0
- package/src/theme/global.css +64 -52
- package/src/theme/gradients.test.ts +25 -0
- package/src/theme/gradients.ts +36 -0
- package/src/theme/tokens/primitives.test.ts +232 -0
- package/src/theme/tokens/primitives.ts +247 -0
- package/src/theme/tokens/semantic.ts +93 -81
- package/src/theme/workout-tokens.ts +22 -21
- package/src/utils/avatar-color.ts +3 -3
- package/tailwind.config.js +10 -3
package/dist/theme/index.js
CHANGED
|
@@ -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":
|
|
371
|
-
|
|
372
|
-
"brand-primary-
|
|
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":
|
|
378
|
-
"brand-primary-active":
|
|
379
|
-
"brand-secondary":
|
|
380
|
-
|
|
381
|
-
"brand-secondary-
|
|
382
|
-
|
|
383
|
-
"brand-secondary-
|
|
384
|
-
|
|
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":
|
|
393
|
-
|
|
394
|
-
"status-success-
|
|
395
|
-
|
|
396
|
-
"status-
|
|
397
|
-
|
|
398
|
-
"status-
|
|
399
|
-
"status-error":
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
"status-error-dark": primitiveColors.
|
|
404
|
-
|
|
405
|
-
"status-
|
|
406
|
-
"status-warning":
|
|
407
|
-
|
|
408
|
-
"status-warning-
|
|
409
|
-
|
|
410
|
-
"status-
|
|
411
|
-
|
|
412
|
-
"status-
|
|
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
|
-
//
|
|
621
|
+
// Blue
|
|
447
622
|
"data-2": discreteRainbow[14],
|
|
448
|
-
//
|
|
623
|
+
// Green
|
|
449
624
|
"data-3": discreteRainbow[17],
|
|
450
|
-
//
|
|
625
|
+
// Yellow
|
|
451
626
|
"data-4": discreteRainbow[25],
|
|
452
|
-
//
|
|
627
|
+
// Red
|
|
453
628
|
"data-5": discreteRainbow[8],
|
|
454
|
-
//
|
|
629
|
+
// Purple
|
|
455
630
|
"data-6": discreteRainbow[20],
|
|
456
|
-
//
|
|
631
|
+
// Orange
|
|
457
632
|
"data-7": discreteRainbow[13],
|
|
458
|
-
//
|
|
633
|
+
// Light Blue
|
|
459
634
|
"data-8": discreteRainbow[15],
|
|
460
|
-
//
|
|
635
|
+
// Light Green
|
|
461
636
|
"data-9": discreteRainbow[3],
|
|
462
|
-
//
|
|
637
|
+
// Lavender
|
|
463
638
|
"data-10": discreteRainbow[22],
|
|
464
|
-
//
|
|
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
|
-
//
|
|
651
|
+
// slightly off-white for elevated cards
|
|
477
652
|
"surface-raised": primitiveColors.neutral[100],
|
|
478
|
-
//
|
|
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":
|
|
515
|
-
"brand-primary-light":
|
|
516
|
-
"brand-primary-dark":
|
|
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":
|
|
519
|
-
"brand-primary-active":
|
|
520
|
-
"brand-secondary":
|
|
521
|
-
"brand-secondary-light":
|
|
522
|
-
"brand-secondary-dark":
|
|
523
|
-
"brand-secondary-subtle": "rgba(
|
|
524
|
-
"brand-secondary-hover":
|
|
525
|
-
"brand-secondary-active":
|
|
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":
|
|
531
|
-
"status-success-light":
|
|
532
|
-
"status-success-dark":
|
|
533
|
-
"status-success-subtle": "rgba(
|
|
534
|
-
"status-error":
|
|
535
|
-
"status-error-light":
|
|
536
|
-
"status-error-dark":
|
|
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-
|
|
539
|
-
"status-
|
|
540
|
-
"status-
|
|
541
|
-
"status-
|
|
542
|
-
"status-
|
|
543
|
-
"status-
|
|
544
|
-
"status-
|
|
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
|
-
//
|
|
767
|
+
// main surface
|
|
587
768
|
"surface-elevated": primitiveColors.charcoal[600],
|
|
588
|
-
//
|
|
769
|
+
// elevated surface
|
|
589
770
|
"surface-raised": primitiveColors.charcoal[500],
|
|
590
|
-
//
|
|
771
|
+
// raised surface
|
|
591
772
|
"surface-overlay": primitiveColors.charcoal[600],
|
|
592
|
-
//
|
|
773
|
+
// overlay surface
|
|
593
774
|
"surface-input": primitiveColors.charcoal[600],
|
|
594
|
-
//
|
|
775
|
+
// input surface
|
|
595
776
|
// Background colors
|
|
596
777
|
"background-base": primitiveColors.charcoal[900],
|
|
597
|
-
//
|
|
778
|
+
// darkest charcoal
|
|
598
779
|
"background-default": primitiveColors.charcoal[700],
|
|
599
|
-
//
|
|
780
|
+
// main background
|
|
600
781
|
"background-subtle": primitiveColors.charcoal[500],
|
|
601
|
-
//
|
|
782
|
+
// subtle background
|
|
602
783
|
// Border colors
|
|
603
784
|
"border-default": primitiveColors.charcoal[400],
|
|
604
|
-
//
|
|
785
|
+
// default border
|
|
605
786
|
"border-subtle": primitiveColors.charcoal[500],
|
|
606
|
-
//
|
|
787
|
+
// subtle border
|
|
607
788
|
"border-strong": primitiveColors.charcoal[300],
|
|
608
|
-
//
|
|
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
|
-
//
|
|
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": "
|
|
738
|
-
"--color-status-success-rgb": "
|
|
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-
|
|
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"],
|
|
@@ -1686,6 +1880,17 @@ function resolveColor(token, mode = "dark") {
|
|
|
1686
1880
|
return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
|
|
1687
1881
|
}
|
|
1688
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
|
+
|
|
1689
1894
|
// src/theme/presets/apply.ts
|
|
1690
1895
|
function colorKeyToVar(key) {
|
|
1691
1896
|
return `--color-${key}`;
|
|
@@ -1879,10 +2084,13 @@ function ThemeProvider({
|
|
|
1879
2084
|
return /* @__PURE__ */ jsx(reactNative.View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
|
|
1880
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
|