feat(demo): modernized styles with swappable palettes and runtime theme switcher#1371
Open
feat(demo): modernized styles with swappable palettes and runtime theme switcher#1371
Conversation
- Replace default Docusaurus green with Glean blue (#343ced) primary palette - Add Inter font for body text, JetBrains Mono for code - Full dark mode with navy base (#111827) and gray emphasis scale - Modernize HTTP method badges: pill-style with translucent inactive / solid active states, dark mode variants for all methods - Port sidebar behavior: transparent hover, uppercase top-level categories, active item uses primary color (no background fill) - Add schema parameter highlight-flash animation on anchor target - Add custom scrollbar styling for code tab panels - Add border-radius and shadow scale variables - Add grid utility classes - Port admonition border removal + border-radius - Enable prismThemes.github/dracula for code blocks - Add colorMode.respectPrefersColorScheme: true - Remove navbar title text (logo-only nav) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
MethodEndpoint uses .badge--primary/success/danger/info/warning which map to different Infima colors than the sidebar ::before pseudo-elements. Override all badge classes to use the same color scheme: GET → badge--primary → green (#16a34a / #22c55e dark) POST → badge--success → navy (#004c9d / #5eb7ff dark) DELETE → badge--danger → red (#dc2626 / #ef4444 dark) PUT → badge--info → amber (#d97706 / #f59e0b dark) PATCH → badge--warning → amber (#d97706 / #f59e0b dark) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
--ifm-color-primary-light resolves to #acd9ff in dark mode, making white text nearly invisible. Pin the request button to PANW navy (#004c9d) in dark mode to ensure readable contrast. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
custom.css is now purely structural (layout, animations, utilities). All colors, fonts, and palette-specific values live in a theme file. To try a different palette, swap one line in docusaurus.config.ts: customCss: ["./src/css/custom.css", "./src/css/themes/<theme>.css"] themes/panw.css — Palo Alto Networks brand (pan.dev): - Plus Jakarta Sans + Fira Code fonts - PANW navy primary (#004c9d), orange accent (#fa582d) - Near-black dark mode (#0b1117) with steel-blue gray scale - Method badge colors, .badge--* overrides, send button fix custom.css changes: - Uses --theme-primary-rgb for the highlight-flash animation - Uses --theme-border-radius-sm/md with fallback defaults - Badge content labels separated from colors (colors in theme) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds demo/src/css/themes/violet.css (Space Grotesk + JetBrains Mono, Violet-600 primary, deep purple-tinted dark mode) and switches docusaurus.config.ts to load it instead of panw.css. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds demo/src/css/themes/cyber.css — neon green (#00ff88) on near-black (#030a06), monospace (JetBrains Mono) everywhere including body and headings, electric cyan POST badges, hot pink DELETE badges in dark mode, and sharp 2-4px border radii throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds demo/src/css/themes/midnight.css — slate-900 (#0f172a) base with sky-blue (#38bdf8) accents, Inter body font, JetBrains Mono code. Active badges use dark text on bright fills for contrast on the slate background. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds demo/src/css/themes/indigo.css — the modern dev site aesthetic. Zinc-950 (#09090b) dark base, indigo-500 (#6366f1) accent, Geist + Geist Mono font stack. Neutral shadows (no color tint), subtle badge opacity, matches the shadcn/ui + Linear + Clerk visual language. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds demo/src/css/themes/nord.css — faithful to the Nord color palette (Arctic Ice Studio). Polar Night (#2e3440) dark base, Frost blue-cyan (#88c0d0) primary, Aurora semantic colors for method badges throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds demo/src/css/themes/evergreen.css — a modern riff on the classic Docusaurus green (#2e8555). Keeps the signature primary, upgrades to Plus Jakarta Sans + Fira Code, deepens the dark mode to #18191a, and applies neutral shadows throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Overrides --openapi-explorer-font-size-code from the 12px default to 14px for better readability in the request body example panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…size Uses var(--ifm-code-font-size) instead of a hardcoded pixel value so the request body panel always matches the code snippet blocks. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sets --openapi-explorer-font-size-code to 13px and explicitly applies it to .openapi-explorer__playground-editor plus its inner textarea and pre elements, which react-simple-code-editor renders outside the reach of the outer font shorthand. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Moves all theme CSS to demo/static/themes/ for URL-accessible dynamic loading. Registers a custom-PalettePicker navbar item that injects the selected /themes/<id>.css at runtime, persists the choice in localStorage, and restores it on reload via an inline <head> script.
ComponentTypes swizzle was silently not loading. Replacing it with a NavbarItem/index wrapper that intercepts custom-PalettePicker before the ComponentTypes lookup, which is more reliable across Docusaurus theme chain configurations. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Size Change: +33.7 kB (+1.52%) Total Size: 2.26 MB
ℹ️ View Unchanged
|
|
Visit the preview URL for this PR (updated for commit 73a1008): https://docusaurus-openapi-36b86--pr1371-nb7rklqm.web.app (expires Thu, 30 Apr 2026 13:15:51 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: bf293780ee827f578864d92193b8c2866acd459f |
The component already returns null for mobile={true} (drawer), but
Docusaurus also renders right-side navbar items in the collapsed mobile
top bar without that prop. Hide .root below 996px to match Docusaurus's
own navbar collapse breakpoint.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
On mobile (≤996px): - Trigger collapses to a 36px circular swatch-only button (no text/chevron) that fits cleanly in the navbar top bar - Dropdown becomes a fixed bottom sheet with rounded top corners, a drag handle indicator, and larger touch targets (12px padding per row) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Desktop: unchanged pill button + dropdown in the top bar.
Mobile: top-bar button hidden; instead renders a 2-column grid of
labeled color swatches inside the hamburger drawer (mobile={true})
with active-state border highlight and a section heading.
Co-Authored-By: Claude Sonnet 4.6 <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
demo/src/css/into a theme-contract model:custom.cssowns all structural styles (badge shapes, sidebar behavior, animations, typography rules) with zero color/font declarations, keeping it theme-agnosticdemo/src/css/themes/— each file is a self-contained drop-in that implements the CSS variable contract (--ifm-color-primary-*,--theme-primary-rgb,--site-primary-hue-saturation, etc.):panw— PANW brand navy, Plus Jakarta Sans + Fira Codeevergreen— modernized classic Docusaurus green, Plus Jakarta Sans + Fira Codeviolet— Violet-600 primary, Space Grotesk + JetBrains Monomidnight— Slate-900 base, sky-blue accent, Inter + JetBrains Monoindigo— Zinc-950 base, Indigo-500 accent, Geist + Geist Mono (shadcn/ui aesthetic)nord— faithful Nord palette (Polar Night base, Frost accent, Aurora method badges)cyber— neon green on near-black, JetBrains Mono everywhere including body/headingsPalettePickernavbar dropdown that injects the selected/themes/<id>.cssdynamically, persists the choice inlocalStorage, and restores it via an inline<head>script (FOUC prevention)badge--*classes now match in all themes--openapi-explorer-font-size-codeto thereact-simple-code-editorinnertextareaandpreelements in the evergreen themeTest plan
cd demo && yarn start🤖 Generated with Claude Code