@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.mjs
CHANGED
|
@@ -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":
|
|
369
|
-
|
|
370
|
-
"brand-primary-
|
|
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":
|
|
376
|
-
"brand-primary-active":
|
|
377
|
-
"brand-secondary":
|
|
378
|
-
|
|
379
|
-
"brand-secondary-
|
|
380
|
-
|
|
381
|
-
"brand-secondary-
|
|
382
|
-
|
|
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":
|
|
391
|
-
|
|
392
|
-
"status-success-
|
|
393
|
-
|
|
394
|
-
"status-
|
|
395
|
-
|
|
396
|
-
"status-
|
|
397
|
-
"status-error":
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
"status-error-dark": primitiveColors.
|
|
402
|
-
|
|
403
|
-
"status-
|
|
404
|
-
"status-warning":
|
|
405
|
-
|
|
406
|
-
"status-warning-
|
|
407
|
-
|
|
408
|
-
"status-
|
|
409
|
-
|
|
410
|
-
"status-
|
|
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
|
-
//
|
|
619
|
+
// Blue
|
|
445
620
|
"data-2": discreteRainbow[14],
|
|
446
|
-
//
|
|
621
|
+
// Green
|
|
447
622
|
"data-3": discreteRainbow[17],
|
|
448
|
-
//
|
|
623
|
+
// Yellow
|
|
449
624
|
"data-4": discreteRainbow[25],
|
|
450
|
-
//
|
|
625
|
+
// Red
|
|
451
626
|
"data-5": discreteRainbow[8],
|
|
452
|
-
//
|
|
627
|
+
// Purple
|
|
453
628
|
"data-6": discreteRainbow[20],
|
|
454
|
-
//
|
|
629
|
+
// Orange
|
|
455
630
|
"data-7": discreteRainbow[13],
|
|
456
|
-
//
|
|
631
|
+
// Light Blue
|
|
457
632
|
"data-8": discreteRainbow[15],
|
|
458
|
-
//
|
|
633
|
+
// Light Green
|
|
459
634
|
"data-9": discreteRainbow[3],
|
|
460
|
-
//
|
|
635
|
+
// Lavender
|
|
461
636
|
"data-10": discreteRainbow[22],
|
|
462
|
-
//
|
|
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
|
-
//
|
|
649
|
+
// slightly off-white for elevated cards
|
|
475
650
|
"surface-raised": primitiveColors.neutral[100],
|
|
476
|
-
//
|
|
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":
|
|
513
|
-
"brand-primary-light":
|
|
514
|
-
"brand-primary-dark":
|
|
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":
|
|
517
|
-
"brand-primary-active":
|
|
518
|
-
"brand-secondary":
|
|
519
|
-
"brand-secondary-light":
|
|
520
|
-
"brand-secondary-dark":
|
|
521
|
-
"brand-secondary-subtle": "rgba(
|
|
522
|
-
"brand-secondary-hover":
|
|
523
|
-
"brand-secondary-active":
|
|
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":
|
|
529
|
-
"status-success-light":
|
|
530
|
-
"status-success-dark":
|
|
531
|
-
"status-success-subtle": "rgba(
|
|
532
|
-
"status-error":
|
|
533
|
-
"status-error-light":
|
|
534
|
-
"status-error-dark":
|
|
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-
|
|
537
|
-
"status-
|
|
538
|
-
"status-
|
|
539
|
-
"status-
|
|
540
|
-
"status-
|
|
541
|
-
"status-
|
|
542
|
-
"status-
|
|
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
|
-
//
|
|
765
|
+
// main surface
|
|
585
766
|
"surface-elevated": primitiveColors.charcoal[600],
|
|
586
|
-
//
|
|
767
|
+
// elevated surface
|
|
587
768
|
"surface-raised": primitiveColors.charcoal[500],
|
|
588
|
-
//
|
|
769
|
+
// raised surface
|
|
589
770
|
"surface-overlay": primitiveColors.charcoal[600],
|
|
590
|
-
//
|
|
771
|
+
// overlay surface
|
|
591
772
|
"surface-input": primitiveColors.charcoal[600],
|
|
592
|
-
//
|
|
773
|
+
// input surface
|
|
593
774
|
// Background colors
|
|
594
775
|
"background-base": primitiveColors.charcoal[900],
|
|
595
|
-
//
|
|
776
|
+
// darkest charcoal
|
|
596
777
|
"background-default": primitiveColors.charcoal[700],
|
|
597
|
-
//
|
|
778
|
+
// main background
|
|
598
779
|
"background-subtle": primitiveColors.charcoal[500],
|
|
599
|
-
//
|
|
780
|
+
// subtle background
|
|
600
781
|
// Border colors
|
|
601
782
|
"border-default": primitiveColors.charcoal[400],
|
|
602
|
-
//
|
|
783
|
+
// default border
|
|
603
784
|
"border-subtle": primitiveColors.charcoal[500],
|
|
604
|
-
//
|
|
785
|
+
// subtle border
|
|
605
786
|
"border-strong": primitiveColors.charcoal[300],
|
|
606
|
-
//
|
|
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
|
-
//
|
|
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": "
|
|
736
|
-
"--color-status-success-rgb": "
|
|
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-
|
|
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
|