@redocly/theme 0.0.0-react18-20231120182601

package/src/globalStyle.ts

@@ -0,0 +1,1010 @@
+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';
+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
+
+  /**
+    * @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
+
+  /**
+    * @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
+
+  /**
+    * @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
+
+  /**
+    * @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
+
+  /**
+    * @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
+
+  // @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};
+`;