@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/src/globalStyle.ts

@@ -1,1016 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-import { darkMode } from '@theme/ui/darkColors';
-import { breakpoints } from '@portal/media-css';
-import { footer } from '@theme/components/Footer';
-import { sidebar, versionPicker } from '@theme/components/Sidebar';
-import { breadcrumbs } from '@theme/components/Breadcrumbs';
-import { button } from '@theme/components/Button';
-import { tag } from '@theme/components/Tag';
-import { toc } from '@theme/components/TableOfContent';
-import { navbar } from '@theme/components/Navbar';
-import { search } from '@theme/components/Search';
-import { catalog } from '@theme/components/Catalog/styledVariables'; // NOTE: For some reason only direct import works here
-import { filter } from '@theme/components/Filter';
-import { menu, mobileMenu } from '@theme/components/Menu';
-import { apiReferencePanels, responsePanelColors } from '@theme/components/Panel';
-import { code } from '@theme/components/CodeBlock';
-import { product, productPicker } from '@theme/components/Product';
-import { languagePicker } from '@theme/i18n';
-import { select } from '@theme/components/Select';
-import { userProfile, userProfileDropdown } from '@theme/components/Profile';
-import { dropdown } from '@theme/components/Dropdown';
-import { admonition, markdown, mermaid } from '@theme/components/Markdown';
-import { tooltip } from '@theme/components/Tooltip';
-import { lastUpdated } from '@theme/components/LastUpdated';
-import { logo } from '@theme/components/NavbarLogo';
-
-const themeColors = css`
-  /* === Palette === */
-  /**
-    * @tokens Base Colors
-    * @presenter Color
-    */
-
-  --color-red-1: #fff1f0;
-  --color-red-2: #ffccc7;
-  --color-red-3: #ffa39e;
-  --color-red-4: #ff7875;
-  --color-red-5: #ff4d4f;
-  --color-red-6: #f5222d;
-  --color-red-7: #cf1322;
-  --color-red-8: #a8071a;
-  --color-red-9: #820014;
-  --color-red-10: #5c0011;
-
-  --color-green-1: #f6ffed;
-  --color-green-2: #d9f7be;
-  --color-green-3: #b7eb8f;
-  --color-green-4: #95de64;
-  --color-green-5: #73d13d;
-  --color-green-6: #49aa19;
-  --color-green-7: #389e0d;
-  --color-green-8: #237804;
-  --color-green-9: #135200;
-  --color-green-10: #092b00;
-
-  --color-gold-1: #fffbe6;
-  --color-gold-2: #fff1b8;
-  --color-gold-3: #ffe58f;
-  --color-gold-4: #ffd666;
-  --color-gold-5: #ffc53d;
-  --color-gold-6: #faad14;
-  --color-gold-7: #d48806;
-  --color-gold-8: #ad6800;
-  --color-gold-9: #874d00;
-  --color-gold-10: #613400;
-
-  --color-blue-1: #e6f4ff;
-  --color-blue-2: #bae0ff;
-  --color-blue-3: #91caff;
-  --color-blue-4: #69b1ff;
-  --color-blue-5: #4096ff;
-  --color-blue-6: #1677ff;
-  --color-blue-7: #0958d9;
-  --color-blue-8: #003eb3;
-  --color-blue-9: #002c8c;
-  --color-blue-10: #001d66;
-
-  --color-purple-1: #f9f0ff;
-  --color-purple-2: #efdbff;
-  --color-purple-3: #d3adf7;
-  --color-purple-4: #b37feb;
-  --color-purple-5: #9254de;
-  --color-purple-6: #722ed1;
-  --color-purple-7: #531dab;
-  --color-purple-8: #391085;
-  --color-purple-9: #22075e;
-  --color-purple-10: #120338;
-
-  --color-magenta-1: #fff0f6;
-  --color-magenta-2: #ffd6e7;
-  --color-magenta-3: #ffadd2;
-  --color-magenta-4: #ff85c0;
-  --color-magenta-5: #f759ab;
-  --color-magenta-6: #eb2f96;
-  --color-magenta-7: #c41d7f;
-  --color-magenta-8: #9e1068;
-  --color-magenta-9: #780650;
-  --color-magenta-10: #520339;
-
-  --color-cyan-1: #e6fffb;
-  --color-cyan-2: #b5f5ec;
-  --color-cyan-3: #87e8de;
-  --color-cyan-4: #5cdbd3;
-  --color-cyan-5: #36cfc9;
-  --color-cyan-6: #13c2c2;
-  --color-cyan-7: #08979c;
-  --color-cyan-8: #006d75;
-  --color-cyan-9: #00474f;
-  --color-cyan-10: #002329;
-
-  --color-yellow-1: #feffe6;
-  --color-yellow-2: #ffffb8;
-  --color-yellow-3: #fffb8f;
-  --color-yellow-4: #fff566;
-  --color-yellow-5: #ffec3d;
-  --color-yellow-6: #d8bd14;
-  --color-yellow-7: #d4b106;
-  --color-yellow-8: #ad8b00;
-  --color-yellow-9: #876800;
-  --color-yellow-10: #614700;
-
-  --color-lime-1: #fcffe6;
-  --color-lime-2: #f4ffb8;
-  --color-lime-3: #eaff8f;
-  --color-lime-4: #d3f261;
-  --color-lime-5: #bae637;
-  --color-lime-6: #a0d911;
-  --color-lime-7: #7cb305;
-  --color-lime-8: #5b8c00;
-  --color-lime-9: #3f6600;
-  --color-lime-10: #254000;
-
-  --color-geekblue-1: #f0f5ff;
-  --color-geekblue-2: #d6e4ff;
-  --color-geekblue-3: #adc6ff;
-  --color-geekblue-4: #85a5ff;
-  --color-geekblue-5: #597ef7;
-  --color-geekblue-6: #2f54eb;
-  --color-geekblue-7: #1d39c4;
-  --color-geekblue-8: #10239e;
-  --color-geekblue-9: #061178;
-  --color-geekblue-10: #030852;
-
-  --color-primary-bg: #ebf0ff;
-  --color-primary-bg-hover: #d6dfff;
-  --color-primary-border: #adbcff;
-  --color-primary-border-hover: #8a99ff;
-  --color-primary-hover: #6678ff;
-  --color-primary-base: #434dfa;
-  --color-primary-active: #2f31d4;
-  --color-primary-text-hover: #201dad;
-  --color-primary-text: #161087;
-  --color-primary-text-active: #0d086e;
-
-  --color-success-bg: var(--color-cyan-1);
-  --color-success-bg-hover: var(--color-cyan-2);
-  --color-success-border: var(--color-cyan-3);
-  --color-success-border-hover: var(--color-cyan-4);
-  --color-success-hover: var(--color-cyan-5);
-  --color-success-base: var(--color-cyan-6);
-  --color-success-active: var(--color-cyan-7);
-  --color-success-text-hover: var(--color-cyan-8);
-  --color-success-text: var(--color-cyan-9);
-  --color-success-text-active: var(--color-cyan-10);
-
-  --color-warning-bg: var(--color-gold-1);
-  --color-warning-bg-hover: var(--color-gold-2);
-  --color-warning-border: var(--color-gold-3);
-  --color-warning-border-hover: var(--color-gold-4);
-  --color-warning-hover: var(--color-gold-5);
-  --color-warning-base: var(--color-gold-6);
-  --color-warning-active: var(--color-gold-7);
-  --color-warning-text-hover: var(--color-gold-8);
-  --color-warning-text: var(--color-gold-9);
-  --color-warning-text-active: var(--color-gold-10);
-
-  --color-error-bg: var(--color-red-1);
-  --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-7);
-  --color-error-border-hover: var(--color-red-4);
-  --color-error-hover: var(--color-red-5);
-  --color-error-base: var(--color-red-6);
-  --color-error-active: var(--color-red-7);
-  --color-error-text-hover: var(--color-red-8);
-  --color-error-text: var(--color-red-9);
-  --color-error-text-active: var(--color-red-10);
-
-  --color-info-bg: var(--color-blue-1);
-  --color-info-bg-hover: var(--color-blue-2);
-  --color-info-border: var(--color-blue-3);
-  --color-info-border-hover: var(--color-blue-4);
-  --color-info-hover: var(--color-blue-5);
-  --color-info-base: var(--color-blue-6);
-  --color-info-active: var(--color-blue-7);
-  --color-info-text-hover: var(--color-blue-8);
-  --color-info-text: var(--color-blue-9);
-  --color-info-text-active: var(--color-blue-10);
-
-  /**
-   * @tokens Main colors
-   * @presenter Color
-   */
-
-  --color-primary: var(--color-primary-base);
-  --color-error: var(--color-error-base);
-  --color-warning: var(--color-warning-base);
-  --color-success: var(--color-success-base);
-  --color-info: var(--color-info-base);
-
-  /**
-   * @tokens Elevation Colors
-   * @presenter Color
-   */
-
-  --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
-  --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
-  --bg-raised: #fafafa; // Cards, elements, inputs
-  --bg-raised-light: #fafafa; // Always light
-  --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
-  --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
-
-  --bg-base-shadow: 0px 3px 5px rgba(51, 51, 51, 0.2), 0px 0px 1px rgba(51, 51, 51, 0.31); // Elements
-  --bg-raised-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Hovers for base. Menu
-  --bg-overlay-shadow: 0px 18px 28px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Use for dropdowns
-
-  --background-color: var(--bg-base);
-
-  // @tokens End
-`;
-
-const typography = css`
-  /* === Typography === */
-
-  /**
-    * @tokens Font Families
-    * @presenter FontFamily
-    */
-
-  --font-family-base: Source Sans Pro, sans-serif; // Font family of the entire system.
-  --font-family-monospaced: Source Code Pro, monospace;
-
-  /**
-    * @tokens Font Colors
-    * @presenter Color
-    */
-
-  --text-base: #000; // The base color of the typography color tokens.
-  --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
-  --text-primary: #161616; // Headers, Icon hover
-  --text-secondary: #525252; // Body text
-  --text-description: #8d8d8d; // Caption, Description, Icon
-  --text-placeholder: #a8a8a8; // Placeholder text, Disabled text
-  --text-link: var(--color-blue-6);
-
-  /**
-    * @tokens Font Weights
-    * @presenter FontWeight
-    */
-
-  --font-weight-regular: 400; // All normal weight fonts in the entire system.
-  --font-weight-bold: 600; // All strong weights in the entire system.
-  --font-weight-bolder: 700;
-  --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.
-
-  /**
-   * @tokens Line Heights
-   * @presenter LineHeight
-   */
-
-  --line-height-base: 24px;
-  --line-height-xsm: 20px;
-  --line-height-sm: 22px;
-  --line-height-md: 26px;
-  --line-height-lg: 28px;
-  --line-height-xlg: 30px;
-  --line-height-xxlg: 32px;
-
-  /**
-    * @tokens Font Sizes
-    * @presenter FontSize
-    */
-
-  --font-size-base: 16px; // Base font size of the entire system.
-  --font-size-sm: 14px;
-  --font-size-lg: 18px;
-  --font-size-xl: 22px;
-
-  /**
-    * @tokens Font Rendering
-    */
-
-  --text-smoothing: antialiased; // text-smoothing
-  --text-rendering: optimizeSpeed; // text-rendering
-
-  // @tokens End
-`;
-
-const sizeAndSpace = css`
-  /* === Size & Space === */
-
-  /**
-    * @tokens Size
-    * @presenter Spacing
-    */
-
-  --container-width: 1200px;
-
-  /**
-    * @tokens Space
-    * @presenter Spacing
-    */
-
-  --spacing-unit: 4px;
-
-  --spacing-base: calc(var(--spacing-unit) * 4);
-  --spacing-xxs: var(--spacing-unit);
-  --spacing-xs: calc(var(--spacing-unit) * 2);
-  --spacing-sm: calc(var(--spacing-unit) * 3);
-  --spacing-md: calc(var(--spacing-unit) * 5);
-  --spacing-lg: calc(var(--spacing-unit) * 6);
-  --spacing-xl: calc(var(--spacing-unit) * 8);
-  --spacing-xxl: calc(var(--spacing-unit) * 12);
-
-  --spacing-horizontal: var(--spacing-xl);
-  --spacing-vertical: var(--spacing-base);
-
-  /**
-    * @tokens Height
-    * @presenter Spacing
-    */
-  --control-height-base: 32px; // The height of the default size controls such as buttons and inputs.
-  --control-height-xs: 16px; // The height of very small objects such as skeleton line or small multiple select item.
-  --control-height-sm: 24px; // The height of the small controls such as buttons or inputs.
-  --control-height-lg: 40px; // The height of the large controls such as buttons or inputs.
-
-  // @tokens End
-`;
-
-const borders = css`
-  /**
-    * @tokens Borders
-    * @presenter Border
-    */
-
-  --border-width: 1px;
-  --border-style: solid;
-
-  /**
-   * @tokens Border Colors
-   * @presenter Color
-   */
-
-  --border-primary: #00000021; // 13% opacity. Raised dividers
-  --border-secondary: #00000017; // 9% opacity. Default dividers, borders
-
-  /**
-   * @tokens Border Radius
-   * @presenter BorderRadius
-   */
-
-  --border-radius: 4px;
-  --border-radius-md: calc(var(--border-radius) * 1.5);
-  --border-radius-lg: calc(var(--border-radius) * 2);
-  --border-radius-xlg: calc(var(--border-radius) * 3);
-`;
-
-const headingsTypography = css`
-  * {
-    box-sizing: border-box;
-  }
-
-  /**
-    * @tokens Headings common styles
-    */
-
-  --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily
-  --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight
-  --heading-margin-top: 1.25em; // @presenter Spacing
-  --heading-margin-bottom: 0.9em; // @presenter Spacing
-  --heading-text-color: var(--text-primary); // @presenter Color
-
-  /**
-    * @tokens Typography heading anchor icon
-    */
-
-  --heading-anchor-offset-right: 4px; // @presenter Spacing
-  --heading-anchor-color: var(--color-primary); // @presenter Color
-  --heading-anchor-icon: none;
-
-  /**
-    * @tokens Heading level 1
-    */
-
-  --h1-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h1-font-size: 36px; // @presenter FontSize
-  --h1-line-height: 36px; // @presenter LineHeight
-  --h1-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h1-text-color: var(--heading-text-color); // @presenter Color
-  --h1-code-line-height: 60px; // @presenter LineHeight
-
-  /**
-    * @tokens Heading level 2
-    */
-
-  --h2-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h2-font-size: 28px; // @presenter FontSize
-  --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h2-text-color: var(--heading-text-color); // @presenter Color
-  --h2-code-line-height: 48px; // @presenter LineHeight
-
-  /**
-    * @tokens Heading level 3
-    */
-
-  --h3-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h3-font-size: 18px; // @presenter FontSize
-  --h3-line-height: 22px; // @presenter LineHeight
-  --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h3-text-color: var(--heading-text-color); // @presenter Color
-  --h3-code-line-height: var(--line-height-xxlg); // @presenter LineHeight
-
-  /**
-    * @tokens Heading level 4
-    */
-
-  --h4-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h4-font-size: 16px; // @presenter FontSize
-  --h4-line-height: 16px; // @presenter LineHeight
-  --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h4-text-color: var(--heading-text-color); // @presenter Color
-  --h4-code-line-height: var(--line-height-xlg); // @presenter LineHeight
-
-  /**
-    * @tokens Heading level 5
-    */
-
-  --h5-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h5-font-size: 14px; // @presenter FontSize
-  --h5-line-height: 14px; // @presenter LineHeight
-  --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h5-text-color: var(--heading-text-color); // @presenter Color
-  --h5-code-line-height: var(--line-height-lg); // @presenter LineHeight
-
-  /**
-    * @tokens Heading level 6
-    */
-
-  --h6-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h6-font-size: 12px; // @presenter FontSize
-  --h6-line-height: 12px; // @presenter LineHeight
-  --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h6-text-color: var(--heading-text-color); // @presenter Color
-  --h6-code-line-height: var(--line-height-md); // @presenter LineHeight
-
-  // @tokens End
-`;
-
-const links = css`
-  /**
-    * @tokens Links
-    */
-
-  --link-text-color: var(--color-blue-6); // @presenter Color
-  --link-decoration: none;
-  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
-
-  --link-hover-text-color: var(--color-blue-5); // @presenter Color
-  --link-hover-decoration: underline;
-
-  --link-active-decoration: none;
-  --link-active-text-color: var(--color-blue-7); // @presenter Color
-
-  --link-visited-text-color: var(--color-blue-7); // @presenter Color
-  --link-visited-decoration: none;
-
-  // @tokens End
-`;
-
-const apiReferenceDocs = css`
-  /* === ref docs and graphql docs specific === */
-
-  /**
-    * @tokens API Reference Schemas Layout
-    */
-
-  --layout-controls-margin: 20px; // @presenter Spacing
-  --layout-controls-height: 36px; // @presenter Spacing
-  --layout-controls-width: 36px; // @presenter Spacing
-
-  --layout-stacked-small-max-width: 90%;
-  --layout-stacked-medium-max-width: 75%;
-  --layout-stacked-large-max-width: 1200px;
-
-  --layout-three-panel-small-max-width: 100%;
-  --layout-three-panel-medium-max-width: 100%;
-  --layout-three-panel-large-max-width: 1800px;
-
-  --layout-panel-schemas-small-max-width: none;
-  --layout-panel-schemas-medium-max-width: none;
-  --layout-panel-schemas-large-max-width: none;
-
-  /**
-    * @tokens API Reference Schemas MimeType Dropdown
-    */
-
-  --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;
-  --schemas-mime-type-dropdown-border: var(--docs-dropdown-border); // @presenter Border
-  --schemas-mime-type-dropdown-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
-  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
-
-  /**
-    * @tokens API Reference Schemas Discriminator Dropdown
-    */
-
-  --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;
-  --schemas-discriminator-dropdown-border: 1px solid var(--border-primary); // @presenter Border
-  --schemas-discriminator-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
-  --schemas-discriminator-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
-
-  /**
-    * @tokens API Reference Schemas Titles
-    */
-
-  --schema-type-title-text-color: var(--text-secondary); // @presenter Color
-  --schema-type-text-color: var(--text-secondary); // @presenter Color
-  --schema-labels-font-size: 1em; // @presenter FontSize
-
-  /**
-    * @tokens API Reference Schemas Lines Color
-    */
-
-  --schemas-lines-color: var(--border-primary); // @presenter Color
-
-  /**
-    * @tokens API Reference Schema Inline code typography
-    */
-
-  --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily
-  --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize
-  --schema-inline-code-font-weight: var(--inline-code-font-weight); // @presenter FontWeight
-  --schema-inline-code-text-color: var(--text-secondary); // @presenter Color
-  --schema-inline-code-line-height: var(--inline-code-line-height); // @presenter LineHeight
-  --schema-inline-background-color: var(--bg-overlay); // @presenter Color
-  --schema-inline-border-color: var(--border-primary); // @presenter Color
-  --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
-
-  /**
-    * @tokens API Reference Schema Example Label colors
-    * @presenter Color
-    */
-
-  --schema-example-text-color: var(--schema-inline-code-text-color);
-  --schema-example-background-color: var(--schema-inline-background-color);
-  --schema-example-border-color: var(--schema-inline-border-color);
-
-  /**
-    * @tokens API Reference Schema Constraint Label colors
-    * @presenter Color
-    */
-
-  --schema-constraint-text-color: var(--schema-inline-code-text-color);
-  --schema-constraint-background-color: var(--schema-inline-background-color);
-  --schema-constraint-border-color: var(--schema-inline-border-color);
-
-  /**
-    * @tokens API Reference Schema Enum Label colors
-    * @presenter Color
-    */
-
-  --schema-enum-text-color: var(--schema-inline-code-text-color);
-  --schema-enum-background-color: var(--schema-inline-background-color);
-  --schema-enum-border-color: var(--schema-inline-border-color);
-
-  /**
-    * @tokens API Reference Schema Default Label colors
-    * @presenter Color
-    */
-
-  --schema-default-text-color: var(--schema-inline-code-text-color);
-  --schema-default-background-color: var(--schema-inline-background-color);
-  --schema-default-border-color: var(--schema-inline-border-color);
-
-  /**
-    * @tokens API Reference Schema Recursive Label colors
-    * @presenter Color
-    */
-
-  --schema-recursive-text-color: var(--color-warning-active); // @presenter Color
-  --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
-  --schema-recursive-border-color: var(--color-warning-active); // @presenter Color
-
-  /**
-    * @tokens GraphQL Docs Reference Schema Non null label
-    * @presenter Color
-    */
-
-  --schema-non-null-text-color: var(--schema-inline-code-text-color);
-  --schema-non-null-background-color: var(--schema-inline-background-color);
-  --schema-non-null-border-color: var(--schema-inline-border-color);
-
-  /**
-    * @tokens API Reference Schema Nested styles
-    */
-
-  --schema-nested-offset: 1em; // @presenter Spacing
-  --schema-nested-background-color: var(--bg-overlay); // @presenter Color
-
-  /**
-    * @tokens API Reference Schema Buttons
-    */
-
-  --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily
-  --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight
-  --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize
-
-  --schema-buttons-text-color: var(--text-secondary); // @presenter Color
-  --schema-buttons-background-color: transparent; // @presenter Color
-  --schema-buttons-border-color: var(--border-primary); // @presenter Color
-
-  --schema-buttons-hover-background-color: var(--bg-overlay); // @presenter Color
-  --schema-buttons-active-background-color: var(--bg-overlay); // @presenter Color
-
-  --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color
-  --schema-buttons-selected-background-color: var(--bg-overlay); // @presenter Color
-  --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color
-  --schema-buttons-selected-hover-background-color: var(--bg-overlay); // @presenter Color
-  --schema-buttons-selected-active-background-color: var(--bg-overlay); // @presenter Color
-
-  /**
-    * @tokens API Reference Schema Properties
-    */
-
-  --schemas-property-name-text-color: var(--text-primary); //@presenter Color
-  --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize
-  --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
-  --schemas-property-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --schemas-property-name-line-height: var(--line-height-sm); // @presenter LineHeight
-  --schemas-property-name-text-transform: none;
-
-  --schemas-property-deprecated-text-color: var(--text-primary); // @presenter Color
-
-  --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
-  --schema-property-required-label-text-color: var(--color-error); // @presenter Color
-  --schema-property-additional-label-text-color: var(--text-secondary); // @presenter Color
-  --schema-property-access-label-text-color: var(--text-secondary); // @presenter Color
-
-  --schema-property-details-width: 70%;
-
-  /**
-    * @tokens API Reference Schema Icons
-    */
-
-  --schema-chevron-color: var(--text-secondary); // @presenter Color
-  --schema-chevron-size: 9px;
-
-  --schema-property-deep-link-icon-color: var(--color-primary); // @presenter Color
-  --schema-property-deep-link-icon: none;
-
-  /**
-    * @tokens API Reference Other
-    */
-
-  --loading-spinner-color: var(--color-primary); // @presenter Color
-  --linear-progress-color: var(--color-info); // @presenter Color
-  --linear-progress-background-color: var(--color-info-bg); // @presenter Color
-
-  --fab-background-color: var(--color-primary); // @presenter Color
-  --fab-box-shadow: var(--bg-base-shadow); // @presenter Shadow
-
-  --fab-hover-background: var(--color-primary); // @presenter Color
-  --fab-hover-box-shadow: var(--bg-base-shadow); // @presenter Shadow
-
-  --fab-active-background: var(--color-primary); // @presenter Color
-  --fab-active-box-shadow: var(--bg-base-shadow); // @presenter Shadow
-
-  --fab-icon-color: var(--navbar-text-color); // @presenter Color
-
-  // @tokens End
-`;
-
-const badges = css`
-  /**
-    * @tokens Default Badge
-    */
-
-  --badge-text-color: var(--color-primary-text); // @presenter Color
-  --badge-background-color: var(--color-primary-bg); // @presenter Color
-  --badge-border-color: var(--color-primary-border); // @presenter Color
-  --badge-border: 1px solid var(--badge-border-color); // @presenter Border
-  --badge-border-radius: var(--border-radius); // @presenter BorderRadius
-
-  /**
-    * @tokens Deprecated Badge
-    */
-
-  --badge-deprecated-text-color: var(--color-warning-active); // @presenter Color
-  --badge-deprecated-background-color: var(--color-warning-bg); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-active); // @presenter Color
-  --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
-  --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
-
-  // @tokens End
-`;
-
-const loadProgressBar = css`
-  /**
-    * @tokens Load progress bar
-    */
-
-  --load-progress-bar-color: var(--color-info); // @presenter Color
-  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color),
-    0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow
-  --load-progress-bar-height: 2px; // @presenter Height
-
-  // @tokens End
-
-  /* Make clicks pass-through */
-  #nprogress {
-    pointer-events: none;
-  }
-
-  #nprogress .bar {
-    background: var(--load-progress-bar-color);
-
-    position: fixed;
-    z-index: var(--z-index-popover);
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: var(--load-progress-bar-height);
-  }
-
-  #nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0;
-    width: 100px;
-    height: 100%;
-    box-shadow: var(--load-progress-bar-shadow);
-    opacity: 1;
-
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
-  }
-
-  .nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
-  }
-
-  .nprogress-custom-parent #nprogress .bar {
-    position: absolute;
-  }
-`;
-
-const inputs = css`
-  /**
-    * @tokens Inputs
-    */
-
-  --input-text-color: var(--text-secondary); // @presenter Color
-  --input-background-color: var(--background-color); // @presenter Color
-  --input-border: 1px solid var(--border-primary); // @presenter Border
-  --input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --input-font-size: var(--font-size-base); // @presenter FontSize
-  --input-font-family: var(--font-family-base); // @presenter FontFamily
-  --input-line-height: 1.15em; // @presenter LineHeight
-  --input-padding: 8px;
-
-  --input-hover-text-color: var(--text-secondary); // @presenter Color
-  --input-hover-border: 1px solid var(--border-primary); // @presenter Border
-  --input-focus-border: 1px solid var(--border-primary); // @presenter Border
-  --input-focus-text-color: var(--text-secondary); // @presenter Color
-
-  --checkbox-backround-color: var(--bg-base);
-  --checkbox-checked-backround-color: var(--color-primary);
-
-  // @tokens End
-`;
-
-const docsDropdown = css`
-  --docs-dropdown-font-size: var(--font-size-base);
-  --docs-dropdown-text-color: var(--text-secondary);
-
-  --docs-dropdown-padding-vertical: 6px;
-  --docs-dropdown-padding-left: 10px;
-  --docs-dropdown-padding-right: 26px;
-  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right)
-    var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
-  --docs-dropdown-border: 1px solid var(--border-primary);
-`;
-
-const tile = css`
-  --wide-tile-background-color: var(--bg-raised);
-  --thin-tile-background-color: var(--bg-raised);
-`;
-
-const pages = css`
-  /**
-    * @tokens 404 Page
-    * @presenter Color
-    */
-
-  --page-404-font-family: var(--font-family-base); // @presenter FontFamily
-
-  --page-404-header-text-color: var(--h1-text-color);
-  --page-404-header-font-size: var(--h1-font-size); // @presenter FontSize
-  --page-404-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
-  --page-404-header-line-height: var(--h1-line-height); // @presenter LineHeight
-  --page-404-header-margin: 0px; // @presenter Spacing
-
-  --page-404-description-text-color: var(--text-secondary);
-  --page-404-description-font-size: 1.5em; // @presenter FontSize
-  --page-404-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-404-description-line-height: 1; // @presenter LineHeight
-  --page-404-description-margin: 0px; // @presenter Spacing
-
-  --page-404-button-margin: 4em; // @presenter Spacing
-
-  // @tokens End
-
-  /**
-    * @tokens 403 Page
-    * @presenter Color
-    */
-
-  --page-403-font-family: var(--font-family-base); // @presenter FontFamily
-
-  --page-403-header-text-color: var(--h1-text-color);
-  --page-403-header-font-size: var(--h1-font-size); // @presenter FontSize
-  --page-403-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
-  --page-403-header-line-height: var(--h1-line-height); // @presenter LineHeight
-  --page-403-header-margin: 0; // @presenter Spacing
-
-  --page-403-description-text-color: var(--text-secondary);
-  --page-403-description-font-size: 1.5em; // @presenter FontSize
-  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-403-description-line-height: 1; // @presenter LineHeight
-  --page-403-description-margin: 0; // @presenter Spacing
-
-  --page-403-button-margin: 4em; // @presenter Spacing
-
-  --page-403-oidc-description-font-size: var(--font-size-lg);
-  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
-
-  // @tokens End
-`;
-
-const error = css`
-  --error-bubble-padding: var(--spacing-md);
-  --error-bubble-bottom: var(--spacing-md);
-  --error-bubble-right: var(--spacing-md);
-  --error-bubble-max-width: 20%;
-  --error-bubble-mobile-max-width: 50%;
-  --error-bubble-text-overflow: ellipsis;
-  --error-bubble-gap: var(--spacing-base);
-  --error-bubble-font-family: var(--font-family-base);
-  --error-bubble-z-index: var(--z-index-popover);
-
-  --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
-  --error-card-background: var(--bg-raised);
-  --error-card-padding: var(--spacing-xs) var(--spacing-base);
-  --error-card-text-color: var(--text-primary);
-  --error-card-font-size: var(--font-size-base);
-  --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-regular);
-  --error-card-line-height: var(--line-height-base);
-  --error-card-box-shadow: var(--bg-raised-shadow);
-  --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
-
-  --detailed-error-overlay-background: #4f4f4f;
-  --detailed-error-overlay-opacity: 0.9;
-  --detailed-error-overlay-z-index: var(--z-index-raised);
-
-  --detailed-error-modal-width: 70%;
-  --detailed-error-modal-height: calc(100vh - 100px - var(--navbar-height));
-  --detailed-error-modal-top: calc(50px + var(--navbar-height));
-  --detailed-error-modal-left: 15%;
-  --detailed-error-modal-border-radius: var(--border-radius-md);
-  --detailed-error-modal-background: var(--bg-base);
-  --detailed-error-modal-color: var(--text-primary);
-  --detailed-error-modal-box-shadow: var(--bg-overlay-shadow);
-  --detailed-error-modal-z-index: var(--z-index-popover);
-  --detailed-error-modal-font-family: var(--font-family-base);
-  --detailed-error-modal-padding: var(--spacing-md);
-  --detailed-error-modal-wapper-text-align: right;
-
-  --detailed-error-content-margin-top: var(--spacing-md);
-  --detailed-error-content-height: 100%;
-
-  --detailed-error-close-button-color: var(--text-description);
-  --detailed-error-close-button-text-transform: uppercase;
-
-  --detailed-error-message-margin: var(--spacing-base) auto var(--spacing-lg);
-  --detailed-error-message-padding: var(--spacing-base);
-  --detailed-error-message-border-radius: var(--border-radius);
-  --detailed-error-message-color: var(--code-block-text-color);
-  --detailed-error-message-background: var(--code-block-background-color);
-  --detailed-error-message-width: 100%;
-  --detailed-error-message-font-size: var(--font-size-base);
-  --detailed-error-message-font-family: var(--code-block-controls-font-family);
-`;
-
-const modal = css`
-  body:has(.scroll-lock) {
-    overflow: hidden;
-  }
-
-  --modal-box-shadow: var(--bg-overlay-shadow);
-  --modal-overlay-background-color: var(--bg-modal-overlay);
-  --modal-background-color: var(--bg-base);
-`;
-
-const zIndexDepth = css`
-  --z-index-surface: 10;
-  --z-index-raised: 100;
-  --z-index-popover: 200;
-  --z-index-overlay: 1000;
-`;
-
-const scorecardColors = css`
-  --scorecard-color-error: var(--color-error);
-  --scorecard-color-warning: var(--color-warning);
-  --scorecard-color-success: var(--color-green-7);
-`;
-
-export const styles = css`
-  :root {
-    ${admonition}
-    ${apiReferenceDocs}
-    ${apiReferencePanels}
-    ${badges}
-    ${borders}
-    ${breadcrumbs}
-    ${button}
-    ${catalog}
-    ${code}
-    ${docsDropdown}
-    ${dropdown}
-    ${error}
-    ${filter}
-    ${footer}
-    ${headingsTypography}
-    ${inputs}
-    ${languagePicker}
-    ${lastUpdated}
-    ${links}
-    ${loadProgressBar}
-    ${logo}
-    ${markdown}
-    ${mermaid}
-    ${menu}
-    ${mobileMenu}
-    ${modal}
-    ${navbar}
-    ${pages}
-    ${product}
-    ${productPicker}
-    ${responsePanelColors}
-    ${search}
-    ${select}
-    ${sidebar}
-    ${sizeAndSpace}
-    ${tag}
-    ${themeColors}
-    ${tile}
-    ${toc}
-    ${tooltip}
-    ${typography}
-    ${userProfile}
-    ${userProfileDropdown}
-    ${versionPicker}
-    ${zIndexDepth}
-    ${scorecardColors}
-
-    --api-catalog-card-min-width: 250px;
-
-    background-color: var(--bg-base);
-    color: var(--text-base);
-    font-family: var(--font-family-base);
-  }
-
-  :root.dark {
-    ${darkMode};
-  }
-
-  :root.notransition * {
-    transition: none !important;
-  }
-
-  @media screen and (max-width: ${breakpoints.medium}) {
-    body.overflow-hidden {
-      overflow: hidden;
-    }
-  }
-`;
-
-export const GlobalStyle = createGlobalStyle`
-  ${styles};
-`;