feat(blur): better align with designs and remove transparency from theme when not on wayland
This commit is contained in:
parent
d04aa41d6a
commit
9d51e8fda4
8 changed files with 223 additions and 42 deletions
|
|
@ -10,7 +10,7 @@ use palette::{
|
|||
IntoColor, Oklcha, Srgb, Srgba, WithAlpha, color_difference::Wcag21RelativeContrast, rgb::Rgb,
|
||||
};
|
||||
use serde::{Deserialize, Serialize};
|
||||
use std::num::NonZeroUsize;
|
||||
use std::{default, num::NonZeroUsize};
|
||||
|
||||
/// ID for the current dark `ThemeBuilder` config
|
||||
pub const DARK_THEME_BUILDER_ID: &str = "com.system76.CosmicTheme.Dark.Builder";
|
||||
|
|
@ -90,8 +90,15 @@ pub struct Theme {
|
|||
/// cosmic-comp custom window hint color
|
||||
pub window_hint: Option<Srgb>,
|
||||
/// enables blurred transparency
|
||||
/// If None, frosted effect is disabled.
|
||||
pub frosted: Option<BlurStrength>,
|
||||
pub frosted: BlurStrength,
|
||||
/// frosted windows
|
||||
pub frosted_windows: bool,
|
||||
/// frosted system interface
|
||||
pub frosted_system_interface: bool,
|
||||
/// frosted panel
|
||||
pub frosted_panel: bool,
|
||||
/// frosted applet popups
|
||||
pub frosted_applets: bool,
|
||||
/// shade color for dialogs
|
||||
#[serde(with = "color_serde")]
|
||||
#[cosmic_config_entry(with = ColorRepr)]
|
||||
|
|
@ -815,7 +822,7 @@ pub struct ThemeBuilder {
|
|||
#[cosmic_config_entry(with = ColorReprOption)]
|
||||
pub destructive: Option<Srgb>,
|
||||
/// enabled blurred transparency
|
||||
pub frosted: Option<BlurStrength>,
|
||||
pub frosted: BlurStrength,
|
||||
/// cosmic-comp window gaps size (outer, inner)
|
||||
pub gaps: (u32, u32),
|
||||
/// cosmic-comp active hint window outline width
|
||||
|
|
@ -824,6 +831,14 @@ pub struct ThemeBuilder {
|
|||
#[serde(with = "color_serde_option")]
|
||||
#[cosmic_config_entry(with = ColorReprOption)]
|
||||
pub window_hint: Option<Srgb>,
|
||||
/// frosted windows
|
||||
pub frosted_windows: bool,
|
||||
/// frosted system interface
|
||||
pub frosted_system_interface: bool,
|
||||
/// frosted panel
|
||||
pub frosted_panel: bool,
|
||||
/// frosted applet popups
|
||||
pub frosted_applets: bool,
|
||||
}
|
||||
|
||||
impl Default for ThemeBuilder {
|
||||
|
|
@ -841,11 +856,15 @@ impl Default for ThemeBuilder {
|
|||
success: Default::default(),
|
||||
warning: Default::default(),
|
||||
destructive: Default::default(),
|
||||
frosted: None,
|
||||
frosted: BlurStrength::default(),
|
||||
// cosmic-comp theme settings
|
||||
gaps: (0, 8),
|
||||
active_hint: 3,
|
||||
window_hint: None,
|
||||
frosted_windows: false,
|
||||
frosted_system_interface: false,
|
||||
frosted_panel: false,
|
||||
frosted_applets: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -988,9 +1007,13 @@ impl ThemeBuilder {
|
|||
active_hint,
|
||||
window_hint,
|
||||
frosted,
|
||||
frosted_windows,
|
||||
frosted_system_interface,
|
||||
frosted_panel,
|
||||
frosted_applets,
|
||||
} = self;
|
||||
|
||||
let container_alpha = frosted.map_or(1.0, |f| f.alpha());
|
||||
let container_alpha = frosted.alpha();
|
||||
|
||||
let is_dark = palette.is_dark();
|
||||
let is_high_contrast = palette.is_high_contrast();
|
||||
|
|
@ -1080,7 +1103,7 @@ impl ThemeBuilder {
|
|||
} else {
|
||||
get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1])
|
||||
};
|
||||
container_bg.alpha = container_alpha;
|
||||
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());
|
||||
|
|
@ -1203,7 +1226,7 @@ impl ThemeBuilder {
|
|||
} else {
|
||||
get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2])
|
||||
};
|
||||
container_bg.alpha = container_alpha;
|
||||
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());
|
||||
|
|
@ -1359,6 +1382,10 @@ impl ThemeBuilder {
|
|||
accent_text,
|
||||
control_tint: neutral_tint,
|
||||
text_tint,
|
||||
frosted_windows,
|
||||
frosted_system_interface,
|
||||
frosted_panel,
|
||||
frosted_applets,
|
||||
};
|
||||
theme.spacing = spacing;
|
||||
theme.corner_radii = corner_radii;
|
||||
|
|
@ -1378,15 +1405,18 @@ impl ThemeBuilder {
|
|||
}
|
||||
}
|
||||
|
||||
/// Actual blur radius is decided by cosmic-comp,
|
||||
/// but this represents the strength of the blur effect.
|
||||
#[repr(u8)]
|
||||
#[derive(Copy, Clone, Debug, Serialize, Deserialize, PartialEq)]
|
||||
#[derive(Default, Copy, Clone, Debug, Serialize, Deserialize, PartialEq)]
|
||||
pub enum BlurStrength {
|
||||
ExtremelyLow = 1,
|
||||
ExtremelyLow,
|
||||
ExtremelyLow2,
|
||||
VeryLow,
|
||||
VeryLow2,
|
||||
Low,
|
||||
Low2,
|
||||
#[default]
|
||||
Medium,
|
||||
Medium2,
|
||||
High,
|
||||
|
|
@ -1402,7 +1432,7 @@ impl BlurStrength {
|
|||
/// Lower alpha values correspond to stronger blur effects, and higher alpha values correspond to weaker blur effects. The mapping is as follows:
|
||||
pub fn alpha(&self) -> f32 {
|
||||
match self {
|
||||
Self::ExtremelyLow => 0.95,
|
||||
Self::ExtremelyLow => 0.90,
|
||||
Self::ExtremelyLow2 => 0.85,
|
||||
Self::VeryLow => 0.8,
|
||||
Self::VeryLow2 => 0.75,
|
||||
|
|
@ -1414,8 +1444,8 @@ impl BlurStrength {
|
|||
Self::High2 => 0.45,
|
||||
Self::VeryHigh => 0.4,
|
||||
Self::VeryHigh2 => 0.35,
|
||||
Self::ExtremelyHigh => 0.2,
|
||||
Self::ExtremelyHigh2 => 0.05,
|
||||
Self::ExtremelyHigh => 0.25,
|
||||
Self::ExtremelyHigh2 => 0.2,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1425,20 +1455,20 @@ impl TryFrom<u8> for BlurStrength {
|
|||
|
||||
fn try_from(value: u8) -> Result<Self, Self::Error> {
|
||||
match value {
|
||||
1 => Ok(BlurStrength::ExtremelyLow),
|
||||
2 => Ok(BlurStrength::ExtremelyLow2),
|
||||
3 => Ok(BlurStrength::VeryLow),
|
||||
4 => Ok(BlurStrength::VeryLow2),
|
||||
5 => Ok(BlurStrength::Low),
|
||||
6 => Ok(BlurStrength::Low2),
|
||||
7 => Ok(BlurStrength::Medium),
|
||||
8 => Ok(BlurStrength::Medium2),
|
||||
9 => Ok(BlurStrength::High),
|
||||
10 => Ok(BlurStrength::High2),
|
||||
11 => Ok(BlurStrength::VeryHigh),
|
||||
12 => Ok(BlurStrength::VeryHigh2),
|
||||
13 => Ok(BlurStrength::ExtremelyHigh),
|
||||
14 => Ok(BlurStrength::ExtremelyHigh2),
|
||||
0 => Ok(BlurStrength::ExtremelyLow),
|
||||
1 => Ok(BlurStrength::ExtremelyLow2),
|
||||
2 => Ok(BlurStrength::VeryLow),
|
||||
3 => Ok(BlurStrength::VeryLow2),
|
||||
4 => Ok(BlurStrength::Low),
|
||||
5 => Ok(BlurStrength::Low2),
|
||||
6 => Ok(BlurStrength::Medium),
|
||||
7 => Ok(BlurStrength::Medium2),
|
||||
8 => Ok(BlurStrength::High),
|
||||
9 => Ok(BlurStrength::High2),
|
||||
10 => Ok(BlurStrength::VeryHigh),
|
||||
11 => Ok(BlurStrength::VeryHigh2),
|
||||
12 => Ok(BlurStrength::ExtremelyHigh),
|
||||
13 => Ok(BlurStrength::ExtremelyHigh2),
|
||||
_ => Err(()),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
iced
2
iced
|
|
@ -1 +1 @@
|
|||
Subproject commit 1bf1e33317b8da299ffd9a620e7e0e099c0c3478
|
||||
Subproject commit 13b8d3eab67df7f40d3d9e932a9412f85ff8413c
|
||||
|
|
@ -115,8 +115,8 @@ where
|
|||
(
|
||||
Self::new(model),
|
||||
Task::batch([
|
||||
command,
|
||||
iced_runtime::window::run_with_handle(id, init_windowing_system),
|
||||
command,
|
||||
]),
|
||||
)
|
||||
}
|
||||
|
|
@ -776,7 +776,17 @@ impl<T: Application> Cosmic<T> {
|
|||
}
|
||||
}
|
||||
|
||||
let new_blur = theme.cosmic().frosted.is_some();
|
||||
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,
|
||||
}
|
||||
};
|
||||
if !new_blur {
|
||||
theme = theme.into_opaque();
|
||||
}
|
||||
THEME.lock().unwrap().set_theme(theme.theme_type);
|
||||
|
||||
let core = self.app.core();
|
||||
|
|
@ -979,9 +989,19 @@ 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 {
|
||||
// TODO adjust theme container alphas to remove transparency?
|
||||
// if auto-blur is disabled & theme is frosted, should we make container colors in theme opaque?
|
||||
let new_blur = new_theme.cosmic().frosted.is_some();
|
||||
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);
|
||||
#[cfg(all(feature = "wayland", target_os = "linux"))]
|
||||
if self.app.core().sync_window_border_radii_to_theme() {
|
||||
|
|
@ -1181,7 +1201,7 @@ impl<T: Application> Cosmic<T> {
|
|||
|
||||
if changed {
|
||||
core.theme_sub_counter += 1;
|
||||
let new_theme = if is_dark {
|
||||
let mut new_theme = if is_dark {
|
||||
crate::theme::system_dark()
|
||||
} else {
|
||||
crate::theme::system_light()
|
||||
|
|
@ -1195,7 +1215,21 @@ impl<T: Application> Cosmic<T> {
|
|||
let mut cmds = Vec::with_capacity(1 + self.tracked_windows.len());
|
||||
|
||||
if core.auto_blur {
|
||||
let blur = if new_theme.cosmic().frosted.is_some() {
|
||||
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 {
|
||||
iced::window::enable_blur
|
||||
} else {
|
||||
iced::window::disable_blur
|
||||
|
|
@ -1316,7 +1350,7 @@ impl<T: Application> Cosmic<T> {
|
|||
use iced_runtime::platform_specific::wayland::CornerRadius;
|
||||
use iced_winit::platform_specific::commands::corner_radius::corner_radius;
|
||||
|
||||
let theme = THEME.lock().unwrap();
|
||||
let mut theme = THEME.lock().unwrap();
|
||||
let t = theme.cosmic();
|
||||
let radii = t.radius_s().map(|x| if x < 4.0 { x } else { x + 4.0 });
|
||||
let cur_rad = CornerRadius {
|
||||
|
|
@ -1328,8 +1362,19 @@ impl<T: Application> Cosmic<T> {
|
|||
// TODO do we need per window sharp corners?
|
||||
let rounded = !self.app.core().window.sharp_corners;
|
||||
let core = self.app.core();
|
||||
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,
|
||||
}
|
||||
};
|
||||
if !new_blur {
|
||||
*theme = theme.into_opaque();
|
||||
}
|
||||
let blur_cmd = if core.auto_blur {
|
||||
let blur = if t.frosted.is_some() {
|
||||
let blur = if new_blur {
|
||||
iced::window::enable_blur
|
||||
} else {
|
||||
iced::window::disable_blur
|
||||
|
|
@ -1343,6 +1388,7 @@ impl<T: Application> Cosmic<T> {
|
|||
} else {
|
||||
Task::none()
|
||||
};
|
||||
let t = theme.cosmic();
|
||||
return Task::batch([
|
||||
blur_cmd,
|
||||
corner_radius(
|
||||
|
|
@ -1365,7 +1411,45 @@ impl<T: Application> Cosmic<T> {
|
|||
}
|
||||
return iced_runtime::window::run_with_handle(id, init_windowing_system);
|
||||
}
|
||||
_ => {}
|
||||
Action::WindowingSystemInitialized => {
|
||||
let core = self.app.core();
|
||||
let new_blur = WINDOWING_SYSTEM.get() == Some(&WindowingSystem::Wayland) && {
|
||||
let t = core.system_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,
|
||||
}
|
||||
};
|
||||
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;
|
||||
}
|
||||
if core.auto_blur {
|
||||
let blur = if new_blur {
|
||||
iced::window::enable_blur
|
||||
} else {
|
||||
iced::window::disable_blur
|
||||
};
|
||||
let mut cmds = Vec::with_capacity(1 + self.tracked_windows.len());
|
||||
if let Some(main_id) = core.main_window_id() {
|
||||
cmds.push(blur(main_id));
|
||||
}
|
||||
for id in &self.tracked_windows {
|
||||
cmds.push(blur(*id));
|
||||
}
|
||||
return Task::batch(cmds);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iced::Task::none()
|
||||
|
|
|
|||
|
|
@ -378,9 +378,11 @@ impl Context {
|
|||
Container::<Message, _, Renderer>::new(content).style(|theme| {
|
||||
let cosmic = theme.cosmic();
|
||||
let corners = cosmic.corner_radii;
|
||||
let mut bg = cosmic.background.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()),
|
||||
background: Some(Color::from(cosmic.background.base).into()),
|
||||
background: Some(Color::from(bg).into()),
|
||||
border: iced::Border {
|
||||
radius: corners.radius_m.into(),
|
||||
width: 1.0,
|
||||
|
|
@ -565,6 +567,7 @@ pub fn run<App: Application>(flags: App::Flags) -> iced::Result {
|
|||
core.window.show_maximize = false;
|
||||
core.window.show_minimize = false;
|
||||
core.window.use_template = false;
|
||||
core.app_type = crate::core::AppType::Applet;
|
||||
|
||||
window_settings.decorations = false;
|
||||
window_settings.exit_on_close_request = true;
|
||||
|
|
|
|||
25
src/core.rs
25
src/core.rs
|
|
@ -103,6 +103,18 @@ pub struct Core {
|
|||
pub(crate) sync_window_border_radii_to_theme: bool,
|
||||
|
||||
pub(crate) auto_blur: bool,
|
||||
|
||||
pub(crate) app_type: AppType,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
|
||||
pub enum AppType {
|
||||
/// A regular application
|
||||
Window,
|
||||
/// A system application
|
||||
System,
|
||||
/// An applet
|
||||
Applet,
|
||||
}
|
||||
|
||||
impl Default for Core {
|
||||
|
|
@ -164,6 +176,7 @@ impl Default for Core {
|
|||
#[cfg(all(feature = "wayland", target_os = "linux"))]
|
||||
sync_window_border_radii_to_theme: true,
|
||||
auto_blur: true,
|
||||
app_type: AppType::Window,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -509,4 +522,16 @@ impl Core {
|
|||
pub fn set_auto_blur(&mut self, auto_blur: bool) {
|
||||
self.auto_blur = auto_blur;
|
||||
}
|
||||
|
||||
pub fn auto_blur(&self) -> bool {
|
||||
self.auto_blur
|
||||
}
|
||||
|
||||
pub fn set_app_type(&mut self, app_type: AppType) {
|
||||
self.app_type = app_type;
|
||||
}
|
||||
|
||||
pub fn app_type(&self) -> AppType {
|
||||
self.app_type
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -294,6 +294,29 @@ 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 {
|
||||
|
|
|
|||
|
|
@ -478,7 +478,21 @@ impl iced_container::Catalog for Theme {
|
|||
let window_corner_radius = cosmic.radius_s().map(|x| if x < 4.0 { x } else { x + 4.0 });
|
||||
|
||||
match class {
|
||||
Container::Transparent => iced_container::Style::default(),
|
||||
Container::Transparent => {
|
||||
let component = &self.current_container().component;
|
||||
|
||||
iced_container::Style {
|
||||
icon_color: Some(component.on.into()),
|
||||
text_color: Some(component.on.into()),
|
||||
background: None,
|
||||
border: Border {
|
||||
radius: 0.into(),
|
||||
..Default::default()
|
||||
},
|
||||
shadow: Shadow::default(),
|
||||
snap: true,
|
||||
}
|
||||
}
|
||||
|
||||
Container::Custom(f) => f(self),
|
||||
|
||||
|
|
@ -566,7 +580,7 @@ impl iced_container::Catalog for Theme {
|
|||
Container::ContextDrawer => {
|
||||
let mut a = Container::primary(cosmic);
|
||||
if let Some(Background::Color(ref mut color)) = a.background {
|
||||
color.a = 1.;
|
||||
color.a = (color.a + if cosmic.is_dark { 0.60 } else { 0.5 }).min(1.);
|
||||
}
|
||||
|
||||
if cosmic.is_high_contrast {
|
||||
|
|
|
|||
|
|
@ -65,10 +65,12 @@ impl StyleSheet for Theme {
|
|||
fn appearance(&self, style: &Self::Style) -> Appearance {
|
||||
let cosmic = self.cosmic();
|
||||
let component = &cosmic.background.component;
|
||||
let mut bg = component.base;
|
||||
bg.alpha = (bg.alpha + if cosmic.is_dark { 0.6 } else { 0.5 }).min(1.);
|
||||
|
||||
match style {
|
||||
MenuBarStyle::Default => Appearance {
|
||||
background: component.base.into(),
|
||||
background: bg.into(),
|
||||
border_width: 1.0,
|
||||
bar_border_radius: cosmic.corner_radii.radius_xl,
|
||||
menu_border_radius: cosmic.corner_radii.radius_s.map(|x| x + 2.0),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue