optimize semantic highlighting of ts and js

sainnhe · May 1, 2020 · 671033f · 671033f
1 parent e5ac79b
commit 671033f
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 0 deletions.
diff --git a/src/semantic/colorful.ts b/src/semantic/colorful.ts
@@ -0,0 +1,26 @@
+import { Palette } from "../interface";
+
+export function getColorfulSemantic(palette: Palette) {
+  return {
+    // JavaScript {{{
+    "variable.defaultLibrary:javascript": `${palette.purple}`,
+    "property.defaultLibrary:javascript": `${palette.purple}`,
+    // }}}
+    // JavaScript React {{{
+    "variable.defaultLibrary:javascriptreact": `${palette.purple}`,
+    "property.defaultLibrary:javascriptreact": `${palette.purple}`,
+    // }}}
+    // TypeScript {{{
+    "namespace:typescript": `${palette.purple}`,
+    "enumMember:typescript": `${palette.yellow}`,
+    "variable.defaultLibrary:typescript": `${palette.purple}`,
+    "property.defaultLibrary:typescript": `${palette.purple}`,
+    // }}}
+    // TypeScript React {{{
+    "namespace:typescriptreact": `${palette.purple}`,
+    "enumMember:typescriptreact": `${palette.yellow}`,
+    "variable.defaultLibrary:typescriptreact": `${palette.purple}`,
+    "property.defaultLibrary:typescriptreact": `${palette.purple}`,
+    // }}}
+  };
+}
diff --git a/src/semantic/default.ts b/src/semantic/default.ts
@@ -0,0 +1,32 @@
+import { Palette } from "../interface";
+
+export function getDefaultSemantic(palette: Palette) {
+  return {
+    // JavaScript {{{
+    "variable.defaultLibrary:javascript": `${palette.purple}`,
+    "property.defaultLibrary:javascript": `${palette.purple}`,
+    // }}}
+    // JavaScript React {{{
+    "variable.defaultLibrary:javascriptreact": `${palette.purple}`,
+    "property.defaultLibrary:javascriptreact": `${palette.purple}`,
+    // }}}
+    // TypeScript {{{
+    "class:typescript": `${palette.aqua}`,
+    "interface:typescript": `${palette.aqua}`,
+    "enum:typescript": `${palette.purple}`,
+    "enumMember:typescript": `${palette.blue}`,
+    "namespace:typescript": `${palette.purple}`,
+    "variable.defaultLibrary:typescript": `${palette.purple}`,
+    "property.defaultLibrary:typescript": `${palette.purple}`,
+    // }}}
+    // TypeScript React {{{
+    "class:typescriptreact": `${palette.aqua}`,
+    "interface:typescriptreact": `${palette.aqua}`,
+    "enum:typescriptreact": `${palette.purple}`,
+    "enumMember:typescriptreact": `${palette.blue}`,
+    "namespace:typescriptreact": `${palette.purple}`,
+    "variable.defaultLibrary:typescriptreact": `${palette.purple}`,
+    "property.defaultLibrary:typescriptreact": `${palette.purple}`,
+    // }}}
+  };
+}
diff --git a/src/semantic/index.ts b/src/semantic/index.ts
@@ -0,0 +1,15 @@
+import { Configuration } from "../interface";
+import { getPalette } from "../palette";
+import { getDefaultSemantic } from "./default";
+import { getColorfulSemantic } from "./colorful";
+
+export function getSemantic(configuration: Configuration, variant: string) {
+  let palette = getPalette(configuration, variant);
+  let semantic: any;
+  if (configuration.colorfulSyntax === false) {
+    semantic = getDefaultSemantic(palette);
+  } else {
+    semantic = getColorfulSemantic(palette);
+  }
+  return semantic;
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -4,6 +4,7 @@ import { ConfigurationChangeEvent, workspace, window, commands } from "vscode";
 import { Configuration } from "./interface";
 import { getWorkbench } from "./workbench";
 import { getSyntax } from "./syntax";
+import { getSemantic } from "./semantic";
 
 export default class Utils {
   detectConfigChanges(
@@ -44,13 +45,15 @@ export default class Utils {
         name: "Gruvbox Material Dark",
         type: "dark",
         semanticHighlighting: configuration.semanticHighlighting,
+        semanticTokenColors: getSemantic(configuration, "dark"),
         colors: getWorkbench(configuration, "dark"),
         tokenColors: getSyntax(configuration, "dark"),
       },
       light: {
         name: "Gruvbox Material Light",
         type: "light",
         semanticHighlighting: configuration.semanticHighlighting,
+        semanticTokenColors: getSemantic(configuration, "dark"),
         colors: getWorkbench(configuration, "light"),
         tokenColors: getSyntax(configuration, "light"),
       },

diff --git a/themes/gruvbox-material-dark.json b/themes/gruvbox-material-dark.json
@@ -2,6 +2,26 @@
   "name": "Gruvbox Material Dark",
   "type": "dark",
   "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "variable.defaultLibrary:javascript": "#d3869b",
+    "property.defaultLibrary:javascript": "#d3869b",
+    "variable.defaultLibrary:javascriptreact": "#d3869b",
+    "property.defaultLibrary:javascriptreact": "#d3869b",
+    "class:typescript": "#89b482",
+    "interface:typescript": "#89b482",
+    "enum:typescript": "#d3869b",
+    "enumMember:typescript": "#7daea3",
+    "namespace:typescript": "#d3869b",
+    "variable.defaultLibrary:typescript": "#d3869b",
+    "property.defaultLibrary:typescript": "#d3869b",
+    "class:typescriptreact": "#89b482",
+    "interface:typescriptreact": "#89b482",
+    "enum:typescriptreact": "#d3869b",
+    "enumMember:typescriptreact": "#7daea3",
+    "namespace:typescriptreact": "#d3869b",
+    "variable.defaultLibrary:typescriptreact": "#d3869b",
+    "property.defaultLibrary:typescriptreact": "#d3869b"
+  },
   "colors": {
     "foreground": "#d4be98",
     "focusBorder": "#45403d00",

diff --git a/themes/gruvbox-material-light.json b/themes/gruvbox-material-light.json
@@ -2,6 +2,26 @@
   "name": "Gruvbox Material Light",
   "type": "light",
   "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "variable.defaultLibrary:javascript": "#d3869b",
+    "property.defaultLibrary:javascript": "#d3869b",
+    "variable.defaultLibrary:javascriptreact": "#d3869b",
+    "property.defaultLibrary:javascriptreact": "#d3869b",
+    "class:typescript": "#89b482",
+    "interface:typescript": "#89b482",
+    "enum:typescript": "#d3869b",
+    "enumMember:typescript": "#7daea3",
+    "namespace:typescript": "#d3869b",
+    "variable.defaultLibrary:typescript": "#d3869b",
+    "property.defaultLibrary:typescript": "#d3869b",
+    "class:typescriptreact": "#89b482",
+    "interface:typescriptreact": "#89b482",
+    "enum:typescriptreact": "#d3869b",
+    "enumMember:typescriptreact": "#7daea3",
+    "namespace:typescriptreact": "#d3869b",
+    "variable.defaultLibrary:typescriptreact": "#d3869b",
+    "property.defaultLibrary:typescriptreact": "#d3869b"
+  },
   "colors": {
     "foreground": "#654735",
     "focusBorder": "#e0cfa900",