@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
156 lines • 4.88 kB
JavaScript
// Mobile-specific color variables for React Native
// Extracted from Maya CSS variables for mobile usage
export const mayaColors = {
day: {
primary: '#7408c2',
primaryLight: '#9b4dd9',
primaryDark: '#5a0a9a',
primarySubtle: '#f0e6ff',
background: '#ffffff',
surface: '#f9fafb',
surfaceSecondary: '#f3f4f6',
surfaceElevated: '#ffffff',
text: '#111827',
textSecondary: '#6b7280',
textTertiary: '#9ca3af',
textInverse: '#ffffff',
textDisabled: '#d1d5db',
border: '#e5e7eb',
borderSecondary: '#f3f4f6',
borderFocus: '#7408c2',
interactiveHover: '#f0e6ff',
interactiveActive: '#e6d6ff',
interactiveFocus: '#f8f0ff',
interactiveDisabled: '#f9fafb',
danger: '#ef4444',
dangerDark: '#dc2626',
},
evening: {
primary: '#dc2626',
primaryLight: '#ef4444',
primaryDark: '#b91c1c',
primarySubtle: '#fecaca',
background: '#fef2f2',
surface: '#fee2e2',
surfaceSecondary: '#fecaca',
surfaceElevated: '#fca5a5',
text: '#450a0a',
textSecondary: '#991b1b',
textTertiary: '#dc2626',
textInverse: '#ffffff',
textDisabled: '#f87171',
border: '#fca5a5',
borderSecondary: '#fecaca',
borderFocus: '#dc2626',
interactiveHover: '#fee2e2',
interactiveActive: '#fecaca',
interactiveFocus: '#fca5a5',
interactiveDisabled: '#fecaca',
danger: '#dc2626',
dangerDark: '#b91c1c',
},
night: {
primary: '#7408c2',
primaryLight: '#9b4dd9',
primaryDark: '#5a0a9a',
primarySubtle: '#f0e6ff',
background: '#1f2937',
surface: '#374151',
surfaceSecondary: '#4b5563',
surfaceElevated: '#374151',
text: '#f9fafb',
textSecondary: '#d1d5db',
textTertiary: '#9ca3af',
textInverse: '#ffffff',
textDisabled: '#6b7280',
border: '#4b5563',
borderSecondary: '#374151',
borderFocus: '#7408c2',
interactiveHover: '#2d1b69',
interactiveActive: '#1f0f4d',
interactiveFocus: '#3d2b79',
interactiveDisabled: '#374151',
danger: '#ef4444',
dangerDark: '#dc2626',
},
genz: {
primary: '#a855f7',
primaryLight: '#c084fc',
primaryDark: '#9333ea',
primarySubtle: '#f3e8ff',
// Using solid color instead of gradient for React Native
background: '#2d1b69',
surface: '#3d2b79',
surfaceSecondary: '#4a3b8a',
surfaceElevated: '#5b4b9a',
text: '#ffffff',
textSecondary: '#e9d5ff',
textTertiary: '#c4b5fd',
textInverse: '#ffffff',
textDisabled: '#a78bfa',
border: '#5b4b9a',
borderSecondary: '#4a3b8a',
borderFocus: '#7408c2',
interactiveHover: '#2d1b69',
interactiveActive: '#1f0f4d',
interactiveFocus: '#3d2b79',
interactiveDisabled: '#4a3b8a',
danger: '#ef4444',
dangerDark: '#dc2626',
// GenZ specific vibrant accents
accent1: '#f59e0b',
accent2: '#10b981',
accent3: '#3b82f6',
accent4: '#f97316',
accent5: '#8b5cf6',
},
cyberpunk: {
primary: '#00ff88',
primaryLight: '#33ffaa',
primaryDark: '#00cc6a',
primarySubtle: '#e6fff0',
background: '#0a0a0a',
surface: '#1a1a1a',
surfaceSecondary: '#2a2a2a',
surfaceElevated: '#3a3a3a',
text: '#ffffff',
textSecondary: '#cccccc',
textTertiary: '#999999',
textInverse: '#000000',
textDisabled: '#666666',
border: '#00ff88',
borderSecondary: '#333333',
borderFocus: '#00ff88',
interactiveHover: '#1a1a1a',
interactiveActive: '#0a0a0a',
interactiveFocus: '#2a2a2a',
interactiveDisabled: '#333333',
danger: '#ff0044',
dangerDark: '#cc0033',
},
retro: {
primary: '#8b4513',
primaryLight: '#a0522d',
primaryDark: '#654321',
primarySubtle: '#f5f5dc',
background: '#f5f5dc',
surface: '#f0e68c',
surfaceSecondary: '#daa520',
surfaceElevated: '#cd853f',
text: '#2f2f2f',
textSecondary: '#696969',
textTertiary: '#a9a9a9',
textInverse: '#ffffff',
textDisabled: '#c0c0c0',
border: '#daa520',
borderSecondary: '#f0e68c',
borderFocus: '#8b4513',
interactiveHover: '#f0e68c',
interactiveActive: '#daa520',
interactiveFocus: '#cd853f',
interactiveDisabled: '#f0e68c',
danger: '#8b0000',
dangerDark: '#660000',
},
};
//# sourceMappingURL=variables.mobile.js.map