Add color for 'variable.special' and use it in highlight queries

crates/zed/src/languages/cpp/highlights.scm

@@ -41,7 +41,7 @@
 
 (field_identifier) @property
 (statement_identifier) @label
-(this) @variable.builtin
+(this) @variable.special
 
 [
   "break"

crates/zed/src/languages/css/highlights.scm

@@ -41,10 +41,13 @@
 
 (function_name) @function
 
-((property_name) @variable
- (#match? @variable "^--"))
-((plain_value) @variable
- (#match? @variable "^--"))
+(
+  [
+    (property_name)
+    (plain_value)
+  ] @variable.special
+  (#match? @variable.special "^--")
+)
 
 [
   "@media"

crates/zed/src/languages/javascript/highlights.scm

@@ -55,8 +55,8 @@
 
 ; Literals
 
-(this) @variable.builtin
-(super) @variable.builtin
+(this) @variable.special
+(super) @variable.special
 
 [
   (true)

crates/zed/src/languages/rust/highlights.scm

@@ -1,6 +1,6 @@
 (type_identifier) @type
 (primitive_type) @type.builtin
-(self) @variable.builtin
+(self) @variable.special
 (field_identifier) @property
 
 (call_expression

crates/zed/src/languages/typescript/highlights.scm

@@ -55,8 +55,8 @@
 
 ; Literals
 
-(this) @variable.builtin
-(super) @variable.builtin
+(this) @variable.special
+(super) @variable.special
 
 [
   (true)

styles/src/themes/common/base16.ts

@@ -185,6 +185,10 @@ export function createTheme(
       color: sample(ramps.neutral, 7),
       weight: fontWeights.normal,
     },
+    "variable.special": {
+      color: sample(ramps.blue, 0.80),
+      weight: fontWeights.normal,
+    },
     comment: {
       color: sample(ramps.neutral, 5),
       weight: fontWeights.normal,