refactor: use theme corner radii everywhere

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

View file

@ -157,7 +157,7 @@ impl Context {
Appearance {
text_color: Some(cosmic.background.on.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_color: cosmic.background.divider.into(),
icon_color: Some(cosmic.background.on.into()),

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

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

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

View file

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

View file

@ -23,6 +23,8 @@ use iced_core::{
};
use iced_renderer::core::widget::{operation, OperationOutputWrapper};
use crate::theme::THEME;
pub use super::style::{Appearance, StyleSheet};
/// Internally defines different button widget variants.
@ -387,6 +389,8 @@ where
{
let selection_background = theme.selection_background();
let c_rad = THEME.with(|t| t.borrow().cosmic().corner_radii);
if self.selected {
renderer.fill_quad(
Quad {
@ -396,7 +400,13 @@ where
x: bounds.x + 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_color: Color::TRANSPARENT,
},
@ -423,7 +433,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: 20.0.into(),
border_radius: c_rad.radius_m.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

View file

@ -84,7 +84,7 @@ impl<'a, Message: Clone + 'static> ContextDrawer<'a, Message> {
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: 8.0.into(),
border_radius: palette.corner_radii.radius_s.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}

View file

@ -28,7 +28,7 @@ pub fn style(theme: &crate::Theme) -> crate::widget::container::Appearance {
icon_color: Some(container.on.into()),
text_color: Some(container.on.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_color: Color::TRANSPARENT,
}

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()),
text_color: Some(cosmic.on_bg_color().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_color: Color::TRANSPARENT,
}

View file

@ -81,7 +81,7 @@ fn active_style(theme: &crate::Theme) -> container::Appearance {
icon_color: Some(cosmic.palette.neutral_9.into()),
text_color: Some(cosmic.palette.neutral_9.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_color: cosmic.accent.focus.into(),
}

View file

@ -2,7 +2,7 @@
// SPDX-License-Identifier: MPL-2.0
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::{Element, Renderer};
use derive_setters::Setters;
@ -558,10 +558,11 @@ where
bounds.y = bounds.y + bounds.height - width;
bounds.height = width;
let rad_0 = THEME.with(|t| t.borrow().cosmic().corner_radii.radius_0);
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: BorderRadius::from(0.0),
border_radius: rad_0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

View file

@ -1933,6 +1933,9 @@ pub fn draw<'a, Message>(
let font = font.unwrap_or_else(|| renderer.default_font());
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 {
match state.cursor.state(value) {
cursor::State::Index(position) => {
@ -1956,7 +1959,7 @@ pub fn draw<'a, Message>(
width: 1.0,
height: text_bounds.height,
},
border_radius: 0.0.into(),
border_radius: radius_0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -1994,7 +1997,7 @@ pub fn draw<'a, Message>(
width,
height: text_bounds.height,
},
border_radius: 0.0.into(),
border_radius: radius_0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

View file

@ -57,11 +57,12 @@ impl<'a, Message: 'static + Clone> From<Warning<'a, Message>> for Element<'a, Me
#[must_use]
pub fn warning_container(theme: &Theme) -> widget::container::Appearance {
let cosmic = theme.cosmic();
widget::container::Appearance {
icon_color: Some(theme.cosmic().warning.on.into()),
text_color: Some(theme.cosmic().warning.on.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_color: Color::TRANSPARENT,
}