@redocly/theme 0.4.3 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/Markdown/Admonition.d.ts +1 -1
  2. package/Markdown/MarkdownWrapper.js +1 -1
  3. package/Sidebar/ArrowBack.js +1 -1
  4. package/Sidebar/BackButton.js +1 -1
  5. package/Sidebar/MobileSidebarButton.js +7 -3
  6. package/globalStyle.js +5 -5
  7. package/icons/AlertIcon/AlertIcon.js +4 -1
  8. package/package.json +1 -1
  9. package/src/Markdown/Admonition.tsx +1 -1
  10. package/src/Markdown/MarkdownWrapper.tsx +5 -0
  11. package/src/Sidebar/ArrowBack.tsx +7 -1
  12. package/src/Sidebar/BackButton.tsx +0 -5
  13. package/src/Sidebar/MobileSidebarButton.tsx +17 -20
  14. package/src/globalStyle.ts +26 -22
  15. package/src/icons/AlertIcon/AlertIcon.tsx +5 -0
  16. package/src/ui/Tiles/WideTile.tsx +1 -1
  17. package/ui/Tiles/WideTile.js +1 -1
package/Markdown/Admonition.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  interface AdmonitionTypeProps {
3
3
  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
4
4
  }
5
- interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
5
+ export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
6
6
  name?: string;
7
7
  }
