MrPiglr
651cba733d
- Update design tokens with dark gaming theme (OLED-friendly) - Pure black backgrounds (#000000) - Cyan primary (#00d9ff) and neon green accent (#00ff88) - Glassmorphism effects and mobile-specific tokens - Build complete React Native mobile app screens - HomeScreen: Chat list with dark cards and status indicators - MessagesScreen: Chat view with gradient bubbles and typing indicators - FriendsScreen: Friend list with online/offline sections and game presence - GamesScreen: GameForge projects with team channels - ProfileScreen: User profile with .aethex domain display - AppNavigator: Bottom tab navigation with glow effects - Create Astro marketing landing site - Hero section with animated gradients and phone mockup - Features showcase (6 cards) - Pricing tiers (Free/Premium/Enterprise) - Download section for all platforms - Fully responsive dark theme Design inspiration: BitChat, Root, Discord Dark, Telegram Mobile-first approach with 48px touch targets and safe areas
273 lines
6.9 KiB
TypeScript
273 lines
6.9 KiB
TypeScript
/**
|
|
* Design System Tokens
|
|
* Shared design tokens across all platforms
|
|
*
|
|
* SLEEK DARK GAMING THEME
|
|
* Inspired by: BitChat, Root, Discord Dark, Telegram
|
|
*/
|
|
|
|
export const colors = {
|
|
// Brand colors (Cyan primary - modern gaming)
|
|
primary: {
|
|
50: '#ecfeff',
|
|
100: '#cffafe',
|
|
200: '#a5f3fc',
|
|
300: '#67e8f9',
|
|
400: '#22d3ee',
|
|
500: '#00d9ff', // Primary cyan
|
|
600: '#00b8d9',
|
|
700: '#0097b3',
|
|
800: '#007a8f',
|
|
900: '#006073',
|
|
},
|
|
|
|
// Accent colors (Neon green gaming)
|
|
accent: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#00ff88', // Neon green
|
|
600: '#00e070',
|
|
700: '#00c05d',
|
|
800: '#009f4a',
|
|
900: '#00803b',
|
|
},
|
|
|
|
// Secondary accent (Purple for premium)
|
|
secondary: {
|
|
50: '#faf5ff',
|
|
100: '#f3e8ff',
|
|
200: '#e9d5ff',
|
|
300: '#d8b4fe',
|
|
400: '#c084fc',
|
|
500: '#a855f7', // Premium purple
|
|
600: '#9333ea',
|
|
700: '#7e22ce',
|
|
800: '#6b21a8',
|
|
900: '#581c87',
|
|
},
|
|
|
|
// Neutral colors (OLED-friendly blacks)
|
|
gray: {
|
|
50: '#fafafa',
|
|
100: '#f5f5f5',
|
|
200: '#e5e5e5',
|
|
300: '#d4d4d4',
|
|
400: '#a3a3a3',
|
|
500: '#737373',
|
|
600: '#525252',
|
|
700: '#404040',
|
|
800: '#262626',
|
|
900: '#171717',
|
|
950: '#0a0a0a', // Pure black for OLED
|
|
},
|
|
|
|
// Semantic colors
|
|
success: '#10b981', // Green
|
|
warning: '#f59e0b', // Orange
|
|
error: '#ef4444', // Red
|
|
info: '#00d9ff', // Cyan (matches primary)
|
|
|
|
// Background (OLED-optimized)
|
|
background: {
|
|
primary: '#000000', // Pure black for OLED battery saving
|
|
secondary: '#0f0f0f', // Slightly elevated
|
|
tertiary: '#1a1a1a', // Cards
|
|
elevated: '#262626', // Modals/overlays
|
|
},
|
|
|
|
// Text (High contrast for readability)
|
|
text: {
|
|
primary: '#ffffff', // White
|
|
secondary: '#b0b0b0', // Light gray
|
|
tertiary: '#707070', // Medium gray
|
|
muted: '#505050', // Dark gray
|
|
disabled: '#3a3a3a', // Very dark gray
|
|
},
|
|
|
|
// Special effects
|
|
effects: {
|
|
glass: 'rgba(20, 20, 20, 0.7)', // Glassmorphism background
|
|
glassBorder: 'rgba(255, 255, 255, 0.1)', // Glass border
|
|
glow: 'rgba(0, 217, 255, 0.3)', // Cyan glow
|
|
glowGreen: 'rgba(0, 255, 136, 0.3)', // Green glow
|
|
glowPurple: 'rgba(168, 85, 247, 0.3)', // Purple glow
|
|
overlay: 'rgba(0, 0, 0, 0.8)', // Dark overlay
|
|
overlayLight: 'rgba(0, 0, 0, 0.5)', // Lighter overlay
|
|
},
|
|
|
|
// Status indicators
|
|
status: {
|
|
online: '#3ba55c', // Discord green
|
|
idle: '#faa61a', // Yellow
|
|
dnd: '#ed4245', // Red
|
|
offline: '#747f8d', // Gray
|
|
},
|
|
};
|
|
|
|
export const spacing = {
|
|
0: '0',
|
|
1: '0.25rem', // 4px
|
|
2: '0.5rem', // 8px
|
|
3: '0.75rem', // 12px
|
|
4: '1rem', // 16px
|
|
5: '1.25rem', // 20px
|
|
6: '1.5rem', // 24px
|
|
8: '2rem', // 32px
|
|
10: '2.5rem', // 40px
|
|
12: '3rem', // 48px - Touch target minimum
|
|
14: '3.5rem', // 56px - Bottom nav height
|
|
16: '4rem', // 64px
|
|
20: '5rem', // 80px
|
|
24: '6rem', // 96px
|
|
};
|
|
|
|
export const typography = {
|
|
fontFamily: {
|
|
// Use native system fonts for best mobile performance
|
|
sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
mono: 'ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace',
|
|
},
|
|
|
|
fontSize: {
|
|
xs: '0.75rem', // 12px - Captions, timestamps
|
|
sm: '0.875rem', // 14px - Labels, secondary text
|
|
base: '1rem', // 16px - Body text (mobile readable)
|
|
lg: '1.125rem', // 18px - Emphasized text
|
|
xl: '1.25rem', // 20px - Subheadings
|
|
'2xl': '1.5rem', // 24px - Section headers
|
|
'3xl': '1.75rem', // 28px - Screen titles
|
|
'4xl': '2rem', // 32px - Hero text
|
|
'5xl': '2.5rem', // 40px - Large hero
|
|
},
|
|
|
|
fontWeight: {
|
|
light: 300,
|
|
normal: 400,
|
|
medium: 500,
|
|
semibold: 600,
|
|
bold: 700,
|
|
},
|
|
|
|
lineHeight: {
|
|
none: 1,
|
|
tight: 1.25,
|
|
snug: 1.375,
|
|
normal: 1.5, // Default for readability
|
|
relaxed: 1.625,
|
|
loose: 2,
|
|
},
|
|
};
|
|
|
|
export const borderRadius = {
|
|
none: '0',
|
|
sm: '0.375rem', // 6px
|
|
base: '0.5rem', // 8px
|
|
md: '0.75rem', // 12px
|
|
lg: '1rem', // 16px - Message bubbles
|
|
xl: '1.125rem', // 18px - Message bubbles rounded
|
|
'2xl': '1.5rem', // 24px - Cards
|
|
full: '9999px', // Pills
|
|
};
|
|
|
|
export const shadows = {
|
|
// Subtle shadows for dark theme
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.3)',
|
|
base: '0 2px 4px 0 rgba(0, 0, 0, 0.4)',
|
|
md: '0 4px 8px -2px rgba(0, 0, 0, 0.5)',
|
|
lg: '0 8px 16px -4px rgba(0, 0, 0, 0.6)',
|
|
xl: '0 16px 32px -8px rgba(0, 0, 0, 0.7)',
|
|
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.8)',
|
|
|
|
// Glow effects for gaming aesthetic
|
|
glowCyan: '0 0 20px rgba(0, 217, 255, 0.4)',
|
|
glowCyanStrong: '0 0 30px rgba(0, 217, 255, 0.6)',
|
|
glowGreen: '0 0 20px rgba(0, 255, 136, 0.4)',
|
|
glowPurple: '0 0 20px rgba(168, 85, 247, 0.4)',
|
|
glowSubtle: '0 0 10px rgba(255, 255, 255, 0.1)',
|
|
};
|
|
|
|
export const breakpoints = {
|
|
// Mobile-first breakpoints
|
|
xs: '375px', // Small phones
|
|
sm: '640px', // Large phones
|
|
md: '768px', // Tablets
|
|
lg: '1024px', // Small laptops
|
|
xl: '1280px', // Desktop
|
|
'2xl': '1536px', // Large desktop
|
|
};
|
|
|
|
export const zIndex = {
|
|
base: 0,
|
|
dropdown: 1000,
|
|
sticky: 1100,
|
|
fixed: 1200,
|
|
modalBackdrop: 1300,
|
|
modal: 1400,
|
|
popover: 1500,
|
|
tooltip: 1600,
|
|
toast: 1700,
|
|
};
|
|
|
|
export const transitions = {
|
|
fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
slower: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
|
// Easing functions
|
|
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
spring: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
|
};
|
|
|
|
// Mobile-specific tokens
|
|
export const mobile = {
|
|
touchTarget: {
|
|
minimum: '44px', // iOS HIG minimum
|
|
comfortable: '48px', // Material Design
|
|
large: '56px', // Bottom nav, FABs
|
|
},
|
|
|
|
safeArea: {
|
|
top: 'env(safe-area-inset-top)',
|
|
bottom: 'env(safe-area-inset-bottom)',
|
|
left: 'env(safe-area-inset-left)',
|
|
right: 'env(safe-area-inset-right)',
|
|
},
|
|
|
|
statusBar: {
|
|
height: '44px', // iOS status bar
|
|
heightAndroid: '24px',
|
|
},
|
|
|
|
navbar: {
|
|
height: '56px', // Standard mobile nav
|
|
heightLarge: '64px', // Large title nav
|
|
},
|
|
|
|
tabBar: {
|
|
height: '56px', // Bottom tab bar
|
|
heightSafe: 'calc(56px + env(safe-area-inset-bottom))',
|
|
},
|
|
};
|
|
|
|
// Glassmorphism effect tokens
|
|
export const glass = {
|
|
blur: '20px',
|
|
blurStrong: '30px',
|
|
blurSubtle: '10px',
|
|
|
|
background: {
|
|
light: 'rgba(255, 255, 255, 0.05)',
|
|
medium: 'rgba(255, 255, 255, 0.1)',
|
|
dark: 'rgba(0, 0, 0, 0.3)',
|
|
darker: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
|
|
border: 'rgba(255, 255, 255, 0.1)',
|
|
borderBright: 'rgba(255, 255, 255, 0.2)',
|
|
};
|