Reset JavaScript expression coloring in template expressions (#29966)

* Reset JavaScript expression coloring in template expressions

Fixes #29866

Adds new rules to standard theme to reset the coloring of expression inside of js/ts template expressions

* update tests

extensions/theme-defaults/themes/dark_vs.json

@@ -253,6 +253,16 @@
 				"foreground": "#569cd6"
 			}
 		},
+		{
+			"name": "Reset JavaScript string interpolation expression",
+			"scope": [
+				"meta.template.expression.js",
+				"meta.template.expression.ts"
+			],
+			"settings": {
+				"foreground": "#d4d4d4"
+			}
+		},
 		{
 			"scope": [
 				"support.type.vendored.property-name",

extensions/theme-defaults/themes/hc_black_defaults.json

@@ -240,6 +240,16 @@
 				"foreground": "#569cd6"
 			}
 		},
+		{
+			"name": "Reset JavaScript string interpolation expression",
+			"scope": [
+				"meta.template.expression.js",
+				"meta.template.expression.ts"
+			],
+			"settings": {
+				"foreground": "#ffffff"
+			}
+		},
 		{
 			"scope": [
 				"support.type.vendored.property-name",

extensions/theme-defaults/themes/light_vs.json

@@ -249,6 +249,16 @@
 				"foreground": "#0000ff"
 			}
 		},
+		{
+			"name": "Reset JavaScript string interpolation expression",
+			"scope": [
+				"meta.template.expression.js",
+				"meta.template.expression.ts"
+			],
+			"settings": {
+				"foreground": "#000000"
+			}
+		},
 		{
 			"scope": [
 				"support.constant.property-value",

extensions/theme-monokai-dimmed/themes/dimmed-monokai-color-theme.json

@@ -363,6 +363,25 @@
 				"foreground": "#CC555A"
 			}
 		},
+		{
+			"name": "Template Definition",
+			"scope": [
+				"punctuation.definition.template-expression",
+				"punctuation.section.embedded.coffee"
+			],
+			"settings": {
+				"foreground": "#D08442"
+			}
+		},
+		{
+			"name": "Reset JavaScript string interpolation expression",
+			"scope": [
+				"meta.template.expression"
+			],
+			"settings": {
+				"foreground": "#C5C8C6"
+			}
+		},
 		{
 			"name": "PHP Function Call",
 			"scope": "meta.function-call.object.php",
@@ -535,13 +554,6 @@
 				"foreground": "#b267e6"
 			}
 		},
-		{
-			"name": "this.self",
-			"scope": "variable.language",
-			"settings": {
-				"foreground": "#c7444a"
-			}
-		},
 		{
 			"name": "this.self",
 			"scope": "variable.language",

extensions/theme-monokai/themes/monokai-color-theme.json

@@ -120,6 +120,15 @@
 				"foreground": "#F92672"
 			}
 		},
+		{
+			"name": "Reset JavaScript string interpolation expression",
+			"scope": [
+				"meta.template.expression"
+			],
+			"settings": {
+				"foreground": "#F8F8F2"
+			}
+		},
 		{
 			"name": "Number",
 			"scope": "constant.numeric",

extensions/typescript/test/colorize-results/test-issue5431_ts.json

@@ -368,8 +368,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},
@@ -412,8 +412,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},

extensions/typescript/test/colorize-results/test-strings_ts.json

@@ -104,8 +104,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},
@@ -355,11 +355,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -368,8 +368,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},
@@ -377,11 +377,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -399,11 +399,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -412,8 +412,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},
@@ -421,11 +421,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -465,11 +465,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -478,8 +478,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},
@@ -487,11 +487,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -509,11 +509,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{
@@ -522,8 +522,8 @@
 		"r": {
 			"dark_plus": "variable: #9CDCFE",
 			"light_plus": "variable: #001080",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
 			"hc_black": "variable: #9CDCFE"
 		}
 	},
@@ -531,11 +531,11 @@
 		"c": " ",
 		"t": "source.ts string.template.ts meta.template.expression.ts",
 		"r": {
-			"dark_plus": "string: #CE9178",
-			"light_plus": "string: #A31515",
-			"dark_vs": "string: #CE9178",
-			"light_vs": "string: #A31515",
-			"hc_black": "string: #CE9178"
+			"dark_plus": "meta.template.expression.ts: #D4D4D4",
+			"light_plus": "meta.template.expression.ts: #000000",
+			"dark_vs": "meta.template.expression.ts: #D4D4D4",
+			"light_vs": "meta.template.expression.ts: #000000",
+			"hc_black": "meta.template.expression.ts: #FFFFFF"
 		}
 	},
 	{