diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 42d88dff8f..ebccd62cd5 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#19171c", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#8b8792", "size": 12, - "border": { - "color": "#19171c", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#efecf4", - "size": 12, - "border": { - "color": "#19171c", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#efecf4", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#8b8792" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#8b8792", + "hover": { + "background": "#58526052", + "color": "#8b8792" }, - "background": "#58526052", - "color": "#8b8792" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#5852607a", + "color": "#efecf4" }, - "background": "#58526052", - "color": "#efecf4" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#5852607a", - "color": "#efecf4" + "active_hover": { + "background": "#58526052", + "color": "#efecf4" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index e296cf4099..ae47f0277f 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#efecf4", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#585260", "size": 12, - "border": { - "color": "#efecf4", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#19171c", - "size": 12, - "border": { - "color": "#efecf4", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#19171c", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#585260" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#585260", + "hover": { + "background": "#8b87921f", + "color": "#585260" }, - "background": "#8b87921f", - "color": "#585260" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#8b87922e", + "color": "#19171c" }, - "background": "#8b87921f", - "color": "#19171c" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#8b87922e", - "color": "#19171c" + "active_hover": { + "background": "#8b87921f", + "color": "#19171c" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 6650b4914b..9a87bb1d25 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#070707", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#9c9c9c", "size": 12, - "border": { - "color": "#070707", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#ffffff", - "size": 12, - "border": { - "color": "#070707", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#ffffff", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#9c9c9c" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#9c9c9c", + "hover": { + "background": "#323232", + "color": "#9c9c9c" }, - "background": "#323232", - "color": "#9c9c9c" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#1c1c1c", + "color": "#ffffff" }, - "background": "#323232", - "color": "#ffffff" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#1c1c1c", - "color": "#ffffff" + "active_hover": { + "background": "#323232", + "color": "#ffffff" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/light.json b/assets/themes/light.json index 3d7556c3b4..1686c1797a 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#d5d5d5", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#474747", "size": 12, - "border": { - "color": "#d5d5d5", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#000000", - "size": 12, - "border": { - "color": "#d5d5d5", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#000000", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#717171" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#717171", + "hover": { + "background": "#e3e3e3", + "color": "#717171" }, - "background": "#e3e3e3", - "color": "#717171" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#d5d5d5", + "color": "#000000" }, - "background": "#e3e3e3", - "color": "#000000" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#d5d5d5", - "color": "#000000" + "active_hover": { + "background": "#e3e3e3", + "color": "#000000" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 139d54af07..3f14f9d12d 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#002b36", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#93a1a1", "size": 12, - "border": { - "color": "#002b36", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#fdf6e3", - "size": 12, - "border": { - "color": "#002b36", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#fdf6e3", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#93a1a1" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#93a1a1", + "hover": { + "background": "#586e7552", + "color": "#93a1a1" }, - "background": "#586e7552", - "color": "#93a1a1" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#586e757a", + "color": "#fdf6e3" }, - "background": "#586e7552", - "color": "#fdf6e3" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#586e757a", - "color": "#fdf6e3" + "active_hover": { + "background": "#586e7552", + "color": "#fdf6e3" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index d9d5bc8994..3286878711 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#fdf6e3", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#586e75", "size": 12, - "border": { - "color": "#fdf6e3", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#002b36", - "size": 12, - "border": { - "color": "#fdf6e3", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#002b36", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#586e75" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#586e75", + "hover": { + "background": "#93a1a11f", + "color": "#586e75" }, - "background": "#93a1a11f", - "color": "#586e75" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#93a1a12e", + "color": "#002b36" }, - "background": "#93a1a11f", - "color": "#002b36" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#93a1a12e", - "color": "#002b36" + "active_hover": { + "background": "#93a1a11f", + "color": "#002b36" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 92ea11ff4b..a068c0d42a 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#202746", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#979db4", "size": 12, - "border": { - "color": "#202746", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#f5f7ff", - "size": 12, - "border": { - "color": "#202746", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#f5f7ff", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#979db4" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#979db4", + "hover": { + "background": "#5e668752", + "color": "#979db4" }, - "background": "#5e668752", - "color": "#979db4" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#5e66877a", + "color": "#f5f7ff" }, - "background": "#5e668752", - "color": "#f5f7ff" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#5e66877a", - "color": "#f5f7ff" + "active_hover": { + "background": "#5e668752", + "color": "#f5f7ff" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index d9245e7fcb..274a4f7e3e 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -347,39 +347,26 @@ "bottom": true }, "sign_in_prompt": { + "border": { + "color": "#f5f7ff", + "width": 1 + }, + "corner_radius": 6, + "margin": { + "top": 1, + "right": 6 + }, + "padding": { + "left": 6, + "right": 6 + }, "family": "Zed Sans", "color": "#5e6687", "size": 12, - "border": { - "color": "#f5f7ff", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 - } - }, - "hovered_sign_in_prompt": { - "family": "Zed Sans", - "color": "#202746", - "size": 12, - "border": { - "color": "#f5f7ff", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#202746", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#5e6687" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#5e6687", + "hover": { + "background": "#979db41f", + "color": "#5e6687" }, - "background": "#979db41f", - "color": "#5e6687" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#979db42e", + "color": "#202746" }, - "background": "#979db41f", - "color": "#202746" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#979db42e", - "color": "#202746" + "active_hover": { + "background": "#979db41f", + "color": "#202746" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 334a11b739..dd3ce883c6 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -55,13 +55,9 @@ pub struct Titlebar { pub avatar_width: f32, pub avatar_ribbon: AvatarRibbon, pub offline_icon: OfflineIcon, - pub share_icon: ShareIcon, - pub hovered_share_icon: ShareIcon, - pub active_share_icon: ShareIcon, - pub hovered_active_share_icon: ShareIcon, + pub share_icon: Interactive, pub avatar: ImageStyle, - pub sign_in_prompt: ContainedText, - pub hovered_sign_in_prompt: ContainedText, + pub sign_in_prompt: Interactive, pub outdated_warning: ContainedText, } @@ -418,6 +414,7 @@ pub struct Interactive { pub default: T, pub hover: Option, pub active: Option, + pub active_hover: Option, } impl Interactive { @@ -428,6 +425,10 @@ impl Interactive { pub fn hover(&self) -> &T { self.hover.as_ref().unwrap_or(&self.default) } + + pub fn active_hover(&self) -> &T { + self.active_hover.as_ref().unwrap_or(self.active()) + } } impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { @@ -441,46 +442,40 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { default: Value, hover: Option, active: Option, + active_hover: Option, } let json = Helper::deserialize(deserializer)?; - let hover = if let Some(mut hovered) = json.hover { - if let Value::Object(hovered) = &mut hovered { - if let Value::Object(default) = &json.default { - for (key, value) in default { - if !hovered.contains_key(key) { - hovered.insert(key.clone(), value.clone()); + let deserialize_state = |state_json: Option| -> Result, D::Error> { + if let Some(mut state_json) = state_json { + if let Value::Object(state_json) = &mut state_json { + if let Value::Object(default) = &json.default { + for (key, value) in default { + if !state_json.contains_key(key) { + state_json.insert(key.clone(), value.clone()); + } } } } + Ok(Some( + serde_json::from_value::(state_json).map_err(serde::de::Error::custom)?, + )) + } else { + Ok(None) } - Some(serde_json::from_value::(hovered).map_err(serde::de::Error::custom)?) - } else { - None - }; - - let active = if let Some(mut active) = json.active { - if let Value::Object(active) = &mut active { - if let Value::Object(default) = &json.default { - for (key, value) in default { - if !active.contains_key(key) { - active.insert(key.clone(), value.clone()); - } - } - } - } - Some(serde_json::from_value::(active).map_err(serde::de::Error::custom)?) - } else { - None }; + let hover = deserialize_state(json.hover)?; + let active = deserialize_state(json.active)?; + let active_hover = deserialize_state(json.active_hover)?; let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?; Ok(Interactive { default, hover, active, + active_hover, }) } } diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs index 4e7f64201b..3b8c132fc3 100644 --- a/crates/workspace/src/workspace.rs +++ b/crates/workspace/src/workspace.rs @@ -1575,9 +1575,9 @@ impl Workspace { Some( MouseEventHandler::new::(0, cx, |state, _| { let style = if state.hovered { - &theme.workspace.titlebar.hovered_sign_in_prompt + &theme.workspace.titlebar.sign_in_prompt.hover() } else { - &theme.workspace.titlebar.sign_in_prompt + &theme.workspace.titlebar.sign_in_prompt.default }; Label::new("Sign in".to_string(), style.text.clone()) .contained() @@ -1649,18 +1649,17 @@ impl Workspace { { Some( MouseEventHandler::new::(0, cx, |state, cx| { + let style = &theme.workspace.titlebar.share_icon; let style = if self.project().read(cx).is_shared() { if state.hovered { - &theme.workspace.titlebar.hovered_active_share_icon + style.active_hover() } else { - &theme.workspace.titlebar.active_share_icon + &style.active() } + } else if state.hovered { + &style.active() } else { - if state.hovered { - &theme.workspace.titlebar.hovered_share_icon - } else { - &theme.workspace.titlebar.share_icon - } + &style.default }; Svg::new("icons/share.svg") .with_color(style.color) diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index b8cc071553..9d753e9784 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -2,20 +2,6 @@ import Theme from "../themes/theme"; import { backgroundColor, border, iconColor, text } from "./components"; export default function workspace(theme: Theme) { - const signInPrompt = { - ...text(theme, "sans", "secondary", { size: "xs" }), - border: border(theme, "primary"), - cornerRadius: 6, - margin: { - top: 1, - right: 6, - }, - padding: { - left: 6, - right: 6, - }, - }; - const tab = { height: 32, background: backgroundColor(theme, 300), @@ -52,10 +38,6 @@ export default function workspace(theme: Theme) { padding: { left: 6, right: 6 }, ...text(theme, "sans", "primary", { size: "sm" }), }; - const shareIcon = { - cornerRadius: 6, - margin: { top: 3, bottom: 2 }, - }; return { background: backgroundColor(theme, 300), @@ -183,10 +165,19 @@ export default function workspace(theme: Theme) { // set with a token, not hardcoded in rust }, border: border(theme, "primary", { bottom: true }), - signInPrompt, - hoveredSignInPrompt: { - ...signInPrompt, - ...text(theme, "sans", "active", { size: "xs" }), + signInPrompt: { + border: border(theme, "primary"), + cornerRadius: 6, + margin: { + top: 1, + right: 6, + }, + padding: { + left: 6, + right: 6, + }, + ...text(theme, "sans", "secondary", { size: "xs" }), + hover: text(theme, "sans", "active", { size: "xs" }), }, offlineIcon: { color: iconColor(theme, "secondary"), @@ -196,23 +187,21 @@ export default function workspace(theme: Theme) { }, }, shareIcon: { - ...shareIcon, - color: iconColor(theme, "secondary") - }, - hoveredShareIcon: { - ...shareIcon, - background: backgroundColor(theme, 100, "hovered"), + cornerRadius: 6, + margin: { top: 3, bottom: 2 }, color: iconColor(theme, "secondary"), - }, - hoveredActiveShareIcon: { - ...shareIcon, - background: backgroundColor(theme, 100, "hovered"), - color: iconColor(theme, "active"), - }, - activeShareIcon: { - ...shareIcon, - background: backgroundColor(theme, 100, "active"), - color: iconColor(theme, "active"), + hover: { + background: backgroundColor(theme, 100, "hovered"), + color: iconColor(theme, "secondary"), + }, + active: { + background: backgroundColor(theme, 100, "active"), + color: iconColor(theme, "active"), + }, + activeHover: { + background: backgroundColor(theme, 100, "hovered"), + color: iconColor(theme, "active"), + } }, outdatedWarning: { ...text(theme, "sans", "warning"),