@redocly/theme/src/core/styles/global.ts

Shared UI components lib

import { createGlobalStyle, css } from 'styled-components';

import { darkMode } from '@redocly/theme/core/styles/dark';
import { languagePicker } from '@redocly/theme/components/LanguagePicker/variables';
import { scorecard } from '@redocly/theme/components/Scorecard/variables';
import { feedback } from '@redocly/theme/components/Feedback/variables';
import { sidebar } from '@redocly/theme/components/Sidebar/variables';
import { breadcrumbs } from '@redocly/theme/components/Breadcrumbs/variables';
import { tag } from '@redocly/theme/components/Tag/variables';
import { toc } from '@redocly/theme/components/TableOfContent/variables';
import { filter } from '@redocly/theme/components/Filter/variables';
import { catalogClassic } from '@redocly/theme/components/CatalogClassic/variables';
import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
import { select } from '@redocly/theme/components/Select/variables';
import { dropdown } from '@redocly/theme/components/Dropdown/variables';
import { tooltip } from '@redocly/theme/components/Tooltip/variables';
import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
import { admonition } from '@redocly/theme/components/Admonition/variables';
import { footer } from '@redocly/theme/components/Footer/variables';
import { button } from '@redocly/theme/components/Button/variables';
import { navbar } from '@redocly/theme/components/Navbar/variables';
import { search } from '@redocly/theme/components/Search/variables';
import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
import { code } from '@redocly/theme/components/CodeBlock/variables';
import { productPicker } from '@redocly/theme/components/Product/variables';
import { markdown } from '@redocly/theme/components/Markdown/variables';
import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
import { mermaid } from '@redocly/theme/markdoc/components/Mermaid/variables';
import { lastUpdated } from '@redocly/theme/components/LastUpdated/variables';
import { logo } from '@redocly/theme/components/Logo/variables';
import { statusCode } from '@redocly/theme/components/StatusCode/variables';
import { segmented } from '@redocly/theme/components/Segmented/variables';
import { userMenu } from '@redocly/theme/components/UserMenu/variables';
import { httpTag } from '@redocly/theme/components/Tags/variables';
import { versionPicker } from '@redocly/theme/components/VersionPicker/variables';
import { datePicker } from '@redocly/theme/components/DatePicker/variables'
import { switcher } from '@redocly/theme/components/Switch/variables';
import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
import { codeWalkthrough } from '@redocly/theme/markdoc/components/CodeWalkthrough/variables';

