style(docs): prose polish, code-block title, sidebar API pills, schema summary fix by sserrata · Pull Request #1345 · PaloAltoNetworks/pan.dev

sserrata · 2026-07-13T18:19:12Z

Summary

Continues the visual refresh started in #1344. Pure CSS + one component-scoped SCSS pass per landing card.

Prose surfaces

Blockquotes — subtle gray background, 3px accent border-left, rounded right side.
Inline code — lighter tint than pre blocks, subtle border, tighter padding. Scoped to .markdown :not(pre) > code so OpenAPI/Explorer code surfaces are untouched.
Admonitions — thinner accent (border-left only), rounded right side, softer dark-mode background. Uses [class*=] prefix matching for the css-module internals so it survives theme version bumps.
Prose <details> — same border-left accent + rounded right as admonitions. Scoped away from API-doc details via :not(.theme-api-markdown *).

Headings

Scroll-margin — deep links no longer hide under the sticky navbar.
Hover anchor polish — the # anchor Docusaurus already reveals on hover now uses gray-500 idle → primary on hover, in both themes.

Code blocks

Title bar — dark bg + light text in both themes so it visually attaches to the (always-dark) code area. Rounded top corners match --ifm-code-border-radius.
Language badge — small colored chip on the top-right of every code block showing the syntax highlighting language (JS/TS/PY/BASH/JSON/etc). Each language sets a --lang-color custom property; a single %lang-badge placeholder consumes it for both text color and a soft color-mix() tinted background. Anchored to the code area itself, so titled and titleless blocks render the chip identically.

API method colors (sidebar + doc chip)

Introduces --pan-method-* CSS variables (get/post/put/patch/delete/head) in :root so both the sidebar .api-method pseudo-badges and the doc-header .openapi__method-endpoint .badge draw from one source of truth.
Standard REST palette: GET blue, POST green, PUT orange, PATCH purple, DELETE red, HEAD gray.
Two intensities, one palette: sidebar renders as soft tinted pills (color-mix(<method-color>, 22%, transparent) + colored text); doc-header chip stays as Infima's solid fill (via --ifm-badge-background-color remap) for prominent header accent.

Landing cards

HomepageBanner Featured, CloudCard, and ProductLandingPage (ImageCard/InfoCard/LinkCard) each defined their own radius/border/shadow — three different border-radii (4px / 8px / 16px), three different shadow recipes, and inconsistent hover behavior.
Introduces --pan-card-* CSS variables (radius, border, shadow, shadow-hover, transition, hover-lift) in :root with a dark-theme override that strengthens the border and deepens the shadow.
All cards now share the same subtle-elevation treatment: soft border, light shadow, 2px lift + deeper shadow on hover, 200ms ease.
Product-color hover accents in Featured (Network Security → panos, SASE → prisma, etc.) are preserved.

OpenAPI fix (scope-adjacent)

Schema summary flex — with openapi-docs 5.1.2's new schema-depth toggle, the header's h3/strong was wrapping the "required" chip to a new line. Force nowrap on the header, wrap on the summary itself so the toggle drops below only when there's truly no horizontal room.

Test plan

Visual: light + dark mode — blockquotes, inline code, all admonition variants, prose <details> render as expected
Visual: fenced code blocks — new dark title bar with rounded top corners AND language chip on the top-right of every block (both titled and titleless)
Visual: deep-link to a heading anchor — heading sits below navbar with breathing room
Visual: any API product sidebar — method pills tinted with the new REST palette; doc-header chip on the same endpoint page uses the same color at solid intensity
Visual: homepage Featured cards, product landing ImageCard/InfoCard/LinkCard, CloudCard — same shared border/radius/shadow, 2px hover lift with deeper shadow
Regression: OpenAPI Explorer + API doc pages — inline code, <details>, schema summaries look correct (title + required chip on same line)
Regression: markdown tables from style(docs): modernize markdown table styling #1344 unchanged
Regression: Featured product-color hover accents still change border color per product
Cross-browser: Chrome + Safari

🤖 Generated with Claude Code

…nitions) Continues the visual refresh started in #1344. Three additions: - Blockquotes: subtle gray background, 3px accent border-left, rounded right side. Matches the muted palette used by the new table style. - Inline code: lighter tint than pre blocks so it stops competing with fenced code, with subtle border and tighter padding. Scoped to markdown prose so OpenAPI/Explorer code surfaces are untouched. - Admonitions: thinner accent (border-left only), rounded right side, softer dark-mode background. Selectors use [class*=] prefix matching for the css-module admonition internals so they survive theme version bumps. Pure CSS — no component changes.

