Refactor UI components and styles for improved consistency and aesthetics
This commit is contained in:
@@ -11,38 +11,50 @@ export default {
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: { DEFAULT: '#8B4FB9', foreground: '#FFFFFF' },
|
||||
secondary: { DEFAULT: '#00D9FF', foreground: '#2B1B38' },
|
||||
accent: { DEFAULT: '#FF6EC7', foreground: '#FFFFFF' },
|
||||
muted: { DEFAULT: '#F5F0FF', foreground: '#4A3B5C' },
|
||||
primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
|
||||
secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' },
|
||||
accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))' },
|
||||
muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
|
||||
surface: {
|
||||
DEFAULT: 'hsl(var(--surface))',
|
||||
muted: 'hsl(var(--surface-muted))',
|
||||
},
|
||||
brand: {
|
||||
DEFAULT: 'hsl(var(--brand))',
|
||||
dark: 'hsl(var(--brand-dark))',
|
||||
teal: 'hsl(var(--brand-teal))',
|
||||
tealDark: 'hsl(var(--brand-teal-dark))',
|
||||
},
|
||||
text: {
|
||||
primary: 'hsl(var(--text-primary))',
|
||||
secondary: 'hsl(var(--text-secondary))',
|
||||
muted: 'hsl(var(--text-muted))',
|
||||
},
|
||||
|
||||
// Custom pixel palette
|
||||
// Legacy pixel palette aliases (mapped to modern tokens)
|
||||
pixel: {
|
||||
purple: { deep: '#4A1B6F', bright: '#8B4FB9' },
|
||||
cyan: { bright: '#00D9FF' },
|
||||
pink: { vibrant: '#FF6EC7' },
|
||||
orange: { warm: '#FF8E3C' },
|
||||
yellow: { gold: '#FFD23F' },
|
||||
green: { lime: '#8EF048', forest: '#3FA54D' },
|
||||
bg: { dark: '#2B1B38', medium: '#4A3B5C', light: '#E8D9F3' },
|
||||
panel: '#F5F0FF',
|
||||
purple: { deep: '#1E40AF', bright: '#2563EB' },
|
||||
cyan: { bright: '#14B8A6' },
|
||||
pink: { vibrant: '#38BDF8' },
|
||||
orange: { warm: '#F59E0B' },
|
||||
yellow: { gold: '#FBBF24' },
|
||||
green: { lime: '#22C55E', forest: '#16A34A' },
|
||||
bg: { dark: '#0F172A', medium: '#1E293B', light: '#F5F7FB' },
|
||||
panel: '#FFFFFF',
|
||||
white: '#FFFFFF',
|
||||
shadow: { dark: '#1A0E28' },
|
||||
outline: '#2B1B38',
|
||||
text: { primary: '#2B1B38', secondary: '#4A3B5C', muted: '#8B7B9C' },
|
||||
shadow: { dark: 'rgba(15, 23, 42, 0.2)' },
|
||||
outline: '#E2E8F0',
|
||||
text: { primary: '#0F172A', secondary: '#334155', muted: '#64748B' },
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
pixel: ['"Press Start 2P"', 'cursive'],
|
||||
sans: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'sans-serif'],
|
||||
display: ['"Manrope"', 'Inter', 'sans-serif'],
|
||||
sans: ['"Inter"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'sans-serif'],
|
||||
},
|
||||
boxShadow: {
|
||||
'pixel-sm': '3px 3px 0 #1A0E28',
|
||||
'pixel': '4px 4px 0 #1A0E28, 4px 4px 0 3px #2B1B38',
|
||||
'pixel-md': '6px 6px 0 #1A0E28, 6px 6px 0 3px #2B1B38',
|
||||
'pixel-lg': '8px 8px 0 #1A0E28, 8px 8px 0 3px #2B1B38',
|
||||
'pixel-hover': '5px 5px 0 #1A0E28',
|
||||
'pixel-active': '2px 2px 0 #1A0E28',
|
||||
'soft': 'var(--shadow-sm)',
|
||||
'card': 'var(--shadow-md)',
|
||||
'float': 'var(--shadow-lg)',
|
||||
},
|
||||
keyframes: {
|
||||
'pixel-float': {
|
||||
@@ -61,10 +73,10 @@ export default {
|
||||
'pixel-bounce': 'pixel-bounce 1s ease-in-out infinite',
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: '0',
|
||||
lg: '0',
|
||||
md: '0',
|
||||
sm: '0',
|
||||
DEFAULT: 'var(--radius-md)',
|
||||
lg: 'var(--radius-lg)',
|
||||
md: 'var(--radius-md)',
|
||||
sm: 'var(--radius-sm)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user