Skip to content

infra: sync site to brand guidelines v2.22 #293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raymondk wants to merge 1 commit into
base: main
Choose a base branch
from
Open

infra: sync site to brand guidelines v2.22 #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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",
Expand Down
9 changes: 4 additions & 5 deletions src/components/ThemeProvider.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
3 changes: 2 additions & 1 deletion src/components/ThemeSelect.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
14 changes: 10 additions & 4 deletions src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).
Expand Down Expand Up @@ -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);
Expand All @@ -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);

Expand Down Expand Up @@ -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,
Expand Down
Loading