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 {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
}

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

@ -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

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

@ -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)

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

@ -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" }),
},
}
}

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

@ -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),
},
},
})

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"
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"),
},
}
}

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

@ -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" }),
},
},

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

@ -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"),
},

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 {
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),

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 { 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,
}),

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

@ -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
}
}

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"
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",
}),

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

@ -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,

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

@ -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" }),
}
}

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

@ -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],
},
}

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"
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",
}),

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

@ -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"),
},
},
}),

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

@ -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),
}
}

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 { 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"),
},
},
}),

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

@ -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"),
},
},

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

@ -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,
}

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 { 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,

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

@ -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,

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

@ -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),
}
}

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

@ -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()
}