Apply the SignalWire design system; support dark, light, and auto themes - #306
Merged
Conversation
Restyle the site against SignalWire Design System v2.0 (DTCG tokens) instead of the previous ad-hoc palette (#254592 primary, Inter/Neue Einstellung). src/css/custom.scss — rewritten in three layers: - SignalWire tokens (--sw-*, --bg-*, --fg-*, --border-*, --cb-*) for both the light and dark surface/foreground scales. - Mapping of those tokens onto Infima's --ifm-* variables. - Component rules: headings (Instrument Sans, 700, neutral — never colored), body (Lexend, 1.7), code (JetBrains Mono), tables (fuchsia header rule; blue header in light), admonitions (info blue / warning gold / danger fuchsia / success green as a left accent, no hard colored borders), navbar, sidebar, TOC, cards (raised surface + depth, fuchsia glow on hover), buttons, blue focus rings, and 48px touch targets on mobile. docusaurus.config.js: - colorMode: dark default (the system is dark-mode-first), switch enabled, and respectPrefersColorScheme so the initial theme follows the OS — dark, light, and auto are all supported. - Custom SignalWire Prism theme used for BOTH theme and darkTheme, so code blocks stay dark in both site themes per the design system, with the DTCG syntax token colors. - Google Fonts (Instrument Sans / Lexend / JetBrains Mono) with preconnect. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The navbar logo is a single-color navy mark (#1b336f) that is unreadable on the dark surface. Add a white variant (same geometry, artwork fill swapped to #ffffff) and wire it as the navbar srcDark so Docusaurus swaps it with the theme. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the sparse three-column footer (Video / Community / More) with the signalwire.com layout: a brand column (white logo, tagline, note) followed by five link columns - Documentation, Reference, Downloads, Community, SignalWire. Styling: always renders on the dark surface (#0e0e18) in both themes, with Instrument Sans column headings, muted 15px links that brighten on hover, generous column spacing, and a subtle purple radial glow along the top edge. The brand column's heading is screen-reader-only so the logo carries the identity visually, matching the reference. All internal links verified to resolve. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The footer was hardcoded to the dark surface and was too airy - at six columns it wrapped onto a second row and the type was oversized. - Theme-aware: colors now resolve from the active token set (surface, headings, muted text, border), with a dark-mode override that drops the footer to the page surface and strengthens the top glow. The brand logo swaps too: navy mark on light, white mark on dark. - Compact: 14px links and headings, tighter gaps (1.5rem/2rem), reduced padding, narrower brand column, and flex sizing so all six columns fit one row. - Hide external-link glyphs in the footer; they forced awkward wraps and the reference design omits them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
Restyles the site to follow the SignalWire style guide / Design System v2.0, replacing the previous ad-hoc palette (
#254592primary, Inter + Neue Einstellung). Values come from the DTCG token set (brand / dark / light layers).src/css/custom.scss— rewritten in three layers--sw-*brand (blue#044EF4, fuchsia#F72A72, purple, turquoise, gold), plus the full light and dark surface/foreground/border scales.--ifm-*so the whole theme derives from the token set.docusaurus.config.jsdefaultMode: "dark"(the system is dark-mode-first), switch enabled, andrespectPrefersColorScheme: trueso the initial theme follows the OS. The navbar toggle reports "currently system mode" until the visitor picks one.themeanddarkTheme, with the DTCG syntax colors (string turquoise, keyword#6e9eff, operator gold, number/type#ff6da0, comment#898995) on#1e1e1f.Verification
npm run buildpasses. Verified in the built CSS that both token scales emit (--bg-page:#fafbfclight /#0e0e18dark,--fg-headings:#070c2d/#f0f0f4), code blocks force--cb-bg:#1e1e1fin both themes, the fuchsia table rule and admonition accents are present, and the color-mode toggle renders in system mode.Note: the default theme is now dark (per the guide's dark-mode-first principle). One-line change in
colorModeif you'd rather keep light as the default.🤖 Generated with Claude Code