Add light variants for red, blue, yellow, pink, orange colour schemes
Extends ticket 048's light_green pattern (light-inverted surface/border/text scale + light's neutral danger colours, same base and accent hues as the dark-surfaced counterpart) to the remaining five colour schemes across all six files that must stay in sync: index.css, themes.ts, api.ts, settings.rs, useSettingsPanel.ts, and NavMenu.tsx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
d17cfe9b83
commit
d59b3aec38
@@ -252,6 +252,126 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
|
||||
'--c-accent-2': 'hsl(230 70% 45%)',
|
||||
'--c-accent-3': 'hsl(50 70% 38%)',
|
||||
},
|
||||
light_red: {
|
||||
'--c-surface-0': 'hsl(0 40% 96%)',
|
||||
'--c-surface-1': 'hsl(0 35% 92%)',
|
||||
'--c-surface-2': 'hsl(0 30% 85%)',
|
||||
'--c-border': 'hsl(0 25% 80%)',
|
||||
'--c-border-soft': 'hsl(0 22% 70%)',
|
||||
'--c-border-faint': 'hsl(0 35% 92%)',
|
||||
'--c-border-strong': 'hsl(0 20% 40%)',
|
||||
'--c-text': 'hsl(0 30% 12%)',
|
||||
'--c-text-secondary': 'hsl(0 20% 25%)',
|
||||
'--c-text-muted': 'hsl(0 15% 40%)',
|
||||
'--c-text-subtle': 'hsl(0 10% 50%)',
|
||||
'--c-text-faint': 'hsl(0 10% 65%)',
|
||||
'--c-text-faintest': 'hsl(0 12% 80%)',
|
||||
'--c-danger-bg': '#fee2e2',
|
||||
'--c-danger-border': '#fca5a5',
|
||||
'--c-danger-text': '#b91c1c',
|
||||
'--c-danger-text-strong': '#991b1b',
|
||||
'--c-accent': 'hsl(180 70% 40%)',
|
||||
'--c-accent-soft': 'hsl(150 60% 85%)',
|
||||
'--c-accent-text': 'hsl(180 75% 28%)',
|
||||
'--c-accent-2': 'hsl(90 70% 45%)',
|
||||
'--c-accent-3': 'hsl(270 70% 38%)',
|
||||
},
|
||||
light_blue: {
|
||||
'--c-surface-0': 'hsl(210 40% 96%)',
|
||||
'--c-surface-1': 'hsl(210 35% 92%)',
|
||||
'--c-surface-2': 'hsl(210 30% 85%)',
|
||||
'--c-border': 'hsl(210 25% 80%)',
|
||||
'--c-border-soft': 'hsl(210 22% 70%)',
|
||||
'--c-border-faint': 'hsl(210 35% 92%)',
|
||||
'--c-border-strong': 'hsl(210 20% 40%)',
|
||||
'--c-text': 'hsl(210 30% 12%)',
|
||||
'--c-text-secondary': 'hsl(210 20% 25%)',
|
||||
'--c-text-muted': 'hsl(210 15% 40%)',
|
||||
'--c-text-subtle': 'hsl(210 10% 50%)',
|
||||
'--c-text-faint': 'hsl(210 10% 65%)',
|
||||
'--c-text-faintest': 'hsl(210 12% 80%)',
|
||||
'--c-danger-bg': '#fee2e2',
|
||||
'--c-danger-border': '#fca5a5',
|
||||
'--c-danger-text': '#b91c1c',
|
||||
'--c-danger-text-strong': '#991b1b',
|
||||
'--c-accent': 'hsl(30 70% 40%)',
|
||||
'--c-accent-soft': 'hsl(0 60% 85%)',
|
||||
'--c-accent-text': 'hsl(30 75% 28%)',
|
||||
'--c-accent-2': 'hsl(300 70% 45%)',
|
||||
'--c-accent-3': 'hsl(120 70% 38%)',
|
||||
},
|
||||
light_yellow: {
|
||||
'--c-surface-0': 'hsl(50 40% 96%)',
|
||||
'--c-surface-1': 'hsl(50 35% 92%)',
|
||||
'--c-surface-2': 'hsl(50 30% 85%)',
|
||||
'--c-border': 'hsl(50 25% 80%)',
|
||||
'--c-border-soft': 'hsl(50 22% 70%)',
|
||||
'--c-border-faint': 'hsl(50 35% 92%)',
|
||||
'--c-border-strong': 'hsl(50 20% 40%)',
|
||||
'--c-text': 'hsl(50 30% 12%)',
|
||||
'--c-text-secondary': 'hsl(50 20% 25%)',
|
||||
'--c-text-muted': 'hsl(50 15% 40%)',
|
||||
'--c-text-subtle': 'hsl(50 10% 50%)',
|
||||
'--c-text-faint': 'hsl(50 10% 65%)',
|
||||
'--c-text-faintest': 'hsl(50 12% 80%)',
|
||||
'--c-danger-bg': '#fee2e2',
|
||||
'--c-danger-border': '#fca5a5',
|
||||
'--c-danger-text': '#b91c1c',
|
||||
'--c-danger-text-strong': '#991b1b',
|
||||
'--c-accent': 'hsl(230 70% 40%)',
|
||||
'--c-accent-soft': 'hsl(200 60% 85%)',
|
||||
'--c-accent-text': 'hsl(230 75% 28%)',
|
||||
'--c-accent-2': 'hsl(140 70% 45%)',
|
||||
'--c-accent-3': 'hsl(320 70% 38%)',
|
||||
},
|
||||
light_pink: {
|
||||
'--c-surface-0': 'hsl(330 40% 96%)',
|
||||
'--c-surface-1': 'hsl(330 35% 92%)',
|
||||
'--c-surface-2': 'hsl(330 30% 85%)',
|
||||
'--c-border': 'hsl(330 25% 80%)',
|
||||
'--c-border-soft': 'hsl(330 22% 70%)',
|
||||
'--c-border-faint': 'hsl(330 35% 92%)',
|
||||
'--c-border-strong': 'hsl(330 20% 40%)',
|
||||
'--c-text': 'hsl(330 30% 12%)',
|
||||
'--c-text-secondary': 'hsl(330 20% 25%)',
|
||||
'--c-text-muted': 'hsl(330 15% 40%)',
|
||||
'--c-text-subtle': 'hsl(330 10% 50%)',
|
||||
'--c-text-faint': 'hsl(330 10% 65%)',
|
||||
'--c-text-faintest': 'hsl(330 12% 80%)',
|
||||
'--c-danger-bg': '#fee2e2',
|
||||
'--c-danger-border': '#fca5a5',
|
||||
'--c-danger-text': '#b91c1c',
|
||||
'--c-danger-text-strong': '#991b1b',
|
||||
'--c-accent': 'hsl(150 70% 40%)',
|
||||
'--c-accent-soft': 'hsl(120 60% 85%)',
|
||||
'--c-accent-text': 'hsl(150 75% 28%)',
|
||||
'--c-accent-2': 'hsl(60 70% 45%)',
|
||||
'--c-accent-3': 'hsl(240 70% 38%)',
|
||||
},
|
||||
light_orange: {
|
||||
'--c-surface-0': 'hsl(30 40% 96%)',
|
||||
'--c-surface-1': 'hsl(30 35% 92%)',
|
||||
'--c-surface-2': 'hsl(30 30% 85%)',
|
||||
'--c-border': 'hsl(30 25% 80%)',
|
||||
'--c-border-soft': 'hsl(30 22% 70%)',
|
||||
'--c-border-faint': 'hsl(30 35% 92%)',
|
||||
'--c-border-strong': 'hsl(30 20% 40%)',
|
||||
'--c-text': 'hsl(30 30% 12%)',
|
||||
'--c-text-secondary': 'hsl(30 20% 25%)',
|
||||
'--c-text-muted': 'hsl(30 15% 40%)',
|
||||
'--c-text-subtle': 'hsl(30 10% 50%)',
|
||||
'--c-text-faint': 'hsl(30 10% 65%)',
|
||||
'--c-text-faintest': 'hsl(30 12% 80%)',
|
||||
'--c-danger-bg': '#fee2e2',
|
||||
'--c-danger-border': '#fca5a5',
|
||||
'--c-danger-text': '#b91c1c',
|
||||
'--c-danger-text-strong': '#991b1b',
|
||||
'--c-accent': 'hsl(210 70% 40%)',
|
||||
'--c-accent-soft': 'hsl(180 60% 85%)',
|
||||
'--c-accent-text': 'hsl(210 75% 28%)',
|
||||
'--c-accent-2': 'hsl(120 70% 45%)',
|
||||
'--c-accent-3': 'hsl(300 70% 38%)',
|
||||
},
|
||||
}
|
||||
|
||||
export function generateThemeCss(vars: ThemeVars): string {
|
||||
|
||||
Reference in New Issue
Block a user