@redocly/theme 0.2.0 → 0.2.3
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.
- package/ColorModeSwitcher/ColorModeSwitcher.d.ts +2 -0
- package/ColorModeSwitcher/ColorModeSwitcher.js +79 -0
- package/ColorModeSwitcher/index.d.ts +1 -0
- package/ColorModeSwitcher/index.js +17 -0
- package/Markdown/MarkdownWrapper.js +1 -1
- package/Navbar/Navbar.js +3 -1
- package/SourceCode/SourceCode.js +54 -9
- package/TableOfContent/TableOfContent.js +7 -18
- package/TableOfContent/utils.d.ts +4 -0
- package/TableOfContent/utils.js +65 -0
- package/globalStyle.d.ts +2 -0
- package/globalStyle.js +27 -24
- package/icons/ColorModeIcon/ColorModeIcon.d.ts +10 -0
- package/icons/ColorModeIcon/ColorModeIcon.js +30 -0
- package/icons/ColorModeIcon/index.d.ts +2 -0
- package/icons/ColorModeIcon/index.js +5 -0
- package/icons/index.d.ts +1 -0
- package/icons/index.js +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/mocks/hooks/index.js +4 -0
- package/package.json +1 -1
- package/src/ColorModeSwitcher/ColorModeSwitcher.tsx +47 -0
- package/src/ColorModeSwitcher/index.ts +1 -0
- package/src/Markdown/MarkdownWrapper.tsx +24 -0
- package/src/Navbar/Navbar.tsx +2 -0
- package/src/SourceCode/SourceCode.tsx +16 -5
- package/src/TableOfContent/TableOfContent.tsx +11 -18
- package/src/TableOfContent/utils.ts +45 -0
- package/src/globalStyle.ts +30 -1
- package/src/icons/ColorModeIcon/ColorModeIcon.tsx +53 -0
- package/src/icons/ColorModeIcon/index.ts +2 -0
- package/src/icons/index.ts +1 -0
- package/src/index.ts +1 -0
- package/src/mocks/hooks/index.ts +4 -0
- package/{settings.yaml → src/settings.yaml} +6 -0
package/globalStyle.js
CHANGED
|
@@ -4,29 +4,32 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.GlobalStyle = exports.styles = void 0;
|
|
7
|
+
exports.GlobalStyle = exports.styles = exports.darkMode = exports.lightMode = void 0;
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
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
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
exports.
|
|
32
|
-
|
|
10
|
+
var baseDarkColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n --color-primary-100: #969ca6;\n --color-primary-200: #7f8693;\n --color-primary-300: #7d7d80;\n --color-primary-400: #4b4f56;\n --color-primary-500: #404042;\n --color-primary-600: #36383d;\n --color-primary-700: #28282a;\n --color-primary-800: #202021;\n --color-primary-900: #000000;\n"], ["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n --color-primary-100: #969ca6;\n --color-primary-200: #7f8693;\n --color-primary-300: #7d7d80;\n --color-primary-400: #4b4f56;\n --color-primary-500: #404042;\n --color-primary-600: #36383d;\n --color-primary-700: #28282a;\n --color-primary-800: #202021;\n --color-primary-900: #000000;\n"])));
|
|
11
|
+
var httpColors = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __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"])));
|
|
12
|
+
var responseColors = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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"])));
|
|
13
|
+
var typography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __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"])));
|
|
14
|
+
var headingsTypography = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n // --h-{css-property-name} is fallback for h1...h6\n\n * {\n box-sizing: border-box;\n }\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 box-sizing: border-box;\n }\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"])));
|
|
15
|
+
var borders = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __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"])));
|
|
16
|
+
var buttons = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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-margin: 5px; // @presenter Margin\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-margin: 5px; // @presenter Margin\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"])));
|
|
17
|
+
var sidebar = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __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"])));
|
|
18
|
+
var admonition = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __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"])));
|
|
19
|
+
var panels = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __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"])));
|
|
20
|
+
var tooltip = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __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"])));
|
|
21
|
+
var code = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n /**\n * @tokens Code base styles\n */\n --code-font-size: 13px; // @presenter FontSize\n --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n --code-font-weight: 400; // @presenter FontWeight\n --code-wrap: pre;\n\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"])));
|
|
22
|
+
var links = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __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"])));
|
|
23
|
+
var openapiAndGraphqlDocs = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __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"])));
|
|
24
|
+
var footer = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n // @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"])));
|
|
25
|
+
var logo = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __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"])));
|
|
26
|
+
var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\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-separator-line-color: var(--sidebar-separator-line-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 --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\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-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n\n // @tokens End\n"])));
|
|
27
|
+
var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __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"])));
|
|
28
|
+
var markdown = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __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"])));
|
|
29
|
+
var blockquote = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __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"])));
|
|
30
|
+
var portalSearch = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __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"])));
|
|
31
|
+
exports.lightMode = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), baseColors);
|
|
32
|
+
exports.darkMode = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), baseDarkColors);
|
|
33
|
+
exports.styles = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n }\n\n :root.dark {\n ", ";\n }\n"], ["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n }\n\n :root.dark {\n ", ";\n }\n"])), baseColors, httpColors, responseColors, typography, headingsTypography, borders, admonition, buttons, sidebar, panels, navbar, footer, logo, toc, tooltip, code, links, markdown, blockquote, portalSearch, openapiAndGraphqlDocs, exports.darkMode);
|
|
34
|
+
exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), exports.styles);
|
|
35
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface ColorModeIconProps {
|
|
3
|
+
mode?: 'dark' | 'light' | string;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
declare function Icon({ mode, className }: ColorModeIconProps): JSX.Element;
|
|
7
|
+
export declare const ColorModeIcon: import("styled-components").StyledComponent<typeof Icon, any, {
|
|
8
|
+
'data-component-name': string;
|
|
9
|
+
}, "data-component-name">;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.ColorModeIcon = void 0;
|
|
11
|
+
var react_1 = __importDefault(require("react"));
|
|
12
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
|
+
function Icon(_a) {
|
|
14
|
+
var mode = _a.mode, className = _a.className;
|
|
15
|
+
switch (mode) {
|
|
16
|
+
case 'dark':
|
|
17
|
+
return (react_1.default.createElement("svg", { className: className, "data-testid": "dark", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
|
|
18
|
+
react_1.default.createElement("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" })));
|
|
19
|
+
case 'light':
|
|
20
|
+
return (react_1.default.createElement("svg", { "data-testid": "light", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
|
|
21
|
+
react_1.default.createElement("path", { d: "M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" })));
|
|
22
|
+
default:
|
|
23
|
+
return (react_1.default.createElement("svg", { "data-testid": "custom", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
|
|
24
|
+
react_1.default.createElement("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" })));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
exports.ColorModeIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({
|
|
28
|
+
'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
|
|
29
|
+
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: var(--navbar-item-font-size);\n box-sizing: border-box;\n fill: var(--navbar-text-color);\n"], ["\n width: var(--navbar-item-font-size);\n box-sizing: border-box;\n fill: var(--navbar-text-color);\n"])));
|
|
30
|
+
var templateObject_1;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ColorModeIcon = void 0;
|
|
4
|
+
var ColorModeIcon_1 = require("../../icons/ColorModeIcon/ColorModeIcon");
|
|
5
|
+
Object.defineProperty(exports, "ColorModeIcon", { enumerable: true, get: function () { return ColorModeIcon_1.ColorModeIcon; } });
|
package/icons/index.d.ts
CHANGED
package/icons/index.js
CHANGED
|
@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
__exportStar(require("../icons/ShelfIcon"), exports);
|
|
18
18
|
__exportStar(require("../icons/AlertIcon"), exports);
|
|
19
19
|
__exportStar(require("../icons/ArrowIcon"), exports);
|
|
20
|
+
__exportStar(require("../icons/ColorModeIcon"), exports);
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/mocks/hooks/index.js
CHANGED
|
@@ -8,6 +8,10 @@ function useThemeSettings(_) {
|
|
|
8
8
|
nextPageLink: { label: 'next page theme settings label' },
|
|
9
9
|
previousPageLink: { label: 'prev page theme settings label' },
|
|
10
10
|
},
|
|
11
|
+
colorMode: {
|
|
12
|
+
modes: ['light', 'dark'],
|
|
13
|
+
default: 'light',
|
|
14
|
+
},
|
|
11
15
|
};
|
|
12
16
|
}
|
|
13
17
|
exports.useThemeSettings = useThemeSettings;
|
package/package.json
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
import { useThemeSettings } from '@portal/hooks';
|
|
5
|
+
import { DEFAULT_THEME_NAME } from '@portal/constants';
|
|
6
|
+
import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
|
|
7
|
+
|
|
8
|
+
export function ColorModeSwitcher(): JSX.Element | null {
|
|
9
|
+
const themeSettings = useThemeSettings(DEFAULT_THEME_NAME);
|
|
10
|
+
const colorMode = themeSettings.colorMode;
|
|
11
|
+
const [activeColorMode, setActiveColorMode] = useState('');
|
|
12
|
+
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
setActiveColorMode(document.documentElement.className || colorMode?.default);
|
|
15
|
+
}, []);
|
|
16
|
+
|
|
17
|
+
if (!colorMode?.modes || colorMode?.hide) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const handelChangeColorMode = () => {
|
|
22
|
+
const activeIndex = colorMode.modes.indexOf(activeColorMode);
|
|
23
|
+
const mode =
|
|
24
|
+
activeIndex < colorMode.modes.length - 1
|
|
25
|
+
? colorMode.modes[activeIndex + 1]
|
|
26
|
+
: colorMode.modes[0];
|
|
27
|
+
setActiveColorMode(mode);
|
|
28
|
+
localStorage.setItem('colorSchema', mode);
|
|
29
|
+
document.documentElement.className = mode;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Wrapper
|
|
34
|
+
data-component-name="ColorModeSwitcher/ColorModeSwitcher"
|
|
35
|
+
onClick={handelChangeColorMode}
|
|
36
|
+
>
|
|
37
|
+
<ColorModeIcon mode={activeColorMode} />
|
|
38
|
+
</Wrapper>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const Wrapper = styled.div`
|
|
43
|
+
margin-left: calc(var(--sidebar-spacing-horizontal) * 2);
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@theme/ColorModeSwitcher/ColorModeSwitcher';
|