refactor opaque fallback
This commit is contained in:
Ashley Wulber
Ashley Wulber
parent
d0b164d216
commit
19142fd38e
12 changed files with 345 additions and 161 deletions
|
|
@ -46,6 +46,7 @@ pub static TRANSPARENT_COMPONENT: LazyLock<Component> = LazyLock::new(|| Compone
|
|||
pub(crate) static THEME: Mutex<Theme> = Mutex::new(Theme {
|
||||
theme_type: ThemeType::Dark,
|
||||
layer: cosmic_theme::Layer::Background,
|
||||
transparent: false,
|
||||
});
|
||||
|
||||
/// Currently-defined theme.
|
||||
|
|
@ -209,6 +210,7 @@ impl ThemeType {
|
|||
pub struct Theme {
|
||||
pub theme_type: ThemeType,
|
||||
pub layer: cosmic_theme::Layer,
|
||||
pub transparent: bool,
|
||||
}
|
||||
|
||||
impl Theme {
|
||||
|
|
@ -279,9 +281,9 @@ impl Theme {
|
|||
/// can be used in a component that is intended to be a child of a `CosmicContainer`
|
||||
pub fn current_container(&self) -> &cosmic_theme::Container {
|
||||
match self.layer {
|
||||
cosmic_theme::Layer::Background => &self.cosmic().background,
|
||||
cosmic_theme::Layer::Primary => &self.cosmic().primary,
|
||||
cosmic_theme::Layer::Secondary => &self.cosmic().secondary,
|
||||
cosmic_theme::Layer::Background => &self.cosmic().background(self.transparent),
|
||||
cosmic_theme::Layer::Primary => &self.cosmic().primary(self.transparent),
|
||||
cosmic_theme::Layer::Secondary => &self.cosmic().secondary(self.transparent),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -290,29 +292,6 @@ impl Theme {
|
|||
pub fn set_theme(&mut self, theme: ThemeType) {
|
||||
self.theme_type = theme;
|
||||
}
|
||||
|
||||
pub fn into_opaque(&self) -> Self {
|
||||
let mut new_theme = Theme {
|
||||
theme_type: match &self.theme_type {
|
||||
ThemeType::System { theme, prefer_dark } => {
|
||||
let mut new_t = (**theme).clone();
|
||||
new_t.background.base.alpha = 1.0;
|
||||
new_t.primary.base.alpha = 1.0;
|
||||
new_t.secondary.base.alpha = 1.0;
|
||||
ThemeType::System {
|
||||
theme: Arc::new(new_t),
|
||||
prefer_dark: *prefer_dark,
|
||||
}
|
||||
}
|
||||
other => other.clone(),
|
||||
},
|
||||
layer: self.layer,
|
||||
};
|
||||
let cosmic = new_theme.cosmic();
|
||||
// copy theme but make all container colors opaque
|
||||
|
||||
new_theme
|
||||
}
|
||||
}
|
||||
|
||||
impl LayeredTheme for Theme {
|
||||
|
|
|
|||
|
|
@ -126,20 +126,20 @@ pub fn appearance(
|
|||
let (background, _, _) = color(&cosmic.text_button);
|
||||
appearance.background = Some(Background::Color(background));
|
||||
|
||||
appearance.icon_color = Some(cosmic.background.on.into());
|
||||
appearance.text_color = Some(cosmic.background.on.into());
|
||||
appearance.icon_color = Some(cosmic.background(theme.transparent).on.into());
|
||||
appearance.text_color = Some(cosmic.background(theme.transparent).on.into());
|
||||
corner_radii = &cosmic.corner_radii.radius_0;
|
||||
}
|
||||
Button::AppletIcon => {
|
||||
let (background, _, _) = color(&cosmic.text_button);
|
||||
appearance.background = Some(Background::Color(background));
|
||||
|
||||
appearance.icon_color = Some(cosmic.background.on.into());
|
||||
appearance.text_color = Some(cosmic.background.on.into());
|
||||
appearance.icon_color = Some(cosmic.background(theme.transparent).on.into());
|
||||
appearance.text_color = Some(cosmic.background(theme.transparent).on.into());
|
||||
}
|
||||
Button::MenuFolder => {
|
||||
// Menu folders cannot be disabled, ignore customized icon and text color
|
||||
let component = &cosmic.background.component;
|
||||
let component = &cosmic.background(theme.transparent).component;
|
||||
let (background, _, _) = color(component);
|
||||
appearance.background = Some(Background::Color(background));
|
||||
appearance.icon_color = Some(component.on.into());
|
||||
|
|
@ -151,8 +151,9 @@ pub fn appearance(
|
|||
let (background, text, icon) = color(&cosmic.list_button);
|
||||
|
||||
if selected {
|
||||
appearance.background =
|
||||
Some(Background::Color(cosmic.primary.component.hover.into()));
|
||||
appearance.background = Some(Background::Color(
|
||||
cosmic.primary(theme.transparent).component.hover.into(),
|
||||
));
|
||||
appearance.icon_color = Some(cosmic.accent.base.into());
|
||||
appearance.text_color = Some(cosmic.accent_text_color().into());
|
||||
} else {
|
||||
|
|
@ -162,7 +163,7 @@ pub fn appearance(
|
|||
}
|
||||
}
|
||||
Button::MenuItem => {
|
||||
let (background, text, icon) = color(&cosmic.background.component);
|
||||
let (background, text, icon) = color(&cosmic.background(theme.transparent).component);
|
||||
appearance.background = Some(Background::Color(background));
|
||||
appearance.icon_color = icon;
|
||||
appearance.text_color = text;
|
||||
|
|
@ -278,6 +279,6 @@ impl Catalog for crate::Theme {
|
|||
}
|
||||
|
||||
fn selection_background(&self) -> Background {
|
||||
Background::Color(self.cosmic().primary.base.into())
|
||||
Background::Color(self.cosmic().primary(self.transparent).base.into())
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,18 +13,28 @@ impl dropdown::menu::StyleSheet for Theme {
|
|||
|
||||
dropdown::menu::Appearance {
|
||||
text_color: cosmic.on_bg_color().into(),
|
||||
background: Background::Color(cosmic.background.component.base.into()),
|
||||
background: Background::Color(
|
||||
cosmic.background(self.transparent).component.base.into(),
|
||||
),
|
||||
border_width: 0.0,
|
||||
border_radius: cosmic.corner_radii.radius_m.into(),
|
||||
border_color: Color::TRANSPARENT,
|
||||
|
||||
hovered_text_color: cosmic.on_bg_color().into(),
|
||||
hovered_background: Background::Color(cosmic.primary.component.hover.into()),
|
||||
hovered_background: Background::Color(
|
||||
cosmic.primary(self.transparent).component.hover.into(),
|
||||
),
|
||||
|
||||
selected_text_color: cosmic.accent_text_color().into(),
|
||||
selected_background: Background::Color(cosmic.primary.component.hover.into()),
|
||||
selected_background: Background::Color(
|
||||
cosmic.primary(self.transparent).component.hover.into(),
|
||||
),
|
||||
|
||||
description_color: cosmic.primary.component.on_disabled.into(),
|
||||
description_color: cosmic
|
||||
.primary(self.transparent)
|
||||
.component
|
||||
.on_disabled
|
||||
.into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -227,11 +227,11 @@ impl iced_checkbox::Catalog for Theme {
|
|||
},
|
||||
Checkbox::Secondary => iced_checkbox::Style {
|
||||
background: Background::Color(if is_checked {
|
||||
cosmic.background.component.base.into()
|
||||
cosmic.background(self.transparent).component.base.into()
|
||||
} else {
|
||||
self.current_container().small_widget.into()
|
||||
}),
|
||||
icon_color: cosmic.background.on.into(),
|
||||
icon_color: cosmic.background(self.transparent).on.into(),
|
||||
border: Border {
|
||||
radius: corners.radius_xs.into(),
|
||||
width: if is_checked { 0.0 } else { 1.0 },
|
||||
|
|
@ -412,11 +412,13 @@ impl<'a> Container<'a> {
|
|||
}
|
||||
|
||||
#[must_use]
|
||||
pub fn background(theme: &cosmic_theme::Theme) -> iced_container::Style {
|
||||
pub fn background(theme: &cosmic_theme::Theme, transparent: bool) -> iced_container::Style {
|
||||
iced_container::Style {
|
||||
icon_color: Some(Color::from(theme.background.on)),
|
||||
text_color: Some(Color::from(theme.background.on)),
|
||||
background: Some(iced::Background::Color(theme.background.base.into())),
|
||||
icon_color: Some(Color::from(theme.background(transparent).on)),
|
||||
text_color: Some(Color::from(theme.background(transparent).on)),
|
||||
background: Some(iced::Background::Color(
|
||||
theme.background(transparent).base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: theme.corner_radii.radius_s.into(),
|
||||
..Default::default()
|
||||
|
|
@ -427,11 +429,13 @@ impl<'a> Container<'a> {
|
|||
}
|
||||
|
||||
#[must_use]
|
||||
pub fn primary(theme: &cosmic_theme::Theme) -> iced_container::Style {
|
||||
pub fn primary(theme: &cosmic_theme::Theme, transparent: bool) -> iced_container::Style {
|
||||
iced_container::Style {
|
||||
icon_color: Some(Color::from(theme.primary.on)),
|
||||
text_color: Some(Color::from(theme.primary.on)),
|
||||
background: Some(iced::Background::Color(theme.primary.base.into())),
|
||||
icon_color: Some(Color::from(theme.primary(transparent).on)),
|
||||
text_color: Some(Color::from(theme.primary(transparent).on)),
|
||||
background: Some(iced::Background::Color(
|
||||
theme.primary(transparent).base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: theme.corner_radii.radius_s.into(),
|
||||
..Default::default()
|
||||
|
|
@ -442,11 +446,13 @@ impl<'a> Container<'a> {
|
|||
}
|
||||
|
||||
#[must_use]
|
||||
pub fn secondary(theme: &cosmic_theme::Theme) -> iced_container::Style {
|
||||
pub fn secondary(theme: &cosmic_theme::Theme, transparent: bool) -> iced_container::Style {
|
||||
iced_container::Style {
|
||||
icon_color: Some(Color::from(theme.secondary.on)),
|
||||
text_color: Some(Color::from(theme.secondary.on)),
|
||||
background: Some(iced::Background::Color(theme.secondary.base.into())),
|
||||
icon_color: Some(Color::from(theme.secondary(transparent).on)),
|
||||
text_color: Some(Color::from(theme.secondary(transparent).on)),
|
||||
background: Some(iced::Background::Color(
|
||||
theme.secondary(transparent).base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: theme.corner_radii.radius_s.into(),
|
||||
..Default::default()
|
||||
|
|
@ -496,9 +502,11 @@ impl iced_container::Catalog for Theme {
|
|||
Container::Custom(f) => f(self),
|
||||
|
||||
Container::WindowBackground => iced_container::Style {
|
||||
icon_color: Some(Color::from(cosmic.background.on)),
|
||||
text_color: Some(Color::from(cosmic.background.on)),
|
||||
background: Some(iced::Background::Color(cosmic.background.base.into())),
|
||||
icon_color: Some(Color::from(cosmic.background(self.transparent).on)),
|
||||
text_color: Some(Color::from(cosmic.background(self.transparent).on)),
|
||||
background: Some(iced::Background::Color(
|
||||
cosmic.background(self.transparent).base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: [
|
||||
cosmic.corner_radii.radius_0[0],
|
||||
|
|
@ -536,12 +544,13 @@ impl iced_container::Catalog for Theme {
|
|||
let (icon_color, text_color) = if *focused {
|
||||
(
|
||||
Color::from(cosmic.accent_text_color()),
|
||||
Color::from(cosmic.background.on),
|
||||
Color::from(cosmic.background(self.transparent).on),
|
||||
)
|
||||
} else {
|
||||
use crate::ext::ColorExt;
|
||||
let unfocused_color = Color::from(cosmic.background.component.on)
|
||||
.blend_alpha(cosmic.background.base.into(), 0.5);
|
||||
let unfocused_color =
|
||||
Color::from(cosmic.background(self.transparent).component.on)
|
||||
.blend_alpha(cosmic.background(self.transparent).base.into(), 0.5);
|
||||
(unfocused_color, unfocused_color)
|
||||
};
|
||||
|
||||
|
|
@ -551,7 +560,9 @@ impl iced_container::Catalog for Theme {
|
|||
background: if *transparent {
|
||||
None
|
||||
} else {
|
||||
Some(iced::Background::Color(cosmic.background.base.into()))
|
||||
Some(iced::Background::Color(
|
||||
cosmic.background(self.transparent).base.into(),
|
||||
))
|
||||
},
|
||||
border: Border {
|
||||
radius: [
|
||||
|
|
@ -577,23 +588,23 @@ impl iced_container::Catalog for Theme {
|
|||
}
|
||||
|
||||
Container::ContextDrawer => {
|
||||
let mut a = Container::primary(cosmic);
|
||||
let mut a = Container::primary(cosmic, self.transparent);
|
||||
if let Some(Background::Color(ref mut color)) = a.background {
|
||||
color.a = (color.a + if cosmic.is_dark { 0.60 } else { 0.5 }).min(1.);
|
||||
}
|
||||
|
||||
if cosmic.is_high_contrast {
|
||||
a.border.width = 1.;
|
||||
a.border.color = cosmic.primary.divider.into();
|
||||
a.border.color = cosmic.primary(self.transparent).divider.into();
|
||||
}
|
||||
a
|
||||
}
|
||||
|
||||
Container::Background => Container::background(cosmic),
|
||||
Container::Background => Container::background(cosmic, self.transparent),
|
||||
|
||||
Container::Primary => Container::primary(cosmic),
|
||||
Container::Primary => Container::primary(cosmic, self.transparent),
|
||||
|
||||
Container::Secondary => Container::secondary(cosmic),
|
||||
Container::Secondary => Container::secondary(cosmic, self.transparent),
|
||||
|
||||
Container::Dropdown => iced_container::Style {
|
||||
icon_color: None,
|
||||
|
|
@ -625,10 +636,14 @@ impl iced_container::Catalog for Theme {
|
|||
|
||||
match self.layer {
|
||||
cosmic_theme::Layer::Background => iced_container::Style {
|
||||
icon_color: Some(Color::from(cosmic.background.component.on)),
|
||||
text_color: Some(Color::from(cosmic.background.component.on)),
|
||||
icon_color: Some(Color::from(
|
||||
cosmic.background(self.transparent).component.on,
|
||||
)),
|
||||
text_color: Some(Color::from(
|
||||
cosmic.background(self.transparent).component.on,
|
||||
)),
|
||||
background: Some(iced::Background::Color(
|
||||
cosmic.background.component.base.into(),
|
||||
cosmic.background(self.transparent).component.base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_s.into(),
|
||||
|
|
@ -638,10 +653,14 @@ impl iced_container::Catalog for Theme {
|
|||
snap: true,
|
||||
},
|
||||
cosmic_theme::Layer::Primary => iced_container::Style {
|
||||
icon_color: Some(Color::from(cosmic.primary.component.on)),
|
||||
text_color: Some(Color::from(cosmic.primary.component.on)),
|
||||
icon_color: Some(Color::from(
|
||||
cosmic.primary(self.transparent).component.on,
|
||||
)),
|
||||
text_color: Some(Color::from(
|
||||
cosmic.primary(self.transparent).component.on,
|
||||
)),
|
||||
background: Some(iced::Background::Color(
|
||||
cosmic.primary.component.base.into(),
|
||||
cosmic.primary(self.transparent).component.base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_s.into(),
|
||||
|
|
@ -651,10 +670,14 @@ impl iced_container::Catalog for Theme {
|
|||
snap: true,
|
||||
},
|
||||
cosmic_theme::Layer::Secondary => iced_container::Style {
|
||||
icon_color: Some(Color::from(cosmic.secondary.component.on)),
|
||||
text_color: Some(Color::from(cosmic.secondary.component.on)),
|
||||
icon_color: Some(Color::from(
|
||||
cosmic.secondary(self.transparent).component.on,
|
||||
)),
|
||||
text_color: Some(Color::from(
|
||||
cosmic.secondary(self.transparent).component.on,
|
||||
)),
|
||||
background: Some(iced::Background::Color(
|
||||
cosmic.secondary.component.base.into(),
|
||||
cosmic.secondary(self.transparent).component.base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_s.into(),
|
||||
|
|
@ -667,11 +690,13 @@ impl iced_container::Catalog for Theme {
|
|||
}
|
||||
|
||||
Container::Dialog => iced_container::Style {
|
||||
icon_color: Some(Color::from(cosmic.primary.on)),
|
||||
text_color: Some(Color::from(cosmic.primary.on)),
|
||||
background: Some(iced::Background::Color(cosmic.primary.base.into())),
|
||||
icon_color: Some(Color::from(cosmic.primary(self.transparent).on)),
|
||||
text_color: Some(Color::from(cosmic.primary(self.transparent).on)),
|
||||
background: Some(iced::Background::Color(
|
||||
cosmic.primary(self.transparent).base.into(),
|
||||
)),
|
||||
border: Border {
|
||||
color: cosmic.primary.divider.into(),
|
||||
color: cosmic.primary(self.transparent).divider.into(),
|
||||
width: 1.0,
|
||||
radius: cosmic.corner_radii.radius_m.into(),
|
||||
},
|
||||
|
|
@ -813,13 +838,15 @@ impl menu::Catalog for Theme {
|
|||
|
||||
menu::Style {
|
||||
text_color: cosmic.on_bg_color().into(),
|
||||
background: Background::Color(cosmic.background.base.into()),
|
||||
background: Background::Color(cosmic.background(self.transparent).base.into()),
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_m.into(),
|
||||
..Default::default()
|
||||
},
|
||||
selected_text_color: cosmic.accent_text_color().into(),
|
||||
selected_background: Background::Color(cosmic.background.component.hover.into()),
|
||||
selected_background: Background::Color(
|
||||
cosmic.background(self.transparent).component.hover.into(),
|
||||
),
|
||||
shadow: Default::default(),
|
||||
}
|
||||
}
|
||||
|
|
@ -857,7 +884,7 @@ impl pick_list::Catalog for Theme {
|
|||
match status {
|
||||
pick_list::Status::Active => appearance,
|
||||
pick_list::Status::Hovered => pick_list::Style {
|
||||
background: Background::Color(cosmic.background.base.into()),
|
||||
background: Background::Color(cosmic.background(self.transparent).base.into()),
|
||||
..appearance
|
||||
},
|
||||
pick_list::Status::Opened { is_hovered: _ } => appearance,
|
||||
|
|
@ -1053,7 +1080,10 @@ impl progress_bar::Catalog for Theme {
|
|||
},
|
||||
)
|
||||
} else {
|
||||
(theme.accent.base, theme.background.divider)
|
||||
(
|
||||
theme.accent.base,
|
||||
theme.background(self.transparent).divider,
|
||||
)
|
||||
};
|
||||
let border = Border {
|
||||
radius: theme.corner_radii.radius_xl.into(),
|
||||
|
|
@ -1533,7 +1563,7 @@ impl iced_widget::text_editor::Catalog for Theme {
|
|||
let selection = cosmic.accent.base.into();
|
||||
let value = cosmic.palette.neutral_9.into();
|
||||
let placeholder = cosmic.palette.neutral_9.with_alpha(0.7).into();
|
||||
let icon: Color = cosmic.background.on.into();
|
||||
let icon: Color = cosmic.background(self.transparent).on.into();
|
||||
// TODO do we need to add icon color back?
|
||||
|
||||
match status {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ impl StyleSheet for Theme {
|
|||
|
||||
fn appearance(&self, style: &Self::Style) -> Appearance {
|
||||
let cosmic = self.cosmic();
|
||||
let component = &cosmic.background.component;
|
||||
let component = &cosmic.background(self.transparent).component;
|
||||
let mut bg = component.base;
|
||||
bg.alpha = (bg.alpha + if cosmic.is_dark { 0.6 } else { 0.5 }).min(1.);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue