@titan-design/react-ui 0.9.3 → 0.10.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 +78 -24
- package/dist/bodymap.js.map +1 -1
- package/dist/bodymap.mjs +78 -24
- package/dist/bodymap.mjs.map +1 -1
- package/dist/index.d.mts +31 -8
- package/dist/index.d.ts +31 -8
- package/dist/index.js +214 -113
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +210 -114
- package/dist/index.mjs.map +1 -1
- package/dist/pages.js +214 -157
- package/dist/pages.js.map +1 -1
- package/dist/pages.mjs +214 -157
- package/dist/pages.mjs.map +1 -1
- package/dist/theme/index.d.mts +129 -34
- package/dist/theme/index.d.ts +129 -34
- package/dist/theme/index.js +95 -19
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +92 -20
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/tokens-css.js +88 -24
- package/dist/theme/tokens-css.js.map +1 -1
- package/dist/theme/tokens-css.mjs +88 -24
- package/dist/theme/tokens-css.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/custom/Workout/BaseBadge.tsx +5 -5
- package/src/components/custom/Workout/RowInventory.stories.tsx +5 -2
- package/src/components/custom/Workout/S3FullRail.stories.tsx +13 -1
- package/src/components/custom/Workout/SessionHeader.tsx +2 -2
- package/src/components/custom/Workout/SessionRail.stories.tsx +4 -1
- package/src/components/custom/Workout/SessionRail.tsx +5 -5
- package/src/components/custom/Workout/SupersetWrapper.stories.tsx +16 -25
- package/src/components/custom/Workout/SupersetWrapper.tsx +1 -1
- package/src/components/custom/Workout/TempoDisplay.tsx +3 -7
- package/src/components/custom/Workout/VolumeLandmarkBar.stories.tsx +4 -1
- package/src/components/custom/Workout/WorkoutPill.tsx +2 -2
- package/src/components/ui/surface/Surface.stories.tsx +195 -1
- package/src/components/ui/surface/Surface.test.tsx +148 -9
- package/src/components/ui/surface/Surface.tsx +37 -9
- package/src/components/ui/surface/SurfaceContext.ts +48 -8
- package/src/components/ui/surface/index.ts +1 -0
- package/src/components/ui/surface/surface.contract.test.ts +283 -0
- package/src/theme/ColorSystem.stories.tsx +232 -47
- package/src/theme/config.ts +12 -0
- package/src/theme/elevation.ts +90 -67
- package/src/theme/global.css +35 -9
- package/src/theme/tokens/primitives.ts +40 -0
- package/src/theme/tokens/semantic.ts +63 -14
- package/tailwind.config.js +8 -0
package/dist/pages.js
CHANGED
|
@@ -40,13 +40,24 @@ var primitiveColors = {
|
|
|
40
40
|
200: "#3C3C3C",
|
|
41
41
|
300: "#2C2C2C",
|
|
42
42
|
400: "#1F1F1F",
|
|
43
|
-
500: "#1C1C1C",
|
|
44
|
-
600: "#191919",
|
|
45
|
-
700: "#161616",
|
|
46
|
-
900: "#101010"
|
|
47
|
-
},
|
|
43
|
+
500: "#1C1C1C"},
|
|
48
44
|
// Pure colors
|
|
49
45
|
white: "#FFFFFF"};
|
|
46
|
+
var surfaceRampDark = {
|
|
47
|
+
inset: "#13100D",
|
|
48
|
+
// L*4.5 — sub-shell well / pressed
|
|
49
|
+
background: "#1C1916",
|
|
50
|
+
// L*9 — shell / frame
|
|
51
|
+
base: "#252321",
|
|
52
|
+
// L*13.5 — main content plane
|
|
53
|
+
elevated: "#2C2A28",
|
|
54
|
+
// L*17 — nav / rail
|
|
55
|
+
raised: "#31302F",
|
|
56
|
+
// L*20 — cards
|
|
57
|
+
overlay: "#373635"
|
|
58
|
+
// L*22.5 — hero / popover
|
|
59
|
+
};
|
|
60
|
+
var backgroundFrameDark = "#100D0A";
|
|
50
61
|
var primitiveRamps = {
|
|
51
62
|
red: {
|
|
52
63
|
50: "#FFF4F4",
|
|
@@ -1368,83 +1379,6 @@ function InfoIcon(props) {
|
|
|
1368
1379
|
/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
|
|
1369
1380
|
] });
|
|
1370
1381
|
}
|
|
1371
|
-
var baseBadgeSizeConfig = {
|
|
1372
|
-
sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
|
|
1373
|
-
md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
|
|
1374
|
-
lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 }
|
|
1375
|
-
};
|
|
1376
|
-
var variantColors = {
|
|
1377
|
-
plain: { backgroundColor: "#1C1C1C", borderColor: "#1F1F1F" },
|
|
1378
|
-
pr: {
|
|
1379
|
-
backgroundColor: "rgba(255, 121, 0, 0.12)",
|
|
1380
|
-
borderColor: "rgba(255, 121, 0, 0.3)"
|
|
1381
|
-
}
|
|
1382
|
-
};
|
|
1383
|
-
function BaseBadge({
|
|
1384
|
-
variant = "plain",
|
|
1385
|
-
size = "md",
|
|
1386
|
-
icon,
|
|
1387
|
-
onPress,
|
|
1388
|
-
className,
|
|
1389
|
-
children,
|
|
1390
|
-
...props
|
|
1391
|
-
}) {
|
|
1392
|
-
const [scaleAnim] = react.useState(() => new reactNative.Animated.Value(1));
|
|
1393
|
-
const config = baseBadgeSizeConfig[size];
|
|
1394
|
-
const colors = variantColors[variant];
|
|
1395
|
-
const handlePressIn = () => {
|
|
1396
|
-
reactNative.Animated.timing(scaleAnim, {
|
|
1397
|
-
toValue: 0.97,
|
|
1398
|
-
duration: 150,
|
|
1399
|
-
useNativeDriver: true
|
|
1400
|
-
}).start();
|
|
1401
|
-
};
|
|
1402
|
-
const handlePressOut = () => {
|
|
1403
|
-
reactNative.Animated.timing(scaleAnim, {
|
|
1404
|
-
toValue: 1,
|
|
1405
|
-
duration: 150,
|
|
1406
|
-
useNativeDriver: true
|
|
1407
|
-
}).start();
|
|
1408
|
-
};
|
|
1409
|
-
const badge = /* @__PURE__ */ jsxs(
|
|
1410
|
-
reactNative.View,
|
|
1411
|
-
{
|
|
1412
|
-
className,
|
|
1413
|
-
style: {
|
|
1414
|
-
flexDirection: "row",
|
|
1415
|
-
alignItems: "center",
|
|
1416
|
-
gap: 3,
|
|
1417
|
-
// borderRadius 2 is intentional per workout-tokens.ts (squared-off pill)
|
|
1418
|
-
borderRadius: 2,
|
|
1419
|
-
borderWidth: 1,
|
|
1420
|
-
borderColor: colors.borderColor,
|
|
1421
|
-
backgroundColor: colors.backgroundColor,
|
|
1422
|
-
paddingHorizontal: config.paddingH,
|
|
1423
|
-
paddingVertical: config.paddingV
|
|
1424
|
-
},
|
|
1425
|
-
...props,
|
|
1426
|
-
children: [
|
|
1427
|
-
icon != null && /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "base-badge-icon", children: icon }),
|
|
1428
|
-
children
|
|
1429
|
-
]
|
|
1430
|
-
}
|
|
1431
|
-
);
|
|
1432
|
-
if (onPress) {
|
|
1433
|
-
return /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { transform: [{ scale: scaleAnim }] }, children: /* @__PURE__ */ jsx(
|
|
1434
|
-
reactNative.Pressable,
|
|
1435
|
-
{
|
|
1436
|
-
onPress,
|
|
1437
|
-
onPressIn: handlePressIn,
|
|
1438
|
-
onPressOut: handlePressOut,
|
|
1439
|
-
accessibilityRole: "button",
|
|
1440
|
-
accessibilityLabel: props.accessibilityLabel,
|
|
1441
|
-
testID: "base-badge-pressable",
|
|
1442
|
-
children: badge
|
|
1443
|
-
}
|
|
1444
|
-
) });
|
|
1445
|
-
}
|
|
1446
|
-
return badge;
|
|
1447
|
-
}
|
|
1448
1382
|
|
|
1449
1383
|
// src/theme/tokens/semantic.ts
|
|
1450
1384
|
var semanticColorsLight = {
|
|
@@ -1551,10 +1485,19 @@ var semanticColorsLight = {
|
|
|
1551
1485
|
"surface-overlay": primitiveColors.white,
|
|
1552
1486
|
"surface-input": primitiveColors.neutral[50],
|
|
1553
1487
|
// Input field background (filled variant)
|
|
1488
|
+
// Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
|
|
1489
|
+
// the dark ramp's `inset` plane; a placeholder pairing, not part of the
|
|
1490
|
+
// dark-ramp investigation (surface.contract.test.ts is dark-mode only).
|
|
1491
|
+
"surface-inset": primitiveColors.neutral[300],
|
|
1554
1492
|
// Background colors (background-*)
|
|
1555
1493
|
"background-base": "#EBEBEB",
|
|
1556
1494
|
"background-default": primitiveColors.white,
|
|
1557
1495
|
"background-subtle": primitiveColors.neutral[50],
|
|
1496
|
+
// Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
|
|
1497
|
+
// one step below `background-base` (darker still than `surface-inset`
|
|
1498
|
+
// above, mirroring the dark-mode ordering). Placeholder pairing for light
|
|
1499
|
+
// mode (see dark-mode note on `surface-inset` above).
|
|
1500
|
+
"background-frame": primitiveColors.neutral[400],
|
|
1558
1501
|
// Border colors (border-*)
|
|
1559
1502
|
"border-default": "#E8E9EB",
|
|
1560
1503
|
"border-subtle": primitiveColors.neutral[100],
|
|
@@ -1570,6 +1513,11 @@ var semanticColorsLight = {
|
|
|
1570
1513
|
// Input field border on focus
|
|
1571
1514
|
"border-input-error": primitiveColors.red[600],
|
|
1572
1515
|
// Input field border on error
|
|
1516
|
+
// Alpha hairline separators (surface-independent — composite toward black on
|
|
1517
|
+
// light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
|
|
1518
|
+
"hairline-subtle": "rgba(0, 0, 0, 0.06)",
|
|
1519
|
+
"hairline-default": "rgba(0, 0, 0, 0.09)",
|
|
1520
|
+
"hairline-strong": "rgba(0, 0, 0, 0.14)",
|
|
1573
1521
|
// Interactive states (interactive-*)
|
|
1574
1522
|
"interactive-hover": "rgba(55, 65, 81, 0.04)",
|
|
1575
1523
|
"interactive-focus": "rgba(55, 65, 81, 0.12)",
|
|
@@ -1662,25 +1610,46 @@ var semanticColorsDark = {
|
|
|
1662
1610
|
"text-inverse": primitiveColors.neutral[900],
|
|
1663
1611
|
"text-link": "#828DF8",
|
|
1664
1612
|
"text-link-hover": primitiveColors.blue[400],
|
|
1665
|
-
// Surface colors - dark backgrounds
|
|
1666
|
-
|
|
1667
|
-
//
|
|
1668
|
-
|
|
1669
|
-
//
|
|
1670
|
-
|
|
1671
|
-
//
|
|
1672
|
-
|
|
1673
|
-
//
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
//
|
|
1677
|
-
"
|
|
1678
|
-
//
|
|
1679
|
-
"
|
|
1680
|
-
//
|
|
1681
|
-
"
|
|
1682
|
-
//
|
|
1683
|
-
|
|
1613
|
+
// Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
|
|
1614
|
+
// S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
|
|
1615
|
+
// `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
|
|
1616
|
+
// and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
|
|
1617
|
+
// tracks one plane above `surface-base`, same relative position as before the remap.
|
|
1618
|
+
// `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
|
|
1619
|
+
// so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
|
|
1620
|
+
// deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
|
|
1621
|
+
// `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
|
|
1622
|
+
// levels — parallel workstream, not this branch).
|
|
1623
|
+
"surface-base": surfaceRampDark.base,
|
|
1624
|
+
// main surface (#252321, L*13.5)
|
|
1625
|
+
"surface-elevated": surfaceRampDark.elevated,
|
|
1626
|
+
// elevated surface (#2C2A28, L*17 — nav/rail)
|
|
1627
|
+
"surface-raised": surfaceRampDark.raised,
|
|
1628
|
+
// raised surface (#31302F, L*20 — cards)
|
|
1629
|
+
"surface-overlay": surfaceRampDark.overlay,
|
|
1630
|
+
// overlay surface (#373635, L*22.5 — hero/popover)
|
|
1631
|
+
"surface-input": surfaceRampDark.elevated,
|
|
1632
|
+
// input surface (#2C2A28 — one plane above base)
|
|
1633
|
+
"surface-inset": surfaceRampDark.inset,
|
|
1634
|
+
// deepest pressed pit (#13100D, L*4.5 — sub-shell well)
|
|
1635
|
+
// Background colors — same ramp, the frame/shell end of it.
|
|
1636
|
+
"background-base": surfaceRampDark.background,
|
|
1637
|
+
// shell / frame (#1C1916, L*9 — Surface level="background")
|
|
1638
|
+
"background-default": surfaceRampDark.base,
|
|
1639
|
+
// main background (#252321, L*13.5 — matches surface-base)
|
|
1640
|
+
"background-subtle": surfaceRampDark.elevated,
|
|
1641
|
+
// subtle background (#2C2A28, L*17 — matches surface-elevated)
|
|
1642
|
+
// Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
|
|
1643
|
+
// `background-base`, darker even than `surface-inset` — it exits the content
|
|
1644
|
+
// ramp entirely rather than sitting in it. See `backgroundFrameDark` in
|
|
1645
|
+
// primitives.ts.
|
|
1646
|
+
"background-frame": backgroundFrameDark,
|
|
1647
|
+
// frame / bezel (#100D0A, L*3.79)
|
|
1648
|
+
// Border colors — `border-subtle` (#1C1C1C) previously collided with
|
|
1649
|
+
// `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
|
|
1650
|
+
// re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
|
|
1651
|
+
// distinct from every surface hex without needing to change it — see
|
|
1652
|
+
// `surface.contract.test.ts` R2/R4.
|
|
1684
1653
|
"border-default": primitiveColors.charcoal[400],
|
|
1685
1654
|
// default border
|
|
1686
1655
|
"border-subtle": primitiveColors.charcoal[500],
|
|
@@ -1694,6 +1663,14 @@ var semanticColorsDark = {
|
|
|
1694
1663
|
"border-input-hover": primitiveColors.neutral[500],
|
|
1695
1664
|
"border-input-focus": "#828DF8",
|
|
1696
1665
|
"border-input-error": primitiveColors.red[500],
|
|
1666
|
+
// Alpha hairline separators — the primary separation cue (§4/S-2). Self-
|
|
1667
|
+
// normalizing: composites toward white by ~the same amount on ANY plane, so
|
|
1668
|
+
// one family works at every elevation instead of per-surface border tokens.
|
|
1669
|
+
// Shadows are demoted to floating-overlay use only (not shipped as a fill
|
|
1670
|
+
// separator here — see elevation.ts, follow-up S-4).
|
|
1671
|
+
"hairline-subtle": "rgba(255, 255, 255, 0.06)",
|
|
1672
|
+
"hairline-default": "rgba(255, 255, 255, 0.09)",
|
|
1673
|
+
"hairline-strong": "rgba(255, 255, 255, 0.14)",
|
|
1697
1674
|
// Interactive states
|
|
1698
1675
|
"interactive-hover": "rgba(255, 255, 255, 0.04)",
|
|
1699
1676
|
"interactive-focus": "rgba(255, 255, 255, 0.12)",
|
|
@@ -1712,6 +1689,86 @@ function getSemanticColors(mode) {
|
|
|
1712
1689
|
return mode === "dark" ? semanticColorsDark : semanticColorsLight;
|
|
1713
1690
|
}
|
|
1714
1691
|
|
|
1692
|
+
// src/components/custom/Workout/BaseBadge.tsx
|
|
1693
|
+
var t = getSemanticColors("dark");
|
|
1694
|
+
var baseBadgeSizeConfig = {
|
|
1695
|
+
sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
|
|
1696
|
+
md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
|
|
1697
|
+
lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 }
|
|
1698
|
+
};
|
|
1699
|
+
var variantColors = {
|
|
1700
|
+
plain: { backgroundColor: t["surface-raised"], borderColor: "#1F1F1F" },
|
|
1701
|
+
pr: {
|
|
1702
|
+
backgroundColor: "rgba(255, 121, 0, 0.12)",
|
|
1703
|
+
borderColor: "rgba(255, 121, 0, 0.3)"
|
|
1704
|
+
}
|
|
1705
|
+
};
|
|
1706
|
+
function BaseBadge({
|
|
1707
|
+
variant = "plain",
|
|
1708
|
+
size = "md",
|
|
1709
|
+
icon,
|
|
1710
|
+
onPress,
|
|
1711
|
+
className,
|
|
1712
|
+
children,
|
|
1713
|
+
...props
|
|
1714
|
+
}) {
|
|
1715
|
+
const [scaleAnim] = react.useState(() => new reactNative.Animated.Value(1));
|
|
1716
|
+
const config = baseBadgeSizeConfig[size];
|
|
1717
|
+
const colors = variantColors[variant];
|
|
1718
|
+
const handlePressIn = () => {
|
|
1719
|
+
reactNative.Animated.timing(scaleAnim, {
|
|
1720
|
+
toValue: 0.97,
|
|
1721
|
+
duration: 150,
|
|
1722
|
+
useNativeDriver: true
|
|
1723
|
+
}).start();
|
|
1724
|
+
};
|
|
1725
|
+
const handlePressOut = () => {
|
|
1726
|
+
reactNative.Animated.timing(scaleAnim, {
|
|
1727
|
+
toValue: 1,
|
|
1728
|
+
duration: 150,
|
|
1729
|
+
useNativeDriver: true
|
|
1730
|
+
}).start();
|
|
1731
|
+
};
|
|
1732
|
+
const badge = /* @__PURE__ */ jsxs(
|
|
1733
|
+
reactNative.View,
|
|
1734
|
+
{
|
|
1735
|
+
className,
|
|
1736
|
+
style: {
|
|
1737
|
+
flexDirection: "row",
|
|
1738
|
+
alignItems: "center",
|
|
1739
|
+
gap: 3,
|
|
1740
|
+
// borderRadius 2 is intentional per workout-tokens.ts (squared-off pill)
|
|
1741
|
+
borderRadius: 2,
|
|
1742
|
+
borderWidth: 1,
|
|
1743
|
+
borderColor: colors.borderColor,
|
|
1744
|
+
backgroundColor: colors.backgroundColor,
|
|
1745
|
+
paddingHorizontal: config.paddingH,
|
|
1746
|
+
paddingVertical: config.paddingV
|
|
1747
|
+
},
|
|
1748
|
+
...props,
|
|
1749
|
+
children: [
|
|
1750
|
+
icon != null && /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "base-badge-icon", children: icon }),
|
|
1751
|
+
children
|
|
1752
|
+
]
|
|
1753
|
+
}
|
|
1754
|
+
);
|
|
1755
|
+
if (onPress) {
|
|
1756
|
+
return /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { transform: [{ scale: scaleAnim }] }, children: /* @__PURE__ */ jsx(
|
|
1757
|
+
reactNative.Pressable,
|
|
1758
|
+
{
|
|
1759
|
+
onPress,
|
|
1760
|
+
onPressIn: handlePressIn,
|
|
1761
|
+
onPressOut: handlePressOut,
|
|
1762
|
+
accessibilityRole: "button",
|
|
1763
|
+
accessibilityLabel: props.accessibilityLabel,
|
|
1764
|
+
testID: "base-badge-pressable",
|
|
1765
|
+
children: badge
|
|
1766
|
+
}
|
|
1767
|
+
) });
|
|
1768
|
+
}
|
|
1769
|
+
return badge;
|
|
1770
|
+
}
|
|
1771
|
+
|
|
1715
1772
|
// src/components/custom/Workout/PrBadge.tsx
|
|
1716
1773
|
var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
|
|
1717
1774
|
var typeLabels = {
|
|
@@ -1962,7 +2019,7 @@ function MetricCell({ children, color, fontSize = 11 }) {
|
|
|
1962
2019
|
}
|
|
1963
2020
|
|
|
1964
2021
|
// src/components/custom/Workout/SetsRepsLoad.tsx
|
|
1965
|
-
var
|
|
2022
|
+
var t2 = getSemanticColors("dark");
|
|
1966
2023
|
var TIMES = "\xD7";
|
|
1967
2024
|
var AT = "@";
|
|
1968
2025
|
function SetsRepsLoad({
|
|
@@ -1974,8 +2031,8 @@ function SetsRepsLoad({
|
|
|
1974
2031
|
className,
|
|
1975
2032
|
...props
|
|
1976
2033
|
}) {
|
|
1977
|
-
const value =
|
|
1978
|
-
const sep =
|
|
2034
|
+
const value = t2["text-primary"];
|
|
2035
|
+
const sep = t2["text-tertiary"];
|
|
1979
2036
|
return /* @__PURE__ */ jsxs(
|
|
1980
2037
|
reactNative.View,
|
|
1981
2038
|
{
|
|
@@ -2306,19 +2363,19 @@ function alpha(color, opacity) {
|
|
|
2306
2363
|
}
|
|
2307
2364
|
|
|
2308
2365
|
// src/components/custom/Workout/TempoDisplay.tsx
|
|
2309
|
-
var
|
|
2366
|
+
var t3 = getSemanticColors("dark");
|
|
2310
2367
|
var INTER = "Inter, sans-serif";
|
|
2311
2368
|
var TEXT_TERTIARY = "#6B7280";
|
|
2312
|
-
var STATUS_ERROR =
|
|
2313
|
-
var STATUS_SUCCESS =
|
|
2314
|
-
var STATUS_WARNING =
|
|
2369
|
+
var STATUS_ERROR = t3["status-error"];
|
|
2370
|
+
var STATUS_SUCCESS = t3["status-success"];
|
|
2371
|
+
var STATUS_WARNING = t3["status-warning"];
|
|
2315
2372
|
var ON_TARGET_MS = 100;
|
|
2316
2373
|
function getTempoFillPct(elapsedMs, targetMs) {
|
|
2317
2374
|
if (!targetMs) return 100;
|
|
2318
2375
|
return Math.min(100, elapsedMs / targetMs * 100);
|
|
2319
2376
|
}
|
|
2320
2377
|
function activeNumberTone(elapsedMs, targetMs) {
|
|
2321
|
-
if (targetMs == null) return
|
|
2378
|
+
if (targetMs == null) return t3["text-primary"];
|
|
2322
2379
|
const remainingMs = targetMs - elapsedMs;
|
|
2323
2380
|
if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
|
|
2324
2381
|
if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
|
|
@@ -2470,7 +2527,7 @@ function TempoDisplay({
|
|
|
2470
2527
|
style: {
|
|
2471
2528
|
flexDirection: "row",
|
|
2472
2529
|
alignItems: "center",
|
|
2473
|
-
backgroundColor: "
|
|
2530
|
+
backgroundColor: t3["surface-raised"],
|
|
2474
2531
|
paddingHorizontal: chromePadX,
|
|
2475
2532
|
paddingVertical: chromePadY,
|
|
2476
2533
|
borderRadius: chromeRadius
|
|
@@ -2485,7 +2542,7 @@ function TempoDisplay({
|
|
|
2485
2542
|
fontSize: labelFont,
|
|
2486
2543
|
fontWeight: "500",
|
|
2487
2544
|
// Live-muted green while a rep is running, tertiary at rest.
|
|
2488
|
-
color: live ?
|
|
2545
|
+
color: live ? t3["status-live-muted"] : TEXT_TERTIARY,
|
|
2489
2546
|
letterSpacing: 0.5,
|
|
2490
2547
|
textTransform: "uppercase",
|
|
2491
2548
|
marginRight: Math.round(fontSize * 0.5)
|
|
@@ -2543,7 +2600,7 @@ function TempoDisplay({
|
|
|
2543
2600
|
reactNative.View,
|
|
2544
2601
|
{
|
|
2545
2602
|
style: {
|
|
2546
|
-
backgroundColor: "
|
|
2603
|
+
backgroundColor: t3["surface-overlay"],
|
|
2547
2604
|
borderRadius: 6,
|
|
2548
2605
|
paddingVertical: 8,
|
|
2549
2606
|
paddingHorizontal: 12,
|
|
@@ -2596,14 +2653,14 @@ function TempoDisplay({
|
|
|
2596
2653
|
}
|
|
2597
2654
|
);
|
|
2598
2655
|
}
|
|
2599
|
-
var
|
|
2656
|
+
var t4 = getSemanticColors("dark");
|
|
2600
2657
|
var INDICATOR_CONFIG = {
|
|
2601
|
-
imbalance: { Icon: ScaleIcon, color:
|
|
2602
|
-
overshoot: { Icon: AlertTriangleIcon, color:
|
|
2603
|
-
"velocity-loss": { Icon: TrendingDownIcon, color:
|
|
2604
|
-
"missed-reps": { Icon: CircleSlashIcon, color:
|
|
2605
|
-
pr: { Icon: AwardIcon, color:
|
|
2606
|
-
info: { Icon: InfoIcon, color:
|
|
2658
|
+
imbalance: { Icon: ScaleIcon, color: t4["status-error"], label: "Left/right imbalance" },
|
|
2659
|
+
overshoot: { Icon: AlertTriangleIcon, color: t4["status-error"], label: "Load overshoot" },
|
|
2660
|
+
"velocity-loss": { Icon: TrendingDownIcon, color: t4["status-warning"], label: "Velocity loss" },
|
|
2661
|
+
"missed-reps": { Icon: CircleSlashIcon, color: t4["status-warning"], label: "Missed reps" },
|
|
2662
|
+
pr: { Icon: AwardIcon, color: t4["status-success"], label: "Personal record" },
|
|
2663
|
+
info: { Icon: InfoIcon, color: t4["status-info"], label: "More info" }
|
|
2607
2664
|
};
|
|
2608
2665
|
function ExerciseIndicator({ kind, onPress, className, ...props }) {
|
|
2609
2666
|
const { Icon, color, label } = INDICATOR_CONFIG[kind];
|
|
@@ -3619,7 +3676,7 @@ function RestTimer({
|
|
|
3619
3676
|
var DEFAULTS = {
|
|
3620
3677
|
label: "SS",
|
|
3621
3678
|
color: getSemanticColors("dark")["brand-primary"],
|
|
3622
|
-
bgBase: "
|
|
3679
|
+
bgBase: getSemanticColors("dark")["background-base"]
|
|
3623
3680
|
};
|
|
3624
3681
|
function SupersetWrapper({
|
|
3625
3682
|
label = DEFAULTS.label,
|
|
@@ -4401,11 +4458,11 @@ function CardContent({ children, className }) {
|
|
|
4401
4458
|
function CardFooter({ children, className }) {
|
|
4402
4459
|
return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
|
|
4403
4460
|
}
|
|
4404
|
-
var
|
|
4461
|
+
var t5 = getSemanticColors("dark");
|
|
4405
4462
|
var solidVariantColors = {
|
|
4406
|
-
success:
|
|
4407
|
-
warning:
|
|
4408
|
-
error:
|
|
4463
|
+
success: t5["status-success"],
|
|
4464
|
+
warning: t5["status-warning"],
|
|
4465
|
+
error: t5["status-error"],
|
|
4409
4466
|
neutral: "#6B7280"
|
|
4410
4467
|
};
|
|
4411
4468
|
var ringVariantStyles = {
|
|
@@ -4445,8 +4502,8 @@ var iconColors = {
|
|
|
4445
4502
|
warning: "#6B4000",
|
|
4446
4503
|
error: "#5C1A1A",
|
|
4447
4504
|
neutral: "#D1D5DB",
|
|
4448
|
-
"on-track":
|
|
4449
|
-
deviation:
|
|
4505
|
+
"on-track": t5["status-success"],
|
|
4506
|
+
deviation: t5["status-warning"],
|
|
4450
4507
|
future: "#6B7280"
|
|
4451
4508
|
};
|
|
4452
4509
|
var sizeDimensions = {
|
|
@@ -4532,13 +4589,13 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
|
|
|
4532
4589
|
var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
|
|
4533
4590
|
|
|
4534
4591
|
// src/components/custom/Workout/MesoStatusCard.tsx
|
|
4535
|
-
var
|
|
4536
|
-
var BRAND_PRIMARY5 =
|
|
4592
|
+
var t6 = getSemanticColors("dark");
|
|
4593
|
+
var BRAND_PRIMARY5 = t6["brand-primary"];
|
|
4537
4594
|
var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
|
|
4538
4595
|
var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
|
|
4539
|
-
var SUCCESS =
|
|
4540
|
-
var WARNING =
|
|
4541
|
-
var ERROR =
|
|
4596
|
+
var SUCCESS = t6["status-success"];
|
|
4597
|
+
var WARNING = t6["status-warning"];
|
|
4598
|
+
var ERROR = t6["status-error"];
|
|
4542
4599
|
var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, BRAND_PRIMARY_LIGHT];
|
|
4543
4600
|
var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
|
|
4544
4601
|
var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
|
|
@@ -4909,8 +4966,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
|
|
|
4909
4966
|
var PLOT_LEFT = 26;
|
|
4910
4967
|
var TOOLTIP_WIDTH = 124;
|
|
4911
4968
|
function timeOf(dateStr) {
|
|
4912
|
-
const
|
|
4913
|
-
return Number.isNaN(
|
|
4969
|
+
const t12 = Date.parse(dateStr);
|
|
4970
|
+
return Number.isNaN(t12) ? 0 : t12;
|
|
4914
4971
|
}
|
|
4915
4972
|
function formatValue(value) {
|
|
4916
4973
|
return `${Math.round(value)}`;
|
|
@@ -5399,10 +5456,10 @@ function StrengthTrendChart({
|
|
|
5399
5456
|
}
|
|
5400
5457
|
);
|
|
5401
5458
|
}
|
|
5402
|
-
var
|
|
5403
|
-
var STATUS_SUCCESS3 =
|
|
5404
|
-
var STATUS_WARNING3 =
|
|
5405
|
-
var STATUS_INFO =
|
|
5459
|
+
var t7 = getSemanticColors("dark");
|
|
5460
|
+
var STATUS_SUCCESS3 = t7["status-success"];
|
|
5461
|
+
var STATUS_WARNING3 = t7["status-warning"];
|
|
5462
|
+
var STATUS_INFO = t7["status-info"];
|
|
5406
5463
|
var DOT_BORDER = "#F3F4F6";
|
|
5407
5464
|
var BAND_FILL = "rgba(46,213,115,0.1)";
|
|
5408
5465
|
var BAND_EDGE = "rgba(46,213,115,0.45)";
|
|
@@ -5445,8 +5502,8 @@ function interpEdge(pixels, x, key) {
|
|
|
5445
5502
|
const a = pixels[i];
|
|
5446
5503
|
const b = pixels[i + 1];
|
|
5447
5504
|
if (x >= a.x && x <= b.x) {
|
|
5448
|
-
const
|
|
5449
|
-
return a[key] +
|
|
5505
|
+
const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
|
|
5506
|
+
return a[key] + t12 * (b[key] - a[key]);
|
|
5450
5507
|
}
|
|
5451
5508
|
}
|
|
5452
5509
|
return pixels[pixels.length - 1][key];
|
|
@@ -6485,12 +6542,12 @@ function Badge({
|
|
|
6485
6542
|
}
|
|
6486
6543
|
);
|
|
6487
6544
|
}
|
|
6488
|
-
var
|
|
6545
|
+
var t8 = getSemanticColors("dark");
|
|
6489
6546
|
var statusBgColors = {
|
|
6490
6547
|
completed: "rgba(46,213,115,0.15)",
|
|
6491
6548
|
current: "rgba(255,121,0,0.15)",
|
|
6492
6549
|
next: "transparent",
|
|
6493
|
-
upcoming: "
|
|
6550
|
+
upcoming: t8["surface-raised"],
|
|
6494
6551
|
missed: "rgba(209,67,67,0.1)",
|
|
6495
6552
|
deload: "rgba(186,41,150,0.15)"
|
|
6496
6553
|
};
|
|
@@ -6503,9 +6560,9 @@ var statusBorderStyles = {
|
|
|
6503
6560
|
deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
|
|
6504
6561
|
};
|
|
6505
6562
|
var textColors = {
|
|
6506
|
-
completed:
|
|
6507
|
-
current:
|
|
6508
|
-
next:
|
|
6563
|
+
completed: t8["status-success"],
|
|
6564
|
+
current: t8["brand-primary"],
|
|
6565
|
+
next: t8["brand-primary"],
|
|
6509
6566
|
upcoming: "#6B7280",
|
|
6510
6567
|
missed: "rgba(209,67,67,0.7)",
|
|
6511
6568
|
deload: WORKOUT_PILL_DELOAD
|
|
@@ -6638,19 +6695,19 @@ function WorkoutPill({
|
|
|
6638
6695
|
}
|
|
6639
6696
|
return pill;
|
|
6640
6697
|
}
|
|
6641
|
-
var
|
|
6698
|
+
var t9 = getSemanticColors("dark");
|
|
6642
6699
|
var TRACK_BG = "#333333";
|
|
6643
6700
|
var LABEL_COLOR = "#6B7280";
|
|
6644
6701
|
var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
|
|
6645
6702
|
var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
|
|
6646
6703
|
var ZONE = {
|
|
6647
|
-
building:
|
|
6704
|
+
building: t9["status-success"],
|
|
6648
6705
|
// below target ramp-up
|
|
6649
|
-
approaching:
|
|
6706
|
+
approaching: t9["status-warning"],
|
|
6650
6707
|
// nearing target
|
|
6651
|
-
target:
|
|
6708
|
+
target: t9["brand-primary"],
|
|
6652
6709
|
// exactly at target
|
|
6653
|
-
over1:
|
|
6710
|
+
over1: t9["status-error"],
|
|
6654
6711
|
// mild over-target
|
|
6655
6712
|
over2: WORKOUT_TOKENS.intensity.over2,
|
|
6656
6713
|
// moderate over-target
|
|
@@ -7073,13 +7130,13 @@ function MesoCard({
|
|
|
7073
7130
|
}
|
|
7074
7131
|
) });
|
|
7075
7132
|
}
|
|
7076
|
-
var
|
|
7133
|
+
var t10 = getSemanticColors("dark");
|
|
7077
7134
|
var dotColorMap = {
|
|
7078
7135
|
untrained: "#2C2C2C",
|
|
7079
|
-
behind:
|
|
7080
|
-
ontrack:
|
|
7081
|
-
target:
|
|
7082
|
-
over:
|
|
7136
|
+
behind: t10["brand-secondary"],
|
|
7137
|
+
ontrack: t10["status-success"],
|
|
7138
|
+
target: t10["brand-primary"],
|
|
7139
|
+
over: t10["status-error"]
|
|
7083
7140
|
};
|
|
7084
7141
|
function MuscleGroupChip({
|
|
7085
7142
|
name,
|
|
@@ -7153,10 +7210,10 @@ function MuscleGroupChip({
|
|
|
7153
7210
|
}
|
|
7154
7211
|
|
|
7155
7212
|
// src/components/custom/Workout/WorkoutCard.tsx
|
|
7156
|
-
var
|
|
7213
|
+
var t11 = getSemanticColors("dark");
|
|
7157
7214
|
var COLORS = {
|
|
7158
|
-
statusSuccess:
|
|
7159
|
-
brandPrimary:
|
|
7215
|
+
statusSuccess: t11["status-success"],
|
|
7216
|
+
brandPrimary: t11["brand-primary"],
|
|
7160
7217
|
borderDefault: "#1F1F1F",
|
|
7161
7218
|
brandPrimarySubtle: "rgba(255,121,0,0.06)"
|
|
7162
7219
|
};
|