From 415323ec6d1e1d0dda96ae89f821d22161eb6273 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=B4nio=20Alexandre=20Borges=20Lima?= <104531655+AntonioABLima@users.noreply.github.com> Date: Fri, 12 Jun 2026 10:58:04 -0300 Subject: [PATCH] docs: migrate code blocks to native Prism and restyle API reference pages (#13299) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: migrate code blocks from CodeSnippet to native Prism Replace the custom CodeSnippet component (@code-hike/lighter) with Docusaurus's native @theme/CodeBlock across all MDX files (current and versioned docs). Add bash to additionalLanguages and swizzle prism-include-languages.js to add custom token highlighting for shell commands and flags. Remove @code-hike/mdx dependency. * docs: improve inline code styling Darken inline code background, increase horizontal padding to 0.4em, fix vertical alignment, and remove border in light mode. * docs: address PR review — fix code slice regression and CSS/regex polish - Inline RecursiveCharacterTextSplitter inputs and methods as literal code blocks in concepts-components.mdx (current + 1.8.0 + 1.9.0), restoring the focused slices lost when migrating from CodeSnippet - Scope bash-plain Prism regex to unambiguous CLI subcommands only, removing generic bash builtins (run, add, get, set, start, stop, etc.) - Merge duplicate .theme-code-block CSS rules into a single declaration * fix(docs): prevent horizontal scroll on API docs pages The Redoc two-column layout (sidebar 300px + api-content 1300px) totals 1600px, expanding .main-wrapper beyond narrower viewports because it has overflow:visible. Clips at .main-wrapper using the html.plugin-redoc class that Docusaurus adds on API pages only. * fix(docs): API docs sidebar and layout fixes - Disable Redoc built-in search (disableSearch: true) - Pin sidebar top to navbar height (top: 60px) so it never hides behind navbar - Remove hardcoded #111 background from dark mode sidebar * fix(docs): render markdown correctly in API docs descriptions The _clean_descriptions function was converting newlines to
tags, mixing HTML with Markdown. CommonMark stops parsing Markdown headings (###) inside HTML blocks, causing them to appear as literal text in Redoc. Replace the
conversion with a simple strip() so descriptions remain pure Markdown and Redoc renders headings, lists, and code blocks correctly. * feat(docs): align API docs colors with Langflow brand - Set primaryColor to #F471B5 (Langflow pink) - Add HTTP method badge colors matching Langflow palette - Set schema.linesColor and requireLabelColor to brand pink - Set inline code color to pink, headers to #e3e3e3 - Set sidebar background to #18181b (matches frontend dark bg) - Set rightPanel background to #0d0d0f, codeBlock to #161618 - Refactor: move color config from CSS to theme.theme where safe - Remove dead search input CSS (search disabled via disableSearch:true) - Consolidate duplicate .menu-content rules * wip(docs): API docs styling — colors, components, light/dark themes * fix(docs): fix Response samples h3 title padding and refactor HTTP method button CSS * feat(docs): add sidebar dark background, active item styles, and right panel color adjustments * fix(docs): add sidebar borders and remove operation divider border * fix(docs): fix expanded response background and align dark/light theme colors * refactor(docs): standardize selectors, comments and remove duplicate rules in redocusaurus.css * refactor(docs): apply PR review — CSS custom properties, version pin, dom version comments, fix overflow * fix(docs): fix Redocly badge visibility covered by sidebar background * fix(docs): extend sidebar border-right to Redocly badge area * refactor(docs): replace hardcoded #ffffff label color with --redoc-text-label variable * fix(docs): lighten inline code background in API docs dark theme Redoc's default typography.code.backgroundColor (rgba(38, 50, 56, 0.05)) is nearly invisible over the dark background. Override it with rgba(255, 255, 255, 0.05) in dark theme only, excluding pre > code so code sample blocks stay unaffected. * feat(docs): align docs primary pink with API spec brand color Use #f471b5 (API spec primaryColor) as --ifm-color-primary in dark theme and #e44fa0 (slightly darkened for contrast on white) in light theme. Remove dark-theme pink overrides in sidebar.css (#ff6ad0 CTA and hsla(329, 55%, 68%) active TOC link) — they compensated for the old muted pink and are redundant now that the primary itself is bright. * feat(docs): lighten dark theme text colors for better readability Bump body text (#a8a8b0 -> #bcbcc4), headings (#cdcdd4 -> #dcdce2) and sidebar menu (#8a8a92 -> #9c9ca4) one step brighter. * chore(docs): add IBM Equal Access accessibility-checker setup Add accessibility-checker as devDependency with aceconfig.js (policy IBM_Accessibility, JSON reports in docs/a11y-results/, gitignored). Scan with: npx achecker against a built docs site. * fix(docs): WCAG AA contrast and ARIA fixes across docs and API reference Validated with IBM Equal Access scans (light theme): home, quickstart and component pages at 0 violations; /api from 3382 down to 167 (all remaining are Redoc-internal DOM: schema table headers, svg/select labels). Docs site: - Light primary pink #d11074 — passes 4.5:1 on white and inline-code bg - Light Prism palette darkened per-token to pass 4.5:1 on #f9f9fd - TabItem swizzled to give tabpanels an accessible name (aria-label) - codeBlockA11y client module: scrollable code blocks get role=region + unique label; non-scrollable ones lose the needless tabindex API reference (Redocusaurus): - redocA11y client module: role=main on api-content, role=navigation on sidebar — fixes 1924 aria_content_in_landmark violations - HTTP method badges and response chips darkened to pass with white text - Light-theme overrides: accessible pink #cd1072 for links, required markers, constraint chips, schema tree lines; darker grays for utility buttons and type labels (incl. 0.7-opacity wrapper fix) - Sidebar active/hover items use regular text color, method badges keep their own colors; expandable property names match non-expandable ones * fix(docs): WCAG AA contrast fixes for dark theme Validated with IBM Equal Access scans in dark mode (temporary colorMode.defaultMode flip during scanning): home, quickstart and component pages at 0 violations; /api matches light at 167 remaining (all Redoc-internal DOM: table headers, svg/select labels). - Code block comments/line numbers #4a5060 -> #798197 (4.56:1 on #18181a) - Redoc dark sample tokens: boolean/null #e95c59, number #5392b8 - Status-code tabs: lift docusaurus-theme-redoc's #303846 !important selected-tab rule with a higher-specificity override - oneOf variant buttons: dark text in both themes (their white/pink backgrounds are theme-independent) - redocA11y client module: patch response chip colors (success green / error red) to dark-accessible variants when data-theme=dark — a single Redoc theme color cannot pass on both light and dark derived backgrounds, and status is only distinguishable by computed color * fix(docs): resolve remaining Redoc-internal accessibility violations Extend the redocA11y client module with semantic patches for Redoc DOM the theme cannot reach (validated: 0 IBM Equal Access violations on all scanned pages in both light and dark themes): - Decorative svg chevrons/arrows: aria-hidden=true (svg_graphics_labelled) - Content-type dropdowns: aria-label (input_label_exists) - Schema field tables (2-col name|description layout, no anywhere): role=presentation — content reads in DOM order; role=rowheader on is invalid ARIA inside a native table (table_headers_exists/related) - Semantic patches run on the next animation frame after DOM changes so Redoc's lazy-rendered operations are covered immediately; the heavier color patch stays debounced * ci(docs): gate docs accessibility with IBM Equal Access scans Add test-docs-accessibility job to docs_test.yml (rides the existing docs/** path filter from ci.yml): build + scan 4 representative pages (home, quickstart, component page, /api) in light theme, then flip colorMode.defaultMode to dark, rebuild and scan again. - scripts/a11y-ci.sh: serves the build and runs npx achecker per page with one retry to absorb Redoc lazy-render timing flakes; any real violation fails the job (failLevels: violation) - aceconfig.js: pin ruleArchive to 19May2026 so IBM rule updates don't break CI without a deliberate bump * ci(docs): fix Chrome sandbox launch on Ubuntu 24.04 runners Ubuntu 24.04 restricts unprivileged user namespaces via AppArmor, which prevents puppeteer's Chrome (used by the IBM checker) from starting its sandbox. Re-enable them with the documented sysctl workaround instead of weakening the browser with --no-sandbox. * fix(docs): align response status code with description text Redoc sets vertical-align: top and a smaller line-height on the status code inside response buttons, leaving "200" visually higher than "Successful Response". Align both to the shared text baseline. * refactor(docs): apply PR review feedback - redocA11y: match only real Redoc routes (/api, /api/workflow) — a bare startsWith("/api") also matched docs pages like /api-request and leaked one body MutationObserver per navigation - codeBlockA11y: also observe the hidden attribute — Docusaurus tabs toggle panels via hidden (no childList mutation), so scrollable blocks inside an initially hidden tab were never re-evaluated for tabindex - Extract Prism themes to src/prismThemes.js (docusaurus.config.js was past the 600-line red flag) - concepts-components.mdx (current + 1.9.0 + 1.8.0): comment pointing hardcoded snippets to recursive_character.py to mitigate drift Validated: clean build + IBM Equal Access scans 4/4 passing. * replace-openapi-file-with-1.10 * migrate-prism-changes-to-1.10-version * a11y-script-dont-block --------- Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com> --- .github/workflows/docs_test.yml | 45 + .gitignore | 3 + docs/README.md | 18 +- docs/aceconfig.js | 23 + docs/css/code.css | 136 +-- docs/css/custom.css | 1 + docs/css/redocusaurus.css | 529 ++++++++++- docs/css/sidebar.css | 10 - docs/css/tokens.css | 17 +- docs/docs/API-Reference/api-build.mdx | 38 +- docs/docs/API-Reference/api-files.mdx | 112 +-- docs/docs/API-Reference/api-flows-run.mdx | 34 +- docs/docs/API-Reference/api-flows.mdx | 72 +- docs/docs/API-Reference/api-logs.mdx | 18 +- docs/docs/API-Reference/api-monitor.mdx | 76 +- .../API-Reference/api-openai-responses.mdx | 56 +- docs/docs/API-Reference/api-projects.mdx | 60 +- .../api-reference-api-examples.mdx | 40 +- docs/docs/API-Reference/api-users.mdx | 50 +- docs/docs/API-Reference/workflows-api.mdx | 26 +- docs/docs/Components/concepts-components.mdx | 67 +- docs/docusaurus.config.js | 79 +- docs/openapi/generate_openapi.py | 9 +- docs/package-lock.json | 857 ++++++++++++++++-- docs/package.json | 6 +- docs/scripts/a11y-ci.sh | 39 + docs/src/clientModules/codeBlockA11y.js | 54 ++ docs/src/clientModules/redocA11y.js | 142 +++ docs/src/components/CodeSnippet.tsx | 168 ---- docs/src/prismThemes.js | 45 + docs/src/theme/TabItem/index.tsx | 30 + docs/src/theme/TabItem/styles.module.css | 7 + docs/src/theme/prism-include-languages.js | 52 ++ .../API-Reference/api-build.mdx | 38 +- .../API-Reference/api-files.mdx | 112 +-- .../API-Reference/api-flows-run.mdx | 34 +- .../API-Reference/api-flows.mdx | 72 +- .../version-1.10.0/API-Reference/api-logs.mdx | 18 +- .../API-Reference/api-monitor.mdx | 76 +- .../API-Reference/api-openai-responses.mdx | 56 +- .../API-Reference/api-projects.mdx | 60 +- .../api-reference-api-examples.mdx | 40 +- .../API-Reference/api-users.mdx | 50 +- .../API-Reference/workflows-api.mdx | 26 +- .../Components/concepts-components.mdx | 66 +- .../Components/concepts-components.mdx | 67 +- .../version-1.9.0/API-Reference/api-build.mdx | 38 +- .../version-1.9.0/API-Reference/api-files.mdx | 112 +-- .../API-Reference/api-flows-run.mdx | 34 +- .../version-1.9.0/API-Reference/api-flows.mdx | 72 +- .../version-1.9.0/API-Reference/api-logs.mdx | 18 +- .../API-Reference/api-monitor.mdx | 76 +- .../API-Reference/api-openai-responses.mdx | 56 +- .../API-Reference/api-projects.mdx | 60 +- .../api-reference-api-examples.mdx | 40 +- .../version-1.9.0/API-Reference/api-users.mdx | 50 +- .../API-Reference/workflows-api.mdx | 26 +- .../Components/concepts-components.mdx | 67 +- 58 files changed, 2975 insertions(+), 1308 deletions(-) create mode 100644 docs/aceconfig.js create mode 100755 docs/scripts/a11y-ci.sh create mode 100644 docs/src/clientModules/codeBlockA11y.js create mode 100644 docs/src/clientModules/redocA11y.js delete mode 100644 docs/src/components/CodeSnippet.tsx create mode 100644 docs/src/prismThemes.js create mode 100644 docs/src/theme/TabItem/index.tsx create mode 100644 docs/src/theme/TabItem/styles.module.css create mode 100644 docs/src/theme/prism-include-languages.js diff --git a/.github/workflows/docs_test.yml b/.github/workflows/docs_test.yml index ad7671a446..e7f851801c 100644 --- a/.github/workflows/docs_test.yml +++ b/.github/workflows/docs_test.yml @@ -36,3 +36,48 @@ jobs: - name: Build docs run: cd docs && npm run build + + test-docs-accessibility: + name: Docs Accessibility (IBM Equal Access) + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v6 + with: + ref: ${{ inputs.branch || github.ref }} + + - name: Allow Chrome sandbox (Ubuntu 24.04 AppArmor restriction) + # Ubuntu 24.04 runners restrict unprivileged user namespaces, which + # breaks Chrome's sandbox (used by the IBM checker via puppeteer). + # This re-enables them — the documented GitHub Actions workaround. + run: sudo sysctl -w kernel.apparmor_restrict_unprivileged_userns=0 + + - name: Setup Node.js + uses: actions/setup-node@v6 + with: + node-version: ${{ env.NODE_VERSION }} + cache: npm + cache-dependency-path: ./docs/package-lock.json + + - name: Install dependencies + run: cd docs && npm install + + - name: Build docs (light theme) + run: cd docs && npm run build + + - name: Scan light theme + run: cd docs && ./scripts/a11y-ci.sh + + - name: Rebuild with dark theme as default + # The IBM CLI scans the page in its default color mode, so the dark + # scan flips the Docusaurus default and rebuilds (build-only change, + # nothing is committed). + run: | + cd docs + sed -i 's/defaultMode: "light"/defaultMode: "dark"/; s/respectPrefersColorScheme: true/respectPrefersColorScheme: false/' docusaurus.config.js + rm -rf build .docusaurus + npm run build + + - name: Scan dark theme + run: cd docs && ./scripts/a11y-ci.sh diff --git a/.gitignore b/.gitignore index 2d237df1ab..c619923a01 100644 --- a/.gitignore +++ b/.gitignore @@ -195,6 +195,9 @@ instance/ # Sphinx documentation docs/_build/ +# IBM Equal Access accessibility scan results +docs/a11y-results/ + # PyBuilder target/ diff --git a/docs/README.md b/docs/README.md index 19e3cb1173..da1597334b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -24,23 +24,17 @@ $ npm run build This command generates static content into the `build` directory and can be served using any static contents hosting service, including `npm run serve`. -### Import code snippets from the repo with a line range +### Import code snippets from the repo -To pull a slice of a file into the docs, source the content with `raw-loader` and present the code with the `CodeSnippet` component. -For a working example, see the [Components overview](/concepts-components#component-code). +To embed source files directly in the docs, use `raw-loader` to import the file as a string and pass it to the native `CodeBlock` component. ```mdx -import CodeSnippet from "@site/src/components/CodeSnippet"; +import CodeBlock from "@theme/CodeBlock"; import customComponent from "!!raw-loader!@langflow/src/lfx/src/lfx/custom/custom_component/custom_component.py"; - + + {customComponent} + ``` ## Docusaurus Versioning diff --git a/docs/aceconfig.js b/docs/aceconfig.js new file mode 100644 index 0000000000..0871beb3f8 --- /dev/null +++ b/docs/aceconfig.js @@ -0,0 +1,23 @@ +// IBM Equal Access accessibility-checker configuration +// https://github.com/IBMa/equal-access/tree/master/accessibility-checker +module.exports = { + // Pinned rule archive — keeps CI deterministic (IBM updates "latest" + // independently of this repo). Bump deliberately, like any dependency. + ruleArchive: "19May2026", + // IBM_Accessibility maps to WCAG 2.1 AA + IBM requirements + policies: ["IBM_Accessibility"], + // Fail levels: what makes the scan exit non-zero (kept to real violations) + failLevels: ["violation"], + // Report levels: what gets written to the reports + reportLevels: [ + "violation", + "potentialviolation", + "recommendation", + "potentialrecommendation", + "manual", + ], + outputFormat: ["json"], + outputFolder: "a11y-results", + // Don't fail the run when a newer rule archive exists + ignoreArchiveVersionCheck: true, +}; diff --git a/docs/css/code.css b/docs/css/code.css index 57791dc4cb..99c23257aa 100644 --- a/docs/css/code.css +++ b/docs/css/code.css @@ -1,7 +1,78 @@ -/* Geist Mono (and other ligature-enabled fonts) merge ~= into one glyph in inline code */ -code, -pre code { - font-variant-ligatures: none; +.theme-code-block { + box-shadow: none !important; + border: 1px solid #1e2128; + border-radius: var(--ifm-global-radius); + overflow: hidden; + margin-bottom: 1.5rem; +} + +/* Keep inline code vertically aligned with surrounding text */ +:not(pre) > code { + vertical-align: baseline; +} + +html[data-theme="light"] :not(pre) > code { + border: none; +} + +/* ===================================================================== + Langflow custom code theme — CSS variables (dark/light switching). + ===================================================================== */ +:root, +html[data-theme="dark"] { + --lf-ch-bg: #18181a; + --lf-ch-fg: #c8ccd4; + --lf-ch-line-num: #798197; + --lf-ch-selection: #264f78; + --lf-ch-border: #1e2128; + --lf-ch-title-bg: #0b0d10; + --lf-ch-comment: #798197; + --lf-ch-string: #51d0a5; + --lf-ch-number: #ff9b7d; + --lf-ch-boolean: #f7c93e; + --lf-ch-import: #c791f1; + --lf-ch-keyword: #ffffff; + --lf-ch-function: #ed86bf; + --lf-ch-decorator: #e45287; + --lf-ch-variable: #c8ccd4; +} + +html[data-theme="light"] { + --lf-ch-bg: #f9f9fd; + --lf-ch-fg: #64748b; + --lf-ch-line-num: #607491; + --lf-ch-selection: #e2e8f0; + --lf-ch-border: #e2e4f0; + --lf-ch-title-bg: #f0f0f8; + --lf-ch-comment: #607491; + --lf-ch-string: #04835c; + --lf-ch-number: #c74b0a; + --lf-ch-boolean: #ae5f05; + --lf-ch-import: #7c3aed; + --lf-ch-keyword: #077d9a; + --lf-ch-function: #d82474; + --lf-ch-decorator: #be185d; + --lf-ch-variable: #64748b; +} + + +/* Light mode: Prism / theme-code-block overrides */ +html[data-theme="light"] .theme-code-block { + border-color: #e2e4f0; +} + +html[data-theme="light"] .theme-code-block pre { + background-color: #f9f9fd !important; +} + +html[data-theme="light"] .theme-code-block code { + color: #64748b !important; +} + +html[data-theme="light"] .theme-code-block div[class*="codeBlockTitle"] { + background: #f0f0f8; + border-bottom-color: #e2e4f0; + color: #64748b; } .docusaurus-highlight-code-line { @@ -11,20 +82,6 @@ pre code { padding: 0 var(--ifm-pre-padding); } -.ch-scrollycoding-content { - max-width: 55% !important; - min-width: 40% !important; -} - -.ch-scrollycoding-sticker { - max-width: 60% !important; - min-width: 45% !important; -} - -.ch-scrollycoding-step-content { - min-height: 70px; -} - /* ======================================== Code Blocks - Enhanced (Langfuse style) ======================================== */ @@ -44,16 +101,14 @@ pre code { border-bottom-color: #303038; } -/* Code block container */ -.theme-code-block { - border: 1px solid var(--ifm-color-emphasis-200); - border-radius: var(--ifm-global-radius); - overflow: hidden; - margin-bottom: 1.5rem; + +.theme-code-block pre, +.theme-code-block code { + line-height: 1.7; } [data-theme="dark"] .theme-code-block { - border-color: #303038; + border-color: #1e2128; } /* Line highlighting in code blocks */ @@ -64,34 +119,3 @@ pre code { padding: 0 var(--ifm-pre-padding); border-left: 3px solid var(--ifm-color-primary); } - -/* Code Hike + CodeSnippet: Code Hike uses height:100% on .ch-codeblock > * and omits overflow on the - wrapper when measured; we shrink-wrap the block (fixes
/Collapsible height) and put - overflow on only so the copy button stays in the corner while scrolling long lines. */ -.markdown .ch-codeblock { - min-width: 0; - max-width: 100%; - height: fit-content; - align-self: flex-start; -} - -.markdown .ch-codeblock .ch-code-wrapper { - min-width: 0; - box-sizing: border-box; - height: fit-content !important; - max-height: none !important; - min-height: 0; -} - -.markdown .ch-codeblock .ch-code-wrapper > .ch-code-scroll-parent { - display: block; - overflow-x: auto; - overflow-y: auto; - max-width: 100%; - min-width: 0; -} - -.markdown .ch-codeblock .ch-code-button { - right: calc(10px + 0.75rem); - z-index: 2; -} diff --git a/docs/css/custom.css b/docs/css/custom.css index acb5916fec..d6c86d30b4 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"); @import "./tokens.css"; @import "./layout.css"; @import "./navbar.css"; diff --git a/docs/css/redocusaurus.css b/docs/css/redocusaurus.css index 3fce69055c..897a58324d 100644 --- a/docs/css/redocusaurus.css +++ b/docs/css/redocusaurus.css @@ -1,55 +1,520 @@ /* ======================================== Redocusaurus / API Reference Pages + + NOTE: This file uses `!important` throughout because Redoc injects styles + via CSS-in-JS (Styled Components) with high specificity at runtime. + Plain selectors cannot override them — `!important` is intentional here. + + NOTE: Structural selectors (nth-child, first-child, etc.) target Redoc's + internal DOM layout. Tested against redocusaurus@2.5.0 / Redoc v2.x. + If Redoc is upgraded, verify these selectors still apply correctly. ======================================== */ -/* Remove Redoc's built-in left gutter so it aligns with the rest of the layout */ -.redocusaurus .menu-content { - padding-left: 0 !important; +/* ── Prevent horizontal scroll ───────────────────────────── */ +/* clip (not hidden) so position:sticky on sidebar/right panel still works */ + +html.plugin-redoc .main-wrapper { + overflow-x: clip; + width: 100%; } -/* Match sidebar font to site font */ -.redocusaurus .menu-content, -.redocusaurus [class*="SidebarDivider"], -.redocusaurus [class*="ApiItemName"] { +/* ── CSS custom properties ────────────────────────────────── */ +/* Centralizes all theme colors — change here, applies everywhere. */ + +html[data-theme='dark'] .redocusaurus { + --redoc-bg-primary: #111; + --redoc-bg-secondary: #18181b; + --redoc-bg-code: #161618; + --redoc-border-color: #303038; + --redoc-text-primary: #e3e3e3; + --redoc-text-muted: #cdcdd4; + --redoc-text-label: #ffffff; +} + +html[data-theme='light'] .redocusaurus { + --redoc-bg-primary: #f5f5f5; + --redoc-bg-secondary: #ffffff; + --redoc-bg-code: #f5f5f5; + --redoc-border-color: #e4e4e7; + --redoc-text-primary: #111827; + --redoc-text-muted: hsl(240, 4%, 46%); + --redoc-text-label: #111827; + /* Darkened brand pink — #f471b5 fails WCAG AA on light surfaces; + #cd1072 passes 4.5:1 on #fff, #f5f5f5, #ebebec and #f5f3f4 */ + --redoc-pink-a11y: #cd1072; +} + +/* ── Sidebar layout ───────────────────────────────────────── */ + +/* Redoc sets top:0 which overlaps the navbar */ +.redocusaurus .menu-content { + top: 60px !important; + padding-left: 0 !important; + border-right: none !important; font-family: var(--ifm-font-family-base) !important; } -/* Light theme Redoc sidebar */ -[data-theme="light"] .redocusaurus .menu-content { +/* ── Sidebar background ───────────────────────────────────── */ + +html[data-theme='dark'] .redocusaurus .menu-content { + background: var(--redoc-bg-secondary) !important; + border-right: 1px solid var(--redoc-border-color) !important; +} + +/* "API docs by Redocly" badge — position:fixed, background transparent from Redoc. + Give it a solid background so it renders above the sidebar. */ +html[data-theme='dark'] .redocusaurus a[href*="redocly"] { + background: var(--redoc-bg-secondary) !important; + display: block !important; + padding: 8px !important; + border-right: 1px solid var(--redoc-border-color) !important; +} + +html[data-theme='light'] .redocusaurus a[href*="redocly"] { background: var(--ifm-background-color) !important; - border-right: none !important; + display: block !important; + padding: 8px !important; + border-right: 1px solid var(--redoc-border-color) !important; } -/* Dark theme Redoc sidebar */ -[data-theme="dark"] .redocusaurus .menu-content { - background: #111 !important; - border-right: none !important; + +html[data-theme='light'] .redocusaurus .menu-content { + background: var(--ifm-background-color) !important; + border-right: 1px solid var(--redoc-border-color) !important; } -[data-theme="dark"] .redocusaurus { - background: #111 !important; +/* ── Sidebar active item ──────────────────────────────────── */ + +html[data-theme='dark'] .redocusaurus .menu-content label.active { + background-color: var(--redoc-bg-primary) !important; } -/* Redoc operation panels */ -[data-theme="dark"] .redocusaurus [class*="OperationTitle"], -[data-theme="dark"] .redocusaurus [class*="operation-type"] { - color: #cdcdd4; +html[data-theme='light'] .redocusaurus .menu-content label.active { + background-color: var(--redoc-bg-primary) !important; } -/* Redoc search input */ -.redocusaurus input[type="search"] { - border-radius: 8px; - font-family: var(--ifm-font-family-base); +/* ── Sidebar hover ────────────────────────────────────────── */ + +html[data-theme='light'] .redocusaurus .menu-content label:hover, +html[data-theme='light'] .redocusaurus .menu-content label:hover span:not([class*="operation-type"]), +html[data-theme='light'] .redocusaurus .menu-content li:hover > label { + color: var(--redoc-text-primary) !important; } -[data-theme="dark"] .redocusaurus input[type="search"] { - background: rgba(255, 255, 255, 0.04); - border-color: #303038; - color: #c6c6d1; +/* ── Central content background ───────────────────────────── */ + +html[data-theme='dark'] .redocusaurus { + background: var(--redoc-bg-primary) !important; } -/* Redoc code samples */ -[data-theme="dark"] .redocusaurus [class*="CodeSample"] pre { - background: #161618 !important; - border: 1px solid #303038; +html[data-theme='light'] .redocusaurus { + background: var(--redoc-bg-primary) !important; +} + +/* ── Dark theme headings ──────────────────────────────────── */ + +html[data-theme='dark'] .redocusaurus h1, +html[data-theme='dark'] .redocusaurus h2, +html[data-theme='dark'] .redocusaurus h3, +html[data-theme='dark'] .redocusaurus h4, +html[data-theme='dark'] .redocusaurus h5, +html[data-theme='dark'] .redocusaurus h6 { + color: var(--redoc-text-primary) !important; +} + +/* ── Expanded response/schema content background ──────────── */ +/* redocusaurus@2.5.0: button+div is the expanded schema panel */ + +html[data-theme='dark'] .redocusaurus div[id^='tag'] button + div, +html[data-theme='dark'] .redocusaurus div[id^='operation'] button + div { + background-color: var(--redoc-bg-secondary) !important; +} + +html[data-theme='light'] .redocusaurus div[id^='tag'] button + div, +html[data-theme='light'] .redocusaurus div[id^='operation'] button + div { + background-color: var(--redoc-bg-secondary) !important; +} + +/* ── Right panel background ───────────────────────────────── */ +/* redocusaurus@2.5.0: nth-child(2) of tag/operation is the right panel */ + +html[data-theme='dark'] .redocusaurus .api-content > div > div:nth-child(2), +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2), +html[data-theme='dark'] .redocusaurus div[id^='tag'] > div > div:nth-child(2) { + background: var(--redoc-bg-primary) !important; +} + +html[data-theme='light'] .redocusaurus .api-content > div > div:nth-child(2), +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2), +html[data-theme='light'] .redocusaurus div[id^='tag'] > div > div:nth-child(2), +html[data-theme='light'] .redocusaurus [class*="RightPanel"] { + background: var(--redoc-bg-primary) !important; +} + +/* ── HTTP method button wrapper ───────────────────────────── */ +/* redocusaurus@2.5.0: nth-child(1) of the right panel */ + +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(1) { + background: var(--redoc-bg-secondary) !important; + border: 1px solid var(--redoc-border-color) !important; + border-radius: 8px !important; +} + +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(1) { + background: var(--redoc-bg-secondary) !important; + border: 1px solid var(--redoc-border-color) !important; + border-radius: 8px !important; +} + +/* ── HTTP method button ───────────────────────────────────── */ +/* redocusaurus@2.5.0: button inside div:first-child of the right panel */ + +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:first-child > button { + background: var(--redoc-bg-secondary) !important; + border: none !important; + border-radius: 8px !important; + box-shadow: none !important; +} + +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:first-child > button { + background: var(--redoc-bg-secondary) !important; + border: none !important; + border-radius: 8px !important; + box-shadow: none !important; + color: var(--redoc-text-muted) !important; +} + +/* ── HTTP method dropdown ──────────────────────────────────── */ +/* redocusaurus@2.5.0: div>div inside the button wrapper */ + +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(1) > div > div { + background: var(--redoc-bg-secondary) !important; + border: 1px solid var(--redoc-border-color) !important; + border-bottom-left-radius: 8px !important; + border-bottom-right-radius: 8px !important; + box-shadow: none !important; + border-top: none !important; +} + +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(1) > div > div { + border-bottom-left-radius: 8px !important; + border-bottom-right-radius: 8px !important; + box-shadow: none !important; + border-top: none !important; +} + +/* ── Request + Response cards ─────────────────────────────── */ +/* redocusaurus@2.5.0: nth-child(2) and nth-child(3) of the right panel */ + +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2), +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) { + background: var(--redoc-bg-secondary) !important; + border: 1px solid var(--redoc-border-color) !important; + border-radius: 12px !important; + overflow: hidden !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; + margin-top: 12px !important; +} + +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2), +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) { + background: var(--redoc-bg-secondary) !important; + border: 1px solid var(--redoc-border-color) !important; + border-radius: 12px !important; + overflow: hidden !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; + margin-top: 12px !important; +} + +/* ── Status code tabs ─────────────────────────────────────── */ + +.redocusaurus .react-tabs__tab-list { + padding: 0 20px !important; + margin-top: 4px; +} + +html[data-theme='dark'] .redocusaurus .tab-success, +html[data-theme='dark'] .redocusaurus .tab-error, +html[data-theme='dark'] .redocusaurus .react-tabs__tab--selected { + background: var(--redoc-bg-secondary) !important; + border-color: var(--redoc-border-color) !important; +} + +html[data-theme='light'] .redocusaurus .tab-success, +html[data-theme='light'] .redocusaurus .tab-error, +html[data-theme='light'] .redocusaurus .react-tabs__tab--selected { + background: var(--redoc-bg-secondary) !important; + border-color: var(--redoc-border-color) !important; +} + +/* ── Card title (h3) ──────────────────────────────────────── */ +/* redocusaurus@2.5.0: h3 direct child of nth-child(2/3) of right panel */ + +.redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2) > h3 ~ div, +.redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) > h3 ~ div { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +.redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2) > h3, +.redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) > h3 { + padding-top: 12px !important; + padding-left: 16px !important; + padding-bottom: 12px !important; + margin: 0 !important; +} + +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2) > h3, +html[data-theme='dark'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) > h3 { + border-bottom: 1px solid var(--redoc-border-color) !important; +} + +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2) > h3, +html[data-theme='light'] .redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) > h3 { + border-bottom: 1px solid var(--redoc-border-color) !important; + color: var(--redoc-text-primary) !important; +} + +/* ── Tab panel content ────────────────────────────────────── */ +/* redocusaurus@2.5.0: structural selectors for content type / example area */ + +.redocusaurus .react-tabs__tab-panel--selected > div { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +.redocusaurus .react-tabs__tab-panel--selected > div > div, +.redocusaurus .react-tabs__tab-panel--selected > div > div > div:not(:last-child) { + display: flex !important; + flex-direction: column !important; + gap: 0.5rem !important; +} + +.redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) { + margin-top: 8px !important; +} + +/* Content type / Example labels */ +html[data-theme='dark'] .redocusaurus .react-tabs__tab-panel--selected > div > div > span, +html[data-theme='dark'] .redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) > div > span { + position: static !important; + font-size: 0.875rem !important; + color: var(--redoc-text-label) !important; +} + +html[data-theme='light'] .redocusaurus .react-tabs__tab-panel--selected > div > div > span, +html[data-theme='light'] .redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) > div > span { + position: static !important; + font-size: 0.875rem !important; + color: var(--redoc-text-primary) !important; +} + +/* Content type / Example value borders + text color */ +html[data-theme='dark'] .redocusaurus .react-tabs__tab-panel--selected > div > div:first-of-type > div:first-of-type, +html[data-theme='dark'] .redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) > div:last-child, +html[data-theme='dark'] .redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) > div:not(:last-child) > div { + border: 1px solid var(--redoc-border-color) !important; + border-radius: 6px !important; + background: transparent !important; + min-height: 20px !important; + padding: 8px !important; + color: var(--redoc-text-muted) !important; +} + +html[data-theme='light'] .redocusaurus .react-tabs__tab-panel--selected > div > div:first-of-type > div:first-of-type, +html[data-theme='light'] .redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) > div:last-child, +html[data-theme='light'] .redocusaurus .react-tabs__tab-panel--selected > div > div:nth-child(2) > div:not(:last-child) > div { + border: 1px solid var(--redoc-border-color) !important; + border-radius: 6px !important; + background: transparent !important; + min-height: 20px !important; + padding: 8px !important; + color: var(--redoc-text-muted) !important; +} + +/* Tab panel transparent so card bg shows through */ +.redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(2) .react-tabs__tab-panel--selected, +.redocusaurus div[id^='operation'] > div:nth-child(2) > div:nth-child(3) .react-tabs__tab-panel--selected { + background: transparent !important; +} + +/* ── Light theme syntax highlighting ──────────────────────── */ +/* All colors pass WCAG AA (4.5:1) on white sample backgrounds */ + +html[data-theme='light'] .redocusaurus .token.keyword { + color: #b75868 !important; +} + +html[data-theme='light'] .redocusaurus .token.punctuation { + color: rgb(113, 113, 122) !important; +} + +html[data-theme='light'] .redocusaurus .token.boolean, +html[data-theme='light'] .redocusaurus .token.null { + color: #e32c29 !important; +} + +html[data-theme='light'] .redocusaurus .token.number, +html[data-theme='light'] .redocusaurus .token.constant { + color: #427ca0 !important; +} + +html[data-theme='light'] .redocusaurus .token.literal-property.property, +html[data-theme='light'] .redocusaurus .token.string-property.property { + color: #427ca0 !important; +} + +html[data-theme='light'] .redocusaurus .token.string { + color: rgb(22, 130, 50) !important; +} + +html[data-theme='light'] .redocusaurus .token.operator { + color: #9f6d08 !important; +} + +html[data-theme='light'] .redocusaurus .token.property { + color: var(--redoc-text-muted) !important; +} + +/* ── Operation divider ────────────────────────────────────── */ + +.redocusaurus .api-content > div:not(:last-of-type)::after { + display: none !important; +} + +/* ── Light theme WCAG contrast overrides ──────────────────── */ +/* Redoc renders these with #f471b5 / #9c9ca2, which fail 4.5:1 on + light surfaces. Dark theme is unaffected (colors pass there). */ + +/* Inline code in descriptions (typography.code.color from config) */ +html[data-theme='light'] .redocusaurus *:not(pre) > code { + color: var(--redoc-pink-a11y) !important; +} + +/* "required" labels in schema tables (schema.requireLabelColor) */ +html[data-theme='light'] .redocusaurus td[kind='field'] > div { + color: var(--redoc-pink-a11y) !important; +} + +/* Classless utility buttons (Expand all / Collapse all, etc.). + Redoc dims their wrapper div to 0.7, lightening the effective color — + restore full opacity on the wrapper, not the button */ +html[data-theme='light'] .redocusaurus button:not([class]) { + color: #6c6c74 !important; +} + +html[data-theme='light'] .redocusaurus div:has(> button:not([class])) { + opacity: 1 !important; +} + +/* Links (Download button, server URLs) — primaryColor fails on light */ +html[data-theme='light'] .redocusaurus .api-content a { + color: var(--redoc-pink-a11y) !important; +} + +/* Schema tree lines (schema.linesColor #F471B5) — align with the + accessible pink on light so all pinks on the page match */ +html[data-theme='light'] .redocusaurus td[kind='field'] { + border-left-color: var(--redoc-pink-a11y) !important; +} + +html[data-theme='light'] .redocusaurus td[kind='field'] > span:not(.property-name)::before, +html[data-theme='light'] .redocusaurus td[kind='field'] > span:not(.property-name)::after { + background-color: var(--redoc-pink-a11y) !important; +} + +/* Expandable property names render inside a classless