diff --git a/.okf/design/site-palette.md b/.okf/design/site-palette.md index 052b68177..3749bf556 100644 --- a/.okf/design/site-palette.md +++ b/.okf/design/site-palette.md @@ -7,7 +7,7 @@ tags: [design, palette, css, tokens, adr] generated: by: claude/opus-5 at: 2026-08-20T00:00:00Z -timestamp: 2026-08-21T00:44:07Z +timestamp: 2026-08-21T02:05:49Z --- # Resolved: LIGHT (ADR-0003, 2026-08-20) @@ -104,21 +104,25 @@ var(--color-primary) */`); a grep that counts them reads as if the token survived. Grep for `var(--color-primary` with the opening paren and read the hits before concluding a token is still live. -## The `--rr-*` aliases die next, in 1a.4 — verify by grep, never by list - -Phase 1a.1 promoted the Rescue Room tokens into -`foundations/css-variables.css:110-116` as `--rr-*` aliases marked -DELETE-in-1a.4. They are consumed in three files as of 2026-08-21: -`pages/blog-list.css`, `single-post.css`, and `pages/blog-single.css`. - -**Do not delete the alias block against a written inventory.** A spec's list -of consumers was wrong twice in one review (2026-08-21): it omitted a live -line and named a file carrying zero references. `single-post.css` is the one -that makes this dangerous — its `--rr-*` declarations set CTA and tag colour -and background, and that file is a member of the COURSE bundle too, so -deleting the aliases early breaks styling on blog AND course. Re-run -`grep -rn 'var(--rr-' themes/beaver/assets/css/` at the moment of deletion and -believe the output, not the doc. +## The `--rr-*` aliases are GONE (deleted in 1a.4, 2026-08-21) + +Phase 1a.1 promoted the Rescue Room tokens as `--rr-*` aliases marked +DELETE-in-1a.4. All 18 consumer references across `pages/blog-list.css`, +`single-post.css` and `pages/blog-single.css` were migrated to the canonical +names and the alias block was removed from `foundations/css-variables.css`. +Zero visual delta - each alias was `--rr-X: var(--X)`, an exact 1:1 +indirection, so removing the hop cannot change a computed value; the suite +agreed at 53 screenshots compared, no failures. + +**The method is the part worth keeping.** The precondition was re-grepped at +the moment of deletion rather than read from a doc - `grep -rn 'var(--rr-' +themes/beaver/assets/css/` returned 18, then 0, and only then was the block +removed. That mattered: a written inventory of these same consumers was wrong +TWICE in one review, omitting a live line and naming a file with zero +references. `single-post.css` belongs to the COURSE bundle as well as the +blog, so deleting on the strength of that inventory would have broken styling +on both. **Verify a deletion precondition by running the check, never by +reading a list of what the check returned last time.** **It is the logo's colour, and that is the point, not a reason to keep it.** `themes/beaver/assets/img/icons/logo-dark.svg` contains exactly one hex value: diff --git a/.okf/log.md b/.okf/log.md index aec2533df..b33dc88a4 100644 --- a/.okf/log.md +++ b/.okf/log.md @@ -28,6 +28,32 @@ make it green: restructure same-day entries under one heading, and add `timestamp` to the 23 concepts missing it (anchored to each file's last commit time, which is verifiable - never invented). +## 2026-08-21 - the --rr-* aliases are gone; 1a.4's other half is blocked + +**Done:** all 18 `--rr-*` consumer references migrated to canonical names and +the alias block deleted from `foundations/css-variables.css`. Zero visual delta +by construction - each alias was `--rr-X: var(--X)`, an exact 1:1 indirection - +and the suite agreed at 53 screenshots compared, no failures. +`design/site-palette.md` updated from "die next" to gone. + +The method is the durable part: the precondition was re-grepped AT THE MOMENT +of deletion (18 -> 0), not read from a doc. A written inventory of those same +consumers had been wrong twice in one review, and `single-post.css` belongs to +the COURSE bundle as well as the blog, so deleting on the doc's word would have +broken both. **Verify a deletion precondition by running the check, never by +reading what the check returned last time.** + +**Blocked, and re-scoped:** "footer onto surface-ink" is not a footer change. +Moving it leaves every adjacent dark surface at pure black - measured seams on +homepage and services. Migrating the shape-layer dividers closes those and OPENS +internal ones (`.home-proof` divider vs `.home-services` section). Dividers and +the dark sections they abut have to move together, across 7+ page bundles - +Phase 1b in size. All visual changes were reverted rather than shipping a seam. + +Still unidentified: a painter on `/services/` that `elementFromPoint` and a +geometric scan of every element both miss, reporting white against a rendered +black pixel. See [architecture/css-pipeline.md](architecture/css-pipeline.md). + ## 2026-08-21 - the footer moved and twelve invisible shape layers came with it Phase 1a.4 step 1 was a 5-line footer change. It exposed a black band above the diff --git a/themes/beaver/assets/css/foundations/css-variables.css b/themes/beaver/assets/css/foundations/css-variables.css index c8d20aa51..abe916d7f 100644 --- a/themes/beaver/assets/css/foundations/css-variables.css +++ b/themes/beaver/assets/css/foundations/css-variables.css @@ -105,13 +105,4 @@ --link-hover: var(--ruby-700); --link-visited: var(--ink-700); --link-underline: var(--color-ruby); - - /* Aliases: the blog shipped against these names. Kept so 1a.1 renders - identically; DELETE in 1a.4 once the three page files consume the - canonical names. */ - --rr-ink-900: var(--ink-900); - --rr-ink-700: var(--ink-700); - --rr-ink-500: var(--ink-500); - --rr-line: var(--line); - --rr-surface-raised: var(--surface-raised); } diff --git a/themes/beaver/assets/css/pages/blog-list.css b/themes/beaver/assets/css/pages/blog-list.css index 36be2b88e..0acc0fc5c 100644 --- a/themes/beaver/assets/css/pages/blog-list.css +++ b/themes/beaver/assets/css/pages/blog-list.css @@ -24,7 +24,7 @@ .blog-index .blog-lead { max-width: 62ch; - color: var(--rr-ink-500); + color: var(--ink-500); } /* Pagination: the bare "Next" rendered orphaned bottom-left under a @@ -74,8 +74,8 @@ letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; - color: var(--rr-ink-500); - background: var(--rr-surface-raised); + color: var(--ink-500); + background: var(--surface-raised); border-radius: 999px; padding: 5px 12px; } @@ -95,7 +95,7 @@ grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; - background: var(--rr-surface-raised); + background: var(--surface-raised); border-radius: 16px; padding: 36px; margin-bottom: 40px; @@ -119,7 +119,7 @@ .post-feature .post-description { font-size: 1em; - color: var(--rr-ink-700); + color: var(--ink-700); } .post-feature .post-image { @@ -137,7 +137,7 @@ align-items: flex-start; padding: 28px 0; margin-bottom: 0; - border-bottom: 1px solid var(--rr-line); + border-bottom: 1px solid var(--line); } .post-image { @@ -182,7 +182,7 @@ .post-meta { margin-top: 10px; font-size: 0.9em; - color: var(--rr-ink-500); + color: var(--ink-500); } .post-meta .post-tags, @@ -193,14 +193,14 @@ .post-description { font-size: 0.85em; line-height: 1.5; - color: var(--rr-ink-500); + color: var(--ink-500); margin-top: 6px; max-width: 68ch; } /* Card tags: ink, ruby on hover (see the !important note above) */ .blog .post-tags-card a { - color: var(--rr-ink-500); + color: var(--ink-500); } .blog .post-tags-card a:hover { diff --git a/themes/beaver/assets/css/pages/blog-single.css b/themes/beaver/assets/css/pages/blog-single.css index b332d11df..b40f48438 100644 --- a/themes/beaver/assets/css/pages/blog-single.css +++ b/themes/beaver/assets/css/pages/blog-single.css @@ -62,7 +62,7 @@ font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; - color: var(--rr-ink-500); + color: var(--ink-500); margin-bottom: 10px; } @@ -70,7 +70,7 @@ .post-article .post-lead { font-size: 1.15rem; line-height: 1.6; - color: var(--rr-ink-500); + color: var(--ink-500); margin: 0.25rem auto 0.75rem; } @@ -85,7 +85,7 @@ !important beats the inline background Chroma emits with noClasses. */ .post-article .highlight pre, .post-article .post-prose > pre { - background-color: var(--rr-ink-900) !important; + background-color: var(--ink-900) !important; } .post-article .highlight { diff --git a/themes/beaver/assets/css/single-post.css b/themes/beaver/assets/css/single-post.css index 1df388d7d..38effee7b 100644 --- a/themes/beaver/assets/css/single-post.css +++ b/themes/beaver/assets/css/single-post.css @@ -431,7 +431,7 @@ (after tags). Rendered by partials/blog/cta-band.html. */ .blog-cta { text-align: center; - background: var(--rr-surface-raised); + background: var(--surface-raised); border-radius: 16px; padding: 40px 24px; margin: 48px 0 8px; @@ -445,12 +445,12 @@ line-height: 1.3; letter-spacing: normal; margin: 0 0 8px !important; - color: var(--rr-ink-900); + color: var(--ink-900); } .blog-cta p { font-size: 0.9em; - color: var(--rr-ink-500); + color: var(--ink-500); max-width: 46ch; margin: 0 auto 20px; } @@ -471,12 +471,12 @@ .blog-cta .blog-cta-note { font-size: 0.8em; - color: var(--rr-ink-500); + color: var(--ink-500); margin: 14px auto 0; } .blog-cta .blog-cta-note a { - color: var(--rr-ink-900); + color: var(--ink-900); } @@ -488,7 +488,7 @@ used to be needed here died with the a:not(...)x8 anchor rule in 2608 Phase 1a.3. */ .blog .post-tags a { - color: var(--rr-ink-500); + color: var(--ink-500); } .blog .post-tags a:hover {