@openstage/glyph-renderer 0.2.2 → 0.2.3

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 (5) hide show
  1. package/dist/highlight-theme.d.ts +15 -4
  2. package/dist/highlight-theme.d.ts.map +1 -1
  3. package/dist/highlight-theme.js +24 -13
  4. package/dist/highlight-theme.js.map +1 -1
  5. package/package.json +2 -2
package/dist/highlight-theme.d.ts CHANGED
@@ -1,8 +1,19 @@
1
1
  /**
2
2
  * Token stylesheet for highlighted code (the `hljs-*` classes lowlight emits).
3
- * Every colour is a CSS custom property with a light-theme fallback, so a host
4
- * can re-theme highlighting the same token-driven way as the editor — e.g.
5
- * `:root { --glyph-hl-keyword: #c678dd; }` — without touching this file.
3
+ *
4
+ * Every colour is a CSS custom property whose fallback is a `light-dark()`
5
+ * pair, so highlighting stays legible on both light and dark backgrounds with
6
+ * no configuration. The dark side activates wherever the rendered code resolves
7
+ * a dark `color-scheme`: set `color-scheme: dark` (or `light dark` to follow
8
+ * the OS) on the container. `color-scheme` is inherited and crosses the
9
+ * editor's Shadow DOM boundary, so one declaration flips the whole palette:
10
+ *
11
+ * ```css
12
+ * .my-dark-theme { color-scheme: dark; }
13
+ * ```
14
+ *
15
+ * Hosts can still override any individual token the token-driven way — e.g.
16
+ * \`:root { --glyph-hl-keyword: #c678dd; }\` — which wins over both sides.
6
17
  */
7
- export declare const highlightThemeCss = "\n.hljs { color: var(--glyph-hl-text, #24292e); }\n.hljs-comment, .hljs-quote { color: var(--glyph-hl-comment, #6a737d); font-style: italic; }\n.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {\n color: var(--glyph-hl-keyword, #d73a49);\n}\n.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-template-variable,\n.hljs-addition, .hljs-regexp {\n color: var(--glyph-hl-string, #032f62);\n}\n.hljs-number, .hljs-literal, .hljs-boolean {\n color: var(--glyph-hl-number, #005cc5);\n}\n.hljs-title, .hljs-title.function_, .hljs-section, .hljs-selector-id {\n color: var(--glyph-hl-title, #6f42c1);\n}\n.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ {\n color: var(--glyph-hl-type, #e36209);\n}\n.hljs-variable, .hljs-params, .hljs-property {\n color: var(--glyph-hl-variable, #24292e);\n}\n.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-attribute {\n color: var(--glyph-hl-meta, #005cc5);\n}\n.hljs-deletion { color: var(--glyph-hl-deletion, #b31d28); }\n.hljs-emphasis { font-style: italic; }\n.hljs-strong { font-weight: 600; }\n";
18
+ export declare const highlightThemeCss = "\n.hljs { color: var(--glyph-hl-text, light-dark(#24292e, #c9d1d9)); }\n.hljs-comment, .hljs-quote { color: var(--glyph-hl-comment, light-dark(#6a737d, #8b949e)); font-style: italic; }\n.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {\n color: var(--glyph-hl-keyword, light-dark(#d73a49, #ff7b72));\n}\n.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-template-variable,\n.hljs-addition, .hljs-regexp {\n color: var(--glyph-hl-string, light-dark(#032f62, #a5d6ff));\n}\n.hljs-number, .hljs-literal, .hljs-boolean {\n color: var(--glyph-hl-number, light-dark(#005cc5, #79c0ff));\n}\n.hljs-title, .hljs-title.function_, .hljs-section, .hljs-selector-id {\n color: var(--glyph-hl-title, light-dark(#6f42c1, #d2a8ff));\n}\n.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ {\n color: var(--glyph-hl-type, light-dark(#e36209, #ffa657));\n}\n.hljs-variable, .hljs-params, .hljs-property {\n color: var(--glyph-hl-variable, light-dark(#24292e, #c9d1d9));\n}\n.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-attribute {\n color: var(--glyph-hl-meta, light-dark(#005cc5, #79c0ff));\n}\n.hljs-deletion { color: var(--glyph-hl-deletion, light-dark(#b31d28, #ffa198)); }\n.hljs-emphasis { font-style: italic; }\n.hljs-strong { font-weight: 600; }\n";
8
19
  //# sourceMappingURL=highlight-theme.d.ts.map
