From 0627c198fd26e3862ff6dc64f8ff86f7dc735689 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 29 Jun 2023 10:57:19 -0400 Subject: [PATCH] WIP snake_case 4/? --- styles/src/component/icon_button.ts | 6 +- styles/src/component/text_button.ts | 6 +- styles/src/element/interactive.test.ts | 18 ++-- styles/src/style_tree/assistant.ts | 84 ++++++++-------- styles/src/style_tree/command_palette.ts | 14 ++- styles/src/style_tree/contact_finder.ts | 22 ++--- styles/src/style_tree/contact_list.ts | 44 ++++----- styles/src/style_tree/contact_notification.ts | 17 ++-- styles/src/style_tree/editor.ts | 96 +++++++++---------- styles/src/style_tree/feedback.ts | 28 +++--- styles/src/style_tree/hover_popover.ts | 45 +++++---- .../style_tree/incoming_call_notification.ts | 49 +++++----- styles/src/style_tree/picker.ts | 61 ++++++------ styles/src/style_tree/project_diagnostics.ts | 11 +-- styles/src/style_tree/project_panel.ts | 90 +++++++++-------- .../style_tree/project_shared_notification.ts | 48 +++++----- styles/src/style_tree/search.ts | 88 +++++++++-------- styles/src/style_tree/shared_screen.ts | 5 +- .../style_tree/simple_message_notification.ts | 37 ++++--- styles/src/style_tree/status_bar.ts | 78 +++++++-------- styles/src/style_tree/tab_bar.ts | 4 +- styles/src/style_tree/titlebar.ts | 4 +- styles/src/style_tree/welcome.ts | 4 +- styles/src/style_tree/workspace.ts | 14 +-- styles/src/theme/color.ts | 2 +- 25 files changed, 428 insertions(+), 447 deletions(-) diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts index 79891c2477809a1312c968241ee833b62f0922cd..4664928d555dce2a07b2e2d1afb1ed7f3f4fcc6b 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 477c2515e320d5e1d4ac2b2cdaf7f8dd587cdde8..64a91de7b0424945e153563d36a012380796add1 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/element/interactive.test.ts b/styles/src/element/interactive.test.ts index b0cc57875f4249e0700cc4f28c7e93a34cec49dc..0e0013fc071ae36e8c80513b56b9cb7d12764ee8 100644 --- a/styles/src/element/interactive.test.ts +++ b/styles/src/element/interactive.test.ts @@ -8,7 +8,7 @@ import { describe, it, expect } from "vitest" describe("interactive", () => { it("creates an Interactive with base properties and states", () => { const result = interactive({ - base: { fontSize: 10, color: "#FFFFFF" }, + base: { font_size: 10, color: "#FFFFFF" }, state: { hovered: { color: "#EEEEEE" }, clicked: { color: "#CCCCCC" }, @@ -16,25 +16,25 @@ describe("interactive", () => { }) expect(result).toEqual({ - default: { color: "#FFFFFF", fontSize: 10 }, - hovered: { color: "#EEEEEE", fontSize: 10 }, - clicked: { color: "#CCCCCC", fontSize: 10 }, + default: { color: "#FFFFFF", font_size: 10 }, + hovered: { color: "#EEEEEE", font_size: 10 }, + clicked: { color: "#CCCCCC", font_size: 10 }, }) }) it("creates an Interactive with no base properties", () => { const result = interactive({ state: { - default: { color: "#FFFFFF", fontSize: 10 }, + default: { color: "#FFFFFF", font_size: 10 }, hovered: { color: "#EEEEEE" }, clicked: { color: "#CCCCCC" }, }, }) expect(result).toEqual({ - default: { color: "#FFFFFF", fontSize: 10 }, - hovered: { color: "#EEEEEE", fontSize: 10 }, - clicked: { color: "#CCCCCC", fontSize: 10 }, + default: { color: "#FFFFFF", font_size: 10 }, + hovered: { color: "#EEEEEE", font_size: 10 }, + clicked: { color: "#CCCCCC", font_size: 10 }, }) }) @@ -48,7 +48,7 @@ describe("interactive", () => { it("throws error when no other state besides default is present", () => { const state = { - default: { fontSize: 10 }, + default: { font_size: 10 }, } expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR) diff --git a/styles/src/style_tree/assistant.ts b/styles/src/style_tree/assistant.ts index fbbfbc4cf1cb5f0a487830247294b692dbe96434..1f14d65c8ece43db23b17fa6fec11b5987acb775 100644 --- a/styles/src/style_tree/assistant.ts +++ b/styles/src/style_tree/assistant.ts @@ -1,23 +1,21 @@ import { ColorScheme } from "../theme/color_scheme" import { text, border, background, foreground } from "./components" -import editor from "./editor" import { interactive } from "../element" -export default function assistant(colorScheme: ColorScheme): any { - const layer = colorScheme.highest +export default function assistant(theme: ColorScheme): any { return { container: { - background: editor(colorScheme).background, + background: background(theme.highest), padding: { left: 12 }, }, message_header: { margin: { bottom: 6, top: 6 }, - background: editor(colorScheme).background, + background: background(theme.highest), }, hamburger_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/hamburger_15.svg", dimensions: { width: 15, @@ -31,7 +29,7 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, @@ -39,7 +37,7 @@ export default function assistant(colorScheme: ColorScheme): any { split_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/split_message_15.svg", dimensions: { width: 15, @@ -53,7 +51,7 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, @@ -61,7 +59,7 @@ export default function assistant(colorScheme: ColorScheme): any { quote_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/quote_15.svg", dimensions: { width: 15, @@ -75,7 +73,7 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, @@ -83,7 +81,7 @@ export default function assistant(colorScheme: ColorScheme): any { assist_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/assist_15.svg", dimensions: { width: 15, @@ -97,7 +95,7 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, @@ -105,7 +103,7 @@ export default function assistant(colorScheme: ColorScheme): any { zoom_in_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/maximize_8.svg", dimensions: { width: 12, @@ -119,7 +117,7 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, @@ -127,7 +125,7 @@ export default function assistant(colorScheme: ColorScheme): any { zoom_out_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/minimize_8.svg", dimensions: { width: 12, @@ -141,7 +139,7 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, @@ -149,7 +147,7 @@ export default function assistant(colorScheme: ColorScheme): any { plus_button: interactive({ base: { icon: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), asset: "icons/plus_12.svg", dimensions: { width: 12, @@ -163,33 +161,33 @@ export default function assistant(colorScheme: ColorScheme): any { state: { hovered: { icon: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, }, }, }), title: { - ...text(layer, "sans", "default", { size: "sm" }), + ...text(theme.highest, "sans", "default", { size: "sm" }), }, saved_conversation: { container: interactive({ base: { - background: background(layer, "on"), + background: background(theme.highest, "on"), padding: { top: 4, bottom: 4 }, }, state: { hovered: { - background: background(layer, "on", "hovered"), + background: background(theme.highest, "on", "hovered"), }, }, }), savedAt: { margin: { left: 8 }, - ...text(layer, "sans", "default", { size: "xs" }), + ...text(theme.highest, "sans", "default", { size: "xs" }), }, title: { margin: { left: 16 }, - ...text(layer, "sans", "default", { + ...text(theme.highest, "sans", "default", { size: "sm", weight: "bold", }), @@ -197,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any { }, user_sender: { default: { - ...text(layer, "sans", "default", { + ...text(theme.highest, "sans", "default", { size: "sm", weight: "bold", }), @@ -205,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any { }, assistant_sender: { default: { - ...text(layer, "sans", "accent", { + ...text(theme.highest, "sans", "accent", { size: "sm", weight: "bold", }), @@ -213,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any { }, system_sender: { default: { - ...text(layer, "sans", "variant", { + ...text(theme.highest, "sans", "variant", { size: "sm", weight: "bold", }), @@ -221,51 +219,51 @@ export default function assistant(colorScheme: ColorScheme): any { }, sent_at: { margin: { top: 2, left: 8 }, - ...text(layer, "sans", "default", { size: "2xs" }), + ...text(theme.highest, "sans", "default", { size: "2xs" }), }, model: interactive({ base: { - background: background(layer, "on"), + background: background(theme.highest, "on"), margin: { left: 12, right: 12, top: 12 }, padding: 4, corner_radius: 4, - ...text(layer, "sans", "default", { size: "xs" }), + ...text(theme.highest, "sans", "default", { size: "xs" }), }, state: { hovered: { - background: background(layer, "on", "hovered"), - border: border(layer, "on", { overlay: true }), + background: background(theme.highest, "on", "hovered"), + border: border(theme.highest, "on", { overlay: true }), }, }, }), remaining_tokens: { - background: background(layer, "on"), + background: background(theme.highest, "on"), margin: { top: 12, right: 24 }, padding: 4, corner_radius: 4, - ...text(layer, "sans", "positive", { size: "xs" }), + ...text(theme.highest, "sans", "positive", { size: "xs" }), }, no_remaining_tokens: { - background: background(layer, "on"), + background: background(theme.highest, "on"), margin: { top: 12, right: 24 }, padding: 4, corner_radius: 4, - ...text(layer, "sans", "negative", { size: "xs" }), + ...text(theme.highest, "sans", "negative", { size: "xs" }), }, error_icon: { margin: { left: 8 }, - color: foreground(layer, "negative"), + color: foreground(theme.highest, "negative"), width: 12, }, api_key_editor: { - background: background(layer, "on"), + background: background(theme.highest, "on"), corner_radius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { + text: text(theme.highest, "mono", "on"), + placeholder_text: text(theme.highest, "mono", "on", "disabled", { size: "xs", }), - selection: colorScheme.players[0], - border: border(layer, "on"), + selection: theme.players[0], + border: border(theme.highest, "on"), padding: { bottom: 4, left: 8, @@ -275,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any { }, api_key_prompt: { padding: 10, - ...text(layer, "sans", "default", { size: "xs" }), + ...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 9198f87299dcd7deab443556416296e667175683..ca9daad95b1d43b829d006a10f9e3899329adabc 100644 --- a/styles/src/style_tree/command_palette.ts +++ b/styles/src/style_tree/command_palette.ts @@ -1,16 +1,14 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { text, background } from "./components" import { toggleable } from "../element" -export default function command_palette(colorScheme: ColorScheme): any { - const layer = colorScheme.highest - +export default function command_palette(theme: ColorScheme): any { const key = toggleable({ base: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), + text: text(theme.highest, "mono", "variant", "default", { size: "xs" }), corner_radius: 2, - background: background(layer, "on"), + background: background(theme.highest, "on"), padding: { top: 1, bottom: 1, @@ -25,8 +23,8 @@ export default function command_palette(colorScheme: ColorScheme): any { }, state: { active: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), + 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/contact_finder.ts b/styles/src/style_tree/contact_finder.ts index f68ce06d3546112bf8979365ac5a72e6843aa5c1..9f02d450d93d7bc2e8bd9d86535ef82b602a7384 100644 --- a/styles/src/style_tree/contact_finder.ts +++ b/styles/src/style_tree/contact_finder.ts @@ -3,12 +3,10 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, foreground, text } from "./components" export default function contact_finder(theme: ColorScheme): any { - const layer = theme.middle - const side_margin = 6 const contact_button = { - background: background(layer, "variant"), - color: foreground(layer, "variant"), + background: background(theme.middle, "variant"), + color: foreground(theme.middle, "variant"), icon_width: 8, button_width: 16, corner_radius: 8, @@ -16,12 +14,12 @@ export default function contact_finder(theme: ColorScheme): any { const picker_style = picker(theme) const picker_input = { - background: background(layer, "on"), + background: background(theme.middle, "on"), corner_radius: 6, - text: text(layer, "mono"), - placeholder_text: text(layer, "mono", "on", "disabled", { size: "xs" }), + text: text(theme.middle, "mono"), + placeholder_text: text(theme.middle, "mono", "on", "disabled", { size: "xs" }), selection: theme.players[0], - border: border(layer), + border: border(theme.middle), padding: { bottom: 4, left: 8, @@ -41,7 +39,7 @@ export default function contact_finder(theme: ColorScheme): any { ...picker_style.item, margin: { left: side_margin, right: side_margin }, }, - no_matches: picker_style.noMatches, + no_matches: picker_style.no_matches, input_editor: picker_input, empty_input_editor: picker_input, }, @@ -58,13 +56,13 @@ export default function contact_finder(theme: ColorScheme): any { contact_button: { ...contact_button, hover: { - background: background(layer, "variant", "hovered"), + background: background(theme.middle, "variant", "hovered"), }, }, disabled_contact_button: { ...contact_button, - background: background(layer, "disabled"), - color: foreground(layer, "disabled"), + background: background(theme.middle, "disabled"), + color: foreground(theme.middle, "disabled"), }, } } diff --git a/styles/src/style_tree/contact_list.ts b/styles/src/style_tree/contact_list.ts index b3b89b7e428ac51be854d263e142dcb6c2191986..93f88e2d4afe4df10a943b5d8e04b42d15160e69 100644 --- a/styles/src/style_tree/contact_list.ts +++ b/styles/src/style_tree/contact_list.ts @@ -8,19 +8,19 @@ import { } from "./components" import { interactive, toggleable } from "../element" export default function contacts_panel(theme: ColorScheme): any { - const nameMargin = 8 - const sidePadding = 12 + const name_margin = 8 + const side_padding = 12 const layer = theme.middle - const contactButton = { + const contact_button = { background: background(layer, "on"), color: foreground(layer, "on"), icon_width: 8, button_width: 16, corner_radius: 8, } - const projectRow = { + const project_row = { guest_avatar_spacing: 4, height: 24, guest_avatar: { @@ -30,19 +30,19 @@ export default function contacts_panel(theme: ColorScheme): any { name: { ...text(layer, "mono", { size: "sm" }), margin: { - left: nameMargin, + left: name_margin, right: 6, }, }, guests: { margin: { - left: nameMargin, - right: nameMargin, + left: name_margin, + right: name_margin, }, }, padding: { - left: sidePadding, - right: sidePadding, + left: side_padding, + right: side_padding, }, } @@ -83,8 +83,8 @@ export default function contacts_panel(theme: ColorScheme): any { ...text(layer, "mono", { size: "sm" }), margin: { top: 14 }, padding: { - left: sidePadding, - right: sidePadding, + left: side_padding, + right: side_padding, }, background: background(layer, "default"), // posiewic: breaking change }, @@ -140,8 +140,8 @@ export default function contacts_panel(theme: ColorScheme): any { inactive: { default: { padding: { - left: sidePadding, - right: sidePadding, + left: side_padding, + right: side_padding, }, }, }, @@ -149,8 +149,8 @@ export default function contacts_panel(theme: ColorScheme): any { default: { background: background(layer, "active"), padding: { - left: sidePadding, - right: sidePadding, + left: side_padding, + right: side_padding, }, }, }, @@ -174,12 +174,12 @@ export default function contacts_panel(theme: ColorScheme): any { contact_username: { ...text(layer, "mono", { size: "sm" }), margin: { - left: nameMargin, + left: name_margin, }, }, - contact_button_spacing: nameMargin, + contact_button_spacing: name_margin, contact_button: interactive({ - base: { ...contactButton }, + base: { ...contact_button }, state: { hovered: { background: background(layer, "hovered"), @@ -187,7 +187,7 @@ export default function contacts_panel(theme: ColorScheme): any { }, }), disabled_button: { - ...contactButton, + ...contact_button, background: background(layer, "on"), color: foreground(layer, "on"), }, @@ -217,15 +217,15 @@ export default function contacts_panel(theme: ColorScheme): any { project_row: toggleable({ base: interactive({ base: { - ...projectRow, + ...project_row, background: background(layer), icon: { - margin: { left: nameMargin }, + margin: { left: name_margin }, color: foreground(layer, "variant"), width: 12, }, name: { - ...projectRow.name, + ...project_row.name, ...text(layer, "mono", { size: "sm" }), }, }, diff --git a/styles/src/style_tree/contact_notification.ts b/styles/src/style_tree/contact_notification.ts index 71467f6584493a44bea86e68cd5880dc7bcd692e..8de5496d91e41d054e5f2eee29f08cc7e0c31054 100644 --- a/styles/src/style_tree/contact_notification.ts +++ b/styles/src/style_tree/contact_notification.ts @@ -1,24 +1,25 @@ import { ColorScheme } from "../theme/color_scheme" import { background, foreground, text } from "./components" import { interactive } from "../element" -const avatarSize = 12 -const headerPadding = 8 export default function contact_notification(theme: ColorScheme): any { + const avatar_size = 12 + const header_padding = 8 + return { header_avatar: { - height: avatarSize, - width: avatarSize, + height: avatar_size, + width: avatar_size, corner_radius: 6, }, header_message: { ...text(theme.lowest, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, + margin: { left: header_padding, right: header_padding }, }, header_height: 18, body_message: { ...text(theme.lowest, "sans", { size: "xs" }), - margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, + margin: { left: avatar_size + header_padding, top: 6, bottom: 6 }, }, button: interactive({ base: { @@ -40,9 +41,9 @@ export default function contact_notification(theme: ColorScheme): any { default: { color: foreground(theme.lowest, "variant"), icon_width: 8, - iconHeight: 8, + icon_height: 8, button_width: 8, - buttonHeight: 8, + button_height: 8, hover: { color: foreground(theme.lowest, "hovered"), }, diff --git a/styles/src/style_tree/editor.ts b/styles/src/style_tree/editor.ts index 95760ce1d0228c28e93cd7fc0c6993d75de1d8c9..67e67e0cf0a3c7cea7454df486acd1c159669ac5 100644 --- a/styles/src/style_tree/editor.ts +++ b/styles/src/style_tree/editor.ts @@ -1,4 +1,4 @@ -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme" import { background, @@ -27,7 +27,7 @@ export default function editor(theme: ColorScheme): any { }, } - function diagnostic(layer: Layer, styleSet: StyleSets) { + function diagnostic(layer: Layer, style_set: StyleSets) { return { text_scale_factor: 0.857, header: { @@ -36,8 +36,8 @@ export default function editor(theme: ColorScheme): any { }), }, message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlight_text: text(layer, "sans", styleSet, "default", { + text: text(layer, "sans", style_set, "default", { size: "sm" }), + highlight_text: text(layer, "sans", style_set, "default", { size: "sm", weight: "bold", }), @@ -50,7 +50,7 @@ export default function editor(theme: ColorScheme): any { return { text_color: syntax.primary.color, background: background(layer), - active_line_background: withOpacity(background(layer, "on"), 0.75), + active_line_background: with_opacity(background(layer, "on"), 0.75), highlighted_line_background: background(layer, "on"), // Inline autocomplete suggestions, Co-pilot suggestions, etc. suggestion: syntax.predictive, @@ -133,7 +133,7 @@ export default function editor(theme: ColorScheme): any { }, }, }, - foldBackground: foreground(layer, "variant"), + fold_background: foreground(layer, "variant"), }, diff: { deleted: is_light @@ -145,31 +145,31 @@ export default function editor(theme: ColorScheme): any { inserted: is_light ? theme.ramps.green(0.4).hex() : theme.ramps.green(0.5).hex(), - removedWidthEm: 0.275, - widthEm: 0.15, + removed_width_em: 0.275, + width_em: 0.15, corner_radius: 0.05, }, /** Highlights matching occurrences of what is under the cursor * as well as matched brackets */ - documentHighlightReadBackground: withOpacity( + document_highlight_read_background: with_opacity( foreground(layer, "accent"), 0.1 ), - documentHighlightWriteBackground: theme.ramps + document_highlight_write_background: theme.ramps .neutral(0.5) .alpha(0.4) .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, + error_color: background(layer, "negative"), + gutter_background: background(layer), + gutter_padding_factor: 3.5, + line_number: with_opacity(foreground(layer), 0.35), + line_number_active: foreground(layer), + rename_fade: 0.6, + unnecessary_code_fade: 0.5, selection: theme.players[0], whitespace: theme.ramps.neutral(0.5).hex(), - guestSelections: [ + guest_selections: [ theme.players[1], theme.players[2], theme.players[3], @@ -187,20 +187,20 @@ export default function editor(theme: ColorScheme): any { }, border: border(theme.middle), shadow: theme.popover_shadow, - matchHighlight: foreground(theme.middle, "accent"), + match_highlight: foreground(theme.middle, "accent"), item: autocomplete_item, - hoveredItem: { + hovered_item: { ...autocomplete_item, - matchHighlight: foreground( + match_highlight: foreground( theme.middle, "accent", "hovered" ), background: background(theme.middle, "hovered"), }, - selectedItem: { + selected_item: { ...autocomplete_item, - matchHighlight: foreground( + match_highlight: foreground( theme.middle, "accent", "active" @@ -208,10 +208,10 @@ export default function editor(theme: ColorScheme): any { background: background(theme.middle, "active"), }, }, - diagnosticHeader: { + diagnostic_header: { background: background(theme.middle), - icon_widthFactor: 1.5, - textScaleFactor: 0.857, + icon_width_factor: 1.5, + text_scale_factor: 0.857, border: border(theme.middle, { bottom: true, top: true, @@ -229,16 +229,16 @@ export default function editor(theme: ColorScheme): any { }), }, message: { - highlightText: text(theme.middle, "sans", { + highlight_text: text(theme.middle, "sans", { size: "sm", weight: "bold", }), text: text(theme.middle, "sans", { size: "sm" }), }, }, - diagnosticPathHeader: { + diagnostic_path_header: { background: background(theme.middle), - textScaleFactor: 0.857, + text_scale_factor: 0.857, filename: text(theme.middle, "mono", { size: "sm" }), path: { ...text(theme.middle, "mono", { size: "sm" }), @@ -247,20 +247,20 @@ export default function editor(theme: ColorScheme): any { }, }, }, - errorDiagnostic: diagnostic(theme.middle, "negative"), - warningDiagnostic: diagnostic(theme.middle, "warning"), - informationDiagnostic: diagnostic(theme.middle, "accent"), - hintDiagnostic: diagnostic(theme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(theme.middle, "base"), - invalidHintDiagnostic: diagnostic(theme.middle, "base"), - invalidInformationDiagnostic: diagnostic(theme.middle, "base"), - invalidWarningDiagnostic: diagnostic(theme.middle, "base"), + error_diagnostic: diagnostic(theme.middle, "negative"), + warning_diagnostic: diagnostic(theme.middle, "warning"), + information_diagnostic: diagnostic(theme.middle, "accent"), + hint_diagnostic: diagnostic(theme.middle, "warning"), + invalid_error_diagnostic: diagnostic(theme.middle, "base"), + invalid_hint_diagnostic: diagnostic(theme.middle, "base"), + invalid_information_diagnostic: diagnostic(theme.middle, "base"), + invalid_warning_diagnostic: diagnostic(theme.middle, "base"), hover_popover: hover_popover(theme), - linkDefinition: { + link_definition: { color: syntax.link_uri.color, underline: syntax.link_uri.underline, }, - jumpIcon: interactive({ + jump_icon: interactive({ base: { color: foreground(layer, "on"), icon_width: 20, @@ -282,12 +282,12 @@ export default function editor(theme: ColorScheme): any { scrollbar: { width: 12, - minHeightFactor: 1.0, + min_height_factor: 1.0, track: { border: border(layer, "variant", { left: true }), }, thumb: { - background: withOpacity(background(layer, "inverted"), 0.3), + background: with_opacity(background(layer, "inverted"), 0.3), border: { width: 1, color: border_color(layer, "variant"), @@ -299,17 +299,17 @@ export default function editor(theme: ColorScheme): any { }, git: { deleted: is_light - ? withOpacity(theme.ramps.red(0.5).hex(), 0.8) - : withOpacity(theme.ramps.red(0.4).hex(), 0.8), + ? with_opacity(theme.ramps.red(0.5).hex(), 0.8) + : with_opacity(theme.ramps.red(0.4).hex(), 0.8), modified: is_light - ? withOpacity(theme.ramps.yellow(0.5).hex(), 0.8) - : withOpacity(theme.ramps.yellow(0.4).hex(), 0.8), + ? with_opacity(theme.ramps.yellow(0.5).hex(), 0.8) + : with_opacity(theme.ramps.yellow(0.4).hex(), 0.8), inserted: is_light - ? withOpacity(theme.ramps.green(0.5).hex(), 0.8) - : withOpacity(theme.ramps.green(0.4).hex(), 0.8), + ? with_opacity(theme.ramps.green(0.5).hex(), 0.8) + : with_opacity(theme.ramps.green(0.4).hex(), 0.8), }, }, - compositionMark: { + composition_mark: { underline: { thickness: 1.0, color: border_color(layer), diff --git a/styles/src/style_tree/feedback.ts b/styles/src/style_tree/feedback.ts index 040c8994be10b05395c668adb09e63600122be22..ab3a40c148b54a1fd7a0a672df258707cd7f3aab 100644 --- a/styles/src/style_tree/feedback.ts +++ b/styles/src/style_tree/feedback.ts @@ -2,16 +2,14 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, text } from "./components" import { interactive } from "../element" -export default function feedback(colorScheme: ColorScheme): any { - const layer = colorScheme.highest - +export default function feedback(theme: ColorScheme): any { return { submit_button: interactive({ base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), + ...text(theme.highest, "mono", "on"), + background: background(theme.highest, "on"), corner_radius: 6, - border: border(layer, "on"), + border: border(theme.highest, "on"), margin: { right: 4, }, @@ -24,24 +22,24 @@ export default function feedback(colorScheme: ColorScheme): any { }, state: { clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), + ...text(theme.highest, "mono", "on", "pressed"), + background: background(theme.highest, "on", "pressed"), + border: border(theme.highest, "on", "pressed"), }, hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), + ...text(theme.highest, "mono", "on", "hovered"), + background: background(theme.highest, "on", "hovered"), + border: border(theme.highest, "on", "hovered"), }, }, }), button_margin: 8, - info_text_default: text(layer, "sans", "default", { size: "xs" }), - link_text_default: text(layer, "sans", "default", { + info_text_default: text(theme.highest, "sans", "default", { size: "xs" }), + link_text_default: text(theme.highest, "sans", "default", { size: "xs", underline: true, }), - link_text_hover: text(layer, "sans", "hovered", { + link_text_hover: text(theme.highest, "sans", "hovered", { size: "xs", underline: true, }), diff --git a/styles/src/style_tree/hover_popover.ts b/styles/src/style_tree/hover_popover.ts index 28f5b1740018e162ba0741e400e76cbc554b1fc8..e9a008b3c61426aaeb79beea37872cf56ed8388e 100644 --- a/styles/src/style_tree/hover_popover.ts +++ b/styles/src/style_tree/hover_popover.ts @@ -1,10 +1,9 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, foreground, text } from "./components" -export default function hover_popover(colorScheme: ColorScheme): any { - const layer = colorScheme.middle - const baseContainer = { - background: background(layer), +export default function hover_popover(theme: ColorScheme): any { + const base_container = { + background: background(theme.middle), corner_radius: 8, padding: { left: 8, @@ -12,35 +11,35 @@ export default function hover_popover(colorScheme: ColorScheme): any { top: 4, bottom: 4, }, - shadow: colorScheme.popover_shadow, - border: border(layer), + shadow: theme.popover_shadow, + border: border(theme.middle), margin: { left: -8, }, } return { - container: baseContainer, - infoContainer: { - ...baseContainer, - background: background(layer, "accent"), - border: border(layer, "accent"), + container: base_container, + info_container: { + ...base_container, + background: background(theme.middle, "accent"), + border: border(theme.middle, "accent"), }, - warningContainer: { - ...baseContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), + warning_container: { + ...base_container, + background: background(theme.middle, "warning"), + border: border(theme.middle, "warning"), }, - errorContainer: { - ...baseContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), + error_container: { + ...base_container, + background: background(theme.middle, "negative"), + border: border(theme.middle, "negative"), }, - blockStyle: { + block_style: { padding: { top: 4 }, }, - prose: text(layer, "sans", { size: "sm" }), - diagnosticSourceHighlight: { color: foreground(layer, "accent") }, - highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better + prose: text(theme.middle, "sans", { size: "sm" }), + 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 2c4fa21867e9cfe34da0044eaa5d1bdc855cf1f4..91947b9da5cfca5a7eefb1a1ac571fe6a24c4ea9 100644 --- a/styles/src/style_tree/incoming_call_notification.ts +++ b/styles/src/style_tree/incoming_call_notification.ts @@ -2,49 +2,48 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, text } from "./components" export default function incoming_call_notification( - colorScheme: ColorScheme + theme: ColorScheme ): unknown { - const layer = colorScheme.middle - const avatarSize = 48 + const avatar_size = 48 return { - windowHeight: 74, - windowWidth: 380, - background: background(layer), - callerContainer: { + window_height: 74, + window_width: 380, + background: background(theme.middle), + caller_container: { padding: 12, }, - callerAvatar: { - height: avatarSize, - width: avatarSize, - corner_radius: avatarSize / 2, + caller_avatar: { + height: avatar_size, + width: avatar_size, + corner_radius: avatar_size / 2, }, - callerMetadata: { + caller_metadata: { margin: { left: 10 }, }, - callerUsername: { - ...text(layer, "sans", { size: "sm", weight: "bold" }), + caller_username: { + ...text(theme.middle, "sans", { size: "sm", weight: "bold" }), margin: { top: -3 }, }, - callerMessage: { - ...text(layer, "sans", "variant", { size: "xs" }), + caller_message: { + ...text(theme.middle, "sans", "variant", { size: "xs" }), margin: { top: -3 }, }, - worktreeRoots: { - ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), + worktree_roots: { + ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }), margin: { top: -3 }, }, button_width: 96, - acceptButton: { - background: background(layer, "accent"), - border: border(layer, { left: true, bottom: true }), - ...text(layer, "sans", "positive", { + accept_button: { + background: background(theme.middle, "accent"), + border: border(theme.middle, { left: true, bottom: true }), + ...text(theme.middle, "sans", "positive", { size: "xs", weight: "bold", }), }, - declineButton: { - border: border(layer, { left: true }), - ...text(layer, "sans", "negative", { + decline_button: { + border: border(theme.middle, { left: true }), + ...text(theme.middle, "sans", "negative", { size: "xs", weight: "bold", }), diff --git a/styles/src/style_tree/picker.ts b/styles/src/style_tree/picker.ts index 22b526f1831c4486cc9251e4a827807b6cbe7d19..7ca76cd85f324d9cc640dd3845a1ca1d3e89a751 100644 --- a/styles/src/style_tree/picker.ts +++ b/styles/src/style_tree/picker.ts @@ -1,24 +1,23 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { background, border, text } from "./components" import { interactive, toggleable } from "../element" -export default function picker(colorScheme: ColorScheme): any { - const layer = colorScheme.lowest +export default function picker(theme: ColorScheme): any { const container = { - background: background(layer), - border: border(layer), - shadow: colorScheme.modal_shadow, + background: background(theme.lowest), + border: border(theme.lowest), + shadow: theme.modal_shadow, corner_radius: 12, padding: { bottom: 4, }, } - const inputEditor = { - placeholderText: text(layer, "sans", "on", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "on"), - border: border(layer, { bottom: true }), + const input_editor = { + placeholder_text: text(theme.lowest, "sans", "on", "disabled"), + selection: theme.players[0], + text: text(theme.lowest, "mono", "on"), + border: border(theme.lowest, { bottom: true }), padding: { bottom: 8, left: 16, @@ -29,13 +28,13 @@ export default function picker(colorScheme: ColorScheme): any { bottom: 4, }, } - const emptyInputEditor: any = { ...inputEditor } - delete emptyInputEditor.border - delete emptyInputEditor.margin + const empty_input_editor: any = { ...input_editor } + delete empty_input_editor.border + delete empty_input_editor.margin return { ...container, - emptyContainer: { + empty_container: { ...container, padding: {}, }, @@ -54,21 +53,21 @@ export default function picker(colorScheme: ColorScheme): any { right: 4, }, corner_radius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { + text: text(theme.lowest, "sans", "variant"), + highlight_text: text(theme.lowest, "sans", "accent", { weight: "bold", }), }, state: { hovered: { - background: withOpacity( - background(layer, "hovered"), + background: with_opacity( + background(theme.lowest, "hovered"), 0.5 ), }, clicked: { - background: withOpacity( - background(layer, "pressed"), + background: with_opacity( + background(theme.lowest, "pressed"), 0.5 ), }, @@ -77,20 +76,20 @@ export default function picker(colorScheme: ColorScheme): any { state: { active: { default: { - background: withOpacity( - background(layer, "base", "active"), + background: with_opacity( + background(theme.lowest, "base", "active"), 0.5 ), }, hovered: { - background: withOpacity( - background(layer, "hovered"), + background: with_opacity( + background(theme.lowest, "hovered"), 0.5 ), }, clicked: { - background: withOpacity( - background(layer, "pressed"), + background: with_opacity( + background(theme.lowest, "pressed"), 0.5 ), }, @@ -98,10 +97,10 @@ export default function picker(colorScheme: ColorScheme): any { }, }), - inputEditor, - emptyInputEditor, - noMatches: { - text: text(layer, "sans", "variant"), + input_editor, + empty_input_editor, + no_matches: { + text: text(theme.lowest, "sans", "variant"), padding: { bottom: 8, left: 16, diff --git a/styles/src/style_tree/project_diagnostics.ts b/styles/src/style_tree/project_diagnostics.ts index 10f556d12150332a79a506370096651bae217d1e..5962b98a26ce20ebe2c8c06245cb0d134c3397e9 100644 --- a/styles/src/style_tree/project_diagnostics.ts +++ b/styles/src/style_tree/project_diagnostics.ts @@ -1,13 +1,12 @@ import { ColorScheme } from "../theme/color_scheme" import { background, text } from "./components" -export default function project_diagnostics(colorScheme: ColorScheme): any { - const layer = colorScheme.highest +export default function project_diagnostics(theme: ColorScheme): any { return { - background: background(layer), - tabIconSpacing: 4, + background: background(theme.highest), + tab_icon_spacing: 4, tab_icon_width: 13, - tabSummarySpacing: 10, - emptyMessage: text(layer, "sans", "variant", { size: "md" }), + tab_summary_spacing: 10, + empty_message: text(theme.highest, "sans", "variant", { size: "md" }), } } diff --git a/styles/src/style_tree/project_panel.ts b/styles/src/style_tree/project_panel.ts index 589e120e381075fe2b12303a0c5a9b798212cf5a..346ffb7641e8c891cd567046f9716e94db9380fc 100644 --- a/styles/src/style_tree/project_panel.ts +++ b/styles/src/style_tree/project_panel.ts @@ -1,5 +1,5 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { Border, TextStyle, @@ -13,13 +13,11 @@ import merge from "ts-deepmerge" export default function project_panel(theme: ColorScheme): any { const { is_light } = theme - const layer = theme.middle - type EntryStateProps = { background?: string border?: Border text?: TextStyle - iconColor?: string + icon_color?: string } type EntryState = { @@ -45,17 +43,17 @@ export default function project_panel(theme: ColorScheme): any { const base_properties = { height: 22, - background: background(layer), - iconColor: foreground(layer, "variant"), - iconSize: 7, + background: background(theme.middle), + icon_color: foreground(theme.middle, "variant"), + icon_size: 7, icon_spacing: 5, - text: text(layer, "mono", "variant", { size: "sm" }), + text: text(theme.middle, "mono", "variant", { size: "sm" }), status: { ...git_status, }, } - const selectedStyle: EntryState | undefined = selected + const selected_style: EntryState | undefined = selected ? selected : unselected @@ -67,27 +65,27 @@ export default function project_panel(theme: ColorScheme): any { const unselected_hovered_style = merge( base_properties, unselected?.hovered ?? {}, - { background: background(layer, "variant", "hovered") } + { background: background(theme.middle, "variant", "hovered") } ) const unselected_clicked_style = merge( base_properties, unselected?.clicked ?? {}, - { background: background(layer, "variant", "pressed") } + { background: background(theme.middle, "variant", "pressed") } ) const selected_default_style = merge( base_properties, - selectedStyle?.default ?? {}, - { background: background(layer) } + selected_style?.default ?? {}, + { background: background(theme.middle) } ) const selected_hovered_style = merge( base_properties, - selectedStyle?.hovered ?? {}, - { background: background(layer, "variant", "hovered") } + selected_style?.hovered ?? {}, + { background: background(theme.middle, "variant", "hovered") } ) const selected_clicked_style = merge( base_properties, - selectedStyle?.clicked ?? {}, - { background: background(layer, "variant", "pressed") } + selected_style?.clicked ?? {}, + { background: background(theme.middle, "variant", "pressed") } ) return toggleable({ @@ -110,13 +108,13 @@ export default function project_panel(theme: ColorScheme): any { }) } - const defaultEntry = entry() + const default_entry = entry() return { - openProjectButton: interactive({ + open_project_button: interactive({ base: { - background: background(layer), - border: border(layer, "active"), + background: background(theme.middle), + border: border(theme.middle, "active"), corner_radius: 4, margin: { top: 16, @@ -129,59 +127,59 @@ export default function project_panel(theme: ColorScheme): any { left: 7, right: 7, }, - ...text(layer, "sans", "default", { size: "sm" }), + ...text(theme.middle, "sans", "default", { size: "sm" }), }, state: { hovered: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), + ...text(theme.middle, "sans", "default", { size: "sm" }), + background: background(theme.middle, "hovered"), + border: border(theme.middle, "active"), }, clicked: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "pressed"), - border: border(layer, "active"), + ...text(theme.middle, "sans", "default", { size: "sm" }), + background: background(theme.middle, "pressed"), + border: border(theme.middle, "active"), }, }, }), - background: background(layer), + background: background(theme.middle), padding: { left: 6, right: 6, top: 0, bottom: 6 }, - indentWidth: 12, - entry: defaultEntry, - draggedEntry: { - ...defaultEntry.inactive.default, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), + indent_width: 12, + entry: default_entry, + dragged_entry: { + ...default_entry.inactive.default, + text: text(theme.middle, "mono", "on", { size: "sm" }), + background: with_opacity(background(theme.middle, "on"), 0.9), + border: border(theme.middle), }, - ignoredEntry: entry( + ignored_entry: entry( { default: { - text: text(layer, "mono", "disabled"), + text: text(theme.middle, "mono", "disabled"), }, }, { default: { - iconColor: foreground(layer, "variant"), + icon_color: foreground(theme.middle, "variant"), }, } ), - cutEntry: entry( + cut_entry: entry( { default: { - text: text(layer, "mono", "disabled"), + text: text(theme.middle, "mono", "disabled"), }, }, { default: { - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), + background: background(theme.middle, "active"), + text: text(theme.middle, "mono", "disabled", { size: "sm" }), }, } ), - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), + filename_editor: { + background: background(theme.middle, "on"), + text: text(theme.middle, "mono", "on", { size: "sm" }), selection: theme.players[0], }, } diff --git a/styles/src/style_tree/project_shared_notification.ts b/styles/src/style_tree/project_shared_notification.ts index 6fe8170a3ce3815c8eb6118c1309a671cfe0f2c4..d93c1d65d50f1f8cc85ca1e3d051b875efa37941 100644 --- a/styles/src/style_tree/project_shared_notification.ts +++ b/styles/src/style_tree/project_shared_notification.ts @@ -2,50 +2,48 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, text } from "./components" export default function project_shared_notification( - colorScheme: ColorScheme + theme: ColorScheme ): unknown { - const layer = colorScheme.middle - - const avatarSize = 48 + const avatar_size = 48 return { - windowHeight: 74, - windowWidth: 380, - background: background(layer), - ownerContainer: { + window_height: 74, + window_width: 380, + background: background(theme.middle), + owner_container: { padding: 12, }, - ownerAvatar: { - height: avatarSize, - width: avatarSize, - corner_radius: avatarSize / 2, + owner_avatar: { + height: avatar_size, + width: avatar_size, + corner_radius: avatar_size / 2, }, - ownerMetadata: { + owner_metadata: { margin: { left: 10 }, }, - ownerUsername: { - ...text(layer, "sans", { size: "sm", weight: "bold" }), + owner_username: { + ...text(theme.middle, "sans", { size: "sm", weight: "bold" }), margin: { top: -3 }, }, message: { - ...text(layer, "sans", "variant", { size: "xs" }), + ...text(theme.middle, "sans", "variant", { size: "xs" }), margin: { top: -3 }, }, - worktreeRoots: { - ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), + worktree_roots: { + ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }), margin: { top: -3 }, }, button_width: 96, - openButton: { - background: background(layer, "accent"), - border: border(layer, { left: true, bottom: true }), - ...text(layer, "sans", "accent", { + open_button: { + background: background(theme.middle, "accent"), + border: border(theme.middle, { left: true, bottom: true }), + ...text(theme.middle, "sans", "accent", { size: "xs", weight: "bold", }), }, - dismissButton: { - border: border(layer, { left: true }), - ...text(layer, "sans", "variant", { + dismiss_button: { + border: border(theme.middle, { left: true }), + ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold", }), diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts index 37040613b303bee0a032756e7359f24a32ae1170..da515114e7e33f4e4bd4e110176ed1918ccc4068 100644 --- a/styles/src/style_tree/search.ts +++ b/styles/src/style_tree/search.ts @@ -1,21 +1,19 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" -export default function search(colorScheme: ColorScheme): any { - const layer = colorScheme.highest - +export default function search(theme: ColorScheme): any { // Search input const editor = { - background: background(layer), + background: background(theme.highest), corner_radius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), + min_width: 200, + max_width: 500, + placeholder_text: text(theme.highest, "mono", "disabled"), + selection: theme.players[0], + text: text(theme.highest, "mono", "default"), + border: border(theme.highest), margin: { right: 12, }, @@ -27,22 +25,22 @@ export default function search(colorScheme: ColorScheme): any { }, } - const includeExcludeEditor = { + const include_exclude_editor = { ...editor, - minWidth: 100, - maxWidth: 250, + min_width: 100, + max_width: 250, } return { // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive - matchBackground: withOpacity(foreground(layer, "accent"), 0.4), - optionButton: toggleable({ + match_background: with_opacity(foreground(theme.highest, "accent"), 0.4), + option_button: toggleable({ base: interactive({ base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), + ...text(theme.highest, "mono", "on"), + background: background(theme.highest, "on"), corner_radius: 6, - border: border(layer, "on"), + border: border(theme.highest, "on"), margin: { right: 4, }, @@ -55,66 +53,66 @@ export default function search(colorScheme: ColorScheme): any { }, state: { hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), + ...text(theme.highest, "mono", "on", "hovered"), + background: background(theme.highest, "on", "hovered"), + border: border(theme.highest, "on", "hovered"), }, clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), + ...text(theme.highest, "mono", "on", "pressed"), + background: background(theme.highest, "on", "pressed"), + border: border(theme.highest, "on", "pressed"), }, }, }), state: { active: { default: { - ...text(layer, "mono", "accent"), + ...text(theme.highest, "mono", "accent"), }, hovered: { - ...text(layer, "mono", "accent", "hovered"), + ...text(theme.highest, "mono", "accent", "hovered"), }, clicked: { - ...text(layer, "mono", "accent", "pressed"), + ...text(theme.highest, "mono", "accent", "pressed"), }, }, }, }), editor, - invalidEditor: { + invalid_editor: { ...editor, - border: border(layer, "negative"), + border: border(theme.highest, "negative"), }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), + include_exclude_editor, + invalid_include_exclude_editor: { + ...include_exclude_editor, + border: border(theme.highest, "negative"), }, - matchIndex: { - ...text(layer, "mono", "variant"), + match_index: { + ...text(theme.highest, "mono", "variant"), padding: { left: 6, }, }, - optionButtonGroup: { + option_button_group: { padding: { left: 12, right: 12, }, }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), + include_exclude_inputs: { + ...text(theme.highest, "mono", "variant"), padding: { right: 6, }, }, - resultsStatus: { - ...text(layer, "mono", "on"), + results_status: { + ...text(theme.highest, "mono", "on"), size: 18, }, - dismissButton: interactive({ + dismiss_button: interactive({ base: { - color: foreground(layer, "variant"), + color: foreground(theme.highest, "variant"), icon_width: 12, button_width: 14, padding: { @@ -124,10 +122,10 @@ export default function search(colorScheme: ColorScheme): any { }, state: { hovered: { - color: foreground(layer, "hovered"), + color: foreground(theme.highest, "hovered"), }, clicked: { - color: foreground(layer, "pressed"), + color: foreground(theme.highest, "pressed"), }, }, }), diff --git a/styles/src/style_tree/shared_screen.ts b/styles/src/style_tree/shared_screen.ts index bc4ac0b5d705cca2d2f25597ba26681bbfc6feaf..b57c483f1c27b106e44f6a482dc9d8c64cdacacb 100644 --- a/styles/src/style_tree/shared_screen.ts +++ b/styles/src/style_tree/shared_screen.ts @@ -1,9 +1,8 @@ import { ColorScheme } from "../theme/color_scheme" import { background } from "./components" -export default function sharedScreen(colorScheme: ColorScheme) { - const layer = colorScheme.highest +export default function sharedScreen(theme: ColorScheme) { return { - background: background(layer), + background: background(theme.highest), } } diff --git a/styles/src/style_tree/simple_message_notification.ts b/styles/src/style_tree/simple_message_notification.ts index 621bf21232a15bb665bdab91b0a5b738fd251730..896f90a51b7095b64596b8d9560bdd0d9eaf554d 100644 --- a/styles/src/style_tree/simple_message_notification.ts +++ b/styles/src/style_tree/simple_message_notification.ts @@ -2,21 +2,20 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, foreground, text } from "./components" import { interactive } from "../element" -const headerPadding = 8 - export default function simple_message_notification( - colorScheme: ColorScheme -): unknown { - const layer = colorScheme.middle + theme: ColorScheme +): any { + const header_padding = 8 + return { message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, + ...text(theme.middle, "sans", { size: "xs" }), + margin: { left: header_padding, right: header_padding }, }, - actionMessage: interactive({ + action_nessage: interactive({ base: { - ...text(layer, "sans", { size: "xs" }), - border: border(layer, "active"), + ...text(theme.middle, "sans", { size: "xs" }), + border: border(theme.middle, "active"), corner_radius: 4, padding: { top: 3, @@ -25,27 +24,27 @@ export default function simple_message_notification( right: 7, }, - margin: { left: headerPadding, top: 6, bottom: 6 }, + margin: { left: header_padding, top: 6, bottom: 6 }, }, state: { hovered: { - ...text(layer, "sans", "default", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "active"), + ...text(theme.middle, "sans", "default", { size: "xs" }), + background: background(theme.middle, "hovered"), + border: border(theme.middle, "active"), }, }, }), - dismissButton: interactive({ + dismiss_button: interactive({ base: { - color: foreground(layer), + color: foreground(theme.middle), icon_width: 8, - iconHeight: 8, + icon_height: 8, button_width: 8, - buttonHeight: 8, + button_height: 8, }, state: { hovered: { - color: foreground(layer, "hovered"), + color: foreground(theme.middle, "hovered"), }, }, }), diff --git a/styles/src/style_tree/status_bar.ts b/styles/src/style_tree/status_bar.ts index d67634d5a80436cd4e452619ef971032fb1bbf8c..652c8bf05c636f74ed03377cbed445263c26465d 100644 --- a/styles/src/style_tree/status_bar.ts +++ b/styles/src/style_tree/status_bar.ts @@ -1,22 +1,22 @@ import { ColorScheme } from "../theme/color_scheme" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" -export default function status_bar(colorScheme: ColorScheme): any { - const layer = colorScheme.lowest +export default function status_bar(theme: ColorScheme): any { + const layer = theme.lowest - const statusContainer = { + const status_container = { corner_radius: 6, padding: { top: 3, bottom: 3, left: 6, right: 6 }, } - const diagnosticStatusContainer = { + const diagnostic_status_container = { corner_radius: 6, padding: { top: 1, bottom: 1, left: 6, right: 6 }, } return { height: 30, - itemSpacing: 8, + item_spacing: 8, padding: { top: 1, bottom: 1, @@ -24,8 +24,8 @@ export default function status_bar(colorScheme: ColorScheme): any { right: 6, }, border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - activeLanguage: interactive({ + cursor_position: text(layer, "sans", "variant"), + active_language: interactive({ base: { padding: { left: 6, right: 6 }, ...text(layer, "sans", "variant"), @@ -36,83 +36,83 @@ export default function status_bar(colorScheme: ColorScheme): any { }, }, }), - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: interactive({ + auto_updat_progress_message: text(layer, "sans", "variant"), + auto_update_done_message: text(layer, "sans", "variant"), + lsp_status: interactive({ base: { - ...diagnosticStatusContainer, + ...diagnostic_status_container, icon_spacing: 4, icon_width: 14, height: 18, message: text(layer, "sans"), - iconColor: foreground(layer), + icon_color: foreground(layer), }, state: { hovered: { message: text(layer, "sans"), - iconColor: foreground(layer), + icon_color: foreground(layer), background: background(layer, "hovered"), }, }, }), - diagnosticMessage: interactive({ + diagnostic_message: interactive({ base: { ...text(layer, "sans"), }, state: { hovered: text(layer, "sans", "hovered") }, }), - diagnosticSummary: interactive({ + diagnostic_summary: interactive({ base: { height: 20, icon_width: 16, icon_spacing: 2, - summarySpacing: 6, + summary_spacing: 6, text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { + icon_color_ok: foreground(layer, "variant"), + icon_color_warning: foreground(layer, "warning"), + icon_color_error: foreground(layer, "negative"), + container_ok: { corner_radius: 6, padding: { top: 3, bottom: 3, left: 7, right: 7 }, }, - containerWarning: { - ...diagnosticStatusContainer, + container_warning: { + ...diagnostic_status_container, background: background(layer, "warning"), border: border(layer, "warning"), }, - containerError: { - ...diagnosticStatusContainer, + container_error: { + ...diagnostic_status_container, background: background(layer, "negative"), border: border(layer, "negative"), }, }, state: { hovered: { - iconColorOk: foreground(layer, "on"), - containerOk: { + icon_color_ok: foreground(layer, "on"), + container_ok: { background: background(layer, "on", "hovered"), }, - containerWarning: { + container_warning: { background: background(layer, "warning", "hovered"), border: border(layer, "warning", "hovered"), }, - containerError: { + container_error: { background: background(layer, "negative", "hovered"), border: border(layer, "negative", "hovered"), }, }, }, }), - panelButtons: { - groupLeft: {}, - groupBottom: {}, - groupRight: {}, + panel_buttons: { + group_left: {}, + group_bottom: {}, + group_right: {}, button: toggleable({ base: interactive({ base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), + ...status_container, + icon_size: 16, + icon_color: foreground(layer, "variant"), label: { margin: { left: 6 }, ...text(layer, "sans", { size: "sm" }), @@ -120,7 +120,7 @@ export default function status_bar(colorScheme: ColorScheme): any { }, state: { hovered: { - iconColor: foreground(layer, "hovered"), + icon_color: foreground(layer, "hovered"), background: background(layer, "variant"), }, }, @@ -128,15 +128,15 @@ export default function status_bar(colorScheme: ColorScheme): any { state: { active: { default: { - iconColor: foreground(layer, "active"), + icon_color: foreground(layer, "active"), background: background(layer, "active"), }, hovered: { - iconColor: foreground(layer, "hovered"), + icon_color: foreground(layer, "hovered"), background: background(layer, "hovered"), }, clicked: { - iconColor: foreground(layer, "pressed"), + icon_color: foreground(layer, "pressed"), background: background(layer, "pressed"), }, }, diff --git a/styles/src/style_tree/tab_bar.ts b/styles/src/style_tree/tab_bar.ts index 63f0b213a6c44307bcc2509401c3af60bc850541..dc869024bcf0b72ef57dba6e94d16ec77ef28858 100644 --- a/styles/src/style_tree/tab_bar.ts +++ b/styles/src/style_tree/tab_bar.ts @@ -1,5 +1,5 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { text, border, background, foreground } from "./components" import { interactive, toggleable } from "../element" @@ -71,7 +71,7 @@ export default function tab_bar(colorScheme: ColorScheme): any { const draggedTab = { ...activePaneActiveTab, - background: withOpacity(tab.background, 0.9), + background: with_opacity(tab.background, 0.9), border: undefined as any, shadow: colorScheme.popover_shadow, } diff --git a/styles/src/style_tree/titlebar.ts b/styles/src/style_tree/titlebar.ts index dc1d098a3c3369aeb061764f2c2f38e7f21038a1..5972ba4bdd90c6a49237f1c58d0add7ab95bc8fd 100644 --- a/styles/src/style_tree/titlebar.ts +++ b/styles/src/style_tree/titlebar.ts @@ -2,7 +2,7 @@ import { ColorScheme } from "../common" import { icon_button, toggleable_icon_button } from "../component/icon_button" import { toggleable_text_button } from "../component/text_button" import { interactive, toggleable } from "../element" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { background, border, foreground, text } from "./components" const ITEM_SPACING = 8 @@ -225,7 +225,7 @@ export function titlebar(theme: ColorScheme): any { // When the collaboration server is out of date, show a warning outdatedWarning: { ...text(theme.lowest, "sans", "warning", { size: "xs" }), - background: withOpacity(background(theme.lowest, "warning"), 0.3), + background: with_opacity(background(theme.lowest, "warning"), 0.3), border: border(theme.lowest, "warning"), margin: { left: ITEM_SPACING, diff --git a/styles/src/style_tree/welcome.ts b/styles/src/style_tree/welcome.ts index 9ae9716f66b1d72cb9aab33c830b207ba53f352f..2e21e331707c098953c0447ccbe1cd23dc197f4b 100644 --- a/styles/src/style_tree/welcome.ts +++ b/styles/src/style_tree/welcome.ts @@ -1,5 +1,5 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { border, background, @@ -56,7 +56,7 @@ export default function welcome(colorScheme: ColorScheme): any { }, checkboxGroup: { border: border(layer, "variant"), - background: withOpacity(background(layer, "hovered"), 0.25), + background: with_opacity(background(layer, "hovered"), 0.25), corner_radius: 4, padding: { left: 12, diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts index 8c60c9d402fe9000745b14f7b31bc0daf6246b25..02b6c80fa989a19ba0e694edc69e644bc70c5595 100644 --- a/styles/src/style_tree/workspace.ts +++ b/styles/src/style_tree/workspace.ts @@ -1,5 +1,5 @@ import { ColorScheme } from "../theme/color_scheme" -import { withOpacity } from "../theme/color" +import { with_opacity } from "../theme/color" import { background, border, @@ -25,14 +25,14 @@ export default function workspace(colorScheme: ColorScheme): any { height: 256, }, logo: svg( - withOpacity("#000000", colorScheme.is_light ? 0.6 : 0.8), + with_opacity("#000000", colorScheme.is_light ? 0.6 : 0.8), "icons/logo_96.svg", 256, 256 ), logoShadow: svg( - withOpacity( + with_opacity( colorScheme.is_light ? "#FFFFFF" : colorScheme.lowest.base.default.background, @@ -97,8 +97,8 @@ export default function workspace(colorScheme: ColorScheme): any { zoomedBackground: { cursor: "Arrow", background: is_light - ? withOpacity(background(colorScheme.lowest), 0.8) - : withOpacity(background(colorScheme.highest), 0.6), + ? with_opacity(background(colorScheme.lowest), 0.8) + : with_opacity(background(colorScheme.highest), 0.6), }, zoomedPaneForeground: { margin: 16, @@ -181,7 +181,7 @@ export default function workspace(colorScheme: ColorScheme): any { }), disconnectedOverlay: { ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), + background: with_opacity(background(layer), 0.8), }, notification: { margin: { top: 10 }, @@ -195,6 +195,6 @@ export default function workspace(colorScheme: ColorScheme): any { width: 400, margin: { right: 10, bottom: 10 }, }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + dropTargetOverlayColor: with_opacity(foreground(layer, "variant"), 0.5), } } diff --git a/styles/src/theme/color.ts b/styles/src/theme/color.ts index 58ee4ccc7c236f4312b3dd5658c0cb5acff7030c..83c2107483664986819a1f0e7c2eb42ac2c4b2d7 100644 --- a/styles/src/theme/color.ts +++ b/styles/src/theme/color.ts @@ -1,5 +1,5 @@ import chroma from "chroma-js" -export function withOpacity(color: string, opacity: number): string { +export function with_opacity(color: string, opacity: number): string { return chroma(color).alpha(opacity).hex() }