WIP

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",
     },
   };