Format

styles/src/build_themes.ts

@@ -21,9 +21,7 @@ function clear_themes(theme_directory: string) {
     }
 }
 
-const all_themes: Theme[] = themes.map((theme) =>
+const all_themes: Theme[] = themes.map((theme) => create_theme(theme))
-    create_theme(theme)
-)
 
 function write_themes(themes: Theme[], output_directory: string) {
     clear_themes(output_directory)
@@ -34,10 +32,7 @@ function write_themes(themes: Theme[], output_directory: string) {
         const style_tree = app()
         const style_tree_json = JSON.stringify(style_tree, null, 2)
         const temp_path = path.join(temp_directory, `${theme.name}.json`)
-        const out_path = path.join(
+        const out_path = path.join(output_directory, `${theme.name}.json`)
-            output_directory,
-            `${theme.name}.json`
-        )
         fs.writeFileSync(temp_path, style_tree_json)
         fs.renameSync(temp_path, out_path)
         console.log(`- ${out_path} created`)

styles/src/build_tokens.ts

@@ -83,8 +83,6 @@ function write_tokens(themes: Theme[], tokens_directory: string) {
     console.log(`- ${METADATA_FILE} created`)
 }
 
-const all_themes: Theme[] = themes.map((theme) =>
+const all_themes: Theme[] = themes.map((theme) => create_theme(theme))
-    create_theme(theme)
-)
 
 write_tokens(all_themes, TOKENS_DIRECTORY)

styles/src/component/button.ts

@@ -5,7 +5,7 @@ import { TextStyle, background } from "../style_tree/components"
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Button {
     export type Options = {
-        layer: Layer,
+        layer: Layer
         background: keyof Theme["lowest"]
         color: keyof Theme["lowest"]
         variant: Button.Variant
@@ -16,13 +16,13 @@ export namespace Button {
             bottom?: number
             left?: number
             right?: number
-        },
+        }
         states: {
-            enabled?: boolean,
+            enabled?: boolean
-            hovered?: boolean,
+            hovered?: boolean
-            pressed?: boolean,
+            pressed?: boolean
-            focused?: boolean,
+            focused?: boolean
-            disabled?: boolean,
+            disabled?: boolean
         }
     }
 
@@ -38,26 +38,26 @@ export namespace Button {
     export const CORNER_RADIUS = 6
 
     export const variant = {
-        Default: 'filled',
+        Default: "filled",
-        Outline: 'outline',
+        Outline: "outline",
-        Ghost: 'ghost'
+        Ghost: "ghost",
     } as const
 
-    export type Variant = typeof variant[keyof typeof variant]
+    export type Variant = (typeof variant)[keyof typeof variant]
 
     export const shape = {
-        Rectangle: 'rectangle',
+        Rectangle: "rectangle",
-        Square: 'square'
+        Square: "square",
     } as const
 
-    export type Shape = typeof shape[keyof typeof shape]
+    export type Shape = (typeof shape)[keyof typeof shape]
 
     export const size = {
         Small: "sm",
-        Medium: "md"
+        Medium: "md",
     } as const
 
-    export type Size = typeof size[keyof typeof size]
+    export type Size = (typeof size)[keyof typeof size]
 
     export type BaseStyle = {
         corder_radius: number
@@ -67,8 +67,8 @@ export namespace Button {
             bottom: number
             left: number
             right: number
-        },
+        }
-        margin: Button.Options['margin']
+        margin: Button.Options["margin"]
         button_height: number
     }
 
@@ -81,15 +81,18 @@ export namespace Button {
             shape: Button.shape.Rectangle,
             states: {
                 hovered: true,
-                pressed: true
+                pressed: true,
-            }
+            },
         }
     ): BaseStyle => {
         const theme = useTheme()
 
         const layer = options.layer ?? theme.middle
         const color = options.color ?? "base"
-        const background_color = options.variant === Button.variant.Ghost ? null : background(layer, options.background ?? color)
+        const background_color =
+            options.variant === Button.variant.Ghost
+                ? null
+                : background(layer, options.background ?? color)
 
         const m = {
             top: options.margin?.top ?? 0,
@@ -106,8 +109,14 @@ export namespace Button {
             padding: {
                 top: padding,
                 bottom: padding,
-                left: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding,
+                left:
-                right: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding
+                    options.shape === Button.shape.Rectangle
+                        ? padding + Button.RECTANGLE_PADDING
+                        : padding,
+                right:
+                    options.shape === Button.shape.Rectangle
+                        ? padding + Button.RECTANGLE_PADDING
+                        : padding,
             },
             margin: m,
             button_height: 16,

styles/src/component/icon_button.ts

@@ -11,10 +11,7 @@ export type Margin = {
 }
 
 interface IconButtonOptions {
-    layer?:
+    layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
-    | Theme["lowest"]
-    | Theme["middle"]
-    | Theme["highest"]
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
     variant?: Button.Variant
@@ -26,15 +23,20 @@ type ToggleableIconButtonOptions = IconButtonOptions & {
     active_layer?: Layer
 }
 
-export function icon_button({ color, margin, layer, variant, size }: IconButtonOptions = {
+export function icon_button(
-    variant: Button.variant.Default,
+    { color, margin, layer, variant, size }: IconButtonOptions = {
-    size: Button.size.Medium,
+        variant: Button.variant.Default,
-}) {
+        size: Button.size.Medium,
+    }
+) {
     const theme = useTheme()
 
     if (!color) color = "base"
 
-    const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color)
+    const background_color =
+        variant === Button.variant.Ghost
+            ? null
+            : background(layer ?? theme.lowest, color)
 
     const m = {
         top: margin?.top ?? 0,
@@ -77,7 +79,14 @@ export function icon_button({ color, margin, layer, variant, size }: IconButtonO
     })
 }
 
-export function toggleable_icon_button({ color, active_color, margin, variant, size, active_layer }: ToggleableIconButtonOptions) {
+export function toggleable_icon_button({
+    color,
+    active_color,
+    margin,
+    variant,
+    size,
+    active_layer,
+}: ToggleableIconButtonOptions) {
     if (!color) color = "base"
 
     return toggleable({
@@ -87,7 +96,7 @@ export function toggleable_icon_button({ color, active_color, margin, variant, s
                 color: active_color ? active_color : color,
                 margin,
                 layer: active_layer,
-                size
+                size,
             }),
         },
     })

styles/src/component/indicator.ts

@@ -1,7 +1,13 @@
 import { foreground } from "../style_tree/components"
 import { Layer, StyleSets } from "../theme"
 
-export const indicator = ({ layer, color }: { layer: Layer, color: StyleSets }) => ({
+export const indicator = ({
+    layer,
+    color,
+}: {
+    layer: Layer
+    color: StyleSets
+}) => ({
     corner_radius: 4,
     padding: 4,
     margin: { top: 12, left: 12 },

styles/src/component/input.ts

@@ -18,6 +18,6 @@ export const input = () => {
             bottom: 3,
             left: 12,
             right: 8,
-        }
+        },
     }
 }

styles/src/component/margin.ts

@@ -16,19 +16,26 @@ export type MarginStyle = {
 export const margin_style = (options: MarginOptions): MarginStyle => {
     const { all, top, bottom, left, right } = options
 
-    if (all !== undefined) return {
+    if (all !== undefined)
-        top: all,
+        return {
-        bottom: all,
+            top: all,
-        left: all,
+            bottom: all,
-        right: all
+            left: all,
-    }
+            right: all,
+        }
 
-    if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Margin must have at least one value")
+    if (
+        top === undefined &&
+        bottom === undefined &&
+        left === undefined &&
+        right === undefined
+    )
+        throw new Error("Margin must have at least one value")
 
     return {
         top: top || 0,
         bottom: bottom || 0,
         left: left || 0,
-        right: right || 0
+        right: right || 0,
     }
 }

styles/src/component/padding.ts

@@ -16,19 +16,26 @@ export type PaddingStyle = {
 export const padding_style = (options: PaddingOptions): PaddingStyle => {
     const { all, top, bottom, left, right } = options
 
-    if (all !== undefined) return {
+    if (all !== undefined)
-        top: all,
+        return {
-        bottom: all,
+            top: all,
-        left: all,
+            bottom: all,
-        right: all
+            left: all,
-    }
+            right: all,
+        }
 
-    if (top === undefined && bottom === undefined && left === undefined && right === undefined) throw new Error("Padding must have at least one value")
+    if (
+        top === undefined &&
+        bottom === undefined &&
+        left === undefined &&
+        right === undefined
+    )
+        throw new Error("Padding must have at least one value")
 
     return {
         top: top || 0,
         bottom: bottom || 0,
         left: left || 0,
-        right: right || 0
+        right: right || 0,
     }
 }

styles/src/component/tab.ts

@@ -9,7 +9,7 @@ type TabProps = {
 export const tab = ({ layer }: TabProps) => {
     const active_color = text(layer, "sans", "base").color
     const inactive_border: Border = {
-        color: '#FFFFFF00',
+        color: "#FFFFFF00",
         width: 1,
         bottom: true,
         left: false,
@@ -27,7 +27,7 @@ export const tab = ({ layer }: TabProps) => {
             top: 8,
             left: 8,
             right: 8,
-            bottom: 6
+            bottom: 6,
         },
         border: inactive_border,
     }
@@ -35,17 +35,17 @@ export const tab = ({ layer }: TabProps) => {
     const i = interactive({
         state: {
             default: {
-                ...base
+                ...base,
             },
             hovered: {
                 ...base,
-                ...text(layer, "sans", "base", "hovered")
+                ...text(layer, "sans", "base", "hovered"),
             },
             clicked: {
                 ...base,
-                ...text(layer, "sans", "base", "pressed")
+                ...text(layer, "sans", "base", "pressed"),
             },
-        }
+        },
     })
 
     return toggleable({
@@ -60,14 +60,14 @@ export const tab = ({ layer }: TabProps) => {
                 hovered: {
                     ...i,
                     ...text(layer, "sans", "base", "hovered"),
-                    border: active_border
+                    border: active_border,
                 },
                 clicked: {
                     ...i,
                     ...text(layer, "sans", "base", "pressed"),
-                    border: active_border
+                    border: active_border,
                 },
-            }
+            },
-        }
+        },
     })
 }

styles/src/component/tab_bar_button.ts

@@ -12,44 +12,47 @@ type TabBarButtonProps = TabBarButtonOptions & {
     state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
 }
 
-export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
+export function tab_bar_button(
+    theme: Theme,
+    { icon, color = "base" }: TabBarButtonProps
+) {
     const button_spacing = 8
 
-    return (
+    return interactive({
-        interactive({
+        base: {
-            base: {
+            icon: {
-                icon: {
+                color: foreground(theme.middle, color),
-                    color: foreground(theme.middle, color),
+                asset: icon,
-                    asset: icon,
+                dimensions: {
-                    dimensions: {
+                    width: 15,
-                        width: 15,
+                    height: 15,
-                        height: 15,
-                    },
                 },
+            },
+            container: {
+                corner_radius: 4,
+                padding: {
+                    top: 4,
+                    bottom: 4,
+                    left: 4,
+                    right: 4,
+                },
+                margin: {
+                    left: button_spacing / 2,
+                    right: button_spacing / 2,
+                },
+            },
+        },
+        state: {
+            hovered: {
                 container: {
-                    corner_radius: 4,
+                    background: background(theme.middle, color, "hovered"),
-                    padding: {
-                        top: 4, bottom: 4, left: 4, right: 4
-                    },
-                    margin: {
-                        left: button_spacing / 2,
-                        right: button_spacing / 2,
-                    },
                 },
             },
-            state: {
+            clicked: {
-                hovered: {
+                container: {
-                    container: {
+                    background: background(theme.middle, color, "pressed"),
-                        background: background(theme.middle, color, "hovered"),
-
-                    }
-                },
-                clicked: {
-                    container: {
-                        background: background(theme.middle, color, "pressed"),
-                    }
                 },
             },
-        })
+        },
-    )
+    })
 }

styles/src/component/text_button.ts

@@ -10,10 +10,7 @@ import { Button } from "./button"
 import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
-    layer?:
+    layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
-    | Theme["lowest"]
-    | Theme["middle"]
-    | Theme["highest"]
     variant?: Button.Variant
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
@@ -36,7 +33,10 @@ export function text_button({
     const theme = useTheme()
     if (!color) color = "base"
 
-    const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color)
+    const background_color =
+        variant === Button.variant.Ghost
+            ? null
+            : background(layer ?? theme.lowest, color)
 
     const text_options: TextProperties = {
         size: "xs",
@@ -67,20 +67,38 @@ export function text_button({
         state: {
             default: {
                 background: background_color,
-                color:
+                color: disabled
-                    disabled
+                    ? foreground(layer ?? theme.lowest, "disabled")
-                        ? foreground(layer ?? theme.lowest, "disabled")
+                    : foreground(layer ?? theme.lowest, color),
-                        : foreground(layer ?? theme.lowest, color),
-            },
-            hovered:
-                disabled ? {} : {
-                    background: background(layer ?? theme.lowest, color, "hovered"),
-                    color: foreground(layer ?? theme.lowest, color, "hovered"),
-                },
-            clicked: disabled ? {} : {
-                background: background(layer ?? theme.lowest, color, "pressed"),
-                color: foreground(layer ?? theme.lowest, color, "pressed"),
             },
+            hovered: disabled
+                ? {}
+                : {
+                      background: background(
+                          layer ?? theme.lowest,
+                          color,
+                          "hovered"
+                      ),
+                      color: foreground(
+                          layer ?? theme.lowest,
+                          color,
+                          "hovered"
+                      ),
+                  },
+            clicked: disabled
+                ? {}
+                : {
+                      background: background(
+                          layer ?? theme.lowest,
+                          color,
+                          "pressed"
+                      ),
+                      color: foreground(
+                          layer ?? theme.lowest,
+                          color,
+                          "pressed"
+                      ),
+                  },
         },
     })
 }

styles/src/style_tree/assistant.ts

@@ -8,50 +8,48 @@ type RoleCycleButton = TextStyle & {
 }
 // TODO: Replace these with zed types
 type RemainingTokens = TextStyle & {
-    background: string,
+    background: string
-    margin: { top: number, right: number },
+    margin: { top: number; right: number }
     padding: {
-        right: number,
+        right: number
-        left: number,
+        left: number
-        top: number,
+        top: number
-        bottom: number,
+        bottom: number
-    },
+    }
-    corner_radius: number,
+    corner_radius: number
 }
 
 export default function assistant(): any {
     const theme = useTheme()
 
-    const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
+    const interactive_role = (
-        return (
+        color: StyleSets
-            interactive({
+    ): Interactive<RoleCycleButton> => {
-                base: {
+        return interactive({
+            base: {
+                ...text(theme.highest, "sans", color, { size: "sm" }),
+            },
+            state: {
+                hovered: {
                     ...text(theme.highest, "sans", color, { size: "sm" }),
+                    background: background(theme.highest, color, "hovered"),
                 },
-                state: {
+                clicked: {
-                    hovered: {
+                    ...text(theme.highest, "sans", color, { size: "sm" }),
-                        ...text(theme.highest, "sans", color, { size: "sm" }),
+                    background: background(theme.highest, color, "pressed"),
-                        background: background(theme.highest, color, "hovered"),
-                    },
-                    clicked: {
-                        ...text(theme.highest, "sans", color, { size: "sm" }),
-                        background: background(theme.highest, color, "pressed"),
-                    }
                 },
-            })
+            },
-        )
+        })
     }
 
     const tokens_remaining = (color: StyleSets): RemainingTokens => {
-        return (
+        return {
-            {
+            ...text(theme.highest, "mono", color, { size: "xs" }),
-                ...text(theme.highest, "mono", color, { size: "xs" }),
+            background: background(theme.highest, "on", "default"),
-                background: background(theme.highest, "on", "default"),
+            margin: { top: 12, right: 20 },
-                margin: { top: 12, right: 20 },
+            padding: { right: 4, left: 4, top: 1, bottom: 1 },
-                padding: { right: 4, left: 4, top: 1, bottom: 1 },
+            corner_radius: 6,
-                corner_radius: 6,
+        }
-            }
-        )
     }
 
     return {
@@ -93,7 +91,10 @@ export default function assistant(): any {
                 base: {
                     background: background(theme.middle),
                     padding: { top: 4, bottom: 4 },
-                    border: border(theme.middle, "default", { top: true, overlay: true }),
+                    border: border(theme.middle, "default", {
+                        top: true,
+                        overlay: true,
+                    }),
                 },
                 state: {
                     hovered: {
@@ -101,7 +102,7 @@ export default function assistant(): any {
                     },
                     clicked: {
                         background: background(theme.middle, "pressed"),
-                    }
+                    },
                 },
             }),
             saved_at: {

styles/src/style_tree/collab_modals.ts

@@ -39,7 +39,12 @@ export default function channel_modal(): any {
             row_height: ITEM_HEIGHT,
             header: {
                 background: background(theme.lowest),
-                border: border(theme.middle, { "bottom": true, "top": false, left: false, right: false }),
+                border: border(theme.middle, {
+                    bottom: true,
+                    top: false,
+                    left: false,
+                    right: false,
+                }),
                 padding: {
                     top: SPACING,
                     left: SPACING - BUTTON_OFFSET,
@@ -48,7 +53,7 @@ export default function channel_modal(): any {
                 corner_radii: {
                     top_right: 12,
                     top_left: 12,
-                }
+                },
             },
             body: {
                 background: background(theme.middle),
@@ -57,12 +62,11 @@ export default function channel_modal(): any {
                     left: SPACING,
                     right: SPACING,
                     bottom: SPACING,
-
                 },
                 corner_radii: {
                     bottom_right: 12,
                     bottom_left: 12,
-                }
+                },
             },
             modal: {
                 background: background(theme.middle),
@@ -74,7 +78,6 @@ export default function channel_modal(): any {
                     right: 0,
                     top: 0,
                 },
-
             },
             // FIXME: due to a bug in the picker's size calculation, this must be 600
             max_height: 600,
@@ -83,7 +86,7 @@ export default function channel_modal(): any {
                 ...text(theme.middle, "sans", "on", { size: "lg" }),
                 padding: {
                     left: BUTTON_OFFSET,
-                }
+                },
             },
             picker: {
                 empty_container: {},
@@ -108,8 +111,8 @@ export default function channel_modal(): any {
                 background: background(theme.middle),
                 padding: {
                     left: 7,
-                    right: 7
+                    right: 7,
-                }
+                },
             },
             cancel_invite_button: {
                 ...text(theme.middle, "sans", { size: "xs" }),
@@ -125,7 +128,7 @@ export default function channel_modal(): any {
                 padding: {
                     left: 4,
                     right: 4,
-                }
+                },
             },
             contact_avatar: {
                 corner_radius: 10,
@@ -147,6 +150,6 @@ export default function channel_modal(): any {
                 background: background(theme.middle, "disabled"),
                 color: foreground(theme.middle, "disabled"),
             },
-        }
+        },
     }
 }

styles/src/style_tree/collab_panel.ts

@@ -27,7 +27,7 @@ export default function contacts_panel(): any {
         color: foreground(layer, "on"),
         icon_width: 14,
         button_width: 16,
-        corner_radius: 8
+        corner_radius: 8,
     }
 
     const project_row = {
@@ -275,7 +275,7 @@ export default function contacts_panel(): any {
         list_empty_label_container: {
             margin: {
                 left: NAME_MARGIN,
-            }
+            },
         },
         list_empty_icon: {
             color: foreground(layer, "variant"),
@@ -289,7 +289,7 @@ export default function contacts_panel(): any {
                         top: SPACING / 2,
                         bottom: SPACING / 2,
                         left: SPACING,
-                        right: SPACING
+                        right: SPACING,
                     },
                 },
                 state: {
@@ -330,7 +330,7 @@ export default function contacts_panel(): any {
                 right: 4,
             },
             background: background(layer, "hovered"),
-            ...text(layer, "sans", "hovered", { size: "xs" })
+            ...text(layer, "sans", "hovered", { size: "xs" }),
         },
         contact_status_free: indicator({ layer, color: "positive" }),
         contact_status_busy: indicator({ layer, color: "negative" }),
@@ -404,7 +404,7 @@ export default function contacts_panel(): any {
         channel_editor: {
             padding: {
                 left: NAME_MARGIN,
-            }
+            },
-        }
+        },
     }
 }

styles/src/style_tree/component_test.ts

@@ -1,4 +1,3 @@
-
 import { useTheme } from "../common"
 import { text_button } from "../component/text_button"
 import { icon_button } from "../component/icon_button"
@@ -14,14 +13,14 @@ export default function contacts_panel(): any {
             base: text_button({}),
             state: {
                 active: {
-                    ...text_button({ color: "accent" })
+                    ...text_button({ color: "accent" }),
-                }
+                },
-            }
+            },
         }),
         disclosure: {
             ...text(theme.lowest, "sans", "base"),
             button: icon_button({ variant: "ghost" }),
             spacing: 4,
-        }
+        },
     }
 }

styles/src/style_tree/contacts_popover.ts

@@ -3,5 +3,4 @@ import { background, border } from "./components"
 
 export default function contacts_popover(): any {
     const theme = useTheme()
-
 }

styles/src/style_tree/editor.ts

@@ -307,7 +307,7 @@ export default function editor(): any {
                     ? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
                     : with_opacity(theme.ramps.green(0.4).hex(), 0.8),
             },
-            selections: foreground(layer, "accent")
+            selections: foreground(layer, "accent"),
         },
         composition_mark: {
             underline: {

styles/src/style_tree/feedback.ts

@@ -37,7 +37,7 @@ export default function feedback(): any {
                     ...text(theme.highest, "mono", "on", "disabled"),
                     background: background(theme.highest, "on", "disabled"),
                     border: border(theme.highest, "on", "disabled"),
-                }
+                },
             },
         }),
         button_margin: 8,

