@redocly/theme 0.1.11 → 0.1.14

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 (135) hide show
  1. package/CodeBlock/CodeBlock.js +2 -1
  2. package/Markdown/CodeSample/index.d.ts +0 -1
  3. package/Markdown/CodeSample/index.js +0 -1
  4. package/Markdown/CodeSample/styled.d.ts +0 -1
  5. package/Markdown/CodeSample/styled.js +10 -102
  6. package/Markdown/StyledMarkdown.d.ts +0 -2
  7. package/Markdown/StyledMarkdown.js +5 -16
  8. package/OperationBadge/OperationBadge.js +1 -1
  9. package/PageNavigation/NextPageLink.js +1 -1
  10. package/PageNavigation/PreviousPageLink.js +1 -1
  11. package/Search/ClearIcon.js +1 -1
  12. package/Search/Input.js +1 -1
  13. package/Search/Popover.js +1 -1
  14. package/Search/SearchIcon.js +1 -1
  15. package/Search/SearchItem.js +1 -1
  16. package/Sidebar/ApiCallItem.js +1 -1
  17. package/globalStyle.js +24 -6
  18. package/mocks/Link.js +1 -1
  19. package/mocks/hooks/usePageData.d.ts +1 -1
  20. package/package.json +1 -1
  21. package/src/CodeBlock/CodeBlock.ts +3 -42
  22. package/src/Markdown/CodeSample/index.ts +0 -1
  23. package/src/Markdown/CodeSample/styled.ts +65 -195
  24. package/src/Markdown/StyledMarkdown.tsx +14 -28
  25. package/src/OperationBadge/OperationBadge.ts +5 -2
  26. package/src/PageNavigation/NextPageLink.tsx +2 -2
  27. package/src/PageNavigation/PreviousPageLink.tsx +2 -2
  28. package/src/Search/ClearIcon.tsx +1 -1
  29. package/src/Search/Input.tsx +7 -7
  30. package/src/Search/Popover.tsx +2 -2
  31. package/src/Search/SearchIcon.tsx +1 -1
  32. package/src/Search/SearchItem.tsx +1 -1
  33. package/src/Sidebar/ApiCallItem.tsx +1 -2
  34. package/src/globalStyle.ts +660 -461
  35. package/src/mocks/Link.tsx +1 -1
  36. package/src/mocks/hooks/usePageData.ts +1 -1
  37. package/src/ui/Typography.tsx +12 -89
  38. package/src/ui/UniversalLink.tsx +3 -8
  39. package/src/utils/ClipboardService.ts +3 -86
  40. package/src/utils/isUrl.ts +4 -4
  41. package/src/utils/theme-helpers.ts +46 -0
  42. package/ui/Typography.d.ts +2 -71
  43. package/ui/Typography.js +15 -93
  44. package/ui/UniversalLink.js +1 -5
  45. package/utils/ClipboardService.d.ts +1 -5
  46. package/utils/ClipboardService.js +2 -73
  47. package/utils/isUrl.d.ts +2 -2
  48. package/utils/isUrl.js +4 -4
  49. package/utils/theme-helpers.d.ts +1 -0
  50. package/utils/theme-helpers.js +42 -2
  51. package/Markdown/CodeSample/types.d.ts +0 -9
  52. package/Markdown/CodeSample/types.js +0 -2
  53. package/src/Button/Button.stories.tsx +0 -74
  54. package/src/Button/__tests__/Button.test.tsx +0 -42
  55. package/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +0 -274
  56. package/src/CodeBlock/__tests__/CodeBlock.test.tsx +0 -12
  57. package/src/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap +0 -140
  58. package/src/CopyButton/CopyButton.stories.tsx +0 -18
  59. package/src/CopyButton/__tests__/CopyButton.test.tsx +0 -35
  60. package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx +0 -17
  61. package/src/CopyButton/__tests__/__snapshots__/CopyButton.test.tsx.snap +0 -55
  62. package/src/CopyButton/__tests__/__snapshots__/CopyButtonWrapper.test.tsx.snap +0 -46
  63. package/src/DesignTokens/borders.stories.mdx +0 -20
  64. package/src/DesignTokens/colors.stories.mdx +0 -24
  65. package/src/DesignTokens/page-layout.stories.mdx +0 -12
  66. package/src/DesignTokens/tokens-generated.scss +0 -610
  67. package/src/DesignTokens/typography.stories.mdx +0 -36
  68. package/src/Footer/Footer.stories.tsx +0 -57
  69. package/src/Footer/__tests__/Footer.test.tsx +0 -55
  70. package/src/Footer/__tests__/__snapshots__/Footer.test.tsx.snap +0 -253
  71. package/src/Headings/Headings.stories.tsx +0 -36
  72. package/src/Headings/__tests__/Headings.test.tsx +0 -24
  73. package/src/Headings/__tests__/__snapshots__/Headings.test.tsx.snap +0 -57
  74. package/src/JsonViewer/JsonViewer.stories.tsx +0 -57
  75. package/src/JsonViewer/__tests__/JsonViewer.test.tsx +0 -83
  76. package/src/JsonViewer/__tests__/__snapshots__/JsonViewer.test.tsx.snap +0 -2728
  77. package/src/Layout/__tests__/PageLayout.test.tsx +0 -17
  78. package/src/Layout/__tests__/RootLayout.test.tsx +0 -17
  79. package/src/Layout/__tests__/__snapshots__/PageLayout.test.tsx.snap +0 -38
  80. package/src/Layout/__tests__/__snapshots__/RootLayout.test.tsx.snap +0 -18
  81. package/src/Markdown/CodeSample/types.ts +0 -40
  82. package/src/Navbar/Navbar.stories.tsx +0 -32
  83. package/src/Navbar/__tests__/Navbar.test.tsx +0 -55
  84. package/src/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap +0 -256
  85. package/src/NavbarLogo/NavbarLogo.stories.tsx +0 -20
  86. package/src/NavbarLogo/__tests__/NavbarLogo.test.tsx +0 -47
  87. package/src/NavbarLogo/__tests__/__snapshots__/NavbarLogo.test.tsx.snap +0 -38
  88. package/src/OperationBadge/OperationBadge.stories.tsx +0 -35
  89. package/src/OperationBadge/__tests__/OperationBadge.test.tsx +0 -59
  90. package/src/OperationBadge/__tests__/__snapshots__/OperationBadge.test.tsx.snap +0 -651
  91. package/src/PageNavigation/PageNavigation.stories.tsx +0 -21
  92. package/src/PageNavigation/__tests__/NextPageLink.test.tsx +0 -29
  93. package/src/PageNavigation/__tests__/PageNavigation.test.tsx +0 -54
  94. package/src/PageNavigation/__tests__/PreviousPageLink.test.tsx +0 -29
  95. package/src/PageNavigation/__tests__/__snapshots__/NextPageLink.test.tsx.snap +0 -67
  96. package/src/PageNavigation/__tests__/__snapshots__/PageNavigation.test.tsx.snap +0 -275
  97. package/src/PageNavigation/__tests__/__snapshots__/PreviousPageLink.test.tsx.snap +0 -67
  98. package/src/Panel/CodePanel.stories.tsx +0 -26
  99. package/src/Panel/ContentPanel.stories.tsx +0 -26
  100. package/src/Panel/Panel.stories.tsx +0 -56
  101. package/src/Panel/__tests__/CodePanel.test.tsx +0 -26
  102. package/src/Panel/__tests__/ContentPanel.test.tsx +0 -26
  103. package/src/Panel/__tests__/Panel.test.tsx +0 -53
  104. package/src/Panel/__tests__/__snapshots__/CodePanel.test.tsx.snap +0 -258
  105. package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap +0 -278
  106. package/src/Panel/__tests__/__snapshots__/Panel.test.tsx.snap +0 -398
  107. package/src/SamplesPanelControls/SamplesControlButton.stories.tsx +0 -18
  108. package/src/SamplesPanelControls/__tests__/SamplesPanelControls.test.tsx +0 -36
  109. package/src/SamplesPanelControls/__tests__/__snapshots__/SamplesPanelControls.test.tsx.snap +0 -228
  110. package/src/Search/__tests__/Input.test.tsx +0 -13
  111. package/src/Search/__tests__/__snapshots__/Input.test.tsx.snap +0 -36
  112. package/src/SidebarLogo/SidebarLogo.stories.tsx +0 -21
  113. package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx +0 -32
  114. package/src/SidebarLogo/__tests__/__snapshots__/SidebarLogo.test.tsx.snap +0 -62
  115. package/src/SourceCode/SourceCode.stories.tsx +0 -29
  116. package/src/SourceCode/__tests__/SourceCode.test.tsx +0 -48
  117. package/src/SourceCode/__tests__/__snapshots__/SourceCode.test.tsx.snap +0 -786
  118. package/src/TableOfContent/TableOfContent.stories.tsx +0 -37
  119. package/src/TableOfContent/__tests__/TableOfContent.test.tsx +0 -61
  120. package/src/TableOfContent/__tests__/__snapshots__/TableOfContent.test.tsx.snap +0 -153
  121. package/src/Tooltip/Tooltip.stories.tsx +0 -27
  122. package/src/Tooltip/__tests__/Tooltip.test.tsx +0 -41
  123. package/src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -83
  124. package/src/Welcome.stories.mdx +0 -7
  125. package/src/icons/ShelfIcon/ShelfIcon.stories.tsx +0 -36
  126. package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx +0 -54
  127. package/src/icons/ShelfIcon/__tests__/__snapshots__/ShelfIcon.test.tsx.snap +0 -235
  128. package/src/utils/__tests__/ClipboardService.test.ts +0 -24
  129. package/src/utils/__tests__/__snapshots__/highlight.test.ts.snap +0 -5
  130. package/src/utils/__tests__/__snapshots__/jsonToHtml.test.ts.snap +0 -5
  131. package/src/utils/__tests__/css-variables.test.ts +0 -20
  132. package/src/utils/__tests__/highlight.test.ts +0 -51
  133. package/src/utils/__tests__/jsonToHtml.test.ts +0 -40
  134. package/src/utils/__tests__/media-css.test.ts +0 -20
  135. package/src/utils/__tests__/theme-helpers.test.ts +0 -25
