@redocly/theme 0.1.10 → 0.1.11

package/Navbar/NavbarMenu.js

@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var NavbarItem_1 = require("../Navbar/NavbarItem");
 function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
-    if (!menuItems || !menuItems.length) {
+    if (!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(NavItemsContainer, __assign({ "data-component-name": "Navbar/NavbarMenu" }, { children: menuItems.map(function (navItem, index) {

package/Search/ClearIcon.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClearIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "Search/ClearIcon" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 298.7 298.7" }, props, { children: (0, jsx_runtime_1.jsx)("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " }) })) }))); };
+var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 298.7 298.7", "data-component-name": "Search/ClearIcon" }, props, { children: (0, jsx_runtime_1.jsx)("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " }) }))); };
 exports.ClearIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;

package/Search/SearchIcon.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "Search/SearchIcon" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" }) })) }))); };
+var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490", "data-component-name": "Search/SearchIcon" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" }) }))); };
 exports.SearchIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;

package/TableOfContent/TableOfContent.js

@@ -25,12 +25,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var useFullHeight_1 = require("../hooks/useFullHeight");
 var useActiveHeading_1 = require("../hooks/useActiveHeading");
 function TableOfContent(props) {
-    var _a;
-    var headings = props.headings, tocMaxDepth = props.tocMaxDepth;
+    var headings = props.headings, tocMaxDepth = props.tocMaxDepth, contentWrapper = props.contentWrapper;
     var sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
-    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(props.contentWrapper);
-    if (headings && headings.length === 1 && ((_a = headings[0]) === null || _a === void 0 ? void 0 : _a.depth) === 1) {
+    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper);
+    if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
         return null;
     }
     if (!(headings === null || headings === void 0 ? void 0 : headings.length)) {
@@ -48,12 +47,12 @@ function TableOfContent(props) {
                             return null;
                         }
                         var href = '#' + heading.id;
-                        return ((0, jsx_runtime_1.jsx)(MenuItem, { depth: heading.depth || 0, href: href, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }, href));
+                        return ((0, jsx_runtime_1.jsx)(MenuItem, { href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }, href));
                     })] })) }))) }));
 }
 exports.TableOfContent = TableOfContent;
 var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.8em;\n  padding: 10px 15px;\n  font-weight: bold;\n  text-transform: uppercase;\n"], ["\n  font-size: 0.8em;\n  padding: 10px 15px;\n  font-weight: bold;\n  text-transform: uppercase;\n"])));
-var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
+var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
     var depth = _a.depth;
     return (depth - 1) * 15;
 });

package/globalStyle.d.ts

@@ -1 +1,2 @@
+export declare const styles: import("styled-components").FlattenSimpleInterpolation;
 export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/globalStyle.js

@@ -4,7 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalStyle = void 0;
+exports.GlobalStyle = exports.styles = void 0;
 var styled_components_1 = require("styled-components");
-exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n  :root {\n    /* === Palette === */\n\n    /*\n    * Color palette\n    */\n    --color-primary-100: #62a1ff;\n    --color-primary-200: #4892ff;\n    --color-primary-300: #2f83ff;\n    --color-primary-400: #1573ff;\n    --color-primary-500: #0065fb;\n    --color-primary-600: #005be2;\n    --color-primary-700: #0050c8;\n    --color-primary-800: #0046af;\n    --color-primary-900: #003c95;\n\n    --color-secondary-100: #ffffff;\n    --color-secondary-200: #f5f7fa;\n    --color-secondary-300: #f3f4f6;\n    --color-secondary-400: #e4e7eb;\n    --color-secondary-500: #d5dae0;\n    --color-secondary-600: #c7cdd5;\n    --color-secondary-700: #b8c0ca;\n    --color-secondary-800: #a9b3c0;\n    --color-secondary-900: #9ba6b5;\n\n    --color-emphasis-100: #ffffff;\n    --color-emphasis-200: #e9eaec;\n    --color-emphasis-300: #cdd0d5;\n    --color-emphasis-400: #b2b6bd;\n    --color-emphasis-500: #969ca6;\n    --color-emphasis-600: #7a828f;\n    --color-emphasis-700: #626974;\n    --color-emphasis-800: #4b5058;\n    --color-emphasis-900: #1c1e21;\n\n    --color-accent-100: #b3dcf3;\n    --color-accent-200: #a6dfff;\n    --color-accent-300: #8cd5ff;\n    --color-accent-400: #73ccff;\n    --color-accent-500: #59c3ff;\n    --color-accent-600: #40baff;\n    --color-accent-700: #26b1ff;\n    --color-accent-800: #0da7ff;\n    --color-accent-900: #009bf2;\n\n    --color-success-100: #98eda0;\n    --color-success-200: #82e98c;\n    --color-success-300: #6ce678;\n    --color-success-400: #57e264;\n    --color-success-500: #41de50;\n    --color-success-600: #2bda3c;\n    --color-success-700: #23c933;\n    --color-success-800: #1fb32d;\n    --color-success-900: #1b9e28;\n\n    --color-warning-100: #ffc966;\n    --color-warning-200: #ffc04d;\n    --color-warning-300: #ffb733;\n    --color-warning-400: #ffae1a;\n    --color-warning-500: #ffa500;\n    --color-warning-600: #e69400;\n    --color-warning-700: #cc8400;\n    --color-warning-800: #b37300;\n    --color-warning-900: #996300;\n\n    --color-error-100: #ffc7c7;\n    --color-error-200: #ffaeae;\n    --color-error-300: #ff9494;\n    --color-error-400: #ff7b7b;\n    --color-error-500: #ff6161;\n    --color-error-600: #ff4747;\n    --color-error-700: #ff2e2e;\n    --color-error-800: #ff1414;\n    --color-error-900: #ff0000;\n\n    /* === Typography === */\n\n    --color-content: #1f2933;\n    --color-content-inverse: var(--color-secondary-200);\n    --color-content-secondary: #7b8794;\n\n    --font-size-base: 14px;\n    --line-height-base: 1.5em;\n    --font-weight-regular: 400;\n    --font-weight-bold: 600;\n    --font-weight-bolder: 700;\n    --font-family-base: Source Sans Pro, sans-serif;\n    --font-family-monospaced: Source Code Pro, monospace;\n\n    --smoothing: antialiased; // text-smoothing\n    --text-rendering: optimizeSpeed; // text-rendering\n\n    /*\n    * Spacing\n    */\n    --spacing-unit: 5px;\n    --spacing-horizontal: calc(var(--spacing-unit) * 8);\n    --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n    /*\n    * Global\n    */\n    --global-border-radius: 4px;\n    --global-border-width: 1px;\n    --global-border-color: var(--color-secondary-400);\n    --global-border-color-secondary: #616e7c;\n    --global-background-color: transparent;\n\n    /* === Page layout === */\n    //TBD\n    /* === Navbar === */\n    //--navbar-height:\n    //TBD\n\n    /* === Menu (sidebar) === */\n\n    --sidebar-width: 285px;\n    --sidebar-background-color: #fff;\n    --sidebar-right-line-color: var(--global-border-color);\n    --sidebar-spacing-unit: 8px;\n    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n    --sidebar-word-break: 'inherit';\n    --sidebar-separator-label-color: var(--sidebar-item-color);\n    --sidebar-separator-line-color: #dadada;\n    --sidebar-chevron-color: var(--sidebar-item-color);\n    --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-border-radius: 4px;\n    --sidebar-item-font-family: var(--font-family-base);\n    --sidebar-item-font-size: var(--font-size-base);\n    --sidebar-item-color: var(--color-content);\n    --sidebar-item-active-color: var(--color-content);\n    --sidebar-item-background-color: #fff;\n    --sidebar-item-active-background-color: var(--global-border-color);\n\n    //TBD\n    /* === Footer === */\n    //TBD\n    /* === Table of contents === */\n    //TBD\n    /* === Various components: buttons, inputs, alerts, tooltip === */\n\n    /*\n    * Buttons\n    */\n    --button-color: white;\n    --button-background-color: var(--color-emphasis-500);\n    --button-hover-background-color: var(--color-emphasis-600);\n    --button-active-background-color: var(--color-emphasis-700);\n    --button-outlined-active-border-color: var(--color-emphasis-800);\n    --button-border-radius: var(--global-border-radius);\n    --button-font-family: inherit;\n    --button-font-weight: var(--font-weight-bold);\n    --button-box-shadow: none;\n    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n    .button-color-primary {\n      --button-color: white;\n      --button-background-color: var(--color-primary-500);\n      --button-hover-background-color: var(--color-primary-600);\n      --button-active-background-color: var(--color-primary-700);\n      --button-outlined-active-border-color: var(--color-primary-800);\n    }\n\n    .button-color-secondary {\n      --button-color: var(--color-emphasis-800);\n      --button-background-color: var(--color-secondary-400);\n      --button-hover-background-color: var(--color-secondary-500);\n      --button-active-background-color: var(--color-secondary-600);\n      --button-outlined-active-border-color: var(--color-secondary-700);\n    }\n\n    --button-small-font-size: 12px;\n    --button-small-padding: 8px 10px;\n    --button-small-min-width: 90px;\n    --button-medium-font-size: 14px;\n    --button-medium-padding: 8px 20px;\n    --button-medium-min-width: 120px;\n    --button-large-font-size: 14px;\n    --button-large-padding: 12px 24px;\n    --button-large-min-width: 150px;\n    --button-xlarge-font-size: 16px;\n    --button-xlarge-padding: 20px 24px;\n    --button-xlarge-min-width: 200px;\n\n    /*\n    * Tooltip\n    */\n    --tooltip-color: var(--color-secondary-300);\n    --tooltip-background-color: #52606d;\n\n    .tooltip-copy-button {\n      --tooltip-color: #000;\n      --tooltip-background-color: #fff;\n    }\n\n    /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n    /*\n    * Headings\n    * --h-{css-property-name} is fallback for h1...h6\n    */\n    --h-font-family: Source Sans Pro, sans-serif;\n    --h-font-weight: var(--font-weight-bolder);\n    --h-color: var(--color-content);\n\n    --h1-font-size: 36px;\n    --h2-font-size: 28px;\n    --h3-font-size: 18px;\n    --h4-font-size: 16px;\n    --h5-font-size: 14px;\n    --h6-font-size: 12px;\n\n    --h1-line-height: 36px;\n    --h2-line-height: 28px;\n    --h3-line-height: 18px;\n    --h4-line-height: 16px;\n    --h5-line-height: 14px;\n    --h6-line-height: 12px;\n\n    --code-font-size: 13px;\n    --code-font-family: var(--font-family-monospaced);\n    --code-font-weight: 400;\n    --code-wrap: pre;\n\n    --inline-code-font-size: var(--code-font-size);\n    --inline-code-font-family: var(--code-font-family);\n    --inline-code-color: #e53935;\n    --inline-code-background-color: var(--color-secondary-200);\n    --inline-code-border-color: var(--global-border-color);\n    --inline-code-border-radius: var(--global-border-radius);\n\n    --code-block-font-size: var(--code-font-size);\n    --code-block-font-family: var(--code-font-family);\n    --code-block-color: #f1928f;\n    --code-block-background-color: rgba(217, 205, 199, 0.05);\n    --code-block-border-color: var(--global-border-color);\n    --code-block-border-radius: 8px;\n    --code-block-max-height: 600px;\n    --code-block-word-break: initial;\n    --code-block-preformatted-background-color: #323f4b;\n\n    /*\n    * Links\n    */\n    --link-color: var(--color-primary-500);\n    --link-decoration: none;\n    --link-hover-color: var(--color-primary-100);\n    --link-hover-decoration: underline;\n\n    /* === ref docs and graphql docs specific === */\n    /*\n    * Logo\n    */\n    --logo-max-height: 285px;\n    --logo-max-width: 285px;\n    --logo-padding: 2px;\n\n    /*\n    * Http colors\n    */\n    --color-http-get: #3a9601;\n    --color-http-post: #0065fb;\n    --color-http-put: #93527b;\n    --color-http-options: #947014;\n    --color-http-patch: #bf581d;\n    --color-http-delete: #c83637;\n    --color-http-basic: #707070;\n    --color-http-link: #07818f;\n    --color-http-head: #a23dad;\n    --color-http-hook: var(--color-http-post);\n\n    /*\n    * Response colors\n    */\n    --response-success-border-color: #b1e996;\n    --response-success-background-color: #f6fff4;\n    --response-success-text-color: var(--response-success-border-color);\n\n    --response-error-border-color: #ffc9c9;\n    --response-error-background-color: #fff4f4;\n    --response-error-text-color: var(--response-error-border-color);\n\n    --response-redirect-border-color: var(--color-warning-500);\n    --response-redirect-background-color: #ffa5001a;\n    --response-redirect-text-color: var(--response-redirect-border-color);\n\n    --response-info-border-color: #87ceeb;\n    --response-info-background-color: #87ceeb1a;\n    --response-info-text-color: var(--response-info-border-color);\n\n    /*\n    * Panels\n    */\n    --panels-border-radius: 8px;\n    --panels-background-color: #fff;\n\n    --samples-panel-gap: 20px;\n    --samples-panel-width: 50%;\n    --samples-panel-block-background-color: #fff;\n    --samples-panel-background-color: #52606d;\n    --samples-panel-callback-background-color: var(--color-secondary-300);\n    --samples-panel-controls-background-color: #323f4b;\n    --samples-panel-controls-hover-background-color: #3c4c5a;\n    --samples-panel-controls-active-border-color: var(--color-accent-500);\n    --samples-panel-text-color: #fff;\n    --samples-panel-heading-color: #fff;\n\n    --samples-panel-markdown-background-color: #3c4c5a;\n    --samples-panel-markdown-border-color: #46596a;\n\n    --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n    --try-it-panel-active-tab-background-color: #47535e;\n    --try-it-panel-active-tab-border-color: var(--color-accent-500);\n    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n    --try-it-panel-action-button-width: auto;\n\n    --request-and-response-panel-background-color: #fff;\n\n    /*\n    * Layout\n    */\n    --layout-buttons-top-offset: 20px;\n    --layout-buttons-height: 36px;\n    --layout-buttons-width: 36px;\n\n    --layout-stacked-small-max-width: 90%;\n    --layout-stacked-medium-max-width: 75%;\n    --layout-stacked-large-max-width: 1200px;\n\n    --layout-three-panel-small-max-width: 100%;\n    --layout-three-panel-medium-max-width: 100%;\n    --layout-three-panel-large-max-width: 1800px;\n\n    --layout-middle-panel-small-max-width: none;\n    --layout-middle-panel-medium-max-width: none;\n    --layout-middle-panel-large-max-width: none;\n\n    /*\n    * Schema\n    */\n    --schema-lines-color: var(--global-border-color);\n    --schema-default-details-width: 70%;\n    --schema-type-name-color: var(--color-content-secondary);\n    --schema-type-title-color: var(--color-content-secondary);\n    --schema-require-label-color: var(--color-error-900);\n    --schema-labels-text-size: 0.9em;\n    --schema-nesting-spacing: 1em;\n    --schema-nested-background-color: var(--color-secondary-200);\n    --schema-chevron-color: var(--color-content);\n    --schema-chevron-size: 9px;\n\n    --schema-controls-color: var(--color-emphasis-800);\n    --schema-controls-background-color: var(--color-secondary-400);\n    --schema-controls-hover-background-color: var(--color-secondary-500);\n    --schema-controls-border-color: var(--color-secondary-600);\n\n    --field-name-font-size: var(--code-font-size);\n    --field-name-font-family: var(--code-font-family);\n    --field-example-color: var(--color-content);\n    --field-example-background-color: var(--inline-code-background-color);\n    --field-constraint-color: var(--color-content);\n    --field-constraint-background-color: var(--inline-code-background-color);\n\n    /*\n    * Search\n    */\n    --search-input-border-bottom: #e6e6e6;\n    --search-results-background-color: #f2f2f2;\n    --search-results-active-item-background-color: #e6e6e6;\n    --search-marked-background-color: #ffff03;\n    --search-popup-header-background-color: var(--color-secondary-200);\n    --search-clear-button-background-color: var(--color-secondary-400);\n    --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n    /*\n    * Other\n    */\n    --badge-color: var(--color-emphasis-100);\n    --badge-background-color: var(--color-primary-500);\n    --deprecated-badge-color: var(--color-emphasis-100);\n    --deprecated-badge-background-color: var(--color-warning-500);\n\n    --recursive-label-color: var(--color-warning-500);\n\n    --http-badge-font-size: 12px;\n    --http-badge-line-height: 20px;\n    --http-badge-font-family: var(--code-font-family);\n    --http-badge-font-weight: var(--font-weight-bold);\n    --http-badge-border-radius: 16px;\n    --http-badge-color: var(--color-content-inverse);\n\n    --http-badge-menu-font-size: 8px;\n    --http-badge-menu-line-height: 14px;\n\n    --spinner-color: var(--color-primary-500);\n\n    --linear-progress-color: var(--color-accent-500);\n    --linear-progress-background-color: var(--color-accent-100);\n\n    /* Floating action button */\n    --fab-color: #0065FB;\n    --fab-background-color: #f2f2f2;\n    \n    //* PORTAL settings *//\n    /**\n     * Headings\n     * */\n    --h2-font-weight: var(--font-weight-bold);\n\n    --h1-margin-top: 1.35em;\n    --h1-margin-bottom: 0.9em;\n    --h2-margin-top: 1.25em;\n    --h2-margin-bottom: 0.8em;\n    --h3-margin-top: 1.25em;\n    --h3-margin-bottom: 0.8em;\n    \n    /**\n     * Footer\n     * */\n    --footer-background-color: var(--color-primary-500);\n    --footer-text-color: #fff;\n\n    /**\n     * Sidebar\n     * */\n    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n\n    --sidebar-border-radius: 4px;\n    --sidebar-font-size: var(--font-size-base);\n    --sidebar-font-family: var(--font-family-base);\n\n    /**\n     * Logo\n     * */\n    --logo-height: 2rem;\n    --logo-margin: var(--sidebar-margin-left);\n\n    /**\n     * Navbar\n     * */\n    --navbar-height: 60px;\n    --navbar-text-color: #fff;\n    --navbar-background-color: var(--color-primary-500);\n\n    /**\n     * Navbar Item\n     * */\n    --navbar-item-font-size: 16px;\n    --navbar-item-margin-horizontal: 0;\n    --navbar-item-margin-vertical: 0;\n    --navbar-item-border-radius: 10px;\n    --navbar-item-font-weight: var(--font-weight-bold);\n    --navbar-item-active-background-color: #1b75fa;\n    --navbar-item-active-text-color: var(--navbar-text-color);\n    --navbar-item-active-text-decoration: none;\n\n    /**\n     * TOC\n     * */\n    --toc-width: 240px;\n\n    /**\n     * Markdown\n     * */\n    --content-wrapper-max-width: 910px;\n    --content-wrapper-padding-vertical: 25px;\n    --content-wrapper-padding-horizontal: 0px;\n\n    /**\n     * Bloquote\n     * */\n    --bloquote-margin-vertical: 1.5em;\n    --bloquote-margin-horizontal: 0;\n    --bloquote-padding-vertical: 0;\n    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --bloquote-background-color: transparent;\n\n    /**\n     * Admonition\n     * */\n    --admonition-margin-horizontal: 0;\n    --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n    --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n    --admonition-icon-size: 25px;\n    --admonition-border-radius: 8px;\n    --admonition-font-size: 16px;\n    --admonition-font-weight: normal;\n    --admonition-line-height: 1.5em;\n    --admonition-heading-font-size: 16px;\n    --admonition-heading-font-weight: var(--font-weight-bold);\n    --admonition-heading-letter-spacing: 0.3px;\n    --admonition-heading-transform: uppercase;\n\n    /* info */\n    --admonition-info-background-color: #ebedf0;\n    --admonition-info-text-color: var(--color-content);\n    --admonition-info-icon-color: #4782cb;\n\n    /* attention */\n    --admonition-attention-background-color: #e6eef8;\n    --admonition-attention-text-color: var(--color-content);\n    --admonition-attention-icon-color: #4782cb;\n\n    /* warning */\n    --admonition-warning-background-color: #feeda5;\n    --admonition-warning-text-color: var(--color-content);\n    --admonition-warning-icon-color: #d4ad03;\n\n    /* danger */\n    --admonition-danger-background-color: #fceaea;\n    --admonition-danger-text-color: var(--color-content);\n    --admonition-danger-icon-color: #e53935;\n\n    /* success */\n    --admonition-success-background-color: #ddffe1;\n    --admonition-success-text-color: var(--color-content);\n    --admonition-success-icon-color: #00aa13;\n  }\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n  :root {\n    /* === Palette === */\n\n    /*\n    * Color palette\n    */\n    --color-primary-100: #62a1ff;\n    --color-primary-200: #4892ff;\n    --color-primary-300: #2f83ff;\n    --color-primary-400: #1573ff;\n    --color-primary-500: #0065fb;\n    --color-primary-600: #005be2;\n    --color-primary-700: #0050c8;\n    --color-primary-800: #0046af;\n    --color-primary-900: #003c95;\n\n    --color-secondary-100: #ffffff;\n    --color-secondary-200: #f5f7fa;\n    --color-secondary-300: #f3f4f6;\n    --color-secondary-400: #e4e7eb;\n    --color-secondary-500: #d5dae0;\n    --color-secondary-600: #c7cdd5;\n    --color-secondary-700: #b8c0ca;\n    --color-secondary-800: #a9b3c0;\n    --color-secondary-900: #9ba6b5;\n\n    --color-emphasis-100: #ffffff;\n    --color-emphasis-200: #e9eaec;\n    --color-emphasis-300: #cdd0d5;\n    --color-emphasis-400: #b2b6bd;\n    --color-emphasis-500: #969ca6;\n    --color-emphasis-600: #7a828f;\n    --color-emphasis-700: #626974;\n    --color-emphasis-800: #4b5058;\n    --color-emphasis-900: #1c1e21;\n\n    --color-accent-100: #b3dcf3;\n    --color-accent-200: #a6dfff;\n    --color-accent-300: #8cd5ff;\n    --color-accent-400: #73ccff;\n    --color-accent-500: #59c3ff;\n    --color-accent-600: #40baff;\n    --color-accent-700: #26b1ff;\n    --color-accent-800: #0da7ff;\n    --color-accent-900: #009bf2;\n\n    --color-success-100: #98eda0;\n    --color-success-200: #82e98c;\n    --color-success-300: #6ce678;\n    --color-success-400: #57e264;\n    --color-success-500: #41de50;\n    --color-success-600: #2bda3c;\n    --color-success-700: #23c933;\n    --color-success-800: #1fb32d;\n    --color-success-900: #1b9e28;\n\n    --color-warning-100: #ffc966;\n    --color-warning-200: #ffc04d;\n    --color-warning-300: #ffb733;\n    --color-warning-400: #ffae1a;\n    --color-warning-500: #ffa500;\n    --color-warning-600: #e69400;\n    --color-warning-700: #cc8400;\n    --color-warning-800: #b37300;\n    --color-warning-900: #996300;\n\n    --color-error-100: #ffc7c7;\n    --color-error-200: #ffaeae;\n    --color-error-300: #ff9494;\n    --color-error-400: #ff7b7b;\n    --color-error-500: #ff6161;\n    --color-error-600: #ff4747;\n    --color-error-700: #ff2e2e;\n    --color-error-800: #ff1414;\n    --color-error-900: #ff0000;\n\n    /* === Typography === */\n\n    --color-content: #1f2933;\n    --color-content-inverse: var(--color-secondary-200);\n    --color-content-secondary: #7b8794;\n\n    --font-size-base: 14px;\n    --line-height-base: 1.5em;\n    --font-weight-regular: 400;\n    --font-weight-bold: 600;\n    --font-weight-bolder: 700;\n    --font-family-base: Source Sans Pro, sans-serif;\n    --font-family-monospaced: Source Code Pro, monospace;\n\n    --smoothing: antialiased; // text-smoothing\n    --text-rendering: optimizeSpeed; // text-rendering\n\n    /*\n    * Spacing\n    */\n    --spacing-unit: 5px;\n    --spacing-horizontal: calc(var(--spacing-unit) * 8);\n    --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n    /*\n    * Global\n    */\n    --global-border-radius: 4px;\n    --global-border-width: 1px;\n    --global-border-color: var(--color-secondary-400);\n    --global-border-color-secondary: #616e7c;\n    --global-background-color: transparent;\n\n    /* === Page layout === */\n    //TBD\n    /* === Navbar === */\n    //--navbar-height:\n    //TBD\n\n    /* === Menu (sidebar) === */\n\n    --sidebar-width: 285px;\n    --sidebar-background-color: #fff;\n    --sidebar-right-line-color: var(--global-border-color);\n    --sidebar-spacing-unit: 8px;\n    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n    --sidebar-word-break: 'inherit';\n    --sidebar-separator-label-color: var(--sidebar-item-color);\n    --sidebar-separator-line-color: #dadada;\n    --sidebar-chevron-color: var(--sidebar-item-color);\n    --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-border-radius: 4px;\n    --sidebar-item-font-family: var(--font-family-base);\n    --sidebar-item-font-size: var(--font-size-base);\n    --sidebar-item-color: var(--color-content);\n    --sidebar-item-active-color: var(--color-content);\n    --sidebar-item-background-color: #fff;\n    --sidebar-item-active-background-color: var(--global-border-color);\n\n    //TBD\n    /* === Footer === */\n    //TBD\n    /* === Table of contents === */\n    //TBD\n    /* === Various components: buttons, inputs, alerts, tooltip === */\n\n    /*\n    * Buttons\n    */\n    --button-color: white;\n    --button-background-color: var(--color-emphasis-500);\n    --button-hover-background-color: var(--color-emphasis-600);\n    --button-active-background-color: var(--color-emphasis-700);\n    --button-outlined-active-border-color: var(--color-emphasis-800);\n    --button-border-radius: var(--global-border-radius);\n    --button-font-family: inherit;\n    --button-font-weight: var(--font-weight-bold);\n    --button-box-shadow: none;\n    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n    .button-color-primary {\n      --button-color: white;\n      --button-background-color: var(--color-primary-500);\n      --button-hover-background-color: var(--color-primary-600);\n      --button-active-background-color: var(--color-primary-700);\n      --button-outlined-active-border-color: var(--color-primary-800);\n    }\n\n    .button-color-secondary {\n      --button-color: var(--color-emphasis-800);\n      --button-background-color: var(--color-secondary-400);\n      --button-hover-background-color: var(--color-secondary-500);\n      --button-active-background-color: var(--color-secondary-600);\n      --button-outlined-active-border-color: var(--color-secondary-700);\n    }\n\n    --button-small-font-size: 12px;\n    --button-small-padding: 8px 10px;\n    --button-small-min-width: 90px;\n    --button-medium-font-size: 14px;\n    --button-medium-padding: 8px 20px;\n    --button-medium-min-width: 120px;\n    --button-large-font-size: 14px;\n    --button-large-padding: 12px 24px;\n    --button-large-min-width: 150px;\n    --button-xlarge-font-size: 16px;\n    --button-xlarge-padding: 20px 24px;\n    --button-xlarge-min-width: 200px;\n\n    /*\n    * Tooltip\n    */\n    --tooltip-color: var(--color-secondary-300);\n    --tooltip-background-color: #52606d;\n\n    .tooltip-copy-button {\n      --tooltip-color: #000;\n      --tooltip-background-color: #fff;\n    }\n\n    /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n    /*\n    * Headings\n    * --h-{css-property-name} is fallback for h1...h6\n    */\n    --h-font-family: Source Sans Pro, sans-serif;\n    --h-font-weight: var(--font-weight-bolder);\n    --h-color: var(--color-content);\n\n    --h1-font-size: 36px;\n    --h2-font-size: 28px;\n    --h3-font-size: 18px;\n    --h4-font-size: 16px;\n    --h5-font-size: 14px;\n    --h6-font-size: 12px;\n\n    --h1-line-height: 36px;\n    --h2-line-height: 28px;\n    --h3-line-height: 18px;\n    --h4-line-height: 16px;\n    --h5-line-height: 14px;\n    --h6-line-height: 12px;\n\n    --code-font-size: 13px;\n    --code-font-family: var(--font-family-monospaced);\n    --code-font-weight: 400;\n    --code-wrap: pre;\n\n    --inline-code-font-size: var(--code-font-size);\n    --inline-code-font-family: var(--code-font-family);\n    --inline-code-color: #e53935;\n    --inline-code-background-color: var(--color-secondary-200);\n    --inline-code-border-color: var(--global-border-color);\n    --inline-code-border-radius: var(--global-border-radius);\n\n    --code-block-font-size: var(--code-font-size);\n    --code-block-font-family: var(--code-font-family);\n    --code-block-color: #f1928f;\n    --code-block-background-color: rgba(217, 205, 199, 0.05);\n    --code-block-border-color: var(--global-border-color);\n    --code-block-border-radius: 8px;\n    --code-block-max-height: 600px;\n    --code-block-word-break: initial;\n    --code-block-preformatted-background-color: #323f4b;\n\n    /*\n    * Links\n    */\n    --link-color: var(--color-primary-500);\n    --link-decoration: none;\n    --link-hover-color: var(--color-primary-100);\n    --link-hover-decoration: underline;\n\n    /* === ref docs and graphql docs specific === */\n    /*\n    * Logo\n    */\n    --logo-max-height: 285px;\n    --logo-max-width: 285px;\n    --logo-padding: 2px;\n\n    /*\n    * Http colors\n    */\n    --color-http-get: #3a9601;\n    --color-http-post: #0065fb;\n    --color-http-put: #93527b;\n    --color-http-options: #947014;\n    --color-http-patch: #bf581d;\n    --color-http-delete: #c83637;\n    --color-http-basic: #707070;\n    --color-http-link: #07818f;\n    --color-http-head: #a23dad;\n    --color-http-hook: var(--color-http-post);\n\n    /*\n    * Response colors\n    */\n    --response-success-border-color: #b1e996;\n    --response-success-background-color: #f6fff4;\n    --response-success-text-color: var(--response-success-border-color);\n\n    --response-error-border-color: #ffc9c9;\n    --response-error-background-color: #fff4f4;\n    --response-error-text-color: var(--response-error-border-color);\n\n    --response-redirect-border-color: var(--color-warning-500);\n    --response-redirect-background-color: #ffa5001a;\n    --response-redirect-text-color: var(--response-redirect-border-color);\n\n    --response-info-border-color: #87ceeb;\n    --response-info-background-color: #87ceeb1a;\n    --response-info-text-color: var(--response-info-border-color);\n\n    /*\n    * Panels\n    */\n    --panels-border-radius: 8px;\n    --panels-background-color: #fff;\n\n    --samples-panel-gap: 20px;\n    --samples-panel-width: 50%;\n    --samples-panel-block-background-color: #fff;\n    --samples-panel-background-color: #52606d;\n    --samples-panel-callback-background-color: var(--color-secondary-300);\n    --samples-panel-controls-background-color: #323f4b;\n    --samples-panel-controls-hover-background-color: #3c4c5a;\n    --samples-panel-controls-active-border-color: var(--color-accent-500);\n    --samples-panel-text-color: #fff;\n    --samples-panel-heading-color: #fff;\n\n    --samples-panel-markdown-background-color: #3c4c5a;\n    --samples-panel-markdown-border-color: #46596a;\n\n    --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n    --try-it-panel-active-tab-background-color: #47535e;\n    --try-it-panel-active-tab-border-color: var(--color-accent-500);\n    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n    --try-it-panel-action-button-width: auto;\n\n    --request-and-response-panel-background-color: #fff;\n\n    /*\n    * Layout\n    */\n    --layout-buttons-top-offset: 20px;\n    --layout-buttons-height: 36px;\n    --layout-buttons-width: 36px;\n\n    --layout-stacked-small-max-width: 90%;\n    --layout-stacked-medium-max-width: 75%;\n    --layout-stacked-large-max-width: 1200px;\n\n    --layout-three-panel-small-max-width: 100%;\n    --layout-three-panel-medium-max-width: 100%;\n    --layout-three-panel-large-max-width: 1800px;\n\n    --layout-middle-panel-small-max-width: none;\n    --layout-middle-panel-medium-max-width: none;\n    --layout-middle-panel-large-max-width: none;\n\n    /*\n    * Schema\n    */\n    --schema-lines-color: var(--global-border-color);\n    --schema-default-details-width: 70%;\n    --schema-type-name-color: var(--color-content-secondary);\n    --schema-type-title-color: var(--color-content-secondary);\n    --schema-require-label-color: var(--color-error-900);\n    --schema-labels-text-size: 0.9em;\n    --schema-nesting-spacing: 1em;\n    --schema-nested-background-color: var(--color-secondary-200);\n    --schema-chevron-color: var(--color-content);\n    --schema-chevron-size: 9px;\n\n    --schema-controls-color: var(--color-emphasis-800);\n    --schema-controls-background-color: var(--color-secondary-400);\n    --schema-controls-hover-background-color: var(--color-secondary-500);\n    --schema-controls-border-color: var(--color-secondary-600);\n\n    --field-name-font-size: var(--code-font-size);\n    --field-name-font-family: var(--code-font-family);\n    --field-example-color: var(--color-content);\n    --field-example-background-color: var(--inline-code-background-color);\n    --field-constraint-color: var(--color-content);\n    --field-constraint-background-color: var(--inline-code-background-color);\n\n    /*\n    * Search\n    */\n    --search-input-border-bottom: #e6e6e6;\n    --search-results-background-color: #f2f2f2;\n    --search-results-active-item-background-color: #e6e6e6;\n    --search-marked-background-color: #ffff03;\n    --search-popup-header-background-color: var(--color-secondary-200);\n    --search-clear-button-background-color: var(--color-secondary-400);\n    --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n    /*\n    * Other\n    */\n    --badge-color: var(--color-emphasis-100);\n    --badge-background-color: var(--color-primary-500);\n    --deprecated-badge-color: var(--color-emphasis-100);\n    --deprecated-badge-background-color: var(--color-warning-500);\n\n    --recursive-label-color: var(--color-warning-500);\n\n    --http-badge-font-size: 12px;\n    --http-badge-line-height: 20px;\n    --http-badge-font-family: var(--code-font-family);\n    --http-badge-font-weight: var(--font-weight-bold);\n    --http-badge-border-radius: 16px;\n    --http-badge-color: var(--color-content-inverse);\n\n    --http-badge-menu-font-size: 8px;\n    --http-badge-menu-line-height: 14px;\n\n    --spinner-color: var(--color-primary-500);\n\n    --linear-progress-color: var(--color-accent-500);\n    --linear-progress-background-color: var(--color-accent-100);\n\n    /* Floating action button */\n    --fab-color: #0065FB;\n    --fab-background-color: #f2f2f2;\n    \n    //* PORTAL settings *//\n    /**\n     * Headings\n     * */\n    --h2-font-weight: var(--font-weight-bold);\n\n    --h1-margin-top: 1.35em;\n    --h1-margin-bottom: 0.9em;\n    --h2-margin-top: 1.25em;\n    --h2-margin-bottom: 0.8em;\n    --h3-margin-top: 1.25em;\n    --h3-margin-bottom: 0.8em;\n    \n    /**\n     * Footer\n     * */\n    --footer-background-color: var(--color-primary-500);\n    --footer-text-color: #fff;\n\n    /**\n     * Sidebar\n     * */\n    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n\n    --sidebar-border-radius: 4px;\n    --sidebar-font-size: var(--font-size-base);\n    --sidebar-font-family: var(--font-family-base);\n\n    /**\n     * Logo\n     * */\n    --logo-height: 2rem;\n    --logo-margin: var(--sidebar-margin-left);\n\n    /**\n     * Navbar\n     * */\n    --navbar-height: 60px;\n    --navbar-text-color: #fff;\n    --navbar-background-color: var(--color-primary-500);\n\n    /**\n     * Navbar Item\n     * */\n    --navbar-item-font-size: 16px;\n    --navbar-item-margin-horizontal: 0;\n    --navbar-item-margin-vertical: 0;\n    --navbar-item-border-radius: 10px;\n    --navbar-item-font-weight: var(--font-weight-bold);\n    --navbar-item-active-background-color: #1b75fa;\n    --navbar-item-active-text-color: var(--navbar-text-color);\n    --navbar-item-active-text-decoration: none;\n\n    /**\n     * TOC\n     * */\n    --toc-width: 240px;\n\n    /**\n     * Markdown\n     * */\n    --content-wrapper-max-width: 910px;\n    --content-wrapper-padding-vertical: 25px;\n    --content-wrapper-padding-horizontal: 0px;\n\n    /**\n     * Bloquote\n     * */\n    --bloquote-margin-vertical: 1.5em;\n    --bloquote-margin-horizontal: 0;\n    --bloquote-padding-vertical: 0;\n    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --bloquote-background-color: transparent;\n\n    /**\n     * Admonition\n     * */\n    --admonition-margin-horizontal: 0;\n    --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n    --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n    --admonition-icon-size: 25px;\n    --admonition-border-radius: 8px;\n    --admonition-font-size: 16px;\n    --admonition-font-weight: normal;\n    --admonition-line-height: 1.5em;\n    --admonition-heading-font-size: 16px;\n    --admonition-heading-font-weight: var(--font-weight-bold);\n    --admonition-heading-letter-spacing: 0.3px;\n    --admonition-heading-transform: uppercase;\n\n    /* info */\n    --admonition-info-background-color: #ebedf0;\n    --admonition-info-text-color: var(--color-content);\n    --admonition-info-icon-color: #4782cb;\n\n    /* attention */\n    --admonition-attention-background-color: #e6eef8;\n    --admonition-attention-text-color: var(--color-content);\n    --admonition-attention-icon-color: #4782cb;\n\n    /* warning */\n    --admonition-warning-background-color: #feeda5;\n    --admonition-warning-text-color: var(--color-content);\n    --admonition-warning-icon-color: #d4ad03;\n\n    /* danger */\n    --admonition-danger-background-color: #fceaea;\n    --admonition-danger-text-color: var(--color-content);\n    --admonition-danger-icon-color: #e53935;\n\n    /* success */\n    --admonition-success-background-color: #ddffe1;\n    --admonition-success-text-color: var(--color-content);\n    --admonition-success-icon-color: #00aa13;\n  }\n"])));
-var templateObject_1;
+var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* === Palette === */\n\n  /**\n    * @tokens Base Colors\n    * @presenter Color\n    */\n  --color-primary-100: #62a1ff;\n  --color-primary-200: #4892ff;\n  --color-primary-300: #2f83ff;\n  --color-primary-400: #1573ff;\n  --color-primary-500: #0065fb;\n  --color-primary-600: #005be2;\n  --color-primary-700: #0050c8;\n  --color-primary-800: #0046af;\n  --color-primary-900: #003c95;\n\n  --color-secondary-100: #ffffff;\n  --color-secondary-200: #f5f7fa;\n  --color-secondary-300: #f3f4f6;\n  --color-secondary-400: #e4e7eb;\n  --color-secondary-500: #d5dae0;\n  --color-secondary-600: #c7cdd5;\n  --color-secondary-700: #b8c0ca;\n  --color-secondary-800: #a9b3c0;\n  --color-secondary-900: #9ba6b5;\n\n  --color-emphasis-100: #ffffff;\n  --color-emphasis-200: #e9eaec;\n  --color-emphasis-300: #cdd0d5;\n  --color-emphasis-400: #b2b6bd;\n  --color-emphasis-500: #969ca6;\n  --color-emphasis-600: #7a828f;\n  --color-emphasis-700: #626974;\n  --color-emphasis-800: #4b5058;\n  --color-emphasis-900: #1c1e21;\n\n  --color-accent-100: #b3dcf3;\n  --color-accent-200: #a6dfff;\n  --color-accent-300: #8cd5ff;\n  --color-accent-400: #73ccff;\n  --color-accent-500: #59c3ff;\n  --color-accent-600: #40baff;\n  --color-accent-700: #26b1ff;\n  --color-accent-800: #0da7ff;\n  --color-accent-900: #009bf2;\n\n  --color-success-100: #98eda0;\n  --color-success-200: #82e98c;\n  --color-success-300: #6ce678;\n  --color-success-400: #57e264;\n  --color-success-500: #41de50;\n  --color-success-600: #2bda3c;\n  --color-success-700: #23c933;\n  --color-success-800: #1fb32d;\n  --color-success-900: #1b9e28;\n\n  --color-warning-100: #ffc966;\n  --color-warning-200: #ffc04d;\n  --color-warning-300: #ffb733;\n  --color-warning-400: #ffae1a;\n  --color-warning-500: #ffa500;\n  --color-warning-600: #e69400;\n  --color-warning-700: #cc8400;\n  --color-warning-800: #b37300;\n  --color-warning-900: #996300;\n\n  --color-error-100: #ffc7c7;\n  --color-error-200: #ffaeae;\n  --color-error-300: #ff9494;\n  --color-error-400: #ff7b7b;\n  --color-error-500: #ff6161;\n  --color-error-600: #ff4747;\n  --color-error-700: #ff2e2e;\n  --color-error-800: #ff1414;\n  --color-error-900: #ff0000;\n\n  // @tokens Other\n"], ["\n  /* === Palette === */\n\n  /**\n    * @tokens Base Colors\n    * @presenter Color\n    */\n  --color-primary-100: #62a1ff;\n  --color-primary-200: #4892ff;\n  --color-primary-300: #2f83ff;\n  --color-primary-400: #1573ff;\n  --color-primary-500: #0065fb;\n  --color-primary-600: #005be2;\n  --color-primary-700: #0050c8;\n  --color-primary-800: #0046af;\n  --color-primary-900: #003c95;\n\n  --color-secondary-100: #ffffff;\n  --color-secondary-200: #f5f7fa;\n  --color-secondary-300: #f3f4f6;\n  --color-secondary-400: #e4e7eb;\n  --color-secondary-500: #d5dae0;\n  --color-secondary-600: #c7cdd5;\n  --color-secondary-700: #b8c0ca;\n  --color-secondary-800: #a9b3c0;\n  --color-secondary-900: #9ba6b5;\n\n  --color-emphasis-100: #ffffff;\n  --color-emphasis-200: #e9eaec;\n  --color-emphasis-300: #cdd0d5;\n  --color-emphasis-400: #b2b6bd;\n  --color-emphasis-500: #969ca6;\n  --color-emphasis-600: #7a828f;\n  --color-emphasis-700: #626974;\n  --color-emphasis-800: #4b5058;\n  --color-emphasis-900: #1c1e21;\n\n  --color-accent-100: #b3dcf3;\n  --color-accent-200: #a6dfff;\n  --color-accent-300: #8cd5ff;\n  --color-accent-400: #73ccff;\n  --color-accent-500: #59c3ff;\n  --color-accent-600: #40baff;\n  --color-accent-700: #26b1ff;\n  --color-accent-800: #0da7ff;\n  --color-accent-900: #009bf2;\n\n  --color-success-100: #98eda0;\n  --color-success-200: #82e98c;\n  --color-success-300: #6ce678;\n  --color-success-400: #57e264;\n  --color-success-500: #41de50;\n  --color-success-600: #2bda3c;\n  --color-success-700: #23c933;\n  --color-success-800: #1fb32d;\n  --color-success-900: #1b9e28;\n\n  --color-warning-100: #ffc966;\n  --color-warning-200: #ffc04d;\n  --color-warning-300: #ffb733;\n  --color-warning-400: #ffae1a;\n  --color-warning-500: #ffa500;\n  --color-warning-600: #e69400;\n  --color-warning-700: #cc8400;\n  --color-warning-800: #b37300;\n  --color-warning-900: #996300;\n\n  --color-error-100: #ffc7c7;\n  --color-error-200: #ffaeae;\n  --color-error-300: #ff9494;\n  --color-error-400: #ff7b7b;\n  --color-error-500: #ff6161;\n  --color-error-600: #ff4747;\n  --color-error-700: #ff2e2e;\n  --color-error-800: #ff1414;\n  --color-error-900: #ff0000;\n\n  // @tokens Other\n"])));
+var typography = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens Other\n"], ["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens Other\n"])));
+var borders = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens Other\n"], ["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens Other\n"])));
+exports.styles = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n  :root {\n    ", "\n    ", "\n    ", "\n\n    /* === Page layout === */\n    //TBD\n    /* === Navbar === */\n    //--navbar-height:\n    //TBD\n\n    /* === Menu (sidebar) === */\n\n  /**\n    * @tokens Sidebar\n    */\n    --sidebar-width: 285px;\n    --sidebar-background-color: #fff; // @presenter Color\n    --sidebar-right-line-color: var(--global-border-color); // @presenter Color\n    --sidebar-spacing-unit: 8px; // @presenter Spacing\n    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing\n    --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing\n\n    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n\n    --sidebar-word-break: 'inherit';\n    --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color\n    --sidebar-separator-line-color: #dadada; // @presenter Color\n    --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color\n    --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing\n\n    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-item-spacing-offset-nesting: calc(\n      var(--sidebar-spacing-unit) * 2\n    ); // @presenter Spacing\n    --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n    --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n    --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n    --sidebar-item-color: var(--color-content); // @presenter Color\n    --sidebar-item-active-color: var(--color-content); // @presenter Color\n    --sidebar-item-background-color: #fff; // @presenter Color\n    --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color\n\n    //TBD\n    /* === Footer === */\n    //TBD\n    /* === Table of contents === */\n    //TBD\n\n    // @tokens Other\n\n    /* === Various components: buttons, inputs, alerts, tooltip === */\n\n    /*\n    * Buttons\n    */\n    --button-color: white;\n    --button-background-color: var(--color-emphasis-500);\n    --button-hover-background-color: var(--color-emphasis-600);\n    --button-active-background-color: var(--color-emphasis-700);\n    --button-outlined-active-border-color: var(--color-emphasis-800);\n    --button-border-radius: var(--global-border-radius);\n    --button-font-family: inherit;\n    --button-font-weight: var(--font-weight-bold);\n    --button-box-shadow: none;\n    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n    .button-color-primary {\n      --button-color: white;\n      --button-background-color: var(--color-primary-500);\n      --button-hover-background-color: var(--color-primary-600);\n      --button-active-background-color: var(--color-primary-700);\n      --button-outlined-active-border-color: var(--color-primary-800);\n    }\n\n    .button-color-secondary {\n      --button-color: var(--color-emphasis-800);\n      --button-background-color: var(--color-secondary-400);\n      --button-hover-background-color: var(--color-secondary-500);\n      --button-active-background-color: var(--color-secondary-600);\n      --button-outlined-active-border-color: var(--color-secondary-700);\n    }\n\n    --button-small-font-size: 12px;\n    --button-small-padding: 8px 10px;\n    --button-small-min-width: 90px;\n    --button-medium-font-size: 14px;\n    --button-medium-padding: 8px 20px;\n    --button-medium-min-width: 120px;\n    --button-large-font-size: 14px;\n    --button-large-padding: 12px 24px;\n    --button-large-min-width: 150px;\n    --button-xlarge-font-size: 16px;\n    --button-xlarge-padding: 20px 24px;\n    --button-xlarge-min-width: 200px;\n\n    /*\n    * Tooltip\n    */\n    --tooltip-color: var(--color-secondary-300);\n    --tooltip-background-color: #52606d;\n\n    .tooltip-copy-button {\n      --tooltip-color: #000;\n      --tooltip-background-color: #fff;\n    }\n\n    /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n    /*\n    * Headings\n    * --h-{css-property-name} is fallback for h1...h6\n    */\n    --h-font-family: Source Sans Pro, sans-serif;\n    --h-font-weight: var(--font-weight-bolder);\n    --h-color: var(--color-content);\n\n    --h1-font-size: 36px;\n    --h2-font-size: 28px;\n    --h3-font-size: 18px;\n    --h4-font-size: 16px;\n    --h5-font-size: 14px;\n    --h6-font-size: 12px;\n\n    --h1-line-height: 36px;\n    --h2-line-height: 28px;\n    --h3-line-height: 18px;\n    --h4-line-height: 16px;\n    --h5-line-height: 14px;\n    --h6-line-height: 12px;\n\n    --code-font-size: 13px;\n    --code-font-family: var(--font-family-monospaced);\n    --code-font-weight: 400;\n    --code-wrap: pre;\n\n    --inline-code-font-size: var(--code-font-size);\n    --inline-code-font-family: var(--code-font-family);\n    --inline-code-color: #e53935;\n    --inline-code-background-color: var(--color-secondary-200);\n    --inline-code-border-color: var(--global-border-color);\n    --inline-code-border-radius: var(--global-border-radius);\n\n    --code-block-font-size: var(--code-font-size);\n    --code-block-font-family: var(--code-font-family);\n    --code-block-color: #f1928f;\n    --code-block-background-color: rgba(217, 205, 199, 0.05);\n    --code-block-border-color: var(--global-border-color);\n    --code-block-border-radius: 8px;\n    --code-block-max-height: 600px;\n    --code-block-word-break: initial;\n    --code-block-preformatted-background-color: #323f4b;\n\n    /*\n    * Links\n    */\n    --link-color: var(--color-primary-500);\n    --link-decoration: none;\n    --link-hover-color: var(--color-primary-100);\n    --link-hover-decoration: underline;\n\n    /* === ref docs and graphql docs specific === */\n    /*\n    * Logo\n    */\n    --logo-max-height: 285px;\n    --logo-max-width: 285px;\n    --logo-padding: 2px;\n\n    /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n    --color-http-get: #3a9601;\n    --color-http-post: #0065fb;\n    --color-http-put: #93527b;\n    --color-http-options: #947014;\n    --color-http-patch: #bf581d;\n    --color-http-delete: #c83637;\n    --color-http-basic: #707070;\n    --color-http-link: #07818f;\n    --color-http-head: #a23dad;\n    --color-http-hook: var(--color-http-post);\n\n    /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n    --response-success-border-color: #b1e996;\n    --response-success-background-color: #f6fff4;\n    --response-success-text-color: var(--response-success-border-color);\n\n    --response-error-border-color: #ffc9c9;\n    --response-error-background-color: #fff4f4;\n    --response-error-text-color: var(--response-error-border-color);\n\n    --response-redirect-border-color: var(--color-warning-500);\n    --response-redirect-background-color: #ffa5001a;\n    --response-redirect-text-color: var(--response-redirect-border-color);\n\n    --response-info-border-color: #87ceeb;\n    --response-info-background-color: #87ceeb1a;\n    --response-info-text-color: var(--response-info-border-color);\n\n    // @tokens Other\n\n    /*\n    * Panels\n    */\n    --panels-border-radius: 8px;\n    --panels-background-color: #fff;\n\n    --samples-panel-gap: 20px;\n    --samples-panel-width: 50%;\n    --samples-panel-block-background-color: #fff;\n    --samples-panel-background-color: #52606d;\n    --samples-panel-callback-background-color: var(--color-secondary-300);\n    --samples-panel-controls-background-color: #323f4b;\n    --samples-panel-controls-hover-background-color: #3c4c5a;\n    --samples-panel-controls-active-border-color: var(--color-accent-500);\n    --samples-panel-text-color: #fff;\n    --samples-panel-heading-color: #fff;\n\n    --samples-panel-markdown-background-color: #3c4c5a;\n    --samples-panel-markdown-border-color: #46596a;\n\n    --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n    --try-it-panel-active-tab-background-color: #47535e;\n    --try-it-panel-active-tab-border-color: var(--color-accent-500);\n    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n    --try-it-panel-action-button-width: auto;\n\n    --request-and-response-panel-background-color: #fff;\n\n    /*\n    * Layout\n    */\n    --layout-buttons-top-offset: 20px;\n    --layout-buttons-height: 36px;\n    --layout-buttons-width: 36px;\n\n    --layout-stacked-small-max-width: 90%;\n    --layout-stacked-medium-max-width: 75%;\n    --layout-stacked-large-max-width: 1200px;\n\n    --layout-three-panel-small-max-width: 100%;\n    --layout-three-panel-medium-max-width: 100%;\n    --layout-three-panel-large-max-width: 1800px;\n\n    --layout-middle-panel-small-max-width: none;\n    --layout-middle-panel-medium-max-width: none;\n    --layout-middle-panel-large-max-width: none;\n\n    /*\n    * Schema\n    */\n    --schema-lines-color: var(--global-border-color);\n    --schema-default-details-width: 70%;\n    --schema-type-name-color: var(--color-content-secondary);\n    --schema-type-title-color: var(--color-content-secondary);\n    --schema-require-label-color: var(--color-error-900);\n    --schema-labels-text-size: 0.9em;\n    --schema-nesting-spacing: 1em;\n    --schema-nested-background-color: var(--color-secondary-200);\n    --schema-chevron-color: var(--color-content);\n    --schema-chevron-size: 9px;\n\n    --schema-controls-color: var(--color-emphasis-800);\n    --schema-controls-background-color: var(--color-secondary-400);\n    --schema-controls-hover-background-color: var(--color-secondary-500);\n    --schema-controls-border-color: var(--color-secondary-600);\n\n    --field-name-font-size: var(--code-font-size);\n    --field-name-font-family: var(--code-font-family);\n    --field-example-color: var(--color-content);\n    --field-example-background-color: var(--inline-code-background-color);\n    --field-constraint-color: var(--color-content);\n    --field-constraint-background-color: var(--inline-code-background-color);\n\n    /*\n    * Search\n    */\n    --search-input-border-bottom: #e6e6e6;\n    --search-results-background-color: #f2f2f2;\n    --search-results-active-item-background-color: #e6e6e6;\n    --search-marked-background-color: #ffff03;\n    --search-popup-header-background-color: var(--color-secondary-200);\n    --search-clear-button-background-color: var(--color-secondary-400);\n    --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n    /*\n    * Other\n    */\n    --badge-color: var(--color-emphasis-100);\n    --badge-background-color: var(--color-primary-500);\n    --deprecated-badge-color: var(--color-emphasis-100);\n    --deprecated-badge-background-color: var(--color-warning-500);\n\n    --recursive-label-color: var(--color-warning-500);\n\n    --http-badge-font-size: 12px;\n    --http-badge-line-height: 20px;\n    --http-badge-font-family: var(--code-font-family);\n    --http-badge-font-weight: var(--font-weight-bold);\n    --http-badge-border-radius: 16px;\n    --http-badge-color: var(--color-content-inverse);\n\n    --http-badge-menu-font-size: 8px;\n    --http-badge-menu-line-height: 14px;\n\n    --spinner-color: var(--color-primary-500);\n\n    --linear-progress-color: var(--color-accent-500);\n    --linear-progress-background-color: var(--color-accent-100);\n\n    /* Floating action button */\n    --fab-color: #0065fb;\n    --fab-background-color: #f2f2f2;\n\n    //* PORTAL settings *//\n    /**\n     * Headings\n     * */\n    --h2-font-weight: var(--font-weight-bold);\n\n    --h1-margin-top: 1.35em;\n    --h1-margin-bottom: 0.9em;\n    --h2-margin-top: 1.25em;\n    --h2-margin-bottom: 0.8em;\n    --h3-margin-top: 1.25em;\n    --h3-margin-bottom: 0.8em;\n\n    /**\n     * Footer\n     * */\n    --footer-background-color: var(--color-primary-500);\n    --footer-text-color: #fff;\n\n    /**\n     * Sidebar\n     * */\n    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n\n    --sidebar-border-radius: 4px;\n    --sidebar-font-size: var(--font-size-base);\n    --sidebar-font-family: var(--font-family-base);\n\n    /**\n     * Logo\n     * */\n    --logo-height: 2rem;\n    --logo-margin: var(--sidebar-margin-left);\n\n    /**\n     * Navbar\n     * */\n    --navbar-height: 60px;\n    --navbar-text-color: #fff;\n    --navbar-background-color: var(--color-primary-500);\n\n    /**\n     * Navbar Item\n     * */\n    --navbar-item-font-size: 16px;\n    --navbar-item-margin-horizontal: 0;\n    --navbar-item-margin-vertical: 0;\n    --navbar-item-border-radius: 10px;\n    --navbar-item-font-weight: var(--font-weight-bold);\n    --navbar-item-active-background-color: #1b75fa;\n    --navbar-item-active-text-color: var(--navbar-text-color);\n    --navbar-item-active-text-decoration: none;\n\n    /**\n     * TOC\n     * */\n    --toc-width: 240px;\n\n    /**\n     * Markdown\n     * */\n    --content-wrapper-max-width: 910px;\n    --content-wrapper-padding-vertical: 25px;\n    --content-wrapper-padding-horizontal: 0px;\n\n    /**\n     * Bloquote\n     * */\n    --bloquote-margin-vertical: 1.5em;\n    --bloquote-margin-horizontal: 0;\n    --bloquote-padding-vertical: 0;\n    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --bloquote-background-color: transparent;\n\n    /**\n     * Admonition\n     * */\n    --admonition-margin-horizontal: 0;\n    --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n    --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n    --admonition-icon-size: 25px;\n    --admonition-border-radius: 8px;\n    --admonition-font-size: 16px;\n    --admonition-font-weight: normal;\n    --admonition-line-height: 1.5em;\n    --admonition-heading-font-size: 16px;\n    --admonition-heading-font-weight: var(--font-weight-bold);\n    --admonition-heading-letter-spacing: 0.3px;\n    --admonition-heading-transform: uppercase;\n\n    /**\n    * @tokens Admonition colors\n    * @presenter Color\n    */\n\n    /* info */\n    --admonition-info-background-color: #ebedf0;\n    --admonition-info-text-color: var(--color-content);\n    --admonition-info-icon-color: #4782cb;\n\n    /* attention */\n    --admonition-attention-background-color: #e6eef8;\n    --admonition-attention-text-color: var(--color-content);\n    --admonition-attention-icon-color: #4782cb;\n\n    /* warning */\n    --admonition-warning-background-color: #feeda5;\n    --admonition-warning-text-color: var(--color-content);\n    --admonition-warning-icon-color: #d4ad03;\n\n    /* danger */\n    --admonition-danger-background-color: #fceaea;\n    --admonition-danger-text-color: var(--color-content);\n    --admonition-danger-icon-color: #e53935;\n\n    /* success */\n    --admonition-success-background-color: #ddffe1;\n    --admonition-success-text-color: var(--color-content);\n    --admonition-success-icon-color: #00aa13;\n\n    /*\n    * Portal Search\n    */\n    --input-background-color: rgba(255, 255, 255, 0.1);\n    --input-text-color: #fff;\n    --input-border-radius: 4px;\n    --input-font-size: 16px;\n    --input-font-family: var(--font-family-primary);\n    --input-line-height: 1.15em;\n    --popover-backgrond-color: #fff;\n    --popover-border-radius: 4px;\n    --search-item-text-color: var(--color-content-secondary);\n    --search-item-title-text-color: var(--color-content);\n    --search-item-active-background-color: rgba(0, 68, 212, 0.1);\n\n    // @tokens Other\n  }\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n  :root {\n    ", "\n    ", "\n    ", "\n\n    /* === Page layout === */\n    //TBD\n    /* === Navbar === */\n    //--navbar-height:\n    //TBD\n\n    /* === Menu (sidebar) === */\n\n  /**\n    * @tokens Sidebar\n    */\n    --sidebar-width: 285px;\n    --sidebar-background-color: #fff; // @presenter Color\n    --sidebar-right-line-color: var(--global-border-color); // @presenter Color\n    --sidebar-spacing-unit: 8px; // @presenter Spacing\n    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing\n    --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing\n\n    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n\n    --sidebar-word-break: 'inherit';\n    --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color\n    --sidebar-separator-line-color: #dadada; // @presenter Color\n    --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color\n    --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing\n\n    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n    --sidebar-item-spacing-offset-nesting: calc(\n      var(--sidebar-spacing-unit) * 2\n    ); // @presenter Spacing\n    --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n    --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n    --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n    --sidebar-item-color: var(--color-content); // @presenter Color\n    --sidebar-item-active-color: var(--color-content); // @presenter Color\n    --sidebar-item-background-color: #fff; // @presenter Color\n    --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color\n\n    //TBD\n    /* === Footer === */\n    //TBD\n    /* === Table of contents === */\n    //TBD\n\n    // @tokens Other\n\n    /* === Various components: buttons, inputs, alerts, tooltip === */\n\n    /*\n    * Buttons\n    */\n    --button-color: white;\n    --button-background-color: var(--color-emphasis-500);\n    --button-hover-background-color: var(--color-emphasis-600);\n    --button-active-background-color: var(--color-emphasis-700);\n    --button-outlined-active-border-color: var(--color-emphasis-800);\n    --button-border-radius: var(--global-border-radius);\n    --button-font-family: inherit;\n    --button-font-weight: var(--font-weight-bold);\n    --button-box-shadow: none;\n    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n    .button-color-primary {\n      --button-color: white;\n      --button-background-color: var(--color-primary-500);\n      --button-hover-background-color: var(--color-primary-600);\n      --button-active-background-color: var(--color-primary-700);\n      --button-outlined-active-border-color: var(--color-primary-800);\n    }\n\n    .button-color-secondary {\n      --button-color: var(--color-emphasis-800);\n      --button-background-color: var(--color-secondary-400);\n      --button-hover-background-color: var(--color-secondary-500);\n      --button-active-background-color: var(--color-secondary-600);\n      --button-outlined-active-border-color: var(--color-secondary-700);\n    }\n\n    --button-small-font-size: 12px;\n    --button-small-padding: 8px 10px;\n    --button-small-min-width: 90px;\n    --button-medium-font-size: 14px;\n    --button-medium-padding: 8px 20px;\n    --button-medium-min-width: 120px;\n    --button-large-font-size: 14px;\n    --button-large-padding: 12px 24px;\n    --button-large-min-width: 150px;\n    --button-xlarge-font-size: 16px;\n    --button-xlarge-padding: 20px 24px;\n    --button-xlarge-min-width: 200px;\n\n    /*\n    * Tooltip\n    */\n    --tooltip-color: var(--color-secondary-300);\n    --tooltip-background-color: #52606d;\n\n    .tooltip-copy-button {\n      --tooltip-color: #000;\n      --tooltip-background-color: #fff;\n    }\n\n    /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n    /*\n    * Headings\n    * --h-{css-property-name} is fallback for h1...h6\n    */\n    --h-font-family: Source Sans Pro, sans-serif;\n    --h-font-weight: var(--font-weight-bolder);\n    --h-color: var(--color-content);\n\n    --h1-font-size: 36px;\n    --h2-font-size: 28px;\n    --h3-font-size: 18px;\n    --h4-font-size: 16px;\n    --h5-font-size: 14px;\n    --h6-font-size: 12px;\n\n    --h1-line-height: 36px;\n    --h2-line-height: 28px;\n    --h3-line-height: 18px;\n    --h4-line-height: 16px;\n    --h5-line-height: 14px;\n    --h6-line-height: 12px;\n\n    --code-font-size: 13px;\n    --code-font-family: var(--font-family-monospaced);\n    --code-font-weight: 400;\n    --code-wrap: pre;\n\n    --inline-code-font-size: var(--code-font-size);\n    --inline-code-font-family: var(--code-font-family);\n    --inline-code-color: #e53935;\n    --inline-code-background-color: var(--color-secondary-200);\n    --inline-code-border-color: var(--global-border-color);\n    --inline-code-border-radius: var(--global-border-radius);\n\n    --code-block-font-size: var(--code-font-size);\n    --code-block-font-family: var(--code-font-family);\n    --code-block-color: #f1928f;\n    --code-block-background-color: rgba(217, 205, 199, 0.05);\n    --code-block-border-color: var(--global-border-color);\n    --code-block-border-radius: 8px;\n    --code-block-max-height: 600px;\n    --code-block-word-break: initial;\n    --code-block-preformatted-background-color: #323f4b;\n\n    /*\n    * Links\n    */\n    --link-color: var(--color-primary-500);\n    --link-decoration: none;\n    --link-hover-color: var(--color-primary-100);\n    --link-hover-decoration: underline;\n\n    /* === ref docs and graphql docs specific === */\n    /*\n    * Logo\n    */\n    --logo-max-height: 285px;\n    --logo-max-width: 285px;\n    --logo-padding: 2px;\n\n    /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n    --color-http-get: #3a9601;\n    --color-http-post: #0065fb;\n    --color-http-put: #93527b;\n    --color-http-options: #947014;\n    --color-http-patch: #bf581d;\n    --color-http-delete: #c83637;\n    --color-http-basic: #707070;\n    --color-http-link: #07818f;\n    --color-http-head: #a23dad;\n    --color-http-hook: var(--color-http-post);\n\n    /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n    --response-success-border-color: #b1e996;\n    --response-success-background-color: #f6fff4;\n    --response-success-text-color: var(--response-success-border-color);\n\n    --response-error-border-color: #ffc9c9;\n    --response-error-background-color: #fff4f4;\n    --response-error-text-color: var(--response-error-border-color);\n\n    --response-redirect-border-color: var(--color-warning-500);\n    --response-redirect-background-color: #ffa5001a;\n    --response-redirect-text-color: var(--response-redirect-border-color);\n\n    --response-info-border-color: #87ceeb;\n    --response-info-background-color: #87ceeb1a;\n    --response-info-text-color: var(--response-info-border-color);\n\n    // @tokens Other\n\n    /*\n    * Panels\n    */\n    --panels-border-radius: 8px;\n    --panels-background-color: #fff;\n\n    --samples-panel-gap: 20px;\n    --samples-panel-width: 50%;\n    --samples-panel-block-background-color: #fff;\n    --samples-panel-background-color: #52606d;\n    --samples-panel-callback-background-color: var(--color-secondary-300);\n    --samples-panel-controls-background-color: #323f4b;\n    --samples-panel-controls-hover-background-color: #3c4c5a;\n    --samples-panel-controls-active-border-color: var(--color-accent-500);\n    --samples-panel-text-color: #fff;\n    --samples-panel-heading-color: #fff;\n\n    --samples-panel-markdown-background-color: #3c4c5a;\n    --samples-panel-markdown-border-color: #46596a;\n\n    --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n    --try-it-panel-active-tab-background-color: #47535e;\n    --try-it-panel-active-tab-border-color: var(--color-accent-500);\n    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n    --try-it-panel-action-button-width: auto;\n\n    --request-and-response-panel-background-color: #fff;\n\n    /*\n    * Layout\n    */\n    --layout-buttons-top-offset: 20px;\n    --layout-buttons-height: 36px;\n    --layout-buttons-width: 36px;\n\n    --layout-stacked-small-max-width: 90%;\n    --layout-stacked-medium-max-width: 75%;\n    --layout-stacked-large-max-width: 1200px;\n\n    --layout-three-panel-small-max-width: 100%;\n    --layout-three-panel-medium-max-width: 100%;\n    --layout-three-panel-large-max-width: 1800px;\n\n    --layout-middle-panel-small-max-width: none;\n    --layout-middle-panel-medium-max-width: none;\n    --layout-middle-panel-large-max-width: none;\n\n    /*\n    * Schema\n    */\n    --schema-lines-color: var(--global-border-color);\n    --schema-default-details-width: 70%;\n    --schema-type-name-color: var(--color-content-secondary);\n    --schema-type-title-color: var(--color-content-secondary);\n    --schema-require-label-color: var(--color-error-900);\n    --schema-labels-text-size: 0.9em;\n    --schema-nesting-spacing: 1em;\n    --schema-nested-background-color: var(--color-secondary-200);\n    --schema-chevron-color: var(--color-content);\n    --schema-chevron-size: 9px;\n\n    --schema-controls-color: var(--color-emphasis-800);\n    --schema-controls-background-color: var(--color-secondary-400);\n    --schema-controls-hover-background-color: var(--color-secondary-500);\n    --schema-controls-border-color: var(--color-secondary-600);\n\n    --field-name-font-size: var(--code-font-size);\n    --field-name-font-family: var(--code-font-family);\n    --field-example-color: var(--color-content);\n    --field-example-background-color: var(--inline-code-background-color);\n    --field-constraint-color: var(--color-content);\n    --field-constraint-background-color: var(--inline-code-background-color);\n\n    /*\n    * Search\n    */\n    --search-input-border-bottom: #e6e6e6;\n    --search-results-background-color: #f2f2f2;\n    --search-results-active-item-background-color: #e6e6e6;\n    --search-marked-background-color: #ffff03;\n    --search-popup-header-background-color: var(--color-secondary-200);\n    --search-clear-button-background-color: var(--color-secondary-400);\n    --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n    /*\n    * Other\n    */\n    --badge-color: var(--color-emphasis-100);\n    --badge-background-color: var(--color-primary-500);\n    --deprecated-badge-color: var(--color-emphasis-100);\n    --deprecated-badge-background-color: var(--color-warning-500);\n\n    --recursive-label-color: var(--color-warning-500);\n\n    --http-badge-font-size: 12px;\n    --http-badge-line-height: 20px;\n    --http-badge-font-family: var(--code-font-family);\n    --http-badge-font-weight: var(--font-weight-bold);\n    --http-badge-border-radius: 16px;\n    --http-badge-color: var(--color-content-inverse);\n\n    --http-badge-menu-font-size: 8px;\n    --http-badge-menu-line-height: 14px;\n\n    --spinner-color: var(--color-primary-500);\n\n    --linear-progress-color: var(--color-accent-500);\n    --linear-progress-background-color: var(--color-accent-100);\n\n    /* Floating action button */\n    --fab-color: #0065fb;\n    --fab-background-color: #f2f2f2;\n\n    //* PORTAL settings *//\n    /**\n     * Headings\n     * */\n    --h2-font-weight: var(--font-weight-bold);\n\n    --h1-margin-top: 1.35em;\n    --h1-margin-bottom: 0.9em;\n    --h2-margin-top: 1.25em;\n    --h2-margin-bottom: 0.8em;\n    --h3-margin-top: 1.25em;\n    --h3-margin-bottom: 0.8em;\n\n    /**\n     * Footer\n     * */\n    --footer-background-color: var(--color-primary-500);\n    --footer-text-color: #fff;\n\n    /**\n     * Sidebar\n     * */\n    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n\n    --sidebar-border-radius: 4px;\n    --sidebar-font-size: var(--font-size-base);\n    --sidebar-font-family: var(--font-family-base);\n\n    /**\n     * Logo\n     * */\n    --logo-height: 2rem;\n    --logo-margin: var(--sidebar-margin-left);\n\n    /**\n     * Navbar\n     * */\n    --navbar-height: 60px;\n    --navbar-text-color: #fff;\n    --navbar-background-color: var(--color-primary-500);\n\n    /**\n     * Navbar Item\n     * */\n    --navbar-item-font-size: 16px;\n    --navbar-item-margin-horizontal: 0;\n    --navbar-item-margin-vertical: 0;\n    --navbar-item-border-radius: 10px;\n    --navbar-item-font-weight: var(--font-weight-bold);\n    --navbar-item-active-background-color: #1b75fa;\n    --navbar-item-active-text-color: var(--navbar-text-color);\n    --navbar-item-active-text-decoration: none;\n\n    /**\n     * TOC\n     * */\n    --toc-width: 240px;\n\n    /**\n     * Markdown\n     * */\n    --content-wrapper-max-width: 910px;\n    --content-wrapper-padding-vertical: 25px;\n    --content-wrapper-padding-horizontal: 0px;\n\n    /**\n     * Bloquote\n     * */\n    --bloquote-margin-vertical: 1.5em;\n    --bloquote-margin-horizontal: 0;\n    --bloquote-padding-vertical: 0;\n    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --bloquote-background-color: transparent;\n\n    /**\n     * Admonition\n     * */\n    --admonition-margin-horizontal: 0;\n    --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n    --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n    --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n    --admonition-icon-size: 25px;\n    --admonition-border-radius: 8px;\n    --admonition-font-size: 16px;\n    --admonition-font-weight: normal;\n    --admonition-line-height: 1.5em;\n    --admonition-heading-font-size: 16px;\n    --admonition-heading-font-weight: var(--font-weight-bold);\n    --admonition-heading-letter-spacing: 0.3px;\n    --admonition-heading-transform: uppercase;\n\n    /**\n    * @tokens Admonition colors\n    * @presenter Color\n    */\n\n    /* info */\n    --admonition-info-background-color: #ebedf0;\n    --admonition-info-text-color: var(--color-content);\n    --admonition-info-icon-color: #4782cb;\n\n    /* attention */\n    --admonition-attention-background-color: #e6eef8;\n    --admonition-attention-text-color: var(--color-content);\n    --admonition-attention-icon-color: #4782cb;\n\n    /* warning */\n    --admonition-warning-background-color: #feeda5;\n    --admonition-warning-text-color: var(--color-content);\n    --admonition-warning-icon-color: #d4ad03;\n\n    /* danger */\n    --admonition-danger-background-color: #fceaea;\n    --admonition-danger-text-color: var(--color-content);\n    --admonition-danger-icon-color: #e53935;\n\n    /* success */\n    --admonition-success-background-color: #ddffe1;\n    --admonition-success-text-color: var(--color-content);\n    --admonition-success-icon-color: #00aa13;\n\n    /*\n    * Portal Search\n    */\n    --input-background-color: rgba(255, 255, 255, 0.1);\n    --input-text-color: #fff;\n    --input-border-radius: 4px;\n    --input-font-size: 16px;\n    --input-font-family: var(--font-family-primary);\n    --input-line-height: 1.15em;\n    --popover-backgrond-color: #fff;\n    --popover-border-radius: 4px;\n    --search-item-text-color: var(--color-content-secondary);\n    --search-item-title-text-color: var(--color-content);\n    --search-item-active-background-color: rgba(0, 68, 212, 0.1);\n\n    // @tokens Other\n  }\n"])), baseColors, typography, borders);
+exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/mocks/Link.js

@@ -13,9 +13,12 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var lodash_1 = require("lodash");
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function Link(props) {
-    return (0, jsx_runtime_1.jsx)("a", __assign({ href: props.to }, props));
+    // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+    var filteredProps = (0, lodash_1.omit)(props, ['active']);
+    return (0, jsx_runtime_1.jsx)("a", __assign({ href: filteredProps.to }, filteredProps));
 }
 exports.Link = Link;

package/mocks/hooks/usePageData.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePageData = void 0;
 function usePageData() {
-    return { prevPage: null, nextPage: null };
+    return {
+        prevPage: { label: 'Intro', type: 'link', link: '#prev' },
+        nextPage: { label: 'FAQ', type: 'link', link: '#next' },
+    };
 }
 exports.usePageData = usePageData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/DesignTokens/borders.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';
+
+<Meta title="Design Tokens/Borders" />
+
+# Borders
+
+<br />
+
+## Borders
+
+<DesignTokenDocBlock categoryName="Borders" />
+
+## Border Radius
+
+<DesignTokenDocBlock categoryName="Border Radius" />
+
+## Border Colors
+
+<DesignTokenDocBlock categoryName="Border Colors" />

package/src/DesignTokens/colors.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';
+
+<Meta title="Design Tokens/Colors" />
+
+# Colors
+
+<br />
+
+## Base colors
+
+<DesignTokenDocBlock categoryName="Base Colors" />
+
+## HTTP colors
+
+<DesignTokenDocBlock categoryName="HTTP Colors" />
+
+## Response colors
+
+<DesignTokenDocBlock categoryName="Response colors" />
+
+## Admonition colors
+
+<DesignTokenDocBlock categoryName="Admonition colors" />

package/src/DesignTokens/page-layout.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';
+
+<Meta title="Design Tokens/Page layout" />
+
+# Page layout
+
+<br />
+
+## Sidebar
+
+<DesignTokenDocBlock categoryName="Sidebar" />