Squashed commit of the following:

commit 66d4cbae2ca6d7dd660688d7eb702ae55bf3e0ca
Author: Nate Butler <iamnbutler@gmail.com>
Date:   Tue Apr 5 13:33:33 2022 -0400

    WIP: Improve legibility of contactsPanel and fix errors

    Co-Authored-By: Keith Simmons <keith@the-simmons.net>

commit 000319c583801c5ba4ed7884bbf3da2a591e3f26
Author: Nate Butler <iamnbutler@gmail.com>
Date:   Tue Apr 5 13:13:32 2022 -0400

    WIP

styles/src/styleTree/components.ts

@@ -1,16 +1,9 @@
 import chroma from "chroma-js";
-import Theme, { BackgroundColor } from "../themes/theme";
-import { fontFamilies, fontSizes, FontFamily, FontWeight, FontSize } from "../tokens";
+import Theme, { BackgroundColorSet } from "../themes/theme";
+import { fontFamilies, fontSizes, FontWeight } from "../tokens";
 import { Color } from "../utils/color";
 
 export type TextColor = keyof Theme["textColor"];
-export interface Text {
-    family: FontFamily,
-    color: Color,
-    size: FontSize,
-    weight?: FontWeight,
-    underline?: boolean,
-}
 export function text(
     theme: Theme,
     fontFamily: keyof typeof fontFamilies,
@@ -20,18 +13,20 @@ export function text(
         weight?: FontWeight;
         underline?: boolean;
     }
-): Text {
-    let extraProperties = {
-        ...properties,
-        size: fontSizes[properties.size || "sm"].value,
-    };
+) {
+    let size = fontSizes[properties?.size || "sm"].value;
     return {
         family: fontFamilies[fontFamily].value,
         color: theme.textColor[color].value,
-        ...extraProperties,
+        ...properties,
+        size,
     };
 }
+export function textColor(theme: Theme, color: TextColor) {
+    return theme.textColor[color].value;
+}
 
+export type BorderColor = keyof Theme["borderColor"];
 export interface BorderOptions {
     width?: number;
     top?: boolean;
@@ -42,7 +37,7 @@ export interface BorderOptions {
 }
 export function border(
     theme: Theme,
-    color: keyof Theme["borderColor"],
+    color: BorderColor,
     options?: BorderOptions
 ) {
     return {
@@ -51,25 +46,25 @@ export function border(
         ...options,
     };
 }
-
-export function borderColor(theme: Theme, color: keyof Theme["borderColor"]) {
+export function borderColor(theme: Theme, color: BorderColor) {
     return theme.borderColor[color].value;
 }
 
-export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) {
+export type IconColor = keyof Theme["iconColor"];
+export function iconColor(theme: Theme, color: IconColor) {
     return theme.iconColor[color].value;
 }
 
+export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export interface Player {
     selection: {
         cursor: Color;
         selection: Color;
     };
 }
-
 export function player(
     theme: Theme,
-    playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+    playerNumber: PlayerIndex,
 ): Player {
     return {
         selection: {
@@ -79,10 +74,12 @@ export function player(
     };
 }
 
+export type BackgroundColor = keyof Theme["backgroundColor"];
+export type BackgroundState = keyof BackgroundColorSet;
 export function backgroundColor(
     theme: Theme,
-    name: keyof Theme["backgroundColor"],
-    state?: keyof BackgroundColor
+    name: BackgroundColor,
+    state?: BackgroundState,
 ): Color {
     return theme.backgroundColor[name][state || "base"].value;
 }

styles/src/styleTree/contactsPanel.ts

@@ -1,6 +1,6 @@
 import Theme from "../themes/theme";
 import { panel } from "./app";
-import { borderColor, text } from "./components";
+import { backgroundColor, borderColor, text } from "./components";
 
 export default function(theme: Theme) {
     const project = {
@@ -11,7 +11,7 @@ export default function(theme: Theme) {
             width: 14,
         },
         name: {
-            ...text(theme, "mono", "secondary"),
+            ...text(theme, "mono", "placeholder", { size: "sm" }),
             margin: {
                 right: 6,
             },
@@ -23,9 +23,11 @@ export default function(theme: Theme) {
 
     const sharedProject = {
         ...project,
+        background: backgroundColor(theme, 300),
+        cornerRadius: 6,
         name: {
             ...project.name,
-            ...text(theme, "mono", "primary"),
+            ...text(theme, "mono", "secondary", { size: "sm" }),
         },
     };
 
@@ -39,7 +41,7 @@ export default function(theme: Theme) {
             width: 18,
         },
         hostUsername: {
-            ...text(theme, "mono", "muted"),
+            ...text(theme, "mono", "primary", { size: "sm" }),
             padding: {
                 left: 8,
             },
@@ -48,13 +50,12 @@ export default function(theme: Theme) {
         sharedProject,
         hoveredSharedProject: {
             ...sharedProject,
-            background: theme.editor.line.active.value,
+            background: backgroundColor(theme, 300, "hovered"),
             cornerRadius: 6,
         },
         unsharedProject: project,
         hoveredUnsharedProject: {
             ...project,
-            background: theme.editor.line.active.value,
             cornerRadius: 6,
         },
     }

styles/src/styleTree/search.ts

@@ -27,7 +27,7 @@ export default function search(theme: Theme) {
         placeholderText: text(theme, "mono", "placeholder"),
         selection: player(theme, 1).selection,
         text: text(theme, "mono", "primary"),
-        border: border(theme, "primary"),
+        border: border(theme, "secondary"),
         margin: {
             right: 5,
         },

styles/src/styleTree/workspace.ts

@@ -79,7 +79,7 @@ export default function workspace(theme: Theme) {
             border: border(theme, "primary", { left: true }),
         },
         paneDivider: {
-            color: border(theme, "primary").color,
+            color: border(theme, "secondary").color,
             width: 1,
         },
         status_bar: {
@@ -98,7 +98,7 @@ export default function workspace(theme: Theme) {
             height: 32,
             background: backgroundColor(theme, 100),
             shareIconColor: iconColor(theme, "secondary"),
-            shareIconActiveColor: iconColor(theme, "active"),
+            shareIconActiveColor: iconColor(theme, "feature"),
             title: text(theme, "sans", "primary"),
             avatar: {
                 cornerRadius: 10,