@redocly/theme 0.18.3-patch.0 → 0.18.3

package/src/globalStyle.ts

@@ -1,226 +1,114 @@
 import { createGlobalStyle, css } from 'styled-components';
 
-import { darkMode } from '@theme/ui/darkColors';
 import { breakpoints } from '@portal/media-css';
-import { footer } from "@theme/components/Footer";
-import { sidebar, versionPicker } from "@theme/components/Sidebar";
-import { breadcrumbs } from "@theme/components/Breadcrumbs";
-import { button } from '@theme/components/Button';
-import { tag } from '@theme/components/Tag';
-import { toc } from '@theme/components/TableOfContent';
-import { navbar } from "@theme/components/Navbar";
-import { search } from "@theme/components/Search";
-import { catalog } from "@theme/components/Catalog";
-import { filter } from "@theme/components/Filter";
-import { menu, mobileMenu } from "@theme/components/Menu";
-import { apiReferencePanels, responsePanelColors } from '@theme/components/Panel';
-import { code } from '@theme/components/CodeBlock';
-import { product, productPicker } from '@theme/components/Product';
-import { languagePicker } from '@theme/I18n';
-import { select } from '@theme/components/Select';
-import { userProfile, userProfileDropdown } from '@theme/components/Profile';
-import { dropdown } from '@theme/components/Dropdown';
-import { admonition, markdown } from '@theme/components/Markdown';
-import { tooltip } from '@theme/components/Tooltip';
-
-const themeColors = css`
-/* === Palette === */
-  /**
-    * @tokens Base Colors
-    * @presenter Color
-    */
 
-  --color-red-1: #fff1f0;
-  --color-red-2: #ffccc7;
-  --color-red-3: #ffa39e;
-  --color-red-4: #ff7875;
-  --color-red-5: #ff4d4f;
-  --color-red-6: #f5222d;
-  --color-red-7: #cf1322;
-  --color-red-8: #a8071a;
-  --color-red-9: #820014;
-  --color-red-10: #5c0011;
-
-  --color-green-1: #f6ffed;
-  --color-green-2: #d9f7be;
-  --color-green-3: #b7eb8f;
-  --color-green-4: #95de64;
-  --color-green-5: #73d13d;
-  --color-green-6: #49aa19;
-  --color-green-7: #389e0d;
-  --color-green-8: #237804;
-  --color-green-9: #135200;
-  --color-green-10: #092b00;
-
-  --color-gold-1: #fffbe6;
-  --color-gold-2: #fff1b8;
-  --color-gold-3: #ffe58f;
-  --color-gold-4: #ffd666;
-  --color-gold-5: #ffc53d;
-  --color-gold-6: #faad14;
-  --color-gold-7: #d48806;
-  --color-gold-8: #ad6800;
-  --color-gold-9: #874d00;
-  --color-gold-10: #613400;
-
-  --color-blue-1: #e6f4ff;
-  --color-blue-2: #bae0ff;
-  --color-blue-3: #91caff;
-  --color-blue-4: #69b1ff;
-  --color-blue-5: #4096ff;
-  --color-blue-6: #1677ff;
-  --color-blue-7: #0958d9;
-  --color-blue-8: #003eb3;
-  --color-blue-9: #002c8c;
-  --color-blue-10: #001d66;
-
-  --color-purple-1: #f9f0ff;
-  --color-purple-2: #efdbff;
-  --color-purple-3: #d3adf7;
-  --color-purple-4: #b37feb;
-  --color-purple-5: #9254de;
-  --color-purple-6: #722ed1;
-  --color-purple-7: #531dab;
-  --color-purple-8: #391085;
-  --color-purple-9: #22075e;
-  --color-purple-10: #120338;
-
-  --color-magneta-1: #fff0f6;
-  --color-magneta-2: #ffd6e7;
-  --color-magneta-3: #ffadd2;
-  --color-magneta-4: #ff85c0;
-  --color-magneta-5: #f759ab;
-  --color-magneta-6: #eb2f96;
-  --color-magneta-7: #c41d7f;
-  --color-magneta-8: #9e1068;
-  --color-magneta-9: #780650;
-  --color-magneta-10: #520339;
-
-  --color-cyan-1: #e6fffb;
-  --color-cyan-2: #b5f5ec;
-  --color-cyan-3: #87e8de;
-  --color-cyan-4: #5cdbd3;
-  --color-cyan-5: #36cfc9;
-  --color-cyan-6: #13c2c2;
-  --color-cyan-7: #08979c;
-  --color-cyan-8: #006d75;
-  --color-cyan-9: #00474f;
-  --color-cyan-10: #002329;
-
-  --color-yellow-1: #feffe6;
-  --color-yellow-2: #ffffb8;
-  --color-yellow-3: #fffb8f;
-  --color-yellow-4: #fff566;
-  --color-yellow-5: #ffec3d;
-  --color-yellow-6: #d8bd14;
-  --color-yellow-7: #d4b106;
-  --color-yellow-8: #ad8b00;
-  --color-yellow-9: #876800;
-  --color-yellow-10: #614700;
-
-  --color-lime-1: #fcffe6;
-  --color-lime-2: #f4ffb8;
-  --color-lime-3: #eaff8f;
-  --color-lime-4: #d3f261;
-  --color-lime-5: #bae637;
-  --color-lime-6: #a0d911;
-  --color-lime-7: #7cb305;
-  --color-lime-8: #5b8c00;
-  --color-lime-9: #3f6600;
-  --color-lime-10: #254000;
-
-  --color-geekblue-1: #f0f5ff;
-  --color-geekblue-2: #d6e4ff;
-  --color-geekblue-3: #adc6ff;
-  --color-geekblue-4: #85a5ff;
-  --color-geekblue-5: #597ef7;
-  --color-geekblue-6: #2f54eb;
-  --color-geekblue-7: #1d39c4;
-  --color-geekblue-8: #10239e;
-  --color-geekblue-9: #061178;
-  --color-geekblue-10: #030852;
-
-  --color-primary-bg: #ebf0ff;
-  --color-primary-bg-hover: #d6dfff;
-  --color-primary-border: #adbcff;
-  --color-primary-border-hover: #8a99ff;
-  --color-primary-hover: #6678ff;
-  --color-primary-base: #434dfa;
-  --color-primary-active: #2f31d4;
-  --color-primary-text-hover: #201dad;
-  --color-primary-text: #161087;
-  --color-primary-text-active: #0d086e;
-
-  --color-success-bg: var(--color-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-gold-1);
-  --color-warning-bg-hover: var(--color-gold-2);
-  --color-warning-border: var(--color-gold-3);
-  --color-warning-border-hover: var(--color-gold-4);
-  --color-warning-hover: var(--color-gold-5);
-  --color-warning-base: var(--color-gold-6);
-  --color-warning-active: var(--color-gold-7);
-  --color-warning-text-hover: var(--color-gold-8);
-  --color-warning-text: var(--color-gold-9);
-  --color-warning-text-active: var(--color-gold-10);
-
-  --color-error-bg: var(--color-red-1);
-  --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-3);
-  --color-error-border-hover: var(--color-red-4);
-  --color-error-hover: var(--color-red-5);
-  --color-error-base: var(--color-red-6);
-  --color-error-active: var(--color-red-7);
-  --color-error-text-hover: var(--color-red-8);
-  --color-error-text: var(--color-red-9);
-  --color-error-text-active: var(--color-red-10);
-
-  --color-info-bg: var(--color-blue-1);
-  --color-info-bg-hover: var(--color-blue-2);
-  --color-info-border: var(--color-blue-3);
-  --color-info-border-hover: var(--color-blue-4);
-  --color-info-hover: var(--color-blue-5);
-  --color-info-base: var(--color-blue-6);
-  --color-info-active: var(--color-blue-7);
-  --color-info-text-hover: var(--color-blue-8);
-  --color-info-text: var(--color-blue-9);
-  --color-info-text-active: var(--color-blue-10);
-
-  /**
-   * @tokens Main colors
-   * @presenter Color
-   */
+import { darkMode } from './ui/darkColors';
 
-  --color-primary: var(--color-primary-base);
-  --color-error: var(--color-error-base);
-  --color-warning: var(--color-warning-base);
-  --color-success: var(--color-success-base);
-  --color-info: var(--color-info-base);
- 
-  /**
-   * @tokens Elevation Colors
-   * @presenter Color
-   */
+const baseColors = css`
+  /* === Palette === */
 
