@redocly/theme 0.18.1 → 0.18.3-patch.0

package/src/globalStyle.ts

@@ -1,114 +1,226 @@
 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
+    */
 
-import { darkMode } from './ui/darkColors';
-
-const baseColors = css`
-  /* === Palette === */
+  --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
+   */
 
+  --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 Base Colors
-      * @presenter Color
-      */
-
-  --color-primary-50: #87ceeb;
-  --color-primary-100: #62a1ff;
-  --color-primary-200: #4892ff;
-  --color-primary-300: #2f83ff;
-  --color-primary-400: #1573ff;
-  --color-primary-500: #0065fb;
-  --color-primary-600: #005be2;
-  --color-primary-700: #0050c8;
-  --color-primary-800: #0046af;
-  --color-primary-900: #003c95;
-
-  --color-secondary-50: #ffffff;
-  --color-secondary-100: #f5f7fa;
-  --color-secondary-200: #f3f4f6;
-  --color-secondary-300: #e4e7eb;
-  --color-secondary-400: #d5dae0;
-  --color-secondary-500: #c7cdd5;
-  --color-secondary-600: #b8c0ca;
-  --color-secondary-700: #a9b3c0;
-  --color-secondary-800: #9ba6b5;
-  --color-secondary-900: #52606d;
-
-  --color-emphasis-50: #ffffff;
-  --color-emphasis-100: #e9eaec;
-  --color-emphasis-200: #cdd0d5;
-  --color-emphasis-300: #b2b6bd;
-  --color-emphasis-400: #969ca6;
-  --color-emphasis-500: #7a828f;
-  --color-emphasis-600: #626974;
-  --color-emphasis-700: #4b5058;
-  --color-emphasis-800: #1f2933;
-  --color-emphasis-900: #1c1e21;
-
-  --color-accent-50: #e6eef8;
-  --color-accent-100: #b3dcf3;
-  --color-accent-200: #a6dfff;
-  --color-accent-300: #8cd5ff;
-  --color-accent-400: #73ccff;
-  --color-accent-500: #59c3ff;
-  --color-accent-600: #40baff;
-  --color-accent-700: #26b1ff;
-  --color-accent-800: #0da7ff;
-  --color-accent-900: #009bf2;
-
-  --color-success-50: #ddffe1;
-  --color-success-100: #98eda0;
-  --color-success-200: #82e98c;
-  --color-success-300: #6ce678;
-  --color-success-400: #57e264;
-  --color-success-500: #41de50;
-  --color-success-600: #2bda3c;
-  --color-success-700: #23c933;
-  --color-success-800: #1fb32d;
-  --color-success-900: #1b9e28;
-
-  --color-warning-50: #ffeda5;
-  --color-warning-100: #ffc966;
-  --color-warning-200: #ffc04d;
-  --color-warning-300: #ffb733;
-  --color-warning-400: #ffae1a;
-  --color-warning-500: #ffa500;
-  --color-warning-600: #e69400;
-  --color-warning-700: #cc8400;
-  --color-warning-800: #b37300;
-  --color-warning-900: #996300;
-
-  --color-error-50: #ffeaea;
-  --color-error-100: #ffc7c7;
-  --color-error-200: #ffaeae;
-  --color-error-300: #ff9494;
-  --color-error-400: #ff7b7b;
-  --color-error-500: #ff6161;
-  --color-error-600: #ff4747;
-  --color-error-700: #ff2e2e;
-  --color-error-800: #ff1414;
-  --color-error-900: #ff0000;
-
-  --colors-translucent: rgb(226 230 236 / 37%);
+   * @tokens Elevation Colors
+   * @presenter Color
+   */
 
-  // @tokens End
-`;
+  --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
 
