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

Update toolbar active state style

Browse Source
This commit is contained in:
Nate Butler 2023-08-29 16:10:40 -04:00
parent d91a9615b5
commit 93cf52a719
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ export type Margin = {
interface IconButtonOptions {
layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
color?: keyof Theme["lowest"]
background_color?: keyof Theme["lowest"]
margin?: Partial<Margin>
variant?: Button.Variant
size?: Button.Size
@ -20,11 +21,13 @@ interface IconButtonOptions {
type ToggleableIconButtonOptions = IconButtonOptions & {
active_color?: keyof Theme["lowest"]
active_background_color?: keyof Theme["lowest"]
active_layer?: Layer
active_variant?: Button.Variant
}
export function icon_button(
{ color, margin, layer, variant, size }: IconButtonOptions = {
{ color, background_color, margin, layer, variant, size }: IconButtonOptions = {
variant: Button.variant.Default,
size: Button.size.Medium,
}
@ -33,10 +36,10 @@ export function icon_button(
if (!color) color = "base"
const background_color =
const default_background =
variant === Button.variant.Ghost
? null
: background(layer ?? theme.lowest, color)
: background(layer ?? theme.lowest, background_color ?? color)
const m = {
top: margin?.top ?? 0,
@ -64,15 +67,15 @@ export function icon_button(
},
state: {
default: {
background: background_color,
background: default_background,
color: foreground(layer ?? theme.lowest, color),
},
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
background: background(layer ?? theme.lowest, background_color ?? color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
background: background(layer ?? theme.lowest, background_color ?? color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
@ -81,7 +84,10 @@ export function icon_button(
export function toggleable_icon_button({
color,
background_color,
active_color,
active_background_color,
active_variant,
margin,
variant,
size,
@ -91,11 +97,13 @@ export function toggleable_icon_button({
return toggleable({
state: {
inactive: icon_button({ color, margin, variant, size }),
inactive: icon_button({ color, background_color, margin, variant, size }),
active: icon_button({
color: active_color ? active_color : color,
background_color: active_background_color ? active_background_color : background_color,
margin,
layer: active_layer,
variant: active_variant || variant,
size,
}),
},

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

@ -41,6 +41,7 @@ function call_controls() {
right: space.half_item,
},
active_color: "negative",
active_background_color: "negative",
}),
toggle_speakers_button: toggleable_icon_button({
@ -58,6 +59,7 @@ function call_controls() {
right: space.group,
},
active_color: "accent",
active_background_color: "accent",
}),
muted: foreground(theme.lowest, "negative"),