8
8
  export declare function Admonition({ type, name, children, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
package/Markdown/MarkdownWrapper.js CHANGED
@@ -34,7 +34,7 @@ exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateOb
34
34
  // TODO: Can users specify another className or we should hardcode it?
35
35
  function headingAnchor(className) {
36
36
  if (className === void 0) { className = 'anchor'; }
37
- return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .", ".before {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n padding-right: var(--heading-anchor-offset-right);\n }\n\n .", ".after {\n display: inline-block;\n padding-left: 4px;\n }\n\n svg,\n .", " svg {\n fill: var(--heading-anchor-color);\n visibility: hidden;\n }\n\n :hover .", " svg,\n .", ":focus svg {\n visibility: visible;\n }\n "], ["\n .", ".before {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n padding-right: var(--heading-anchor-offset-right);\n }\n\n .", ".after {\n display: inline-block;\n padding-left: 4px;\n }\n\n svg,\n .", " svg {\n fill: var(--heading-anchor-color);\n visibility: hidden;\n }\n\n :hover .", " svg,\n .", ":focus svg {\n visibility: visible;\n }\n "])), className, className, className, className, className);
37
+ return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .", ".before {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n padding-right: var(--heading-anchor-offset-right);\n }\n\n .", ".after {\n display: inline-block;\n padding-left: 4px;\n }\n\n svg,\n .", " svg {\n fill: var(--heading-anchor-color);\n visibility: hidden;\n\n background-image: var(--heading-anchor-icon);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :hover .", " svg,\n .", ":focus svg {\n visibility: visible;\n }\n "], ["\n .", ".before {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n padding-right: var(--heading-anchor-offset-right);\n }\n\n .", ".after {\n display: inline-block;\n padding-left: 4px;\n }\n\n svg,\n .", " svg {\n fill: var(--heading-anchor-color);\n visibility: hidden;\n\n background-image: var(--heading-anchor-icon);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :hover .", " svg,\n .", ":focus svg {\n visibility: visible;\n }\n "])), className, className, className, className, className);
38
38
  }
39
39
  exports.headingAnchor = headingAnchor;
40
40
  exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
package/Sidebar/ArrowBack.js CHANGED
@@ -17,5 +17,5 @@ var Arrow = function (_a) {
17
17
  react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
18
18
  react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
19
19
  };
20
- exports.ArrowBack = (0, styled_components_1.default)(Arrow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n fill: var(--sidebar-group-item-chevron-color);\n"], ["\n fill: var(--sidebar-group-item-chevron-color);\n"])));
20
+ exports.ArrowBack = (0, styled_components_1.default)(Arrow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n fill: var(--sidebar-back-button-icon-color);\n margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n\n background-image: var(--sidebar-back-button-icon);\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n"], ["\n fill: var(--sidebar-back-button-icon-color);\n margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n\n background-image: var(--sidebar-back-button-icon);\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n"])));
21
21
  var templateObject_1;
package/Sidebar/BackButton.js CHANGED
@@ -18,5 +18,5 @@ function BackButton(_a) {
18
18
  children));
19
19
  }
20
20
  exports.BackButton = BackButton;
21
- var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: var(--sidebar-back-button-background-color);\n padding: 0;\n border: 0;\n outline: 0;\n display: flex;\n align-items: center;\n cursor: pointer;\n color: var(--sidebar-back-button-text-color);\n font-size: var(--sidebar-back-button-font-size);\n font-family: var(--sidebar-back-button-font-family);\n text-transform: var(--sidebar-back-button-transform);\n\n transition: color 0.25s ease;\n text-align: left;\n margin: var(--sidebar-back-button-margin);\n\n svg {\n margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n fill: var(--sidebar-back-button-icon-color);\n }\n\n &:hover {\n color: var(--sidebar-back-button-hover-text-color);\n background: var(--sidebar-back-button-hover-background-color);\n }\n"], ["\n width: 100%;\n background-color: var(--sidebar-back-button-background-color);\n padding: 0;\n border: 0;\n outline: 0;\n display: flex;\n align-items: center;\n cursor: pointer;\n color: var(--sidebar-back-button-text-color);\n font-size: var(--sidebar-back-button-font-size);\n font-family: var(--sidebar-back-button-font-family);\n text-transform: var(--sidebar-back-button-transform);\n\n transition: color 0.25s ease;\n text-align: left;\n margin: var(--sidebar-back-button-margin);\n\n svg {\n margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n fill: var(--sidebar-back-button-icon-color);\n }\n\n &:hover {\n color: var(--sidebar-back-button-hover-text-color);\n background: var(--sidebar-back-button-hover-background-color);\n }\n"])));
21
+ var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: var(--sidebar-back-button-background-color);\n padding: 0;\n border: 0;\n outline: 0;\n display: flex;\n align-items: center;\n cursor: pointer;\n color: var(--sidebar-back-button-text-color);\n font-size: var(--sidebar-back-button-font-size);\n font-family: var(--sidebar-back-button-font-family);\n text-transform: var(--sidebar-back-button-transform);\n\n transition: color 0.25s ease;\n text-align: left;\n margin: var(--sidebar-back-button-margin);\n\n &:hover {\n color: var(--sidebar-back-button-hover-text-color);\n background: var(--sidebar-back-button-hover-background-color);\n }\n"], ["\n width: 100%;\n background-color: var(--sidebar-back-button-background-color);\n padding: 0;\n border: 0;\n outline: 0;\n display: flex;\n align-items: center;\n cursor: pointer;\n color: var(--sidebar-back-button-text-color);\n font-size: var(--sidebar-back-button-font-size);\n font-family: var(--sidebar-back-button-font-family);\n text-transform: var(--sidebar-back-button-transform);\n\n transition: color 0.25s ease;\n text-align: left;\n margin: var(--sidebar-back-button-margin);\n\n &:hover {\n color: var(--sidebar-back-button-hover-text-color);\n background: var(--sidebar-back-button-hover-background-color);\n }\n"])));
22
22
  var templateObject_1;
package/Sidebar/MobileSidebarButton.js CHANGED
@@ -11,11 +11,15 @@ exports.MobileSidebarButton = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.MobileSidebarButton = styled_components_1.default.span.attrs(function () { return ({
13
13
  'data-component-name': 'Sidebar/MobileSidebarButton',
14
- }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--color-primary-500);\n width: 55px;\n user-select: none;\n height: 55px;\n bottom: 44px;\n cursor: pointer;\n position: fixed;\n right: 20px;\n z-index: 3;\n box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.75s;\n\n ", " {\n display: none;\n transform: rotate(180deg);\n }\n\n ", " {\n display: none !important;\n }\n\n :after {\n content: '';\n display: inline-block;\n position: absolute;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n width: 25px;\n height: 25px;\n background-color: #fff;\n -webkit-mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n no-repeat 50% 50%;\n mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n no-repeat 50% 50%;\n }\n"], ["\n background-color: var(--color-primary-500);\n width: 55px;\n user-select: none;\n height: 55px;\n bottom: 44px;\n cursor: pointer;\n position: fixed;\n right: 20px;\n z-index: 3;\n box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.75s;\n\n ", " {\n display: none;\n transform: rotate(180deg);\n }\n\n ", " {\n display: none !important;\n }\n\n :after {\n content: '';\n display: inline-block;\n position: absolute;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n width: 25px;\n height: 25px;\n background-color: #fff;\n -webkit-mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n no-repeat 50% 50%;\n mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n no-repeat 50% 50%;\n }\n"])), function (props) { return (props.opened ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
14
+ }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(\n ", "\n );\n width: 55px;\n user-select: none;\n height: 55px;\n bottom: 44px;\n cursor: pointer;\n position: fixed;\n right: 20px;\n z-index: 3;\n box-shadow: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.75s;\n\n background-image: var(--fab-icon);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 45%;\n\n &:hover {\n background-color: var(--fab-background-color);\n box-shadow: var(--fab-hover-box-shadow);\n }\n\n ", " {\n display: none;\n transform: rotate(180deg);\n }\n\n ", " {\n display: none !important;\n }\n"], ["\n background-color: var(\n ", "\n );\n width: 55px;\n user-select: none;\n height: 55px;\n bottom: 44px;\n cursor: pointer;\n position: fixed;\n right: 20px;\n z-index: 3;\n box-shadow: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.75s;\n\n background-image: var(--fab-icon);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 45%;\n\n &:hover {\n background-color: var(--fab-background-color);\n box-shadow: var(--fab-hover-box-shadow);\n }\n\n ", " {\n display: none;\n transform: rotate(180deg);\n }\n\n ", " {\n display: none !important;\n }\n"])), function (props) { return (props.opened ? '--fab-active-background' : '--fab-background-color'); }, function (props) {
15
+ return props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)';
16
+ }, function (props) { return (props.opened ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
17
+ var _b;
15
18
  var theme = _a.theme;
16
- return theme.mediaQueries.medium;
19
+ return (_b = theme.mediaQueries) === null || _b === void 0 ? void 0 : _b.medium;
17
20
  }, function (_a) {
21
+ var _b;
18
22
  var theme = _a.theme;
19
- return theme.mediaQueries.print;
23
+ return (_b = theme.mediaQueries) === null || _b === void 0 ? void 0 : _b.print;
20
24
  });
21
25
  var templateObject_1;
package/globalStyle.js CHANGED
@@ -10,21 +10,21 @@ var darkColors_1 = require("./ui/darkColors");
10
10
  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\n --color-primary-50: #87ceeb;\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-50: #ffffff;\n --color-secondary-100: #f5f7fa;\n --color-secondary-200: #f3f4f6;\n --color-secondary-300: #e4e7eb;\n --color-secondary-400: #d5dae0;\n --color-secondary-500: #c7cdd5;\n --color-secondary-600: #b8c0ca;\n --color-secondary-700: #a9b3c0;\n --color-secondary-800: #9ba6b5;\n --color-secondary-900: #52606d;\n\n --color-emphasis-50: #ffffff;\n --color-emphasis-100: #e9eaec;\n --color-emphasis-200: #cdd0d5;\n --color-emphasis-300: #b2b6bd;\n --color-emphasis-400: #969ca6;\n --color-emphasis-500: #7a828f;\n --color-emphasis-600: #626974;\n --color-emphasis-700: #4b5058;\n --color-emphasis-800: #1f2933;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-50: #e6eef8;\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-50: #ddffe1;\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-50: #ffeda5;\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-50: #ffeaea;\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 --colors-translucent: rgb(226 230 236 / 37%);\n\n // @tokens End\n"], ["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n\n --color-primary-50: #87ceeb;\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-50: #ffffff;\n --color-secondary-100: #f5f7fa;\n --color-secondary-200: #f3f4f6;\n --color-secondary-300: #e4e7eb;\n --color-secondary-400: #d5dae0;\n --color-secondary-500: #c7cdd5;\n --color-secondary-600: #b8c0ca;\n --color-secondary-700: #a9b3c0;\n --color-secondary-800: #9ba6b5;\n --color-secondary-900: #52606d;\n\n --color-emphasis-50: #ffffff;\n --color-emphasis-100: #e9eaec;\n --color-emphasis-200: #cdd0d5;\n --color-emphasis-300: #b2b6bd;\n --color-emphasis-400: #969ca6;\n --color-emphasis-500: #7a828f;\n --color-emphasis-600: #626974;\n --color-emphasis-700: #4b5058;\n --color-emphasis-800: #1f2933;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-50: #e6eef8;\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-50: #ddffe1;\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-50: #ffeda5;\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-50: #ffeaea;\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 --colors-translucent: rgb(226 230 236 / 37%);\n\n // @tokens End\n"])));
11
11
  var httpColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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: #4d5d86;\n\n // @tokens End\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: #4d5d86;\n\n // @tokens End\n"])));
12
12
  var typography = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --text-color: var(--color-emphasis-800);\n --text-color-inverse: var(--color-secondary-100);\n --text-color-secondary: var(--color-emphasis-500);\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 --text-smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n // @tokens End\n"], ["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --text-color: var(--color-emphasis-800);\n --text-color-inverse: var(--color-secondary-100);\n --text-color-secondary: var(--color-emphasis-500);\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 --text-smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n // @tokens End\n"])));
13
- var headingsTypography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n * {\n box-sizing: border-box;\n }\n\n /**\n * @tokens Headings common styles\n */\n\n --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --heading-margin-top: 1.25em; // @presenter Spacing\n --heading-margin-bottom: 0.9em; // @presenter Spacing\n --heading-text-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Typography heading anchor icon\n */\n\n --heading-anchor-offset-right: 4px; // @presenter Spacing\n --heading-anchor-color: var(--color-primary-500); // @presenter Color\n /*--heading-anchor-icon: icons later */\n\n // TODO: implement a theme setting for heading-anchor-location: left right\n\n /**\n * @tokens Heading level 1\n */\n\n --h1-font-family: var(--heading-font-family); // @presenter FontFamily\n --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h1-font-size: 36px; // @presenter FontSize\n --h1-line-height: 36px; // @presenter LineHeight\n --h1-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h1-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 2\n */\n\n --h2-font-family: var(--heading-font-family); // @presenter FontFamily\n --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h2-font-size: 28px; // @presenter FontSize\n --h2-line-height: 28px; // @presenter LineHeight\n --h2-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h2-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 3\n */\n\n --h3-font-family: var(--heading-font-family); // @presenter FontFamily\n --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h3-font-size: 18px; // @presenter FontSize\n --h3-line-height: 18px; // @presenter LineHeight\n --h3-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h3-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 4\n */\n\n --h4-font-family: var(--heading-font-family); // @presenter FontFamily\n --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h4-font-size: 16px; // @presenter FontSize\n --h4-line-height: 16px; // @presenter LineHeight\n --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h4-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h4-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 5\n */\n\n --h5-font-family: var(\n --heading-font-family\n ); /* Token Description Example @presenter FontFamily */\n --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h5-font-size: 14px; // @presenter FontSize\n --h5-line-height: 14px; // @presenter LineHeight\n --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h5-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h5-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 6\n */\n\n --h6-font-family: var(--heading-font-family); // @presenter FontFamily\n --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h6-font-size: 12px; // @presenter FontSize\n --h6-line-height: 12px; // @presenter LineHeight\n --h6-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h6-text-color: var(--heading-text-color); // @presenter Color\n\n // @tokens End\n"], ["\n * {\n box-sizing: border-box;\n }\n\n /**\n * @tokens Headings common styles\n */\n\n --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --heading-margin-top: 1.25em; // @presenter Spacing\n --heading-margin-bottom: 0.9em; // @presenter Spacing\n --heading-text-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Typography heading anchor icon\n */\n\n --heading-anchor-offset-right: 4px; // @presenter Spacing\n --heading-anchor-color: var(--color-primary-500); // @presenter Color\n /*--heading-anchor-icon: icons later */\n\n // TODO: implement a theme setting for heading-anchor-location: left right\n\n /**\n * @tokens Heading level 1\n */\n\n --h1-font-family: var(--heading-font-family); // @presenter FontFamily\n --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h1-font-size: 36px; // @presenter FontSize\n --h1-line-height: 36px; // @presenter LineHeight\n --h1-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h1-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 2\n */\n\n --h2-font-family: var(--heading-font-family); // @presenter FontFamily\n --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h2-font-size: 28px; // @presenter FontSize\n --h2-line-height: 28px; // @presenter LineHeight\n --h2-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h2-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 3\n */\n\n --h3-font-family: var(--heading-font-family); // @presenter FontFamily\n --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h3-font-size: 18px; // @presenter FontSize\n --h3-line-height: 18px; // @presenter LineHeight\n --h3-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h3-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 4\n */\n\n --h4-font-family: var(--heading-font-family); // @presenter FontFamily\n --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h4-font-size: 16px; // @presenter FontSize\n --h4-line-height: 16px; // @presenter LineHeight\n --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h4-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h4-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 5\n */\n\n --h5-font-family: var(\n --heading-font-family\n ); /* Token Description Example @presenter FontFamily */\n --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h5-font-size: 14px; // @presenter FontSize\n --h5-line-height: 14px; // @presenter LineHeight\n --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h5-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h5-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 6\n */\n\n --h6-font-family: var(--heading-font-family); // @presenter FontFamily\n --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h6-font-size: 12px; // @presenter FontSize\n --h6-line-height: 12px; // @presenter LineHeight\n --h6-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h6-text-color: var(--heading-text-color); // @presenter Color\n\n // @tokens End\n"])));
13
+ var headingsTypography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n * {\n box-sizing: border-box;\n }\n\n /**\n * @tokens Headings common styles\n */\n\n --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --heading-margin-top: 1.25em; // @presenter Spacing\n --heading-margin-bottom: 0.9em; // @presenter Spacing\n --heading-text-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Typography heading anchor icon\n */\n\n --heading-anchor-offset-right: 4px; // @presenter Spacing\n --heading-anchor-color: var(--color-primary-500); // @presenter Color\n --heading-anchor-icon: none;\n\n // TODO: implement a theme setting for heading-anchor-location: left right\n\n /**\n * @tokens Heading level 1\n */\n\n --h1-font-family: var(--heading-font-family); // @presenter FontFamily\n --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h1-font-size: 36px; // @presenter FontSize\n --h1-line-height: 36px; // @presenter LineHeight\n --h1-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h1-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 2\n */\n\n --h2-font-family: var(--heading-font-family); // @presenter FontFamily\n --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h2-font-size: 28px; // @presenter FontSize\n --h2-line-height: 28px; // @presenter LineHeight\n --h2-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h2-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 3\n */\n\n --h3-font-family: var(--heading-font-family); // @presenter FontFamily\n --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h3-font-size: 18px; // @presenter FontSize\n --h3-line-height: 18px; // @presenter LineHeight\n --h3-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h3-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 4\n */\n\n --h4-font-family: var(--heading-font-family); // @presenter FontFamily\n --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h4-font-size: 16px; // @presenter FontSize\n --h4-line-height: 16px; // @presenter LineHeight\n --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h4-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h4-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 5\n */\n\n --h5-font-family: var(\n --heading-font-family\n ); /* Token Description Example @presenter FontFamily */\n --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h5-font-size: 14px; // @presenter FontSize\n --h5-line-height: 14px; // @presenter LineHeight\n --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h5-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h5-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 6\n */\n\n --h6-font-family: var(--heading-font-family); // @presenter FontFamily\n --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h6-font-size: 12px; // @presenter FontSize\n --h6-line-height: 12px; // @presenter LineHeight\n --h6-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h6-text-color: var(--heading-text-color); // @presenter Color\n\n // @tokens End\n"], ["\n * {\n box-sizing: border-box;\n }\n\n /**\n * @tokens Headings common styles\n */\n\n --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --heading-margin-top: 1.25em; // @presenter Spacing\n --heading-margin-bottom: 0.9em; // @presenter Spacing\n --heading-text-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Typography heading anchor icon\n */\n\n --heading-anchor-offset-right: 4px; // @presenter Spacing\n --heading-anchor-color: var(--color-primary-500); // @presenter Color\n --heading-anchor-icon: none;\n\n // TODO: implement a theme setting for heading-anchor-location: left right\n\n /**\n * @tokens Heading level 1\n */\n\n --h1-font-family: var(--heading-font-family); // @presenter FontFamily\n --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h1-font-size: 36px; // @presenter FontSize\n --h1-line-height: 36px; // @presenter LineHeight\n --h1-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h1-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 2\n */\n\n --h2-font-family: var(--heading-font-family); // @presenter FontFamily\n --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h2-font-size: 28px; // @presenter FontSize\n --h2-line-height: 28px; // @presenter LineHeight\n --h2-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h2-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 3\n */\n\n --h3-font-family: var(--heading-font-family); // @presenter FontFamily\n --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h3-font-size: 18px; // @presenter FontSize\n --h3-line-height: 18px; // @presenter LineHeight\n --h3-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h3-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 4\n */\n\n --h4-font-family: var(--heading-font-family); // @presenter FontFamily\n --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h4-font-size: 16px; // @presenter FontSize\n --h4-line-height: 16px; // @presenter LineHeight\n --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h4-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h4-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 5\n */\n\n --h5-font-family: var(\n --heading-font-family\n ); /* Token Description Example @presenter FontFamily */\n --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h5-font-size: 14px; // @presenter FontSize\n --h5-line-height: 14px; // @presenter LineHeight\n --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h5-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h5-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 6\n */\n\n --h6-font-family: var(--heading-font-family); // @presenter FontFamily\n --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h6-font-size: 12px; // @presenter FontSize\n --h6-line-height: 12px; // @presenter LineHeight\n --h6-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h6-text-color: var(--heading-text-color); // @presenter Color\n\n // @tokens End\n"])));
14
14
  var common = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --border-width: 1px;\n --border-style: solid;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --border-radius: 4px;\n --border-radius-lg: calc(var(--border-radius) * 2);\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --border-color: var(--color-secondary-300);\n --border-color-secondary: var(--color-emphasis-600);\n --background-color: var(--color-secondary-50);\n --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"], ["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --border-width: 1px;\n --border-style: solid;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --border-radius: 4px;\n --border-radius-lg: calc(var(--border-radius) * 2);\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --border-color: var(--color-secondary-300);\n --border-color-secondary: var(--color-emphasis-600);\n --background-color: var(--color-secondary-50);\n --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"])));
15
15
  var buttons = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __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\n /**\n * @tokens Button default colors\n */\n\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-emphasis-400); // @presenter Color\n --button-border-color: var(--color-emphasis-400); // @presenter Color\n\n --button-hover-color: var(--color-emphasis-700); // @presenter Color\n --button-hover-background-color: var(--color-emphasis-500); // @presenter Color\n --button-hover-border-color: var(--color-emphasis-500); // @presenter Color\n\n --button-active-color: var(--color-emphasis-900); // @presenter Color\n --button-active-background-color: var(--color-emphasis-600); // @presenter Color\n --button-active-border-color: var(--color-emphasis-600); // @presenter Color\n\n /* TODO more styles for disabled state ??? */\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-emphasis-200); // @presenter Color\n\n /**\n * @tokens Button primary colors\n */\n .button-color-primary {\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-primary-500); // @presenter Color\n --button-border-color: var(--color-primary-500); // @presenter Color\n\n --button-hover-background-color: var(--color-primary-600); // @presenter Color\n --button-hover-border-color: var(--color-primary-600); // @presenter Color\n\n --button-active-background-color: var(--color-primary-700); // @presenter Color\n --button-active-border-color: var(--color-primary-700); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-primary-100); // @presenter Color\n }\n\n /**\n * @tokens Button secondary colors\n */\n .button-color-secondary {\n --button-color: var(--color-emphasis-700); // @presenter Color\n --button-background-color: var(--color-secondary-400); // @presenter Color\n --button-border-color: var(--color-secondary-400); // @presenter Color\n\n --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n --button-hover-border-color: var(--color-secondary-500); // @presenter Color\n\n --button-active-background-color: var(--color-secondary-600); // @presenter Color\n --button-active-border-color: var(--color-secondary-600); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-secondary-200); // @presenter Color\n }\n\n /**\n * @tokens Button borders\n */\n --button-border-radius: var(--border-radius); // @presenter BorderRadius\n --button-margin: 5px; // @presenter Spacing\n --button-box-shadow: none; // @presenter Shadow\n --button-hover-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n /**\n * @tokens Button typography\n */\n --button-font-family: inherit; // @presenter FontFamily\n --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n --button-small-font-size: 12px; // @presenter FontSize\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px; // @presenter Spacing\n\n --button-medium-font-size: 14px; // @presenter FontSize\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px; // @presenter Spacing\n\n --button-large-font-size: 14px; // @presenter FontSize\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px; // @presenter Spacing\n\n --button-xlarge-font-size: 16px; // @presenter FontSize\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px; // @presenter Spacing\n\n // @tokens End\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\n /**\n * @tokens Button default colors\n */\n\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-emphasis-400); // @presenter Color\n --button-border-color: var(--color-emphasis-400); // @presenter Color\n\n --button-hover-color: var(--color-emphasis-700); // @presenter Color\n --button-hover-background-color: var(--color-emphasis-500); // @presenter Color\n --button-hover-border-color: var(--color-emphasis-500); // @presenter Color\n\n --button-active-color: var(--color-emphasis-900); // @presenter Color\n --button-active-background-color: var(--color-emphasis-600); // @presenter Color\n --button-active-border-color: var(--color-emphasis-600); // @presenter Color\n\n /* TODO more styles for disabled state ??? */\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-emphasis-200); // @presenter Color\n\n /**\n * @tokens Button primary colors\n */\n .button-color-primary {\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-primary-500); // @presenter Color\n --button-border-color: var(--color-primary-500); // @presenter Color\n\n --button-hover-background-color: var(--color-primary-600); // @presenter Color\n --button-hover-border-color: var(--color-primary-600); // @presenter Color\n\n --button-active-background-color: var(--color-primary-700); // @presenter Color\n --button-active-border-color: var(--color-primary-700); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-primary-100); // @presenter Color\n }\n\n /**\n * @tokens Button secondary colors\n */\n .button-color-secondary {\n --button-color: var(--color-emphasis-700); // @presenter Color\n --button-background-color: var(--color-secondary-400); // @presenter Color\n --button-border-color: var(--color-secondary-400); // @presenter Color\n\n --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n --button-hover-border-color: var(--color-secondary-500); // @presenter Color\n\n --button-active-background-color: var(--color-secondary-600); // @presenter Color\n --button-active-border-color: var(--color-secondary-600); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-secondary-200); // @presenter Color\n }\n\n /**\n * @tokens Button borders\n */\n --button-border-radius: var(--border-radius); // @presenter BorderRadius\n --button-margin: 5px; // @presenter Spacing\n --button-box-shadow: none; // @presenter Shadow\n --button-hover-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n /**\n * @tokens Button typography\n */\n --button-font-family: inherit; // @presenter FontFamily\n --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n --button-small-font-size: 12px; // @presenter FontSize\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px; // @presenter Spacing\n\n --button-medium-font-size: 14px; // @presenter FontSize\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px; // @presenter Spacing\n\n --button-large-font-size: 14px; // @presenter FontSize\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px; // @presenter Spacing\n\n --button-xlarge-font-size: 16px; // @presenter FontSize\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px; // @presenter Spacing\n\n // @tokens End\n"])));
16
- var sidebar = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: var(--background-color);\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n --sidebar-item-active-background-color: var(--border-color);\n\n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n\n //--sidebar-back-button-icon: <svg string or url>\n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"], ["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: var(--background-color);\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n --sidebar-item-active-background-color: var(--border-color);\n\n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n\n //--sidebar-back-button-icon: <svg string or url>\n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"])));
17
- var admonition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\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\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n /* --admonition-info-icon: figure this out latter */\n\n /**\n * @tokens Admonition type attention\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color\n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n /* --admonition-attention-icon: figure this out latter */\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n /* --admonition-warning-icon: figure this out latter */\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n /* --admonition-danger-icon: figure this out latter */\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n /* --admonition-success-icon: figure this out latter */\n\n // @tokens End\n"], ["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\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\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n /* --admonition-info-icon: figure this out latter */\n\n /**\n * @tokens Admonition type attention\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color\n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n /* --admonition-attention-icon: figure this out latter */\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n /* --admonition-warning-icon: figure this out latter */\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n /* --admonition-danger-icon: figure this out latter */\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n /* --admonition-success-icon: figure this out latter */\n\n // @tokens End\n"])));
16
+ var sidebar = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: var(--background-color);\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-active-background-color: var(--border-color);\n\n --sidebar-item-hover-background-color: var(--border-color);\n --sidebar-item-hover-color: var(--text-color);\n \n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n --sidebar-back-button-icon: none;\n \n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"], ["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: var(--background-color);\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-active-background-color: var(--border-color);\n\n --sidebar-item-hover-background-color: var(--border-color);\n --sidebar-item-hover-color: var(--text-color);\n \n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n --sidebar-back-button-icon: none;\n \n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"])));
17
+ var admonition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\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\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n --admonition-info-icon: none;\n\n /**\n * @tokens Admonition type attention\n * @presenter Color\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color \n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n --admonition-attention-icon: none;\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n --admonition-warning-icon: none;\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n --admonition-danger-icon: none;\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n --admonition-success-icon: none;\n\n // @tokens End\n"], ["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\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\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n --admonition-info-icon: none;\n\n /**\n * @tokens Admonition type attention\n * @presenter Color\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color \n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n --admonition-attention-icon: none;\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n --admonition-warning-icon: none;\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n --admonition-danger-icon: none;\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n --admonition-success-icon: none;\n\n // @tokens End\n"])));
18
18
  var responsePanelColors = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n /**\n * @tokens Response Panel Common\n */\n\n --panel-response-heading-padding: 10px 20px;\n --panel-response-heading-font-size: var(--font-size-base);\n --panel-response-heading-line-height: 20px;\n --panel-response-heading-font-weight: var(--font-weight-bold);\n --panel-response-heading-text-color: var(--text-color);\n\n --panel-response-body-text-color: var(--text-color);\n\n /**\n * @tokens Response Panel Success colors\n * @presenter Color\n */\n\n --panel-response-success-border-color: var(--color-success-100);\n --panel-response-success-heading-background-color: var(--color-success-50);\n --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-success-body-background-color: transparent;\n --panel-response-success-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-success-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Error colors\n * @presenter Color\n */\n\n --panel-response-error-border-color: var(--color-error-100);\n --panel-response-error-heading-background-color: var(--color-error-50);\n --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-error-body-background-color: transparent;\n --panel-response-error-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-error-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Redirect colors\n * @presenter Color\n */\n\n --panel-response-redirect-border-color: var(--color-warning-100);\n --panel-response-redirect-heading-background-color: var(--color-warning-50);\n --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-redirect-body-background-color: transparent;\n --panel-response-redirect-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Info colors\n * @presenter Color\n */\n\n --panel-response-info-border-color: var(--color-accent-100);\n --panel-response-info-heading-background-color: var(--color-accent-50);\n --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-info-body-background-color: transparent;\n --panel-response-info-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-info-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Callback colors\n * @presenter Color\n */\n\n --panel-response-callback-border-color: var(--color-secondary-300);\n --panel-response-callback-heading-background-color: var(--color-secondary-300);\n --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-callback-body-background-color: transparent;\n --panel-response-callback-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-callback-body-text-color: var(--panel-response-body-text-color);\n\n // @tokens End\n"], ["\n /**\n * @tokens Response Panel Common\n */\n\n --panel-response-heading-padding: 10px 20px;\n --panel-response-heading-font-size: var(--font-size-base);\n --panel-response-heading-line-height: 20px;\n --panel-response-heading-font-weight: var(--font-weight-bold);\n --panel-response-heading-text-color: var(--text-color);\n\n --panel-response-body-text-color: var(--text-color);\n\n /**\n * @tokens Response Panel Success colors\n * @presenter Color\n */\n\n --panel-response-success-border-color: var(--color-success-100);\n --panel-response-success-heading-background-color: var(--color-success-50);\n --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-success-body-background-color: transparent;\n --panel-response-success-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-success-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Error colors\n * @presenter Color\n */\n\n --panel-response-error-border-color: var(--color-error-100);\n --panel-response-error-heading-background-color: var(--color-error-50);\n --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-error-body-background-color: transparent;\n --panel-response-error-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-error-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Redirect colors\n * @presenter Color\n */\n\n --panel-response-redirect-border-color: var(--color-warning-100);\n --panel-response-redirect-heading-background-color: var(--color-warning-50);\n --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-redirect-body-background-color: transparent;\n --panel-response-redirect-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Info colors\n * @presenter Color\n */\n\n --panel-response-info-border-color: var(--color-accent-100);\n --panel-response-info-heading-background-color: var(--color-accent-50);\n --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-info-body-background-color: transparent;\n --panel-response-info-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-info-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Callback colors\n * @presenter Color\n */\n\n --panel-response-callback-border-color: var(--color-secondary-300);\n --panel-response-callback-heading-background-color: var(--color-secondary-300);\n --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-callback-body-background-color: transparent;\n --panel-response-callback-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-callback-body-text-color: var(--panel-response-body-text-color);\n\n // @tokens End\n"])));
19
19
  var apiReferencePanels = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n /**\n * @tokens Panels spacing\n * @presenter Spacing\n */\n\n --panel-gap-horizontal: calc(var(--spacing-unit) * 8);\n --panel-gap-vertical: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel common\n */\n\n --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --panel-border: 1px solid var(--border-color); // @presenter Border\n\n --panel-line-height: var(--line-height-base); // @presenter LineHeight\n --panel-font-size: var(--font-size-base); // @presenter FontSize\n --panel-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n /**\n * @tokens Panel heading common\n */\n\n --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-heading-font-size: 18px; // @presenter FontSize\n --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --panel-heading-padding: calc(var(--spacing-unit) * 4);\n --panel-heading-line-height: 1; // @presenter LineHeight\n --panel-heading-whit-space: 'nowrap';\n\n /**\n * @tokens Panel body common\n */\n\n --panel-body-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-body-font-size: var(--font-size-base); // @presenter FontSize\n --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --panel-body-padding: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel schemas common\n */\n\n --panel-schemas-text-color: var(--text-color); // @presenter Color\n --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-schemas-font-weight: var(--panel-font-weight); // @presenter\n --panel-schemas-background-color: var(--background-color); // @presenter Color\n --panel-schemas-border: var(--panel-border); // @presenter Border\n --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Panel schemas body common\n */\n\n --panel-schemas-body-text-color: var(--text-color); // @presenter Color\n --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);\n --panel-schemas-body-background-color: var(--background-color); // @presenter Color\n --panel-schemas-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel schemas heading common\n */\n\n --panel-schemas-heading-text-color: var(--text-color); // @presenter Color\n --panel-schemas-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-schemas-heading-font-size: var(--panel-heading-font-size); // @presenter FontSize\n --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight\n --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight\n --panel-schemas-heading-padding: var(--panel-heading-padding);\n --panel-schemas-heading-background-color: var(--background-color); // @presenter Color\n --panel-schemas-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel default, response, callback, security schemas\n */\n\n .panel-request-schemas,\n .panel-response-schemas,\n .panel-callback-schemas,\n .panel-security-schemas,\n .panel-default {\n --panel-text-color: var(--panel-schemas-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-schemas-font-family);\n --panel-font-size-local: var(--panel-schemas-font-size);\n --panel-font-weight-local: var(--panel-schemas-font-weight);\n --panel-background-color: var(--panel-schemas-background-color); // @presenter Color\n --panel-border-local: var(--panel-schemas-border);\n --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color\n --panel-body-font-family-local: var(--panel-schemas-body-font-family);\n --panel-body-font-size-local: var(--panel-schemas-body-font-size);\n --panel-body-font-weight-local: var(--panel-schemas-body-font-weight);\n --panel-body-padding-local: var(--panel-schemas-body-padding);\n --panel-body-background-color: var(--panel-schemas-body-background-color); // @presenter Color\n --panel-body-border: var(--panel-schemas-body-border); // @presenter Border\n\n --panel-heading-text-color: var(--panel-schemas-heading-text-color); // @presenter Color\n --panel-heading-font-family-local: var(--panel-schemas-heading-font-family);\n --panel-heading-font-size-local: var(--panel-schemas-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);\n --panel-heading-padding-local: var(--panel-schemas-heading-padding);\n --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color\n --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border\n --panel-heading-white-space-local: var(--panel-heading-whit-space);\n }\n\n /**\n * @tokens Panel samples common\n */\n\n --panel-samples-block-background-color: var(--background-color); // @presenter Color\n --panel-samples-width: 50%;\n\n --panel-samples-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight\n --panel-samples-background-color: #52606d; // @presenter Color\n --panel-samples-border: var(--panel-border); // @presenter Border\n --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color\n\n /**\n * @tokens Panel samples body common\n */\n\n --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-samples-body-padding: var(--panel-body-padding);\n --panel-samples-body-background-color: #52606d; // @presenter Color\n --panel-samples-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel samples heading common\n */\n\n --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-samples-heading-line-height: 30px; // @presenter LineHeight\n --panel-samples-heading-padding: 0 20px;\n --panel-samples-heading-background-color: #323f4b; // @presenter Color\n --panel-samples-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel try-it, request-samples, response-samples, callback samples\n */\n\n .panel-try-it,\n .panel-request-samples,\n .panel-response-samples,\n .panel-callback-samples {\n --panel-text-color: var(--panel-samples-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-samples-font-family);\n --panel-font-size-local: var(--panel-samples-font-size);\n --panel-font-weight-local: var(--panel-samples-font-weight);\n --panel-background-color: var(--panel-samples-background-color); // @presenter Color\n --panel-border-local: var(--panel-samples-border);\n --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color\n --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color\n\n --panel-body-font-family-local: var(--panel-samples-body-font-family);\n --panel-body-font-size-local: var(--panel-samples-body-font-size);\n --panel-body-font-weight-local: var(--panel-samples-body-font-weight);\n --panel-body-padding-local: var(--panel-samples-body-padding);\n --panel-body-border-local: var(--panel-samples-body-border);\n\n --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color\n --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-heading-font-family-local: var(--panel-samples-heading-font-family);\n --panel-heading-font-size-local: var(--panel-samples-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-samples-heading-line-height);\n --panel-heading-padding-local: var(--panel-samples-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n }\n\n /**\n * @tokens Panel response success, info, error, redirect, callback common\n */\n\n .panel-response-success,\n .panel-response-info,\n .panel-response-error,\n .panel-response-redirect,\n .panel-response-callback {\n --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color\n\n --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color\n --panel-heading-font-size-local: var(--panel-response-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-response-heading-line-height);\n --panel-heading-padding-local: var(--panel-response-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n --panel-heading-white-space-local: normal;\n --panel-body-padding-local: var(--panel-body-padding);\n }\n\n /**\n * @tokens Panel response success colors\n * @presenter Color\n */\n\n .panel-response-success {\n --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-success-body-text-color);\n --panel-body-background-color: var(--panel-response-success-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-success-heading-background-color);\n --panel-heading-text-color: var(--panel-response-success-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response info colors\n * @presenter Color\n */\n\n .panel-response-info {\n --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-info-body-text-color);\n --panel-body-background-color: var(--panel-response-info-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-info-heading-background-color);\n --panel-heading-text-color: var(--panel-response-info-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response error colors\n * @presenter Color\n */\n\n .panel-response-error {\n --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-error-body-text-color);\n --panel-body-background-color: var(--panel-response-error-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-error-heading-background-color);\n --panel-heading-text-color: var(--panel-response-error-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response redirect colors\n * @presenter Color\n */\n\n .panel-response-redirect {\n --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border\n --panel-body-text-color: var(--panel-response-redirect-body-text-color);\n\n --panel-body-background-color: var(--panel-response-redirect-body-background-color);\n --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);\n --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response callback colors\n * @presenter Color\n */\n\n .panel-response-callback {\n --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-callback-body-text-color);\n --panel-body-background-color: var(--panel-response-callback-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-callback-heading-background-color);\n --panel-heading-text-color: var(--panel-response-callback-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel try-it nested common\n * @presenter Color\n */\n\n --panel-try-it-nested-text-color: var(--text-color-inverse);\n --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);\n\n --panel-try-it-nested-body-background-color: #3e4c59;\n --panel-try-it-nested-body-text-color: var(--text-color-inverse);\n --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing\n --panel-try-it-nested-body-border-color: var(--color-secondary-800);\n\n --panel-try-it-nested-heading-text-color: var(--text-color-inverse);\n --panel-try-it-nested-heading-background-color: transparent;\n --panel-try-it-nested-heading-border-color: var(--color-secondary-800);\n\n /**\n * @tokens Panel try-it nested\n * @presenter Color\n */\n\n .panel-try-it-nested {\n --panel-text-color: var(--panel-try-it-nested-text-color);\n --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);\n\n --panel-body-text-color: var(--panel-try-it-nested-body-text-color);\n --panel-body-background-color: var(--panel-try-it-nested-body-background-color);\n --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing\n\n --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);\n --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);\n }\n\n /**\n * @tokens Panel samples tabs\n */\n\n --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n\n --panel-samples-tabs-background-color: transparent; // @presenter Color\n --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color\n --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it tabs\n */\n\n --panel-try-it-tabs-font-size: 12px; // @presenter FontSize\n --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color\n\n --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color\n --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color\n\n --panel-try-it-tabs-border-color: transparent; // @presenter Color\n --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color\n --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color\n\n /**\n * @tokens Panel try-it action button\n */\n\n --panel-try-it-action-button-width: auto;\n --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color\n --panel-try-it-action-button-border-color: transparent; // @presenter Color\n\n --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color\n --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color\n\n --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color\n --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color\n\n /**\n * @tokens Panel samples other styles\n */\n\n --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-dropdown-border: unset; // @presenter Border\n\n --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-input-border: unset; // @presenter Border\n\n --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-border: unset; // @presenter Border\n\n // @tokens End\n\n // TODO PUL RIGHT section - related to pull right - fix later\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --layout-right-rail-width: 50%;\n --layout-right-rail-background-color: transparent;\n"], ["\n /**\n * @tokens Panels spacing\n * @presenter Spacing\n */\n\n --panel-gap-horizontal: calc(var(--spacing-unit) * 8);\n --panel-gap-vertical: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel common\n */\n\n --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --panel-border: 1px solid var(--border-color); // @presenter Border\n\n --panel-line-height: var(--line-height-base); // @presenter LineHeight\n --panel-font-size: var(--font-size-base); // @presenter FontSize\n --panel-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n /**\n * @tokens Panel heading common\n */\n\n --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-heading-font-size: 18px; // @presenter FontSize\n --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --panel-heading-padding: calc(var(--spacing-unit) * 4);\n --panel-heading-line-height: 1; // @presenter LineHeight\n --panel-heading-whit-space: 'nowrap';\n\n /**\n * @tokens Panel body common\n */\n\n --panel-body-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-body-font-size: var(--font-size-base); // @presenter FontSize\n --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --panel-body-padding: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel schemas common\n */\n\n --panel-schemas-text-color: var(--text-color); // @presenter Color\n --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-schemas-font-weight: var(--panel-font-weight); // @presenter\n --panel-schemas-background-color: var(--background-color); // @presenter Color\n --panel-schemas-border: var(--panel-border); // @presenter Border\n --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Panel schemas body common\n */\n\n --panel-schemas-body-text-color: var(--text-color); // @presenter Color\n --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);\n --panel-schemas-body-background-color: var(--background-color); // @presenter Color\n --panel-schemas-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel schemas heading common\n */\n\n --panel-schemas-heading-text-color: var(--text-color); // @presenter Color\n --panel-schemas-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-schemas-heading-font-size: var(--panel-heading-font-size); // @presenter FontSize\n --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight\n --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight\n --panel-schemas-heading-padding: var(--panel-heading-padding);\n --panel-schemas-heading-background-color: var(--background-color); // @presenter Color\n --panel-schemas-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel default, response, callback, security schemas\n */\n\n .panel-request-schemas,\n .panel-response-schemas,\n .panel-callback-schemas,\n .panel-security-schemas,\n .panel-default {\n --panel-text-color: var(--panel-schemas-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-schemas-font-family);\n --panel-font-size-local: var(--panel-schemas-font-size);\n --panel-font-weight-local: var(--panel-schemas-font-weight);\n --panel-background-color: var(--panel-schemas-background-color); // @presenter Color\n --panel-border-local: var(--panel-schemas-border);\n --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color\n --panel-body-font-family-local: var(--panel-schemas-body-font-family);\n --panel-body-font-size-local: var(--panel-schemas-body-font-size);\n --panel-body-font-weight-local: var(--panel-schemas-body-font-weight);\n --panel-body-padding-local: var(--panel-schemas-body-padding);\n --panel-body-background-color: var(--panel-schemas-body-background-color); // @presenter Color\n --panel-body-border: var(--panel-schemas-body-border); // @presenter Border\n\n --panel-heading-text-color: var(--panel-schemas-heading-text-color); // @presenter Color\n --panel-heading-font-family-local: var(--panel-schemas-heading-font-family);\n --panel-heading-font-size-local: var(--panel-schemas-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);\n --panel-heading-padding-local: var(--panel-schemas-heading-padding);\n --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color\n --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border\n --panel-heading-white-space-local: var(--panel-heading-whit-space);\n }\n\n /**\n * @tokens Panel samples common\n */\n\n --panel-samples-block-background-color: var(--background-color); // @presenter Color\n --panel-samples-width: 50%;\n\n --panel-samples-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight\n --panel-samples-background-color: #52606d; // @presenter Color\n --panel-samples-border: var(--panel-border); // @presenter Border\n --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color\n\n /**\n * @tokens Panel samples body common\n */\n\n --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-samples-body-padding: var(--panel-body-padding);\n --panel-samples-body-background-color: #52606d; // @presenter Color\n --panel-samples-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel samples heading common\n */\n\n --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-samples-heading-line-height: 30px; // @presenter LineHeight\n --panel-samples-heading-padding: 0 20px;\n --panel-samples-heading-background-color: #323f4b; // @presenter Color\n --panel-samples-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel try-it, request-samples, response-samples, callback samples\n */\n\n .panel-try-it,\n .panel-request-samples,\n .panel-response-samples,\n .panel-callback-samples {\n --panel-text-color: var(--panel-samples-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-samples-font-family);\n --panel-font-size-local: var(--panel-samples-font-size);\n --panel-font-weight-local: var(--panel-samples-font-weight);\n --panel-background-color: var(--panel-samples-background-color); // @presenter Color\n --panel-border-local: var(--panel-samples-border);\n --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color\n --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color\n\n --panel-body-font-family-local: var(--panel-samples-body-font-family);\n --panel-body-font-size-local: var(--panel-samples-body-font-size);\n --panel-body-font-weight-local: var(--panel-samples-body-font-weight);\n --panel-body-padding-local: var(--panel-samples-body-padding);\n --panel-body-border-local: var(--panel-samples-body-border);\n\n --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color\n --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-heading-font-family-local: var(--panel-samples-heading-font-family);\n --panel-heading-font-size-local: var(--panel-samples-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-samples-heading-line-height);\n --panel-heading-padding-local: var(--panel-samples-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n }\n\n /**\n * @tokens Panel response success, info, error, redirect, callback common\n */\n\n .panel-response-success,\n .panel-response-info,\n .panel-response-error,\n .panel-response-redirect,\n .panel-response-callback {\n --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color\n\n --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color\n --panel-heading-font-size-local: var(--panel-response-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-response-heading-line-height);\n --panel-heading-padding-local: var(--panel-response-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n --panel-heading-white-space-local: normal;\n --panel-body-padding-local: var(--panel-body-padding);\n }\n\n /**\n * @tokens Panel response success colors\n * @presenter Color\n */\n\n .panel-response-success {\n --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-success-body-text-color);\n --panel-body-background-color: var(--panel-response-success-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-success-heading-background-color);\n --panel-heading-text-color: var(--panel-response-success-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response info colors\n * @presenter Color\n */\n\n .panel-response-info {\n --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-info-body-text-color);\n --panel-body-background-color: var(--panel-response-info-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-info-heading-background-color);\n --panel-heading-text-color: var(--panel-response-info-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response error colors\n * @presenter Color\n */\n\n .panel-response-error {\n --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-error-body-text-color);\n --panel-body-background-color: var(--panel-response-error-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-error-heading-background-color);\n --panel-heading-text-color: var(--panel-response-error-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response redirect colors\n * @presenter Color\n */\n\n .panel-response-redirect {\n --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border\n --panel-body-text-color: var(--panel-response-redirect-body-text-color);\n\n --panel-body-background-color: var(--panel-response-redirect-body-background-color);\n --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);\n --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response callback colors\n * @presenter Color\n */\n\n .panel-response-callback {\n --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-callback-body-text-color);\n --panel-body-background-color: var(--panel-response-callback-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-callback-heading-background-color);\n --panel-heading-text-color: var(--panel-response-callback-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel try-it nested common\n * @presenter Color\n */\n\n --panel-try-it-nested-text-color: var(--text-color-inverse);\n --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);\n\n --panel-try-it-nested-body-background-color: #3e4c59;\n --panel-try-it-nested-body-text-color: var(--text-color-inverse);\n --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing\n --panel-try-it-nested-body-border-color: var(--color-secondary-800);\n\n --panel-try-it-nested-heading-text-color: var(--text-color-inverse);\n --panel-try-it-nested-heading-background-color: transparent;\n --panel-try-it-nested-heading-border-color: var(--color-secondary-800);\n\n /**\n * @tokens Panel try-it nested\n * @presenter Color\n */\n\n .panel-try-it-nested {\n --panel-text-color: var(--panel-try-it-nested-text-color);\n --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);\n\n --panel-body-text-color: var(--panel-try-it-nested-body-text-color);\n --panel-body-background-color: var(--panel-try-it-nested-body-background-color);\n --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing\n\n --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);\n --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);\n }\n\n /**\n * @tokens Panel samples tabs\n */\n\n --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n\n --panel-samples-tabs-background-color: transparent; // @presenter Color\n --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color\n --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it tabs\n */\n\n --panel-try-it-tabs-font-size: 12px; // @presenter FontSize\n --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color\n\n --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color\n --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color\n\n --panel-try-it-tabs-border-color: transparent; // @presenter Color\n --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color\n --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color\n\n /**\n * @tokens Panel try-it action button\n */\n\n --panel-try-it-action-button-width: auto;\n --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color\n --panel-try-it-action-button-border-color: transparent; // @presenter Color\n\n --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color\n --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color\n\n --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color\n --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color\n\n /**\n * @tokens Panel samples other styles\n */\n\n --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-dropdown-border: unset; // @presenter Border\n\n --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-input-border: unset; // @presenter Border\n\n --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-border: unset; // @presenter Border\n\n // @tokens End\n\n // TODO PUL RIGHT section - related to pull right - fix later\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --layout-right-rail-width: 50%;\n --layout-right-rail-background-color: transparent;\n"])));
20
20
  var tooltip = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /**\n * @tokens Tooltip Base\n * @presenter Color\n */\n --tooltip-text-color: var(--color-secondary-200);\n --tooltip-background-color: var(--color-emphasis-600);\n\n /**\n * @tokens Tooltip Copy Button\n * @presenter Color\n */\n\n --copy-button-tooltip-text-color: #000;\n --copy-button-tooltip-background-color: var(--background-color);\n\n .tooltip-copy-button {\n --tooltip-text-color: var(--copy-button-tooltip-text-color);\n --tooltip-background-color: var(--copy-button-tooltip-background-color);\n }\n\n // @tokens End\n"], ["\n /**\n * @tokens Tooltip Base\n * @presenter Color\n */\n --tooltip-text-color: var(--color-secondary-200);\n --tooltip-background-color: var(--color-emphasis-600);\n\n /**\n * @tokens Tooltip Copy Button\n * @presenter Color\n */\n\n --copy-button-tooltip-text-color: #000;\n --copy-button-tooltip-background-color: var(--background-color);\n\n .tooltip-copy-button {\n --tooltip-text-color: var(--copy-button-tooltip-text-color);\n --tooltip-background-color: var(--copy-button-tooltip-background-color);\n }\n\n // @tokens End\n"])));
21
21
  var code = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n /**\n * @tokens Code base styles\n */\n --code-font-size: 13px; // @presenter FontSize\n --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n --code-font-weight: 400; // @presenter FontWeight\n --code-wrap: pre;\n --code-word-break: break-word;\n\n /**\n * @tokens Inline Code\n */\n --inline-code-font-size: var(--code-font-size); // @presenter FontSize\n --inline-code-font-family: var(--code-font-family); // @presenter FontFamily\n --inline-code-text-color: #e53935; // @presenter Color\n --inline-code-background-color: var(--colors-translucent); // @presenter Color\n --inline-code-border-color: var(--border-color); // @presenter Color\n --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block\n */\n --code-block-font-size: var(--code-font-size); // @presenter FontSize\n --code-block-font-family: var(--code-font-family); // @presenter FontFamily\n --code-block-text-color: #fff; // @presenter Color\n --code-block-background-color: #323f4b; // @presenter Color\n --code-block-border-color: var(--border-color); // @presenter Color\n --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n\n /**\n * @tokens Code Block controls\n */\n\n --code-block-controls-text-color: #fff; // @presenter Color\n --code-block-controls-hover-text-color: #fff; // @presenter Color\n --code-block-controls-background-color: transparent; // @presenter Color\n --code-block-controls-hover-background-color: rgba(255, 255, 255, 0.15); // @presenter Color\n --code-block-controls-opacity: 0.5;\n --code-block-controls-active-opacity: 1;\n --code-block-controls-padding: 0 5px; // @presenter Spacing\n --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize\n --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily\n --code-block-controls-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block tokens\n */\n --code-block-tokens-default-color: var(--text-color-inverse); // @presenter Color\n --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color\n --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n --code-block-tokens-string-color: #fee39e; // @presenter Color\n --code-block-tokens-property-string-color: #9efaa7; // @presenter Color\n --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-link-color: #4ed2ba; // @presenter Color\n --code-block-tokens-operator-color: #f5b83d; // @presenter Color\n --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color\n --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-regex-color: #e90; // @presenter Color\n --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n --code-block-tokens-deleted-color: red; // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Code base styles\n */\n --code-font-size: 13px; // @presenter FontSize\n --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n --code-font-weight: 400; // @presenter FontWeight\n --code-wrap: pre;\n --code-word-break: break-word;\n\n /**\n * @tokens Inline Code\n */\n --inline-code-font-size: var(--code-font-size); // @presenter FontSize\n --inline-code-font-family: var(--code-font-family); // @presenter FontFamily\n --inline-code-text-color: #e53935; // @presenter Color\n --inline-code-background-color: var(--colors-translucent); // @presenter Color\n --inline-code-border-color: var(--border-color); // @presenter Color\n --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block\n */\n --code-block-font-size: var(--code-font-size); // @presenter FontSize\n --code-block-font-family: var(--code-font-family); // @presenter FontFamily\n --code-block-text-color: #fff; // @presenter Color\n --code-block-background-color: #323f4b; // @presenter Color\n --code-block-border-color: var(--border-color); // @presenter Color\n --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n\n /**\n * @tokens Code Block controls\n */\n\n --code-block-controls-text-color: #fff; // @presenter Color\n --code-block-controls-hover-text-color: #fff; // @presenter Color\n --code-block-controls-background-color: transparent; // @presenter Color\n --code-block-controls-hover-background-color: rgba(255, 255, 255, 0.15); // @presenter Color\n --code-block-controls-opacity: 0.5;\n --code-block-controls-active-opacity: 1;\n --code-block-controls-padding: 0 5px; // @presenter Spacing\n --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize\n --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily\n --code-block-controls-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block tokens\n */\n --code-block-tokens-default-color: var(--text-color-inverse); // @presenter Color\n --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color\n --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n --code-block-tokens-string-color: #fee39e; // @presenter Color\n --code-block-tokens-property-string-color: #9efaa7; // @presenter Color\n --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-link-color: #4ed2ba; // @presenter Color\n --code-block-tokens-operator-color: #f5b83d; // @presenter Color\n --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color\n --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-regex-color: #e90; // @presenter Color\n --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n --code-block-tokens-deleted-color: red; // @presenter Color\n\n // @tokens End\n"])));
22
22
  var links = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n /**\n * @tokens Links\n */\n --link-text-color: var(--color-primary-500); // @presenter Color\n --link-decoration: none;\n --link-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --link-hover-text-color: var(--color-primary-100); // @presenter Color\n --link-hover-decoration: underline;\n\n --link-active-decoration: none;\n --link-active-text-color: var(--color-primary-500); // @presenter Color\n\n --link-visited-text-color: var(--color-primary-500); // @presenter Color\n --link-visited-decoration: none;\n\n // @tokens End\n"], ["\n /**\n * @tokens Links\n */\n --link-text-color: var(--color-primary-500); // @presenter Color\n --link-decoration: none;\n --link-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --link-hover-text-color: var(--color-primary-100); // @presenter Color\n --link-hover-decoration: underline;\n\n --link-active-decoration: none;\n --link-active-text-color: var(--color-primary-500); // @presenter Color\n\n --link-visited-text-color: var(--color-primary-500); // @presenter Color\n --link-visited-decoration: none;\n\n // @tokens End\n"])));
23
- var apiReferenceDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens API Reference Schemas Layout\n */\n\n --layout-controls-top-offset: 20px; // @presenter Spacing\n --layout-controls-height: 36px; // @presenter Spacing\n --layout-controls-width: 36px; // @presenter Spacing\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-panel-schemas-small-max-width: none;\n --layout-panel-schemas-medium-max-width: none;\n --layout-panel-schemas-large-max-width: none;\n\n /**\n * @tokens API Reference Schemas MimeType Dropdown\n */\n\n --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;\n --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border\n --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Discriminator Dropdown\n */\n\n --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;\n --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border\n --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Titles\n */\n\n --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color\n --schema-type-text-color: var(--text-color-secondary); // @presenter Color\n --schema-labels-font-size: 0.8em; // @presenter FontSize\n\n /**\n * @tokens API Reference Schemas Lines Color\n */\n\n --schemas-lines-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens API Reference Schema Inline code typography\n */\n\n --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily\n --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize\n --schema-inline-code-text-color: var(--text-color); // @presenter Color\n --schema-inline-background-color: var(--colors-translucent); // @presenter Color\n --schema-inline-border-color: var(--border-color); // @presenter Color\n --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border\n\n /**\n * @tokens API Reference Schema Example Label colors\n * @presenter Color\n */\n\n --schema-example-text-color: var(--schema-inline-code-text-color);\n --schema-example-background-color: var(--schema-inline-background-color);\n --schema-example-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Constraint Label colors\n * @presenter Color\n */\n\n --schema-constraint-text-color: var(--schema-inline-code-text-color);\n --schema-constraint-background-color: var(--schema-inline-background-color);\n --schema-constraint-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Enum Label colors\n * @presenter Color\n */\n\n --schema-enum-text-color: var(--schema-inline-code-text-color);\n --schema-enum-background-color: var(--schema-inline-background-color);\n --schema-enum-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Default Label colors\n * @presenter Color\n */\n\n --schema-default-text-color: var(--schema-inline-code-text-color);\n --schema-default-background-color: var(--schema-inline-background-color);\n --schema-default-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Recursive Label colors\n * @presenter Color\n */\n\n --schema-recursive-text-color: var(--color-warning-600);\n --schema-recursive-background-color: var(--schema-inline-background-color);\n --schema-recursive-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens GraphQL Docs Reference Schema Non null label\n * @presenter Color\n */\n\n --schema-non-null-text-color: var(--schema-inline-code-text-color);\n --schema-non-null-background-color: var(--schema-inline-background-color);\n --schema-non-null-border-color: var(--schema-inline-border-color);\n /**\n * @tokens API Reference Schema Nested styles\n */\n\n --schema-nested-offset: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--colors-translucent); // @presenter Color\n\n /**\n * @tokens API Reference Schema Buttons\n */\n\n --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily\n --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight\n --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize\n\n --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color\n --schema-buttons-background-color: transparent; // @presenter Color\n --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color\n\n --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color\n\n --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color\n --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color\n --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color\n --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color\n\n /**\n * @tokens API Reference Schema Properties\n */\n\n --schemas-property-name-text-color: var(--text-color); //@presenter Color\n --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize\n --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily\n\n --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize\n --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color\n --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color\n --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color\n\n --schema-property-details-width: 70%;\n\n /**\n * @tokens API Reference Schema Icons\n */\n\n --schema-chevron-color: var(--text-color); // @presenter Color\n --schema-chevron-size: 9px;\n\n --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color\n /* --schema-property-deep-link-icon: figure out this later */\n\n /*\n * @tokens API Reference Other\n */\n\n --loading-spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n --fab-icon-color: var(--color-primary-500); // @presenter Color\n --fab-background-color: var(--background-color); // @presenter Color\n --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow\n\n --fab-hover-background: var(--color-emphasis-200); // @presenter Color\n --fab-hover-icon-color: var(--color-primary-600); // @presenter Color\n --fab-hover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow\n\n --fab-active-background: var(--color-emphasis-200); // @presenter Color\n --fab-active-icon-color: var(--color-primary-600); // @presenter Color\n --fab-active-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow\n\n /* --fab-icon: <svg string or url> work with icons later **/\n\n // @tokens End\n"], ["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens API Reference Schemas Layout\n */\n\n --layout-controls-top-offset: 20px; // @presenter Spacing\n --layout-controls-height: 36px; // @presenter Spacing\n --layout-controls-width: 36px; // @presenter Spacing\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-panel-schemas-small-max-width: none;\n --layout-panel-schemas-medium-max-width: none;\n --layout-panel-schemas-large-max-width: none;\n\n /**\n * @tokens API Reference Schemas MimeType Dropdown\n */\n\n --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;\n --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border\n --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Discriminator Dropdown\n */\n\n --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;\n --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border\n --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Titles\n */\n\n --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color\n --schema-type-text-color: var(--text-color-secondary); // @presenter Color\n --schema-labels-font-size: 0.8em; // @presenter FontSize\n\n /**\n * @tokens API Reference Schemas Lines Color\n */\n\n --schemas-lines-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens API Reference Schema Inline code typography\n */\n\n --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily\n --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize\n --schema-inline-code-text-color: var(--text-color); // @presenter Color\n --schema-inline-background-color: var(--colors-translucent); // @presenter Color\n --schema-inline-border-color: var(--border-color); // @presenter Color\n --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border\n\n /**\n * @tokens API Reference Schema Example Label colors\n * @presenter Color\n */\n\n --schema-example-text-color: var(--schema-inline-code-text-color);\n --schema-example-background-color: var(--schema-inline-background-color);\n --schema-example-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Constraint Label colors\n * @presenter Color\n */\n\n --schema-constraint-text-color: var(--schema-inline-code-text-color);\n --schema-constraint-background-color: var(--schema-inline-background-color);\n --schema-constraint-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Enum Label colors\n * @presenter Color\n */\n\n --schema-enum-text-color: var(--schema-inline-code-text-color);\n --schema-enum-background-color: var(--schema-inline-background-color);\n --schema-enum-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Default Label colors\n * @presenter Color\n */\n\n --schema-default-text-color: var(--schema-inline-code-text-color);\n --schema-default-background-color: var(--schema-inline-background-color);\n --schema-default-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Recursive Label colors\n * @presenter Color\n */\n\n --schema-recursive-text-color: var(--color-warning-600);\n --schema-recursive-background-color: var(--schema-inline-background-color);\n --schema-recursive-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens GraphQL Docs Reference Schema Non null label\n * @presenter Color\n */\n\n --schema-non-null-text-color: var(--schema-inline-code-text-color);\n --schema-non-null-background-color: var(--schema-inline-background-color);\n --schema-non-null-border-color: var(--schema-inline-border-color);\n /**\n * @tokens API Reference Schema Nested styles\n */\n\n --schema-nested-offset: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--colors-translucent); // @presenter Color\n\n /**\n * @tokens API Reference Schema Buttons\n */\n\n --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily\n --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight\n --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize\n\n --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color\n --schema-buttons-background-color: transparent; // @presenter Color\n --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color\n\n --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color\n\n --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color\n --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color\n --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color\n --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color\n\n /**\n * @tokens API Reference Schema Properties\n */\n\n --schemas-property-name-text-color: var(--text-color); //@presenter Color\n --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize\n --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily\n\n --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize\n --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color\n --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color\n --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color\n\n --schema-property-details-width: 70%;\n\n /**\n * @tokens API Reference Schema Icons\n */\n\n --schema-chevron-color: var(--text-color); // @presenter Color\n --schema-chevron-size: 9px;\n\n --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color\n /* --schema-property-deep-link-icon: figure out this later */\n\n /*\n * @tokens API Reference Other\n */\n\n --loading-spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n --fab-icon-color: var(--color-primary-500); // @presenter Color\n --fab-background-color: var(--background-color); // @presenter Color\n --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow\n\n --fab-hover-background: var(--color-emphasis-200); // @presenter Color\n --fab-hover-icon-color: var(--color-primary-600); // @presenter Color\n --fab-hover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow\n\n --fab-active-background: var(--color-emphasis-200); // @presenter Color\n --fab-active-icon-color: var(--color-primary-600); // @presenter Color\n --fab-active-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow\n\n /* --fab-icon: <svg string or url> work with icons later **/\n\n // @tokens End\n"])));
23
+ var apiReferenceDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens API Reference Schemas Layout\n */\n\n --layout-controls-top-offset: 20px; // @presenter Spacing\n --layout-controls-height: 36px; // @presenter Spacing\n --layout-controls-width: 36px; // @presenter Spacing\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-panel-schemas-small-max-width: none;\n --layout-panel-schemas-medium-max-width: none;\n --layout-panel-schemas-large-max-width: none;\n\n /**\n * @tokens API Reference Schemas MimeType Dropdown\n */\n\n --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;\n --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border\n --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Discriminator Dropdown\n */\n\n --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;\n --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border\n --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Titles\n */\n\n --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color\n --schema-type-text-color: var(--text-color-secondary); // @presenter Color\n --schema-labels-font-size: 0.8em; // @presenter FontSize\n\n /**\n * @tokens API Reference Schemas Lines Color\n */\n\n --schemas-lines-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens API Reference Schema Inline code typography\n */\n\n --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily\n --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize\n --schema-inline-code-text-color: var(--text-color); // @presenter Color\n --schema-inline-background-color: var(--colors-translucent); // @presenter Color\n --schema-inline-border-color: var(--border-color); // @presenter Color\n --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border\n\n /**\n * @tokens API Reference Schema Example Label colors\n * @presenter Color\n */\n\n --schema-example-text-color: var(--schema-inline-code-text-color);\n --schema-example-background-color: var(--schema-inline-background-color);\n --schema-example-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Constraint Label colors\n * @presenter Color\n */\n\n --schema-constraint-text-color: var(--schema-inline-code-text-color);\n --schema-constraint-background-color: var(--schema-inline-background-color);\n --schema-constraint-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Enum Label colors\n * @presenter Color\n */\n\n --schema-enum-text-color: var(--schema-inline-code-text-color);\n --schema-enum-background-color: var(--schema-inline-background-color);\n --schema-enum-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Default Label colors\n * @presenter Color\n */\n\n --schema-default-text-color: var(--schema-inline-code-text-color);\n --schema-default-background-color: var(--schema-inline-background-color);\n --schema-default-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Recursive Label colors\n * @presenter Color\n */\n\n --schema-recursive-text-color: var(--color-warning-600);\n --schema-recursive-background-color: var(--schema-inline-background-color);\n --schema-recursive-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens GraphQL Docs Reference Schema Non null label\n * @presenter Color\n */\n\n --schema-non-null-text-color: var(--schema-inline-code-text-color);\n --schema-non-null-background-color: var(--schema-inline-background-color);\n --schema-non-null-border-color: var(--schema-inline-border-color);\n /**\n * @tokens API Reference Schema Nested styles\n */\n\n --schema-nested-offset: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--colors-translucent); // @presenter Color\n\n /**\n * @tokens API Reference Schema Buttons\n */\n\n --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily\n --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight\n --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize\n\n --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color\n --schema-buttons-background-color: transparent; // @presenter Color\n --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color\n\n --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color\n\n --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color\n --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color\n --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color\n --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color\n\n /**\n * @tokens API Reference Schema Properties\n */\n\n --schemas-property-name-text-color: var(--text-color); //@presenter Color\n --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize\n --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily\n\n --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color\n\n --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize\n --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color\n --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color\n --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color\n\n --schema-property-details-width: 70%;\n\n /**\n * @tokens API Reference Schema Icons\n */\n\n --schema-chevron-color: var(--text-color); // @presenter Color\n --schema-chevron-size: 9px;\n\n --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color\n --schema-property-deep-link-icon: none;\n\n /*\n * @tokens API Reference Other\n */\n\n --loading-spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n --fab-background-color: var(--color-primary-500); // @presenter Color\n --fab-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-hover-background: var(--color-primary-500); // @presenter Color\n --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-active-background: var(--color-primary-500); // @presenter Color\n --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-icon: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\");\n\n // @tokens End\n"], ["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens API Reference Schemas Layout\n */\n\n --layout-controls-top-offset: 20px; // @presenter Spacing\n --layout-controls-height: 36px; // @presenter Spacing\n --layout-controls-width: 36px; // @presenter Spacing\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-panel-schemas-small-max-width: none;\n --layout-panel-schemas-medium-max-width: none;\n --layout-panel-schemas-large-max-width: none;\n\n /**\n * @tokens API Reference Schemas MimeType Dropdown\n */\n\n --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;\n --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border\n --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Discriminator Dropdown\n */\n\n --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;\n --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border\n --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Titles\n */\n\n --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color\n --schema-type-text-color: var(--text-color-secondary); // @presenter Color\n --schema-labels-font-size: 0.8em; // @presenter FontSize\n\n /**\n * @tokens API Reference Schemas Lines Color\n */\n\n --schemas-lines-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens API Reference Schema Inline code typography\n */\n\n --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily\n --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize\n --schema-inline-code-text-color: var(--text-color); // @presenter Color\n --schema-inline-background-color: var(--colors-translucent); // @presenter Color\n --schema-inline-border-color: var(--border-color); // @presenter Color\n --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border\n\n /**\n * @tokens API Reference Schema Example Label colors\n * @presenter Color\n */\n\n --schema-example-text-color: var(--schema-inline-code-text-color);\n --schema-example-background-color: var(--schema-inline-background-color);\n --schema-example-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Constraint Label colors\n * @presenter Color\n */\n\n --schema-constraint-text-color: var(--schema-inline-code-text-color);\n --schema-constraint-background-color: var(--schema-inline-background-color);\n --schema-constraint-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Enum Label colors\n * @presenter Color\n */\n\n --schema-enum-text-color: var(--schema-inline-code-text-color);\n --schema-enum-background-color: var(--schema-inline-background-color);\n --schema-enum-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Default Label colors\n * @presenter Color\n */\n\n --schema-default-text-color: var(--schema-inline-code-text-color);\n --schema-default-background-color: var(--schema-inline-background-color);\n --schema-default-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Recursive Label colors\n * @presenter Color\n */\n\n --schema-recursive-text-color: var(--color-warning-600);\n --schema-recursive-background-color: var(--schema-inline-background-color);\n --schema-recursive-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens GraphQL Docs Reference Schema Non null label\n * @presenter Color\n */\n\n --schema-non-null-text-color: var(--schema-inline-code-text-color);\n --schema-non-null-background-color: var(--schema-inline-background-color);\n --schema-non-null-border-color: var(--schema-inline-border-color);\n /**\n * @tokens API Reference Schema Nested styles\n */\n\n --schema-nested-offset: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--colors-translucent); // @presenter Color\n\n /**\n * @tokens API Reference Schema Buttons\n */\n\n --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily\n --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight\n --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize\n\n --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color\n --schema-buttons-background-color: transparent; // @presenter Color\n --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color\n\n --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color\n\n --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color\n --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color\n --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color\n --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color\n\n /**\n * @tokens API Reference Schema Properties\n */\n\n --schemas-property-name-text-color: var(--text-color); //@presenter Color\n --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize\n --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily\n\n --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color\n\n --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize\n --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color\n --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color\n --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color\n\n --schema-property-details-width: 70%;\n\n /**\n * @tokens API Reference Schema Icons\n */\n\n --schema-chevron-color: var(--text-color); // @presenter Color\n --schema-chevron-size: 9px;\n\n --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color\n --schema-property-deep-link-icon: none;\n\n /*\n * @tokens API Reference Other\n */\n\n --loading-spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n --fab-background-color: var(--color-primary-500); // @presenter Color\n --fab-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-hover-background: var(--color-primary-500); // @presenter Color\n --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-active-background: var(--color-primary-500); // @presenter Color\n --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-icon: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\");\n\n // @tokens End\n"])));
24
24
  var badges = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n /**\n * @tokens Default Badge\n */\n --badge-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-background-color: var(--color-primary-500); // @presenter Color\n --badge-border-color: var(--color-primary-700); // @presenter Color\n --badge-border: 1px solid var(--badge-border-color); // @presenter Border\n --badge-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Deprecated Badge\n */\n\n --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color\n --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color\n --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border\n --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Http Badge\n */\n\n --badge-http-font-size: 12px; // @presenter FontSize\n --badge-http-line-height: 20px; // @presenter LineHeight\n --badge-http-text-color: var(--badge-text-color); // @presenter Color\n --badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --badge-http-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --badge-http-border-radius: calc(var(--border-radius-lg) * 2); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item badge http\n */\n\n --sidebar-item-badge-http-text-color: var(--badge-text-color); // @presenter Color\n --sidebar-item-badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --sidebar-item-badge-http-font-size: 8px; // @presenter FontSize\n --sidebar-item-badge-http-font-weight: normal; //@presenter FontWeight\n --sidebar-item-badge-http-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n\n // @tokens End\n"], ["\n /**\n * @tokens Default Badge\n */\n --badge-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-background-color: var(--color-primary-500); // @presenter Color\n --badge-border-color: var(--color-primary-700); // @presenter Color\n --badge-border: 1px solid var(--badge-border-color); // @presenter Border\n --badge-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Deprecated Badge\n */\n\n --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color\n --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color\n --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border\n --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Http Badge\n */\n\n --badge-http-font-size: 12px; // @presenter FontSize\n --badge-http-line-height: 20px; // @presenter LineHeight\n --badge-http-text-color: var(--badge-text-color); // @presenter Color\n --badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --badge-http-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --badge-http-border-radius: calc(var(--border-radius-lg) * 2); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item badge http\n */\n\n --sidebar-item-badge-http-text-color: var(--badge-text-color); // @presenter Color\n --sidebar-item-badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --sidebar-item-badge-http-font-size: 8px; // @presenter FontSize\n --sidebar-item-badge-http-font-weight: normal; //@presenter FontWeight\n --sidebar-item-badge-http-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n\n // @tokens End\n"])));
25
25
  var footer = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n --footer-padding-vertical: 2em; // @presenter Spacing\n --footer-padding-horizontal: 20px; // @presenter Spacing\n\n --footer-font-family: var(--font-family-base); // @presenter FontFamily\n --footer-font-size: 1rem; // @presenter FontSize\n --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --footer-title-text-color: var(--footer-text-color); // @presenter Color\n --footer-title-font-size: 24px; // @presenter FontSize\n --footer-title-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --footer-title-margin-vertical: 1.5em;\n\n --footer-link-text-color: var(--footer-text-color); // @presenter Color\n --footer-link-hover-color: var(--footer-text-color); // @presenter Color\n\n --footer-item-padding-vertical: 0.5em; // @presenter Spacingv\n --footer-item-padding-horizontal: 0;\n\n --footer-column-width: 20%; // @presenter Spacing\n --footer-column-margin-vertical: 20px; // @presenter Spacing\n --footer-column-margin-horizontal: 0; // @presenter Spacing\n\n --footer-container-max-width: 1200px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n --footer-padding-vertical: 2em; // @presenter Spacing\n --footer-padding-horizontal: 20px; // @presenter Spacing\n\n --footer-font-family: var(--font-family-base); // @presenter FontFamily\n --footer-font-size: 1rem; // @presenter FontSize\n --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --footer-title-text-color: var(--footer-text-color); // @presenter Color\n --footer-title-font-size: 24px; // @presenter FontSize\n --footer-title-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --footer-title-margin-vertical: 1.5em;\n\n --footer-link-text-color: var(--footer-text-color); // @presenter Color\n --footer-link-hover-color: var(--footer-text-color); // @presenter Color\n\n --footer-item-padding-vertical: 0.5em; // @presenter Spacingv\n --footer-item-padding-horizontal: 0;\n\n --footer-column-width: 20%; // @presenter Spacing\n --footer-column-margin-vertical: 20px; // @presenter Spacing\n --footer-column-margin-horizontal: 0; // @presenter Spacing\n\n --footer-container-max-width: 1200px; // @presenter Spacing\n\n // @tokens End\n"])));
26
26
  var logo = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n /**\n * @tokens Logo\n */\n\n --navbar-logo-height: 2rem; // @presenter Spacing\n --navbar-logo-width: auto;\n --navbar-logo-margin: 16px; // @presenter Spacing\n --navbar-logo-max-width: 285px; // @presenter Spacing\n --navbar-logo-max-height: 285px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Logo\n */\n\n --navbar-logo-height: 2rem; // @presenter Spacing\n --navbar-logo-width: auto;\n --navbar-logo-margin: 16px; // @presenter Spacing\n --navbar-logo-max-width: 285px; // @presenter Spacing\n --navbar-logo-max-height: 285px; // @presenter Spacing\n\n // @tokens End\n"])));
27
- var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-container-max-width: 1200px;\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n --navbar-item-margin-horizontal: 7px;\n --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-hover-background-color: var(--color-primary-300);\n --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-hover-text-decoration: none;\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens Navbar dropdown\n * */\n\n --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n --navbar-dropdown-background: var(--navbar-item-active-background-color);\n --navbar-dropdown-border: none;\n\n // @tokens End\n"], ["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-container-max-width: 1200px;\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n --navbar-item-margin-horizontal: 7px;\n --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-hover-background-color: var(--color-primary-300);\n --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-hover-text-decoration: none;\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens Navbar dropdown\n * */\n\n --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n --navbar-dropdown-background: var(--navbar-item-active-background-color);\n --navbar-dropdown-border: none;\n\n // @tokens End\n"])));
27
+ var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-container-max-width: 100%;\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n --navbar-item-margin-horizontal: 7px;\n --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-hover-background-color: var(--color-primary-300);\n --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-hover-text-decoration: none;\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens Navbar dropdown\n * */\n\n --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n --navbar-dropdown-background: var(--navbar-item-active-background-color);\n --navbar-dropdown-border: none;\n\n // @tokens End\n"], ["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-container-max-width: 100%;\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n --navbar-item-margin-horizontal: 7px;\n --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-hover-background-color: var(--color-primary-300);\n --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-hover-text-decoration: none;\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens Navbar dropdown\n * */\n\n --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n --navbar-dropdown-background: var(--navbar-item-active-background-color);\n --navbar-dropdown-border: none;\n\n // @tokens End\n"])));
28
28
  var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n /**\n * @tokens TOC\n * */\n\n --toc-width: 240px;\n --toc-background-color: transparent;\n --toc-border-color: var(--border-color);\n\n --toc-spacing-unit: 8px;\n --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n /**\n * @tokens TOC item typography\n */\n --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens TOC item\n */\n\n --toc-item-text-color: var(--text-color); // @presenter Color\n --toc-item-active-text-color: var(--text-color); // @presenter Color\n --toc-item-background-color: transparent; // @presenter Color\n --toc-item-active-background-color: var(--border-color); // @presenter Color\n --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n /**\n * @tokens TOC header\n */\n\n --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-heading-font-weight: bold; // @presenter FontWeight\n --toc-heading-text-color: var(--text-color); // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens TOC\n * */\n\n --toc-width: 240px;\n --toc-background-color: transparent;\n --toc-border-color: var(--border-color);\n\n --toc-spacing-unit: 8px;\n --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n /**\n * @tokens TOC item typography\n */\n --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens TOC item\n */\n\n --toc-item-text-color: var(--text-color); // @presenter Color\n --toc-item-active-text-color: var(--text-color); // @presenter Color\n --toc-item-background-color: transparent; // @presenter Color\n --toc-item-active-background-color: var(--border-color); // @presenter Color\n --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n /**\n * @tokens TOC header\n */\n\n --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-heading-font-weight: bold; // @presenter FontWeight\n --toc-heading-text-color: var(--text-color); // @presenter Color\n\n // @tokens End\n"])));
29
29
  var inputs = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n /**\n * @tokens Inputs\n */\n --input-text-color: var(--text-color-inverse); // @presenter Color\n --input-border: none; // @presenter Border\n --input-border-radius: var(--border-radius); // @presenter BorderRadius\n --input-font-size: var(--font-size-base); // @presenter FontSize\n --input-font-family: var(--code-font-family); // @presenter FontFamily\n --input-line-height: 1.15em; // @presenter LineHeight\n --input-padding: 8px;\n\n --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n --input-hover-border: none; // @presenter Border\n --input-focus-border: none; // @presenter Border\n --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Inputs\n */\n --input-text-color: var(--text-color-inverse); // @presenter Color\n --input-border: none; // @presenter Border\n --input-border-radius: var(--border-radius); // @presenter BorderRadius\n --input-font-size: var(--font-size-base); // @presenter FontSize\n --input-font-family: var(--code-font-family); // @presenter FontFamily\n --input-line-height: 1.15em; // @presenter LineHeight\n --input-padding: 8px;\n\n --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n --input-hover-border: none; // @presenter Border\n --input-focus-border: none; // @presenter Border\n --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n // @tokens End\n"])));
30
30
  var markdown = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n /**\n * @tokens Markdown Container\n */\n\n --md-container-max-width: 910px;\n --md-container-padding-vertical: 25px; // @presenter Spacing\n --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Blockquote\n */\n\n --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n --md-blockquote-padding-vertical: 0; // @presenter Spacing\n --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n --md-blockquote-border-color: var(--border-color); // @presenter Color\n --md-blockquote-background-color: transparent; // @presenter Color\n --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n --md-blockquote-text-color: var(--text-color); // @presenter Color\n --md-blockquote-box-shadow: none; // @presenter Shadow\n\n /** \n * @tokens Markdown Paragraph\n */\n\n --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Table\n */\n\n --md-table-font-size: 14px; // @presenter FontSize\n --md-table-margin-vertical: 20px; // @presenter Spacing\n --md-table-background-color: transparent; // @presenter Color\n\n --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --md-table-border-width: 1px;\n --md-table-border-color: var(--border-color); // @presenter Color\n\n --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n --md-table-cell-text-color: var(--text-color); // @presenter Color\n --md-table-cell-padding: 12px; // @presenter Spacing\n\n --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n --md-table-head-text-color: var(--text-color); // @presenter Color\n --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n /**\n * @tokens Markdown Horizontal Rule\n */\n\n --md-hr-background-color: transparent; // @presenter Color\n --md-hr-border-color: var(--border-color); // @presenter Color\n --md-hr-height: unset;\n --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n /** \n * @tokens Markdown List\n */\n\n --md-list-left-padding: 2rem; // @presenter Spacing\n --md-list-margin: 1rem; // @presenter Spacing\n --md-list-item-margin: 0.25rem; // @presenter Spacing\n --md-list-item-style: inherit;\n\n /** \n * @tokens Markdown Numbered List\n */\n\n --md-numbered-list-number-display: none;\n --md-numbered-list-item-style: var(--md-list-item-style);\n --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Markdown Container\n */\n\n --md-container-max-width: 910px;\n --md-container-padding-vertical: 25px; // @presenter Spacing\n --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Blockquote\n */\n\n --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n --md-blockquote-padding-vertical: 0; // @presenter Spacing\n --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n --md-blockquote-border-color: var(--border-color); // @presenter Color\n --md-blockquote-background-color: transparent; // @presenter Color\n --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n --md-blockquote-text-color: var(--text-color); // @presenter Color\n --md-blockquote-box-shadow: none; // @presenter Shadow\n\n /** \n * @tokens Markdown Paragraph\n */\n\n --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Table\n */\n\n --md-table-font-size: 14px; // @presenter FontSize\n --md-table-margin-vertical: 20px; // @presenter Spacing\n --md-table-background-color: transparent; // @presenter Color\n\n --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --md-table-border-width: 1px;\n --md-table-border-color: var(--border-color); // @presenter Color\n\n --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n --md-table-cell-text-color: var(--text-color); // @presenter Color\n --md-table-cell-padding: 12px; // @presenter Spacing\n\n --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n --md-table-head-text-color: var(--text-color); // @presenter Color\n --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n /**\n * @tokens Markdown Horizontal Rule\n */\n\n --md-hr-background-color: transparent; // @presenter Color\n --md-hr-border-color: var(--border-color); // @presenter Color\n --md-hr-height: unset;\n --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n /** \n * @tokens Markdown List\n */\n\n --md-list-left-padding: 2rem; // @presenter Spacing\n --md-list-margin: 1rem; // @presenter Spacing\n --md-list-item-margin: 0.25rem; // @presenter Spacing\n --md-list-item-style: inherit;\n\n /** \n * @tokens Markdown Numbered List\n */\n\n --md-numbered-list-number-display: none;\n --md-numbered-list-item-style: var(--md-list-item-style);\n --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n // @tokens End\n"])));
package/icons/AlertIcon/AlertIcon.js CHANGED
@@ -41,8 +41,11 @@ function Icon(_a) {
41
41
  }
42
42
  exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({
43
43
  'data-component-name': 'icons/AlertIcon/AlertIcon',
44
- }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: var(--admonition-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--admonition-icon-size);\n height: var(--admonition-icon-size);\n margin-right: var(--admonition-padding-horizontal);\n flex-shrink: 0;\n\n fill: ", ";\n"], ["\n position: absolute;\n left: var(--admonition-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--admonition-icon-size);\n height: var(--admonition-icon-size);\n margin-right: var(--admonition-padding-horizontal);\n flex-shrink: 0;\n\n fill: ", ";\n"])), function (_a) {
44
+ }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: var(--admonition-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--admonition-icon-size);\n height: var(--admonition-icon-size);\n margin-right: var(--admonition-padding-horizontal);\n flex-shrink: 0;\n\n fill: ", ";\n\n background-image: ", ";\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n"], ["\n position: absolute;\n left: var(--admonition-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--admonition-icon-size);\n height: var(--admonition-icon-size);\n margin-right: var(--admonition-padding-horizontal);\n flex-shrink: 0;\n\n fill: ", ";\n\n background-image: ", ";\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n"])), function (_a) {
45
45
  var type = _a.type;
46
46
  return "var(--admonition-".concat(type, "-icon-color)");
47
+ }, function (_a) {
48
+ var type = _a.type;
49
+ return "var(--admonition-".concat(type, "-icon)");
47
50
  });
48
51
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.4.3",
3
+ "version": "0.4.4",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/Markdown/Admonition.tsx CHANGED
@@ -7,7 +7,7 @@ interface AdmonitionTypeProps {
7
7
  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
8
8
  }
9
9
 
10
- interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
10
+ export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
11
11
  name?: string;
12
12
  }