-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;
+  --bg-base-shadow: 0px 3px 5px rgba(51, 51, 51, 0.2), 0px 0px 1px rgba(51, 51, 51, 0.31); // Elements
+  --bg-raised-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Hovers for base. Menu
+  --bg-overlay-shadow: 0px 18px 28px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Use for dropdowns
+
+  --background-color: var(--bg-base);
 
   // @tokens End
 `;
@@ -116,1210 +228,249 @@ const httpColors = css`
 const typography = css`
   /* === Typography === */
 
-  /**
-    * @tokens Typography Colors
-    * @presenter Color
-    */
-  --text-color: var(--color-emphasis-800);
-  --text-color-inverse: var(--color-secondary-100);
-  --text-color-secondary: var(--color-emphasis-500);
-
-  /**
-    * @tokens Font Sizes
-    * @presenter FontSize
-    */
-  --font-size-base: 14px;
-  --font-size-small: 12px;
-
-  /**
-    * @tokens Line Heights
-    * @presenter LineHeight
-    */
-  --line-height-base: 1.5em;
-
-  /**
-    * @tokens Font Weights
-    * @presenter FontWeight
-    */
-  --font-weight-regular: 400;
-  --font-weight-bold: 600;
-  --font-weight-bolder: 700;
-
   /**
     * @tokens Font Families
     * @presenter FontFamily
     */
-  --font-family-base: Source Sans Pro, sans-serif;
-  --font-family-monospaced: Source Code Pro, monospace;
-
-  /**
-  * @tokens Rendering
-  */
-  --text-smoothing: antialiased; // text-smoothing
-  --text-rendering: optimizeSpeed; // text-rendering
-
-  // @tokens End
-`;
-
-const headingsTypography = css`
-  * {
-    box-sizing: border-box;
-  }
-
-  /**
-    * @tokens Headings common styles
-    */
-
-  --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily
-  --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight
-  --heading-margin-top: 1.25em; // @presenter Spacing
-  --heading-margin-bottom: 0.9em; // @presenter Spacing
-  --heading-text-color: var(--text-color); // @presenter Color
-
-  /**
-  * @tokens Typography heading anchor icon
-  */
-
-  --heading-anchor-offset-right: 4px; // @presenter Spacing
-  --heading-anchor-color: var(--color-primary-500); // @presenter Color
-  --heading-anchor-icon: none;
-
-  // TODO: implement a theme 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
-  */
-
-  --h6-font-family: var(--heading-font-family); // @presenter FontFamily
-  --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight
-  --h6-font-size: 12px; // @presenter FontSize
-  --h6-line-height: 12px; // @presenter LineHeight
-  --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
-  --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
-  --h6-text-color: var(--heading-text-color); // @presenter Color
-
-  // @tokens End
-`;
-
-const common = css`
-  /**
-    * @tokens Borders
-    * @presenter Border
-    */
-  --border-width: 1px;
-  --border-style: solid;
-
-  /**
-    * @tokens Border Radius
-    * @presenter BorderRadius
-    */
-  --border-radius: 4px;
-  --border-radius-lg: calc(var(--border-radius) * 2);
+  --font-family-base: Source Sans Pro, sans-serif; // Font family of the entire system.
+  --font-family-monospaced: Source Code Pro, monospace;
 
   /**
-    * @tokens Border Colors
+    * @tokens Font Colors
     * @presenter Color
     */
-  --border-color: var(--color-secondary-300);
-  --border-color-secondary: var(--color-emphasis-600);
-  --background-color: var(--color-secondary-50);
-  --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);
-  /**
-    * @tokens Spacings
-    * @presenter Spacing
-    */
-
-  --spacing-unit: 5px;
-  --spacing-horizontal: calc(var(--spacing-unit) * 8);
-  --spacing-vertical: calc(var(--spacing-unit) * 4);
-
-  // @tokens End
-`;
-
-const buttons = css`
-  /*
-  * Static classnames that can be used to override styles for components:
-  * download-specification-button, next-section-button, button-base
-  */
 
+  --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 Button default colors
+    * @tokens Font Weights
+    * @presenter FontWeight
     */
 
-  --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
-
+  --font-weight-regular: 400; // All normal weight fonts in the entire system.
+  --font-weight-bold: 600; // All strong weights in the entire system.
+  --font-weight-bolder: 700;
+  --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.
+  
   /**
-    * @tokens 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
+   * @tokens Line Heights
+   * @presenter LineHeight
+   */
 
-    --button-disabled-color: var(--button-color); // @presenter Color
-    --button-disabled-background-color: var(--color-primary-100); // @presenter Color
-  }
+  --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 Button secondary colors
+    * @tokens Font Sizes
+    * @presenter FontSize
     */
-  .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
+  --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;
 
   /**
-    * @tokens Button typography
+    * @tokens Font Rendering
     */
-  --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
+   --text-smoothing: antialiased; // text-smoothing
+   --text-rendering: optimizeSpeed; // text-rendering
 
   // @tokens End
 `;
 
-const sidebar = css`
-  /* === Sidebar === */
-
+const sizeAndSpace = css`
+  /* === Size & Space === */
+  
   /**
-    * @tokens Sidebar logo
-    */
-
-  --sidebar-logo-max-height: 285px;
-  --sidebar-logo-max-width: 285px;
-  --sidebar-logo-padding: 2px; // @presenter spacing
-
-  /**
-    * @tokens Sidebar typography
-    */
-  --sidebar-word-break: 'inherit';
-
-  /**
-    * @tokens Sidebar colors
-    * @presenter Color
-    */
-  --sidebar-background-color: var(--background-color);
-  --sidebar-border-color: var(--border-color);
-
-  /**
-    * @tokens Sidebar spacing
+    * @tokens Size
     * @presenter Spacing
     */
-  --sidebar-width: 285px; // @presenter NO
-
-  --sidebar-spacing-unit: 8px;
-  --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);
-
-  --sidebar-chevron-size: var(--sidebar-spacing-unit);
-
-  /* === Sidebar Item === */
-
-  /**
-    * @tokens Sidebar item typography
-    */
-  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
-  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
-
-  /**
-    * @tokens Sidebar item colors
-    *  @presenter Color
-    */
-  --sidebar-item-text-color: var(--text-color);
-  --sidebar-item-background-color: transparent;
-
-  --sidebar-item-active-color: var(--text-color);
-  --sidebar-item-active-background-color: var(--border-color);
 
-  --sidebar-item-hover-background-color: var(--border-color);
-  --sidebar-item-hover-color: var(--text-color);
+  --container-width: 1200px;
 
   /**
-    * @tokens Sidebar item spacing
+    * @tokens Space
     * @presenter Spacing
     */
 
-  --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);
-  --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);
-
-  /**
-    * @tokens Sidebar item border
-    */
-  --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius
+  --spacing-unit: 4px;
+  
+  --spacing-base: calc(var(--spacing-unit) * 4);
+  --spacing-xxs: var(--spacing-unit);
+  --spacing-xs: calc(var(--spacing-unit) * 2);
+  --spacing-sm: calc(var(--spacing-unit) * 3);
+  --spacing-md: calc(var(--spacing-unit) * 5);
+  --spacing-lg: calc(var(--spacing-unit) * 6);
+  --spacing-xl: calc(var(--spacing-unit) * 8);
+  --spacing-xxl: calc(var(--spacing-unit) * 12);
 
+  --spacing-horizontal: var(--spacing-xl);
+  --spacing-vertical: var(--spacing-base);
+  
   /**
-    * @tokens Sidebar item icon
-    */
-  --sidebar-item-icon-size: 20px;
-  --sidebar-item-icon-border-radius: 100%;
-
-  /**
-    * @tokens Sidebar item sublabel
-    */
-  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
-  --sidebar-item-sublabel-font-size: 0.85rem;
-  --sidebar-item-sublabel-font-weight: var(--font-weight-regular);
-  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);
-
-  /**
-    * @tokens Sidebar item drilldown
-    */
-
-  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
-  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);
-  --sidebar-text-drilldown-transform: inherit;
-  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);
-  --sidebar-item-drilldown-background-color: var(--sidebar-background-color);
-
-  /**
-    * @tokens Sidebar item group
-    */
-  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
-  --sidebar-item-group-font-size: var(--sidebar-item-font-size);
-  --sidebar-text-group-transform: inherit;
-  --sidebar-item-group-text-color: var(--sidebar-item-text-color);
-  --sidebar-item-group-background-color: var(--sidebar-background-color);
-  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);
-  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
-
-  // we need a theme 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
+    * @tokens Height
+    * @presenter Spacing
     */