const themeColors = css`
  /* === Palette === */
  /**
    * @tokens Base Colors
    * @presenter Color
    */

  --color-warm-grey-1: #fbfbfc;
  --color-warm-grey-2: #ededf2;
  --color-warm-grey-3: #dcdde5;
  --color-warm-grey-4: #c4c6d1;
  --color-warm-grey-5: #9b9ca8;
  --color-warm-grey-6: #6e6f7a;
  --color-warm-grey-7: #555761;
  --color-warm-grey-8: #3b3c45;
  --color-warm-grey-9: #2a2b33;
  --color-warm-grey-10: #22242b;
  --color-warm-grey-11: #1a1c21;

  --color-purple-1: #f3f1fe;
  --color-purple-2: #e6e1fe;
  --color-purple-3: #cec4fd;
  --color-purple-4: #b3a6f9;
  --color-purple-5: #9c8ef4;
  --color-purple-6: #7a69ee;
  --color-purple-7: #5b4ccc;
  --color-purple-8: #4034ab;
  --color-purple-9: #291f99;
  --color-purple-10: #2b2480;
  --color-purple-11: #2c2770;

  --color-blueberry-1: #F0F4FF;
  --color-blueberry-2: #dfe8ff;
  --color-blueberry-3: #bfd0ff;
  --color-blueberry-4: #9fb7ff;
  --color-blueberry-5: #87a3ff;
  --color-blueberry-6: #5f81ff;
  --color-blueberry-7: #4561db;
  --color-blueberry-8: #2f46b7;
  --color-blueberry-9: #1e2f93;
  --color-blueberry-10: #222d7a;
  --color-blueberry-11: #232a61;

  --color-blue-1: #edf5fc;
  --color-blue-2: #d9ebfc;
  --color-blue-3: #b3d7fc;
  --color-blue-4: #90c2fc;
  --color-blue-5: #6eabfa;
  --color-blue-6: #1f7cff;
  --color-blue-7: #3072db;
  --color-blue-8: #2558b8;
  --color-blue-9: #1f4399;
  --color-blue-10: #223d7a;
  --color-blue-11: #233061;

  --color-sky-1: #eafefe;
  --color-sky-2: #cefdfe;
  --color-sky-3: #9df4fe;
  --color-sky-4: #6ce5fe;
  --color-sky-5: #47d2fe;
  --color-sky-6: #0bb4fe;
  --color-sky-7: #088cda;
  --color-sky-8: #0569b6;
  --color-sky-9: #155393;
  --color-sky-10: #1d4479;
  --color-sky-11: #1f3757;

  --color-turquoise-1: #ebfdf9;
  --color-turquoise-2: #ccfdf3;
  --color-turquoise-3: #9afbef;
  --color-turquoise-4: #67f5ef;
  --color-turquoise-5: #41e6ec;
  --color-turquoise-6: #08c7e0;
  --color-turquoise-7: #059cc0;
  --color-turquoise-8: #0475a1;
  --color-turquoise-9: #125a81;
  --color-turquoise-10: #1c496b;
  --color-turquoise-11: #1c394f;

  --color-persian-green-1: #ebfaf3;
  --color-persian-green-2: #cafae4;
  --color-persian-green-3: #97f5d2;
  --color-persian-green-4: #5fe2be;
  --color-persian-green-5: #37c6ab;
  --color-persian-green-6: #06a192;
  --color-persian-green-7: #048a89;
  --color-persian-green-8: #036a73;
  --color-persian-green-9: #0f4f5d;
  --color-persian-green-10: #143d4d;
  --color-persian-green-11: #193b47;

  --color-green-1: #edfbec;
  --color-green-2: #d2fbd0;
  --color-green-3: #a3f7a9;
  --color-green-4: #72e985;
  --color-green-5: #4dd470;
  --color-green-6: #1cb854;
  --color-green-7: #149e53;
  --color-green-8: #0e8450;
  --color-green-9: #195848;
  --color-green-10: #1a4d40;

  --color-grass-1: #f0faeb;
  --color-grass-2: #e3fad6;
  --color-grass-3: #c2f6ae;
  --color-grass-4: #93e380;
  --color-grass-5: #66c95b;
  --color-grass-6: #2fa52d;
  --color-grass-7: #208d28;
  --color-grass-8: #167625;
  --color-grass-9: #135f25;
  --color-grass-10: #164f29;
  --color-grass-11: #1f4d2d;

  --color-carrot-1: #fff8e8;
  --color-carrot-2: #fff0cc;
  --color-carrot-3: #FFE4AB;
  --color-carrot-4: #FFD181;
  --color-carrot-5: #ffbe62;
  --color-carrot-6: #ffa02e;
  --color-carrot-7: #db7e21;
  --color-carrot-8: #b75f17;
  --color-carrot-9: #934c1a;
  --color-carrot-10: #7a4222;
  --color-carrot-11: #5c3721;

  --color-orange-1: #fff4e8;
  --color-orange-2: #ffead2;
  --color-orange-3: #ffcea6;
  --color-orange-4: #ffad7a;
  --color-orange-5: #ff8c59;
  --color-orange-6: #ff5722;
  --color-orange-7: #db3918;
  --color-orange-8: #b72111;
  --color-orange-9: #931e1a;
  --color-orange-10: #7a2024;
  --color-orange-11: #612729;

  --color-red-1: #fef1ea;
  --color-red-2: #fee3d4;
  --color-red-3: #fdc0ab;
  --color-red-4: #fb9580;
  --color-red-5: #f86d60;
  --color-red-6: #f42d2d;
  --color-red-7: #d12030;
  --color-red-8: #af1631;
  --color-red-9: #8d1c37;
  --color-red-10: #752137;
  --color-red-11: #612235;

  --color-raspberry-1: #fef0ef;
  --color-raspberry-2: #fed9d5;
  --color-raspberry-3: #feacad;
  --color-raspberry-4: #fd838f;
  --color-raspberry-5: #fb6382;
  --color-raspberry-6: #f9316d;
  --color-raspberry-7: #d6236a;
  --color-raspberry-8: #b3185e;
  --color-raspberry-9: #901d56;
  --color-raspberry-10: #77214c;
  --color-raspberry-11: #612241;

  --color-magenta-1: #feeff5;
  --color-magenta-2: #fecce0;
  --color-magenta-3: #fe99c3;
  --color-magenta-4: #fe66aa;
  --color-magenta-5: #fe409c;
  --color-magenta-6: #fe0184;
  --color-magenta-7: #da0078;
  --color-magenta-8: #b6006a;
  --color-magenta-9: #931a65;
  --color-magenta-10: #791f5a;
  --color-magenta-11: #5e1a48;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-static-white: #ffffff;

  --color-primary-bg: var(--color-blueberry-1);
  --color-primary-bg-hover: var(--color-blueberry-2);
  --color-primary-border: var(--color-blueberry-3);
  --color-primary-border-hover: var(--color-blueberry-4);
  --color-primary-hover: var(--color-blueberry-5);
  --color-primary-base: var(--color-blueberry-6);
  --color-primary-active: var(--color-blueberry-7);
  --color-primary-text-hover: var(--color-blueberry-8);
  --color-primary-text: var(--color-blueberry-9);
  --color-primary-text-active: var(--color-blueberry-10);

  --color-success-bg: var(--color-green-1);
  --color-success-bg-hover: var(--color-green-2);
  --color-success-border: var(--color-green-3);
  --color-success-border-hover: var(--color-green-4);
  --color-success-hover: var(--color-green-5);
  --color-success-base: var(--color-green-6);
  --color-success-active: var(--color-green-7);
  --color-success-text-hover: var(--color-green-8);
  --color-success-text: var(--color-green-9);
  --color-success-text-active: var(--color-green-10);

  --color-warning-bg: var(--color-carrot-1);
  --color-warning-bg-hover: var(--color-carrot-2);
  --color-warning-border: var(--color-carrot-3);
  --color-warning-border-hover: var(--color-carrot-4);
  --color-warning-hover: var(--color-carrot-5);
  --color-warning-base: var(--color-carrot-6);
  --color-warning-active: var(--color-carrot-7);
  --color-warning-text-hover: var(--color-carrot-8);
  --color-warning-text: var(--color-carrot-9);
  --color-warning-text-active: var(--color-carrot-10);

  --color-error-bg: var(--color-raspberry-1);
  --color-error-bg-hover: var(--color-raspberry-2);
  --color-error-border: var(--color-raspberry-3);
  --color-error-border-hover: var(--color-raspberry-4);
  --color-error-hover: var(--color-raspberry-5);
  --color-error-base: var(--color-raspberry-6);
  --color-error-active: var(--color-raspberry-7);
  --color-error-text-hover: var(--color-raspberry-8);
  --color-error-text: var(--color-raspberry-9);
  --color-error-text-active: var(--color-raspberry-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 Elevation Colors
   * @presenter Color
   */

  --color-hover-base: #F3F3F6;

      // The default elevation is the baseline with respect to all other layers.
  --bg-color: var(--color-white);
  --bg-color-hover: var(--color-hover-base);
  --bg-color-active: var(--color-warm-grey-2);
  --bg-color-tonal: var(--color-warm-grey-1);
  --bg-color-tonal-hover: var(--color-white);
  --bg-color-tonal-active: var(--color-white);

  --bg-color-raised: var(--color-white); //Dropdown, popup, tooltip
  --bg-color-modal-overlay: rgba(0, 0, 0, 0.2);


  --bg-raised-shadow: 0px 8px 24px 8px #0000000A, 0px 4px 12px 0px #00000014; // Hovers for base. Menu
  --bg-raised-gradient: linear-gradient(270deg, var(--color-warm-grey-1) 18.75%, rgba(251, 251, 252, 0) 100%);

  /**
    * @tokens Layer
    */

  --layer-color: var(--color-warm-grey-1);
  --layer-color-hover: var(--color-warm-grey-2);
  --layer-color-active: var(--color-warm-grey-3);
  --layer-color-ontonal: var(--color-white);
  --layer-color-ontonal-hover: var(--color-hover-base);
  --layer-color-ontonal-active: var(--color-warm-grey-3);
  --layer-color-accent: var(--color-warm-grey-10);
  --layer-accent-hover: var(--color-warm-grey-9);
  --layer-color-onraised: var(--color-warm-grey-2);
  --layer-color-raised:  var(--color-white);
    // @tokens End
`;

