/* PyQuiz posture colours — the ONE home for the tokens every surface shares. Written for D49's drift: `--bg` was declared in eleven places (three themes in each app's base.css, accounts.css and an inline :root in each of seven standalone pages), so changing the posture colour in one left the others behind. That is how the account pages came to render #f6f1e6 while students saw the specified #FAF7F2. Every value here is lifted verbatim from the apps' base.css, which was the incumbent authority. Nothing was redesigned. Two paths, one source. The generated apps INLINE this file through the build's include directive in each shell template, so they stay self-contained (non-negotiable 13). Every server-rendered page and the seven standalone pages LINK it at /assets/accounts/tokens.css, beside the fonts they already load from there. Load it FIRST, before the app or page stylesheet, so a surface's own remaining tokens still override it. What deliberately stays out, and why: - The light :root here carries only --bg and --fg, the two colours all ten defining sites already agreed on. The apps' other light tokens (--panel, --border, --code-bg and so on) are shared by the two APPS but are not defined on the account pages at all, and hoisting them here would newly define them on every account page and on the engine stylesheets those pages link, which would change rendering. Consolidating them needs its own pass with a rendered check. - Four light tokens genuinely differ between the two apps and are NOT merged: --muted (student #6A655C, teacher #5C5C63), --accent (#6C4DC4 vs #2D5BA6), --ok (#2F9E63 vs #1E6E3C) and --bad (#C2452F vs #B12A38). Each stays in its own app's base.css. - The DISPLAY font forks three ways on purpose (Bricolage in the apps, Hanken on the account pages, Fraunces on the landing page) and is per-surface, so no font is defined here. - `--line` means a line height in the apps and a border colour on the account pages. The name collides across the two families, so it is left alone in both. The theme blocks below are safe to share whole: the two generated apps set `data-theme`, and of the account pages only the four student pages that mark `` do (D353). The last two blocks theme those pages' own tokens under that mark, so on every other account page none of these selectors match. */ :root { --bg: #FAF7F2; --fg: #1B1B1F; /* Chip sizing (D428). One size for every label chip, on both delivery paths. A chip is a static label a reader scans, not a button, so it is quieter than the body text around it: about 13px, normal weight and slim padding. These are NEW names on purpose, since hoisting an existing name into this block would newly define it on every account page. Size and padding do not theme: a chip is the same shape in light, dark and high contrast, so these live here and nowhere else. Anything pressable or draggable that merely looks like a chip keeps its own larger target (WCAG 2.5.8) and must not read these. Chips and the small transient labels that sit beside them. The classes page's "Copied" tooltip is not a chip and never will be, but it is a short static label that appears in a chip-sized column and would shout if it were larger, so it reads these three too. That is the boundary: a label a reader scans, chip or not, and never a target a finger lands on. A THEMED value for any of them would be a new token, not one of these. */ --chip-font-size: 0.8125rem; --chip-font-weight: 400; --chip-padding: 2px 9px; /* The circled gap number on the two review pages (D713, D714), about 70% of the 1rem it takes on the play board. It is a reference marker beside an answer rather than reading text, so it may sit under the body floor there and nowhere else. It does not theme. flowchart.js GAP_BADGE_REVIEW_SLOT_PX is this size's badge slot: change together. */ --gap-badge-review-font-size: 0.7rem; /* The editor's completion list (D554). Like the chip sizes above these do not theme, so they live here and nowhere else: a token defined in one theme block only would leave the other themes with an invalid declaration and no outline at all. Each option is a pointer target, so its padding keeps it at least 24px tall (WCAG 2.5.8). The option padding also carries the list's inset at the start, where the list itself has none, so the footer under the list takes the same padding and its text starts where the options' does. The active option's outline sits inside the option, so the list's own scroll box never clips it. The clearance keeps option text out from under a scrollbar that overlays the list rather than taking a gutter, as a phone's and macOS's do. */ --completion-option-padding: 2.75px 6px 2.75px 8px; --completion-outline-width: 2px; --completion-scrollbar-clearance: 12px; /* Condensed (D569). 14px type, the floor D583 sets for the list and its hint and D513 for any text, on a 1.34 line. With the option padding above that is 5.5px of vertical padding round an 18.76px line, 24.26px in all, so every option is still a full 24px target (WCAG 2.5.8) in one column with no overlap, and needs no spacing exception. */ --completion-font-size: 0.875rem; --completion-line-height: 1.34; /* The key drawn in the "Tab to complete" footer under the list. */ --completion-key-padding: 0 5px; --completion-key-radius: 4px; /* Code a student reads in an activity (D566, D583): the player's code windows and the quiz pages' code, 15px on a 1.5 line. Below the 16px body size, which D583 allows on those surfaces, and above D513's 14px floor. The global editor size set on .CodeMirror in code.css is deliberately not this, since the playground and the authoring editors keep it. */ --activity-code-font-size: 0.9375rem; --activity-code-line-height: 1.5; /* The "Open in Playground" button in a code window bar (D570, D583). Like the sizes above these do not theme, so they live here and nowhere else. The label is the 14px the completion list already names, the floor D583 sets for the bar, and the 28px height keeps a full 24px target inside the 38px bar (WCAG 2.5.8). */ --winbar-button-font-size: var(--completion-font-size); --winbar-button-height: 28px; --winbar-button-pad-inline: 12px; --winbar-button-gap-after: 4px; /* The activity and question TYPE palette (D461). One home for what used to live in three hand-copied maps: TYPE_COLOURS in each app's core/constants.js and a third copy inside pack.html. TWO tokens per type, a fill and an ink, because they are different jobs and no single colour can do both. A fill is painted BEHIND white text, by the player's header bar number tab and .task-list .type-pill-abbrev, which needs a relative luminance at or below 0.1833 to clear 4.5:1. An ink is written ON a faint wash of its own fill, which needs one at or above 0.2043 to clear 4.5:1 against the near-black posture ink. The two bands do not overlap, so one value cannot be both. Where a fill is already dark enough to read as text, its ink is the same colour and says so by repeating it. THE RULE EVERY FILL OBEYS: white on it clears 4.5:1. Modify used to be #D97706, which is 3.19:1 behind white, a live AA failure on both apps' task lists. It is darkened to #AC5F07 (4.78:1) at the same hue rather than given a dark ink of its own, so the rule holds for every fill with no exception to forget. The other eleven activity fills are untouched. THE RULE EVERY INK OBEYS: it clears 4.5:1 as text on a wash of its own fill, at both strengths in use (18% on the welcome badge, 10% on the pack and quiz chips) and on the bare card. Three inks are darker than their fill for that reason and no ink is ever lighter than its fill. Fifteen types: the twelve activity types plus single, multiple and long_form, the three question types with no activity behind them. Their three colours are new, picked in the widest free gaps on the hue wheel so a chip's colour says which type it is at a glance. tests/js/type_colour_tokens.test.js measures all of that, and the set is closed there: a sixteenth type is a decision, not an edit. */ --type-parsons-fill: #2D5BA6; --type-parsons-ink: #2D5BA6; --type-cloze-fill: #1E6E3C; --type-cloze-ink: #1E6E3C; --type-trace_table-fill: #8A5A00; --type-trace_table-ink: #8A5A00; --type-spot_the_bug-fill: #B12A38; --type-spot_the_bug-ink: #B12A38; --type-modify-fill: #AC5F07; /* darkened from #D97706: white reads 4.78:1 */ --type-modify-ink: #8A4E08; /* 5.15:1 on an 18% wash of its own fill */ --type-predict_output-fill: #7B2D6B; --type-predict_output-ink: #7B2D6B; --type-starter_challenge-fill: #0F6E84; --type-starter_challenge-ink: #0E6478; --type-testing-fill: #5C7A2D; --type-testing-ink: #4E6824; --type-flowchart-fill: #5E3A9A; --type-flowchart-ink: #5E3A9A; --type-theory-fill: #4B5563; --type-theory-ink: #4B5563; --type-order-fill: #9A3412; --type-order-ink: #9A3412; --type-match-fill: #0B6E5B; --type-match-ink: #0B6E5B; --type-single-fill: #9038A9; /* violet, the gap between flowchart and predict */ --type-single-ink: #9038A9; /* The purple pen dot beside marks gained in extra time (D759). Decoration only, the words carry the figure. Its own name so retuning the single-choice chip never moves it. */ --purple-pen: #9038A9; --type-multiple-fill: #A43768; /* rose, the gap between predict and the bug red */ --type-multiple-ink: #A43768; --type-long_form-fill: #5151C5; /* indigo, the gap between parsons and flowchart */ --type-long_form-ink: #5151C5; /* The match pairing chip's warm surface (D543). The paper surface, then the hairline and the amber hairline in equal parts, which lands close to the #F3ECDF the teacher's header uses. Each has a fallback for the apps, which define neither --paper nor --line2 (--line there is a line height), so the chip falls back to the panel surfaces rather than to transparent. Resolved on :root, so dark recomputes it from its own tokens and high contrast replaces it below. */ --pairing-surface: color-mix( in srgb, var(--paper, var(--panel)) 60%, color-mix(in srgb, var(--line2, var(--panel-2)), var(--amber-line, var(--panel-2))) ); /* The folder-tab question header (D546, slice 10, D521, D536). The teacher's capture names all four: the number tab's dark fill and the white on it, the marks tab's warm fill and its hairline. --qcard-tab-ink is also the type tab's text, since white clears 4.5:1 on every type fill (D461). The marks tab's border is a label's outline and not a control's, so its light value keeps the teacher's hairline. quiz-card.css reads these. */ --qcard-tab-fill: #3A332B; --qcard-tab-ink: #FFFFFF; --qcard-marks-fill: #F3ECDF; --qcard-marks-line: #D9D1C1; /* The quiz editor's segment row (D738, applying D724 and D735): the row's shaded ground, an unpressed segment's fill and the line every segment and group keeps, a control's outline at 3:1 on both. Text on them is --fg, as on the marks tab. A pressed segment wears its type's fill instead. */ --qcard-seg-ground: #F3ECDF; --qcard-seg-fill: #FFFDF8; --qcard-seg-line: #7A6E5F; /* The flowchart editor's side panel notes: the hint under a field and the "click a shape" empty state. The teacher's muted grey, 6.5:1 on the panel's #FFFDF8 and 6.2:1 on --bg, so the 11px hint clears 4.5:1 with room to spare. A new name rather than --muted, which the account pages do not define in light. Dark and hc read their own --muted instead. */ --fc-side-note-ink: #5C5C63; } /* ONE INDIRECTION, so a surface needs one rule and not fifteen (D461). Each rule maps a type's own pair onto the same pair of names, keyed on the data-type the chip already carries, so a surface that paints a type reads --type-fill and --type-ink once instead of hand-copying three declarations per type. That copying stood at forty-five across four chip surfaces plus fifteen ink one-liners in frontend/shared/css/base.css. It DISSOLVES a hazard rather than documenting it. A per-type rule such as `.welcome-type-badge[data-type="modify"]` weighs (0,2,0), exactly what `[data-theme="dark"] .welcome-type-badge` weighs, so it won on source order alone and moving it below the theme rule handed the dark theme a light ink on a dark wash. One rule on the class alone weighs (0,1,0) and loses to the theme rule wherever it sits, so there is no order left to get wrong. These set custom properties and paint nothing by themselves, so an element carrying a data-type no surface styles is untouched. The only other data-type in the tree is the teacher prompt's checkbox, set to "1". A surface falls back to --fg and never --text-ink, which is declared by accounts.css and by the theme blocks below but not in the light :root here, so on pack.html it would resolve to nothing. */ [data-type="parsons"] { --type-fill: var(--type-parsons-fill); --type-ink: var(--type-parsons-ink); } [data-type="cloze"] { --type-fill: var(--type-cloze-fill); --type-ink: var(--type-cloze-ink); } [data-type="trace_table"] { --type-fill: var(--type-trace_table-fill); --type-ink: var(--type-trace_table-ink); } [data-type="spot_the_bug"] { --type-fill: var(--type-spot_the_bug-fill); --type-ink: var(--type-spot_the_bug-ink); } [data-type="modify"] { --type-fill: var(--type-modify-fill); --type-ink: var(--type-modify-ink); } [data-type="predict_output"] { --type-fill: var(--type-predict_output-fill); --type-ink: var(--type-predict_output-ink); } [data-type="starter_challenge"] { --type-fill: var(--type-starter_challenge-fill); --type-ink: var(--type-starter_challenge-ink); } [data-type="testing"] { --type-fill: var(--type-testing-fill); --type-ink: var(--type-testing-ink); } [data-type="flowchart"] { --type-fill: var(--type-flowchart-fill); --type-ink: var(--type-flowchart-ink); } [data-type="theory"] { --type-fill: var(--type-theory-fill); --type-ink: var(--type-theory-ink); } [data-type="order"] { --type-fill: var(--type-order-fill); --type-ink: var(--type-order-ink); } [data-type="match"] { --type-fill: var(--type-match-fill); --type-ink: var(--type-match-ink); } [data-type="single"] { --type-fill: var(--type-single-fill); --type-ink: var(--type-single-ink); } [data-type="multiple"] { --type-fill: var(--type-multiple-fill); --type-ink: var(--type-multiple-ink); } [data-type="long_form"] { --type-fill: var(--type-long_form-fill); --type-ink: var(--type-long_form-ink); } /* HIGH CONTRAST: yellow on black, real contrast not pastel */ :root[data-theme="hc"] { --bg: #000000; --pane: #0A0A0A; --panel: #000000; --panel-2: #1A1A1A; --fg: #FFEC3D; /* bright yellow text */ --muted: #FFE066; --border: #FFEC3D; --border-strong: #FFEC3D; --accent: #FFEC3D; --accent-fg: #000000; --ink-on-fill: #000000; /* text on a bright status or accent fill (D352) */ --ok: #00FF66; --bad: #FF5555; --warn: #FFB000; --focus: #FFEC3D; --code-bg: #000000; --code-fg: #FFEC3D; --runner-bg: #000000; --runner-fg: #FFEC3D; --shadow-1: none; --pairing-surface: var(--bg); /* a tinted mix of yellow hairlines would muddy the ink */ } /* DARK: dark grey, not pure black */ :root[data-theme="dark"] { --bg: #1F1F22; --pane: #25252A; --panel: #2C2C32; --panel-2: #34343A; --fg: #E8E6E0; --muted: #B8B6B0; /* 4.5:1 or better on every dark surface, tinted rows included (D352) */ --border: #45454C; --border-strong: #8A8A93; /* a field boundary needs 3:1 on --panel (D352) */ --accent: #78A9EA; /* 4.5:1 or better on the green inserted-line tint too (D352) */ --accent-fg: #0E0E12; --ink-on-fill: #111316; /* text on a light status or accent fill, where white fails (D352) */ --ok: #6FD18C; --bad: #F08894; --warn: #E8B868; --focus: #F2A24E; --code-bg: #1A1A1E; --code-fg: #E8E6E0; --runner-bg: #0F0F12; --runner-fg: #F4F2EC; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3); } /* ---- The four student account pages in dark and high contrast (D353) ------ /student/dashboard, /student/mistakes, /student/quizzes/ and /student/playground mark , and only there does settings-boot.js or settings.js set data-theme. Every selector below names data-themeable, so none can match on a teacher page, the teacher playground included, which shares the playground template. The dark and hc blocks above theme --bg, --fg, --muted, --panel, --border, --ok, --bad, --code-bg and the rest of the generated apps' names at (0,2,0), which beats accounts.css's light :root. These blocks, at (0,3,0), cover the light-only names accounts.css adds and keep the account pages' green accent where the blocks above would hand them the player's. They live here, the home of every theme block, so accounts.css's hex tokens stay its light palette alone. Same method as D352: dark keeps its grey ground with the green lifted only as far as the ratio needs, and high contrast keeps yellow on black with bright status colours. Every text token clears 4.5:1 on every surface here and every boundary and focus token clears 3:1. The light values in accounts.css do not move. */ :root[data-themeable][data-theme="dark"] { --surface-page: var(--bg); --surface-card: #2C2C32; --surface-logo: #34343A; --paper: #2C2C32; --field-surface: #1A1A1E; --field-border: #8A8A93; /* 4.06:1 on --paper, 5.07:1 on --field-surface */ --line: #3A3A40; --line2: #4A4A52; --hairline: #3A3A40; --hairline-toolbar: #3A3A40; --dot: #6A6A72; --green: #7CC99A; /* a fill, carrying --on-accent-ink at 9.46:1 */ --green-ink: #7CC99A; /* 7.06:1 on --surface-card */ --green-soft: #1E3A2A; --accent: var(--green); --accent-ink: var(--green-ink); --accent-soft: var(--green-soft); --accent-line: #2F6B47; --accent-emerald: var(--green-ink); --accent-green: var(--green-ink); --accent-green-muted: var(--green-ink); --on-accent-ink: #111316; --amber: #E8B868; --amber-ink: #E8B868; --amber-soft: #3A2F1C; --amber-line: #6B5530; --red-ink: #F08894; --red-soft: #3E2226; --red-line: #6E3A40; --grey-soft: #34343A; --grey-ink: var(--muted); --control-disabled-ink: #9A9890; --code-kw: var(--green-ink); --text-ink: var(--fg); --text-muted: var(--muted); --text-muted-2: var(--muted); --text-muted-3: var(--muted); --text-desc: var(--muted); --text-faint: var(--muted); --glyph: var(--muted); --chrome: #0F2C1E; /* the header's own dark bar (student-topbar.css) */ /* The playground's turtle drawing keeps the light code ground in every theme, as real turtle's white window does: a student's default black pen and any colour they chose was picked against a light page, and a dark ground would hide it. Its empty-state words take the light inks with it. */ --turtle-surface: #F0EBDC; --turtle-ink: #1B1B1F; --turtle-muted: #6A655C; /* 4.86:1 on --turtle-surface */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --dialog-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); --dialog-backdrop: rgba(0, 0, 0, 0.7); /* The question header (D546): the number tab lifted off the dark card so the tab and the card's top edge still read, white on it at 6.12:1. The marks tab a warm step above the card with the posture ink on it at 9.72:1 and its outline 4.26:1 on the page. */ --qcard-tab-fill: #6B6055; --qcard-tab-ink: #FFFFFF; --qcard-marks-fill: #3A3530; --qcard-marks-line: #8C8070; /* The segment row (D738), held though the editor page is light only. */ --qcard-seg-ground: #3A3530; --qcard-seg-fill: #2C2C32; --qcard-seg-line: #A89C8A; } :root[data-themeable][data-theme="hc"] { --surface-page: #000000; --surface-card: #000000; --surface-logo: #000000; --paper: #000000; --field-surface: #000000; --field-border: #FFEC3D; --line: #FFEC3D; --line2: #FFEC3D; --hairline: #FFEC3D; --hairline-toolbar: #FFEC3D; --dot: #FFE066; --green: #FFEC3D; --green-ink: #00FF66; --green-soft: #000000; --accent-ink: #FFEC3D; --accent-soft: #000000; --accent-line: #FFEC3D; --accent-emerald: #FFEC3D; --accent-green: #FFEC3D; --accent-green-muted: #FFEC3D; --on-accent-ink: #000000; --amber: #FFB000; --amber-ink: #FFB000; --amber-soft: #000000; --amber-line: #FFB000; --red-ink: #FF5555; --red-soft: #000000; --red-line: #FF5555; --grey-soft: #000000; --grey-ink: var(--muted); --control-disabled-ink: #BDB04A; --code-kw: var(--fg); --text-ink: var(--fg); --text-muted: var(--muted); --text-muted-2: var(--muted); --text-muted-3: var(--muted); --text-desc: var(--muted); --text-faint: var(--muted); --glyph: var(--muted); --chrome: #000000; --chrome-avatar: #000000; --chrome-text: #FFEC3D; --nav-inactive: #FFE066; --avatar-text: #FFEC3D; --turtle-surface: #F0EBDC; /* as in dark, see there */ --turtle-ink: #1B1B1F; --turtle-muted: #6A655C; --shadow: none; --dialog-shadow: none; --dialog-backdrop: rgba(0, 0, 0, 0.8); /* The question header (D546). Black tabs on the black page, outlined in the posture yellow by quiz-card.css. The ink is white rather than yellow because it is the type tab's text too, and yellow fails on the modify and testing fills where white clears 4.5:1 on every one. */ --qcard-tab-fill: #000000; --qcard-tab-ink: #FFFFFF; --qcard-marks-fill: #000000; --qcard-marks-line: #FFEC3D; /* The segment row (D738): black on black, outlined in the posture yellow. */ --qcard-seg-ground: #000000; --qcard-seg-fill: #000000; --qcard-seg-line: #FFEC3D; }