@redocly/theme 0.32.3 → 0.33.1

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 (13) hide show
  1. package/lib/components/CodeBlock/styledVariables.js +2 -0
  2. package/lib/components/Markdown/MarkdownWrapper.js +6 -0
  3. package/lib/globalStyle.js +6 -0
  4. package/lib/ui/darkColors.js +26 -0
  5. package/lib/utils/highlight.js +27 -4
  6. package/lib/utils/theme-helpers.js +2 -0
  7. package/package.json +1 -1
  8. package/src/components/CodeBlock/styledVariables.ts +2 -0
  9. package/src/components/Markdown/MarkdownWrapper.tsx +6 -0
  10. package/src/globalStyle.ts +6 -0
  11. package/src/ui/darkColors.tsx +26 -0
  12. package/src/utils/highlight.ts +33 -4
  13. package/src/utils/theme-helpers.ts +2 -0
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/components/Markdown/MarkdownWrapper.js CHANGED
@@ -290,26 +290,32 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
290
290
 
291
291
  h1.md code {
292
292
  font-size: var(--h1-font-size);
293
+ line-height: var(--h1-code-line-height);
293
294
  }
294
295
 
295
296
  h2.md code {
296
297
  font-size: var(--h2-font-size);
298
+ line-height: var(--h2-code-line-height);
297
299
  }
298
300
 
299
301
  h3.md code {
300
302
  font-size: var(--h3-font-size);
303
+ line-height: var(--h3-code-line-height);
301
304
  }
302
305
 
303
306
  h4.md code {
304
307
  font-size: var(--h4-font-size);
308
+ line-height: var(--h4-code-line-height);
305
309
  }
306
310
 
307
311
  h5.md code {
308
312
  font-size: var(--h5-font-size);
313
+ line-height: var(--h5-code-line-height);
309
314
  }
310
315
 
311
316
  h6.md code {
312
317
  font-size: var(--h6-font-size);
318
+ line-height: var(--h6-code-line-height);
313
319
  }
314
320
 
315
321
  code {
package/lib/globalStyle.js CHANGED
@@ -396,6 +396,7 @@ const headingsTypography = (0, styled_components_1.css) `
396
396
  --h1-margin-top: var(--heading-margin-top); // @presenter Spacing
397
397
  --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
398
398
  --h1-text-color: var(--heading-text-color); // @presenter Color
399
+ --h1-code-line-height: 60px; // @presenter LineHeight
399
400
 
400
401
  /**
401
402
  * @tokens Heading level 2
@@ -408,6 +409,7 @@ const headingsTypography = (0, styled_components_1.css) `
408
409
  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
409
410
  --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
410
411
  --h2-text-color: var(--heading-text-color); // @presenter Color
412
+ --h2-code-line-height: 48px; // @presenter LineHeight
411
413
 
412
414
  /**
413
415
  * @tokens Heading level 3
@@ -420,6 +422,7 @@ const headingsTypography = (0, styled_components_1.css) `
420
422
  --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
421
423
  --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
422
424
  --h3-text-color: var(--heading-text-color); // @presenter Color
425
+ --h3-code-line-height: var(--line-height-xxlg); // @presenter LineHeight
423
426
 
424
427
  /**
425
428
  * @tokens Heading level 4
@@ -432,6 +435,7 @@ const headingsTypography = (0, styled_components_1.css) `
432
435
  --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
433
436
  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
434
437
  --h4-text-color: var(--heading-text-color); // @presenter Color
438
+ --h4-code-line-height: var(--line-height-xlg); // @presenter LineHeight
435
439
 
436
440
  /**
437
441
  * @tokens Heading level 5
@@ -444,6 +448,7 @@ const headingsTypography = (0, styled_components_1.css) `
444
448
  --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
445
449
  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
446
450
  --h5-text-color: var(--heading-text-color); // @presenter Color
451
+ --h5-code-line-height: var(--line-height-lg); // @presenter LineHeight
447
452
 
448
453
  /**
449
454
  * @tokens Heading level 6
@@ -456,6 +461,7 @@ const headingsTypography = (0, styled_components_1.css) `
456
461
  --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
457
462
  --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
458
463
  --h6-text-color: var(--heading-text-color); // @presenter Color
464
+ --h6-code-line-height: var(--line-height-md); // @presenter LineHeight
459
465
 
460
466
  // @tokens End
461
467
  `;
package/lib/ui/darkColors.js CHANGED
@@ -220,6 +220,32 @@ exports.darkMode = (0, styled_components_1.css) `
220
220
  --border-primary: #ffffff21; // Raised dividers
221
221
  --border-secondary: #ffffff17; // Default dividers, borders
222
222
 
223
+ /**
224
+ * @tokens Dark Theme Scrollbar Config
225
+ * @presenter Color
226
+ */
227
+
228
+ *::-webkit-scrollbar {
229
+ width: 8px;
230
+ }
231
+
232
+ *::-webkit-scrollbar-track {
233
+ background-color: var(--bg-base);
234
+ }
235
+
236
+ *::-webkit-scrollbar-thumb {
237
+ background-color: var(--bg-overlay);
238
+ border-radius: 13px;
239
+ }
240
+
241
+ *::-webkit-scrollbar-thumb:hover {
242
+ background: var(--bg-sunken);
243
+ }
244
+
245
+ *::-webkit-scrollbar-corner {
246
+ background-color: transparent;
247
+ }
248
+
223
249
  // @tokens End
224
250
  `;
225
251
  //# sourceMappingURL=darkColors.js.map
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.32.3",
3
+ "version": "0.33.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
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/components/Markdown/MarkdownWrapper.tsx CHANGED
@@ -274,26 +274,32 @@ export const MarkdownWrapper = styled.main.attrs<{
274
274
 
275
275
  h1.md code {
276
276
  font-size: var(--h1-font-size);
277
+ line-height: var(--h1-code-line-height);
277
278
  }
278
279
 
279
280
  h2.md code {
280
281
  font-size: var(--h2-font-size);
282
+ line-height: var(--h2-code-line-height);
281
283
  }
282
284
 
283
285
  h3.md code {
284
286
  font-size: var(--h3-font-size);
287
+ line-height: var(--h3-code-line-height);
285
288
  }
286
289
 
287
290
  h4.md code {
288
291
  font-size: var(--h4-font-size);
292
+ line-height: var(--h4-code-line-height);
289
293
  }
290
294
 
291
295
  h5.md code {
292
296
  font-size: var(--h5-font-size);
297
+ line-height: var(--h5-code-line-height);
293
298
  }
294
299
 
295
300
  h6.md code {
296
301
  font-size: var(--h6-font-size);
302
+ line-height: var(--h6-code-line-height);
297
303
  }
298
304
 
299
305
  code {
package/src/globalStyle.ts CHANGED
@@ -399,6 +399,7 @@ const headingsTypography = css`
399
399
  --h1-margin-top: var(--heading-margin-top); // @presenter Spacing
400
400
  --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
401
401
  --h1-text-color: var(--heading-text-color); // @presenter Color
402
+ --h1-code-line-height: 60px; // @presenter LineHeight
402
403
 
403
404
  /**
404
405
  * @tokens Heading level 2
@@ -411,6 +412,7 @@ const headingsTypography = css`
411
412
  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
412
413
  --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
413
414
  --h2-text-color: var(--heading-text-color); // @presenter Color
415
+ --h2-code-line-height: 48px; // @presenter LineHeight
414
416
 
415
417
  /**
416
418
  * @tokens Heading level 3
@@ -423,6 +425,7 @@ const headingsTypography = css`
423
425
  --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
424
426
  --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
425
427
  --h3-text-color: var(--heading-text-color); // @presenter Color
428
+ --h3-code-line-height: var(--line-height-xxlg); // @presenter LineHeight
426
429
 
427
430
  /**
428
431
  * @tokens Heading level 4
@@ -435,6 +438,7 @@ const headingsTypography = css`
435
438
  --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
436
439
  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
437
440
  --h4-text-color: var(--heading-text-color); // @presenter Color
441
+ --h4-code-line-height: var(--line-height-xlg); // @presenter LineHeight
438
442
 
439
443
  /**
440
444
  * @tokens Heading level 5
@@ -447,6 +451,7 @@ const headingsTypography = css`
447
451
  --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
448
452
  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
449
453
  --h5-text-color: var(--heading-text-color); // @presenter Color
454
+ --h5-code-line-height: var(--line-height-lg); // @presenter LineHeight
450
455
 
451
456
  /**
452
457
  * @tokens Heading level 6
@@ -459,6 +464,7 @@ const headingsTypography = css`
459
464
  --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
460
465
  --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
461
466
  --h6-text-color: var(--heading-text-color); // @presenter Color
467
+ --h6-code-line-height: var(--line-height-md); // @presenter LineHeight
462
468
 
463
469
  // @tokens End
464
470
  `;
package/src/ui/darkColors.tsx CHANGED
@@ -218,5 +218,31 @@ export const darkMode = css`
218
218
  --border-primary: #ffffff21; // Raised dividers
219
219
  --border-secondary: #ffffff17; // Default dividers, borders
220
220
 
221
+ /**
222
+ * @tokens Dark Theme Scrollbar Config
223
+ * @presenter Color
224
+ */
225
+
226
+ *::-webkit-scrollbar {
227
+ width: 8px;
228
+ }
229
+
230
+ *::-webkit-scrollbar-track {
231
+ background-color: var(--bg-base);
232
+ }
233
+
234
+ *::-webkit-scrollbar-thumb {
235
+ background-color: var(--bg-overlay);
236
+ border-radius: 13px;
237
+ }
238
+
239
+ *::-webkit-scrollbar-thumb:hover {
240
+ background: var(--bg-sunken);
241
+ }
242
+
243
+ *::-webkit-scrollbar-corner {
244
+ background-color: transparent;
245
+ }
246
+
221
247
  // @tokens End
222
248
  `;
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({