const typography = css`
  /* === Typography === */

  /**
    * @tokens Font Families
    * @presenter FontFamily
    */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; // Font family of the entire system.
    --font-family-monospaced: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Fira Mono',
    'Droid Sans Mono', 'Courier New', monospace;

  /**
    * @tokens Font Colors
    * @presenter Color
    */

  --text-color-primary: var(--color-warm-grey-11); // The base color of the typography color tokens.
  --text-color-secondary: var(--color-warm-grey-8);
  --text-color-description: var(--color-warm-grey-7); // Caption, Description, Icon
  --text-color-helper: var(--color-warm-grey-6);
  --text-color-disabled: var(--color-warm-grey-5);
  --text-color-on-color: var(--color-static-white);
  --text-color-inverse: var(--color-white);

  /**
    * @tokens Font Weights
    * @presenter FontWeight
    */

  --font-weight-regular: 400; // All normal weight fonts in the entire system.
  --font-weight-medium: 500; // All medium weight fonts in the entire system.
  --font-weight-semibold: 600; // All semi-bold weight fonts in the entire system.
  --font-weight-bold: 700; //  All bold weight fonts in the entire system.
  --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.

  /**
   * @tokens Line Heights
   * @presenter LineHeight
   */

  --line-height-base: 22px;
  --line-height-sm: 20px;
  --line-height-md: var(--line-height-base);
  --line-height-lg: 24px;
  --line-height-xl: 28px;
  --line-height-xxl: 30px;

  /**
    * @tokens Font Sizes
    * @presenter FontSize
    */

  --font-size-base: 14px; // Base font size of the entire system.
  --font-size-sm: 12px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  /**
    * @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;
  --container-max-width: 100%;

  /**
    * @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-color-primary: var(--color-warm-grey-3); // Raised dividers
  --border-color-secondary: var(--color-warm-grey-2); // Default dividers, borders
  --border-color-invers: var(--color-warm-grey-10);

  /**
     * @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-xl: calc(var(--border-radius) * 3);
  --border-radius-xxl: calc(var(--border-radius) * 4);
`;

