3dc24ae22c
All checks were successful
Beta Release / beta (push) Successful in 33s
- Replace all TUI artifacts: [OK], [FAIL], >>, [■], [$] with proper web components (badges, cards, chips, avatars) - Rename CSS variables from TUI names (cyberRed, dimRed, bgVoid) to semantic names (accent, accent-dim, bg) - Add proper interactive elements: hover states, cursor pointer, click feedback (scale), focus rings, spinner animation - Fix user-select: was none globally, now allows text selection - Redesign navigation: proper tabs with role="tab" and aria attributes - Add keyboard shortcuts only when not in input/textarea (1-4 for tabs) - Replace footer TUI shortcuts with clean statusbar - Dashboard: card-based layout, badge status, progress bar, activity log - Studio: message bubbles (aligned left/right), agent cards with avatars - Shell: command history (ArrowUp/Down), toggleable AI panel button, panel header with current directory - Config: provider cards, color swatches for theme picker, clean field rows with empty states - CSS imported via main.jsx (not HTML link) for proper Vite hashing - Remove glitch/scanline/typewriter TUI animations - Add favicon 💘 Generated with Crush Assisted-by: GLM-5.1 via Crush <crush@charm.land>
130 lines
3.2 KiB
JavaScript
130 lines
3.2 KiB
JavaScript
const defaultTheme = {
|
|
name: 'Cyberpunk Red',
|
|
colors: {
|
|
bg: '#0A0A0C',
|
|
bgBase: '#0F0D10',
|
|
bgSurface: '#161218',
|
|
bgElevated: '#1C1719',
|
|
bgCard: '#221B1E',
|
|
bgInput: '#2A2225',
|
|
bgHover: '#332528',
|
|
accent: '#FF0033',
|
|
accentDark: '#8B0020',
|
|
accentDeep: '#5C0015',
|
|
accentLight: '#FF1A5E',
|
|
accentMuted: '#FF4D6D',
|
|
accentBright: '#FF1744',
|
|
accentSoft: '#FF5252',
|
|
accentDim: '#6B2033',
|
|
accentBg: '#4A1525',
|
|
textPrimary: '#EAE0E2',
|
|
textSecondary: '#D4C4C8',
|
|
textTertiary: '#8A7A7E',
|
|
textDisabled: '#5A4F52',
|
|
success: '#00E676',
|
|
warning: '#FFD740',
|
|
error: '#FF1744',
|
|
info: '#448AFF',
|
|
border: '#2A1F22',
|
|
borderAccent: '#FF003344',
|
|
borderAccentFull: '#FF0033',
|
|
},
|
|
}
|
|
|
|
const themes = {
|
|
'cyberpunk-red': defaultTheme,
|
|
'cyberpunk-pink': {
|
|
...defaultTheme,
|
|
name: 'Cyberpunk Pink',
|
|
colors: {
|
|
...defaultTheme.colors,
|
|
accent: '#FF1A8C',
|
|
accentDark: '#8B1050',
|
|
accentDeep: '#5C0A35',
|
|
accentLight: '#FF4DAE',
|
|
accentMuted: '#FF6DC2',
|
|
accentBright: '#FF1A8C',
|
|
accentSoft: '#FF6DC2',
|
|
accentDim: '#6B2050',
|
|
accentBg: '#4A1535',
|
|
},
|
|
},
|
|
'midnight-blue': {
|
|
...defaultTheme,
|
|
name: 'Midnight Blue',
|
|
colors: {
|
|
...defaultTheme.colors,
|
|
accent: '#0088FF',
|
|
accentDark: '#004488',
|
|
accentDeep: '#002255',
|
|
accentLight: '#00AAFF',
|
|
accentMuted: '#44CCFF',
|
|
accentBright: '#0088FF',
|
|
accentSoft: '#44CCFF',
|
|
accentDim: '#203366',
|
|
accentBg: '#152244',
|
|
},
|
|
},
|
|
'matrix-green': {
|
|
...defaultTheme,
|
|
name: 'Matrix Green',
|
|
colors: {
|
|
...defaultTheme.colors,
|
|
accent: '#00FF41',
|
|
accentDark: '#008822',
|
|
accentDeep: '#005515',
|
|
accentLight: '#33FF66',
|
|
accentMuted: '#66FF99',
|
|
accentBright: '#00FF41',
|
|
accentSoft: '#66FF99',
|
|
accentDim: '#206630',
|
|
accentBg: '#154420',
|
|
},
|
|
},
|
|
}
|
|
|
|
export function getTheme(name) {
|
|
return themes[name] || defaultTheme
|
|
}
|
|
|
|
export function getThemeNames() {
|
|
return Object.keys(themes).map(k => ({ id: k, name: themes[k].name }))
|
|
}
|
|
|
|
export function applyTheme(theme) {
|
|
const root = document.documentElement
|
|
const c = theme.colors
|
|
const map = {
|
|
'--bg': c.bg,
|
|
'--bg-base': c.bgBase,
|
|
'--bg-surface': c.bgSurface,
|
|
'--bg-elevated': c.bgElevated,
|
|
'--bg-card': c.bgCard,
|
|
'--bg-input': c.bgInput,
|
|
'--bg-hover': c.bgHover,
|
|
'--accent': c.accent,
|
|
'--accent-dark': c.accentDark,
|
|
'--accent-deep': c.accentDeep,
|
|
'--accent-light': c.accentLight,
|
|
'--accent-muted': c.accentMuted,
|
|
'--accent-bright': c.accentBright,
|
|
'--accent-soft': c.accentSoft,
|
|
'--accent-dim': c.accentDim,
|
|
'--accent-bg': c.accentBg,
|
|
'--text-primary': c.textPrimary,
|
|
'--text-secondary': c.textSecondary,
|
|
'--text-tertiary': c.textTertiary,
|
|
'--text-disabled': c.textDisabled,
|
|
'--success': c.success,
|
|
'--warning': c.warning,
|
|
'--error': c.error,
|
|
'--info': c.info,
|
|
'--border': c.border,
|
|
'--border-accent': c.borderAccent,
|
|
'--border-accent-full': c.borderAccentFull,
|
|
}
|
|
Object.entries(map).forEach(([k, v]) => root.style.setProperty(k, v))
|
|
}
|
|
|
|
export default defaultTheme
|