/* KeyParts — design tokens. * * The one place the values live. The panel is injected into YouTube's page * and the website is a page of our own, so the same names have to reach * two very different roots - hence the selector list rather than :root. * * `:root.keyparts-page` cannot match a YouTube document: that class is put * on by pages we serve. `.sumitup` is the panel's own element. So * nothing is defined on a root we do not own, and nothing leaks. * * Values only. @font-face belongs to each surface, because a font url * depends on where the files sit, which is a deployment question rather * than a design one. What is shared is which families to ask for. */ :where(:root.keyparts-page, .sumitup) { /* Three ink values, and nothing between them. Primary for what you read, secondary for context, tertiary for labels. The first two are YouTube's own text greys, so the panel agrees with the column it sits in; the third is ours. */ /* The page's own ground. The panel has none - its ground is whatever YouTube is painting - so this is used only by the site. */ --page: #ffffff; --ink: #0f0f0f; --ink-2: #5e5e5e; /* Tertiary was #909090, which is 3.19:1 on white - under AA, and it carries every label on the site plus the line that says the screenshot is real. It is not one of YouTube's greys either; --ink-2 is the pair that matches YouTube. So it moves to where it passes. */ --ink-3: #757575; /* Three rule weights doing three jobs, which is the whole structure: a heavy one under the masthead, a middle one between movements, a faint one between rows. One weight everywhere is how a rule-built layout ends up with no hierarchy at all. */ --rule-hard: rgba(0, 0, 0, 0.5); --rule: rgba(0, 0, 0, 0.2); --rule-soft: rgba(0, 0, 0, 0.1); /* The bar's ground. Dark enough that the gaps between sections are a division and not an 8% rumour. */ --tint: rgba(0, 0, 0, 0.16); /* The same ground at the scale of a page. The panel's bar is 8px in a dense module and can be quiet; the site's is the first graphic a reader meets, and it spends most of its loop half printed - at 0.16 the unprinted half measured 1.07:1, which is not faint, it is gone. */ --tint-2: rgba(0, 0, 0, 0.26); /* The only hue in the file, and it means exactly one thing: this is a moment worth watching. Never state, never hover, never emphasis, and never decoration - it was on three hover rules and on the whole of the logo, thirty lines from this sentence. The mark keeps one part of it, because one part of the mark is the part worth watching. */ --accent: #d8410d; --on-ink: #ffffff; --sans: 'KeyParts Sans', system-ui, 'Segoe UI', Roboto, sans-serif; --mono: 'KeyParts Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Every vertical gap comes from this scale. Nothing else. Movements are separated by s4, items inside one by s1 - the difference has to be obvious or the page reads as a single stack. */ --s1: 6px; --s2: 12px; --s3: 20px; --s4: 28px; /* Three more for a page. The first four were sized for a 402px module and a page needs to separate movements, not rows - without these the site quietly hand-set sixteen values and this comment was a lie. */ --s5: 40px; --s6: 56px; --s7: 76px; /* Two edges in the whole panel and no more: the panel's own, where the summary and the hanging time column start, and the content edge where every title and every description begins. There used to be four, in a layout whose only structural vocabulary is alignment. */ --timecode: 56px; --fw: 2px; } /* The mark on a tile stands outside both roots above: it is placed in YouTube's own metadata row, where nothing of ours is in scope. Without this, fill="var(--accent)" is an invalid value and SVG falls back to black, which is how the accent block went missing and the mark read as two grey bars. Its ink is whatever ink the row is set in, so the mark agrees with the text it stands beside; only the accent is ours, and it needs the pair, because that row is white on YouTube's light theme and near-black on its dark one. */ .sumitup-tile-mark { --ink: currentColor; --accent: #d8410d; } html[dark] .sumitup-tile-mark { --accent: #f2603a; } /* Dark is its own set of values, not an inversion of the light one. Inverting put an identical accent on near-black, where it lost its bite, and dropped the rules to the point where the structure disappeared - and the structure is all there is here. It follows YouTube's own attribute and nothing else. `prefers-color-scheme` used to be honoured as well, which was wrong on the one combination that matters: OS dark plus YouTube light put a dark panel on a white page. YouTube sets `dark` on whenever its theme is dark, including when that theme is following the OS. The options page has no YouTube to ask, hence the second selector. */ html[dark] .sumitup, :root.keyparts-page[data-theme='dark'] { --page: #0f0f0f; --ink: #f1f1f1; --ink-2: #a8a8a8; --ink-3: #808080; --rule-hard: rgba(255, 255, 255, 0.46); --rule: rgba(255, 255, 255, 0.26); --rule-soft: rgba(255, 255, 255, 0.15); --tint: rgba(255, 255, 255, 0.18); --tint-2: rgba(255, 255, 255, 0.26); --accent: #f2603a; --on-ink: #0f0f0f; } /* The site has no host to ask, so it asks the reader's system. Scoped to our own pages, so this can never reach a YouTube document. */ @media (prefers-color-scheme: dark) { :root.keyparts-page:not([data-theme='light']) { --page: #0f0f0f; --ink: #f1f1f1; --ink-2: #a8a8a8; --ink-3: #808080; --rule-hard: rgba(255, 255, 255, 0.46); --rule: rgba(255, 255, 255, 0.26); --rule-soft: rgba(255, 255, 255, 0.15); --tint: rgba(255, 255, 255, 0.18); --tint-2: rgba(255, 255, 255, 0.26); --accent: #f2603a; --on-ink: #0f0f0f; } }