const headingsTypography = css`
  * {
    box-sizing: border-box;
  }

  /**
    * @tokens Headings common styles
    */

  --heading-font-family: var(--font-family-base); // @presenter FontFamily
  --heading-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --heading-text-color: var(--text-color-primary); // @presenter Color

  /**
    * @tokens Typography heading anchor icon
    */

  --heading-anchor-offset-right: 4px; // @presenter Spacing
  --heading-anchor-color: var(--button-content-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: 44px; // @presenter LineHeight
  --h1-margin-top: var(--spacing-xl); // @presenter Spacing
  --h1-margin-bottom: var(--spacing-base); // @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: 36px; // @presenter LineHeight
  --h2-margin-top: var(--spacing-xl); // @presenter Spacing
  --h2-margin-bottom: var(--spacing-base); // @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: 24px; // @presenter FontSize
  --h3-line-height: 32px; // @presenter LineHeight
  --h3-margin-top: var(--spacing-lg); // @presenter Spacing
  --h3-margin-bottom: var(--spacing-base); // @presenter Spacing
  --h3-text-color: var(--heading-text-color); // @presenter Color
  --h3-code-line-height: var(--line-height-xxl); // @presenter LineHeight

  /**
    * @tokens Heading level 4
    */

  --h4-font-family: var(--heading-font-family); // @presenter FontFamily
  --h4-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --h4-font-size: 20px; // @presenter FontSize
  --h4-line-height: 28px; // @presenter LineHeight
  --h4-margin-top: var(--spacing-base); // @presenter Spacing
  --h4-margin-bottom: var(--spacing-base); // @presenter Spacing
  --h4-text-color: var(--heading-text-color); // @presenter Color
  --h4-code-line-height: var(--line-height-xl); // @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(--spacing-xs); // @presenter Spacing
  --h5-margin-bottom: var(--spacing-sm); // @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(--spacing-xxs); // @presenter Spacing
  --h6-margin-bottom: var(--spacing-xs); // @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-color-primary: var(--color-blue-6); // @presenter Color
  --link-decoration: none;
  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight

  --link-color-primary-hover: var(--color-blue-7); // @presenter Color
  --link-color-primary-pressed: var(--color-blue-8);
  --link-decoration-hover: underline;

  --link-color-inverse: var(--color-blue-5); // @presenter Color

  --link-color-visited: var(--color-purple-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-color-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-color-secondary); // @presenter Color
  --schema-type-text-color: var(--text-color-description); // @presenter Color
  --schema-labels-font-size: var(--font-size-base); // @presenter FontSize
  --schema-labels-line-height: var(--line-height-base); // @presenter LineHeight
  --schema-labels--text-color: var(--text-color-secondary);
  /**
    * @tokens API Reference Schemas Lines Color
    */

  --schemas-lines-color: var(--border-color-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-color-secondary); // @presenter Color
  --schema-inline-code-line-height: var(--inline-code-line-height); // @presenter LineHeight
  --schema-inline-bg-color: var(--border-color-secondary); // @presenter Color
  --schema-inline-border-color: var(--border-color-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-bg-color: var(--schema-inline-bg-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-bg-color: var(--schema-inline-bg-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-bg-color: var(--schema-inline-bg-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-bg-color: var(--schema-inline-bg-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-warm-grey-1); // @presenter Color
  --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
  --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color

  /**
    * @tokens API Reference Schema Nested styles
    */

  --schema-nested-offset: calc(var(--spacing-unit) * 2.5); // @presenter Spacing
  --schema-nested-bg-color: var(--tree-bg-color-active); // @presenter Color

  /**
    * @tokens API Reference Schema Required styles
    */

  --schema-required-color: #E20C0C; // @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-color-secondary); // @presenter Color
  --schema-buttons-bg-color: transparent; // @presenter Color
  --schema-buttons-border-color: var(--border-color-primary); // @presenter Color

  --schema-buttons-bg-color-hover: var(--button-bg-color-secondary-hover); // @presenter Color
  --schema-buttons-bg-color-active: var(--button-bg-color-secondary-pressed); // @presenter Color

  --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color
  --schema-buttons-selected-bg-color: var(--button-bg-color-secondary-pressed); // @presenter Color
  --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color
  --schema-buttons-selected-bg-color-hover: var(--button-bg-color-secondary-hover); // @presenter Color
  --schema-buttons-selected-bg-color-active: var(--button-bg-color-secondary-pressed); // @presenter Color

  /**
    * @tokens API Reference Schema Properties
    */

  --schemas-property-name-text-color: var(--text-color-primary); //@presenter Color
  --schemas-property-name-font-size: var(--font-size-base); // @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-base); // @presenter LineHeight
  --schemas-property-name-text-transform: none;

  --schemas-property-deprecated-text-color: var(--text-color-primary); // @presenter Color

  --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
  --schema-property-required-label-text-color: var(--schema-required-color); // @presenter Color
  --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color
  --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color

  --schema-property-details-width: 70%;
  --schema-property-details-spacing: var(--spacing-base); // @presenter Spacing
  --schema-fist-property-details-spacing: var(--spacing-sm); // @presenter Spacing

  /**
    * @tokens API Reference Schema Icons
    */

  --schema-chevron-color: var(--text-color-secondary); // @presenter Color
  --schema-chevron-size: 9px;

  --schema-property-deep-link-icon-color: var(--color-primary-base); // @presenter Color
  --schema-property-deep-link-icon: none;

  /**
    * @tokens API Reference Other
    */

  --loading-spinner-color: var(--color-primary-base); // @presenter Color
  --linear-progress-color: var(--color-info-base); // @presenter Color
  --linear-progress-bg-color: var(--color-info-bg); // @presenter Color

  --fab-bg-color: var(--color-primary-base); // @presenter Color
  --fab-box-shadow: var(--bg-raised-shadow); // @presenter Shadow

  --fab-bg-color-hover: var(--color-primary-base); // @presenter Color
  --fab-box-shadow-hover: var(--bg-raised-shadow); // @presenter Shadow

  --fab-bg-color-active: var(--color-primary-base); // @presenter Color
  --fab-box-shadow-active: var(--bg-raised-shadow); // @presenter Shadow

  --fab-icon-color: var(--navbar-text-color); // @presenter Color

  // @tokens End
`;

