@redocly/theme 0.4.0 → 0.4.1

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 (3) hide show
  1. package/globalStyle.js +2 -2
  2. package/package.json +1 -1
  3. package/src/globalStyle.ts +23 -67
package/globalStyle.js CHANGED
@@ -14,9 +14,9 @@ var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templ
14
14
  var common = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --border-width: 1px;\n --border-style: solid;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --border-radius: 4px;\n --border-radius-lg: calc(var(--border-radius) * 2);\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --border-color: var(--color-secondary-300);\n --border-color-secondary: var(--color-emphasis-600);\n --background-color: transparent;\n\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"], ["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --border-width: 1px;\n --border-style: solid;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --border-radius: 4px;\n --border-radius-lg: calc(var(--border-radius) * 2);\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --border-color: var(--color-secondary-300);\n --border-color-secondary: var(--color-emphasis-600);\n --background-color: transparent;\n\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"])));
15
15
  var buttons = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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: #fff;\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n --sidebar-item-active-background-color: var(--border-color);\n\n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n\n //--sidebar-back-button-icon: <svg string or url>\n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"], ["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: #fff;\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n --sidebar-item-active-background-color: var(--border-color);\n\n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n\n //--sidebar-back-button-icon: <svg string or url>\n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"])));
17
- var admonition = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\n\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n /* --admonition-info-icon: figure this out latter */\n\n /**\n * @tokens Admonition type attention\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color\n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n /* --admonition-attention-icon: figure this out latter */\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n /* --admonition-warning-icon: figure this out latter */\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n /* --admonition-danger-icon: figure this out latter */\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width)\n var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n /* --admonition-success-icon: figure this out latter */\n\n // @tokens End\n"], ["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\n\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n /* --admonition-info-icon: figure this out latter */\n\n /**\n * @tokens Admonition type attention\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color\n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n /* --admonition-attention-icon: figure this out latter */\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n /* --admonition-warning-icon: figure this out latter */\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n /* --admonition-danger-icon: figure this out latter */\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width)\n var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n /* --admonition-success-icon: figure this out latter */\n\n // @tokens End\n"])));
17
+ var admonition = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\n\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n /* --admonition-info-icon: figure this out latter */\n\n /**\n * @tokens Admonition type attention\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color\n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n /* --admonition-attention-icon: figure this out latter */\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n /* --admonition-warning-icon: figure this out latter */\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n /* --admonition-danger-icon: figure this out latter */\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n /* --admonition-success-icon: figure this out latter */\n\n // @tokens End\n"], ["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\n\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n /* --admonition-info-icon: figure this out latter */\n\n /**\n * @tokens Admonition type attention\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color\n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n /* --admonition-attention-icon: figure this out latter */\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n /* --admonition-warning-icon: figure this out latter */\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n /* --admonition-danger-icon: figure this out latter */\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n /* --admonition-success-icon: figure this out latter */\n\n // @tokens End\n"])));
18
18
  var responsePanelColors = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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(--color-emphasis-50); // @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)\n var(--panel-body-padding);\n --panel-schemas-body-background-color: var(--color-emphasis-50); // @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(--color-emphasis-50); // @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(\n --panel-schemas-heading-background-color\n ); // @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(--color-emphasis-50); // @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(\n --panel-samples-heading-background-color\n ); // @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(\n --panel-response-success-schema-nested-background-color\n );\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(\n --panel-response-info-schema-nested-background-color\n );\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(\n --panel-response-error-schema-nested-background-color\n );\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(\n --panel-response-redirect-schema-nested-background-color\n );\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(\n --panel-response-callback-schema-nested-background-color\n );\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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(\n var(--panel-samples-heading-background-color)\n ); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var(\n --code-block-background-color\n ); // @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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(\n --panel-samples-tabs-hover-background-color\n ); // @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(\n --panel-try-it-tabs-active-background-color\n ); // @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(\n --color-emphasis-700\n ); // @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(\n --color-emphasis-600\n ); // @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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n --panel-samples-controls-hover-background-color: var(\n --panel-samples-tabs-hover-background-color\n ); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(\n --panel-samples-heading-background-color\n ); // @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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(\n --panel-samples-heading-background-color\n ); // @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(\n --panel-samples-heading-background-color\n ); // @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(--color-emphasis-50); // @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)\n var(--panel-body-padding);\n --panel-schemas-body-background-color: var(--color-emphasis-50); // @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(--color-emphasis-50); // @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(\n --panel-schemas-heading-background-color\n ); // @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(--color-emphasis-50); // @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(\n --panel-samples-heading-background-color\n ); // @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(\n --panel-response-success-schema-nested-background-color\n );\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(\n --panel-response-info-schema-nested-background-color\n );\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(\n --panel-response-error-schema-nested-background-color\n );\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(\n --panel-response-redirect-schema-nested-background-color\n );\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(\n --panel-response-callback-schema-nested-background-color\n );\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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(\n var(--panel-samples-heading-background-color)\n ); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var(\n --code-block-background-color\n ); // @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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(\n --panel-samples-tabs-hover-background-color\n ); // @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(\n --panel-try-it-tabs-active-background-color\n ); // @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(\n --color-emphasis-700\n ); // @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(\n --color-emphasis-600\n ); // @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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n --panel-samples-controls-hover-background-color: var(\n --panel-samples-tabs-hover-background-color\n ); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(\n --panel-samples-heading-background-color\n ); // @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(\n --panel-samples-heading-background-color\n ); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(\n --panel-samples-heading-background-color\n ); // @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(\n --panel-samples-heading-background-color\n ); // @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"])));
