@redocly/theme 0.1.12 → 0.1.13
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/StyledMarkdown.d.ts +0 -2
- package/Markdown/StyledMarkdown.js +5 -16
- package/Markdown/index.d.ts +0 -1
- package/Markdown/index.js +0 -1
- package/OperationBadge/OperationBadge.js +1 -1
- package/globalStyle.js +1 -1
- package/package.json +1 -1
- package/src/CodeBlock/CodeBlock.ts +3 -42
- package/src/Markdown/StyledMarkdown.tsx +14 -28
- package/src/Markdown/index.ts +0 -1
- package/src/OperationBadge/OperationBadge.ts +5 -2
- package/src/globalStyle.ts +36 -0
- 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/CodeSample.d.ts +0 -8
- package/Markdown/CodeSample/CodeSample.js +0 -30
- package/Markdown/CodeSample/index.d.ts +0 -3
- package/Markdown/CodeSample/index.js +0 -19
- package/Markdown/CodeSample/styled.d.ts +0 -5
- package/Markdown/CodeSample/styled.js +0 -109
- package/Markdown/CodeSample/types.d.ts +0 -9
- package/Markdown/CodeSample/types.js +0 -2
- package/src/Markdown/CodeSample/CodeSample.tsx +0 -39
- package/src/Markdown/CodeSample/index.ts +0 -3
- package/src/Markdown/CodeSample/styled.ts +0 -289
- 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;
|
|
@@ -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;
|
package/Markdown/index.d.ts
CHANGED
package/Markdown/index.js
CHANGED
|
@@ -14,7 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("../Markdown/CodeSample"), exports);
|
|
18
17
|
__exportStar(require("../Markdown/Tabs"), exports);
|
|
19
18
|
__exportStar(require("../Markdown/Admonition"), exports);
|
|
20
19
|
__exportStar(require("../Markdown/ContentWrapper"), exports);
|
|
@@ -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;
|
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
|
`;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
|
|
2
2
|
|
|
3
|
-
import { typography
|
|
3
|
+
import { typography } from '@theme/utils';
|
|
4
4
|
|
|
5
5
|
export const baseTable = css`
|
|
6
6
|
table {
|
|
@@ -68,19 +68,6 @@ export const baseTable = css`
|
|
|
68
68
|
}
|
|
69
69
|
`;
|
|
70
70
|
|
|
71
|
-
export function margins(theme: ITypography): FlattenSimpleInterpolation | string {
|
|
72
|
-
if (!theme) return '';
|
|
73
|
-
|
|
74
|
-
return css`
|
|
75
|
-
${{
|
|
76
|
-
marginTop: theme.marginTop || theme.marginVertical || '',
|
|
77
|
-
marginBottom: theme.marginBottom || theme.marginVertical || '',
|
|
78
|
-
marginLeft: theme.marginLeft || theme.marginHorizontal || '',
|
|
79
|
-
marginRight: theme.marginRight || theme.marginHorizontal || '',
|
|
80
|
-
}}
|
|
81
|
-
`;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
71
|
// TODO: Can users specify another className or we should hardcode it?
|
|
85
72
|
export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation {
|
|
86
73
|
return css`
|
|
@@ -220,8 +207,8 @@ export const StyledMarkdown = styled.main.attrs(() => ({
|
|
|
220
207
|
}
|
|
221
208
|
|
|
222
209
|
h1 {
|
|
223
|
-
${typography(
|
|
224
|
-
|
|
210
|
+
${typography('h1', 'h')};
|
|
211
|
+
margin: var(--h1-margin-top) var(--h1-margin-bottom);
|
|
225
212
|
${headingAnchor()};
|
|
226
213
|
|
|
227
214
|
&:first-child {
|
|
@@ -230,32 +217,32 @@ export const StyledMarkdown = styled.main.attrs(() => ({
|
|
|
230
217
|
}
|
|
231
218
|
|
|
232
219
|
h2 {
|
|
233
|
-
${typography(
|
|
234
|
-
|
|
220
|
+
${typography('h2', 'h')};
|
|
221
|
+
margin: var(--h2-margin-top) var(--h2-margin-bottom);
|
|
235
222
|
${headingAnchor()};
|
|
236
223
|
}
|
|
237
224
|
|
|
238
225
|
h3 {
|
|
239
|
-
${typography(
|
|
240
|
-
|
|
226
|
+
${typography('h3', 'h')};
|
|
227
|
+
margin: var(--h3-margin-top) var(--h3-margin-bottom);
|
|
241
228
|
${headingAnchor()};
|
|
242
229
|
}
|
|
243
230
|
|
|
244
231
|
h4 {
|
|
245
|
-
${typography(
|
|
246
|
-
|
|
232
|
+
${typography('h4', 'h')};
|
|
233
|
+
margin: var(--h4-margin-top) var(--h4-margin-bottom);
|
|
247
234
|
${headingAnchor()};
|
|
248
235
|
}
|
|
249
236
|
|
|
250
237
|
h5 {
|
|
251
|
-
${typography(
|
|
252
|
-
|
|
238
|
+
${typography('h5', 'h')};
|
|
239
|
+
margin: var(--h5-margin-top) var(--h5-margin-bottom);
|
|
253
240
|
${headingAnchor()};
|
|
254
241
|
}
|
|
255
242
|
|
|
256
243
|
h6 {
|
|
257
|
-
${typography(
|
|
258
|
-
|
|
244
|
+
${typography('h6', 'h')};
|
|
245
|
+
margin: var(--h6-margin-top) var(--h6-margin-bottom);
|
|
259
246
|
${headingAnchor()};
|
|
260
247
|
}
|
|
261
248
|
|
|
@@ -277,8 +264,7 @@ export const StyledMarkdown = styled.main.attrs(() => ({
|
|
|
277
264
|
padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);
|
|
278
265
|
border-left: 4px solid var(--global-border-color);
|
|
279
266
|
background-color: var(--bloquote-background-color);
|
|
280
|
-
|
|
281
|
-
${typography(typographyTokens.blockquote)};
|
|
267
|
+
color: var(--color-content);
|
|
282
268
|
|
|
283
269
|
& > p:first-child {
|
|
284
270
|
margin-top: 0;
|
package/src/Markdown/index.ts
CHANGED
|
@@ -3,7 +3,9 @@ import styled from 'styled-components';
|
|
|
3
3
|
export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
|
|
4
4
|
className: `operation-type ${props.type}`,
|
|
5
5
|
}))<{ type: string }>`
|
|
6
|
-
display: inline-
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
7
9
|
font-size: var(--http-badge-menu-font-size);
|
|
8
10
|
font-family: var(--http-badge-font-family);
|
|
9
11
|
font-weight: var(--http-badge-font-weight);
|
|
@@ -41,7 +43,8 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
|
|
|
41
43
|
background-color: var(--color-http-delete);
|
|
42
44
|
}
|
|
43
45
|
|
|
44
|
-
&.basic
|
|
46
|
+
&.basic,
|
|
47
|
+
&.schema {
|
|
45
48
|
background-color: var(--color-http-basic);
|
|
46
49
|
}
|
|
47
50
|
|
package/src/globalStyle.ts
CHANGED
|
@@ -557,6 +557,42 @@ const code = css`
|
|
|
557
557
|
--code-block-word-break: initial;
|
|
558
558
|
--code-block-preformatted-background-color: #323f4b; // @presenter Color
|
|
559
559
|
|
|
560
|
+
--code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color
|
|
561
|
+
|
|
562
|
+
--code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color
|
|
563
|
+
--code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
|
|
564
|
+
--code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
|
|
565
|
+
--code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
|
|
566
|
+
|
|
567
|
+
--code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
568
|
+
--code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
569
|
+
--code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
570
|
+
--code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
571
|
+
--code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
572
|
+
|
|
573
|
+
--code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color
|
|
574
|
+
|
|
575
|
+
--code-block-tokens-string-color: #fee39e; // @presenter Color
|
|
576
|
+
--code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
577
|
+
--code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
578
|
+
--code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
579
|
+
--code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
580
|
+
--code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
581
|
+
|
|
582
|
+
--code-block-tokens-operator-color: #f5b83d; // @presenter Color
|
|
583
|
+
--code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
|
|
584
|
+
--code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
|
|
585
|
+
--code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
|
|
586
|
+
|
|
587
|
+
--code-block-tokens-keyword-color: #ffdbf4; // @presenter Color
|
|
588
|
+
--code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
|
|
589
|
+
--code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
|
|
590
|
+
|
|
591
|
+
--code-block-tokens-regex-color: #e90; // @presenter Color
|
|
592
|
+
--code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
|
|
593
|
+
|
|
594
|
+
--code-block-tokens-deleted-color: red; // @presenter Color
|
|
595
|
+
|
|
560
596
|
// @tokens End
|
|
561
597
|
`;
|
|
562
598
|
|
package/src/ui/Typography.tsx
CHANGED
|
@@ -1,86 +1,7 @@
|
|
|
1
|
-
import styled
|
|
1
|
+
import styled from 'styled-components';
|
|
2
2
|
import { color, typography as typographySystem, ColorProps, TypographyProps } from 'styled-system';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
fontSize?: string;
|
|
6
|
-
fontWeight?: string | number;
|
|
7
|
-
fontFamily?: string;
|
|
8
|
-
lineHeight?: string;
|
|
9
|
-
color?: string;
|
|
10
|
-
transform?: string;
|
|
11
|
-
marginTop?: string;
|
|
12
|
-
marginRight?: string;
|
|
13
|
-
marginLeft?: string;
|
|
14
|
-
marginBottom?: string;
|
|
15
|
-
marginVertical?: string;
|
|
16
|
-
marginHorizontal?: string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export const typographyTokens = {
|
|
20
|
-
typography: {
|
|
21
|
-
fontSize: 'var(--font-size-base)',
|
|
22
|
-
fontFamily: 'var(--h-font-family)',
|
|
23
|
-
lineHeight: 'var(--line-height-base)',
|
|
24
|
-
},
|
|
25
|
-
heading1: {
|
|
26
|
-
fontSize: 'var(--h1-font-size)',
|
|
27
|
-
fontFamily: 'var(--h-font-family)',
|
|
28
|
-
fontWeight: 'var(--h1-font-weight, var(--h-font-weight))',
|
|
29
|
-
lineHeight: 'var(--h1-line-height)',
|
|
30
|
-
color: 'var(--h-color)',
|
|
31
|
-
marginTop: 'var(--h1-margin-top)',
|
|
32
|
-
marginBottom: 'var(--h1-margin-bottom)',
|
|
33
|
-
},
|
|
34
|
-
heading2: {
|
|
35
|
-
fontSize: 'var(--h2-font-size)',
|
|
36
|
-
fontFamily: 'var(--h-font-family)',
|
|
37
|
-
fontWeight: 'var(--h2-font-weight, var(--h-font-weight))',
|
|
38
|
-
lineHeight: 'var(--h2-line-height)',
|
|
39
|
-
color: 'var(--h-color)',
|
|
40
|
-
marginTop: 'var(--h2-margin-top)',
|
|
41
|
-
marginBottom: 'var(--h2-margin-bottom)',
|
|
42
|
-
},
|
|
43
|
-
heading3: {
|
|
44
|
-
fontSize: 'var(--h3-font-size)',
|
|
45
|
-
fontFamily: 'var(--h-font-family)',
|
|
46
|
-
fontWeight: 'var(--h3-font-weight, var(--h-font-weight))',
|
|
47
|
-
lineHeight: 'var(--h3-line-height)',
|
|
48
|
-
color: 'var(--h-color)',
|
|
49
|
-
marginTop: 'var(--h3-margin-top)',
|
|
50
|
-
marginBottom: 'var(--h3-margin-bottom)',
|
|
51
|
-
},
|
|
52
|
-
heading4: {},
|
|
53
|
-
heading5: {},
|
|
54
|
-
heading6: {},
|
|
55
|
-
blockquote: {
|
|
56
|
-
color: 'var(--color-content)',
|
|
57
|
-
},
|
|
58
|
-
alert: {
|
|
59
|
-
fontSize: 'var(--admonition-font-size)',
|
|
60
|
-
fontWeight: 'var(--admonition-font-weight)',
|
|
61
|
-
lineHeight: 'var(--admonition-line-height)',
|
|
62
|
-
marginTop: 'var(--admonition-margin-vertical)',
|
|
63
|
-
marginBottom: 'var(--admonition-margin-vertical)',
|
|
64
|
-
heading: {
|
|
65
|
-
fontSize: 'var(--admonition-heading-font-size)',
|
|
66
|
-
fontWeight: 'var(--admonition-heading-font-weight)',
|
|
67
|
-
lineHeight: 'var(--admonition-line-height)',
|
|
68
|
-
transform: 'var(--admonition-heading-transform)',
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
export function typography(theme?: ITypography): string | SimpleInterpolation {
|
|
74
|
-
if (!theme) return '';
|
|
75
|
-
return css`
|
|
76
|
-
font-size: ${theme.fontSize || ''};
|
|
77
|
-
font-weight: ${theme.fontWeight || ''};
|
|
78
|
-
font-family: ${theme.fontFamily || ''};
|
|
79
|
-
line-height: ${theme.lineHeight || ''};
|
|
80
|
-
color: ${theme.color || ''};
|
|
81
|
-
text-transform: ${theme.transform || ''};
|
|
82
|
-
`;
|
|
83
|
-
}
|
|
4
|
+
import { typography } from '@theme/utils';
|
|
84
5
|
|
|
85
6
|
type HeadingProps = TypographyProps &
|
|
86
7
|
ColorProps & {
|
|
@@ -97,7 +18,7 @@ export const Emphasis = styled.strong.attrs(() => ({
|
|
|
97
18
|
export const H1 = styled.h1.attrs(() => ({
|
|
98
19
|
'data-component-name': 'ui/Typography/H1',
|
|
99
20
|
}))<HeadingProps>`
|
|
100
|
-
${typography(
|
|
21
|
+
${typography('h1', 'h')};
|
|
101
22
|
margin: 1.35em 0 0.9em;
|
|
102
23
|
&& {
|
|
103
24
|
${({ mt }) => mt && `margin-top: ${mt};`}
|
|
@@ -107,10 +28,10 @@ export const H1 = styled.h1.attrs(() => ({
|
|
|
107
28
|
}
|
|
108
29
|
`;
|
|
109
30
|
|
|
110
|
-
export const H2 = styled.
|
|
31
|
+
export const H2 = styled.h2.attrs(() => ({
|
|
111
32
|
'data-component-name': 'ui/Typography/H2',
|
|
112
33
|
}))<HeadingProps>`
|
|
113
|
-
${typography(
|
|
34
|
+
${typography('h2', 'h')};
|
|
114
35
|
margin: 1.25em 0 0.8em;
|
|
115
36
|
&& {
|
|
116
37
|
${({ mt }) => mt && `margin-top: ${mt};`}
|
|
@@ -120,10 +41,10 @@ export const H2 = styled.h1.attrs(() => ({
|
|
|
120
41
|
}
|
|
121
42
|
`;
|
|
122
43
|
|
|
123
|
-
export const H3 = styled.
|
|
44
|
+
export const H3 = styled.h3.attrs(() => ({
|
|
124
45
|
'data-component-name': 'ui/Typography/H3',
|
|
125
46
|
}))<HeadingProps>`
|
|
126
|
-
${typography(
|
|
47
|
+
${typography('h3', 'h')};
|
|
127
48
|
margin: 1.25em 0 0.8em;
|
|
128
49
|
&& {
|
|
129
50
|
${({ mt }) => mt && `margin-top: ${mt};`}
|
|
@@ -152,7 +73,9 @@ export const Typography = styled.p.attrs(() => ({
|
|
|
152
73
|
mb?: string;
|
|
153
74
|
}
|
|
154
75
|
>`
|
|
155
|
-
|
|
76
|
+
font-size: var(--font-size-base);
|
|
77
|
+
font-family: var(--font-family-base);
|
|
78
|
+
line-height: var(--line-height-base);
|
|
156
79
|
color: var(--color-content);
|
|
157
80
|
${color};
|
|
158
81
|
margin-top: ${({ mt }) => mt || '1em'};
|