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

chore: use with_alpha() where applicable

Browse source
This commit is contained in:
Vukašin Vojinović 2025-06-20 01:56:04 +02:00 • committed by Ashley Wulber
parent 7748e59ae6
commit ec7a531539
6 changed files with 57 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

20
cosmic-theme/src/model/derivation.rs
View file

@ -1,4 +1,4 @@
use palette::Srgba; use palette::{Srgba, WithAlpha};
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use crate::composite::over; use crate::composite::over;
@ -27,9 +27,7 @@ impl Container {
mut small_widget: Srgba, mut small_widget: Srgba,
is_high_contrast: bool, is_high_contrast: bool,
) -> Self { ) -> Self {
let mut divider_c = on; let divider_c = on.with_alpha(if is_high_contrast { 0.5 } else { 0.2 });
divider_c.alpha = if is_high_contrast { 0.5 } else { 0.2 };
small_widget.alpha = 0.25; small_widget.alpha = 0.25;
Self { Self {
@ -115,13 +113,11 @@ impl Component {
hovered: Srgba, hovered: Srgba,
pressed: Srgba, pressed: Srgba,
) -> Self { ) -> Self {
let base: Srgba = base;
let mut base_50 = base; let mut base_50 = base;
base_50.alpha *= 0.5; base_50.alpha *= 0.5;
let on_20 = neutral; let on_20 = neutral;
let mut on_50: Srgba = on_20; let on_50 = on_20.with_alpha(0.5);
on_50.alpha = 0.5;
Component { Component {
base, base,
@ -151,8 +147,7 @@ impl Component {
let mut component = Component::colored_component(base, overlay, accent, hovered, pressed); let mut component = Component::colored_component(base, overlay, accent, hovered, pressed);
component.on = on_button; component.on = on_button;
let mut on_disabled = on_button; let on_disabled = on_button.with_alpha(0.5);
on_disabled.alpha = 0.5;
component.on_disabled = on_disabled; component.on_disabled = on_disabled;
component component
@ -172,11 +167,8 @@ impl Component {
let mut base_50 = base; let mut base_50 = base;
base_50.alpha *= 0.5; base_50.alpha *= 0.5;
let mut on_20 = on_component; let on_20 = on_component.with_alpha(0.2);
let mut on_50 = on_20; let on_50 = on_20.with_alpha(0.5);
on_20.alpha = 0.2;
on_50.alpha = 0.5;
let mut disabled_border = border; let mut disabled_border = border;
disabled_border.alpha *= 0.5; disabled_border.alpha *= 0.5;

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

@ -1,11 +1,13 @@
use crate::{ use crate::{
composite::over, composite::over,
steps::{color_index, get_index, get_small_widget_color, get_surface_color, get_text, steps}, steps::{color_index, get_small_widget_color, get_surface_color, get_text, steps},
Component, Container, CornerRadii, CosmicPalette, CosmicPaletteInner, Spacing, ThemeMode, Component, Container, CornerRadii, CosmicPalette, CosmicPaletteInner, Spacing, ThemeMode,
DARK_PALETTE, LIGHT_PALETTE, NAME, DARK_PALETTE, LIGHT_PALETTE, NAME,
}; };
use cosmic_config::{Config, CosmicConfigEntry}; use cosmic_config::{Config, CosmicConfigEntry};
use palette::{color_difference::Wcag21RelativeContrast, rgb::Rgb, IntoColor, Oklcha, Srgb, Srgba}; use palette::{
color_difference::Wcag21RelativeContrast, rgb::Rgb, IntoColor, Oklcha, Srgb, Srgba, WithAlpha,
};
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use std::num::NonZeroUsize; use std::num::NonZeroUsize;
@ -309,9 +311,7 @@ impl Theme {
#[inline] #[inline]
/// get @small_widget_divider /// get @small_widget_divider
pub fn small_widget_divider(&self) -> Srgba { pub fn small_widget_divider(&self) -> Srgba {
let mut neutral_9 = self.palette.neutral_9; self.palette.neutral_9.with_alpha(0.2)
neutral_9.alpha = 0.2;
neutral_9
} }
// Containers // Containers
@ -1041,16 +1041,12 @@ impl ThemeBuilder {
component_pressed_overlay.alpha = 0.2; component_pressed_overlay.alpha = 0.2;
// Standard button background is neutral 7 with 25% opacity // Standard button background is neutral 7 with 25% opacity
let button_bg = { let button_bg = control_steps_array[7].with_alpha(0.25);
let mut color = control_steps_array[7];
color.alpha = 0.25;
color
};
let (mut button_hovered_overlay, mut button_pressed_overlay) = let (button_hovered_overlay, button_pressed_overlay) = (
(control_steps_array[5], control_steps_array[2]); control_steps_array[5].with_alpha(0.2),
button_hovered_overlay.alpha = 0.2; control_steps_array[2].with_alpha(0.5),
button_pressed_overlay.alpha = 0.5; );
let bg_component = get_surface_color(bg_index, 8, &step_array, is_dark, &p_ref.neutral_2); let bg_component = get_surface_color(bg_index, 8, &step_array, is_dark, &p_ref.neutral_2);
let on_bg_component = get_text( let on_bg_component = get_text(
@ -1288,10 +1284,7 @@ impl ThemeBuilder {
control_steps_array[8], control_steps_array[8],
); );
let mut on_50 = component.on; component.on_disabled = over(component.on.with_alpha(0.5), component.base);
on_50.alpha = 0.5;
component.on_disabled = over(on_50, component.base);
component component
}, },
success: Component::colored_component( success: Component::colored_component(

5
cosmic-theme/src/output/gtk4_output.rs
View file

@ -1,5 +1,5 @@
use crate::{composite::over, steps::steps, Component, Theme}; use crate::{composite::over, steps::steps, Component, Theme};
use palette::{rgb::Rgba, Darken, IntoColor, Lighten, Srgba}; use palette::{rgb::Rgba, Darken, IntoColor, Lighten, Srgba, WithAlpha};
use std::{ use std::{
fs::{self, File}, fs::{self, File},
io::{self, Write}, io::{self, Write},
@ -75,8 +75,7 @@ impl Theme {
Rgba::new(0.0, 0.0, 0.0, 0.08) Rgba::new(0.0, 0.0, 0.0, 0.08)
}); });
let mut inverted_bg_divider = background.base; let inverted_bg_divider = background.base.with_alpha(0.5);
inverted_bg_divider.alpha = 0.5;
let scrollbar_outline = to_rgba(inverted_bg_divider); let scrollbar_outline = to_rgba(inverted_bg_divider);
let mut css = format! {r#"/* GENERATED BY COSMIC */ let mut css = format! {r#"/* GENERATED BY COSMIC */

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

@ -16,6 +16,7 @@ use iced::{
}; };
use iced_core::{Background, Border, Color, Shadow, Vector}; use iced_core::{Background, Border, Color, Shadow, Vector};
use iced_widget::{pane_grid::Highlight, text_editor, text_input}; use iced_widget::{pane_grid::Highlight, text_editor, text_input};
use palette::WithAlpha;
use std::rc::Rc; use std::rc::Rc;
pub mod application { pub mod application {
@ -720,9 +721,8 @@ impl slider::Catalog for Theme {
border_radius: cosmic.corner_radii.radius_m.into(), border_radius: cosmic.corner_radii.radius_m.into(),
}; };
appearance.handle.border_width = 3.0; appearance.handle.border_width = 3.0;
let mut border_color = self.cosmic().palette.neutral_10; appearance.handle.border_color =
border_color.alpha = 0.1; self.cosmic().palette.neutral_10.with_alpha(0.1).into();
appearance.handle.border_color = border_color.into();
appearance appearance
} }
Slider::Custom { hovered, .. } => hovered(self), Slider::Custom { hovered, .. } => hovered(self),
@ -736,15 +736,12 @@ impl slider::Catalog for Theme {
border_radius: cosmic.corner_radii.radius_m.into(), border_radius: cosmic.corner_radii.radius_m.into(),
}; };
appearance.handle.border_width = 3.0; appearance.handle.border_width = 3.0;
let mut border_color = self.cosmic().palette.neutral_10; appearance.handle.border_color =
border_color.alpha = 0.1; self.cosmic().palette.neutral_10.with_alpha(0.1).into();
appearance.handle.border_color = border_color.into();
appearance appearance
}; };
let mut border_color = self.cosmic().palette.neutral_10; style.handle.border_color =
border_color.alpha = 0.2; self.cosmic().palette.neutral_10.with_alpha(0.2).into();
style.handle.border_color = border_color.into();
style style
} }
Slider::Custom { dragging, .. } => dragging(self), Slider::Custom { dragging, .. } => dragging(self),
@ -824,8 +821,6 @@ impl radio::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>, status: radio::Status) -> radio::Style { fn style(&self, class: &Self::Class<'_>, status: radio::Status) -> radio::Style {
let theme = self.cosmic(); let theme = self.cosmic();
let mut neutral_10 = theme.palette.neutral_10;
neutral_10.alpha = 0.1;
match status { match status {
radio::Status::Active { is_selected } => radio::Style { radio::Status::Active { is_selected } => radio::Style {
@ -850,7 +845,7 @@ impl radio::Catalog for Theme {
Color::from(theme.accent.base).into() Color::from(theme.accent.base).into()
} else { } else {
// TODO: this seems to be defined weirdly in FIGMA // TODO: this seems to be defined weirdly in FIGMA
Color::from(neutral_10).into() Color::from(theme.palette.neutral_10.with_alpha(0.1)).into()
}, },
dot_color: theme.accent.on.into(), dot_color: theme.accent.on.into(),
border_width: 1.0, border_width: 1.0,
@ -877,8 +872,7 @@ impl toggler::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>, status: toggler::Status) -> toggler::Style { fn style(&self, class: &Self::Class<'_>, status: toggler::Status) -> toggler::Style {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
const HANDLE_MARGIN: f32 = 2.0; const HANDLE_MARGIN: f32 = 2.0;
let mut neutral_10 = cosmic.palette.neutral_10; let neutral_10 = cosmic.palette.neutral_10.with_alpha(0.1);
neutral_10.alpha = 0.1;
let mut active = toggler::Style { let mut active = toggler::Style {
background: if matches!(status, toggler::Status::Active { is_toggled: true }) { background: if matches!(status, toggler::Status::Active { is_toggled: true }) {
@ -1098,8 +1092,7 @@ impl scrollable::Catalog for Theme {
match status { match status {
scrollable::Status::Active => { scrollable::Status::Active => {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let mut neutral_5 = cosmic.palette.neutral_5; let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
neutral_5.alpha = 0.7;
let mut a = scrollable::Style { let mut a = scrollable::Style {
container: iced_container::transparent(self), container: iced_container::transparent(self),
vertical_rail: scrollable::Rail { vertical_rail: scrollable::Rail {
@ -1134,8 +1127,7 @@ impl scrollable::Catalog for Theme {
}; };
if matches!(class, Scrollable::Permanent) { if matches!(class, Scrollable::Permanent) {
let mut neutral_3 = cosmic.palette.neutral_3; let neutral_3 = cosmic.palette.neutral_3.with_alpha(0.7);
neutral_3.alpha = 0.7;
a.horizontal_rail.background = Some(Background::Color(neutral_3.into())); a.horizontal_rail.background = Some(Background::Color(neutral_3.into()));
a.vertical_rail.background = Some(Background::Color(neutral_3.into())); a.vertical_rail.background = Some(Background::Color(neutral_3.into()));
} }
@ -1145,14 +1137,12 @@ impl scrollable::Catalog for Theme {
// TODO handle vertical / horizontal // TODO handle vertical / horizontal
scrollable::Status::Hovered { .. } | scrollable::Status::Dragged { .. } => { scrollable::Status::Hovered { .. } | scrollable::Status::Dragged { .. } => {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let mut neutral_5 = cosmic.palette.neutral_5; let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
neutral_5.alpha = 0.7;
// TODO hover // TODO hover
// if is_mouse_over_scrollbar { // if is_mouse_over_scrollbar {
// let mut hover_overlay = cosmic.palette.neutral_0; // let hover_overlay = cosmic.palette.neutral_0.with_alpha(0.2);
// hover_overlay.alpha = 0.2;
// neutral_5 = over(hover_overlay, neutral_5); // neutral_5 = over(hover_overlay, neutral_5);
// } // }
let mut a: scrollable::Style = scrollable::Style { let mut a: scrollable::Style = scrollable::Style {
@ -1189,8 +1179,7 @@ impl scrollable::Catalog for Theme {
}; };
if matches!(class, Scrollable::Permanent) { if matches!(class, Scrollable::Permanent) {
let mut neutral_3 = cosmic.palette.neutral_3; let neutral_3 = cosmic.palette.neutral_3.with_alpha(0.7);
neutral_3.alpha = 0.7;
a.horizontal_rail.background = Some(Background::Color(neutral_3.into())); a.horizontal_rail.background = Some(Background::Color(neutral_3.into()));
a.vertical_rail.background = Some(Background::Color(neutral_3.into())); a.vertical_rail.background = Some(Background::Color(neutral_3.into()));
} }
@ -1289,13 +1278,11 @@ impl text_input::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>, status: text_input::Status) -> text_input::Style { fn style(&self, class: &Self::Class<'_>, status: text_input::Status) -> text_input::Style {
let palette = self.cosmic(); let palette = self.cosmic();
let mut bg = palette.palette.neutral_7; let bg = palette.palette.neutral_7.with_alpha(0.25);
bg.alpha = 0.25;
let mut neutral_9 = palette.palette.neutral_9; let neutral_9 = palette.palette.neutral_9;
let value = neutral_9.into(); let value = neutral_9.into();
neutral_9.alpha = 0.7; let placeholder = neutral_9.with_alpha(0.7).into();
let placeholder = neutral_9.into();
let selection = palette.accent.base.into(); let selection = palette.accent.base.into();
let mut appearance = match class { let mut appearance = match class {
@ -1327,8 +1314,7 @@ impl text_input::Catalog for Theme {
match status { match status {
text_input::Status::Active => appearance, text_input::Status::Active => appearance,
text_input::Status::Hovered => { text_input::Status::Hovered => {
let mut bg = palette.palette.neutral_7; let bg = palette.palette.neutral_7.with_alpha(0.25);
bg.alpha = 0.25;
match class { match class {
TextInput::Default => text_input::Style { TextInput::Default => text_input::Style {
@ -1357,8 +1343,7 @@ impl text_input::Catalog for Theme {
} }
} }
text_input::Status::Focused => { text_input::Status::Focused => {
let mut bg = palette.palette.neutral_7; let bg = palette.palette.neutral_7.with_alpha(0.25);
bg.alpha = 0.25;
match class { match class {
TextInput::Default => text_input::Style { TextInput::Default => text_input::Style {
@ -1433,9 +1418,7 @@ impl iced_widget::text_editor::Catalog for Theme {
let selection = cosmic.accent.base.into(); let selection = cosmic.accent.base.into();
let value = cosmic.palette.neutral_9.into(); let value = cosmic.palette.neutral_9.into();
let mut placeholder = cosmic.palette.neutral_9; let placeholder = cosmic.palette.neutral_9.with_alpha(0.7).into();
placeholder.alpha = 0.7;
let placeholder = placeholder.into();
let icon = cosmic.background.on.into(); let icon = cosmic.background.on.into();
match status { match status {

35
src/theme/style/segmented_button.rs
View file

@ -7,6 +7,7 @@ use crate::widget::segmented_button::{Appearance, ItemAppearance, StyleSheet};
use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance}; use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance};
use cosmic_theme::{Component, Container}; use cosmic_theme::{Component, Container};
use iced_core::{Background, border::Radius}; use iced_core::{Background, border::Radius};
use palette::WithAlpha;
#[derive(Default)] #[derive(Default)]
pub enum SegmentedButton { pub enum SegmentedButton {
@ -166,19 +167,19 @@ mod horizontal {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance}; use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use cosmic_theme::Component; use cosmic_theme::Component;
use iced_core::{Background, border::Radius}; use iced_core::{Background, border::Radius};
use palette::WithAlpha;
pub fn selection_active( pub fn selection_active(
cosmic: &cosmic_theme::Theme, cosmic: &cosmic_theme::Theme,
component: &Component, component: &Component,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
let mut color = cosmic.palette.neutral_5;
color.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m; let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(color.into())), background: Some(Background::Color(
cosmic.palette.neutral_5.with_alpha(0.2).into(),
)),
first: ItemAppearance { first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]), border_radius: Radius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]),
..Default::default() ..Default::default()
@ -196,12 +197,12 @@ mod horizontal {
} }
pub fn tab_bar_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance { pub fn tab_bar_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let rad_s = cosmic.corner_radii.radius_s; let rad_s = cosmic.corner_radii.radius_s;
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(
cosmic.palette.neutral_5.with_alpha(0.2).into(),
)),
first: ItemAppearance { first: ItemAppearance {
border_radius: Radius::from([rad_s[0], rad_s[1], rad_0[2], rad_0[3]]), border_radius: Radius::from([rad_s[0], rad_s[1], rad_0[2], rad_0[3]]),
border_bottom: Some((4.0, cosmic.accent.base.into())), border_bottom: Some((4.0, cosmic.accent.base.into())),
@ -240,10 +241,10 @@ pub fn hover(
component: &Component, component: &Component,
default: &ItemStatusAppearance, default: &ItemStatusAppearance,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
let mut color = cosmic.palette.neutral_8;
color.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(color.into())), background: Some(Background::Color(
cosmic.palette.neutral_8.with_alpha(0.2).into(),
)),
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
..*default ..*default
} }
@ -253,19 +254,19 @@ mod vertical {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance}; use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use cosmic_theme::Component; use cosmic_theme::Component;
use iced_core::{Background, border::Radius}; use iced_core::{Background, border::Radius};
use palette::WithAlpha;
pub fn selection_active( pub fn selection_active(
cosmic: &cosmic_theme::Theme, cosmic: &cosmic_theme::Theme,
component: &Component, component: &Component,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
let mut color = component.selected_state_color();
color.alpha = 0.3;
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
let rad_m = cosmic.corner_radii.radius_m; let rad_m = cosmic.corner_radii.radius_m;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(color.into())), background: Some(Background::Color(
component.selected_state_color().with_alpha(0.3).into(),
)),
first: ItemAppearance { first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[2], rad_0[3]]), border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[2], rad_0[3]]),
..Default::default() ..Default::default()
@ -283,10 +284,10 @@ mod vertical {
} }
pub fn tab_bar_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance { pub fn tab_bar_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(
cosmic.palette.neutral_5.with_alpha(0.2).into(),
)),
first: ItemAppearance { first: ItemAppearance {
border_radius: cosmic.corner_radii.radius_m.into(), border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default() ..Default::default()

2
src/widget/spin_button.rs
View file

@ -219,8 +219,6 @@ where
#[allow(clippy::trivially_copy_pass_by_ref)] #[allow(clippy::trivially_copy_pass_by_ref)]
fn container_style(theme: &crate::Theme) -> iced_widget::container::Style { fn container_style(theme: &crate::Theme) -> iced_widget::container::Style {
let cosmic_theme = &theme.cosmic(); let cosmic_theme = &theme.cosmic();
let mut neutral_10 = cosmic_theme.palette.neutral_10;
neutral_10.alpha = 0.1;
let accent = &cosmic_theme.accent; let accent = &cosmic_theme.accent;
let corners = &cosmic_theme.corner_radii; let corners = &cosmic_theme.corner_radii;
let border = if theme.theme_type.is_high_contrast() { let border = if theme.theme_type.is_high_contrast() {