mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-18 07:12:18 +00:00
61 lines
No EOL
2.6 KiB
TypeScript
61 lines
No EOL
2.6 KiB
TypeScript
// Color palette for the app following Material Design 3
|
|
export const colors = {
|
|
// Primary colors
|
|
primary: '#2d9cdb', // Brighter, more vibrant teal
|
|
secondary: '#FF6B6B', // Coral color that complements teal
|
|
|
|
// Background colors - Deep dark theme
|
|
darkBackground: '#020404', // Even deeper dark with subtle teal undertone
|
|
lightBackground: '#FFFFFF', // Light theme background
|
|
|
|
// Text colors - Following Material Design contrast ratios
|
|
text: '#FFFFFF', // Primary text on dark
|
|
textLight: '#FFFFFF', // Primary text on dark surfaces
|
|
textDark: '#1F1F1F', // Primary text on light surfaces
|
|
textMuted: 'rgba(255, 255, 255, 0.7)', // Secondary text on dark
|
|
textMutedLight: 'rgba(255, 255, 255, 0.7)', // Secondary text on dark surfaces
|
|
textMutedDark: 'rgba(0, 0, 0, 0.6)', // Secondary text on light surfaces
|
|
|
|
// Basic colors with teal undertones
|
|
white: '#FFFFFF',
|
|
black: '#020404',
|
|
darkGray: '#0A0C0C', // Darker gray with teal undertone
|
|
mediumGray: 'rgba(255, 255, 255, 0.6)', // Medium emphasis text
|
|
lightGray: 'rgba(255, 255, 255, 0.38)', // Disabled text
|
|
|
|
// Status colors - Material Design states
|
|
error: '#CF6679', // Material dark theme error
|
|
success: '#03DAC6', // Material dark theme success
|
|
warning: '#FFB74D', // Material dark theme warning
|
|
info: '#64B5F6', // Material dark theme info
|
|
|
|
// Transparent colors
|
|
transparent: 'transparent',
|
|
transparentLight: 'rgba(255, 255, 255, 0.08)', // Material dark surface overlay
|
|
transparentDark: 'rgba(2, 4, 4, 0.7)', // Darker overlay with subtle teal tint
|
|
|
|
// Additional properties
|
|
background: '#020404', // Very deep dark
|
|
|
|
// UI elements
|
|
border: 'rgba(255, 255, 255, 0.12)', // Material dark theme divider
|
|
card: 'rgba(255, 255, 255, 0.05)', // Material dark theme surface 1
|
|
cardHighlight: 'rgba(255, 255, 255, 0.08)', // Material dark theme surface 2
|
|
shadow: 'rgba(0, 0, 0, 0.2)', // Material elevation shadow
|
|
|
|
// Additional accent colors
|
|
accentLight: '#00BFBF', // Lighter teal for highlights
|
|
accentDark: '#008080', // Darker teal for depth
|
|
surfaceVariant: 'rgba(255, 255, 255, 0.03)', // Material dark theme surface variant
|
|
|
|
// Material Design elevation overlays
|
|
elevation1: 'rgba(255, 255, 255, 0.05)',
|
|
elevation2: 'rgba(255, 255, 255, 0.08)',
|
|
elevation3: 'rgba(255, 255, 255, 0.11)',
|
|
elevation4: 'rgba(255, 255, 255, 0.12)',
|
|
|
|
// Material Design text emphasis levels
|
|
highEmphasis: 'rgba(255, 255, 255, 1)', // Primary text
|
|
mediumEmphasis: 'rgba(255, 255, 255, 0.7)', // Secondary text
|
|
disabled: 'rgba(255, 255, 255, 0.38)', // Disabled text
|
|
};
|