Organize misc files into `theme`, `themes` and `styleTrees` (#2587)

Nate Butler created 2 years ago

We've accumulated a number of miscellaneous folders in the styles
folder. Simplifying these down to `theme`, `themes` and `styleTrees`.

Release Notes:

- N/A (No public facing changes)

Change summary

styles/src/buildThemes.ts                         |   6 
styles/src/common.ts                              |   4 
styles/src/styleTree/app.ts                       |   2 
styles/src/styleTree/assistant.ts                 | 156 ++++++++--------
styles/src/styleTree/commandPalette.ts            |   4 
styles/src/styleTree/components.ts                |   2 
styles/src/styleTree/contactFinder.ts             |   2 
styles/src/styleTree/contactList.ts               |   2 
styles/src/styleTree/contactNotification.ts       |   2 
styles/src/styleTree/contactsPopover.ts           |   2 
styles/src/styleTree/contextMenu.ts               |   2 
styles/src/styleTree/copilot.ts                   |   2 
styles/src/styleTree/editor.ts                    |  15 
styles/src/styleTree/feedback.ts                  |   2 
styles/src/styleTree/hoverPopover.ts              |   2 
styles/src/styleTree/incomingCallNotification.ts  |   2 
styles/src/styleTree/picker.ts                    |   4 
styles/src/styleTree/projectDiagnostics.ts        |   2 
styles/src/styleTree/projectPanel.ts              |  14 
styles/src/styleTree/projectSharedNotification.ts |   2 
styles/src/styleTree/search.ts                    |   6 
styles/src/styleTree/sharedScreen.ts              |   2 
styles/src/styleTree/simpleMessageNotification.ts |   2 
styles/src/styleTree/statusBar.ts                 |   2 
styles/src/styleTree/tabBar.ts                    |   6 
styles/src/styleTree/terminal.ts                  |   2 
styles/src/styleTree/tooltip.ts                   |   2 
styles/src/styleTree/updateNotification.ts        |   2 
styles/src/styleTree/welcome.ts                   |   4 
styles/src/styleTree/workspace.ts                 |   8 
styles/src/theme/color.ts                         |   0 
styles/src/theme/colorScheme.ts                   |   2 
styles/src/theme/index.ts                         |   2 
styles/src/theme/ramps.ts                         |   2 
styles/src/theme/syntax.ts                        |   2 
styles/src/theme/themeConfig.ts                   |   2 
styles/src/themes/index.ts                        |   2 
37 files changed, 141 insertions(+), 136 deletions(-)

Detailed changes

styles/src/buildThemes.ts

@@ -2,7 +2,7 @@ import * as fs from "fs"
 import { tmpdir } from "os"
 import * as path from "path"
 import app from "./styleTree/app"
-import { ColorScheme, createColorScheme } from "./themes/common/colorScheme"
+import { ColorScheme, createColorScheme } from "./theme/colorScheme"
 import snakeCase from "./utils/snakeCase"
 import { themes } from "./themes"
 
@@ -35,7 +35,9 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
     }
 }
 
-const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme))
+const colorSchemes: ColorScheme[] = themes.map((theme) =>
+    createColorScheme(theme)
+)
 
 // Write new themes to theme directory
 writeThemes(colorSchemes, `${assetsDirectory}/themes`)

styles/src/common.ts

@@ -1,5 +1,5 @@
 import chroma from "chroma-js"
