Shadow DOM Encapsulation & Styling
Custom CSS, Design Tokens & Shadow Parts (::part)
Because RapiDoc is built as a standard W3C Web Component, its markup resides inside an isolated Shadow DOM. Safely customize internal styles using CSS Custom Properties (Design Tokens) and standard CSS Shadow Parts (::part()) without breaking encapsulation.
Complete Reference
Design Tokens & Shadow Parts Catalog
Both CSS Custom Properties and CSS Shadow Parts are displayed below. Use the search bar or category filters to quickly locate specific tokens or elements across both catalogs.
Design System Tokens
1. CSS Custom Properties (72)
Layout & Geometry
Structural sizing, corner radiuses, scrollbars, and modal behavior.
| Custom Property | Default / Calculated Value | Description & Purpose |
|---|---|---|
| 0.25rem (responsive to radius attribute) | Global component corner radius derived from radius attribute (none, sm, md, lg, full). | |
| 4px (default) / 6px (md) / 8px (lg, full) | Compact corner radius for dialog boxes, code blocks, tables, and parameter sections. | |
| var(--radius) | Legacy alias for corner radius. | |
| 14px (default) / 13px (sm) / 16px (lg) | Base UI scaling unit governing element dimensions across the application. | |
| 18.75rem (default) / 17rem (sm) / 21rem (lg) | Width of the sidebar navigation panel, automatically responsive to the scale attribute. | |
| 0.4375rem 1rem 0.4375rem 0.625rem | Padding around navigation items in the sidebar (responsive to nav-item-spacing="compact" | "default" | "relaxed"). | |
| 60px | Maximum height constraint for images rendered inside the nav-logo slot. | |
| column (read/focused) / row (view) | Flex direction layout of documentation columns (row or column). | |
| 8px | Width and height of custom scrollbars. | |
| 400px / auto | Height of the response console preview area. | |
| 0 0 0 1px transparent, 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent) | Outline shadow applied to active interactive elements on keyboard focus. | |
| 240px | Minimum column width for property keys in schema tables. |
Typography & Scaling
Font families and font size scaling presets.
| Custom Property | Default / Calculated Value | Description & Purpose |
|---|---|---|
| Open Sans, Segoe UI, Tahoma, sans-serif | Primary sans-serif font family token (shadcn/ui compatible). | |
| var(--font-sans, "Open Sans", ...) | Primary font family for body text, headings, and navigation. | |
| Monaco, "Andale Mono", "Roboto Mono", Consolas, monospace | Monospace font family for code snippets, HTTP methods, paths, and schema models. | |
| 12px (default) / 11px (sm) / 14px (lg) | Small font size for parameter tables, badges, and metadata labels. | |
| 13px (default) / 12px (sm) / 15px (lg) | Base font size for monospace code blocks and syntax highlighters. | |
| 14px (default) / 13px (sm) / 16px (lg) | Primary body font size for paragraphs and descriptions. |
Surface & Semantic Colors
Modern semantic design tokens for canvas, cards, text, and muted surfaces.
| Custom Property | Default / Calculated Value | Description & Purpose |
|---|---|---|
| theme dependent (#09090b / #ffffff) | Primary canvas and main container background color. | |
| theme dependent (#fafafa / #09090b) | Primary foreground body text color. | |
| theme dependent (#18181b / #f4f4f5) | Surface background color for cards, request/response panels, and dialogs. | |
| theme dependent (#fafafa / #09090b) | Foreground text color inside cards, request panels, and dialogs. | |
| theme dependent (#27272a / #f4f4f5) | Muted surface background for inactive tabs, hovered rows, and code blocks. | |
| theme dependent (#a1a1aa / #71717a) | Secondary muted text color for subtitles, parameter hints, and metadata. | |
| oklch(from var(--background) calc(l - 0.04) c h) | Dynamically calculated hover surface background for sidebar navigation items and sections. | |
| var(--foreground) | Text color of sidebar navigation items and sections on hover. | |
| var(--primary) | Text color of selected/active sidebar navigation items in default left-bar mode. | |
| color-mix(in srgb, var(--primary) 25%, transparent) | Highlight background color for user-selected text. | |
| var(--foreground) | Text color inside user selections. |
Borders & Sizing Tokens
Dividers, line separators, inputs, and border radius tokens.
| Custom Property | Default / Calculated Value | Description & Purpose |
|---|---|---|
| theme dependent (#27272a / #e4e4e7) | Standard border color for dividers, tables, and cards. | |
| theme dependent (lighter than background in dark, darker in light) | Background color for text and file inputs, textareas, and code blocks. | |
| theme dependent (between border and background) | Border color for text and file inputs, textareas, and code blocks. | |
| var(--input-background) | Alias for --input-background. | |
| 0.25rem (responsive to radius attribute) | Border radius token for cards, inputs, buttons, and badges. |
Brand & Accent Colors
Primary brand highlights, button fills, focus rings, and method indicators.
| Custom Property | Default / Calculated Value | Description & Purpose |
|---|---|---|
| preset dependent (#f59e0b amber, #3b82f6 default) | Primary accent color for interactive actions, active navigation items, and buttons. | |
| preset dependent (#000000 / #ffffff) | High-contrast text color when placed on top of --primary. | |
| preset dependent (matches --primary) | Focus ring outline color on interactive elements. | |
| #3b82f6 (dark) / #2563eb (light) | HTTP GET method badge color in navigation and endpoint headers. | |
| #10b981 (dark) / #059669 (light) | HTTP POST method badge color in navigation and endpoint headers. | |
| #f59e0b (dark) / #d97706 (light) | HTTP PUT method badge color in navigation and endpoint headers. | |
| #ef4444 (dark) / #dc2626 (light) | HTTP DELETE method badge color in navigation and endpoint headers. | |
| #8b5cf6 (dark) / #7c3aed (light) | HTTP PATCH method badge color in navigation and endpoint headers. | |
| #eab308 (dark) / #b45309 (light) | HTTP HEAD method badge color in navigation and endpoint headers. | |
| #06b6d4 (dark) / #0891b2 (light) | HTTP OPTIONS method badge color in navigation and endpoint headers. | |
| #ec4899 (dark) / #db2777 (light) | HTTP TRACE method badge color in navigation and endpoint headers. | |
| #6366f1 (dark) / #4f46e5 (light) | HTTP QUERY method badge color in navigation and endpoint headers. | |
| #64748b (dark) / #475569 (light) | Fallback HTTP method badge color for custom methods in additionalOperations. | |
| #3b82f6 (dark) / #2563eb (light) | General informational blue accent token. | |
| #10b981 (dark) / #059669 (light) | General success green accent token. | |
| #f59e0b (dark) / #d97706 (light) | General warning orange accent token. | |
| #ef4444 (dark) / #dc2626 (light) | General destructive/danger red accent token. | |
| #8b5cf6 (dark) / #7c3aed (light) | General secondary accent purple token. | |
| #eab308 (dark) / #b45309 (light) | General caution yellow accent token. | |
| #ec4899 (dark) / #db2777 (light) | General highlight pink accent token. | |
| #d97706 (dark) / #92400e (light) | General earthy accent brown token. |
Code & Syntax Highlighting
Code blocks, inline tags, and syntax tokens.
| Custom Property | Default / Calculated Value | Description & Purpose |
|---|---|---|
| theme dependent | Background color for multi-line code sample panels. | |
| theme dependent | Default text color inside code blocks. | |
| #c4c6d1 (dark) / #475569 (light) | Text color for markdown descriptions, paragraphs, and list items. | |
| #c4c6d1 (dark) / #334155 (light) | Text color for inline `code` tags within descriptions. | |
| #3b3c45 (dark) / #e2e8f0 (light) | Background pill color for inline `code` tags within descriptions. | |
| theme dependent | Syntax color for JSON/YAML object keys and properties. | |
| theme dependent | Syntax color for language keywords (import, function, if). | |
| theme dependent | Syntax color for syntax operators and punctuation. | |
| theme dependent | Token color for code comments. | |
| theme dependent | Token color for syntax keywords. | |
| theme dependent | Token color for language operators. | |
| theme dependent | Token color for string literals. | |
| theme dependent | Token color for numeric constants and booleans. | |
| theme dependent | Token color for function and method identifiers. | |
| theme dependent | Token color for data type identifiers. | |
| theme dependent | Token color for variable names. | |
| theme dependent | Token color for object property keys. |
Shadow Boundary Piercing
2. CSS Shadow Parts (83)
Navigation Sidebar
Parts for customizing the sidebar navigation panel, filter inputs, and route links.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <nav> | Outer navigation sidebar container. | |
| <div> | Header wrapper container inside the sidebar encapsulating the nav logo slot and filter search container. | |
| <button> | Mobile hamburger toggle button to open or collapse the navigation sidebar. | |
| <div> | Container wrapping the filter search input inside the navigation sidebar. | |
| <input> | Text input element used for real-time search filtering in the sidebar. | |
| <button> | Clear button inside the sidebar search input. | |
| <div> | Scrollable inner container holding all tags, endpoints, and markdown headings. | |
| <div> | Base part applied to every clickable item in the navigation sidebar. | |
| <div> | Sidebar item pointing to the API Overview section. | |
| <div> | Sidebar item pointing to the API Servers section. | |
| <div> | Sidebar item pointing to the Authentication section. | |
| <div> | Sidebar item pointing to the top of the operations list. | |
| <div> | Sidebar item representing an OpenAPI tag heading. | |
| <div> | Sidebar item representing an individual endpoint operation (e.g., GET /users). |
Header & Branding
Parts for the top utility header, logo slot, and dynamic spec loader.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <header> | Top utility header bar container. | |
| <slot> | Slot container for the brand logo or icon. | |
| <div> | Title text displayed in the header bar. | |
| <input> | Input field for entering an OpenAPI specification URL dynamically. | |
| <input> | Search filter input in the header bar. |
Main Canvas & Overview
Parts for the primary document canvas, spec title, and info anchors.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <main> | The primary scrollable document canvas wrapper. | |
| <div> | Top introductory overview section containing API metadata, description, and contact info. | |
| <div> | The main API title heading inside the overview section. | |
| <a> | Contact email, license, and terms of service links in the overview. |
Servers & Environments
Parts for server environment controls, selection, and URL variable templates.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <div> | Container for server selection and environment controls. | |
| <div> | Title heading for the API Servers section. | |
| <div> | Label displaying the currently selected base server URL. | |
| <input> | Input fields for server URL template variables. |
Authentication & Security
Parts for authentication credentials, OAuth2 scopes, and security modals.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <div> | Container for authentication credentials and security scheme panels. | |
| <div> | Wrapper for OAuth2 authorization scope options. | |
| <input type='checkbox'> | Checkbox for selecting individual OAuth2 permission scopes. | |
| <input> | Input field for the OAuth2 client ID. | |
| <input> | Input field for the OAuth2 client secret. | |
| <input> | Username input field for HTTP Basic or password authentication. | |
| <input> | Password input field for HTTP Basic or password authentication. |
Operations & Endpoints
Parts for endpoint headers, method badges, paths, summaries, and dividers.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <section> | Tag group container grouping multiple related operations. | |
| <div> | Header title displayed for an OpenAPI tag. | |
| <div> | Text label for the tag title. | |
| <section> | Container wrapping all operations belonging to a tag. | |
| <article> | Single endpoint operation container. | |
| <div> | Tag badge/indicator rendered within the operation header. | |
| <div> | Container holding both the request configuration and response viewing panels. | |
| <div> | Panel containing request parameters, headers, and payload inputs. | |
| <h2> | Summary heading for the operation. | |
| <span> | HTTP method label badge (e.g., GET, POST, PUT, DELETE). | |
| <span> | Endpoint URI route path. | |
| <span> | Status badge on endpoint (e.g., deprecated, webhook). | |
| <div> | Horizontal divider separating operations in read mode. | |
| <div> | Header row of an expanded endpoint in view or focused mode. | |
| <div> | Header row of a collapsed endpoint in view mode. | |
| <div> | HTTP method badge in the endpoint header row. | |
| <div> | Path text in the endpoint header row. | |
| <div> | Short summary description in the endpoint header row. | |
| <div> | Full body container of an expanded endpoint. | |
| <div> | Body container when an endpoint is collapsed. | |
| <div> | Summary title inside the expanded endpoint body. | |
| <div> | Full markdown description inside the expanded endpoint body. |
Interactive Console & Buttons
Parts for the Try console, buttons, response panels, and action triggers.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <div> | Container wrapping the Try, Clear, and Execute action buttons. | |
| <button> | Base part applied to all buttons across RapiDoc. | |
| <button> | The primary 'TRY' execution button. | |
| <button> | Solid filled buttons (e.g., primary actions, search, copy). | |
| <button> | Outlined secondary buttons. | |
| <button> | Button to clear request parameter fields. | |
| <button> | Button to clear returned response data. | |
| <button> | Copy-to-clipboard button on code blocks and responses. | |
| <button> | Search submit button in filter dialogues and headers. | |
| <button> | HTTP response status code selector buttons (e.g., 200, 400, 404). | |
| <button> | The currently active HTTP response status button. |
Tabs & Code Panels
Parts for switching between Request/Response tabs, Example/Schema, and languages.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <div> | Container panel wrapping tab controls and content. | |
| <div> | Row of tab selector buttons. | |
| <button> | Individual tab button. | |
| <div> | Body container of the active tab. |
Inputs & Form Fields
Parts for parameter inputs, textareas, file pickers, and checkboxes.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <input> | Standard text input field. | |
| <input> | Input field for query, path, and header parameters. | |
| <textarea> | Standard multi-line text input field. | |
| <textarea> | Multi-line text input for request bodies and payload parameters. | |
| <input type='file'> | File upload input element for multipart forms. | |
| <input type='checkbox'> | Standard checkbox input. | |
| <a> | General links throughout the documentation. | |
| <a> | Link to populate an example value into parameter inputs. | |
| <a> | Link displaying schema constraints (minimum, maximum, pattern, enum). |
Schema & Data Types
Parts for schema descriptions, tree toolbars, and badges.
Part Name (::part) | HTML Element | Description & Purpose |
|---|---|---|
| <span> | Markdown description text inside schema definitions. | |
| <div> | Controls on schema cards (expand, collapse, view options). | |
| <div> | Toggle button to expand or collapse multi-line descriptions. |
Looking for Named HTML Slots or Theme Presets?
Inject corporate logos, banners, headers, and footers with standard Web Component slots, or configure declarative color presets in our Themes guide.