19
+ var apiReferencePanels = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @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(--color-emphasis-50); // @presenter Color\n --panel-samples-width: 50%;\n\n --panel-samples-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight\n --panel-samples-background-color: #52606d; // @presenter Color\n --panel-samples-border: var(--panel-border); // @presenter Border\n --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color\n\n /**\n * @tokens Panel samples body common\n */\n\n --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-samples-body-padding: var(--panel-body-padding);\n --panel-samples-body-background-color: #52606d; // @presenter Color\n --panel-samples-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel samples heading common\n */\n\n --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-samples-heading-line-height: 30px; // @presenter LineHeight\n --panel-samples-heading-padding: 0 20px;\n --panel-samples-heading-background-color: #323f4b; // @presenter Color\n --panel-samples-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel try-it, request-samples, response-samples, callback samples\n */\n\n .panel-try-it,\n .panel-request-samples,\n .panel-response-samples,\n .panel-callback-samples {\n --panel-text-color: var(--panel-samples-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-samples-font-family);\n --panel-font-size-local: var(--panel-samples-font-size);\n --panel-font-weight-local: var(--panel-samples-font-weight);\n --panel-background-color: var(--panel-samples-background-color); // @presenter Color\n --panel-border-local: var(--panel-samples-border);\n --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color\n --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color\n\n --panel-body-font-family-local: var(--panel-samples-body-font-family);\n --panel-body-font-size-local: var(--panel-samples-body-font-size);\n --panel-body-font-weight-local: var(--panel-samples-body-font-weight);\n --panel-body-padding-local: var(--panel-samples-body-padding);\n --panel-body-border-local: var(--panel-samples-body-border);\n\n --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color\n --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-heading-font-family-local: var(--panel-samples-heading-font-family);\n --panel-heading-font-size-local: var(--panel-samples-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-samples-heading-line-height);\n --panel-heading-padding-local: var(--panel-samples-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n }\n\n /**\n * @tokens Panel response success, info, error, redirect, callback common\n */\n\n .panel-response-success,\n .panel-response-info,\n .panel-response-error,\n .panel-response-redirect,\n .panel-response-callback {\n --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color\n\n --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color\n --panel-heading-font-size-local: var(--panel-response-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-response-heading-line-height);\n --panel-heading-padding-local: var(--panel-response-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n --panel-heading-white-space-local: normal;\n --panel-body-padding-local: var(--panel-body-padding);\n }\n\n /**\n * @tokens Panel response success colors\n * @presenter Color\n */\n\n .panel-response-success {\n --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-success-body-text-color);\n --panel-body-background-color: var(--panel-response-success-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-success-heading-background-color);\n --panel-heading-text-color: var(--panel-response-success-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response info colors\n * @presenter Color\n */\n\n .panel-response-info {\n --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-info-body-text-color);\n --panel-body-background-color: var(--panel-response-info-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-info-heading-background-color);\n --panel-heading-text-color: var(--panel-response-info-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response error colors\n * @presenter Color\n */\n\n .panel-response-error {\n --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-error-body-text-color);\n --panel-body-background-color: var(--panel-response-error-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-error-heading-background-color);\n --panel-heading-text-color: var(--panel-response-error-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response redirect colors\n * @presenter Color\n */\n\n .panel-response-redirect {\n --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border\n --panel-body-text-color: var(--panel-response-redirect-body-text-color);\n\n --panel-body-background-color: var(--panel-response-redirect-body-background-color);\n --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);\n --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response callback colors\n * @presenter Color\n */\n\n .panel-response-callback {\n --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-callback-body-text-color);\n --panel-body-background-color: var(--panel-response-callback-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-callback-heading-background-color);\n --panel-heading-text-color: var(--panel-response-callback-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel try-it nested common\n * @presenter Color\n */\n\n --panel-try-it-nested-text-color: var(--text-color-inverse);\n --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);\n\n --panel-try-it-nested-body-background-color: #3e4c59;\n --panel-try-it-nested-body-text-color: var(--text-color-inverse);\n --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing\n --panel-try-it-nested-body-border-color: var(--color-secondary-800);\n\n --panel-try-it-nested-heading-text-color: var(--text-color-inverse);\n --panel-try-it-nested-heading-background-color: transparent;\n --panel-try-it-nested-heading-border-color: var(--color-secondary-800);\n\n /**\n * @tokens Panel try-it nested\n * @presenter Color\n */\n\n .panel-try-it-nested {\n --panel-text-color: var(--panel-try-it-nested-text-color);\n --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);\n\n --panel-body-text-color: var(--panel-try-it-nested-body-text-color);\n --panel-body-background-color: var(--panel-try-it-nested-body-background-color);\n --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing\n\n --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);\n --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);\n }\n\n /**\n * @tokens Panel samples tabs\n */\n\n --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n\n --panel-samples-tabs-background-color: transparent; // @presenter Color\n --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color\n --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it tabs\n */\n\n --panel-try-it-tabs-font-size: 12px; // @presenter FontSize\n --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color\n\n --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color\n --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color\n\n --panel-try-it-tabs-border-color: transparent; // @presenter Color\n --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color\n --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color\n\n /**\n * @tokens Panel try-it action button\n */\n\n --panel-try-it-action-button-width: auto;\n --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color\n --panel-try-it-action-button-border-color: transparent; // @presenter Color\n\n --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color\n --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color\n\n --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color\n --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color\n\n /**\n * @tokens Panel samples other styles\n */\n\n --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-dropdown-border: unset; // @presenter Border\n\n --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-input-border: unset; // @presenter Border\n\n --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-border: unset; // @presenter Border\n\n // @tokens End\n\n // TODO PUL RIGHT section - related to pull right - fix later\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --layout-right-rail-width: 50%;\n --layout-right-rail-background-color: transparent;\n"])));
20
20
  var tooltip = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __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(--color-secondary-50);\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(--color-secondary-50);\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_13 || (templateObject_13 = __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(--color-secondary-100); // @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(--color-secondary-100); // @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_14 || (templateObject_14 = __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"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/globalStyle.ts CHANGED
@@ -648,8 +648,7 @@ const admonition = css`
648
648
  --admonition-success-border-color: inherit; // @presenter Color
649
649
  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
650
650
  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
651
- --admonition-success-border: var(--admonition-success-border-width)
652
- var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
651
+ --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
653
652
  /* --admonition-success-icon: figure this out latter */
654
653
 
655
654
  // @tokens End
@@ -792,8 +791,7 @@ const apiReferencePanels = css`
792
791
  --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
793
792
  --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize
794
793
  --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
795
- --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding)
796
- var(--panel-body-padding);
794
+ --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);
797
795
  --panel-schemas-body-background-color: var(--color-emphasis-50); // @presenter Color