-  // 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);
+  --control-height-base: 32px; // The height of the default size controls such as buttons and inputs.
+  --control-height-xs: 16px; // The height of very small objects such as skeleton line or small multiple select item.
+  --control-height-sm: 24px; // The height of the small controls such as buttons or inputs.
+  --control-height-lg: 40px; // The height of the large controls such as buttons or inputs.
 
-  /**
-    * @tokens 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);
-  }
-
+const borders = css`
   /**
-  * @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);
+    * @tokens Borders
+    * @presenter Border
+    */
 
-    --panel-response-schema-nested-background-color: var(  --panel-response-callback-schema-nested-background-color);
-  }
+  --border-width: 1px;
+  --border-style: solid;
 
   /**
-  * @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);
+   * @tokens Border Colors
+   * @presenter Color
+   */
 
-  --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);
+  --border-primary: #d5d5d5; // 12% opacity. Raised dividers
+  --border-secondary: #f0f0f0; // 6% opacity. Default dividers, borders
 
   /**
-  * @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);
+   * @tokens Border Radius
+   * @presenter BorderRadius
+   */
 
-    --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
+  --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);
+`
 
-    --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);
-    --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);
+const headingsTypography = css`
+  * {
+    box-sizing: border-box;
   }
 
   /**
-  * @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
+    * @tokens Headings common styles
+    */
 
-  --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --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 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
+    * @tokens Typography heading anchor icon
+    */
 
-  --samples-panel-markdown-background-color: #3c4c5a;
-  --samples-panel-markdown-border-color: #46596a;
+  --heading-anchor-offset-right: 4px; // @presenter Spacing
+  --heading-anchor-color: var(--color-primary); // @presenter Color
+  --heading-anchor-icon: none;
 
-  --layout-right-rail-width: 50%;
-  --layout-right-rail-background-color: transparent;
-`;
 
-const tooltip = css`
   /**
-    * @tokens Tooltip Base
-    * @presenter Color
+    * @tokens Heading level 1
     */
-  --tooltip-text-color: var(--color-secondary-200);
-  --tooltip-background-color: var(--color-emphasis-600);
 
-  /**
-    * @tokens Tooltip Copy Button
-    * @presenter Color
-    */
-
-  --copy-button-tooltip-text-color: #000;
-  --copy-button-tooltip-background-color: var(--background-color);
-
-  .tooltip-copy-button {
-    --tooltip-text-color: var(--copy-button-tooltip-text-color);
-    --tooltip-background-color: var(--copy-button-tooltip-background-color);
-  }
-
-  // @tokens End
-`;
+  --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
 
-const code = css`
   /**
-    * @tokens Code base styles
+    * @tokens Heading level 2
     */
-  --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;
+
+  --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 Inline Code
+    * @tokens Heading level 3
     */
-  --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
+
+  --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 Code Block
+    * @tokens Heading level 4
     */
-  --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;
+
+  --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
 
   /**
-    * @tokens Code Block controls
+    * @tokens Heading level 5
     */
 
-  --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
+  --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 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 Heading level 6
+    */
+
+  --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 End
 `;
 
+
 const links = css`
   /**
     * @tokens Links
     */
-  --link-text-color: var(--color-primary-500); // @presenter Color
+
+  --link-text-color: var(--color-blue-6); // @presenter Color
   --link-decoration: none;
   --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
 
-  --link-hover-text-color: var(--color-primary-100); // @presenter Color
+  --link-hover-text-color: var(--color-blue-5); // @presenter Color
   --link-hover-decoration: underline;
 
   --link-active-decoration: none;
-  --link-active-text-color: var(--color-primary-500); // @presenter Color
+  --link-active-text-color: var(--color-blue-7); // @presenter Color
 
-  --link-visited-text-color: var(--color-primary-500); // @presenter Color
+  --link-visited-text-color: var(--color-blue-7); // @presenter Color
   --link-visited-decoration: none;
 
   // @tokens End
@@ -1329,8 +480,9 @@ 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
@@ -1348,8 +500,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
@@ -1357,163 +509,169 @@ 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-color); // @presenter Border
+  --schemas-discriminator-dropdown-border: 1px solid var(--border-primary); // @presenter Border
   --schemas-discriminator-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
   --schemas-discriminator-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
 
   /**
-  * @tokens API Reference Schemas Titles
-  */
+    * @tokens API Reference Schemas Titles
+    */
 
-  --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color
-  --schema-type-text-color: var(--text-color-secondary); // @presenter Color
+  --schema-type-title-text-color: var(--text-secondary); // @presenter Color
+  --schema-type-text-color: var(--text-secondary); // @presenter Color
   --schema-labels-font-size: 1em; // @presenter FontSize
 
   /**
-  * @tokens API Reference Schemas Lines Color
-  */
+    * @tokens API Reference Schemas Lines Color
+    */
 
-  --schemas-lines-color: var(--border-color); // @presenter Color
+  --schemas-lines-color: var(--border-primary); // @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-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-code-font-weight: var(--inline-code-font-weight); // @presenter FontWeight
+  --schema-inline-code-text-color: var(--text-secondary); // @presenter Color
+  --schema-inline-code-line-height: var(--inline-code-line-height); // @presenter LineHeight
+  --schema-inline-background-color: var(--bg-overlay); // @presenter Color
+  --schema-inline-border-color: var(--border-primary); // @presenter Color
   --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
 
   /**
-  * @tokens API Reference Schema Example Label colors
-  * @presenter Color
-  */
+    * @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-600);
+  --schema-recursive-text-color: var(--color-warning);
   --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(--colors-translucent); // @presenter Color
+  --schema-nested-background-color: var(--bg-overlay); // @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(--color-emphasis-700); // @presenter Color
+  --schema-buttons-text-color: var(--text-secondary); // @presenter Color
   --schema-buttons-background-color: transparent; // @presenter Color
-  --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color
+  --schema-buttons-border-color: var(--border-primary); // @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-hover-background-color: var(--bg-overlay); // @presenter Color
+  --schema-buttons-active-background-color: var(--bg-overlay); // @presenter Color
 
   --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color
-  --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color
+  --schema-buttons-selected-background-color: var(--bg-overlay); // @presenter Color
   --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color
-  --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color
-  --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color
+  --schema-buttons-selected-hover-background-color: var(--bg-overlay); // @presenter Color
+  --schema-buttons-selected-active-background-color: var(--bg-overlay); // @presenter Color
 
   /**
-  * @tokens API Reference Schema Properties
-  */
+    * @tokens API Reference Schema Properties
+    */
 
-  --schemas-property-name-text-color: var(--text-color); //@presenter Color
+  --schemas-property-name-text-color: var(--text-primary); //@presenter Color
   --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize
   --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
+  --schemas-property-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --schemas-property-name-line-height: var(--line-height-sm); // @presenter LineHeight
+  --schemas-property-name-text-transform: none;
 
-  --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color
+  --schemas-property-deprecated-text-color: var(--text-primary); // @presenter Color
 
   --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
