UNPKG

@syncognito/maya

Version:

Maya Design System - Shared tokens and platform-specific components

156 lines 4.88 kB
// 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