@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
|
@@ -1,6 +1,36 @@
|
|
|
1
1
|
import type { FlattenSimpleInterpolation } from 'styled-components';
|
|
2
2
|
import { css } from 'styled-components';
|
|
3
3
|
|
|
4
|
+
enum Token {
|
|
5
|
+
Comment = 'comment',
|
|
6
|
+
Prolog = 'prolog',
|
|
7
|
+
Doctype = 'doctype',
|
|
8
|
+
Cdata = 'cdata',
|
|
9
|
+
Punctuation = 'punctuation',
|
|
10
|
+
property = 'property',
|
|
11
|
+
Tag = 'tag',
|
|
12
|
+
Number = 'number',
|
|
13
|
+
Constant = 'constant',
|
|
14
|
+
Symbol = 'symbol',
|
|
15
|
+
Boolean = 'boolean',
|
|
16
|
+
Selector = 'selector',
|
|
17
|
+
String = 'string',
|
|
18
|
+
Char = 'char',
|
|
19
|
+
Builtin = 'builtin',
|
|
20
|
+
Inserted = 'inserted',
|
|
21
|
+
Operator = 'operator',
|
|
22
|
+
Entity = 'entity',
|
|
23
|
+
Url = 'url',
|
|
24
|
+
Variable = 'variable',
|
|
25
|
+
Atrule = 'atrule',
|
|
26
|
+
Keyword = 'keyword',
|
|
27
|
+
Regex = 'regex',
|
|
28
|
+
Important = 'important',
|
|
29
|
+
Bold = 'bold',
|
|
30
|
+
Italic = 'italic',
|
|
31
|
+
Deleted = 'deleted',
|
|
32
|
+
}
|
|
33
|
+
|
|
4
34
|
const typographyProperties = Object.entries({
|
|
5
35
|
fontSize: 'font-size',
|
|
6
36
|
fontWeight: 'font-weight',
|
|
@@ -32,3 +62,19 @@ export function typography(
|
|
|
32
62
|
${getTypographyCssRulesByComponentName(componentName, fallbackName)}
|
|
33
63
|
`;
|
|
34
64
|
}
|
|
65
|
+
|
|
66
|
+
export function generateCodeBlockTokens(): FlattenSimpleInterpolation | string {
|
|
67
|
+
let res = '';
|
|
68
|
+
|
|
69
|
+
for (const token of Object.values(Token)) {
|
|
70
|
+
const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
|
|
71
|
+
res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
return css`
|
|
75
|
+
pre& {
|
|
76
|
+
color: var(--code-block-tokens-default-color);
|
|
77
|
+
}
|
|
78
|
+
${res}
|
|
79
|
+
`;
|
|
80
|
+
}
|
package/ui/Typography.d.ts
CHANGED
|
@@ -1,73 +1,4 @@
|
|
|
1
|
-
import { SimpleInterpolation } from 'styled-components';
|
|
2
1
|
import { ColorProps, TypographyProps } from 'styled-system';
|
|
3
|
-
export interface ITypography {
|
|
4
|
-
fontSize?: string;
|
|
5
|
-
fontWeight?: string | number;
|
|
6
|
-
fontFamily?: string;
|
|
7
|
-
lineHeight?: string;
|
|
8
|
-
color?: string;
|
|
9
|
-
transform?: string;
|
|
10
|
-
marginTop?: string;
|
|
11
|
-
marginRight?: string;
|
|
12
|
-
marginLeft?: string;
|
|
13
|
-
marginBottom?: string;
|
|
14
|
-
marginVertical?: string;
|
|
15
|
-
marginHorizontal?: string;
|
|
16
|
-
}
|
|
17
|
-
export declare const typographyTokens: {
|
|
18
|
-
typography: {
|
|
19
|
-
fontSize: string;
|
|
20
|
-
fontFamily: string;
|
|
21
|
-
lineHeight: string;
|
|
22
|
-
};
|
|
23
|
-
heading1: {
|
|
24
|
-
fontSize: string;
|
|
25
|
-
fontFamily: string;
|
|
26
|
-
fontWeight: string;
|
|
27
|
-
lineHeight: string;
|
|
28
|
-
color: string;
|
|
29
|
-
marginTop: string;
|
|
30
|
-
marginBottom: string;
|
|
31
|
-
};
|
|
32
|
-
heading2: {
|
|
33
|
-
fontSize: string;
|
|
34
|
-
fontFamily: string;
|
|
35
|
-
fontWeight: string;
|
|
36
|
-
lineHeight: string;
|
|
37
|
-
color: string;
|
|
38
|
-
marginTop: string;
|
|
39
|
-
marginBottom: string;
|
|
40
|
-
};
|
|
41
|
-
heading3: {
|
|
42
|
-
fontSize: string;
|
|
43
|
-
fontFamily: string;
|
|
44
|
-
fontWeight: string;
|
|
45
|
-
lineHeight: string;
|
|
46
|
-
color: string;
|
|
47
|
-
marginTop: string;
|
|
48
|
-
marginBottom: string;
|
|
49
|
-
};
|
|
50
|
-
heading4: {};
|
|
51
|
-
heading5: {};
|
|
52
|
-
heading6: {};
|
|
53
|
-
blockquote: {
|
|
54
|
-
color: string;
|
|
55
|
-
};
|
|
56
|
-
alert: {
|
|
57
|
-
fontSize: string;
|
|
58
|
-
fontWeight: string;
|
|
59
|
-
lineHeight: string;
|
|
60
|
-
marginTop: string;
|
|
61
|
-
marginBottom: string;
|
|
62
|
-
heading: {
|
|
63
|
-
fontSize: string;
|
|
64
|
-
fontWeight: string;
|
|
65
|
-
lineHeight: string;
|
|
66
|
-
transform: string;
|
|
67
|
-
};
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
|
-
export declare function typography(theme?: ITypography): string | SimpleInterpolation;
|
|
71
2
|
export declare const Emphasis: import("styled-components").StyledComponent<"strong", any, {
|
|
72
3
|
'data-component-name': string;
|
|
73
4
|
}, "data-component-name">;
|
|
@@ -77,13 +8,13 @@ export declare const H1: import("styled-components").StyledComponent<"h1", any,
|
|
|
77
8
|
mt?: string | undefined;
|
|
78
9
|
mb?: string | undefined;
|
|
79
10
|
}, "data-component-name">;
|
|
80
|
-
export declare const H2: import("styled-components").StyledComponent<"
|
|
11
|
+
export declare const H2: import("styled-components").StyledComponent<"h2", any, {
|
|
81
12
|
'data-component-name': string;
|
|
82
13
|
} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
|
|
83
14
|
mt?: string | undefined;
|
|
84
15
|
mb?: string | undefined;
|
|
85
16
|
}, "data-component-name">;
|
|
86
|
-
export declare const H3: import("styled-components").StyledComponent<"
|
|
17
|
+
export declare const H3: import("styled-components").StyledComponent<"h3", any, {
|
|
87
18
|
'data-component-name': string;
|
|
88
19
|
} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
|
|
89
20
|
mt?: string | undefined;
|
package/ui/Typography.js
CHANGED
|
@@ -3,126 +3,48 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
-
if (mod && mod.__esModule) return mod;
|
|
24
|
-
var result = {};
|
|
25
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
-
__setModuleDefault(result, mod);
|
|
27
|
-
return result;
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
8
|
};
|
|
29
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis =
|
|
31
|
-
var styled_components_1 =
|
|
10
|
+
exports.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
32
12
|
var styled_system_1 = require("styled-system");
|
|
33
|
-
|
|
34
|
-
typography: {
|
|
35
|
-
fontSize: 'var(--font-size-base)',
|
|
36
|
-
fontFamily: 'var(--h-font-family)',
|
|
37
|
-
lineHeight: 'var(--line-height-base)',
|
|
38
|
-
},
|
|
39
|
-
heading1: {
|
|
40
|
-
fontSize: 'var(--h1-font-size)',
|
|
41
|
-
fontFamily: 'var(--h-font-family)',
|
|
42
|
-
fontWeight: 'var(--h1-font-weight, var(--h-font-weight))',
|
|
43
|
-
lineHeight: 'var(--h1-line-height)',
|
|
44
|
-
color: 'var(--h-color)',
|
|
45
|
-
marginTop: 'var(--h1-margin-top)',
|
|
46
|
-
marginBottom: 'var(--h1-margin-bottom)',
|
|
47
|
-
},
|
|
48
|
-
heading2: {
|
|
49
|
-
fontSize: 'var(--h2-font-size)',
|
|
50
|
-
fontFamily: 'var(--h-font-family)',
|
|
51
|
-
fontWeight: 'var(--h2-font-weight, var(--h-font-weight))',
|
|
52
|
-
lineHeight: 'var(--h2-line-height)',
|
|
53
|
-
color: 'var(--h-color)',
|
|
54
|
-
marginTop: 'var(--h2-margin-top)',
|
|
55
|
-
marginBottom: 'var(--h2-margin-bottom)',
|
|
56
|
-
},
|
|
57
|
-
heading3: {
|
|
58
|
-
fontSize: 'var(--h3-font-size)',
|
|
59
|
-
fontFamily: 'var(--h-font-family)',
|
|
60
|
-
fontWeight: 'var(--h3-font-weight, var(--h-font-weight))',
|
|
61
|
-
lineHeight: 'var(--h3-line-height)',
|
|
62
|
-
color: 'var(--h-color)',
|
|
63
|
-
marginTop: 'var(--h3-margin-top)',
|
|
64
|
-
marginBottom: 'var(--h3-margin-bottom)',
|
|
65
|
-
},
|
|
66
|
-
heading4: {},
|
|
67
|
-
heading5: {},
|
|
68
|
-
heading6: {},
|
|
69
|
-
blockquote: {
|
|
70
|
-
color: 'var(--color-content)',
|
|
71
|
-
},
|
|
72
|
-
alert: {
|
|
73
|
-
fontSize: 'var(--admonition-font-size)',
|
|
74
|
-
fontWeight: 'var(--admonition-font-weight)',
|
|
75
|
-
lineHeight: 'var(--admonition-line-height)',
|
|
76
|
-
marginTop: 'var(--admonition-margin-vertical)',
|
|
77
|
-
marginBottom: 'var(--admonition-margin-vertical)',
|
|
78
|
-
heading: {
|
|
79
|
-
fontSize: 'var(--admonition-heading-font-size)',
|
|
80
|
-
fontWeight: 'var(--admonition-heading-font-weight)',
|
|
81
|
-
lineHeight: 'var(--admonition-line-height)',
|
|
82
|
-
transform: 'var(--admonition-heading-transform)',
|
|
83
|
-
},
|
|
84
|
-
},
|
|
85
|
-
};
|
|
86
|
-
function typography(theme) {
|
|
87
|
-
if (!theme)
|
|
88
|
-
return '';
|
|
89
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-transform: ", ";\n "], ["\n font-size: ", ";\n font-weight: ", ";\n font-family: ", ";\n line-height: ", ";\n color: ", ";\n text-transform: ", ";\n "])), theme.fontSize || '', theme.fontWeight || '', theme.fontFamily || '', theme.lineHeight || '', theme.color || '', theme.transform || '');
|
|
90
|
-
}
|
|
91
|
-
exports.typography = typography;
|
|
13
|
+
var utils_1 = require("../utils");
|
|
92
14
|
exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
|
|
93
15
|
'data-component-name': 'ui/Typography/Emphasis',
|
|
94
|
-
}); })(
|
|
16
|
+
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-weight: var(--font-weight-bold);\n"], ["\n font-weight: var(--font-weight-bold);\n"])));
|
|
95
17
|
exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
|
|
96
18
|
'data-component-name': 'ui/Typography/H1',
|
|
97
|
-
}); })(
|
|
19
|
+
}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n margin: 1.35em 0 0.9em;\n && {\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n ", ";\n margin: 1.35em 0 0.9em;\n && {\n ", "\n ", "\n ", "\n ", "\n }\n"])), (0, utils_1.typography)('h1', 'h'), function (_a) {
|
|
98
20
|
var mt = _a.mt;
|
|
99
21
|
return mt && "margin-top: ".concat(mt, ";");
|
|
100
22
|
}, function (_a) {
|
|
101
23
|
var mb = _a.mb;
|
|
102
24
|
return mb && "margin-bottom: ".concat(mb, ";");
|
|
103
25
|
}, styled_system_1.color, styled_system_1.typography);
|
|
104
|
-
exports.H2 = styled_components_1.default.
|
|
26
|
+
exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
|
|
105
27
|
'data-component-name': 'ui/Typography/H2',
|
|
106
|
-
}); })(
|
|
28
|
+
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n margin: 1.25em 0 0.8em;\n && {\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n ", ";\n margin: 1.25em 0 0.8em;\n && {\n ", "\n ", "\n ", "\n ", "\n }\n"])), (0, utils_1.typography)('h2', 'h'), function (_a) {
|
|
107
29
|
var mt = _a.mt;
|
|
108
30
|
return mt && "margin-top: ".concat(mt, ";");
|
|
109
31
|
}, function (_a) {
|
|
110
32
|
var mb = _a.mb;
|
|
111
33
|
return mb && "margin-bottom: ".concat(mb, ";");
|
|
112
34
|
}, styled_system_1.color, styled_system_1.typography);
|
|
113
|
-
exports.H3 = styled_components_1.default.
|
|
35
|
+
exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
|
|
114
36
|
'data-component-name': 'ui/Typography/H3',
|
|
115
|
-
}); })(
|
|
37
|
+
}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n margin: 1.25em 0 0.8em;\n && {\n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n ", ";\n margin: 1.25em 0 0.8em;\n && {\n ", "\n ", "\n ", "\n ", "\n }\n"])), (0, utils_1.typography)('h3', 'h'), function (_a) {
|
|
116
38
|
var mt = _a.mt;
|
|
117
39
|
return mt && "margin-top: ".concat(mt, ";");
|
|
118
40
|
}, function (_a) {
|
|
119
41
|
var mb = _a.mb;
|
|
120
42
|
return mb && "margin-bottom: ".concat(mb, ";");
|
|
121
43
|
}, styled_system_1.color, styled_system_1.typography);
|
|
122
|
-
exports.SectionHeader = styled_components_1.default.h2(
|
|
44
|
+
exports.SectionHeader = styled_components_1.default.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: var(--h-color);\n font-size: 1.75em;\n font-weight: var(--font-weight-regular);\n text-align: center;\n margin: 2.65em 0;\n padding: 0 20px;\n font-family: var(--h-font-family);\n"], ["\n color: var(--h-color);\n font-size: 1.75em;\n font-weight: var(--font-weight-regular);\n text-align: center;\n margin: 2.65em 0;\n padding: 0 20px;\n font-family: var(--h-font-family);\n"])));
|
|
123
45
|
exports.Typography = styled_components_1.default.p.attrs(function () { return ({
|
|
124
46
|
'data-component-name': 'ui/Typography/Typography',
|
|
125
|
-
}); })(
|
|
47
|
+
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n color: var(--color-content);\n ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n ", "\n"], ["\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n color: var(--color-content);\n ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n ", "\n"])), styled_system_1.color, function (_a) {
|
|
126
48
|
var mt = _a.mt;
|
|
127
49
|
return mt || '1em';
|
|
128
50
|
}, function (_a) {
|
|
@@ -133,5 +55,5 @@ exports.CompactTypography = (0, styled_components_1.default)(exports.Typography)
|
|
|
133
55
|
mt: '0em',
|
|
134
56
|
mb: '0em',
|
|
135
57
|
'data-component-name': 'ui/Typography/CompactTypography',
|
|
136
|
-
}); })(
|
|
137
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
58
|
+
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
export declare class ClipboardService {
|
|
2
2
|
static isSupported(): boolean;
|
|
3
|
-
static
|
|
4
|
-
static deselect(): void;
|
|
5
|
-
static copySelected(): boolean;
|
|
6
|
-
static copyElement(element: HTMLDivElement | null): boolean;
|
|
7
|
-
static copyCustom(text: string): boolean;
|
|
3
|
+
static copyCustom(text: string): Promise<void>;
|
|
8
4
|
}
|
|
@@ -5,81 +5,10 @@ var ClipboardService = /** @class */ (function () {
|
|
|
5
5
|
function ClipboardService() {
|
|
6
6
|
}
|
|
7
7
|
ClipboardService.isSupported = function () {
|
|
8
|
-
return
|
|
9
|
-
!!document.queryCommandSupported &&
|
|
10
|
-
document.queryCommandSupported('copy'));
|
|
11
|
-
};
|
|
12
|
-
ClipboardService.selectElement = function (element) {
|
|
13
|
-
if (!element) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
var range;
|
|
17
|
-
var selection;
|
|
18
|
-
if (document.body.createTextRange) {
|
|
19
|
-
range = document.body.createTextRange();
|
|
20
|
-
range.moveToElementText(element);
|
|
21
|
-
range.select();
|
|
22
|
-
}
|
|
23
|
-
else if (document.createRange && window.getSelection) {
|
|
24
|
-
selection = window.getSelection();
|
|
25
|
-
range = document.createRange();
|
|
26
|
-
range.selectNodeContents(element);
|
|
27
|
-
selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
|
|
28
|
-
selection === null || selection === void 0 ? void 0 : selection.addRange(range);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
ClipboardService.deselect = function () {
|
|
32
|
-
if (document.selection) {
|
|
33
|
-
document.selection.empty();
|
|
34
|
-
}
|
|
35
|
-
else if (window.getSelection) {
|
|
36
|
-
var selection = window.getSelection();
|
|
37
|
-
if (selection) {
|
|
38
|
-
selection.removeAllRanges();
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
ClipboardService.copySelected = function () {
|
|
43
|
-
var result;
|
|
44
|
-
try {
|
|
45
|
-
result = document.execCommand('copy');
|
|
46
|
-
}
|
|
47
|
-
catch (err) {
|
|
48
|
-
result = false;
|
|
49
|
-
}
|
|
50
|
-
return result;
|
|
51
|
-
};
|
|
52
|
-
ClipboardService.copyElement = function (element) {
|
|
53
|
-
ClipboardService.selectElement(element);
|
|
54
|
-
var res = ClipboardService.copySelected();
|
|
55
|
-
if (res) {
|
|
56
|
-
ClipboardService.deselect();
|
|
57
|
-
}
|
|
58
|
-
return res;
|
|
8
|
+
return typeof navigator !== 'undefined' && !!navigator.clipboard;
|
|
59
9
|
};
|
|
60
10
|
ClipboardService.copyCustom = function (text) {
|
|
61
|
-
|
|
62
|
-
textArea.style.position = 'fixed';
|
|
63
|
-
textArea.style.top = '0';
|
|
64
|
-
textArea.style.left = '0';
|
|
65
|
-
// Ensure it has a small width and height. Setting to 1px / 1em
|
|
66
|
-
// doesn't work as this gives a negative w/h on some browsers.
|
|
67
|
-
textArea.style.width = '2em';
|
|
68
|
-
textArea.style.height = '2em';
|
|
69
|
-
// We don't need padding, reducing the size if it does flash render.
|
|
70
|
-
textArea.style.padding = '0';
|
|
71
|
-
// Clean up any borders.
|
|
72
|
-
textArea.style.border = 'none';
|
|
73
|
-
textArea.style.outline = 'none';
|
|
74
|
-
textArea.style.boxShadow = 'none';
|
|
75
|
-
// Avoid flash of white box if rendered for any reason.
|
|
76
|
-
textArea.style.background = 'transparent';
|
|
77
|
-
textArea.value = text;
|
|
78
|
-
document.body.appendChild(textArea);
|
|
79
|
-
textArea.select();
|
|
80
|
-
var res = ClipboardService.copySelected();
|
|
81
|
-
document.body.removeChild(textArea);
|
|
82
|
-
return res;
|
|
11
|
+
return navigator.clipboard.writeText(text);
|
|
83
12
|
};
|
|
84
13
|
return ClipboardService;
|
|
85
14
|
}());
|
package/utils/theme-helpers.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import type { FlattenSimpleInterpolation } from 'styled-components';
|
|
2
2
|
export declare function getTypographyCssRulesByComponentName(componentName: string, fallbackName?: string): Record<string, string>;
|
|
3
3
|
export declare function typography(componentName: string, fallbackName?: string): FlattenSimpleInterpolation;
|
|
4
|
+
export declare function generateCodeBlockTokens(): FlattenSimpleInterpolation | string;
|
package/utils/theme-helpers.js
CHANGED
|
@@ -4,8 +4,38 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
|
|
7
|
+
exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
|
+
var Token;
|
|
10
|
+
(function (Token) {
|
|
11
|
+
Token["Comment"] = "comment";
|
|
12
|
+
Token["Prolog"] = "prolog";
|
|
13
|
+
Token["Doctype"] = "doctype";
|
|
14
|
+
Token["Cdata"] = "cdata";
|
|
15
|
+
Token["Punctuation"] = "punctuation";
|
|
16
|
+
Token["property"] = "property";
|
|
17
|
+
Token["Tag"] = "tag";
|
|
18
|
+
Token["Number"] = "number";
|
|
19
|
+
Token["Constant"] = "constant";
|
|
20
|
+
Token["Symbol"] = "symbol";
|
|
21
|
+
Token["Boolean"] = "boolean";
|
|
22
|
+
Token["Selector"] = "selector";
|
|
23
|
+
Token["String"] = "string";
|
|
24
|
+
Token["Char"] = "char";
|
|
25
|
+
Token["Builtin"] = "builtin";
|
|
26
|
+
Token["Inserted"] = "inserted";
|
|
27
|
+
Token["Operator"] = "operator";
|
|
28
|
+
Token["Entity"] = "entity";
|
|
29
|
+
Token["Url"] = "url";
|
|
30
|
+
Token["Variable"] = "variable";
|
|
31
|
+
Token["Atrule"] = "atrule";
|
|
32
|
+
Token["Keyword"] = "keyword";
|
|
33
|
+
Token["Regex"] = "regex";
|
|
34
|
+
Token["Important"] = "important";
|
|
35
|
+
Token["Bold"] = "bold";
|
|
36
|
+
Token["Italic"] = "italic";
|
|
37
|
+
Token["Deleted"] = "deleted";
|
|
38
|
+
})(Token || (Token = {}));
|
|
9
39
|
var typographyProperties = Object.entries({
|
|
10
40
|
fontSize: 'font-size',
|
|
11
41
|
fontWeight: 'font-weight',
|
|
@@ -29,4 +59,14 @@ function typography(componentName, fallbackName) {
|
|
|
29
59
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), getTypographyCssRulesByComponentName(componentName, fallbackName));
|
|
30
60
|
}
|
|
31
61
|
exports.typography = typography;
|
|
32
|
-
|
|
62
|
+
function generateCodeBlockTokens() {
|
|
63
|
+
var res = '';
|
|
64
|
+
for (var _i = 0, _a = Object.values(Token); _i < _a.length; _i++) {
|
|
65
|
+
var token = _a[_i];
|
|
66
|
+
var cssTokenColorVariableName = "--code-block-tokens-".concat(token, "-color");
|
|
67
|
+
res += ".token.".concat(token, " { color: var(").concat(cssTokenColorVariableName, ")}; }\n");
|
|
68
|
+
}
|
|
69
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pre& {\n color: var(--code-block-tokens-default-color);\n }\n ", "\n "], ["\n pre& {\n color: var(--code-block-tokens-default-color);\n }\n ", "\n "])), res);
|
|
70
|
+
}
|
|
71
|
+
exports.generateCodeBlockTokens = generateCodeBlockTokens;
|
|
72
|
+
var templateObject_1, templateObject_2;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ITypography } from '../../ui/Typography';
|
|
2
|
-
export declare type Token = 'comment' | 'prolog' | 'doctype' | 'cdata' | 'punctuation' | 'property' | 'tag' | 'number' | 'constant' | 'symbol' | 'boolean' | 'selector' | 'string' | 'char' | 'builtin' | 'inserted' | 'operator' | 'entity' | 'url' | 'variable' | 'atrule' | 'keyword' | 'regex' | 'important' | 'important' | 'bold' | 'italic' | 'entity' | 'deleted';
|
|
3
|
-
export declare type Tokens = {
|
|
4
|
-
[P in Token]?: {
|
|
5
|
-
color: string;
|
|
6
|
-
};
|
|
7
|
-
} & {
|
|
8
|
-
default?: ITypography;
|
|
9
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ITypography } from '@theme/ui/Typography';
|
|
2
|
-
|
|
3
|
-
export type Token =
|
|
4
|
-
| 'comment'
|
|
5
|
-
| 'prolog'
|
|
6
|
-
| 'doctype'
|
|
7
|
-
| 'cdata'
|
|
8
|
-
| 'punctuation'
|
|
9
|
-
| 'property'
|
|
10
|
-
| 'tag'
|
|
11
|
-
| 'number'
|
|
12
|
-
| 'constant'
|
|
13
|
-
| 'symbol'
|
|
14
|
-
| 'boolean'
|
|
15
|
-
| 'selector'
|
|
16
|
-
| 'string'
|
|
17
|
-
| 'char'
|
|
18
|
-
| 'builtin'
|
|
19
|
-
| 'inserted'
|
|
20
|
-
| 'operator'
|
|
21
|
-
| 'entity'
|
|
22
|
-
| 'url'
|
|
23
|
-
| 'variable'
|
|
24
|
-
| 'atrule'
|
|
25
|
-
| 'keyword'
|
|
26
|
-
| 'regex'
|
|
27
|
-
| 'important'
|
|
28
|
-
| 'important'
|
|
29
|
-
| 'bold'
|
|
30
|
-
| 'italic'
|
|
31
|
-
| 'entity'
|
|
32
|
-
| 'deleted';
|
|
33
|
-
|
|
34
|
-
export type Tokens = {
|
|
35
|
-
[P in Token]?: {
|
|
36
|
-
color: string;
|
|
37
|
-
};
|
|
38
|
-
} & {
|
|
39
|
-
default?: ITypography;
|
|
40
|
-
};
|