-  --bg-sunken: #F1F1F1; // Sunken is the lowest elevation available.
-  --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
-  --bg-raised: #fafafa; // Cards, elements, inputs
-  --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
+  /**
+      * @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%);
 
-  --bg-base-shadow: 0px 3px 5px rgba(51, 51, 51, 0.2), 0px 0px 1px rgba(51, 51, 51, 0.31); // Elements
-  --bg-raised-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Hovers for base. Menu
-  --bg-overlay-shadow: 0px 18px 28px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Use for dropdowns
+  // @tokens End
+`;
 
-  --background-color: var(--bg-base);
+const httpColors = 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
 `;
@@ -229,248 +117,1209 @@ const typography = css`
   /* === Typography === */
 
   /**
-    * @tokens Font Families
-    * @presenter FontFamily
+    * @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);
 
-  --font-family-base: Source Sans Pro, sans-serif; // Font family of the entire system.
-  --font-family-monospaced: Source Code Pro, monospace;
+  /**
+    * @tokens Font Sizes
+    * @presenter FontSize
+    */
+  --font-size-base: 14px;
+  --font-size-small: 12px;
 
   /**
-    * @tokens Font Colors
-    * @presenter Color
+    * @tokens Line Heights
+    * @presenter LineHeight
     */
+  --line-height-base: 1.5em;
 
-  --text-base: #000; // The base color of the typography color tokens.
-  --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
-  --text-primary: #161616; // Headers, Icon hover
-  --text-secondary: #525252; // Body text
-  --text-description: #8d8d8d; // Caption, Description, Icon
-  --text-placeholder: #a8a8a8; // Placeholder text, Disabled text
-  --text-link: var(--color-blue-6);
-  
   /**
     * @tokens Font Weights
     * @presenter FontWeight
     */
-
-  --font-weight-regular: 400; // All normal weight fonts in the entire system.
-  --font-weight-bold: 600; // All strong weights in the entire system.
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
   --font-weight-bolder: 700;
-  --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.
-  
+
   /**
-   * @tokens Line Heights
-   * @presenter LineHeight
-   */
+    * @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
 
-  --line-height-base: 22px;
-  --line-height-xsm: 18px;
-  --line-height-sm: 20px;
-  --line-height-md: 24px;
-  --line-height-lg: 26px;
-  --line-height-xlg: 28px;
-  --line-height-xxlg: 30px;
+  // @tokens End
+`;
+
+const headingsTypography = css`
+  * {
+    box-sizing: border-box;
+  }
 
   /**
-    * @tokens Font Sizes
-    * @presenter FontSize
+    * @tokens Headings common styles
     */
 
-  --font-size-base: 14px; // Base font size of the entire system.
-  --font-size-sm: 12px;
-  --font-size-lg: 16px;
-  --font-size-xl: 20px;
-  --font-size-heading-1: 38px;
-  --font-size-heading-2: 30px;
-  --font-size-heading-3: 24px;
-  --font-size-heading-4: 20px;
-  --font-size-heading-5: 16px;
+  --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 Font Rendering
-    */
+  * @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 config 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
+  */
 
-   --text-smoothing: antialiased; // text-smoothing
-   --text-rendering: optimizeSpeed; // text-rendering
+  --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 sizeAndSpace = css`
-  /* === Size & Space === */
-  
+const common = css`
   /**
-    * @tokens Size
-    * @presenter Spacing
+    * @tokens Borders
+    * @presenter Border
     */
+  --border-width: 1px;
+  --border-style: solid;
 
-  --container-width: 1200px;
+  /**
+    * @tokens Border Radius
+    * @presenter BorderRadius
+    */
+  --border-radius: 4px;
+  --border-radius-lg: calc(var(--border-radius) * 2);
 
   /**
-    * @tokens Space
+    * @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: 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-unit: 5px;
+  --spacing-horizontal: calc(var(--spacing-unit) * 8);
+  --spacing-vertical: calc(var(--spacing-unit) * 4);
+
+  // @tokens End
+`;
+
+const buttons = css`
+  /*
+  * Static classnames that can be used to override styles for components:
+  * download-specification-button, next-section-button, button-base
+  */
 
-  --spacing-horizontal: var(--spacing-xl);
-  --spacing-vertical: var(--spacing-base);
-  
   /**
-    * @tokens Height
-    * @presenter Spacing
+    * @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
+
+  --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
     */
-  --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.
+  .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 borders = css`
+const sidebar = css`
+  /* === Sidebar === */
+
   /**
-    * @tokens Borders
-    * @presenter Border
+    * @tokens Sidebar logo
     */
 
-  --border-width: 1px;
-  --border-style: solid;
+  --sidebar-logo-max-height: 285px;
+  --sidebar-logo-max-width: 285px;
+  --sidebar-logo-padding: 2px; // @presenter spacing
 
   /**
-   * @tokens Border Colors
-   * @presenter Color
-   */
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: 'inherit';
 
-  --border-primary: #d5d5d5; // 12% opacity. Raised dividers
-  --border-secondary: #f0f0f0; // 6% opacity. Default dividers, borders
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--background-color);
+  --sidebar-border-color: var(--border-color);
 
   /**
-   * @tokens Border Radius
-   * @presenter BorderRadius
-   */
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-width: 285px; // @presenter NO
 
-  --border-radius: 4px;
-  --border-radius-md: calc(var(--border-radius) * 1.5);
-  --border-radius-lg: calc(var(--border-radius) * 2);
-  --border-radius-xlg: calc(var(--border-radius) * 3);
-`
+  --sidebar-spacing-unit: 8px;
+  --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);
+  --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);
 
-const headingsTypography = css`
-  * {
-    box-sizing: border-box;
-  }
+  --sidebar-chevron-size: var(--sidebar-spacing-unit);
+
+  /* === Sidebar Item === */
 
   /**
-    * @tokens Headings common styles
+    * @tokens Sidebar item typography
     */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
 
-  --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily
-  --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight
-  --heading-margin-top: 1.25em; // @presenter Spacing
-  --heading-margin-bottom: 0.9em; // @presenter Spacing
-  --heading-text-color: var(--text-primary); // @presenter Color
+  /**
+    * @tokens 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 Typography heading anchor icon
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
     */
 
-  --heading-anchor-offset-right: 4px; // @presenter Spacing
-  --heading-anchor-color: var(--color-primary); // @presenter Color
-  --heading-anchor-icon: none;
+  --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 Heading level 1
+    * @tokens Sidebar item icon
     */
+  --sidebar-item-icon-size: 20px;
+  --sidebar-item-icon-border-radius: 100%;
 
-  --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 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 Heading level 2
+    * @tokens Sidebar item drilldown
     */
 
-  --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
+  --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 config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config 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
+  --sidebar-item-separator-offset: calc(var(--sidebar-spacing-unit) * 2);
+
+  /**
+    * @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(--link-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 = 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;
+
+  /**
+  * @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-secondary-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 = 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 = 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 samples default
+  */
+  .panel-samples-default {
+    --text-color: var(--panel-samples-text-color);
+    --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: 0;
+    --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 try-it, request-samples, response-samples, callback samples
+  */
+
+  .panel-try-it,
+  .panel-pull-right,
+  .panel-request-samples,
+  .panel-response-samples,
+  .panel-callback-samples {
+    --text-color: var(--panel-samples-text-color);
+    --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(--font-weight-bold); // @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(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-primary-700); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-primary-700); // @presenter Color
+
+  --panel-try-it-action-button-hover-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-hover-background-color: var(--color-primary-600); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-primary-600); // @presenter Color
+
+  /**
+  * @tokens Panel samples other styles
+  */
+
+  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color);
+
+  --panel-samples-icon-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-text-controls-background-color: var(--color-secondary-900); // @presenter Color
+
+  --panel-samples-controls-hover-background-color: #606e7b; // @presenter Color
+  --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-controls-border: 1px solid var(--color-secondary-900); // @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 = css`
   /**
-    * @tokens Heading level 3
+    * @tokens Tooltip Base
+    * @presenter Color
     */
-
-  --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
+  --tooltip-text-color: var(--color-secondary-200);
+  --tooltip-background-color: var(--color-emphasis-600);
 
   /**
-    * @tokens Heading level 4
+    * @tokens Tooltip Copy Button
+    * @presenter Color
     */
 
