/* Learning Curve — themes.css: the two café palettes, "Tea house" and "Matcha latte", and the Settings picker that chooses between them and Chunky Play. Loaded right AFTER ui.css. ==== HOW A PALETTE WORKS ================================================================== Chunky Play is the default and lives in ui.css. A palette is a second full set of the same --c-* tokens, switched on by . No attribute = Chunky Play. theme.js stamps the attribute before any stylesheet loads (so the first paint is already right), and app.js applyTheme() mirrors it (paletteAttr). The saved choice is state.prefs.palette ('chunky' | 'teahouse' | 'latte'). The app is light only: an old saved state.prefs.theme ('dark' or 'system', from when there was a dark mode) is ignored. Each palette has exactly one token block, mirroring ui.css: :root[data-palette="X"] its values The block (0,2,0) beats ui.css's :root. It redefines EVERY --c-* token ui.css defines (and the palette's own motif tokens), so nothing from another palette can leak through. Chart series, series text and chart surface/grid/axis are HEX ONLY: widgets parse them. tools/verify_themes.js enforces all of this and measures AA in all three palettes. Colour logic per palette (one main action, a distinct done colour, red = wrong): Chunky Play go blue done mint (ui.css) Tea house go noren indigo done matcha pale matcha-foam pages, oak counter Matcha latte go matcha done honey oat-milk pages, espresso ink, café pastels Motif CSS (cups, the oak counter, the steaming-cup streak) is scoped under [data-palette="X"] and reads tokens only. Art director's technical fixes applied here (the owner's chosen look is otherwise as picked): both the Learn play key's outline and shadow come from --c-go-ring / --c-go-ring-sh (ui-learn.css .lrn-cont .playkey). Chunky Play keeps its own values, unchanged. tea the oak grain sits on the daily-goal strip and the match tray only; the tab bar keeps its raised colour (no .tab-item override). latte kinako (the Security phase) is greyer and deeper than honey, so the honey "done" colour never shares a phase's lightness: honey vs kinako was 1.14:1 at the same hue; now 1.32:1 with half the chroma. It is a mid-tone (#B5A489), not a pale beige: a lighter kinako sat within 1.04:1 of the recess and 1.18:1 of the page and read as a disabled panel. Now 2.05:1 against the page, 1.81:1 against the recess, 1.32:1 against earl grey (p7), with espresso ink on it at 6.78:1. ========================================================================================== */ /* ============================================================ Tea house (v2): pale matcha-foam pages, rice-paper cards, a noren-indigo main action, matcha for everything done, an oak counter under the daily-goal cups. ============================================================ */ :root[data-palette="teahouse"] { color-scheme: light; --c-ground: #E8EDD6; /* matcha foam (ink 13.86:1) */ --c-card: #FBF8EC; /* rice paper */ --c-raised: #FFFDF6; /* washi white: keys, chips, inputs, the tab bar */ --c-key: #F4F0E0; --c-panel: #FFFDF6; --c-recess: #EBDDBF; /* light oak: trays, tracks, holes */ --c-ink: #1B2015; /* sumi with a drop of koicha */ --c-ink-2: #30362A; --c-muted: #505742; --c-line: #1B2015; --c-line-soft: #DDD8C2; --c-slab: #1B2015; --c-inset: rgba(60, 40, 15, .18); --c-fill: #24361F; /* koicha: the solid "ink" pill */ --c-on-fill: #F6F2E2; --c-on-color: #1B2015; --c-on-color-bg: rgba(255, 255, 255, .8); --c-go: #2B4799; /* noren indigo: the ONE main action */ --c-on-go: #FFFFFF; --c-go-ink: #2B4799; --c-go-wash: #E1E6F5; --c-go-ring: #1B2015; /* the Learn play key's outline (on the raised Continue card) */ --c-go-ring-sh: #1B2015; /* ...and its key shadow */ --c-ok: #7AB239; /* whisked matcha: done / correct, nothing else */ --c-ok-ink: #3B681C; --c-ok-wash: #E2EECB; --c-bad: #B7302A; --c-bad-wash: #FBE0D8; --c-dis-bg: #E7E3D0; --c-dis-ink: #62644F; --c-dis-line: #A3A38C; --c-focus: #2B4799; --c-scrim: rgba(27, 32, 21, .5); --c-p1: #BCA6EE; --c-p2: #F6A7C1; --c-p3: #F7CD3F; --c-p4: #F2905E; --c-p5: #8FCBEF; --c-p6: #B8C1CA; --c-p7: #DEBB8B; --c-p8: #5DD3B6; --c-p9: #E2C4FC; /* p8 Quantum (jade), p9 the Cert Exams tab (wisteria) */ --c-p10: #B4E05C; /* p10 Cloud & AI on AWS (key lime, A1.09) */ --c-p11: #5AB0FD; /* p11 DevSecOps (azure, D1.09) */ --c-p12: #A8E6C4; /* p12 Robotics (mint, RB1.09) */ --c-code-bg: #1E261B; --c-code-ink: #F1EEDC; --c-code-kw: #B3C2FF; --c-code-cm: #A6A991; --c-code-st: #B9DC8C; --c-heat-1: #DCEAC3; --c-heat-2: #B5D38B; --c-heat-3: #7AB239; --c-heat-4: #4F8526; --c-series-1: #2B4799; --c-series-2: #D5602C; --c-series-3: #5B962C; --c-series-1-text: #2B4799; --c-series-2-text: #B24716; --c-series-3-text: #3B681C; --c-chart-surface: #FBF8EC; --c-chart-grid: #E6E1CC; --c-chart-axis: #8A8770; /* lesson diagrams (variants a / b / c): purple, orange and a cool third hue, chosen so none is the main action (go) or done (ok) colour. -text is the solid fill and text shade: >= 4.5:1 on the card, and under --c-on-fill. */ --c-dg-1: #8E4C8A; --c-dg-2: #D5602C; --c-dg-3: #1F8A86; --c-dg-1-text: #7A3B77; --c-dg-2-text: #B24716; --c-dg-3-text: #176B68; /* motif tokens (Tea house only) */ --c-wood: #EEDDBB; /* the oak counter: daily-goal strip and match tray only */ --c-wood-grain: repeating-linear-gradient(176deg, rgba(120, 76, 32, .09) 0 1.5px, transparent 1.5px 7px, rgba(120, 76, 32, .05) 7px 8px, transparent 8px 15px); --c-wood-sheen: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(120, 76, 32, .05) 35%, rgba(255, 255, 255, .12) 62%, rgba(120, 76, 32, .06)); --c-cup-foam: rgba(255, 255, 255, .55); /* the foam line on a full cup */ } /* ---- Tea house motif 1: the oak counter. The daily-goal strip (where the cups stand) and the match tray get an oak grain drawn in gradients (no images). Text on the wood keeps the ink tokens; the darkest grain line still clears AA. The tab bar keeps its raised colour. ---- */ [data-palette="teahouse"] .goal-row, [data-palette="teahouse"] .match-tray:not(.empty) { background-color: var(--c-wood); background-image: var(--c-wood-grain), var(--c-wood-sheen); } /* ---- Tea house motif 2: the daily goal is six little matcha cups. Each fills from the bottom with matcha (done) and wears a foam line; an empty cup is washi white. ---- */ [data-palette="teahouse"] .goal-blocks { gap: 9px; margin-right: 6px; } [data-palette="teahouse"] .goal-blocks i { position: relative; width: 20px; height: 19px; border-radius: 3px 3px 8px 8px; background: var(--c-raised); } [data-palette="teahouse"] .goal-blocks i::after { /* the handle */ content: ""; position: absolute; right: -7px; top: 3px; width: 5px; height: 8px; border: 2.2px solid var(--c-line); border-left: 0; border-radius: 0 6px 6px 0; } [data-palette="teahouse"] .goal-blocks i.full { background: var(--c-ok); box-shadow: inset 0 3px 0 var(--c-cup-foam); } [data-palette="teahouse"] .goal-blocks i.part { background: linear-gradient(0deg, var(--c-ok) 0 var(--p), var(--c-raised) var(--p)); } @media (max-width: 359px) { [data-palette="teahouse"] .goal-blocks { gap: 7px; } [data-palette="teahouse"] .goal-blocks i { width: 16px; } } /* ============================================================ Matcha latte (v1): the full café repaint. Oat-milk pages, espresso ink and outlines, matcha = the ONE main action (cream text on it), honey = done / correct (espresso text on it), café pastels for the seven phases, coffee cups. ============================================================ */ :root[data-palette="latte"] { color-scheme: light; --c-ground: #F4EBDA; /* oat milk */ --c-card: #FFFAF1; /* milk foam */ --c-raised: #FFFDF8; --c-key: #F4EBDA; --c-panel: #FFFDF8; --c-recess: #E9DDC5; /* toasted oat */ --c-ink: #2A1C13; /* espresso */ --c-ink-2: #45332A; --c-muted: #6A5446; /* hojicha tea */ --c-line: #2A1C13; --c-line-soft: #E3D5BD; --c-slab: #2A1C13; --c-inset: rgba(42, 28, 19, .2); --c-fill: #2A1C13; --c-on-fill: #FFF6E6; --c-on-color: #2A1C13; --c-on-color-bg: rgba(255, 253, 248, .8); --c-go: #487A1F; /* matcha: the ONE main action */ --c-on-go: #FFF8EA; --c-go-ink: #3D6619; --c-go-wash: #E4EDCF; --c-go-ring: #2A1C13; /* the Learn play key's outline (on the raised Continue card) */ --c-go-ring-sh: #2A1C13; /* ...and its key shadow */ --c-ok: #F2B43C; /* honey: done / correct, nothing else */ --c-ok-ink: #7F5200; --c-ok-wash: #FBE7BC; --c-bad: #B8322A; --c-bad-wash: #F9DCD3; --c-dis-bg: #ECE2D0; --c-dis-ink: #6B5E50; --c-dis-line: #A89A86; --c-focus: #3D6619; --c-scrim: rgba(42, 28, 19, .5); --c-p1: #D4B0F0; /* ube Maths */ --c-p2: #8AD6EC; /* ramune Code */ --c-p3: #F7AAC6; /* sakura Data */ --c-p4: #EE9D6C; /* hojicha Deep */ --c-p5: #9AB2F8; /* butterfly pea LLMs */ --c-p6: #B5A489; /* kinako Security (greyer and deeper: never honey's twin) */ --c-p7: #B7C0CC; /* earl grey Build */ --c-p8: #45C2A3; /* spearmint Quantum */ --c-p9: #D788C1; /* hibiscus Cert Exams (the tab, not a phase) */ --c-p10: #B4E05C; /* key lime Cloud & AI on AWS */ --c-p11: #4BA9FC; /* cornflower DevSecOps */ --c-p12: #AAB446; /* brass Robotics */ --c-code-bg: #2A1D15; --c-code-ink: #F6EBD6; --c-code-kw: #B4C3FF; --c-code-cm: #AC9A8A; --c-code-st: #F2C66A; --c-heat-1: #FBEBC6; --c-heat-2: #F6D27F; --c-heat-3: #F2B43C; --c-heat-4: #C98A12; --c-series-1: #487A1F; --c-series-2: #C8602E; --c-series-3: #4F68D6; --c-series-1-text: #3D6619; --c-series-2-text: #A94B1E; --c-series-3-text: #3F57C4; --c-chart-surface: #FFFAF1; --c-chart-grid: #EBDFCB; --c-chart-axis: #8C7866; /* lesson diagrams (variants a / b / c): purple, orange and a cool third hue, chosen so none is the main action (go) or done (ok) colour. -text is the solid fill and text shade: >= 4.5:1 on the card, and under --c-on-fill. */ --c-dg-1: #8A4FB5; --c-dg-2: #C8602E; --c-dg-3: #4F68D6; --c-dg-1-text: #6F3C99; --c-dg-2-text: #A94B1E; --c-dg-3-text: #3F57C4; /* motif token (Matcha latte only) */ --c-crema: #E7C99A; /* the crema line on a full goal cup */ } /* ---- Matcha latte motif 1: the streak sticker is a steaming cup. The flame icon is hidden and a cup is drawn as a CSS mask (a data: URI, allowed by img-src) filled with currentColor, so it takes the sticker's own on-fill colour. ---- */ [data-palette="latte"] .streak-stk svg { display: none; } [data-palette="latte"] .streak-stk::before { content: ""; width: 19px; height: 19px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5h12v3.5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z' fill='%23000'/%3E%3Cpath d='M16 11.5h1.3a2.6 2.6 0 0 1 0 5.2H15.6'/%3E%3Cpath d='M3 21.5h14'/%3E%3Cpath d='M8 2.8c-1.3 1.3 1.3 2.4 0 4.2M12.2 2.8c-1.3 1.3 1.3 2.4 0 4.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5h12v3.5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z' fill='%23000'/%3E%3Cpath d='M16 11.5h1.3a2.6 2.6 0 0 1 0 5.2H15.6'/%3E%3Cpath d='M3 21.5h14'/%3E%3Cpath d='M8 2.8c-1.3 1.3 1.3 2.4 0 4.2M12.2 2.8c-1.3 1.3 1.3 2.4 0 4.2'/%3E%3C/svg%3E") center / contain no-repeat; } /* forced colours (Windows High Contrast) force the cup's currentColor background to Canvas, the sticker's own colour, so the cup vanished: keep it, drawn in the forced text colour */ @media (forced-colors: active) { [data-palette="latte"] .streak-stk::before { forced-color-adjust: none; background: CanvasText; } } /* ---- Matcha latte motif 2: the six daily-goal boxes are little latte cups that fill from the bottom with espresso, with a crema line on a full cup. ---- */ [data-palette="latte"] .goal-blocks { gap: 8px; padding-right: 5px; } [data-palette="latte"] .goal-blocks i { position: relative; border-radius: 3px 3px 9px 9px; } [data-palette="latte"] .goal-blocks i::after { /* the handle */ content: ""; position: absolute; right: -7.5px; top: 2.5px; width: 4px; height: 7px; border: 2.2px solid var(--c-line); border-left: 0; border-radius: 0 6px 6px 0; } [data-palette="latte"] .goal-blocks i.full { background: linear-gradient(to bottom, var(--c-crema) 0 3.5px, var(--c-fill) 3.5px); } [data-palette="latte"] .goal-blocks i.part { background: linear-gradient(to top, var(--c-fill) 0 var(--p), var(--c-ground) var(--p)); } @media (max-width: 359px) { [data-palette="latte"] .goal-blocks { gap: 7px; } [data-palette="latte"] .goal-blocks i { width: 16px; } } /* ============================================================ Settings > Theme: the palette picker (app.js renderSettings). Three keys in the .seg track, each a tiny swatch (page, main action, done) above the palette's name. The swatch colours are the palettes' own values, so they are the one place colour literals live outside the token blocks above, and tools/verify_themes.js checks each one against its palette's real tokens. ============================================================ */ :root { --sw-chunky-1: #FFF5E1; --sw-chunky-2: #3A5BFF; --sw-chunky-3: #3BD497; --sw-teahouse-1: #E8EDD6; --sw-teahouse-2: #2B4799; --sw-teahouse-3: #7AB239; --sw-latte-1: #F4EBDA; --sw-latte-2: #487A1F; --sw-latte-3: #F2B43C; } .pal-sw.pal-chunky { --sw-1: var(--sw-chunky-1); --sw-2: var(--sw-chunky-2); --sw-3: var(--sw-chunky-3); } .pal-sw.pal-teahouse { --sw-1: var(--sw-teahouse-1); --sw-2: var(--sw-teahouse-2); --sw-3: var(--sw-teahouse-3); } .pal-sw.pal-latte { --sw-1: var(--sw-latte-1); --sw-2: var(--sw-latte-2); --sw-3: var(--sw-latte-3); } /* three equal keys; the name may wrap onto two lines on a very narrow phone */ .seg.pal-seg .ui-chip.pal-opt { flex: 1 1 0; flex-direction: column; gap: 7px; min-height: 66px; padding: 9px 4px 8px; white-space: normal; text-align: center; line-height: 1.15; } .pal-sw { display: flex; gap: 4px; } .pal-sw i { display: block; width: 16px; height: 16px; border-radius: 5px; border: var(--c-bw-sm) solid var(--c-line); background: var(--sw-1); } .pal-sw i:nth-child(2) { background: var(--sw-2); } .pal-sw i:nth-child(3) { background: var(--sw-3); } /* on the chosen (filled) key the squares take the fill's own contrast colour as their edge */ .pal-opt[aria-pressed="true"] .pal-sw i { border-color: var(--c-on-fill); }