From 78d28307ec029eba4c29a2ef32f7e3fd7486c018 Mon Sep 17 00:00:00 2001 From: saravanakumardb1 Date: Tue, 3 Mar 2026 21:51:20 -0800 Subject: [PATCH] =?UTF-8?q?feat(design-tokens):=20v1.1.0=20=E2=80=94=20add?= =?UTF-8?q?=20product-specific=20tokens=20and=20new=20categories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../generated/react-native/tokens.ts | 139 ++++++ packages/design-tokens/generated/tokens.ts | 437 +++++++++++------- .../design-tokens/tokens/bytelyst.tokens.json | 95 +++- 3 files changed, 496 insertions(+), 175 deletions(-) create mode 100644 packages/design-tokens/generated/react-native/tokens.ts diff --git a/packages/design-tokens/generated/react-native/tokens.ts b/packages/design-tokens/generated/react-native/tokens.ts new file mode 100644 index 00000000..ddb25cad --- /dev/null +++ b/packages/design-tokens/generated/react-native/tokens.ts @@ -0,0 +1,139 @@ +/** + * 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; diff --git a/packages/design-tokens/generated/tokens.ts b/packages/design-tokens/generated/tokens.ts index b8ad29ba..aa7c6753 100644 --- a/packages/design-tokens/generated/tokens.ts +++ b/packages/design-tokens/generated/tokens.ts @@ -1,195 +1,286 @@ // Auto-generated from bytelyst.tokens.json — do not edit manually export const tokens = { - "meta": { - "name": "ByteLyst Design Tokens", - "version": "1.0.0", - "updatedAt": "2026-02-12", - "scale": "8pt" + meta: { + name: 'ByteLyst Design Tokens', + version: '1.1.0', + updatedAt: '2026-03-03', + scale: '8pt', }, - "color": { - "palette": { - "neutral": { - "0": "#FFFFFF", - "50": "#F6F8FC", - "100": "#EEF2FA", - "200": "#DCE4F2", - "300": "#BFCBDE", - "400": "#92A1BA", - "500": "#6C7C98", - "600": "#55637A", - "700": "#3B455A", - "800": "#1A2335", - "900": "#0E1320", - "950": "#06070A" + color: { + palette: { + neutral: { + '0': '#FFFFFF', + '50': '#F6F8FC', + '100': '#EEF2FA', + '200': '#DCE4F2', + '300': '#BFCBDE', + '400': '#92A1BA', + '500': '#6C7C98', + '600': '#55637A', + '700': '#3B455A', + '800': '#1A2335', + '900': '#0E1320', + '950': '#06070A', }, - "brand": { - "blue": "#5A8CFF", - "cyan": "#2EE6D6", - "coral": "#FF6E6E", - "gold": "#FFD166", - "mint": "#34D399", - "warning": "#F59E0B" - } - }, - "semantic": { - "dark": { - "bgCanvas": "#06070A", - "bgElevated": "#0E1118", - "surfaceCard": "#121725", - "surfaceMuted": "#1A2335", - "borderDefault": "rgba(255,255,255,0.12)", - "borderStrong": "rgba(255,255,255,0.22)", - "textPrimary": "#EFF4FF", - "textSecondary": "#A5B1C7", - "textTertiary": "#6C7C98", - "accentPrimary": "#5A8CFF", - "accentSecondary": "#2EE6D6", - "success": "#34D399", - "warning": "#F59E0B", - "danger": "#FF6E6E", - "focusRing": "rgba(90,140,255,0.45)", - "overlayScrim": "rgba(5,8,18,0.72)" + brand: { + blue: '#5A8CFF', + cyan: '#2EE6D6', + coral: '#FF6E6E', + gold: '#FFD166', + mint: '#34D399', + warning: '#F59E0B', }, - "light": { - "bgCanvas": "#F6F8FC", - "bgElevated": "#EEF2FA", - "surfaceCard": "#FFFFFF", - "surfaceMuted": "#F3F5FA", - "borderDefault": "rgba(14,19,32,0.12)", - "borderStrong": "rgba(14,19,32,0.24)", - "textPrimary": "#0E1320", - "textSecondary": "#55637A", - "textTertiary": "#6C7C98", - "accentPrimary": "#5A8CFF", - "accentSecondary": "#2EE6D6", - "success": "#13956A", - "warning": "#B87504", - "danger": "#D24242", - "focusRing": "rgba(90,140,255,0.35)", - "overlayScrim": "rgba(10,13,23,0.5)" - } }, - "brain": { - "work": { - "from": "#5A8CFF", - "to": "#2EE6D6" + semantic: { + dark: { + bgCanvas: '#06070A', + bgElevated: '#0E1118', + surfaceCard: '#121725', + surfaceMuted: '#1A2335', + borderDefault: 'rgba(255,255,255,0.12)', + borderStrong: 'rgba(255,255,255,0.22)', + textPrimary: '#EFF4FF', + textSecondary: '#A5B1C7', + textTertiary: '#6C7C98', + accentPrimary: '#5A8CFF', + accentSecondary: '#2EE6D6', + success: '#34D399', + warning: '#F59E0B', + danger: '#FF6E6E', + focusRing: 'rgba(90,140,255,0.45)', + overlayScrim: 'rgba(5,8,18,0.72)', }, - "home": { - "from": "#FF6E6E", - "to": "#FFD166" + light: { + bgCanvas: '#F6F8FC', + bgElevated: '#EEF2FA', + surfaceCard: '#FFFFFF', + surfaceMuted: '#F3F5FA', + borderDefault: 'rgba(14,19,32,0.12)', + borderStrong: 'rgba(14,19,32,0.24)', + textPrimary: '#0E1320', + textSecondary: '#55637A', + textTertiary: '#6C7C98', + accentPrimary: '#5A8CFF', + accentSecondary: '#2EE6D6', + success: '#13956A', + warning: '#B87504', + danger: '#D24242', + focusRing: 'rgba(90,140,255,0.35)', + overlayScrim: 'rgba(10,13,23,0.5)', }, - "money": { - "from": "#34D399", - "to": "#2EE6D6" + }, + brain: { + work: { + from: '#5A8CFF', + to: '#2EE6D6', }, - "health": { - "from": "#2EE6D6", - "to": "#9FE870" + home: { + from: '#FF6E6E', + to: '#FFD166', + }, + money: { + from: '#34D399', + to: '#2EE6D6', + }, + health: { + from: '#2EE6D6', + to: '#9FE870', + }, + global: { + from: '#7D8FB4', + to: '#A5B1C7', }, - "global": { - "from": "#7D8FB4", - "to": "#A5B1C7" - } }, - "jarvisjr": { - "accentPrimary": "#7C6BFF", - "accentSecondary": "#5AE6C8", - "accentVoice": "#FF6B8A", - "agentCoach": "#5A8CFF", - "agentLingua": "#FFB74D", - "agentSpark": "#E040FB", - "agentMentor": "#34D399", - "agentMirror": "#2EE6D6", - "agentOrator": "#FF9F43" - } - }, - "typography": { - "fontFamily": { - "display": "'Space Grotesk', 'SF Pro Display', sans-serif", - "body": "'DM Sans', 'SF Pro Text', sans-serif", - "mono": "'IBM Plex Mono', 'SF Mono', monospace" + jarvisjr: { + accentPrimary: '#7C6BFF', + accentSecondary: '#5AE6C8', + accentVoice: '#FF6B8A', + agentCoach: '#5A8CFF', + agentLingua: '#FFB74D', + agentSpark: '#E040FB', + agentMentor: '#34D399', + agentMirror: '#2EE6D6', + agentOrator: '#FF9F43', }, - "fontWeight": { - "regular": 400, - "medium": 500, - "semibold": 600, - "bold": 700 + peakpulse: { + activityHike: '#34D399', + activitySki: '#5A8CFF', + speedZoneSlow: '#34D399', + speedZoneFast: '#FFD166', + speedZoneDanger: '#FF6E6E', + elevationGain: '#2EE6D6', + elevationLoss: '#FF9F43', + personalBest: '#FFD700', + streakActive: '#34D399', + streakBroken: '#FF6E6E', }, - "fontSize": { - "xs": 12, - "sm": 14, - "md": 16, - "lg": 18, - "xl": 22, - "2xl": 28, - "3xl": 36 + chronomind: { + urgencyCritical: '#FF6E6E', + urgencyImportant: '#FFD166', + urgencyStandard: '#5A8CFF', + urgencyGentle: '#34D399', + urgencyPassive: '#A5B1C7', + focusMode: '#7C6BFF', + pomodoroWork: '#34D399', + pomodoroBreak: '#5A8CFF', + cascadeWarning: '#FF9F43', + timerComplete: '#34D399', }, - "lineHeight": { - "tight": 1.2, - "normal": 1.45, - "relaxed": 1.65 + nomgap: { + stageFed: '#FF9F43', + stageEarlyFast: '#FECA57', + stageFasted: '#48DBFB', + stageKetosis: '#5A8CFF', + stageDeepAutophagy: '#A66BFF', + stageExtended: '#FFD700', + autophagyMeter: '#5AE68C', + hydrationReminder: '#48DBFB', + electrolyteAlert: '#FF9F43', + safetyWarning: '#FF6E6E', }, - "letterSpacing": { - "tight": -0.02, - "normal": 0, - "wide": 0.02 - } - }, - "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 - }, - "radius": { - "xs": 8, - "sm": 12, - "md": 16, - "lg": 20, - "xl": 24, - "pill": 999 - }, - "elevation": { - "none": "0 0 0 rgba(0,0,0,0)", - "sm": "0 4px 12px rgba(0,0,0,0.12)", - "md": "0 12px 28px rgba(0,0,0,0.18)", - "lg": "0 20px 48px rgba(0,0,0,0.24)" - }, - "motion": { - "duration": { - "instant": 70, - "fast": 140, - "base": 220, - "slow": 320 + lysnrai: { + recordingActive: '#FF6E6E', + recordingPaused: '#FFD166', + processing: '#5A8CFF', + transcribed: '#34D399', + dictationMode: '#7C6BFF', + commandMode: '#2EE6D6', + hotkeyActive: '#FF6B8A', }, - "easing": { - "standard": "cubic-bezier(0.2, 0.0, 0.2, 1)", - "decelerate": "cubic-bezier(0.0, 0.0, 0.2, 1)", - "accelerate": "cubic-bezier(0.4, 0.0, 1, 1)" - } }, - "breakpoints": { - "mobile": 0, - "tablet": 768, - "desktop": 1200, - "wide": 1440 + typography: { + fontFamily: { + display: "'Space Grotesk', 'SF Pro Display', sans-serif", + body: "'DM Sans', 'SF Pro Text', sans-serif", + mono: "'IBM Plex Mono', 'SF Mono', monospace", + }, + fontWeight: { + regular: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 22, + '2xl': 28, + '3xl': 36, + }, + lineHeight: { + tight: 1.2, + normal: 1.45, + relaxed: 1.65, + }, + letterSpacing: { + tight: -0.02, + normal: 0, + wide: 0.02, + }, + }, + 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, + }, + radius: { + xs: 8, + sm: 12, + md: 16, + lg: 20, + xl: 24, + pill: 999, + }, + elevation: { + none: '0 0 0 rgba(0,0,0,0)', + sm: '0 4px 12px rgba(0,0,0,0.12)', + md: '0 12px 28px rgba(0,0,0,0.18)', + lg: '0 20px 48px rgba(0,0,0,0.24)', + }, + motion: { + duration: { + instant: 70, + fast: 140, + base: 220, + slow: 320, + }, + easing: { + standard: 'cubic-bezier(0.2, 0.0, 0.2, 1)', + decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)', + accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)', + }, + }, + breakpoints: { + mobile: 0, + tablet: 768, + desktop: 1200, + wide: 1440, + }, + layout: { + maxContentWidth: 1280, + mobileGutter: 16, + tabletGutter: 24, + desktopGutter: 32, + touchTargetMin: 44, + }, + zIndex: { + hidden: -1, + base: 0, + dropdown: 100, + sticky: 200, + fixed: 300, + overlay: 400, + modal: 500, + popover: 600, + toast: 700, + tooltip: 800, + }, + icon: { + xs: 12, + sm: 16, + md: 20, + lg: 24, + xl: 32, + '2xl': 48, + }, + grid: { + columns: 12, + gutter: 24, + maxWidth: 1200, + breakpoints: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, + }, + 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, }, - "layout": { - "maxContentWidth": 1280, - "mobileGutter": 16, - "tabletGutter": 24, - "desktopGutter": 32, - "touchTargetMin": 44 - } } as const; export type Tokens = typeof tokens; diff --git a/packages/design-tokens/tokens/bytelyst.tokens.json b/packages/design-tokens/tokens/bytelyst.tokens.json index f62305ec..da9c470a 100644 --- a/packages/design-tokens/tokens/bytelyst.tokens.json +++ b/packages/design-tokens/tokens/bytelyst.tokens.json @@ -1,8 +1,8 @@ { "meta": { "name": "ByteLyst Design Tokens", - "version": "1.0.0", - "updatedAt": "2026-02-12", + "version": "1.1.0", + "updatedAt": "2026-03-03", "scale": "8pt" }, "color": { @@ -85,6 +85,51 @@ "agentMentor": "#34D399", "agentMirror": "#2EE6D6", "agentOrator": "#FF9F43" + }, + "peakpulse": { + "activityHike": "#34D399", + "activitySki": "#5A8CFF", + "speedZoneSlow": "#34D399", + "speedZoneFast": "#FFD166", + "speedZoneDanger": "#FF6E6E", + "elevationGain": "#2EE6D6", + "elevationLoss": "#FF9F43", + "personalBest": "#FFD700", + "streakActive": "#34D399", + "streakBroken": "#FF6E6E" + }, + "chronomind": { + "urgencyCritical": "#FF6E6E", + "urgencyImportant": "#FFD166", + "urgencyStandard": "#5A8CFF", + "urgencyGentle": "#34D399", + "urgencyPassive": "#A5B1C7", + "focusMode": "#7C6BFF", + "pomodoroWork": "#34D399", + "pomodoroBreak": "#5A8CFF", + "cascadeWarning": "#FF9F43", + "timerComplete": "#34D399" + }, + "nomgap": { + "stageFed": "#FF9F43", + "stageEarlyFast": "#FECA57", + "stageFasted": "#48DBFB", + "stageKetosis": "#5A8CFF", + "stageDeepAutophagy": "#A66BFF", + "stageExtended": "#FFD700", + "autophagyMeter": "#5AE68C", + "hydrationReminder": "#48DBFB", + "electrolyteAlert": "#FF9F43", + "safetyWarning": "#FF6E6E" + }, + "lysnrai": { + "recordingActive": "#FF6E6E", + "recordingPaused": "#FFD166", + "processing": "#5A8CFF", + "transcribed": "#34D399", + "dictationMode": "#7C6BFF", + "commandMode": "#2EE6D6", + "hotkeyActive": "#FF6B8A" } }, "typography": { @@ -172,5 +217,51 @@ "tabletGutter": 24, "desktopGutter": 32, "touchTargetMin": 44 + }, + "zIndex": { + "hidden": -1, + "base": 0, + "dropdown": 100, + "sticky": 200, + "fixed": 300, + "overlay": 400, + "modal": 500, + "popover": 600, + "toast": 700, + "tooltip": 800 + }, + "icon": { + "xs": 12, + "sm": 16, + "md": 20, + "lg": 24, + "xl": 32, + "2xl": 48 + }, + "grid": { + "columns": 12, + "gutter": 24, + "maxWidth": 1200, + "breakpoints": { + "xs": 0, + "sm": 576, + "md": 768, + "lg": 992, + "xl": 1200, + "xxl": 1400 + } + }, + "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 } }