styles/src/style_tree/picker.ts

@@ -152,7 +152,7 @@ export default function picker(): any {
                         0.5
                     ),
                 },
-            }
+            },
         }),
     }
 }

styles/src/style_tree/project_panel.ts

@@ -64,17 +64,17 @@ export default function project_panel(): any {
         const unselected_default_style = merge(
             base_properties,
             unselected?.default ?? {},
-            {},
+            {}
         )
         const unselected_hovered_style = merge(
             base_properties,
             { background: background(theme.middle, "hovered") },
-            unselected?.hovered ?? {},
+            unselected?.hovered ?? {}
         )
         const unselected_clicked_style = merge(
             base_properties,
             { background: background(theme.middle, "pressed") },
-            unselected?.clicked ?? {},
+            unselected?.clicked ?? {}
         )
         const selected_default_style = merge(
             base_properties,
@@ -82,7 +82,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.default ?? {},
+            selected_style?.default ?? {}
         )
         const selected_hovered_style = merge(
             base_properties,
@@ -90,7 +90,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest, "hovered"),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.hovered ?? {},
+            selected_style?.hovered ?? {}
         )
         const selected_clicked_style = merge(
             base_properties,
@@ -98,7 +98,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest, "pressed"),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.clicked ?? {},
+            selected_style?.clicked ?? {}
         )
 
         return toggleable({
@@ -175,7 +175,7 @@ export default function project_panel(): any {
                 default: {
                     icon_color: foreground(theme.middle, "variant"),
                 },
-            },
+            }
         ),
         cut_entry: entry(
             {
@@ -190,7 +190,7 @@ export default function project_panel(): any {
                         size: "sm",
                     }),
                 },
