feat(design-tokens): add flowmonk product-specific token namespace (--fm-*)

This commit is contained in:
saravanakumardb1 2026-03-10 19:35:19 -07:00
parent ac525563dc
commit a45aa8c3fe
2 changed files with 306 additions and 262 deletions

View File

@ -1,294 +1,316 @@
// Auto-generated from bytelyst.tokens.json — do not edit manually // Auto-generated from bytelyst.tokens.json — do not edit manually
export const tokens = { export const tokens = {
meta: { "meta": {
name: 'ByteLyst Design Tokens', "name": "ByteLyst Design Tokens",
version: '1.1.0', "version": "1.1.0",
updatedAt: '2026-03-03', "updatedAt": "2026-03-03",
scale: '8pt', "scale": "8pt"
}, },
color: { "color": {
palette: { "palette": {
neutral: { "neutral": {
'0': '#FFFFFF', "0": "#FFFFFF",
'50': '#F6F8FC', "50": "#F6F8FC",
'100': '#EEF2FA', "100": "#EEF2FA",
'200': '#DCE4F2', "200": "#DCE4F2",
'300': '#BFCBDE', "300": "#BFCBDE",
'400': '#92A1BA', "400": "#92A1BA",
'500': '#6C7C98', "500": "#6C7C98",
'600': '#55637A', "600": "#55637A",
'700': '#3B455A', "700": "#3B455A",
'800': '#1A2335', "800": "#1A2335",
'900': '#0E1320', "900": "#0E1320",
'950': '#06070A', "950": "#06070A"
}, },
brand: { "brand": {
blue: '#5A8CFF', "blue": "#5A8CFF",
cyan: '#2EE6D6', "cyan": "#2EE6D6",
coral: '#FF6E6E', "coral": "#FF6E6E",
gold: '#FFD166', "gold": "#FFD166",
mint: '#34D399', "mint": "#34D399",
warning: '#F59E0B', "warning": "#F59E0B",
microsoftRed: '#F25022', "microsoftRed": "#F25022",
microsoftGreen: '#7FBA00', "microsoftGreen": "#7FBA00",
microsoftBlue: '#00A4EF', "microsoftBlue": "#00A4EF",
microsoftYellow: '#FFB900', "microsoftYellow": "#FFB900",
googleBlue: '#4285F4', "googleBlue": "#4285F4",
googleGreen: '#34A853', "googleGreen": "#34A853",
googleYellow: '#FBBC05', "googleYellow": "#FBBC05",
googleRed: '#EA4335', "googleRed": "#EA4335"
}
},
"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)"
}, },
"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)"
}
}, },
semantic: { "brain": {
dark: { "work": {
bgCanvas: '#06070A', "from": "#5A8CFF",
bgElevated: '#0E1118', "to": "#2EE6D6"
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)',
}, },
light: { "home": {
bgCanvas: '#F6F8FC', "from": "#FF6E6E",
bgElevated: '#EEF2FA', "to": "#FFD166"
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": {
brain: { "from": "#34D399",
work: { "to": "#2EE6D6"
from: '#5A8CFF',
to: '#2EE6D6',
}, },
home: { "health": {
from: '#FF6E6E', "from": "#2EE6D6",
to: '#FFD166', "to": "#9FE870"
},
money: {
from: '#34D399',
to: '#2EE6D6',
},
health: {
from: '#2EE6D6',
to: '#9FE870',
},
global: {
from: '#7D8FB4',
to: '#A5B1C7',
}, },
"global": {
"from": "#7D8FB4",
"to": "#A5B1C7"
}
}, },
jarvisjr: { "jarvisjr": {
accentPrimary: '#7C6BFF', "accentPrimary": "#7C6BFF",
accentSecondary: '#5AE6C8', "accentSecondary": "#5AE6C8",
accentVoice: '#FF6B8A', "accentVoice": "#FF6B8A",
agentCoach: '#5A8CFF', "agentCoach": "#5A8CFF",
agentLingua: '#FFB74D', "agentLingua": "#FFB74D",
agentSpark: '#E040FB', "agentSpark": "#E040FB",
agentMentor: '#34D399', "agentMentor": "#34D399",
agentMirror: '#2EE6D6', "agentMirror": "#2EE6D6",
agentOrator: '#FF9F43', "agentOrator": "#FF9F43"
}, },
peakpulse: { "peakpulse": {
activityHike: '#34D399', "activityHike": "#34D399",
activitySki: '#5A8CFF', "activitySki": "#5A8CFF",
speedZoneSlow: '#34D399', "speedZoneSlow": "#34D399",
speedZoneFast: '#FFD166', "speedZoneFast": "#FFD166",
speedZoneDanger: '#FF6E6E', "speedZoneDanger": "#FF6E6E",
elevationGain: '#2EE6D6', "elevationGain": "#2EE6D6",
elevationLoss: '#FF9F43', "elevationLoss": "#FF9F43",
personalBest: '#FFD700', "personalBest": "#FFD700",
streakActive: '#34D399', "streakActive": "#34D399",
streakBroken: '#FF6E6E', "streakBroken": "#FF6E6E"
}, },
chronomind: { "chronomind": {
urgencyCritical: '#FF6E6E', "urgencyCritical": "#FF6E6E",
urgencyImportant: '#FFD166', "urgencyImportant": "#FFD166",
urgencyStandard: '#5A8CFF', "urgencyStandard": "#5A8CFF",
urgencyGentle: '#34D399', "urgencyGentle": "#34D399",
urgencyPassive: '#A5B1C7', "urgencyPassive": "#A5B1C7",
focusMode: '#7C6BFF', "focusMode": "#7C6BFF",
pomodoroWork: '#34D399', "pomodoroWork": "#34D399",
pomodoroBreak: '#5A8CFF', "pomodoroBreak": "#5A8CFF",
cascadeWarning: '#FF9F43', "cascadeWarning": "#FF9F43",
timerComplete: '#34D399', "timerComplete": "#34D399"
}, },
nomgap: { "nomgap": {
stageFed: '#FF9F43', "stageFed": "#FF9F43",
stageEarlyFast: '#FECA57', "stageEarlyFast": "#FECA57",
stageFasted: '#48DBFB', "stageFasted": "#48DBFB",
stageKetosis: '#5A8CFF', "stageKetosis": "#5A8CFF",
stageDeepAutophagy: '#A66BFF', "stageDeepAutophagy": "#A66BFF",
stageExtended: '#FFD700', "stageExtended": "#FFD700",
autophagyMeter: '#5AE68C', "autophagyMeter": "#5AE68C",
hydrationReminder: '#48DBFB', "hydrationReminder": "#48DBFB",
electrolyteAlert: '#FF9F43', "electrolyteAlert": "#FF9F43",
safetyWarning: '#FF6E6E', "safetyWarning": "#FF6E6E"
}, },
lysnrai: { "lysnrai": {
recordingActive: '#FF6E6E', "recordingActive": "#FF6E6E",
recordingPaused: '#FFD166', "recordingPaused": "#FFD166",
processing: '#5A8CFF', "processing": "#5A8CFF",
transcribed: '#34D399', "transcribed": "#34D399",
dictationMode: '#7C6BFF', "dictationMode": "#7C6BFF",
commandMode: '#2EE6D6', "commandMode": "#2EE6D6",
hotkeyActive: '#FF6B8A', "hotkeyActive": "#FF6B8A"
}, },
"flowmonk": {
"bg": "#07111F",
"surface": "#0F1B2D",
"surfaceElevated": "#152338",
"border": "#24344D",
"text": "#EFF4FF",
"textMuted": "#A8B4C8",
"primary": "#5A8CFF",
"accent": "#5AE68C",
"warning": "#F59E0B",
"zonework": "#5A8CFF",
"zonePersonal": "#5AE68C",
"zoneHealth": "#FF6B6B",
"zoneAdmin": "#FECA57",
"zoneLearning": "#A66BFF",
"urgentBadge": "#FF6E6E",
"scheduleEntry": "#5A8CFF",
"overflowWarning": "#F59E0B",
"recommendationInfo": "#5A8CFF",
"recommendationWarning": "#F59E0B",
"recommendationCritical": "#FF6E6E"
}
}, },
typography: { "typography": {
fontFamily: { "fontFamily": {
display: "'Space Grotesk', 'SF Pro Display', sans-serif", "display": "'Space Grotesk', 'SF Pro Display', sans-serif",
body: "'DM Sans', 'SF Pro Text', sans-serif", "body": "'DM Sans', 'SF Pro Text', sans-serif",
mono: "'IBM Plex Mono', 'SF Mono', monospace", "mono": "'IBM Plex Mono', 'SF Mono', monospace"
}, },
fontWeight: { "fontWeight": {
regular: 400, "regular": 400,
medium: 500, "medium": 500,
semibold: 600, "semibold": 600,
bold: 700, "bold": 700
}, },
fontSize: { "fontSize": {
xs: 12, "xs": 12,
sm: 14, "sm": 14,
md: 16, "md": 16,
lg: 18, "lg": 18,
xl: 22, "xl": 22,
'2xl': 28, "2xl": 28,
'3xl': 36, "3xl": 36
}, },
lineHeight: { "lineHeight": {
tight: 1.2, "tight": 1.2,
normal: 1.45, "normal": 1.45,
relaxed: 1.65, "relaxed": 1.65
}, },
letterSpacing: { "letterSpacing": {
tight: -0.02, "tight": -0.02,
normal: 0, "normal": 0,
wide: 0.02, "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)"
}
}, },
spacing: { "breakpoints": {
'0': 0, "mobile": 0,
'1': 4, "tablet": 768,
'2': 8, "desktop": 1200,
'3': 12, "wide": 1440
'4': 16,
'5': 20,
'6': 24,
'7': 28,
'8': 32,
'10': 40,
'12': 48,
'16': 64,
}, },
radius: { "layout": {
xs: 8, "maxContentWidth": 1280,
sm: 12, "mobileGutter": 16,
md: 16, "tabletGutter": 24,
lg: 20, "desktopGutter": 32,
xl: 24, "touchTargetMin": 44
pill: 999,
}, },
elevation: { "zIndex": {
none: '0 0 0 rgba(0,0,0,0)', "hidden": -1,
sm: '0 4px 12px rgba(0,0,0,0.12)', "base": 0,
md: '0 12px 28px rgba(0,0,0,0.18)', "dropdown": 100,
lg: '0 20px 48px rgba(0,0,0,0.24)', "sticky": 200,
"fixed": 300,
"overlay": 400,
"modal": 500,
"popover": 600,
"toast": 700,
"tooltip": 800
}, },
motion: { "icon": {
duration: { "xs": 12,
instant: 70, "sm": 16,
fast: 140, "md": 20,
base: 220, "lg": 24,
slow: 320, "xl": 32,
}, "2xl": 48
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: { "grid": {
mobile: 0, "columns": 12,
tablet: 768, "gutter": 24,
desktop: 1200, "maxWidth": 1200,
wide: 1440, "breakpoints": {
}, "xs": 0,
layout: { "sm": 576,
maxContentWidth: 1280, "md": 768,
mobileGutter: 16, "lg": 992,
tabletGutter: 24, "xl": 1200,
desktopGutter: 32, "xxl": 1400
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,
}, },
"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
}
} as const; } as const;
export type Tokens = typeof tokens; export type Tokens = typeof tokens;

View File

@ -140,6 +140,28 @@
"dictationMode": "#7C6BFF", "dictationMode": "#7C6BFF",
"commandMode": "#2EE6D6", "commandMode": "#2EE6D6",
"hotkeyActive": "#FF6B8A" "hotkeyActive": "#FF6B8A"
},
"flowmonk": {
"bg": "#07111F",
"surface": "#0F1B2D",
"surfaceElevated": "#152338",
"border": "#24344D",
"text": "#EFF4FF",
"textMuted": "#A8B4C8",
"primary": "#5A8CFF",
"accent": "#5AE68C",
"warning": "#F59E0B",
"zonework": "#5A8CFF",
"zonePersonal": "#5AE68C",
"zoneHealth": "#FF6B6B",
"zoneAdmin": "#FECA57",
"zoneLearning": "#A66BFF",
"urgentBadge": "#FF6E6E",
"scheduleEntry": "#5A8CFF",
"overflowWarning": "#F59E0B",
"recommendationInfo": "#5A8CFF",
"recommendationWarning": "#F59E0B",
"recommendationCritical": "#FF6E6E"
} }
}, },
"typography": { "typography": {