Semantic Highlighting (#196)

* Enabled semantic highlighting.

* Updated changelog & bump version

CHANGELOG.md

@@ -1,10 +1,18 @@
 # Change Log
 
+## 88.3-1.5.0 [Semantic Highlighting]
+
+- Themes now support [semantic highliglighting](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#semantic-coloring-in-color-themes). Which I tried to make as similar to [the WebStorm plugin syntax highlighting](https://github.com/doki-theme/doki-theme-jetbrains). 
+  - If you don't like what I did, then you can always add `"editor.semanticHighlighting.enabled": false,` to your `settings.json` in your VSCode to turn off semantic highlighting :)
+
+![Comparison]()
+
 ## 88.3-1.4.0 [Re-Brand]
 
 - Re-Branded extension from `The Doki Theme` to just `Doki Theme`.
 - Updated extension icon to match the newest Doki Theme logo.
 - Prevents installation of asset that is a directory (for the most part).
+- Updated XMas Chocola's theme.
 
 ## 88.1-1.3.2 [Sticker Fix Revisited]
 

buildSrc/assets/templates/base.semantic-tokens.template.json

@@ -0,0 +1,7 @@
+{
+  "name": "base",
+  "semanticTokenColors": {
+    "variable.readonly.local":"&foregroundColorEditor&",
+    "function.declaration": "&classNameColor&"
+  }
+}

buildSrc/assets/templates/base.syntax.template.json

@@ -96,6 +96,7 @@
         "variable.parameter",
         "meta.parameters",
         "meta.function-call.arguments",
+        "markup.inline.raw.string.markdown",
         "string"
       ],
       "settings": {
@@ -116,7 +117,10 @@
         "variable.language.this",
         "constant.language.undefined",
         "constant.language.java",
-        "constant.language.python"
+        "constant.language.python",
+        "support.type.primitive.ts",
+        "markup.heading.setext",
+        "punctuation.definition.raw.markdown"
       ],
       "settings": {
         "foreground": "&keywordColor&"
@@ -132,7 +136,8 @@
         "variable.css",
         "meta.function",
         "support.class",
-        "meta.method.identifier"
+        "meta.method.identifier",
+        "variable.other.readwrite.alias"
       ],
       "settings": {
         "foreground": "&classNameColor&"
@@ -173,6 +178,7 @@
     {
       "scope": [
         "support.type.primitive",
+        "entity.name.type.interface",
         "variable.parameter.function-call"
       ],
       "settings": {
@@ -215,7 +221,9 @@
         "constant.other.color",
         "variable.language.special",
         "support.constant",
-        "meta.type.parameters"
+        "meta.type.parameters",
+        "fenced_code.block.language.markdown",
+        "entity.name.section.markdown"
       ],
       "settings": {
         "foreground": "&constantColor&"

buildSrc/package.json

@@ -13,7 +13,7 @@
     "@types/lodash": "^4.14.155",
     "@types/xml2js": "^0.4.5",
     "copy-webpack-plugin": "^6.0.2",
-    "doki-build-source": "84.2.4",
+    "doki-build-source": "84.2.6",
     "jest": "^26.0.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.1.0",

buildSrc/src/BuildThemes.ts

@@ -94,15 +94,7 @@ function getSyntaxColor(
   }
 }
 
-function buildSyntaxColors(
-  dokiThemeTemplateJson: MasterDokiThemeDefinition,
-  dokiThemeVSCodeTemplateJson: VSCodeDokiThemeDefinition,
-  dokiTemplateDefinitions: DokiThemeDefinitions,
-  masterTemplates: DokiThemeDefinitions,
-) {
-  const syntaxTemplate: any[] =
-    dokiTemplateDefinitions[SYNTAX_TYPE].base.tokenColors;
-
+function getNamedColorsForTemplateFillIn(dokiThemeTemplateJson: MasterDokiThemeDefinition, dokiThemeVSCodeTemplateJson: BaseAppDokiThemeDefinition, masterTemplates: DokiThemeDefinitions, dokiTemplateDefinitions: DokiThemeDefinitions) {
   const overrides =
     dokiThemeTemplateJson.overrides?.editorScheme?.colors ||
     dokiThemeVSCodeTemplateJson?.overrides?.editorScheme?.colors || {};
@@ -124,6 +116,50 @@ function buildSyntaxColors(
     editorAccentColor: dokiThemeTemplateJson.overrides?.editorScheme?.colors?.accentColor ||
       evaluatedColors.accentColor,
   }
+  return resolvedNamedColors;
+}
+
+function buildSemanticTokens(
+  dokiThemeTemplateJson: MasterDokiThemeDefinition,
+  dokiThemeVSCodeTemplateJson: VSCodeDokiThemeDefinition,
+  dokiTemplateDefinitions: DokiThemeDefinitions,
+  masterTemplates: DokiThemeDefinitions,
+) {
+  const syntaxTemplate: StringDictionary<string> =
+    dokiTemplateDefinitions['semantic-tokens'].base.semanticTokenColors;
+  const resolvedNamedColors =
+    getNamedColorsForTemplateFillIn(
+      dokiThemeTemplateJson,
+      dokiThemeVSCodeTemplateJson,
+      masterTemplates,
+      dokiTemplateDefinitions,
+    );
+
+  return Object.entries(syntaxTemplate)
+    .map(([key, value]) =>
+      ([key, getSyntaxColor(value, resolvedNamedColors)])
+    ).reduce((accum, [key, value]) => {
+      accum[key] = value;
+      return accum
+    }, {} as StringDictionary<string>);
+}
+
+function buildSyntaxColors(
+  dokiThemeTemplateJson: MasterDokiThemeDefinition,
+  dokiThemeVSCodeTemplateJson: VSCodeDokiThemeDefinition,
+  dokiTemplateDefinitions: DokiThemeDefinitions,
+  masterTemplates: DokiThemeDefinitions,
+) {
+  const syntaxTemplate: any[] =
+    dokiTemplateDefinitions[SYNTAX_TYPE].base.tokenColors;
+
+  const resolvedNamedColors =
+    getNamedColorsForTemplateFillIn(
+      dokiThemeTemplateJson,
+      dokiThemeVSCodeTemplateJson,
+      masterTemplates,
+      dokiTemplateDefinitions,
+    );
 
   return syntaxTemplate.map((tokenSpecification) => {
     const newTokenSpec = {
@@ -134,7 +170,7 @@ function buildSyntaxColors(
       .map((key) => {
         const oldValue = newTokenSpec.settings[key];
         const value = getSyntaxColor(oldValue, resolvedNamedColors);
-        return { key, value };
+        return {key, value};
       })
       .reduce((accum: StringDictionary<string>, next) => {
         accum[next.key] = next.value;
@@ -163,6 +199,13 @@ function buildVSCodeTheme(
       dokiTemplateDefinitions,
       masterTemplates,
     ),
+    semanticHighlighting: true,
+    semanticTokenColors: buildSemanticTokens(
+      dokiThemeDefinition,
+      dokiThemeVSCodeDefinition,
+      dokiTemplateDefinitions,
+      masterTemplates,
+    ),
     tokenColors: buildSyntaxColors(
       dokiThemeDefinition,
       dokiThemeVSCodeDefinition,
@@ -291,15 +334,15 @@ evaluateTemplates(
     const commands = stickerInstallCommands.map((commandAndDefinition) => ({
       command: commandAndDefinition.command,
       title: `Doki-Theme: Install ${getName(commandAndDefinition.definition)}'s${commandAndDefinition.command.endsWith("secondary") ? " Secondary" : ""
-        } ${commandAndDefinition.command.indexOf('wallpaper') >= 0 ? 'Wallpaper' : 'Sticker'
-        }`,
+      } ${commandAndDefinition.command.indexOf('wallpaper') >= 0 ? 'Wallpaper' : 'Sticker'
+      }`,
     }));
 
     const zeroTwoObsidianID = '13adffd9-acbe-47af-8101-fa71269a4c5c';
     const themes = dokiDefinitions.map((dokiDefinition) => ({
       id: dokiDefinition.id,
       label: `Doki Theme: ${getGroupName(dokiDefinition)} ${getThemeDisplayName(dokiDefinition)
-        }`,
+      }`,
       path: `./${themeOutputDirectory}/${getName(dokiDefinition)}${themePostfix}`,
       uiTheme: dokiDefinition.dark ? "vs-dark" : "vs",
     })).sort((a, b) => {
@@ -371,6 +414,7 @@ const specialThemes: { [key: string]: (def: MasterDokiThemeDefinition) => string
   '13adffd9-acbe-47af-8101-fa71269a4c5c': nameGetter, // Zero Two Obsidian
   'b0340303-0a5a-4a20-9b9c-fc8ce9880078': () => 'Sayori',
 }
+
 function getThemeDisplayName(dokiDefinition: MasterDokiThemeDefinition) {
   const displayNameGetter = specialThemes[dokiDefinition.id];
   return displayNameGetter ?
@@ -394,6 +438,7 @@ function getCommandNames(dokiDefinition: MasterDokiThemeDefinition): string[] {
       ];
     }).reduce((accum, next) => accum.concat(next), []);
 }
+
 function getName(dokiDefinition: MasterDokiThemeDefinition) {
   return dokiDefinition.name.replace(':', '');
 }

package.json

@@ -3,7 +3,7 @@
   "displayName": "Doki Theme",
   "description": "Cute anime character themes!",
   "publisher": "unthrottled",
-  "version": "88.1.10",
+  "version": "88.1.11",
   "license": "MIT",
   "icon": "Doki-Theme-v2.png",
   "galleryBanner": {

src/NotificationService.ts

@@ -3,7 +3,7 @@ import { VSCodeGlobals } from "./VSCodeGlobals";
 import { attemptToGreetUser } from "./WelcomeService";
 
 const SAVED_VERSION = "doki.theme.version";
-const DOKI_THEME_VERSION = "v88.3-1.4.0";
+const DOKI_THEME_VERSION = "v88.3-1.5.0";
 
 export function attemptToNotifyUpdates(context: vscode.ExtensionContext) {
   const savedVersion = VSCodeGlobals.globalState.get(SAVED_VERSION);