798
796
  --panel-schemas-body-border: unset; // @presenter Border
799
797
 
@@ -841,9 +839,7 @@ const apiReferencePanels = css`
841
839
  --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);
842
840
  --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);
843
841
  --panel-heading-padding-local: var(--panel-schemas-heading-padding);
844
- --panel-heading-background-color: var(
845
- --panel-schemas-heading-background-color
846
- ); // @presenter Color
842
+ --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color
847
843
  --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border
848
844
  --panel-heading-white-space-local: var(--panel-heading-whit-space);
849
845
  }
@@ -914,9 +910,7 @@ const apiReferencePanels = css`
914
910
  --panel-body-border-local: var(--panel-samples-body-border);
915
911
 
916
912
  --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
917
- --panel-heading-background-color: var(
918
- --panel-samples-heading-background-color
919
- ); // @presenter Color
913
+ --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
920
914
 
921
915
  --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
922
916
  --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
@@ -963,9 +957,7 @@ const apiReferencePanels = css`
963
957
  --panel-heading-background-color: var(--panel-response-success-heading-background-color);
964
958
  --panel-heading-text-color: var(--panel-response-success-heading-text-color);
965
959
 
966
- --panel-response-schema-nested-background-color: var(
967
- --panel-response-success-schema-nested-background-color
968
- );
960
+ --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);
969
961
  }
970
962
 
971
963
  /**
@@ -982,9 +974,7 @@ const apiReferencePanels = css`
982
974
  --panel-heading-background-color: var(--panel-response-info-heading-background-color);
