Align docs theme with brand-book Default variant#84
Merged
Conversation
Replaces the off-brand teal/cream palette with the brand-book Default variant tokens (grayscale chrome, monochrome --primary). Because Default primary is near-black/near-white and would kill link visibility, every "accent" surface (markdown links, sidebar active, table thead underline, blockquote stripe, transport hover, mermaid primary, homepage hover, timeline gradient, search modal accents, admonition info) routes through the --info token (TagoIO blue) instead. Logos: replaces the legacy hand-drawn SVGs with the canonical brand-book master mark and the five sub-product logomarks (IO pill, RUN pill, Deploy rocket, Core atom, TiP pill). Each ships as a black+white pair so ThemedImage flips them with the active mode. Homepage feature cards now render monochrome sub-product marks instead of the colored 3D PNGs. OG renderer updated to the Default dark palette. Typography: installs @fontsource-variable/inter and @fontsource/monaspace-neon, drops the Google Fonts <link>, and adds the body font-feature-settings, font-optical-sizing, font-synthesis rules Inter needs to render correctly. Code blocks now use Monaspace Neon. Homepage CTAs: switched to pill shape (border-radius: 999px) and the brand-book primary/foreground tokens. Misc fixes: - Docusaurus default --docusaurus-highlighted-code-line-bg is an opaque charcoal that destroyed contrast on light surfaces; overridden to an info-tinted overlay. - Mermaid stadium/pill nodes had a legacy "dark text" override that broke when the mermaid primary moved to info-blue; now every node label paints white in both modes. - Mermaid block-beta labels in the tagotip envelope diagram needed shrinking + centering to fit within the column-based fixed widths. Scoped to svg[aria-roledescription="block"] so other diagrams stay at default size.
felipefdl
force-pushed
the
feat/default-theme
branch
from
fd01035 to
771bc63
Compare
The font side-effect imports lived in Openapi-Store.tsx, whose name suggests Redux store setup. Move them to src/client/load-fonts.ts so the global-font intent is clear from the file name, and register both modules in clientModules.
The OpenAPI theme paints its <details> disclosure arrow as a black inline SVG and recolors it in dark mode via --ifm-menu-link-sublist-icon-filter. The Default theme PR set that variable to `none` globally because our sidebar arrow already ships with the correct stroke baked in, which silently broke the OpenAPI arrow: it stayed black on the dark background and disappeared into it. Invert the OpenAPI arrow explicitly in dark mode so the sidebar fix and the OpenAPI theme can coexist.
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
1 participant
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
Replaces the previous custom teal/cream docs theme (which did not exist in any of the four TagoIO brand-book variants) with the brand-book Default variant: grayscale chrome, monochrome
--primary, and status-token accents.Because Default
--primaryis#171717/#FAFAFA(near-black / near-white) and would kill hyperlink visibility, every "accent" surface routes through--info(#0067C0light /#28A6FAdark) instead. The brand book documents--infoas the role for "Info state, inline links", so this stays within the variant tokens.What changed
Color tokens.
:rootandhtml[data-theme="dark"]now declare the Default light/dark token sets verbatim fromtagobrand/visual-system.md. Docusaurus--ifm-*variables map onto them. Legacy--c-blue-*/--c-indigo-*/--c-carbon-*aliases are gone.Logos. Master logo regenerated from the canonical
tago-io-logo.svg(pure black on light, pure white on dark per brand book). Homepage feature cards swap colored 3D PNGs for monochrome brand logomarks (IO pill, RUN pill, Deploy rocket, Core atom, TiP pill), each shipped as a black + white pair thatThemedImageflips with the active mode. OG renderer updated to the Default dark palette with an info-blue accent bar.Typography. Installs
@fontsource-variable/interand@fontsource/monaspace-neon. Drops the Google Fonts<link>. Adds the bodyfont-feature-settings,font-optical-sizing, andfont-synthesisrules Inter needs to render correctly. Code blocks now use Monaspace Neon per brand book. Font side-effect imports live in a dedicatedsrc/client/load-fonts.tsclient module.CTAs. Homepage hero CTAs to pill shape (
border-radius: 999px) with brand--primary/--primary-foregroundtokens; secondary CTA uses a--foregroundborder.Misc fixes.
--docusaurus-highlighted-code-line-bg(Docusaurus default isrgb(72, 77, 91), an opaque charcoal that destroyed contrast on light surfaces).0.82emand center via flex, scoped tosvg[aria-roledescription="block"]so flowcharts stay at default size.Why Default and not Eye Comfort
We tried Eye Comfort first (terracotta on warm sepia). It looked good, but the docs need to live alongside admin and other surfaces that ship Default by default. Eye Comfort can return later as an opt-in variant once a picker is added.
Test plan
npm run check(oxlint + oxfmt)npm run typechecknpm run build// highlight-next-line(line highlight contrast)Risk (CIA)
Likelihood: 🟢 Low | Impact: 🟡 Medium | Exposure: 🟢 Low
Warning
Impact is Medium because the visual swap could surface a per-page contrast or font-loading regression on a surface the test plan does not cover. No runtime, routing, or content logic changed; any regression is reversible by re-routing a single token.