-  --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h4-font-size: 16px; // @presenter FontSize
-  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --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 = css`
   /**
-    * @tokens Heading level 5
+    * @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-line-height: 18px; // @presenter LineHeight
+  --code-wrap: pre;
+  --code-word-break: break-word;
 
-  --h5-font-size: 14px; // @presenter FontSize
-  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
+  /**
+    * @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 Heading level 6
+    * @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); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
+  --code-block-max-height: 50vh;
+  --code-block-word-break: initial;
 
-  --h6-font-size: 12px; // @presenter FontSize
-  --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  /**
+    * @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 = css`
   /**
     * @tokens Links
     */
-
-  --link-text-color: var(--color-blue-6); // @presenter Color
+  --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-blue-5); // @presenter Color
+  --link-hover-text-color: var(--color-primary-100); // @presenter Color
   --link-hover-decoration: underline;
 
   --link-active-decoration: none;
-  --link-active-text-color: var(--color-blue-7); // @presenter Color
+  --link-active-text-color: var(--color-primary-500); // @presenter Color
 
-  --link-visited-text-color: var(--color-blue-7); // @presenter Color
+  --link-visited-text-color: var(--color-primary-500); // @presenter Color
   --link-visited-decoration: none;
 
   // @tokens End
@@ -480,9 +1329,8 @@ const apiReferenceDocs = css`
   /* === ref docs and graphql docs specific === */
 
   /**
-    * @tokens API Reference Schemas Layout
-    */
-
+  * @tokens API Reference Schemas Layout
+  */
   --layout-controls-margin: 20px; // @presenter Spacing
   --layout-controls-height: 36px; // @presenter Spacing
   --layout-controls-width: 36px; // @presenter Spacing
@@ -500,8 +1348,8 @@ const apiReferenceDocs = css`
   --layout-panel-schemas-large-max-width: none;
 
   /**
-    * @tokens API Reference Schemas MimeType Dropdown
-    */
+  * @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
@@ -509,169 +1357,163 @@ const apiReferenceDocs = css`
   --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-font-size); // @presenter Color
 
   /**
-    * @tokens API Reference Schemas Discriminator Dropdown
-    */
+  * @tokens API Reference Schemas Discriminator Dropdown
+  */
 
   --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;
-  --schemas-discriminator-dropdown-border: 1px solid var(--border-primary); // @presenter Border
+  --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @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
-    */
+  * @tokens API Reference Schemas Titles
+  */
 
-  --schema-type-title-text-color: var(--text-secondary); // @presenter Color
-  --schema-type-text-color: var(--text-secondary); // @presenter Color
+  --schema-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
-    */
+  * @tokens API Reference Schemas Lines Color
+  */
 
-  --schemas-lines-color: var(--border-primary); // @presenter Color
+  --schemas-lines-color: var(--border-color); // @presenter Color
 
   /**
-    * @tokens API Reference Schema Inline code typography
-    */
+  * @tokens API Reference Schema Inline code typography
+  */
 
   --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily
   --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize
-  --schema-inline-code-font-weight: var(--inline-code-font-weight); // @presenter FontWeight
-  --schema-inline-code-text-color: var(--text-secondary); // @presenter Color
-  --schema-inline-code-line-height: var(--inline-code-line-height); // @presenter LineHeight
-  --schema-inline-background-color: var(--bg-overlay); // @presenter Color
-  --schema-inline-border-color: var(--border-primary); // @presenter Color
+  --schema-inline-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
-    */
+  * @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
-    */
+  * @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
-    */
+  * @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
-    */
+  * @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
-    */
+  * @tokens API Reference Schema Recursive Label colors
+  * @presenter Color
+  */
 
-  --schema-recursive-text-color: var(--color-warning);
+  --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
-    */
+  * @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
-    */
+  * @tokens API Reference Schema Nested styles
+  */
 
   --schema-nested-offset: 1em; // @presenter Spacing
-  --schema-nested-background-color: var(--bg-overlay); // @presenter Color
+  --schema-nested-background-color: var(--colors-translucent); // @presenter Color
 
   /**
-    * @tokens API Reference Schema Buttons
-    */
+  * @tokens API Reference Schema Buttons
+  */
 
   --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily
   --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight
   --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize
 
-  --schema-buttons-text-color: var(--text-secondary); // @presenter Color
+  --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color
   --schema-buttons-background-color: transparent; // @presenter Color
-  --schema-buttons-border-color: var(--border-primary); // @presenter Color
+  --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color
 
-  --schema-buttons-hover-background-color: var(--bg-overlay); // @presenter Color
-  --schema-buttons-active-background-color: var(--bg-overlay); // @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(--bg-overlay); // @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(--bg-overlay); // @presenter Color
-  --schema-buttons-selected-active-background-color: var(--bg-overlay); // @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
-    */
+  * @tokens API Reference Schema Properties
+  */
 
-  --schemas-property-name-text-color: var(--text-primary); //@presenter Color
+  --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-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --schemas-property-name-line-height: var(--line-height-sm); // @presenter LineHeight
-  --schemas-property-name-text-transform: none;
 
-  --schemas-property-deprecated-text-color: var(--text-primary); // @presenter Color
+  --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); // @presenter Color
-  --schema-property-additional-label-text-color: var(--text-secondary); // @presenter Color
-  --schema-property-access-label-text-color: var(--text-secondary); // @presenter Color
+  --schema-property-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
-    */
+  * @tokens API Reference Schema Icons
+  */
 
-  --schema-chevron-color: var(--text-secondary); // @presenter Color
+  --schema-chevron-color: var(--text-color); // @presenter Color
   --schema-chevron-size: 9px;
 
-  --schema-property-deep-link-icon-color: var(--color-primary); // @presenter Color
+  --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); // @presenter Color
-  --linear-progress-color: var(--color-info); // @presenter Color
-  --linear-progress-background-color: var(--color-info-bg); // @presenter Color
+  --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); // @presenter Color
-  --fab-box-shadow: var(--bg-base-shadow); // @presenter Shadow
+  --fab-background-color: var(--color-primary-500); // @presenter Color
+  --fab-box-shadow: var(--box-shadow); // @presenter Shadow
 
-  --fab-hover-background: var(--color-primary); // @presenter Color
-  --fab-hover-box-shadow: var(--bg-base-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); // @presenter Color
-  --fab-active-box-shadow: var(--bg-base-shadow); // @presenter Shadow
+  --fab-active-background: var(--color-primary-500); // @presenter Color
+  --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow
 
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
 
@@ -680,25 +1522,82 @@ const apiReferenceDocs = css`
 
 const badges = css`
   /**
-    * @tokens Default Badge
-    */
-
-  --badge-text-color: var(--color-primary-text); // @presenter Color
-  --badge-background-color: var(--color-primary-bg); // @presenter Color
-  --badge-border-color: var(--color-primary-border); // @presenter Color
+  * @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
-    */
+  * @tokens Deprecated Badge
+  */
 
-  --badge-deprecated-text-color: var(--color-warning); // @presenter Color
-  --badge-deprecated-background-color: var(--color-warning-bg); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-border); // @presenter Color
+  --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 = 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-item-icon-width: 24px; // @presenter Spacing
+  --footer-item-icon-height: 24px; // @presenter Spacing
+  --footer-item-icon-margin-right: 12px; // @presenter Spacing
+
+  --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
 `;
