Refactor UI components and styles for improved consistency and aesthetics

This commit is contained in:
M1ngdaXie
2026-02-08 12:32:02 -08:00
parent 81855a144e
commit 02908171be
17 changed files with 1024 additions and 832 deletions

View File

@@ -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)',
},
},
},