@redocly/theme 0.33.0 → 0.33.2

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 (9) hide show
  1. package/lib/components/CodeBlock/CodeBlockControls.js +2 -1
  2. package/lib/components/CodeBlock/styledVariables.js +2 -0
  3. package/lib/utils/highlight.js +27 -4
  4. package/lib/utils/theme-helpers.js +2 -0
  5. package/package.json +1 -1
  6. package/src/components/CodeBlock/CodeBlockControls.tsx +2 -1
  7. package/src/components/CodeBlock/styledVariables.ts +2 -0
  8. package/src/utils/highlight.ts +33 -4
  9. package/src/utils/theme-helpers.ts +2 -0
package/lib/components/CodeBlock/CodeBlockControls.js CHANGED
@@ -47,7 +47,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
47
47
  exports.CodeBlockControls = CodeBlockControls;
48
48
  const ContainerWraper = styled_components_1.default.div `
49
49
  display: flex;
50
- justify-content: space-between;
50
+ justify-content: right;
51
51
  min-height: 30px;
52
52
  padding: var(--code-block-controls-padding);
53
53
  background-color: var(--code-block-controls-background-color);
@@ -61,6 +61,7 @@ const Title = styled_components_1.default.span `
61
61
  display: flex;
62
62
  align-items: center;
63
63
  color: var(--code-block-controls-text-color);
64
+ width: 100%;
64
65
  `;
65
66
  const ControlsWrapper = styled_components_1.default.div `
66
67
  display: flex;
package/lib/components/CodeBlock/styledVariables.js CHANGED
@@ -86,6 +86,8 @@ exports.code = (0, styled_components_1.css) `
86
86
  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
87
87
  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
88
88
  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
89
+ --code-block-tokens-class-name-color: var(--color-gold-7); // @presenter Color
90
+ --code-block-tokens-function-color: var(--color-gold-7); // @presenter Color
89
91
 
90
92
  // @tokens End
91
93
  `;
package/lib/utils/highlight.js CHANGED
@@ -62,6 +62,32 @@ Prism.languages.insertBefore('javascript', 'punctuation', {
62
62
  lookbehind: true,
63
63
  },
64
64
  }, undefined);
65
+ Prism.languages.markdoc = Object.assign(Object.assign({}, Prism.languages.markdown), { tag: {
66
+ pattern: /{%(.|\n)*?%}/i,
67
+ inside: {
68
+ keyword: {
69
+ pattern: /^({%\s*\/?)(\w*|-)*\b/i,
70
+ lookbehind: true,
71
+ },
72
+ id: /#(\w|-)*\b/,
73
+ string: /".*?"/,
74
+ equals: /=/,
75
+ number: /\b\d+\b/i,
76
+ variable: {
77
+ pattern: /\$[\w.]+/i,
78
+ inside: {
79
+ punctuation: /\./i,
80
+ },
81
+ },
82
+ function: /\b\w+(?=\()/,
83
+ punctuation: /({%|\/?%})/i,
84
+ boolean: /false|true/,
85
+ },
86
+ }, variable: {
87
+ pattern: /\$\w+/i,
88
+ }, function: {
89
+ pattern: /\b\w+(?=\()/i,
90
+ } });
65
91
  /**
66
92
  * map language names to Prism.js names
67
93
  */
@@ -88,10 +114,7 @@ exports.mapLang = mapLang;
88
114
  */
89
115
  function highlight(source, lang = DEFAULT_LANG) {
90
116
  lang = lang.toLowerCase();
91
- let grammar = Prism.languages[lang];
92
- if (!grammar) {
93
- grammar = Prism.languages[mapLang(lang)];
94
- }
117
+ const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
95
118
  return Prism.highlight(source.toString(), grammar, lang);
96
119
  }
97
120
  exports.highlight = highlight;
package/lib/utils/theme-helpers.js CHANGED
@@ -33,6 +33,8 @@ var Token;
33
33
  Token["Bold"] = "bold";
34
34
  Token["Italic"] = "italic";
35
35
  Token["Deleted"] = "deleted";
36
+ Token["ClassName"] = "class-name";
37
+ Token["Function"] = "function";
36
38
  })(Token || (Token = {}));
37
39
  const typographyProperties = Object.entries({
38
40
  fontSize: 'font-size',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.33.0",
3
+ "version": "0.33.2",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/CodeBlock/CodeBlockControls.tsx CHANGED
@@ -193,7 +193,7 @@ export function CodeBlockControls({
193
193
 
194
194
  const ContainerWraper = styled.div`
195
195
  display: flex;
196
- justify-content: space-between;
196
+ justify-content: right;
197
197
  min-height: 30px;
198
198
  padding: var(--code-block-controls-padding);
199
199
  background-color: var(--code-block-controls-background-color);
@@ -208,6 +208,7 @@ const Title = styled.span`
208
208
  display: flex;
209
209
  align-items: center;
210
210
  color: var(--code-block-controls-text-color);
211
+ width: 100%;
211
212
  `;
212
213
 
213
214
  const ControlsWrapper = styled.div`
package/src/components/CodeBlock/styledVariables.ts CHANGED
@@ -84,6 +84,8 @@ export const code = css`
84
84
  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
85
85
  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
86
86
  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
87
+ --code-block-tokens-class-name-color: var(--color-gold-7); // @presenter Color
88
+ --code-block-tokens-function-color: var(--color-gold-7); // @presenter Color
87
89
 
88
90
  // @tokens End
89
91
  `;
package/src/utils/highlight.ts CHANGED
@@ -50,6 +50,38 @@ Prism.languages.insertBefore(
50
50
  undefined,
51
51
  );
52
52
 
53
+ Prism.languages.markdoc = {
54
+ ...Prism.languages.markdown,
55
+ tag: {
56
+ pattern: /{%(.|\n)*?%}/i,
57
+ inside: {
58
+ keyword: {
59
+ pattern: /^({%\s*\/?)(\w*|-)*\b/i,
60
+ lookbehind: true,
61
+ },
62
+ id: /#(\w|-)*\b/,
63
+ string: /".*?"/,
64
+ equals: /=/,
65
+ number: /\b\d+\b/i,
66
+ variable: {
67
+ pattern: /\$[\w.]+/i,
68
+ inside: {
69
+ punctuation: /\./i,
70
+ },
71
+ },
72
+ function: /\b\w+(?=\()/,
73
+ punctuation: /({%|\/?%})/i,
74
+ boolean: /false|true/,
75
+ },
76
+ },
77
+ variable: {
78
+ pattern: /\$\w+/i,
79
+ },
80
+ function: {
81
+ pattern: /\b\w+(?=\()/i,
82
+ },
83
+ };
84
+
53
85
  /**
54
86
  * map language names to Prism.js names
55
87
  */
@@ -78,10 +110,7 @@ export function mapLang(lang: string): string {
78
110
  */
79
111
  export function highlight(source: string | number | boolean, lang: string = DEFAULT_LANG): string {
80
112
  lang = lang.toLowerCase();
81
- let grammar = Prism.languages[lang];
82
- if (!grammar) {
83
- grammar = Prism.languages[mapLang(lang)];
84
- }
113
+ const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
85
114
  return Prism.highlight(source.toString(), grammar, lang);
86
115
  }
87
116
 
package/src/utils/theme-helpers.ts CHANGED
@@ -32,6 +32,8 @@ enum Token {
32
32
  Bold = 'bold',
33
33
  Italic = 'italic',
34
34
  Deleted = 'deleted',
35
+ ClassName = 'class-name',
36
+ Function = 'function',
35
37
  }
36
38
 
37
39
  const typographyProperties = Object.entries({