/* Made by Matt — design tokens (SW2 T1). * * Every value below is READ from a file in this estate, and that file and * selector are named beside it. The five the order states as hex are marked * "given". Nothing here is picked by eye except one value, marked NEW, which * has no source in the estate; its contrast is measured like the rest. * * Scope is :root and [data-theme="dark"], plus the two preference variants the * order asks for. No selectors, no components: this file only names colours. * * --------------------------------------------------------------------------- * THIS FILE MAY NOT DEFINE A NAME THE ESTATE ALREADY DEFINES. * * The stamped is the last stylesheet in , so any name redefined * here wins the cascade and repaints every consumer of it. Five names did: * * --mbm-ink assets/mbm-platform.css #1B2140 (1 consumer) * --mbm-line assets/mbm-platform.css #E3DAC5 (4 consumers) * --mbm-muted assets/mbm-platform.css #4A5170 * --mbm-focus assets/mbm-platform.css and assets/brand/brand-tokens.css, * which disagree with each other: a box-shadow list and an * outline shorthand under one name * --mbm-font assets/brand/brand-tokens.css, identical value * * Measured, not argued: linking this file repainted /main/'s .mbm-audience ink * from #1B2140 to #161D3D and turned its warm #E3DAC5 divider into a faint * navy hairline, and did the same to /games/ section.hero. That is a design * change, and T3 is chrome parity only, so the five are DEFERRED: the estate's * existing definitions stand as the single definition of each, and if the * redesign wants different values they change at the definition, in the part * that owns the repaint and can show it. * * --mbm-primary carries the ink role for this vocabulary, and does not collide. * A focus token is deliberately absent: --mbm-focus has two conflicting * meanings in the estate today, and settling that belongs to Part A with the * rest of the focus work. * * Two gates hold this: tools/sw2/check_token_collisions.py (no name defined * twice) and tools/sw2/check_tokens_inert.cjs (linking this file changes no * computed style on any stamped page). * --------------------------------------------------------------------------- */ :root{ /* --- given by the order --- */ --mbm-bg:#f6f1e7; --mbm-primary:#161d3d; /* equals --navy, assets/catalogue/hub.css :root */ --mbm-accent:#1f6b4a; --mbm-card:#ffffff; /* The light palette raises by SHADOW, not by fill: --mbm-bg is #f6f1e7 and a card on it is already white, so there is no lighter fill to raise to. The dark palette below raises by fill because its card is #112237 and can. The name exists in both so a component can use it without branching. */ --mbm-card-raised:#ffffff; --mbm-card-radius:12px; --mbm-card-shadow:0 2px 10px rgba(22,29,61,.08); /* the shadow already on .mf-feature */ /* --- supporting, read from assets/catalogue/hub.css :root --- */ --mbm-tap:44px; /* --tap */ /* --- motion, so the reduced-motion variant below has a pair to override --- */ --mbm-motion-duration:.24s; --mbm-motion-ease:cubic-bezier(.2,.75,.25,1); /* --mbm-ease, assets/mbm-platform.css */ /* --- pathway chips: assets/catalogue/hub.css :root, lines 8-9 --- The decks carry no pathway colour (BUILD, GROW and LAUNCH share one chassis palette), so this is the estate's single definition. */ --mbm-pathway-build-bg:#F5DDBF; --mbm-pathway-build-ink:#8A4C0B; --mbm-pathway-grow-bg:#D5EEDD; --mbm-pathway-grow-ink:#2F6B4D; --mbm-pathway-launch-bg:#F3E8B8; --mbm-pathway-launch-ink:#6E5A0C; /* --- subject accents: resources/index.html :root, the map UX2 B4 ships --- The order's parenthetical names three of these differently; the shipped map wins, because "as already used by UX2" is the instruction. */ --mbm-subject-science:#247761; /* --green */ --mbm-subject-humanities:#33608f; /* --blue */ --mbm-subject-art:#7c5cb8; /* --purple */ --mbm-subject-lifeskills:#f2a24a; /* --amber */ /* --- format badges. Each names its OWN ink, because the readable pair is not the same one for all four: amber needs dark ink (7.86:1) and fails under white (2.09:1); the other three need white and fail under dark ink. Shipping the pair leaves no failing combination to pick. --- */ --mbm-format-html:#F2A24A; --mbm-format-html-ink:#161d3d; /* amber: --mbm-amber, assets/brand/brand-tokens.css */ --mbm-format-docx:#33608f; --mbm-format-docx-ink:#ffffff; /* blue: --blue, resources/index.html */ --mbm-format-pdf:#454C6B; --mbm-format-pdf-ink:#ffffff; /* grey: --mut, assets/catalogue/hub.css */ --mbm-format-pptx:#A33A22; --mbm-format-pptx-ink:#ffffff; /* red: NEW. No red exists in this estate to read. */ /* --- subject accents carry an ink too, for the same reason. Lifeskills amber is 2.09:1 against a white card, so it is a BAND behind a text chip and never a text colour; the ink below is what goes on it. --- */ --mbm-subject-science-ink:#ffffff; --mbm-subject-humanities-ink:#ffffff; --mbm-subject-art-ink:#ffffff; --mbm-subject-lifeskills-ink:#161d3d; } /* --- dark: the Play shelf's own set, domain-split/play/play.css :root --- */ [data-theme="dark"]{ --mbm-bg:#081422; /* --bg */ --mbm-primary:#f3f7fa; /* --text */ --mbm-accent:#37c46f; /* --green */ --mbm-card:#112237; /* --surface */ --mbm-card-raised:#182f46; /* --raised */ --mbm-card-shadow:0 2px 10px rgba(0,0,0,.5); } @media (prefers-reduced-motion:reduce){ :root{--mbm-motion-duration:0s;--mbm-motion-ease:linear} } @media (prefers-contrast:more){ :root{--mbm-primary:#0B1020;--mbm-card:#ffffff} /* Keep light ink on dark surfaces when both preferences are active. */ [data-theme="dark"]{--mbm-primary:#ffffff;--mbm-card:#081422} }