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
examples/cosmic/Cargo.toml
View file

@ -7,7 +7,7 @@ publish = false
[dependencies] [dependencies]
apply = "0.3.0" apply = "0.3.0"
fraction = "0.13.0" fraction = "0.14.0"
libcosmic = { path = "../..", features = ["debug", "winit", "tokio", "single-instance"] } libcosmic = { path = "../..", features = ["debug", "winit", "tokio", "single-instance"] }
once_cell = "1.18" once_cell = "1.18"
slotmap = "1.0.6" slotmap = "1.0.6"

2
src/applet/mod.rs
View file

@ -157,7 +157,7 @@ impl Context {
Appearance { Appearance {
text_color: Some(cosmic.background.on.into()), text_color: Some(cosmic.background.on.into()),
background: Some(Color::from(cosmic.background.base).into()), background: Some(Color::from(cosmic.background.base).into()),
border_radius: 12.0.into(), border_radius: cosmic.corner_radii.radius_m.into(),
border_width: 1.0, border_width: 1.0,
border_color: cosmic.background.divider.into(), border_color: cosmic.background.divider.into(),
icon_color: Some(cosmic.background.on.into()), icon_color: Some(cosmic.background.on.into()),

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(), text_color: cosmic.on_bg_color().into(),
background: Background::Color(cosmic.background.component.base.into()), background: Background::Color(cosmic.background.component.base.into()),
border_width: 0.0, border_width: 0.0,
border_radius: 16.0.into(), border_radius: cosmic.corner_radii.radius_m.into(),
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
hovered_text_color: cosmic.on_bg_color().into(), 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)] #[allow(clippy::too_many_lines)]
fn appearance(&self, style: &Self::Style) -> container::Appearance { fn appearance(&self, style: &Self::Style) -> container::Appearance {
let cosmic = self.cosmic();
match style { match style {
Container::Transparent => container::Appearance::default(), Container::Transparent => container::Appearance::default(),
Container::Custom(f) => f(self), Container::Custom(f) => f(self),
@ -377,7 +378,7 @@ impl container::StyleSheet for Theme {
icon_color: Some(Color::from(palette.background.on)), icon_color: Some(Color::from(palette.background.on)),
text_color: Some(Color::from(palette.background.on)), text_color: Some(Color::from(palette.background.on)),
background: Some(iced::Background::Color(palette.background.base.into())), 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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
@ -413,7 +414,7 @@ impl container::StyleSheet for Theme {
icon_color: Some(Color::from(palette.primary.on)), icon_color: Some(Color::from(palette.primary.on)),
text_color: Some(Color::from(palette.primary.on)), text_color: Some(Color::from(palette.primary.on)),
background: Some(iced::Background::Color(palette.primary.base.into())), 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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
@ -425,7 +426,7 @@ impl container::StyleSheet for Theme {
icon_color: Some(Color::from(palette.secondary.on)), icon_color: Some(Color::from(palette.secondary.on)),
text_color: Some(Color::from(palette.secondary.on)), text_color: Some(Color::from(palette.secondary.on)),
background: Some(iced::Background::Color(palette.secondary.base.into())), 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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
@ -438,7 +439,7 @@ impl container::StyleSheet for Theme {
icon_color: None, icon_color: None,
text_color: None, text_color: None,
background: Some(iced::Background::Color(theme.primary.base.into())), 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_width: 1.0,
border_color: theme.bg_divider().into(), border_color: theme.bg_divider().into(),
} }
@ -451,7 +452,7 @@ impl container::StyleSheet for Theme {
icon_color: None, icon_color: None,
text_color: None, text_color: None,
background: Some(iced::Background::Color(theme.palette.neutral_2.into())), 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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
@ -467,7 +468,7 @@ impl container::StyleSheet for Theme {
background: Some(iced::Background::Color( background: Some(iced::Background::Color(
palette.background.component.base.into(), palette.background.component.base.into(),
)), )),
border_radius: 8.0.into(), border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -477,7 +478,7 @@ impl container::StyleSheet for Theme {
background: Some(iced::Background::Color( background: Some(iced::Background::Color(
palette.primary.component.base.into(), palette.primary.component.base.into(),
)), )),
border_radius: 8.0.into(), border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -487,7 +488,7 @@ impl container::StyleSheet for Theme {
background: Some(iced::Background::Color( background: Some(iced::Background::Color(
palette.secondary.component.base.into(), palette.secondary.component.base.into(),
)), )),
border_radius: 8.0.into(), border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -530,7 +531,7 @@ impl slider::StyleSheet for Theme {
Color::TRANSPARENT, Color::TRANSPARENT,
), ),
width: 4.0, width: 4.0,
border_radius: 2.0.into(), border_radius: cosmic.corner_radii.radius_xs.into(),
}, },
handle: slider::Handle { handle: slider::Handle {
@ -588,7 +589,7 @@ impl menu::StyleSheet for Theme {
text_color: cosmic.on_bg_color().into(), text_color: cosmic.on_bg_color().into(),
background: Background::Color(cosmic.background.base.into()), background: Background::Color(cosmic.background.base.into()),
border_width: 0.0, border_width: 0.0,
border_radius: 16.0.into(), border_radius: cosmic.corner_radii.radius_m.into(),
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
selected_text_color: cosmic.accent.base.into(), selected_text_color: cosmic.accent.base.into(),
selected_background: Background::Color(cosmic.background.component.hover.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(), text_color: cosmic.on_bg_color().into(),
background: Color::TRANSPARENT.into(), background: Color::TRANSPARENT.into(),
placeholder_color: cosmic.on_bg_color().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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
// icon_size: 0.7, // TODO: how to replace // 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()), background: Background::Color(theme.bg_color().into()),
border_width: 2.0, border_width: 2.0,
border_color: theme.bg_divider().into(), 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 { ProgressBar::Primary => progress_bar::Appearance {
background: Color::from(theme.background.divider).into(), background: Color::from(theme.background.divider).into(),
bar: Color::from(theme.accent.base).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 { ProgressBar::Success => progress_bar::Appearance {
background: Color::from(theme.background.divider).into(), background: Color::from(theme.background.divider).into(),
bar: Color::from(theme.success.base).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 { ProgressBar::Danger => progress_bar::Appearance {
background: Color::from(theme.background.divider).into(), background: Color::from(theme.background.divider).into(),
bar: Color::from(theme.destructive.base).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), ProgressBar::Custom(f) => f(self),
} }
@ -851,16 +852,17 @@ impl scrollable::StyleSheet for Theme {
type Style = (); type Style = ();
fn active(&self, _style: &Self::Style) -> scrollable::Scrollbar { fn active(&self, _style: &Self::Style) -> scrollable::Scrollbar {
let cosmic = self.cosmic();
scrollable::Scrollbar { scrollable::Scrollbar {
background: Some(Background::Color( background: Some(Background::Color(
self.current_container().component.base.into(), self.current_container().component.base.into(),
)), )),
border_radius: 4.0.into(), border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: self.current_container().component.divider.into(), 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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -878,12 +880,12 @@ impl scrollable::StyleSheet for Theme {
background: Some(Background::Color( background: Some(Background::Color(
self.current_container().component.hover.into(), self.current_container().component.hover.into(),
)), )),
border_radius: 4.0.into(), border_radius: theme.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: theme.accent.base.into(), color: theme.accent.base.into(),
border_radius: 4.0.into(), border_radius: theme.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -972,14 +974,14 @@ impl text_input::StyleSheet for Theme {
match style { match style {
TextInput::Default => text_input::Appearance { TextInput::Default => text_input::Appearance {
background: Color::from(bg).into(), background: Color::from(bg).into(),
border_radius: 8.0.into(), border_radius: palette.corner_radii.radius_s.into(),
border_width: 1.0, border_width: 1.0,
border_color: self.current_container().component.divider.into(), border_color: self.current_container().component.divider.into(),
icon_color: self.current_container().on.into(), icon_color: self.current_container().on.into(),
}, },
TextInput::Search => text_input::Appearance { TextInput::Search => text_input::Appearance {
background: Color::from(bg).into(), background: Color::from(bg).into(),
border_radius: 24.0.into(), border_radius: palette.corner_radii.radius_m.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(), icon_color: self.current_container().on.into(),
@ -995,14 +997,14 @@ impl text_input::StyleSheet for Theme {
match style { match style {
TextInput::Default => text_input::Appearance { TextInput::Default => text_input::Appearance {
background: Color::from(bg).into(), background: Color::from(bg).into(),
border_radius: 8.0.into(), border_radius: palette.corner_radii.radius_s.into(),
border_width: 1.0, border_width: 1.0,
border_color: palette.accent.base.into(), border_color: palette.accent.base.into(),
icon_color: self.current_container().on.into(), icon_color: self.current_container().on.into(),
}, },
TextInput::Search => text_input::Appearance { TextInput::Search => text_input::Appearance {
background: Color::from(bg).into(), background: Color::from(bg).into(),
border_radius: 24.0.into(), border_radius: palette.corner_radii.radius_m.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(), icon_color: self.current_container().on.into(),
@ -1018,14 +1020,14 @@ impl text_input::StyleSheet for Theme {
match style { match style {
TextInput::Default => text_input::Appearance { TextInput::Default => text_input::Appearance {
background: Color::from(bg).into(), background: Color::from(bg).into(),
border_radius: 8.0.into(), border_radius: palette.corner_radii.radius_s.into(),
border_width: 1.0, border_width: 1.0,
border_color: palette.accent.base.into(), border_color: palette.accent.base.into(),
icon_color: self.current_container().on.into(), icon_color: self.current_container().on.into(),
}, },
TextInput::Search => text_input::Appearance { TextInput::Search => text_input::Appearance {
background: Color::from(bg).into(), background: Color::from(bg).into(),
border_radius: 24.0.into(), border_radius: palette.corner_radii.radius_m.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(), 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 cosmic = self.cosmic();
let active = horizontal::view_switcher_active(cosmic); let active = horizontal::view_switcher_active(cosmic);
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: None, background: None,
first: ItemAppearance { 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())), border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
middle: ItemAppearance { 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())), border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { 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())), border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
@ -60,20 +60,24 @@ impl StyleSheet for Theme {
let active = horizontal::selection_active(cosmic); let active = horizontal::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2; neutral_5.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { 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() ..Default::default()
}, },
middle: ItemAppearance { middle: ItemAppearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { 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() ..Default::default()
}, },
text_color: cosmic.on_bg_color().into(), text_color: cosmic.on_bg_color().into(),
@ -90,12 +94,14 @@ impl StyleSheet for Theme {
#[allow(clippy::too_many_lines)] #[allow(clippy::too_many_lines)]
fn vertical(&self, style: &Self::Style) -> Appearance { 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 { match style {
SegmentedButton::ViewSwitcher => { SegmentedButton::ViewSwitcher => {
let cosmic = self.cosmic();
let active = vertical::view_switcher_active(cosmic); let active = vertical::view_switcher_active(cosmic);
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: None, background: None,
text_color: cosmic.on_bg_color().into(), text_color: cosmic.on_bg_color().into(),
@ -108,24 +114,27 @@ impl StyleSheet for Theme {
} }
} }
SegmentedButton::Selection => { SegmentedButton::Selection => {
let cosmic = self.cosmic();
let active = vertical::selection_active(cosmic); let active = vertical::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2; neutral_5.alpha = 0.2;
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { 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() ..Default::default()
}, },
middle: ItemAppearance { middle: ItemAppearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { 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() ..Default::default()
}, },
text_color: cosmic.on_bg_color().into(), text_color: cosmic.on_bg_color().into(),
@ -144,23 +153,25 @@ impl StyleSheet for Theme {
mod horizontal { mod horizontal {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance}; use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use iced_core::{Background, BorderRadius}; 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 { pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2; neutral_5.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { 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() ..Default::default()
}, },
middle: ItemAppearance { middle: ItemAppearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { 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() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
@ -172,20 +183,22 @@ mod horizontal {
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2; neutral_5.alpha = 0.2;
let rad_s = cosmic.corner_radii.radius_s;
let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { 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())), border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
middle: ItemAppearance { 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())), border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { 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())), border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
@ -230,18 +243,20 @@ mod vertical {
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance { pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2; neutral_5.alpha = 0.2;
let rad_0 = cosmic.corner_radii.radius_0;
let rad_m = cosmic.corner_radii.radius_m;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { 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() ..Default::default()
}, },
middle: ItemAppearance { middle: ItemAppearance {
border_radius: BorderRadius::from(0.0), border_radius: cosmic.corner_radii.radius_0.into(),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { 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() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
@ -256,15 +271,15 @@ mod vertical {
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from(24.0), border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default() ..Default::default()
}, },
middle: ItemAppearance { middle: ItemAppearance {
border_radius: BorderRadius::from(24.0), border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default() ..Default::default()
}, },
last: ItemAppearance { last: ItemAppearance {
border_radius: BorderRadius::from(24.0), border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),

5
src/widget/button/style.rs
View file

@ -4,6 +4,8 @@
//! Change the apperance of a button. //! Change the apperance of a button.
use iced_core::{Background, BorderRadius, Color, Vector}; use iced_core::{Background, BorderRadius, Color, Vector};
use crate::theme::THEME;
/// The appearance of a button. /// The appearance of a button.
#[must_use] #[must_use]
#[derive(Debug, Clone, Copy)] #[derive(Debug, Clone, Copy)]
@ -39,10 +41,11 @@ pub struct Appearance {
impl Appearance { impl Appearance {
// TODO: `BorderRadius` is not `const fn` compatible. // TODO: `BorderRadius` is not `const fn` compatible.
pub fn new() -> Self { pub fn new() -> Self {
let rad_0 = THEME.with(|t| t.borrow().cosmic().corner_radii.radius_0);
Self { Self {
shadow_offset: Vector::new(0.0, 0.0), shadow_offset: Vector::new(0.0, 0.0),
background: None, background: None,
border_radius: BorderRadius::from(0.0), border_radius: BorderRadius::from(rad_0),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
outline_width: 0.0, outline_width: 0.0,

14
src/widget/button/widget.rs
View file

@ -23,6 +23,8 @@ use iced_core::{
}; };
use iced_renderer::core::widget::{operation, OperationOutputWrapper}; use iced_renderer::core::widget::{operation, OperationOutputWrapper};
use crate::theme::THEME;
pub use super::style::{Appearance, StyleSheet}; pub use super::style::{Appearance, StyleSheet};
/// Internally defines different button widget variants. /// Internally defines different button widget variants.
@ -387,6 +389,8 @@ where
{ {
let selection_background = theme.selection_background(); let selection_background = theme.selection_background();
let c_rad = THEME.with(|t| t.borrow().cosmic().corner_radii);
if self.selected { if self.selected {
renderer.fill_quad( renderer.fill_quad(
Quad { Quad {
@ -396,7 +400,13 @@ where
x: bounds.x + styling.border_width, x: bounds.x + styling.border_width,
y: bounds.y + (bounds.height - 20.0 - styling.border_width), y: bounds.y + (bounds.height - 20.0 - styling.border_width),
}, },
border_radius: [0.0, 8.0, 0.0, 8.0].into(), border_radius: [
c_rad.radius_0[0],
c_rad.radius_s[1],
c_rad.radius_0[2],
c_rad.radius_s[3],
]
.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -423,7 +433,7 @@ where
renderer.fill_quad( renderer.fill_quad(
renderer::Quad { renderer::Quad {
bounds, bounds,
border_radius: 20.0.into(), border_radius: c_rad.radius_m.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },

2
src/widget/context_drawer/widget.rs
View file

@ -84,7 +84,7 @@ impl<'a, Message: Clone + 'static> ContextDrawer<'a, Message> {
icon_color: Some(Color::from(palette.primary.on)), icon_color: Some(Color::from(palette.primary.on)),
text_color: Some(Color::from(palette.primary.on)), text_color: Some(Color::from(palette.primary.on)),
background: Some(iced::Background::Color(palette.primary.base.into())), background: Some(iced::Background::Color(palette.primary.base.into())),
border_radius: 8.0.into(), border_radius: palette.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }

2
src/widget/list/mod.rs
View file

@ -28,7 +28,7 @@ pub fn style(theme: &crate::Theme) -> crate::widget::container::Appearance {
icon_color: Some(container.on.into()), icon_color: Some(container.on.into()),
text_color: Some(container.on.into()), text_color: Some(container.on.into()),
background: Some(Background::Color(container.base.into())), background: Some(Background::Color(container.base.into())),
border_radius: 8.0.into(), border_radius: theme.cosmic().corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }

2
src/widget/nav_bar.rs
View file

@ -48,7 +48,7 @@ pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance {
icon_color: Some(cosmic.on_bg_color().into()), icon_color: Some(cosmic.on_bg_color().into()),
text_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.base.into())),
border_radius: 8.0.into(), border_radius: cosmic.corner_radii.radius_s.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }

2
src/widget/search/field.rs
View file

@ -81,7 +81,7 @@ fn active_style(theme: &crate::Theme) -> container::Appearance {
icon_color: Some(cosmic.palette.neutral_9.into()), icon_color: Some(cosmic.palette.neutral_9.into()),
text_color: Some(cosmic.palette.neutral_9.into()), text_color: Some(cosmic.palette.neutral_9.into()),
background: Some(Background::Color(neutral_7.into())), background: Some(Background::Color(neutral_7.into())),
border_radius: 24.0.into(), border_radius: cosmic.corner_radii.radius_m.into(),
border_width: 2.0, border_width: 2.0,
border_color: cosmic.accent.focus.into(), border_color: cosmic.accent.focus.into(),
} }

5
src/widget/segmented_button/widget.rs
View file

@ -2,7 +2,7 @@
// SPDX-License-Identifier: MPL-2.0 // SPDX-License-Identifier: MPL-2.0
use super::model::{Entity, Model, Selectable}; use super::model::{Entity, Model, Selectable};
use crate::theme::SegmentedButton as Style; use crate::theme::{SegmentedButton as Style, THEME};
use crate::widget::{icon, Icon}; use crate::widget::{icon, Icon};
use crate::{Element, Renderer}; use crate::{Element, Renderer};
use derive_setters::Setters; use derive_setters::Setters;
@ -558,10 +558,11 @@ where
bounds.y = bounds.y + bounds.height - width; bounds.y = bounds.y + bounds.height - width;
bounds.height = width; bounds.height = width;
let rad_0 = THEME.with(|t| t.borrow().cosmic().corner_radii.radius_0);
renderer.fill_quad( renderer.fill_quad(
renderer::Quad { renderer::Quad {
bounds, bounds,
border_radius: BorderRadius::from(0.0), border_radius: rad_0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },

7
src/widget/text_input/input.rs
View file

@ -1933,6 +1933,9 @@ pub fn draw<'a, Message>(
let font = font.unwrap_or_else(|| renderer.default_font()); let font = font.unwrap_or_else(|| renderer.default_font());
let size = size.unwrap_or_else(|| renderer.default_size().0); let size = size.unwrap_or_else(|| renderer.default_size().0);
let radius_0 = THEME
.with(|t| t.borrow().cosmic().corner_radii.radius_0)
.into();
let (cursor, offset) = if let Some(focus) = &state.is_focused { let (cursor, offset) = if let Some(focus) = &state.is_focused {
match state.cursor.state(value) { match state.cursor.state(value) {
cursor::State::Index(position) => { cursor::State::Index(position) => {
@ -1956,7 +1959,7 @@ pub fn draw<'a, Message>(
width: 1.0, width: 1.0,
height: text_bounds.height, height: text_bounds.height,
}, },
border_radius: 0.0.into(), border_radius: radius_0,
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
@ -1994,7 +1997,7 @@ pub fn draw<'a, Message>(
width, width,
height: text_bounds.height, height: text_bounds.height,
}, },
border_radius: 0.0.into(), border_radius: radius_0,
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },

3
src/widget/warning.rs
View file

@ -57,11 +57,12 @@ impl<'a, Message: 'static + Clone> From<Warning<'a, Message>> for Element<'a, Me
#[must_use] #[must_use]
pub fn warning_container(theme: &Theme) -> widget::container::Appearance { pub fn warning_container(theme: &Theme) -> widget::container::Appearance {
let cosmic = theme.cosmic();
widget::container::Appearance { widget::container::Appearance {
icon_color: Some(theme.cosmic().warning.on.into()), icon_color: Some(theme.cosmic().warning.on.into()),
text_color: Some(theme.cosmic().warning.on.into()), text_color: Some(theme.cosmic().warning.on.into()),
background: Some(Background::Color(theme.cosmic().warning_color().into())), background: Some(Background::Color(theme.cosmic().warning_color().into())),
border_radius: 0.0.into(), border_radius: cosmic.corner_radii.radius_0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }