@redocly/theme 0.1.11 → 0.1.14

package/src/globalStyle.ts

@@ -77,7 +77,49 @@ const baseColors = css`
   --color-error-800: #ff1414;
   --color-error-900: #ff0000;
 
-  // @tokens Other
+  // @tokens End
+`;
+
+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: 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);
+
+  // @tokens End
 `;
 
 const typography = css`
@@ -125,6 +167,7 @@ const typography = css`
   --smoothing: antialiased; // text-smoothing
   --text-rendering: optimizeSpeed; // text-rendering
 
+  // TODO: Not sure if Spacing should be in typography
   /**
   * @tokens Spacings
   * @presenter Spacing
@@ -133,7 +176,58 @@ const typography = css`
   --spacing-horizontal: calc(var(--spacing-unit) * 8);
   --spacing-vertical: calc(var(--spacing-unit) * 4);
 
-  // @tokens Other
+  // @tokens End
+`;
+
+const headingsTypography = css`
+  // --h-{css-property-name} is fallback for h1...h6
+
+  /**
+    * @tokens Typography headings font
+    */
+  --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
+
+  /**
+    * @tokens Typography headings color
+    * @presenter Color
+    */
+  --h-color: var(--color-content);
+
+  /**
+    * @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 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 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 End
 `;
 
 const borders = css`
@@ -157,479 +251,584 @@ const borders = css`
   --global-border-color-secondary: #616e7c;
   --global-background-color: transparent;
 
-  // @tokens Other
+  // @tokens End
 `;
 
-export const styles = css`
+const buttons = css`
   /*
   * Static classnames that can be used to override styles for components:
   * download-specification-button, next-section-button, button-base
   */
-  :root {
-    ${baseColors}
-    ${typography}
-    ${borders}
 
-    /* === Page layout === */
-    //TBD
-    /* === Navbar === */
-    //--navbar-height:
-    //TBD
-
-    /* === Menu (sidebar) === */
-
-  /**
-    * @tokens Sidebar
-    */
-    --sidebar-width: 285px;
-    --sidebar-background-color: #fff; // @presenter Color
-    --sidebar-right-line-color: var(--global-border-color); // @presenter Color
-    --sidebar-spacing-unit: 8px; // @presenter Spacing
-    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing
-    --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing
-
-    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
-    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
-    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
-    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
-
-    --sidebar-word-break: 'inherit';
-    --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color
-    --sidebar-separator-line-color: #dadada; // @presenter Color
-    --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color
-    --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing
-
-    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
-    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
-    --sidebar-item-spacing-offset-nesting: calc(
-      var(--sidebar-spacing-unit) * 2
-    ); // @presenter Spacing
-    --sidebar-item-border-radius: 4px; // @presenter BorderRadius
-    --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
-    --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
-    --sidebar-item-color: var(--color-content); // @presenter Color
-    --sidebar-item-active-color: var(--color-content); // @presenter Color
-    --sidebar-item-background-color: #fff; // @presenter Color
-    --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color
-
-    //TBD
-    /* === Footer === */
-    //TBD
-    /* === Table of contents === */
-    //TBD
-
-    // @tokens Other
-
-    /* === Various components: buttons, inputs, alerts, tooltip === */
-
-    /*
-    * Buttons
-    */
-    --button-color: white;
-    --button-background-color: var(--color-emphasis-500);
-    --button-hover-background-color: var(--color-emphasis-600);
-    --button-active-background-color: var(--color-emphasis-700);
-    --button-outlined-active-border-color: var(--color-emphasis-800);
-    --button-border-radius: var(--global-border-radius);
-    --button-font-family: inherit;
-    --button-font-weight: var(--font-weight-bold);
-    --button-box-shadow: none;
-    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
-
-    .button-color-primary {
-      --button-color: white;
-      --button-background-color: var(--color-primary-500);
-      --button-hover-background-color: var(--color-primary-600);
-      --button-active-background-color: var(--color-primary-700);
-      --button-outlined-active-border-color: var(--color-primary-800);
-    }
-
-    .button-color-secondary {
-      --button-color: var(--color-emphasis-800);
-      --button-background-color: var(--color-secondary-400);
-      --button-hover-background-color: var(--color-secondary-500);
-      --button-active-background-color: var(--color-secondary-600);
-      --button-outlined-active-border-color: var(--color-secondary-700);
-    }
-
-    --button-small-font-size: 12px;
-    --button-small-padding: 8px 10px;
-    --button-small-min-width: 90px;
-    --button-medium-font-size: 14px;
-    --button-medium-padding: 8px 20px;
-    --button-medium-min-width: 120px;
-    --button-large-font-size: 14px;
-    --button-large-padding: 12px 24px;
-    --button-large-min-width: 150px;
-    --button-xlarge-font-size: 16px;
-    --button-xlarge-padding: 20px 24px;
-    --button-xlarge-min-width: 200px;
-
-    /*
-    * Tooltip
-    */
-    --tooltip-color: var(--color-secondary-300);
-    --tooltip-background-color: #52606d;
-
-    .tooltip-copy-button {
-      --tooltip-color: #000;
-      --tooltip-background-color: #fff;
-    }
-
-    /* === Markdown/Page content (tables, inline code, blockquotes) === */
-
-    /*
-    * Headings
-    * --h-{css-property-name} is fallback for h1...h6
-    */
-    --h-font-family: Source Sans Pro, sans-serif;
-    --h-font-weight: var(--font-weight-bolder);
-    --h-color: var(--color-content);
-
-    --h1-font-size: 36px;
-    --h2-font-size: 28px;
-    --h3-font-size: 18px;
-    --h4-font-size: 16px;
-    --h5-font-size: 14px;
-    --h6-font-size: 12px;
-
-    --h1-line-height: 36px;
-    --h2-line-height: 28px;
-    --h3-line-height: 18px;
-    --h4-line-height: 16px;
-    --h5-line-height: 14px;
-    --h6-line-height: 12px;
-
-    --code-font-size: 13px;
-    --code-font-family: var(--font-family-monospaced);
-    --code-font-weight: 400;
-    --code-wrap: pre;
-
-    --inline-code-font-size: var(--code-font-size);
-    --inline-code-font-family: var(--code-font-family);
-    --inline-code-color: #e53935;
-    --inline-code-background-color: var(--color-secondary-200);
-    --inline-code-border-color: var(--global-border-color);
-    --inline-code-border-radius: var(--global-border-radius);
-
-    --code-block-font-size: var(--code-font-size);
-    --code-block-font-family: var(--code-font-family);
-    --code-block-color: #f1928f;
-    --code-block-background-color: rgba(217, 205, 199, 0.05);
-    --code-block-border-color: var(--global-border-color);
-    --code-block-border-radius: 8px;
-    --code-block-max-height: 600px;
-    --code-block-word-break: initial;
-    --code-block-preformatted-background-color: #323f4b;
-
-    /*
-    * Links
-    */
-    --link-color: var(--color-primary-500);
-    --link-decoration: none;
-    --link-hover-color: var(--color-primary-100);
-    --link-hover-decoration: underline;
-
-    /* === ref docs and graphql docs specific === */
-    /*
-    * Logo
-    */
-    --logo-max-height: 285px;
-    --logo-max-width: 285px;
-    --logo-padding: 2px;
-
-    /**
-    * @tokens HTTP Colors
-    * @presenter Color
+  /**
+    * @tokens Button default colors
     */
-    --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: var(--color-http-post);
-
-    /**
-    * @tokens Response 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
+
+  /**
+    * @tokens Button primary colors
+    */
+  .button-color-primary {
+    --button-color: white; // @presenter Color
+    --button-background-color: var(--color-primary-500); // @presenter Color
+    --button-hover-background-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
+  }
+
+  /**
+    * @tokens Button secondary colors
+    */
+  .button-color-secondary {
+    --button-color: var(--color-emphasis-800); // @presenter Color
+    --button-background-color: var(--color-secondary-400); // @presenter Color
+    --button-hover-background-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
+  }
+
+  /**
+    * @tokens Button borders
+    */
+  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius
+  --button-box-shadow: none; // @presenter Shadow
+  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow
+
+  /**
+    * @tokens Button typography
+    */
+  --button-font-family: inherit; // @presenter FontFamily
+  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --button-small-font-size: 12px; // @presenter FontSize
+  --button-small-padding: 8px 10px;
+  --button-small-min-width: 90px; // @presenter Spacing
+  --button-medium-font-size: 14px; // @presenter FontSize
+  --button-medium-padding: 8px 20px;
+  --button-medium-min-width: 120px; // @presenter Spacing
+  --button-large-font-size: 14px; // @presenter FontSize
+  --button-large-padding: 12px 24px;
+  --button-large-min-width: 150px; // @presenter Spacing
+  --button-xlarge-font-size: 16px; // @presenter FontSize
+  --button-xlarge-padding: 20px 24px;
+  --button-xlarge-min-width: 200px; // @presenter Spacing
+
+  // @tokens End
+`;
+
+const sidebar = css`
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-font-size: var(--font-size-base);
+  --sidebar-font-family: var(--font-family-base);
+  --sidebar-word-break: 'inherit';
+
+  /**
+    * @tokens Sidebar 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);
-
-    // @tokens Other
-
-    /*
-    * Panels
-    */
-    --panels-border-radius: 8px;
-    --panels-background-color: #fff;
-
-    --samples-panel-gap: 20px;
-    --samples-panel-width: 50%;
-    --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;
-
-    --samples-panel-markdown-background-color: #3c4c5a;
-    --samples-panel-markdown-border-color: #46596a;
-
-    --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;
-
-    --request-and-response-panel-background-color: #fff;
-
-    /*
-    * Layout
-    */
-    --layout-buttons-top-offset: 20px;
-    --layout-buttons-height: 36px;
-    --layout-buttons-width: 36px;
-
-    --layout-stacked-small-max-width: 90%;
-    --layout-stacked-medium-max-width: 75%;
-    --layout-stacked-large-max-width: 1200px;
-
-    --layout-three-panel-small-max-width: 100%;
-    --layout-three-panel-medium-max-width: 100%;
-    --layout-three-panel-large-max-width: 1800px;
-
-    --layout-middle-panel-small-max-width: none;
-    --layout-middle-panel-medium-max-width: none;
-    --layout-middle-panel-large-max-width: none;
-
-    /*
-    * Schema
-    */
-    --schema-lines-color: var(--global-border-color);
-    --schema-default-details-width: 70%;
-    --schema-type-name-color: var(--color-content-secondary);
-    --schema-type-title-color: var(--color-content-secondary);
-    --schema-require-label-color: var(--color-error-900);
-    --schema-labels-text-size: 0.9em;
-    --schema-nesting-spacing: 1em;
-    --schema-nested-background-color: var(--color-secondary-200);
-    --schema-chevron-color: var(--color-content);
-    --schema-chevron-size: 9px;
-
-    --schema-controls-color: var(--color-emphasis-800);
-    --schema-controls-background-color: var(--color-secondary-400);
-    --schema-controls-hover-background-color: var(--color-secondary-500);
-    --schema-controls-border-color: var(--color-secondary-600);
-
-    --field-name-font-size: var(--code-font-size);
-    --field-name-font-family: var(--code-font-family);
-    --field-example-color: var(--color-content);
-    --field-example-background-color: var(--inline-code-background-color);
-    --field-constraint-color: var(--color-content);
-    --field-constraint-background-color: var(--inline-code-background-color);
-
-    /*
-    * Search
-    */
-    --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);
-
-    /*
-    * Other
-    */
-    --badge-color: var(--color-emphasis-100);
-    --badge-background-color: var(--color-primary-500);
-    --deprecated-badge-color: var(--color-emphasis-100);
-    --deprecated-badge-background-color: var(--color-warning-500);
-
-    --recursive-label-color: var(--color-warning-500);
-
-    --http-badge-font-size: 12px;
-    --http-badge-line-height: 20px;
-    --http-badge-font-family: var(--code-font-family);
-    --http-badge-font-weight: var(--font-weight-bold);
-    --http-badge-border-radius: 16px;
-    --http-badge-color: var(--color-content-inverse);
-
-    --http-badge-menu-font-size: 8px;
-    --http-badge-menu-line-height: 14px;
-
-    --spinner-color: var(--color-primary-500);
-
-    --linear-progress-color: var(--color-accent-500);
-    --linear-progress-background-color: var(--color-accent-100);
-
-    /* Floating action button */
-    --fab-color: #0065fb;
-    --fab-background-color: #f2f2f2;
-
-    //* PORTAL settings *//
-    /**
-     * Headings
-     * */
-    --h2-font-weight: var(--font-weight-bold);
-
-    --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;
-
-    /**
-     * Footer
-     * */
-    --footer-background-color: var(--color-primary-500);
-    --footer-text-color: #fff;
-
-    /**
-     * Sidebar
-     * */
-    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);
-    --sidebar-padding-vertical: var(--sidebar-spacing-unit);
-
-    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);
-    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);
-
-    --sidebar-border-radius: 4px;
-    --sidebar-font-size: var(--font-size-base);
-    --sidebar-font-family: var(--font-family-base);
-
-    /**
-     * Logo
-     * */
-    --logo-height: 2rem;
-    --logo-margin: var(--sidebar-margin-left);
-
-    /**
-     * Navbar
-     * */
-    --navbar-height: 60px;
-    --navbar-text-color: #fff;
-    --navbar-background-color: var(--color-primary-500);
-
-    /**
-     * Navbar Item
-     * */
-    --navbar-item-font-size: 16px;
-    --navbar-item-margin-horizontal: 0;
-    --navbar-item-margin-vertical: 0;
-    --navbar-item-border-radius: 10px;
-    --navbar-item-font-weight: var(--font-weight-bold);
-    --navbar-item-active-background-color: #1b75fa;
-    --navbar-item-active-text-color: var(--navbar-text-color);
-    --navbar-item-active-text-decoration: none;
-
-    /**
-     * TOC
-     * */
-    --toc-width: 240px;
-
-    /**
-     * Markdown
-     * */
-    --content-wrapper-max-width: 910px;
-    --content-wrapper-padding-vertical: 25px;
-    --content-wrapper-padding-horizontal: 0px;
-
-    /**
-     * Bloquote
-     * */
-    --bloquote-margin-vertical: 1.5em;
-    --bloquote-margin-horizontal: 0;
-    --bloquote-padding-vertical: 0;
-    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);
-    --bloquote-background-color: transparent;
-
-    /**
-     * Admonition
-     * */
-    --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;
-    --admonition-border-radius: 8px;
-    --admonition-font-size: 16px;
-    --admonition-font-weight: normal;
-    --admonition-line-height: 1.5em;
-    --admonition-heading-font-size: 16px;
-    --admonition-heading-font-weight: var(--font-weight-bold);
-    --admonition-heading-letter-spacing: 0.3px;
-    --admonition-heading-transform: uppercase;
-
-    /**
+  --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);
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --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-chevron-size: var(--sidebar-spacing-unit);
+
+  /**
+    * @tokens Sidebar border
+    */
+  --sidebar-border-radius: 4px; // @presenter BorderRadius
+
+  /* === 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-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);
+
+  /**
+    * @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);
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 4px; // @presenter BorderRadius
+
+  // @tokens End
+`;
+
+const admonition = css`
+  /**
     * @tokens Admonition colors
     * @presenter Color
     */
 