const badges = css`
  /**
    * @tokens Default Badge
    */

  --badge-text-color: var(--text-color-inverse); // @presenter Color
  --badge-bg-color: var(--color-purple-6); // @presenter Color
  --badge-border-radius: var(--border-radius); // @presenter BorderRadius

  /**
    * @tokens Deprecated Badge
    */

  --badge-deprecated-text-color: var(--color-warm-grey-1); // @presenter Color
  --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
  --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-base); // @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-bg-color: var(--color-white); // @presenter Color
  --input-bg-color-ghost: var(--color-white);

  --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-text-indent: 16px;

  --input-padding: var(--spacing-xs);
  --input-padding-horizontal: var(--spacing-sm);
  --input-padding-vertical: var(--spacing-xxs);
  --input-height: 40px;

  --input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
  --input-border-color: var(--color-warm-grey-3);
  --input-border: 1px solid var(--input-border-color); // @presenter Border
  --input-border-color-hover: var(--color-warm-grey-4);
  --input-border-hover: 1px solid var(--input-border-color-hover); // @presenter Border
  --input-border-color-focused: var(--color-info-base);
  --input-border-focus: 1px solid var(--input-border-color-focused); // @presenter Border

  --input-content-color-disabled: var(--color-warm-grey-4);
  --input-bg-color-disabled: var(--color-warm-grey-1);
  --input-border-color-disabled: var(--color-warm-grey-3);
  --input-border-disabled: 1px solid var(--input-border-color-disabled); // @presenter Border

  --input-content-color-active: var(--color-warm-grey-11); // @presenter Color
  --input-content-placeholder-color: var(--color-warm-grey-5); // @presenter Color

  --input-t-icon-color: var(--color-warm-grey-5); // @presenter Color

  --checkbox-bg-color: var(--bg-color);
  --checkbox-checked-bg-color: var(--color-primary-base);

  // @tokens End
`;

