@redocly/theme 0.2.3 → 0.4.1

package/src/globalStyle.ts

@@ -7,6 +7,8 @@ const baseColors = css`
     * @tokens Base Colors
     * @presenter Color
     */
+
+  --color-primary-50: #87ceeb;
   --color-primary-100: #62a1ff;
   --color-primary-200: #4892ff;
   --color-primary-300: #2f83ff;
@@ -17,26 +19,29 @@ const baseColors = css`
   --color-primary-800: #0046af;
   --color-primary-900: #003c95;
 
-  --color-secondary-100: #ffffff;
-  --color-secondary-200: #f5f7fa;
-  --color-secondary-300: #f3f4f6;
-  --color-secondary-400: #e4e7eb;
-  --color-secondary-500: #d5dae0;
-  --color-secondary-600: #c7cdd5;
-  --color-secondary-700: #b8c0ca;
-  --color-secondary-800: #a9b3c0;
-  --color-secondary-900: #9ba6b5;
-
-  --color-emphasis-100: #ffffff;
-  --color-emphasis-200: #e9eaec;
-  --color-emphasis-300: #cdd0d5;
-  --color-emphasis-400: #b2b6bd;
-  --color-emphasis-500: #969ca6;
-  --color-emphasis-600: #7a828f;
-  --color-emphasis-700: #626974;
-  --color-emphasis-800: #4b5058;
+  --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;
@@ -47,6 +52,7 @@ const baseColors = css`
   --color-accent-800: #0da7ff;
   --color-accent-900: #009bf2;
 
+  --color-success-50: #ddffe1;
   --color-success-100: #98eda0;
   --color-success-200: #82e98c;
   --color-success-300: #6ce678;
@@ -57,6 +63,7 @@ const baseColors = css`
   --color-success-800: #1fb32d;
   --color-success-900: #1b9e28;
 
+  --color-warning-50: #ffeda5;
   --color-warning-100: #ffc966;
   --color-warning-200: #ffc04d;
   --color-warning-300: #ffb733;
@@ -67,6 +74,7 @@ const baseColors = css`
   --color-warning-800: #b37300;
   --color-warning-900: #996300;
 
+  --color-error-50: #ffeaea;
   --color-error-100: #ffc7c7;
   --color-error-200: #ffaeae;
   --color-error-300: #ff9494;
@@ -80,12 +88,10 @@ const baseColors = css`
   // @tokens End
 `;
 const baseDarkColors = css`
-  /* === Palette === */
-
   /**
-          * @tokens Base Colors
-          * @presenter Color
-          */
+  * @tokens Base Dark Colors
+  * @presenter Color
+  */
   --color-primary-100: #969ca6;
   --color-primary-200: #7f8693;
   --color-primary-300: #7d7d80;
@@ -95,6 +101,8 @@ const baseDarkColors = css`
   --color-primary-700: #28282a;
   --color-primary-800: #202021;
   --color-primary-900: #000000;
+
+  // @tokens End
 `;
 
 const httpColors = css`
@@ -111,30 +119,7 @@ const httpColors = css`
   --color-http-basic: #707070;
   --color-http-link: #07818f;
   --color-http-head: #a23dad;
-  --color-http-hook: var(--color-http-post);
-  // @tokens End
-`;
-
-const responseColors = css`
-  /**
-    * @tokens Response colors
-    * @presenter Color
-    */
-  --response-success-border-color: #b1e996;
-  --response-success-background-color: #f6fff4;
-  --response-success-text-color: var(--response-success-border-color);
-
-  --response-error-border-color: #ffc9c9;
-  --response-error-background-color: #fff4f4;
-  --response-error-text-color: var(--response-error-border-color);
-
-  --response-redirect-border-color: var(--color-warning-500);
-  --response-redirect-background-color: #ffa5001a;
-  --response-redirect-text-color: var(--response-redirect-border-color);
-
-  --response-info-border-color: #87ceeb;
-  --response-info-background-color: #87ceeb1a;
-  --response-info-text-color: var(--response-info-border-color);
+  --color-http-hook: #4d5d86;
 
   // @tokens End
 `;
@@ -146,9 +131,9 @@ const typography = css`
     * @tokens Typography Colors
     * @presenter Color
     */
-  --color-content: #1f2933;
-  --color-content-inverse: var(--color-secondary-200);
-  --color-content-secondary: #7b8794;
+  --text-color: var(--color-emphasis-800);
+  --text-color-inverse: var(--color-secondary-100);
+  --text-color-secondary: var(--color-emphasis-500);
 
   /**
     * @tokens Font Sizes
@@ -181,96 +166,145 @@ const typography = css`
   /**
   * @tokens Rendering
   */
-  --smoothing: antialiased; // text-smoothing
+  --text-smoothing: antialiased; // text-smoothing
   --text-rendering: optimizeSpeed; // text-rendering
 
-  // TODO: Not sure if Spacing should be in typography
-  /**
-  * @tokens Spacings
-  * @presenter Spacing
-  */
-  --spacing-unit: 5px;
-  --spacing-horizontal: calc(var(--spacing-unit) * 8);
-  --spacing-vertical: calc(var(--spacing-unit) * 4);
-
   // @tokens End
 `;
 
 const headingsTypography = css`
-  // --h-{css-property-name} is fallback for h1...h6
-
   * {
     box-sizing: border-box;
   }
 
   /**
-    * @tokens Typography headings font
+    * @tokens Headings common styles
     */
-  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily
-  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight
-  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  --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 headings color
-    * @presenter Color
-    */
-  --h-color: var(--color-content);
+  * @tokens Typography heading anchor icon
+  */
+
+  --heading-anchor-offset-right: 4px; // @presenter Spacing
+  --heading-anchor-color: var(--color-primary-500); // @presenter Color
+  /*--heading-anchor-icon: icons later */
+
+  // TODO: implement a theme setting for heading-anchor-location: left right
 
   /**
-    * @tokens Typography headings font size
-    * @presenter FontSize
-    */
-  --h1-font-size: 36px;
-  --h2-font-size: 28px;
-  --h3-font-size: 18px;
-  --h4-font-size: 16px;
-  --h5-font-size: 14px;
-  --h6-font-size: 12px;
+  * @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 Typography headings line height
-    * @presenter LineHeight
-    */
-  --h1-line-height: 36px;
-  --h2-line-height: 28px;
-  --h3-line-height: 18px;
-  --h4-line-height: 16px;
-  --h5-line-height: 14px;
-  --h6-line-height: 12px;
+  * @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 Typography headings margin
-    * @presenter Spacing
-    */
-  --h1-margin-top: 1.35em;
-  --h1-margin-bottom: 0.9em;
-  --h2-margin-top: 1.25em;
-  --h2-margin-bottom: 0.8em;
-  --h3-margin-top: 1.25em;
-  --h3-margin-bottom: 0.8em;
+  * @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 borders = css`
+const common = css`
   /**
     * @tokens Borders
     * @presenter Border
     */
-  --global-border-width: 1px;
+  --border-width: 1px;
+  --border-style: solid;
 
   /**
     * @tokens Border Radius
     * @presenter BorderRadius
     */
-  --global-border-radius: 4px;
+  --border-radius: 4px;
+  --border-radius-lg: calc(var(--border-radius) * 2);
 
   /**
     * @tokens Border Colors
     * @presenter Color
     */
-  --global-border-color: var(--color-secondary-400);
-  --global-border-color-secondary: #616e7c;
-  --global-background-color: transparent;
+  --border-color: var(--color-secondary-300);
+  --border-color-secondary: var(--color-emphasis-600);
+  --background-color: transparent;
+
+  /**
+    * @tokens Spacings
+    * @presenter Spacing
+    */
+
+  --spacing-unit: 5px;
+  --spacing-horizontal: calc(var(--spacing-unit) * 8);
+  --spacing-vertical: calc(var(--spacing-unit) * 4);
 
   // @tokens End
 `;
@@ -284,40 +318,66 @@ const buttons = css`
   /**
     * @tokens Button default colors
     */
-  --button-color: white; // @presenter Color
-  --button-background-color: var(--color-emphasis-500); // @presenter Color
-  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color
-  --button-active-background-color: var(--color-emphasis-700); // @presenter Color
-  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color
+
+  --button-color: var(--color-emphasis-50); // @presenter Color
+  --button-background-color: var(--color-emphasis-400); // @presenter Color
+  --button-border-color: var(--color-emphasis-400); // @presenter Color
+
+  --button-hover-color: var(--color-emphasis-700); // @presenter Color
+  --button-hover-background-color: var(--color-emphasis-500); // @presenter Color
+  --button-hover-border-color: var(--color-emphasis-500); // @presenter Color
+
+  --button-active-color: var(--color-emphasis-900); // @presenter Color
+  --button-active-background-color: var(--color-emphasis-600); // @presenter Color
+  --button-active-border-color: var(--color-emphasis-600); // @presenter Color
+
+  /* TODO more styles for disabled state ??? */
+  --button-disabled-color: var(--button-color); // @presenter Color
+  --button-disabled-background-color: var(--color-emphasis-200); // @presenter Color
 
   /**
     * @tokens Button primary colors
     */
   .button-color-primary {
-    --button-color: white; // @presenter Color
+    --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-outlined-active-border-color: var(--color-primary-800); // @presenter Color
+    --button-active-border-color: var(--color-primary-700); // @presenter Color
+
+    --button-disabled-color: var(--button-color); // @presenter Color
+    --button-disabled-background-color: var(--color-primary-100); // @presenter Color
   }
 
   /**
     * @tokens Button secondary colors
     */
   .button-color-secondary {
-    --button-color: var(--color-emphasis-800); // @presenter Color
+    --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-outlined-active-border-color: var(--color-secondary-700); // @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(--global-border-radius); // @presenter BorderRadius
-  --button-margin: 5px; // @presenter Margin
+  --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
 
   /**
@@ -325,15 +385,19 @@ const buttons = css`
     */
   --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
@@ -344,11 +408,17 @@ const buttons = css`
 const sidebar = css`
   /* === Sidebar === */
 
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px;
+  --sidebar-logo-max-width: 285px;
+  --sidebar-logo-padding: 2px; // @presenter spacing
+
   /**
     * @tokens Sidebar typography
     */
-  --sidebar-font-size: var(--font-size-base);
-  --sidebar-font-family: var(--font-family-base);
   --sidebar-word-break: 'inherit';
 
   /**
@@ -356,10 +426,7 @@ const sidebar = css`
     * @presenter Color
     */
   --sidebar-background-color: #fff;
-  --sidebar-right-line-color: var(--global-border-color);
-  --sidebar-separator-label-color: var(--sidebar-item-color);
-  --sidebar-separator-line-color: #dadada;
-  --sidebar-chevron-color: var(--sidebar-item-color);
+  --sidebar-border-color: var(--border-color);
 
   /**
     * @tokens Sidebar spacing
@@ -368,25 +435,11 @@ const sidebar = css`
   --sidebar-width: 285px; // @presenter NO
 
   --sidebar-spacing-unit: 8px;
-  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);
-  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);
-  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
-
-  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);
-  --sidebar-padding-vertical: var(--sidebar-spacing-unit);
-  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated
-  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated
+  --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);
 
-  /**
-    * @tokens Sidebar border
-    */
-  --sidebar-border-radius: 4px; // @presenter BorderRadius
-
   /* === Sidebar Item === */
 
   /**
@@ -399,149 +452,730 @@ const sidebar = css`
     * @tokens Sidebar item colors
     *  @presenter Color
     */
-  --sidebar-item-color: var(--color-content);
-  --sidebar-item-active-color: var(--color-content);
-  --sidebar-item-background-color: #fff;
-  --sidebar-item-active-background-color: var(--global-border-color);
+  --sidebar-item-text-color: var(--text-color);
+  --sidebar-item-active-color: var(--text-color);
+  --sidebar-item-background-color: transparent;
+  --sidebar-item-active-background-color: var(--border-color);
 
   /**
     * @tokens Sidebar item spacing
     * @presenter Spacing
     */
-  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
-  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
+
+  --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: 4px; // @presenter BorderRadius
+  --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius
 
-  // @tokens End
-`;
+  /**
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general
+  --sidebar-item-icon-border-radius: 100%;
 
-const admonition = css`
   /**
-    * @tokens Admonition colors
-    * @presenter Color
+    * @tokens Sidebar item sublabel
     */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: 0.85rem;
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular);
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);
 
-  /* info */
-  --admonition-info-background-color: #ebedf0;
-  --admonition-info-text-color: var(--color-content);
-  --admonition-info-icon-color: #4782cb;
+  /**
+    * @tokens Sidebar item drilldown
+    */
 
-  /* attention */
-  --admonition-attention-background-color: #e6eef8;
-  --admonition-attention-text-color: var(--color-content);
-  --admonition-attention-icon-color: #4782cb;
+  --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);
 
-  /* warning */
-  --admonition-warning-background-color: #feeda5;
-  --admonition-warning-text-color: var(--color-content);
-  --admonition-warning-icon-color: #d4ad03;
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size);
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color);
+  --sidebar-item-group-background-color: var(--sidebar-background-color);
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+
+  // we need a theme setting for chevron-location: left (default), right-compact, right, none
+  // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right
 
-  /* danger */
-  --admonition-danger-background-color: #fceaea;
-  --admonition-danger-text-color: var(--color-content);
-  --admonition-danger-icon-color: #e53935;
+  --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);
 
-  /* success */
-  --admonition-success-background-color: #ddffe1;
-  --admonition-success-text-color: var(--color-content);
-  --admonition-success-icon-color: #00aa13;
+  /**
+    * @tokens Sidebar item separator
+    */
+  // does-separatorn't have active states
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size);
+  --sidebar-item-separator-text-transform: inherit;
+  --sidebar-item-separator-text-color: var(--sidebar-item-text-color);
+  --sidebar-item-separator-background-color: var(--sidebar-background-color);
+  --sidebar-item-separator-line-color: var(--border-color); // but has line color
 
   /**
-    * @tokens Admonition typography
+    * @tokens Sidebar back button
     */
-  --admonition-font-size: 16px; // @presenter FontSize
-  --admonition-font-weight: normal; // @presenter FontWeight
-  --admonition-line-height: 1.5em; // @presenter LineHeight
-  --admonition-heading-font-size: 16px; // @presenter FontSize
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size);
+  --sidebar-back-button-transform: inherit;
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-background-color: transparent;
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
+  --sidebar-back-button-hover-background-color: transparent;
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;
+
+  //--sidebar-back-button-icon: <svg string or url>
+  //--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
-    */
+  * @tokens Admonition spacing
+  * @presenter Spacing
+  */
+
   --admonition-margin-horizontal: 0;
   --admonition-margin-vertical: calc(var(--spacing-unit) * 2);
   --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);
   --admonition-padding-vertical: calc(var(--spacing-unit) * 4);
   --admonition-icon-size: 25px;
 
+  // TODO this is should be changed to --border-radius-lg
   /**
-    * @tokens Admonition border
-    */
-  --admonition-border-radius: 8px; // @presenter BorderRadius
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-style: var(--border-style);
+  --admonition-border-width: var(--border-width);
+
+  /**
+  * @tokens Admonition type info
+  */
+
+  --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color
+  --admonition-info-heading-text-color: var(--text-color); // @presenter Color
+  --admonition-info-text-color: var(--text-color); // @presenter Color
+  --admonition-info-icon-color: var(--color-accent-900); // @presenter Color
+  --admonition-info-border-color: inherit; // @presenter Color
+  --admonition-info-border-style: var(--admonition-border-style);
+  --admonition-info-border-width: var(--admonition-border-width);
+  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
+    var(--admonition-info-border-color); // @presenter Border
+  /* --admonition-info-icon: figure this out latter */
+
+  /**
+  * @tokens Admonition type attention
+  */
+
+  --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: figure this out latter */
+
+  /**
+  * @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: figure this out latter */
+
+  /**
+  * @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: figure this out latter */
+
+  /**
+  * @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: figure this out latter */
 
   // @tokens End
 `;
 
-const panels = css`
+const responsePanelColors = css`
   /**
-    * @tokens Panel border
-    */
-  --panels-border-radius: 8px; // @presenter BorderRadius
+  * @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 Samples panel
-    * @presenter Color
-    */
-  --samples-panel-gap: 20px;
-  --samples-panel-width: 50%;
+  * @tokens Response Panel Success colors
+  * @presenter Color
+  */
 
-  --panels-background-color: #fff;
-  --samples-panel-block-background-color: #fff;
-  --samples-panel-background-color: #52606d;
-  --samples-panel-callback-background-color: var(--color-secondary-300);
-  --samples-panel-controls-background-color: #323f4b;
-  --samples-panel-controls-hover-background-color: #3c4c5a;
-  --samples-panel-controls-active-border-color: var(--color-accent-500);
-  --samples-panel-text-color: #fff;
-  --samples-panel-heading-color: #fff;
+  --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);
 
-  --samples-panel-markdown-background-color: #3c4c5a;
-  --samples-panel-markdown-border-color: #46596a;
+  /**
+  * @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 Try It panel
-    * @presenter Color
-    */
+  * @tokens Response Panel Redirect colors
+  * @presenter Color
+  */
 
-  --try-it-panel-tab-background-color: var(--samples-panel-background-color);
-  --try-it-panel-active-tab-background-color: #47535e;
-  --try-it-panel-active-tab-border-color: var(--color-accent-500);
-  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);
-  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);
-  --try-it-panel-action-button-width: auto;
+  --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 Request and Response panel
-    * @presenter Color
-    */
-  --request-and-response-panel-background-color: #fff;
+  * @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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-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(--color-emphasis-50); // @presenter Color
+  --panel-samples-width: 50%;
+
+  --panel-samples-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight
+  --panel-samples-background-color: #52606d; // @presenter Color
+  --panel-samples-border: var(--panel-border); // @presenter Border
+  --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color
+
+  /**
+  * @tokens Panel samples body common
+  */
+
+  --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
+  --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize
+  --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
+  --panel-samples-body-padding: var(--panel-body-padding);
+  --panel-samples-body-background-color: #52606d; // @presenter Color
+  --panel-samples-body-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel samples heading common
+  */
+
+  --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily
+  --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-samples-heading-line-height: 30px; // @presenter LineHeight
+  --panel-samples-heading-padding: 0 20px;
+  --panel-samples-heading-background-color: #323f4b; // @presenter Color
+  --panel-samples-heading-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel try-it, request-samples, response-samples, callback samples
+  */
+
+  .panel-try-it,
+  .panel-request-samples,
+  .panel-response-samples,
+  .panel-callback-samples {
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-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-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
+    --panel-heading-font-size-local: var(--panel-response-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-response-heading-line-height);
+    --panel-heading-padding-local: var(--panel-response-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+    --panel-heading-white-space-local: normal;
+    --panel-body-padding-local: var(--panel-body-padding);
+  }
+
+  /**
+  * @tokens Panel response success colors
+  * @presenter Color
+  */
+
+  .panel-response-success {
+    --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-success-body-text-color);
+    --panel-body-background-color: var(--panel-response-success-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-success-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-success-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response info colors
+  * @presenter Color
+  */
+
+  .panel-response-info {
+    --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-info-body-text-color);
+    --panel-body-background-color: var(--panel-response-info-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-info-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-info-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response error colors
+  * @presenter Color
+  */
+
+  .panel-response-error {
+    --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-error-body-text-color);
+    --panel-body-background-color: var(--panel-response-error-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-error-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-error-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response redirect colors
+  * @presenter Color
+  */
+
+  .panel-response-redirect {
+    --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border
+    --panel-body-text-color: var(--panel-response-redirect-body-text-color);
+
+    --panel-body-background-color: var(--panel-response-redirect-body-background-color);
+    --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel response callback colors
+  * @presenter Color
+  */
+
+  .panel-response-callback {
+    --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-callback-body-text-color);
+    --panel-body-background-color: var(--panel-response-callback-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
+
+    --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);
+  }
+
+  /**
+  * @tokens Panel try-it nested common
+  * @presenter Color
+  */
+
+  --panel-try-it-nested-text-color: var(--text-color-inverse);
+  --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);
+
+  --panel-try-it-nested-body-background-color: #3e4c59;
+  --panel-try-it-nested-body-text-color: var(--text-color-inverse);
+  --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing
+  --panel-try-it-nested-body-border-color: var(--color-secondary-800);
+
+  --panel-try-it-nested-heading-text-color: var(--text-color-inverse);
+  --panel-try-it-nested-heading-background-color: transparent;
+  --panel-try-it-nested-heading-border-color: var(--color-secondary-800);
+
+  /**
+  * @tokens Panel try-it nested
+  * @presenter Color
+  */
+
+  .panel-try-it-nested {
+    --panel-text-color: var(--panel-try-it-nested-text-color);
+    --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);
+
+    --panel-body-text-color: var(--panel-try-it-nested-body-text-color);
+    --panel-body-background-color: var(--panel-try-it-nested-body-background-color);
+    --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing
+
+    --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);
+    --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);
+  }
+
+  /**
+  * @tokens Panel samples tabs
+  */
+
+  --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+
+  --panel-samples-tabs-background-color: transparent; // @presenter Color
+  --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color
+  --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+  --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color
+  --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color
+
+  --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color
+
+  /**
+  * @tokens Panel try-it tabs
+  */
+
+  --panel-try-it-tabs-font-size: 12px; // @presenter FontSize
+  --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color
+
+  --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
+  --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color
+  --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color
+
+  --panel-try-it-tabs-border-color: transparent; // @presenter Color
+  --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color
+  --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color
+  --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color
+
+  /**
+  * @tokens Panel try-it action button
+  */
+
+  --panel-try-it-action-button-width: auto;
+  --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color
+  --panel-try-it-action-button-border-color: transparent; // @presenter Color
+
+  --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
+
+  --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
+  --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
+
+  /**
+  * @tokens Panel samples other styles
+  */
+
+  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
+  --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
+
+  --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-dropdown-border: unset; // @presenter Border
+
+  --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+  /**
+  * @tokens Panel try-it other styles
+  */
+
+  --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-input-border: unset; // @presenter Border
+
+  --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-border: unset; // @presenter Border
+
+  // @tokens End
+
+  // TODO PUL RIGHT section - related to pull right - fix later
+
+  --samples-panel-markdown-background-color: #3c4c5a;
+  --samples-panel-markdown-border-color: #46596a;
+
+  --layout-right-rail-width: 50%;
+  --layout-right-rail-background-color: transparent;
+`;
+
 const tooltip = css`
   /**
     * @tokens Tooltip Base
     * @presenter Color
     */
-  --tooltip-color: var(--color-secondary-300);
-  --tooltip-background-color: #52606d;
+  --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(--color-secondary-50);
+
   .tooltip-copy-button {
-    --tooltip-color: #000;
-    --tooltip-background-color: #fff;
+    --tooltip-text-color: var(--copy-button-tooltip-text-color);
+    --tooltip-background-color: var(--copy-button-tooltip-background-color);
   }
 
   // @tokens End
@@ -555,64 +1189,76 @@ const code = css`
   --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
   --code-font-weight: 400; // @presenter FontWeight
   --code-wrap: pre;
+  --code-word-break: break-word;
 
   /**
     * @tokens Inline Code
     */
   --inline-code-font-size: var(--code-font-size); // @presenter FontSize
   --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
-  --inline-code-color: #e53935; // @presenter Color
-  --inline-code-background-color: var(--color-secondary-200); // @presenter Color
-  --inline-code-border-color: var(--global-border-color); // @presenter Color
-  --inline-code-border-radius: var(--global-border-radius); // @presenter BorderRadius
+  --inline-code-text-color: #e53935; // @presenter Color
+  --inline-code-background-color: var(--color-secondary-100); // @presenter Color
+  --inline-code-border-color: var(--border-color); // @presenter Color
+  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
 
   /**
     * @tokens Code Block
     */
   --code-block-font-size: var(--code-font-size); // @presenter FontSize
   --code-block-font-family: var(--code-font-family); // @presenter FontFamily
-  --code-block-color: #f1928f; // @presenter Color
-  --code-block-background-color: rgba(217, 205, 199, 0.05); // @presenter Color
-  --code-block-border-color: var(--global-border-color); // @presenter Color
-  --code-block-border-radius: 8px; // @presenter BorderRadius
+  --code-block-text-color: #fff; // @presenter Color
+  --code-block-background-color: #323f4b; // @presenter Color
+  --code-block-border-color: var(--border-color); // @presenter Color
+  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --code-block-max-height: 600px;
   --code-block-word-break: initial;
-  --code-block-preformatted-background-color: #323f4b; // @presenter Color
 
-  --code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color
+  /**
+    * @tokens Code Block controls
+    */
+
+  --code-block-controls-text-color: #fff; // @presenter Color
+  --code-block-controls-hover-text-color: #fff; // @presenter Color
+  --code-block-controls-background-color: transparent; // @presenter Color
+  --code-block-controls-hover-background-color: rgba(255, 255, 255, 0.15); // @presenter Color
+  --code-block-controls-opacity: 0.5;
+  --code-block-controls-active-opacity: 1;
+  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
+  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
+  --code-block-controls-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  /**
+    * @tokens Code Block tokens
+   */
+  --code-block-tokens-default-color: var(--text-color-inverse); // @presenter Color
   --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color
   --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
   --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
   --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
-
   --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
-
   --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color
-
   --code-block-tokens-string-color: #fee39e; // @presenter Color
+  --code-block-tokens-property-string-color: #9efaa7; // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
-
+  --code-block-tokens-link-color: #4ed2ba; // @presenter Color
   --code-block-tokens-operator-color: #f5b83d; // @presenter Color
   --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
   --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
   --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
-
   --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color
   --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
   --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
-
   --code-block-tokens-regex-color: #e90; // @presenter Color
   --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
-
   --code-block-tokens-deleted-color: red; // @presenter Color
 
   // @tokens End
@@ -622,30 +1268,32 @@ const links = css`
   /**
     * @tokens Links
     */
-  --link-color: var(--color-primary-500); // @presenter Color
+  --link-text-color: var(--color-primary-500); // @presenter Color
   --link-decoration: none;
-  --link-hover-color: var(--color-primary-100); // @presenter Color
+  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  --link-hover-text-color: var(--color-primary-100); // @presenter Color
   --link-hover-decoration: underline;
 
+  --link-active-decoration: none;
+  --link-active-text-color: var(--color-primary-500); // @presenter Color
+
+  --link-visited-text-color: var(--color-primary-500); // @presenter Color
+  --link-visited-decoration: none;
+
   // @tokens End
 `;
 
-const openapiAndGraphqlDocs = css`
+const apiReferenceDocs = css`
   /* === ref docs and graphql docs specific === */
 
   /**
-    * @tokens OpenAPI-GraphQL Logo
-    */
-  --logo-max-height: 285px;
-  --logo-max-width: 285px;
-  --logo-padding: 2px;
+  * @tokens API Reference Schemas Layout
+  */
 
-  /**
-    * @tokens OpenAPI-GraphQL Layout
-    */
-  --layout-buttons-top-offset: 20px; // @presenter Spacing
-  --layout-buttons-height: 36px; // @presenter Spacing
-  --layout-buttons-width: 36px; // @presenter Spacing
+  --layout-controls-top-offset: 20px; // @presenter Spacing
+  --layout-controls-height: 36px; // @presenter Spacing
+  --layout-controls-width: 36px; // @presenter Spacing
 
   --layout-stacked-small-max-width: 90%;
   --layout-stacked-medium-max-width: 75%;
@@ -655,77 +1303,224 @@ const openapiAndGraphqlDocs = css`
   --layout-three-panel-medium-max-width: 100%;
   --layout-three-panel-large-max-width: 1800px;
 
-  --layout-middle-panel-small-max-width: none;
-  --layout-middle-panel-medium-max-width: none;
-  --layout-middle-panel-large-max-width: none;
+  --layout-panel-schemas-small-max-width: none;
+  --layout-panel-schemas-medium-max-width: none;
+  --layout-panel-schemas-large-max-width: none;
 
   /**
-    * @tokens OpenAPI-GraphQL Schema
-    */
-  --schema-lines-color: var(--global-border-color); // @presenter Color
-  --schema-default-details-width: 70%;
-  --schema-type-name-color: var(--color-content-secondary); // @presenter Color
-  --schema-type-title-color: var(--color-content-secondary); // @presenter Color
-  --schema-require-label-color: var(--color-error-900); // @presenter Color
-  --schema-labels-text-size: 0.9em; // @presenter Spacing
-  --schema-nesting-spacing: 1em; // @presenter Spacing
-  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color
-  --schema-chevron-color: var(--color-content); // @presenter Color
-  --schema-chevron-size: 9px; // @presenter Spacing
+  * @tokens API Reference Schemas MimeType Dropdown
+  */
 
-  --schema-controls-color: var(--color-emphasis-800); // @presenter Color
-  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color
-  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color
-  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color
+  --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;
+  --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border
+  --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
 
-  --field-name-font-size: var(--code-font-size); // @presenter FontSize
-  --field-name-font-family: var(--code-font-family); // @presenter FontFamily
-  --field-example-color: var(--color-content); // @presenter Color
-  --field-example-background-color: var(--inline-code-background-color); // @presenter Color
-  --field-constraint-color: var(--color-content); // @presenter Color
-  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color
+  /**
+  * @tokens API Reference Schemas Discriminator Dropdown
+  */
+
+  --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;
+  --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border
+  --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
 
   /**
-    * @tokens OpenAPI-GraphQL Search
-    * @presenter Color
-    */
-  --search-input-border-bottom: #e6e6e6;
-  --search-results-background-color: #f2f2f2;
-  --search-results-active-item-background-color: #e6e6e6;
-  --search-marked-background-color: #ffff03;
-  --search-popup-header-background-color: var(--color-secondary-200);
-  --search-clear-button-background-color: var(--color-secondary-400);
-  --search-clear-button-hover-background-color: var(--color-secondary-600);
+  * @tokens API Reference Schemas Titles
+  */
 
-  /*
-    * @tokens OpenAPI-GraphQL Badge
-    */
-  --badge-color: var(--color-emphasis-100); // @presenter Color
-  --badge-background-color: var(--color-primary-500); // @presenter Color
-  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color
-  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color
+  --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color
+  --schema-type-text-color: var(--text-color-secondary); // @presenter Color
+  --schema-labels-font-size: 0.8em; // @presenter FontSize
+
+  /**
+  * @tokens API Reference Schemas Lines Color
+  */
+
+  --schemas-lines-color: var(--border-color); // @presenter Color
+
+  /**
+  * @tokens API Reference Schema Inline code typography
+  */
+
+  --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily
+  --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize
+  --schema-inline-code-text-color: var(--text-color); // @presenter Color
+  --schema-inline-background-color: var(--color-secondary-100); // @presenter Color
+  --schema-inline-border-color: var(--border-color); // @presenter Color
+  --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
+
+  /**
+  * @tokens API Reference Schema Example Label colors
+  * @presenter Color
+  */
+
+  --schema-example-text-color: var(--schema-inline-code-text-color);
+  --schema-example-background-color: var(--schema-inline-background-color);
+  --schema-example-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Constraint Label colors
+  * @presenter Color
+  */
+
+  --schema-constraint-text-color: var(--schema-inline-code-text-color);
+  --schema-constraint-background-color: var(--schema-inline-background-color);
+  --schema-constraint-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Enum Label colors
+  * @presenter Color
+  */
+
+  --schema-enum-text-color: var(--schema-inline-code-text-color);
+  --schema-enum-background-color: var(--schema-inline-background-color);
+  --schema-enum-border-color: var(--schema-inline-border-color);
 
-  --http-badge-font-size: 12px; // @presenter FontSize
-  --http-badge-line-height: 20px; // @presenter LineHeight
-  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily
-  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --http-badge-border-radius: 16px; // @presenter BorderRadius
-  --http-badge-color: var(--color-content-inverse); // @presenter Color
+  /**
+  * @tokens API Reference Schema Default Label colors
+  * @presenter Color
+  */
 
-  --http-badge-menu-font-size: 8px; // @presenter FontSize
-  --http-badge-menu-line-height: 14px; // @presenter FontSize
+  --schema-default-text-color: var(--schema-inline-code-text-color);
+  --schema-default-background-color: var(--schema-inline-background-color);
+  --schema-default-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens API Reference Schema Recursive Label colors
+  * @presenter Color
+  */
+
+  --schema-recursive-text-color: var(--color-warning-600);
+  --schema-recursive-background-color: var(--schema-inline-background-color);
+  --schema-recursive-border-color: var(--schema-inline-border-color);
+
+  /**
+  * @tokens GraphQL Docs Reference Schema Non null label
+  * @presenter Color
+  */
 
+  --schema-non-null-text-color: var(--schema-inline-code-text-color);
+  --schema-non-null-background-color: var(--schema-inline-background-color);
+  --schema-non-null-border-color: var(--schema-inline-border-color);
   /**
-    * @tokens OpenAPI-GraphQL Other
+  * @tokens API Reference Schema Nested styles
+  */
+
+  --schema-nested-offset: 1em; // @presenter Spacing
+  --schema-nested-background-color: var(--color-secondary-100); // @presenter Color
+
+  /**
+  * @tokens API Reference Schema Buttons
+  */
+
+  --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily
+  --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize
+
+  --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color
+  --schema-buttons-background-color: transparent; // @presenter Color
+  --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color
+
+  --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color
+  --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color
+
+  --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color
+  --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color
+  --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color
+  --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color
+  --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color
+
+  /**
+  * @tokens API Reference Schema Properties
+  */
+
+  --schemas-property-name-text-color: var(--text-color); //@presenter Color
+  --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize
+  --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
+
+  --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
+  --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color
+  --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color
+  --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color
+
+  --schema-property-details-width: 70%;
+
+  /**
+  * @tokens API Reference Schema Icons
+  */
+
+  --schema-chevron-color: var(--text-color); // @presenter Color
+  --schema-chevron-size: 9px;
+
+  --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color
+  /* --schema-property-deep-link-icon: figure out this later */
+
+  /*
+    * @tokens API Reference Other
     */
-  --recursive-label-color: var(--color-warning-500); // @presenter Color
-  --spinner-color: var(--color-primary-500); // @presenter Color
+
+  --loading-spinner-color: var(--color-primary-500); // @presenter Color
   --linear-progress-color: var(--color-accent-500); // @presenter Color
   --linear-progress-background-color: var(--color-accent-100); // @presenter Color
 
-  /* Floating action button */
-  --fab-color: #0065fb; // @presenter Color
-  --fab-background-color: #f2f2f2; // @presenter Color
+  --fab-icon-color: var(--color-primary-500); // @presenter Color
+  --fab-background-color: var(--color-emphasis-50); // @presenter Color
+  --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow
+
+  --fab-hover-background: var(--color-emphasis-200); // @presenter Color
+  --fab-hover-icon-color: var(--color-primary-600); // @presenter Color
+  --fab-hover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow
+
+  --fab-active-background: var(--color-emphasis-200); // @presenter Color
+  --fab-active-icon-color: var(--color-primary-600); // @presenter Color
+  --fab-active-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow
+
+  /* --fab-icon: <svg string or url> work with icons later **/
+
+  // @tokens End
+`;
+
+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
+  --badge-border: 1px solid var(--badge-border-color); // @presenter Border
+  --badge-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+  * @tokens Deprecated Badge
+  */
+
+  --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color
+  --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color
+  --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color
+  --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
+  --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+  * @tokens Http Badge
+  */
+
+  --badge-http-font-size: 12px; // @presenter FontSize
+  --badge-http-line-height: 20px; // @presenter LineHeight
+  --badge-http-text-color: var(--badge-text-color); // @presenter Color
+  --badge-http-font-family: var(--code-font-family); // @presenter FontFamily
+  --badge-http-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --badge-http-border-radius: calc(var(--border-radius-lg) * 2); // @presenter BorderRadius
+
+  /**
+  * @tokens Sidebar item badge http
+  */
+
+  --sidebar-item-badge-http-text-color: var(--badge-text-color); // @presenter Color
+  --sidebar-item-badge-http-font-family: var(--code-font-family); // @presenter FontFamily
+  --sidebar-item-badge-http-font-size: 8px; // @presenter FontSize
+  --sidebar-item-badge-http-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-badge-http-border-radius: var(--border-radius-lg); // @presenter BorderRadius
 
   // @tokens End
 `;
@@ -737,6 +1532,30 @@ const footer = css`
   --footer-background-color: var(--color-primary-500); // @presenter Color
   --footer-text-color: #fff; // @presenter Color
 
+  --footer-padding-vertical: 2em; // @presenter Spacing
+  --footer-padding-horizontal: 20px; // @presenter Spacing
+
+  --footer-font-family: var(--font-family-base); // @presenter FontFamily
+  --footer-font-size: 1rem; // @presenter FontSize
+  --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  --footer-title-text-color: var(--footer-text-color); // @presenter Color
+  --footer-title-font-size: 24px; // @presenter FontSize
+  --footer-title-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --footer-title-margin-vertical: 1.5em;
+
+  --footer-link-text-color: var(--footer-text-color); // @presenter Color
+  --footer-link-hover-color: var(--footer-text-color); // @presenter Color
+
+  --footer-item-padding-vertical: 0.5em; // @presenter Spacingv
+  --footer-item-padding-horizontal: 0;
+
+  --footer-column-width: 20%; // @presenter Spacing
+  --footer-column-margin-vertical: 20px; // @presenter Spacing
+  --footer-column-margin-horizontal: 0; // @presenter Spacing
+
+  --footer-container-max-width: 1200px; // @presenter Spacing
+
   // @tokens End
 `;
 
@@ -744,8 +1563,12 @@ const logo = css`
   /**
     * @tokens Logo
     */
-  --logo-height: 2rem; // @presenter Spacing
-  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing
+
+  --navbar-logo-height: 2rem; // @presenter Spacing
+  --navbar-logo-width: auto;
+  --navbar-logo-margin: 16px; // @presenter Spacing
+  --navbar-logo-max-width: 285px; // @presenter Spacing
+  --navbar-logo-max-height: 285px; // @presenter Spacing
 
   // @tokens End
 `;
@@ -757,20 +1580,33 @@ const navbar = css`
   --navbar-height: 60px; // @presenter Spacing
   --navbar-text-color: #fff; // @presenter Color
   --navbar-background-color: var(--color-primary-500); // @presenter Color
-  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);
+  --navbar-container-max-width: 1200px;
 
   /**
     * @tokens Navbar Item
     * */
+  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --navbar-item-font-size: 16px; // @presenter FontSize
-  --navbar-item-margin-horizontal: 0; // @presenter Spacing
-  --navbar-item-margin-vertical: 0; // @presenter Spacing
-  --navbar-item-border-radius: 10px; // @presenter BorderRadius
+  --navbar-item-padding-horizontal: 16px; // @presenter Spacing
+  --navbar-item-paddin-vertical: 8px; // @presenter Spacing
+  --navbar-item-margin-horizontal: 7px;
+  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --navbar-item-active-background-color: #1b75fa; // @presenter Color
+  --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-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color
   --navbar-item-active-text-decoration: none;
+  --navbar-item-separator-line-color: var(--border-color); // @presenter Color
+
+  /**
+    * @tokens Navbar dropdown
+    * */
+
+  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable
+  --navbar-dropdown-background: var(--navbar-item-active-background-color);
+  --navbar-dropdown-border: none;
 
   // @tokens End
 `;
@@ -779,58 +1615,235 @@ 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 markdown = css`
+const inputs = css`
   /**
-    * @tokens Markdown
-    * */
-  --content-wrapper-max-width: 910px;
-  --content-wrapper-padding-vertical: 25px; // @presenter Spacing
-  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing
+    * @tokens Inputs
+    */
+  --input-text-color: var(--text-color-inverse); // @presenter Color
+  --input-border: none; // @presenter Border
+  --input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --input-font-size: var(--font-size-base); // @presenter FontSize
+  --input-font-family: var(--code-font-family); // @presenter FontFamily
+  --input-line-height: 1.15em; // @presenter LineHeight
+  --input-padding: 8px;
+
+  --input-hover-text-color: var(--text-color-inverse); // @presenter Color
+  --input-hover-border: none; // @presenter Border
+  --input-focus-border: none; // @presenter Border
+  --input-focus-text-color: var(--text-color-inverse); // @presenter Color
+  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color
 
   // @tokens End
 `;
 