package/dist/highlight-theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"highlight-theme.d.ts","sourceRoot":"","sources":["../src/highlight-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,2jCA4B7B,CAAC"}
1
+ {"version":3,"file":"highlight-theme.d.ts","sourceRoot":"","sources":["../src/highlight-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,6wCA4B7B,CAAC"}
package/dist/highlight-theme.js CHANGED
@@ -1,35 +1,46 @@
1
1
  /**
2
2
  * Token stylesheet for highlighted code (the `hljs-*` classes lowlight emits).
3
- * Every colour is a CSS custom property with a light-theme fallback, so a host
4
- * can re-theme highlighting the same token-driven way as the editor — e.g.
5
- * `:root { --glyph-hl-keyword: #c678dd; }` — without touching this file.
3
+ *
4
+ * Every colour is a CSS custom property whose fallback is a `light-dark()`
5
+ * pair, so highlighting stays legible on both light and dark backgrounds with
6
+ * no configuration. The dark side activates wherever the rendered code resolves
7
+ * a dark `color-scheme`: set `color-scheme: dark` (or `light dark` to follow
8
+ * the OS) on the container. `color-scheme` is inherited and crosses the
9
+ * editor's Shadow DOM boundary, so one declaration flips the whole palette:
10
+ *
11
+ * ```css
12
+ * .my-dark-theme { color-scheme: dark; }
13
+ * ```
14
+ *
15
+ * Hosts can still override any individual token the token-driven way — e.g.
16
+ * \`:root { --glyph-hl-keyword: #c678dd; }\` — which wins over both sides.
6
17
  */
7
18
  export const highlightThemeCss = /* css */ `
8
- .hljs { color: var(--glyph-hl-text, #24292e); }
9
- .hljs-comment, .hljs-quote { color: var(--glyph-hl-comment, #6a737d); font-style: italic; }
19
+ .hljs { color: var(--glyph-hl-text, light-dark(#24292e, #c9d1d9)); }
20
+ .hljs-comment, .hljs-quote { color: var(--glyph-hl-comment, light-dark(#6a737d, #8b949e)); font-style: italic; }
10
21
  .hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
11
- color: var(--glyph-hl-keyword, #d73a49);
22
+ color: var(--glyph-hl-keyword, light-dark(#d73a49, #ff7b72));
12
23
  }
13
24
  .hljs-string, .hljs-attr, .hljs-template-tag, .hljs-template-variable,
14
25
  .hljs-addition, .hljs-regexp {
15
- color: var(--glyph-hl-string, #032f62);
26
+ color: var(--glyph-hl-string, light-dark(#032f62, #a5d6ff));
16
27
  }
17
28
  .hljs-number, .hljs-literal, .hljs-boolean {
18
- color: var(--glyph-hl-number, #005cc5);
29
+ color: var(--glyph-hl-number, light-dark(#005cc5, #79c0ff));
19
30
  }
20
31
  .hljs-title, .hljs-title.function_, .hljs-section, .hljs-selector-id {
21
- color: var(--glyph-hl-title, #6f42c1);
32
+ color: var(--glyph-hl-title, light-dark(#6f42c1, #d2a8ff));
22
33
  }
23
34
  .hljs-type, .hljs-class .hljs-title, .hljs-title.class_ {
24
- color: var(--glyph-hl-type, #e36209);
35
+ color: var(--glyph-hl-type, light-dark(#e36209, #ffa657));
25
36
  }
26
37
  .hljs-variable, .hljs-params, .hljs-property {
27
- color: var(--glyph-hl-variable, #24292e);
38
+ color: var(--glyph-hl-variable, light-dark(#24292e, #c9d1d9));
28
39
  }
29
40
  .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-attribute {
30
- color: var(--glyph-hl-meta, #005cc5);
41
+ color: var(--glyph-hl-meta, light-dark(#005cc5, #79c0ff));
31
42
  }
32
- .hljs-deletion { color: var(--glyph-hl-deletion, #b31d28); }
43
+ .hljs-deletion { color: var(--glyph-hl-deletion, light-dark(#b31d28, #ffa198)); }
33
44
  .hljs-emphasis { font-style: italic; }
34
45
  .hljs-strong { font-weight: 600; }
35
46
  `;
package/dist/highlight-theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"highlight-theme.js","sourceRoot":"","sources":["../src/highlight-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B1C,CAAC"}
1
+ {"version":3,"file":"highlight-theme.js","sourceRoot":"","sources":["../src/highlight-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B1C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openstage/glyph-renderer",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "license": "MIT",
5
5
  "author": "Gabriel Bornea",
6
6
  "repository": {
@@ -36,7 +36,7 @@
36
36
  "typecheck": "tsc -p tsconfig.json --noEmit"
37
37
  },
38
38
  "dependencies": {
39
- "@openstage/glyph-core": "0.2.2",
39
+ "@openstage/glyph-core": "0.2.3",
40
40
  "highlight.js": "^11.11.1",
41
41
  "lowlight": "^3.3.0",
42
42
  "monadyssey": "^2.0.1"