@@ -717,12 +1616,166 @@ const logo = css`
   // @tokens End
 `;
 
+const navbar = 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-padding-vertical: 8px; // @presenter Spacing
+  --navbar-item-gap: 5px;
+  --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
+  --navbar-item-icon-width: 1.5em; // @presenter Spacing
+  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+
+  /**
+    * @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 breadcrumbs = css`
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-color-secondary); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-active-text-color: var(--text-color); // @presenter Color
+  --breadcrumbs-hover-text-decoration: underline;
+  --breadcrumbs-padding-horizontal: 8px; // @presenter Spacing
+  --breadcrumbs-margin-bottom: 24px; // @presenter Spacing
+
+  // @tokens End
+`
+
+const product = css`
+  /**
+   * @tokens Product
+   */
+  --product-padding-horizontal: 8px; // @presenter Spacing
+  --product-padding-vertical: 8px; // @presenter Spacing
+  --product-logo-margin: 10px; // @presenter Spacing
+
+  // @tokens End
+`
+
+const mobileMenu = css`
+    /**
+  * @tokens Mobile Menu icons
+  */
+    --mobile-menu-icons-size: 20px; // @presenter Spacing
+    --mobile-menu-search-icon-size: 18px; // @presenter Spacing
+
+    /**
+      * @tokens Mobile Menu
+      * */
+    --mobile-menu-padding-top: 13px; // @presenter Spacing
+    --mobile-menu-items-margin-top: 5px; // @presenter Spacing
+    --mobile-menu-burger-button-margin: 8px; // @presenter Spacing
+    --mobile-menu-background: #ffffff; // @presenter Color
+    --mobile-menu-profile-background: #ffffff; // @presenter Color
+    --mobile-menu-profile-border-color: #e3e3e3; // @presenter Color
+    --mobile-menu-group-padding-right: 16px; // @presenter Spacing
+    --mobile-menu-horizontal-margin: 8px; // @presenter Spacing
+    --mobile-menu-item-nested-offset: 8px; // @presenter Spacing
+    --mobile-menu-item-radius: 6px; // @presenter Spacing
+    --mobile-menu-item-text-color: #525252;// @presenter Color
+    --mobile-menu-item-active-color: #FAFAFA; // @presenter Color
+    --mobile-menu-item-active-text-color: #161616; // @presenter Color
+
+    /**
+      * @tokens Mobile Menu control button
+      * */
+    --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+    --mobile-menu-control-button-padding-horizontal: 4px; // @presenter Spacing
+    --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+    --mobile-menu-control-button-margin-horizontal: 8px; // @presenter Spacing
+    --mobile-menu-control-button-font-size: var(--font-size-base); // @presenter FontSize
+    --mobile-menu-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
+    --mobile-menu-control-button-color: var(--mobile-menu-item-text-color); // @presenter Color
+    --mobile-menu-control-button-hover-color: var(--text-color); // @presenter Color
+
+    /**
+      * @tokens Mobile Menu Login button
+      * */
+    --mobile-menu-login-button-background: #1c1c1c; // @presenter Color
+    --mobile-menu-login-button-color: #ffffff; // @presenter Color
+
+    // @tokens End
+`;
+
+const toc = 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 = css`
   /**
     * @tokens Load progress bar
     */
 
