Update & format

styles/src/build_licenses.ts

@@ -20,7 +20,7 @@ function parse_accepted_toml(file: string): string[] {
 
 function check_licenses(themes: ThemeConfig[]) {
     for (const theme of themes) {
-        if (!theme.licenseFile) {
+        if (!theme.license_file) {
             throw Error(`Theme ${theme.name} should have a LICENSE file`)
         }
     }
@@ -29,7 +29,7 @@ function check_licenses(themes: ThemeConfig[]) {
 function generate_license_file(themes: ThemeConfig[]) {
     check_licenses(themes)
     for (const theme of themes) {
-        const license_text = fs.readFileSync(theme.licenseFile).toString()
+        const license_text = fs.readFileSync(theme.license_file).toString()
         write_license(theme.name, license_text, theme.license_url)
     }
 }

styles/src/build_themes.ts

@@ -3,13 +3,11 @@ import { tmpdir } from "os"
 import * as path from "path"
 import app from "./style_tree/app"
 import { ColorScheme, create_color_scheme } from "./theme/color_scheme"
-import snakeCase from "./utils/snake_case"
 import { themes } from "./themes"
 
 const assets_directory = `${__dirname}/../../assets`
 const temp_directory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
 
-// Clear existing themes
 function clear_themes(theme_directory: string) {
     if (!fs.existsSync(theme_directory)) {
         fs.mkdirSync(theme_directory, { recursive: true })
@@ -22,22 +20,24 @@ function clear_themes(theme_directory: string) {
     }
 }
 
-function write_themes(color_schemes: ColorScheme[], output_directory: string) {
+function write_themes(themes: ColorScheme[], output_directory: string) {
     clear_themes(output_directory)
-    for (const color_scheme of color_schemes) {
+    for (const color_scheme of themes) {
-        const style_tree = snakeCase(app(color_scheme))
+        const style_tree = app(color_scheme)
         const style_tree_json = JSON.stringify(style_tree, null, 2)
         const temp_path = path.join(temp_directory, `${color_scheme.name}.json`)
-        const out_path = path.join(output_directory, `${color_scheme.name}.json`)
+        const out_path = path.join(
+            output_directory,
+            `${color_scheme.name}.json`
+        )
         fs.writeFileSync(temp_path, style_tree_json)
         fs.renameSync(temp_path, out_path)
         console.log(`- ${out_path} created`)
     }
 }
 
-const color_schemes: ColorScheme[] = themes.map((theme) =>
+const all_themes: ColorScheme[] = themes.map((theme) =>
     create_color_scheme(theme)
 )
 
-// Write new themes to theme directory
+write_themes(all_themes, `${assets_directory}/themes`)
-write_themes(color_schemes, `${assets_directory}/themes`)

styles/src/build_tokens.ts

@@ -3,7 +3,7 @@ import * as path from "path"
 import { ColorScheme, create_color_scheme } from "./common"
 import { themes } from "./themes"
 import { slugify } from "./utils/slugify"
-import { colorSchemeTokens as color_scheme_tokens } from "./theme/tokens/color_scheme"
+import { theme_tokens } from "./theme/tokens/color_scheme"
 
 const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
 const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
@@ -60,7 +60,7 @@ function write_tokens(themes: ColorScheme[], tokens_directory: string) {
 
     for (const theme of themes) {
         const file_name = slugify(theme.name) + ".json"
-        const tokens = color_scheme_tokens(theme)
+        const tokens = theme_tokens(theme)
         const tokens_json = JSON.stringify(tokens, null, 2)
         const out_path = path.join(tokens_directory, file_name)
         fs.writeFileSync(out_path, tokens_json, { mode: 0o644 })

styles/src/common.ts

@@ -12,12 +12,10 @@ export const font_sizes = {
     xs: 12,
     sm: 14,
     md: 16,
-    lg: 18
+    lg: 18,
 }
 
-export type FontWeight =
+export type FontWeight = "normal" | "bold"
-    | "normal"
-    | "bold"
 
 export const font_weights: { [key: string]: FontWeight } = {
     normal: "normal",

styles/src/component/icon_button.ts

@@ -11,9 +11,9 @@ export type Margin = {
 
 interface IconButtonOptions {
     layer?:
-    | ColorScheme["lowest"]
+        | ColorScheme["lowest"]
-    | ColorScheme["middle"]
+        | ColorScheme["middle"]
-    | ColorScheme["highest"]
+        | ColorScheme["highest"]
     color?: keyof ColorScheme["lowest"]
     margin?: Partial<Margin>
 }

styles/src/component/text_button.ts

@@ -10,9 +10,9 @@ import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
     layer?:
-    | ColorScheme["lowest"]
+        | ColorScheme["lowest"]
-    | ColorScheme["middle"]
+        | ColorScheme["middle"]
-    | ColorScheme["highest"]
+        | ColorScheme["highest"]
     color?: keyof ColorScheme["lowest"]
     margin?: Partial<Margin>
     text_properties?: TextProperties

styles/src/style_tree/assistant.ts

@@ -181,7 +181,7 @@ export default function assistant(theme: ColorScheme): any {
                     },
                 },
             }),
-            savedAt: {
+            saved_at: {
                 margin: { left: 8 },
                 ...text(theme.highest, "sans", "default", { size: "xs" }),
             },

styles/src/style_tree/command_palette.ts

@@ -6,7 +6,9 @@ import { toggleable } from "../element"
 export default function command_palette(theme: ColorScheme): any {
     const key = toggleable({
         base: {
-            text: text(theme.highest, "mono", "variant", "default", { size: "xs" }),
+            text: text(theme.highest, "mono", "variant", "default", {
+                size: "xs",
+            }),
             corner_radius: 2,
             background: background(theme.highest, "on"),
             padding: {
@@ -23,7 +25,9 @@ export default function command_palette(theme: ColorScheme): any {
         },
         state: {
             active: {
-                text: text(theme.highest, "mono", "on", "default", { size: "xs" }),
+                text: text(theme.highest, "mono", "on", "default", {
+                    size: "xs",
+                }),
                 background: with_opacity(background(theme.highest, "on"), 0.2),
             },
         },

styles/src/style_tree/components.ts

@@ -1,8 +1,4 @@
-import {
+import { font_families, font_sizes, FontWeight } from "../common"
-    font_families,
-    font_sizes,
-    FontWeight,
-} from "../common"
 import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"
 
 function is_style_set(key: any): key is StyleSets {

styles/src/style_tree/contact_finder.ts

@@ -17,7 +17,9 @@ export default function contact_finder(theme: ColorScheme): any {
         background: background(theme.middle, "on"),
         corner_radius: 6,
         text: text(theme.middle, "mono"),
-        placeholder_text: text(theme.middle, "mono", "on", "disabled", { size: "xs" }),
+        placeholder_text: text(theme.middle, "mono", "on", "disabled", {
+            size: "xs",
+        }),
         selection: theme.players[0],
         border: border(theme.middle),
         padding: {

styles/src/style_tree/context_menu.ts

@@ -29,7 +29,9 @@ export default function context_menu(theme: ColorScheme): any {
                 state: {
                     hovered: {
                         background: background(theme.middle, "hovered"),
-                        label: text(theme.middle, "sans", "hovered", { size: "sm" }),
+                        label: text(theme.middle, "sans", "hovered", {
+                            size: "sm",
+                        }),
                         keystroke: {
                             ...text(theme.middle, "sans", "hovered", {
                                 size: "sm",

styles/src/style_tree/copilot.ts

@@ -2,7 +2,6 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, svg, text } from "./components"
 import { interactive } from "../element"
 export default function copilot(theme: ColorScheme): any {
-
     const content_width = 264
 
     const cta_button =
@@ -61,7 +60,10 @@ export default function copilot(theme: ColorScheme): any {
         modal: {
             title_text: {
                 default: {
-                    ...text(theme.middle, "sans", { size: "xs", weight: "bold" }),
+                    ...text(theme.middle, "sans", {
+                        size: "xs",
+                        weight: "bold",
+                    }),
                 },
             },
             titlebar: {
@@ -163,7 +165,10 @@ export default function copilot(theme: ColorScheme): any {
                 },
 
                 hint: {
-                    ...text(theme.middle, "sans", { size: "xs", color: "#838994" }),
+                    ...text(theme.middle, "sans", {
+                        size: "xs",
+                        color: "#838994",
+                    }),
                     margin: {
                         top: 6,
                         bottom: 2,
@@ -271,7 +276,10 @@ export default function copilot(theme: ColorScheme): any {
                 },
 
                 hint: {
-                    ...text(theme.middle, "sans", { size: "xs", color: "#838994" }),
+                    ...text(theme.middle, "sans", {
+                        size: "xs",
+                        color: "#838994",
+                    }),
                     margin: {
                         top: 24,
                         bottom: 4,

styles/src/style_tree/editor.ts

@@ -191,20 +191,12 @@ export default function editor(theme: ColorScheme): any {
             item: autocomplete_item,
             hovered_item: {
                 ...autocomplete_item,
-                match_highlight: foreground(
+                match_highlight: foreground(theme.middle, "accent", "hovered"),
-                    theme.middle,
-                    "accent",
-                    "hovered"
-                ),
                 background: background(theme.middle, "hovered"),
             },
             selected_item: {
                 ...autocomplete_item,
-                match_highlight: foreground(
+                match_highlight: foreground(theme.middle, "accent", "active"),
-                    theme.middle,
-                    "accent",
-                    "active"
-                ),
                 background: background(theme.middle, "active"),
             },
         },

styles/src/style_tree/feedback.ts

@@ -34,7 +34,9 @@ export default function feedback(theme: ColorScheme): any {
             },
         }),
         button_margin: 8,
-        info_text_default: text(theme.highest, "sans", "default", { size: "xs" }),
+        info_text_default: text(theme.highest, "sans", "default", {
+            size: "xs",
+        }),
         link_text_default: text(theme.highest, "sans", "default", {
             size: "xs",
             underline: true,

styles/src/style_tree/hover_popover.ts

@@ -39,7 +39,9 @@ export default function hover_popover(theme: ColorScheme): any {
             padding: { top: 4 },
         },
         prose: text(theme.middle, "sans", { size: "sm" }),
-        diagnostic_source_highlight: { color: foreground(theme.middle, "accent") },
+        diagnostic_source_highlight: {
+            color: foreground(theme.middle, "accent"),
+        },
         highlight: theme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
     }
 }

styles/src/style_tree/incoming_call_notification.ts

@@ -29,7 +29,10 @@ export default function incoming_call_notification(
             margin: { top: -3 },
         },
         worktree_roots: {
-            ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
+            ...text(theme.middle, "sans", "variant", {
+                size: "xs",
+                weight: "bold",
+            }),
             margin: { top: -3 },
         },
         button_width: 96,

styles/src/style_tree/project_panel.ts

@@ -173,7 +173,9 @@ export default function project_panel(theme: ColorScheme): any {
             {
                 default: {
                     background: background(theme.middle, "active"),
-                    text: text(theme.middle, "mono", "disabled", { size: "sm" }),
+                    text: text(theme.middle, "mono", "disabled", {
+                        size: "sm",
+                    }),
                 },
             }
         ),

styles/src/style_tree/project_shared_notification.ts

@@ -29,7 +29,10 @@ export default function project_shared_notification(
             margin: { top: -3 },
         },
         worktree_roots: {
-            ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
+            ...text(theme.middle, "sans", "variant", {
+                size: "xs",
+                weight: "bold",
+            }),
             margin: { top: -3 },
         },
         button_width: 96,

styles/src/style_tree/search.ts

@@ -33,7 +33,10 @@ export default function search(theme: ColorScheme): any {
 
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
-        match_background: with_opacity(foreground(theme.highest, "accent"), 0.4),
+        match_background: with_opacity(
+            foreground(theme.highest, "accent"),
+            0.4
+        ),
         option_button: toggleable({
             base: interactive({
                 base: {

styles/src/style_tree/simple_message_notification.ts

@@ -2,9 +2,7 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 import { interactive } from "../element"
 
-export default function simple_message_notification(
+export default function simple_message_notification(theme: ColorScheme): any {
-    theme: ColorScheme
-): any {
     const header_padding = 8
 
     return {

styles/src/style_tree/toolbar_dropdown_menu.ts

@@ -43,7 +43,9 @@ export default function dropdown_menu(theme: ColorScheme): any {
                 state: {
                     hovered: {
                         background: background(theme.middle, "hovered"),
-                        ...text(theme.middle, "sans", "hovered", { size: "sm" }),
+                        ...text(theme.middle, "sans", "hovered", {
+                            size: "sm",
+                        }),
                     },
                 },
             }),

styles/src/style_tree/update_notification.ts

@@ -2,7 +2,6 @@ import { ColorScheme } from "../theme/color_scheme"
 import { foreground, text } from "./components"
 import { interactive } from "../element"
 
-
 export default function update_notification(theme: ColorScheme): any {
     const header_padding = 8
 

styles/src/style_tree/welcome.ts

@@ -32,7 +32,12 @@ export default function welcome(theme: ColorScheme): any {
 
     return {
         page_width: 320,
-        logo: svg(foreground(theme.highest, "default"), "icons/logo_96.svg", 64, 64),
+        logo: svg(
+            foreground(theme.highest, "default"),
+            "icons/logo_96.svg",
+            64,
+            64
+        ),
         logo_subheading: {
             ...text(theme.highest, "sans", "variant", { size: "md" }),
             margin: {
@@ -54,7 +59,10 @@ export default function welcome(theme: ColorScheme): any {
         },
         checkbox_group: {
             border: border(theme.highest, "variant"),
-            background: with_opacity(background(theme.highest, "hovered"), 0.25),
+            background: with_opacity(
+                background(theme.highest, "hovered"),
+                0.25
+            ),
             corner_radius: 4,
             padding: {
                 left: 12,
@@ -77,11 +85,21 @@ export default function welcome(theme: ColorScheme): any {
                     left: 7,
                     right: 7,
                 },
-                ...text(theme.highest, "sans", "default", interactive_text_size),
+                ...text(
+                    theme.highest,
+                    "sans",
+                    "default",
+                    interactive_text_size
+                ),
             },
             state: {
                 hovered: {
-                    ...text(theme.highest, "sans", "default", interactive_text_size),
+                    ...text(
+                        theme.highest,
+                        "sans",
+                        "default",
+                        interactive_text_size
+                    ),
                     background: background(theme.highest, "hovered"),
                 },
             },
@@ -106,7 +124,12 @@ export default function welcome(theme: ColorScheme): any {
                 ...text(theme.highest, "sans", interactive_text_size),
                 // Also supports margin, container, border, etc.
             },
-            icon: svg(foreground(theme.highest, "on"), "icons/check_12.svg", 12, 12),
+            icon: svg(
+                foreground(theme.highest, "on"),
+                "icons/check_12.svg",
+                12,
+                12
+            ),
             default: {
                 ...checkbox_base,
                 background: background(theme.highest, "default"),

styles/src/style_tree/workspace.ts

@@ -140,18 +140,10 @@ export default function workspace(theme: ColorScheme): any {
                 state: {
                     hovered: {
                         color: foreground(theme.highest, "on", "hovered"),
-                        background: background(
+                        background: background(theme.highest, "on", "hovered"),
-                            theme.highest,
-                            "on",
-                            "hovered"
-                        ),
                     },
                     disabled: {
-                        color: foreground(
+                        color: foreground(theme.highest, "on", "disabled"),
-                            theme.highest,
-                            "on",
-                            "disabled"
-                        ),
                     },
                 },
             }),
@@ -170,11 +162,7 @@ export default function workspace(theme: ColorScheme): any {
             state: {
                 hovered: {
                     color: foreground(theme.highest, "on", "hovered"),
-                    background: background(
+                    background: background(theme.highest, "on", "hovered"),
-                        theme.highest,
-                        "on",
-                        "hovered"
-                    ),
                 },
             },
         }),
@@ -194,6 +182,9 @@ export default function workspace(theme: ColorScheme): any {
             width: 400,
             margin: { right: 10, bottom: 10 },
         },
-        drop_target_overlay_color: with_opacity(foreground(theme.lowest, "variant"), 0.5),
+        drop_target_overlay_color: with_opacity(
+            foreground(theme.lowest, "variant"),
+            0.5
+        ),
     }
 }

styles/src/theme/syntax.ts

@@ -291,7 +291,10 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
     return default_syntax
 }
 
-function merge_syntax(default_syntax: Syntax, color_scheme: ColorScheme): Syntax {
+function merge_syntax(
+    default_syntax: Syntax,
+    color_scheme: ColorScheme
+): Syntax {
     if (!color_scheme.syntax) {
         return default_syntax
     }

styles/src/theme/tokens/color_scheme.ts

@@ -10,9 +10,9 @@ import {
     SyntaxHighlightStyle,
     ThemeSyntax,
 } from "../color_scheme"
-import { LayerToken, layerToken } from "./layer"
+import { LayerToken, layer_token } from "./layer"
-import { PlayersToken, playersToken } from "./players"
+import { PlayersToken, players_token } from "./players"
-import { colorToken } from "./token"
+import { color_token } from "./token"
 import { Syntax } from "../syntax"
 import editor from "../../style_tree/editor"
 
@@ -64,13 +64,11 @@ function syntax_highlight_style_color_tokens(
         if (!syntax[style_key] || typeof syntax[style_key] === "function")
             return acc
         const { color } = syntax[style_key] as Required<SyntaxHighlightStyle>
-        return { ...acc, [style_key]: colorToken(style_key, color) }
+        return { ...acc, [style_key]: color_token(style_key, color) }
     }, {} as ThemeSyntaxColorTokens)
 }
 
-const syntax_tokens = (
+const syntax_tokens = (theme: ColorScheme): ColorSchemeTokens["syntax"] => {
-    theme: ColorScheme
-): ColorSchemeTokens["syntax"] => {
     const syntax = editor(theme).syntax
 
     return syntax_highlight_style_color_tokens(syntax)
@@ -88,12 +86,12 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
             value: theme.is_light ? "light" : "dark",
             type: TokenTypes.OTHER,
         },
-        lowest: layerToken(theme.lowest, "lowest"),
+        lowest: layer_token(theme.lowest, "lowest"),
-        middle: layerToken(theme.middle, "middle"),
+        middle: layer_token(theme.middle, "middle"),
-        highest: layerToken(theme.highest, "highest"),
+        highest: layer_token(theme.highest, "highest"),
         popover_shadow: popover_shadow_token(theme),
         modal_shadow: modal_shadow_token(theme),
-        players: playersToken(theme),
+        players: players_token(theme),
         syntax: syntax_tokens(theme),
     }
 }

styles/src/theme/tokens/players.ts

@@ -6,10 +6,7 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
 
 export type PlayersToken = Record<keyof Players, PlayerToken>
 
-function build_player_token(
+function build_player_token(theme: ColorScheme, index: number): PlayerToken {
-    theme: ColorScheme,
-    index: number
-): PlayerToken {
     const player_number = index.toString() as keyof Players
 
     return {

styles/src/themes/one/one-dark.ts

@@ -25,7 +25,8 @@ export const theme: ThemeConfig = {
     author: "simurai",
     appearance: ThemeAppearance.Dark,
     license_type: ThemeLicenseType.MIT,
-    license_url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
+    license_url:
+        "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
     license_file: `${__dirname}/LICENSE`,
     input_color: {
         neutral: chroma

styles/src/utils/snake_case.ts

@@ -5,8 +5,8 @@ import { snakeCase } from "case-anything"
 // Typescript magic to convert any string from camelCase to snake_case at compile time
 type SnakeCase<S> = S extends string
     ? S extends `${infer T}${infer U}`
-    ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+        ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
-    : S
+        : S
     : S
 
 type SnakeCased<Type> = {