From 0018eff96a8b6bc1a56e5624b07cece182c4bf3f Mon Sep 17 00:00:00 2001 From: El-Limon Date: Mon, 31 Aug 2026 12:15:27 +0200 Subject: [PATCH 1/2] update(config): adopt bridge-free brand and add a light mode Aligns the docs with the marketing site's design system and the bridge-free portal-A logo (gettakaro/website#23). Branding: - Swap the navbar mark and add a footer wordmark, using the SVGs from the print pack (identical to the ones website#23 shipped). - Mirror the site's tokens from gettakaro/website src/styles/global.css (#080808 / #151515 / #222222 / #C2C2C2 / #B8ADFF) instead of the purple-tinted neutrals used previously, and load Inter for headings to match. Local token names mirror the site's to keep the two easy to diff. Fixes along the way: - The primary colour had been changed to the brand purple but its six shade variants were still Docusaurus's default teal, so hover and active states rendered green. - Dark-mode neutrals were scoped to :root, which loses to Infima's html[data-theme='dark']; they never applied. Now scoped to match. Light mode: - Enable the colour-mode toggle (dark stays the default, and prefers-color-scheme is now respected for first-time visitors). - The site has no light palette to mirror, so one is derived here. The dark palette cannot be reused: its link (#B8ADFF) and body text (#C2C2C2) fall to 2.01:1 and 1.78:1 on white. Light mode therefore links in the brand purple itself, which passes at 5.59:1. - Add a light wordmark variant, since the letterforms are hardcoded white and would otherwise disappear on a light footer. Both palettes pass WCAG AA on every text pair. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01GLALF6cpN7LJQtdLsskzZp --- docusaurus.config.ts | 27 ++++- src/css/custom.css | 153 ++++++++++++++++++++++++--- static/img/takaro-portal-a.svg | 6 ++ static/img/takaro-wordmark-light.svg | 16 +++ static/img/takaro-wordmark.svg | 16 +++ 5 files changed, 198 insertions(+), 20 deletions(-) create mode 100644 static/img/takaro-portal-a.svg create mode 100644 static/img/takaro-wordmark-light.svg create mode 100644 static/img/takaro-wordmark.svg diff --git a/docusaurus.config.ts b/docusaurus.config.ts index edfc139..5b35834 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -44,6 +44,16 @@ const config: Config = { scripts: [{ src: 'https://plausible.io/js/script.js', defer: true, 'data-domain': 'takaro.io' }], headTags: [ + // Inter for headings, matching the marketing site (gettakaro/website). + { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } }, + { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' } }, + { + tagName: 'link', + attributes: { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap', + }, + }, { tagName: 'script', attributes: {}, @@ -58,15 +68,15 @@ const config: Config = { themeConfig: { colorMode: { defaultMode: 'dark', - disableSwitch: true, - respectPrefersColorScheme: false, + disableSwitch: false, + respectPrefersColorScheme: true, }, navbar: { - title: 'Takaro Documentation', + title: 'Documentation', logo: { - alt: 'Takaro Logo', - src: 'img/takaro.png', + alt: 'Takaro', + src: 'img/takaro-portal-a.svg', }, items: [ { @@ -88,6 +98,13 @@ const config: Config = { }, footer: { style: 'dark', + logo: { + alt: 'Takaro', + // Letterforms flip per theme; the portal-As stay brand purple in both. + src: 'img/takaro-wordmark-light.svg', + srcDark: 'img/takaro-wordmark.svg', + href: 'https://takaro.io', + }, links: [ { title: 'Community', diff --git a/src/css/custom.css b/src/css/custom.css index 9cc1009..25666c1 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -4,21 +4,144 @@ * work well for content-centric websites. */ -/* You can override the default Infima variables here. */ +/** + * Takaro brand tokens, mirroring the marketing site's design system. + * Source of truth: gettakaro/website — src/styles/global.css + * Logo: bridge-free portal-A (gettakaro/website PR #23). + * + * Names below match the site's token names so the two stay easy to diff. + */ :root { - --ifm-color-primary: #664DE5; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --takaro-bg: #080808; + --takaro-bg-card: #151515; + --takaro-bg-card-hover: #1a1a1a; + --takaro-border: #222222; + --takaro-text: #ffffff; + --takaro-text-base: #c2c2c2; + --takaro-text-muted: #818181; + --takaro-accent: #664de5; + --takaro-accent-hover: #7a5ef0; + --takaro-link: #b8adff; + --takaro-link-hover: #d0c9ff; + --takaro-font-heading: 'Inter', sans-serif; + + --ifm-color-primary: var(--takaro-accent); + --ifm-color-primary-dark: #5138e2; + --ifm-color-primary-darker: #472dda; + --ifm-color-primary-darkest: #3b25b6; + --ifm-color-primary-light: var(--takaro-accent-hover); + --ifm-color-primary-lighter: #8674eb; + --ifm-color-primary-lightest: var(--takaro-link); + + --ifm-heading-font-family: var(--takaro-font-heading); + --docusaurus-highlighted-code-line-bg: rgba(102, 77, 229, 0.28); +} + +/** + * Light mode. + * + * The marketing site is dark-only, so there is no upstream light palette to + * mirror; these are derived here. Two constraints shaped them: + * 1. The dark palette cannot be reused — its link (#B8ADFF, 2.01:1) and body + * text (#C2C2C2, 1.78:1) are unreadable on white. Light mode therefore + * links in the brand purple itself, which clears AA at 5.59:1. + * 2. Surfaces are tinted with the print pack's supporting grey (#D2CFDC) + * rather than plain grey, keeping the purple cast the brand has in dark. + */ +html[data-theme='light'] { + --ifm-background-color: #ffffff; + --ifm-background-surface-color: #f7f6fa; + --ifm-heading-color: #14121c; + --ifm-font-color-base: #3a3646; + --ifm-navbar-background-color: #ffffff; + --ifm-navbar-shadow: 0 1px 0 #e6e3ee; + --ifm-toc-border-color: #e6e3ee; + --ifm-hr-border-color: #e6e3ee; + --ifm-code-background: rgba(102, 77, 229, 0.09); + + /* The accent doubles as the link colour here; #B8ADFF is dark-mode only. */ + --ifm-link-color: var(--takaro-accent); + --ifm-link-hover-color: #4a33c9; + --ifm-menu-color-active: var(--takaro-accent); + + --takaro-border-themed: #e6e3ee; + --takaro-muted-themed: #5c5768; + --takaro-surface-themed: #f7f6fa; + --takaro-active-tint: rgba(102, 77, 229, 0.08); + --docusaurus-highlighted-code-line-bg: rgba(102, 77, 229, 0.14); +} + +/** + * The site is locked to dark mode. Docusaurus defines its dark neutrals on + * html[data-theme='dark'], which outranks :root — so these must be scoped to + * the same selector to take effect. + */ +html[data-theme='dark'] { + --ifm-background-color: var(--takaro-bg); + --ifm-background-surface-color: var(--takaro-bg-card); + --ifm-heading-color: var(--takaro-text); + --ifm-font-color-base: var(--takaro-text-base); + --ifm-navbar-background-color: var(--takaro-bg); + --ifm-navbar-shadow: 0 1px 0 var(--takaro-border); + --ifm-toc-border-color: var(--takaro-border); + --ifm-hr-border-color: var(--takaro-border); + --ifm-code-background: rgba(102, 77, 229, 0.14); + + /* The site links in a lifted purple, which also clears AA on this ground. */ + --ifm-link-color: var(--takaro-link); + --ifm-link-hover-color: var(--takaro-link-hover); + --ifm-menu-color-active: var(--takaro-link); + + --takaro-border-themed: var(--takaro-border); + --takaro-muted-themed: var(--takaro-text-muted); + --takaro-surface-themed: var(--takaro-bg-card); + --takaro-active-tint: rgba(102, 77, 229, 0.16); } +/* The navbar logo is the portal-A mark; the wordmark supplies "Takaro". */ +.navbar__logo { + height: 1.6rem; +} + +.navbar__brand:hover .navbar__title { + color: var(--ifm-link-color); +} + +.navbar__title { + font-weight: 700; + letter-spacing: 0.01em; +} + +/* Sidebar: active item carries the brand purple, lighter on a light ground. */ +.menu__link--active:not(.menu__link--sublist) { + background: var(--takaro-active-tint); +} + +.table-of-contents__link--active, +.table-of-contents__link--active code { + color: var(--ifm-link-color); +} + +blockquote { + border-left-color: var(--ifm-color-primary); +} .footer { - --ifm-footer-background-color: #121212; + --ifm-footer-background-color: var(--takaro-surface-themed); + border-top: 1px solid var(--takaro-border-themed); +} + +/* Footer wordmark: the SVG is ~5:1, so cap the height and let width follow. */ +.footer__logo { + height: auto; + margin: 0 0 0.75rem; + max-width: 190px; + width: 100%; +} + +.footer__copyright { + color: var(--takaro-muted-themed); + font-size: 0.875rem; } .module-marketplace-banner { @@ -38,7 +161,7 @@ } .module-marketplace-banner__eyebrow { - color: #9b8cff; + color: var(--ifm-link-color); font-size: 0.8rem; font-weight: 700; letter-spacing: 0; @@ -66,7 +189,7 @@ } .module-marketplace-banner__button:hover { - background: #7a63ea; + background: var(--ifm-color-primary-light); color: #fff; text-decoration: none; } @@ -80,13 +203,13 @@ .module-path-card { background: var(--ifm-background-surface-color); - border: 1px solid rgba(102, 77, 229, 0.32); + border: 1px solid var(--takaro-border-themed); border-radius: 8px; padding: 1.25rem; } .module-path-card__eyebrow { - color: #9b8cff; + color: var(--ifm-link-color); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; @@ -188,7 +311,7 @@ .game-card { display: flex; flex-direction: column; - border: 1px solid var(--ifm-color-emphasis-300); + border: 1px solid var(--takaro-border-themed); border-radius: 8px; overflow: hidden; transition: all 0.2s ease; diff --git a/static/img/takaro-portal-a.svg b/static/img/takaro-portal-a.svg new file mode 100644 index 0000000..20ba9d6 --- /dev/null +++ b/static/img/takaro-portal-a.svg @@ -0,0 +1,6 @@ + + + Takaro open portal A + Bridge-free geometric Takaro portal A in brand purple #664DE5. + + diff --git a/static/img/takaro-wordmark-light.svg b/static/img/takaro-wordmark-light.svg new file mode 100644 index 0000000..11d325d --- /dev/null +++ b/static/img/takaro-wordmark-light.svg @@ -0,0 +1,16 @@ + + + Takaro wordmark with open portal A + Takaro wordmark using the bridge-free portal A. Brand purple is #664DE5. + + + + + + + + + + + + diff --git a/static/img/takaro-wordmark.svg b/static/img/takaro-wordmark.svg new file mode 100644 index 0000000..e6df0a7 --- /dev/null +++ b/static/img/takaro-wordmark.svg @@ -0,0 +1,16 @@ + + + Takaro wordmark with open portal A + Takaro wordmark using the bridge-free portal A. Brand purple is #664DE5. + + + + + + + + + + + + From 3cdd9b5a1a1d546d529c9a3d569b142e62036a18 Mon Sep 17 00:00:00 2001 From: El-Limon Date: Mon, 31 Aug 2026 12:53:42 +0200 Subject: [PATCH 2/2] fix(config): make the footer follow the active theme The footer used Docusaurus's `style: 'dark'` variant, which hardcodes near-white link and title text. With the footer background themed to the light surface, that left white-on-near-white in light mode: footer links measured 1.09:1 and titles 1.08:1. Switch to `style: 'light'`, which follows the active theme, and pin the footer link and title colours per theme rather than relying on Infima's defaults. Footer text now passes AA in both themes: light - links 10.87:1, title 17.23:1, copyright 6.47:1 dark - links 10.25:1, title 18.26:1, copyright 4.69:1 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01GLALF6cpN7LJQtdLsskzZp --- docusaurus.config.ts | 4 +++- src/css/custom.css | 5 +++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 5b35834..b1a6fc1 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -97,7 +97,9 @@ const config: Config = { ], }, footer: { - style: 'dark', + // 'light' follows the active theme; 'dark' hardcodes near-white link + // text, which is invisible on the light footer surface. + style: 'light', logo: { alt: 'Takaro', // Letterforms flip per theme; the portal-As stay brand purple in both. diff --git a/src/css/custom.css b/src/css/custom.css index 25666c1..ca09fb1 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -64,6 +64,8 @@ html[data-theme='light'] { --ifm-link-hover-color: #4a33c9; --ifm-menu-color-active: var(--takaro-accent); + --ifm-footer-link-color: #3a3646; + --ifm-footer-title-color: #14121c; --takaro-border-themed: #e6e3ee; --takaro-muted-themed: #5c5768; --takaro-surface-themed: #f7f6fa; @@ -92,6 +94,8 @@ html[data-theme='dark'] { --ifm-link-hover-color: var(--takaro-link-hover); --ifm-menu-color-active: var(--takaro-link); + --ifm-footer-link-color: var(--takaro-text-base); + --ifm-footer-title-color: var(--takaro-text); --takaro-border-themed: var(--takaro-border); --takaro-muted-themed: var(--takaro-text-muted); --takaro-surface-themed: var(--takaro-bg-card); @@ -128,6 +132,7 @@ blockquote { .footer { --ifm-footer-background-color: var(--takaro-surface-themed); + --ifm-footer-link-hover-color: var(--ifm-link-color); border-top: 1px solid var(--takaro-border-themed); }