-  --load-progress-bar-color: var(--color-info); // @presenter Color
+  --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
@@ -774,151 +1827,495 @@ const inputs = css`
   /**
     * @tokens Inputs
     */
-
-  --input-text-color: var(--text-secondary); // @presenter Color
-  --input-background-color: var(--background-color); // @presenter Color
-  --input-border: 1px solid var(--border-primary); // @presenter Border
-  --input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --input-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(--font-family-base); // @presenter FontFamily
   --input-line-height: 1.15em; // @presenter LineHeight
   --input-padding: 8px;
 
-  --input-hover-text-color: var(--text-secondary); // @presenter Color
-  --input-hover-border: 1px solid var(--border-primary); // @presenter Border
-  --input-focus-border: 1px solid var(--border-primary); // @presenter Border
-  --input-focus-text-color: var(--text-secondary); // @presenter Color
+  --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
+
+  --checkbox-backround-color: var(--background-color);
+  --checkbox-checked-backround-color: var(--color-primary-500);
+  // @tokens End
+`;
+
+const markdown = 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 Checkbox List
+  */
+
+  --md-checkbox-list-item-style: none;
+
+  /**
+  * @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
+
+  /**
+  * @tokens Markdown Tabs
+  */
+
+  --md-tabs-tab-text-color: var(--color-emphasis-600); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--text-color); // @presenter Color
+  --md-tabs-hover-tab-border-color: var(--text-color-secondary); // @presenter Color
+
+  // @tokens End
+`;
+
+const search = css`
+  /**
+      * @tokens Search
+      */
+
+  --search-highlight-background-color: none; // @presenter Color
+  --search-highlight-text-color: #1677FF; // @presenter Color
+
+  /**
+      * @tokens Portal Search
+      */
+
+  --search-input-background-color: #fafafa; // @presenter Color
+  --search-input-text-color: var(--text-color); // @presenter Color
+
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-font-size: 14px; // @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: #fafafa; // @presenter Color
+  --search-input-hover-border: none; // @presenter Color
+  --search-input-placeholder-color: #a8a8a8;
+  --search-input-icons-color: #a8a8a8;
+
+  --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: #525252; // @presenter Color
+  --search-item-title-text-color: #161616; // @presenter Color
+  --search-item-path-text-color: #8d8d8d; // @presenter Color
+  --search-item-background-color: transparent; // @presenter Color
+  --search-item-active-text-color: var(--text-color); // @presenter Color
+  --search-item-active-title-text-color: var(--text-color); // @presenter Color
+  --search-item-active-background-color: #fafafa; // @presenter Color
+
+  --search-trigger-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color); // @presenter Color
+  --search-trigger-border: none; // @presenter Border
+  --search-trigger-border-radius: 6px; // @presenter BorderRadius
+  --search-trigger-text-color: var(--navbar-text-color); // @presenter Color
+  --search-trigger-shortcut-text-color: var(--navbar-text-color); // @presenter Color
+  --search-trigger-font-size: var(--navbar-item-font-size); // @presenter FontSize
+
+  /**
+    * @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
+    */
 
-  --checkbox-backround-color: var(--bg-base);
-  --checkbox-checked-backround-color: var(--color-primary);
+  --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 docsDropdown = css`
-  --docs-dropdown-font-size: var(--font-size-base);
-  --docs-dropdown-text-color: var(--text-secondary);
+  --docs-dropdown-font-size: 14px;
+  --docs-dropdown-text-color: var(--text-color);
 
-  --docs-dropdown-padding-vertical: 0;
+  --docs-dropdown-padding-vertical: 8px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
-  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
-  --docs-dropdown-border: 1px solid var(--border-primary);
+  --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: none;
+`;
+
+const dropdown = css`
+  --dropdown-font-size: 16px; // @presenter FontSize
+  --dropdown-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-text-color: var(--text-color); // @presenter Color
+  --dropdown-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --dropdown-list-min-width: 100px;
+  --dropdown-list-max-width: 300px;
+  --dropdown-list-padding: 4px; // @presenter Spacing
+  --dropdown-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-list-background-color: var(--background-color); // @presenter Color
+  --dropdown-list-box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); // @presenter Shadow
+
+  --dropdown-list-item-horizontal-padding: 16px; // @presenter Spacing
+  --dropdown-list-item-vertical-padding: 8px; // @presenter Spacing
+  --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-list-item-active-background-color: #0000000a; // @presenter Color
+  --dropdown-list-item-separator-color: var(--border-color); // @presenter Color
+
+  /**
+   * @tokens User profile menu dropdown
+   * */
+
+  --profile-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --profile-dropdown-font-weight: var(--dropdown-font-weight); // @presenter FontWeight
+  --profile-dropdown-line-height: var(--dropdown-line-height); // @presenter LineHeight
+  --profile-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
+  --profile-dropdown-border-radius: var(--dropdown-border-radius); // @presenter BorderRadius
+
+  --profile-dropdown-list-min-width: var(--dropdown-list-min-width);
+  --profile-dropdown-list-max-width: var(--dropdown-list-max-width);
+  --profile-dropdown-list-padding: var(--dropdown-list-padding); // @presenter Spacing
+  --profile-dropdown-list-border-radius: var(--dropdown-list-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-background-color: var(--dropdown-list-background-color); // @presenter Color
+  --profile-dropdown-list-box-shadow: var(--dropdown-list-box-shadow); // @presenter Shadow
+
+  --profile-dropdown-list-item-horizontal-padding: var(--dropdown-list-item-horizontal-padding); // @presenter Spacing
+  --profile-dropdown-list-item-vertical-padding: var(--dropdown-list-item-vertical-padding); // @presenter Spacing
+  --profile-dropdown-list-item-border-radius: var(--dropdown-list-item-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-item-active-background-color: var(--dropdown-list-item-active-background-color); // @presenter Color
+  --profile-dropdown-list-item-separator-color: var(--dropdown-list-item-separator-color); // @presenter Color
+`
+
+const select = css`
+  --select-font-size: 16px; // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-color); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: 4px; // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+
+  --select-list-item-horizontal-padding: 16px; // @presenter Spacing
+  --select-list-item-vertical-padding: 8px; // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: #0000000a; // @presenter Color
+
+  /**
+   * @tokens Version picker
+   * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-margin-vertical: 10px; // @presenter Spacing
+  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-color); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+
+
+  /**
+   * @tokens Language picker
+   * */
+
+  --language-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --language-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --language-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --language-picker-text-color: var(--select-text-color); // @presenter Color
+  --language-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+
+  --language-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --language-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --language-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --language-picker-list-min-width: var(--select-list-min-width);
+  --language-picker-list-max-width: var(--select-list-max-width);
+  --language-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --language-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --language-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --language-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --language-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+
+  /**
+   * @tokens Product picker
+   * */
+
+  --product-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --product-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --product-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --product-picker-text-color: var(--select-text-color); // @presenter Color
+  --product-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+
+  --product-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --product-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --product-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --product-picker-list-min-width: var(--select-list-min-width);
+  --product-picker-list-max-width: var(--select-list-max-width);
+  --product-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --product-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --product-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --product-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --product-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --product-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --product-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --product-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
 `;
 
+
 const lastUpdated = css`
-  --last-updated-text-color: var(--text-secondary);
-  --last-updated-font-size: var(--font-size-sm);
+  --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 = css`
-  --wide-tile-background-color: var(--bg-raised);
-  --thin-tile-background-color: var(--bg-raised);
+  --wide-tile-background-color: var(--color-secondary-100);
+  --thin-tile-background-color: var(--color-secondary-100);
 `;
 
 const pages = css`
   /**
-    * @tokens 404 Page
-    * @presenter Color
-    */
+  * @tokens 404 Page
+  * @presenter Color
+  */
 
   --page-404-font-family: var(--font-family-base); // @presenter FontFamily
 
-  --page-404-header-text-color: var(--h1-text-color);
-  --page-404-header-font-size: var(--h1-font-size); // @presenter FontSize
-  --page-404-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
-  --page-404-header-line-height: var(--h1-line-height); // @presenter LineHeight
-  --page-404-header-margin: 0px; // @presenter Spacing
+  --page-404-header-text-color: #000;
+  --page-404-header-font-size: 14em; // @presenter FontSize
+  --page-404-header-font-weight: 600; // @presenter FontWeight
+  --page-404-header-line-height: 1.2; // @presenter LineHeight
+  --page-404-header-margin: 0; // @presenter Spacing
 
-  --page-404-description-text-color: var(--text-secondary);
-  --page-404-description-font-size: 1.5em; // @presenter FontSize
-  --page-404-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-404-description-line-height: 1 // @presenter LineHeight
-  --page-404-description-margin: 0px; // @presenter Spacing
+  --page-404-description-text-color: #000;
+  --page-404-description-font-size: 2em; // @presenter FontSize
+  --page-404-description-font-weight: 400; // @presenter FontWeight
+  --page-404-description-line-height: 1; // @presenter LineHeight
+  --page-404-description-margin: 0; // @presenter Spacing
 
   --page-404-button-margin: 4em; // @presenter Spacing
 
   // @tokens End
 
   /**
-    * @tokens 403 Page
-    * @presenter Color
-    */
+  * @tokens 403 Page
+  * @presenter Color
+  */
 
-  --page-403-font-family: var(--font-family-base); // @presenter FontFamily
+   --page-403-font-family: var(--font-family-base); // @presenter FontFamily
 
-  --page-403-header-text-color: var(--h1-text-color);
-  --page-403-header-font-size: var(--h1-font-size); // @presenter FontSize
-  --page-403-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
-  --page-403-header-line-height: var(--h1-line-height); // @presenter LineHeight
-  --page-403-header-margin: 0; // @presenter Spacing
+   --page-403-header-text-color: #000;
+   --page-403-header-font-size: 14em; // @presenter FontSize
+   --page-403-header-font-weight: 600; // @presenter FontWeight
+   --page-403-header-line-height: 1.2; // @presenter LineHeight
+   --page-403-header-margin: 0; // @presenter Spacing
 
-  --page-403-description-text-color: var(--text-secondary);
-  --page-403-description-font-size: 1em; // @presenter FontSize
-  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-403-description-line-height: 1; // @presenter LineHeight
-  --page-403-description-margin: 0; // @presenter Spacing
+   --page-403-description-text-color: #000;
+   --page-403-description-font-size: 2em; // @presenter FontSize
+   --page-403-description-font-weight: 400; // @presenter FontWeight
+   --page-403-description-line-height: 1; // @presenter LineHeight
+   --page-403-description-margin: 0; // @presenter Spacing
 
-  --page-403-button-margin: 4em; // @presenter Spacing
+   --page-403-button-margin: 4em; // @presenter Spacing
 
    // @tokens End
 `
 
-const error = css`
-  --error-bubble-padding: var(--spacing-md);
-  --error-bubble-bottom: var(--spacing-md);
-  --error-bubble-right: var(--spacing-md);
-  --error-bubble-max-width: 20%;
-  --error-bubble-mobile-max-width: 50%;
-  --error-bubble-text-overflow: ellipsis;
-  --error-bubble-gap: var(--spacing-base);
-  --error-bubble-font-family: var(--font-family-base);
-  --error-bubble-z-index: var(--z-index-popover);
-  
-  --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
-  --error-card-background: var(--bg-raised);
-  --error-card-padding: var(--spacing-xs) var(--spacing-base);
-  --error-card-text-color: var(--text-primary);
-  --error-card-font-size: var(--font-size-base);
-  --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-normal);
-  --error-card-line-height: var(--line-height-base);
-  --error-card-box-shadow: var(--bg-raised-shadow);
-  --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
-  
-  --detailed-error-overlay-background: #4f4f4f;
-  --detailed-error-overlay-opacity: 0.9;
-  --detailed-error-overlay-z-index: var(--z-index-raised);
-
-  --detailed-error-modal-width: 70%;
-  --detailed-error-modal-height: calc(100vh - 100px - var(--navbar-height));
-  --detailed-error-modal-top: calc(50px + var(--navbar-height));
-  --detailed-error-modal-left: 15%;
-  --detailed-error-modal-border-radius: var(--border-radius-md);
-  --detailed-error-modal-background: var(--bg-base);
-  --detailed-error-modal-color: var(--text-primary);
-  --detailed-error-modal-box-shadow: var(--bg-overlay-shadow);
-  --detailed-error-modal-z-index: var(--z-index-popover);
-  --detailed-error-modal-font-family: var(--font-family-base);
-  --detailed-error-modal-padding: var(--spacing-md);
-  --detailed-error-modal-wapper-text-align: right;
-  
-  --detailed-error-content-margin-top: var(--spacing-md);
-  --detailed-error-content-height: 100%;
-  
-  --detailed-error-close-button-color: var(--text-description);
-  --detailed-error-close-button-text-transform: uppercase;
-  
-  --detailed-error-message-margin: var(--spacing-base) auto var(--spacing-lg);
-  --detailed-error-message-padding: var(--spacing-base);
-  --detailed-error-message-border-radius: var(--border-radius);
-  --detailed-error-message-color: var(--code-block-text-color);
-  --detailed-error-message-background: var(--code-block-background-color);
-  --detailed-error-message-width: 100%;
-  --detailed-error-message-font-size: var(--font-size-base);
-  --detailed-error-message-font-family: var(--code-block-controls-font-family);
+const userProfile = css`
+
+  /**
+  * @tokens User Profile
+  */
+
+   --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-name-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
+   --profile-name-text-color: var(--navbar-text-color); // @presenter Color
+
+   --profile-name-padding-horizontal: 0; // @presenter Spacing
+   --profile-name-padding-vertical: 0; // @presenter Spacing
+   --profile-name-margin-horizontal: 0; // @presenter Spacing
+
+   --profile-avatar-width: 40px;
+   --profile-avatar-height: 40px;
+   --profile-avatar-border-radius: 50%; // @presenter BorderRadius
+
+   --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
+
+   --profile-avatar-margin-left: 16px; // @presenter Spacing
+   --profile-avatar-padding-vertical: 16px; // @presenter Spacing
+   --profile-avatar-padding-horizontal: 16px; // @presenter Spacing
+
+
+  /**
+  * @tokens User Profile Menu
+  */
+
+   --profile-menu-background-color: var(--background-color); // @presenter Color
+   --profile-menu-padding: 0px; // @presenter Spacing
+   --profile-menu-margin: 0px; // @presenter Spacing
+
+   --profile-menu-item-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-menu-item-text-color: var(--text-color); // @presenter Color
+   --profile-menu-item-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
+   --profile-menu-item-text-align: left;
+
+   --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
+   --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
+
+   --profile-menu-item-hover-background-color: var(--color-primary-300); // @presenter Color
+   --profile-menu-item-active-background-color: var(--color-primary-300); // @presenter Color
+   --profile-menu-item-hover-text-color: var(--navbar-text-color); // @presenter Color
+   --profile-menu-item-hover-text-decoration: none;
+   --profile-menu-item-active-text-color: var(--navbar-text-color); // @presenter Color
+   --profile-menu-item-active-text-decoration: none;
+
+   --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
+
+   // @tokens End
+
 `;
 
 const modal = css`
@@ -928,7 +2325,7 @@ const modal = css`
 
   --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
-  --modal-background-color: var(--bg-base);
+  --modal-background-color: var(--background-color);
 `;
 
 const zIndexDepth = css`
@@ -940,56 +2337,47 @@ const zIndexDepth = css`
 
 export const styles = css`
   :root {
+    ${baseColors}
+    ${httpColors}
+    ${responsePanelColors}
+    ${typography}
+    ${headingsTypography}
+    ${common}
     ${admonition}
-    ${apiReferenceDocs}
-    ${apiReferencePanels}
+    ${buttons}
+    ${sidebar}
+    ${navbar}
+    ${mobileMenu}
+    ${footer}
+    ${logo}
     ${badges}
-    ${borders}
     ${breadcrumbs}
-    ${button}
-    ${catalog}
-    ${code}
-    ${docsDropdown}
-    ${dropdown}
-    ${error}
-    ${filter}
-    ${footer}
-    ${headingsTypography}
+    ${product}
+    ${toc}
     ${inputs}
-    ${languagePicker}
-    ${lastUpdated}
+    ${tooltip}
+    ${code}
     ${links}
-    ${loadProgressBar}
-    ${logo}
     ${markdown}
-    ${menu}
-    ${mobileMenu}
-    ${modal}
-    ${navbar}
-    ${pages}
-    ${product}
-    ${productPicker}
-    ${responsePanelColors}
     ${search}
+    ${dropdown}
+    ${docsDropdown}
     ${select}
-    ${sidebar}
-    ${sizeAndSpace}
-    ${tag}
-    ${themeColors}
+    ${apiReferencePanels}
+    ${apiReferenceDocs}
+    ${lastUpdated}
     ${tile}
-    ${toc}
-    ${tooltip}
-    ${typography}
+    ${loadProgressBar}
+    ${pages}
+    ${modal}
     ${userProfile}
-    ${userProfileDropdown}
-    ${versionPicker}
     ${zIndexDepth}
 
     --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
 
-    background-color: var(--bg-base);
-    color: var(--text-base);
+    background-color: var(--background-color);
+    color: var(--text-color);
     font-family: var(--font-family-base);
   }