13
13
 
package/src/Markdown/MarkdownWrapper.tsx CHANGED
@@ -92,6 +92,11 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
92
92
  .${className} svg {
93
93
  fill: var(--heading-anchor-color);
94
94
  visibility: hidden;
95
+
96
+ background-image: var(--heading-anchor-icon);
97
+ background-size: contain;
98
+ background-repeat: no-repeat;
99
+ background-position: center;
95
100
  }
96
101
 
97
102
  :hover .${className} svg,
package/src/Sidebar/ArrowBack.tsx CHANGED
@@ -18,5 +18,11 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
18
18
  );
19
19
 
20
20
  export const ArrowBack = styled(Arrow)`
21
- fill: var(--sidebar-group-item-chevron-color);
21
+ fill: var(--sidebar-back-button-icon-color);
22
+ margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
23
+
24
+ background-image: var(--sidebar-back-button-icon);
25
+ background-repeat: no-repeat;
26
+ background-position: center;
27
+ background-size: contain;
22
28
  `;
package/src/Sidebar/BackButton.tsx CHANGED
@@ -37,11 +37,6 @@ const Button = styled.button`
37
37
  text-align: left;
38
38
  margin: var(--sidebar-back-button-margin);
39
39
 
40
- svg {
41
- margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
42
- fill: var(--sidebar-back-button-icon-color);
43
- }
44
-
45
40
  &:hover {
46
41
  color: var(--sidebar-back-button-hover-text-color);
47
42
  background: var(--sidebar-back-button-hover-background-color);
package/src/Sidebar/MobileSidebarButton.tsx CHANGED
@@ -3,7 +3,9 @@ import styled from 'styled-components';
3
3
  export const MobileSidebarButton = styled.span.attrs(() => ({
4
4
  'data-component-name': 'Sidebar/MobileSidebarButton',
5
5
  }))<{ opened?: boolean }>`
6
- background-color: var(--color-primary-500);
6
+ background-color: var(
7
+ ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
8
+ );
7
9
  width: 55px;
8
10
  user-select: none;
9
11
  height: 55px;
@@ -12,33 +14,28 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
12
14
  position: fixed;
13
15
  right: 20px;
14
16
  z-index: 3;
15
- box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;
17
+ box-shadow: ${(props) =>
18
+ props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
16
19
  border-radius: 50%;
17
20
  transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
18
21
  transition: transform 0.75s;
19
22
 
20
- ${({ theme }) => theme.mediaQueries.medium} {
23
+ background-image: var(--fab-icon);
24
+ background-position: center;
25
+ background-repeat: no-repeat;
26
+ background-size: 45%;
27
+
28
+ &:hover {
29
+ background-color: var(--fab-background-color);
30
+ box-shadow: var(--fab-hover-box-shadow);
31
+ }
32
+
33
+ ${({ theme }) => theme.mediaQueries?.medium} {
21
34
  display: none;
22
35
  transform: rotate(180deg);
23
36
  }
24
37
 
25
- ${({ theme }) => theme.mediaQueries.print} {
38
+ ${({ theme }) => theme.mediaQueries?.print} {
26
39
  display: none !important;
27
40
  }
28
-
29
- :after {
30
- content: '';
31
- display: inline-block;
32
- position: absolute;
33
- transform: translate(-50%, -50%);
34
- top: 50%;
35
- left: 50%;
36
- width: 25px;
37
- height: 25px;
38
- background-color: #fff;
39
- -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
40
- no-repeat 50% 50%;
41
- mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
42
- no-repeat 50% 50%;
43
- }
44
41
  `;
package/src/globalStyle.ts CHANGED
@@ -180,7 +180,7 @@ const headingsTypography = css`
180
180
 
181
181
  --heading-anchor-offset-right: 4px; // @presenter Spacing
182
182
  --heading-anchor-color: var(--color-primary-500); // @presenter Color
183
- /*--heading-anchor-icon: icons later */
183
+ --heading-anchor-icon: none;
184
184
 
185
185
  // TODO: implement a theme setting for heading-anchor-location: left right
186
186
 
@@ -440,10 +440,14 @@ const sidebar = css`
440
440
  * @presenter Color
441
441
  */
442
442
  --sidebar-item-text-color: var(--text-color);
443
- --sidebar-item-active-color: var(--text-color);
444
443
  --sidebar-item-background-color: transparent;
444
+
445
+ --sidebar-item-active-color: var(--text-color);
445
446
  --sidebar-item-active-background-color: var(--border-color);
446
447
 
448
+ --sidebar-item-hover-background-color: var(--border-color);
449
+ --sidebar-item-hover-color: var(--text-color);
450
+
447
451
  /**
448
452
  * @tokens Sidebar item spacing
449
453
  * @presenter Spacing
@@ -522,8 +526,8 @@ const sidebar = css`
522
526
  --sidebar-back-button-hover-background-color: transparent;
523
527
  --sidebar-back-button-icon-color: var(--sidebar-item-text-color);
524
528
  --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;
525
-
526
- //--sidebar-back-button-icon: <svg string or url>
529
+ --sidebar-back-button-icon: none;
530
+
527
531
  //--sidebar-version-dropdown-* (input settings, see below)
528
532
  // @tokens End
529
533
  `;
@@ -576,13 +580,14 @@ const admonition = css`
576
580
  --admonition-info-border-width: var(--admonition-border-width);
577
581
  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
578
582
  var(--admonition-info-border-color); // @presenter Border
579
- /* --admonition-info-icon: figure this out latter */
583
+ --admonition-info-icon: none;
580
584
 
581
585
  /**
582
586
  * @tokens Admonition type attention
587
+ * @presenter Color
583
588
  */
584
589
 
585
- --admonition-attention-background-color: var(--color-accent-50); // @presenter Color
590
+ --admonition-attention-background-color: var(--color-accent-50); // @presenter Color
586
591
  --admonition-attention-text-color: var(--text-color); // @presenter Color
587
592
  --admonition-attention-heading-text-color: var(--text-color); // @presenter Color
588
593
  --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color
@@ -591,7 +596,7 @@ const admonition = css`
591
596
  --admonition-attention-border-width: var(--admonition-border-width);
592
597
  --admonition-attention-border: var(--admonition-attention-border-width)
593
598
  var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border
594
- /* --admonition-attention-icon: figure this out latter */
599
+ --admonition-attention-icon: none;
595
600
 
596
601
  /**
597
602
  * @tokens Admonition type warning
@@ -607,7 +612,7 @@ const admonition = css`
607
612
  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
608
613
  --admonition-warning-border: var(--admonition-warning-border-width)
609
614
  var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
610
- /* --admonition-warning-icon: figure this out latter */
615
+ --admonition-warning-icon: none;
611
616
 
612
617
  /**
613
618
  * @tokens Admonition type danger
@@ -622,7 +627,7 @@ const admonition = css`
622
627
  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
623
628
  --admonition-danger-border: var(--admonition-danger-border-width)
624
629
  var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
625
- /* --admonition-danger-icon: figure this out latter */
630
+ --admonition-danger-icon: none;
626
631
 
627
632
  /**
628
633
  * @tokens Admonition type success
@@ -636,7 +641,7 @@ const admonition = css`
636
641
  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
637
642
  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
638
643
  --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
639
- /* --admonition-success-icon: figure this out latter */
644
+ --admonition-success-icon: none;
640
645
 
641
646
  // @tokens End
642
647
  `;
@@ -1426,6 +1431,8 @@ const apiReferenceDocs = css`
1426
1431
  --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize
1427
1432
  --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
1428
1433
 
1434
+ --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color
1435
+
1429
1436
  --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
1430
1437
  --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color
1431
1438
  --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color
@@ -1441,7 +1448,7 @@ const apiReferenceDocs = css`
1441
1448
  --schema-chevron-size: 9px;
1442
1449
 
1443
1450
  --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color
1444
- /* --schema-property-deep-link-icon: figure out this later */
1451
+ --schema-property-deep-link-icon: none;
1445
1452
 
1446
1453
  /*
1447
1454
  * @tokens API Reference Other
@@ -1451,19 +1458,16 @@ const apiReferenceDocs = css`
1451
1458
  --linear-progress-color: var(--color-accent-500); // @presenter Color
1452
1459
  --linear-progress-background-color: var(--color-accent-100); // @presenter Color
1453
1460
 
1454
- --fab-icon-color: var(--color-primary-500); // @presenter Color
1455
- --fab-background-color: var(--background-color); // @presenter Color
1456
- --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow
1461
+ --fab-background-color: var(--color-primary-500); // @presenter Color
1462
+ --fab-box-shadow: var(--box-shadow); // @presenter Shadow
1457
1463
 
1458
- --fab-hover-background: var(--color-emphasis-200); // @presenter Color
1459
- --fab-hover-icon-color: var(--color-primary-600); // @presenter Color
1460
- --fab-hover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow
1464
+ --fab-hover-background: var(--color-primary-500); // @presenter Color
1465
+ --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow
1461
1466
 
1462
- --fab-active-background: var(--color-emphasis-200); // @presenter Color
1463
- --fab-active-icon-color: var(--color-primary-600); // @presenter Color
1464
- --fab-active-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow
1467
+ --fab-active-background: var(--color-primary-500); // @presenter Color
1468
+ --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow
1465
1469
 
1466
- /* --fab-icon: <svg string or url> work with icons later **/
1470
+ --fab-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
1467
1471
 
1468
1472
  // @tokens End
1469
1473
  `;
@@ -1567,7 +1571,7 @@ const navbar = css`
1567
1571
  --navbar-height: 60px; // @presenter Spacing
1568
1572
  --navbar-text-color: #fff; // @presenter Color
1569
1573
  --navbar-background-color: var(--color-primary-500); // @presenter Color
1570
- --navbar-container-max-width: 1200px;
1574
+ --navbar-container-max-width: 100%;
1571
1575
 
1572
1576
  /**
1573
1577
  * @tokens Navbar Item
package/src/icons/AlertIcon/AlertIcon.tsx CHANGED
@@ -108,4 +108,9 @@ export const AlertIcon = styled(Icon).attrs(() => ({
108
108
  flex-shrink: 0;
109
109
 
110
110
  fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
111
+
112
+ background-image: ${({ type }) => `var(--admonition-${type}-icon)`};
113
+ background-repeat: no-repeat;
114
+ background-position: center;
115
+ background-size: contain;
111
116
  `;
package/src/ui/Tiles/WideTile.tsx CHANGED
@@ -19,7 +19,7 @@ const WideTileWrapper = styled(Link)<{
19
19
  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
20
20
  border-radius: 10px;
21
21
  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
22
- background-color: ${({ bgColor }) => bgColor || '#fff'};
22
+ background-color: ${({ bgColor }) => bgColor || 'var(--color-secondary-50)'};
23
23
  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
24
24
  background-repeat: no-repeat;
25
25
  padding: 24px;
package/ui/Tiles/WideTile.js CHANGED
@@ -57,7 +57,7 @@ var WideTileWrapper = (0, styled_components_1.default)(Link_1.Link)(templateObje
57
57
  return (withIcon ? 'column' : 'row');
58
58
  }, function (_a) {
59
59
  var bgColor = _a.bgColor;
60
- return bgColor || '#fff';
60
+ return bgColor || 'var(--color-secondary-50)';
61
61
  }, function (_a) {
62
62
  var bgImage = _a.bgImage;
63
63
  return (bgImage ? "url(".concat(bgImage, ")") : 'none');