-export * from "./themes/common"
+export * from "./theme"
 export { chroma }
 
 export const fontFamilies = {
@@ -27,7 +27,7 @@ export type FontWeight =
     | "bold"
     | "extra_bold"
     | "black"
-    
+
 export const fontWeights: { [key: string]: FontWeight } = {
     thin: "thin",
     extra_light: "extra_light",

styles/src/styleTree/app.ts

@@ -18,7 +18,7 @@ import tooltip from "./tooltip"
 import terminal from "./terminal"
 import contactList from "./contactList"
 import incomingCallNotification from "./incomingCallNotification"
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import feedback from "./feedback"
 import welcome from "./welcome"
 import copilot from "./copilot"

styles/src/styleTree/assistant.ts

@@ -1,85 +1,85 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
 
 export default function assistant(colorScheme: ColorScheme) {
-    const layer = colorScheme.highest;
+    const layer = colorScheme.highest
     return {
-      container: {
-        background: editor(colorScheme).background,
-        padding: { left: 12 }
-      },
-      header: {
-        border: border(layer, "default", { bottom: true, top: true }),
-        margin: { bottom: 6, top: 6 },
-        background: editor(colorScheme).background
-      },
-      userSender: {
-        ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
-      },
-      assistantSender: {
-        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
-      },
-      systemSender: {
-        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
-      },
-      sentAt: {
-        margin: { top: 2, left: 8 },
-        ...text(layer, "sans", "default", { size: "2xs" }),
-      },
-      modelInfoContainer: {
-        margin: { right: 16, top: 4 },
-      },
-      model: {
-        background: background(layer, "on"),
-        border: border(layer, "on", { overlay: true }),
-        padding: 4,
-        cornerRadius: 4,
-        ...text(layer, "sans", "default", { size: "xs" }),
-        hover: {
-          background: background(layer, "on", "hovered"),
-        }
-      },
-      remainingTokens: {
-        background: background(layer, "on"),
-        border: border(layer, "on", { overlay: true }),
-        padding: 4,
-        margin: { left: 4 },
-        cornerRadius: 4,
-        ...text(layer, "sans", "positive", { size: "xs" }),
-      },
-      noRemainingTokens: {
-        background: background(layer, "on"),
-        border: border(layer, "on", { overlay: true }),
-        padding: 4,
-        margin: { left: 4 },
-        cornerRadius: 4,
-        ...text(layer, "sans", "negative", { size: "xs" }),
-      },
-      errorIcon: {
-        margin: { left: 8 },
-        color: foreground(layer, "negative"),
-        width: 12,
-      },
-      apiKeyEditor: {
-          background: background(layer, "on"),
-          cornerRadius: 6,
-          text: text(layer, "mono", "on"),
-          placeholderText: text(layer, "mono", "on", "disabled", {
-              size: "xs",
-          }),
-          selection: colorScheme.players[0],
-          border: border(layer, "on"),
-          padding: {
-              bottom: 4,
-              left: 8,
-              right: 8,
-              top: 4,
-          },
-      },
-      apiKeyPrompt: {
-        padding: 10,
-        ...text(layer, "sans", "default", { size: "xs" }),
-      }
+        container: {
+            background: editor(colorScheme).background,
+            padding: { left: 12 },
+        },
+        header: {
+            border: border(layer, "default", { bottom: true, top: true }),
+            margin: { bottom: 6, top: 6 },
+            background: editor(colorScheme).background,
+        },
+        userSender: {
+            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
+        },
+        assistantSender: {
+            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
+        },
+        systemSender: {
+            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
+        },
+        sentAt: {
+            margin: { top: 2, left: 8 },
+            ...text(layer, "sans", "default", { size: "2xs" }),
+        },
+        modelInfoContainer: {
+            margin: { right: 16, top: 4 },
+        },
+        model: {
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            padding: 4,
+            cornerRadius: 4,
+            ...text(layer, "sans", "default", { size: "xs" }),
+            hover: {
+                background: background(layer, "on", "hovered"),
+            },
+        },
+        remainingTokens: {
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            padding: 4,
+            margin: { left: 4 },
+            cornerRadius: 4,
+            ...text(layer, "sans", "positive", { size: "xs" }),
+        },
+        noRemainingTokens: {
+            background: background(layer, "on"),
+            border: border(layer, "on", { overlay: true }),
+            padding: 4,
+            margin: { left: 4 },
+            cornerRadius: 4,
+            ...text(layer, "sans", "negative", { size: "xs" }),
+        },
+        errorIcon: {
+            margin: { left: 8 },
+            color: foreground(layer, "negative"),
+            width: 12,
+        },
+        apiKeyEditor: {
+            background: background(layer, "on"),
+            cornerRadius: 6,
+            text: text(layer, "mono", "on"),
+            placeholderText: text(layer, "mono", "on", "disabled", {
+                size: "xs",
+            }),
+            selection: colorScheme.players[0],
+            border: border(layer, "on"),
+            padding: {
+                bottom: 4,
+                left: 8,
+                right: 8,
+                top: 4,
+            },
+        },
+        apiKeyPrompt: {
+            padding: 10,
+            ...text(layer, "sans", "default", { size: "xs" }),
+        },
     }
 }

styles/src/styleTree/commandPalette.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
 
 export default function commandPalette(colorScheme: ColorScheme) {

styles/src/styleTree/components.ts

@@ -1,5 +1,5 @@
 import { fontFamilies, fontSizes, FontWeight } from "../common"
-import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
+import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
 
 function isStyleSet(key: any): key is StyleSets {
     return [

styles/src/styleTree/contactFinder.ts

@@ -1,5 +1,5 @@
 import picker from "./picker"
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function contactFinder(colorScheme: ColorScheme): any {

styles/src/styleTree/contactList.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 
 export default function contactsPanel(colorScheme: ColorScheme) {

styles/src/styleTree/contactNotification.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, foreground, text } from "./components"
 
 const avatarSize = 12

styles/src/styleTree/contactsPopover.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function contactsPopover(colorScheme: ColorScheme) {

styles/src/styleTree/contextMenu.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
 
 export default function contextMenu(colorScheme: ColorScheme) {

styles/src/styleTree/copilot.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
 
 export default function copilot(colorScheme: ColorScheme) {

styles/src/styleTree/editor.ts

@@ -1,9 +1,9 @@
-import { withOpacity } from "../utils/color"
-import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
+import { withOpacity } from "../theme/color"
+import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import { buildSyntax } from "../themes/common/syntax"
+import { buildSyntax } from "../theme/syntax"
 
 export default function editor(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
@@ -186,7 +186,10 @@ export default function editor(colorScheme: ColorScheme) {
                 },
             },
             source: {
-                text: text(colorScheme.middle, "sans", { size: "sm", weight: "bold", }),
+                text: text(colorScheme.middle, "sans", {
+                    size: "sm",
+                    weight: "bold",
+                }),
             },
             message: {
                 highlightText: text(colorScheme.middle, "sans", {
@@ -250,7 +253,7 @@ export default function editor(colorScheme: ColorScheme) {
                     right: true,
                     left: true,
                     bottom: false,
-                }
+                },
             },
             git: {
                 deleted: isLight
@@ -262,7 +265,7 @@ export default function editor(colorScheme: ColorScheme) {
                 inserted: isLight
                     ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
                     : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
-            }
+            },
         },
         compositionMark: {
             underline: {

styles/src/styleTree/feedback.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function feedback(colorScheme: ColorScheme) {

styles/src/styleTree/hoverPopover.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function HoverPopover(colorScheme: ColorScheme) {

styles/src/styleTree/incomingCallNotification.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function incomingCallNotification(

styles/src/styleTree/picker.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
 
 export default function picker(colorScheme: ColorScheme): any {

styles/src/styleTree/projectDiagnostics.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, text } from "./components"
 
 export default function projectDiagnostics(colorScheme: ColorScheme) {

styles/src/styleTree/projectPanel.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
@@ -24,8 +24,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
                 : colorScheme.ramps.green(0.5).hex(),
             conflict: isLight
                 ? colorScheme.ramps.red(0.6).hex()
-                : colorScheme.ramps.red(0.5).hex()
-        }
+                : colorScheme.ramps.red(0.5).hex(),
+        },
     }
 
     let entry = {
@@ -44,7 +44,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "active"),
             text: text(layer, "mono", "active", { size: "sm" }),
         },
-        status
+        status,
     }
 
     return {
@@ -79,7 +79,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             text: text(layer, "mono", "on", { size: "sm" }),
             background: withOpacity(background(layer, "on"), 0.9),
             border: border(layer),
-            status
+            status,
         },
         ignoredEntry: {
             ...entry,
@@ -88,7 +88,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             active: {
                 ...entry.active,
                 iconColor: foreground(layer, "variant"),
-            }
+            },
         },
         cutEntry: {
             ...entry,

styles/src/styleTree/projectSharedNotification.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function projectSharedNotification(

styles/src/styleTree/search.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 
 export default function search(colorScheme: ColorScheme) {
@@ -30,7 +30,7 @@ export default function search(colorScheme: ColorScheme) {
         ...editor,
         minWidth: 100,
         maxWidth: 250,
-    };
+    }
 
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive

styles/src/styleTree/sharedScreen.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background } from "./components"
 
 export default function sharedScreen(colorScheme: ColorScheme) {

styles/src/styleTree/simpleMessageNotification.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 const headerPadding = 8

styles/src/styleTree/statusBar.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function statusBar(colorScheme: ColorScheme) {

styles/src/styleTree/tabBar.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 
 export default function tabBar(colorScheme: ColorScheme) {
@@ -96,7 +96,7 @@ export default function tabBar(colorScheme: ColorScheme) {
             },
             active: {
                 color: foreground(layer, "accent"),
-            }
+            },
         },
         paneButtonContainer: {
             background: tab.background,

styles/src/styleTree/terminal.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 
 export default function terminal(colorScheme: ColorScheme) {
     /**

styles/src/styleTree/tooltip.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
 export default function tooltip(colorScheme: ColorScheme) {

styles/src/styleTree/updateNotification.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../themes/common/colorScheme"
+import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
 
 const headerPadding = 8

styles/src/styleTree/welcome.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import {
     border,
     background,

styles/src/styleTree/workspace.ts

@@ -1,5 +1,5 @@
-import { ColorScheme } from "../themes/common/colorScheme"
-import { withOpacity } from "../utils/color"
+import { ColorScheme } from "../theme/colorScheme"
+import { withOpacity } from "../theme/color"
 import {
     background,
     border,
@@ -123,7 +123,7 @@ export default function workspace(colorScheme: ColorScheme) {
             cursor: "Arrow",
             background: isLight
                 ? withOpacity(background(colorScheme.lowest), 0.8)
-                : withOpacity(background(colorScheme.highest), 0.6)
+                : withOpacity(background(colorScheme.highest), 0.6),
         },
         zoomedPaneForeground: {
             margin: 16,
@@ -143,7 +143,7 @@ export default function workspace(colorScheme: ColorScheme) {
             },
             right: {
                 border: border(layer, { left: true }),
-            }
+            },
         },
         paneDivider: {
             color: borderColor(layer),

styles/src/utils/color.ts → styles/src/theme/color.ts

styles/src/themes/common/colorScheme.ts → styles/src/theme/colorScheme.ts

@@ -5,7 +5,7 @@ import {
     ThemeConfig,
     ThemeAppearance,
     ThemeConfigInputColors,
-} from "../../themeConfig"
+} from "./themeConfig"
 import { getRamps } from "./ramps"
 
 export interface ColorScheme {

styles/src/themes/common/index.ts → styles/src/theme/index.ts

@@ -1,4 +1,4 @@
 export * from "./colorScheme"
 export * from "./ramps"
 export * from "./syntax"
-export * from "../../themeConfig"
+export * from "./themeConfig"

styles/src/themes/common/ramps.ts → styles/src/theme/ramps.ts

@@ -3,7 +3,7 @@ import { RampSet } from "./colorScheme"
 import {
     ThemeConfigInputColors,
     ThemeConfigInputColorsKeys,
-} from "../../themeConfig"
+} from "./themeConfig"
 
 export function colorRamp(color: Color): Scale {
     let endColor = color.desaturate(1).brighten(5)

styles/src/themes/common/syntax.ts → styles/src/theme/syntax.ts

@@ -1,5 +1,5 @@
 import deepmerge from "deepmerge"
-import { FontWeight, fontWeights } from "../../common"
+import { FontWeight, fontWeights } from "../common"
 import { ColorScheme } from "./colorScheme"
 import chroma from "chroma-js"
 

styles/src/themeConfig.ts → styles/src/theme/themeConfig.ts

@@ -1,5 +1,5 @@
 import { Scale, Color } from "chroma-js"
-import { Syntax } from "./themes/common/syntax"
+import { Syntax } from "./syntax"
 
 interface ThemeMeta {
     /** The name of the theme */

styles/src/themes/index.ts

@@ -1,4 +1,4 @@
-import { ThemeConfig } from "./common"
+import { ThemeConfig } from "../theme"
 import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark"
 import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard"
 import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft"