From 75f956753ab2802c37717e1fec79889da7099f54 Mon Sep 17 00:00:00 2001
From: Raymond Khalife <raymond.khalife@dfinity.org>
Date: Sun, 14 Jun 2026 21:36:41 -0400
Subject: [PATCH] infra: sync site to brand guidelines v2.22

- 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>
---
 astro.config.mjs                   | 10 +++++++++-
 src/components/ThemeProvider.astro |  9 ++++-----
 src/components/ThemeSelect.astro   |  3 ++-
 src/styles/custom.css              | 14 ++++++++++----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 3d9a7f84..77db8483 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -56,6 +56,15 @@ export default defineConfig({
           tag: "meta",
           attrs: { name: "robots", content: "index, follow, max-image-preview:large" },
         },
+        // Brand v2.22 head template: parchment chrome in light, deep bark in dark.
+        {
+          tag: "meta",
+          attrs: { name: "theme-color", content: "#faf9f5", media: "(prefers-color-scheme: light)" },
+        },
+        {
+          tag: "meta",
+          attrs: { name: "theme-color", content: "#14110d", media: "(prefers-color-scheme: dark)" },
+        },
         {
           tag: "meta",
           attrs: { name: "author", content: PUBLISHER },
@@ -116,7 +125,6 @@ export default defineConfig({
         "@fontsource/inter/400.css",
         "@fontsource/inter/500.css",
         "@fontsource/inter/600.css",
-        "@fontsource/inter/700.css",
         "@fontsource/newsreader/400.css",
         "@fontsource/newsreader/400-italic.css",
         "@fontsource/newsreader/500.css",
diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
index 7fddc1ae..fe0a64cb 100644
--- a/src/components/ThemeProvider.astro
+++ b/src/components/ThemeProvider.astro
@@ -1,16 +1,15 @@
 ---
 ---
 
-{/* Inlined to avoid FOUC. Defaults to system prefers-color-scheme; overridden by stored user preference. */}
+{/* Inlined to avoid FOUC. Light is the default; dark applies only via an explicit stored user preference, never auto from prefers-color-scheme (brand v2.22). */}
 <script is:inline>
 	window.StarlightThemeProvider = (() => {
 		const storedTheme =
 			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
-		const prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-		const theme = storedTheme || prefersTheme;
-		document.documentElement.dataset.theme = theme === 'dark' ? 'dark' : 'light';
+		const theme = storedTheme === 'dark' ? 'dark' : 'light';
+		document.documentElement.dataset.theme = theme;
 		return {
-			updatePickers(theme = storedTheme || 'auto') {
+			updatePickers(theme = storedTheme || 'light') {
 				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
 					const select = picker.querySelector('select');
 					if (select) select.value = theme;
diff --git a/src/components/ThemeSelect.astro b/src/components/ThemeSelect.astro
index db1d4516..5ab54e2e 100644
--- a/src/components/ThemeSelect.astro
+++ b/src/components/ThemeSelect.astro
@@ -26,7 +26,8 @@
 	const loadTheme = (): Theme => {
 		const stored = typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : null;
 		if (stored === 'dark' || stored === 'light') return stored;
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		// Brand v2.22: light is the default; never auto-switch from prefers-color-scheme.
+		return 'light';
 	};
 
 	function storeTheme(theme: Theme): void {
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 4dcc35cf..fa315cc2 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -1,7 +1,7 @@
 /*
  * ICP Developer Docs — Custom Theme
  *
- * Brand: ICP / DFINITY v2.2 (2026-05-08)
+ * Brand: ICP / DFINITY v2.22 (2026-06-15)
  * Light editorial parchment is the default theme.
  * Dark mode is opt-in via data-theme="dark" on <html> — never auto from prefers-color-scheme.
  * Three-face type system: Newsreader (editorial), Inter (UI chrome), JetBrains Mono (technical).
@@ -119,9 +119,9 @@
 :root[data-theme='dark'] {
   /* Backgrounds */
   --icp-bg:             #14110d;
-  --icp-bg-sunk:        #1b1812;
+  --icp-bg-sunk:        #1f1b14;   /* sunk bark */
   --icp-bg-elev:        #1b1812;
-  --icp-bg-cta-inverse: #ffffff;
+  --icp-bg-cta-inverse: #1a1a1a;   /* CTA bar stays near-black in both themes */
   --icp-bg-card:        #1b1812;
 
   --icp-grid-line: rgba(240, 235, 224, 0.05);
@@ -132,7 +132,7 @@
   --icp-fg-secondary: #a29a8d;
   --icp-fg-muted:     #7a7367;
   --icp-fg-disabled:  #4a453d;
-  --icp-fg-inverse:   #1a1a1a;
+  --icp-fg-inverse:   #ffffff;   /* text on the near-black CTA bar */
 
   --icp-muted: var(--icp-fg-muted);
 
@@ -199,6 +199,12 @@ h1, h2, h3, h4, h5, h6 {
   letter-spacing: -0.01em;
 }
 
+/* Inter tops out at 600 in the three-face system (no 700). Map bold/strong to
+   the heaviest loaded weight so emphasized prose renders a real face, not synthetic bold. */
+strong, b {
+  font-weight: 600;
+}
+
 /* JetBrains Mono for code and technical readouts */
 code, pre, kbd, samp,
 .sl-markdown-content code,