package/globalStyle.js CHANGED
@@ -6,9 +6,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.GlobalStyle = exports.styles = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
- var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n --color-primary-100: #62a1ff;\n --color-primary-200: #4892ff;\n --color-primary-300: #2f83ff;\n --color-primary-400: #1573ff;\n --color-primary-500: #0065fb;\n --color-primary-600: #005be2;\n --color-primary-700: #0050c8;\n --color-primary-800: #0046af;\n --color-primary-900: #003c95;\n\n --color-secondary-100: #ffffff;\n --color-secondary-200: #f5f7fa;\n --color-secondary-300: #f3f4f6;\n --color-secondary-400: #e4e7eb;\n --color-secondary-500: #d5dae0;\n --color-secondary-600: #c7cdd5;\n --color-secondary-700: #b8c0ca;\n --color-secondary-800: #a9b3c0;\n --color-secondary-900: #9ba6b5;\n\n --color-emphasis-100: #ffffff;\n --color-emphasis-200: #e9eaec;\n --color-emphasis-300: #cdd0d5;\n --color-emphasis-400: #b2b6bd;\n --color-emphasis-500: #969ca6;\n --color-emphasis-600: #7a828f;\n --color-emphasis-700: #626974;\n --color-emphasis-800: #4b5058;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-100: #b3dcf3;\n --color-accent-200: #a6dfff;\n --color-accent-300: #8cd5ff;\n --color-accent-400: #73ccff;\n --color-accent-500: #59c3ff;\n --color-accent-600: #40baff;\n --color-accent-700: #26b1ff;\n --color-accent-800: #0da7ff;\n --color-accent-900: #009bf2;\n\n --color-success-100: #98eda0;\n --color-success-200: #82e98c;\n --color-success-300: #6ce678;\n --color-success-400: #57e264;\n --color-success-500: #41de50;\n --color-success-600: #2bda3c;\n --color-success-700: #23c933;\n --color-success-800: #1fb32d;\n --color-success-900: #1b9e28;\n\n --color-warning-100: #ffc966;\n --color-warning-200: #ffc04d;\n --color-warning-300: #ffb733;\n --color-warning-400: #ffae1a;\n --color-warning-500: #ffa500;\n --color-warning-600: #e69400;\n --color-warning-700: #cc8400;\n --color-warning-800: #b37300;\n --color-warning-900: #996300;\n\n --color-error-100: #ffc7c7;\n --color-error-200: #ffaeae;\n --color-error-300: #ff9494;\n --color-error-400: #ff7b7b;\n --color-error-500: #ff6161;\n --color-error-600: #ff4747;\n --color-error-700: #ff2e2e;\n --color-error-800: #ff1414;\n --color-error-900: #ff0000;\n\n // @tokens Other\n"], ["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n --color-primary-100: #62a1ff;\n --color-primary-200: #4892ff;\n --color-primary-300: #2f83ff;\n --color-primary-400: #1573ff;\n --color-primary-500: #0065fb;\n --color-primary-600: #005be2;\n --color-primary-700: #0050c8;\n --color-primary-800: #0046af;\n --color-primary-900: #003c95;\n\n --color-secondary-100: #ffffff;\n --color-secondary-200: #f5f7fa;\n --color-secondary-300: #f3f4f6;\n --color-secondary-400: #e4e7eb;\n --color-secondary-500: #d5dae0;\n --color-secondary-600: #c7cdd5;\n --color-secondary-700: #b8c0ca;\n --color-secondary-800: #a9b3c0;\n --color-secondary-900: #9ba6b5;\n\n --color-emphasis-100: #ffffff;\n --color-emphasis-200: #e9eaec;\n --color-emphasis-300: #cdd0d5;\n --color-emphasis-400: #b2b6bd;\n --color-emphasis-500: #969ca6;\n --color-emphasis-600: #7a828f;\n --color-emphasis-700: #626974;\n --color-emphasis-800: #4b5058;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-100: #b3dcf3;\n --color-accent-200: #a6dfff;\n --color-accent-300: #8cd5ff;\n --color-accent-400: #73ccff;\n --color-accent-500: #59c3ff;\n --color-accent-600: #40baff;\n --color-accent-700: #26b1ff;\n --color-accent-800: #0da7ff;\n --color-accent-900: #009bf2;\n\n --color-success-100: #98eda0;\n --color-success-200: #82e98c;\n --color-success-300: #6ce678;\n --color-success-400: #57e264;\n --color-success-500: #41de50;\n --color-success-600: #2bda3c;\n --color-success-700: #23c933;\n --color-success-800: #1fb32d;\n --color-success-900: #1b9e28;\n\n --color-warning-100: #ffc966;\n --color-warning-200: #ffc04d;\n --color-warning-300: #ffb733;\n --color-warning-400: #ffae1a;\n --color-warning-500: #ffa500;\n --color-warning-600: #e69400;\n --color-warning-700: #cc8400;\n --color-warning-800: #b37300;\n --color-warning-900: #996300;\n\n --color-error-100: #ffc7c7;\n --color-error-200: #ffaeae;\n --color-error-300: #ff9494;\n --color-error-400: #ff7b7b;\n --color-error-500: #ff6161;\n --color-error-600: #ff4747;\n --color-error-700: #ff2e2e;\n --color-error-800: #ff1414;\n --color-error-900: #ff0000;\n\n // @tokens Other\n"])));
10
- var typography = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --color-content: #1f2933;\n --color-content-inverse: var(--color-secondary-200);\n --color-content-secondary: #7b8794;\n\n /**\n * @tokens Font Sizes\n * @presenter FontSize\n */\n --font-size-base: 14px;\n --font-size-small: 12px;\n\n /**\n * @tokens Line Heights\n * @presenter LineHeight\n */\n --line-height-base: 1.5em;\n\n /**\n * @tokens Font Weights\n * @presenter FontWeight\n */\n --font-weight-regular: 400;\n --font-weight-bold: 600;\n --font-weight-bolder: 700;\n\n /**\n * @tokens Font Families\n * @presenter FontFamily\n */\n --font-family-base: Source Sans Pro, sans-serif;\n --font-family-monospaced: Source Code Pro, monospace;\n\n /**\n * @tokens Rendering\n */\n --smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens Other\n"], ["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --color-content: #1f2933;\n --color-content-inverse: var(--color-secondary-200);\n --color-content-secondary: #7b8794;\n\n /**\n * @tokens Font Sizes\n * @presenter FontSize\n */\n --font-size-base: 14px;\n --font-size-small: 12px;\n\n /**\n * @tokens Line Heights\n * @presenter LineHeight\n */\n --line-height-base: 1.5em;\n\n /**\n * @tokens Font Weights\n * @presenter FontWeight\n */\n --font-weight-regular: 400;\n --font-weight-bold: 600;\n --font-weight-bolder: 700;\n\n /**\n * @tokens Font Families\n * @presenter FontFamily\n */\n --font-family-base: Source Sans Pro, sans-serif;\n --font-family-monospaced: Source Code Pro, monospace;\n\n /**\n * @tokens Rendering\n */\n --smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens Other\n"])));
11
- var borders = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --global-border-width: 1px;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --global-border-radius: 4px;\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --global-border-color: var(--color-secondary-400);\n --global-border-color-secondary: #616e7c;\n --global-background-color: transparent;\n\n // @tokens Other\n"], ["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --global-border-width: 1px;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --global-border-radius: 4px;\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --global-border-color: var(--color-secondary-400);\n --global-border-color-secondary: #616e7c;\n --global-background-color: transparent;\n\n // @tokens Other\n"])));
12
- exports.styles = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n /*\n * Static classnames that can be used to override styles for components:\n * download-specification-button, next-section-button, button-base\n */\n :root {\n ", "\n ", "\n ", "\n\n /* === Page layout === */\n //TBD\n /* === Navbar === */\n //--navbar-height:\n //TBD\n\n /* === Menu (sidebar) === */\n\n /**\n * @tokens Sidebar\n */\n --sidebar-width: 285px;\n --sidebar-background-color: #fff; // @presenter Color\n --sidebar-right-line-color: var(--global-border-color); // @presenter Color\n --sidebar-spacing-unit: 8px; // @presenter Spacing\n --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing\n --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing\n\n --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n\n --sidebar-word-break: 'inherit';\n --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color\n --sidebar-separator-line-color: #dadada; // @presenter Color\n --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color\n --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing\n\n --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-item-spacing-offset-nesting: calc(\n var(--sidebar-spacing-unit) * 2\n ); // @presenter Spacing\n --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n --sidebar-item-color: var(--color-content); // @presenter Color\n --sidebar-item-active-color: var(--color-content); // @presenter Color\n --sidebar-item-background-color: #fff; // @presenter Color\n --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color\n\n //TBD\n /* === Footer === */\n //TBD\n /* === Table of contents === */\n //TBD\n\n // @tokens Other\n\n /* === Various components: buttons, inputs, alerts, tooltip === */\n\n /*\n * Buttons\n */\n --button-color: white;\n --button-background-color: var(--color-emphasis-500);\n --button-hover-background-color: var(--color-emphasis-600);\n --button-active-background-color: var(--color-emphasis-700);\n --button-outlined-active-border-color: var(--color-emphasis-800);\n --button-border-radius: var(--global-border-radius);\n --button-font-family: inherit;\n --button-font-weight: var(--font-weight-bold);\n --button-box-shadow: none;\n --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n .button-color-primary {\n --button-color: white;\n --button-background-color: var(--color-primary-500);\n --button-hover-background-color: var(--color-primary-600);\n --button-active-background-color: var(--color-primary-700);\n --button-outlined-active-border-color: var(--color-primary-800);\n }\n\n .button-color-secondary {\n --button-color: var(--color-emphasis-800);\n --button-background-color: var(--color-secondary-400);\n --button-hover-background-color: var(--color-secondary-500);\n --button-active-background-color: var(--color-secondary-600);\n --button-outlined-active-border-color: var(--color-secondary-700);\n }\n\n --button-small-font-size: 12px;\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px;\n --button-medium-font-size: 14px;\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px;\n --button-large-font-size: 14px;\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px;\n --button-xlarge-font-size: 16px;\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px;\n\n /*\n * Tooltip\n */\n --tooltip-color: var(--color-secondary-300);\n --tooltip-background-color: #52606d;\n\n .tooltip-copy-button {\n --tooltip-color: #000;\n --tooltip-background-color: #fff;\n }\n\n /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n /*\n * Headings\n * --h-{css-property-name} is fallback for h1...h6\n */\n --h-font-family: Source Sans Pro, sans-serif;\n --h-font-weight: var(--font-weight-bolder);\n --h-color: var(--color-content);\n\n --h1-font-size: 36px;\n --h2-font-size: 28px;\n --h3-font-size: 18px;\n --h4-font-size: 16px;\n --h5-font-size: 14px;\n --h6-font-size: 12px;\n\n --h1-line-height: 36px;\n --h2-line-height: 28px;\n --h3-line-height: 18px;\n --h4-line-height: 16px;\n --h5-line-height: 14px;\n --h6-line-height: 12px;\n\n --code-font-size: 13px;\n --code-font-family: var(--font-family-monospaced);\n --code-font-weight: 400;\n --code-wrap: pre;\n\n --inline-code-font-size: var(--code-font-size);\n --inline-code-font-family: var(--code-font-family);\n --inline-code-color: #e53935;\n --inline-code-background-color: var(--color-secondary-200);\n --inline-code-border-color: var(--global-border-color);\n --inline-code-border-radius: var(--global-border-radius);\n\n --code-block-font-size: var(--code-font-size);\n --code-block-font-family: var(--code-font-family);\n --code-block-color: #f1928f;\n --code-block-background-color: rgba(217, 205, 199, 0.05);\n --code-block-border-color: var(--global-border-color);\n --code-block-border-radius: 8px;\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n --code-block-preformatted-background-color: #323f4b;\n\n /*\n * Links\n */\n --link-color: var(--color-primary-500);\n --link-decoration: none;\n --link-hover-color: var(--color-primary-100);\n --link-hover-decoration: underline;\n\n /* === ref docs and graphql docs specific === */\n /*\n * Logo\n */\n --logo-max-height: 285px;\n --logo-max-width: 285px;\n --logo-padding: 2px;\n\n /**\n * @tokens HTTP Colors\n * @presenter Color\n */\n --color-http-get: #3a9601;\n --color-http-post: #0065fb;\n --color-http-put: #93527b;\n --color-http-options: #947014;\n --color-http-patch: #bf581d;\n --color-http-delete: #c83637;\n --color-http-basic: #707070;\n --color-http-link: #07818f;\n --color-http-head: #a23dad;\n --color-http-hook: var(--color-http-post);\n\n /**\n * @tokens Response colors\n * @presenter Color\n */\n --response-success-border-color: #b1e996;\n --response-success-background-color: #f6fff4;\n --response-success-text-color: var(--response-success-border-color);\n\n --response-error-border-color: #ffc9c9;\n --response-error-background-color: #fff4f4;\n --response-error-text-color: var(--response-error-border-color);\n\n --response-redirect-border-color: var(--color-warning-500);\n --response-redirect-background-color: #ffa5001a;\n --response-redirect-text-color: var(--response-redirect-border-color);\n\n --response-info-border-color: #87ceeb;\n --response-info-background-color: #87ceeb1a;\n --response-info-text-color: var(--response-info-border-color);\n\n // @tokens Other\n\n /*\n * Panels\n */\n --panels-border-radius: 8px;\n --panels-background-color: #fff;\n\n --samples-panel-gap: 20px;\n --samples-panel-width: 50%;\n --samples-panel-block-background-color: #fff;\n --samples-panel-background-color: #52606d;\n --samples-panel-callback-background-color: var(--color-secondary-300);\n --samples-panel-controls-background-color: #323f4b;\n --samples-panel-controls-hover-background-color: #3c4c5a;\n --samples-panel-controls-active-border-color: var(--color-accent-500);\n --samples-panel-text-color: #fff;\n --samples-panel-heading-color: #fff;\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n --try-it-panel-active-tab-background-color: #47535e;\n --try-it-panel-active-tab-border-color: var(--color-accent-500);\n --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n --try-it-panel-action-button-width: auto;\n\n --request-and-response-panel-background-color: #fff;\n\n /*\n * Layout\n */\n --layout-buttons-top-offset: 20px;\n --layout-buttons-height: 36px;\n --layout-buttons-width: 36px;\n\n --layout-stacked-small-max-width: 90%;\n --layout-stacked-medium-max-width: 75%;\n --layout-stacked-large-max-width: 1200px;\n\n --layout-three-panel-small-max-width: 100%;\n --layout-three-panel-medium-max-width: 100%;\n --layout-three-panel-large-max-width: 1800px;\n\n --layout-middle-panel-small-max-width: none;\n --layout-middle-panel-medium-max-width: none;\n --layout-middle-panel-large-max-width: none;\n\n /*\n * Schema\n */\n --schema-lines-color: var(--global-border-color);\n --schema-default-details-width: 70%;\n --schema-type-name-color: var(--color-content-secondary);\n --schema-type-title-color: var(--color-content-secondary);\n --schema-require-label-color: var(--color-error-900);\n --schema-labels-text-size: 0.9em;\n --schema-nesting-spacing: 1em;\n --schema-nested-background-color: var(--color-secondary-200);\n --schema-chevron-color: var(--color-content);\n --schema-chevron-size: 9px;\n\n --schema-controls-color: var(--color-emphasis-800);\n --schema-controls-background-color: var(--color-secondary-400);\n --schema-controls-hover-background-color: var(--color-secondary-500);\n --schema-controls-border-color: var(--color-secondary-600);\n\n --field-name-font-size: var(--code-font-size);\n --field-name-font-family: var(--code-font-family);\n --field-example-color: var(--color-content);\n --field-example-background-color: var(--inline-code-background-color);\n --field-constraint-color: var(--color-content);\n --field-constraint-background-color: var(--inline-code-background-color);\n\n /*\n * Search\n */\n --search-input-border-bottom: #e6e6e6;\n --search-results-background-color: #f2f2f2;\n --search-results-active-item-background-color: #e6e6e6;\n --search-marked-background-color: #ffff03;\n --search-popup-header-background-color: var(--color-secondary-200);\n --search-clear-button-background-color: var(--color-secondary-400);\n --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n /*\n * Other\n */\n --badge-color: var(--color-emphasis-100);\n --badge-background-color: var(--color-primary-500);\n --deprecated-badge-color: var(--color-emphasis-100);\n --deprecated-badge-background-color: var(--color-warning-500);\n\n --recursive-label-color: var(--color-warning-500);\n\n --http-badge-font-size: 12px;\n --http-badge-line-height: 20px;\n --http-badge-font-family: var(--code-font-family);\n --http-badge-font-weight: var(--font-weight-bold);\n --http-badge-border-radius: 16px;\n --http-badge-color: var(--color-content-inverse);\n\n --http-badge-menu-font-size: 8px;\n --http-badge-menu-line-height: 14px;\n\n --spinner-color: var(--color-primary-500);\n\n --linear-progress-color: var(--color-accent-500);\n --linear-progress-background-color: var(--color-accent-100);\n\n /* Floating action button */\n --fab-color: #0065fb;\n --fab-background-color: #f2f2f2;\n\n //* PORTAL settings *//\n /**\n * Headings\n * */\n --h2-font-weight: var(--font-weight-bold);\n\n --h1-margin-top: 1.35em;\n --h1-margin-bottom: 0.9em;\n --h2-margin-top: 1.25em;\n --h2-margin-bottom: 0.8em;\n --h3-margin-top: 1.25em;\n --h3-margin-bottom: 0.8em;\n\n /**\n * Footer\n * */\n --footer-background-color: var(--color-primary-500);\n --footer-text-color: #fff;\n\n /**\n * Sidebar\n * */\n --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n\n --sidebar-border-radius: 4px;\n --sidebar-font-size: var(--font-size-base);\n --sidebar-font-family: var(--font-family-base);\n\n /**\n * Logo\n * */\n --logo-height: 2rem;\n --logo-margin: var(--sidebar-margin-left);\n\n /**\n * Navbar\n * */\n --navbar-height: 60px;\n --navbar-text-color: #fff;\n --navbar-background-color: var(--color-primary-500);\n\n /**\n * Navbar Item\n * */\n --navbar-item-font-size: 16px;\n --navbar-item-margin-horizontal: 0;\n --navbar-item-margin-vertical: 0;\n --navbar-item-border-radius: 10px;\n --navbar-item-font-weight: var(--font-weight-bold);\n --navbar-item-active-background-color: #1b75fa;\n --navbar-item-active-text-color: var(--navbar-text-color);\n --navbar-item-active-text-decoration: none;\n\n /**\n * TOC\n * */\n --toc-width: 240px;\n\n /**\n * Markdown\n * */\n --content-wrapper-max-width: 910px;\n --content-wrapper-padding-vertical: 25px;\n --content-wrapper-padding-horizontal: 0px;\n\n /**\n * Bloquote\n * */\n --bloquote-margin-vertical: 1.5em;\n --bloquote-margin-horizontal: 0;\n --bloquote-padding-vertical: 0;\n --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);\n --bloquote-background-color: transparent;\n\n /**\n * Admonition\n * */\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n --admonition-border-radius: 8px;\n --admonition-font-size: 16px;\n --admonition-font-weight: normal;\n --admonition-line-height: 1.5em;\n --admonition-heading-font-size: 16px;\n --admonition-heading-font-weight: var(--font-weight-bold);\n --admonition-heading-letter-spacing: 0.3px;\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition colors\n * @presenter Color\n */\n\n /* info */\n --admonition-info-background-color: #ebedf0;\n --admonition-info-text-color: var(--color-content);\n --admonition-info-icon-color: #4782cb;\n\n /* attention */\n --admonition-attention-background-color: #e6eef8;\n --admonition-attention-text-color: var(--color-content);\n --admonition-attention-icon-color: #4782cb;\n\n /* warning */\n --admonition-warning-background-color: #feeda5;\n --admonition-warning-text-color: var(--color-content);\n --admonition-warning-icon-color: #d4ad03;\n\n /* danger */\n --admonition-danger-background-color: #fceaea;\n --admonition-danger-text-color: var(--color-content);\n --admonition-danger-icon-color: #e53935;\n\n /* success */\n --admonition-success-background-color: #ddffe1;\n --admonition-success-text-color: var(--color-content);\n --admonition-success-icon-color: #00aa13;\n\n /*\n * Portal Search\n */\n --input-background-color: rgba(255, 255, 255, 0.1);\n --input-text-color: #fff;\n --input-border-radius: 4px;\n --input-font-size: 16px;\n --input-font-family: var(--font-family-primary);\n --input-line-height: 1.15em;\n --popover-backgrond-color: #fff;\n --popover-border-radius: 4px;\n --search-item-text-color: var(--color-content-secondary);\n --search-item-title-text-color: var(--color-content);\n --search-item-active-background-color: rgba(0, 68, 212, 0.1);\n\n // @tokens Other\n }\n"], ["\n /*\n * Static classnames that can be used to override styles for components:\n * download-specification-button, next-section-button, button-base\n */\n :root {\n ", "\n ", "\n ", "\n\n /* === Page layout === */\n //TBD\n /* === Navbar === */\n //--navbar-height:\n //TBD\n\n /* === Menu (sidebar) === */\n\n /**\n * @tokens Sidebar\n */\n --sidebar-width: 285px;\n --sidebar-background-color: #fff; // @presenter Color\n --sidebar-right-line-color: var(--global-border-color); // @presenter Color\n --sidebar-spacing-unit: 8px; // @presenter Spacing\n --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing\n --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing\n\n --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n\n --sidebar-word-break: 'inherit';\n --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color\n --sidebar-separator-line-color: #dadada; // @presenter Color\n --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color\n --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing\n\n --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing\n --sidebar-item-spacing-offset-nesting: calc(\n var(--sidebar-spacing-unit) * 2\n ); // @presenter Spacing\n --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n --sidebar-item-color: var(--color-content); // @presenter Color\n --sidebar-item-active-color: var(--color-content); // @presenter Color\n --sidebar-item-background-color: #fff; // @presenter Color\n --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color\n\n //TBD\n /* === Footer === */\n //TBD\n /* === Table of contents === */\n //TBD\n\n // @tokens Other\n\n /* === Various components: buttons, inputs, alerts, tooltip === */\n\n /*\n * Buttons\n */\n --button-color: white;\n --button-background-color: var(--color-emphasis-500);\n --button-hover-background-color: var(--color-emphasis-600);\n --button-active-background-color: var(--color-emphasis-700);\n --button-outlined-active-border-color: var(--color-emphasis-800);\n --button-border-radius: var(--global-border-radius);\n --button-font-family: inherit;\n --button-font-weight: var(--font-weight-bold);\n --button-box-shadow: none;\n --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n .button-color-primary {\n --button-color: white;\n --button-background-color: var(--color-primary-500);\n --button-hover-background-color: var(--color-primary-600);\n --button-active-background-color: var(--color-primary-700);\n --button-outlined-active-border-color: var(--color-primary-800);\n }\n\n .button-color-secondary {\n --button-color: var(--color-emphasis-800);\n --button-background-color: var(--color-secondary-400);\n --button-hover-background-color: var(--color-secondary-500);\n --button-active-background-color: var(--color-secondary-600);\n --button-outlined-active-border-color: var(--color-secondary-700);\n }\n\n --button-small-font-size: 12px;\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px;\n --button-medium-font-size: 14px;\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px;\n --button-large-font-size: 14px;\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px;\n --button-xlarge-font-size: 16px;\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px;\n\n /*\n * Tooltip\n */\n --tooltip-color: var(--color-secondary-300);\n --tooltip-background-color: #52606d;\n\n .tooltip-copy-button {\n --tooltip-color: #000;\n --tooltip-background-color: #fff;\n }\n\n /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n /*\n * Headings\n * --h-{css-property-name} is fallback for h1...h6\n */\n --h-font-family: Source Sans Pro, sans-serif;\n --h-font-weight: var(--font-weight-bolder);\n --h-color: var(--color-content);\n\n --h1-font-size: 36px;\n --h2-font-size: 28px;\n --h3-font-size: 18px;\n --h4-font-size: 16px;\n --h5-font-size: 14px;\n --h6-font-size: 12px;\n\n --h1-line-height: 36px;\n --h2-line-height: 28px;\n --h3-line-height: 18px;\n --h4-line-height: 16px;\n --h5-line-height: 14px;\n --h6-line-height: 12px;\n\n --code-font-size: 13px;\n --code-font-family: var(--font-family-monospaced);\n --code-font-weight: 400;\n --code-wrap: pre;\n\n --inline-code-font-size: var(--code-font-size);\n --inline-code-font-family: var(--code-font-family);\n --inline-code-color: #e53935;\n --inline-code-background-color: var(--color-secondary-200);\n --inline-code-border-color: var(--global-border-color);\n --inline-code-border-radius: var(--global-border-radius);\n\n --code-block-font-size: var(--code-font-size);\n --code-block-font-family: var(--code-font-family);\n --code-block-color: #f1928f;\n --code-block-background-color: rgba(217, 205, 199, 0.05);\n --code-block-border-color: var(--global-border-color);\n --code-block-border-radius: 8px;\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n --code-block-preformatted-background-color: #323f4b;\n\n /*\n * Links\n */\n --link-color: var(--color-primary-500);\n --link-decoration: none;\n --link-hover-color: var(--color-primary-100);\n --link-hover-decoration: underline;\n\n /* === ref docs and graphql docs specific === */\n /*\n * Logo\n */\n --logo-max-height: 285px;\n --logo-max-width: 285px;\n --logo-padding: 2px;\n\n /**\n * @tokens HTTP Colors\n * @presenter Color\n */\n --color-http-get: #3a9601;\n --color-http-post: #0065fb;\n --color-http-put: #93527b;\n --color-http-options: #947014;\n --color-http-patch: #bf581d;\n --color-http-delete: #c83637;\n --color-http-basic: #707070;\n --color-http-link: #07818f;\n --color-http-head: #a23dad;\n --color-http-hook: var(--color-http-post);\n\n /**\n * @tokens Response colors\n * @presenter Color\n */\n --response-success-border-color: #b1e996;\n --response-success-background-color: #f6fff4;\n --response-success-text-color: var(--response-success-border-color);\n\n --response-error-border-color: #ffc9c9;\n --response-error-background-color: #fff4f4;\n --response-error-text-color: var(--response-error-border-color);\n\n --response-redirect-border-color: var(--color-warning-500);\n --response-redirect-background-color: #ffa5001a;\n --response-redirect-text-color: var(--response-redirect-border-color);\n\n --response-info-border-color: #87ceeb;\n --response-info-background-color: #87ceeb1a;\n --response-info-text-color: var(--response-info-border-color);\n\n // @tokens Other\n\n /*\n * Panels\n */\n --panels-border-radius: 8px;\n --panels-background-color: #fff;\n\n --samples-panel-gap: 20px;\n --samples-panel-width: 50%;\n --samples-panel-block-background-color: #fff;\n --samples-panel-background-color: #52606d;\n --samples-panel-callback-background-color: var(--color-secondary-300);\n --samples-panel-controls-background-color: #323f4b;\n --samples-panel-controls-hover-background-color: #3c4c5a;\n --samples-panel-controls-active-border-color: var(--color-accent-500);\n --samples-panel-text-color: #fff;\n --samples-panel-heading-color: #fff;\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n --try-it-panel-active-tab-background-color: #47535e;\n --try-it-panel-active-tab-border-color: var(--color-accent-500);\n --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n --try-it-panel-action-button-width: auto;\n\n --request-and-response-panel-background-color: #fff;\n\n /*\n * Layout\n */\n --layout-buttons-top-offset: 20px;\n --layout-buttons-height: 36px;\n --layout-buttons-width: 36px;\n\n --layout-stacked-small-max-width: 90%;\n --layout-stacked-medium-max-width: 75%;\n --layout-stacked-large-max-width: 1200px;\n\n --layout-three-panel-small-max-width: 100%;\n --layout-three-panel-medium-max-width: 100%;\n --layout-three-panel-large-max-width: 1800px;\n\n --layout-middle-panel-small-max-width: none;\n --layout-middle-panel-medium-max-width: none;\n --layout-middle-panel-large-max-width: none;\n\n /*\n * Schema\n */\n --schema-lines-color: var(--global-border-color);\n --schema-default-details-width: 70%;\n --schema-type-name-color: var(--color-content-secondary);\n --schema-type-title-color: var(--color-content-secondary);\n --schema-require-label-color: var(--color-error-900);\n --schema-labels-text-size: 0.9em;\n --schema-nesting-spacing: 1em;\n --schema-nested-background-color: var(--color-secondary-200);\n --schema-chevron-color: var(--color-content);\n --schema-chevron-size: 9px;\n\n --schema-controls-color: var(--color-emphasis-800);\n --schema-controls-background-color: var(--color-secondary-400);\n --schema-controls-hover-background-color: var(--color-secondary-500);\n --schema-controls-border-color: var(--color-secondary-600);\n\n --field-name-font-size: var(--code-font-size);\n --field-name-font-family: var(--code-font-family);\n --field-example-color: var(--color-content);\n --field-example-background-color: var(--inline-code-background-color);\n --field-constraint-color: var(--color-content);\n --field-constraint-background-color: var(--inline-code-background-color);\n\n /*\n * Search\n */\n --search-input-border-bottom: #e6e6e6;\n --search-results-background-color: #f2f2f2;\n --search-results-active-item-background-color: #e6e6e6;\n --search-marked-background-color: #ffff03;\n --search-popup-header-background-color: var(--color-secondary-200);\n --search-clear-button-background-color: var(--color-secondary-400);\n --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n /*\n * Other\n */\n --badge-color: var(--color-emphasis-100);\n --badge-background-color: var(--color-primary-500);\n --deprecated-badge-color: var(--color-emphasis-100);\n --deprecated-badge-background-color: var(--color-warning-500);\n\n --recursive-label-color: var(--color-warning-500);\n\n --http-badge-font-size: 12px;\n --http-badge-line-height: 20px;\n --http-badge-font-family: var(--code-font-family);\n --http-badge-font-weight: var(--font-weight-bold);\n --http-badge-border-radius: 16px;\n --http-badge-color: var(--color-content-inverse);\n\n --http-badge-menu-font-size: 8px;\n --http-badge-menu-line-height: 14px;\n\n --spinner-color: var(--color-primary-500);\n\n --linear-progress-color: var(--color-accent-500);\n --linear-progress-background-color: var(--color-accent-100);\n\n /* Floating action button */\n --fab-color: #0065fb;\n --fab-background-color: #f2f2f2;\n\n //* PORTAL settings *//\n /**\n * Headings\n * */\n --h2-font-weight: var(--font-weight-bold);\n\n --h1-margin-top: 1.35em;\n --h1-margin-bottom: 0.9em;\n --h2-margin-top: 1.25em;\n --h2-margin-bottom: 0.8em;\n --h3-margin-top: 1.25em;\n --h3-margin-bottom: 0.8em;\n\n /**\n * Footer\n * */\n --footer-background-color: var(--color-primary-500);\n --footer-text-color: #fff;\n\n /**\n * Sidebar\n * */\n --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n\n --sidebar-border-radius: 4px;\n --sidebar-font-size: var(--font-size-base);\n --sidebar-font-family: var(--font-family-base);\n\n /**\n * Logo\n * */\n --logo-height: 2rem;\n --logo-margin: var(--sidebar-margin-left);\n\n /**\n * Navbar\n * */\n --navbar-height: 60px;\n --navbar-text-color: #fff;\n --navbar-background-color: var(--color-primary-500);\n\n /**\n * Navbar Item\n * */\n --navbar-item-font-size: 16px;\n --navbar-item-margin-horizontal: 0;\n --navbar-item-margin-vertical: 0;\n --navbar-item-border-radius: 10px;\n --navbar-item-font-weight: var(--font-weight-bold);\n --navbar-item-active-background-color: #1b75fa;\n --navbar-item-active-text-color: var(--navbar-text-color);\n --navbar-item-active-text-decoration: none;\n\n /**\n * TOC\n * */\n --toc-width: 240px;\n\n /**\n * Markdown\n * */\n --content-wrapper-max-width: 910px;\n --content-wrapper-padding-vertical: 25px;\n --content-wrapper-padding-horizontal: 0px;\n\n /**\n * Bloquote\n * */\n --bloquote-margin-vertical: 1.5em;\n --bloquote-margin-horizontal: 0;\n --bloquote-padding-vertical: 0;\n --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);\n --bloquote-background-color: transparent;\n\n /**\n * Admonition\n * */\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n --admonition-border-radius: 8px;\n --admonition-font-size: 16px;\n --admonition-font-weight: normal;\n --admonition-line-height: 1.5em;\n --admonition-heading-font-size: 16px;\n --admonition-heading-font-weight: var(--font-weight-bold);\n --admonition-heading-letter-spacing: 0.3px;\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition colors\n * @presenter Color\n */\n\n /* info */\n --admonition-info-background-color: #ebedf0;\n --admonition-info-text-color: var(--color-content);\n --admonition-info-icon-color: #4782cb;\n\n /* attention */\n --admonition-attention-background-color: #e6eef8;\n --admonition-attention-text-color: var(--color-content);\n --admonition-attention-icon-color: #4782cb;\n\n /* warning */\n --admonition-warning-background-color: #feeda5;\n --admonition-warning-text-color: var(--color-content);\n --admonition-warning-icon-color: #d4ad03;\n\n /* danger */\n --admonition-danger-background-color: #fceaea;\n --admonition-danger-text-color: var(--color-content);\n --admonition-danger-icon-color: #e53935;\n\n /* success */\n --admonition-success-background-color: #ddffe1;\n --admonition-success-text-color: var(--color-content);\n --admonition-success-icon-color: #00aa13;\n\n /*\n * Portal Search\n */\n --input-background-color: rgba(255, 255, 255, 0.1);\n --input-text-color: #fff;\n --input-border-radius: 4px;\n --input-font-size: 16px;\n --input-font-family: var(--font-family-primary);\n --input-line-height: 1.15em;\n --popover-backgrond-color: #fff;\n --popover-border-radius: 4px;\n --search-item-text-color: var(--color-content-secondary);\n --search-item-title-text-color: var(--color-content);\n --search-item-active-background-color: rgba(0, 68, 212, 0.1);\n\n // @tokens Other\n }\n"])), baseColors, typography, borders);
13
- exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.styles);
14
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
9
+ var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n --color-primary-100: #62a1ff;\n --color-primary-200: #4892ff;\n --color-primary-300: #2f83ff;\n --color-primary-400: #1573ff;\n --color-primary-500: #0065fb;\n --color-primary-600: #005be2;\n --color-primary-700: #0050c8;\n --color-primary-800: #0046af;\n --color-primary-900: #003c95;\n\n --color-secondary-100: #ffffff;\n --color-secondary-200: #f5f7fa;\n --color-secondary-300: #f3f4f6;\n --color-secondary-400: #e4e7eb;\n --color-secondary-500: #d5dae0;\n --color-secondary-600: #c7cdd5;\n --color-secondary-700: #b8c0ca;\n --color-secondary-800: #a9b3c0;\n --color-secondary-900: #9ba6b5;\n\n --color-emphasis-100: #ffffff;\n --color-emphasis-200: #e9eaec;\n --color-emphasis-300: #cdd0d5;\n --color-emphasis-400: #b2b6bd;\n --color-emphasis-500: #969ca6;\n --color-emphasis-600: #7a828f;\n --color-emphasis-700: #626974;\n --color-emphasis-800: #4b5058;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-100: #b3dcf3;\n --color-accent-200: #a6dfff;\n --color-accent-300: #8cd5ff;\n --color-accent-400: #73ccff;\n --color-accent-500: #59c3ff;\n --color-accent-600: #40baff;\n --color-accent-700: #26b1ff;\n --color-accent-800: #0da7ff;\n --color-accent-900: #009bf2;\n\n --color-success-100: #98eda0;\n --color-success-200: #82e98c;\n --color-success-300: #6ce678;\n --color-success-400: #57e264;\n --color-success-500: #41de50;\n --color-success-600: #2bda3c;\n --color-success-700: #23c933;\n --color-success-800: #1fb32d;\n --color-success-900: #1b9e28;\n\n --color-warning-100: #ffc966;\n --color-warning-200: #ffc04d;\n --color-warning-300: #ffb733;\n --color-warning-400: #ffae1a;\n --color-warning-500: #ffa500;\n --color-warning-600: #e69400;\n --color-warning-700: #cc8400;\n --color-warning-800: #b37300;\n --color-warning-900: #996300;\n\n --color-error-100: #ffc7c7;\n --color-error-200: #ffaeae;\n --color-error-300: #ff9494;\n --color-error-400: #ff7b7b;\n --color-error-500: #ff6161;\n --color-error-600: #ff4747;\n --color-error-700: #ff2e2e;\n --color-error-800: #ff1414;\n --color-error-900: #ff0000;\n\n // @tokens End\n"], ["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n --color-primary-100: #62a1ff;\n --color-primary-200: #4892ff;\n --color-primary-300: #2f83ff;\n --color-primary-400: #1573ff;\n --color-primary-500: #0065fb;\n --color-primary-600: #005be2;\n --color-primary-700: #0050c8;\n --color-primary-800: #0046af;\n --color-primary-900: #003c95;\n\n --color-secondary-100: #ffffff;\n --color-secondary-200: #f5f7fa;\n --color-secondary-300: #f3f4f6;\n --color-secondary-400: #e4e7eb;\n --color-secondary-500: #d5dae0;\n --color-secondary-600: #c7cdd5;\n --color-secondary-700: #b8c0ca;\n --color-secondary-800: #a9b3c0;\n --color-secondary-900: #9ba6b5;\n\n --color-emphasis-100: #ffffff;\n --color-emphasis-200: #e9eaec;\n --color-emphasis-300: #cdd0d5;\n --color-emphasis-400: #b2b6bd;\n --color-emphasis-500: #969ca6;\n --color-emphasis-600: #7a828f;\n --color-emphasis-700: #626974;\n --color-emphasis-800: #4b5058;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-100: #b3dcf3;\n --color-accent-200: #a6dfff;\n --color-accent-300: #8cd5ff;\n --color-accent-400: #73ccff;\n --color-accent-500: #59c3ff;\n --color-accent-600: #40baff;\n --color-accent-700: #26b1ff;\n --color-accent-800: #0da7ff;\n --color-accent-900: #009bf2;\n\n --color-success-100: #98eda0;\n --color-success-200: #82e98c;\n --color-success-300: #6ce678;\n --color-success-400: #57e264;\n --color-success-500: #41de50;\n --color-success-600: #2bda3c;\n --color-success-700: #23c933;\n --color-success-800: #1fb32d;\n --color-success-900: #1b9e28;\n\n --color-warning-100: #ffc966;\n --color-warning-200: #ffc04d;\n --color-warning-300: #ffb733;\n --color-warning-400: #ffae1a;\n --color-warning-500: #ffa500;\n --color-warning-600: #e69400;\n --color-warning-700: #cc8400;\n --color-warning-800: #b37300;\n --color-warning-900: #996300;\n\n --color-error-100: #ffc7c7;\n --color-error-200: #ffaeae;\n --color-error-300: #ff9494;\n --color-error-400: #ff7b7b;\n --color-error-500: #ff6161;\n --color-error-600: #ff4747;\n --color-error-700: #ff2e2e;\n --color-error-800: #ff1414;\n --color-error-900: #ff0000;\n\n // @tokens End\n"])));
10
+ var httpColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /**\n * @tokens HTTP Colors\n * @presenter Color\n */\n --color-http-get: #3a9601;\n --color-http-post: #0065fb;\n --color-http-put: #93527b;\n --color-http-options: #947014;\n --color-http-patch: #bf581d;\n --color-http-delete: #c83637;\n --color-http-basic: #707070;\n --color-http-link: #07818f;\n --color-http-head: #a23dad;\n --color-http-hook: var(--color-http-post);\n // @tokens End\n"], ["\n /**\n * @tokens HTTP Colors\n * @presenter Color\n */\n --color-http-get: #3a9601;\n --color-http-post: #0065fb;\n --color-http-put: #93527b;\n --color-http-options: #947014;\n --color-http-patch: #bf581d;\n --color-http-delete: #c83637;\n --color-http-basic: #707070;\n --color-http-link: #07818f;\n --color-http-head: #a23dad;\n --color-http-hook: var(--color-http-post);\n // @tokens End\n"])));
11
+ var responseColors = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /**\n * @tokens Response colors\n * @presenter Color\n */\n --response-success-border-color: #b1e996;\n --response-success-background-color: #f6fff4;\n --response-success-text-color: var(--response-success-border-color);\n\n --response-error-border-color: #ffc9c9;\n --response-error-background-color: #fff4f4;\n --response-error-text-color: var(--response-error-border-color);\n\n --response-redirect-border-color: var(--color-warning-500);\n --response-redirect-background-color: #ffa5001a;\n --response-redirect-text-color: var(--response-redirect-border-color);\n\n --response-info-border-color: #87ceeb;\n --response-info-background-color: #87ceeb1a;\n --response-info-text-color: var(--response-info-border-color);\n\n // @tokens End\n"], ["\n /**\n * @tokens Response colors\n * @presenter Color\n */\n --response-success-border-color: #b1e996;\n --response-success-background-color: #f6fff4;\n --response-success-text-color: var(--response-success-border-color);\n\n --response-error-border-color: #ffc9c9;\n --response-error-background-color: #fff4f4;\n --response-error-text-color: var(--response-error-border-color);\n\n --response-redirect-border-color: var(--color-warning-500);\n --response-redirect-background-color: #ffa5001a;\n --response-redirect-text-color: var(--response-redirect-border-color);\n\n --response-info-border-color: #87ceeb;\n --response-info-background-color: #87ceeb1a;\n --response-info-text-color: var(--response-info-border-color);\n\n // @tokens End\n"])));
12
+ var typography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --color-content: #1f2933;\n --color-content-inverse: var(--color-secondary-200);\n --color-content-secondary: #7b8794;\n\n /**\n * @tokens Font Sizes\n * @presenter FontSize\n */\n --font-size-base: 14px;\n --font-size-small: 12px;\n\n /**\n * @tokens Line Heights\n * @presenter LineHeight\n */\n --line-height-base: 1.5em;\n\n /**\n * @tokens Font Weights\n * @presenter FontWeight\n */\n --font-weight-regular: 400;\n --font-weight-bold: 600;\n --font-weight-bolder: 700;\n\n /**\n * @tokens Font Families\n * @presenter FontFamily\n */\n --font-family-base: Source Sans Pro, sans-serif;\n --font-family-monospaced: Source Code Pro, monospace;\n\n /**\n * @tokens Rendering\n */\n --smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n // TODO: Not sure if Spacing should be in typography\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"], ["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --color-content: #1f2933;\n --color-content-inverse: var(--color-secondary-200);\n --color-content-secondary: #7b8794;\n\n /**\n * @tokens Font Sizes\n * @presenter FontSize\n */\n --font-size-base: 14px;\n --font-size-small: 12px;\n\n /**\n * @tokens Line Heights\n * @presenter LineHeight\n */\n --line-height-base: 1.5em;\n\n /**\n * @tokens Font Weights\n * @presenter FontWeight\n */\n --font-weight-regular: 400;\n --font-weight-bold: 600;\n --font-weight-bolder: 700;\n\n /**\n * @tokens Font Families\n * @presenter FontFamily\n */\n --font-family-base: Source Sans Pro, sans-serif;\n --font-family-monospaced: Source Code Pro, monospace;\n\n /**\n * @tokens Rendering\n */\n --smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n // TODO: Not sure if Spacing should be in typography\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"])));
13
+ var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n // --h-{css-property-name} is fallback for h1...h6\n\n /**\n * @tokens Typography headings font\n */\n --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n /**\n * @tokens Typography headings color\n * @presenter Color\n */\n --h-color: var(--color-content);\n\n /**\n * @tokens Typography headings font size\n * @presenter FontSize\n */\n --h1-font-size: 36px;\n --h2-font-size: 28px;\n --h3-font-size: 18px;\n --h4-font-size: 16px;\n --h5-font-size: 14px;\n --h6-font-size: 12px;\n\n /**\n * @tokens Typography headings line height\n * @presenter LineHeight\n */\n --h1-line-height: 36px;\n --h2-line-height: 28px;\n --h3-line-height: 18px;\n --h4-line-height: 16px;\n --h5-line-height: 14px;\n --h6-line-height: 12px;\n\n /**\n * @tokens Typography headings margin\n * @presenter Spacing\n */\n --h1-margin-top: 1.35em;\n --h1-margin-bottom: 0.9em;\n --h2-margin-top: 1.25em;\n --h2-margin-bottom: 0.8em;\n --h3-margin-top: 1.25em;\n --h3-margin-bottom: 0.8em;\n // @tokens End\n"], ["\n // --h-{css-property-name} is fallback for h1...h6\n\n /**\n * @tokens Typography headings font\n */\n --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n /**\n * @tokens Typography headings color\n * @presenter Color\n */\n --h-color: var(--color-content);\n\n /**\n * @tokens Typography headings font size\n * @presenter FontSize\n */\n --h1-font-size: 36px;\n --h2-font-size: 28px;\n --h3-font-size: 18px;\n --h4-font-size: 16px;\n --h5-font-size: 14px;\n --h6-font-size: 12px;\n\n /**\n * @tokens Typography headings line height\n * @presenter LineHeight\n */\n --h1-line-height: 36px;\n --h2-line-height: 28px;\n --h3-line-height: 18px;\n --h4-line-height: 16px;\n --h5-line-height: 14px;\n --h6-line-height: 12px;\n\n /**\n * @tokens Typography headings margin\n * @presenter Spacing\n */\n --h1-margin-top: 1.35em;\n --h1-margin-bottom: 0.9em;\n --h2-margin-top: 1.25em;\n --h2-margin-bottom: 0.8em;\n --h3-margin-top: 1.25em;\n --h3-margin-bottom: 0.8em;\n // @tokens End\n"])));
14
+ var borders = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --global-border-width: 1px;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --global-border-radius: 4px;\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --global-border-color: var(--color-secondary-400);\n --global-border-color-secondary: #616e7c;\n --global-background-color: transparent;\n\n // @tokens End\n"], ["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --global-border-width: 1px;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --global-border-radius: 4px;\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --global-border-color: var(--color-secondary-400);\n --global-border-color-secondary: #616e7c;\n --global-background-color: transparent;\n\n // @tokens End\n"])));
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 --button-color: white; // @presenter Color\n --button-background-color: var(--color-emphasis-500); // @presenter Color\n --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n /**\n * @tokens Button primary colors\n */\n .button-color-primary {\n --button-color: white; // @presenter Color\n --button-background-color: var(--color-primary-500); // @presenter Color\n --button-hover-background-color: var(--color-primary-600); // @presenter Color\n --button-active-background-color: var(--color-primary-700); // @presenter Color\n --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n }\n\n /**\n * @tokens Button secondary colors\n */\n .button-color-secondary {\n --button-color: var(--color-emphasis-800); // @presenter Color\n --button-background-color: var(--color-secondary-400); // @presenter Color\n --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n --button-active-background-color: var(--color-secondary-600); // @presenter Color\n --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n }\n\n /**\n * @tokens Button borders\n */\n --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n --button-box-shadow: none; // @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 --button-small-font-size: 12px; // @presenter FontSize\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px; // @presenter Spacing\n --button-medium-font-size: 14px; // @presenter FontSize\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px; // @presenter Spacing\n --button-large-font-size: 14px; // @presenter FontSize\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px; // @presenter Spacing\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 --button-color: white; // @presenter Color\n --button-background-color: var(--color-emphasis-500); // @presenter Color\n --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n /**\n * @tokens Button primary colors\n */\n .button-color-primary {\n --button-color: white; // @presenter Color\n --button-background-color: var(--color-primary-500); // @presenter Color\n --button-hover-background-color: var(--color-primary-600); // @presenter Color\n --button-active-background-color: var(--color-primary-700); // @presenter Color\n --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n }\n\n /**\n * @tokens Button secondary colors\n */\n .button-color-secondary {\n --button-color: var(--color-emphasis-800); // @presenter Color\n --button-background-color: var(--color-secondary-400); // @presenter Color\n --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n --button-active-background-color: var(--color-secondary-600); // @presenter Color\n --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n }\n\n /**\n * @tokens Button borders\n */\n --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n --button-box-shadow: none; // @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 --button-small-font-size: 12px; // @presenter FontSize\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px; // @presenter Spacing\n --button-medium-font-size: 14px; // @presenter FontSize\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px; // @presenter Spacing\n --button-large-font-size: 14px; // @presenter FontSize\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px; // @presenter Spacing\n --button-xlarge-font-size: 16px; // @presenter FontSize\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px; // @presenter Spacing\n\n // @tokens End\n"])));
16
+ var sidebar = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-font-size: var(--font-size-base);\n --sidebar-font-family: var(--font-family-base);\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: #fff;\n --sidebar-right-line-color: var(--global-border-color);\n --sidebar-separator-label-color: var(--sidebar-item-color);\n --sidebar-separator-line-color: #dadada;\n --sidebar-chevron-color: var(--sidebar-item-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-spacing-horizontal: var(--sidebar-spacing-unit);\n --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar border\n */\n --sidebar-border-radius: 4px; // @presenter BorderRadius\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-color: var(--color-content);\n --sidebar-item-active-color: var(--color-content);\n --sidebar-item-background-color: #fff;\n --sidebar-item-active-background-color: var(--global-border-color);\n\n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n // @tokens End\n"], ["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-font-size: var(--font-size-base);\n --sidebar-font-family: var(--font-family-base);\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: #fff;\n --sidebar-right-line-color: var(--global-border-color);\n --sidebar-separator-label-color: var(--sidebar-item-color);\n --sidebar-separator-line-color: #dadada;\n --sidebar-chevron-color: var(--sidebar-item-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-spacing-horizontal: var(--sidebar-spacing-unit);\n --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar border\n */\n --sidebar-border-radius: 4px; // @presenter BorderRadius\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-color: var(--color-content);\n --sidebar-item-active-color: var(--color-content);\n --sidebar-item-background-color: #fff;\n --sidebar-item-active-background-color: var(--global-border-color);\n\n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n // @tokens End\n"])));
17
+ var admonition = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n /**\n * @tokens Admonition colors\n * @presenter Color\n */\n\n /* info */\n --admonition-info-background-color: #ebedf0;\n --admonition-info-text-color: var(--color-content);\n --admonition-info-icon-color: #4782cb;\n\n /* attention */\n --admonition-attention-background-color: #e6eef8;\n --admonition-attention-text-color: var(--color-content);\n --admonition-attention-icon-color: #4782cb;\n\n /* warning */\n --admonition-warning-background-color: #feeda5;\n --admonition-warning-text-color: var(--color-content);\n --admonition-warning-icon-color: #d4ad03;\n\n /* danger */\n --admonition-danger-background-color: #fceaea;\n --admonition-danger-text-color: var(--color-content);\n --admonition-danger-icon-color: #e53935;\n\n /* success */\n --admonition-success-background-color: #ddffe1;\n --admonition-success-text-color: var(--color-content);\n --admonition-success-icon-color: #00aa13;\n\n /**\n * @tokens Admonition typography\n */\n --admonition-font-size: 16px; // @presenter FontSize\n --admonition-font-weight: normal; // @presenter FontWeight\n --admonition-line-height: 1.5em; // @presenter LineHeight\n --admonition-heading-font-size: 16px; // @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 --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 /**\n * @tokens Admonition border\n */\n --admonition-border-radius: 8px; // @presenter BorderRadius\n\n // @tokens End\n"], ["\n /**\n * @tokens Admonition colors\n * @presenter Color\n */\n\n /* info */\n --admonition-info-background-color: #ebedf0;\n --admonition-info-text-color: var(--color-content);\n --admonition-info-icon-color: #4782cb;\n\n /* attention */\n --admonition-attention-background-color: #e6eef8;\n --admonition-attention-text-color: var(--color-content);\n --admonition-attention-icon-color: #4782cb;\n\n /* warning */\n --admonition-warning-background-color: #feeda5;\n --admonition-warning-text-color: var(--color-content);\n --admonition-warning-icon-color: #d4ad03;\n\n /* danger */\n --admonition-danger-background-color: #fceaea;\n --admonition-danger-text-color: var(--color-content);\n --admonition-danger-icon-color: #e53935;\n\n /* success */\n --admonition-success-background-color: #ddffe1;\n --admonition-success-text-color: var(--color-content);\n --admonition-success-icon-color: #00aa13;\n\n /**\n * @tokens Admonition typography\n */\n --admonition-font-size: 16px; // @presenter FontSize\n --admonition-font-weight: normal; // @presenter FontWeight\n --admonition-line-height: 1.5em; // @presenter LineHeight\n --admonition-heading-font-size: 16px; // @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 --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 /**\n * @tokens Admonition border\n */\n --admonition-border-radius: 8px; // @presenter BorderRadius\n\n // @tokens End\n"])));
18
+ var panels = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n /**\n * @tokens Panel border\n */\n --panels-border-radius: 8px; // @presenter BorderRadius\n\n /**\n * @tokens Samples panel\n * @presenter Color\n */\n --samples-panel-gap: 20px;\n --samples-panel-width: 50%;\n\n --panels-background-color: #fff;\n --samples-panel-block-background-color: #fff;\n --samples-panel-background-color: #52606d;\n --samples-panel-callback-background-color: var(--color-secondary-300);\n --samples-panel-controls-background-color: #323f4b;\n --samples-panel-controls-hover-background-color: #3c4c5a;\n --samples-panel-controls-active-border-color: var(--color-accent-500);\n --samples-panel-text-color: #fff;\n --samples-panel-heading-color: #fff;\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n /**\n * @tokens Try It panel\n * @presenter Color\n */\n\n --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n --try-it-panel-active-tab-background-color: #47535e;\n --try-it-panel-active-tab-border-color: var(--color-accent-500);\n --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n --try-it-panel-action-button-width: auto;\n\n /**\n * @tokens Request and Response panel\n * @presenter Color\n */\n --request-and-response-panel-background-color: #fff;\n\n // @tokens End\n"], ["\n /**\n * @tokens Panel border\n */\n --panels-border-radius: 8px; // @presenter BorderRadius\n\n /**\n * @tokens Samples panel\n * @presenter Color\n */\n --samples-panel-gap: 20px;\n --samples-panel-width: 50%;\n\n --panels-background-color: #fff;\n --samples-panel-block-background-color: #fff;\n --samples-panel-background-color: #52606d;\n --samples-panel-callback-background-color: var(--color-secondary-300);\n --samples-panel-controls-background-color: #323f4b;\n --samples-panel-controls-hover-background-color: #3c4c5a;\n --samples-panel-controls-active-border-color: var(--color-accent-500);\n --samples-panel-text-color: #fff;\n --samples-panel-heading-color: #fff;\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n /**\n * @tokens Try It panel\n * @presenter Color\n */\n\n --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n --try-it-panel-active-tab-background-color: #47535e;\n --try-it-panel-active-tab-border-color: var(--color-accent-500);\n --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n --try-it-panel-action-button-width: auto;\n\n /**\n * @tokens Request and Response panel\n * @presenter Color\n */\n --request-and-response-panel-background-color: #fff;\n\n // @tokens End\n"])));
19
+ var tooltip = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /**\n * @tokens Tooltip Base\n * @presenter Color\n */\n --tooltip-color: var(--color-secondary-300);\n --tooltip-background-color: #52606d;\n\n /**\n * @tokens Tooltip Copy Button\n * @presenter Color\n */\n .tooltip-copy-button {\n --tooltip-color: #000;\n --tooltip-background-color: #fff;\n }\n\n // @tokens End\n"], ["\n /**\n * @tokens Tooltip Base\n * @presenter Color\n */\n --tooltip-color: var(--color-secondary-300);\n --tooltip-background-color: #52606d;\n\n /**\n * @tokens Tooltip Copy Button\n * @presenter Color\n */\n .tooltip-copy-button {\n --tooltip-color: #000;\n --tooltip-background-color: #fff;\n }\n\n // @tokens End\n"])));
20
+ var code = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n /**\n * @tokens Code base styles\n */\n --code-font-size: 13px; // @presenter FontSize\n --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n --code-font-weight: 400; // @presenter FontWeight\n --code-wrap: pre;\n\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-color: #e53935; // @presenter Color\n --inline-code-background-color: var(--color-secondary-200); // @presenter Color\n --inline-code-border-color: var(--global-border-color); // @presenter Color\n --inline-code-border-radius: var(--global-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-color: #f1928f; // @presenter Color\n --code-block-background-color: rgba(217, 205, 199, 0.05); // @presenter Color\n --code-block-border-color: var(--global-border-color); // @presenter Color\n --code-block-border-radius: 8px; // @presenter BorderRadius\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n --code-block-preformatted-background-color: #323f4b; // @presenter Color\n\n --code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color\n\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\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\n --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n\n --code-block-tokens-string-color: #fee39e; // @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\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\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\n --code-block-tokens-regex-color: #e90; // @presenter Color\n --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n\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\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-color: #e53935; // @presenter Color\n --inline-code-background-color: var(--color-secondary-200); // @presenter Color\n --inline-code-border-color: var(--global-border-color); // @presenter Color\n --inline-code-border-radius: var(--global-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-color: #f1928f; // @presenter Color\n --code-block-background-color: rgba(217, 205, 199, 0.05); // @presenter Color\n --code-block-border-color: var(--global-border-color); // @presenter Color\n --code-block-border-radius: 8px; // @presenter BorderRadius\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n --code-block-preformatted-background-color: #323f4b; // @presenter Color\n\n --code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color\n\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\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\n --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n\n --code-block-tokens-string-color: #fee39e; // @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\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\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\n --code-block-tokens-regex-color: #e90; // @presenter Color\n --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n\n --code-block-tokens-deleted-color: red; // @presenter Color\n\n // @tokens End\n"])));
21
+ var links = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n /**\n * @tokens Links\n */\n --link-color: var(--color-primary-500); // @presenter Color\n --link-decoration: none;\n --link-hover-color: var(--color-primary-100); // @presenter Color\n --link-hover-decoration: underline;\n\n // @tokens End\n"], ["\n /**\n * @tokens Links\n */\n --link-color: var(--color-primary-500); // @presenter Color\n --link-decoration: none;\n --link-hover-color: var(--color-primary-100); // @presenter Color\n --link-hover-decoration: underline;\n\n // @tokens End\n"])));
22
+ var openapiAndGraphqlDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens OpenAPI-GraphQL Logo\n */\n --logo-max-height: 285px;\n --logo-max-width: 285px;\n --logo-padding: 2px;\n\n /**\n * @tokens OpenAPI-GraphQL Layout\n */\n --layout-buttons-top-offset: 20px; // @presenter Spacing\n --layout-buttons-height: 36px; // @presenter Spacing\n --layout-buttons-width: 36px; // @presenter Spacing\n\n --layout-stacked-small-max-width: 90%;\n --layout-stacked-medium-max-width: 75%;\n --layout-stacked-large-max-width: 1200px;\n\n --layout-three-panel-small-max-width: 100%;\n --layout-three-panel-medium-max-width: 100%;\n --layout-three-panel-large-max-width: 1800px;\n\n --layout-middle-panel-small-max-width: none;\n --layout-middle-panel-medium-max-width: none;\n --layout-middle-panel-large-max-width: none;\n\n /**\n * @tokens OpenAPI-GraphQL Schema\n */\n --schema-lines-color: var(--global-border-color); // @presenter Color\n --schema-default-details-width: 70%;\n --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n --schema-require-label-color: var(--color-error-900); // @presenter Color\n --schema-labels-text-size: 0.9em; // @presenter Spacing\n --schema-nesting-spacing: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n --schema-chevron-color: var(--color-content); // @presenter Color\n --schema-chevron-size: 9px; // @presenter Spacing\n\n --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n --field-name-font-size: var(--code-font-size); // @presenter FontSize\n --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n --field-example-color: var(--color-content); // @presenter Color\n --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n --field-constraint-color: var(--color-content); // @presenter Color\n --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n /**\n * @tokens OpenAPI-GraphQL Search\n * @presenter Color\n */\n --search-input-border-bottom: #e6e6e6;\n --search-results-background-color: #f2f2f2;\n --search-results-active-item-background-color: #e6e6e6;\n --search-marked-background-color: #ffff03;\n --search-popup-header-background-color: var(--color-secondary-200);\n --search-clear-button-background-color: var(--color-secondary-400);\n --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n /*\n * @tokens OpenAPI-GraphQL Badge\n */\n --badge-color: var(--color-emphasis-100); // @presenter Color\n --badge-background-color: var(--color-primary-500); // @presenter Color\n --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n --http-badge-font-size: 12px; // @presenter FontSize\n --http-badge-line-height: 20px; // @presenter LineHeight\n --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --http-badge-border-radius: 16px; // @presenter BorderRadius\n --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n --http-badge-menu-font-size: 8px; // @presenter FontSize\n --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n /**\n * @tokens OpenAPI-GraphQL Other\n */\n --recursive-label-color: var(--color-warning-500); // @presenter Color\n --spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n /* Floating action button */\n --fab-color: #0065fb; // @presenter Color\n --fab-background-color: #f2f2f2; // @presenter Color\n\n // @tokens End\n"], ["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens OpenAPI-GraphQL Logo\n */\n --logo-max-height: 285px;\n --logo-max-width: 285px;\n --logo-padding: 2px;\n\n /**\n * @tokens OpenAPI-GraphQL Layout\n */\n --layout-buttons-top-offset: 20px; // @presenter Spacing\n --layout-buttons-height: 36px; // @presenter Spacing\n --layout-buttons-width: 36px; // @presenter Spacing\n\n --layout-stacked-small-max-width: 90%;\n --layout-stacked-medium-max-width: 75%;\n --layout-stacked-large-max-width: 1200px;\n\n --layout-three-panel-small-max-width: 100%;\n --layout-three-panel-medium-max-width: 100%;\n --layout-three-panel-large-max-width: 1800px;\n\n --layout-middle-panel-small-max-width: none;\n --layout-middle-panel-medium-max-width: none;\n --layout-middle-panel-large-max-width: none;\n\n /**\n * @tokens OpenAPI-GraphQL Schema\n */\n --schema-lines-color: var(--global-border-color); // @presenter Color\n --schema-default-details-width: 70%;\n --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n --schema-require-label-color: var(--color-error-900); // @presenter Color\n --schema-labels-text-size: 0.9em; // @presenter Spacing\n --schema-nesting-spacing: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n --schema-chevron-color: var(--color-content); // @presenter Color\n --schema-chevron-size: 9px; // @presenter Spacing\n\n --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n --field-name-font-size: var(--code-font-size); // @presenter FontSize\n --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n --field-example-color: var(--color-content); // @presenter Color\n --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n --field-constraint-color: var(--color-content); // @presenter Color\n --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n /**\n * @tokens OpenAPI-GraphQL Search\n * @presenter Color\n */\n --search-input-border-bottom: #e6e6e6;\n --search-results-background-color: #f2f2f2;\n --search-results-active-item-background-color: #e6e6e6;\n --search-marked-background-color: #ffff03;\n --search-popup-header-background-color: var(--color-secondary-200);\n --search-clear-button-background-color: var(--color-secondary-400);\n --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n /*\n * @tokens OpenAPI-GraphQL Badge\n */\n --badge-color: var(--color-emphasis-100); // @presenter Color\n --badge-background-color: var(--color-primary-500); // @presenter Color\n --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n --http-badge-font-size: 12px; // @presenter FontSize\n --http-badge-line-height: 20px; // @presenter LineHeight\n --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --http-badge-border-radius: 16px; // @presenter BorderRadius\n --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n --http-badge-menu-font-size: 8px; // @presenter FontSize\n --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n /**\n * @tokens OpenAPI-GraphQL Other\n */\n --recursive-label-color: var(--color-warning-500); // @presenter Color\n --spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n /* Floating action button */\n --fab-color: #0065fb; // @presenter Color\n --fab-background-color: #f2f2f2; // @presenter Color\n\n // @tokens End\n"])));
23
+ var footer = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n // @tokens End\n"])));
24
+ var logo = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n /**\n * @tokens Logo\n */\n --logo-height: 2rem; // @presenter Spacing\n --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Logo\n */\n --logo-height: 2rem; // @presenter Spacing\n --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n // @tokens End\n"])));
25
+ var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-margin-horizontal: 0; // @presenter Spacing\n --navbar-item-margin-vertical: 0; // @presenter Spacing\n --navbar-item-border-radius: 10px; // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-active-background-color: #1b75fa; // @presenter Color\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n\n // @tokens End\n"], ["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-margin-horizontal: 0; // @presenter Spacing\n --navbar-item-margin-vertical: 0; // @presenter Spacing\n --navbar-item-border-radius: 10px; // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-active-background-color: #1b75fa; // @presenter Color\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n\n // @tokens End\n"])));
26
+ var toc = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n /**\n * @tokens TOC\n * */\n --toc-width: 240px;\n\n // @tokens End\n"], ["\n /**\n * @tokens TOC\n * */\n --toc-width: 240px;\n\n // @tokens End\n"])));
27
+ var markdown = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n /**\n * @tokens Markdown\n * */\n --content-wrapper-max-width: 910px;\n --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Markdown\n * */\n --content-wrapper-max-width: 910px;\n --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n // @tokens End\n"])));
28
+ var blockquote = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n /**\n * @tokens Blockquote\n * */\n // TODO: fix typo\n --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n --bloquote-margin-horizontal: 0; // @presenter Spacing\n --bloquote-padding-vertical: 0; // @presenter Spacing\n --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n --bloquote-background-color: transparent; // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Blockquote\n * */\n // TODO: fix typo\n --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n --bloquote-margin-horizontal: 0; // @presenter Spacing\n --bloquote-padding-vertical: 0; // @presenter Spacing\n --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n --bloquote-background-color: transparent; // @presenter Color\n\n // @tokens End\n"])));
29
+ var portalSearch = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n /**\n * @tokens Portal Search\n */\n --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-text-color: #fff; // @presenter Color\n --search-input-border-radius: var(--global-border-radius); // @presenter BorderRadius\n --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n --search-input-line-height: 1.15em; // @presenter LineHeight\n // TODO: fix typo\n --search-popover-backgrond-color: #fff; // @presenter Color\n --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n --search-item-text-color: var(--color-content-secondary); // @presenter Color\n --search-item-title-text-color: var(--color-content); // @presenter Color\n --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Portal Search\n */\n --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-text-color: #fff; // @presenter Color\n --search-input-border-radius: var(--global-border-radius); // @presenter BorderRadius\n --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n --search-input-line-height: 1.15em; // @presenter LineHeight\n // TODO: fix typo\n --search-popover-backgrond-color: #fff; // @presenter Color\n --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n --search-item-text-color: var(--color-content-secondary); // @presenter Color\n --search-item-title-text-color: var(--color-content); // @presenter Color\n --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n // @tokens End\n"])));
30
+ exports.styles = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n }\n"], ["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n }\n"])), baseColors, httpColors, responseColors, typography, headingsTypography, borders, admonition, buttons, sidebar, panels, navbar, footer, logo, toc, tooltip, code, links, markdown, blockquote, portalSearch, openapiAndGraphqlDocs);
31
+ exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.styles);
32
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
package/mocks/Link.js CHANGED
@@ -18,7 +18,7 @@ var lodash_1 = require("lodash");
18
18
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
19
19
  function Link(props) {
20
20
  // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
21
- var filteredProps = (0, lodash_1.omit)(props, ['active']);
21
+ var filteredProps = (0, lodash_1.omit)(props, ['active', 'httpVerb', 'hasActiveSubItem']);
22
22
  return (0, jsx_runtime_1.jsx)("a", __assign({ href: filteredProps.to }, filteredProps));
23
23
  }
