@redocly/theme 0.1.12 → 0.1.15
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/CodeBlock/CodeBlock.js +2 -1
- package/Markdown/CodeSample/index.d.ts +0 -1
- package/Markdown/CodeSample/index.js +0 -1
- package/Markdown/CodeSample/styled.d.ts +0 -1
- package/Markdown/CodeSample/styled.js +8 -79
- package/Markdown/StyledMarkdown.d.ts +0 -2
- package/Markdown/StyledMarkdown.js +5 -16
- package/OperationBadge/OperationBadge.js +1 -1
- package/PageNavigation/NextPageLink.js +1 -1
- package/PageNavigation/PreviousPageLink.js +1 -1
- package/Search/SearchItem.js +1 -1
- package/globalStyle.js +1 -1
- package/mocks/hooks/usePageData.d.ts +1 -1
- package/package.json +1 -1
- package/src/CodeBlock/CodeBlock.ts +3 -42
- package/src/Markdown/CodeSample/index.ts +0 -1
- package/src/Markdown/CodeSample/styled.ts +18 -98
- package/src/Markdown/StyledMarkdown.tsx +14 -28
- package/src/OperationBadge/OperationBadge.ts +5 -2
- package/src/PageNavigation/NextPageLink.tsx +2 -2
- package/src/PageNavigation/PreviousPageLink.tsx +2 -2
- package/src/Search/SearchItem.tsx +1 -1
- package/src/globalStyle.ts +36 -0
- package/src/mocks/hooks/usePageData.ts +1 -1
- package/src/ui/Typography.tsx +10 -87
- package/src/utils/ClipboardService.ts +3 -86
- package/src/utils/theme-helpers.ts +46 -0
- package/ui/Typography.d.ts +2 -71
- package/ui/Typography.js +15 -93
- package/utils/ClipboardService.d.ts +1 -5
- package/utils/ClipboardService.js +2 -73
- package/utils/theme-helpers.d.ts +1 -0
- package/utils/theme-helpers.js +42 -2
- package/Markdown/CodeSample/types.d.ts +0 -9
- package/Markdown/CodeSample/types.js +0 -2
- package/src/Markdown/CodeSample/types.ts +0 -40
package/CodeBlock/CodeBlock.js
CHANGED
|
@@ -9,5 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.CodeBlock = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
|
|
12
|
+
var utils_1 = require("../utils");
|
|
13
|
+
exports.CodeBlock = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-height: var(--code-block-max-height, 600px);\n word-break: var(--code-block-word-break, initial);\n /**\n * Based on prism-dark.css\n */\n code[class*='language-'],\n pre[class*='language-'] {\n /* color: white;\n background: none; */\n text-shadow: 0 -0.1em 0.2em black;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n }\n\n @media print {\n code[class*='language-'],\n pre[class*='language-'] {\n text-shadow: none;\n }\n }\n\n /* Code blocks */\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n }\n\n .token.punctuation {\n opacity: 1;\n }\n\n .namespace {\n opacity: 0.7;\n }\n\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n\n .token.property.string {\n color: #9efaa7;\n }\n\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n\n .token.italic {\n font-style: italic;\n }\n\n .token.entity {\n cursor: help;\n }\n\n ", "\n"], ["\n max-height: var(--code-block-max-height, 600px);\n word-break: var(--code-block-word-break, initial);\n /**\n * Based on prism-dark.css\n */\n code[class*='language-'],\n pre[class*='language-'] {\n /* color: white;\n background: none; */\n text-shadow: 0 -0.1em 0.2em black;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n }\n\n @media print {\n code[class*='language-'],\n pre[class*='language-'] {\n text-shadow: none;\n }\n }\n\n /* Code blocks */\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n }\n\n .token.punctuation {\n opacity: 1;\n }\n\n .namespace {\n opacity: 0.7;\n }\n\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n\n .token.property.string {\n color: #9efaa7;\n }\n\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n\n .token.italic {\n font-style: italic;\n }\n\n .token.entity {\n cursor: help;\n }\n\n ", "\n"])), (0, utils_1.generateCodeBlockTokens)());
|
|
13
14
|
var templateObject_1;
|
|
@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
|
|
18
18
|
__exportStar(require("../../Markdown/CodeSample/styled"), exports);
|
|
19
|
-
__exportStar(require("../../Markdown/CodeSample/types"), exports);
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export declare const CodeButton: import("styled-components").FlattenSimpleInterpolation;
|
|
2
1
|
export declare const CodeSampleButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
2
|
export declare const CopyCodeButton: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
3
|
export declare const DoneIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -27,83 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer =
|
|
31
|
-
var polished_1 = require("polished");
|
|
30
|
+
exports.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = void 0;
|
|
32
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
for (var _i = 0, _b = Object.keys(tokens); _i < _b.length; _i++) {
|
|
41
|
-
var token = _b[_i];
|
|
42
|
-
if (token !== 'default') {
|
|
43
|
-
res += ".token.".concat(token, " { color: ").concat((_a = tokens[token]) === null || _a === void 0 ? void 0 : _a.color, "; }\n");
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
if (tokens.default) {
|
|
47
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pre& {\n ", "\n }\n ", "\n "], ["\n pre& {\n ", "\n }\n ", "\n "])), (0, Typography_1.typography)(tokens.default), res);
|
|
48
|
-
}
|
|
49
|
-
return res;
|
|
50
|
-
}
|
|
51
|
-
var getCodeBlockBackgroundColor = function (theme) {
|
|
52
|
-
return Array.isArray(theme.codeBlock.backgroundColor)
|
|
53
|
-
? theme.codeBlock.backgroundColor[0]
|
|
54
|
-
: theme.codeBlock.backgroundColor;
|
|
55
|
-
};
|
|
56
|
-
exports.CodeButton = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0 5px;\n border-radius: 4px;\n"], ["\n padding: 0 5px;\n border-radius: 4px;\n"])));
|
|
57
|
-
exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 5px;\n"], ["\n position: absolute;\n top: 12px;\n right: 5px;\n"])));
|
|
58
|
-
exports.CopyCodeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n display: none;\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n ", "\n display: none;\n\n &:hover {\n cursor: pointer;\n }\n"])), exports.CodeButton);
|
|
59
|
-
exports.DoneIndicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n cursor: default;\n"], ["\n ", "\n cursor: default;\n"])), exports.CodeButton);
|
|
60
|
-
var lightStyleCodeButton = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ",\n ", " {\n color: ", ";\n }\n\n ", ":hover {\n color: ", ";\n outline: 1px solid ", ";\n }\n"], ["\n ", ",\n ", " {\n color: ", ";\n }\n\n ", ":hover {\n color: ", ";\n outline: 1px solid ", ";\n }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
|
|
61
|
-
var theme = _a.theme;
|
|
62
|
-
return theme.codeBlock.copyButton.visibleText;
|
|
63
|
-
}, exports.CopyCodeButton, function (_a) {
|
|
64
|
-
var theme = _a.theme;
|
|
65
|
-
return theme.codeBlock.copyButton.visibleText;
|
|
66
|
-
}, function (_a) {
|
|
67
|
-
var theme = _a.theme;
|
|
68
|
-
return theme.codeBlock.copyButton.visibleText;
|
|
69
|
-
});
|
|
70
|
-
var darkStyleCodeButton = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ",\n ", " {\n color: ", ";\n }\n\n ", ":hover {\n color: white;\n color: ", ";\n background-color: ", ";\n }\n"], ["\n ", ",\n ", " {\n color: ", ";\n }\n\n ", ":hover {\n color: white;\n color: ", ";\n background-color: ", ";\n }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
|
|
71
|
-
var theme = _a.theme;
|
|
72
|
-
return theme.codeBlock.copyButton.visibleText;
|
|
73
|
-
}, exports.CopyCodeButton, function (_a) {
|
|
74
|
-
var theme = _a.theme;
|
|
75
|
-
return theme.codeBlock.copyButton.contrastText;
|
|
76
|
-
}, function (_a) {
|
|
77
|
-
var theme = _a.theme;
|
|
78
|
-
return theme.codeBlock.copyButton.background;
|
|
79
|
-
});
|
|
80
|
-
var lightStyleTokens = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n\n .token.namespace {\n opacity: 0.7;\n }\n\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n"], ["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n\n .token.namespace {\n opacity: 0.7;\n }\n\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n"])));
|
|
81
|
-
var darkStyleTokens = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: hsl(30, 20%, 50%);\n }\n\n .token.property,\n .token.tag,\n .token.number,\n .token.constant,\n .token.symbol {\n color: #62bff9;\n }\n .token.boolean {\n color: firebrick;\n }\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #a0fbaa;\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n .token.operator,\n .token.entity,\n .token.url,\n .token.variable {\n color: hsl(40, 90%, 60%);\n }\n .token.atrule,\n .token.attr-value,\n .token.keyword {\n color: hsl(350, 40%, 70%);\n }\n .token.regex,\n .token.important {\n color: #e90;\n }\n\n .token.deleted {\n color: red;\n }\n"], ["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: hsl(30, 20%, 50%);\n }\n\n .token.property,\n .token.tag,\n .token.number,\n .token.constant,\n .token.symbol {\n color: #62bff9;\n }\n .token.boolean {\n color: firebrick;\n }\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #a0fbaa;\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n .token.operator,\n .token.entity,\n .token.url,\n .token.variable {\n color: hsl(40, 90%, 60%);\n }\n .token.atrule,\n .token.attr-value,\n .token.keyword {\n color: hsl(350, 40%, 70%);\n }\n .token.regex,\n .token.important {\n color: #e90;\n }\n\n .token.deleted {\n color: red;\n }\n"])));
|
|
82
|
-
exports.Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", "\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n\n pre {\n white-space: ", ";\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n\n font-family: ", ";\n background-color: ", ";\n\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n\n color: ", ";\n\n &:before,\n &:after {\n content: none;\n }\n }\n }\n\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: ", ";\n }\n\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n ", "\n ", "\n }\n"], ["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", "\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n\n pre {\n white-space: ", ";\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n\n font-family: ", ";\n background-color: ", ";\n\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n\n color: ", ";\n\n &:before,\n &:after {\n content: none;\n }\n }\n }\n\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: ", ";\n }\n\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n ", "\n ", "\n }\n"])), function (_a) {
|
|
83
|
-
var theme = _a.theme;
|
|
84
|
-
return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.25
|
|
85
|
-
? darkStyleCodeButton
|
|
86
|
-
: lightStyleCodeButton;
|
|
87
|
-
}, exports.CodeSampleButtonContainer, exports.CopyCodeButton, function (_a) {
|
|
88
|
-
var theme = _a.theme;
|
|
89
|
-
return (theme.typography.code.wrap ? 'pre-wrap' : 'pre');
|
|
90
|
-
}, function (_a) {
|
|
91
|
-
var theme = _a.theme;
|
|
92
|
-
return theme.typography.code.fontFamily;
|
|
93
|
-
}, function (_a) {
|
|
94
|
-
var theme = _a.theme;
|
|
95
|
-
return theme.codeBlock.backgroundColor;
|
|
96
|
-
}, function (_a) {
|
|
97
|
-
var theme = _a.theme;
|
|
98
|
-
return (0, polished_1.getLuminance)(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34';
|
|
99
|
-
}, function (_a) {
|
|
100
|
-
var theme = _a.theme;
|
|
101
|
-
return theme.shape.borderRadius;
|
|
102
|
-
}, function (_a) {
|
|
103
|
-
var theme = _a.theme;
|
|
104
|
-
return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens;
|
|
105
|
-
}, function (_a) {
|
|
106
|
-
var theme = _a.theme;
|
|
107
|
-
return genTokens(theme.codeBlock.tokens);
|
|
108
|
-
});
|
|
109
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
32
|
+
exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 5px;\n"], ["\n position: absolute;\n top: 12px;\n right: 5px;\n"])));
|
|
33
|
+
exports.CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0 5px;\n border-radius: 4px;\n display: none;\n &:hover {\n cursor: pointer;\n }\n"], ["\n padding: 0 5px;\n border-radius: 4px;\n display: none;\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
34
|
+
exports.DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 5px;\n border-radius: 4px;\n cursor: default;\n"], ["\n padding: 0 5px;\n border-radius: 4px;\n cursor: default;\n"])));
|
|
35
|
+
var lightStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n .token.namespace {\n opacity: 0.7;\n }\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n"], ["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n .token.namespace {\n opacity: 0.7;\n }\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n"])));
|
|
36
|
+
var darkStyleTokens = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: hsl(30, 20%, 50%);\n }\n .token.property,\n .token.tag,\n .token.number,\n .token.constant,\n .token.symbol {\n color: #62bff9;\n }\n .token.boolean {\n color: firebrick;\n }\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #a0fbaa;\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n .token.operator,\n .token.entity,\n .token.url,\n .token.variable {\n color: hsl(40, 90%, 60%);\n }\n .token.atrule,\n .token.attr-value,\n .token.keyword {\n color: hsl(350, 40%, 70%);\n }\n .token.regex,\n .token.important {\n color: #e90;\n }\n .token.deleted {\n color: red;\n }\n"], ["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: hsl(30, 20%, 50%);\n }\n .token.property,\n .token.tag,\n .token.number,\n .token.constant,\n .token.symbol {\n color: #62bff9;\n }\n .token.boolean {\n color: firebrick;\n }\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #a0fbaa;\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n .token.operator,\n .token.entity,\n .token.url,\n .token.variable {\n color: hsl(40, 90%, 60%);\n }\n .token.atrule,\n .token.attr-value,\n .token.keyword {\n color: hsl(350, 40%, 70%);\n }\n .token.regex,\n .token.important {\n color: #e90;\n }\n .token.deleted {\n color: red;\n }\n"])));
|
|
37
|
+
exports.Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", ",\n ", " {\n color: rgba(255, 255, 255, 0.15);\n }\n ", ":hover {\n color: #fff;\n background-color: rgba(255, 255, 255, 0.15);\n }\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n pre {\n white-space: var(--code-wrap);\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n font-family: var(--code-font-family);\n background-color: var(--code-block-preformatted-background-color);\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: white;\n &:before,\n &:after {\n content: none;\n }\n }\n }\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: var(--global-border-radius);\n }\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n ", ";\n }\n"], ["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", ",\n ", " {\n color: rgba(255, 255, 255, 0.15);\n }\n ", ":hover {\n color: #fff;\n background-color: rgba(255, 255, 255, 0.15);\n }\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n pre {\n white-space: var(--code-wrap);\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n font-family: var(--code-font-family);\n background-color: var(--code-block-preformatted-background-color);\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: white;\n &:before,\n &:after {\n content: none;\n }\n }\n }\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: var(--global-border-radius);\n }\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n ", ";\n }\n"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, darkStyleTokens);
|
|
38
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { FlattenSimpleInterpolation } from 'styled-components';
|
|
2
|
-
import { ITypography } from '../ui/Typography';
|
|
3
2
|
export declare const baseTable: FlattenSimpleInterpolation;
|
|
4
|
-
export declare function margins(theme: ITypography): FlattenSimpleInterpolation | string;
|
|
5
3
|
export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
|
|
6
4
|
export declare const StyledMarkdown: import("styled-components").StyledComponent<"main", any, {
|
|
7
5
|
'data-component-name': string;
|
|
@@ -27,28 +27,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.StyledMarkdown = exports.headingAnchor = exports.
|
|
30
|
+
exports.StyledMarkdown = exports.headingAnchor = exports.baseTable = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
var
|
|
32
|
+
var utils_1 = require("../utils");
|
|
33
33
|
exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n table {\n display: block;\n width: 100%;\n overflow: auto;\n word-break: keep-all;\n border-collapse: separate;\n border-spacing: 0;\n margin-top: 20px;\n margin-bottom: 20px;\n font-size: 14px;\n }\n\n table th,\n table td {\n padding: 12px;\n border-bottom: 1px solid var(--global-border-color);\n }\n\n table th {\n text-align: left;\n font-weight: bold;\n background-color: var(--color-secondary-300);\n }\n\n table tr th:first-child,\n table tr td:first-child {\n border-left: 1px solid var(--global-border-color);\n }\n\n table tr td:last-child,\n table tr th:last-child {\n border-right: 1px solid var(--global-border-color);\n }\n\n table thead td,\n table thead th {\n border-top: 1px solid var(--global-border-color);\n }\n\n /* top-left border */\n\n table thead tr:first-child th:first-child {\n border-top-left-radius: var(--panels-border-radius);\n }\n\n /* top-right border */\n\n table thead tr:first-child th:last-child {\n border-top-right-radius: var(--panels-border-radius);\n border-top: 1px solid var(--global-border-color);\n }\n\n /* bottom-left border */\n\n table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--panels-border-radius);\n }\n\n /* bottom-right border */\n\n table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--panels-border-radius);\n }\n"], ["\n table {\n display: block;\n width: 100%;\n overflow: auto;\n word-break: keep-all;\n border-collapse: separate;\n border-spacing: 0;\n margin-top: 20px;\n margin-bottom: 20px;\n font-size: 14px;\n }\n\n table th,\n table td {\n padding: 12px;\n border-bottom: 1px solid var(--global-border-color);\n }\n\n table th {\n text-align: left;\n font-weight: bold;\n background-color: var(--color-secondary-300);\n }\n\n table tr th:first-child,\n table tr td:first-child {\n border-left: 1px solid var(--global-border-color);\n }\n\n table tr td:last-child,\n table tr th:last-child {\n border-right: 1px solid var(--global-border-color);\n }\n\n table thead td,\n table thead th {\n border-top: 1px solid var(--global-border-color);\n }\n\n /* top-left border */\n\n table thead tr:first-child th:first-child {\n border-top-left-radius: var(--panels-border-radius);\n }\n\n /* top-right border */\n\n table thead tr:first-child th:last-child {\n border-top-right-radius: var(--panels-border-radius);\n border-top: 1px solid var(--global-border-color);\n }\n\n /* bottom-left border */\n\n table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--panels-border-radius);\n }\n\n /* bottom-right border */\n\n table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--panels-border-radius);\n }\n"])));
|
|
34
|
-
function margins(theme) {
|
|
35
|
-
if (!theme)
|
|
36
|
-
return '';
|
|
37
|
-
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), {
|
|
38
|
-
marginTop: theme.marginTop || theme.marginVertical || '',
|
|
39
|
-
marginBottom: theme.marginBottom || theme.marginVertical || '',
|
|
40
|
-
marginLeft: theme.marginLeft || theme.marginHorizontal || '',
|
|
41
|
-
marginRight: theme.marginRight || theme.marginHorizontal || '',
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
exports.margins = margins;
|
|
45
34
|
// TODO: Can users specify another className or we should hardcode it?
|
|
46
35
|
function headingAnchor(className) {
|
|
47
36
|
if (className === void 0) { className = 'anchor'; }
|
|
48
|
-
return (0, styled_components_1.css)(
|
|
37
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .", ".before {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n padding-right: 4px;\n }\n\n .", ".after {\n display: inline-block;\n padding-left: 4px;\n }\n\n svg,\n .", " svg {\n visibility: hidden;\n }\n\n :hover .", " svg,\n .", ":focus svg {\n visibility: visible;\n }\n "], ["\n .", ".before {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n padding-right: 4px;\n }\n\n .", ".after {\n display: inline-block;\n padding-left: 4px;\n }\n\n svg,\n .", " svg {\n visibility: hidden;\n }\n\n :hover .", " svg,\n .", ":focus svg {\n visibility: visible;\n }\n "])), className, className, className, className, className);
|
|
49
38
|
}
|
|
50
39
|
exports.headingAnchor = headingAnchor;
|
|
51
40
|
exports.StyledMarkdown = styled_components_1.default.main.attrs(function () { return ({
|
|
52
41
|
'data-component-name': 'Markdown/StyledMarkdown',
|
|
53
|
-
}); })(
|
|
54
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
42
|
+
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1 {\n ", ";\n margin: var(--h1-margin-top) var(--h1-margin-bottom);\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2 {\n ", ";\n margin: var(--h2-margin-top) var(--h2-margin-bottom);\n ", ";\n }\n\n h3 {\n ", ";\n margin: var(--h3-margin-top) var(--h3-margin-bottom);\n ", ";\n }\n\n h4 {\n ", ";\n margin: var(--h4-margin-top) var(--h4-margin-bottom);\n ", ";\n }\n\n h5 {\n ", ";\n margin: var(--h5-margin-top) var(--h5-margin-bottom);\n ", ";\n }\n\n h6 {\n ", ";\n margin: var(--h6-margin-top) var(--h6-margin-bottom);\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"], ["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1 {\n ", ";\n margin: var(--h1-margin-top) var(--h1-margin-bottom);\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2 {\n ", ";\n margin: var(--h2-margin-top) var(--h2-margin-bottom);\n ", ";\n }\n\n h3 {\n ", ";\n margin: var(--h3-margin-top) var(--h3-margin-bottom);\n ", ";\n }\n\n h4 {\n ", ";\n margin: var(--h4-margin-top) var(--h4-margin-bottom);\n ", ";\n }\n\n h5 {\n ", ";\n margin: var(--h5-margin-top) var(--h5-margin-bottom);\n ", ";\n }\n\n h6 {\n ", ";\n margin: var(--h6-margin-top) var(--h6-margin-bottom);\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
|
|
43
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -11,5 +11,5 @@ exports.OperationBadge = void 0;
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.OperationBadge = styled_components_1.default.span.attrs(function (props) { return ({
|
|
13
13
|
className: "operation-type ".concat(props.type),
|
|
14
|
-
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-
|
|
14
|
+
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--http-badge-menu-font-size);\n font-family: var(--http-badge-font-family);\n font-weight: var(--http-badge-font-weight);\n line-height: var(--http-badge-menu-line-height);\n color: var(--http-badge-color);\n background-color: #333;\n border-radius: var(--http-badge-border-radius);\n width: 36px;\n height: 14px;\n text-transform: uppercase;\n text-align: center;\n margin-right: 6px;\n\n &.get {\n background-color: var(--color-http-get);\n }\n\n &.post {\n background-color: var(--color-http-post);\n }\n\n &.put {\n background-color: var(--color-http-put);\n }\n\n &.options {\n background-color: var(--color-http-options);\n }\n\n &.patch {\n background-color: var(--color-http-patch);\n }\n\n &.delete {\n background-color: var(--color-http-delete);\n }\n\n &.basic,\n &.schema {\n background-color: var(--color-http-basic);\n }\n\n &.link {\n background-color: var(--color-http-link);\n }\n\n &.head {\n background-color: var(--color-http-head);\n }\n\n &.hook {\n background-color: var(--color-http-hook);\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--http-badge-menu-font-size);\n font-family: var(--http-badge-font-family);\n font-weight: var(--http-badge-font-weight);\n line-height: var(--http-badge-menu-line-height);\n color: var(--http-badge-color);\n background-color: #333;\n border-radius: var(--http-badge-border-radius);\n width: 36px;\n height: 14px;\n text-transform: uppercase;\n text-align: center;\n margin-right: 6px;\n\n &.get {\n background-color: var(--color-http-get);\n }\n\n &.post {\n background-color: var(--color-http-post);\n }\n\n &.put {\n background-color: var(--color-http-put);\n }\n\n &.options {\n background-color: var(--color-http-options);\n }\n\n &.patch {\n background-color: var(--color-http-patch);\n }\n\n &.delete {\n background-color: var(--color-http-delete);\n }\n\n &.basic,\n &.schema {\n background-color: var(--color-http-basic);\n }\n\n &.link {\n background-color: var(--color-http-link);\n }\n\n &.head {\n background-color: var(--color-http-head);\n }\n\n &.hook {\n background-color: var(--color-http-hook);\n }\n"])));
|
|
15
15
|
var templateObject_1;
|
|
@@ -16,7 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
16
16
|
var usePageData_1 = require("../mocks/hooks/usePageData");
|
|
17
17
|
var ui_1 = require("../ui");
|
|
18
18
|
function NextPageLink() {
|
|
19
|
-
var nextPage = (0, usePageData_1.usePageData)().nextPage;
|
|
19
|
+
var nextPage = ((0, usePageData_1.usePageData)() || {}).nextPage;
|
|
20
20
|
if (!nextPage) {
|
|
21
21
|
return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
|
|
22
22
|
}
|
|
@@ -16,7 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
16
16
|
var usePageData_1 = require("../mocks/hooks/usePageData");
|
|
17
17
|
var ui_1 = require("../ui");
|
|
18
18
|
function PreviousPageLink() {
|
|
19
|
-
var prevPage = (0, usePageData_1.usePageData)().prevPage;
|
|
19
|
+
var prevPage = ((0, usePageData_1.usePageData)() || {}).prevPage;
|
|
20
20
|
if (!prevPage) {
|
|
21
21
|
return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
|
|
22
22
|
}
|
package/Search/SearchItem.js
CHANGED
|
@@ -36,7 +36,7 @@ function SearchItem(_a) {
|
|
|
36
36
|
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
37
37
|
}
|
|
38
38
|
}, [item.active]);
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), (0, utils_1.highlight)(item.pathName)] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ') }))] })));
|
|
39
|
+
return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), item.pathName ? (0, utils_1.highlight)(item.pathName) : null] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ') }))] })));
|
|
40
40
|
}
|
|
41
41
|
exports.SearchItem = SearchItem;
|
|
42
42
|
var SearchLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n text-decoration: none;\n padding: 8px 24px;\n transition: background-color 0.3s ease;\n outline: none;\n white-space: nowrap;\n color: var(--search-item-text-color);\n\n &:hover,\n &:focus {\n background-color: var(--search-item-active-background-color);\n }\n"], ["\n display: block;\n text-decoration: none;\n padding: 8px 24px;\n transition: background-color 0.3s ease;\n outline: none;\n white-space: nowrap;\n color: var(--search-item-text-color);\n\n &:hover,\n &:focus {\n background-color: var(--search-item-active-background-color);\n }\n"])));
|
package/globalStyle.js
CHANGED
|
@@ -17,7 +17,7 @@ var sidebar = (0, styled_components_1.css)(templateObject_8 || (templateObject_8
|
|
|
17
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
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
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 // @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 // @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
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
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
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"])));
|
package/package.json
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
|
-
|
|
123
|
-
color: red;
|
|
124
|
-
}
|
|
85
|
+
${generateCodeBlockTokens()}
|
|
125
86
|
`;
|