-            },
+            }
         ),
         filename_editor: {
             background: background(theme.middle, "on"),

styles/src/style_tree/search.ts

@@ -60,7 +60,8 @@ export default function search(): any {
                     corner_radius: 2,
                     margin: { right: 2 },
                     border: {
-                        width: 1., color: background(theme.highest, "on")
+                        width: 1,
+                        color: background(theme.highest, "on"),
                     },
                     padding: {
                         left: 4,
@@ -74,14 +75,16 @@ export default function search(): any {
                         ...text(theme.highest, "mono", "variant", "hovered"),
                         background: background(theme.highest, "on", "hovered"),
                         border: {
-                            width: 1., color: background(theme.highest, "on", "hovered")
+                            width: 1,
+                            color: background(theme.highest, "on", "hovered"),
                         },
                     },
                     clicked: {
                         ...text(theme.highest, "mono", "variant", "pressed"),
                         background: background(theme.highest, "on", "pressed"),
                         border: {
-                            width: 1., color: background(theme.highest, "on", "pressed")
+                            width: 1,
+                            color: background(theme.highest, "on", "pressed"),
                         },
                     },
                 },
@@ -96,11 +99,19 @@ export default function search(): any {
                         border: border(theme.highest, "accent"),
                     },
                     hovered: {
-                        background: background(theme.highest, "accent", "hovered"),
+                        background: background(
+                            theme.highest,
+                            "accent",
+                            "hovered"
+                        ),
                         border: border(theme.highest, "accent", "hovered"),
                     },
                     clicked: {
-                        background: background(theme.highest, "accent", "pressed"),
+                        background: background(
+                            theme.highest,
+                            "accent",
+                            "pressed"
+                        ),
                         border: border(theme.highest, "accent", "pressed"),
                     },
                 },
@@ -117,7 +128,8 @@ export default function search(): any {
                     corner_radius: 2,
                     margin: { right: 2 },
                     border: {
-                        width: 1., color: background(theme.highest, "on")
+                        width: 1,
+                        color: background(theme.highest, "on"),
                     },
                     padding: {
                         left: 4,
@@ -131,14 +143,16 @@ export default function search(): any {
                         ...text(theme.highest, "mono", "variant", "hovered"),
                         background: background(theme.highest, "on", "hovered"),
                         border: {
-                            width: 1., color: background(theme.highest, "on", "hovered")
+                            width: 1,
+                            color: background(theme.highest, "on", "hovered"),
                         },
                     },
                     clicked: {
                         ...text(theme.highest, "mono", "variant", "pressed"),
                         background: background(theme.highest, "on", "pressed"),
                         border: {
-                            width: 1., color: background(theme.highest, "on", "pressed")
+                            width: 1,
+                            color: background(theme.highest, "on", "pressed"),
                         },
                     },
                 },
@@ -153,11 +167,19 @@ export default function search(): any {
                         border: border(theme.highest, "accent"),
                     },
                     hovered: {
-                        background: background(theme.highest, "accent", "hovered"),
+                        background: background(
+                            theme.highest,
+                            "accent",
+                            "hovered"
+                        ),
                         border: border(theme.highest, "accent", "hovered"),
                     },
                     clicked: {
-                        background: background(theme.highest, "accent", "pressed"),
+                        background: background(
+                            theme.highest,
+                            "accent",
+                            "pressed"
+                        ),
                         border: border(theme.highest, "accent", "pressed"),
                     },
                 },
@@ -168,9 +190,20 @@ export default function search(): any {
         // Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
         action_button: toggleable({
             state: {
-                inactive: text_button({ variant: "ghost", layer: theme.highest, disabled: true, margin: { right: SEARCH_ROW_SPACING }, text_properties: { size: "sm" } }),
+                inactive: text_button({
-                active: text_button({ variant: "ghost", layer: theme.highest, margin: { right: SEARCH_ROW_SPACING }, text_properties: { size: "sm" } })
+                    variant: "ghost",
-            }
+                    layer: theme.highest,
+                    disabled: true,
+                    margin: { right: SEARCH_ROW_SPACING },
+                    text_properties: { size: "sm" },
+                }),
+                active: text_button({
+                    variant: "ghost",
+                    layer: theme.highest,
+                    margin: { right: SEARCH_ROW_SPACING },
+                    text_properties: { size: "sm" },
+                }),
+            },
         }),
         editor,
         invalid_editor: {
@@ -216,12 +249,12 @@ export default function search(): any {
                 dimensions: {
                     width: 14,
                     height: 14,
-                }
+                },
             },
             container: {
                 margin: { right: 4 },
                 padding: { left: 1, right: 1 },
-            }
+            },
         },
         // Toggle group buttons - Text | Regex | Semantic
         mode_button: toggleable({
@@ -233,7 +266,7 @@ export default function search(): any {
                     border: {
                         ...border(theme.highest, "on"),
                         left: false,
-                        right: false
+                        right: false,
                     },
                     margin: {
                         top: 1,
@@ -247,13 +280,25 @@ export default function search(): any {
                 },
                 state: {
                     hovered: {
-                        ...text(theme.highest, "mono", "variant", "hovered", { size: "sm" }),
+                        ...text(theme.highest, "mono", "variant", "hovered", {
-                        background: background(theme.highest, "variant", "hovered"),
+                            size: "sm",
+                        }),
+                        background: background(
+                            theme.highest,
+                            "variant",
+                            "hovered"
+                        ),
                         border: border(theme.highest, "on", "hovered"),
                     },
                     clicked: {
-                        ...text(theme.highest, "mono", "variant", "pressed", { size: "sm" }),
+                        ...text(theme.highest, "mono", "variant", "pressed", {
-                        background: background(theme.highest, "variant", "pressed"),
+                            size: "sm",
+                        }),
+                        background: background(
+                            theme.highest,
+                            "variant",
+                            "pressed"
+                        ),
                         border: border(theme.highest, "on", "pressed"),
                     },
                 },
@@ -262,15 +307,19 @@ export default function search(): any {
                 active: {
                     default: {
                         ...text(theme.highest, "mono", "on", { size: "sm" }),
-                        background: background(theme.highest, "on")
+                        background: background(theme.highest, "on"),
                     },
                     hovered: {
-                        ...text(theme.highest, "mono", "on", "hovered", { size: "sm" }),
+                        ...text(theme.highest, "mono", "on", "hovered", {
-                        background: background(theme.highest, "on", "hovered")
+                            size: "sm",
+                        }),
+                        background: background(theme.highest, "on", "hovered"),
                     },
                     clicked: {
-                        ...text(theme.highest, "mono", "on", "pressed", { size: "sm" }),
+                        ...text(theme.highest, "mono", "on", "pressed", {
-                        background: background(theme.highest, "on", "pressed")
+                            size: "sm",
+                        }),
+                        background: background(theme.highest, "on", "pressed"),
                     },
                 },
             },
@@ -300,8 +349,8 @@ export default function search(): any {
                         },
                     },
                     state: {
-                        hovered: {}
+                        hovered: {},
-                    }
+                    },
                 }),
                 active: interactive({
                     base: {
@@ -325,22 +374,30 @@ export default function search(): any {
                     state: {
                         hovered: {
                             ...text(theme.highest, "mono", "on", "hovered"),
-                            background: background(theme.highest, "on", "hovered"),
+                            background: background(
+                                theme.highest,
+                                "on",
+                                "hovered"
+                            ),
                             border: border(theme.highest, "on", "hovered"),
                         },
                         clicked: {
                             ...text(theme.highest, "mono", "on", "pressed"),
-                            background: background(theme.highest, "on", "pressed"),
+                            background: background(
+                                theme.highest,
+                                "on",
+                                "pressed"
+                            ),
                             border: border(theme.highest, "on", "pressed"),
                         },
                     },
-                })
+                }),
-            }
+            },
         }),
         search_bar_row_height: 34,
         search_row_spacing: 8,
         option_button_height: 22,
         modes_container: {},
-        ...search_results()
+        ...search_results(),
     }
 }

styles/src/style_tree/status_bar.ts

@@ -34,9 +34,11 @@ export default function status_bar(): any {
             ...text(layer, "mono", "base", { size: "xs" }),
         },
         active_language: text_button({
-            color: "base"
+            color: "base",
+        }),
+        auto_update_progress_message: text(layer, "sans", "base", {
+            size: "xs",
         }),
-        auto_update_progress_message: text(layer, "sans", "base", { size: "xs" }),
         auto_update_done_message: text(layer, "sans", "base", { size: "xs" }),
         lsp_status: interactive({
             base: {
@@ -125,7 +127,7 @@ export default function status_bar(): any {
                         },
                         clicked: {
                             background: background(layer, "pressed"),
-                        }
+                        },
                     },
                 }),
                 state: {

styles/src/style_tree/tab_bar.ts

@@ -93,7 +93,7 @@ export default function tab_bar(): any {
             border: border(theme.lowest, "on", {
                 bottom: true,
                 overlay: true,
-            })
+            }),
         },
         state: {
             hovered: {
@@ -101,7 +101,7 @@ export default function tab_bar(): any {
                 background: background(theme.highest, "on", "hovered"),
             },
             disabled: {
-                color: foreground(theme.highest, "on", "disabled")
+                color: foreground(theme.highest, "on", "disabled"),
             },
         },
     })