983
975
  --panel-heading-text-color: var(--panel-response-info-heading-text-color);
984
976
 
985
- --panel-response-schema-nested-background-color: var(
986
- --panel-response-info-schema-nested-background-color
987
- );
977
+ --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);
988
978
  }
989
979
 
990
980
  /**
@@ -1001,9 +991,7 @@ const apiReferencePanels = css`
1001
991
  --panel-heading-background-color: var(--panel-response-error-heading-background-color);
1002
992
  --panel-heading-text-color: var(--panel-response-error-heading-text-color);
1003
993
 
1004
- --panel-response-schema-nested-background-color: var(
1005
- --panel-response-error-schema-nested-background-color
1006
- );
994
+ --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);
1007
995
  }
1008
996
 
1009
997
  /**
@@ -1019,9 +1007,7 @@ const apiReferencePanels = css`
1019
1007
  --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
1020
1008
  --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
1021
1009
 
1022
- --panel-response-schema-nested-background-color: var(
1023
- --panel-response-redirect-schema-nested-background-color
1024
- );
1010
+ --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);
1025
1011
  }
1026
1012
 
1027
1013
  /**
@@ -1038,9 +1024,7 @@ const apiReferencePanels = css`
1038
1024
  --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
1039
1025
  --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
1040
1026
 
1041
- --panel-response-schema-nested-background-color: var(
1042
- --panel-response-callback-schema-nested-background-color
1043
- );
1027
+ --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);
1044
1028
  }
1045
1029
 
1046
1030
  /**
@@ -1088,19 +1072,13 @@ const apiReferencePanels = css`
1088
1072
 
1089
1073
  --panel-samples-tabs-background-color: transparent; // @presenter Color
1090
1074
  --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color
1091
- --panel-samples-tabs-active-background-color: var(
1092
- --panel-samples-heading-background-color
1093
- ); // @presenter Color
1075
+ --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1094
1076
 
1095
1077
  --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color
1096
- --panel-samples-tabs-hover-border-color: var(
1097
- var(--panel-samples-heading-background-color)
1098
- ); // @presenter Color
1078
+ --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color
1099
1079
  --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color
1100
1080
 
1101
- --panel-samples-code-block-background-color: var(
1102
- --code-block-background-color
1103
- ); // @presenter Color
1081
+ --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color
1104
1082
 
1105
1083
  /**
1106
1084
  * @tokens Panel try-it tabs
@@ -1112,19 +1090,13 @@ const apiReferencePanels = css`
1112
1090
  --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
1113
1091
  --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color
1114
1092
 
1115
- --panel-try-it-tabs-background-color: var(
1116
- --panel-samples-heading-background-color
1117
- ); // @presenter Color
1118
- --panel-try-it-tabs-hover-background-color: var(
1119
- --panel-samples-tabs-hover-background-color
1120
- ); // @presenter Color
1093
+ --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1094
+ --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
1121
1095
  --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color
1122
1096
  --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color
1123
1097
 
1124
1098
  --panel-try-it-tabs-border-color: transparent; // @presenter Color
1125
- --panel-try-it-tabs-hover-border-color: var(
1126
- --panel-try-it-tabs-active-background-color
1127
- ); // @presenter Color
1099
+ --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color
1128
1100
  --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color
1129
1101
  --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color
1130
1102
 
@@ -1141,14 +1113,10 @@ const apiReferencePanels = css`
1141
1113
  --panel-try-it-action-button-border-color: transparent; // @presenter Color
1142
1114
 
1143
1115
  --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
1144
- --panel-try-it-action-button-active-background-color: var(
1145
- --color-emphasis-700
1146
- ); // @presenter Color
1116
+ --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
1147
1117
  --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
1148
1118
 
1149
- --panel-try-it-action-button-hover-background-color: var(
1150
- --color-emphasis-600
1151
- ); // @presenter Color
1119
+ --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
1152
1120
  --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
1153
1121
  --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
1154
1122
 
@@ -1156,37 +1124,25 @@ const apiReferencePanels = css`
1156
1124
  * @tokens Panel samples other styles
1157
1125
  */
1158
1126
 
1159
- --panel-samples-controls-background-color: var(
1160
- --panel-samples-heading-background-color
1161
- ); // @presenter Color
1162
- --panel-samples-controls-hover-background-color: var(
1163
- --panel-samples-tabs-hover-background-color
1164
- ); // @presenter Color
1127
+ --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1128
+ --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
1165
1129
  --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
1166
1130
 
1167
- --panel-samples-dropdown-background-color: var(
1168
- --panel-samples-heading-background-color
1169
- ); // @presenter Color
1131
+ --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1170
1132
  --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color
1171
1133
  --panel-samples-dropdown-border: unset; // @presenter Border
1172
1134
 
1173
- --panel-samples-input-background-color: var(
1174
- --panel-samples-heading-background-color
1175
- ); // @presenter Color
1135
+ --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1176
1136
 
1177
1137
  /**
1178
1138
  * @tokens Panel try-it other styles
1179
1139
  */
1180
1140
 
1181
- --panel-try-it-input-background-color: var(
1182
- --panel-samples-heading-background-color
1183
- ); // @presenter Color
1141
+ --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1184
1142
  --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color
1185
1143
  --panel-try-it-input-border: unset; // @presenter Border
1186
1144
 
1187
- --panel-try-it-dropdown-background-color: var(
1188
- --panel-samples-heading-background-color
1189
- ); // @presenter Color
1145
+ --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1190
1146
  --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color
1191
1147
  --panel-try-it-border: unset; // @presenter Border
1192
1148