@redocly/theme 0.70.0-next.9 → 0.71.0-next.0

package/lib/core/styles/global.js

@@ -0,0 +1,1379 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalStyle = exports.styles = exports.tokens = void 0;
+const styled_components_1 = require("styled-components");
+const variables_1 = require("../../components/LanguagePicker/variables");
+const variables_2 = require("../../components/Scorecard/variables");
+const variables_3 = require("../../components/Feedback/variables");
+const variables_4 = require("../../components/Sidebar/variables");
+const variables_5 = require("../../components/Breadcrumbs/variables");
+const variables_6 = require("../../components/Tag/variables");
+const variables_7 = require("../../components/TableOfContent/variables");
+const variables_8 = require("../../components/Catalog/variables");
+const variables_9 = require("../../components/Image/variables");
+const variables_10 = require("../../components/Filter/variables");
+const variables_11 = require("../../components/CatalogClassic/variables");
+const variables_12 = require("../../components/Panel/variables");
+const variables_13 = require("../../components/Accordion/variables");
+const variables_14 = require("../../components/Select/variables");
+const variables_15 = require("../../components/Dropdown/variables");
+const variables_16 = require("../../components/Tooltip/variables");
+const variables_17 = require("../../icons/CheckboxIcon/variables");
+const variables_18 = require("../../components/Admonition/variables");
+const variables_19 = require("../../components/Footer/variables");
+const variables_20 = require("../../components/Button/variables");
+const variables_21 = require("../../components/Buttons/variables");
+const variables_22 = require("../../components/Navbar/variables");
+const variables_23 = require("../../components/Search/variables");
+const variables_24 = require("../../components/Menu/variables");
+const variables_25 = require("../../components/CodeBlock/variables");
+const variables_26 = require("../../components/Product/variables");
+const variables_27 = require("../../components/Markdown/variables");
+const variables_28 = require("../../components/Banner/variables");
+const variables_29 = require("../../components/Consent/variables");
+const variables_30 = require("../../markdoc/components/Accordion/variables");
+const variables_31 = require("../../markdoc/components/Tabs/variables");
+const variables_32 = require("../../markdoc/components/NumberedList/variables");
+const variables_33 = require("../../markdoc/components/Diagram/variables");
+const variables_34 = require("../../components/LastUpdated/variables");
+const variables_35 = require("../../components/Logo/variables");
+const variables_36 = require("../../components/StatusCode/variables");
+const variables_37 = require("../../components/Segmented/variables");
+const variables_38 = require("../../components/UserMenu/variables");
+const variables_39 = require("../../components/Tags/variables");
+const variables_40 = require("../../components/VersionPicker/variables");
+const variables_41 = require("../../components/DatePicker/variables");
+const variables_42 = require("../../components/Switch/variables");
+const variables_43 = require("../../markdoc/components/Cards/variables");
+const variables_44 = require("../../markdoc/components/Prompt/variables");
+const variables_45 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_46 = require("../../components/SkipContent/variables");
+const variables_47 = require("../../components/PageActions/variables");
+const variables_48 = require("../../components/SvgViewer/variables");
+const variables_49 = require("../../components/Toast/variables");
+const variables_50 = require("../../components/PageNavigation/variables");
+const variables_51 = require("../../components/NavigationTabs/variables");
+const utils_1 = require("../../core/utils");
+const palette_1 = require("./palette");
+const dark_1 = require("./dark");
+const themeColors = (0, styled_components_1.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: #136a4d;
+  --color-green-10: #195848;
+  --color-green-11: #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-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);
+
+  --color-primary-bg: var(--color-brand-1); // @presenter Color
+  --color-primary-bg-hover: var(--color-brand-2); // @presenter Color
+  --color-primary-border: var(--color-brand-3); // @presenter Color
+  --color-primary-border-hover: var(--color-brand-4); // @presenter Color
+  --color-primary-hover: var(--color-brand-8); // @presenter Color
+  --color-primary-base: var(--color-brand-6); // @presenter Color
+  --color-primary-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-hover: var(--color-brand-9); // @presenter Color
+  --color-primary-text: var(--color-brand-8); // @presenter Color
+  --color-primary-text-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-on-color: var(--text-color-on-color); // @presenter Color
+
+  /**
+   * @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 = (0, styled_components_1.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-md: 18px;
+  --font-size-xl: 20px;
+
+  /**
+    * @tokens Font Rendering
+    */
+
+  --text-smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
+
+  // @tokens End
+`;
+const sizeAndSpace = (0, styled_components_1.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 = (0, styled_components_1.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-inverse: var(--color-warm-grey-10);
+  --border-color-invers: var(--border-color-inverse, var(--color-warm-grey-10)); // Deprecated: use --border-color-inverse
+
+  /**
+     * @tokens Border Radius
+     * @presenter BorderRadius
+     */
+
+  --border-radius-none: 0;
+  --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);
+  --border-radius-xxxl: calc(var(--border-radius) * 6);
+  --border-radius-full: 999px;
+
+  // @tokens End
+`;
+const headingsTypography = (0, styled_components_1.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: var(--spacing-xs); // @presenter Spacing
+  --heading-anchor-color: var(--icon-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 = (0, styled_components_1.css) `
+  /**
+    * @tokens Links
+    */
+
+  --link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy)); // @presenter Color
+  --link-decoration: underline 1px var(--color-primary-base, var(--link-color-primary-legacy));
+  --link-underline-offset: 4px;
+  --link-font-weight: var(--font-weight-medium); // @presenter FontWeight
+
+  --link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy)); // @presenter Color
+  --link-color-primary-pressed: var(--link-color-primary-palette, var(--link-color-primary-pressed-legacy));
+  --link-decoration-hover: underline 2px var(--color-primary-base, var(--link-color-primary-hover-legacy));
+
+  --link-color-inverse: var(--color-blue-5); // @presenter Color
+
+  --link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy)); // @presenter Color
+  --link-decoration-visited: underline 1px var(--color-primary-base, var(--link-color-visited-legacy));
+
+  // @tokens End
+`;
+// oxlint-disable-next-line theme/css-variable-pattern -- `--schema-labels--text-color` is a documented public variable
+const apiReferenceDocs = (0, styled_components_1.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-sm) - 1px); // @presenter Spacing
+  --schema-nested-bg-color: var(--tree-bg-color-active); // @presenter Color
+  --schema-nested-hyperlink-offset: 2px; // @presenter Spacing
+  
+  /**
+    * @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(--color-primary-base, var(--text-color-primary)); //@presenter Color
+  --schemas-property-name-box-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
+  --schema-first-property-details-spacing: var(--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, var(--color-blueberry-6)); // @presenter Color
+  --schema-property-deep-link-icon: none;
+
+  /**
+    * @tokens API Reference Other
+    */
+
+  --loading-spinner-color: var(--color-primary-base, var(--color-blueberry-6)); // @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, var(--color-blueberry-6)); // @presenter Color
+  --fab-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --fab-bg-color-hover: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
+  --fab-box-shadow-hover: var(--bg-raised-shadow); // @presenter Shadow
+
+  --fab-bg-color-active: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
+  --fab-box-shadow-active: var(--bg-raised-shadow); // @presenter Shadow
+
+  --fab-icon-color: var(--navbar-text-color); // @presenter Color
+
+  // @tokens End
+
+  /**
+    * @tokens OpenAPI Schema Catalog Link
+   */
+
+  --schema-catalog-link-margin-bottom: var(--spacing-lg);
+  --schema-catalog-link-padding: 2px;
+  --schema-catalog-link-border-radius: var(--border-radius-md);
+  --schema-catalog-link-background-color: var(--layer-color);
+  --schema-catalog-link-color: var(--color-purple-7);
+
+  --schema-catalog-link-share-icon-color: var(--color-purple-7);
+  --schema-catalog-link-share-icon-background-color: var(--color-purple-1);
+  --schema-catalog-link-share-icon-border-radius: var(--border-radius-md);
+  --schema-catalog-link-share-icon-wrapper-size: var(--spacing-xl);
+
+  --schema-catalog-link-text-color: var(--text-color-primary);
+
+  // @tokens End
+`;
+const badges = (0, styled_components_1.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-md); // @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-md); // @presenter BorderRadius
+
+   /**
+    * @tokens Webhook Badge
+    */
+
+  --badge-webhook-text-color: var(--color-warm-grey-1); // @presenter Color
+  --badge-webhook-bg-color: var(--color-purple-7); // @presenter Color
+  --badge-webhook-border-radius: var(--border-radius-md); // @presenter BorderRadius
+
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-2); // @presenter Color
+
+  // @tokens End
+`;
+const loadProgressBar = (0, styled_components_1.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
+`;
+const inputs = (0, styled_components_1.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 = (0, styled_components_1.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 = (0, styled_components_1.css) `
+  --wide-tile-bg-color: var(--bg-color-raised);
+  --thin-tile-bg-color: var(--bg-color-raised);
+`;
+const pages = (0, styled_components_1.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-margin-vertical: var(--spacing-xl); // @presenter Spacing
+  --page-403-margin-horizontal: calc(var(--spacing-xxl) * 2); // @presenter Spacing
+  --page-403-gap: var(--spacing-lg); // @presenter Spacing
+  --page-403-max-width: 680px; // @presenter Width
+
+  --page-403-status-text-color: var(--text-color-helper); // @presenter Color
+  --page-403-status-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-403-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-403-title-text-color: var(--text-color-primary); // @presenter Color
+  --page-403-title-font-size: 42px; // @presenter FontSize
+  --page-403-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-403-title-line-height: 50px; // @presenter LineHeight
+
+  --page-403-description-text-color: var(--text-color-secondary); // @presenter Color
+  --page-403-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-403-description-line-height: var(--line-height-xl); // @presenter LineHeight
+
+  // @tokens End
+
+  /**
+    * @tokens 403 Page OIDC Forbidden
+    * @presenter Color
+    */
+
+  --page-403-header-text-color: var(--h1-text-color); // @presenter 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-margin: 0; // @presenter Spacing
+  --page-403-oidc-description-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm); // @presenter Spacing
+
+  // @tokens End
+
+  /**
+    * @tokens 405 MCP Page
+    * @presenter Color
+    */
+  --page-mcp-405-font-family: var(--font-family-base); // @presenter FontFamily
+  --page-mcp-405-margin-vertical: var(--spacing-xl);
+  --page-mcp-405-margin-horizontal: calc(var(--spacing-xxl) * 2);
+  --page-mcp-405-gap: var(--spacing-lg);
+  --page-mcp-405-max-width: 680px;
+  --page-mcp-405-margin-vertical-mobile: var(--spacing-xxl);
+  --page-mcp-405-margin-horizontal-mobile: 1rem;
+
+  --page-mcp-405-title-text-color: var(--text-color-primary);
+  --page-mcp-405-title-font-size: 42px; // @presenter FontSize
+  --page-mcp-405-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-mcp-405-title-line-height: 50px; // @presenter LineHeight
+  --page-mcp-405-title-font-size-mobile: var(--h3-font-size);
+  --page-mcp-405-title-line-height-mobile: var(--h3-line-height);
+
+  --page-mcp-405-description-text-color: var(--text-color-secondary);
+  --page-mcp-405-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-mcp-405-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-mcp-405-description-line-height: var(--line-height-xl);
+  --page-mcp-405-description-font-size-mobile: var(--font-size-lg);
+  --page-mcp-405-description-line-height-mobile: var(--line-height-lg);
+
+  --page-mcp-405-snippets-font-size: var(--font-size-base); // @presenter FontSize
+  --page-mcp-405-snippets-line-height: var(--line-height-base); // @presenter LineHeight
+  --page-mcp-405-snippets-hint-text-color: var(--text-color-secondary);
+  --page-mcp-405-snippets-code-padding-right: var(--spacing-xxl);
+
+   // @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 = (0, styled_components_1.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-stack-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-stack-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 = (0, styled_components_1.css) `
+  --modal-box-shadow: var(--bg-raised-shadow);
+  --modal-bg-color: var(--bg-color);
+`;
+const zIndexDepth = (0, styled_components_1.css) `
+  --z-index-surface: 10;
+  --z-index-raised: 100;
+  --z-index-popover: 200;
+  --z-index-overlay: 1000;
+`;
+const scorecardColors = (0, styled_components_1.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 = (0, styled_components_1.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 = (0, styled_components_1.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 = (0, styled_components_1.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-static-white); // @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 = (0, styled_components_1.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-full);
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+        background: var(--bg-color-tonal);
+    }
+
+    *::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+  // @tokens End
+`;
+const replay = (0, styled_components_1.css) `
+  /**
+    * @tokens Replay Colors
+    * @presenter Color
+    */
+
+  --replay-undefined-variable-color: rgb(249, 49, 109); // @presenter Color
+  --replay-defined-variable-color: rgb(31, 124, 255); // @presenter Color
+  --replay-server-variable-color: rgb(91, 76, 204); // @presenter Color
+  --replay-path-parameter-color: rgb(4, 117, 161); // @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-path-parameter-bg-color: rgba(4, 117, 161, 0.08); // @presenter Color
+
+  --replay-undefined-variable-bg-color-hover: rgba(249, 49, 109, 0.16); // @presenter Color
+  --replay-defined-variable-bg-color-hover: rgba(31, 124, 255, 0.16); // @presenter Color
+  --replay-server-variable-bg-color-hover: rgba(119, 45, 240, 0.16); // @presenter Color
+  --replay-path-parameter-bg-color-hover: rgba(4, 117, 161, 0.16); // @presenter Color
+
+  --replay-runtime-expression-color: rgba(54, 90, 249, 1); // @presenter Color
+  --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
+  --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
+  --replay-claude-icon-color: rgba(217, 119, 87, 1); // @presenter Color
+
+  --replay-ai-gradient-soft: linear-gradient(62.6deg, rgba(113, 94, 254, 0.16) 0%, rgba(255, 92, 220, 0.16) 100%);
+  --replay-ai-gradient-disabled: linear-gradient(62.6deg, rgba(113, 94, 254, 0.6) 0%, rgba(255, 92, 220, 0.6) 100%);
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.08) 10.13%, rgba(255, 92, 220, 0.08) 87.29%);
+
+  --replay-ai-send-button-disabled-border: 1px solid #ffffff33;
+
+  --replay-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --replay-transition-duration: 300ms;
+
+  @media (prefers-reduced-motion: reduce) {
+    --replay-transition-duration: 0s;
+  }
+  // @tokens End
+`;
+/** The light theme tokens without a selector, for a host that sets them on one element. */
+exports.tokens = (0, styled_components_1.css) `
+  ${variables_13.accordion}
+  ${variables_18.admonition}
+  ${apiReferenceDocs}
+  ${variables_12.apiReferencePanels}
+  ${badges}
+  ${variables_28.banner}
+  ${borders}
+  ${variables_29.consent}
+  ${variables_5.breadcrumbs}
+  ${variables_20.button}
+  ${variables_21.aiAssistantButton}
+  ${variables_21.connectMcpButton}
+  ${variables_43.cards}
+  ${variables_44.promptTag}
+  ${variables_8.catalog}
+  ${variables_11.catalogClassic}
+  ${variables_25.code}
+  ${variables_45.codeWalkthrough}
+  ${docsDropdown}
+  ${variables_15.dropdown}
+  ${error}
+  ${variables_10.filter}
+  ${variables_19.footer}
+  ${headingsTypography}
+  ${variables_39.httpTag}
+  ${variables_9.image}
+  ${inputs}
+  ${variables_1.languagePicker}
+  ${variables_34.lastUpdated}
+  ${links}
+  ${loadProgressBar}
+  ${variables_35.logo}
+  ${variables_27.markdown}
+  ${variables_30.markdownAccordion}
+  ${variables_31.markdownTabs}
+  ${variables_32.markdownNumberedList}
+  ${variables_33.diagram}
+  ${variables_24.menu}
+  ${variables_24.mobileMenu}
+  ${modal}
+  ${variables_22.navbar}
+  ${pages}
+  ${variables_26.productPicker}
+  ${variables_12.responsePanelColors}
+  ${variables_23.search}
+  ${variables_51.navigationTabs}
+  ${variables_14.select}
+  ${variables_4.sidebar}
+  ${sizeAndSpace}
+  ${variables_6.tag}
+  ${themeColors}
+  ${palette_1.activeBrandPaletteLight}
+  ${tile}
+  ${variables_7.toc}
+  ${variables_16.tooltip}
+  ${typography}
+  ${variables_38.userMenu}
+  ${variables_40.versionPicker}
+  ${zIndexDepth}
+  ${scorecardColors}
+  ${variables_36.statusCode}
+  ${tab}
+  ${icon}
+  ${tree}
+  ${variables_37.segmented}
+  ${variables_42.switcher}
+  ${variables_17.checkbox}
+  ${variables_3.feedback}
+  ${variables_2.scorecard}
+  ${variables_41.datePicker}
+  ${replay}
+  ${variables_46.skipContent}
+  ${variables_47.pageActions}
+  ${variables_48.svgViewer}
+  ${variables_49.toast}
+  ${variables_50.pageNavigation}
+
+`;
+exports.styles = (0, styled_components_1.css) `
+  :root {
+    ${exports.tokens}
+    background-color: var(--bg-color);
+    color: var(--text-color-primary);
+    font-family: var(--font-family-base);
+  }
+
+  :root.dark {
+    ${dark_1.darkMode};
+  }
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    :root:has([data-component-name='NavigationTabs/NavigationTabs']) {
+      --navbar-stack-height: calc(var(--navbar-height) + var(--navigation-tabs-height, 48px));
+      --navbar-row-bottom-border-color: transparent;
+    }
+  }
+
+  :root.notransition * {
+    transition: none !important;
+  }
+
+  ${browserOverrides}
+`;
+exports.GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+  ${exports.styles};
+`;
+//# sourceMappingURL=global.js.map