@@ -1,14 +1,17 @@
import { ColorScheme } from "../common";
-import { interactive } from "../element";
+import { interactive, toggleable } from "../element";
import { background, foreground } from "../styleTree/components";
import { Margin } from "../types/zed";
interface IconButtonOptions {
+ layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
}
-export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOptions) {
+type ToggleableIconButtonOptions = IconButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
+
+export function icon_button(theme: ColorScheme, { color, margin, layer }: IconButtonOptions) {
if (!color)
color = "base";
@@ -21,7 +24,7 @@ export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOpt
return interactive({
base: {
- corner_radius: 4,
+ corner_radius: 6,
padding: {
top: 2,
bottom: 2,
@@ -36,19 +39,31 @@ export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOpt
},
state: {
default: {
- background: background(theme.lowest, color),
- color: foreground(theme.lowest, color),
+ background: background(layer ?? theme.lowest, color),
+ color: foreground(layer ?? theme.lowest, color),
},
hovered: {
- background: background(theme.lowest, color, "hovered"),
- color: foreground(theme.lowest, color, "hovered"),
+ background: background(layer ?? theme.lowest, color, "hovered"),
+ color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
- background: background(theme.lowest, color, "pressed"),
- color: foreground(theme.lowest, color, "pressed"),
+ background: background(layer ?? theme.lowest, color, "pressed"),
+ color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
}
+
+export function toggleable_icon_button(theme: ColorScheme, { color, active_color, margin }: ToggleableIconButtonOptions) {
+ if (!color)
+ color = "base";
+
+ return toggleable({
+ state: {
+ inactive: icon_button(theme, { color, margin }),
+ active: icon_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
+ }
+ })
+}
@@ -0,0 +1,74 @@
+import { ColorScheme } from "../common";
+import { interactive, toggleable } from "../element";
+import { TextProperties, background, foreground, text } from "../styleTree/components";
+import { Margin } from "../types/zed";
+
+interface TextButtonOptions {
+ layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
+ color?: keyof ColorScheme['lowest'];
+ margin?: Partial<Margin>;
+ text_properties?: TextProperties;
+}
+
+type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
+
+export function text_button(theme: ColorScheme, { color, layer, margin, text_properties }: TextButtonOptions) {
+ if (!color)
+ color = "base";
+
+ const text_options: TextProperties = {
+ size: "xs",
+ weight: "normal",
+ ...text_properties
+ }
+
+ const m = {
+ top: margin?.top ?? 0,
+ bottom: margin?.bottom ?? 0,
+ left: margin?.left ?? 0,
+ right: margin?.right ?? 0,
+ }
+
+ return interactive({
+ base: {
+ corner_radius: 6,
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 6,
+ right: 6,
+ },
+ margin: m,
+ button_height: 22,
+ ...text(layer ?? theme.lowest, "sans", color, text_options)
+ },
+ state: {
+ default: {
+ background: background(layer ?? theme.lowest, color),
+ color: foreground(layer ?? theme.lowest, color),
+ },
+ hovered: {
+ background: background(layer ?? theme.lowest, color, "hovered"),
+ color: foreground(layer ?? theme.lowest, color, "hovered"),
+
+ },
+ clicked: {
+ background: background(layer ?? theme.lowest, color, "pressed"),
+ color: foreground(layer ?? theme.lowest, color, "pressed"),
+
+ },
+ },
+ });
+}
+
+export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) {
+ if (!color)
+ color = "base";
+
+ return toggleable({
+ state: {
+ inactive: text_button(theme, { color, margin }),
+ active: text_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
+ }
+ })
+}
@@ -13,7 +13,8 @@ import statusBar from "./statusBar"
import tabBar from "./tabBar"
import { interactive } from "../element"
import merge from "ts-deepmerge"
-import { icon_button } from "../component/icon_button"
+import { icon_button, toggleable_icon_button } from "../component/icon_button"
+import { text_button, toggleable_text_button } from "../component/text_button"
export default function workspace(colorScheme: ColorScheme) {
const layer = colorScheme.lowest
const isLight = colorScheme.isLight
@@ -298,137 +299,45 @@ export default function workspace(colorScheme: ColorScheme) {
},
cornerRadius: 6,
},
- callControl: interactive({
- base: {
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 12,
- buttonWidth: 20,
- },
- state: {
- hovered: {
- background: background(layer, "variant", "hovered"),
- color: foreground(layer, "variant", "hovered"),
- },
- },
+
+ call_control: icon_button(colorScheme, {
+ margin: { left: itemSpacing / 2 },
}),
- toggleContactsButton: toggleable({
- base: interactive({
- base: {
- margin: { left: itemSpacing },
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 14,
- buttonWidth: 20,
- },
- state: {
- clicked: {
- background: background(layer, "variant", "pressed"),
- },
- hovered: {
- background: background(layer, "variant", "hovered"),
- },
- },
- }),
- state: {
- active: {
- default: {
- background: background(layer, "on", "default"),
- },
- hovered: {
- background: background(layer, "on", "hovered"),
- },
- clicked: {
- background: background(layer, "on", "pressed"),
- },
- },
- },
+
+ toggle_contacts_button: toggleable_icon_button(colorScheme, {
+ margin: { left: itemSpacing }
}),
- toggleMicrophoneButton: toggleable({
- base: interactive({
- base: {
- margin: { left: itemSpacing },
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 14,
- buttonWidth: 20,
- },
- state: {
- clicked: {
- background: background(layer, "variant", "pressed"),
- },
- hovered: {
- background: background(layer, "variant", "hovered"),
- },
- },
- }),
- state: {
- active: {
- default: {
- background: background(layer, "on", "default"),
- },
- hovered: {
- background: background(layer, "on", "hovered"),
- },
- clicked: {
- background: background(layer, "on", "pressed"),
- },
- },
- },
+
+ toggle_microphone_button: toggleable_icon_button(colorScheme, {
+ margin: { left: itemSpacing },
+ active_color: 'negative'
}),
- toggleSpeakersButton: toggleable({
- base: interactive({
- base: {
- margin: { left: itemSpacing },
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 14,
- buttonWidth: 20,
- },
- state: {
- clicked: {
- background: background(layer, "variant", "pressed"),
- },
- hovered: {
- background: background(layer, "variant", "hovered"),
- },
- },
- }),
- state: {
- active: {
- default: {
- background: background(layer, "on", "default"),
- },
- hovered: {
- background: background(layer, "on", "hovered"),
- },
- clicked: {
- background: background(layer, "on", "pressed"),
- },
- },
- },
+
+ toggle_speakers_button: toggleable_icon_button(colorScheme, {
+ margin: { left: itemSpacing / 2 },
}),
- leaveCallButton: icon_button(colorScheme, {
+ leave_call_button: icon_button(colorScheme, {
margin: { left: itemSpacing },
}),
- userMenuButton: merge(titlebarButton, {
- inactive: {
- default: {
- buttonWidth: 20,
- iconWidth: 12,
+ user_menu_button:
+ merge(titlebarButton, {
+ inactive: {
+ default: {
+ buttonWidth: 20,
+ iconWidth: 12,
+ },
},
- },
- active: {
- default: {
- iconWidth: 12,
- button_width: 20,
- background: background(layer, "variant", "active"),
- color: foreground(layer, "variant", "active"),
- }
- },
- }),
+ active: {
+ default: {
+ iconWidth: 12,
+ button_width: 20,
+ background: background(layer, "variant", "active"),
+ color: foreground(layer, "variant", "active"),
+ }
+ },
+ }),
toggleContactsBadge: {
cornerRadius: 3,
@@ -437,9 +346,7 @@ export default function workspace(colorScheme: ColorScheme) {
border: border(layer),
background: foreground(layer, "accent"),
},
- shareButton: {
- ...titlebarButton,
- },
+ shareButton: toggleable_text_button(colorScheme, {}),
},
toolbar: {