/* Design tokens (#38). * * The ONE place a colour, a size, a radius or a font is decided. Linked from * base_layout.html BEFORE every other stylesheet, so the three files that * follow -- style.css, dashboard.css, d3_visualizations.css -- only ever name a * `var(...)`, never a literal. * * WHERE THESE VALUES CAME FROM. Nothing here is invented. They are the 31 hex * literals the three stylesheets already used, deduplicated: the repeats * (#fff x13, #333 x6, #a0dce8 x6, #55666d x5, #777 x5, #888 x4, #eef2f5 x4) * were already an implicit system, and this is that system written down. * * TWO CONFLICTS WERE RESOLVED, both in favour of the value that was actually on * screen -- link order, not intent, had been deciding them: * * * body background: style.css said #f4f4f9 and dashboard.css said #f4f6f8. * dashboard.css loads second on both pages, so #f4f6f8 was the live value * and is `--color-background`. #f4f4f9 has never been seen by anyone. * * primary: style.css's header border said #0779e4 and dashboard.css's * button said #007bff. #0779e4 won -- it is on every page, where the * button is on the filter bar only. (It has since MOVED, to #0670d4, for * a contrast reason recorded beside the token itself; the conflict was * still resolved in its favour and not #007bff's.) * * SIX GREYS BECAME ONE. #444, #555, #5a5a5a, #55666d, #666 and #777 were all * "muted body text" within a hair of each other in luminance; they are now * `--color-text-muted`. Every one of those sites got the same or better * contrast out of the move. * * THE DARK BLOCK AT THE BOTTOM REDEFINES PALETTE TOKENS ONLY. Sizes, radii and * type do not change with the theme, and it is still the only media query in * THIS file. #40 took up the invitation and chose the layout breakpoints: they * are two, they are `max-width`, and they live together in css/responsive.css. * They do not belong here -- a media query cannot read a custom property, so a * breakpoint token would be a value nothing could use. */ :root { /* --- Type --------------------------------------------------------- The sans stack is the one both stylesheets already carried. The mono stack is new: this is a numeric table app and it had no monospace face at all, so columns of numbers did not line up. It is applied to the numeric cells of `.styled-table` in dashboard.css. */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --text-xxs: 10px; --text-xs: 11px; --text-sm: 12px; --text-md: 13px; /* The 14px rung, added with its first user exactly as the note that used to stand here asked. #38's chart pass found four sites already printing `font-size: 14px` inline from JavaScript -- the two QB charts' facet titles and the two table sub-headings -- so the rung was in the design and only the token was missing. It is now the size of a heading INSIDE a panel, one step under the panel's own title. */ --text-lg: 14px; --text-xl: 16px; /* --- Space -------------------------------------------------------- The values in use already clustered on this ladder. Two one-offs are deliberately left as literals where they occur: the footer's 40px top margin and the header's 1rem band. */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 20px; /* --- Radius ------------------------------------------------------- `--radius-pill` replaces the 8px and 10px radii the badges used, which were already larger than half their own height. */ --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; /* --- Elevation ---------------------------------------------------- One shadow. Both cards and the filter bar used the same one. */ --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.1); /* --- Surface and structure ---------------------------------------- */ --color-background: #f4f6f8; --color-surface: #fff; --color-surface-tint: #f0f8ff; /* table body cells */ --color-surface-muted: #eef2f5; /* badges, section header rows */ --color-border: #ddd; --color-border-strong: #ccc; /* No `--color-scrim`. It had exactly one user, the full-screen `.page-loading-overlay`, which #40 deleted -- see dashboard.css. And no `--color-gridline` since #38's chart pass, for the same reason: its one reader was a `.gridline` rule no chart had ever drawn, and the pass declined to start drawing one -- see d3_visualizations.css. */ /* --- Text ---------------------------------------------------------- */ --color-text: #333; --color-text-muted: #55666d; --color-text-subtle: #888; --color-heading: #1a3b5c; /* The header and footer bars, which are dark in both themes. */ --color-inverse-surface: #333; --color-inverse-text: #fff; /* --- Accent ------------------------------------------------------- #a0dce8 and its family. The comment it carried for years -- "Matches Plotly header color" -- outlived Plotly itself (#41); it is the brand colour now, and it is named rather than matched. */ --color-accent: #a0dce8; --color-accent-hover: #b6e5ee; --color-accent-tint: #f4fbfd; --color-on-accent: #000; --color-accent-text: #2c5c6b; /* accent-family text, on white */ --color-text-on-tint: #33484f; /* body text on --color-accent-tint */ /* --- Primary ------------------------------------------------------ Actions. See the conflict note above for why the brand came from #0779e4's family and not #007bff's. THE BRAND BLUE MOVED, and this is the whole of that decision. #0779e4 carried `--color-on-primary` -- white -- at **4.32:1** on `.filters button`, under AA for the 12px label it prints. #38 shipped a separate `--color-link` instead of moving it, because moving the brand repaints the header rule as well and that was a wider decision than a token pass. It is made now, and the issue asked for the brand to MOVE rather than for a third blue: white on #0779e4 4.32:1 under AA white on #0670d4 4.91:1 clears it Both readers of the token were re-measured. The other one is the header's 3px bottom rule, which is a divider rather than text or a control, so 1.4.11's 3:1 does not reach it -- and it moved BOTH ways: 2.93 -> 2.57 against the near-black bar above it, 3.99 -> 4.53 against the page below it. Nothing else in the tree reads it. */ --color-primary: #0670d4; --color-primary-hover: #0056b3; /* white on it: 7.04:1 */ /* Link text is still NOT --color-primary (#38), and the reason narrowed rather than went away. The brand now clears AA on white (4.91) but a link is drawn on four surfaces and the brand fails two of them -- 4.36 on the muted row, 4.53 on the page. It is a background colour that happens to pass as text on one surface; this is a sibling chosen to pass on all of them: 5.69 on white, 5.30 on the row tint, 5.05 on the muted row. */ --color-link: #0a66c2; --color-link-hover: #12508f; --color-on-primary: #fff; /* --- Focus (#38) -------------------------------------------------- The ring, and the first `outline` this repository has ever had: before this, `focus`, `tabindex` and `outline` appeared ZERO times in static/ and templates/, so a keyboard reader had no indication of where they were on either page. WHY A TOKEN OF ITS OWN rather than the brand or the link. A focus ring is non-text content and needs 3:1 against whatever it lands on (WCAG 1.4.11), and `outline-offset` decides what that is: outwards on the card or the page for everything except a sortable table header, whose ring is inset and therefore drawn on `--color-accent`. #a0dce8 is the darkest of those, and neither #0670d4 (3.25) nor #0a66c2 (3.76) leaves any margin on it. This value is 6.65 there and 10.04 on white. THERE IS A SECOND RING AND THERE HAS TO BE. 3:1 against #fff needs a relative luminance at or below 0.1748; 3:1 against the header bar's #333 needs one at or above 0.1988. No colour is both, so the header -- the one surface that is near-black in BOTH themes -- takes its ring in `--color-inverse-text`, which it already had. See style.css. */ --color-focus-ring: #0b3d91; /* --- Semantics ----------------------------------------------------- `--color-descriptive` is the one that matters most here: it is the colour of the `higher_is_better: null` state, which several payloads declare on purpose and which the front end must never render as a ranking. It is a token so that "we decline to say which end is good" looks the same everywhere it is said. */ --color-danger: #8a2b2b; --color-caution: #c9a227; --color-caution-surface: #fdfaf0; --color-caution-text: #6b5a1e; --color-win: #d4edda; --color-descriptive: #888; /* A game result, in the one table that shows W/L/T/BYE inline. Named rather than 'green'/'red'/'blue'/'gray', which is what the JS said and which no theme can move. */ --color-result-win: #1e7e34; --color-result-loss: #b02a2a; --color-result-tie: #0b63c5; --color-result-bye: #6b7378; /* The missing-team-colour fallback. Also `views.py`'s literal, and the one value that has to agree across the two. */ --color-team-fallback: #808080; /* The floating tooltip, which is dark in both themes. */ --color-tooltip-surface: rgba(0, 0, 0, 0.8); --color-tooltip-text: #fff; } /* --- Dark --------------------------------------------------------------- Palette only. Nothing below changes a size, a radius, a font or a layout. Team colours are NOT here and cannot be: they arrive on the payload, one per franchise, and are the same in both themes. What makes them readable is `TeamTextColor`, computed server-side from each colour's own relative luminance (#38) -- so the cell text is black on Pittsburgh's gold and white on Baltimore's purple, in either theme, without this block knowing anything about it. */ @media (prefers-color-scheme: dark) { :root { --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.5); --color-background: #12161a; --color-surface: #1b2127; --color-surface-tint: #202832; --color-surface-muted: #262d35; --color-border: #333c45; --color-border-strong: #3f4a55; --color-text: #e6ebef; --color-text-muted: #a9b6bf; --color-text-subtle: #8b979f; --color-heading: #9dc4e8; --color-inverse-surface: #0b0f12; --color-inverse-text: #e6ebef; --color-accent: #24616f; --color-accent-hover: #2d7385; --color-accent-tint: #16242a; --color-on-accent: #e8f4f7; --color-accent-text: #8fd3e2; --color-text-on-tint: #cfe3e9; --color-primary: #4da3ff; --color-primary-hover: #7cbcff; /* 6.18 on the page, 5.67 on a card. */ --color-link: #4da3ff; --color-link-hover: #7cbcff; --color-on-primary: #0a1420; /* 4.48 on the accent hover, its worst surface; 13.53 on a card. The light ring is a deep blue and would be 1.4:1 on this palette's own cards, so the ring is one of the tokens that HAS to move. */ --color-focus-ring: #e6ebef; --color-danger: #f2a3a3; --color-caution: #c9a227; --color-caution-surface: #2b2413; --color-caution-text: #e3c766; --color-win: #1f4d33; --color-descriptive: #8b979f; --color-result-win: #5fd08a; --color-result-loss: #f28b8b; --color-result-tie: #79b8ff; --color-result-bye: #8b979f; } }