Nate Butler created
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 +++---
styles/src/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 ++++++------
styles/src/style_tree/project_shared_notification.ts | 48 +++---
styles/src/style_tree/search.ts | 88 ++++++------
styles/src/style_tree/shared_screen.ts | 5
styles/src/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(-)
@@ -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<Margin>
}
@@ -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<Margin>
text_properties?: TextProperties
@@ -8,7 +8,7 @@ import { describe, it, expect } from "vitest"
describe("interactive", () => {
it("creates an Interactive<Element> 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<Element> 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)
@@ -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" }),
},
}
}
@@ -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),
},
},
})
@@ -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"),
},
}
}
@@ -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" }),
},
},
@@ -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"),
},
@@ -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),
@@ -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,
}),
@@ -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
}
}
@@ -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",
}),
@@ -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,
@@ -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" }),
}
}
@@ -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],
},
}
@@ -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",
}),
@@ -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"),
},
},
}),
@@ -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),
}
}
@@ -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"),
},
},
}),
@@ -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"),
},
},
@@ -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,
}
@@ -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,
@@ -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,
@@ -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),
}
}
@@ -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()
}