@redocly/theme 0.4.5 → 0.4.7

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 (13) hide show
  1. package/Panel/Panel.js +1 -1
  2. package/Panel/PanelComponent.js +1 -1
  3. package/globalStyle.js +7 -6
  4. package/package.json +4 -1
  5. package/src/Panel/Panel.ts +2 -2
  6. package/src/Panel/PanelComponent.tsx +4 -0
  7. package/src/globalStyle.ts +12 -3
  8. package/src/ui/Tiles/ThinTile.tsx +1 -1
  9. package/src/ui/Tiles/WideTile.tsx +1 -1
  10. package/src/ui/darkColors.tsx +48 -17
  11. package/ui/Tiles/ThinTile.js +1 -1
  12. package/ui/Tiles/WideTile.js +1 -1
  13. package/ui/darkColors.js +1 -1
package/Panel/Panel.js CHANGED
@@ -19,5 +19,5 @@ exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent
19
19
  'data-component-name': 'Panel/Panel',
20
20
  className: className || 'panel-default',
21
21
  });
22
- })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--panel-background-color);\n color: var(--panel-text-color);\n font-family: var(--panel-font-family-local);\n font-size: var(--panel-font-size-local);\n font-weight: var(--panel-font-weight-local);\n border: var(--panel-border-local);\n border-radius: var(--panel-border-radius);\n\n ", " + ", " {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n ", " {\n ", " {\n fill: var(--panel-chevron-icon-color); // ?????\n }\n }\n\n &:not(:last-child) {\n margin-bottom: var(--panel-gap-vertical);\n }\n"], ["\n background-color: var(--panel-background-color);\n color: var(--panel-text-color);\n font-family: var(--panel-font-family-local);\n font-size: var(--panel-font-size-local);\n font-weight: var(--panel-font-weight-local);\n border: var(--panel-border-local);\n border-radius: var(--panel-border-radius);\n\n ", " + ", " {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n ", " {\n ", " {\n fill: var(--panel-chevron-icon-color); // ?????\n }\n }\n\n &:not(:last-child) {\n margin-bottom: var(--panel-gap-vertical);\n }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, ShelfIcon_1.ShelfIcon);
22
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--panel-background-color);\n color: var(--panel-text-color);\n font-family: var(--panel-font-family-local);\n font-size: var(--panel-font-size-local);\n font-weight: var(--panel-font-weight-local);\n border-radius: var(--panel-border-radius-local);\n border: var(--panel-border-local);\n\n ", " + ", " {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n ", " {\n ", " {\n fill: var(--panel-chevron-icon-color);\n }\n }\n\n &:not(:last-child) {\n margin-bottom: var(--panel-gap-vertical);\n }\n"], ["\n background-color: var(--panel-background-color);\n color: var(--panel-text-color);\n font-family: var(--panel-font-family-local);\n font-size: var(--panel-font-size-local);\n font-weight: var(--panel-font-weight-local);\n border-radius: var(--panel-border-radius-local);\n border: var(--panel-border-local);\n\n ", " + ", " {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n ", " {\n ", " {\n fill: var(--panel-chevron-icon-color);\n }\n }\n\n &:not(:last-child) {\n margin-bottom: var(--panel-gap-vertical);\n }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, ShelfIcon_1.ShelfIcon);
23
23
  var templateObject_1;
package/Panel/PanelComponent.js CHANGED
@@ -76,5 +76,5 @@ function PanelComponent(_a) {
76
76
  (isExpanded || renderChildrenHidden) && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
77
77
  }
78
78
  exports.PanelComponent = PanelComponent;
79
- exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n"], ["\n display: inline-flex;\n align-items: center;\n"])));
79
+ exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n\n > span:last-child {\n margin-left: 8px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n\n > span:last-child {\n margin-left: 8px;\n }\n"])));
80
80
  var templateObject_1;
package/globalStyle.js CHANGED
@@ -15,12 +15,12 @@ var common = (0, styled_components_1.css)(templateObject_5 || (templateObject_5
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
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
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
- 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
- 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"])));
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
+ 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-border-radius-local: calc(1px + var(--panel-border-radius));\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-border-radius-local: calc(1px + var(--panel-border-radius));\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 --panel-border-radius-local: calc(1px + var(--panel-border-radius));\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-border-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-border-radius-local: calc(1px + var(--panel-border-radius));\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-border-radius-local: calc(1px + var(--panel-border-radius));\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 --panel-border-radius-local: calc(1px + var(--panel-border-radius));\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-border-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 --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"])));
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: 1em; // @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: 1em; // @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"])));
@@ -31,6 +31,7 @@ var markdown = (0, styled_components_1.css)(templateObject_21 || (templateObject
31
31
  var search = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n /**\n * @tokens Search\n */\n\n --search-highlight-text-color: #ffff03; // @presenter Color\n\n /**\n * @tokens Portal Search\n */\n\n --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-text-color: #fff; // @presenter Color\n\n --search-input-border: none;\n --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n --search-input-line-height: 1.15em; // @presenter LineHeight\n\n --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-hover-border: none; // @presenter Color\n --search-input-placeholder-color: var(--search-input-text-color);\n\n --search-popover-background-color: var(--background-color); // @presenter Color\n --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n 0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n --search-popover-border: none;\n\n --search-item-padding: 8px 24px;\n --search-item-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-title-text-color: var(--text-color); // @presenter Color\n --search-item-background-color: transparent; // @presenter Color\n --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-active-title-text-color: var(--text-color); // @presenter Color\n --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n /**\n * @tokens Sidebar Search\n */\n\n --sidebar-search-button-background-color: transparent; // @presenter Color\n --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n --sidebar-search-button-border: var(--border-color);\n --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n --sidebar-search-button-active-background-color: transparent; // @presenter Color\n --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n /**\n * @tokens Search results modal\n * @presenter Color\n */\n\n --search-modal-background: var(--background-color);\n --search-modal-text-color: var(--text-color);\n --search-modal-border: none;\n --search-modal-box-shadow: none;\n\n --search-modal-header-border-radius: 8px;\n --search-modal-header-background-color: var(--color-secondary-100);\n --search-modal-clear-button-background-color: var(--color-secondary-300);\n --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n // @tokens End\n"], ["\n /**\n * @tokens Search\n */\n\n --search-highlight-text-color: #ffff03; // @presenter Color\n\n /**\n * @tokens Portal Search\n */\n\n --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-text-color: #fff; // @presenter Color\n\n --search-input-border: none;\n --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n --search-input-line-height: 1.15em; // @presenter LineHeight\n\n --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-hover-border: none; // @presenter Color\n --search-input-placeholder-color: var(--search-input-text-color);\n\n --search-popover-background-color: var(--background-color); // @presenter Color\n --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n 0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n --search-popover-border: none;\n\n --search-item-padding: 8px 24px;\n --search-item-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-title-text-color: var(--text-color); // @presenter Color\n --search-item-background-color: transparent; // @presenter Color\n --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-active-title-text-color: var(--text-color); // @presenter Color\n --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n /**\n * @tokens Sidebar Search\n */\n\n --sidebar-search-button-background-color: transparent; // @presenter Color\n --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n --sidebar-search-button-border: var(--border-color);\n --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n --sidebar-search-button-active-background-color: transparent; // @presenter Color\n --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n /**\n * @tokens Search results modal\n * @presenter Color\n */\n\n --search-modal-background: var(--background-color);\n --search-modal-text-color: var(--text-color);\n --search-modal-border: none;\n --search-modal-box-shadow: none;\n\n --search-modal-header-border-radius: 8px;\n --search-modal-header-background-color: var(--color-secondary-100);\n --search-modal-clear-button-background-color: var(--color-secondary-300);\n --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n // @tokens End\n"])));
32
32
  var dropdown = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n --dropdown-font-size: 14px;\n --dropdown-text-color: var(--text-color);\n\n --dropdown-padding-vertical: 8px;\n --dropdown-padding-left: 10px;\n --dropdown-padding-right: 26px;\n --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n --dropdown-border: none;\n"], ["\n --dropdown-font-size: 14px;\n --dropdown-text-color: var(--text-color);\n\n --dropdown-padding-vertical: 8px;\n --dropdown-padding-left: 10px;\n --dropdown-padding-right: 26px;\n --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n --dropdown-border: none;\n"])));
33
33
  var lastUpdated = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n --last-updated-text-color: var(--text-color);\n --last-updated-font-size: var(--font-size-small);\n --last-updated-font-family: var(--font-family-base);\n --last-updated-line-height: var(--line-height-base);\n"], ["\n --last-updated-text-color: var(--text-color);\n --last-updated-font-size: var(--font-size-small);\n --last-updated-font-family: var(--font-family-base);\n --last-updated-line-height: var(--line-height-base);\n"])));
34
- exports.styles = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n\n :root.dark {\n ", ";\n }\n"], ["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n\n :root.dark {\n ", ";\n }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, darkColors_1.darkMode);
35
- exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), exports.styles);
36
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
34
+ var tile = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n --wide-tile-background-color: var(--color-secondary-50);\n --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n --wide-tile-background-color: var(--color-secondary-50);\n --thin-tile-background-color: var(--color-secondary-50);\n"])));
35
+ exports.styles = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n\n :root.dark {\n ", ";\n }\n"], ["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n\n :root.dark {\n ", ";\n }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, tile, darkColors_1.darkMode);
36
+ exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), exports.styles);
37
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.4.5",
3
+ "version": "0.4.7",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -14,5 +14,8 @@
14
14
  "react-router-dom": "^5.3.0",
15
15
  "styled-components": "^5.3.1",
16
16
  "styled-system": "^5.1.5"
17
+ },
18
+ "dependencies": {
19
+ "timeago.js": "^4.0.2"
17
20
  }
18
21
  }
package/src/Panel/Panel.ts CHANGED
@@ -14,8 +14,8 @@ export const Panel = styled(PanelComponent).attrs(({ className }) => ({
14
14
  font-family: var(--panel-font-family-local);
15
15
  font-size: var(--panel-font-size-local);
16
16
  font-weight: var(--panel-font-weight-local);
17
+ border-radius: var(--panel-border-radius-local);
17
18
  border: var(--panel-border-local);
18
- border-radius: var(--panel-border-radius);
19
19
 
20
20
  ${PanelHeader} + ${PanelBody} {
21
21
  border-top-left-radius: 0;
@@ -24,7 +24,7 @@ export const Panel = styled(PanelComponent).attrs(({ className }) => ({
24
24
 
25
25
  ${PanelHeader} {
26
26
  ${ShelfIcon} {
27
- fill: var(--panel-chevron-icon-color); // ?????
27
+ fill: var(--panel-chevron-icon-color);
28
28
  }
29
29
  }
30
30
 
package/src/Panel/PanelComponent.tsx CHANGED
@@ -75,4 +75,8 @@ export function PanelComponent({
75
75
  export const InlineBox = styled.div`
76
76
  display: inline-flex;
77
77
  align-items: center;
78
+
79
+ > span:last-child {
80
+ margin-left: 8px;
81
+ }
78
82
  `;
package/src/globalStyle.ts CHANGED
@@ -656,7 +656,7 @@ const responsePanelColors = css`
656
656
  --panel-response-heading-line-height: 20px;
657
657
  --panel-response-heading-font-weight: var(--font-weight-bold);
658
658
  --panel-response-heading-text-color: var(--text-color);
659
-
659
+
660
660
  --panel-response-body-text-color: var(--text-color);
661
661
 
662
662
  /**
@@ -815,6 +815,7 @@ const apiReferencePanels = css`
815
815
  --panel-font-weight-local: var(--panel-schemas-font-weight);
816
816
  --panel-background-color: var(--panel-schemas-background-color); // @presenter Color
817
817
  --panel-border-local: var(--panel-schemas-border);
818
+ --panel-border-radius-local: calc(1px + var(--panel-border-radius));
818
819
  --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color
819
820
 
820
821
  --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color
@@ -890,6 +891,7 @@ const apiReferencePanels = css`
890
891
  --panel-font-weight-local: var(--panel-samples-font-weight);
891
892
  --panel-background-color: var(--panel-samples-background-color); // @presenter Color
892
893
  --panel-border-local: var(--panel-samples-border);
894
+ --panel-border-radius-local: calc(1px + var(--panel-border-radius));
893
895
  --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
894
896
 
895
897
  --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
@@ -923,6 +925,7 @@ const apiReferencePanels = css`
923
925
  .panel-response-redirect,
924
926
  .panel-response-callback {
925
927
  --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color
928
+ --panel-border-radius-local: calc(1px + var(--panel-border-radius));
926
929
 
927
930
  --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
928
931
  --panel-heading-font-size-local: var(--panel-response-heading-font-size);
@@ -1088,7 +1091,7 @@ const apiReferencePanels = css`
1088
1091
  --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color
1089
1092
 
1090
1093
  --panel-try-it-tabs-border-color: transparent; // @presenter Color
1091
- --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color
1094
+ --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-border-color); // @presenter Color
1092
1095
  --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color
1093
1096
  --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color
1094
1097
 
@@ -1323,7 +1326,7 @@ const apiReferenceDocs = css`
1323
1326
 
1324
1327
  --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color
1325
1328
  --schema-type-text-color: var(--text-color-secondary); // @presenter Color
1326
- --schema-labels-font-size: 0.8em; // @presenter FontSize
1329
+ --schema-labels-font-size: 1em; // @presenter FontSize
1327
1330
 
1328
1331
  /**
1329
1332
  * @tokens API Reference Schemas Lines Color
@@ -1844,6 +1847,11 @@ const lastUpdated = css`
1844
1847
  --last-updated-line-height: var(--line-height-base);
1845
1848
  `;
1846
1849
 
1850
+ const tile = css`
1851
+ --wide-tile-background-color: var(--color-secondary-50);
1852
+ --thin-tile-background-color: var(--color-secondary-50);
1853
+ `
1854
+
1847
1855
  export const styles = css`
1848
1856
  :root {
1849
1857
  ${baseColors}
@@ -1870,6 +1878,7 @@ export const styles = css`
1870
1878
  ${apiReferencePanels}
1871
1879
  ${apiReferenceDocs}
1872
1880
  ${lastUpdated}
1881
+ ${tile}
1873
1882
  }
1874
1883
 
1875
1884
  :root.dark {
package/src/ui/Tiles/ThinTile.tsx CHANGED
@@ -35,7 +35,7 @@ const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
35
35
  margin-bottom: 20px;
36
36
  text-decoration: none;
37
37
  width: 100%;
38
- background-color: ${({ bgColor }) => bgColor || '#fff'};
38
+ background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
39
39
  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
40
40
  background-repeat: no-repeat;
41
41
 
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 || 'var(--color-secondary-50)'};
22
+ background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
23
23
  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
24
24
  background-repeat: no-repeat;
25
25
  padding: 24px;
package/src/ui/darkColors.tsx CHANGED
@@ -5,23 +5,54 @@ export const darkMode = css`
5
5
  * @tokens Dark Colors
6
6
  * @presenter Color
7
7
  */
8
-
9
- --color-primary-300: #1e5ab1;
10
- --color-primary-500: #003c95;
11
-
12
- --color-accent-50: #6c91c0;
13
-
14
- --color-secondary-50: #031e48;
15
- --color-secondary-200: #142d62;
16
- --color-secondary-300: #3f517c;
17
- --color-secondary-500: #222222;
18
-
19
- --color-emphasis-100: #5c5e62;
20
- --color-emphasis-800: #f0f0f0;
21
-
22
- --color-success-50: #627565;
23
- --color-error-50: #bda3a7;
24
- --color-warning-50: #8c8469;
8
+ --background-color: #0d1117;
9
+ --footer-background-color: #16202e;
10
+ --navbar-background-color: #16202e;
11
+ --color-primary-500: #57a5fd;
12
+ --color-primary-300: #15396e;
13
+ --color-secondary-300: #22262e;
14
+ --colors-translucent: rgb(50 63 75 / 40%);
15
+ --inline-code-text-color: #f76663;
16
+ --color-emphasis-400: #fff;
17
+ --link-hover-text-color: #57a5fd;
18
+ --link-text-color: #57a5fd;
19
+ --code-block-background-color: #1e2633;
20
+ --admonition-attention-background-color: #143568;
21
+ --admonition-warning-background-color: #614b17;
22
+ --inline-code-background-color: #1e2633;
23
+ --toc-item-active-background-color: #1e2633;
24
+ --sidebar-item-active-background-color: #1e2633;
25
+ --panel-response-success-heading-background-color: #38b9a5;
26
+ --panel-response-success-border-color: #38b9a5;
27
+ --panel-response-error-heading-background-color: #d6524c;
28
+ --panel-response-error-border-color: #d6524c;
29
+ --panel-samples-heading-background-color: #1e2633;
30
+ --panel-samples-body-background-color: #263041;
31
+ --panel-samples-tabs-hover-background-color: #1e2633;
32
+ --panel-samples-tabs-hover-border-color: #3f4f68;
33
+ --panel-try-it-action-button-hover-border-color: #2b4cc4;
34
+ --panel-try-it-action-button-hover-background-color: #2b4cc4;
35
+ --panel-try-it-action-button-background-color: #0065fb;
36
+ --button-background-color: #0065fb;
37
+ --button-border-color: #0065fb;
38
+ --button-hover-background-color: #2b4cc4;
39
+ --button-hover-border-color: #2b4cc4;
40
+ --search-popover-background-color: #1b2738;
41
+ --search-highlight-text-color: #57a5fd;
42
+ --search-item-active-background-color: #1f3559;
43
+ --panel-try-it-nested-body-background-color: #263041;
44
+ --panel-try-it-tabs-active-background-color: #11151d;
45
+ --panel-try-it-tabs-hover-background-color: #141a26;
46
+ --color-emphasis-100: #0065fb;
47
+ --color-secondary-400: #696969;
48
+ --color-emphasis-700: #fff;
49
+ --color-emphasis-800: #fff;
50
+ --copy-button-tooltip-text-color: #fff;
51
+ --copy-button-tooltip-background-color: var(--tooltip-background-color);
52
+ --tooltip-text-color: #fff;
53
+ --md-table-head-background-color: var(--color-secondary-300);
54
+ --wide-tile-background-color: #000000;
55
+ --thin-tile-background-color: #000000;
25
56
 
26
57
  background-color: var(--background-color);
27
58
  color: var(--text-color);
package/ui/Tiles/ThinTile.js CHANGED
@@ -54,7 +54,7 @@ var TileText_1 = require("../../ui/Tiles/TileText");
54
54
  var TileHeader_1 = require("../../ui/Tiles/TileHeader");
55
55
  var ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 10px;\n box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n box-sizing: border-box;\n transition: box-shadow 0.25s ease;\n padding: 24px;\n margin-bottom: 20px;\n text-decoration: none;\n width: 100%;\n background-color: ", ";\n background-image: ", ";\n background-repeat: no-repeat;\n\n :hover {\n box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);\n }\n\n ", " {\n width: calc(50% - 20px);\n margin-right: 10px;\n margin-left: 10px;\n }\n\n ", " {\n width: 250px;\n }\n\n ", " {\n width: 280px;\n }\n\n &.external-url {\n :after {\n display: none;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 10px;\n box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n box-sizing: border-box;\n transition: box-shadow 0.25s ease;\n padding: 24px;\n margin-bottom: 20px;\n text-decoration: none;\n width: 100%;\n background-color: ", ";\n background-image: ", ";\n background-repeat: no-repeat;\n\n :hover {\n box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);\n }\n\n ", " {\n width: calc(50% - 20px);\n margin-right: 10px;\n margin-left: 10px;\n }\n\n ", " {\n width: 250px;\n }\n\n ", " {\n width: 280px;\n }\n\n &.external-url {\n :after {\n display: none;\n }\n }\n"])), function (_a) {
56
56
  var bgColor = _a.bgColor;
57
- return bgColor || '#fff';
57
+ return bgColor || 'var(--thin-tile-background-color)';
58
58
  }, function (_a) {
59
59
  var bgImage = _a.bgImage;
60
60
  return (bgImage ? "url(".concat(bgImage, ")") : 'none');
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 || 'var(--color-secondary-50)';
60
+ return bgColor || 'var(--wide-tile-background-color)';
61
61
  }, function (_a) {
62
62
  var bgImage = _a.bgImage;
63
63
  return (bgImage ? "url(".concat(bgImage, ")") : 'none');
package/ui/darkColors.js CHANGED
@@ -6,5 +6,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.darkMode = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
- exports.darkMode = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /**\n * @tokens Dark Colors\n * @presenter Color\n */\n\n --color-primary-300: #1e5ab1;\n --color-primary-500: #003c95;\n\n --color-accent-50: #6c91c0;\n\n --color-secondary-50: #031e48;\n --color-secondary-200: #142d62;\n --color-secondary-300: #3f517c;\n --color-secondary-500: #222222;\n\n --color-emphasis-100: #5c5e62;\n --color-emphasis-800: #f0f0f0;\n\n --color-success-50: #627565;\n --color-error-50: #bda3a7;\n --color-warning-50: #8c8469;\n\n background-color: var(--background-color);\n color: var(--text-color);\n"], ["\n /**\n * @tokens Dark Colors\n * @presenter Color\n */\n\n --color-primary-300: #1e5ab1;\n --color-primary-500: #003c95;\n\n --color-accent-50: #6c91c0;\n\n --color-secondary-50: #031e48;\n --color-secondary-200: #142d62;\n --color-secondary-300: #3f517c;\n --color-secondary-500: #222222;\n\n --color-emphasis-100: #5c5e62;\n --color-emphasis-800: #f0f0f0;\n\n --color-success-50: #627565;\n --color-error-50: #bda3a7;\n --color-warning-50: #8c8469;\n\n background-color: var(--background-color);\n color: var(--text-color);\n"])));
9
+ exports.darkMode = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /**\n * @tokens Dark Colors\n * @presenter Color\n */\n --background-color: #0d1117;\n --footer-background-color: #16202e;\n --navbar-background-color: #16202e;\n --color-primary-500: #57a5fd;\n --color-primary-300: #15396e;\n --color-secondary-300: #22262e;\n --colors-translucent: rgb(50 63 75 / 40%);\n --inline-code-text-color: #f76663;\n --color-emphasis-400: #fff;\n --link-hover-text-color: #57a5fd;\n --link-text-color: #57a5fd;\n --code-block-background-color: #1e2633;\n --admonition-attention-background-color: #143568;\n --admonition-warning-background-color: #614b17;\n --inline-code-background-color: #1e2633;\n --toc-item-active-background-color: #1e2633;\n --sidebar-item-active-background-color: #1e2633;\n --panel-response-success-heading-background-color: #38b9a5;\n --panel-response-success-border-color: #38b9a5;\n --panel-response-error-heading-background-color: #d6524c;\n --panel-response-error-border-color: #d6524c;\n --panel-samples-heading-background-color: #1e2633;\n --panel-samples-body-background-color: #263041;\n --panel-samples-tabs-hover-background-color: #1e2633;\n --panel-samples-tabs-hover-border-color: #3f4f68;\n --panel-try-it-action-button-hover-border-color: #2b4cc4;\n --panel-try-it-action-button-hover-background-color: #2b4cc4;\n --panel-try-it-action-button-background-color: #0065fb;\n --button-background-color: #0065fb;\n --button-border-color: #0065fb;\n --button-hover-background-color: #2b4cc4;\n --button-hover-border-color: #2b4cc4;\n --search-popover-background-color: #1b2738;\n --search-highlight-text-color: #57a5fd;\n --search-item-active-background-color: #1f3559;\n --panel-try-it-nested-body-background-color: #263041;\n --panel-try-it-tabs-active-background-color: #11151d;\n --panel-try-it-tabs-hover-background-color: #141a26;\n --color-emphasis-100: #0065fb;\n --color-secondary-400: #696969;\n --color-emphasis-700: #fff;\n --color-emphasis-800: #fff;\n --copy-button-tooltip-text-color: #fff;\n --copy-button-tooltip-background-color: var(--tooltip-background-color);\n --tooltip-text-color: #fff;\n --md-table-head-background-color: var(--color-secondary-300);\n --wide-tile-background-color: #000000;\n --thin-tile-background-color: #000000;\n\n background-color: var(--background-color);\n color: var(--text-color);\n"], ["\n /**\n * @tokens Dark Colors\n * @presenter Color\n */\n --background-color: #0d1117;\n --footer-background-color: #16202e;\n --navbar-background-color: #16202e;\n --color-primary-500: #57a5fd;\n --color-primary-300: #15396e;\n --color-secondary-300: #22262e;\n --colors-translucent: rgb(50 63 75 / 40%);\n --inline-code-text-color: #f76663;\n --color-emphasis-400: #fff;\n --link-hover-text-color: #57a5fd;\n --link-text-color: #57a5fd;\n --code-block-background-color: #1e2633;\n --admonition-attention-background-color: #143568;\n --admonition-warning-background-color: #614b17;\n --inline-code-background-color: #1e2633;\n --toc-item-active-background-color: #1e2633;\n --sidebar-item-active-background-color: #1e2633;\n --panel-response-success-heading-background-color: #38b9a5;\n --panel-response-success-border-color: #38b9a5;\n --panel-response-error-heading-background-color: #d6524c;\n --panel-response-error-border-color: #d6524c;\n --panel-samples-heading-background-color: #1e2633;\n --panel-samples-body-background-color: #263041;\n --panel-samples-tabs-hover-background-color: #1e2633;\n --panel-samples-tabs-hover-border-color: #3f4f68;\n --panel-try-it-action-button-hover-border-color: #2b4cc4;\n --panel-try-it-action-button-hover-background-color: #2b4cc4;\n --panel-try-it-action-button-background-color: #0065fb;\n --button-background-color: #0065fb;\n --button-border-color: #0065fb;\n --button-hover-background-color: #2b4cc4;\n --button-hover-border-color: #2b4cc4;\n --search-popover-background-color: #1b2738;\n --search-highlight-text-color: #57a5fd;\n --search-item-active-background-color: #1f3559;\n --panel-try-it-nested-body-background-color: #263041;\n --panel-try-it-tabs-active-background-color: #11151d;\n --panel-try-it-tabs-hover-background-color: #141a26;\n --color-emphasis-100: #0065fb;\n --color-secondary-400: #696969;\n --color-emphasis-700: #fff;\n --color-emphasis-800: #fff;\n --copy-button-tooltip-text-color: #fff;\n --copy-button-tooltip-background-color: var(--tooltip-background-color);\n --tooltip-text-color: #fff;\n --md-table-head-background-color: var(--color-secondary-300);\n --wide-tile-background-color: #000000;\n --thin-tile-background-color: #000000;\n\n background-color: var(--background-color);\n color: var(--text-color);\n"])));
10
10
  var templateObject_1;