24
24
  exports.Link = Link;
package/mocks/hooks/usePageData.d.ts CHANGED
@@ -2,4 +2,4 @@ import type { ResolvedNavLinkItem } from '@theme/types/portal';
2
2
  export declare function usePageData(): {
3
3
  prevPage: ResolvedNavLinkItem | null;
4
4
  nextPage: ResolvedNavLinkItem | null;
5
- };
5
+ } | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.1.11",
3
+ "version": "0.1.14",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/CodeBlock/CodeBlock.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import styled from 'styled-components';
2
2
 
3
+ import { generateCodeBlockTokens } from '@theme/utils';
4
+
3
5
  export const CodeBlock = styled.div`
4
6
  max-height: var(--code-block-max-height, 600px);
5
7
  word-break: var(--code-block-word-break, initial);
@@ -42,13 +44,6 @@ export const CodeBlock = styled.div`
42
44
  overflow: auto;
43
45
  }
44
46
 
45
- .token.comment,
46
- .token.prolog,
47
- .token.doctype,
48
- .token.cdata {
49
- color: hsl(30, 20%, 50%);
50
- }
51
-
52
47
  .token.punctuation {
53
48
  opacity: 1;
54
49
  }
@@ -57,26 +52,12 @@ export const CodeBlock = styled.div`
57
52
  opacity: 0.7;
58
53
  }
59
54
 
60
- .token.property,
61
- .token.tag,
62
- .token.number,
63
- .token.constant,
64
- .token.symbol {
65
- color: var(--color-content-inverse);
66
- }
67
-
68
- .token.boolean {
69
- color: var(--color-error-500);
70
- }
71
-
72
55
  .token.selector,
73
56
  .token.attr-name,
74
57
  .token.string,
75
58
  .token.char,
76
59
  .token.builtin,
77
60
  .token.inserted {
78
- color: #fee39e;
79
-
80
61
  & + a,
81
62
  & + a:visited {
82
63
  color: #4ed2ba;
@@ -88,24 +69,6 @@ export const CodeBlock = styled.div`
88
69
  color: #9efaa7;
89
70
  }
90
71
 
91
- .token.operator,
92
- .token.entity,
93
- .token.url,
94
- .token.variable {
95
- color: #f5b83d;
96
- }
97
-
98
- .token.atrule,
99
- .token.attr-value,
100
- .token.keyword {
101
- color: #ffdbf4;
102
- }
103
-
104
- .token.regex,
105
- .token.important {
106
- color: #e90;
107
- }
108
-
109
72
  .token.important,
110
73
  .token.bold {
111
74
  font-weight: bold;
@@ -119,7 +82,5 @@ export const CodeBlock = styled.div`
119
82
  cursor: help;
120
83
  }
121
84
 
122
- .token.deleted {
123
- color: red;
124
- }
85
+ ${generateCodeBlockTokens()}
125
86
  `;
package/src/Markdown/CodeSample/index.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export * from '@theme/Markdown/CodeSample/CodeSample';
2
2
  export * from '@theme/Markdown/CodeSample/styled';
3
- export * from '@theme/Markdown/CodeSample/types';