-    /* info */
-    --admonition-info-background-color: #ebedf0;
-    --admonition-info-text-color: var(--color-content);
-    --admonition-info-icon-color: #4782cb;
-
-    /* attention */
-    --admonition-attention-background-color: #e6eef8;
-    --admonition-attention-text-color: var(--color-content);
-    --admonition-attention-icon-color: #4782cb;
-
-    /* warning */
-    --admonition-warning-background-color: #feeda5;
-    --admonition-warning-text-color: var(--color-content);
-    --admonition-warning-icon-color: #d4ad03;
-
-    /* danger */
-    --admonition-danger-background-color: #fceaea;
-    --admonition-danger-text-color: var(--color-content);
-    --admonition-danger-icon-color: #e53935;
-
-    /* success */
-    --admonition-success-background-color: #ddffe1;
-    --admonition-success-text-color: var(--color-content);
-    --admonition-success-icon-color: #00aa13;
-
-    /*
-    * Portal Search
-    */
-    --input-background-color: rgba(255, 255, 255, 0.1);
-    --input-text-color: #fff;
-    --input-border-radius: 4px;
-    --input-font-size: 16px;
-    --input-font-family: var(--font-family-primary);
-    --input-line-height: 1.15em;
-    --popover-backgrond-color: #fff;
-    --popover-border-radius: 4px;
-    --search-item-text-color: var(--color-content-secondary);
-    --search-item-title-text-color: var(--color-content);
-    --search-item-active-background-color: rgba(0, 68, 212, 0.1);
-
-    // @tokens Other
+  /* info */
+  --admonition-info-background-color: #ebedf0;
+  --admonition-info-text-color: var(--color-content);
+  --admonition-info-icon-color: #4782cb;
+
+  /* attention */
+  --admonition-attention-background-color: #e6eef8;
+  --admonition-attention-text-color: var(--color-content);
+  --admonition-attention-icon-color: #4782cb;
+
+  /* warning */
+  --admonition-warning-background-color: #feeda5;
+  --admonition-warning-text-color: var(--color-content);
+  --admonition-warning-icon-color: #d4ad03;
+
+  /* danger */
+  --admonition-danger-background-color: #fceaea;
+  --admonition-danger-text-color: var(--color-content);
+  --admonition-danger-icon-color: #e53935;
+
+  /* success */
+  --admonition-success-background-color: #ddffe1;
+  --admonition-success-text-color: var(--color-content);
+  --admonition-success-icon-color: #00aa13;
+
+  /**
+    * @tokens Admonition typography
+    */
+  --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
+  --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: 8px; // @presenter BorderRadius
+
+  // @tokens End
+`;
+
+const panels = css`
+  /**
+    * @tokens Panel border
+    */
+  --panels-border-radius: 8px; // @presenter BorderRadius
+
+  /**
+    * @tokens Samples panel
+    * @presenter Color
+    */
+  --samples-panel-gap: 20px;
+  --samples-panel-width: 50%;
+
+  --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;
+
+  --samples-panel-markdown-background-color: #3c4c5a;
+  --samples-panel-markdown-border-color: #46596a;
+
+  /**
+    * @tokens Try It panel
+    * @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;
+
+  /**
+    * @tokens Request and Response panel
+    * @presenter Color
+    */
+  --request-and-response-panel-background-color: #fff;
+
+  // @tokens End
+`;
+
+const tooltip = css`
+  /**
+    * @tokens Tooltip Base
+    * @presenter Color
+    */
+  --tooltip-color: var(--color-secondary-300);
+  --tooltip-background-color: #52606d;
+
+  /**
+    * @tokens Tooltip Copy Button
+    * @presenter Color
+    */
+  .tooltip-copy-button {
+    --tooltip-color: #000;
+    --tooltip-background-color: #fff;
+  }
+
+  // @tokens End
+`;
+
+const code = css`
+  /**
+    * @tokens Code base styles
+    */
+  --code-font-size: 13px; // @presenter FontSize
+  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --code-font-weight: 400; // @presenter FontWeight
+  --code-wrap: pre;
+
+  /**
+    * @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
+
+  /**
+    * @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-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
+
+  --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-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-operator-color: #f5b83d; // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+
+  --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+
+  --code-block-tokens-regex-color: #e90; // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+
+  --code-block-tokens-deleted-color: red; // @presenter Color
+
+  // @tokens End
+`;
+
+const links = css`
+  /**
+    * @tokens Links
+    */
+  --link-color: var(--color-primary-500); // @presenter Color
+  --link-decoration: none;
+  --link-hover-color: var(--color-primary-100); // @presenter Color
+  --link-hover-decoration: underline;
+
+  // @tokens End
+`;
+
+const openapiAndGraphqlDocs = css`
+  /* === ref docs and graphql docs specific === */
+
+  /**
+    * @tokens OpenAPI-GraphQL Logo
+    */
+  --logo-max-height: 285px;
+  --logo-max-width: 285px;
+  --logo-padding: 2px;
+
+  /**
+    * @tokens OpenAPI-GraphQL Layout
+    */
+  --layout-buttons-top-offset: 20px; // @presenter Spacing
+  --layout-buttons-height: 36px; // @presenter Spacing
+  --layout-buttons-width: 36px; // @presenter Spacing
+
+  --layout-stacked-small-max-width: 90%;
+  --layout-stacked-medium-max-width: 75%;
+  --layout-stacked-large-max-width: 1200px;
+
+  --layout-three-panel-small-max-width: 100%;
+  --layout-three-panel-medium-max-width: 100%;
+  --layout-three-panel-large-max-width: 1800px;
+
+  --layout-middle-panel-small-max-width: none;
+  --layout-middle-panel-medium-max-width: none;
+  --layout-middle-panel-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
+
+  --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
+
+  --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 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 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
+
+  --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
+
+  --http-badge-menu-font-size: 8px; // @presenter FontSize
+  --http-badge-menu-line-height: 14px; // @presenter FontSize
+
+  /**
+    * @tokens OpenAPI-GraphQL Other
+    */
+  --recursive-label-color: var(--color-warning-500); // @presenter Color
+  --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
+
+  // @tokens End
+`;
+
+const footer = css`
+  /**
+    * @tokens Footer
+    */
+  --footer-background-color: var(--color-primary-500); // @presenter Color
+  --footer-text-color: #fff; // @presenter Color
+
+  // @tokens End
+`;
+
+const logo = css`
+  /**
+    * @tokens Logo
+    */
+  --logo-height: 2rem; // @presenter Spacing
+  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing
+
+  // @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
+
+  /**
+    * @tokens Navbar Item
+    * */
+  --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-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --navbar-item-active-background-color: #1b75fa; // @presenter Color
+  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color
+  --navbar-item-active-text-decoration: none;
+
+  // @tokens End
+`;
+
+const toc = css`
+  /**
+    * @tokens TOC
+    * */
+  --toc-width: 240px;
+
+  // @tokens End
+`;
+
+const markdown = css`
+  /**
+    * @tokens Markdown
+    * */
+  --content-wrapper-max-width: 910px;
+  --content-wrapper-padding-vertical: 25px; // @presenter Spacing
+  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing
+
+  // @tokens End
+`;
+
+const blockquote = 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 End
+`;
+
+const portalSearch = css`
+  /**
+    * @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-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-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-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color
+
+  // @tokens End
+`;
+
+export const styles = css`
+  :root {
+    ${baseColors}
+    ${httpColors}
+    ${responseColors}
+    ${typography}
+    ${headingsTypography}
+    ${borders}
+    ${admonition}
+    ${buttons}
+    ${sidebar}
+    ${panels}
+    ${navbar}
+    ${footer}
+    ${logo}
+    ${toc}
+    ${tooltip}
+    ${code}
+    ${links}
+    ${markdown}
+    ${blockquote}
+    ${portalSearch}
+
+    ${openapiAndGraphqlDocs}
   }
 `;