Add cave theme

Sneaking one more in, cave is a nice cool dark theme that isn't super blue.

styles/src/buildThemes.ts

@@ -1,6 +1,8 @@
 import * as fs from "fs";
 import * as path from "path";
 import app from "./styleTree/app";
+import caveDark from "./themes/cave-dark";
+import caveLight from "./themes/cave-light";
 import dark from "./themes/dark";
 import light from "./themes/light";
 import solarizedDark from "./themes/solarized-dark";
@@ -11,6 +13,7 @@ import snakeCase from "./utils/snakeCase";
 
 const themes = [
   dark, light,
+  caveDark, caveLight,
   solarizedDark, solarizedLight,
   sulphurpoolDark, sulphurpoolLight
 ];

styles/src/themes/cave-dark.ts

@@ -0,0 +1,3 @@
+import { cave } from "./cave";
+
+export default cave(true);

styles/src/themes/cave-light.ts

@@ -0,0 +1,3 @@
+import { cave } from "./cave";
+
+export default cave(false);

styles/src/themes/cave.ts

@@ -0,0 +1,257 @@
+import { color, fontWeights, NumberToken } from "../tokens";
+import { withOpacity } from "../utils/color";
+import Theme, { buildPlayer, Syntax } from "./theme";
+
+// Dark: 0 == Darkest, 3 == Lightest
+const dark = {
+  0: color("#19171c"),
+  1: color("#26232a"),
+  2: color("#585260"),
+  3: color("#655f6d"),
+};
+// Light: 0 == Lightest, 3 == Darkest
+const light = {
+  0: color("#efecf4"),
+  1: color("#e2dfe7"),
+  2: color("#8b8792"),
+  3: color("#7e7887"),
+};
+
+const colors = {
+  "red": color("#be4678"),
+  "orange": color("#aa573c"),
+  "yellow": color("#a06e3b"),
+  "green": color("#2a9292"),
+  "cyan": color("#398bc6"),
+  "blue": color("#576ddb"),
+  "violet": color("#955ae7"),
+  "magenta": color("#bf40bf"),
+};
+
+export function cave(darkTheme: boolean): Theme {
+  let fg = darkTheme ? light : dark;
+  let bg = darkTheme ? dark : light;
+  let name = darkTheme ? "cave-dark" : "cave-light";
+
+  const backgroundColor = {
+    100: {
+      base: bg[1],
+      hovered: bg[3],
+      active: bg[3],
+      focused: bg[3],
+    },
+    300: {
+      base: bg[1],
+      hovered: bg[3],
+      active: bg[3],
+      focused: bg[3],
+    },
+    500: {
+      base: bg[0],
+      hovered: bg[1],
+      active: bg[1],
+      focused: bg[1],
+    },
+    on300: {
+      base: bg[0],
+      hovered: bg[1],
+      active: bg[1],
+      focused: bg[1],
+    },
+    on500: {
+      base: bg[1],
+      hovered: bg[3],
+      active: bg[3],
+      focused: bg[3],
+    },
+    ok: {
+      base: colors.green,
+      hovered: colors.green,
+      active: colors.green,
+      focused: colors.green,
+    },
+    error: {
+      base: colors.red,
+      hovered: colors.red,
+      active: colors.red,
+      focused: colors.red,
+    },
+    warning: {
+      base: colors.yellow,
+      hovered: colors.yellow,
+      active: colors.yellow,
+      focused: colors.yellow,
+    },
+    info: {
+      base: colors.blue,
+      hovered: colors.blue,
+      active: colors.blue,
+      focused: colors.blue,
+    },
+  };
+
+  const borderColor = {
+    primary: bg[0],
+    secondary: bg[1],
+    muted: bg[3],
+    focused: bg[3],
+    active: bg[3],
+    ok: colors.green,
+    error: colors.red,
+    warning: colors.yellow,
+    info: colors.blue,
+  };
+
+  const textColor = {
+    primary: fg[1],
+    secondary: fg[2],
+    muted: fg[2],
+    placeholder: fg[3],
+    active: fg[0],
+    //TODO: (design) define feature and it's correct value
+    feature: colors.blue,
+    ok: colors.green,
+    error: colors.red,
+    warning: colors.yellow,
+    info: colors.blue,
+  };
+
+  const player = {
+    1: buildPlayer(colors.blue),
+    2: buildPlayer(colors.green),
+    3: buildPlayer(colors.magenta),
+    4: buildPlayer(colors.orange),
+    5: buildPlayer(colors.violet),
+    6: buildPlayer(colors.cyan),
+    7: buildPlayer(colors.red),
+    8: buildPlayer(colors.yellow),
+  };
+
+  const editor = {
+    background: backgroundColor[500].base,
+    indent_guide: borderColor.muted,
+    indent_guide_active: borderColor.secondary,
+    line: {
+      active: withOpacity(fg[0], 0.07),
+      highlighted: withOpacity(fg[0], 0.12),
+      inserted: backgroundColor.ok.active,
+      deleted: backgroundColor.error.active,
+      modified: backgroundColor.info.active,
+    },
+    highlight: {
+      selection: player[1].selectionColor,
+      occurrence: withOpacity(bg[0], 0.12),
+      activeOccurrence: withOpacity(bg[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
+      matchingBracket: backgroundColor[500].active,
+      match: withOpacity(colors.violet, 0.5),
+      activeMatch: withOpacity(colors.violet, 0.7),
+      related: backgroundColor[500].focused,
+    },
+    gutter: {
+      primary: textColor.placeholder,
+      active: textColor.active,
+    },
+  };
+
+  const syntax: Syntax = {
+    primary: {
+      color: fg[0],
+      weight: fontWeights.normal,
+    },
+    comment: {
+      color: fg[2],
+      weight: fontWeights.normal,
+    },
+    punctuation: {
+      color: fg[2],
+      weight: fontWeights.normal,
+    },
+    constant: {
+      color: fg[3],
+      weight: fontWeights.normal,
+    },
+    keyword: {
+      color: colors.blue,
+      weight: fontWeights.normal,
+    },
+    function: {
+      color: colors.yellow,
+      weight: fontWeights.normal,
+    },
+    type: {
+      color: colors.cyan,
+      weight: fontWeights.normal,
+    },
+    variant: {
+      color: colors.blue,
+      weight: fontWeights.normal,
+    },
+    property: {
+      color: colors.blue,
+      weight: fontWeights.normal,
+    },
+    enum: {
+      color: colors.orange,
+      weight: fontWeights.normal,
+    },
+    operator: {
+      color: colors.orange,
+      weight: fontWeights.normal,
+    },
+    string: {
+      color: colors.orange,
+      weight: fontWeights.normal,
+    },
+    number: {
+      color: colors.green,
+      weight: fontWeights.normal,
+    },
+    boolean: {
+      color: colors.green,
+      weight: fontWeights.normal,
+    },
+    predictive: {
+      color: textColor.muted,
+      weight: fontWeights.normal,
+    },
+    title: {
+      color: colors.yellow,
+      weight: fontWeights.bold,
+    },
+    emphasis: {
+      color: textColor.feature,
+      weight: fontWeights.normal,
+    },
+    "emphasis.strong": {
+      color: textColor.feature,
+      weight: fontWeights.bold,
+    },
+    linkUri: {
+      color: colors.green,
+      weight: fontWeights.normal,
+      underline: true,
+    },
+    linkText: {
+      color: colors.orange,
+      weight: fontWeights.normal,
+      italic: true,
+    },
+  };
+
+  const shadowAlpha: NumberToken = {
+    value: 0.32,
+    type: "number",
+  };
+
+  return {
+    name,
+    backgroundColor,
+    borderColor,
+    textColor,
+    iconColor: textColor,
+    editor,
+    syntax,
+    player,
+    shadowAlpha,
+  };
+}