diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index c642bf01..fbc9c1bb 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -1,13 +1,21 @@ +/* One red. The brand has a single red — the circle in the mark, #d03c4a — + * and every brand token below is that one value, the hover tokens included. + * There used to be a second, darker red (#a83232) for the hover state of + * links and buttons; next to the mark it read as a second brand colour, and + * the page that documents the palette (resources/logo.md) had to list two + * reds to stay honest. A link already answers "is this one a link" with the + * underline it gains on hover (see `.vp-doc a:hover` below), so the shade + * bought nothing the underline does not. */ :root { --vp-home-hero-name-color: #d03c4a; --vp-c-brand-1: #d03c4a; - --vp-c-brand-2: #a83232; + --vp-c-brand-2: #d03c4a; --vp-c-brand-3: #d03c4a; --vp-button-brand-bg: #d03c4a; --vp-button-brand-border: #d03c4a; --vp-button-brand-text: #ffffff; - --vp-button-brand-bg-hover: #a83232; - --vp-button-brand-border-hover: #a83232; + --vp-button-brand-bg-hover: #d03c4a; + --vp-button-brand-border-hover: #d03c4a; } /* ============================================================ the type === @@ -49,10 +57,13 @@ * `--vp-c-brand-1` on white measures 4.74:1, which clears AA for body text * — but only just, and in DARK it is 3.62:1 against `#1b1b1f`, which fails. * So the dark theme lightens it rather than inheriting it; the value below - * is the same hue at 5.76:1. That is the whole reason this is a token pair - * and not one `var(--vp-c-brand-1)`. */ + * is the same hue at 5.76:1. That is the whole reason this is a token + * and not `var(--vp-c-brand-1)` written out at each use. + * + * The hover colour is the link colour: one red, and the underline a link + * gains on hover carries the hover state (see `.vp-doc a:hover`). */ --a2ui5-c-link: var(--vp-c-brand-1); - --a2ui5-c-link-hover: var(--vp-c-brand-2); + --a2ui5-c-link-hover: var(--a2ui5-c-link); /* The one-pixel edge on code blocks, tables and the Run bar. */ --a2ui5-c-hairline: #d1d9e0; @@ -83,7 +94,7 @@ /* 5.76:1 on the dark ground, where the brand red itself manages 3.62 and * fails AA. Same hue, lifted until it reads. */ --a2ui5-c-link: #e8707c; - --a2ui5-c-link-hover: #f0949c; + --a2ui5-c-link-hover: var(--a2ui5-c-link); --a2ui5-c-hairline: #3d444d; --a2ui5-c-surface: #161b22; } diff --git a/docs/public/mascots/dinosaur_brand.png b/docs/public/mascots/dinosaur_brand.png index bef171db..7b3acb48 100644 Binary files a/docs/public/mascots/dinosaur_brand.png and b/docs/public/mascots/dinosaur_brand.png differ diff --git a/docs/public/mascots/dinosaur_brand_white_back.png b/docs/public/mascots/dinosaur_brand_white_back.png index 96d0cc83..779aac6f 100644 Binary files a/docs/public/mascots/dinosaur_brand_white_back.png and b/docs/public/mascots/dinosaur_brand_white_back.png differ diff --git a/docs/public/mascots/sheep_brand.png b/docs/public/mascots/sheep_brand.png index 8b50a261..dbbefdb4 100644 Binary files a/docs/public/mascots/sheep_brand.png and b/docs/public/mascots/sheep_brand.png differ diff --git a/docs/public/mascots/sheep_brand_white_back.png b/docs/public/mascots/sheep_brand_white_back.png index eb43e8da..043b424e 100644 Binary files a/docs/public/mascots/sheep_brand_white_back.png and b/docs/public/mascots/sheep_brand_white_back.png differ diff --git a/docs/public/mascots/sloth_brand.png b/docs/public/mascots/sloth_brand.png index 8ada686b..9ea902d1 100644 Binary files a/docs/public/mascots/sloth_brand.png and b/docs/public/mascots/sloth_brand.png differ diff --git a/docs/public/mascots/sloth_brand_white_back.png b/docs/public/mascots/sloth_brand_white_back.png index db52bb43..83162e4f 100644 Binary files a/docs/public/mascots/sloth_brand_white_back.png and b/docs/public/mascots/sloth_brand_white_back.png differ diff --git a/docs/resources/logo.md b/docs/resources/logo.md index 437dcd73..606fa438 100644 --- a/docs/resources/logo.md +++ b/docs/resources/logo.md @@ -105,12 +105,13 @@ Each animal comes in three files, the same way the mark does: a transparent PNG to use, a copy on white for the places that cannot handle transparency, and the artwork as it was drawn. -Every animal arrived on a red of its own — `#C12E2B`, `#AB2319` and, under the -JPEG noise, roughly `#F5021B` — three reds that are each almost, but not quite, -the red of the mark. The brand copies are shifted onto `#D03C4A`, so a mascot -next to the logo is the same red as the logo. Only the red ink moved, in -proportion to how much of it a pixel carries: outlines, shading and the sloth's -cream fur are untouched. +Every animal arrived on a red of its own — `#C12E2B`, `#A62219` and, under the +JPEG noise, roughly `#F5011D` — three reds that are each almost, but not quite, +the red of the mark. The brand copies move that red onto `#D03C4A`: the flat +fill of each drawing lands on it exactly, so a mascot next to the logo is the +same red as the logo. Only the red ink moved, in proportion to how much of it a +pixel carries — shading and highlights become darker and lighter shades of that +one red, and the outlines and the sloth's cream fur are untouched. The transparent copies are cut out along the drawing, not along its white. The white behind the sheep and the white of its wool are the same white, so the @@ -134,7 +135,7 @@ description of how a framework like this comes about. | Use | [`sloth_brand.png`](/mascots/sloth_brand.png) — 400 × 400, PNG, transparent | | On white | [`sloth_brand_white_back.png`](/mascots/sloth_brand_white_back.png) | | As drawn | [`sloth.jpg`](/mascots/sloth.jpg) — a JPEG, so it carries compression artefacts along the outline; the copies above are PNGs and add none of their own | -| Red | ≈ `#F5021B` → `#D03C4A` | +| Red | ≈ `#F5011D` → `#D03C4A` | ### Dinosaur @@ -164,7 +165,7 @@ works. | Use | [`sheep_brand.png`](/mascots/sheep_brand.png) — 400 × 400, PNG, transparent | | On white | [`sheep_brand_white_back.png`](/mascots/sheep_brand_white_back.png) | | As drawn | [`sheep.png`](/mascots/sheep.png) | -| Red | `#AB2319` → `#D03C4A` | +| Red | `#A62219` → `#D03C4A` | What is white inside an animal stays white — the wool, the screen, the keys. On a dark background that white is what you see, because it is part of the @@ -172,14 +173,13 @@ drawing and not the surface behind it. ## Colours -Two reds and white. The mark, and every mascot above, uses the first red and -white only; the second red exists for interface states, where the first one has -to darken under a cursor. +One red and white. The mark, every mascot above and this site use that red +and nothing else. There is no second shade for interface states: a link under +a cursor gains an underline, not a darker red, and a button keeps its colour. | | Hex | Where | | --- | --- | --- | -| Red | `#D03C4A` | the circle in the mark, and `--vp-c-brand-1` — links, buttons, the hero name | -| Dark red | `#A83232` | `--vp-c-brand-2` — the hover state of the above, nothing in the mark | +| Red | `#D03C4A` | the circle in the mark, the red ink of the mascots, and every brand token of this site — links, buttons, the hero name, and their hover states | | White | `#FFFFFF` | the wordmark knocked out of the circle | The site's own tokens are set in `docs/.vitepress/theme/style.css`. Take the hex