github-actions · 2026-07-13T18:28:20Z

Visit the preview URL for this PR (updated for commit 4ced4f7):

https://pan-dev-f1b58--pr1345-rimjixnz.web.app

_{(expires Mon, 20 Jul 2026 23:09:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 9359a9fa100d5fdb082f75280473a90b1f96eb51}

Round two of the visual refresh. Same file (custom.scss), same theme as the previous commit — pure CSS, no component changes. Additions: - Heading scroll-margin: deep links to h1..h6 no longer hide under the sticky navbar. Uses calc(navbar-height + 1rem) for breathing room. - Heading hover anchor color polish: gray-500 idle, primary on hover, in both themes. Docusaurus already handles the opacity/reveal. - Code block title bar: dark bg + light text in both themes so it visually attaches to the (always-dark) code area instead of clashing. Rounded top corners match --ifm-code-border-radius. Uses !important to defeat CSS-module specificity from Docusaurus. - Prose <details> polish: border-left accent + rounded right, matching the admonition treatment. Scoped to .markdown ... :not(.theme-api-markdown *) so API-doc details keep their existing .theme-api-markdown styling (the .markdown wrapper is a shared ancestor). - Schema summary flex fix (openapi-docs 5.1.2): when the schema-depth toggle is present, the title's h3/strong was wrapping the "required" chip to a new line. Force nowrap on the header, wrap on the summary itself so the toggle drops below only when there's truly no room.

Continues the visual refresh. The .api-method pseudo-badges (get/post/ del/put/patch/head) rendered as colored text on a transparent background; this switches them to soft tinted pills that scan more like modern API doc tools (Stripe, Scalar, Speakeasy). - Background: color-mix(in srgb, <method-color> 14%, transparent) — the tint auto-adapts if the source variable changes, and blends against both light and dark sidebar backgrounds without a separate dark rule. - Text: keeps the existing per-method color so foreground/background stay coordinated. - Sizing: min-width 44px + padding for content-based growth on longer labels (e.g. "patch"), text-align: center so all pills line up in the right column, tighter 11px font + 700 weight for pill legibility.

Iterates on the sidebar pills from the previous commit. Two changes: - Introduce --pan-method-* CSS variables (get/post/put/patch/delete/head) in :root so sidebar pills and doc-header chips draw from one source of truth. Changing a method color now updates both surfaces. - Remap to the standard REST palette: GET=blue, POST=green, PUT=orange, PATCH=purple, DELETE=red, HEAD=gray. Previous palette had three green shades (GET/POST/HEAD) that were hard to distinguish at a glance. - Doc-header chip stays as Infima's solid fill (via --ifm-badge-background-color remap), sidebar keeps the tinted pill treatment — same colors at two different intensities to match each surface's density (dense sidebar list vs. prominent header accent). - Bumped sidebar tint from 14% to 22% for a bit more contrast against the page background.

Small monospace chip on the top-right of the code block title bar showing the syntax highlighting language (JS/TS/BASH/JSON/YAML/etc). Renders only when a title="..." metastring is set, so titleless blocks don't get a lonely chip floating over them. - Uses :has() to scope to containers with a title bar present, so applies to only the block styles we already modernized. - Positioned absolutely with 3rem right offset so it clears the copy button, pointer-events: none so it never intercepts clicks. - SCSS placeholder %lang-badge with @extend to DRY the shared styles across the language enumeration (js, jsx, ts, tsx, py, bash/sh/ shell/zsh, json, yaml/yml, md/mdx, html, css, scss, sql, xml, go, rust, toml).

…guage Two refinements to the language-badge introduced in the previous commit: - Anchor the chip to codeBlockContent_ (the code area) instead of the container. Titled and titleless blocks now render the chip in the same spot relative to the code, so behavior is consistent regardless of whether title="..." is set. - Drop the :has() scope so titleless blocks get a chip too. - Give each language an iconic color via a --lang-color CSS custom property set per-rule; the shared %lang-badge placeholder consumes it for both the text color and a soft color-mix() tinted background. Adding or tuning a language is now a one-line change.

Homepage Featured, product landing ImageCard/InfoCard/LinkCard, and CloudCard each defined their own radius/border/shadow, producing three different border-radii (4px / 8px / 16px), three different shadow recipes, and inconsistent hover behavior. This unifies them. - Introduces --pan-card-* CSS variables in :root (radius, border, shadow, shadow-hover, transition, hover-lift) with a dark-theme override that strengthens the border and deepens the shadow to compensate for reduced contrast against dark backgrounds. - Refactors CloudCard, Featured (.featured-card-container), and the three ProductLandingPage card variants to consume the shared vars. - All cards now get the same subtle-elevation treatment: soft border, light shadow, 2px lift + deeper shadow on hover, 200ms ease. - Product-color hover accents in Featured (Network Security→panos, SASE→prisma, etc.) are preserved — they override border-color only, on top of the shared border shorthand.

Four polish changes to the top-nav mega-menu that appears on every page. - Menu container: 1px border, 0.5rem radius, soft shadow — matches the landing-card treatment from the previous commit. - Link hover: subtle emphasis-100 background tint + rounded corners so the hover state reads as a clear affordance rather than only a color swap. Product-color hover accents (Network Security → panos, SASE → prisma, etc.) still layer on top. - Section titles: smaller (0.6875rem), tighter tracking, muted color (emphasis-600) so they announce a group without competing with the content underneath. - Section dividers: softened from emphasis-400 to emphasis-200 with a bit more breathing room (padding/margin-bottom), matching the light border language used elsewhere.

Ride on top of DocSearch's own --docsearch-* CSS variables so the modal, searchbox, footer, and kbd keys all track site tokens (--ifm-color-*, --ifm-background-color) in both themes instead of raw hex values. - Modal background uses --ifm-background-color in both themes; overflow: hidden clips the searchbox/footer to the rounded corners so they no longer bleed past the border-radius. - Dark-mode overrides scoped to html[data-theme="dark"] .DocSearch to match the specificity of DocSearch's own dark block; a :root-level selector loses to it. - Selected result uses a neutral emphasis-200 tint (gray in both themes) instead of a full primary-color fill — subtler, closer to macOS Spotlight / Raycast conventions. Matched-text <mark> stays primary blue so hits are still easy to spot. - Backdrop gets a subtle blur; navbar trigger button picks up the same rounded/bordered treatment as the search input. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

- Table of contents: active heading now shows as a primary-blue pill (bar + soft tint + colored text) instead of a barely-visible gray line. Non-active items get a subtle rounded hover. Rewritten with --ifm-color-emphasis-* so both themes auto-adapt; dropped the now-redundant dark-mode gray override. - Pagination-nav (prev/next at page bottom): adopts the shared --pan-card-* treatment (border, radius, shadow, hover-lift toward primary), matching landing cards. Sublabel is uppercase muted small-caps; page title is bold. Removed the raw gray-800/700 dark-mode overrides — card vars now handle both themes. - Breadcrumbs: link hover gets a subtle rounded pill; the current page's breadcrumb picks up the same primary-tinted pill the sidebar and TOC use, so "you are here" reads consistently across the three nav surfaces. - Admonitions: background was falling through to Docusaurus's near- white default in light mode. Now tinted with color-mix of each admonition's own --ifm-alert-border-color (8% in light, 12% in dark) so a NOTE gets a soft info-blue wash, TIP soft green, CAUTION soft amber, DANGER soft red — visible against the page bg without overwhelming. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Bring the docs sidebar in line with the pill-and-tint treatment now used by the TOC and breadcrumbs, so "you are here" reads consistently across all three nav surfaces. - Every .menu__link gets rounded corners + a smooth emphasis-100 hover tint (auto-adapts across themes). - Active leaf item: primary-blue text + soft primary-tinted bg + bold, matching the TOC/breadcrumb active pill. Nested items keep their left guide-line but it flips from gray to primary when active, so the current-page indicator is genuinely visible instead of a barely- noticeable dark-gray bar. - Category rows (collapsible headers) get their own subtle rounded hover so the click target feels interactive. - Nested guide line softened from gray-400/500 to emphasis-200, matching the TOC border color. - Dropped the dark-mode raw gray-400/500 border overrides — the new emphasis-* + primary vars handle both themes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Bring code-language tabs and MIME tabs in line with the pill-and-tint treatment now used by sidebar, TOC, and breadcrumbs so the active state reads consistently across every navigation surface. - Every .tabs__item gets rounded corners, a muted default color, and a smooth emphasis-100 hover tint. - Active tab: primary-blue text + soft primary-tinted bg (color-mix), dropping the default bottom-border underline in favor of the pill. - MIME tabs (openapi-docs request-body variants) switched from the CSS-module-hashed selector to a [class*="mimeTabActive_"] prefix match — survives openapi-docs version bumps. - Response tabs (200/400/etc.) left alone; they already use a primary-outlined pattern that reads well. - Dropped the dark-mode raw gray-800 !important overrides for tabs and MIME tabs — the color-mix + primary vars handle both themes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

The footer config today is just logo + copyright, so this focuses on container/logo/copyright treatment. Link-column styles are added forward-compatibly for when the config eventually grows. - Container gets a 1px inset-white top border for clean separation from page content, and more generous vertical padding (3rem top / 2rem bottom). - Logo capped at 220px with breathing room below. - Copyright softer color (60% white), smaller (0.8125rem), slight letter-spacing — reads like a subtitle instead of shouting. - .footer__title picks up the small-caps treatment used by the navbar dropdown sections and pagination sublabels; .footer__link-item gets a muted → bright hover transition. Uses rgba(255,255,255,*) throughout since the footer bg is gray-900 in both themes — the contrast reference is the dark surface, not the site theme. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

The language chip's fixed `right: 3rem` only cleared the copy button. When long lines cause horizontal overflow, Docusaurus renders a second wordWrap toggle button next to copy, and the badge landed on top of it. Use `:has(button + button)` to detect the two-button case and shift the badge to `right: 5.5rem`. Selector avoids Docusaurus internal class names so it survives theme renames. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Frame the inline DocSearch trigger so it doesn't render as a bare full-width bar mid-sentence, and turn the algolia suggestion rows into cards using the shared --pan-card-* tokens for hover consistency with pagination and the homepage. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Replace the default Docusaurus arrow SVG on the sidebar collapse and expand buttons with a typographic chevron (‹ / ›) at 2rem/300 weight. The glyph inherits the site font so it stays visually native, and the bar picks up a primary-tint hover to match the rest of the sidebar treatment. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Unify the doc footer's Copy / Edit / Report links as sibling pill chips using the pan-card border token and primary-tint hover, and switch to flex-wrap with gap so labels never break mid-word. Below the 996px mobile breakpoint the chips collapse to 36px circular icon-only buttons so all three sit on one row on tablet/phone. The floating island (visible when the footer scrolls off-screen) is rewritten as a single glass pill — content-driven width, backdrop blur, per-icon circular hover targets in primary tint. All three legacy width variants now share the same treatment. Drop the empty layout column in the footer so the chip row can flex across the full width, and neutralize the base styles of the Copy and Issue components so the containing surface (chip row or island) controls color and spacing. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

sserrata requested a review from a team as a code owner July 13, 2026 18:19

sserrata temporarily deployed to preview July 13, 2026 18:26 — with GitHub Actions Inactive

sserrata changed the title ~~style(docs): modernize prose surfaces (blockquotes, inline code, admonitions)~~ style(docs): prose polish (blockquotes, code, admonitions, details) + code-block title bar + schema summary fix Jul 13, 2026

sserrata changed the title ~~style(docs): prose polish (blockquotes, code, admonitions, details) + code-block title bar + schema summary fix~~ style(docs): prose polish, code-block title, sidebar API pills, schema summary fix Jul 13, 2026

sserrata temporarily deployed to preview July 13, 2026 19:17 — with GitHub Actions Inactive

sserrata temporarily deployed to preview July 13, 2026 19:31 — with GitHub Actions Inactive

sserrata added 2 commits July 13, 2026 15:14

sserrata temporarily deployed to preview July 13, 2026 20:28 — with GitHub Actions Inactive

sserrata temporarily deployed to preview July 13, 2026 21:29 — with GitHub Actions Inactive

sserrata temporarily deployed to preview July 13, 2026 21:46 — with GitHub Actions Inactive

sserrata and others added 6 commits July 13, 2026 16:53

sserrata temporarily deployed to preview July 13, 2026 22:19 — with GitHub Actions Inactive

sserrata temporarily deployed to preview July 13, 2026 22:39 — with GitHub Actions Inactive

sserrata and others added 2 commits July 13, 2026 17:53

sserrata temporarily deployed to preview July 13, 2026 23:09 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

style(docs): prose polish, code-block title, sidebar API pills, schema summary fix#1345

style(docs): prose polish, code-block title, sidebar API pills, schema summary fix#1345
sserrata wants to merge 17 commits into
masterfrom
style/prose-polish

sserrata commented Jul 13, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sserrata commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

github-actions Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sserrata commented Jul 13, 2026 •

edited

Loading

github-actions Bot commented Jul 13, 2026 •

edited

Loading