pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-24 01:56:10 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
2159d04f5f2183f806536994906cf95e02b2fbad
langflow/docs/css/redocusaurus.css
Antônio Alexandre Borges Lima 415323ec6d docs: migrate code blocks to native Prism and restyle API reference pages (#13299) 
* 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 <br> tags,
mixing HTML with Markdown. CommonMark stops parsing Markdown headings
(###) inside HTML blocks, causing them to appear as literal text in Redoc.

Replace the <br> 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 <url> 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 <th> anywhere):
  role=presentation — content reads in DOM order; role=rowheader on <td>
  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 <strong> 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>
2026-06-12 13:58:04 +00:00

521 lines
22 KiB
CSS
Raw Blame History

/* ========================================
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.
======================================== */
/* ── 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%;
}
/* ── 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;
}
/* ── 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;
display: block !important;
padding: 8px !important;
border-right: 1px solid var(--redoc-border-color) !important;
}
html[data-theme='light'] .redocusaurus .menu-content {
background: var(--ifm-background-color) !important;
border-right: 1px solid var(--redoc-border-color) !important;
}
/* ── Sidebar active item ──────────────────────────────────── */
html[data-theme='dark'] .redocusaurus .menu-content label.active {
background-color: var(--redoc-bg-primary) !important;
}
html[data-theme='light'] .redocusaurus .menu-content label.active {
background-color: var(--redoc-bg-primary) !important;
}
/* ── 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;
}
/* ── Central content background ───────────────────────────── */
html[data-theme='dark'] .redocusaurus {
background: var(--redoc-bg-primary) !important;
}
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 <button> and pick up
button colors (gray in light via our rule, Redoc's #333 in dark) — match
the non-expandable property names in both themes */
.redocusaurus td[kind='field'] button span.property-name {
color: var(--ifm-font-color-base) !important;
}
/* Field markers (required / recursive) in schema tables */
html[data-theme='light'] .redocusaurus td[kind='field'] > span:not(.property-name),
html[data-theme='light'] .redocusaurus td[kind='field'] > div > div > span {
color: var(--redoc-pink-a11y) !important;
}
/* "required" badge inside section headings (Request Body schema: ... required) */
html[data-theme='light'] .redocusaurus .api-content h5 > div {
color: var(--redoc-pink-a11y) !important;
}
/* Field type labels (string, Array of strings) in description cells —
they sit on #ebebeb chips, so the gray is darker than the button one */
html[data-theme='light'] .redocusaurus td:not([kind]) > div > div > span {
color: #696971 !important;
}
/* Constraint chips (>= 1, [ 1 .. 200 ]) — rendered at 0.9 alpha by Redoc */
html[data-theme='light'] .redocusaurus td span:not([class]) > span {
color: var(--redoc-pink-a11y) !important;
}
/* Active sidebar item — Redoc leaves it white on the light surface.
Use the regular text color (no pink); keep HTTP method badges intact */
html[data-theme='light'] .redocusaurus .menu-content label.active,
html[data-theme='light'] .redocusaurus .menu-content label.active span:not([class*="operation-type"]) {
color: var(--redoc-text-primary) !important;
}
/* oneOf variant buttons (td div button — expandable property buttons are
direct td children and keep their own colors/arrows). Their backgrounds
are white (inactive) or primaryColor pink (active) in BOTH themes; dark
text passes 4.5:1 on both, while Redoc's white/pink text fails */
.redocusaurus td div button {
color: #111827 !important;
}
/* ── Inline code (dark) ───────────────────────────────────── */
/* Redoc's default typography.code.backgroundColor is rgba(38, 50, 56, 0.05),
nearly invisible over the dark background — lighten it for contrast.
:not(pre) keeps code sample blocks (pre > code) unaffected. */
html[data-theme='dark'] .redocusaurus *:not(pre) > code {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* ── Response button code alignment ───────────────────────── */
/* Redoc sets vertical-align: top + line-height: 20px on the status code
("200") while the description text is baseline-aligned with a taller
line-height, leaving the code visually higher than the phrase */
.redocusaurus button > strong {
vertical-align: baseline !important;
line-height: inherit !important;
}
/* ── Dark theme WCAG contrast overrides ───────────────────── */
/* Code sample tokens — Redoc defaults fail on the dark panel (#242426) */
html[data-theme='dark'] .redocusaurus .token.boolean,
html[data-theme='dark'] .redocusaurus .token.null {
color: #e95c59 !important;
}
html[data-theme='dark'] .redocusaurus .token.number,
html[data-theme='dark'] .redocusaurus .token.constant {
color: #5392b8 !important;
}
/* Status-code tabs — Redoc renders #303846 on the dark card.
docusaurus-theme-redoc ships `.redocusaurus ul > li.react-tabs__tab--selected
:not(.tab-error):not(.tab-success) { color: #303846 !important }` (0,4,2),
so the selected-tab override must outrank it in specificity */
html[data-theme='dark'] .redocusaurus .react-tabs__tab,
html[data-theme='dark'] .redocusaurus ul > li.react-tabs__tab--selected:not(.tab-error):not(.tab-success) {
color: var(--redoc-text-muted) !important;
}
/* ── Dark theme misc ──────────────────────────────────────── */
html[data-theme='dark'] .redocusaurus [class*="OperationTitle"],
html[data-theme='dark'] .redocusaurus [class*="operation-type"] {
color: var(--redoc-text-muted);
}
html[data-theme='dark'] .redocusaurus [class*="CodeSample"] pre {
background: var(--redoc-bg-code) !important;
border: 1px solid var(--redoc-border-color);
}
Reference in New Issue View Git Blame Copy Permalink