@redocly/theme 0.4.15 → 0.5.0

package/lib/globalStyle.js

@@ -0,0 +1,1924 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalStyle = exports.styles = void 0;
+const styled_components_1 = require("styled-components");
+const darkColors_1 = require("./ui/darkColors");
+const baseColors = (0, styled_components_1.css) `
+  /* === Palette === */
+
+  /**
+      * @tokens Base Colors
+      * @presenter Color
+      */
+
+  --color-primary-50: #87ceeb;
+  --color-primary-100: #62a1ff;
+  --color-primary-200: #4892ff;
+  --color-primary-300: #2f83ff;
+  --color-primary-400: #1573ff;
+  --color-primary-500: #0065fb;
+  --color-primary-600: #005be2;
+  --color-primary-700: #0050c8;
+  --color-primary-800: #0046af;
+  --color-primary-900: #003c95;
+
+  --color-secondary-50: #ffffff;
+  --color-secondary-100: #f5f7fa;
+  --color-secondary-200: #f3f4f6;
+  --color-secondary-300: #e4e7eb;
+  --color-secondary-400: #d5dae0;
+  --color-secondary-500: #c7cdd5;
+  --color-secondary-600: #b8c0ca;
+  --color-secondary-700: #a9b3c0;
+  --color-secondary-800: #9ba6b5;
+  --color-secondary-900: #52606d;
+
+  --color-emphasis-50: #ffffff;
+  --color-emphasis-100: #e9eaec;
+  --color-emphasis-200: #cdd0d5;
+  --color-emphasis-300: #b2b6bd;
+  --color-emphasis-400: #969ca6;
+  --color-emphasis-500: #7a828f;
+  --color-emphasis-600: #626974;
+  --color-emphasis-700: #4b5058;
+  --color-emphasis-800: #1f2933;
+  --color-emphasis-900: #1c1e21;
+
+  --color-accent-50: #e6eef8;
+  --color-accent-100: #b3dcf3;
+  --color-accent-200: #a6dfff;
+  --color-accent-300: #8cd5ff;
+  --color-accent-400: #73ccff;
+  --color-accent-500: #59c3ff;
+  --color-accent-600: #40baff;
+  --color-accent-700: #26b1ff;
+  --color-accent-800: #0da7ff;
+  --color-accent-900: #009bf2;
+
+  --color-success-50: #ddffe1;
+  --color-success-100: #98eda0;
+  --color-success-200: #82e98c;
+  --color-success-300: #6ce678;
+  --color-success-400: #57e264;
+  --color-success-500: #41de50;
+  --color-success-600: #2bda3c;
+  --color-success-700: #23c933;
+  --color-success-800: #1fb32d;
+  --color-success-900: #1b9e28;
+
+  --color-warning-50: #ffeda5;
+  --color-warning-100: #ffc966;
+  --color-warning-200: #ffc04d;
+  --color-warning-300: #ffb733;
+  --color-warning-400: #ffae1a;
+  --color-warning-500: #ffa500;
+  --color-warning-600: #e69400;
+  --color-warning-700: #cc8400;
+  --color-warning-800: #b37300;
+  --color-warning-900: #996300;
+
+  --color-error-50: #ffeaea;
+  --color-error-100: #ffc7c7;
+  --color-error-200: #ffaeae;
+  --color-error-300: #ff9494;
+  --color-error-400: #ff7b7b;
+  --color-error-500: #ff6161;
+  --color-error-600: #ff4747;
+  --color-error-700: #ff2e2e;
+  --color-error-800: #ff1414;
+  --color-error-900: #ff0000;
+
+  --colors-translucent: rgb(226 230 236 / 37%);
+
+  // @tokens End
+`;
+const httpColors = (0, styled_components_1.css) `
+  /**
+    * @tokens HTTP Colors
+    * @presenter Color
+    */
+  --color-http-get: #3a9601;
+  --color-http-post: #0065fb;
+  --color-http-put: #93527b;
+  --color-http-options: #947014;
+  --color-http-patch: #bf581d;
+  --color-http-delete: #c83637;
+  --color-http-basic: #707070;
+  --color-http-link: #07818f;
+  --color-http-head: #a23dad;
+  --color-http-hook: #4d5d86;
+
+  // @tokens End
+`;
+const typography = (0, styled_components_1.css) `
+  /* === Typography === */
+
+  /**
+    * @tokens Typography Colors
+    * @presenter Color
+    */
+  --text-color: var(--color-emphasis-800);
+  --text-color-inverse: var(--color-secondary-100);
+  --text-color-secondary: var(--color-emphasis-500);
+
+  /**
+    * @tokens Font Sizes
+    * @presenter FontSize
+    */
+  --font-size-base: 14px;
+  --font-size-small: 12px;
+
+  /**
+    * @tokens Line Heights
+    * @presenter LineHeight
+    */
+  --line-height-base: 1.5em;
+
+  /**
+    * @tokens Font Weights
+    * @presenter FontWeight
+    */
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
+  --font-weight-bolder: 700;
+
+  /**
+    * @tokens Font Families
+    * @presenter FontFamily
+    */
+  --font-family-base: Source Sans Pro, sans-serif;
+  --font-family-monospaced: Source Code Pro, monospace;
+
+  /**
+  * @tokens Rendering
+  */
+  --text-smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
+
+  // @tokens End
+`;
+const headingsTypography = (0, styled_components_1.css) `
+  * {
+    box-sizing: border-box;
+  }
+
+  /**
+    * @tokens Headings common styles
+    */
+
+  --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily
+  --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight
+  --heading-margin-top: 1.25em; // @presenter Spacing
+  --heading-margin-bottom: 0.9em; // @presenter Spacing
+  --heading-text-color: var(--text-color); // @presenter Color
+
+  /**
+  * @tokens Typography heading anchor icon
+  */
+
+  --heading-anchor-offset-right: 4px; // @presenter Spacing
+  --heading-anchor-color: var(--color-primary-500); // @presenter Color
+  --heading-anchor-icon: none;
+
+  // TODO: implement a theme setting for heading-anchor-location: left right
+
+  /**
+  * @tokens Heading level 1
+  */
+
+  --h1-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight
+  --h1-font-size: 36px; // @presenter FontSize
+  --h1-line-height: 36px; // @presenter LineHeight
+  --h1-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h1-text-color: var(--heading-text-color); // @presenter Color
+
+  /**
+  * @tokens Heading level 2
+  */
+
+  --h2-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
+  --h2-font-size: 28px; // @presenter FontSize
+  --h2-line-height: 28px; // @presenter LineHeight
+  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h2-text-color: var(--heading-text-color); // @presenter Color
+
+  /**
+  * @tokens Heading level 3
+  */
+
+  --h3-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight
+  --h3-font-size: 18px; // @presenter FontSize
+  --h3-line-height: 18px; // @presenter LineHeight
+  --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h3-text-color: var(--heading-text-color); // @presenter Color
+
+  /**
+  * @tokens Heading level 4
+  */
+
+  --h4-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight
+  --h4-font-size: 16px; // @presenter FontSize
+  --h4-line-height: 16px; // @presenter LineHeight
+  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h4-text-color: var(--heading-text-color); // @presenter Color
+
+  /**
+  * @tokens Heading level 5
+  */
+
+  --h5-font-family: var(--heading-font-family); /* Token Description Example @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-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h5-text-color: var(--heading-text-color); // @presenter Color
+
+  /**
+  * @tokens Heading level 6
+  */
+
+  --h6-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight
+  --h6-font-size: 12px; // @presenter FontSize
+  --h6-line-height: 12px; // @presenter LineHeight
+  --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h6-text-color: var(--heading-text-color); // @presenter Color
+
+  // @tokens End
+`;
+const common = (0, styled_components_1.css) `
+  /**
+    * @tokens Borders
+    * @presenter Border
+    */
+  --border-width: 1px;
+  --border-style: solid;
+
+  /**
+    * @tokens Border Radius
+    * @presenter BorderRadius
+    */
+  --border-radius: 4px;
+  --border-radius-lg: calc(var(--border-radius) * 2);
+
+  /**
+    * @tokens Border Colors
+    * @presenter Color
+    */
+  --border-color: var(--color-secondary-300);
+  --border-color-secondary: var(--color-emphasis-600);
+  --background-color: var(--color-secondary-50);
+  --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);
+  /**
+    * @tokens Spacings
+    * @presenter Spacing
+    */
+
+  --spacing-unit: 5px;
+  --spacing-horizontal: calc(var(--spacing-unit) * 8);
+  --spacing-vertical: calc(var(--spacing-unit) * 4);
+
+  // @tokens End
+`;
+const buttons = (0, styled_components_1.css) `
+  /*
+  * Static classnames that can be used to override styles for components:
+  * download-specification-button, next-section-button, button-base
+  */
+
+  /**
+    * @tokens Button default colors
+    */
+
+  --button-color: var(--color-emphasis-50); // @presenter Color
+  --button-background-color: var(--color-emphasis-400); // @presenter Color
+  --button-border-color: var(--color-emphasis-400); // @presenter Color
+
+  --button-hover-color: var(--color-emphasis-700); // @presenter Color
+  --button-hover-background-color: var(--color-emphasis-500); // @presenter Color
+  --button-hover-border-color: var(--color-emphasis-500); // @presenter Color
+
+  --button-active-color: var(--color-emphasis-900); // @presenter Color
+  --button-active-background-color: var(--color-emphasis-600); // @presenter Color
+  --button-active-border-color: var(--color-emphasis-600); // @presenter Color
+
+  /* TODO more styles for disabled state ??? */
+  --button-disabled-color: var(--button-color); // @presenter Color
+  --button-disabled-background-color: var(--color-emphasis-200); // @presenter Color
+
+  /**
+    * @tokens Button primary colors
+    */
+  .button-color-primary {
+    --button-color: var(--color-emphasis-50); // @presenter Color
+    --button-background-color: var(--color-primary-500); // @presenter Color
+    --button-border-color: var(--color-primary-500); // @presenter Color
+
+    --button-hover-background-color: var(--color-primary-600); // @presenter Color
+    --button-hover-border-color: var(--color-primary-600); // @presenter Color
+
+    --button-active-background-color: var(--color-primary-700); // @presenter Color
+    --button-active-border-color: var(--color-primary-700); // @presenter Color
+
+    --button-disabled-color: var(--button-color); // @presenter Color
+    --button-disabled-background-color: var(--color-primary-100); // @presenter Color
+  }
+
+  /**
+    * @tokens Button secondary colors
+    */
+  .button-color-secondary {
+    --button-color: var(--color-emphasis-700); // @presenter Color
+    --button-background-color: var(--color-secondary-400); // @presenter Color
+    --button-border-color: var(--color-secondary-400); // @presenter Color
+
+    --button-hover-background-color: var(--color-secondary-500); // @presenter Color
+    --button-hover-border-color: var(--color-secondary-500); // @presenter Color
+
+    --button-active-background-color: var(--color-secondary-600); // @presenter Color
+    --button-active-border-color: var(--color-secondary-600); // @presenter Color
+
+    --button-disabled-color: var(--button-color); // @presenter Color
+    --button-disabled-background-color: var(--color-secondary-200); // @presenter Color
+  }
+
+  /**
+    * @tokens Button borders
+    */
+  --button-border-radius: var(--border-radius); // @presenter BorderRadius
+  --button-margin: 5px; // @presenter Spacing
+  --button-box-shadow: none; // @presenter Shadow
+  --button-hover-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow
+  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow
+
+  /**
+    * @tokens Button typography
+    */
+  --button-font-family: inherit; // @presenter FontFamily
+  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  --button-small-font-size: 12px; // @presenter FontSize
+  --button-small-padding: 8px 10px;
+  --button-small-min-width: 90px; // @presenter Spacing
+
+  --button-medium-font-size: 14px; // @presenter FontSize
+  --button-medium-padding: 8px 20px;
+  --button-medium-min-width: 120px; // @presenter Spacing
+
+  --button-large-font-size: 14px; // @presenter FontSize
+  --button-large-padding: 12px 24px;
+  --button-large-min-width: 150px; // @presenter Spacing
+
+  --button-xlarge-font-size: 16px; // @presenter FontSize
+  --button-xlarge-padding: 20px 24px;
+  --button-xlarge-min-width: 200px; // @presenter Spacing
+
+  // @tokens End
+`;
+const sidebar = (0, styled_components_1.css) `
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px;
+  --sidebar-logo-max-width: 285px;
+  --sidebar-logo-padding: 2px; // @presenter spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: 'inherit';
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--background-color);
+  --sidebar-border-color: var(--border-color);
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-width: 285px; // @presenter NO
+
+  --sidebar-spacing-unit: 8px;
+  --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);
+  --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);
+
+  --sidebar-chevron-size: var(--sidebar-spacing-unit);
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-color);
+  --sidebar-item-background-color: transparent;
+
+  --sidebar-item-active-color: var(--text-color);
+  --sidebar-item-active-background-color: var(--border-color);
+
+  --sidebar-item-hover-background-color: var(--border-color);
+  --sidebar-item-hover-color: var(--text-color);
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);
+  --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);
+  --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: 0.85rem;
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular);
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);
+  --sidebar-text-drilldown-transform: inherit;
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color);
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size);
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color);
+  --sidebar-item-group-background-color: var(--sidebar-background-color);
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+
+  // we need a theme setting for chevron-location: left (default), right-compact, right, none
+  // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  // does-separatorn't have active states
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size);
+  --sidebar-item-separator-text-transform: inherit;
+  --sidebar-item-separator-text-color: var(--sidebar-item-text-color);
+  --sidebar-item-separator-background-color: var(--sidebar-background-color);
+  --sidebar-item-separator-line-color: var(--border-color); // but has line color
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size);
+  --sidebar-back-button-transform: inherit;
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-background-color: transparent;
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
+  --sidebar-back-button-hover-background-color: transparent;
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;
+  --sidebar-back-button-icon: none;
+
+  //--sidebar-version-dropdown-* (input settings, see below)
+  // @tokens End
+`;
+const admonition = (0, styled_components_1.css) `
+  /* === Admonitions === */
+
+  /**
+  * @tokens Admonition typography
+  */
+
+  --admonition-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-transform: uppercase;
+
+  /**
+  * @tokens Admonition spacing
+  * @presenter Spacing
+  */
+
+  --admonition-margin-horizontal: 0;
+  --admonition-margin-vertical: calc(var(--spacing-unit) * 2);
+  --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);
+  --admonition-padding-vertical: calc(var(--spacing-unit) * 4);
+  --admonition-icon-size: 25px;
+
+  // TODO this is should be changed to --border-radius-lg
+  /**
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-style: var(--border-style);
+  --admonition-border-width: var(--border-width);
+
+  /**
+  * @tokens Admonition type info
+  */
+
+  --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color
+  --admonition-info-heading-text-color: var(--text-color); // @presenter Color
+  --admonition-info-text-color: var(--text-color); // @presenter Color
+  --admonition-info-icon-color: var(--color-accent-900); // @presenter Color
+  --admonition-info-border-color: inherit; // @presenter Color
+  --admonition-info-border-style: var(--admonition-border-style);
+  --admonition-info-border-width: var(--admonition-border-width);
+  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
+    var(--admonition-info-border-color); // @presenter Border
+  --admonition-info-icon: none;
+
+  /**
+  * @tokens Admonition type attention
+  * @presenter Color
+  */
+
+  --admonition-attention-background-color: var(--color-accent-50); // @presenter Color
+  --admonition-attention-text-color: var(--text-color); // @presenter Color
+  --admonition-attention-heading-text-color: var(--text-color); // @presenter Color
+  --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color
+  --admonition-attention-border-color: inherit; // @presenter Color
+  --admonition-attention-border-style: var(--admonition-border-style);
+  --admonition-attention-border-width: var(--admonition-border-width);
+  --admonition-attention-border: var(--admonition-attention-border-width)
+    var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border
+  --admonition-attention-icon: none;
+
+  /**
+  * @tokens Admonition type warning
+  */
+
+  /* warning */
+  --admonition-warning-background-color: var(--color-warning-50); // @presenter Color
+  --admonition-warning-text-color: var(--text-color); // @presenter Color
+  --admonition-warning-heading-text-color: var(--text-color); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color
+  --admonition-warning-border-color: inherit; // @presenter Color
+  --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-warning-border: var(--admonition-warning-border-width)
+    var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
+  --admonition-warning-icon: none;
+
+  /**
+  * @tokens Admonition type danger
+  */
+
+  --admonition-danger-background-color: var(--color-error-50); // @presenter Color
+  --admonition-danger-text-color: var(--text-color); // @presenter Color
+  --admonition-danger-heading-text-color: var(--text-color); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-800); // @presenter Color
+  --admonition-danger-border-color: inherit; // @presenter Color
+  --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-danger-border: var(--admonition-danger-border-width)
+    var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
+  --admonition-danger-icon: none;
+
+  /**
+  * @tokens Admonition type success
+  */
+
+  --admonition-success-background-color: var(--color-success-50); // @presenter Color
+  --admonition-success-text-color: var(--text-color); // @presenter Color
+  --admonition-success-heading-text-color: var(--text-color); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-900); // @presenter Color
+  --admonition-success-border-color: inherit; // @presenter Color
+  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-success-border: var(--admonition-success-border-width)
+    var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
+  --admonition-success-icon: none;
+
+  // @tokens End
+`;
+const responsePanelColors = (0, styled_components_1.css) `
+  /**
+  * @tokens Response Panel Common
+  */
+
+  --panel-response-heading-padding: 10px 20px;
+  --panel-response-heading-font-size: var(--font-size-base);
+  --panel-response-heading-line-height: 20px;
+  --panel-response-heading-font-weight: var(--font-weight-bold);
+  --panel-response-heading-text-color: var(--text-color);
+
+  --panel-response-body-text-color: var(--text-color);
+
+  /**
+  * @tokens Response Panel Success colors
+  * @presenter Color
+  */
+
+  --panel-response-success-border-color: var(--color-success-100);
+  --panel-response-success-heading-background-color: var(--color-success-50);
+  --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-success-body-background-color: transparent;
+  --panel-response-success-schema-nested-background-color: var(--color-secondary-200);
+  --panel-response-success-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Error colors
+  * @presenter Color
+  */
+
+  --panel-response-error-border-color: var(--color-error-100);
+  --panel-response-error-heading-background-color: var(--color-error-50);
+  --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-error-body-background-color: transparent;
+  --panel-response-error-schema-nested-background-color: var(--color-secondary-200);
+  --panel-response-error-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Redirect colors
+  * @presenter Color
+  */
+
+  --panel-response-redirect-border-color: var(--color-warning-100);
+  --panel-response-redirect-heading-background-color: var(--color-warning-50);
+  --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-redirect-body-background-color: transparent;
+  --panel-response-redirect-schema-nested-background-color: var(--color-secondary-200);
+  --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Info colors
+  * @presenter Color
+  */
+
+  --panel-response-info-border-color: var(--color-accent-100);
+  --panel-response-info-heading-background-color: var(--color-accent-50);
+  --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-info-body-background-color: transparent;
+  --panel-response-info-schema-nested-background-color: var(--color-secondary-200);
+  --panel-response-info-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Callback colors
+  * @presenter Color
+  */
+
+  --panel-response-callback-border-color: var(--color-secondary-300);
+  --panel-response-callback-heading-background-color: var(--color-secondary-300);
+  --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-callback-body-background-color: transparent;
+  --panel-response-callback-schema-nested-background-color: var(--color-secondary-200);
+  --panel-response-callback-body-text-color: var(--panel-response-body-text-color);
+
+  // @tokens End
+`;
+const apiReferencePanels = (0, styled_components_1.css) `
+  /**
+  * @tokens Panels spacing
+  * @presenter Spacing
+  */
+
+  --panel-gap-horizontal: calc(var(--spacing-unit) * 8);
+  --panel-gap-vertical: calc(var(--spacing-unit) * 4);
+
+  /**
+  * @tokens Panel common
+  */
+
+  --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --panel-border: 1px solid var(--border-color); // @presenter Border
+
+  --panel-line-height: var(--line-height-base); // @presenter LineHeight
+  --panel-font-size: var(--font-size-base); // @presenter FontSize
+  --panel-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+  * @tokens Panel heading common
+  */
+
+  --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-heading-font-size: 18px; // @presenter FontSize
+  --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --panel-heading-padding: calc(var(--spacing-unit) * 4);
+  --panel-heading-line-height: 1; // @presenter LineHeight
+  --panel-heading-whit-space: 'nowrap';
+
+  /**
+  * @tokens Panel body common
+  */
+
+  --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-body-font-size: var(--font-size-base); // @presenter FontSize
+  --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --panel-body-padding: calc(var(--spacing-unit) * 4);
+
+  /**
+  * @tokens Panel schemas common
+  */
+
+  --panel-schemas-text-color: var(--text-color); // @presenter Color
+  --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-schemas-font-weight: var(--panel-font-weight); // @presenter
+  --panel-schemas-background-color: var(--background-color); // @presenter Color
+  --panel-schemas-border: var(--panel-border); // @presenter Border
+  --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color
+
+  /**
+  * @tokens Panel schemas body common
+  */
+
+  --panel-schemas-body-text-color: var(--text-color); // @presenter Color
+  --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
+  --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize
+  --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
+  --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding)
+    var(--panel-body-padding);
+  --panel-schemas-body-background-color: var(--background-color); // @presenter Color
+  --panel-schemas-body-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel schemas heading common
+  */
+
+  --panel-schemas-heading-text-color: var(--text-color); // @presenter Color
+  --panel-schemas-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily
+  --panel-schemas-heading-font-size: var(--panel-heading-font-size); // @presenter FontSize
+  --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight
+  --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight
+  --panel-schemas-heading-padding: var(--panel-heading-padding);
+  --panel-schemas-heading-background-color: var(--background-color); // @presenter Color
+  --panel-schemas-heading-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel default, response, callback, security schemas
+  */
+
+  .panel-request-schemas,
+  .panel-response-schemas,
+  .panel-callback-schemas,
+  .panel-security-schemas,
+  .panel-default {
+    --panel-text-color: var(--panel-schemas-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-schemas-font-family);
+    --panel-font-size-local: var(--panel-schemas-font-size);
+    --panel-font-weight-local: var(--panel-schemas-font-weight);
+    --panel-background-color: var(--panel-schemas-background-color); // @presenter Color
+    --panel-border-local: var(--panel-schemas-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color
+    --panel-body-font-family-local: var(--panel-schemas-body-font-family);
+    --panel-body-font-size-local: var(--panel-schemas-body-font-size);
+    --panel-body-font-weight-local: var(--panel-schemas-body-font-weight);
+    --panel-body-padding-local: var(--panel-schemas-body-padding);
+    --panel-body-background-color: var(--panel-schemas-body-background-color); // @presenter Color
+    --panel-body-border: var(--panel-schemas-body-border); // @presenter Border
+
+    --panel-heading-text-color: var(--panel-schemas-heading-text-color); // @presenter Color
+    --panel-heading-font-family-local: var(--panel-schemas-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-schemas-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);
+    --panel-heading-padding-local: var(--panel-schemas-heading-padding);
+    --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color
+    --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border
+    --panel-heading-white-space-local: var(--panel-heading-whit-space);
+  }
+
+  /**
+  * @tokens Panel samples common
+  */
+
+  --panel-samples-block-background-color: var(--background-color); // @presenter Color
+  --panel-samples-width: 50%;
+
+  --panel-samples-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight
+  --panel-samples-background-color: #52606d; // @presenter Color
+  --panel-samples-border: var(--panel-border); // @presenter Border
+  --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color
+
+  /**
+  * @tokens Panel samples body common
+  */
+
+  --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
+  --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize
+  --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
+  --panel-samples-body-padding: var(--panel-body-padding);
+  --panel-samples-body-background-color: #52606d; // @presenter Color
+  --panel-samples-body-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel samples heading common
+  */
+
+  --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily
+  --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-samples-heading-line-height: 30px; // @presenter LineHeight
+  --panel-samples-heading-padding: 0 20px;
+  --panel-samples-heading-background-color: #323f4b; // @presenter Color
+  --panel-samples-heading-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel try-it, request-samples, response-samples, callback samples
+  */
+
+  .panel-try-it,
+  .panel-request-samples,
+  .panel-response-samples,
+  .panel-callback-samples {
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: var(--panel-samples-body-padding);
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(  --panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
+  /**
+  * @tokens Panel response success, info, error, redirect, callback common
+  */
+
+  .panel-response-success,
+  .panel-response-info,
+  .panel-response-error,
+  .panel-response-redirect,
+  .panel-response-callback {
+    --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+
+    --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
+    --panel-heading-font-size-local: var(--panel-response-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-response-heading-line-height);
+    --panel-heading-padding-local: var(--panel-response-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+    --panel-heading-white-space-local: normal;
+    --panel-body-padding-local: var(--panel-body-padding);
+  }
+
+  /**
+  * @tokens Panel response success colors
+  * @presenter Color
+  */
+
+  .panel-response-success {
+    --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-success-body-text-color);
+    --panel-body-background-color: var(--panel-response-success-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-success-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-success-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(  --panel-response-success-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response info colors
+  * @presenter Color
+  */
+
+  .panel-response-info {
+    --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-info-body-text-color);
+    --panel-body-background-color: var(--panel-response-info-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-info-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-info-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(  --panel-response-info-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response error colors
+  * @presenter Color
+  */
+
+  .panel-response-error {
+    --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-error-body-text-color);
+    --panel-body-background-color: var(--panel-response-error-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-error-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-error-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(  --panel-response-error-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response redirect colors
+  * @presenter Color
+  */
+
+  .panel-response-redirect {
+    --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border
+    --panel-body-text-color: var(--panel-response-redirect-body-text-color);
+
+    --panel-body-background-color: var(--panel-response-redirect-body-background-color);
+    --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(  --panel-response-redirect-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response callback colors
+  * @presenter Color
+  */
+
+  .panel-response-callback {
+    --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-callback-body-text-color);
+    --panel-body-background-color: var(--panel-response-callback-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(  --panel-response-callback-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel try-it nested common
+  * @presenter Color
+  */
+
+  --panel-try-it-nested-text-color: var(--text-color-inverse);
+  --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);
+
+  --panel-try-it-nested-body-background-color: #3e4c59;
+  --panel-try-it-nested-body-text-color: var(--text-color-inverse);
+  --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing
+  --panel-try-it-nested-body-border-color: var(--color-secondary-800);
+
+  --panel-try-it-nested-heading-text-color: var(--text-color-inverse);
+  --panel-try-it-nested-heading-background-color: transparent;
+  --panel-try-it-nested-heading-border-color: var(--color-secondary-800);
+
+  /**
+  * @tokens Panel try-it nested
+  * @presenter Color
+  */
+
+  .panel-try-it-nested {
+    --panel-text-color: var(--panel-try-it-nested-text-color);
+    --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);
+
+    --panel-body-text-color: var(--panel-try-it-nested-body-text-color);
+    --panel-body-background-color: var(--panel-try-it-nested-body-background-color);
+    --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing
+
+    --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);
+    --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);
+  }
+
+  /**
+  * @tokens Panel samples tabs
+  */
+
+  --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+
+  --panel-samples-tabs-background-color: transparent; // @presenter Color
+  --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color
+  --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+  --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color
+  --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color
+
+  --panel-samples-code-block-background-color: var(--code-block-background-color); // @presenter Color
+
+  /**
+  * @tokens Panel try-it tabs
+  */
+
+  --panel-try-it-tabs-font-size: 12px; // @presenter FontSize
+  --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color
+
+  --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
+  --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color
+  --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color
+
+  --panel-try-it-tabs-border-color: transparent; // @presenter Color
+  --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-border-color); // @presenter Color
+  --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color
+  --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color
+
+  /**
+  * @tokens Panel try-it action button
+  */
+
+  --panel-try-it-action-button-width: auto;
+  --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color
+  --panel-try-it-action-button-border-color: transparent; // @presenter Color
+
+  --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
+
+  --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
+  --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
+
+  /**
+  * @tokens Panel samples other styles
+  */
+
+  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
+  --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
+
+  --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-dropdown-border: unset; // @presenter Border
+
+  --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+  /**
+  * @tokens Panel try-it other styles
+  */
+
+  --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-input-border: unset; // @presenter Border
+
+  --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-border: unset; // @presenter Border
+
+  // @tokens End
+
+  // TODO PUL RIGHT section - related to pull right - fix later
+
+  --samples-panel-markdown-background-color: #3c4c5a;
+  --samples-panel-markdown-border-color: #46596a;
+
+  --layout-right-rail-width: 50%;
+  --layout-right-rail-background-color: transparent;
+`;
+const tooltip = (0, styled_components_1.css) `
+  /**
+    * @tokens Tooltip Base
+    * @presenter Color
+    */
+  --tooltip-text-color: var(--color-secondary-200);
+  --tooltip-background-color: var(--color-emphasis-600);
+
+  /**
+    * @tokens Tooltip Copy Button
+    * @presenter Color
+    */
+
+  --copy-button-tooltip-text-color: #000;
+  --copy-button-tooltip-background-color: var(--background-color);
+
+  .tooltip-copy-button {
+    --tooltip-text-color: var(--copy-button-tooltip-text-color);
+    --tooltip-background-color: var(--copy-button-tooltip-background-color);
+  }
+
+  // @tokens End
+`;
+const code = (0, styled_components_1.css) `
+  /**
+    * @tokens Code base styles
+    */
+  --code-font-size: 13px; // @presenter FontSize
+  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --code-font-weight: 400; // @presenter FontWeight
+  --code-wrap: pre;
+  --code-word-break: break-word;
+
+  /**
+    * @tokens Inline Code
+    */
+  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
+  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
+  --inline-code-text-color: #e53935; // @presenter Color
+  --inline-code-background-color: var(--colors-translucent); // @presenter Color
+  --inline-code-border-color: var(--border-color); // @presenter Color
+  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Code Block
+    */
+  --code-block-font-size: var(--code-font-size); // @presenter FontSize
+  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-text-color: #fff; // @presenter Color
+  --code-block-background-color: #323f4b; // @presenter Color
+  --code-block-border-color: var(--border-color); // @presenter Color
+  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-max-height: 600px;
+  --code-block-word-break: initial;
+
+  /**
+    * @tokens Code Block controls
+    */
+
+  --code-block-controls-text-color: #fff; // @presenter Color
+  --code-block-controls-hover-text-color: #fff; // @presenter Color
+  --code-block-controls-background-color: transparent; // @presenter Color
+  --code-block-controls-hover-background-color: rgba(255, 255, 255, 0.15); // @presenter Color
+  --code-block-controls-opacity: 0.5;
+  --code-block-controls-active-opacity: 1;
+  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
+  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
+  --code-block-controls-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Code Block tokens
+   */
+  --code-block-tokens-default-color: var(--text-color-inverse); // @presenter Color
+  --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color
+  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color
+  --code-block-tokens-string-color: #fee39e; // @presenter Color
+  --code-block-tokens-property-string-color: #9efaa7; // @presenter Color
+  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-link-color: #4ed2ba; // @presenter Color
+  --code-block-tokens-operator-color: #f5b83d; // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-regex-color: #e90; // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+  --code-block-tokens-deleted-color: red; // @presenter Color
+
+  // @tokens End
+`;
+const links = (0, styled_components_1.css) `
+  /**
+    * @tokens Links
+    */
+  --link-text-color: var(--color-primary-500); // @presenter Color
+  --link-decoration: none;
+  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  --link-hover-text-color: var(--color-primary-100); // @presenter Color
+  --link-hover-decoration: underline;
+
+  --link-active-decoration: none;
+  --link-active-text-color: var(--color-primary-500); // @presenter Color
+
+  --link-visited-text-color: var(--color-primary-500); // @presenter Color
+  --link-visited-decoration: none;
+
+  // @tokens End
+`;
+const apiReferenceDocs = (0, styled_components_1.css) `
+  /* === ref docs and graphql docs specific === */
+
+  /**
+  * @tokens API Reference Schemas Layout
+  */
+
+  --layout-controls-top-offset: 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(--dropdown-border); // @presenter Border
+  --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --schemas-mime-type-dropdown-text-color: var(--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); // @presenter Border
+  --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --schemas-discriminator-dropdown-text-color: var(--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-secondary); // @presenter Color
+  --schema-labels-font-size: 1em; // @presenter FontSize
+
+  /**
+  * @tokens API Reference Schemas Lines Color
+  */
+
+  --schemas-lines-color: var(--border-color); // @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-text-color: var(--text-color); // @presenter Color
+  --schema-inline-background-color: var(--colors-translucent); // @presenter Color
+  --schema-inline-border-color: var(--border-color); // @presenter Color
+  --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
+
+  /**
+  * @tokens API Reference Schema Example Label colors
+  * @presenter Color
+  */
+
+  --schema-example-text-color: var(--schema-inline-code-text-color);
+  --schema-example-background-color: var(--schema-inline-background-color);
+  --schema-example-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Constraint Label colors
+  * @presenter Color
+  */
+
+  --schema-constraint-text-color: var(--schema-inline-code-text-color);
+  --schema-constraint-background-color: var(--schema-inline-background-color);
+  --schema-constraint-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Enum Label colors
+  * @presenter Color
+  */
+
+  --schema-enum-text-color: var(--schema-inline-code-text-color);
+  --schema-enum-background-color: var(--schema-inline-background-color);
+  --schema-enum-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Default Label colors
+  * @presenter Color
+  */
+
+  --schema-default-text-color: var(--schema-inline-code-text-color);
+  --schema-default-background-color: var(--schema-inline-background-color);
+  --schema-default-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Recursive Label colors
+  * @presenter Color
+  */
+
+  --schema-recursive-text-color: var(--color-warning-600);
+  --schema-recursive-background-color: var(--schema-inline-background-color);
+  --schema-recursive-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens GraphQL Docs Reference Schema Non null label
+  * @presenter Color
+  */
+
+  --schema-non-null-text-color: var(--schema-inline-code-text-color);
+  --schema-non-null-background-color: var(--schema-inline-background-color);
+  --schema-non-null-border-color: var(--schema-inline-border-color);
+  /**
+  * @tokens API Reference Schema Nested styles
+  */
+
+  --schema-nested-offset: 1em; // @presenter Spacing
+  --schema-nested-background-color: var(--colors-translucent); // @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(--color-emphasis-700); // @presenter Color
+  --schema-buttons-background-color: transparent; // @presenter Color
+  --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color
+
+  --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color
+  --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color
+
+  --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color
+  --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color
+  --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color
+  --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color
+  --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color
+
+  /**
+  * @tokens API Reference Schema Properties
+  */
+
+  --schemas-property-name-text-color: var(--text-color); //@presenter Color
+  --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize
+  --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
+
+  --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color
+
+  --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
+  --schema-property-required-label-text-color: var(--color-error-900); // @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%;
+
+  /**
+  * @tokens API Reference Schema Icons
+  */
+
+  --schema-chevron-color: var(--text-color); // @presenter Color
+  --schema-chevron-size: 9px;
+
+  --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color
+  --schema-property-deep-link-icon: none;
+
+  /*
+    * @tokens API Reference Other
+    */
+
+  --loading-spinner-color: var(--color-primary-500); // @presenter Color
+  --linear-progress-color: var(--color-accent-500); // @presenter Color
+  --linear-progress-background-color: var(--color-accent-100); // @presenter Color
+
+  --fab-background-color: var(--color-primary-500); // @presenter Color
+  --fab-box-shadow: var(--box-shadow); // @presenter Shadow
+
+  --fab-hover-background: var(--color-primary-500); // @presenter Color
+  --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow
+
+  --fab-active-background: var(--color-primary-500); // @presenter Color
+  --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow
+
+  --fab-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
+
+  // @tokens End
+`;
+const badges = (0, styled_components_1.css) `
+  /**
+  * @tokens Default Badge
+  */
+  --badge-text-color: var(--color-emphasis-50); // @presenter Color
+  --badge-background-color: var(--color-primary-500); // @presenter Color
+  --badge-border-color: var(--color-primary-700); // @presenter Color
+  --badge-border: 1px solid var(--badge-border-color); // @presenter Border
+  --badge-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+  * @tokens Deprecated Badge
+  */
+
+  --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color
+  --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color
+  --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color
+  --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
+  --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+  * @tokens Http Badge
+  */
+
+  --badge-http-font-size: 12px; // @presenter FontSize
+  --badge-http-line-height: 20px; // @presenter LineHeight
+  --badge-http-text-color: var(--badge-text-color); // @presenter Color
+  --badge-http-font-family: var(--code-font-family); // @presenter FontFamily
+  --badge-http-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --badge-http-border-radius: calc(var(--border-radius-lg) * 2); // @presenter BorderRadius
+
+  /**
+  * @tokens Sidebar item badge http
+  */
+
+  --sidebar-item-badge-http-text-color: var(--badge-text-color); // @presenter Color
+  --sidebar-item-badge-http-font-family: var(--code-font-family); // @presenter FontFamily
+  --sidebar-item-badge-http-font-size: 8px; // @presenter FontSize
+  --sidebar-item-badge-http-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-badge-http-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+`;
+const footer = (0, styled_components_1.css) `
+  /**
+    * @tokens Footer
+    */
+  --footer-background-color: var(--color-primary-500); // @presenter Color
+  --footer-text-color: #fff; // @presenter Color
+
+  --footer-padding-vertical: 2em; // @presenter Spacing
+  --footer-padding-horizontal: 20px; // @presenter Spacing
+
+  --footer-font-family: var(--font-family-base); // @presenter FontFamily
+  --footer-font-size: 1rem; // @presenter FontSize
+  --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  --footer-title-text-color: var(--footer-text-color); // @presenter Color
+  --footer-title-font-size: 24px; // @presenter FontSize
+  --footer-title-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --footer-title-margin-vertical: 1.5em;
+
+  --footer-link-text-color: var(--footer-text-color); // @presenter Color
+  --footer-link-hover-color: var(--footer-text-color); // @presenter Color
+
+  --footer-item-padding-vertical: 0.5em; // @presenter Spacingv
+  --footer-item-padding-horizontal: 0;
+
+  --footer-column-width: 20%; // @presenter Spacing
+  --footer-column-margin-vertical: 20px; // @presenter Spacing
+  --footer-column-margin-horizontal: 0; // @presenter Spacing
+
+  --footer-container-max-width: 1200px; // @presenter Spacing
+
+  // @tokens End
+`;
+const logo = (0, styled_components_1.css) `
+  /**
+    * @tokens Logo
+    */
+
+  --navbar-logo-height: 2rem; // @presenter Spacing
+  --navbar-logo-width: auto;
+  --navbar-logo-margin: 16px; // @presenter Spacing
+  --navbar-logo-max-width: 285px; // @presenter Spacing
+  --navbar-logo-max-height: 285px; // @presenter Spacing
+
+  // @tokens End
+`;
+const navbar = (0, styled_components_1.css) `
+  /**
+    * @tokens Navbar
+    */
+  --navbar-height: 60px; // @presenter Spacing
+  --navbar-text-color: #fff; // @presenter Color
+  --navbar-background-color: var(--color-primary-500); // @presenter Color
+  --navbar-container-max-width: 100%;
+
+  /**
+    * @tokens Navbar Item
+    * */
+  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --navbar-item-font-size: 16px; // @presenter FontSize
+  --navbar-item-padding-horizontal: 16px; // @presenter Spacing
+  --navbar-item-paddin-vertical: 8px; // @presenter Spacing
+  --navbar-item-margin-horizontal: 7px;
+  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --navbar-item-hover-background-color: var(--color-primary-300);
+  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color
+  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color
+  --navbar-item-hover-text-decoration: none;
+  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
+  --navbar-item-active-text-decoration: none;
+  --navbar-item-separator-line-color: var(--border-color); // @presenter Color
+
+  /**
+    * @tokens Navbar dropdown
+    * */
+
+  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable
+  --navbar-dropdown-background: var(--navbar-item-active-background-color);
+  --navbar-dropdown-border: none;
+
+  // @tokens End
+`;
+const toc = (0, styled_components_1.css) `
+  /**
+    * @tokens TOC
+    * */
+
+  --toc-width: 240px;
+  --toc-background-color: transparent;
+  --toc-border-color: var(--border-color);
+
+  --toc-spacing-unit: 8px;
+  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);
+
+  /**
+     * @tokens TOC item typography
+     */
+  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
+
+  /**
+    * @tokens TOC item
+    */
+
+  --toc-item-text-color: var(--text-color); // @presenter Color
+  --toc-item-active-text-color: var(--text-color); // @presenter Color
+  --toc-item-background-color: transparent; // @presenter Color
+  --toc-item-active-background-color: var(--border-color); // @presenter Color
+  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
+  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing
+  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
+
+  /**
+    * @tokens TOC header
+    */
+
+  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily
+  --toc-heading-font-weight: bold; // @presenter FontWeight
+  --toc-heading-text-color: var(--text-color); // @presenter Color
+
+  // @tokens End
+`;
+const loadProgressBar = (0, styled_components_1.css) `
+  /**
+    * @tokens Load progress bar
+    */
+
+  --load-progress-bar-color: var(--color-secondary-500); // @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: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: var(--load-progress-bar-height);
+  }
+
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    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 = (0, styled_components_1.css) `
+  /**
+    * @tokens Inputs
+    */
+  --input-text-color: var(--text-color-inverse); // @presenter Color
+  --input-border: none; // @presenter Border
+  --input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --input-font-size: var(--font-size-base); // @presenter FontSize
+  --input-font-family: var(--code-font-family); // @presenter FontFamily
+  --input-line-height: 1.15em; // @presenter LineHeight
+  --input-padding: 8px;
+
+  --input-hover-text-color: var(--text-color-inverse); // @presenter Color
+  --input-hover-border: none; // @presenter Border
+  --input-focus-border: none; // @presenter Border
+  --input-focus-text-color: var(--text-color-inverse); // @presenter Color
+  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color
+
+  // @tokens End
+`;
+const markdown = (0, styled_components_1.css) `
+  /**
+  * @tokens Markdown Container
+  */
+
+  --md-container-max-width: 910px;
+  --md-container-padding-vertical: 25px; // @presenter Spacing
+  --md-container-padding-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Blockquote
+  */
+
+  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing
+  --md-blockquote-margin-horizontal: 0; // @presenter Spacing
+  --md-blockquote-padding-vertical: 0; // @presenter Spacing
+  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing
+  --md-blockquote-border-color: var(--border-color); // @presenter Color
+  --md-blockquote-background-color: transparent; // @presenter Color
+  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border
+  --md-blockquote-text-color: var(--text-color); // @presenter Color
+  --md-blockquote-box-shadow: none; // @presenter Shadow
+
+  /**
+  * @tokens Markdown Paragraph
+  */
+
+  --md-paragraph-margin-vertical: 10px; // @presenter Spacing
+  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Table
+  */
+
+  --md-table-font-size: 14px; // @presenter FontSize
+  --md-table-margin-vertical: 20px; // @presenter Spacing
+  --md-table-background-color: transparent; // @presenter Color
+
+  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --md-table-border-width: 1px;
+  --md-table-border-color: var(--border-color); // @presenter Color
+
+  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color
+
+  --md-table-cell-text-color: var(--text-color); // @presenter Color
+  --md-table-cell-padding: 12px; // @presenter Spacing
+
+  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color
+  --md-table-head-text-color: var(--text-color); // @presenter Color
+  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  /**
+  * @tokens Markdown Horizontal Rule
+  */
+
+  --md-hr-background-color: transparent; // @presenter Color
+  --md-hr-border-color: var(--border-color); // @presenter Color
+  --md-hr-height: unset;
+  --md-hr-margin-vertical: 20px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown List
+  */
+
+  --md-list-left-padding: 2rem; // @presenter Spacing
+  --md-list-margin: 1rem; // @presenter Spacing
+  --md-list-item-margin: 0.25rem; // @presenter Spacing
+  --md-list-item-style: inherit;
+
+  /**
+  * @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-number-display: none;
+  --md-numbered-list-item-style: var(--md-list-item-style);
+  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color
+  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color
+  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
+  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing
+  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
+
+  // @tokens End
+`;
+const search = (0, styled_components_1.css) `
+  /**
+      * @tokens Search
+      */
+
+  --search-highlight-text-color: #ffff03; // @presenter Color
+
+  /**
+      * @tokens Portal Search
+      */
+
+  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-input-text-color: #fff; // @presenter Color
+
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize
+  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
+  --search-input-line-height: 1.15em; // @presenter LineHeight
+
+  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-input-hover-border: none; // @presenter Color
+  --search-input-placeholder-color: var(--search-input-text-color);
+
+  --search-popover-background-color: var(--background-color); // @presenter Color
+  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
+  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow
+  --search-popover-border: none;
+
+  --search-item-padding: 8px 24px;
+  --search-item-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-title-text-color: var(--text-color); // @presenter Color
+  --search-item-background-color: transparent; // @presenter Color
+  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-active-title-text-color: var(--text-color); // @presenter Color
+  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color
+
+  /**
+    * @tokens Sidebar Search
+    */
+
+  --sidebar-search-button-background-color: transparent; // @presenter Color
+  --sidebar-search-button-text-color: var(--text-color); // @presenter Color
+  --sidebar-search-button-border: var(--border-color);
+  --sidebar-search-button-border-radius: none; // @presenter BorderRadius
+  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize
+  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight
+  --sidebar-search-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color
+  --sidebar-search-button-active-background-color: transparent; // @presenter Color
+  --sidebar-search-button-active-border: var(--border-color); // @presenter Color
+
+  /**
+    * @tokens Search results modal
+    * @presenter Color
+    */
+
+  --search-modal-background: var(--background-color);
+  --search-modal-text-color: var(--text-color);
+  --search-modal-border: none;
+  --search-modal-box-shadow: none;
+
+  --search-modal-header-border-radius: 8px;
+  --search-modal-header-background-color: var(--color-secondary-100);
+  --search-modal-clear-button-background-color: var(--color-secondary-300);
+  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);
+
+  // @tokens End
+`;
+const dropdown = (0, styled_components_1.css) `
+  --dropdown-font-size: 14px;
+  --dropdown-text-color: var(--text-color);
+
+  --dropdown-padding-vertical: 8px;
+  --dropdown-padding-left: 10px;
+  --dropdown-padding-right: 26px;
+  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)
+    var(--dropdown-padding-vertical) var(--dropdown-padding-left);
+
+  --dropdown-border: none;
+`;
+const lastUpdated = (0, styled_components_1.css) `
+  --last-updated-text-color: var(--text-color);
+  --last-updated-font-size: var(--font-size-small);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;
+const tile = (0, styled_components_1.css) `
+  --wide-tile-background-color: var(--color-secondary-50);
+  --thin-tile-background-color: var(--color-secondary-50);
+`;
+exports.styles = (0, styled_components_1.css) `
+  :root {
+    ${baseColors}
+    ${httpColors}
+    ${responsePanelColors}
+    ${typography}
+    ${headingsTypography}
+    ${common}
+    ${admonition}
+    ${buttons}
+    ${sidebar}
+    ${navbar}
+    ${footer}
+    ${logo}
+    ${badges}
+    ${toc}
+    ${inputs}
+    ${tooltip}
+    ${code}
+    ${links}
+    ${markdown}
+    ${search}
+    ${dropdown}
+    ${apiReferencePanels}
+    ${apiReferenceDocs}
+    ${lastUpdated}
+    ${tile}
+    ${loadProgressBar}
+  }
+
+  :root.dark {
+    ${darkColors_1.darkMode};
+  }
+
+  :root.notransition * {
+    transition: none !important;
+  }
+`;
+exports.GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+  ${exports.styles};
+`;
+//# sourceMappingURL=globalStyle.js.map