diff --git a/styles/src/build_licenses.ts b/styles/src/build_licenses.ts index 9cfaafdb75..76c18dfee1 100644 --- a/styles/src/build_licenses.ts +++ b/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) } } diff --git a/styles/src/build_themes.ts b/styles/src/build_themes.ts index 98ab8d2708..5a091719df 100644 --- a/styles/src/build_themes.ts +++ b/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) { - const style_tree = snakeCase(app(color_scheme)) + for (const color_scheme of themes) { + 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(color_schemes, `${assets_directory}/themes`) +write_themes(all_themes, `${assets_directory}/themes`) diff --git a/styles/src/build_tokens.ts b/styles/src/build_tokens.ts index 09eed6a7b9..e33c3712e6 100644 --- a/styles/src/build_tokens.ts +++ b/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 }) diff --git a/styles/src/common.ts b/styles/src/common.ts index 6c90de4094..054b283791 100644 --- a/styles/src/common.ts +++ b/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 = - | "normal" - | "bold" +export type FontWeight = "normal" | "bold" export const font_weights: { [key: string]: FontWeight } = { normal: "normal", diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts index 4664928d55..79891c2477 100644 --- a/styles/src/component/icon_button.ts +++ b/styles/src/component/icon_button.ts @@ -11,9 +11,9 @@ export type Margin = { interface IconButtonOptions { layer?: - | ColorScheme["lowest"] - | ColorScheme["middle"] - | ColorScheme["highest"] + | ColorScheme["lowest"] + | ColorScheme["middle"] + | ColorScheme["highest"] color?: keyof ColorScheme["lowest"] margin?: Partial } diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts index 64a91de7b0..477c2515e3 100644 --- a/styles/src/component/text_button.ts +++ b/styles/src/component/text_button.ts @@ -10,9 +10,9 @@ import { Margin } from "./icon_button" interface TextButtonOptions { layer?: - | ColorScheme["lowest"] - | ColorScheme["middle"] - | ColorScheme["highest"] + | ColorScheme["lowest"] + | ColorScheme["middle"] + | ColorScheme["highest"] color?: keyof ColorScheme["lowest"] margin?: Partial text_properties?: TextProperties diff --git a/styles/src/style_tree/assistant.ts b/styles/src/style_tree/assistant.ts index 1f14d65c8e..bdde221aca 100644 --- a/styles/src/style_tree/assistant.ts +++ b/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" }), }, diff --git a/styles/src/style_tree/command_palette.ts b/styles/src/style_tree/command_palette.ts index ca9daad95b..289deef54b 100644 --- a/styles/src/style_tree/command_palette.ts +++ b/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), }, }, diff --git a/styles/src/style_tree/components.ts b/styles/src/style_tree/components.ts index 6e20486631..db32712f41 100644 --- a/styles/src/style_tree/components.ts +++ b/styles/src/style_tree/components.ts @@ -1,8 +1,4 @@ -import { - font_families, - font_sizes, - FontWeight, -} from "../common" +import { 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 { diff --git a/styles/src/style_tree/contact_finder.ts b/styles/src/style_tree/contact_finder.ts index 9f02d450d9..e61d100264 100644 --- a/styles/src/style_tree/contact_finder.ts +++ b/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: { diff --git a/styles/src/style_tree/context_menu.ts b/styles/src/style_tree/context_menu.ts index f111225c94..af45942d2d 100644 --- a/styles/src/style_tree/context_menu.ts +++ b/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", diff --git a/styles/src/style_tree/copilot.ts b/styles/src/style_tree/copilot.ts index 7b0fc5e4ea..eee6880e0c 100644 --- a/styles/src/style_tree/copilot.ts +++ b/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, diff --git a/styles/src/style_tree/editor.ts b/styles/src/style_tree/editor.ts index 67e67e0cf0..aeb84f678d 100644 --- a/styles/src/style_tree/editor.ts +++ b/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( - theme.middle, - "accent", - "hovered" - ), + match_highlight: foreground(theme.middle, "accent", "hovered"), background: background(theme.middle, "hovered"), }, selected_item: { ...autocomplete_item, - match_highlight: foreground( - theme.middle, - "accent", - "active" - ), + match_highlight: foreground(theme.middle, "accent", "active"), background: background(theme.middle, "active"), }, }, diff --git a/styles/src/style_tree/feedback.ts b/styles/src/style_tree/feedback.ts index ab3a40c148..9217b60929 100644 --- a/styles/src/style_tree/feedback.ts +++ b/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, diff --git a/styles/src/style_tree/hover_popover.ts b/styles/src/style_tree/hover_popover.ts index e9a008b3c6..f469505741 100644 --- a/styles/src/style_tree/hover_popover.ts +++ b/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 } } diff --git a/styles/src/style_tree/incoming_call_notification.ts b/styles/src/style_tree/incoming_call_notification.ts index 91947b9da5..ca46596e57 100644 --- a/styles/src/style_tree/incoming_call_notification.ts +++ b/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, diff --git a/styles/src/style_tree/project_panel.ts b/styles/src/style_tree/project_panel.ts index 346ffb7641..6ca37936de 100644 --- a/styles/src/style_tree/project_panel.ts +++ b/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", + }), }, } ), diff --git a/styles/src/style_tree/project_shared_notification.ts b/styles/src/style_tree/project_shared_notification.ts index d93c1d65d5..ffda0f4b70 100644 --- a/styles/src/style_tree/project_shared_notification.ts +++ b/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, diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts index da515114e7..df260f95b7 100644 --- a/styles/src/style_tree/search.ts +++ b/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: { diff --git a/styles/src/style_tree/simple_message_notification.ts b/styles/src/style_tree/simple_message_notification.ts index e9567e235a..0b5c1e0c29 100644 --- a/styles/src/style_tree/simple_message_notification.ts +++ b/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( - theme: ColorScheme -): any { +export default function simple_message_notification(theme: ColorScheme): any { const header_padding = 8 return { diff --git a/styles/src/style_tree/toolbar_dropdown_menu.ts b/styles/src/style_tree/toolbar_dropdown_menu.ts index df5cc094c1..dc22ac73cf 100644 --- a/styles/src/style_tree/toolbar_dropdown_menu.ts +++ b/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", + }), }, }, }), diff --git a/styles/src/style_tree/update_notification.ts b/styles/src/style_tree/update_notification.ts index 48581a5d21..d14e840450 100644 --- a/styles/src/style_tree/update_notification.ts +++ b/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 diff --git a/styles/src/style_tree/welcome.ts b/styles/src/style_tree/welcome.ts index 0d99ad3f77..fad8dfe235 100644 --- a/styles/src/style_tree/welcome.ts +++ b/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"), diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts index 82b05eab91..0326de414a 100644 --- a/styles/src/style_tree/workspace.ts +++ b/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( - theme.highest, - "on", - "hovered" - ), + background: background(theme.highest, "on", "hovered"), }, disabled: { - color: foreground( - theme.highest, - "on", - "disabled" - ), + color: foreground(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( - theme.highest, - "on", - "hovered" - ), + background: background(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 + ), } } diff --git a/styles/src/theme/syntax.ts b/styles/src/theme/syntax.ts index a8bf807ee0..148d600713 100644 --- a/styles/src/theme/syntax.ts +++ b/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 } diff --git a/styles/src/theme/tokens/color_scheme.ts b/styles/src/theme/tokens/color_scheme.ts index 57793cf8dd..a8ce4ec2d2 100644 --- a/styles/src/theme/tokens/color_scheme.ts +++ b/styles/src/theme/tokens/color_scheme.ts @@ -10,9 +10,9 @@ import { SyntaxHighlightStyle, ThemeSyntax, } from "../color_scheme" -import { LayerToken, layerToken } from "./layer" -import { PlayersToken, playersToken } from "./players" -import { colorToken } from "./token" +import { LayerToken, layer_token } from "./layer" +import { PlayersToken, players_token } from "./players" +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 - return { ...acc, [style_key]: colorToken(style_key, color) } + return { ...acc, [style_key]: color_token(style_key, color) } }, {} as ThemeSyntaxColorTokens) } -const syntax_tokens = ( - theme: ColorScheme -): ColorSchemeTokens["syntax"] => { +const syntax_tokens = (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"), - middle: layerToken(theme.middle, "middle"), - highest: layerToken(theme.highest, "highest"), + lowest: layer_token(theme.lowest, "lowest"), + middle: layer_token(theme.middle, "middle"), + 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), } } diff --git a/styles/src/theme/tokens/players.ts b/styles/src/theme/tokens/players.ts index 68a8e676a7..545a712ff1 100644 --- a/styles/src/theme/tokens/players.ts +++ b/styles/src/theme/tokens/players.ts @@ -6,10 +6,7 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken> export type PlayersToken = Record -function build_player_token( - theme: ColorScheme, - index: number -): PlayerToken { +function build_player_token(theme: ColorScheme, index: number): PlayerToken { const player_number = index.toString() as keyof Players return { diff --git a/styles/src/themes/one/one-dark.ts b/styles/src/themes/one/one-dark.ts index 1241668cc2..f672b892ee 100644 --- a/styles/src/themes/one/one-dark.ts +++ b/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 diff --git a/styles/src/utils/snake_case.ts b/styles/src/utils/snake_case.ts index 38c8a90a9e..cdd9684752 100644 --- a/styles/src/utils/snake_case.ts +++ b/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 extends string ? S extends `${infer T}${infer U}` - ? `${T extends Capitalize ? "_" : ""}${Lowercase}${SnakeCase}` - : S + ? `${T extends Capitalize ? "_" : ""}${Lowercase}${SnakeCase}` + : S : S type SnakeCased = {