-  --schema-property-required-label-text-color: var(--color-error-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-required-label-text-color: var(--color-error); // @presenter Color
+  --schema-property-additional-label-text-color: var(--text-secondary); // @presenter Color
+  --schema-property-access-label-text-color: var(--text-secondary); // @presenter Color
 
   --schema-property-details-width: 70%;
 
   /**
-  * @tokens API Reference Schema Icons
-  */
+    * @tokens API Reference Schema Icons
+    */
 
-  --schema-chevron-color: var(--text-color); // @presenter Color
+  --schema-chevron-color: var(--text-secondary); // @presenter Color
   --schema-chevron-size: 9px;
 
-  --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color
+  --schema-property-deep-link-icon-color: var(--color-primary); // @presenter Color
   --schema-property-deep-link-icon: none;
 
-  /*
+  /**
     * @tokens API Reference Other
     */
 
-  --loading-spinner-color: var(--color-primary-500); // @presenter Color
-  --linear-progress-color: var(--color-accent-500); // @presenter Color
-  --linear-progress-background-color: var(--color-accent-100); // @presenter Color
+  --loading-spinner-color: var(--color-primary); // @presenter Color
+  --linear-progress-color: var(--color-info); // @presenter Color
+  --linear-progress-background-color: var(--color-info-bg); // @presenter Color
 
-  --fab-background-color: var(--color-primary-500); // @presenter Color
-  --fab-box-shadow: var(--box-shadow); // @presenter Shadow
+  --fab-background-color: var(--color-primary); // @presenter Color
+  --fab-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-hover-background: var(--color-primary); // @presenter Color
+  --fab-hover-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-active-background: var(--color-primary); // @presenter Color
+  --fab-active-box-shadow: var(--bg-base-shadow); // @presenter Shadow
 
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
 
@@ -1522,82 +680,25 @@ const apiReferenceDocs = css`
 
 const badges = css`
   /**
-  * @tokens Default Badge
-  */
-  --badge-text-color: var(--color-emphasis-50); // @presenter Color
-  --badge-background-color: var(--color-primary-500); // @presenter Color
-  --badge-border-color: var(--color-primary-700); // @presenter Color
+    * @tokens Default Badge
+    */
+
+  --badge-text-color: var(--color-primary-text); // @presenter Color
+  --badge-background-color: var(--color-primary-bg); // @presenter Color
+  --badge-border-color: var(--color-primary-border); // @presenter Color
   --badge-border: 1px solid var(--badge-border-color); // @presenter Border
   --badge-border-radius: var(--border-radius); // @presenter BorderRadius
 
   /**
-  * @tokens Deprecated Badge
-  */
+    * @tokens Deprecated Badge
+    */
 
-  --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color
-  --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color
+  --badge-deprecated-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-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
 `;
@@ -1616,166 +717,12 @@ 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-secondary-500); // @presenter Color
+  --load-progress-bar-color: var(--color-info); // @presenter Color
   --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color),
     0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow
   --load-progress-bar-height: 2px; // @presenter Height
@@ -1827,495 +774,151 @@ const inputs = css`
   /**
     * @tokens Inputs
     */
-  --input-text-color: var(--text-color-inverse); // @presenter Color
-  --input-border: none; // @presenter Border
-  --input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --input-text-color: var(--text-secondary); // @presenter Color
+  --input-background-color: var(--background-color); // @presenter Color
+  --input-border: 1px solid var(--border-primary); // @presenter Border
+  --input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --input-font-size: var(--font-size-base); // @presenter FontSize
   --input-font-family: var(--font-family-base); // @presenter FontFamily
   --input-line-height: 1.15em; // @presenter LineHeight
   --input-padding: 8px;
 
-  --input-hover-text-color: var(--text-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
-    */
+  --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
 
-  --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);
+  --checkbox-backround-color: var(--bg-base);
+  --checkbox-checked-backround-color: var(--color-primary);
 
   // @tokens End
 `;
 
 const docsDropdown = css`
-  --docs-dropdown-font-size: 14px;
-  --docs-dropdown-text-color: var(--text-color);
+  --docs-dropdown-font-size: var(--font-size-base);
+  --docs-dropdown-text-color: var(--text-secondary);
 
-  --docs-dropdown-padding-vertical: 8px;
+  --docs-dropdown-padding-vertical: 0;
   --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: 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
+  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
+  --docs-dropdown-border: 1px solid var(--border-primary);
 `;
 
-
 const lastUpdated = css`
-  --last-updated-text-color: var(--text-color);
-  --last-updated-font-size: var(--font-size-small);
+  --last-updated-text-color: var(--text-secondary);
+  --last-updated-font-size: var(--font-size-sm);
   --last-updated-font-family: var(--font-family-base);
   --last-updated-line-height: var(--line-height-base);
 `;
 
 const tile = css`
-  --wide-tile-background-color: var(--color-secondary-100);
-  --thin-tile-background-color: var(--color-secondary-100);
+  --wide-tile-background-color: var(--bg-raised);
+  --thin-tile-background-color: var(--bg-raised);
 `;
 
 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: #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-header-text-color: var(--h1-text-color);
+  --page-404-header-font-size: var(--h1-font-size); // @presenter FontSize
+  --page-404-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
+  --page-404-header-line-height: var(--h1-line-height); // @presenter LineHeight
+  --page-404-header-margin: 0px; // @presenter Spacing
 
-  --page-404-description-text-color: #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-description-text-color: var(--text-secondary);
+  --page-404-description-font-size: 1.5em; // @presenter FontSize
+  --page-404-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-404-description-line-height: 1 // @presenter LineHeight
+  --page-404-description-margin: 0px; // @presenter Spacing
 
   --page-404-button-margin: 4em; // @presenter Spacing
 
   // @tokens End
 
   /**
-  * @tokens 403 Page
-  * @presenter Color
-  */
+    * @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: #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-header-text-color: var(--h1-text-color);
+  --page-403-header-font-size: var(--h1-font-size); // @presenter FontSize
+  --page-403-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
+  --page-403-header-line-height: var(--h1-line-height); // @presenter LineHeight
+  --page-403-header-margin: 0; // @presenter Spacing
 
-   --page-403-description-text-color: #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-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-button-margin: 4em; // @presenter Spacing
+  --page-403-button-margin: 4em; // @presenter Spacing
 
    // @tokens End
 `
 
-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 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 modal = css`
@@ -2325,7 +928,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(--background-color);
+  --modal-background-color: var(--bg-base);
 `;
 
 const zIndexDepth = css`
@@ -2337,47 +940,56 @@ const zIndexDepth = css`
 
 export const styles = css`
   :root {
-    ${baseColors}
-    ${httpColors}
-    ${responsePanelColors}
-    ${typography}
-    ${headingsTypography}
-    ${common}
     ${admonition}
-    ${buttons}
-    ${sidebar}
-    ${navbar}
-    ${mobileMenu}
-    ${footer}
-    ${logo}
+    ${apiReferenceDocs}
+    ${apiReferencePanels}
     ${badges}
+    ${borders}
     ${breadcrumbs}
-    ${product}
-    ${toc}
-    ${inputs}
-    ${tooltip}
+    ${button}
+    ${catalog}
     ${code}
+    ${docsDropdown}
+    ${dropdown}
+    ${error}
+    ${filter}
+    ${footer}
+    ${headingsTypography}
+    ${inputs}
+    ${languagePicker}
+    ${lastUpdated}
     ${links}
+    ${loadProgressBar}
+    ${logo}
     ${markdown}
+    ${menu}
+    ${mobileMenu}
+    ${modal}
+    ${navbar}
+    ${pages}
+    ${product}
+    ${productPicker}
+    ${responsePanelColors}
     ${search}
-    ${dropdown}
-    ${docsDropdown}
     ${select}
-    ${apiReferencePanels}
-    ${apiReferenceDocs}
-    ${lastUpdated}
+    ${sidebar}
+    ${sizeAndSpace}
+    ${tag}
+    ${themeColors}
     ${tile}
-    ${loadProgressBar}
-    ${pages}
-    ${modal}
+    ${toc}
+    ${tooltip}
+    ${typography}
     ${userProfile}
+    ${userProfileDropdown}
+    ${versionPicker}
     ${zIndexDepth}
 
     --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
 
-    background-color: var(--background-color);
-    color: var(--text-color);
+    background-color: var(--bg-base);
+    color: var(--text-base);
     font-family: var(--font-family-base);
   }