-const blockquote = css`
+const markdown = css`
   /**
-    * @tokens Blockquote
-    * */
-  // TODO: fix typo
-  --bloquote-margin-vertical: 1.5em; // @presenter Spacing
-  --bloquote-margin-horizontal: 0; // @presenter Spacing
-  --bloquote-padding-vertical: 0; // @presenter Spacing
-  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing
-  --bloquote-background-color: transparent; // @presenter Color
+  * @tokens Markdown Container
+  */
+
+  --md-container-max-width: 910px;
+  --md-container-padding-vertical: 25px; // @presenter Spacing
+  --md-container-padding-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Blockquote
+  */
+
+  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing
+  --md-blockquote-margin-horizontal: 0; // @presenter Spacing
+  --md-blockquote-padding-vertical: 0; // @presenter Spacing
+  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing
+  --md-blockquote-border-color: var(--border-color); // @presenter Color
+  --md-blockquote-background-color: transparent; // @presenter Color
+  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border
+  --md-blockquote-text-color: var(--text-color); // @presenter Color
+  --md-blockquote-box-shadow: none; // @presenter Shadow
+
+  /** 
+  * @tokens Markdown Paragraph
+  */
+
+  --md-paragraph-margin-vertical: 10px; // @presenter Spacing
+  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Table
+  */
+
+  --md-table-font-size: 14px; // @presenter FontSize
+  --md-table-margin-vertical: 20px; // @presenter Spacing
+  --md-table-background-color: transparent; // @presenter Color
+
+  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --md-table-border-width: 1px;
+  --md-table-border-color: var(--border-color); // @presenter Color
+
+  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color
+
+  --md-table-cell-text-color: var(--text-color); // @presenter Color
+  --md-table-cell-padding: 12px; // @presenter Spacing
+
+  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color
+  --md-table-head-text-color: var(--text-color); // @presenter Color
+  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  /**
+  * @tokens Markdown Horizontal Rule
+  */
+
+  --md-hr-background-color: transparent; // @presenter Color
+  --md-hr-border-color: var(--border-color); // @presenter Color
+  --md-hr-height: unset;
+  --md-hr-margin-vertical: 20px; // @presenter Spacing
+
+  /** 
+  * @tokens Markdown List
+  */
+
+  --md-list-left-padding: 2rem; // @presenter Spacing
+  --md-list-margin: 1rem; // @presenter Spacing
+  --md-list-item-margin: 0.25rem; // @presenter Spacing
+  --md-list-item-style: inherit;
+
+  /** 
+  * @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-number-display: none;
+  --md-numbered-list-item-style: var(--md-list-item-style);
+  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color
+  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color
+  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
+  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing
+  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
 
   // @tokens End
 `;
 
-const portalSearch = css`
+const search = css`
   /**
-    * @tokens Portal Search
-    */
+      * @tokens Search
+      */
+
+  --search-highlight-text-color: #ffff03; // @presenter Color
+
+  /**
+      * @tokens Portal Search
+      */
+
   --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
   --search-input-text-color: #fff; // @presenter Color
-  --search-input-border-radius: var(--global-border-radius); // @presenter BorderRadius
+
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
   --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize
   --search-input-font-family: var(--font-family-base); // @presenter FontFamily
   --search-input-line-height: 1.15em; // @presenter LineHeight
-  // TODO: fix typo
-  --search-popover-backgrond-color: #fff; // @presenter Color
+
+  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-input-hover-border: none; // @presenter Color
+  --search-input-placeholder-color: var(--search-input-text-color);
+
+  --search-popover-background-color: #fff; // @presenter Color
   --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
-  --search-item-text-color: var(--color-content-secondary); // @presenter Color
-  --search-item-title-text-color: var(--color-content); // @presenter Color
+  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow
+  --search-popover-border: none;
+
+  --search-item-padding: 8px 24px;
+  --search-item-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-title-text-color: var(--text-color); // @presenter Color
+  --search-item-background-color: transparent; // @presenter Color
+  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-active-title-text-color: var(--text-color); // @presenter Color
   --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color
 
+  /**
+    * @tokens Sidebar Search
+    */
+
+  --sidebar-search-button-background-color: transparent; // @presenter Color
+  --sidebar-search-button-text-color: var(--text-color); // @presenter Color
+  --sidebar-search-button-border: var(--border-color);
+  --sidebar-search-button-border-radius: none; // @presenter BorderRadius
+  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize
+  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight
+  --sidebar-search-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color
+  --sidebar-search-button-active-background-color: transparent; // @presenter Color
+  --sidebar-search-button-active-border: var(--border-color); // @presenter Color
+
+  /**
+    * @tokens Search results modal
+    * @presenter Color
+    */
+
+  --search-modal-background: #fff;
+  --search-modal-text-color: var(--text-color);
+  --search-modal-border: none;
+  --search-modal-box-shadow: none;
+
+  --search-modal-header-border-radius: 8px;
+  --search-modal-header-background-color: var(--color-secondary-100);
+  --search-modal-clear-button-background-color: var(--color-secondary-300);
+  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);
+
   // @tokens End
 `;
 
-export const lightMode = css`
-  ${baseColors};
+const dropdown = css`
+  --dropdown-font-size: 14px;
+  --dropdown-text-color: var(--text-color);
+
+  --dropdown-padding-vertical: 8px;
+  --dropdown-padding-left: 10px;
+  --dropdown-padding-right: 26px;
+  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)
+    var(--dropdown-padding-vertical) var(--dropdown-padding-left);
+
+  --dropdown-border: none;
 `;
 
 export const darkMode = css`
@@ -841,26 +1854,27 @@ export const styles = css`
   :root {
     ${baseColors}
     ${httpColors}
-    ${responseColors}
+    ${responsePanelColors}
     ${typography}
     ${headingsTypography}
-    ${borders}
+    ${common}
     ${admonition}
     ${buttons}
     ${sidebar}
-    ${panels}
     ${navbar}
     ${footer}
     ${logo}
+    ${badges}
     ${toc}
+    ${inputs}
     ${tooltip}
     ${code}
     ${links}
     ${markdown}
-    ${blockquote}
-    ${portalSearch}
-
-    ${openapiAndGraphqlDocs}
+    ${search}
+    ${dropdown}
+    ${apiReferencePanels}
+    ${apiReferenceDocs}
   }
 
   :root.dark {