/* styles/tokens.css * * THE ONLY FILE IN THIS REPO THAT MAY CONTAIN A HEX VALUE. * Enforced by scripts/check-tokens.mjs via the pre-commit hook. * * Identity is three independent attributes on : * data-palette pink | teal | inferno | merah * | inferno-teal | inferno-teal-mark | teal-inferno | teal-inferno-mark * data-structure bold | gradient * data-header A | B | C * * Theme is a fourth attribute, data-theme light | dark, and is not part of the vote: * every palette carries both. See the Light theme section below. * * After the identity vote, delete the losing blocks and hard-code the winner. * Accents map to the tagline: 1 Football, 2 Friendship, 3 Fun. * * --head is the header plane; --accent-1 is the type colour. For the four single-source * palettes they are the same value. The two mixed palettes take the plane from one * palette and the type from another, which is the only reason the two tokens are split. * The mixed palettes come in pairs. On a `-mark` palette --block-ink is the type colour * itself, which is what was asked for and measures ~1.3:1 against the plane; on its * unsuffixed twin --block-ink is the deepest tint of that colour and clears 5.9:1. * Both are on the ballot on purpose. Only the unsuffixed ones are held to the contrast * assertion in tests/tokens.test.mjs, and the exemption is named there, not implied. * * --grad-ink is optional and overrides the white header ink on Gradient, so a palette * that paints its wordmark in colour does so under both structures. Default is white. */ :root { /* The league name spelled out is always white. Every header plane is a saturated colour, so white reads on all of them, and it keeps the name separate from the mark: the mark carries the palette, the words carry the league. */ --name-ink: #FFFFFF; --rule-weak: rgba(255, 255, 255, .10); --shadow-soft: 0 1px 10px rgba(0, 0, 0, .32); --measure: 68ch; --tap: 44px; /* minimum touch target */ /* Sponsor artwork is drawn for a white page and is handed to us as-is. The plate is what makes someone else's logo legible here without us recolouring it. */ /* Pure white, not a warm off-white: several sponsor logos arrive as JPEGs with a white background baked in, and on a cream plate their edges showed as a rectangle. */ --plate: #FFFFFF; --plate-ink: #14100E; --plate-dim: #6B635C; /* Some sponsors' artwork is white. It cannot be recoloured to suit our page, so it gets a dark plate instead and the cell keeps the same size and border either way. */ --plate-dark: #16120F; --plate-dark-ink: #F4F1EC; --plate-dark-dim: #8C837A; } /* ── Club colours ───────────────────────────────────────────────────────────── A club's colours own that club's own surfaces and nothing else. The masthead, tagline, nav and footer stay league-owned on every page, so a club page still reads as part of the JIFL and no club's colours ever land on a page about another club. Guarded by tests/club-colours.test.mjs. Consumed as var(--club-1, var(--accent-1)), so a club that has sent nothing looks exactly as it did before rather than looking broken. The selector is a bare attribute, not :root[...], because data-club is set on for a club's own page and on each tile of the Clubs index. --club-1 carries text and must clear 4.5:1 on the page ground. --club-2 is a surface colour only: DO IT's measures 2.5:1 and must never be inked on. */ /* DO IT F.C. Sampled off the club's own crest rather than picked by eye: #D6B34F is the modal gold and #375270 the modal blue in images/clubs/doit/crest.png. */ [data-club="doit"] { --club-1: #D6B34F; --club-2: #375270; } /* Jakarta Vikings. Red and white, as given by the committee, and a true red (Dee, 17 Sept: "RED RED"), lifted only as far as the dark ground needs to clear 4.5:1. */ [data-club="vikings"] { --club-1: #FF3B30; --club-2: #FFFFFF; } /* 26/27 clubs, 17 Sept. Only --club-1 is set: no second colour has been agreed, and an unset --club-2 leaves the crest plate on the neutral surface. FFF: blue, named by the committee, the navy of its crest lifted to read on a dark ground. Fusion FC: the amber of its crest's swoosh, kept clear of DO IT's softer gold. German+: dark green, chosen by the committee so no two clubs share a red or a neutral. It has to lighten on the dark ground to stay readable. Jakarta Japan Club: white on dark and black on light, chosen by the committee because its crest's red would clash with Vikings. */ [data-club="bugils"] { --club-1: #6A9BF2; } [data-club="fusion"] { --club-1: #E8A11C; } [data-club="japan"] { --club-1: #F2F2F2; } [data-club="german"] { --club-1: #4FBF5F; } /* Light theme. --club-1 carries text, and every club's primary is a bright colour picked to read on a dark ground, so each one needs a deeper twin to read on a pale one. A club given colours above must be given one here too; tests/club-colours.test.mjs fails until it is. --club-2 is a surface and is left alone. Both selectors are needed: data-club sits on for a club's own page and on each tile of the Clubs index. */ :root[data-theme="light"][data-club="doit"], :root[data-theme="light"] [data-club="doit"] { --club-1: #846A1F; } :root[data-theme="light"][data-club="vikings"], :root[data-theme="light"] [data-club="vikings"] { --club-1: #D0121B; } :root[data-theme="light"][data-club="bugils"], :root[data-theme="light"] [data-club="bugils"] { --club-1: #1F4FB8; } :root[data-theme="light"][data-club="fusion"], :root[data-theme="light"] [data-club="fusion"] { --club-1: #9A5C00; } :root[data-theme="light"][data-club="japan"], :root[data-theme="light"] [data-club="japan"] { --club-1: #111111; } :root[data-theme="light"][data-club="german"], :root[data-theme="light"] [data-club="german"] { --club-1: #1E6B34; } :root[data-palette="pink"] { --head: #FF2E63; --accent-1: #FF2E63; --accent-2: #00C2A8; --accent-3: #FFD100; --ground: #12060E; --fg-1: #EDE6E9; --fg-dim: #87757E; --fg-num: #9A8A90; --rule: rgba(255, 255, 255, .10); --block-ink: #12060E; --cta-ink: #12060E; --grad: linear-gradient(168deg, #FF2E63 0%, #B01745 48%, #3A0517 100%); --grad-r: radial-gradient(125% 130% at 10% 0%, #FF2E63 0%, #B01745 44%, #2A0410 100%); } :root[data-palette="teal"] { --head: #00C2A8; --accent-1: #00C2A8; --accent-2: #FF2E63; --accent-3: #FFD100; --ground: #08150F; --fg-1: #E4EFEA; --fg-dim: #6C857B; --fg-num: #88A398; --rule: rgba(255, 255, 255, .10); --block-ink: #04120C; --cta-ink: #04120C; --grad: linear-gradient(168deg, #00C2A8 0%, #04705F 48%, #03251E 100%); --grad-r: radial-gradient(125% 130% at 10% 0%, #00C2A8 0%, #04705F 44%, #031F19 100%); } :root[data-palette="inferno"] { --head: #FF6B00; --accent-1: #FF6B00; --accent-2: #D6142E; --accent-3: #FFD9C2; --ground: #0A0406; --fg-1: #F2E8E6; --fg-dim: #90716E; --fg-num: #A08A86; --rule: rgba(255, 255, 255, .12); --block-ink: #1A0503; --cta-ink: #1A0503; --grad: linear-gradient(168deg, #FF6B00 0%, #D6142E 46%, #5A0714 100%); --grad-r: radial-gradient(125% 130% at 10% 0%, #FF6B00 0%, #D6142E 42%, #3A050E 100%); } :root[data-palette="merah"] { --head: #CE1126; --accent-1: #CE1126; --accent-2: #FFFFFF; --accent-3: #E8A9B0; --ground: #0B0708; --fg-1: #F4EFEF; --fg-dim: #887678; --fg-num: #9C8A8C; --rule: rgba(255, 255, 255, .13); --block-ink: #FFFFFF; --cta-ink: #FFFFFF; --grad: linear-gradient(168deg, #CE1126 0%, #8E0B1A 50%, #2A0407 100%); --grad-r: radial-gradient(125% 130% at 10% 0%, #CE1126 0%, #8E0B1A 44%, #1E0305 100%); } :root[data-palette="inferno-teal"] { --head: #FF6B00; --accent-1: #00C2A8; --accent-2: #FF6B00; --accent-3: #FFD9C2; --ground: #0A0406; --fg-1: #EBEFEE; --fg-dim: #807774; --fg-num: #98918D; --rule: rgba(255, 255, 255, .12); --block-ink: #04231D; --cta-ink: #1A0503; --mark-on-grad: #12070A; --grad: linear-gradient(168deg, #FF6B00 0%, #D6142E 46%, #5A0714 100%); --grad-r: radial-gradient(140% 190% at 8% -20%, #FF7A0F 0%, #FF6B00 44%, #E33A0C 73%, #A11020 100%); } :root[data-palette="inferno-teal-mark"] { --head: #FF6B00; --accent-1: #00C2A8; --accent-2: #FF6B00; --accent-3: #FFD9C2; --ground: #0A0406; --fg-1: #EBEFEE; --fg-dim: #807774; --fg-num: #98918D; --rule: rgba(255, 255, 255, .12); --block-ink: #00C2A8; --cta-ink: #1A0503; --grad-ink: #00C2A8; --grad: linear-gradient(168deg, #FF6B00 0%, #D6142E 46%, #5A0714 100%); --grad-r: radial-gradient(140% 190% at 8% -20%, #FF7A0F 0%, #FF6B00 44%, #E33A0C 73%, #A11020 100%); } :root[data-palette="teal-inferno"] { --head: #00C2A8; --accent-1: #FF6B00; --accent-2: #00C2A8; --accent-3: #FFD100; --ground: #08150F; --fg-1: #E9EDEA; --fg-dim: #74827B; --fg-num: #93A099; --rule: rgba(255, 255, 255, .10); --block-ink: #2A0F02; --cta-ink: #04120C; --grad: linear-gradient(168deg, #00C2A8 0%, #04705F 48%, #03251E 100%); --grad-r: radial-gradient(125% 130% at 10% 0%, #00C2A8 0%, #04705F 44%, #031F19 100%); } :root[data-palette="teal-inferno-mark"] { --head: #00C2A8; --accent-1: #FF6B00; --accent-2: #00C2A8; --accent-3: #FFD100; --ground: #08150F; --fg-1: #E9EDEA; --fg-dim: #74827B; --fg-num: #93A099; --rule: rgba(255, 255, 255, .10); --block-ink: #FF6B00; --cta-ink: #04120C; --grad-ink: #FF6B00; --grad: linear-gradient(168deg, #00C2A8 0%, #04705F 48%, #03251E 100%); --grad-r: radial-gradient(125% 130% at 10% 0%, #00C2A8 0%, #04705F 44%, #031F19 100%); } /* ── Light theme ────────────────────────────────────────────────────────────── data-theme on is always "light" or "dark" once scripts/theme-boot.js has run, which it does in the head before anything paints. The dark blocks above are the unconditional default, so a browser with scripts off gets the site as it always was. Only the page moves. The header plane, its gradient and the ink on it (--head, --grad, --grad-r, --block-ink, --mark-on-grad, --grad-ink) are not restated, so the masthead is the same object in both themes and the identity vote is not split in two. The accents are restated darker because on a pale ground they carry text: the stock teal measures about 2.2:1 on near-white and the pale third accents all but vanish. Anything still painted on the plane (the tagline and B's second line over a gradient, the flat stripe, the Bold mark) reads --plane-accent-N, which is the palette's own accent restated unchanged. tests/theme.test.mjs holds each one equal to its dark twin, so the copies cannot drift. The ground is the dark palette's text colour lifted towards white and the text is the dark palette's ground, so each palette keeps its tint when it inverts. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --rule-weak: rgba(0, 0, 0, .06); } :root[data-theme="light"][data-palette="pink"] { --ground: #F7F4F5; --fg-1: #12060E; --fg-dim: #7A6670; --fg-num: #67595F; --accent-1: #D60036; --accent-2: #007868; --accent-3: #7A6A1F; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #FF2E63; --plane-accent-2: #00C2A8; --plane-accent-3: #FFD100; } :root[data-theme="light"][data-palette="teal"] { --ground: #F3F8F6; --fg-1: #08150F; --fg-dim: #587168; --fg-num: #4C6259; --accent-1: #007B6A; --accent-2: #DB0038; --accent-3: #7C6C1F; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #00C2A8; --plane-accent-2: #FF2E63; --plane-accent-3: #FFD100; } /* The third accent here is a pale peach. Darkened on its own hue it lands on the same burnt orange as accent 1, so it is taken browner to stay a separate word in the tagline. */ :root[data-theme="light"][data-palette="inferno"] { --ground: #F9F5F4; --fg-1: #0A0406; --fg-dim: #846562; --fg-num: #6D5956; --accent-1: #B54C00; --accent-2: #D6142E; --accent-3: #8A5A48; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #FF6B00; --plane-accent-2: #D6142E; --plane-accent-3: #FFD9C2; } /* Merah's second accent is white, the other half of the flag. On a pale ground white is invisible, so the white role inverts to the palette's ink. */ :root[data-theme="light"][data-palette="merah"] { --ground: #FAF8F8; --fg-1: #0B0708; --fg-dim: #7D696B; --fg-num: #6B5A5C; --accent-1: #CE1126; --accent-2: #0B0708; --accent-3: #C93647; --rule: rgba(0, 0, 0, .13); --cta-ink: #FFFFFF; --plane-accent-1: #CE1126; --plane-accent-2: #FFFFFF; --plane-accent-3: #E8A9B0; } :root[data-theme="light"][data-palette="inferno-teal"] { --ground: #F6F8F7; --fg-1: #0A0406; --fg-dim: #746C69; --fg-num: #635D59; --accent-1: #007B6A; --accent-2: #B84D00; --accent-3: #8A5A48; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #00C2A8; --plane-accent-2: #FF6B00; --plane-accent-3: #FFD9C2; } :root[data-theme="light"][data-palette="inferno-teal-mark"] { --ground: #F6F8F7; --fg-1: #0A0406; --fg-dim: #746C69; --fg-num: #635D59; --accent-1: #007B6A; --accent-2: #B84D00; --accent-3: #8A5A48; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #00C2A8; --plane-accent-2: #FF6B00; --plane-accent-3: #FFD9C2; } :root[data-theme="light"][data-palette="teal-inferno"] { --ground: #F5F7F6; --fg-1: #08150F; --fg-dim: #63706A; --fg-num: #55615B; --accent-1: #B54C00; --accent-2: #007B6A; --accent-3: #7C6C1F; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #FF6B00; --plane-accent-2: #00C2A8; --plane-accent-3: #FFD100; } :root[data-theme="light"][data-palette="teal-inferno-mark"] { --ground: #F5F7F6; --fg-1: #08150F; --fg-dim: #63706A; --fg-num: #55615B; --accent-1: #B54C00; --accent-2: #007B6A; --accent-3: #7C6C1F; --rule: rgba(0, 0, 0, .12); --cta-ink: #FFFFFF; --plane-accent-1: #FF6B00; --plane-accent-2: #00C2A8; --plane-accent-3: #FFD100; } /* Structure decides how the header plane is painted, never which colours exist. */ :root[data-structure="bold"] { --header-surface: var(--head); --header-ink: var(--block-ink); --header-shadow: none; /* The mark takes the type accent on a flat plane. For the mixed palettes this is what puts teal type on an orange plane; for the single-source ones it is the same colour as the plane, so the mark reads as ink instead. */ --mark-ink: var(--plane-accent-1, var(--accent-1)); } :root[data-structure="gradient"] { /* Headers A and B take the linear gradient, C takes the radial one, matching what the identity picker draws. The two had drifted: the picker previews A and B on --grad while the site painted all three with --grad-r, so the shipped masthead read as orange where the thing people voted on read as orange into crimson. */ --header-surface: var(--grad); --header-ink: var(--grad-ink, #FFFFFF); --header-shadow: var(--shadow-soft); /* Over a gradient the mark follows grad-ink, which is white unless a palette names a colour. --mark-on-grad overrides it for the mark alone, because the mark is display type on the brightest part of the plane and the rest of the header ink is not: teal read as muddy at 88px on orange, and black clears 7:1 there where white manages 2.9. */ --mark-ink: var(--mark-on-grad, var(--grad-ink, #FFFFFF)); } :root[data-structure="gradient"][data-header="C"] { --header-surface: var(--grad-r); }