Add the ability to override the system syntax config

styles/src/themes/common/colorScheme.ts

@@ -1,4 +1,5 @@
 import { Scale } from "chroma-js"
+import { FontWeight } from "../../common"
 
 export interface ColorScheme {
     name: string
@@ -14,6 +15,7 @@ export interface ColorScheme {
     modalShadow: Shadow
 
     players: Players
+    syntax?: Partial<ThemeSyntax>
 }
 
 export interface Meta {
@@ -98,3 +100,39 @@ export interface Style {
     border: string
     foreground: string
 }
+
+export interface SyntaxHighlightStyle {
+    color: string,
+    weight?: FontWeight
+    underline?: boolean
+    italic?: boolean
+}
+
+export interface Syntax {
+    primary: SyntaxHighlightStyle,
+    "variable.special": SyntaxHighlightStyle,
+    comment: SyntaxHighlightStyle,
+    punctuation: SyntaxHighlightStyle,
+    constant: SyntaxHighlightStyle,
+    keyword: SyntaxHighlightStyle,
+    function: SyntaxHighlightStyle,
+    type: SyntaxHighlightStyle,
+    constructor: SyntaxHighlightStyle,
+    variant: SyntaxHighlightStyle,
+    property: SyntaxHighlightStyle,
+    enum: SyntaxHighlightStyle,
+    operator: SyntaxHighlightStyle,
+    string: SyntaxHighlightStyle,
+    number: SyntaxHighlightStyle,
+    boolean: SyntaxHighlightStyle,
+    predictive: SyntaxHighlightStyle,
+    title: SyntaxHighlightStyle,
+    emphasis: SyntaxHighlightStyle,
+    "emphasis.strong": SyntaxHighlightStyle,
+    linkUri: SyntaxHighlightStyle,
+    linkText: SyntaxHighlightStyle
+}
+
+// HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.
+// For now hack around it by omiting constructor as a valid key for overrides.
+export type ThemeSyntax = Partial<Omit<Syntax, "constructor">>

styles/src/themes/common/ramps.ts

@@ -7,6 +7,7 @@ import {
     Style,
     Styles,
     StyleSet,
+    ThemeSyntax,
 } from "./colorScheme"
 
 export function colorRamp(color: Color): Scale {
@@ -18,7 +19,8 @@ export function colorRamp(color: Color): Scale {
 export function createColorScheme(
     name: string,
     isLight: boolean,
-    colorRamps: { [rampName: string]: Scale }
+    colorRamps: { [rampName: string]: Scale },
+    syntax?: ThemeSyntax
 ): ColorScheme {
     // Chromajs scales from 0 to 1 flipped if isLight is true
     let ramps: RampSet = {} as any
@@ -31,14 +33,14 @@ export function createColorScheme(
     // function to any in order to get the colors back out from the original ramps.
     if (isLight) {
         for (var rampName in colorRamps) {
-            ;(ramps as any)[rampName] = chroma.scale(
+            ; (ramps as any)[rampName] = chroma.scale(
                 colorRamps[rampName].colors(100).reverse()
             )
         }
         ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse())
     } else {
         for (var rampName in colorRamps) {
-            ;(ramps as any)[rampName] = chroma.scale(
+            ; (ramps as any)[rampName] = chroma.scale(
                 colorRamps[rampName].colors(100)
             )
         }
@@ -94,6 +96,7 @@ export function createColorScheme(
         modalShadow,
 
         players,
+        syntax
     }
 }