@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.
Files changed (36) hide show
  1. package/CodeBlock/CodeBlock.js +2 -1
  2. package/Markdown/CodeSample/index.d.ts +0 -1
  3. package/Markdown/CodeSample/index.js +0 -1
  4. package/Markdown/CodeSample/styled.d.ts +0 -1
  5. package/Markdown/CodeSample/styled.js +8 -79
  6. package/Markdown/StyledMarkdown.d.ts +0 -2
  7. package/Markdown/StyledMarkdown.js +5 -16
  8. package/OperationBadge/OperationBadge.js +1 -1
  9. package/PageNavigation/NextPageLink.js +1 -1
  10. package/PageNavigation/PreviousPageLink.js +1 -1
  11. package/Search/SearchItem.js +1 -1
  12. package/globalStyle.js +1 -1
  13. package/mocks/hooks/usePageData.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/src/CodeBlock/CodeBlock.ts +3 -42
  16. package/src/Markdown/CodeSample/index.ts +0 -1
  17. package/src/Markdown/CodeSample/styled.ts +18 -98
  18. package/src/Markdown/StyledMarkdown.tsx +14 -28
  19. package/src/OperationBadge/OperationBadge.ts +5 -2
  20. package/src/PageNavigation/NextPageLink.tsx +2 -2
  21. package/src/PageNavigation/PreviousPageLink.tsx +2 -2
  22. package/src/Search/SearchItem.tsx +1 -1
  23. package/src/globalStyle.ts +36 -0
  24. package/src/mocks/hooks/usePageData.ts +1 -1
  25. package/src/ui/Typography.tsx +10 -87
  26. package/src/utils/ClipboardService.ts +3 -86
  27. package/src/utils/theme-helpers.ts +46 -0
  28. package/ui/Typography.d.ts +2 -71
  29. package/ui/Typography.js +15 -93
  30. package/utils/ClipboardService.d.ts +1 -5
  31. package/utils/ClipboardService.js +2 -73
  32. package/utils/theme-helpers.d.ts +1 -0
  33. package/utils/theme-helpers.js +42 -2
  34. package/Markdown/CodeSample/types.d.ts +0 -9
  35. package/Markdown/CodeSample/types.js +0 -2
  36. 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
+ }
@@ -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<"h1", any, {
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<"h1", any, {
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
- if (k2 === undefined) k2 = k;
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 = exports.typography = exports.typographyTokens = void 0;
31
- var styled_components_1 = __importStar(require("styled-components"));
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
- exports.typographyTokens = {
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
- }); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: var(--font-weight-bold);\n"], ["\n font-weight: var(--font-weight-bold);\n"])));
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
- }); })(templateObject_3 || (templateObject_3 = __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"])), typography(exports.typographyTokens.heading1), function (_a) {
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.h1.attrs(function () { return ({
26
+ exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
105
27
  'data-component-name': 'ui/Typography/H2',
106
- }); })(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"])), typography(exports.typographyTokens.heading2), function (_a) {
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.h1.attrs(function () { return ({
35
+ exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
114
36
  'data-component-name': 'ui/Typography/H3',
115
- }); })(templateObject_5 || (templateObject_5 = __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"])), typography(exports.typographyTokens.heading3), function (_a) {
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(templateObject_6 || (templateObject_6 = __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"])));
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
- }); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n color: var(--color-content);\n ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n ", "\n"], ["\n ", ";\n color: var(--color-content);\n ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n ", "\n"])), typography(exports.typographyTokens.typography), styled_system_1.color, function (_a) {
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
- }); })(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
137
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
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 selectElement(element: HTMLDivElement | null): void;
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 (typeof document !== 'undefined' &&
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
- var textArea = document.createElement('textarea');
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
  }());
@@ -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;
@@ -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
- var templateObject_1;
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,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -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
- };