78d28307ec
- Add product token sections: - peakpulse: activity colors, speed zones, elevation, streaks - chronomind: urgency levels, focus mode, pomodoro colors - nomgap: fasting stage colors, autophagy meter, safety - lysnrai: recording states, processing, dictation mode - Add new token categories: - zIndex: layers from hidden (-1) to tooltip (800) - icon: xs (12) to 2xl (48) - grid: 12-column system with breakpoints - opacity: 0-100 scale - Regenerate all platform outputs (CSS, TS, Kotlin, Swift, React Native) - Version bumped to 1.1.0
140 lines
3.7 KiB
TypeScript
140 lines
3.7 KiB
TypeScript
/**
|
|
* React Native Design Tokens — Auto-generated from bytelyst.tokens.json
|
|
* Do not edit manually. Run: tsx scripts/generate-react-native.ts
|
|
*/
|
|
|
|
export const tokens = {
|
|
// ── Semantic Colors (Dark Theme) ──────────────────────────────────
|
|
colors: {
|
|
bgCanvas: '#06070A',
|
|
bgElevated: '#0E1118',
|
|
surfaceCard: '#121725',
|
|
surfaceMuted: '#1A2335',
|
|
borderDefault: '#1FFFFFFF',
|
|
borderStrong: '#38FFFFFF',
|
|
textPrimary: '#EFF4FF',
|
|
textSecondary: '#A5B1C7',
|
|
textTertiary: '#6C7C98',
|
|
accentPrimary: '#5A8CFF',
|
|
accentSecondary: '#2EE6D6',
|
|
success: '#34D399',
|
|
warning: '#F59E0B',
|
|
danger: '#FF6E6E',
|
|
focusRing: '#735A8CFF',
|
|
overlayScrim: '#B8050812',
|
|
},
|
|
|
|
// ── NomGap Product Colors ──────────────────────────────────────────
|
|
nomgap: {
|
|
stageFed: '#FF9F43',
|
|
stageEarlyFast: '#FECA57',
|
|
stageFasted: '#48DBFB',
|
|
stageKetosis: '#5A8CFF',
|
|
stageDeepAutophagy: '#A66BFF',
|
|
stageExtended: '#FFD700',
|
|
autophagyMeter: '#5AE68C',
|
|
hydrationReminder: '#48DBFB',
|
|
electrolyteAlert: '#FF9F43',
|
|
safetyWarning: '#FF6E6E',
|
|
},
|
|
|
|
// ── Spacing (8pt grid) ──────────────────────────────────────────────
|
|
spacing: {
|
|
0: 0,
|
|
1: 4,
|
|
2: 8,
|
|
3: 12,
|
|
4: 16,
|
|
5: 20,
|
|
6: 24,
|
|
7: 28,
|
|
8: 32,
|
|
10: 40,
|
|
12: 48,
|
|
16: 64,
|
|
},
|
|
|
|
// ── Border Radius ───────────────────────────────────────────────────
|
|
radius: {
|
|
xs: 8,
|
|
sm: 12,
|
|
md: 16,
|
|
lg: 20,
|
|
xl: 24,
|
|
pill: 999,
|
|
},
|
|
|
|
// ── Typography ─────────────────────────────────────────────────────
|
|
typography: {
|
|
fontFamily: {
|
|
display: 'System',
|
|
body: 'System',
|
|
mono: 'Courier',
|
|
},
|
|
fontSize: {
|
|
xs: 12,
|
|
sm: 14,
|
|
md: 16,
|
|
lg: 18,
|
|
xl: 22,
|
|
'2xl': 28,
|
|
'3xl': 36,
|
|
},
|
|
fontWeight: {
|
|
regular: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
},
|
|
},
|
|
|
|
// ── Icon Sizes ──────────────────────────────────────────────────────
|
|
icon: {
|
|
xs: 12,
|
|
sm: 16,
|
|
md: 20,
|
|
lg: 24,
|
|
xl: 32,
|
|
'2xl': 48,
|
|
},
|
|
|
|
// ── Z-Index Layers ───────────────────────────────────────────────────
|
|
zIndex: {
|
|
hidden: -1,
|
|
base: 0,
|
|
dropdown: 100,
|
|
sticky: 200,
|
|
fixed: 300,
|
|
overlay: 400,
|
|
modal: 500,
|
|
popover: 600,
|
|
toast: 700,
|
|
tooltip: 800,
|
|
},
|
|
|
|
// ── Opacity ─────────────────────────────────────────────────────────
|
|
opacity: {
|
|
'0': 0,
|
|
'10': 0.1,
|
|
'20': 0.2,
|
|
'30': 0.3,
|
|
'40': 0.4,
|
|
'50': 0.5,
|
|
'60': 0.6,
|
|
'70': 0.7,
|
|
'80': 0.8,
|
|
'90': 0.9,
|
|
'100': 1,
|
|
},
|
|
|
|
// ── Motion ────────────────────────────────────────────────────────────
|
|
motion: {
|
|
instant: 70,
|
|
fast: 140,
|
|
base: 220,
|
|
slow: 320,
|
|
},
|
|
} as const;
|
|
|
|
export type Tokens = typeof tokens;
|