/* ─────────────────────────────────────────────────────────────────── board-themes.css — shared board THEME PRESETS (Luke 2026-06-07). Loaded by BOTH the builder preview (builder.html, class on #builderTabletFrame) AND the deployed board (use.html, class on ). The builder preview and use.html render tiles with the SAME classes (.tile, .tile-verb … via FK[category].cls, .tile-label, .tile-emoji), so one stylesheet skins both — "what you preview is what deploys." Selectors are `.theme-X .tile…` (descendant of whatever carries the class), specificity 0,2,0 — beats the default `.tile-verb` (0,1,0) without !important, exactly like the existing inline themes in use.html. THREE presets (the three mockups): theme-playful — friendly, rounded, bright category colors, dark labels. theme-neon — dark surface, neon outline + glowing labels (high-energy). theme-pastel — soft pastel, gentle, dark labels (sensory-friendly+cute). ACCESSIBILITY CONTRACT (WCAG 2.1 AA, ≥4.5:1 label↔tile): every label colour below was chosen against its tile background to clear 4.5:1 — the ratios are asserted in board-themes-contrast.test.ts so a future palette tweak that breaks contrast fails CI. These ship to non-verbal users; an unreadable tile is a silenced word. ─────────────────────────────────────────────────────────────────── */ /* Shared tile shape tweaks per theme apply to the card + kill the default dark translucent label bar so themed (often dark-on-light) labels read. */ /* ── PLAYFUL ───────────────────────────────────────────────────────── */ .theme-playful .tile { border-radius: 20px; border: 3px solid rgba(255,255,255,0.65); box-shadow: 0 4px 10px rgba(60,30,110,0.18); } .theme-playful .tile-label-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-playful .tile-label { color: #1A1430; text-shadow: none; font-weight: 800; } .theme-playful .tile-verb { background: #FFC773; } .theme-playful .tile-noun { background: #FFE08A; } .theme-playful .tile-adj { background: #9FD8F0; } .theme-playful .tile-social { background: #F5A8C8; } .theme-playful .tile-question { background: #9FE0A8; } .theme-playful .tile-other { background: #D8D8E6; } .theme-playful .tile-neg { background: #F0A8A8; } .theme-playful .tile-misc { background: #CFE3F0; } /* ── NEON (dark) ───────────────────────────────────────────────────── */ .theme-neon .tile { background: #0C0C16; border-radius: 14px; border: 2px solid currentColor; box-shadow: 0 0 10px rgba(120,160,255,0.18); } .theme-neon .tile-label-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-neon .tile-label { text-shadow: 0 0 5px currentColor; font-weight: 800; } /* category colour drives BOTH the border (currentColor) and the label. */ .theme-neon .tile-verb { color: #FFB02E; } .theme-neon .tile-noun { color: #FFE14D; } .theme-neon .tile-adj { color: #35D0FF; } .theme-neon .tile-social { color: #FF6FAE; } .theme-neon .tile-question { color: #4DF08A; } .theme-neon .tile-other { color: #C2C2D6; } .theme-neon .tile-neg { color: #FF6B6B; } .theme-neon .tile-misc { color: #8FB8FF; } /* keep emoji legible on dark */ .theme-neon .tile-emoji { filter: drop-shadow(0 0 3px rgba(255,255,255,0.25)); } /* ── PASTEL ────────────────────────────────────────────────────────── */ .theme-pastel .tile { border-radius: 16px; border: 2px solid rgba(120,110,150,0.30); box-shadow: 0 2px 6px rgba(90,80,120,0.12); } .theme-pastel .tile-label-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-pastel .tile-label { color: #2A2440; text-shadow: none; font-weight: 800; } .theme-pastel .tile-verb { background: #F6D6A8; } .theme-pastel .tile-noun { background: #F6ECA8; } .theme-pastel .tile-adj { background: #BFE3F0; } .theme-pastel .tile-social { background: #F3CADC; } .theme-pastel .tile-question { background: #CDEBCD; } .theme-pastel .tile-other { background: #E2E2EC; } .theme-pastel .tile-neg { background: #F0CACA; } .theme-pastel .tile-misc { background: #DCE8F2; } /* ═══════════════════════════════════════════════════════════════════ CHROME — header (.topbar), sentence bar (.sb-bar / .sb-btn) + board surface, so a deployed board (use.html, theme class on ) matches the three mockups end-to-end, not just the tile grid. (Luke 2026-06-08.) Same AA contract as the tiles: every chrome TEXT colour below clears 4.5:1 on its chrome BACKGROUND, asserted in board-themes-contrast.test.ts. NOTE: the builder's tablet PREVIEW shows themed tiles only; this chrome renders on the deployed board / Preview (use.html owns the topbar+sb-bar). ═══════════════════════════════════════════════════════════════════ */ /* ── PLAYFUL chrome (purple frame, bright) ─────────────────────────── */ .theme-playful { background: #EDE7FB; } .theme-playful .topbar { background: #5B3FA8; color: #FFFFFF; } .theme-playful .topbar-title, .theme-playful .topbar-brand, .theme-playful .topbar-brand span { color: #FFFFFF; } .theme-playful .sb-bar { background: #FFFFFF; border-bottom-color: #5B3FA8; } .theme-playful .sb-btn { background: #5B3FA8; color: #FFFFFF; } /* ── NEON chrome (dark dashboard, glow) ────────────────────────────── */ .theme-neon { background: #06060E; } .theme-neon .topbar { background: #0A0A16; color: #35D0FF; border-bottom: 1px solid #35D0FF; } .theme-neon .topbar-title, .theme-neon .topbar-brand, .theme-neon .topbar-brand span { color: #35D0FF; text-shadow: 0 0 5px currentColor; } .theme-neon .sb-bar { background: #0A0A16; border-bottom-color: #35D0FF; } .theme-neon .sb-btn { background: #0C0C16; color: #35D0FF; border: 1px solid currentColor; box-shadow: 0 0 8px rgba(53,208,255,0.25); } /* sentence-bar placeholder ("Tap words…") defaults to dark gold for the light cream bar → unreadable (~4:1) on this dark bar; re-ink to neon blue. */ .theme-neon .sb-empty { color: #8FB8FF; } /* ── PASTEL chrome (soft pink header, lavender pills) ──────────────── */ .theme-pastel { background: #F3E9F2; } .theme-pastel .topbar { background: #F4A6C0; color: #3A2440; } .theme-pastel .topbar-brand span { color: #3A2440; } /* override the amber accent on the light bar */ /* Topbar controls (back / mode / separator / ☰ / deployed .use-ham-btn) no longer need per-theme colour rules: they `color: inherit` the bar's colour (#3A2440 here), so setting .topbar's colour above re-inks ALL of them at once. That's the structural fix for the recurring white-on-light-bar bug. */ .theme-pastel .sb-bar { background: #FBF0F6; border-bottom-color: #E2A8C6; } .theme-pastel .sb-btn { background: #C9A8E0; color: #2A2440; } /* ═══════════════════════════════════════════════════════════════════ CUSTOM THEMES (Tinky Theme Studio, Luke 2026-06-08) — variable-driven so a USER-DESIGNED theme renders with NO new CSS. theme-render.js sets .theme-custom + data-tt-mode + the --tt-* vars (from a validated ThemeTokens object) on the surface (builder frame OR use.html ). Two modes: fill — the category colour is the tile BACKGROUND (label = --tt-label). outline — dark tile (--tt-tilebg), the category colour is the BORDER+LABEL. Rendered FAITHFULLY — accessibility is an opt-in Studio assist, never forced. ═══════════════════════════════════════════════════════════════════ */ /* Background ownership (Luke 2026-06-23): the surface colour is the BASE; an optional gradient/image layer (+ readability scrim) rides on top via --tt-bg-image. Defaults to `none`, so a colour-only theme is byte-identical to the original `background: var(--tt-surface)` behaviour. */ .theme-custom { background-color: var(--tt-surface); background-image: var(--tt-bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; /* Font ownership (Luke 2026-06-23): the chosen font cascades to tiles, labels, chrome. Defaults to `inherit` so a theme that never picked a font looks identical to before. Title elements hardcode their own family, so they're re-pointed at the token explicitly below. */ font-family: var(--tt-font, inherit); } .theme-custom .tile-label, .theme-custom .topbar-title, .theme-custom .board-header-title, .theme-custom .preview-topbar .topbar-title { font-family: var(--tt-font, inherit); } /* Spacing & size (Luke 2026-06-23). --tt-gap defaults to the shipped 8px, so a theme that never touched spacing is unchanged. --tt-label-scale multiplies the tile-label size (builder base 0.7rem); defaults to 1. On the deployed surface use-boards.css composes --tt-label-scale WITH the end-user's own --tile-label-scale accessibility pref so neither clobbers the other. */ .theme-custom .tile-grid, .theme-custom .grid { gap: var(--tt-gap, 8px); } .theme-custom .tile-label { font-size: calc(0.7rem * var(--tt-label-scale, 1)); } .theme-custom .tile { border-radius: var(--tt-radius); border: var(--tt-bw) solid var(--tt-bc); box-shadow: var(--tt-shadow); } .theme-custom .tile-label-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-custom .tile-label { color: var(--tt-label); font-weight: 800; } /* fill mode — category colour = tile background */ .theme-custom[data-tt-mode="fill"] .tile-verb { background: var(--tt-verb); } .theme-custom[data-tt-mode="fill"] .tile-noun { background: var(--tt-noun); } .theme-custom[data-tt-mode="fill"] .tile-adj { background: var(--tt-adj); } .theme-custom[data-tt-mode="fill"] .tile-social { background: var(--tt-social); } .theme-custom[data-tt-mode="fill"] .tile-question { background: var(--tt-question); } .theme-custom[data-tt-mode="fill"] .tile-other { background: var(--tt-other); } .theme-custom[data-tt-mode="fill"] .tile-neg { background: var(--tt-neg); } .theme-custom[data-tt-mode="fill"] .tile-misc { background: var(--tt-misc); } /* outline mode — dark tile, category colour = border (currentColor) + label */ .theme-custom[data-tt-mode="outline"] .tile { background: var(--tt-tilebg); } .theme-custom[data-tt-mode="outline"] .tile-label { text-shadow: 0 0 5px currentColor; } .theme-custom[data-tt-mode="outline"] .tile-verb { color: var(--tt-verb); } .theme-custom[data-tt-mode="outline"] .tile-noun { color: var(--tt-noun); } .theme-custom[data-tt-mode="outline"] .tile-adj { color: var(--tt-adj); } .theme-custom[data-tt-mode="outline"] .tile-social { color: var(--tt-social); } .theme-custom[data-tt-mode="outline"] .tile-question { color: var(--tt-question); } .theme-custom[data-tt-mode="outline"] .tile-other { color: var(--tt-other); } .theme-custom[data-tt-mode="outline"] .tile-neg { color: var(--tt-neg); } .theme-custom[data-tt-mode="outline"] .tile-misc { color: var(--tt-misc); } .theme-custom[data-tt-mode="outline"] .tile-emoji { filter: drop-shadow(0 0 3px rgba(255,255,255,0.25)); } /* chrome (topbar + sentence bar) — same vars drive preview + deploy */ .theme-custom .topbar { background: var(--tt-topbar); color: var(--tt-topbar-text); } .theme-custom .topbar-brand span { color: var(--tt-topbar-text); } /* override the amber accent */ /* Every other topbar control — title, brand, separator, back, mode, hamburger, the deployed .use-ham-btn — `color: inherit`s the bar colour set above, so the one `--tt-topbar-text` re-inks ALL of them. No per-control rule can be missed (the recurring white-on-light-bar bug, fixed structurally). .topbar-install (self-contained amber pill) keeps its own dark text by design. */ .theme-custom .sb-bar { background: var(--tt-sbbar); border-bottom-color: var(--tt-sbbtn); } .theme-custom .sb-btn { background: var(--tt-sbbtn); color: var(--tt-sbbtn-text); } /* ── BUILDER CANVAS SURFACE (Luke 2026-06-08) ────────────────────────── The builder's board area (.tablet-screen) has an opaque light default bg that HID the theme's surface → themed chrome but a light grid (the half-themed look Luke caught). Theme the canvas too. The empty-state editing affordances (Add Tile / New Row) hardcode dark text → re-ink them with --tt-on-surface (custom) or a light colour (neon) so editing stays usable on a dark canvas. Deployed boards (use.html) already theme the surface via . */ /* Background ownership (Luke 2026-06-23): the preview's board area must render the SAME gradient/image layer (+scrim) as the deployed , or the builder preview shows only the surface colour while the device shows the full background (preview≠deploy — Codex caught this). Mirror the .theme-custom rule exactly. --tt-bg-image defaults to `none` so colour-only themes are unchanged. */ .theme-custom .tablet-screen { background-color: var(--tt-surface); background-image: var(--tt-bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; } .theme-playful .tablet-screen { background: #EDE7FB; } .theme-neon .tablet-screen { background: #06060E; } .theme-pastel .tablet-screen { background: #F3E9F2; } /* Editing affordances readable on the themed canvas. !important beats the inline colour on .row-empty-add. Playful/Pastel are LIGHT surfaces → their default dark text already reads, so only custom + neon (dark-capable) need re-inking. */ .theme-custom .add-tile-btn, .theme-custom .row-add-cta, .theme-custom .row-empty-add { color: var(--tt-on-surface) !important; border-color: var(--tt-on-surface); } .theme-neon .add-tile-btn, .theme-neon .row-add-cta, .theme-neon .row-empty-add { color: #8FB8FF !important; border-color: rgba(143,184,255,0.5); } /* ── Independent sentence-bar STYLE (color) + SIZE — Luke 2026-06-19 ── board.sentenceBarStyle / board.sentenceBarSize → sbstyle-*/sbsize-* on #sbBar (use-sentence-builder.js). Appended LAST so it overrides the board-theme .sb-bar defaults. Mirrors preview-chrome.css (builder). */ .sb-bar.sbstyle-blue { background:#EEF4FF; border-bottom-color:#7C3AED; } .sb-bar.sbstyle-green { background:#EAF7EE; border-bottom-color:#16A34A; } .sb-bar.sbstyle-pink { background:#FDEEF6; border-bottom-color:#DB2777; } .sb-bar.sbstyle-dark { background:#1F2937; border-bottom-color:#F59E0B; color:#E5E7EB; } .sb-bar.sbstyle-dark .sb-empty { color:#CBD5E1; } .sb-bar.sbsize-sm { padding:0.3rem 0.6rem; font-size:0.85rem; } .sb-bar.sbsize-lg { padding:0.8rem 1.1rem; font-size:1.12rem; } .sb-bar.sbsize-lg .sb-chip { font-size:1.05em; }