@@ -162,6 +162,6 @@ export default function tab_bar(): any {
                 right: false,
             },
         },
-        nav_button: nav_button
+        nav_button: nav_button,
     }
 }

styles/src/style_tree/titlebar.ts

@@ -187,10 +187,10 @@ export function titlebar(): any {
         project_name_divider: text(theme.lowest, "sans", "variant"),
 
         project_menu_button: toggleable_text_button(theme, {
-            color: 'base',
+            color: "base",
         }),
         git_menu_button: toggleable_text_button(theme, {
-            color: 'variant',
+            color: "variant",
         }),
 
         // Collaborators

styles/src/theme/create_theme.ts

@@ -13,16 +13,16 @@ export interface Theme {
     is_light: boolean
 
     /**
-    * App background, other elements that should sit directly on top of the background.
+     * App background, other elements that should sit directly on top of the background.
-    */
+     */
     lowest: Layer
     /**
-    * Panels, tabs, other UI surfaces that sit on top of the background.
+     * Panels, tabs, other UI surfaces that sit on top of the background.
-    */
+     */
     middle: Layer
     /**
-    * Editors like code buffers, conversation editors, etc.
+     * Editors like code buffers, conversation editors, etc.
-    */
+     */
     highest: Layer
 
     ramps: RampSet
@@ -206,7 +206,10 @@ function build_color_family(ramps: RampSet): ColorFamily {
     for (const ramp in ramps) {
         const ramp_value = ramps[ramp as keyof RampSet]
 
-        const lightnessValues = [ramp_value(0).get('hsl.l') * 100, ramp_value(1).get('hsl.l') * 100]
+        const lightnessValues = [
+            ramp_value(0).get("hsl.l") * 100,
+            ramp_value(1).get("hsl.l") * 100,
+        ]
         const low = Math.min(...lightnessValues)
         const high = Math.max(...lightnessValues)
         const range = high - low

styles/src/theme/tokens/theme.ts

@@ -4,11 +4,7 @@ import {
     SingleOtherToken,
     TokenTypes,
 } from "@tokens-studio/types"
-import {
+import { Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../create_theme"
-    Shadow,
-    SyntaxHighlightStyle,
-    ThemeSyntax,
-} from "../create_theme"
 import { LayerToken, layer_token } from "./layer"
 import { PlayersToken, players_token } from "./players"
 import { color_token } from "./token"

styles/tsconfig.json

@@ -23,7 +23,5 @@
         "skipLibCheck": true,
         "useUnknownInCatchVariables": false
     },
-    "exclude": [
+    "exclude": ["node_modules"]
-        "node_modules"
-    ]
 }