Added theme support

styles/src/styleTree/app.ts

@@ -14,6 +14,7 @@ import projectDiagnostics from "./projectDiagnostics";
 import contactNotification from "./contactNotification";
 import updateNotification from "./updateNotification";
 import tooltip from "./tooltip";
+import terminal from "./terminal";
 
 export const panel = {
   padding: { top: 12, bottom: 12 },
@@ -41,5 +42,6 @@ export default function app(theme: Theme): Object {
     contactNotification: contactNotification(theme),
     updateNotification: updateNotification(theme),
     tooltip: tooltip(theme),
+    terminal: terminal(theme),
   };
 }

styles/src/styleTree/terminal.ts

@@ -0,0 +1,35 @@
+import Theme from "../themes/common/theme";
+
+export default function terminal(theme: Theme) {
+  return {
+    black: theme.ramps.neutral(0).hex(),
+    red: theme.ramps.red(0.5).hex(),
+    green: theme.ramps.green(0.5).hex(),
+    yellow: theme.ramps.yellow(0.5).hex(),
+    blue: theme.ramps.blue(0.5).hex(),
+    magenta: theme.ramps.magenta(0.5).hex(),
+    cyan: theme.ramps.cyan(0.5).hex(),
+    white: theme.ramps.neutral(7).hex(),
+    brightBlack: theme.ramps.neutral(2).hex(),
+    brightRed: theme.ramps.red(0.25).hex(),
+    brightGreen: theme.ramps.green(0.25).hex(),
+    brightYellow: theme.ramps.yellow(0.25).hex(),
+    brightBlue: theme.ramps.blue(0.25).hex(),
+    brightMagenta: theme.ramps.magenta(0.25).hex(),
+    brightCyan: theme.ramps.cyan(0.25).hex(),
+    brightWhite: theme.ramps.neutral(7).hex(),
+    foreground: theme.ramps.neutral(7).hex(),
+    background: theme.ramps.neutral(0).hex(),
+    cursor: theme.ramps.neutral(7).hex(),
+    dimBlack: theme.ramps.neutral(7).hex(),
+    dimRed: theme.ramps.red(0.75).hex(),
+    dimGreen: theme.ramps.green(0.75).hex(),
+    dimYellow: theme.ramps.yellow(0.75).hex(),
+    dimBlue: theme.ramps.blue(0.75).hex(),
+    dimMagenta: theme.ramps.magenta(0.75).hex(),
+    dimCyan: theme.ramps.cyan(0.75).hex(),
+    dimWhite: theme.ramps.neutral(5).hex(),
+    brightForeground: theme.ramps.neutral(7).hex(),
+    dimForeground: theme.ramps.neutral(0).hex(),
+  };
+}

styles/src/themes/cave.ts

@@ -26,3 +26,6 @@ const ramps = {
 
 export const dark = createTheme(`${name}-dark`, false, ramps);
 export const light = createTheme(`${name}-light`, true, ramps);
+
+console.log(JSON.stringify(dark.ramps.neutral.domain()))
+console.log(JSON.stringify(light.ramps.neutral.domain()))

styles/src/themes/common/base16.ts

@@ -13,15 +13,25 @@ export function colorRamp(color: Color): Scale {
 export function createTheme(
   name: string,
   isLight: boolean,
-  ramps: { [rampName: string]: Scale },
+  color_ramps: { [rampName: string]: Scale },
 ): Theme {
+  let ramps: typeof color_ramps = {};
+  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+  // we now store the ramps object in the theme so that we can pull colors out of them. 
+  // So instead of calling domain and storing the result, we have to construct new ramps for each
+  // theme so that we don't modify the passed in ramps.
+  // This combined with an error in the type definitions for chroma js means we have to cast the colors
+  // function to any in order to get the colors back out from the original ramps.
   if (isLight) {
-    for (var rampName in ramps) {
-      ramps[rampName] = ramps[rampName].domain([1, 0]);
+    for (var rampName in color_ramps) {
+      ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([1, 0]);
     }
-    ramps.neutral = ramps.neutral.domain([7, 0]);
+    ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([7, 0]);
   } else {
-    ramps.neutral = ramps.neutral.domain([0, 7]);
+    for (var rampName in color_ramps) {
+      ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([0, 1]);
+    }
+    ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([0, 7]);
   }
 
   let blend = isLight ? 0.12 : 0.24;
@@ -237,6 +247,7 @@ export function createTheme(
 
   return {
     name,
+    isLight,
     backgroundColor,
     borderColor,
     textColor,
@@ -245,5 +256,6 @@ export function createTheme(
     syntax,
     player,
     shadow,
+    ramps,
   };
 }

styles/src/themes/common/theme.ts

@@ -1,3 +1,4 @@
+import { Scale } from "chroma-js";
 import { FontWeight } from "../../common";
 import { withOpacity } from "../../utils/color";
 
@@ -60,6 +61,7 @@ export interface Syntax {
 
 export default interface Theme {
   name: string;
+  isLight: boolean,
   backgroundColor: {
     // Basically just Title Bar
     // Lowest background level
@@ -155,4 +157,5 @@ export default interface Theme {
     8: Player;
   },
   shadow: string;
+  ramps: { [rampName: string]: Scale };
 }