const docsDropdown = css`
  --docs-dropdown-font-size: var(--font-size-base);
  --docs-dropdown-text-color: var(--text-color-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-color-primary);
`;

const tile = css`
  --wide-tile-bg-color: var(--bg-color-raised);
  --thin-tile-bg-color: var(--bg-color-raised);
`;

const pages = css`
  /**
    * @tokens 404 Page
    * @presenter Color
    */

  --page-404-font-family: var(--font-family-base); // @presenter FontFamily
  --page-404-margin-vertical: var(--spacing-xl);
  --page-404-margin-horizontal: calc(var(--spacing-xxl) * 2);
  --page-404-gap: var(--spacing-lg);
  --page-404-max-width: 680px;

  --page-404-status-text-color: var(--text-color-helper);
  --page-404-status-font-size: var(--font-size-lg); // @presenter FontSize
  --page-404-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --page-404-status-line-height: var(--line-height-lg); // @presenter LineHeight

  --page-404-title-text-color: var(--text-color-primary);
  --page-404-title-font-size: 42px; // @presenter FontSize
  --page-404-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
  --page-404-title-line-height: 50px; // @presenter LineHeight
  --page-404-status-line-height: var(--line-height-lg); // @presenter LineHeight

  --page-404-description-text-color: var(--text-color-secondary);
  --page-404-description-font-size: var(--font-size-xl); // @presenter FontSize
  --page-404-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --page-404-description-line-height: var(--line-height-xl); // @presenter LineHeight

  // @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-color-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

  /**
    * @tokens 500 Page
    * @presenter Color
    */

  --page-500-font-family: var(--font-family-base); // @presenter FontFamily
  --page-500-margin-vertical: var(--spacing-xl);
  --page-500-margin-horizontal: calc(var(--spacing-xxl) * 2);
  --page-500-gap: var(--spacing-lg);
  --page-500-max-width: 680px;

  --page-500-status-text-color: var(--text-color-helper);
  --page-500-status-font-size: var(--font-size-lg); // @presenter FontSize
  --page-500-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --page-500-status-line-height: var(--line-height-lg); // @presenter LineHeight

  --page-500-title-text-color: var(--text-color-primary);
  --page-500-title-font-size: 42px; // @presenter FontSize
  --page-500-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
  --page-500-title-line-height: 50px; // @presenter LineHeight
  --page-500-status-line-height: var(--line-height-lg); // @presenter LineHeight

  --page-500-description-text-color: var(--text-color-secondary);
  --page-500-description-font-size: var(--font-size-xl); // @presenter FontSize
  --page-500-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --page-500-description-line-height: var(--line-height-xl); // @presenter LineHeight

  // @tokens End
`;
const error = css`
  --error-bubble-padding: var(--spacing-sm);
  --error-bubble-gap: var(--spacing-xxs);
  --error-bubble-font-family: var(--font-family-base);
  --error-bubble-font-size: var(--font-size-base);
  --error-bubble-z-index: var(--z-index-popover);
  --error-bubble-bg-color: #612241;
  --error-bubble-bg-color-hover: #77214c;
  --error-bubble-bg-color-pressed: #901d56;
  --error-bubble-content-color: #f9316d;
  --error-bubble-content-color-hover: #f9316d;
  --error-bubble-content-color-pressed: #f9316d;


  --detailed-error-overlay-bg-color: #4f4f4f;
  --detailed-error-overlay-opacity: 0.9;
  --detailed-error-overlay-z-index: var(--z-index-raised);

  --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
  --detailed-error-modal-border-radius: var(--border-radius-md);
  --detailed-error-modal-bg-color: var(--bg-color-raised);
  --detailed-error-modal-color: var(--text-color-primary);
  --detailed-error-modal-box-shadow: var(--bg-raised-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-color-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-bg-color: var(--code-block-bg-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);
    
  --compilation-error-description-padding: 0 0 var(--spacing-base);
  --compilation-error-codeframe-margin: var(--spacing-xs) 0 0 0;
  --compilation-error-codeframe-padding: var(--spacing-xs);
  --compilation-error-block-padding: var(--spacing-base);
  --compilation-error-block-margin: var(--spacing-xl) 0;
  --compilation-error-title-font-size: var(--font-size-xl);
  --compilation-error-header-font-size: var(--font-size-lg);
  --compilation-error-text-font-size: var(--font-size-base);
  --compilation-error-header-padding: var(--spacing-sm);
  --compilation-error-container-margin: var(--spacing-xxl) auto;
  --compilation-error-container-padding: var(--spacing-lg);
  --compilation-error-page-max-width: 800px;
  --compilation-error-font-family: var(--font-family-base);  
  --compilation-error-fix-instruction-margin: var(--spacing-sm) 0 0 0;
  --compilation-error-highlighted-text-padding: 0 var(--spacing-xxs);
  --compilation-error-divider-margin: var(--spacing-base) 0;
  --compilation-error-file-header-margin: 0 0 var(--spacing-xs) 0;
`;

