leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor opaque fallback

Browse source
This commit is contained in:
Ashley Wulber 2026-04-15 15:06:07 -04:00
parent 9d51e8fda4
commit b814f54f67
12 changed files with 346 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

177
cosmic-theme/src/model/theme.rs
View file

@ -44,11 +44,19 @@ pub struct Theme {
/// name of the theme
pub name: String,
/// background element colors
pub background: Container,
pub(crate) background: Container,
/// primary element colors
pub primary: Container,
pub(crate) primary: Container,
/// secondary element colors
pub secondary: Container,
pub(crate) secondary: Container,
/// background element colors
pub(crate) transparent_background: Container,
/// primary element colors
pub(crate) transparent_primary: Container,
/// secondary element colors
pub(crate) transparent_secondary: Container,
/// button component styling
pub button: Component,
/// accent element colors
pub accent: Component,
/// suggested element colors
@ -71,8 +79,6 @@ pub struct Theme {
pub link_button: Component,
/// text button element colors
pub text_button: Component,
/// button component styling
pub button: Component,
/// palette
pub palette: CosmicPaletteInner,
/// spacing
@ -180,6 +186,39 @@ impl Theme {
todo!();
}
#[allow(clippy::doc_markdown)]
#[inline]
/// get opaque or transparent background based on whether blur is active
pub fn background(&self, transparent: bool) -> &Container {
if transparent {
&self.transparent_background
} else {
&self.background
}
}
#[allow(clippy::doc_markdown)]
#[inline]
/// get opaque or transparent primary based on whether blur is active
pub fn primary(&self, transparent: bool) -> &Container {
if transparent {
&self.transparent_primary
} else {
&self.primary
}
}
#[allow(clippy::doc_markdown)]
#[inline]
/// get opaque or transparent secondary based on whether blur is active
pub fn secondary(&self, transparent: bool) -> &Container {
if transparent {
&self.transparent_secondary
} else {
&self.secondary
}
}
#[must_use]
#[allow(clippy::doc_markdown)]
#[inline]
@ -1060,17 +1099,19 @@ impl ThemeBuilder {
NonZeroUsize::new(100).unwrap(),
);
let mut bg = if let Some(bg_color) = bg_color {
let bg = if let Some(bg_color) = bg_color {
bg_color
} else {
p_ref.gray_1
};
bg.alpha = container_alpha;
let step_array = steps(bg, NonZeroUsize::new(100).unwrap());
let bg_index = color_index(bg, step_array.len());
let mut transparent_bg = bg;
transparent_bg.alpha = container_alpha;
let transparent_bg_steps_array = steps(transparent_bg, NonZeroUsize::new(100).unwrap());
let mut component_hovered_overlay = if bg_index < 91 {
control_steps_array[10]
} else {
@ -1097,13 +1138,26 @@ impl ThemeBuilder {
text_steps_array.as_deref(),
);
let transparent_bg_component = get_surface_color(
bg_index,
8,
&transparent_bg_steps_array,
is_dark,
&p_ref.neutral_2,
);
let on_transparent_bg_component = get_text(
color_index(transparent_bg_component, transparent_bg_steps_array.len()),
&transparent_bg_steps_array,
&control_steps_array[8],
text_steps_array.as_deref(),
);
let primary = {
let mut container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
primary_container_bg_color
} else {
get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1])
};
container_bg.alpha = (container_alpha + if is_dark { 0.3 } else { 0.25 }).min(1.0);
let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
let base_index: usize = color_index(container_bg, step_array.len());
@ -1146,6 +1200,45 @@ impl ThemeBuilder {
is_high_contrast,
)
};
let transparent_primary = {
let mut container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
primary_container_bg_color
} else {
get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1])
};
container_bg.alpha = (container_alpha + if is_dark { 0.3 } else { 0.25 }).min(1.0);
let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
let base_index: usize = color_index(container_bg, step_array.len());
let component_base =
get_surface_color(base_index, 6, &step_array, is_dark, &control_steps_array[3]);
Container::new(
Component::component(
component_base,
accent,
get_text(
color_index(component_base, step_array.len()),
&step_array,
&control_steps_array[8],
text_steps_array.as_deref(),
),
Srgba::new(0., 0., 0., 0.0),
Srgba::new(0., 0., 0., 0.0),
is_high_contrast,
control_steps_array[8],
),
container_bg,
get_text(
base_index,
&step_array,
&control_steps_array[8],
text_steps_array.as_deref(),
),
get_small_widget_color(base_index, 5, &neutral_steps, &control_steps_array[6]),
is_high_contrast,
)
};
let accent_text = if is_dark {
(primary.base.relative_contrast(accent.color) < 4.).then(|| {
@ -1220,13 +1313,11 @@ impl ThemeBuilder {
),
primary,
secondary: {
let mut container_bg = if let Some(secondary_container_bg) = secondary_container_bg
{
let container_bg = if let Some(secondary_container_bg) = secondary_container_bg {
secondary_container_bg
} else {
get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2])
};
container_bg.alpha = (container_alpha + if is_dark { 0.6 } else { 0.5 }).min(1.0);
let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
let base_index = color_index(container_bg, step_array.len());
@ -1386,6 +1477,67 @@ impl ThemeBuilder {
frosted_system_interface,
frosted_panel,
frosted_applets,
transparent_background: Container::new(
Component::component(
transparent_bg_component,
accent,
on_transparent_bg_component,
Srgba::new(0., 0., 0., 0.0),
Srgba::new(0., 0., 0., 0.0),
is_high_contrast,
control_steps_array[8],
),
transparent_bg,
get_text(
bg_index,
&transparent_bg_steps_array,
&control_steps_array[8],
text_steps_array.as_deref(),
),
get_small_widget_color(bg_index, 5, &neutral_steps, &control_steps_array[6]),
is_high_contrast,
),
transparent_primary,
transparent_secondary: {
let mut container_bg = if let Some(secondary_container_bg) = secondary_container_bg
{
secondary_container_bg
} else {
get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2])
};
container_bg.alpha = (container_alpha + if is_dark { 0.6 } else { 0.5 }).min(1.0);
let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
let base_index = color_index(container_bg, step_array.len());
let secondary_component =
get_surface_color(base_index, 3, &step_array, is_dark, &control_steps_array[4]);
Container::new(
Component::component(
secondary_component,
accent,
get_text(
color_index(secondary_component, step_array.len()),
&step_array,
&control_steps_array[8],
text_steps_array.as_deref(),
),
Srgba::new(0., 0., 0., 0.0),
Srgba::new(0., 0., 0., 0.0),
is_high_contrast,
control_steps_array[8],
),
container_bg,
get_text(
base_index,
&step_array,
&control_steps_array[8],
text_steps_array.as_deref(),
),
get_small_widget_color(base_index, 5, &neutral_steps, &control_steps_array[6]),
is_high_contrast,
)
},
};
theme.spacing = spacing;
theme.corner_radii = corner_radii;
@ -1407,6 +1559,7 @@ impl ThemeBuilder {
/// Actual blur radius is decided by cosmic-comp,
/// but this represents the strength of the blur effect.
#[allow(missing_docs)]
#[repr(u8)]
#[derive(Default, Copy, Clone, Debug, Serialize, Deserialize, PartialEq)]
pub enum BlurStrength {

99
src/app/cosmic.rs
View file

@ -784,10 +784,11 @@ impl<T: Application> Cosmic<T> {
crate::core::AppType::Applet => t.frosted_applets,
}
};
if !new_blur {
theme = theme.into_opaque();
}
THEME.lock().unwrap().set_theme(theme.theme_type);
theme.transparent = new_blur;
let mut guard = THEME.lock().unwrap();
guard.set_theme(theme.theme_type);
guard.transparent = new_blur;
drop(guard);
let core = self.app.core();
if core.auto_blur {
@ -810,12 +811,23 @@ impl<T: Application> Cosmic<T> {
}
}
Action::SystemThemeChange(keys, theme) => {
Action::SystemThemeChange(keys, mut theme) => {
let cur_is_dark = THEME.lock().unwrap().theme_type.is_dark();
// Ignore updates if the current theme mode does not match.
if cur_is_dark != theme.cosmic().is_dark {
return iced::Task::none();
}
// update transparent
let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
let t = theme.cosmic();
match self.app.core().app_type() {
crate::core::AppType::Window => t.frosted_windows,
crate::core::AppType::System => t.frosted_system_interface,
crate::core::AppType::Applet => t.frosted_applets,
}
};
theme.transparent = new_blur;
let cmd = self.app.system_theme_update(&keys, theme.cosmic());
// Record the last-known system theme in event that the current theme is custom.
self.app.core_mut().system_theme = theme.clone();
@ -839,11 +851,12 @@ impl<T: Application> Cosmic<T> {
} else {
theme
};
new_theme.transparent = new_blur;
new_theme.theme_type.prefer_dark(prefer_dark);
// TODO adjust theme container alphas to remove transparency?
// if auto-blur is disabled & theme is frosted, should we make container colors in theme opaque?
cosmic_theme.set_theme(new_theme.theme_type);
cosmic_theme.transparent = new_blur;
#[cfg(all(feature = "wayland", target_os = "linux"))]
if self.app.core().sync_window_border_radii_to_theme() {
use iced_runtime::platform_specific::wayland::CornerRadius;
@ -954,6 +967,7 @@ impl<T: Application> Cosmic<T> {
} {
return iced::Task::none();
}
let mut cmds = vec![self.app.system_theme_mode_update(&keys, &mode)];
let core = self.app.core_mut();
@ -982,6 +996,15 @@ impl<T: Application> Cosmic<T> {
} else {
new_theme
};
let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
let t = new_theme.cosmic();
match core.app_type() {
crate::core::AppType::Window => t.frosted_windows,
crate::core::AppType::System => t.frosted_system_interface,
crate::core::AppType::Applet => t.frosted_applets,
}
};
new_theme.transparent = new_blur;
core.system_theme = new_theme.clone();
{
@ -989,20 +1012,8 @@ impl<T: Application> Cosmic<T> {
// Only apply update if the theme is set to load a system theme
if let ThemeType::System { .. } = cosmic_theme.theme_type {
let new_blur =
WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
let t = new_theme.cosmic();
match self.app.core().app_type() {
crate::core::AppType::Window => t.frosted_windows,
crate::core::AppType::System => t.frosted_system_interface,
crate::core::AppType::Applet => t.frosted_applets,
}
};
if !new_blur {
new_theme = new_theme.into_opaque();
}
cosmic_theme.set_theme(new_theme.theme_type);
cosmic_theme.transparent = new_blur;
#[cfg(all(feature = "wayland", target_os = "linux"))]
if self.app.core().sync_window_border_radii_to_theme() {
use iced_runtime::platform_specific::wayland::CornerRadius;
@ -1087,7 +1098,7 @@ impl<T: Application> Cosmic<T> {
let core = self.app.core();
if core.auto_blur {
let blur = if new_blur {
let blur = if cosmic_theme.transparent {
iced::window::enable_blur
} else {
iced::window::disable_blur
@ -1206,6 +1217,18 @@ impl<T: Application> Cosmic<T> {
} else {
crate::theme::system_light()
};
if let ThemeType::System { .. } = new_theme.theme_type {
let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland)
&& {
let t = new_theme.cosmic();
match core.app_type() {
crate::core::AppType::Window => t.frosted_windows,
crate::core::AppType::System => t.frosted_system_interface,
crate::core::AppType::Applet => t.frosted_applets,
}
};
new_theme.transparent = new_blur;
}
core.system_theme = new_theme.clone();
{
let mut cosmic_theme = THEME.lock().unwrap();
@ -1215,21 +1238,7 @@ impl<T: Application> Cosmic<T> {
let mut cmds = Vec::with_capacity(1 + self.tracked_windows.len());
if core.auto_blur {
let new_blur =
WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
let t = new_theme.cosmic();
match self.app.core().app_type() {
crate::core::AppType::Window => t.frosted_windows,
crate::core::AppType::System => {
t.frosted_system_interface
}
crate::core::AppType::Applet => t.frosted_applets,
}
};
if !new_blur {
new_theme = new_theme.into_opaque();
}
let blur = if new_blur {
let blur = if cosmic_theme.transparent {
iced::window::enable_blur
} else {
iced::window::disable_blur
@ -1370,9 +1379,7 @@ impl<T: Application> Cosmic<T> {
crate::core::AppType::Applet => t.frosted_applets,
}
};
if !new_blur {
*theme = theme.into_opaque();
}
theme.transparent = new_blur;
let blur_cmd = if core.auto_blur {
let blur = if new_blur {
iced::window::enable_blur
@ -1412,6 +1419,7 @@ impl<T: Application> Cosmic<T> {
return iced_runtime::window::run_with_handle(id, init_windowing_system);
}
Action::WindowingSystemInitialized => {
// TODO do this after blur event confirms support instead of for all wayland windows
let core = self.app.core();
let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
let t = core.system_theme.cosmic();
@ -1423,17 +1431,8 @@ impl<T: Application> Cosmic<T> {
};
let mut t = THEME.lock().unwrap();
if let ThemeType::System { prefer_dark, theme } = &t.theme_type
&& new_blur
{
let mut reloaded = if theme.is_dark {
crate::theme::system_dark()
} else {
crate::theme::system_light()
};
reloaded.theme_type.prefer_dark(*prefer_dark);
*t = reloaded;
}
t.transparent = matches!(&t.theme_type, ThemeType::System { .. }) && new_blur;
if core.auto_blur {
let blur = if new_blur {
iced::window::enable_blur

4
src/app/mod.rs
View file

@ -820,7 +820,7 @@ impl<App: Application> ApplicationExt for App {
let cosmic = theme.cosmic();
container::Style {
background: Some(iced::Background::Color(
cosmic.background.base.into(),
cosmic.background(theme.transparent).base.into(),
)),
border: iced::Border {
radius: [
@ -849,7 +849,7 @@ impl<App: Application> ApplicationExt for App {
container::Style {
background: if content_container {
Some(iced::Background::Color(
theme.cosmic().background.base.into(),
theme.cosmic().background(theme.transparent).base.into(),
))
} else {
None

10
src/applet/mod.rs
View file

@ -227,7 +227,7 @@ impl Context {
let icon = widget::icon(icon)
.class(if symbolic {
theme::Svg::Custom(Rc::new(|theme| iced_widget::svg::Style {
color: Some(theme.cosmic().background.on.into()),
color: Some(theme.cosmic().background(theme.transparent).on.into()),
}))
} else {
theme::Svg::default()
@ -378,18 +378,18 @@ impl Context {
Container::<Message, _, Renderer>::new(content).style(|theme| {
let cosmic = theme.cosmic();
let corners = cosmic.corner_radii;
let mut bg = cosmic.background.base;
let mut bg = cosmic.background(theme.transparent).base;
bg.alpha = (bg.alpha + if cosmic.is_dark { 0.6 } else { 0.5 }).min(1.);
iced_widget::container::Style {
text_color: Some(cosmic.background.on.into()),
text_color: Some(cosmic.background(theme.transparent).on.into()),
background: Some(Color::from(bg).into()),
border: iced::Border {
radius: corners.radius_m.into(),
width: 1.0,
color: cosmic.background.divider.into(),
color: cosmic.background(theme.transparent).divider.into(),
},
shadow: Shadow::default(),
icon_color: Some(cosmic.background.on.into()),
icon_color: Some(cosmic.background(theme.transparent).on.into()),
snap: true,
}
}),

31
src/theme/mod.rs
View file

@ -50,6 +50,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.
@ -213,6 +214,7 @@ impl ThemeType {
pub struct Theme {
pub theme_type: ThemeType,
pub layer: cosmic_theme::Layer,
pub transparent: bool,
}
impl Theme {
@ -283,9 +285,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),
}
}
@ -294,29 +296,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 {

21
src/theme/style/button.rs
View file

@ -128,20 +128,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());
@ -150,11 +150,12 @@ pub fn appearance(
}
Button::ListItem => {
corner_radii = &[0.0; 4];
let (background, text, icon) = color(&cosmic.background.component);
let (background, text, icon) = color(&cosmic.background(theme.transparent).component);
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 {
@ -164,7 +165,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;
@ -280,6 +281,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())
}
}

18
src/theme/style/dropdown.rs
View file

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

118
src/theme/style/iced.rs
View file

@ -228,11 +228,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 },
@ -413,11 +413,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()
@ -428,11 +430,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()
@ -443,11 +447,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()
@ -497,9 +503,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],
@ -537,12 +545,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)
};
@ -552,7 +561,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: [
@ -578,23 +589,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,
@ -626,10 +637,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(),
@ -639,10 +654,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(),
@ -652,10 +671,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(),
@ -668,11 +691,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(),
},
@ -814,13 +839,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(),
}
}
@ -858,7 +885,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,
@ -1054,7 +1081,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(),
@ -1527,7 +1557,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 {

2
src/theme/style/menu_bar.rs
View file

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

22
src/widget/card/style.rs
View file

@ -31,16 +31,26 @@ impl crate::widget::card::style::Catalog for crate::Theme {
match self.layer {
cosmic_theme::Layer::Background => crate::widget::card::style::Style {
card_1: Background::Color(cosmic.background.component.hover.into()),
card_2: Background::Color(cosmic.background.component.pressed.into()),
card_1: Background::Color(
cosmic.background(self.transparent).component.hover.into(),
),
card_2: Background::Color(
cosmic.background(self.transparent).component.pressed.into(),
),
},
cosmic_theme::Layer::Primary => crate::widget::card::style::Style {
card_1: Background::Color(cosmic.primary.component.hover.into()),
card_2: Background::Color(cosmic.primary.component.pressed.into()),
card_1: Background::Color(cosmic.primary(self.transparent).component.hover.into()),
card_2: Background::Color(
cosmic.primary(self.transparent).component.pressed.into(),
),
},
cosmic_theme::Layer::Secondary => crate::widget::card::style::Style {
card_1: Background::Color(cosmic.secondary.component.hover.into()),
card_2: Background::Color(cosmic.secondary.component.pressed.into()),
card_1: Background::Color(
cosmic.secondary(self.transparent).component.hover.into(),
),
card_2: Background::Color(
cosmic.secondary(self.transparent).component.pressed.into(),
),
},
}
}

2
src/widget/menu/menu_tree.rs
View file

@ -230,7 +230,7 @@ pub fn menu_items<
}
fn key_style(theme: &crate::Theme) -> TextStyle {
let mut color = theme.cosmic().background.component.on;
let mut color = theme.cosmic().background(theme.transparent).component.on;
color.alpha *= 0.75;
TextStyle {
color: Some(color.into()),

4
src/widget/nav_bar.rs
View file

@ -173,7 +173,9 @@ pub fn nav_bar_style(theme: &Theme) -> iced_widget::container::Style {
iced_widget::container::Style {
icon_color: Some(cosmic.on_bg_color().into()),
text_color: Some(cosmic.on_bg_color().into()),
background: Some(Background::Color(cosmic.primary.base.into())),
background: Some(Background::Color(
cosmic.primary(theme.transparent).base.into(),
)),
border: Border {
width: 0.0,
color: Color::TRANSPARENT,