/* TwelveTone theme tokens. * * Six palettes drawn from the Canva style systems in THEME_UPDATE_PROMPT.md. * Apply by setting data-theme on ; ThemeMiddleware does that server-side * so the first paint already carries the right palette. * * TWO LAYERS, deliberately: * * 1. Each theme block declares the --color-* tokens exactly as the spec * defines them. Those values are copied verbatim and are diffable against * the document, so nobody has to guess whether a hex drifted. * * 2. A single mapping block below translates those into the --bg / --fg / * --accent names the components already use. Adding a theme therefore * means adding one block of eight values, not touching app.css at all. * * Two tokens are derived rather than given, because the spec defines brand * colours and the browser cannot compute contrast: * * --accent-text the primary at a value that clears WCAG AA (4.5:1) as text * on that theme's background. Identical to --color-primary in * five themes; purple-pink's #8A4FFF only reaches 4.26:1, so * that one uses a marginally deeper violet of the same hue. * --secondary-fg black or white, whichever is readable on --color-secondary. * * tests/test_themes.py recomputes both with the colour engine in * apps/palettes/color_space.py and fails if a value here stops being accessible. * * --color-secondary is a decorative highlight: gradients, swatches, chart * segments. It is not used for text or as a lone state indicator, because in * three of the six themes it sits below 3:1 against the page background. */ /* 1. Purple & Pink Simple - playful, chic, trendy fashion editorial. */ :root, [data-theme="purple-pink"] { --color-bg: #faf7fd; --color-surface: #ffffff; --color-border: #e8dcf5; --color-primary: #8a4fff; --color-secondary: #ff69b4; --color-muted: #f5e8ff; --color-text: #2a163b; --color-text-muted: #735e85; --accent-text: #8044f5; --secondary-fg: #000000; } /* 2. Red & White Simple - high-contrast, bold, minimalist street fashion. */ [data-theme="red-white"] { --color-bg: #fafafa; --color-surface: #ffffff; --color-border: #eeeeee; --color-primary: #d32f2f; --color-secondary: #b71c1c; --color-muted: #ffebee; --color-text: #1a1a1a; --color-text-muted: #666666; --accent-text: #d32f2f; --secondary-fg: #ffffff; } /* 3. Brown & Cream Modern Fashion - luxurious, warm, earthy atelier. */ [data-theme="brown-cream"] { --color-bg: #f9f6f0; --color-surface: #ffffff; --color-border: #e2d6c7; --color-primary: #4a3525; --color-secondary: #c29b7f; --color-muted: #efe6dd; --color-text: #2c1e14; --color-text-muted: #6d594c; --accent-text: #4a3525; --secondary-fg: #000000; } /* 4. Brown & Beige Minimalist - understated, calm, organic editorial. */ [data-theme="brown-beige-minimalist"] { --color-bg: #f5f2eb; --color-surface: #fcfaf7; --color-border: #e0d8ce; --color-primary: #5c4d43; --color-secondary: #a68a77; --color-muted: #eaddcf; --color-text: #2f2925; --color-text-muted: #786c64; --accent-text: #5c4d43; --secondary-fg: #000000; } /* 5. Brown & Beige Modern Portfolio - architectural, structured earth tones. */ [data-theme="brown-beige-portfolio"] { --color-bg: #ece7df; --color-surface: #f7f4ee; --color-border: #d3c9bc; --color-primary: #3d312a; --color-secondary: #8c7355; --color-muted: #dfd6c9; --color-text: #241c17; --color-text-muted: #5e534a; --accent-text: #3d312a; --secondary-fg: #000000; } /* 6. Grey Blue Grayscale Portfolio - sleek, cool Scandinavian tech-minimalist. */ [data-theme="grey-blue-grayscale"] { --color-bg: #f2f4f7; --color-surface: #ffffff; --color-border: #d5dbe1; --color-primary: #3a506b; --color-secondary: #5b7b9a; --color-muted: #dce3ea; --color-text: #1c2530; --color-text-muted: #5b6876; --accent-text: #3a506b; --secondary-fg: #000000; } /* --------------------------------------------------------------------------- Mapping layer: the names components actually reference. Custom properties resolve at computed-value time, so this block reads whichever --color-* won the cascade on regardless of source order. --------------------------------------------------------------------------- */ :root, [data-theme] { --bg: var(--color-bg); --bg-elevated: var(--color-surface); --fg: var(--color-text); --fg-muted: var(--color-text-muted); --accent: var(--color-primary); --accent-fg: #ffffff; --secondary: var(--color-secondary); --muted-surface: var(--color-muted); --border: var(--color-border); /* Status colours are deliberately constant across themes. A green that turns brown on the earth-tone palettes stops reading as "success". They are used as alert and notice borders rather than as text, so the bar is the 3:1 non-text threshold against --color-surface; these clear 4.5:1 on all six. */ --success: #16803c; --warning: #b45309; --danger: #c02626; /* All six themes are light, so the navy AMS wordmark is legible on every one and the white-on-dark variant stays hidden. Driven by a token rather than a list of theme names, so a dark theme added later only has to flip these two rather than remember to edit app.css. */ --ams-logo-light-display: inline; --ams-logo-dark-display: none; }