const modal = css`
  body:has(.scroll-lock) {
    overflow: hidden;
  }

  --modal-box-shadow: var(--bg-raised-shadow);
  --modal-bg-color: var(--bg-color);
`;

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-base);
  --scorecard-color-warning: var(--color-warning-base);
  --scorecard-color-success: var(--color-persian-green-7);
`;

const browserOverrides = css`
  button {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    background-color: inherit;
    cursor: pointer;
    border: none;
    color: var(--text-color-primary);
  }
`;

const tab = css`
  /**
 * @tokens Tab Colors
 * @presenter Color
 */
  --tab-content-color-default: var(--color-warm-grey-8); // @presenter Color
  --tab-content-color-active: var(--color-warm-grey-11); // @presenter Color

  --tab-bg-color-filled: var(--color-warm-grey-2); // @presenter Color

  --tab-content-color-disabled: var(--color-warm-grey-6); // @presenter Color
  --tab-bg-color-disabled: var(--color-warm-grey-2); // @presenter Color

  --tab-border-color-active: var(--color-warm-grey-11); // @presenter Color

  // @tokens End
`;

const icon = css`
  /**
    * @tokens Tab Colors
    * @presenter Color
    */

  --icon-color-primary: var(--color-warm-grey-11); // @presenter Color
  --icon-color-secondary: var(--color-warm-grey-8); // @presenter Color
  --icon-color-on-color: var(--color-warm-grey-1); // @presenter Color
  --icon-color-interactive: var(--color-blueberry-6); // @presenter Color
  --icon-color-inverse: var(--color-white); // @presenter Color
  --icon-color-disabled: var(--color-warm-grey-5); // @presenter Color
  --icon-color-additional: var(--color-warm-grey-7); // @presenter Color
  --icon-color-helper: var(--color-warm-grey-6); // @presenter Color

  --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%23555761'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%23555761'/%3E%3C/svg%3E%0A");
  --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%23555761'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%23555761'/%3E%3C/svg%3E%0A");

  // @tokens End
`;

const tree = css`
  /**
    * @tokens Tree Colors
    * @presenter Color
    */

  --tree-content-color-default: var(--color-warm-grey-8); // @presenter Color
  --tree-content-color-disabled: var(--color-warm-grey-5); // @presenter Color
  --tree-content-color-hover: var(--color-warm-grey-9); // @presenter Color

  --tree-border-color-default: var(--color-warm-grey-3); // @presenter Color
  --tree-border-color-active: var(--color-warm-grey-3); // @presenter Color

  --tree-bg-color-hover: var(--color-hover-base); // @presenter Color
  --tree-bg-color-active: var(--color-warm-grey-2); // @presenter Color

    /**
      * @tokens Theme Scrollbar Config
      * @presenter Color
      */

    *::-webkit-scrollbar {
        width: 6px; /* Adjust scrollbar width */
        height: 6px; /* Adjust scrollbar height */
    }

    *::-webkit-scrollbar-track {
        background-color: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--color-warm-grey-2);
        border-radius: var(--border-radius);
    }

    *::-webkit-scrollbar-thumb:hover {
        background: var(--bg-color-tonal);
    }

    *::-webkit-scrollbar-corner {
        background-color: transparent;
    }

  // @tokens End
`;

const replay = css`
  /**
    * @tokens Replay Colors
    * @presenter Color
    */

  --replay-undefined-variable-color: var(--color-raspberry-6); // @presenter Color
  --replay-defined-variable-color: var(--color-blue-6); // @presenter Color
  --replay-server-variable-color: var(--color-purple-6); // @presenter Color

  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.08); // @presenter Color
  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.08); // @presenter Color
  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.08); // @presenter Color

  --replay-undefined-variable-bg-color-hover: var(--color-raspberry-2); // @presenter Color
  --replay-defined-variable-bg-color-hover: var(--color-blue-2); // @presenter Color
  --replay-server-variable-bg-color-hover: var(--color-purple-2); // @presenter Color

  // @tokens End
`;


export const styles = css`
  :root {
    ${admonition}
    ${apiReferenceDocs}
    ${apiReferencePanels}
    ${badges}
    ${borders}
    ${breadcrumbs}
    ${button}
    ${cards}
    ${catalogClassic}
    ${code}
    ${codeWalkthrough}
    ${docsDropdown}
    ${dropdown}
    ${error}
    ${filter}
    ${footer}
    ${headingsTypography}
    ${httpTag}
    ${inputs}
    ${languagePicker}
    ${lastUpdated}
    ${links}
    ${loadProgressBar}
    ${logo}
    ${markdown}
    ${markdownTabs}
    ${mermaid}
    ${menu}
    ${mobileMenu}
    ${modal}
    ${navbar}
    ${pages}
    ${productPicker}
    ${responsePanelColors}
    ${search}
    ${select}
    ${sidebar}
    ${sizeAndSpace}
    ${tag}
    ${themeColors}
    ${tile}
    ${toc}
    ${tooltip}
    ${typography}
    ${userMenu}
    ${versionPicker}
    ${zIndexDepth}
    ${scorecardColors}
    ${statusCode}
    ${tab}
    ${icon}
    ${tree}
    ${segmented}
    ${switcher}
    ${checkbox}
    ${feedback}
    ${scorecard}
    ${datePicker}
    ${replay}

    background-color: var(--bg-color);
    color: var(--text-color-primary);
    font-family: var(--font-family-base);
  }

  :root.dark {
    ${darkMode};
  }

  :root.notransition * {
    transition: none !important;
  }

  ${browserOverrides}
`;

export const GlobalStyle = createGlobalStyle`
  ${styles};
`;