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

refactor: use theme corner radii everywhere

Browse source 
not all values matched a default value but I picked the next closest in that case
This commit is contained in:
Ashley Wulber 2023-12-13 12:59:26 -05:00 • committed by Ashley Wulber
parent 56965ac2e5
commit 310064ca1d
14 changed files with 103 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ impl dropdown::menu::StyleSheet for Theme {
text_color: cosmic.on_bg_color().into(),
background: Background::Color(cosmic.background.component.base.into()),
border_width: 0.0,
border_radius: 16.0.into(),
border_radius: cosmic.corner_radii.radius_m.into(),
border_color: Color::TRANSPARENT,
hovered_text_color: cosmic.on_bg_color().into(),

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

@ -367,6 +367,7 @@ impl container::StyleSheet for Theme {
#[allow(clippy::too_many_lines)]
fn appearance(&self, style: &Self::Style) -> container::Appearance {
let cosmic = self.cosmic();
match style {
Container::Transparent => container::Appearance::default(),
Container::Custom(f) => f(self),
@ -377,7 +378,7 @@ impl container::StyleSheet for Theme {
icon_color: Some(Color::from(palette.background.on)),
text_color: Some(Color::from(palette.background.on)),
background: Some(iced::Background::Color(palette.background.base.into())),
border_radius: 2.0.into(),
border_radius: cosmic.corner_radii.radius_xs.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
@ -413,7 +414,7 @@ impl container::StyleSheet for Theme {
icon_color: Some(Color::from(palette.primary.on)),
text_color: Some(Color::from(palette.primary.on)),
background: Some(iced::Background::Color(palette.primary.base.into())),
border_radius: 2.0.into(),
border_radius: cosmic.corner_radii.radius_xs.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
@ -425,7 +426,7 @@ impl container::StyleSheet for Theme {
icon_color: Some(Color::from(palette.secondary.on)),
text_color: Some(Color::from(palette.secondary.on)),
background: Some(iced::Background::Color(palette.secondary.base.into())),
border_radius: 2.0.into(),
border_radius: cosmic.corner_radii.radius_xs.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
@ -438,7 +439,7 @@ impl container::StyleSheet for Theme {
icon_color: None,
text_color: None,
background: Some(iced::Background::Color(theme.primary.base.into())),
border_radius: f32::from(theme.space_xxs()).into(),
border_radius: theme.corner_radii.radius_xs.into(),
border_width: 1.0,
border_color: theme.bg_divider().into(),
}
@ -451,7 +452,7 @@ impl container::StyleSheet for Theme {
icon_color: None,
text_color: None,
background: Some(iced::Background::Color(theme.palette.neutral_2.into())),
border_radius: f32::from(theme.space_xl()).into(),
border_radius: theme.corner_radii.radius_l.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
@ -467,7 +468,7 @@ impl container::StyleSheet for Theme {
background: Some(iced::Background::Color(
palette.background.component.base.into(),
)),
border_radius: 8.0.into(),
border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -477,7 +478,7 @@ impl container::StyleSheet for Theme {
background: Some(iced::Background::Color(
palette.primary.component.base.into(),
)),
border_radius: 8.0.into(),
border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -487,7 +488,7 @@ impl container::StyleSheet for Theme {
background: Some(iced::Background::Color(
palette.secondary.component.base.into(),
)),
border_radius: 8.0.into(),
border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -530,7 +531,7 @@ impl slider::StyleSheet for Theme {
Color::TRANSPARENT,
),
width: 4.0,
border_radius: 2.0.into(),
border_radius: cosmic.corner_radii.radius_xs.into(),
},
handle: slider::Handle {
@ -588,7 +589,7 @@ impl menu::StyleSheet for Theme {
text_color: cosmic.on_bg_color().into(),
background: Background::Color(cosmic.background.base.into()),
border_width: 0.0,
border_radius: 16.0.into(),
border_radius: cosmic.corner_radii.radius_m.into(),
border_color: Color::TRANSPARENT,
selected_text_color: cosmic.accent.base.into(),
selected_background: Background::Color(cosmic.background.component.hover.into()),
@ -609,7 +610,7 @@ impl pick_list::StyleSheet for Theme {
text_color: cosmic.on_bg_color().into(),
background: Color::TRANSPARENT.into(),
placeholder_color: cosmic.on_bg_color().into(),
border_radius: 24.0.into(),
border_radius: cosmic.corner_radii.radius_m.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
// icon_size: 0.7, // TODO: how to replace
@ -748,7 +749,7 @@ impl pane_grid::StyleSheet for Theme {
background: Background::Color(theme.bg_color().into()),
border_width: 2.0,
border_color: theme.bg_divider().into(),
border_radius: 0.0.into(),
border_radius: theme.corner_radii.radius_0.into(),
}
}
}
@ -781,17 +782,17 @@ impl progress_bar::StyleSheet for Theme {
ProgressBar::Primary => progress_bar::Appearance {
background: Color::from(theme.background.divider).into(),
bar: Color::from(theme.accent.base).into(),
border_radius: 2.0.into(),
border_radius: theme.corner_radii.radius_xs.into(),
},
ProgressBar::Success => progress_bar::Appearance {
background: Color::from(theme.background.divider).into(),
bar: Color::from(theme.success.base).into(),
border_radius: 2.0.into(),
border_radius: theme.corner_radii.radius_xs.into(),
},
ProgressBar::Danger => progress_bar::Appearance {
background: Color::from(theme.background.divider).into(),
bar: Color::from(theme.destructive.base).into(),
border_radius: 2.0.into(),
border_radius: theme.corner_radii.radius_xs.into(),
},
ProgressBar::Custom(f) => f(self),
}
@ -851,16 +852,17 @@ impl scrollable::StyleSheet for Theme {
type Style = ();
fn active(&self, _style: &Self::Style) -> scrollable::Scrollbar {
let cosmic = self.cosmic();
scrollable::Scrollbar {
background: Some(Background::Color(
self.current_container().component.base.into(),
)),
border_radius: 4.0.into(),
border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: self.current_container().component.divider.into(),
border_radius: 4.0.into(),
border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -878,12 +880,12 @@ impl scrollable::StyleSheet for Theme {
background: Some(Background::Color(
self.current_container().component.hover.into(),
)),
border_radius: 4.0.into(),
border_radius: theme.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: theme.accent.base.into(),
border_radius: 4.0.into(),
border_radius: theme.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -972,14 +974,14 @@ impl text_input::StyleSheet for Theme {
match style {
TextInput::Default => text_input::Appearance {
background: Color::from(bg).into(),
border_radius: 8.0.into(),
border_radius: palette.corner_radii.radius_s.into(),
border_width: 1.0,
border_color: self.current_container().component.divider.into(),
icon_color: self.current_container().on.into(),
},
TextInput::Search => text_input::Appearance {
background: Color::from(bg).into(),
border_radius: 24.0.into(),
border_radius: palette.corner_radii.radius_m.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
@ -995,14 +997,14 @@ impl text_input::StyleSheet for Theme {
match style {
TextInput::Default => text_input::Appearance {
background: Color::from(bg).into(),
border_radius: 8.0.into(),
border_radius: palette.corner_radii.radius_s.into(),
border_width: 1.0,
border_color: palette.accent.base.into(),
icon_color: self.current_container().on.into(),
},
TextInput::Search => text_input::Appearance {
background: Color::from(bg).into(),
border_radius: 24.0.into(),
border_radius: palette.corner_radii.radius_m.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
@ -1018,14 +1020,14 @@ impl text_input::StyleSheet for Theme {
match style {
TextInput::Default => text_input::Appearance {
background: Color::from(bg).into(),
border_radius: 8.0.into(),
border_radius: palette.corner_radii.radius_s.into(),
border_width: 1.0,
border_color: palette.accent.base.into(),
icon_color: self.current_container().on.into(),
},
TextInput::Search => text_input::Appearance {
background: Color::from(bg).into(),
border_radius: 24.0.into(),
border_radius: palette.corner_radii.radius_m.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),

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

@ -29,21 +29,21 @@ impl StyleSheet for Theme {
let cosmic = self.cosmic();
let active = horizontal::view_switcher_active(cosmic);
Appearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance {
background: None,
first: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
@ -60,20 +60,24 @@ impl StyleSheet for Theme {
let active = horizontal::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
Appearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
border_radius: BorderRadius::from([rad_m[0], rad_0[1], rad_0[2], 24.0]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
border_radius: BorderRadius::from([
rad_0[0], rad_m[1], rad_m[2], rad_0[3],
]),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
@ -90,12 +94,14 @@ impl StyleSheet for Theme {
#[allow(clippy::too_many_lines)]
fn vertical(&self, style: &Self::Style) -> Appearance {
let cosmic = self.cosmic();
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
match style {
SegmentedButton::ViewSwitcher => {
let cosmic = self.cosmic();
let active = vertical::view_switcher_active(cosmic);
Appearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance {
background: None,
text_color: cosmic.on_bg_color().into(),
@ -108,24 +114,27 @@ impl StyleSheet for Theme {
}
}
SegmentedButton::Selection => {
let cosmic = self.cosmic();
let active = vertical::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
Appearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
border_radius: BorderRadius::from([
rad_m[0], rad_m[1], rad_0[0], rad_0[0],
]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
border_radius: BorderRadius::from([
rad_0[0], rad_0[1], rad_m[2], rad_m[3],
]),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
@ -144,23 +153,25 @@ impl StyleSheet for Theme {
mod horizontal {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
use palette::{rgb::Rgb, white_point::C, Alpha};
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
border_radius: BorderRadius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
border_radius: BorderRadius::from([rad_0[0], rad_m[1], rad_m[2], rad_0[3]]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
@ -172,20 +183,22 @@ mod horizontal {
) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let rad_s = cosmic.corner_radii.radius_s;
let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius: BorderRadius::from([rad_s[0], rad_s[1], rad_0[2], rad_0[3]]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius: BorderRadius::from([rad_s[0], rad_s[1], rad_0[2], rad_0[3]]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius: BorderRadius::from([rad_s[0], rad_s[1], rad_0[2], rad_0[3]]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
@ -230,18 +243,20 @@ mod vertical {
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let rad_0 = cosmic.corner_radii.radius_0;
let rad_m = cosmic.corner_radii.radius_m;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
border_radius: BorderRadius::from([rad_m[0], rad_m[1], rad_0[2], rad_0[3]]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
border_radius: BorderRadius::from([rad_0[0], rad_0[1], rad_m[2], rad_m[3]]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
@ -256,15 +271,15 @@ mod vertical {
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from(24.0),
border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(24.0),
border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from(24.0),
border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default()
},
text_color: cosmic.accent.base.into(),