zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-20 02:47:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

WIP snake_case 4/?

Browse Source
This commit is contained in:
Nate Butler 2023-06-29 10:57:19 -04:00
parent 17f2fed3c8
commit 0627c198fd
25 changed files with 428 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
styles/src/component/icon_button.ts
View File

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

6
styles/src/component/text_button.ts
View File

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

18
styles/src/element/interactive.test.ts
View File

@ -8,7 +8,7 @@ import { describe, it, expect } from "vitest"
describe("interactive", () => { describe("interactive", () => {
it("creates an Interactive<Element> with base properties and states", () => { it("creates an Interactive<Element> with base properties and states", () => {
const result = interactive({ const result = interactive({
base: { fontSize: 10, color: "#FFFFFF" }, base: { font_size: 10, color: "#FFFFFF" },
state: { state: {
hovered: { color: "#EEEEEE" }, hovered: { color: "#EEEEEE" },
clicked: { color: "#CCCCCC" }, clicked: { color: "#CCCCCC" },
@ -16,25 +16,25 @@ describe("interactive", () => {
}) })
expect(result).toEqual({ expect(result).toEqual({
default: { color: "#FFFFFF", fontSize: 10 }, default: { color: "#FFFFFF", font_size: 10 },
hovered: { color: "#EEEEEE", fontSize: 10 }, hovered: { color: "#EEEEEE", font_size: 10 },
clicked: { color: "#CCCCCC", fontSize: 10 }, clicked: { color: "#CCCCCC", font_size: 10 },
}) })
}) })
it("creates an Interactive<Element> with no base properties", () => { it("creates an Interactive<Element> with no base properties", () => {
const result = interactive({ const result = interactive({
state: { state: {
default: { color: "#FFFFFF", fontSize: 10 }, default: { color: "#FFFFFF", font_size: 10 },
hovered: { color: "#EEEEEE" }, hovered: { color: "#EEEEEE" },
clicked: { color: "#CCCCCC" }, clicked: { color: "#CCCCCC" },
}, },
}) })
expect(result).toEqual({ expect(result).toEqual({
default: { color: "#FFFFFF", fontSize: 10 }, default: { color: "#FFFFFF", font_size: 10 },
hovered: { color: "#EEEEEE", fontSize: 10 }, hovered: { color: "#EEEEEE", font_size: 10 },
clicked: { color: "#CCCCCC", fontSize: 10 }, clicked: { color: "#CCCCCC", font_size: 10 },
}) })
}) })
@ -48,7 +48,7 @@ describe("interactive", () => {
it("throws error when no other state besides default is present", () => { it("throws error when no other state besides default is present", () => {
const state = { const state = {
default: { fontSize: 10 }, default: { font_size: 10 },
} }
expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR) expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR)

84
styles/src/style_tree/assistant.ts
View File

@ -1,23 +1,21 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { text, border, background, foreground } from "./components" import { text, border, background, foreground } from "./components"
import editor from "./editor"
import { interactive } from "../element" import { interactive } from "../element"
export default function assistant(colorScheme: ColorScheme): any { export default function assistant(theme: ColorScheme): any {
const layer = colorScheme.highest
return { return {
container: { container: {
background: editor(colorScheme).background, background: background(theme.highest),
padding: { left: 12 }, padding: { left: 12 },
}, },
message_header: { message_header: {
margin: { bottom: 6, top: 6 }, margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background, background: background(theme.highest),
}, },
hamburger_button: interactive({ hamburger_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/hamburger_15.svg", asset: "icons/hamburger_15.svg",
dimensions: { dimensions: {
width: 15, width: 15,
@ -31,7 +29,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered"), color: foreground(theme.highest, "hovered"),
}, },
}, },
}, },
@ -39,7 +37,7 @@ export default function assistant(colorScheme: ColorScheme): any {
split_button: interactive({ split_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/split_message_15.svg", asset: "icons/split_message_15.svg",
dimensions: { dimensions: {
width: 15, width: 15,
@ -53,7 +51,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered"), color: foreground(theme.highest, "hovered"),
}, },
}, },
}, },
@ -61,7 +59,7 @@ export default function assistant(colorScheme: ColorScheme): any {
quote_button: interactive({ quote_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/quote_15.svg", asset: "icons/quote_15.svg",
dimensions: { dimensions: {
width: 15, width: 15,
@ -75,7 +73,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered"), color: foreground(theme.highest, "hovered"),
}, },
}, },
}, },
@ -83,7 +81,7 @@ export default function assistant(colorScheme: ColorScheme): any {
assist_button: interactive({ assist_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/assist_15.svg", asset: "icons/assist_15.svg",
dimensions: { dimensions: {
width: 15, width: 15,
@ -97,7 +95,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { 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({ zoom_in_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/maximize_8.svg", asset: "icons/maximize_8.svg",
dimensions: { dimensions: {
width: 12, width: 12,
@ -119,7 +117,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { 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({ zoom_out_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/minimize_8.svg", asset: "icons/minimize_8.svg",
dimensions: { dimensions: {
width: 12, width: 12,
@ -141,7 +139,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered"), color: foreground(theme.highest, "hovered"),
}, },
}, },
}, },
@ -149,7 +147,7 @@ export default function assistant(colorScheme: ColorScheme): any {
plus_button: interactive({ plus_button: interactive({
base: { base: {
icon: { icon: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
asset: "icons/plus_12.svg", asset: "icons/plus_12.svg",
dimensions: { dimensions: {
width: 12, width: 12,
@ -163,33 +161,33 @@ export default function assistant(colorScheme: ColorScheme): any {
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered"), color: foreground(theme.highest, "hovered"),
}, },
}, },
}, },
}), }),
title: { title: {
...text(layer, "sans", "default", { size: "sm" }), ...text(theme.highest, "sans", "default", { size: "sm" }),
}, },
saved_conversation: { saved_conversation: {
container: interactive({ container: interactive({
base: { base: {
background: background(layer, "on"), background: background(theme.highest, "on"),
padding: { top: 4, bottom: 4 }, padding: { top: 4, bottom: 4 },
}, },
state: { state: {
hovered: { hovered: {
background: background(layer, "on", "hovered"), background: background(theme.highest, "on", "hovered"),
}, },
}, },
}), }),
savedAt: { savedAt: {
margin: { left: 8 }, margin: { left: 8 },
...text(layer, "sans", "default", { size: "xs" }), ...text(theme.highest, "sans", "default", { size: "xs" }),
}, },
title: { title: {
margin: { left: 16 }, margin: { left: 16 },
...text(layer, "sans", "default", { ...text(theme.highest, "sans", "default", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
@ -197,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
user_sender: { user_sender: {
default: { default: {
...text(layer, "sans", "default", { ...text(theme.highest, "sans", "default", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
@ -205,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
assistant_sender: { assistant_sender: {
default: { default: {
...text(layer, "sans", "accent", { ...text(theme.highest, "sans", "accent", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
@ -213,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
system_sender: { system_sender: {
default: { default: {
...text(layer, "sans", "variant", { ...text(theme.highest, "sans", "variant", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
@ -221,51 +219,51 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
sent_at: { sent_at: {
margin: { top: 2, left: 8 }, margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }), ...text(theme.highest, "sans", "default", { size: "2xs" }),
}, },
model: interactive({ model: interactive({
base: { base: {
background: background(layer, "on"), background: background(theme.highest, "on"),
margin: { left: 12, right: 12, top: 12 }, margin: { left: 12, right: 12, top: 12 },
padding: 4, padding: 4,
corner_radius: 4, corner_radius: 4,
...text(layer, "sans", "default", { size: "xs" }), ...text(theme.highest, "sans", "default", { size: "xs" }),
}, },
state: { state: {
hovered: { hovered: {
background: background(layer, "on", "hovered"), background: background(theme.highest, "on", "hovered"),
border: border(layer, "on", { overlay: true }), border: border(theme.highest, "on", { overlay: true }),
}, },
}, },
}), }),
remaining_tokens: { remaining_tokens: {
background: background(layer, "on"), background: background(theme.highest, "on"),
margin: { top: 12, right: 24 }, margin: { top: 12, right: 24 },
padding: 4, padding: 4,
corner_radius: 4, corner_radius: 4,
...text(layer, "sans", "positive", { size: "xs" }), ...text(theme.highest, "sans", "positive", { size: "xs" }),
}, },
no_remaining_tokens: { no_remaining_tokens: {
background: background(layer, "on"), background: background(theme.highest, "on"),
margin: { top: 12, right: 24 }, margin: { top: 12, right: 24 },
padding: 4, padding: 4,
corner_radius: 4, corner_radius: 4,
...text(layer, "sans", "negative", { size: "xs" }), ...text(theme.highest, "sans", "negative", { size: "xs" }),
}, },
error_icon: { error_icon: {
margin: { left: 8 }, margin: { left: 8 },
color: foreground(layer, "negative"), color: foreground(theme.highest, "negative"),
width: 12, width: 12,
}, },
api_key_editor: { api_key_editor: {
background: background(layer, "on"), background: background(theme.highest, "on"),
corner_radius: 6, corner_radius: 6,
text: text(layer, "mono", "on"), text: text(theme.highest, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", { placeholder_text: text(theme.highest, "mono", "on", "disabled", {
size: "xs", size: "xs",
}), }),
selection: colorScheme.players[0], selection: theme.players[0],
border: border(layer, "on"), border: border(theme.highest, "on"),
padding: { padding: {
bottom: 4, bottom: 4,
left: 8, left: 8,
@ -275,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any {
}, },
api_key_prompt: { api_key_prompt: {
padding: 10, padding: 10,
...text(layer, "sans", "default", { size: "xs" }), ...text(theme.highest, "sans", "default", { size: "xs" }),
}, },
} }
} }

14
styles/src/style_tree/command_palette.ts
View File

@ -1,16 +1,14 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { text, background } from "./components" import { text, background } from "./components"
import { toggleable } from "../element" import { toggleable } from "../element"
export default function command_palette(colorScheme: ColorScheme): any { export default function command_palette(theme: ColorScheme): any {
const layer = colorScheme.highest
const key = toggleable({ const key = toggleable({
base: { base: {
text: text(layer, "mono", "variant", "default", { size: "xs" }), text: text(theme.highest, "mono", "variant", "default", { size: "xs" }),
corner_radius: 2, corner_radius: 2,
background: background(layer, "on"), background: background(theme.highest, "on"),
padding: { padding: {
top: 1, top: 1,
bottom: 1, bottom: 1,
@ -25,8 +23,8 @@ export default function command_palette(colorScheme: ColorScheme): any {
}, },
state: { state: {
active: { active: {
text: text(layer, "mono", "on", "default", { size: "xs" }), text: text(theme.highest, "mono", "on", "default", { size: "xs" }),
background: withOpacity(background(layer, "on"), 0.2), background: with_opacity(background(theme.highest, "on"), 0.2),
}, },
}, },
}) })

22
styles/src/style_tree/contact_finder.ts
View File

@ -3,12 +3,10 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function contact_finder(theme: ColorScheme): any { export default function contact_finder(theme: ColorScheme): any {
const layer = theme.middle
const side_margin = 6 const side_margin = 6
const contact_button = { const contact_button = {
background: background(layer, "variant"), background: background(theme.middle, "variant"),
color: foreground(layer, "variant"), color: foreground(theme.middle, "variant"),
icon_width: 8, icon_width: 8,
button_width: 16, button_width: 16,
corner_radius: 8, corner_radius: 8,
@ -16,12 +14,12 @@ export default function contact_finder(theme: ColorScheme): any {
const picker_style = picker(theme) const picker_style = picker(theme)
const picker_input = { const picker_input = {
background: background(layer, "on"), background: background(theme.middle, "on"),
corner_radius: 6, corner_radius: 6,
text: text(layer, "mono"), text: text(theme.middle, "mono"),
placeholder_text: text(layer, "mono", "on", "disabled", { size: "xs" }), placeholder_text: text(theme.middle, "mono", "on", "disabled", { size: "xs" }),
selection: theme.players[0], selection: theme.players[0],
border: border(layer), border: border(theme.middle),
padding: { padding: {
bottom: 4, bottom: 4,
left: 8, left: 8,
@ -41,7 +39,7 @@ export default function contact_finder(theme: ColorScheme): any {
...picker_style.item, ...picker_style.item,
margin: { left: side_margin, right: side_margin }, margin: { left: side_margin, right: side_margin },
}, },
no_matches: picker_style.noMatches, no_matches: picker_style.no_matches,
input_editor: picker_input, input_editor: picker_input,
empty_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: {
...contact_button, ...contact_button,
hover: { hover: {
background: background(layer, "variant", "hovered"), background: background(theme.middle, "variant", "hovered"),
}, },
}, },
disabled_contact_button: { disabled_contact_button: {
...contact_button, ...contact_button,
background: background(layer, "disabled"), background: background(theme.middle, "disabled"),
color: foreground(layer, "disabled"), color: foreground(theme.middle, "disabled"),
}, },
} }
} }

44
styles/src/style_tree/contact_list.ts
View File

@ -8,19 +8,19 @@ import {
} from "./components" } from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
export default function contacts_panel(theme: ColorScheme): any { export default function contacts_panel(theme: ColorScheme): any {
const nameMargin = 8 const name_margin = 8
const sidePadding = 12 const side_padding = 12
const layer = theme.middle const layer = theme.middle
const contactButton = { const contact_button = {
background: background(layer, "on"), background: background(layer, "on"),
color: foreground(layer, "on"), color: foreground(layer, "on"),
icon_width: 8, icon_width: 8,
button_width: 16, button_width: 16,
corner_radius: 8, corner_radius: 8,
} }
const projectRow = { const project_row = {
guest_avatar_spacing: 4, guest_avatar_spacing: 4,
height: 24, height: 24,
guest_avatar: { guest_avatar: {
@ -30,19 +30,19 @@ export default function contacts_panel(theme: ColorScheme): any {
name: { name: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
margin: { margin: {
left: nameMargin, left: name_margin,
right: 6, right: 6,
}, },
}, },
guests: { guests: {
margin: { margin: {
left: nameMargin, left: name_margin,
right: nameMargin, right: name_margin,
}, },
}, },
padding: { padding: {
left: sidePadding, left: side_padding,
right: sidePadding, right: side_padding,
}, },
} }
@ -83,8 +83,8 @@ export default function contacts_panel(theme: ColorScheme): any {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
margin: { top: 14 }, margin: { top: 14 },
padding: { padding: {
left: sidePadding, left: side_padding,
right: sidePadding, right: side_padding,
}, },
background: background(layer, "default"), // posiewic: breaking change background: background(layer, "default"), // posiewic: breaking change
}, },
@ -140,8 +140,8 @@ export default function contacts_panel(theme: ColorScheme): any {
inactive: { inactive: {
default: { default: {
padding: { padding: {
left: sidePadding, left: side_padding,
right: sidePadding, right: side_padding,
}, },
}, },
}, },
@ -149,8 +149,8 @@ export default function contacts_panel(theme: ColorScheme): any {
default: { default: {
background: background(layer, "active"), background: background(layer, "active"),
padding: { padding: {
left: sidePadding, left: side_padding,
right: sidePadding, right: side_padding,
}, },
}, },
}, },
@ -174,12 +174,12 @@ export default function contacts_panel(theme: ColorScheme): any {
contact_username: { contact_username: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
margin: { margin: {
left: nameMargin, left: name_margin,
}, },
}, },
contact_button_spacing: nameMargin, contact_button_spacing: name_margin,
contact_button: interactive({ contact_button: interactive({
base: { ...contactButton }, base: { ...contact_button },
state: { state: {
hovered: { hovered: {
background: background(layer, "hovered"), background: background(layer, "hovered"),
@ -187,7 +187,7 @@ export default function contacts_panel(theme: ColorScheme): any {
}, },
}), }),
disabled_button: { disabled_button: {
...contactButton, ...contact_button,
background: background(layer, "on"), background: background(layer, "on"),
color: foreground(layer, "on"), color: foreground(layer, "on"),
}, },
@ -217,15 +217,15 @@ export default function contacts_panel(theme: ColorScheme): any {
project_row: toggleable({ project_row: toggleable({
base: interactive({ base: interactive({
base: { base: {
...projectRow, ...project_row,
background: background(layer), background: background(layer),
icon: { icon: {
margin: { left: nameMargin }, margin: { left: name_margin },
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
width: 12, width: 12,
}, },
name: { name: {
...projectRow.name, ...project_row.name,
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
}, },
}, },

17
styles/src/style_tree/contact_notification.ts
View File

@ -1,24 +1,25 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background, foreground, text } from "./components" import { background, foreground, text } from "./components"
import { interactive } from "../element" import { interactive } from "../element"
const avatarSize = 12
const headerPadding = 8
export default function contact_notification(theme: ColorScheme): any { export default function contact_notification(theme: ColorScheme): any {
const avatar_size = 12
const header_padding = 8
return { return {
header_avatar: { header_avatar: {
height: avatarSize, height: avatar_size,
width: avatarSize, width: avatar_size,
corner_radius: 6, corner_radius: 6,
}, },
header_message: { header_message: {
...text(theme.lowest, "sans", { size: "xs" }), ...text(theme.lowest, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: header_padding, right: header_padding },
}, },
header_height: 18, header_height: 18,
body_message: { body_message: {
...text(theme.lowest, "sans", { size: "xs" }), ...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({ button: interactive({
base: { base: {
@ -40,9 +41,9 @@ export default function contact_notification(theme: ColorScheme): any {
default: { default: {
color: foreground(theme.lowest, "variant"), color: foreground(theme.lowest, "variant"),
icon_width: 8, icon_width: 8,
iconHeight: 8, icon_height: 8,
button_width: 8, button_width: 8,
buttonHeight: 8, button_height: 8,
hover: { hover: {
color: foreground(theme.lowest, "hovered"), color: foreground(theme.lowest, "hovered"),
}, },

96
styles/src/style_tree/editor.ts
View File

@ -1,4 +1,4 @@
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme" import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme"
import { import {
background, 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 { return {
text_scale_factor: 0.857, text_scale_factor: 0.857,
header: { header: {
@ -36,8 +36,8 @@ export default function editor(theme: ColorScheme): any {
}), }),
}, },
message: { message: {
text: text(layer, "sans", styleSet, "default", { size: "sm" }), text: text(layer, "sans", style_set, "default", { size: "sm" }),
highlight_text: text(layer, "sans", styleSet, "default", { highlight_text: text(layer, "sans", style_set, "default", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
@ -50,7 +50,7 @@ export default function editor(theme: ColorScheme): any {
return { return {
text_color: syntax.primary.color, text_color: syntax.primary.color,
background: background(layer), 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"), highlighted_line_background: background(layer, "on"),
// Inline autocomplete suggestions, Co-pilot suggestions, etc. // Inline autocomplete suggestions, Co-pilot suggestions, etc.
suggestion: syntax.predictive, suggestion: syntax.predictive,
@ -133,7 +133,7 @@ export default function editor(theme: ColorScheme): any {
}, },
}, },
}, },
foldBackground: foreground(layer, "variant"), fold_background: foreground(layer, "variant"),
}, },
diff: { diff: {
deleted: is_light deleted: is_light
@ -145,31 +145,31 @@ export default function editor(theme: ColorScheme): any {
inserted: is_light inserted: is_light
? theme.ramps.green(0.4).hex() ? theme.ramps.green(0.4).hex()
: theme.ramps.green(0.5).hex(), : theme.ramps.green(0.5).hex(),
removedWidthEm: 0.275, removed_width_em: 0.275,
widthEm: 0.15, width_em: 0.15,
corner_radius: 0.05, corner_radius: 0.05,
}, },
/** Highlights matching occurrences of what is under the cursor /** Highlights matching occurrences of what is under the cursor
* as well as matched brackets * as well as matched brackets
*/ */
documentHighlightReadBackground: withOpacity( document_highlight_read_background: with_opacity(
foreground(layer, "accent"), foreground(layer, "accent"),
0.1 0.1
), ),
documentHighlightWriteBackground: theme.ramps document_highlight_write_background: theme.ramps
.neutral(0.5) .neutral(0.5)
.alpha(0.4) .alpha(0.4)
.hex(), // TODO: This was blend * 2 .hex(), // TODO: This was blend * 2
errorColor: background(layer, "negative"), error_color: background(layer, "negative"),
gutterBackground: background(layer), gutter_background: background(layer),
gutterPaddingFactor: 3.5, gutter_padding_factor: 3.5,
lineNumber: withOpacity(foreground(layer), 0.35), line_number: with_opacity(foreground(layer), 0.35),
lineNumberActive: foreground(layer), line_number_active: foreground(layer),
renameFade: 0.6, rename_fade: 0.6,
unnecessaryCodeFade: 0.5, unnecessary_code_fade: 0.5,
selection: theme.players[0], selection: theme.players[0],
whitespace: theme.ramps.neutral(0.5).hex(), whitespace: theme.ramps.neutral(0.5).hex(),
guestSelections: [ guest_selections: [
theme.players[1], theme.players[1],
theme.players[2], theme.players[2],
theme.players[3], theme.players[3],
@ -187,20 +187,20 @@ export default function editor(theme: ColorScheme): any {
}, },
border: border(theme.middle), border: border(theme.middle),
shadow: theme.popover_shadow, shadow: theme.popover_shadow,
matchHighlight: foreground(theme.middle, "accent"), match_highlight: foreground(theme.middle, "accent"),
item: autocomplete_item, item: autocomplete_item,
hoveredItem: { hovered_item: {
...autocomplete_item, ...autocomplete_item,
matchHighlight: foreground( match_highlight: foreground(
theme.middle, theme.middle,
"accent", "accent",
"hovered" "hovered"
), ),
background: background(theme.middle, "hovered"), background: background(theme.middle, "hovered"),
}, },
selectedItem: { selected_item: {
...autocomplete_item, ...autocomplete_item,
matchHighlight: foreground( match_highlight: foreground(
theme.middle, theme.middle,
"accent", "accent",
"active" "active"
@ -208,10 +208,10 @@ export default function editor(theme: ColorScheme): any {
background: background(theme.middle, "active"), background: background(theme.middle, "active"),
}, },
}, },
diagnosticHeader: { diagnostic_header: {
background: background(theme.middle), background: background(theme.middle),
icon_widthFactor: 1.5, icon_width_factor: 1.5,
textScaleFactor: 0.857, text_scale_factor: 0.857,
border: border(theme.middle, { border: border(theme.middle, {
bottom: true, bottom: true,
top: true, top: true,
@ -229,16 +229,16 @@ export default function editor(theme: ColorScheme): any {
}), }),
}, },
message: { message: {
highlightText: text(theme.middle, "sans", { highlight_text: text(theme.middle, "sans", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
text: text(theme.middle, "sans", { size: "sm" }), text: text(theme.middle, "sans", { size: "sm" }),
}, },
}, },
diagnosticPathHeader: { diagnostic_path_header: {
background: background(theme.middle), background: background(theme.middle),
textScaleFactor: 0.857, text_scale_factor: 0.857,
filename: text(theme.middle, "mono", { size: "sm" }), filename: text(theme.middle, "mono", { size: "sm" }),
path: { path: {
...text(theme.middle, "mono", { size: "sm" }), ...text(theme.middle, "mono", { size: "sm" }),
@ -247,20 +247,20 @@ export default function editor(theme: ColorScheme): any {
}, },
}, },
}, },
errorDiagnostic: diagnostic(theme.middle, "negative"), error_diagnostic: diagnostic(theme.middle, "negative"),
warningDiagnostic: diagnostic(theme.middle, "warning"), warning_diagnostic: diagnostic(theme.middle, "warning"),
informationDiagnostic: diagnostic(theme.middle, "accent"), information_diagnostic: diagnostic(theme.middle, "accent"),
hintDiagnostic: diagnostic(theme.middle, "warning"), hint_diagnostic: diagnostic(theme.middle, "warning"),
invalidErrorDiagnostic: diagnostic(theme.middle, "base"), invalid_error_diagnostic: diagnostic(theme.middle, "base"),
invalidHintDiagnostic: diagnostic(theme.middle, "base"), invalid_hint_diagnostic: diagnostic(theme.middle, "base"),
invalidInformationDiagnostic: diagnostic(theme.middle, "base"), invalid_information_diagnostic: diagnostic(theme.middle, "base"),
invalidWarningDiagnostic: diagnostic(theme.middle, "base"), invalid_warning_diagnostic: diagnostic(theme.middle, "base"),
hover_popover: hover_popover(theme), hover_popover: hover_popover(theme),
linkDefinition: { link_definition: {
color: syntax.link_uri.color, color: syntax.link_uri.color,
underline: syntax.link_uri.underline, underline: syntax.link_uri.underline,
}, },
jumpIcon: interactive({ jump_icon: interactive({
base: { base: {
color: foreground(layer, "on"), color: foreground(layer, "on"),
icon_width: 20, icon_width: 20,
@ -282,12 +282,12 @@ export default function editor(theme: ColorScheme): any {
scrollbar: { scrollbar: {
width: 12, width: 12,
minHeightFactor: 1.0, min_height_factor: 1.0,
track: { track: {
border: border(layer, "variant", { left: true }), border: border(layer, "variant", { left: true }),
}, },
thumb: { thumb: {
background: withOpacity(background(layer, "inverted"), 0.3), background: with_opacity(background(layer, "inverted"), 0.3),
border: { border: {
width: 1, width: 1,
color: border_color(layer, "variant"), color: border_color(layer, "variant"),
@ -299,17 +299,17 @@ export default function editor(theme: ColorScheme): any {
}, },
git: { git: {
deleted: is_light deleted: is_light
? withOpacity(theme.ramps.red(0.5).hex(), 0.8) ? with_opacity(theme.ramps.red(0.5).hex(), 0.8)
: withOpacity(theme.ramps.red(0.4).hex(), 0.8), : with_opacity(theme.ramps.red(0.4).hex(), 0.8),
modified: is_light modified: is_light
? withOpacity(theme.ramps.yellow(0.5).hex(), 0.8) ? with_opacity(theme.ramps.yellow(0.5).hex(), 0.8)
: withOpacity(theme.ramps.yellow(0.4).hex(), 0.8), : with_opacity(theme.ramps.yellow(0.4).hex(), 0.8),
inserted: is_light inserted: is_light
? withOpacity(theme.ramps.green(0.5).hex(), 0.8) ? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
: withOpacity(theme.ramps.green(0.4).hex(), 0.8), : with_opacity(theme.ramps.green(0.4).hex(), 0.8),
}, },
}, },
compositionMark: { composition_mark: {
underline: { underline: {
thickness: 1.0, thickness: 1.0,
color: border_color(layer), color: border_color(layer),

28
styles/src/style_tree/feedback.ts
View File

@ -2,16 +2,14 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
import { interactive } from "../element" import { interactive } from "../element"
export default function feedback(colorScheme: ColorScheme): any { export default function feedback(theme: ColorScheme): any {
const layer = colorScheme.highest
return { return {
submit_button: interactive({ submit_button: interactive({
base: { base: {
...text(layer, "mono", "on"), ...text(theme.highest, "mono", "on"),
background: background(layer, "on"), background: background(theme.highest, "on"),
corner_radius: 6, corner_radius: 6,
border: border(layer, "on"), border: border(theme.highest, "on"),
margin: { margin: {
right: 4, right: 4,
}, },
@ -24,24 +22,24 @@ export default function feedback(colorScheme: ColorScheme): any {
}, },
state: { state: {
clicked: { clicked: {
...text(layer, "mono", "on", "pressed"), ...text(theme.highest, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"), background: background(theme.highest, "on", "pressed"),
border: border(layer, "on", "pressed"), border: border(theme.highest, "on", "pressed"),
}, },
hovered: { hovered: {
...text(layer, "mono", "on", "hovered"), ...text(theme.highest, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"), background: background(theme.highest, "on", "hovered"),
border: border(layer, "on", "hovered"), border: border(theme.highest, "on", "hovered"),
}, },
}, },
}), }),
button_margin: 8, button_margin: 8,
info_text_default: text(layer, "sans", "default", { size: "xs" }), info_text_default: text(theme.highest, "sans", "default", { size: "xs" }),
link_text_default: text(layer, "sans", "default", { link_text_default: text(theme.highest, "sans", "default", {
size: "xs", size: "xs",
underline: true, underline: true,
}), }),
link_text_hover: text(layer, "sans", "hovered", { link_text_hover: text(theme.highest, "sans", "hovered", {
size: "xs", size: "xs",
underline: true, underline: true,
}), }),

45
styles/src/style_tree/hover_popover.ts
View File

@ -1,10 +1,9 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function hover_popover(colorScheme: ColorScheme): any { export default function hover_popover(theme: ColorScheme): any {
const layer = colorScheme.middle const base_container = {
const baseContainer = { background: background(theme.middle),
background: background(layer),
corner_radius: 8, corner_radius: 8,
padding: { padding: {
left: 8, left: 8,
@ -12,35 +11,35 @@ export default function hover_popover(colorScheme: ColorScheme): any {
top: 4, top: 4,
bottom: 4, bottom: 4,
}, },
shadow: colorScheme.popover_shadow, shadow: theme.popover_shadow,
border: border(layer), border: border(theme.middle),
margin: { margin: {
left: -8, left: -8,
}, },
} }
return { return {
container: baseContainer, container: base_container,
infoContainer: { info_container: {
...baseContainer, ...base_container,
background: background(layer, "accent"), background: background(theme.middle, "accent"),
border: border(layer, "accent"), border: border(theme.middle, "accent"),
}, },
warningContainer: { warning_container: {
...baseContainer, ...base_container,
background: background(layer, "warning"), background: background(theme.middle, "warning"),
border: border(layer, "warning"), border: border(theme.middle, "warning"),
}, },
errorContainer: { error_container: {
...baseContainer, ...base_container,
background: background(layer, "negative"), background: background(theme.middle, "negative"),
border: border(layer, "negative"), border: border(theme.middle, "negative"),
}, },
blockStyle: { block_style: {
padding: { top: 4 }, padding: { top: 4 },
}, },
prose: text(layer, "sans", { size: "sm" }), prose: text(theme.middle, "sans", { size: "sm" }),
diagnosticSourceHighlight: { color: foreground(layer, "accent") }, diagnostic_source_highlight: { color: foreground(theme.middle, "accent") },
highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better highlight: theme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
} }
} }

49
styles/src/style_tree/incoming_call_notification.ts
View File

@ -2,49 +2,48 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function incoming_call_notification( export default function incoming_call_notification(
colorScheme: ColorScheme theme: ColorScheme
): unknown { ): unknown {
const layer = colorScheme.middle const avatar_size = 48
const avatarSize = 48
return { return {
windowHeight: 74, window_height: 74,
windowWidth: 380, window_width: 380,
background: background(layer), background: background(theme.middle),
callerContainer: { caller_container: {
padding: 12, padding: 12,
}, },
callerAvatar: { caller_avatar: {
height: avatarSize, height: avatar_size,
width: avatarSize, width: avatar_size,
corner_radius: avatarSize / 2, corner_radius: avatar_size / 2,
}, },
callerMetadata: { caller_metadata: {
margin: { left: 10 }, margin: { left: 10 },
}, },
callerUsername: { caller_username: {
...text(layer, "sans", { size: "sm", weight: "bold" }), ...text(theme.middle, "sans", { size: "sm", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
callerMessage: { caller_message: {
...text(layer, "sans", "variant", { size: "xs" }), ...text(theme.middle, "sans", "variant", { size: "xs" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
worktreeRoots: { worktree_roots: {
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
button_width: 96, button_width: 96,
acceptButton: { accept_button: {
background: background(layer, "accent"), background: background(theme.middle, "accent"),
border: border(layer, { left: true, bottom: true }), border: border(theme.middle, { left: true, bottom: true }),
...text(layer, "sans", "positive", { ...text(theme.middle, "sans", "positive", {
size: "xs", size: "xs",
weight: "bold", weight: "bold",
}), }),
}, },
declineButton: { decline_button: {
border: border(layer, { left: true }), border: border(theme.middle, { left: true }),
...text(layer, "sans", "negative", { ...text(theme.middle, "sans", "negative", {
size: "xs", size: "xs",
weight: "bold", weight: "bold",
}), }),

61
styles/src/style_tree/picker.ts
View File

@ -1,24 +1,23 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { background, border, text } from "./components" import { background, border, text } from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
export default function picker(colorScheme: ColorScheme): any { export default function picker(theme: ColorScheme): any {
const layer = colorScheme.lowest
const container = { const container = {
background: background(layer), background: background(theme.lowest),
border: border(layer), border: border(theme.lowest),
shadow: colorScheme.modal_shadow, shadow: theme.modal_shadow,
corner_radius: 12, corner_radius: 12,
padding: { padding: {
bottom: 4, bottom: 4,
}, },
} }
const inputEditor = { const input_editor = {
placeholderText: text(layer, "sans", "on", "disabled"), placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
selection: colorScheme.players[0], selection: theme.players[0],
text: text(layer, "mono", "on"), text: text(theme.lowest, "mono", "on"),
border: border(layer, { bottom: true }), border: border(theme.lowest, { bottom: true }),
padding: { padding: {
bottom: 8, bottom: 8,
left: 16, left: 16,
@ -29,13 +28,13 @@ export default function picker(colorScheme: ColorScheme): any {
bottom: 4, bottom: 4,
}, },
} }
const emptyInputEditor: any = { ...inputEditor } const empty_input_editor: any = { ...input_editor }
delete emptyInputEditor.border delete empty_input_editor.border
delete emptyInputEditor.margin delete empty_input_editor.margin
return { return {
...container, ...container,
emptyContainer: { empty_container: {
...container, ...container,
padding: {}, padding: {},
}, },
@ -54,21 +53,21 @@ export default function picker(colorScheme: ColorScheme): any {
right: 4, right: 4,
}, },
corner_radius: 8, corner_radius: 8,
text: text(layer, "sans", "variant"), text: text(theme.lowest, "sans", "variant"),
highlightText: text(layer, "sans", "accent", { highlight_text: text(theme.lowest, "sans", "accent", {
weight: "bold", weight: "bold",
}), }),
}, },
state: { state: {
hovered: { hovered: {
background: withOpacity( background: with_opacity(
background(layer, "hovered"), background(theme.lowest, "hovered"),
0.5 0.5
), ),
}, },
clicked: { clicked: {
background: withOpacity( background: with_opacity(
background(layer, "pressed"), background(theme.lowest, "pressed"),
0.5 0.5
), ),
}, },
@ -77,20 +76,20 @@ export default function picker(colorScheme: ColorScheme): any {
state: { state: {
active: { active: {
default: { default: {
background: withOpacity( background: with_opacity(
background(layer, "base", "active"), background(theme.lowest, "base", "active"),
0.5 0.5
), ),
}, },
hovered: { hovered: {
background: withOpacity( background: with_opacity(
background(layer, "hovered"), background(theme.lowest, "hovered"),
0.5 0.5
), ),
}, },
clicked: { clicked: {
background: withOpacity( background: with_opacity(
background(layer, "pressed"), background(theme.lowest, "pressed"),
0.5 0.5
), ),
}, },
@ -98,10 +97,10 @@ export default function picker(colorScheme: ColorScheme): any {
}, },
}), }),
inputEditor, input_editor,
emptyInputEditor, empty_input_editor,
noMatches: { no_matches: {
text: text(layer, "sans", "variant"), text: text(theme.lowest, "sans", "variant"),
padding: { padding: {
bottom: 8, bottom: 8,
left: 16, left: 16,

11
styles/src/style_tree/project_diagnostics.ts
View File

@ -1,13 +1,12 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background, text } from "./components" import { background, text } from "./components"
export default function project_diagnostics(colorScheme: ColorScheme): any { export default function project_diagnostics(theme: ColorScheme): any {
const layer = colorScheme.highest
return { return {
background: background(layer), background: background(theme.highest),
tabIconSpacing: 4, tab_icon_spacing: 4,
tab_icon_width: 13, tab_icon_width: 13,
tabSummarySpacing: 10, tab_summary_spacing: 10,
emptyMessage: text(layer, "sans", "variant", { size: "md" }), empty_message: text(theme.highest, "sans", "variant", { size: "md" }),
} }
} }

90
styles/src/style_tree/project_panel.ts
View File

@ -1,5 +1,5 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { import {
Border, Border,
TextStyle, TextStyle,
@ -13,13 +13,11 @@ import merge from "ts-deepmerge"
export default function project_panel(theme: ColorScheme): any { export default function project_panel(theme: ColorScheme): any {
const { is_light } = theme const { is_light } = theme
const layer = theme.middle
type EntryStateProps = { type EntryStateProps = {
background?: string background?: string
border?: Border border?: Border
text?: TextStyle text?: TextStyle
iconColor?: string icon_color?: string
} }
type EntryState = { type EntryState = {
@ -45,17 +43,17 @@ export default function project_panel(theme: ColorScheme): any {
const base_properties = { const base_properties = {
height: 22, height: 22,
background: background(layer), background: background(theme.middle),
iconColor: foreground(layer, "variant"), icon_color: foreground(theme.middle, "variant"),
iconSize: 7, icon_size: 7,
icon_spacing: 5, icon_spacing: 5,
text: text(layer, "mono", "variant", { size: "sm" }), text: text(theme.middle, "mono", "variant", { size: "sm" }),
status: { status: {
...git_status, ...git_status,
}, },
} }
const selectedStyle: EntryState | undefined = selected const selected_style: EntryState | undefined = selected
? selected ? selected
: unselected : unselected
@ -67,27 +65,27 @@ export default function project_panel(theme: ColorScheme): any {
const unselected_hovered_style = merge( const unselected_hovered_style = merge(
base_properties, base_properties,
unselected?.hovered ?? {}, unselected?.hovered ?? {},
{ background: background(layer, "variant", "hovered") } { background: background(theme.middle, "variant", "hovered") }
) )
const unselected_clicked_style = merge( const unselected_clicked_style = merge(
base_properties, base_properties,
unselected?.clicked ?? {}, unselected?.clicked ?? {},
{ background: background(layer, "variant", "pressed") } { background: background(theme.middle, "variant", "pressed") }
) )
const selected_default_style = merge( const selected_default_style = merge(
base_properties, base_properties,
selectedStyle?.default ?? {}, selected_style?.default ?? {},
{ background: background(layer) } { background: background(theme.middle) }
) )
const selected_hovered_style = merge( const selected_hovered_style = merge(
base_properties, base_properties,
selectedStyle?.hovered ?? {}, selected_style?.hovered ?? {},
{ background: background(layer, "variant", "hovered") } { background: background(theme.middle, "variant", "hovered") }
) )
const selected_clicked_style = merge( const selected_clicked_style = merge(
base_properties, base_properties,
selectedStyle?.clicked ?? {}, selected_style?.clicked ?? {},
{ background: background(layer, "variant", "pressed") } { background: background(theme.middle, "variant", "pressed") }
) )
return toggleable({ return toggleable({
@ -110,13 +108,13 @@ export default function project_panel(theme: ColorScheme): any {
}) })
} }
const defaultEntry = entry() const default_entry = entry()
return { return {
openProjectButton: interactive({ open_project_button: interactive({
base: { base: {
background: background(layer), background: background(theme.middle),
border: border(layer, "active"), border: border(theme.middle, "active"),
corner_radius: 4, corner_radius: 4,
margin: { margin: {
top: 16, top: 16,
@ -129,59 +127,59 @@ export default function project_panel(theme: ColorScheme): any {
left: 7, left: 7,
right: 7, right: 7,
}, },
...text(layer, "sans", "default", { size: "sm" }), ...text(theme.middle, "sans", "default", { size: "sm" }),
}, },
state: { state: {
hovered: { hovered: {
...text(layer, "sans", "default", { size: "sm" }), ...text(theme.middle, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"), background: background(theme.middle, "hovered"),
border: border(layer, "active"), border: border(theme.middle, "active"),
}, },
clicked: { clicked: {
...text(layer, "sans", "default", { size: "sm" }), ...text(theme.middle, "sans", "default", { size: "sm" }),
background: background(layer, "pressed"), background: background(theme.middle, "pressed"),
border: border(layer, "active"), border: border(theme.middle, "active"),
}, },
}, },
}), }),
background: background(layer), background: background(theme.middle),
padding: { left: 6, right: 6, top: 0, bottom: 6 }, padding: { left: 6, right: 6, top: 0, bottom: 6 },
indentWidth: 12, indent_width: 12,
entry: defaultEntry, entry: default_entry,
draggedEntry: { dragged_entry: {
...defaultEntry.inactive.default, ...default_entry.inactive.default,
text: text(layer, "mono", "on", { size: "sm" }), text: text(theme.middle, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9), background: with_opacity(background(theme.middle, "on"), 0.9),
border: border(layer), border: border(theme.middle),
}, },
ignoredEntry: entry( ignored_entry: entry(
{ {
default: { default: {
text: text(layer, "mono", "disabled"), text: text(theme.middle, "mono", "disabled"),
}, },
}, },
{ {
default: { default: {
iconColor: foreground(layer, "variant"), icon_color: foreground(theme.middle, "variant"),
}, },
} }
), ),
cutEntry: entry( cut_entry: entry(
{ {
default: { default: {
text: text(layer, "mono", "disabled"), text: text(theme.middle, "mono", "disabled"),
}, },
}, },
{ {
default: { default: {
background: background(layer, "active"), background: background(theme.middle, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }), text: text(theme.middle, "mono", "disabled", { size: "sm" }),
}, },
} }
), ),
filenameEditor: { filename_editor: {
background: background(layer, "on"), background: background(theme.middle, "on"),
text: text(layer, "mono", "on", { size: "sm" }), text: text(theme.middle, "mono", "on", { size: "sm" }),
selection: theme.players[0], selection: theme.players[0],
}, },
} }

48
styles/src/style_tree/project_shared_notification.ts
View File

@ -2,50 +2,48 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function project_shared_notification( export default function project_shared_notification(
colorScheme: ColorScheme theme: ColorScheme
): unknown { ): unknown {
const layer = colorScheme.middle const avatar_size = 48
const avatarSize = 48
return { return {
windowHeight: 74, window_height: 74,
windowWidth: 380, window_width: 380,
background: background(layer), background: background(theme.middle),
ownerContainer: { owner_container: {
padding: 12, padding: 12,
}, },
ownerAvatar: { owner_avatar: {
height: avatarSize, height: avatar_size,
width: avatarSize, width: avatar_size,
corner_radius: avatarSize / 2, corner_radius: avatar_size / 2,
}, },
ownerMetadata: { owner_metadata: {
margin: { left: 10 }, margin: { left: 10 },
}, },
ownerUsername: { owner_username: {
...text(layer, "sans", { size: "sm", weight: "bold" }), ...text(theme.middle, "sans", { size: "sm", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
message: { message: {
...text(layer, "sans", "variant", { size: "xs" }), ...text(theme.middle, "sans", "variant", { size: "xs" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
worktreeRoots: { worktree_roots: {
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
button_width: 96, button_width: 96,
openButton: { open_button: {
background: background(layer, "accent"), background: background(theme.middle, "accent"),
border: border(layer, { left: true, bottom: true }), border: border(theme.middle, { left: true, bottom: true }),
...text(layer, "sans", "accent", { ...text(theme.middle, "sans", "accent", {
size: "xs", size: "xs",
weight: "bold", weight: "bold",
}), }),
}, },
dismissButton: { dismiss_button: {
border: border(layer, { left: true }), border: border(theme.middle, { left: true }),
...text(layer, "sans", "variant", { ...text(theme.middle, "sans", "variant", {
size: "xs", size: "xs",
weight: "bold", weight: "bold",
}), }),

88
styles/src/style_tree/search.ts
View File

@ -1,21 +1,19 @@
import { ColorScheme } from "../theme/color_scheme" 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 { background, border, foreground, text } from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
export default function search(colorScheme: ColorScheme): any { export default function search(theme: ColorScheme): any {
const layer = colorScheme.highest
// Search input // Search input
const editor = { const editor = {
background: background(layer), background: background(theme.highest),
corner_radius: 8, corner_radius: 8,
minWidth: 200, min_width: 200,
maxWidth: 500, max_width: 500,
placeholderText: text(layer, "mono", "disabled"), placeholder_text: text(theme.highest, "mono", "disabled"),
selection: colorScheme.players[0], selection: theme.players[0],
text: text(layer, "mono", "default"), text: text(theme.highest, "mono", "default"),
border: border(layer), border: border(theme.highest),
margin: { margin: {
right: 12, right: 12,
}, },
@ -27,22 +25,22 @@ export default function search(colorScheme: ColorScheme): any {
}, },
} }
const includeExcludeEditor = { const include_exclude_editor = {
...editor, ...editor,
minWidth: 100, min_width: 100,
maxWidth: 250, max_width: 250,
} }
return { return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
matchBackground: withOpacity(foreground(layer, "accent"), 0.4), match_background: with_opacity(foreground(theme.highest, "accent"), 0.4),
optionButton: toggleable({ option_button: toggleable({
base: interactive({ base: interactive({
base: { base: {
...text(layer, "mono", "on"), ...text(theme.highest, "mono", "on"),
background: background(layer, "on"), background: background(theme.highest, "on"),
corner_radius: 6, corner_radius: 6,
border: border(layer, "on"), border: border(theme.highest, "on"),
margin: { margin: {
right: 4, right: 4,
}, },
@ -55,66 +53,66 @@ export default function search(colorScheme: ColorScheme): any {
}, },
state: { state: {
hovered: { hovered: {
...text(layer, "mono", "on", "hovered"), ...text(theme.highest, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"), background: background(theme.highest, "on", "hovered"),
border: border(layer, "on", "hovered"), border: border(theme.highest, "on", "hovered"),
}, },
clicked: { clicked: {
...text(layer, "mono", "on", "pressed"), ...text(theme.highest, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"), background: background(theme.highest, "on", "pressed"),
border: border(layer, "on", "pressed"), border: border(theme.highest, "on", "pressed"),
}, },
}, },
}), }),
state: { state: {
active: { active: {
default: { default: {
...text(layer, "mono", "accent"), ...text(theme.highest, "mono", "accent"),
}, },
hovered: { hovered: {
...text(layer, "mono", "accent", "hovered"), ...text(theme.highest, "mono", "accent", "hovered"),
}, },
clicked: { clicked: {
...text(layer, "mono", "accent", "pressed"), ...text(theme.highest, "mono", "accent", "pressed"),
}, },
}, },
}, },
}), }),
editor, editor,
invalidEditor: { invalid_editor: {
...editor, ...editor,
border: border(layer, "negative"), border: border(theme.highest, "negative"),
}, },
includeExcludeEditor, include_exclude_editor,
invalidIncludeExcludeEditor: { invalid_include_exclude_editor: {
...includeExcludeEditor, ...include_exclude_editor,
border: border(layer, "negative"), border: border(theme.highest, "negative"),
}, },
matchIndex: { match_index: {
...text(layer, "mono", "variant"), ...text(theme.highest, "mono", "variant"),
padding: { padding: {
left: 6, left: 6,
}, },
}, },
optionButtonGroup: { option_button_group: {
padding: { padding: {
left: 12, left: 12,
right: 12, right: 12,
}, },
}, },
includeExcludeInputs: { include_exclude_inputs: {
...text(layer, "mono", "variant"), ...text(theme.highest, "mono", "variant"),
padding: { padding: {
right: 6, right: 6,
}, },
}, },
resultsStatus: { results_status: {
...text(layer, "mono", "on"), ...text(theme.highest, "mono", "on"),
size: 18, size: 18,
}, },
dismissButton: interactive({ dismiss_button: interactive({
base: { base: {
color: foreground(layer, "variant"), color: foreground(theme.highest, "variant"),
icon_width: 12, icon_width: 12,
button_width: 14, button_width: 14,
padding: { padding: {
@ -124,10 +122,10 @@ export default function search(colorScheme: ColorScheme): any {
}, },
state: { state: {
hovered: { hovered: {
color: foreground(layer, "hovered"), color: foreground(theme.highest, "hovered"),
}, },
clicked: { clicked: {
color: foreground(layer, "pressed"), color: foreground(theme.highest, "pressed"),
}, },
}, },
}), }),

5
styles/src/style_tree/shared_screen.ts
View File

@ -1,9 +1,8 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background } from "./components" import { background } from "./components"
export default function sharedScreen(colorScheme: ColorScheme) { export default function sharedScreen(theme: ColorScheme) {
const layer = colorScheme.highest
return { return {
background: background(layer), background: background(theme.highest),
} }
} }

37
styles/src/style_tree/simple_message_notification.ts
View File

@ -2,21 +2,20 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
import { interactive } from "../element" import { interactive } from "../element"
const headerPadding = 8
export default function simple_message_notification( export default function simple_message_notification(
colorScheme: ColorScheme theme: ColorScheme
): unknown { ): any {
const layer = colorScheme.middle const header_padding = 8
return { return {
message: { message: {
...text(layer, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: header_padding, right: header_padding },
}, },
actionMessage: interactive({ action_nessage: interactive({
base: { base: {
...text(layer, "sans", { size: "xs" }), ...text(theme.middle, "sans", { size: "xs" }),
border: border(layer, "active"), border: border(theme.middle, "active"),
corner_radius: 4, corner_radius: 4,
padding: { padding: {
top: 3, top: 3,
@ -25,27 +24,27 @@ export default function simple_message_notification(
right: 7, right: 7,
}, },
margin: { left: headerPadding, top: 6, bottom: 6 }, margin: { left: header_padding, top: 6, bottom: 6 },
}, },
state: { state: {
hovered: { hovered: {
...text(layer, "sans", "default", { size: "xs" }), ...text(theme.middle, "sans", "default", { size: "xs" }),
background: background(layer, "hovered"), background: background(theme.middle, "hovered"),
border: border(layer, "active"), border: border(theme.middle, "active"),
}, },
}, },
}), }),
dismissButton: interactive({ dismiss_button: interactive({
base: { base: {
color: foreground(layer), color: foreground(theme.middle),
icon_width: 8, icon_width: 8,
iconHeight: 8, icon_height: 8,
button_width: 8, button_width: 8,
buttonHeight: 8, button_height: 8,
}, },
state: { state: {
hovered: { hovered: {
color: foreground(layer, "hovered"), color: foreground(theme.middle, "hovered"),
}, },
}, },
}), }),

78
styles/src/style_tree/status_bar.ts
View File

@ -1,22 +1,22 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
export default function status_bar(colorScheme: ColorScheme): any { export default function status_bar(theme: ColorScheme): any {
const layer = colorScheme.lowest const layer = theme.lowest
const statusContainer = { const status_container = {
corner_radius: 6, corner_radius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 }, padding: { top: 3, bottom: 3, left: 6, right: 6 },
} }
const diagnosticStatusContainer = { const diagnostic_status_container = {
corner_radius: 6, corner_radius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 }, padding: { top: 1, bottom: 1, left: 6, right: 6 },
} }
return { return {
height: 30, height: 30,
itemSpacing: 8, item_spacing: 8,
padding: { padding: {
top: 1, top: 1,
bottom: 1, bottom: 1,
@ -24,8 +24,8 @@ export default function status_bar(colorScheme: ColorScheme): any {
right: 6, right: 6,
}, },
border: border(layer, { top: true, overlay: true }), border: border(layer, { top: true, overlay: true }),
cursorPosition: text(layer, "sans", "variant"), cursor_position: text(layer, "sans", "variant"),
activeLanguage: interactive({ active_language: interactive({
base: { base: {
padding: { left: 6, right: 6 }, padding: { left: 6, right: 6 },
...text(layer, "sans", "variant"), ...text(layer, "sans", "variant"),
@ -36,83 +36,83 @@ export default function status_bar(colorScheme: ColorScheme): any {
}, },
}, },
}), }),
autoUpdateProgressMessage: text(layer, "sans", "variant"), auto_updat_progress_message: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"), auto_update_done_message: text(layer, "sans", "variant"),
lspStatus: interactive({ lsp_status: interactive({
base: { base: {
...diagnosticStatusContainer, ...diagnostic_status_container,
icon_spacing: 4, icon_spacing: 4,
icon_width: 14, icon_width: 14,
height: 18, height: 18,
message: text(layer, "sans"), message: text(layer, "sans"),
iconColor: foreground(layer), icon_color: foreground(layer),
}, },
state: { state: {
hovered: { hovered: {
message: text(layer, "sans"), message: text(layer, "sans"),
iconColor: foreground(layer), icon_color: foreground(layer),
background: background(layer, "hovered"), background: background(layer, "hovered"),
}, },
}, },
}), }),
diagnosticMessage: interactive({ diagnostic_message: interactive({
base: { base: {
...text(layer, "sans"), ...text(layer, "sans"),
}, },
state: { hovered: text(layer, "sans", "hovered") }, state: { hovered: text(layer, "sans", "hovered") },
}), }),
diagnosticSummary: interactive({ diagnostic_summary: interactive({
base: { base: {
height: 20, height: 20,
icon_width: 16, icon_width: 16,
icon_spacing: 2, icon_spacing: 2,
summarySpacing: 6, summary_spacing: 6,
text: text(layer, "sans", { size: "sm" }), text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"), icon_color_ok: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"), icon_color_warning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"), icon_color_error: foreground(layer, "negative"),
containerOk: { container_ok: {
corner_radius: 6, corner_radius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 }, padding: { top: 3, bottom: 3, left: 7, right: 7 },
}, },
containerWarning: { container_warning: {
...diagnosticStatusContainer, ...diagnostic_status_container,
background: background(layer, "warning"), background: background(layer, "warning"),
border: border(layer, "warning"), border: border(layer, "warning"),
}, },
containerError: { container_error: {
...diagnosticStatusContainer, ...diagnostic_status_container,
background: background(layer, "negative"), background: background(layer, "negative"),
border: border(layer, "negative"), border: border(layer, "negative"),
}, },
}, },
state: { state: {
hovered: { hovered: {
iconColorOk: foreground(layer, "on"), icon_color_ok: foreground(layer, "on"),
containerOk: { container_ok: {
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
}, },
containerWarning: { container_warning: {
background: background(layer, "warning", "hovered"), background: background(layer, "warning", "hovered"),
border: border(layer, "warning", "hovered"), border: border(layer, "warning", "hovered"),
}, },
containerError: { container_error: {
background: background(layer, "negative", "hovered"), background: background(layer, "negative", "hovered"),
border: border(layer, "negative", "hovered"), border: border(layer, "negative", "hovered"),
}, },
}, },
}, },
}), }),
panelButtons: { panel_buttons: {
groupLeft: {}, group_left: {},
groupBottom: {}, group_bottom: {},
groupRight: {}, group_right: {},
button: toggleable({ button: toggleable({
base: interactive({ base: interactive({
base: { base: {
...statusContainer, ...status_container,
iconSize: 16, icon_size: 16,
iconColor: foreground(layer, "variant"), icon_color: foreground(layer, "variant"),
label: { label: {
margin: { left: 6 }, margin: { left: 6 },
...text(layer, "sans", { size: "sm" }), ...text(layer, "sans", { size: "sm" }),
@ -120,7 +120,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
}, },
state: { state: {
hovered: { hovered: {
iconColor: foreground(layer, "hovered"), icon_color: foreground(layer, "hovered"),
background: background(layer, "variant"), background: background(layer, "variant"),
}, },
}, },
@ -128,15 +128,15 @@ export default function status_bar(colorScheme: ColorScheme): any {
state: { state: {
active: { active: {
default: { default: {
iconColor: foreground(layer, "active"), icon_color: foreground(layer, "active"),
background: background(layer, "active"), background: background(layer, "active"),
}, },
hovered: { hovered: {
iconColor: foreground(layer, "hovered"), icon_color: foreground(layer, "hovered"),
background: background(layer, "hovered"), background: background(layer, "hovered"),
}, },
clicked: { clicked: {
iconColor: foreground(layer, "pressed"), icon_color: foreground(layer, "pressed"),
background: background(layer, "pressed"), background: background(layer, "pressed"),
}, },
}, },

4
styles/src/style_tree/tab_bar.ts
View File

@ -1,5 +1,5 @@
import { ColorScheme } from "../theme/color_scheme" 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 { text, border, background, foreground } from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
@ -71,7 +71,7 @@ export default function tab_bar(colorScheme: ColorScheme): any {
const draggedTab = { const draggedTab = {
...activePaneActiveTab, ...activePaneActiveTab,
background: withOpacity(tab.background, 0.9), background: with_opacity(tab.background, 0.9),
border: undefined as any, border: undefined as any,
shadow: colorScheme.popover_shadow, shadow: colorScheme.popover_shadow,
} }

4
styles/src/style_tree/titlebar.ts
View File

@ -2,7 +2,7 @@ import { ColorScheme } from "../common"
import { icon_button, toggleable_icon_button } from "../component/icon_button" import { icon_button, toggleable_icon_button } from "../component/icon_button"
import { toggleable_text_button } from "../component/text_button" import { toggleable_text_button } from "../component/text_button"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
const ITEM_SPACING = 8 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 // When the collaboration server is out of date, show a warning
outdatedWarning: { outdatedWarning: {
...text(theme.lowest, "sans", "warning", { size: "xs" }), ...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"), border: border(theme.lowest, "warning"),
margin: { margin: {
left: ITEM_SPACING, left: ITEM_SPACING,

4
styles/src/style_tree/welcome.ts
View File

@ -1,5 +1,5 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { import {
border, border,
background, background,
@ -56,7 +56,7 @@ export default function welcome(colorScheme: ColorScheme): any {
}, },
checkboxGroup: { checkboxGroup: {
border: border(layer, "variant"), border: border(layer, "variant"),
background: withOpacity(background(layer, "hovered"), 0.25), background: with_opacity(background(layer, "hovered"), 0.25),
corner_radius: 4, corner_radius: 4,
padding: { padding: {
left: 12, left: 12,

14
styles/src/style_tree/workspace.ts
View File

@ -1,5 +1,5 @@
import { ColorScheme } from "../theme/color_scheme" import { ColorScheme } from "../theme/color_scheme"
import { withOpacity } from "../theme/color" import { with_opacity } from "../theme/color"
import { import {
background, background,
border, border,
@ -25,14 +25,14 @@ export default function workspace(colorScheme: ColorScheme): any {
height: 256, height: 256,
}, },
logo: svg( 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", "icons/logo_96.svg",
256, 256,
256 256
), ),
logoShadow: svg( logoShadow: svg(
withOpacity( with_opacity(
colorScheme.is_light colorScheme.is_light
? "#FFFFFF" ? "#FFFFFF"
: colorScheme.lowest.base.default.background, : colorScheme.lowest.base.default.background,
@ -97,8 +97,8 @@ export default function workspace(colorScheme: ColorScheme): any {
zoomedBackground: { zoomedBackground: {
cursor: "Arrow", cursor: "Arrow",
background: is_light background: is_light
? withOpacity(background(colorScheme.lowest), 0.8) ? with_opacity(background(colorScheme.lowest), 0.8)
: withOpacity(background(colorScheme.highest), 0.6), : with_opacity(background(colorScheme.highest), 0.6),
}, },
zoomedPaneForeground: { zoomedPaneForeground: {
margin: 16, margin: 16,
@ -181,7 +181,7 @@ export default function workspace(colorScheme: ColorScheme): any {
}), }),
disconnectedOverlay: { disconnectedOverlay: {
...text(layer, "sans"), ...text(layer, "sans"),
background: withOpacity(background(layer), 0.8), background: with_opacity(background(layer), 0.8),
}, },
notification: { notification: {
margin: { top: 10 }, margin: { top: 10 },
@ -195,6 +195,6 @@ export default function workspace(colorScheme: ColorScheme): any {
width: 400, width: 400,
margin: { right: 10, bottom: 10 }, margin: { right: 10, bottom: 10 },
}, },
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), dropTargetOverlayColor: with_opacity(foreground(layer, "variant"), 0.5),
} }
} }

2
styles/src/theme/color.ts
View File

@ -1,5 +1,5 @@
import chroma from "chroma-js" 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() return chroma(color).alpha(opacity).hex()
} }