WIP

styles/buildThemes.ts

@@ -1,8 +1,8 @@
 import * as fs from "fs";
 import * as path from "path";
+import app from "./styleTree/app";
 import dark from "./themes/dark";
 import light from "./themes/light";
-import app from "./styleTree/app";
 import decamelizeTree from "./utils/decamelizeTree";
 
 const themes = [dark, light];

styles/styleTree/chatPanel.ts

@@ -31,7 +31,7 @@ export default function chatPanel(theme: Theme) {
 
   const message = {
     body: text(theme, "sans", "secondary"),
-    timestamp: text(theme, "sans", "muted"),
+    timestamp: text(theme, "sans", "muted", { size: "sm" }),
     padding: {
       bottom: 6,
     },
@@ -91,12 +91,12 @@ export default function chatPanel(theme: Theme) {
       },
     },
     inputEditor: {
-      background: backgroundColor(theme, 300),
+      background: backgroundColor(theme, 500),
       cornerRadius: 6,
       text: text(theme, "mono", "primary"),
-      placeholderText: text(theme, "mono", "muted"),
+      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
       selection: player(theme, 1).selection,
-      border: border(theme, "primary"),
+      border: border(theme, "secondary"),
       padding: {
         bottom: 7,
         left: 8,

styles/styleTree/editor.ts

@@ -5,7 +5,7 @@ import {
     iconColor,
     player,
     text,
-    TextColor,
+    TextColor
 } from "./components";
 
 export default function editor(theme: Theme) {
@@ -39,7 +39,7 @@ export default function editor(theme: Theme) {
 
     return {
         textColor: theme.textColor.secondary.value,
-        background: backgroundColor(theme, 300),
+        background: backgroundColor(theme, 500),
         activeLineBackground: theme.editor.line.active.value,
         codeActionsIndicator: iconColor(theme, "secondary"),
         diffBackgroundDeleted: backgroundColor(theme, "error"),
@@ -47,7 +47,7 @@ export default function editor(theme: Theme) {
         documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
         documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
         errorColor: theme.textColor.error.value,
-        gutterBackground: backgroundColor(theme, 300),
+        gutterBackground: backgroundColor(theme, 500),
         gutterPaddingFactor: 2.5,
         highlightedLineBackground: theme.editor.line.highlighted.value,
         lineNumber: theme.editor.gutter.primary.value,
@@ -65,14 +65,14 @@ export default function editor(theme: Theme) {
             player(theme, 8).selection,
         ],
         autocomplete: {
-            background: backgroundColor(theme, 100),
+            background: backgroundColor(theme, 500),
             cornerRadius: 6,
             padding: 6,
             border: border(theme, "secondary"),
             item: autocompleteItem,
             hoveredItem: {
                 ...autocompleteItem,
-                background: backgroundColor(theme, 100, "hovered"),
+                background: backgroundColor(theme, 500, "hovered"),
             },
             margin: {
                 left: -14,
@@ -83,11 +83,11 @@ export default function editor(theme: Theme) {
             },
             selectedItem: {
                 ...autocompleteItem,
-                background: backgroundColor(theme, 100, "active"),
+                background: backgroundColor(theme, 500, "active"),
             },
         },
         diagnosticHeader: {
-            background: theme.editor.background.value,
+            background: backgroundColor(theme, 300),
             iconWidthFactor: 1.5,
             textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
             border: border(theme, "secondary", {

styles/styleTree/projectPanel.ts

@@ -1,7 +1,7 @@
-import { panel } from "./app";
-import { backgroundColor, iconColor, text, TextColor } from "./components";
 import Theme from "../themes/theme";
 import { Color } from "../utils/color";
+import { panel } from "./app";
+import { backgroundColor, iconColor, text, TextColor } from "./components";
 
 export default function projectPanel(theme: Theme) {
   function entry(theme: Theme, textColor: TextColor, background?: Color) {
@@ -11,7 +11,7 @@ export default function projectPanel(theme: Theme) {
       iconColor: iconColor(theme, "muted"),
       iconSize: 8,
       iconSpacing: 8,
-      text: text(theme, "mono", textColor),
+      text: text(theme, "mono", textColor, { size: "sm" }),
     };
   }
 
@@ -31,6 +31,7 @@ export default function projectPanel(theme: Theme) {
     ),
     padding: {
       top: 6,
+      left: 12,
     },
   };
 }

styles/styleTree/workspace.ts

@@ -12,14 +12,15 @@ export default function workspace(theme: Theme) {
   };
 
   const tab = {
-    height: 34,
+    height: 32,
+    background: backgroundColor(theme, 300),
     iconClose: iconColor(theme, "secondary"),
     iconCloseActive: iconColor(theme, "active"),
     iconConflict: iconColor(theme, "warning"),
     iconDirty: iconColor(theme, "info"),
     iconWidth: 8,
     spacing: 10,
-    text: text(theme, "mono", "secondary"),
+    text: text(theme, "mono", "secondary", { size: "sm" }),
     border: border(theme, "primary", {
       left: true,
       bottom: true,
@@ -33,8 +34,8 @@ export default function workspace(theme: Theme) {
 
   const activeTab = {
     ...tab,
-    background: backgroundColor(theme, 300),
-    text: text(theme, "mono", "primary"),
+    background: backgroundColor(theme, 500),
+    text: text(theme, "mono", "active", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false,
@@ -48,11 +49,12 @@ export default function workspace(theme: Theme) {
   };
   const sidebar = {
     width: 30,
+    background: backgroundColor(theme, 300),
     border: border(theme, "primary", { right: true }),
     item: sidebarItem,
     activeItem: {
       ...sidebarItem,
-      iconColor: iconColor(theme, "primary"),
+      iconColor: iconColor(theme, "active"),
     },
     resizeHandle: {
       background: border(theme, "primary").color,
@@ -63,7 +65,7 @@ export default function workspace(theme: Theme) {
   };
 
   return {
-    background: backgroundColor(theme, 500),
+    background: backgroundColor(theme, 300),
     leaderBorderOpacity: 0.7,
     leaderBorderWidth: 2.0,
     tab,
@@ -94,6 +96,7 @@ export default function workspace(theme: Theme) {
     titlebar: {
       avatarWidth: 18,
       height: 32,
+      background: backgroundColor(theme, 100),
       shareIconColor: iconColor(theme, "secondary"),
       shareIconActiveColor: iconColor(theme, "active"),
       title: text(theme, "sans", "primary"),
@@ -107,29 +110,32 @@ export default function workspace(theme: Theme) {
       avatarRibbon: {
         height: 3,
         width: 12,
+        // TODO: The background for this ideally should be 
+        // set with a token, not hardcoded in rust
       },
       border: border(theme, "primary", { bottom: true }),
       signInPrompt,
       hoveredSignInPrompt: {
         ...signInPrompt,
         ...text(theme, "mono", "active"),
+        size: 13,
       },
       offlineIcon: {
-        color: iconColor(theme, "muted"),
+        color: iconColor(theme, "secondary"),
         width: 16,
         padding: {
           right: 4,
         },
       },
       outdatedWarning: {
-        ...text(theme, "sans", "muted"),
+        ...text(theme, "sans", "warning"),
         size: 13,
       },
     },
     toolbar: {
       height: 34,
-      background: backgroundColor(theme, 300),
-      border: border(theme, "primary", { bottom: true }),
+      background: backgroundColor(theme, 500),
+      border: border(theme, "muted", { bottom: true }),
       itemSpacing: 8,
       padding: { left: 16, right: 8, top: 4, bottom: 4 },
     },
@@ -138,8 +144,7 @@ export default function workspace(theme: Theme) {
       padding: { left: 6 },
     },
     disconnectedOverlay: {
-      ...text(theme, "sans", "primary"),
-      color: "#ffffff",
+      ...text(theme, "sans", "active"),
       background: "#000000aa",
     },
   };

styles/themes/dark.ts

@@ -3,10 +3,10 @@ import Theme, { Syntax } from "./theme";
 
 const backgroundColor = {
     100: {
-        base: colors.neutral[750],
-        hovered: colors.neutral[750],
-        active: colors.neutral[750],
-        focused: colors.neutral[750],
+        base: colors.neutral[700],
+        hovered: colors.neutral[700],
+        active: colors.neutral[700],
+        focused: colors.neutral[700],
     },
     300: {
         base: colors.neutral[800],
@@ -52,10 +52,10 @@ const borderColor = {
     muted: colors.neutral[750],
     focused: colors.neutral[100],
     active: colors.neutral[500],
-    ok: colors.neutral[1000],
-    error: colors.neutral[1000],
-    warning: colors.neutral[1000],
-    info: colors.neutral[1000],
+    ok: colors.green[500],
+    error: colors.red[500],
+    warning: colors.amber[500],
+    info: colors.blue[500],
 };
 
 const textColor = {
@@ -65,7 +65,7 @@ const textColor = {
     placeholder: colors.neutral[750],
     active: colors.neutral[0],
     //TODO: (design) define feature and it's correct value
-    feature: colors.sky[500],
+    feature: colors.lime[400],
     ok: colors.green[600],
     error: colors.red[400],
     warning: colors.amber[300],
@@ -81,9 +81,9 @@ const iconColor = {
     //TODO: (design) define feature and it's correct value
     feature: colors.sky[500],
     ok: colors.green[600],
-    error: colors.red[400],
-    warning: colors.amber[300],
-    info: colors.blue[500],
+    error: colors.red[500],
+    warning: colors.amber[400],
+    info: colors.blue[600],
 };
 
 const player = {

styles/themes/light.ts

@@ -5,73 +5,72 @@ import Theme, { Syntax } from "./theme";
 
 const backgroundColor = {
   100: {
-      base: colors.neutral[750],
-      hovered: colors.neutral[750],
-      active: colors.neutral[750],
-      focused: colors.neutral[750],
+    base: colors.neutral[100],
+    hovered: colors.neutral[150],
+    active: colors.neutral[200],
+    focused: colors.neutral[150],
   },
   300: {
-      base: colors.neutral[800],
-      hovered: colors.neutral[800],
-      active: colors.neutral[800],
-      focused: colors.neutral[800],
+    base: colors.neutral[50],
+    hovered: colors.neutral[100],
+    active: colors.neutral[150],
+    focused: colors.neutral[100],
   },
   500: {
-      base: colors.neutral[900],
-      hovered: colors.neutral[900],
-      active: colors.neutral[900],
-      focused: colors.neutral[900],
+    base: colors.neutral[0],
+    hovered: colors.neutral[50],
+    active: colors.neutral[100],
+    focused: colors.neutral[50],
   },
   ok: {
-      base: colors.green[600],
-      hovered: colors.green[600],
-      active: colors.green[600],
-      focused: colors.green[600],
+    base: colors.green[100],
+    hovered: colors.green[100],
+    active: colors.green[100],
+    focused: colors.green[100],
   },
   error: {
-      base: colors.red[400],
-      hovered: colors.red[400],
-      active: colors.red[400],
-      focused: colors.red[400],
+    base: colors.red[100],
+    hovered: colors.red[100],
+    active: colors.red[100],
+    focused: colors.red[100],
   },
   warning: {
-      base: colors.amber[300],
-      hovered: colors.amber[300],
-      active: colors.amber[300],
-      focused: colors.amber[300],
+    base: colors.yellow[100],
+    hovered: colors.yellow[100],
+    active: colors.yellow[100],
+    focused: colors.yellow[100],
   },
   info: {
-      base: colors.blue[500],
-      hovered: colors.blue[500],
-      active: colors.blue[500],
-      focused: colors.blue[500],
+    base: colors.blue[100],
+    hovered: colors.blue[100],
+    active: colors.blue[100],
+    focused: colors.blue[100],
   },
 };
 
 const borderColor = {
-  primary: colors.neutral[850],
-  secondary: colors.neutral[700],
-  muted: colors.neutral[750],
+  primary: colors.neutral[200],
+  secondary: colors.neutral[100],
+  muted: colors.neutral[50],
   focused: colors.neutral[100],
-  active: colors.neutral[500],
-  ok: colors.neutral[1000],
-  error: colors.neutral[1000],
-  warning: colors.neutral[1000],
-  info: colors.neutral[1000],
+  active: colors.neutral[250],
+  ok: colors.green[200],
+  error: colors.red[200],
+  warning: colors.yellow[200],
+  info: colors.blue[200],
 };
 
 const textColor = {
-  primary: colors.neutral[150],
-  secondary: colors.neutral[350],
-  muted: colors.neutral[550],
-  placeholder: colors.neutral[750],
-  active: colors.neutral[0],
-  //TODO: (design) define feature and it's correct value
-  feature: colors.sky[500],
-  ok: colors.green[600],
-  error: colors.red[400],
-  warning: colors.amber[300],
-  info: colors.blue[500],
+  primary: colors.neutral[800],
+  secondary: colors.neutral[700],
+  muted: colors.neutral[600],
+  placeholder: colors.neutral[500],
+  active: colors.neutral[900],
+  feature: colors.blue[600],
+  ok: colors.green[800],
+  error: colors.red[800],
+  warning: colors.yellow[800],
+  info: colors.blue[800],
 };
 
 const iconColor = {
@@ -79,63 +78,62 @@ const iconColor = {
   secondary: colors.neutral[500],
   muted: colors.neutral[600],
   placeholder: colors.neutral[700],
-  active: colors.neutral[50],
-  //TODO: (design) define feature and it's correct value
-  feature: colors.sky[500],
+  active: colors.neutral[900],
+  feature: colors.sky[600],
   ok: colors.green[600],
-  error: colors.red[400],
-  warning: colors.amber[300],
-  info: colors.blue[500],
+  error: colors.red[600],
+  warning: colors.yellow[400],
+  info: colors.blue[600],
 };
 
 const player = {
   1: {
-      baseColor: colors.blue[600],
-      cursorColor: colors.blue[600],
-      selectionColor: colors.blue[600],
-      borderColor: colors.blue[600],
+    baseColor: colors.blue[600],
+    cursorColor: colors.blue[500],
+    selectionColor: colors.blue[100],
+    borderColor: colors.blue[500],
   },
   2: {
-      baseColor: colors.indigo[500],
-      cursorColor: colors.indigo[500],
-      selectionColor: colors.indigo[500],
-      borderColor: colors.indigo[500],
+    baseColor: colors.indigo[500],
+    cursorColor: colors.indigo[500],
+    selectionColor: colors.indigo[100],
+    borderColor: colors.indigo[500],
   },
   3: {
-      baseColor: colors.green[500],
-      cursorColor: colors.green[500],
-      selectionColor: colors.green[500],
-      borderColor: colors.green[500],
+    baseColor: colors.green[500],
+    cursorColor: colors.green[500],
+    selectionColor: colors.green[100],
+    borderColor: colors.green[500],
   },
   4: {
-      baseColor: colors.orange[500],
-      cursorColor: colors.orange[500],
-      selectionColor: colors.orange[500],
-      borderColor: colors.orange[500],
+    baseColor: colors.orange[500],
+    cursorColor: colors.orange[500],
+    selectionColor: colors.orange[100],
+    borderColor: colors.orange[500],
   },
   5: {
-      baseColor: colors.purple[500],
-      cursorColor: colors.purple[500],
-      selectionColor: colors.purple[500],
-      borderColor: colors.purple[500],
+    baseColor: colors.purple[500],
+    cursorColor: colors.purple[500],
+    selectionColor: colors.purple[100],
+    borderColor: colors.purple[500],
   },
   6: {
-      baseColor: colors.teal[400],
-      cursorColor: colors.teal[400],
-      selectionColor: colors.teal[400],
-      borderColor: colors.teal[400],
+    baseColor: colors.teal[400],
+    cursorColor: colors.teal[400],
+    selectionColor: colors.teal[100],
+    borderColor: colors.teal[400],
   },
   7: {
-      baseColor: colors.pink[400],
-      cursorColor: colors.pink[400],
-      selectionColor: colors.pink[400],
-      borderColor: colors.pink[400],
+    baseColor: colors.pink[400],
+    cursorColor: colors.pink[400],
+    selectionColor: colors.pink[100],
+    borderColor: colors.pink[400],
   },
   8: {
-      baseColor: colors.yellow[400],
-      cursorColor: colors.yellow[400],
-      selectionColor: colors.yellow[400],
-      borderColor: colors.yellow[400],
+    baseColor: colors.yellow[400],
+    cursorColor: colors.yellow[400],
+    selectionColor: colors.yellow[100],
+    borderColor: colors.yellow[400],
   },
 };
 
@@ -145,118 +143,118 @@ const editor = {
   indent_guide: borderColor.muted,
   indent_guide_active: borderColor.secondary,
   line: {
-      active: colors.neutral[0],
-      highlighted: colors.neutral[0],
-      inserted: backgroundColor.ok.active,
-      deleted: backgroundColor.error.active,
-      modified: backgroundColor.info.active,
+    active: colors.neutral[0],
+    highlighted: colors.neutral[0],
+    inserted: backgroundColor.ok.active,
+    deleted: backgroundColor.error.active,
+    modified: backgroundColor.info.active,
   },
   highlight: {
-      selection: player[1].selectionColor,
-      occurrence: backgroundColor[500].active,
-      activeOccurrence: colors.neutral[0],
-      matchingBracket: colors.neutral[0],
-      match: colors.neutral[0],
-      activeMatch: colors.neutral[0],
-      related: colors.neutral[0],
+    selection: player[1].selectionColor,
+    occurrence: backgroundColor[500].active,
+    activeOccurrence: colors.neutral[0],
+    matchingBracket: colors.neutral[0],
+    match: colors.neutral[0],
+    activeMatch: colors.neutral[0],
+    related: colors.neutral[0],
   },
   gutter: {
-      primary: colors.neutral[0],
-      active: colors.neutral[0],
+    primary: colors.neutral[0],
+    active: colors.neutral[0],
   },
 };
 
 const syntax: Syntax = {
   primary: {
-      color: textColor.primary,
-      weight: fontWeights.normal,
+    color: textColor.primary,
+    weight: fontWeights.normal,
   },
   comment: {
-      color: colors.lime[200],
-      weight: fontWeights.normal,
+    color: colors.lime[200],
+    weight: fontWeights.normal,
   },
   punctuation: {
-      color: textColor.primary,
-      weight: fontWeights.normal,
+    color: textColor.primary,
+    weight: fontWeights.normal,
   },
   constant: {
-      color: colors.neutral[150],
-      weight: fontWeights.normal,
+    color: colors.neutral[150],
+    weight: fontWeights.normal,
   },
   keyword: {
-      color: colors.sky[400],
-      weight: fontWeights.normal,
+    color: colors.sky[400],
+    weight: fontWeights.normal,
   },
   function: {
-      color: colors.yellow[200],
-      weight: fontWeights.normal,
+    color: colors.yellow[200],
+    weight: fontWeights.normal,
   },
   type: {
-      color: colors.teal[300],
-      weight: fontWeights.normal,
+    color: colors.teal[300],
+    weight: fontWeights.normal,
   },
   variant: {
-      color: colors.teal[300],
-      weight: fontWeights.normal,
+    color: colors.teal[300],
+    weight: fontWeights.normal,
   },
   property: {
-      color: colors.sky[300],
-      weight: fontWeights.normal,
+    color: colors.sky[300],
+    weight: fontWeights.normal,
   },
   enum: {
-      color: colors.sky[400],
-      weight: fontWeights.normal,
+    color: colors.sky[400],
+    weight: fontWeights.normal,
   },
   operator: {
-      color: colors.sky[400],
-      weight: fontWeights.normal,
+    color: colors.sky[400],
+    weight: fontWeights.normal,
   },
   string: {
-      color: colors.orange[300],
-      weight: fontWeights.normal,
+    color: colors.orange[300],
+    weight: fontWeights.normal,
   },
   number: {
-      color: colors.neutral[150],
-      weight: fontWeights.normal,
+    color: colors.neutral[150],
+    weight: fontWeights.normal,
   },
   boolean: {
-      color: colors.neutral[150],
-      weight: fontWeights.normal,
+    color: colors.neutral[150],
+    weight: fontWeights.normal,
   },
   predictive: {
-      color: textColor.muted,
-      weight: fontWeights.normal,
+    color: textColor.muted,
+    weight: fontWeights.normal,
   },
   title: {
-      color: colors.sky[500],
-      weight: fontWeights.bold,
+    color: colors.sky[500],
+    weight: fontWeights.bold,
   },
   emphasis: {
-      color: textColor.active,
-      weight: fontWeights.normal,
+    color: textColor.active,
+    weight: fontWeights.normal,
   },
   emphasisStrong: {
-      color: textColor.active,
-      weight: fontWeights.bold,
+    color: textColor.active,
+    weight: fontWeights.bold,
   },
   linkUrl: {
-      color: colors.lime[500],
-      weight: fontWeights.normal,
-      // TODO: add underline
+    color: colors.lime[500],
+    weight: fontWeights.normal,
+    // TODO: add underline
   },
   linkText: {
-      color: colors.orange[500],
-      weight: fontWeights.normal,
-      // TODO: add italic
+    color: colors.orange[500],
+    weight: fontWeights.normal,
+    // TODO: add italic
   },
   listMarker: {
-      color: colors.sky[400],
-      weight: fontWeights.normal,
-  }
+    color: colors.sky[400],
+    weight: fontWeights.normal,
+  },
 };
 
 const shadowAlpha: NumberToken = {
-  value: 0.32,
+  value: 0.12,
   type: "number",
 };
 

styles/themes/theme.ts

@@ -1,4 +1,4 @@
-import { FontWeightToken, ColorToken, NumberToken } from "../tokens";
+import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
 
 export interface SyntaxHighlightStyle {
     color: ColorToken;

styles/tokens.ts

@@ -72,7 +72,7 @@ export interface ColorToken {
   step?: number,
 }
 export const colors = {
-  neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }),
+  neutral: colorRamp(["white", "black"], { steps: 19, increment: 50 }),
   rose: colorRamp("#F43F5EFF"),
   red: colorRamp("#EF4444FF"),
   orange: colorRamp("#F97316FF"),