infra: sync site to brand guidelines v2.22#293
Closed
raymondk wants to merge 1 commit into
Closed
Conversation
- Theme: default to light; never auto-switch from prefers-color-scheme. Dark applies only via an explicit stored preference (ThemeProvider + ThemeSelect). - Tokens: dark CTA-bar inverse stays near-black #1a1a1a (was #ffffff) with white inverse text; dark sunk background corrected to #1f1b14. - Head: add the two brand theme-color meta tags (parchment / deep bark). - Type: drop the off-system Inter 700 face; map bold/strong to 600. - Bump CSS brand stamp to v2.22 (2026-06-15). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Member
|
@raymondk I added the skills to the repo back then:
should we update those accordingly? I think at least the brand voice should stay to be used when docs are added/updated. |
Member
|
Superseded by #316, which ships the favicon set this PR deferred and applies the theme fixes against the latest brand skill (design v2.7 / brand guide v2.26+). Note: two dark-theme token edits proposed here ( |
marc0olo
added a commit
that referenced
this pull request
Jul 17, 2026
## Summary Supersedes #293. Brings the docs site in line with the ICP/DFINITY brand guide favicon spec (design skill v2.7 / brand guide v2.26+, verified live at `v2.27`) and finishes the theme correctness work #293 started, dropping the two token edits in #293 that contradicted the canonical `tokens.css`. ### Favicon (the piece #293 deferred) - Ship the full brand favicon set: `favicon.svg` (gradient-infinity vector on a transparent canvas), multi-size `favicon.ico`, PNG rasters (16/32/48/192/512), Apple touch icon (light + dark), and a `safari-pinned-tab.svg` mask. Replaces the old base64-PNG-wrapped-in-SVG placeholder. - Wire the head tags per §6.5: `.ico` alternate, PNG rasters, `apple-touch-icon`, and `mask-icon` with rust `#a8482b`. Starlight continues to emit the primary SVG. ### Theme correctness - Stop auto-switching on `prefers-color-scheme` in both `ThemeProvider.astro` (FOUC guard) and `ThemeSelect.astro`. Light is the deliberate default; dark applies only on an explicit stored choice. - Add a `theme-color` meta (`#faf9f5`) and sync it to the dark bark value (`#14110d`) when the user opts into dark, so the browser chrome matches the applied theme rather than the OS preference. ### Type system - Drop the off-system Inter 700 face (the system is Inter 400/500/600) and map bold prose to Inter 600 so emphasized text renders a real loaded weight. ### Intentionally NOT carried over from #293 Two dark-theme token edits in #293 contradict the canonical `tokens.css` (the skill's declared source of truth), and the site already matches the canonical values, so they are dropped: - `--icp-bg-cta-inverse` stays `#ffffff` in dark (#293 set `#1a1a1a`) - `--icp-bg-sunk` stays `#1b1812` in dark (#293 set `#1f1b14`) No component consumes `--icp-bg-cta-inverse` today, so there is no visual impact either way. ## Verified - `npm run build` passes. - Built HTML contains all favicon link tags and the `theme-color` meta. - `public/favicon.svg` is the vector mark (no base64); no Inter 700 in the bundle.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings the docs site in line with the ICP/DFINITY brand guidelines v2.22 (2026-06-15). The CSS was stamped v2.2 (2026-05-08) and a few things had drifted or were never finished.
Correctness
ThemeProvider.astro(FOUC-guard inline script) andThemeSelect.astro(loadTheme), which both previously fell back toprefers-color-scheme: dark. The guidelines are explicit: light default, dark opt-in only, never auto.theme-colormeta tags added per the brand head template:#faf9f5(light) and#14110d(dark).Token / config polish
#1a1a1a(was#ffffff), with white inverse text, matching "CTA bar always near-black in both themes." (No component consumes these tokens yet, so no visual change today; this makes the pair correct for the first CTA bar that lands.)#1b1812->#1f1b14(sunk bark).bold/strongnow map to 600 so emphasized prose renders a real loaded weight.Still needs the design source (not in this PR)
The favicon is currently a base64 PNG wrapped in an SVG. The guidelines require a gradient-infinity vector on a transparent canvas plus raster sizes (16/32/48/192/512), an
apple-touch-icon(+ dark variant), and asafari-pinned-tab.svgmask icon. These need the actual brand vector asset before the corresponding<link>head tags can be wired up without 404s.Verified
npm run buildpasses; boththeme-colortags confirmed in built HTML.inter/700reference.