@titan-design/react-ui 0.12.0 → 0.13.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/README.md +46 -47
- package/dist/bodymap.js +768 -701
- package/dist/bodymap.js.map +1 -1
- package/dist/bodymap.mjs +770 -703
- package/dist/bodymap.mjs.map +1 -1
- package/dist/index.d.mts +1320 -215
- package/dist/index.d.ts +1320 -215
- package/dist/index.js +5996 -4498
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5773 -4357
- package/dist/index.mjs.map +1 -1
- package/dist/{pages-CvsFqNtx.d.mts → pages-CpW3OB3g.d.mts} +21 -3
- package/dist/{pages-B1hqnGIC.d.ts → pages-_3Ajpiqu.d.ts} +21 -3
- package/dist/pages.d.mts +1 -1
- package/dist/pages.d.ts +1 -1
- package/dist/pages.js +1435 -1428
- package/dist/pages.js.map +1 -1
- package/dist/pages.mjs +1443 -1436
- package/dist/pages.mjs.map +1 -1
- package/dist/theme/index.d.mts +202 -1042
- package/dist/theme/index.d.ts +202 -1042
- package/dist/theme/index.js +215 -300
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +202 -296
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/tokens-css.js +62 -5
- package/dist/theme/tokens-css.js.map +1 -1
- package/dist/theme/tokens-css.mjs +62 -5
- package/dist/theme/tokens-css.mjs.map +1 -1
- package/dist/theme/tokens.d.mts +972 -0
- package/dist/theme/tokens.d.ts +972 -0
- package/dist/theme/tokens.js +904 -0
- package/dist/theme/tokens.js.map +1 -0
- package/dist/theme/tokens.mjs +880 -0
- package/dist/theme/tokens.mjs.map +1 -0
- package/docs/audits/2026-09-08-critique-addenda.md +51 -0
- package/docs/audits/2026-09-08-library-critique.md +212 -0
- package/docs/library-roadmap.md +99 -0
- package/package.json +7 -1
- package/src/arch/arch-graph.freshness.test.ts +52 -0
- package/src/arch/arch-graph.json +5021 -1617
- package/src/components/custom/ActiveWork/CoChangeChip.stories.tsx +44 -0
- package/src/components/custom/ActiveWork/CoChangeChip.test.tsx +29 -0
- package/src/components/custom/ActiveWork/CoChangeChip.tsx +48 -0
- package/src/components/custom/ActiveWork/Eyebrow.stories.tsx +25 -0
- package/src/components/custom/ActiveWork/Eyebrow.test.tsx +16 -0
- package/src/components/custom/ActiveWork/Eyebrow.tsx +26 -0
- package/src/components/custom/ActiveWork/FileActivityDetail.stories.tsx +50 -0
- package/src/components/custom/ActiveWork/FileActivityDetail.test.tsx +66 -0
- package/src/components/custom/ActiveWork/FileActivityDetail.tsx +202 -0
- package/src/components/custom/ActiveWork/FileActivityRow.stories.tsx +70 -0
- package/src/components/custom/ActiveWork/FileActivityRow.test.tsx +67 -0
- package/src/components/custom/ActiveWork/FileActivityRow.tsx +130 -0
- package/src/components/custom/ActiveWork/FileHistoryExplorer.stories.tsx +84 -0
- package/src/components/custom/ActiveWork/FileHistoryExplorer.test.tsx +99 -0
- package/src/components/custom/ActiveWork/FileHistoryExplorer.tsx +138 -0
- package/src/components/custom/ActiveWork/FilePathLabel.stories.tsx +39 -0
- package/src/components/custom/ActiveWork/FilePathLabel.test.tsx +53 -0
- package/src/components/custom/ActiveWork/FilePathLabel.tsx +63 -0
- package/src/components/custom/ActiveWork/InitiativeBrief.stories.tsx +50 -0
- package/src/components/custom/ActiveWork/InitiativeBrief.test.tsx +62 -0
- package/src/components/custom/ActiveWork/InitiativeBrief.tsx +181 -0
- package/src/components/custom/ActiveWork/InitiativeCard.stories.tsx +73 -0
- package/src/components/custom/ActiveWork/InitiativeCard.test.tsx +68 -0
- package/src/components/custom/ActiveWork/InitiativeCard.tsx +136 -0
- package/src/components/custom/ActiveWork/InitiativeHeader.stories.tsx +59 -0
- package/src/components/custom/ActiveWork/InitiativeHeader.test.tsx +40 -0
- package/src/components/custom/ActiveWork/InitiativeHeader.tsx +73 -0
- package/src/components/custom/ActiveWork/InitiativeReader.stories.tsx +145 -0
- package/src/components/custom/ActiveWork/OpenLoops.stories.tsx +58 -0
- package/src/components/custom/ActiveWork/OpenLoops.test.tsx +61 -0
- package/src/components/custom/ActiveWork/OpenLoops.tsx +107 -0
- package/src/components/custom/ActiveWork/PortfolioOverview.stories.tsx +101 -0
- package/src/components/custom/ActiveWork/PortfolioOverview.test.tsx +81 -0
- package/src/components/custom/ActiveWork/PortfolioOverview.tsx +83 -0
- package/src/components/custom/ActiveWork/README.md +305 -0
- package/src/components/custom/ActiveWork/SessionDetail.stories.tsx +71 -0
- package/src/components/custom/ActiveWork/SessionDetail.test.tsx +84 -0
- package/src/components/custom/ActiveWork/SessionDetail.tsx +180 -0
- package/src/components/custom/ActiveWork/SessionList.stories.tsx +69 -0
- package/src/components/custom/ActiveWork/SessionList.test.tsx +78 -0
- package/src/components/custom/ActiveWork/SessionList.tsx +103 -0
- package/src/components/custom/ActiveWork/SessionListItem.stories.tsx +64 -0
- package/src/components/custom/ActiveWork/SessionListItem.test.tsx +62 -0
- package/src/components/custom/ActiveWork/SessionListItem.tsx +152 -0
- package/src/components/custom/ActiveWork/SessionReader.stories.tsx +113 -0
- package/src/components/custom/ActiveWork/SeverityLabel.stories.tsx +51 -0
- package/src/components/custom/ActiveWork/SeverityLabel.test.tsx +68 -0
- package/src/components/custom/ActiveWork/SeverityLabel.tsx +97 -0
- package/src/components/custom/ActiveWork/TaskRow.stories.tsx +63 -0
- package/src/components/custom/ActiveWork/TaskRow.test.tsx +112 -0
- package/src/components/custom/ActiveWork/TaskRow.tsx +176 -0
- package/src/components/custom/ActiveWork/TaskTable.stories.tsx +123 -0
- package/src/components/custom/ActiveWork/TaskTable.test.tsx +233 -0
- package/src/components/custom/ActiveWork/TaskTable.tsx +321 -0
- package/src/components/custom/ActiveWork/active-work-depth.test.tsx +102 -0
- package/src/components/custom/ActiveWork/file-history-fixture.ts +91 -0
- package/src/components/custom/ActiveWork/format-time.test.ts +23 -0
- package/src/components/custom/ActiveWork/format-time.ts +32 -0
- package/src/components/custom/ActiveWork/index.ts +19 -0
- package/src/components/custom/ActiveWork/initiative-fixture.ts +104 -0
- package/src/components/custom/ActiveWork/session-fixture.ts +267 -0
- package/src/components/custom/ActiveWork/session-linkers.ts +56 -0
- package/src/components/custom/ActiveWork/task-list-fixture.ts +97 -0
- package/src/components/custom/CircularTimer/CircularTimer.stories.tsx +4 -3
- package/src/components/custom/DateTime/DateTime.stories.tsx +2 -1
- package/src/components/custom/DateTime/DateTime.test.tsx +3 -1
- package/src/components/custom/EmptyState/EmptyState.stories.tsx +22 -9
- package/src/components/custom/EmptyState/EmptyState.test.tsx +7 -13
- package/src/components/custom/EmptyState/EmptyState.tsx +4 -18
- package/src/components/custom/Fatigue/DualGhostSpark.stories.tsx +4 -3
- package/src/components/custom/Fatigue/FatigueLights.stories.tsx +2 -2
- package/src/components/custom/Fatigue/GhostSpark.stories.tsx +4 -3
- package/src/components/custom/Fatigue/LiveFatigueCard.stories.tsx +2 -2
- package/src/components/custom/Fatigue/LiveFatigueCard.tsx +8 -4
- package/src/components/custom/Fatigue/LiveFatiguePanel.stories.tsx +116 -6
- package/src/components/custom/Fatigue/LiveFatiguePanel.test.tsx +134 -0
- package/src/components/custom/Fatigue/LiveFatiguePanel.tsx +54 -83
- package/src/components/custom/Fatigue/README.md +40 -3
- package/src/components/custom/Fatigue/RomProgressionChart.stories.tsx +2 -2
- package/src/components/custom/Fatigue/SilverRedPalette.stories.tsx +2 -1
- package/src/components/custom/Fatigue/VelocityHero.stories.tsx +4 -3
- package/src/components/custom/Fatigue/VerdictHero.stories.tsx +2 -2
- package/src/components/custom/Fatigue/fatigue-mock.test.ts +0 -5
- package/src/components/custom/Fatigue/fatigue-mock.ts +2 -10
- package/src/components/custom/Fatigue/fatigue-tokens.ts +12 -0
- package/src/components/custom/Fatigue/index.ts +17 -5
- package/src/components/custom/Fatigue/panel-layout.test.ts +149 -0
- package/src/components/custom/Fatigue/panel-layout.ts +185 -0
- package/src/components/custom/Gauge/Gauge.stories.tsx +2 -2
- package/src/components/custom/Gauge/Gauge.test.tsx +1 -1
- package/src/components/custom/Gauge/Gauge.tsx +4 -1
- package/src/components/custom/Metric/Metric.stories.tsx +10 -1
- package/src/components/custom/Metric/Metric.test.tsx +1 -3
- package/src/components/custom/Metric/Metric.tsx +5 -20
- package/src/components/custom/Prose/MarkdownProse.stories.tsx +88 -0
- package/src/components/custom/Prose/MarkdownProse.test.tsx +87 -0
- package/src/components/custom/Prose/MarkdownProse.tsx +201 -0
- package/src/components/custom/Prose/README.md +58 -0
- package/src/components/custom/Prose/index.ts +1 -0
- package/src/components/custom/Scatter/Scatter.stories.tsx +46 -8
- package/src/components/custom/Scatter/Scatter.test.tsx +2 -2
- package/src/components/custom/Scatter/Scatter.tsx +116 -14
- package/src/components/custom/Sidebar/Sidebar.stories.tsx +40 -7
- package/src/components/custom/Sidebar/Sidebar.test.tsx +5 -1
- package/src/components/custom/Sidebar/Sidebar.tsx +16 -33
- package/src/components/custom/Table/Table.stories.tsx +98 -15
- package/src/components/custom/Table/Table.test.tsx +273 -86
- package/src/components/custom/Table/Table.tsx +159 -67
- package/src/components/custom/Table/column-fit.test.ts +75 -0
- package/src/components/custom/Table/column-fit.ts +116 -0
- package/src/components/custom/Table/index.ts +9 -0
- package/src/components/custom/TimerReadout/TimerReadout.stories.tsx +8 -6
- package/src/components/custom/Treemap/Treemap.stories.tsx +2 -2
- package/src/components/custom/Treemap/Treemap.test.tsx +1 -1
- package/src/components/custom/Treemap/Treemap.tsx +7 -2
- package/src/components/custom/Typography/Typography.stories.tsx +28 -1
- package/src/components/custom/Typography/Typography.test.tsx +34 -0
- package/src/components/custom/Typography/Typography.tsx +6 -0
- package/src/components/custom/Typography/index.ts +1 -8
- package/src/components/custom/Workout/ActiveWorkoutPage.stories.tsx +9 -1
- package/src/components/custom/Workout/BaseBadge.stories.tsx +19 -7
- package/src/components/custom/Workout/BaseBadge.test.tsx +31 -11
- package/src/components/custom/Workout/BaseBadge.tsx +3 -0
- package/src/components/custom/Workout/BodyMap.stories.tsx +4 -1
- package/src/components/custom/Workout/BodyMap.tsx +3 -1
- package/src/components/custom/Workout/BodyMapDetailPanel.stories.tsx +16 -4
- package/src/components/custom/Workout/BodyMapDetailPanel.test.tsx +11 -15
- package/src/components/custom/Workout/BodyMapDetailPanel.tsx +45 -9
- package/src/components/custom/Workout/CapacityBandChart.stories.tsx +10 -8
- package/src/components/custom/Workout/CapacityBandChart.test.tsx +24 -51
- package/src/components/custom/Workout/CapacityBandChart.tsx +139 -108
- package/src/components/custom/Workout/DeviationBar.stories.tsx +1 -1
- package/src/components/custom/Workout/DeviationBar.test.tsx +5 -2
- package/src/components/custom/Workout/DeviationBar.tsx +21 -16
- package/src/components/custom/Workout/DualVelocityStrip.stories.tsx +182 -0
- package/src/components/custom/Workout/DualVelocityStrip.test.tsx +3 -2
- package/src/components/custom/Workout/ExerciseCard.stories.tsx +8 -7
- package/src/components/custom/Workout/ExerciseCard.test.tsx +13 -3
- package/src/components/custom/Workout/ExerciseCard.tsx +42 -51
- package/src/components/custom/Workout/ExerciseCardHeading.stories.tsx +7 -7
- package/src/components/custom/Workout/ExerciseDetailPage.stories.tsx +9 -1
- package/src/components/custom/Workout/ExerciseHeading.stories.tsx +8 -8
- package/src/components/custom/Workout/ExerciseHeading.tsx +8 -5
- package/src/components/custom/Workout/ExerciseIndicator.stories.tsx +6 -4
- package/src/components/custom/Workout/ExerciseIndicator.test.tsx +27 -11
- package/src/components/custom/Workout/ExerciseIndicator.tsx +14 -15
- package/src/components/custom/Workout/FatigueMeter.stories.tsx +5 -5
- package/src/components/custom/Workout/InputBar.stories.tsx +4 -5
- package/src/components/custom/Workout/IntensityBar.stories.tsx +1 -1
- package/src/components/custom/Workout/IntensityBar.test.tsx +5 -1
- package/src/components/custom/Workout/IntensityBar.tsx +4 -2
- package/src/components/custom/Workout/LiveAuraFrame.stories.tsx +5 -4
- package/src/components/custom/Workout/MesoCard.stories.tsx +4 -1
- package/src/components/custom/Workout/MesoCard.test.tsx +7 -18
- package/src/components/custom/Workout/MesoCard.tsx +12 -9
- package/src/components/custom/Workout/MesoProgressBar.stories.tsx +1 -1
- package/src/components/custom/Workout/MesoProgressBar.test.tsx +18 -11
- package/src/components/custom/Workout/MesoProgressBar.tsx +15 -13
- package/src/components/custom/Workout/MesoStatusCard.stories.tsx +2 -1
- package/src/components/custom/Workout/MesoStatusCard.test.tsx +14 -44
- package/src/components/custom/Workout/MesoStatusCard.tsx +9 -23
- package/src/components/custom/Workout/MetricTiles.stories.tsx +3 -2
- package/src/components/custom/Workout/MuscleGroupChip.stories.tsx +2 -8
- package/src/components/custom/Workout/MuscleGroupChip.test.tsx +23 -31
- package/src/components/custom/Workout/MuscleGroupChip.tsx +28 -67
- package/src/components/custom/Workout/PlaceholderStrip.stories.tsx +1 -1
- package/src/components/custom/Workout/PlaceholderStrip.test.tsx +17 -10
- package/src/components/custom/Workout/PlaceholderStrip.tsx +9 -8
- package/src/components/custom/Workout/PrBadge.stories.tsx +2 -1
- package/src/components/custom/Workout/PrBadge.test.tsx +3 -9
- package/src/components/custom/Workout/PrBadge.tsx +13 -17
- package/src/components/custom/Workout/PrHistoryModal.stories.tsx +4 -1
- package/src/components/custom/Workout/PrHistoryModal.test.tsx +13 -36
- package/src/components/custom/Workout/PrHistoryModal.tsx +8 -4
- package/src/components/custom/Workout/ProgramPlanningPage.stories.tsx +6 -1
- package/src/components/custom/Workout/README.md +12 -7
- package/src/components/custom/Workout/ReadinessCheck.stories.tsx +3 -2
- package/src/components/custom/Workout/ReadinessCheck.test.tsx +12 -18
- package/src/components/custom/Workout/ReadinessCheck.tsx +19 -3
- package/src/components/custom/Workout/RestTimer.stories.tsx +3 -2
- package/src/components/custom/Workout/ScheduleTiles.stories.tsx +3 -2
- package/src/components/custom/Workout/ScheduleTiles.test.tsx +3 -4
- package/src/components/custom/Workout/ScheduleTiles.tsx +4 -7
- package/src/components/custom/Workout/SegmentedBar.stories.tsx +5 -5
- package/src/components/custom/Workout/SegmentedBar.tsx +6 -2
- package/src/components/custom/Workout/SegmentedProgressBar.stories.tsx +5 -5
- package/src/components/custom/Workout/SessionHeader.stories.tsx +6 -6
- package/src/components/custom/Workout/SessionHeader.tsx +12 -12
- package/src/components/custom/Workout/SessionRail.stories.tsx +12 -11
- package/src/components/custom/Workout/SessionRail.tsx +7 -9
- package/src/components/custom/Workout/SetBar.stories.tsx +10 -6
- package/src/components/custom/Workout/SetBar.test.tsx +49 -4
- package/src/components/custom/Workout/SetBar.tsx +38 -12
- package/src/components/custom/Workout/SetRow.stories.tsx +3 -2
- package/src/components/custom/Workout/SetRow.test.tsx +16 -2
- package/src/components/custom/Workout/SetRow.tsx +61 -23
- package/src/components/custom/Workout/SetStrip.stories.tsx +60 -5
- package/src/components/custom/Workout/SetStrip.test.tsx +25 -0
- package/src/components/custom/Workout/SetStrip.tsx +24 -4
- package/src/components/custom/Workout/SetTableHeader.stories.tsx +6 -6
- package/src/components/custom/Workout/SetTableHeader.tsx +9 -12
- package/src/components/custom/Workout/SetsRepsLoad.stories.tsx +7 -7
- package/src/components/custom/Workout/SetsRepsLoad.tsx +3 -5
- package/src/components/custom/Workout/Sparkline.stories.tsx +1 -1
- package/src/components/custom/Workout/Sparkline.test.tsx +37 -19
- package/src/components/custom/Workout/Sparkline.tsx +14 -18
- package/src/components/custom/Workout/StatusDot.stories.tsx +1 -1
- package/src/components/custom/Workout/StatusDot.test.tsx +44 -5
- package/src/components/custom/Workout/StatusDot.tsx +93 -63
- package/src/components/custom/Workout/StatusPill.stories.tsx +1 -1
- package/src/components/custom/Workout/StatusPill.test.tsx +6 -15
- package/src/components/custom/Workout/StatusPill.tsx +27 -38
- package/src/components/custom/Workout/StrengthTrendChart.stories.tsx +9 -3
- package/src/components/custom/Workout/StrengthTrendChart.test.tsx +15 -37
- package/src/components/custom/Workout/StrengthTrendChart.tsx +31 -30
- package/src/components/custom/Workout/SupersetWrapper.stories.tsx +27 -64
- package/src/components/custom/Workout/SupersetWrapper.test.tsx +16 -14
- package/src/components/custom/Workout/SupersetWrapper.tsx +17 -21
- package/src/components/custom/Workout/TempoDisplay.stories.tsx +22 -7
- package/src/components/custom/Workout/TempoDisplay.test.tsx +18 -4
- package/src/components/custom/Workout/TrainingStatusPage.stories.tsx +9 -1
- package/src/components/custom/Workout/VelocityStrip.compact.stories.tsx +4 -1
- package/src/components/custom/Workout/VelocityStrip.dual.stories.tsx +7 -4
- package/src/components/custom/Workout/VelocityStrip.expanded.stories.tsx +4 -1
- package/src/components/custom/Workout/VelocityStrip.hero.stories.tsx +4 -1
- package/src/components/custom/Workout/VelocityStrip.stories.tsx +12 -6
- package/src/components/custom/Workout/VelocityStrip.tsx +3 -0
- package/src/components/custom/Workout/VolumeLandmarkBar.stories.tsx +6 -7
- package/src/components/custom/Workout/VolumeLandmarkBar.tsx +15 -6
- package/src/components/custom/Workout/WeekRow.stories.tsx +4 -1
- package/src/components/custom/Workout/WeekRow.test.tsx +18 -15
- package/src/components/custom/Workout/WeekRow.tsx +23 -16
- package/src/components/custom/Workout/WeightBadge.stories.tsx +2 -1
- package/src/components/custom/Workout/WeightBadge.test.tsx +50 -19
- package/src/components/custom/Workout/WeightBadge.tsx +28 -27
- package/src/components/custom/Workout/WorkoutCard.stories.tsx +6 -1
- package/src/components/custom/Workout/WorkoutCard.test.tsx +18 -0
- package/src/components/custom/Workout/WorkoutCard.tsx +35 -57
- package/src/components/custom/Workout/WorkoutPill.stories.tsx +5 -2
- package/src/components/custom/Workout/WorkoutPill.test.tsx +39 -7
- package/src/components/custom/Workout/WorkoutPill.tsx +88 -57
- package/src/components/custom/Workout/ZoneTrack.stories.tsx +7 -6
- package/src/components/custom/Workout/ZoneTrack.tsx +10 -9
- package/src/components/custom/Workout/index.ts +5 -0
- package/src/components/custom/Workout/metricText.stories.tsx +6 -5
- package/src/components/custom/Workout/metricText.tsx +4 -0
- package/src/components/custom/Workout/setHeadingKit.tsx +207 -26
- package/src/components/custom/charts/README.md +61 -0
- package/src/components/custom/charts/SetBarChart.test.tsx +30 -1
- package/src/components/custom/charts/SetBarChart.tsx +42 -4
- package/src/components/custom/charts/SparkBars.stories.tsx +55 -0
- package/src/components/custom/charts/SparkBars.test.tsx +69 -0
- package/src/components/custom/charts/SparkBars.tsx +85 -0
- package/src/components/custom/charts/index.ts +3 -0
- package/src/components/custom/index.ts +3 -0
- package/src/components/custom/stepper/Stepper.stories.tsx +13 -10
- package/src/components/custom/stepper/Stepper.test.tsx +1 -7
- package/src/components/custom/stepper/Stepper.tsx +13 -28
- package/src/components/icons/icons.stories.tsx +1 -1
- package/src/components/icons/icons.tsx +51 -0
- package/src/components/shell/AppShell.stories.tsx +150 -0
- package/src/components/shell/AppShell.test.tsx +70 -0
- package/src/components/shell/AppShell.tsx +90 -0
- package/src/components/shell/BrandLockup.stories.tsx +66 -5
- package/src/components/shell/BrandLockup.test.tsx +34 -1
- package/src/components/shell/BrandLockup.tsx +27 -11
- package/src/components/shell/NavItem.stories.tsx +4 -4
- package/src/components/shell/NavItem.test.tsx +17 -0
- package/src/components/shell/NavItem.tsx +17 -5
- package/src/components/shell/README.md +90 -27
- package/src/components/shell/SideNav.stories.tsx +38 -7
- package/src/components/shell/SideNav.test.tsx +16 -8
- package/src/components/shell/SideNav.tsx +17 -17
- package/src/components/shell/TopBar.stories.tsx +44 -19
- package/src/components/shell/TopBar.test.tsx +34 -12
- package/src/components/shell/TopBar.tsx +61 -40
- package/src/components/shell/brands.tsx +66 -0
- package/src/components/shell/index.ts +9 -8
- package/src/components/shell/{DeviceIndicator.stories.tsx → workout/DeviceIndicator.stories.tsx} +2 -2
- package/src/components/shell/{DeviceIndicator.tsx → workout/DeviceIndicator.tsx} +2 -2
- package/src/components/shell/{DeviceMenu.stories.tsx → workout/DeviceMenu.stories.tsx} +2 -2
- package/src/components/shell/{DeviceMenu.tsx → workout/DeviceMenu.tsx} +3 -3
- package/src/components/shell/{DeviceRow.stories.tsx → workout/DeviceRow.stories.tsx} +2 -2
- package/src/components/shell/{DeviceRow.tsx → workout/DeviceRow.tsx} +3 -3
- package/src/components/shell/{SessionStatePill.stories.tsx → workout/SessionStatePill.stories.tsx} +2 -2
- package/src/components/shell/{SessionStatePill.tsx → workout/SessionStatePill.tsx} +5 -3
- package/src/components/shell/workout/WorkoutShell.stories.tsx +71 -0
- package/src/components/shell/{DashboardShell.test.tsx → workout/WorkoutShell.test.tsx} +19 -8
- package/src/components/shell/workout/WorkoutShell.tsx +77 -0
- package/src/components/shell/workout/WorkoutTopBar.stories.tsx +58 -0
- package/src/components/shell/workout/WorkoutTopBar.test.tsx +39 -0
- package/src/components/shell/workout/WorkoutTopBar.tsx +52 -0
- package/src/components/shell/workout/index.ts +9 -0
- package/src/components/shell/workout/workoutNavItems.tsx +16 -0
- package/src/components/ui/README.md +110 -0
- package/src/components/ui/alert/Alert.stories.tsx +1 -1
- package/src/components/ui/autocomplete/Autocomplete.stories.tsx +11 -13
- package/src/components/ui/autocomplete/Autocomplete.test.tsx +7 -25
- package/src/components/ui/autocomplete/Autocomplete.tsx +21 -28
- package/src/components/ui/avatar/Avatar.stories.tsx +1 -1
- package/src/components/ui/avatar/Avatar.tsx +2 -10
- package/src/components/ui/badge/Badge.stories.tsx +83 -28
- package/src/components/ui/badge/Badge.test.tsx +19 -3
- package/src/components/ui/badge/Badge.tsx +48 -55
- package/src/components/ui/breadcrumbs/Breadcrumbs.stories.tsx +1 -1
- package/src/components/ui/breadcrumbs/Breadcrumbs.tsx +4 -16
- package/src/components/ui/button/Button.stories.tsx +46 -12
- package/src/components/ui/button/Button.tsx +32 -25
- package/src/components/ui/card/Card.stories.tsx +90 -94
- package/src/components/ui/card/Card.test.tsx +80 -6
- package/src/components/ui/card/Card.tsx +150 -203
- package/src/components/ui/checkbox/Checkbox.stories.tsx +1 -1
- package/src/components/ui/checkbox/Checkbox.tsx +6 -26
- package/src/components/ui/chip/Chip.stories.tsx +37 -13
- package/src/components/ui/chip/Chip.test.tsx +10 -6
- package/src/components/ui/chip/Chip.tsx +76 -91
- package/src/components/ui/collapse/Collapse.stories.tsx +23 -23
- package/src/components/ui/collapse/Collapse.tsx +6 -11
- package/src/components/ui/data-row/DataRow.stories.tsx +9 -2
- package/src/components/ui/data-row/DataRow.test.tsx +5 -15
- package/src/components/ui/data-row/DataRow.tsx +18 -7
- package/src/components/ui/divider/Divider.stories.tsx +1 -1
- package/src/components/ui/divider/Divider.tsx +1 -5
- package/src/components/ui/drawer/Drawer.stories.tsx +5 -16
- package/src/components/ui/drawer/Drawer.tsx +13 -30
- package/src/components/ui/floating-overlay-depth.test.tsx +143 -0
- package/src/components/ui/form-field/FormField.stories.tsx +6 -20
- package/src/components/ui/form-field/FormField.test.tsx +1 -5
- package/src/components/ui/form-field/FormField.tsx +10 -46
- package/src/components/ui/help-tip/HelpTip.stories.tsx +8 -19
- package/src/components/ui/help-tip/HelpTip.test.tsx +1 -3
- package/src/components/ui/help-tip/HelpTip.tsx +21 -22
- package/src/components/ui/help-tip/index.ts +7 -1
- package/src/components/ui/icon-box/IconBox.stories.tsx +1 -1
- package/src/components/ui/icon-box/IconBox.test.tsx +1 -7
- package/src/components/ui/icon-box/IconBox.tsx +2 -12
- package/src/components/ui/indicator/Indicator.stories.tsx +1 -1
- package/src/components/ui/indicator/Indicator.tsx +20 -14
- package/src/components/ui/input/Input.stories.tsx +3 -11
- package/src/components/ui/input/Input.test.tsx +2 -10
- package/src/components/ui/input/Input.tsx +10 -25
- package/src/components/ui/input/index.ts +7 -1
- package/src/components/ui/link/Link.stories.tsx +19 -7
- package/src/components/ui/list-item/ListItem.stories.tsx +11 -2
- package/src/components/ui/list-item/ListItem.tsx +2 -9
- package/src/components/ui/menu/Menu.stories.tsx +21 -15
- package/src/components/ui/menu/Menu.test.tsx +2 -11
- package/src/components/ui/menu/Menu.tsx +12 -14
- package/src/components/ui/menu/index.ts +8 -1
- package/src/components/ui/modal/Modal.stories.tsx +2 -2
- package/src/components/ui/modal/Modal.tsx +29 -19
- package/src/components/ui/pill/Pill.stories.tsx +58 -23
- package/src/components/ui/pill/Pill.test.tsx +101 -3
- package/src/components/ui/pill/Pill.tsx +164 -49
- package/src/components/ui/pill/index.ts +1 -1
- package/src/components/ui/popover/Popover.stories.tsx +5 -7
- package/src/components/ui/popover/Popover.test.tsx +1 -6
- package/src/components/ui/popover/Popover.tsx +20 -15
- package/src/components/ui/popover/index.ts +7 -1
- package/src/components/ui/progress/Progress.stories.tsx +3 -12
- package/src/components/ui/progress/Progress.test.tsx +1 -5
- package/src/components/ui/radio/Radio.stories.tsx +42 -21
- package/src/components/ui/radio/Radio.test.tsx +6 -2
- package/src/components/ui/radio/Radio.tsx +23 -22
- package/src/components/ui/section/Section.stories.tsx +5 -14
- package/src/components/ui/section/Section.test.tsx +1 -6
- package/src/components/ui/section/Section.tsx +1 -3
- package/src/components/ui/section/index.ts +1 -5
- package/src/components/ui/select/Select.stories.tsx +3 -13
- package/src/components/ui/select/Select.test.tsx +2 -11
- package/src/components/ui/select/Select.tsx +14 -14
- package/src/components/ui/skeleton/Skeleton.stories.tsx +3 -11
- package/src/components/ui/skeleton/Skeleton.tsx +3 -14
- package/src/components/ui/skeleton/index.ts +1 -7
- package/src/components/ui/spinner/Spinner.stories.tsx +1 -1
- package/src/components/ui/spinner/Spinner.tsx +1 -4
- package/src/components/ui/stack/Stack.stories.tsx +1 -1
- package/src/components/ui/stack/Stack.tsx +1 -1
- package/src/components/ui/surface/Surface.stories.tsx +17 -5
- package/src/components/ui/surface/Surface.test.tsx +88 -28
- package/src/components/ui/surface/Surface.tsx +37 -87
- package/src/components/ui/surface/SurfaceContext.ts +22 -62
- package/src/components/ui/surface/index.ts +8 -0
- package/src/components/ui/surface/resolveSurface.ts +98 -0
- package/src/components/ui/surface/surface.contract.test.ts +6 -1
- package/src/components/ui/switch/Switch.stories.tsx +1 -1
- package/src/components/ui/switch/Switch.tsx +7 -6
- package/src/components/ui/tabs/Tabs.stories.tsx +1 -1
- package/src/components/ui/tabs/Tabs.tsx +7 -22
- package/src/components/ui/tabs/index.ts +1 -7
- package/src/components/ui/tile/Tile.stories.tsx +1 -1
- package/src/components/ui/tile/Tile.tsx +3 -0
- package/src/components/ui/toast/Toast.stories.tsx +1 -1
- package/src/components/ui/toast/Toast.test.tsx +2 -8
- package/src/components/ui/toast/Toast.tsx +43 -53
- package/src/components/ui/toast/index.ts +0 -1
- package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx +92 -71
- package/src/components/ui/toolbar-button/ToolbarButton.test.tsx +3 -18
- package/src/components/ui/toolbar-button/ToolbarButton.tsx +25 -43
- package/src/components/ui/tooltip/Tooltip.stories.tsx +12 -3
- package/src/components/ui/tooltip/Tooltip.test.tsx +21 -3
- package/src/components/ui/tooltip/Tooltip.tsx +55 -36
- package/src/components/ui/tooltip/index.ts +1 -1
- package/src/components/ui/trigger/TriggerSurface.test.tsx +215 -0
- package/src/components/ui/trigger/TriggerSurface.tsx +81 -0
- package/src/components/ui/trigger/index.ts +2 -0
- package/src/stories/PresetShowcase.stories.tsx +100 -47
- package/src/test/no-device-internals.test.ts +3 -3
- package/src/theme/ChoosingTokens.stories.tsx +48 -0
- package/src/theme/ColorPalettes.stories.tsx +62 -45
- package/src/theme/ColorPrimitives.stories.tsx +35 -35
- package/src/theme/Depth.stories.tsx +132 -65
- package/src/theme/DepthCalibration.stories.tsx +24 -22
- package/src/theme/ThemeProvider.test.tsx +4 -4
- package/src/theme/barrel.ts +7 -6
- package/src/theme/color-stories.coverage.test.ts +1 -1
- package/src/theme/color-utils.ts +41 -29
- package/src/theme/config.completeness.test.ts +1 -1
- package/src/theme/config.ts +28 -0
- package/src/theme/elevation.test.ts +82 -56
- package/src/theme/elevation.ts +77 -561
- package/src/theme/global.css +30 -2
- package/src/theme/grey-ramp.test.ts +24 -8
- package/src/theme/lift.test.ts +39 -0
- package/src/theme/lift.ts +102 -0
- package/src/theme/materials.test.ts +5 -2
- package/src/theme/materials.ts +38 -4
- package/src/theme/native-theming-guard.test.ts +5 -5
- package/src/theme/presets/apply.ts +4 -0
- package/src/theme/presets/audiobook.ts +5 -2
- package/src/theme/presets/default.ts +4 -0
- package/src/theme/presets/index.ts +14 -1
- package/src/theme/presets/types.ts +1 -1
- package/src/theme/semantic-contrast.test.ts +13 -4
- package/src/theme/status-distinctness.test.ts +66 -0
- package/src/theme/surface-planes.test.ts +37 -0
- package/src/theme/surface-planes.ts +68 -0
- package/src/theme/token-export-guard.test.ts +102 -0
- package/src/theme/tokens/primitives.test.ts +15 -7
- package/src/theme/tokens/primitives.ts +67 -35
- package/src/theme/tokens/semantic.ts +71 -37
- package/src/theme/wash-ladder.test.ts +58 -0
- package/src/theme/workout-tokens.ts +1 -7
- package/src/types/jest-axe.d.ts +2 -6
- package/src/types/raw-md.d.ts +5 -0
- package/src/utils/colors.ts +4 -4
- package/src/utils/form.ts +1 -3
- package/src/utils/index.ts +2 -7
- package/src/utils/number-format.ts +17 -0
- package/src/utils/workout-format.ts +15 -6
- package/src/web-jsx/jsx-runtime.ts +1 -5
- package/tailwind.config.js +5 -0
- package/src/components/custom/Workout/ExerciseCardUnified.stories.tsx +0 -151
- package/src/components/custom/Workout/RowInventory.stories.tsx +0 -408
- package/src/components/custom/Workout/S3FullRail.stories.tsx +0 -46
- package/src/components/custom/Workout/S3SessionPace.stories.tsx +0 -95
- package/src/components/custom/Workout/S3SessionRailHeading.stories.tsx +0 -61
- package/src/components/custom/Workout/S3SetTypes.stories.tsx +0 -176
- package/src/components/custom/Workout/S3WorkoutExpansion.stories.tsx +0 -240
- package/src/components/shell/DashboardShell.stories.tsx +0 -65
- package/src/components/shell/DashboardShell.tsx +0 -75
- package/src/components/shell/SessionRailSpecimen.stories.tsx +0 -753
- package/src/theme/elevation.stories.tsx +0 -346
- package/src/utils/useTheme.ts +0 -72
- /package/src/components/shell/{DeviceIndicator.test.tsx → workout/DeviceIndicator.test.tsx} +0 -0
- /package/src/components/shell/{DeviceMenu.test.tsx → workout/DeviceMenu.test.tsx} +0 -0
- /package/src/components/shell/{DeviceRow.test.tsx → workout/DeviceRow.test.tsx} +0 -0
- /package/src/components/shell/{SessionStatePill.test.tsx → workout/SessionStatePill.test.tsx} +0 -0
package/dist/theme/index.d.ts
CHANGED
|
@@ -1,1062 +1,140 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ThemeMode, getSemanticColors } from './tokens.js';
|
|
2
|
+
export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort } from './tokens.js';
|
|
3
|
+
import { ViewStyle, TextStyle, ViewProps } from 'react-native';
|
|
2
4
|
|
|
3
5
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* -
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* GREY MAPPING (TD-07.14) — how the old cool scales resolved onto `greyRamp`.
|
|
23
|
-
*
|
|
24
|
-
* Every grey below came off `grey` (pure R=G=B) or `neutral` (cool, R−B
|
|
25
|
-
* down to −26). They were snapped by NEAREST L*, not by matching step numbers,
|
|
26
|
-
* because the two old scales were numbered incompatibly: `grey` ran
|
|
27
|
-
* INVERTED and compressed (0 = #6E6E6E lightest, 900 = #101010 darkest), so
|
|
28
|
-
* `grey[400]` and `greyRamp[400]` have nothing to do with each other.
|
|
29
|
-
*
|
|
30
|
-
* grey 200→800 300→900 400→925 500→950
|
|
31
|
-
* neutral 50→50 100→100 300→200 400→400 500→600 600→700 900→950
|
|
32
|
-
*
|
|
33
|
-
* Surfaces move ΔE 1.9–4.8 — at or near imperceptible. The TEXT roles move
|
|
34
|
-
* further (8.6–12.8), and that is the intended part of the change: they are
|
|
35
|
-
* picking up the warmth the surfaces already had.
|
|
36
|
-
*
|
|
37
|
-
* Light gets its own column because strict L*-nearest collapsed `neutral[50]`
|
|
38
|
-
* and `[100]` onto one step, flattening surface-elevated into surface-raised.
|
|
39
|
-
* Light is still deferred as a design question — there is no `surfaceRampLight`.
|
|
40
|
-
*
|
|
41
|
-
* `border-default`, `-subtle` and `-strong` are GONE, replaced by `hairline-*`.
|
|
42
|
-
* Once the planes became ramp steps, every value dark enough to read as a
|
|
43
|
-
* border was also a plane's fill. Alpha composites instead of colliding.
|
|
44
|
-
*
|
|
45
|
-
* `text-tertiary` on dark is the one role that ignores L*-nearest; see it.
|
|
6
|
+
* LIFT — the treatment a plane wears when it sits above its neighbour.
|
|
7
|
+
*
|
|
8
|
+
* Tone says which plane a container sits on; lift says it is resting ON the one
|
|
9
|
+
* below. Two cues, both lit from above:
|
|
10
|
+
*
|
|
11
|
+
* RIM a crisp 1px top rim-light. The one neumorphism half that survives
|
|
12
|
+
* near black. paperSheet's hero rim is 0.20 (VW-99 run 2); a card is
|
|
13
|
+
* not a hero, so the default lift sits one grade quieter at 0.12,
|
|
14
|
+
* chosen against 0.20 side by side in Lab/Depth (2026-09-08).
|
|
15
|
+
* AMBIENT a soft shadow cast onto the plane below, growing with the number of
|
|
16
|
+
* planes crossed. Content lifts (1–3) are tight; floating lifts (4–5)
|
|
17
|
+
* are large and soft, describing separation from the page rather than
|
|
18
|
+
* rank in a stack.
|
|
19
|
+
*
|
|
20
|
+
* Neither cue is a hairline ring: a ring is an edge, not a lift, and stays the
|
|
21
|
+
* divider's job. Web carries the multi-layer boxShadow; native gets the single
|
|
22
|
+
* shadow* set. The tone underneath is load-bearing on its own either way.
|
|
46
23
|
*/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
readonly 'on-brand-secondary': "#FFFFFF";
|
|
62
|
-
readonly 'status-success': "#2ED573";
|
|
63
|
-
readonly 'status-success-light': "#58F69E";
|
|
64
|
-
readonly 'status-success-dark': "#298732";
|
|
65
|
-
readonly 'status-success-subtle': "#E3FFEE";
|
|
66
|
-
readonly 'status-live': "#2ED573";
|
|
67
|
-
readonly 'status-live-muted': "#22A444";
|
|
68
|
-
readonly 'status-error': "#D14343";
|
|
69
|
-
readonly 'status-error-light': "#E05254";
|
|
70
|
-
readonly 'status-error-dark': "#A4221C";
|
|
71
|
-
readonly 'status-error-subtle': "#FFF4F4";
|
|
72
|
-
readonly 'status-error-vivid': "#D14343";
|
|
73
|
-
readonly 'status-error-vivid-light': "#E05254";
|
|
74
|
-
readonly 'status-error-vivid-dark': "#A4221C";
|
|
75
|
-
readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
76
|
-
readonly 'status-warning': "#F9B415";
|
|
77
|
-
readonly 'status-warning-light': "#FFD352";
|
|
78
|
-
readonly 'status-warning-dark': "#C27400";
|
|
79
|
-
readonly 'status-warning-subtle': "#FFF7DD";
|
|
80
|
-
readonly 'status-info': "#2196F3";
|
|
81
|
-
readonly 'status-info-light': "#78C2FF";
|
|
82
|
-
readonly 'status-info-dark': "#1072CB";
|
|
83
|
-
readonly 'status-info-subtle': "#EFF8FF";
|
|
84
|
-
readonly 'on-status-success': "#FFFFFF";
|
|
85
|
-
readonly 'on-status-error': "#FFFFFF";
|
|
86
|
-
readonly 'on-status-warning': "#FFFFFF";
|
|
87
|
-
readonly 'on-status-info': "#FFFFFF";
|
|
88
|
-
readonly 'result-improve': "#4caf50";
|
|
89
|
-
readonly 'result-improve-light': "rgba(76, 175, 80, 0.12)";
|
|
90
|
-
readonly 'result-improve-dark': "#248a24";
|
|
91
|
-
readonly 'result-degrade': "#ef5350";
|
|
92
|
-
readonly 'result-degrade-light': "rgba(239, 83, 80, 0.12)";
|
|
93
|
-
readonly 'result-degrade-dark': "#b30000";
|
|
94
|
-
readonly 'result-inconclusive': "#9E9A97";
|
|
95
|
-
readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
|
|
96
|
-
readonly 'result-neutral': "#72716F";
|
|
97
|
-
readonly 'on-result-improve': "#FFFFFF";
|
|
98
|
-
readonly 'on-result-degrade': "#FFFFFF";
|
|
99
|
-
readonly 'on-result-inconclusive': "#FFFFFF";
|
|
100
|
-
readonly 'data-1': "#1965B0";
|
|
101
|
-
readonly 'data-2': "#4EB265";
|
|
102
|
-
readonly 'data-3': "#F7F056";
|
|
103
|
-
readonly 'data-4': "#DC050C";
|
|
104
|
-
readonly 'data-5': "#882E72";
|
|
105
|
-
readonly 'data-6': "#F4A736";
|
|
106
|
-
readonly 'data-7': "#7BAFDE";
|
|
107
|
-
readonly 'data-8': "#90C987";
|
|
108
|
-
readonly 'data-9': "#CAACCB";
|
|
109
|
-
readonly 'data-10': "#EE8026";
|
|
110
|
-
readonly 'text-primary': "#121828";
|
|
111
|
-
readonly 'text-secondary': "#65748B";
|
|
112
|
-
readonly 'text-tertiary': "#A29F9D";
|
|
113
|
-
readonly 'text-disabled': "rgba(55, 65, 81, 0.48)";
|
|
114
|
-
readonly 'text-inverse': "#FFFFFF";
|
|
115
|
-
readonly 'text-link': "#1072CB";
|
|
116
|
-
readonly 'text-link-hover': "#135AA8";
|
|
117
|
-
readonly 'surface-base': "#FFFFFF";
|
|
118
|
-
readonly 'surface-elevated': "#F9F6F3";
|
|
119
|
-
readonly 'surface-raised': "#EDEAE7";
|
|
120
|
-
readonly 'surface-overlay': "#FFFFFF";
|
|
121
|
-
readonly 'surface-input': "#F9F6F3";
|
|
122
|
-
readonly 'background-base': "#EBEBEB";
|
|
123
|
-
readonly 'background-default': "#FFFFFF";
|
|
124
|
-
readonly 'background-subtle': "#F9F6F3";
|
|
125
|
-
readonly 'background-frame': "#A29F9D";
|
|
126
|
-
readonly 'border-prominent': "#A29F9D";
|
|
127
|
-
readonly 'border-focus': "#1072CB";
|
|
128
|
-
readonly 'border-input': "#D4D1CE";
|
|
129
|
-
readonly 'border-input-hover': "#A29F9D";
|
|
130
|
-
readonly 'border-input-focus': "#1072CB";
|
|
131
|
-
readonly 'border-input-error': "#D14343";
|
|
132
|
-
readonly 'hairline-subtle': "rgba(0, 0, 0, 0.06)";
|
|
133
|
-
readonly 'hairline-default': "rgba(0, 0, 0, 0.09)";
|
|
134
|
-
readonly 'hairline-strong': "rgba(0, 0, 0, 0.14)";
|
|
135
|
-
readonly 'interactive-hover': "rgba(55, 65, 81, 0.04)";
|
|
136
|
-
readonly 'interactive-focus': "rgba(55, 65, 81, 0.12)";
|
|
137
|
-
readonly 'interactive-active': "rgba(55, 65, 81, 0.16)";
|
|
138
|
-
readonly 'interactive-selected': "rgba(55, 65, 81, 0.08)";
|
|
139
|
-
readonly 'interactive-disabled': "rgba(55, 65, 81, 0.12)";
|
|
140
|
-
readonly 'interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
|
|
141
|
-
readonly divider: "#E8E9EB";
|
|
142
|
-
readonly 'avatar-background': "#72716F";
|
|
143
|
-
readonly 'avatar-text': "#FFFFFF";
|
|
144
|
-
};
|
|
145
|
-
declare const semanticColorsDark: {
|
|
146
|
-
readonly 'brand-primary': "#FF7900";
|
|
147
|
-
readonly 'brand-primary-light': "#FFA063";
|
|
148
|
-
readonly 'brand-primary-dark': "#DA5F00";
|
|
149
|
-
readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
|
|
150
|
-
readonly 'brand-primary-hover': "#FFA063";
|
|
151
|
-
readonly 'brand-primary-active': "#FFC7A2";
|
|
152
|
-
readonly 'brand-secondary': "#307B9B";
|
|
153
|
-
readonly 'brand-secondary-light': "#2697B7";
|
|
154
|
-
readonly 'brand-secondary-dark': "#2A617F";
|
|
155
|
-
readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
|
|
156
|
-
readonly 'brand-secondary-hover': "#2697B7";
|
|
157
|
-
readonly 'brand-secondary-active': "#01B5D1";
|
|
158
|
-
readonly 'on-brand-primary': "#FFFFFF";
|
|
159
|
-
readonly 'on-brand-secondary': "#FFFFFF";
|
|
160
|
-
readonly 'status-success': "#2ED573";
|
|
161
|
-
readonly 'status-success-light': "#58F69E";
|
|
162
|
-
readonly 'status-success-dark': "#298732";
|
|
163
|
-
readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
|
|
164
|
-
readonly 'status-live': "#2ED573";
|
|
165
|
-
readonly 'status-live-muted': "#22A444";
|
|
166
|
-
readonly 'status-error': "#D14343";
|
|
167
|
-
readonly 'status-error-light': "#E05254";
|
|
168
|
-
readonly 'status-error-dark': "#A4221C";
|
|
169
|
-
readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
|
|
170
|
-
readonly 'status-error-vivid': "#D14343";
|
|
171
|
-
readonly 'status-error-vivid-light': "#E05254";
|
|
172
|
-
readonly 'status-error-vivid-dark': "#A4221C";
|
|
173
|
-
readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
174
|
-
readonly 'status-warning': "#F9B415";
|
|
175
|
-
readonly 'status-warning-light': "#FFD352";
|
|
176
|
-
readonly 'status-warning-dark': "#C27400";
|
|
177
|
-
readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
|
|
178
|
-
readonly 'status-info': "#2196F3";
|
|
179
|
-
readonly 'status-info-light': "#78C2FF";
|
|
180
|
-
readonly 'status-info-dark': "#1072CB";
|
|
181
|
-
readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
|
|
182
|
-
readonly 'on-status-success': "#FFFFFF";
|
|
183
|
-
readonly 'on-status-error': "#FFFFFF";
|
|
184
|
-
readonly 'on-status-warning': "#FFFFFF";
|
|
185
|
-
readonly 'on-status-info': "#FFFFFF";
|
|
186
|
-
readonly 'result-improve': "#4caf50";
|
|
187
|
-
readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
|
|
188
|
-
readonly 'result-improve-dark': "#248a24";
|
|
189
|
-
readonly 'result-degrade': "#ef5350";
|
|
190
|
-
readonly 'result-degrade-light': "rgba(239, 83, 80, 0.16)";
|
|
191
|
-
readonly 'result-degrade-dark': "#b30000";
|
|
192
|
-
readonly 'result-inconclusive': "#9E9A97";
|
|
193
|
-
readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
|
|
194
|
-
readonly 'result-neutral': "#A29F9D";
|
|
195
|
-
readonly 'on-result-improve': "#FFFFFF";
|
|
196
|
-
readonly 'on-result-degrade': "#FFFFFF";
|
|
197
|
-
readonly 'on-result-inconclusive': "#FFFFFF";
|
|
198
|
-
readonly 'data-1': "#1965B0";
|
|
199
|
-
readonly 'data-2': "#4EB265";
|
|
200
|
-
readonly 'data-3': "#F7F056";
|
|
201
|
-
readonly 'data-4': "#DC050C";
|
|
202
|
-
readonly 'data-5': "#882E72";
|
|
203
|
-
readonly 'data-6': "#F4A736";
|
|
204
|
-
readonly 'data-7': "#7BAFDE";
|
|
205
|
-
readonly 'data-8': "#90C987";
|
|
206
|
-
readonly 'data-9': "#CAACCB";
|
|
207
|
-
readonly 'data-10': "#EE8026";
|
|
208
|
-
readonly 'text-primary': "#F9F6F3";
|
|
209
|
-
readonly 'text-secondary': "#A29F9D";
|
|
210
|
-
readonly 'text-tertiary': "#888684";
|
|
211
|
-
readonly 'text-disabled': "rgba(255, 255, 255, 0.38)";
|
|
212
|
-
readonly 'text-inverse': "#1C1916";
|
|
213
|
-
readonly 'text-link': "#828DF8";
|
|
214
|
-
readonly 'text-link-hover': "#3CA8FF";
|
|
215
|
-
readonly 'surface-base': "#252321";
|
|
216
|
-
readonly 'surface-elevated': "#2C2A28";
|
|
217
|
-
readonly 'surface-raised': "#31302F";
|
|
218
|
-
readonly 'surface-overlay': "#373635";
|
|
219
|
-
readonly 'surface-input': "#2C2A28";
|
|
220
|
-
readonly 'background-base': "#1C1916";
|
|
221
|
-
readonly 'background-default': "#252321";
|
|
222
|
-
readonly 'background-subtle': "#2C2A28";
|
|
223
|
-
readonly 'background-frame': "#100D0A";
|
|
224
|
-
readonly 'border-prominent': "#424140";
|
|
225
|
-
readonly 'border-focus': "#828DF8";
|
|
226
|
-
readonly 'border-input': "#5A5958";
|
|
227
|
-
readonly 'border-input-hover': "#72716F";
|
|
228
|
-
readonly 'border-input-focus': "#828DF8";
|
|
229
|
-
readonly 'border-input-error': "#E05254";
|
|
230
|
-
readonly 'hairline-subtle': "rgba(255, 255, 255, 0.10)";
|
|
231
|
-
readonly 'hairline-default': "rgba(255, 255, 255, 0.15)";
|
|
232
|
-
readonly 'hairline-strong': "rgba(255, 255, 255, 0.22)";
|
|
233
|
-
readonly 'interactive-hover': "rgba(255, 255, 255, 0.04)";
|
|
234
|
-
readonly 'interactive-focus': "rgba(255, 255, 255, 0.12)";
|
|
235
|
-
readonly 'interactive-active': "rgba(255, 255, 255, 0.16)";
|
|
236
|
-
readonly 'interactive-selected': "rgba(255, 255, 255, 0.08)";
|
|
237
|
-
readonly 'interactive-disabled': "rgba(255, 255, 255, 0.12)";
|
|
238
|
-
readonly 'interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
|
|
239
|
-
readonly divider: "rgba(255, 255, 255, 0.09)";
|
|
240
|
-
readonly 'avatar-background': "#5A5958";
|
|
241
|
-
readonly 'avatar-text': "#FFFFFF";
|
|
242
|
-
};
|
|
243
|
-
declare const semanticTypography: {
|
|
244
|
-
readonly h1: {
|
|
245
|
-
readonly fontFamily: "heading";
|
|
246
|
-
readonly fontSize: "3.5rem";
|
|
247
|
-
readonly fontWeight: 700;
|
|
248
|
-
readonly lineHeight: 1.375;
|
|
249
|
-
};
|
|
250
|
-
readonly h2: {
|
|
251
|
-
readonly fontFamily: "heading";
|
|
252
|
-
readonly fontSize: "3rem";
|
|
253
|
-
readonly fontWeight: 700;
|
|
254
|
-
readonly lineHeight: 1.375;
|
|
255
|
-
};
|
|
256
|
-
readonly h3: {
|
|
257
|
-
readonly fontFamily: "heading";
|
|
258
|
-
readonly fontSize: "2.25rem";
|
|
259
|
-
readonly fontWeight: 700;
|
|
260
|
-
readonly lineHeight: 1.375;
|
|
261
|
-
};
|
|
262
|
-
readonly h4: {
|
|
263
|
-
readonly fontFamily: "heading";
|
|
264
|
-
readonly fontSize: "2rem";
|
|
265
|
-
readonly fontWeight: 700;
|
|
266
|
-
readonly lineHeight: 1.375;
|
|
267
|
-
};
|
|
268
|
-
readonly h5: {
|
|
269
|
-
readonly fontFamily: "heading";
|
|
270
|
-
readonly fontSize: "1.5rem";
|
|
271
|
-
readonly fontWeight: 600;
|
|
272
|
-
readonly lineHeight: 1.375;
|
|
273
|
-
};
|
|
274
|
-
readonly h6: {
|
|
275
|
-
readonly fontFamily: "heading";
|
|
276
|
-
readonly fontSize: "1.125rem";
|
|
277
|
-
readonly fontWeight: 600;
|
|
278
|
-
readonly lineHeight: 1.375;
|
|
279
|
-
};
|
|
280
|
-
readonly body1: {
|
|
281
|
-
readonly fontFamily: "body";
|
|
282
|
-
readonly fontSize: "1rem";
|
|
283
|
-
readonly fontWeight: 400;
|
|
284
|
-
readonly lineHeight: 1.5;
|
|
285
|
-
};
|
|
286
|
-
readonly body2: {
|
|
287
|
-
readonly fontFamily: "body";
|
|
288
|
-
readonly fontSize: "0.875rem";
|
|
289
|
-
readonly fontWeight: 400;
|
|
290
|
-
readonly lineHeight: 1.57;
|
|
291
|
-
};
|
|
292
|
-
readonly subtitle1: {
|
|
293
|
-
readonly fontFamily: "body";
|
|
294
|
-
readonly fontSize: "1rem";
|
|
295
|
-
readonly fontWeight: 500;
|
|
296
|
-
readonly lineHeight: 1.75;
|
|
297
|
-
};
|
|
298
|
-
readonly subtitle2: {
|
|
299
|
-
readonly fontFamily: "body";
|
|
300
|
-
readonly fontSize: "0.875rem";
|
|
301
|
-
readonly fontWeight: 500;
|
|
302
|
-
readonly lineHeight: 1.57;
|
|
303
|
-
};
|
|
304
|
-
readonly caption: {
|
|
305
|
-
readonly fontFamily: "body";
|
|
306
|
-
readonly fontSize: "0.75rem";
|
|
307
|
-
readonly fontWeight: 400;
|
|
308
|
-
readonly lineHeight: 1.66;
|
|
309
|
-
};
|
|
310
|
-
readonly overline: {
|
|
311
|
-
readonly fontFamily: "body";
|
|
312
|
-
readonly fontSize: "0.75rem";
|
|
313
|
-
readonly fontWeight: 600;
|
|
314
|
-
readonly lineHeight: 2.5;
|
|
315
|
-
readonly letterSpacing: "0.5px";
|
|
316
|
-
readonly textTransform: "uppercase";
|
|
317
|
-
};
|
|
318
|
-
readonly button: {
|
|
319
|
-
readonly fontFamily: "sans";
|
|
320
|
-
readonly fontSize: "0.875rem";
|
|
321
|
-
readonly fontWeight: 600;
|
|
322
|
-
readonly lineHeight: 1.75;
|
|
323
|
-
};
|
|
324
|
-
};
|
|
325
|
-
declare const buttonSizes: {
|
|
326
|
-
readonly sm: {
|
|
327
|
-
readonly paddingX: "16px";
|
|
328
|
-
readonly paddingY: "6px";
|
|
329
|
-
readonly fontSize: "0.875rem";
|
|
330
|
-
};
|
|
331
|
-
readonly md: {
|
|
332
|
-
readonly paddingX: "20px";
|
|
333
|
-
readonly paddingY: "8px";
|
|
334
|
-
readonly fontSize: "0.875rem";
|
|
335
|
-
};
|
|
336
|
-
readonly lg: {
|
|
337
|
-
readonly paddingX: "24px";
|
|
338
|
-
readonly paddingY: "11px";
|
|
339
|
-
readonly fontSize: "1rem";
|
|
340
|
-
};
|
|
341
|
-
};
|
|
342
|
-
type ThemeMode = 'light' | 'dark';
|
|
343
|
-
declare function getSemanticColors(mode: ThemeMode): {
|
|
344
|
-
readonly 'brand-primary': "#FF7900";
|
|
345
|
-
readonly 'brand-primary-light': "#FFA063";
|
|
346
|
-
readonly 'brand-primary-dark': "#DA5F00";
|
|
347
|
-
readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
|
|
348
|
-
readonly 'brand-primary-hover': "#DA5F00";
|
|
349
|
-
readonly 'brand-primary-active': "#B94A00";
|
|
350
|
-
readonly 'brand-secondary': "#307B9B";
|
|
351
|
-
readonly 'brand-secondary-light': "#2697B7";
|
|
352
|
-
readonly 'brand-secondary-dark': "#2A617F";
|
|
353
|
-
readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
|
|
354
|
-
readonly 'brand-secondary-hover': "#2A617F";
|
|
355
|
-
readonly 'brand-secondary-active': "#22465F";
|
|
356
|
-
readonly 'on-brand-primary': "#FFFFFF";
|
|
357
|
-
readonly 'on-brand-secondary': "#FFFFFF";
|
|
358
|
-
readonly 'status-success': "#2ED573";
|
|
359
|
-
readonly 'status-success-light': "#58F69E";
|
|
360
|
-
readonly 'status-success-dark': "#298732";
|
|
361
|
-
readonly 'status-success-subtle': "#E3FFEE";
|
|
362
|
-
readonly 'status-live': "#2ED573";
|
|
363
|
-
readonly 'status-live-muted': "#22A444";
|
|
364
|
-
readonly 'status-error': "#D14343";
|
|
365
|
-
readonly 'status-error-light': "#E05254";
|
|
366
|
-
readonly 'status-error-dark': "#A4221C";
|
|
367
|
-
readonly 'status-error-subtle': "#FFF4F4";
|
|
368
|
-
readonly 'status-error-vivid': "#D14343";
|
|
369
|
-
readonly 'status-error-vivid-light': "#E05254";
|
|
370
|
-
readonly 'status-error-vivid-dark': "#A4221C";
|
|
371
|
-
readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
372
|
-
readonly 'status-warning': "#F9B415";
|
|
373
|
-
readonly 'status-warning-light': "#FFD352";
|
|
374
|
-
readonly 'status-warning-dark': "#C27400";
|
|
375
|
-
readonly 'status-warning-subtle': "#FFF7DD";
|
|
376
|
-
readonly 'status-info': "#2196F3";
|
|
377
|
-
readonly 'status-info-light': "#78C2FF";
|
|
378
|
-
readonly 'status-info-dark': "#1072CB";
|
|
379
|
-
readonly 'status-info-subtle': "#EFF8FF";
|
|
380
|
-
readonly 'on-status-success': "#FFFFFF";
|
|
381
|
-
readonly 'on-status-error': "#FFFFFF";
|
|
382
|
-
readonly 'on-status-warning': "#FFFFFF";
|
|
383
|
-
readonly 'on-status-info': "#FFFFFF";
|
|
384
|
-
readonly 'result-improve': "#4caf50";
|
|
385
|
-
readonly 'result-improve-light': "rgba(76, 175, 80, 0.12)";
|
|
386
|
-
readonly 'result-improve-dark': "#248a24";
|
|
387
|
-
readonly 'result-degrade': "#ef5350";
|
|
388
|
-
readonly 'result-degrade-light': "rgba(239, 83, 80, 0.12)";
|
|
389
|
-
readonly 'result-degrade-dark': "#b30000";
|
|
390
|
-
readonly 'result-inconclusive': "#9E9A97";
|
|
391
|
-
readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
|
|
392
|
-
readonly 'result-neutral': "#72716F";
|
|
393
|
-
readonly 'on-result-improve': "#FFFFFF";
|
|
394
|
-
readonly 'on-result-degrade': "#FFFFFF";
|
|
395
|
-
readonly 'on-result-inconclusive': "#FFFFFF";
|
|
396
|
-
readonly 'data-1': "#1965B0";
|
|
397
|
-
readonly 'data-2': "#4EB265";
|
|
398
|
-
readonly 'data-3': "#F7F056";
|
|
399
|
-
readonly 'data-4': "#DC050C";
|
|
400
|
-
readonly 'data-5': "#882E72";
|
|
401
|
-
readonly 'data-6': "#F4A736";
|
|
402
|
-
readonly 'data-7': "#7BAFDE";
|
|
403
|
-
readonly 'data-8': "#90C987";
|
|
404
|
-
readonly 'data-9': "#CAACCB";
|
|
405
|
-
readonly 'data-10': "#EE8026";
|
|
406
|
-
readonly 'text-primary': "#121828";
|
|
407
|
-
readonly 'text-secondary': "#65748B";
|
|
408
|
-
readonly 'text-tertiary': "#A29F9D";
|
|
409
|
-
readonly 'text-disabled': "rgba(55, 65, 81, 0.48)";
|
|
410
|
-
readonly 'text-inverse': "#FFFFFF";
|
|
411
|
-
readonly 'text-link': "#1072CB";
|
|
412
|
-
readonly 'text-link-hover': "#135AA8";
|
|
413
|
-
readonly 'surface-base': "#FFFFFF";
|
|
414
|
-
readonly 'surface-elevated': "#F9F6F3";
|
|
415
|
-
readonly 'surface-raised': "#EDEAE7";
|
|
416
|
-
readonly 'surface-overlay': "#FFFFFF";
|
|
417
|
-
readonly 'surface-input': "#F9F6F3";
|
|
418
|
-
readonly 'background-base': "#EBEBEB";
|
|
419
|
-
readonly 'background-default': "#FFFFFF";
|
|
420
|
-
readonly 'background-subtle': "#F9F6F3";
|
|
421
|
-
readonly 'background-frame': "#A29F9D";
|
|
422
|
-
readonly 'border-prominent': "#A29F9D";
|
|
423
|
-
readonly 'border-focus': "#1072CB";
|
|
424
|
-
readonly 'border-input': "#D4D1CE";
|
|
425
|
-
readonly 'border-input-hover': "#A29F9D";
|
|
426
|
-
readonly 'border-input-focus': "#1072CB";
|
|
427
|
-
readonly 'border-input-error': "#D14343";
|
|
428
|
-
readonly 'hairline-subtle': "rgba(0, 0, 0, 0.06)";
|
|
429
|
-
readonly 'hairline-default': "rgba(0, 0, 0, 0.09)";
|
|
430
|
-
readonly 'hairline-strong': "rgba(0, 0, 0, 0.14)";
|
|
431
|
-
readonly 'interactive-hover': "rgba(55, 65, 81, 0.04)";
|
|
432
|
-
readonly 'interactive-focus': "rgba(55, 65, 81, 0.12)";
|
|
433
|
-
readonly 'interactive-active': "rgba(55, 65, 81, 0.16)";
|
|
434
|
-
readonly 'interactive-selected': "rgba(55, 65, 81, 0.08)";
|
|
435
|
-
readonly 'interactive-disabled': "rgba(55, 65, 81, 0.12)";
|
|
436
|
-
readonly 'interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
|
|
437
|
-
readonly divider: "#E8E9EB";
|
|
438
|
-
readonly 'avatar-background': "#72716F";
|
|
439
|
-
readonly 'avatar-text': "#FFFFFF";
|
|
440
|
-
} | {
|
|
441
|
-
readonly 'brand-primary': "#FF7900";
|
|
442
|
-
readonly 'brand-primary-light': "#FFA063";
|
|
443
|
-
readonly 'brand-primary-dark': "#DA5F00";
|
|
444
|
-
readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
|
|
445
|
-
readonly 'brand-primary-hover': "#FFA063";
|
|
446
|
-
readonly 'brand-primary-active': "#FFC7A2";
|
|
447
|
-
readonly 'brand-secondary': "#307B9B";
|
|
448
|
-
readonly 'brand-secondary-light': "#2697B7";
|
|
449
|
-
readonly 'brand-secondary-dark': "#2A617F";
|
|
450
|
-
readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
|
|
451
|
-
readonly 'brand-secondary-hover': "#2697B7";
|
|
452
|
-
readonly 'brand-secondary-active': "#01B5D1";
|
|
453
|
-
readonly 'on-brand-primary': "#FFFFFF";
|
|
454
|
-
readonly 'on-brand-secondary': "#FFFFFF";
|
|
455
|
-
readonly 'status-success': "#2ED573";
|
|
456
|
-
readonly 'status-success-light': "#58F69E";
|
|
457
|
-
readonly 'status-success-dark': "#298732";
|
|
458
|
-
readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
|
|
459
|
-
readonly 'status-live': "#2ED573";
|
|
460
|
-
readonly 'status-live-muted': "#22A444";
|
|
461
|
-
readonly 'status-error': "#D14343";
|
|
462
|
-
readonly 'status-error-light': "#E05254";
|
|
463
|
-
readonly 'status-error-dark': "#A4221C";
|
|
464
|
-
readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
|
|
465
|
-
readonly 'status-error-vivid': "#D14343";
|
|
466
|
-
readonly 'status-error-vivid-light': "#E05254";
|
|
467
|
-
readonly 'status-error-vivid-dark': "#A4221C";
|
|
468
|
-
readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
469
|
-
readonly 'status-warning': "#F9B415";
|
|
470
|
-
readonly 'status-warning-light': "#FFD352";
|
|
471
|
-
readonly 'status-warning-dark': "#C27400";
|
|
472
|
-
readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
|
|
473
|
-
readonly 'status-info': "#2196F3";
|
|
474
|
-
readonly 'status-info-light': "#78C2FF";
|
|
475
|
-
readonly 'status-info-dark': "#1072CB";
|
|
476
|
-
readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
|
|
477
|
-
readonly 'on-status-success': "#FFFFFF";
|
|
478
|
-
readonly 'on-status-error': "#FFFFFF";
|
|
479
|
-
readonly 'on-status-warning': "#FFFFFF";
|
|
480
|
-
readonly 'on-status-info': "#FFFFFF";
|
|
481
|
-
readonly 'result-improve': "#4caf50";
|
|
482
|
-
readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
|
|
483
|
-
readonly 'result-improve-dark': "#248a24";
|
|
484
|
-
readonly 'result-degrade': "#ef5350";
|
|
485
|
-
readonly 'result-degrade-light': "rgba(239, 83, 80, 0.16)";
|
|
486
|
-
readonly 'result-degrade-dark': "#b30000";
|
|
487
|
-
readonly 'result-inconclusive': "#9E9A97";
|
|
488
|
-
readonly 'result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
|
|
489
|
-
readonly 'result-neutral': "#A29F9D";
|
|
490
|
-
readonly 'on-result-improve': "#FFFFFF";
|
|
491
|
-
readonly 'on-result-degrade': "#FFFFFF";
|
|
492
|
-
readonly 'on-result-inconclusive': "#FFFFFF";
|
|
493
|
-
readonly 'data-1': "#1965B0";
|
|
494
|
-
readonly 'data-2': "#4EB265";
|
|
495
|
-
readonly 'data-3': "#F7F056";
|
|
496
|
-
readonly 'data-4': "#DC050C";
|
|
497
|
-
readonly 'data-5': "#882E72";
|
|
498
|
-
readonly 'data-6': "#F4A736";
|
|
499
|
-
readonly 'data-7': "#7BAFDE";
|
|
500
|
-
readonly 'data-8': "#90C987";
|
|
501
|
-
readonly 'data-9': "#CAACCB";
|
|
502
|
-
readonly 'data-10': "#EE8026";
|
|
503
|
-
readonly 'text-primary': "#F9F6F3";
|
|
504
|
-
readonly 'text-secondary': "#A29F9D";
|
|
505
|
-
readonly 'text-tertiary': "#888684";
|
|
506
|
-
readonly 'text-disabled': "rgba(255, 255, 255, 0.38)";
|
|
507
|
-
readonly 'text-inverse': "#1C1916";
|
|
508
|
-
readonly 'text-link': "#828DF8";
|
|
509
|
-
readonly 'text-link-hover': "#3CA8FF";
|
|
510
|
-
readonly 'surface-base': "#252321";
|
|
511
|
-
readonly 'surface-elevated': "#2C2A28";
|
|
512
|
-
readonly 'surface-raised': "#31302F";
|
|
513
|
-
readonly 'surface-overlay': "#373635";
|
|
514
|
-
readonly 'surface-input': "#2C2A28";
|
|
515
|
-
readonly 'background-base': "#1C1916";
|
|
516
|
-
readonly 'background-default': "#252321";
|
|
517
|
-
readonly 'background-subtle': "#2C2A28";
|
|
518
|
-
readonly 'background-frame': "#100D0A";
|
|
519
|
-
readonly 'border-prominent': "#424140";
|
|
520
|
-
readonly 'border-focus': "#828DF8";
|
|
521
|
-
readonly 'border-input': "#5A5958";
|
|
522
|
-
readonly 'border-input-hover': "#72716F";
|
|
523
|
-
readonly 'border-input-focus': "#828DF8";
|
|
524
|
-
readonly 'border-input-error': "#E05254";
|
|
525
|
-
readonly 'hairline-subtle': "rgba(255, 255, 255, 0.10)";
|
|
526
|
-
readonly 'hairline-default': "rgba(255, 255, 255, 0.15)";
|
|
527
|
-
readonly 'hairline-strong': "rgba(255, 255, 255, 0.22)";
|
|
528
|
-
readonly 'interactive-hover': "rgba(255, 255, 255, 0.04)";
|
|
529
|
-
readonly 'interactive-focus': "rgba(255, 255, 255, 0.12)";
|
|
530
|
-
readonly 'interactive-active': "rgba(255, 255, 255, 0.16)";
|
|
531
|
-
readonly 'interactive-selected': "rgba(255, 255, 255, 0.08)";
|
|
532
|
-
readonly 'interactive-disabled': "rgba(255, 255, 255, 0.12)";
|
|
533
|
-
readonly 'interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
|
|
534
|
-
readonly divider: "rgba(255, 255, 255, 0.09)";
|
|
535
|
-
readonly 'avatar-background': "#5A5958";
|
|
536
|
-
readonly 'avatar-text': "#FFFFFF";
|
|
537
|
-
};
|
|
24
|
+
|
|
25
|
+
type LiftStep = 1 | 2 | 3 | 4 | 5;
|
|
26
|
+
/** The lowest lift that is FLOATING (menu, popover, toast) rather than content. */
|
|
27
|
+
declare const FLOATING_LIFT_MIN: LiftStep;
|
|
28
|
+
/** Rim-light alpha per mode. Light mode is a placeholder pending its own pass. */
|
|
29
|
+
declare const LIFT_RIM_ALPHA: Record<ThemeMode, number>;
|
|
30
|
+
interface LiftOptions {
|
|
31
|
+
/** Override the rim alpha. `0` drops the rim and leaves the ambient shadow alone. */
|
|
32
|
+
rim?: number;
|
|
33
|
+
}
|
|
34
|
+
/** The web boxShadow string for a lift: rim first, then the ambient layers. */
|
|
35
|
+
declare function liftShadow(step: LiftStep, mode?: ThemeMode, opts?: LiftOptions): string;
|
|
36
|
+
/** Platform style for a lift. Compose after `backgroundColor`; never instead of it. */
|
|
37
|
+
declare function liftStyle(step: LiftStep, mode?: ThemeMode, opts?: LiftOptions): ViewStyle;
|
|
538
38
|
|
|
539
39
|
/**
|
|
540
|
-
*
|
|
541
|
-
*
|
|
542
|
-
* A unified depth system where each elevation level corresponds to:
|
|
543
|
-
* - Calculated surface color (derived from base using lighten)
|
|
544
|
-
* - Shadow intensity and style (raised/pressed)
|
|
545
|
-
* - Dynamically calculated shadow colors (derived from surface color)
|
|
546
|
-
* - Semantic name for reference
|
|
547
|
-
*
|
|
548
|
-
* Elevation range: -2 (deep inset) to +5 (floating overlay)
|
|
40
|
+
* The surface planes: the grey-ramp steps a container can sit on, darkest first.
|
|
549
41
|
*
|
|
550
|
-
*
|
|
551
|
-
*
|
|
552
|
-
*
|
|
42
|
+
* Every background a `<Surface>` or `<Card>` paints resolves through this list,
|
|
43
|
+
* so a container can only ever land ON the ramp. Stepping up (a lifted card) or
|
|
44
|
+
* down (a pressed well) is indexing `PLANE_ORDER`, clamped at both ends.
|
|
553
45
|
*
|
|
554
|
-
*
|
|
555
|
-
*
|
|
556
|
-
*
|
|
557
|
-
* Lighting Model: Light source from upper-right corner
|
|
558
|
-
* - Raised elements are always lighter than base (consistent across themes)
|
|
559
|
-
* - Base colors must allow sufficient lightening in both themes
|
|
46
|
+
* `frame` is the bezel the ramp sits inside and the floor a pressed surface
|
|
47
|
+
* clamps at. It replaced a separate `inset` level in TD-07.14: at ΔE 1.10 from
|
|
48
|
+
* the frame that level was an imperceptible duplicate.
|
|
560
49
|
*/
|
|
561
50
|
|
|
562
|
-
type
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
declare const elevationSystem: Record<ElevationLevel, ElevationConfig>;
|
|
576
|
-
/**
|
|
577
|
-
* Get elevation configuration for a given level
|
|
578
|
-
*/
|
|
579
|
-
declare function getElevationConfig(level: ElevationLevel): ElevationConfig;
|
|
51
|
+
type SurfaceLevel = 'frame' | 'background' | 'base' | 'elevated' | 'raised' | 'overlay';
|
|
52
|
+
declare const SURFACE_LEVEL_TOKEN: {
|
|
53
|
+
readonly frame: "background-frame";
|
|
54
|
+
readonly background: "background-base";
|
|
55
|
+
readonly base: "surface-base";
|
|
56
|
+
readonly elevated: "surface-elevated";
|
|
57
|
+
readonly raised: "surface-raised";
|
|
58
|
+
readonly overlay: "surface-overlay";
|
|
59
|
+
};
|
|
60
|
+
/** Darkest → lightest. Kept in lockstep with the grey ramp and surface.contract.test. */
|
|
61
|
+
declare const PLANE_ORDER: readonly ["frame", "background", "base", "elevated", "raised", "overlay"];
|
|
62
|
+
/** The background hex for a plane under a theme mode (literal hex, never a var()). */
|
|
63
|
+
declare function surfaceBackground(level: SurfaceLevel, mode: ThemeMode): string;
|
|
580
64
|
/**
|
|
581
|
-
*
|
|
582
|
-
*
|
|
583
|
-
*
|
|
584
|
-
*
|
|
585
|
-
* @param level - Elevation level
|
|
586
|
-
* @param theme - Current theme ('light' or 'dark')
|
|
587
|
-
* @returns Calculated surface color (hex)
|
|
65
|
+
* The plane a `<Surface pressed>` resolves to: its parent's plane stepped one
|
|
66
|
+
* index DOWN the ramp, clamped at the `frame` floor.
|
|
67
|
+
* overlay→raised, raised→elevated, elevated→base, base→background,
|
|
68
|
+
* background→frame, frame→frame (clamped).
|
|
588
69
|
*/
|
|
589
|
-
declare function
|
|
70
|
+
declare function pressedLevel(parent: SurfaceLevel): SurfaceLevel;
|
|
590
71
|
/**
|
|
591
|
-
*
|
|
592
|
-
*
|
|
593
|
-
*
|
|
594
|
-
*
|
|
595
|
-
* @param level - Elevation level
|
|
596
|
-
* @param theme - Current theme ('light' or 'dark')
|
|
597
|
-
* @param isHovered - Whether element is hovered
|
|
598
|
-
* @returns ViewStyle with shadow properties
|
|
72
|
+
* The plane a lifted surface resolves to: its parent's plane stepped `steps`
|
|
73
|
+
* UP the ramp, clamped at `overlay`. The clamp is what makes raised-on-raised
|
|
74
|
+
* unrepresentable: a card inside an overlay stays on the overlay and relies on
|
|
75
|
+
* its lift treatment, never on a lighter grey that is not on the ramp.
|
|
599
76
|
*/
|
|
77
|
+
declare function raisedLevel(parent: SurfaceLevel, steps: number): SurfaceLevel;
|
|
78
|
+
|
|
600
79
|
/**
|
|
601
|
-
*
|
|
602
|
-
*
|
|
603
|
-
*
|
|
604
|
-
*
|
|
605
|
-
*
|
|
606
|
-
*
|
|
607
|
-
*
|
|
608
|
-
*
|
|
609
|
-
*
|
|
610
|
-
*
|
|
611
|
-
*
|
|
80
|
+
* Elevation — numeric depth that resolves to the grey ramp.
|
|
81
|
+
*
|
|
82
|
+
* A level is a plane on the surface ramp plus the treatment that plane wears:
|
|
83
|
+
*
|
|
84
|
+
* -2 frame recessed (inset well, two planes down)
|
|
85
|
+
* -1 background recessed (inset well, one plane down)
|
|
86
|
+
* 0 base flat, no treatment
|
|
87
|
+
* 1 elevated lifted (tone + rim-light + ambient shadow)
|
|
88
|
+
* 2 raised lifted
|
|
89
|
+
* 3 overlay lifted
|
|
90
|
+
* 4 overlay floating (same recipe, larger shadow)
|
|
91
|
+
* 5 overlay floating
|
|
92
|
+
*
|
|
93
|
+
* These are ABSOLUTE readings from the page plane. `<Surface>` and `<Card>`
|
|
94
|
+
* apply the same numbers RELATIVE to the plane they are nested in; see
|
|
95
|
+
* `resolveSurfaceDepth`.
|
|
96
|
+
*
|
|
97
|
+
* No level can produce a colour off the ramp. The previous ladder lightened a
|
|
98
|
+
* base colour in HSV by 2.5% per level and put five of its six stops between
|
|
99
|
+
* ramp steps, drifting warmer as it rose while the ramp is designed to cool.
|
|
100
|
+
* Floating levels share the overlay plane on purpose: past the top of the ramp,
|
|
101
|
+
* separation is the shadow's job, not a lighter grey.
|
|
102
|
+
*
|
|
103
|
+
* Depth is TONE + LIFT by default. The earlier rule that levels 1–3 separate by
|
|
104
|
+
* tone alone (TD-07.16) was reversed on 2026-09-08: the tight upper steps of the
|
|
105
|
+
* ramp (ΔL* 2.5–3) need the second channel, and a soft ambient shadow on a
|
|
106
|
+
* near-black plane is not inert once the rim-light gives it an edge to fall
|
|
107
|
+
* from. See Foundations/Depth.
|
|
612
108
|
*/
|
|
109
|
+
|
|
110
|
+
type ElevationLevel = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
|
|
111
|
+
declare const ELEVATION_PLANE: Record<ElevationLevel, SurfaceLevel>;
|
|
112
|
+
/** The lowest elevation that is floating (menu, popover, toast) rather than content. */
|
|
613
113
|
declare const FLOATING_ELEVATION_MIN: ElevationLevel;
|
|
614
|
-
|
|
615
|
-
/**
|
|
616
|
-
* Elevation level backing a `<Surface pressed>` recess: the shallow `inset`
|
|
617
|
-
* (-1) step. Pressed exposes ONE level of depth — pressed-2 is intentionally
|
|
618
|
-
* not surfaced (the deeper `-2` deep-inset stays available to `elevation`).
|
|
619
|
-
*/
|
|
114
|
+
/** Elevation backing a `<Surface pressed>` recess: one plane down. */
|
|
620
115
|
declare const PRESSED_ELEVATION_LEVEL: ElevationLevel;
|
|
116
|
+
/** The ramp plane an absolute elevation sits on. */
|
|
117
|
+
declare function elevationPlane(level: ElevationLevel): SurfaceLevel;
|
|
118
|
+
/** The background hex for an absolute elevation: always a ramp step. */
|
|
119
|
+
declare function getElevationSurface(level: ElevationLevel, mode?: ThemeMode): string;
|
|
621
120
|
/**
|
|
622
|
-
* Inner-shadow recess for a pressed (sunken) surface
|
|
623
|
-
*
|
|
624
|
-
* darker
|
|
625
|
-
* (no inset-shadow support) it's a no-op and the recess reads via the fill
|
|
626
|
-
* alone — so a pressed surface stays legibly sunken with or without the shadow.
|
|
627
|
-
*
|
|
628
|
-
* @param fillColor - The pressed surface's own fill (one ramp step down).
|
|
629
|
-
* @param theme - Current theme ('light' or 'dark').
|
|
121
|
+
* Inner-shadow recess for a pressed (sunken) surface: the `insetWell` material's
|
|
122
|
+
* cut, which the wall calibrated in VW-99. Web only; on native the recess reads
|
|
123
|
+
* from the darker fill alone, which is why the fill is never optional.
|
|
630
124
|
*/
|
|
631
|
-
declare function getPressedRecessShadow(fillColor: string,
|
|
125
|
+
declare function getPressedRecessShadow(fillColor: string, _mode?: ThemeMode): ViewStyle;
|
|
632
126
|
/**
|
|
633
|
-
*
|
|
634
|
-
*
|
|
635
|
-
*
|
|
636
|
-
* IMPORTANT: Base colors must be chosen to allow sufficient lightening.
|
|
637
|
-
*
|
|
638
|
-
* **Light Mode**: Cannot use `#FFFFFF` (white) - cannot lighten white!
|
|
639
|
-
* - Use `#F3F4F6` (neutral[100]) - can lighten to `#FAFAFA` → `#FFFFFF`
|
|
640
|
-
* - This allows raised elevations to be lighter (closer to white)
|
|
641
|
-
*
|
|
642
|
-
* **Dark Mode**: Need lighter base to allow sufficient lightening
|
|
643
|
-
* - Use `surface-elevated` (#2A2827, TD-surface-tokens ramp) - allows further lightening
|
|
644
|
-
*
|
|
645
|
-
* Can be overridden to use custom base colors for special cases.
|
|
127
|
+
* The treatment an absolute elevation wears: a recess below 0, nothing at 0,
|
|
128
|
+
* a lift above it. Compose after `backgroundColor`.
|
|
646
129
|
*/
|
|
647
|
-
declare function
|
|
130
|
+
declare function getElevationShadow(level: ElevationLevel, mode?: ThemeMode, opts?: LiftOptions): ViewStyle;
|
|
131
|
+
type GlowIntensity = 'tight' | 'subtle' | 'medium' | 'strong';
|
|
648
132
|
/**
|
|
649
|
-
*
|
|
650
|
-
*
|
|
651
|
-
*/
|
|
652
|
-
declare const componentElevationRanges: {
|
|
653
|
-
readonly button: {
|
|
654
|
-
readonly allowed: readonly [2];
|
|
655
|
-
readonly default: 2;
|
|
656
|
-
readonly hover: 3;
|
|
657
|
-
};
|
|
658
|
-
readonly card: {
|
|
659
|
-
readonly allowed: readonly [1, 2, 3];
|
|
660
|
-
readonly default: 2;
|
|
661
|
-
readonly hover: 3;
|
|
662
|
-
};
|
|
663
|
-
readonly input: {
|
|
664
|
-
readonly allowed: readonly [-2, -1, 0];
|
|
665
|
-
readonly default: -1;
|
|
666
|
-
};
|
|
667
|
-
readonly overlay: {
|
|
668
|
-
readonly allowed: readonly [4, 5];
|
|
669
|
-
readonly default: 4;
|
|
670
|
-
};
|
|
671
|
-
};
|
|
672
|
-
type ComponentType = keyof typeof componentElevationRanges;
|
|
673
|
-
/**
|
|
674
|
-
* Validate and clamp elevation to component's allowed range
|
|
675
|
-
*/
|
|
676
|
-
declare function getValidatedElevation(component: ComponentType, requested: ElevationLevel): ElevationLevel;
|
|
677
|
-
type GlowIntensity = 'subtle' | 'medium' | 'strong';
|
|
678
|
-
/**
|
|
679
|
-
* Get a glow shadow style for emphasis/active states.
|
|
680
|
-
*
|
|
681
|
-
* Creates a colored radial glow around an element, useful for:
|
|
682
|
-
* - Active recording indicators (orange glow)
|
|
683
|
-
* - Success states (green glow)
|
|
684
|
-
* - Error/danger indicators (red glow)
|
|
685
|
-
* - Focus rings and attention-drawing elements
|
|
686
|
-
*
|
|
687
|
-
* @param color - Glow color (hex string, e.g. '#FF7900')
|
|
688
|
-
* @param intensity - Glow intensity level
|
|
689
|
-
* @returns ViewStyle with platform-specific shadow properties
|
|
133
|
+
* A coloured radial glow around an element, for emphasis and active states:
|
|
134
|
+
* a live recording indicator, a success or error pulse, a focus halo.
|
|
690
135
|
*/
|
|
691
136
|
declare function getGlowShadow(color: string, intensity?: GlowIntensity): ViewStyle;
|
|
692
137
|
|
|
693
|
-
/**
|
|
694
|
-
* Primitive Design Tokens
|
|
695
|
-
*
|
|
696
|
-
* Raw values with no semantic meaning. These are the foundation of the design system
|
|
697
|
-
* and should rarely be used directly in components. Use semantic tokens instead.
|
|
698
|
-
*/
|
|
699
|
-
/**
|
|
700
|
-
* Absolute colour keywords.
|
|
701
|
-
*
|
|
702
|
-
* This used to hold five scales — `blue`, `red`, `redVivid`, `neutral` and
|
|
703
|
-
* `charcoal`. All five are gone (TD-07.14): the greys folded into `greyRamp`
|
|
704
|
-
* below and the chromatics into the OKLCH `primitiveRamps`. What is left has no
|
|
705
|
-
* scale because these three are not colours you tune, they are keywords.
|
|
706
|
-
*/
|
|
707
|
-
declare const primitiveColors: {
|
|
708
|
-
readonly white: "#FFFFFF";
|
|
709
|
-
readonly black: "#000000";
|
|
710
|
-
readonly transparent: "transparent";
|
|
711
|
-
};
|
|
712
|
-
/**
|
|
713
|
-
* Unified warm-neutral grey ramp (TD-07.14)
|
|
714
|
-
*
|
|
715
|
-
* The ONE achromatic scale. Regenerate with `scripts/generate-grey-ramp.mjs` —
|
|
716
|
-
* preserve the generator, not just the hexes.
|
|
717
|
-
*
|
|
718
|
-
* The surface planes ARE steps here rather than a parallel object: `850` is
|
|
719
|
-
* overlay, `975` is the bezel. That is the whole point of the ramp. `grey`,
|
|
720
|
-
* `neutral`, `surfaceRampDark` and `backgroundFrameDark` all resolve into it,
|
|
721
|
-
* which is why every plane step below is byte-identical to the value that
|
|
722
|
-
* shipped in v0.10.0 — the surfaces do not move, only their names.
|
|
723
|
-
*
|
|
724
|
-
* TWO THINGS ABOUT THE NUMBERING, both deliberate and both previously re-derived
|
|
725
|
-
* from scratch more than once because they were never written down:
|
|
726
|
-
*
|
|
727
|
-
* 1. `975` sits BELOW the standard grid. `canonL` — the median L* of the seven
|
|
728
|
-
* chromatic `primitiveRamps` at each step — ends at L*10.3, which is step
|
|
729
|
-
* `950`. The bezel is L*3.8, darker than the grid's last rung, so there is
|
|
730
|
-
* simply no step number left for it and `975` extends past the end.
|
|
731
|
-
* 2. `850`/`875` are quarter-steps because overlay/raised/elevated are only
|
|
732
|
-
* ~2.7 L* apart and all three collide on `900` at normal resolution. `800`
|
|
733
|
-
* is a generated bridge between `700` (L*37.9) and overlay (L*22.7) so the
|
|
734
|
-
* spacing stays even across the join.
|
|
735
|
-
*
|
|
736
|
-
* There is no `inset`. It was retired, not renamed: at ΔE 1.10 from `975` it was
|
|
737
|
-
* an imperceptible duplicate of the frame, which is exactly why `<Surface pressed>`
|
|
738
|
-
* (surface − 1) kept collapsing into it. `975` is the floor.
|
|
739
|
-
*
|
|
740
|
-
* Spec, generator and the rejected v1/v2 cuts:
|
|
741
|
-
* coordination/design-explorations/foundations/warm-grey-ramp/
|
|
742
|
-
*/
|
|
743
|
-
declare const greyRamp: {
|
|
744
|
-
readonly 50: "#F9F6F3";
|
|
745
|
-
readonly 100: "#EDEAE7";
|
|
746
|
-
readonly 200: "#D4D1CE";
|
|
747
|
-
readonly 300: "#BDBAB7";
|
|
748
|
-
readonly 400: "#A29F9D";
|
|
749
|
-
readonly 500: "#888684";
|
|
750
|
-
readonly 600: "#72716F";
|
|
751
|
-
readonly 700: "#5A5958";
|
|
752
|
-
readonly 800: "#424140";
|
|
753
|
-
readonly 850: "#373635";
|
|
754
|
-
readonly 875: "#31302F";
|
|
755
|
-
readonly 900: "#2C2A28";
|
|
756
|
-
readonly 925: "#252321";
|
|
757
|
-
readonly 950: "#1C1916";
|
|
758
|
-
readonly 975: "#100D0A";
|
|
759
|
-
};
|
|
760
|
-
/**
|
|
761
|
-
* The surface planes, as ramp steps — the mapping `<Surface level>` resolves through.
|
|
762
|
-
*
|
|
763
|
-
* Ordered darkest -> lightest, which is the order `pressedLevel()` walks.
|
|
764
|
-
*/
|
|
765
|
-
declare const SURFACE_PLANE_STEPS: {
|
|
766
|
-
readonly frame: 975;
|
|
767
|
-
readonly background: 950;
|
|
768
|
-
readonly base: 925;
|
|
769
|
-
readonly elevated: 900;
|
|
770
|
-
readonly raised: 875;
|
|
771
|
-
readonly overlay: 850;
|
|
772
|
-
};
|
|
773
|
-
/**
|
|
774
|
-
* Derived tonal ramps (TD-05.09 color foundations)
|
|
775
|
-
*
|
|
776
|
-
* Seven OKLCH-generated hue ramps, 11 perceptual lightness steps each (50 -> 950).
|
|
777
|
-
* Built with hue-torsion + a chroma arc, anchored through existing brand/semantic
|
|
778
|
-
* hexes. `pin` marks the step each ramp flows through its anchor.
|
|
779
|
-
* This is the single source of truth for chromatic hexes — the categorical palette
|
|
780
|
-
* below references these steps rather than duplicating values.
|
|
781
|
-
* See coordination/design-explorations/foundations.
|
|
782
|
-
*/
|
|
783
|
-
declare const primitiveRamps: {
|
|
784
|
-
readonly red: {
|
|
785
|
-
readonly 50: "#FFF4F4";
|
|
786
|
-
readonly 100: "#FFE3E5";
|
|
787
|
-
readonly 200: "#FFC2C5";
|
|
788
|
-
readonly 300: "#FF9A9D";
|
|
789
|
-
readonly 400: "#F77175";
|
|
790
|
-
readonly 500: "#E05254";
|
|
791
|
-
readonly 600: "#D14343";
|
|
792
|
-
readonly 700: "#A4221C";
|
|
793
|
-
readonly 800: "#7E1002";
|
|
794
|
-
readonly 900: "#5A0900";
|
|
795
|
-
readonly 950: "#3D0400";
|
|
796
|
-
};
|
|
797
|
-
readonly orange: {
|
|
798
|
-
readonly 50: "#FFF5ED";
|
|
799
|
-
readonly 100: "#FFE6D4";
|
|
800
|
-
readonly 200: "#FFC7A2";
|
|
801
|
-
readonly 300: "#FFA063";
|
|
802
|
-
readonly 400: "#FF7900";
|
|
803
|
-
readonly 500: "#DA5F00";
|
|
804
|
-
readonly 600: "#B94A00";
|
|
805
|
-
readonly 700: "#983804";
|
|
806
|
-
readonly 800: "#6F290F";
|
|
807
|
-
readonly 900: "#4E1C0C";
|
|
808
|
-
readonly 950: "#331107";
|
|
809
|
-
};
|
|
810
|
-
readonly amber: {
|
|
811
|
-
readonly 50: "#FFF7DD";
|
|
812
|
-
readonly 100: "#FFEAA9";
|
|
813
|
-
readonly 200: "#FFD352";
|
|
814
|
-
readonly 300: "#F9B415";
|
|
815
|
-
readonly 400: "#E08C00";
|
|
816
|
-
readonly 500: "#C27400";
|
|
817
|
-
readonly 600: "#A45E00";
|
|
818
|
-
readonly 700: "#814D14";
|
|
819
|
-
readonly 800: "#5B3A1A";
|
|
820
|
-
readonly 900: "#442503";
|
|
821
|
-
readonly 950: "#301500";
|
|
822
|
-
};
|
|
823
|
-
readonly green: {
|
|
824
|
-
readonly 50: "#E3FFEE";
|
|
825
|
-
readonly 100: "#B5FFD2";
|
|
826
|
-
readonly 200: "#58F69E";
|
|
827
|
-
readonly 300: "#2ED573";
|
|
828
|
-
readonly 400: "#21C05D";
|
|
829
|
-
readonly 500: "#22A444";
|
|
830
|
-
readonly 600: "#298732";
|
|
831
|
-
readonly 700: "#2B6B25";
|
|
832
|
-
readonly 800: "#264D1C";
|
|
833
|
-
readonly 900: "#1B3515";
|
|
834
|
-
readonly 950: "#11220D";
|
|
835
|
-
};
|
|
836
|
-
readonly cyan: {
|
|
837
|
-
readonly 50: "#E6FBFF";
|
|
838
|
-
readonly 100: "#C2F6FF";
|
|
839
|
-
readonly 200: "#62EAFF";
|
|
840
|
-
readonly 300: "#22D3EE";
|
|
841
|
-
readonly 400: "#01B5D1";
|
|
842
|
-
readonly 500: "#2697B7";
|
|
843
|
-
readonly 600: "#307B9B";
|
|
844
|
-
readonly 700: "#2A617F";
|
|
845
|
-
readonly 800: "#22465F";
|
|
846
|
-
readonly 900: "#0B3149";
|
|
847
|
-
readonly 950: "#001F36";
|
|
848
|
-
};
|
|
849
|
-
readonly blue: {
|
|
850
|
-
readonly 50: "#EFF8FF";
|
|
851
|
-
readonly 100: "#D9EFFF";
|
|
852
|
-
readonly 200: "#ACDBFF";
|
|
853
|
-
readonly 300: "#78C2FF";
|
|
854
|
-
readonly 400: "#3CA8FF";
|
|
855
|
-
readonly 500: "#2196F3";
|
|
856
|
-
readonly 600: "#1072CB";
|
|
857
|
-
readonly 700: "#135AA8";
|
|
858
|
-
readonly 800: "#14407E";
|
|
859
|
-
readonly 900: "#112C5A";
|
|
860
|
-
readonly 950: "#091B3C";
|
|
861
|
-
};
|
|
862
|
-
readonly magenta: {
|
|
863
|
-
readonly 50: "#FFF3F9";
|
|
864
|
-
readonly 100: "#FFE2F1";
|
|
865
|
-
readonly 200: "#FFBDE2";
|
|
866
|
-
readonly 300: "#FF8FD5";
|
|
867
|
-
readonly 400: "#ED69C3";
|
|
868
|
-
readonly 500: "#D548AF";
|
|
869
|
-
readonly 600: "#BA2996";
|
|
870
|
-
readonly 700: "#9C0D7A";
|
|
871
|
-
readonly 800: "#77005A";
|
|
872
|
-
readonly 900: "#56003F";
|
|
873
|
-
readonly 950: "#3B0029";
|
|
874
|
-
};
|
|
875
|
-
};
|
|
876
|
-
/**
|
|
877
|
-
* Categorical (qualitative) palette — an ordered, CVD-safe series expressed as
|
|
878
|
-
* references into {@link primitiveRamps} (one source of truth; the palette moves
|
|
879
|
-
* with the ramps).
|
|
880
|
-
*
|
|
881
|
-
* Design: a single canonical hue order (blue, magenta, red, orange, green, cyan,
|
|
882
|
-
* amber), with steps chosen vivid-midtone-first and fanned lighter/darker as the
|
|
883
|
-
* series grows to preserve separation. The sequence is nested-stable — a chart
|
|
884
|
-
* with N series uses the first N colors, and the series index is stable as N
|
|
885
|
-
* changes. Colorblind-safe worst-case deuteranopia/protanopia floor 8 holds
|
|
886
|
-
* through {@link CATEGORICAL_CVD_SAFE_MAX} colors; the 7th is an extended color
|
|
887
|
-
* that should be paired with a legend or other secondary encoding.
|
|
888
|
-
*
|
|
889
|
-
* Two variants: `default` (vivid, sits on neutral/light surfaces, legible under
|
|
890
|
-
* black text) and `dark` (deeper shades legible under white text on a fill). A
|
|
891
|
-
* separate "light" variant was dropped — the vivid `default` picks already clear
|
|
892
|
-
* black-text contrast, so it doubles as the light-context palette.
|
|
893
|
-
*/
|
|
894
|
-
declare const categoricalPalette: {
|
|
895
|
-
readonly default: readonly ["#2196F3", "#D548AF", "#E05254", "#FF7900", "#2ED573", "#22D3EE", "#A45E00"];
|
|
896
|
-
readonly dark: readonly ["#1072CB", "#BA2996", "#E05254", "#B94A00", "#264D1C", "#22465F", "#C27400"];
|
|
897
|
-
};
|
|
898
|
-
/** Largest series count that holds the CVD floor without a legend. */
|
|
899
|
-
declare const CATEGORICAL_CVD_SAFE_MAX = 6;
|
|
900
|
-
/**
|
|
901
|
-
* Categorical palette variant.
|
|
902
|
-
* - `default` : vivid; neutral/light surfaces, legible under black text
|
|
903
|
-
* - `dark` : deeper shades, legible under white text on a filled swatch
|
|
904
|
-
*/
|
|
905
|
-
type CategoricalVariant = keyof typeof categoricalPalette;
|
|
906
|
-
/**
|
|
907
|
-
* Get a color from the ordered categorical palette by series index.
|
|
908
|
-
* The palette is nested-stable, so the color for a given index does not change
|
|
909
|
-
* with the total series count; `index` simply wraps past the end.
|
|
910
|
-
*
|
|
911
|
-
* @param index - 0-based series index (wraps past the end)
|
|
912
|
-
* @param variant - `default` (black-text / light surfaces) or `dark` (white text)
|
|
913
|
-
* @returns The hex color string
|
|
914
|
-
*/
|
|
915
|
-
declare function getCategoricalColor(index: number, variant?: CategoricalVariant): string;
|
|
916
|
-
/**
|
|
917
|
-
* Diverging status scale (BodyMap training-status: under → optimal → over) as
|
|
918
|
-
* references into {@link primitiveRamps}. A true diverging shape — `optimal` is
|
|
919
|
-
* the lightest center, the extremes go darker — so the signal reads in lightness
|
|
920
|
-
* (colorblind-robust; worst-case deut/protanopia min ΔE ~10.9) and the direction
|
|
921
|
-
* reads in the blue↔red axis (the CVD-safe hue pair).
|
|
922
|
-
*
|
|
923
|
-
* Tuned so every stop is dark enough for the fill yet light enough that BLACK
|
|
924
|
-
* text clears 4.5:1 on all five — no per-cell white/black flipping. The value
|
|
925
|
-
* valley is symmetric: the two mid-arms (maintenance / approaching) sit at equal
|
|
926
|
-
* lightness (both ~0.53 relative luminance), the ends darker.
|
|
927
|
-
*/
|
|
928
|
-
declare const divergingScale: readonly ["#2196F3", "#22D3EE", "#58F69E", "#F9B415", "#D14343"];
|
|
929
|
-
/**
|
|
930
|
-
* Sequential "effort" scale (low → high intensity: green → yellow → orange → red)
|
|
931
|
-
* as references into {@link primitiveRamps}. A 6-stop ordinal palette; the
|
|
932
|
-
* velocity/RPE strip sub-samples it. Every adjacent pair clears the CVD floor
|
|
933
|
-
* (min deut/protan ΔE ≥ 4.5), and within that the hue walk is kept smooth —
|
|
934
|
-
* the amber-200 → amber-300 → orange-400 run steps the yellow→orange transition
|
|
935
|
-
* gradually rather than lurching. Order encodes magnitude, so it tolerates the
|
|
936
|
-
* green↔red CVD pair. Stops 0–3 take black text; the dark reds take white.
|
|
937
|
-
*/
|
|
938
|
-
declare const sequentialEffort: readonly ["#2ED573", "#FFD352", "#F9B415", "#FF7900", "#D14343", "#A4221C"];
|
|
939
|
-
/**
|
|
940
|
-
* Best-contrast text color (black or white) for a solid fill — for labels sitting
|
|
941
|
-
* on categorical/diverging/effort swatches. Uses the WCAG relative-luminance ratio.
|
|
942
|
-
*/
|
|
943
|
-
declare function bestTextColor(hex: string): '#000000' | '#FFFFFF';
|
|
944
|
-
/**
|
|
945
|
-
* Discrete rainbow palette for data visualization
|
|
946
|
-
* Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete
|
|
947
|
-
*/
|
|
948
|
-
declare const discreteRainbow: readonly ["#E8ECFB", "#D9CCE3", "#D1BBD7", "#CAACCB", "#BA8DB4", "#AE76A3", "#AA6F9E", "#994F88", "#882E72", "#1965B0", "#437DBF", "#5289C7", "#6195CF", "#7BAFDE", "#4EB265", "#90C987", "#CAE0AB", "#F7F056", "#F7CB45", "#F6C141", "#F4A736", "#F1932D", "#EE8026", "#E8601C", "#E65518", "#DC050C", "#A5170E", "#72190E", "#42150A"];
|
|
949
|
-
/**
|
|
950
|
-
* Get a color from the discrete rainbow palette for a given index and palette size.
|
|
951
|
-
* Colors are optimized for visual distinction at each palette size.
|
|
952
|
-
*
|
|
953
|
-
* @param index - The index of the color in the series (0-based)
|
|
954
|
-
* @param size - The total number of colors needed (1-23)
|
|
955
|
-
* @returns The hex color string
|
|
956
|
-
*/
|
|
957
|
-
declare function getDiscreteRainbowColor(index: number, size: number): string;
|
|
958
|
-
declare const primitiveTypography: {
|
|
959
|
-
readonly fontFamilies: {
|
|
960
|
-
readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"];
|
|
961
|
-
readonly body: readonly ["Nunito Sans", "sans-serif"];
|
|
962
|
-
readonly heading: readonly ["Space Grotesk", "sans-serif"];
|
|
963
|
-
readonly mono: readonly ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"];
|
|
964
|
-
};
|
|
965
|
-
readonly fontSizes: {
|
|
966
|
-
readonly xs: "0.75rem";
|
|
967
|
-
readonly sm: "0.875rem";
|
|
968
|
-
readonly base: "1rem";
|
|
969
|
-
readonly lg: "1.125rem";
|
|
970
|
-
readonly xl: "1.5rem";
|
|
971
|
-
readonly '2xl': "2rem";
|
|
972
|
-
readonly '3xl': "2.25rem";
|
|
973
|
-
readonly '4xl': "3rem";
|
|
974
|
-
readonly '5xl': "3.5rem";
|
|
975
|
-
};
|
|
976
|
-
readonly fontWeights: {
|
|
977
|
-
readonly normal: 400;
|
|
978
|
-
readonly medium: 500;
|
|
979
|
-
readonly semibold: 600;
|
|
980
|
-
readonly bold: 700;
|
|
981
|
-
};
|
|
982
|
-
readonly lineHeights: {
|
|
983
|
-
readonly none: 1;
|
|
984
|
-
readonly tight: 1.375;
|
|
985
|
-
readonly snug: 1.5;
|
|
986
|
-
readonly normal: 1.57;
|
|
987
|
-
readonly relaxed: 1.66;
|
|
988
|
-
readonly loose: 1.75;
|
|
989
|
-
};
|
|
990
|
-
readonly letterSpacing: {
|
|
991
|
-
readonly tighter: "-0.05em";
|
|
992
|
-
readonly tight: "-0.025em";
|
|
993
|
-
readonly normal: "0em";
|
|
994
|
-
readonly wide: "0.025em";
|
|
995
|
-
readonly wider: "0.05em";
|
|
996
|
-
readonly widest: "0.5px";
|
|
997
|
-
};
|
|
998
|
-
};
|
|
999
|
-
declare const primitiveSpacing: {
|
|
1000
|
-
readonly 0: "0";
|
|
1001
|
-
readonly px: "1px";
|
|
1002
|
-
readonly 0.5: "0.125rem";
|
|
1003
|
-
readonly 1: "0.25rem";
|
|
1004
|
-
readonly 1.5: "0.375rem";
|
|
1005
|
-
readonly 2: "0.5rem";
|
|
1006
|
-
readonly 2.5: "0.625rem";
|
|
1007
|
-
readonly 3: "0.75rem";
|
|
1008
|
-
readonly 3.5: "0.875rem";
|
|
1009
|
-
readonly 4: "1rem";
|
|
1010
|
-
readonly 5: "1.25rem";
|
|
1011
|
-
readonly 6: "1.5rem";
|
|
1012
|
-
readonly 7: "1.75rem";
|
|
1013
|
-
readonly 8: "2rem";
|
|
1014
|
-
readonly 9: "2.25rem";
|
|
1015
|
-
readonly 10: "2.5rem";
|
|
1016
|
-
readonly 11: "2.75rem";
|
|
1017
|
-
readonly 12: "3rem";
|
|
1018
|
-
readonly 14: "3.5rem";
|
|
1019
|
-
readonly 16: "4rem";
|
|
1020
|
-
readonly 20: "5rem";
|
|
1021
|
-
readonly 24: "6rem";
|
|
1022
|
-
readonly 28: "7rem";
|
|
1023
|
-
readonly 32: "8rem";
|
|
1024
|
-
};
|
|
1025
|
-
declare const primitiveBorderRadius: {
|
|
1026
|
-
readonly none: "0";
|
|
1027
|
-
readonly sm: "4px";
|
|
1028
|
-
readonly DEFAULT: "8px";
|
|
1029
|
-
readonly md: "8px";
|
|
1030
|
-
readonly lg: "12px";
|
|
1031
|
-
readonly xl: "16px";
|
|
1032
|
-
readonly '2xl': "24px";
|
|
1033
|
-
readonly full: "9999px";
|
|
1034
|
-
};
|
|
1035
|
-
declare const primitiveBreakpoints: {
|
|
1036
|
-
readonly xs: 0;
|
|
1037
|
-
readonly sm: 600;
|
|
1038
|
-
readonly md: 1000;
|
|
1039
|
-
readonly lg: 1200;
|
|
1040
|
-
readonly xl: 1920;
|
|
1041
|
-
};
|
|
1042
|
-
declare const primitiveZIndex: {
|
|
1043
|
-
readonly hide: -1;
|
|
1044
|
-
readonly auto: "auto";
|
|
1045
|
-
readonly base: 0;
|
|
1046
|
-
readonly docked: 10;
|
|
1047
|
-
readonly dropdown: 1000;
|
|
1048
|
-
readonly sticky: 1100;
|
|
1049
|
-
readonly drawer: 1100;
|
|
1050
|
-
readonly banner: 1200;
|
|
1051
|
-
readonly appBar: 1200;
|
|
1052
|
-
readonly overlay: 1300;
|
|
1053
|
-
readonly modal: 1400;
|
|
1054
|
-
readonly popover: 1500;
|
|
1055
|
-
readonly skipLink: 1600;
|
|
1056
|
-
readonly toast: 1700;
|
|
1057
|
-
readonly tooltip: 1800;
|
|
1058
|
-
};
|
|
1059
|
-
|
|
1060
138
|
/**
|
|
1061
139
|
* Theme Configuration
|
|
1062
140
|
*
|
|
@@ -1087,26 +165,40 @@ declare const lightThemeCSSVars: {
|
|
|
1087
165
|
readonly '--color-brand-primary-light': "#FFA063";
|
|
1088
166
|
readonly '--color-brand-primary-dark': "#DA5F00";
|
|
1089
167
|
readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
|
|
168
|
+
readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
|
|
169
|
+
readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
|
|
1090
170
|
readonly '--color-brand-secondary': "#307B9B";
|
|
1091
171
|
readonly '--color-brand-secondary-light': "#2697B7";
|
|
1092
172
|
readonly '--color-brand-secondary-dark': "#2A617F";
|
|
1093
173
|
readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
|
|
174
|
+
readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
|
|
175
|
+
readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
|
|
1094
176
|
readonly '--color-on-brand-primary': "#FFFFFF";
|
|
1095
177
|
readonly '--color-on-brand-secondary': "#FFFFFF";
|
|
1096
178
|
readonly '--color-status-success': "#2ED573";
|
|
1097
179
|
readonly '--color-status-success-subtle': "#E3FFEE";
|
|
180
|
+
readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
|
|
181
|
+
readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
|
|
1098
182
|
readonly '--color-status-live': "#2ED573";
|
|
1099
183
|
readonly '--color-status-live-muted': "#22A444";
|
|
1100
184
|
readonly '--color-status-error': "#D14343";
|
|
1101
185
|
readonly '--color-status-error-subtle': "#FFF4F4";
|
|
186
|
+
readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
|
|
187
|
+
readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
|
|
1102
188
|
readonly '--color-status-warning': "#F9B415";
|
|
1103
189
|
readonly '--color-status-warning-subtle': "#FFF7DD";
|
|
190
|
+
readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
|
|
191
|
+
readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
|
|
1104
192
|
readonly '--color-status-info': "#2196F3";
|
|
1105
193
|
readonly '--color-status-info-subtle': "#EFF8FF";
|
|
1106
|
-
readonly '--color-status-
|
|
194
|
+
readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
|
|
195
|
+
readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
|
|
196
|
+
readonly '--color-status-error-vivid': "#FF4757";
|
|
1107
197
|
readonly '--color-status-error-vivid-light': "#E05254";
|
|
1108
198
|
readonly '--color-status-error-vivid-dark': "#A4221C";
|
|
1109
199
|
readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
200
|
+
readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
|
|
201
|
+
readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
|
|
1110
202
|
readonly '--color-text-primary': "#121828";
|
|
1111
203
|
readonly '--color-text-secondary': "#65748B";
|
|
1112
204
|
readonly '--color-text-tertiary': "#A29F9D";
|
|
@@ -1203,26 +295,40 @@ declare const darkThemeCSSVars: {
|
|
|
1203
295
|
readonly '--color-brand-primary-light': "#FFA063";
|
|
1204
296
|
readonly '--color-brand-primary-dark': "#DA5F00";
|
|
1205
297
|
readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
|
|
298
|
+
readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
|
|
299
|
+
readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
|
|
1206
300
|
readonly '--color-brand-secondary': "#307B9B";
|
|
1207
301
|
readonly '--color-brand-secondary-light': "#2697B7";
|
|
1208
302
|
readonly '--color-brand-secondary-dark': "#2A617F";
|
|
1209
303
|
readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
|
|
304
|
+
readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
|
|
305
|
+
readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
|
|
1210
306
|
readonly '--color-on-brand-primary': "#FFFFFF";
|
|
1211
307
|
readonly '--color-on-brand-secondary': "#FFFFFF";
|
|
1212
308
|
readonly '--color-status-success': "#2ED573";
|
|
1213
309
|
readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
|
|
310
|
+
readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
|
|
311
|
+
readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
|
|
1214
312
|
readonly '--color-status-live': "#2ED573";
|
|
1215
313
|
readonly '--color-status-live-muted': "#22A444";
|
|
1216
314
|
readonly '--color-status-error': "#D14343";
|
|
1217
315
|
readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
|
|
316
|
+
readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
|
|
317
|
+
readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
|
|
1218
318
|
readonly '--color-status-warning': "#F9B415";
|
|
1219
319
|
readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
|
|
320
|
+
readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
|
|
321
|
+
readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
|
|
1220
322
|
readonly '--color-status-info': "#2196F3";
|
|
1221
323
|
readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
|
|
1222
|
-
readonly '--color-status-
|
|
324
|
+
readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
|
|
325
|
+
readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
|
|
326
|
+
readonly '--color-status-error-vivid': "#FF4757";
|
|
1223
327
|
readonly '--color-status-error-vivid-light': "#E05254";
|
|
1224
328
|
readonly '--color-status-error-vivid-dark': "#A4221C";
|
|
1225
329
|
readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
330
|
+
readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
|
|
331
|
+
readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
|
|
1226
332
|
readonly '--color-text-primary': "#F9F6F3";
|
|
1227
333
|
readonly '--color-text-secondary': "#A29F9D";
|
|
1228
334
|
readonly '--color-text-tertiary': "#888684";
|
|
@@ -1319,26 +425,40 @@ declare function getThemeCSSVars(mode: ThemeMode): {
|
|
|
1319
425
|
readonly '--color-brand-primary-light': "#FFA063";
|
|
1320
426
|
readonly '--color-brand-primary-dark': "#DA5F00";
|
|
1321
427
|
readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
|
|
428
|
+
readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
|
|
429
|
+
readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
|
|
1322
430
|
readonly '--color-brand-secondary': "#307B9B";
|
|
1323
431
|
readonly '--color-brand-secondary-light': "#2697B7";
|
|
1324
432
|
readonly '--color-brand-secondary-dark': "#2A617F";
|
|
1325
433
|
readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
|
|
434
|
+
readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
|
|
435
|
+
readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
|
|
1326
436
|
readonly '--color-on-brand-primary': "#FFFFFF";
|
|
1327
437
|
readonly '--color-on-brand-secondary': "#FFFFFF";
|
|
1328
438
|
readonly '--color-status-success': "#2ED573";
|
|
1329
439
|
readonly '--color-status-success-subtle': "#E3FFEE";
|
|
440
|
+
readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
|
|
441
|
+
readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
|
|
1330
442
|
readonly '--color-status-live': "#2ED573";
|
|
1331
443
|
readonly '--color-status-live-muted': "#22A444";
|
|
1332
444
|
readonly '--color-status-error': "#D14343";
|
|
1333
445
|
readonly '--color-status-error-subtle': "#FFF4F4";
|
|
446
|
+
readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
|
|
447
|
+
readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
|
|
1334
448
|
readonly '--color-status-warning': "#F9B415";
|
|
1335
449
|
readonly '--color-status-warning-subtle': "#FFF7DD";
|
|
450
|
+
readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
|
|
451
|
+
readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
|
|
1336
452
|
readonly '--color-status-info': "#2196F3";
|
|
1337
453
|
readonly '--color-status-info-subtle': "#EFF8FF";
|
|
1338
|
-
readonly '--color-status-
|
|
454
|
+
readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
|
|
455
|
+
readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
|
|
456
|
+
readonly '--color-status-error-vivid': "#FF4757";
|
|
1339
457
|
readonly '--color-status-error-vivid-light': "#E05254";
|
|
1340
458
|
readonly '--color-status-error-vivid-dark': "#A4221C";
|
|
1341
459
|
readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
460
|
+
readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
|
|
461
|
+
readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
|
|
1342
462
|
readonly '--color-text-primary': "#121828";
|
|
1343
463
|
readonly '--color-text-secondary': "#65748B";
|
|
1344
464
|
readonly '--color-text-tertiary': "#A29F9D";
|
|
@@ -1434,26 +554,40 @@ declare function getThemeCSSVars(mode: ThemeMode): {
|
|
|
1434
554
|
readonly '--color-brand-primary-light': "#FFA063";
|
|
1435
555
|
readonly '--color-brand-primary-dark': "#DA5F00";
|
|
1436
556
|
readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
|
|
557
|
+
readonly '--color-brand-primary-muted': "rgba(255, 121, 0, 0.30)";
|
|
558
|
+
readonly '--color-brand-primary-strong': "rgba(255, 121, 0, 0.50)";
|
|
1437
559
|
readonly '--color-brand-secondary': "#307B9B";
|
|
1438
560
|
readonly '--color-brand-secondary-light': "#2697B7";
|
|
1439
561
|
readonly '--color-brand-secondary-dark': "#2A617F";
|
|
1440
562
|
readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
|
|
563
|
+
readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
|
|
564
|
+
readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
|
|
1441
565
|
readonly '--color-on-brand-primary': "#FFFFFF";
|
|
1442
566
|
readonly '--color-on-brand-secondary': "#FFFFFF";
|
|
1443
567
|
readonly '--color-status-success': "#2ED573";
|
|
1444
568
|
readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
|
|
569
|
+
readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
|
|
570
|
+
readonly '--color-status-success-strong': "rgba(46, 213, 115, 0.50)";
|
|
1445
571
|
readonly '--color-status-live': "#2ED573";
|
|
1446
572
|
readonly '--color-status-live-muted': "#22A444";
|
|
1447
573
|
readonly '--color-status-error': "#D14343";
|
|
1448
574
|
readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
|
|
575
|
+
readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
|
|
576
|
+
readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
|
|
1449
577
|
readonly '--color-status-warning': "#F9B415";
|
|
1450
578
|
readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
|
|
579
|
+
readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
|
|
580
|
+
readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
|
|
1451
581
|
readonly '--color-status-info': "#2196F3";
|
|
1452
582
|
readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
|
|
1453
|
-
readonly '--color-status-
|
|
583
|
+
readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
|
|
584
|
+
readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
|
|
585
|
+
readonly '--color-status-error-vivid': "#FF4757";
|
|
1454
586
|
readonly '--color-status-error-vivid-light': "#E05254";
|
|
1455
587
|
readonly '--color-status-error-vivid-dark': "#A4221C";
|
|
1456
588
|
readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
|
|
589
|
+
readonly '--color-status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
|
|
590
|
+
readonly '--color-status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
|
|
1457
591
|
readonly '--color-text-primary': "#F9F6F3";
|
|
1458
592
|
readonly '--color-text-secondary': "#A29F9D";
|
|
1459
593
|
readonly '--color-text-tertiary': "#888684";
|
|
@@ -1652,8 +786,10 @@ type ThemeConfig = typeof gluestackConfig;
|
|
|
1652
786
|
*
|
|
1653
787
|
* Kept: grain, rim-light, contact shadow.
|
|
1654
788
|
*
|
|
1655
|
-
* See
|
|
1656
|
-
*
|
|
789
|
+
* See `sources/design/surface-system-north-star.md` §4 and
|
|
790
|
+
* `sources/runbooks/VW-99-depth-wall-calibration.md`. Those paths are relative to
|
|
791
|
+
* the `voltras-workspace` active-work initiative (`active-work open voltras-workspace`), not this repo —
|
|
792
|
+
* titan-design has no `sources/` directory, so they do not resolve from here.
|
|
1657
793
|
*/
|
|
1658
794
|
|
|
1659
795
|
/**
|
|
@@ -1738,6 +874,19 @@ declare function insetWell(tone?: string): ViewStyle;
|
|
|
1738
874
|
* wrong, so grain and shadow carry the material alone.
|
|
1739
875
|
*/
|
|
1740
876
|
declare function barPaper(color: string, flip?: boolean): ViewStyle;
|
|
877
|
+
/**
|
|
878
|
+
* A POST-IT card: a matte tinted sheet with a crisp rim, a defined contact
|
|
879
|
+
* shadow, and a deliberate CANT (`deg`) so it reads as a stuck note — where a
|
|
880
|
+
* small unit of data wants to feel pinned to the surface (alerts, next-set). A
|
|
881
|
+
* degree or two, not a fraction, so the tilt is intentional rather than a bug.
|
|
882
|
+
*/
|
|
883
|
+
declare function postIt(tone?: string, deg?: number): ViewStyle;
|
|
884
|
+
/**
|
|
885
|
+
* DEBOSSED (engraved) text: a 1px light highlight dropped just below the glyphs
|
|
886
|
+
* so a label reads as pressed INTO the surface. Deliberate, for section eyebrows
|
|
887
|
+
* on a matte plane — not body copy. Pair with a tertiary/dim text colour.
|
|
888
|
+
*/
|
|
889
|
+
declare const debossLabel: TextStyle;
|
|
1741
890
|
|
|
1742
891
|
/**
|
|
1743
892
|
* Colour math shared by the depth system.
|
|
@@ -1965,7 +1114,7 @@ interface ThemePresetColors {
|
|
|
1965
1114
|
'hairline-subtle'?: string;
|
|
1966
1115
|
'hairline-strong'?: string;
|
|
1967
1116
|
'border-focus'?: string;
|
|
1968
|
-
|
|
1117
|
+
divider?: string;
|
|
1969
1118
|
[key: `${string}`]: string | undefined;
|
|
1970
1119
|
}
|
|
1971
1120
|
interface ThemePresetFonts {
|
|
@@ -2004,8 +1153,16 @@ interface ThemePreset {
|
|
|
2004
1153
|
fontImport?: string;
|
|
2005
1154
|
}
|
|
2006
1155
|
|
|
1156
|
+
/**
|
|
1157
|
+
* @deprecated Use `ThemeProvider` with semantic tokens — removed once audiobook
|
|
1158
|
+
* migrates off presets (AW-129).
|
|
1159
|
+
*/
|
|
2007
1160
|
declare function applyThemePreset(preset: ThemePreset): () => void;
|
|
2008
1161
|
|
|
1162
|
+
/**
|
|
1163
|
+
* @deprecated Use `ThemeProvider` with semantic tokens — removed once audiobook
|
|
1164
|
+
* migrates off presets (AW-129).
|
|
1165
|
+
*/
|
|
2009
1166
|
declare const defaultPreset: ThemePreset;
|
|
2010
1167
|
|
|
2011
1168
|
/**
|
|
@@ -2013,7 +1170,10 @@ declare const defaultPreset: ThemePreset;
|
|
|
2013
1170
|
*
|
|
2014
1171
|
* Warm copper/patina aesthetic inspired by vintage audio equipment
|
|
2015
1172
|
* and reading lounges. Dark-mode only design with editorial typography.
|
|
1173
|
+
*
|
|
1174
|
+
* @deprecated Use `ThemeProvider` with semantic tokens — removed once audiobook
|
|
1175
|
+
* migrates off presets (AW-129).
|
|
2016
1176
|
*/
|
|
2017
1177
|
declare const audiobookPreset: ThemePreset;
|
|
2018
1178
|
|
|
2019
|
-
export {
|
|
1179
|
+
export { type CssPropertyEntry, type CssPropertyManifest, ELEVATION_PLANE, type ElevationLevel, FLOATING_ELEVATION_MIN, FLOATING_LIFT_MIN, type GlowIntensity, type GradientStyle, LIFT_RIM_ALPHA, type LiftOptions, type LiftStep, type ManifestValidationResult, PLANE_ORDER, PRESSED_ELEVATION_LEVEL, SURFACE_LEVEL_TOKEN, type ShadowIntensity, type SurfaceLevel, type ThemeConfig, ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, barPaper, darkThemeCSSVars, darken, debossLabel, defaultPreset, elevationPlane, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, gluestackConfig, grainForTone, grainOpacityForTone, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, liftShadow, liftStyle, lightThemeCSSVars, lighten, linearGradient, paperSheet, postIt, pressedLevel, raisedLevel, resolveColor, rgbToHex, rgbToHsv, surfaceBackground, surfaceGradient, validateCssPropertyManifest };
|