Convert chat panel

styles/app.ts

@@ -4,6 +4,7 @@ import workspace from "./workspace";
 import editor from "./editor";
 import Theme from "./theme";
 import projectPanel from "./project-panel";
+import chatPanel from "./chat-panel";
 
 export const panel = {
   padding: { top: 12, left: 12, bottom: 12, right: 12 },
@@ -30,116 +31,7 @@ export default function app(theme: Theme): Object {
       },
     },
     projectPanel: projectPanel(theme),
-    chatPanel: {
+    chatPanel: chatPanel(theme),
-      extends: "$panel",
-      channelName: {
-        extends: "$text.primary",
-        weight: "bold",
-      },
-      channelNameHash: {
-        text: "$text.muted",
-        padding: {
-          right: 8,
-        },
-      },
-      channelSelect: {
-        activeItem: {
-          extends: "$chatPanel.channel_select.item",
-          name: "$text.primary",
-        },
-        header: {
-          extends: "$chat_panel.channel_select.activeItem",
-          padding: {
-            bottom: 4,
-            left: 0,
-          },
-        },
-        hoveredActiveItem: {
-          extends: "$chatPanel.channelSelect.hoveredItem",
-          name: "$text.primary",
-        },
-        hoveredItem: {
-          background: "$state.hover",
-          cornerRadius: 6,
-          extends: "$chat_panel.channelSelect.item",
-        },
-        item: {
-          name: "$text.secondary",
-          padding: 4,
-          hash: {
-            extends: "$text.muted",
-            margin: {
-              right: 8,
-            },
-          },
-        },
-        menu: {
-          background: "$surface.500",
-          cornerRadius: 6,
-          padding: 4,
-          border: {
-            color: "$border.primary",
-            width: 1,
-          },
-          shadow: {
-            blur: 16,
-            color: "$shadow.0",
-            offset: [0, 2],
-          },
-        },
-      },
-      hoveredSignInPrompt: {
-        color: "$text.secondary.color",
-        extends: "$chatPanel.signInPrompt",
-      },
-      inputEditor: {
-        background: backgroundColor(theme, 300),
-        cornerRadius: 6,
-        placeholderText: "$text.muted",
-        selection: "$selection.host",
-        text: "$text.primary",
-        border: {
-          color: "$border.primary",
-          width: 1,
-        },
-        padding: {
-          bottom: 7,
-          left: 8,
-          right: 8,
-          top: 7,
-        },
-      },
-      message: {
-        body: "$text.secondary",
-        timestamp: "$text.muted",
-        padding: {
-          bottom: 6,
-        },
-        sender: {
-          extends: "$text.primary",
-          weight: "bold",
-          margin: {
-            right: 8,
-          },
-        },
-      },
-      pendingMessage: {
-        extends: "$chatPanel.message",
-        body: {
-          color: "$text.muted.color",
-        },
-        sender: {
-          color: "$text.muted.color",
-        },
-        timestamp: {
-          color: "$text.muted.color",
-        },
-      },
-      signInPrompt: {
-        extends: "$text.primary",
-        underline: true,
-      },
-    },
     contactsPanel: {
       extends: "$panel",
       hostRowHeight: 28,

styles/chat-panel.ts

@@ -0,0 +1,108 @@
+import { panel } from "./app";
+import {
+  backgroundColor,
+  border,
+  player,
+  shadow,
+  text,
+  TextColor,
+} from "./components";
+import Theme from "./theme";
+
+export default function chatPanel(theme: Theme) {
+  function channelSelectItem(
+    theme: Theme,
+    textColor: TextColor,
+    hovered: boolean
+  ) {
+    return {
+      name: text(theme, "sans", textColor),
+      padding: 4,
+      hash: {
+        ...text(theme, "sans", "muted"),
+        margin: {
+          right: 8,
+        },
+      },
+      background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
+      cornerRadius: hovered ? 6 : 0,
+    };
+  }
+
+  const message = {
+    body: text(theme, "sans", "secondary"),
+    timestamp: text(theme, "sans", "muted"),
+    padding: {
+      bottom: 6,
+    },
+    sender: {
+      ...text(theme, "sans", "primary", { weight: "bold" }),
+      margin: {
+        right: 8,
+      },
+    },
+  };
+
+  return {
+    ...panel,
+    channelName: text(theme, "sans", "primary", { weight: "bold" }),
+    channelNameHash: {
+      ...text(theme, "sans", "muted"),
+      padding: {
+        right: 8,
+      },
+    },
+    channelSelect: {
+      header: {
+        ...channelSelectItem(theme, "primary", false),
+        padding: {
+          bottom: 4,
+          left: 0,
+        },
+      },
+      item: channelSelectItem(theme, "secondary", false),
+      hoveredItem: channelSelectItem(theme, "secondary", true),
+      activeItem: channelSelectItem(theme, "primary", false),
+      hoveredActiveItem: channelSelectItem(theme, "primary", true),
+      menu: {
+        background: backgroundColor(theme, 500),
+        cornerRadius: 6,
+        padding: 4,
+        border: border(theme, "primary"),
+        shadow: shadow(theme),
+      },
+    },
+    signInPrompt: text(theme, "sans", "secondary", { underline: true }),
+    hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
+    message,
+    pendingMessage: {
+      ...message,
+      body: {
+        ...message.body,
+        color: theme.textColor.muted.value,
+      },
+      sender: {
+        ...message.sender,
+        color: theme.textColor.muted.value,
+      },
+      timestamp: {
+        ...message.timestamp,
+        color: theme.textColor.muted.value,
+      },
+    },
+    inputEditor: {
+      background: backgroundColor(theme, 300),
+      cornerRadius: 6,
+      text: text(theme, "mono", "primary"),
+      placeholderText: text(theme, "mono", "muted"),
+      selection: player(theme, 1).selection,
+      border: border(theme, "primary"),
+      padding: {
+        bottom: 7,
+        left: 8,
+        right: 8,
+        top: 7,
+      },
+    },
+  };
+}

styles/components.ts

@@ -9,7 +9,11 @@ export function text(
   theme: Theme,
   fontFamily: keyof typeof core.fontFamily,
   color: TextColor,
-  properties?: { size?: keyof typeof core["fontSize"]; weight?: Weight }
+  properties?: {
+    size?: keyof typeof core["fontSize"];
+    weight?: Weight;
+    underline?: boolean;
+  }
 ) {
   const sizeKey = properties.size || fontFamily === "sans" ? "sm" : "md";
   const size = core.fontSize[sizeKey].value;
@@ -74,7 +78,7 @@ export function backgroundColor(
   return theme.backgroundColor[name][state || "base"].value;
 }
 
-export function shadow(theme) {
+export function shadow(theme: Theme) {
   return {
     blur: 16,
     color: chroma("black").alpha(theme.shadowAlpha.value).hex(),