WIP: libscosmic reskin
This commit is contained in:
Will McCormick
parent
487b7b299d
commit
3bfc65d634
13 changed files with 326 additions and 254 deletions
|
|
@ -154,9 +154,9 @@ pub fn appearance(
|
|||
|
||||
if selected {
|
||||
appearance.background =
|
||||
Some(Background::Color(cosmic.primary.component.hover.into()));
|
||||
appearance.icon_color = Some(cosmic.accent.base.into());
|
||||
appearance.text_color = Some(cosmic.accent_text_color().into());
|
||||
Some(Background::Color(crate::theme::STATE_DEFAULT_BG));
|
||||
appearance.icon_color = Some(crate::theme::STATE_DEFAULT_COLOR);
|
||||
appearance.text_color = Some(crate::theme::STATE_DEFAULT_COLOR);
|
||||
} else {
|
||||
appearance.background = Some(Background::Color(background));
|
||||
appearance.icon_color = icon;
|
||||
|
|
@ -254,7 +254,15 @@ impl Catalog for crate::Theme {
|
|||
Some(component.on.into())
|
||||
};
|
||||
|
||||
(component.hover.into(), text_color, text_color)
|
||||
if matches!(style, Button::ListItem) {
|
||||
(
|
||||
crate::theme::STATE_DEFAULT_BG,
|
||||
text_color,
|
||||
text_color,
|
||||
)
|
||||
} else {
|
||||
(component.hover.into(), text_color, text_color)
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
@ -275,7 +283,15 @@ impl Catalog for crate::Theme {
|
|||
Some(component.on.into())
|
||||
};
|
||||
|
||||
(component.pressed.into(), text_color, text_color)
|
||||
if matches!(style, Button::ListItem) {
|
||||
(
|
||||
crate::theme::STATE_DEFAULT_BG,
|
||||
text_color,
|
||||
text_color,
|
||||
)
|
||||
} else {
|
||||
(component.pressed.into(), text_color, text_color)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
// SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
use crate::Theme;
|
||||
use crate::theme::{STATE_DEFAULT_BG, STATE_DEFAULT_COLOR};
|
||||
use crate::widget::dropdown;
|
||||
use iced::{Background, Color};
|
||||
use iced::Background;
|
||||
|
||||
impl dropdown::menu::StyleSheet for Theme {
|
||||
type Style = ();
|
||||
|
|
@ -16,13 +17,13 @@ impl dropdown::menu::StyleSheet for Theme {
|
|||
background: Background::Color(cosmic.background.component.base.into()),
|
||||
border_width: 0.0,
|
||||
border_radius: cosmic.corner_radii.radius_m.into(),
|
||||
border_color: Color::TRANSPARENT,
|
||||
border_color: iced::Color::TRANSPARENT,
|
||||
|
||||
hovered_text_color: cosmic.on_bg_color().into(),
|
||||
hovered_background: Background::Color(cosmic.primary.component.hover.into()),
|
||||
hovered_background: Background::Color(STATE_DEFAULT_BG),
|
||||
|
||||
selected_text_color: cosmic.accent_text_color().into(),
|
||||
selected_background: Background::Color(cosmic.primary.component.hover.into()),
|
||||
selected_text_color: STATE_DEFAULT_COLOR,
|
||||
selected_background: Background::Color(STATE_DEFAULT_BG),
|
||||
|
||||
description_color: cosmic.primary.component.on_disabled.into(),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -599,11 +599,11 @@ impl iced_container::Catalog for Theme {
|
|||
Container::ContentArea => iced_container::Style {
|
||||
icon_color: Some(Color::from(cosmic.background.on)),
|
||||
text_color: Some(Color::from(cosmic.background.on)),
|
||||
background: Some(iced::Background::Color(cosmic.background.base.into())),
|
||||
background: Some(iced::Background::Color(Color::from_rgb8(245, 245, 245))),
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_s.into(),
|
||||
width: 1.0,
|
||||
color: cosmic.background.divider.into(),
|
||||
radius: [0.0; 4].into(),
|
||||
width: 0.0,
|
||||
color: Color::TRANSPARENT,
|
||||
},
|
||||
shadow: Shadow::default(),
|
||||
},
|
||||
|
|
@ -693,56 +693,42 @@ impl slider::Catalog for Theme {
|
|||
|
||||
fn style(&self, class: &Self::Class<'_>, status: slider::Status) -> slider::Style {
|
||||
let cosmic: &cosmic_theme::Theme = self.cosmic();
|
||||
let hc = self.theme_type.is_high_contrast();
|
||||
let is_dark = self.theme_type.is_dark();
|
||||
|
||||
let mut appearance = match class {
|
||||
Slider::Standard =>
|
||||
//TODO: no way to set rail thickness
|
||||
{
|
||||
let (active_track, inactive_track) = if hc {
|
||||
(
|
||||
cosmic.accent_text_color(),
|
||||
if is_dark {
|
||||
cosmic.palette.neutral_5
|
||||
} else {
|
||||
cosmic.palette.neutral_3
|
||||
},
|
||||
)
|
||||
} else {
|
||||
(cosmic.accent.base, cosmic.palette.neutral_6)
|
||||
};
|
||||
let empty_track: Color = Color::from_rgb8(224, 224, 224);
|
||||
slider::Style {
|
||||
rail: Rail {
|
||||
backgrounds: (
|
||||
Background::Color(active_track.into()),
|
||||
Background::Color(inactive_track.into()),
|
||||
Background::Color(crate::theme::STATE_DEFAULT_COLOR),
|
||||
Background::Color(empty_track),
|
||||
),
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_xs.into(),
|
||||
color: if hc && !is_dark {
|
||||
self.current_container().component.border.into()
|
||||
} else {
|
||||
Color::TRANSPARENT
|
||||
},
|
||||
width: if hc && !is_dark { 1. } else { 0. },
|
||||
color: Color::TRANSPARENT,
|
||||
width: 0.0,
|
||||
},
|
||||
width: 4.0,
|
||||
},
|
||||
|
||||
handle: slider::Handle {
|
||||
shape: slider::HandleShape::Rectangle {
|
||||
height: 20,
|
||||
width: 20,
|
||||
border_radius: cosmic.corner_radii.radius_m.into(),
|
||||
shape: slider::HandleShape::Circle {
|
||||
radius: 8.0,
|
||||
},
|
||||
border_color: Color::from_rgba8(0, 0, 0, 0.12),
|
||||
border_width: 1.0,
|
||||
background: Background::Color(Color::WHITE),
|
||||
shadow: Shadow {
|
||||
color: Color::from_rgba8(0, 0, 0, 0.10),
|
||||
offset: Vector::new(0.0, 1.0),
|
||||
blur_radius: 3.0,
|
||||
},
|
||||
border_color: Color::TRANSPARENT,
|
||||
border_width: 0.0,
|
||||
background: Background::Color(cosmic.accent.base.into()),
|
||||
},
|
||||
|
||||
breakpoint: slider::Breakpoint {
|
||||
color: cosmic.on_bg_color().into(),
|
||||
color: crate::theme::STATE_DEFAULT_COLOR,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -752,34 +738,33 @@ impl slider::Catalog for Theme {
|
|||
slider::Status::Active => appearance,
|
||||
slider::Status::Hovered => match class {
|
||||
Slider::Standard => {
|
||||
appearance.handle.shape = slider::HandleShape::Rectangle {
|
||||
height: 26,
|
||||
width: 26,
|
||||
border_radius: cosmic.corner_radii.radius_m.into(),
|
||||
appearance.handle.shape = slider::HandleShape::Circle {
|
||||
radius: 10.0,
|
||||
};
|
||||
appearance.handle.border_width = 1.0;
|
||||
appearance.handle.border_color = Color::from_rgba8(0, 0, 0, 0.12);
|
||||
appearance.handle.shadow = Shadow {
|
||||
color: Color::from_rgba8(0, 0, 0, 0.12),
|
||||
offset: Vector::new(0.0, 1.0),
|
||||
blur_radius: 4.0,
|
||||
};
|
||||
appearance.handle.border_width = 3.0;
|
||||
appearance.handle.border_color =
|
||||
self.cosmic().palette.neutral_10.with_alpha(0.1).into();
|
||||
appearance
|
||||
}
|
||||
Slider::Custom { hovered, .. } => hovered(self),
|
||||
},
|
||||
slider::Status::Dragged => match class {
|
||||
Slider::Standard => {
|
||||
let mut style = {
|
||||
appearance.handle.shape = slider::HandleShape::Rectangle {
|
||||
height: 26,
|
||||
width: 26,
|
||||
border_radius: cosmic.corner_radii.radius_m.into(),
|
||||
};
|
||||
appearance.handle.border_width = 3.0;
|
||||
appearance.handle.border_color =
|
||||
self.cosmic().palette.neutral_10.with_alpha(0.1).into();
|
||||
appearance
|
||||
appearance.handle.shape = slider::HandleShape::Circle {
|
||||
radius: 10.0,
|
||||
};
|
||||
style.handle.border_color =
|
||||
self.cosmic().palette.neutral_10.with_alpha(0.2).into();
|
||||
style
|
||||
appearance.handle.border_width = 1.0;
|
||||
appearance.handle.border_color = Color::from_rgba8(0, 0, 0, 0.12);
|
||||
appearance.handle.shadow = Shadow {
|
||||
color: Color::from_rgba8(0, 0, 0, 0.12),
|
||||
offset: Vector::new(0.0, 1.0),
|
||||
blur_radius: 4.0,
|
||||
};
|
||||
appearance
|
||||
}
|
||||
Slider::Custom { dragging, .. } => dragging(self),
|
||||
},
|
||||
|
|
@ -802,8 +787,8 @@ impl menu::Catalog for Theme {
|
|||
radius: cosmic.corner_radii.radius_m.into(),
|
||||
..Default::default()
|
||||
},
|
||||
selected_text_color: cosmic.accent_text_color().into(),
|
||||
selected_background: Background::Color(cosmic.background.component.hover.into()),
|
||||
selected_text_color: crate::theme::STATE_DEFAULT_COLOR,
|
||||
selected_background: Background::Color(crate::theme::STATE_DEFAULT_BG),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,10 +71,41 @@ impl StyleSheet for Theme {
|
|||
}
|
||||
}
|
||||
|
||||
SegmentedButton::NavBar | SegmentedButton::FileNav => Appearance {
|
||||
active_width: 0.0,
|
||||
..horizontal::tab_bar(cosmic, container)
|
||||
},
|
||||
SegmentedButton::NavBar | SegmentedButton::FileNav => {
|
||||
let rad_m = cosmic.corner_radii.radius_m;
|
||||
let item_border = ItemAppearance {
|
||||
border: Border {
|
||||
radius: rad_m.into(),
|
||||
..Default::default()
|
||||
},
|
||||
};
|
||||
let active = ItemStatusAppearance {
|
||||
background: Some(Background::Color(crate::theme::STATE_DEFAULT_BG)),
|
||||
first: item_border,
|
||||
middle: item_border,
|
||||
last: item_border,
|
||||
text_color: crate::theme::STATE_DEFAULT_COLOR,
|
||||
};
|
||||
let inactive = ItemStatusAppearance {
|
||||
background: None,
|
||||
first: item_border,
|
||||
middle: item_border,
|
||||
last: item_border,
|
||||
text_color: container.component.on.into(),
|
||||
};
|
||||
Appearance {
|
||||
active_width: 0.0,
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_0.into(),
|
||||
..Default::default()
|
||||
},
|
||||
inactive,
|
||||
hover: inactive,
|
||||
pressed: inactive,
|
||||
active,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
SegmentedButton::TabBar => horizontal::tab_bar(cosmic, container),
|
||||
|
||||
|
|
@ -126,10 +157,51 @@ impl StyleSheet for Theme {
|
|||
}
|
||||
}
|
||||
|
||||
SegmentedButton::NavBar | SegmentedButton::FileNav => Appearance {
|
||||
active_width: 0.0,
|
||||
..vertical::tab_bar(cosmic, container)
|
||||
},
|
||||
SegmentedButton::NavBar | SegmentedButton::FileNav => {
|
||||
let rad_m = cosmic.corner_radii.radius_m;
|
||||
let active = ItemStatusAppearance {
|
||||
background: Some(Background::Color(crate::theme::STATE_DEFAULT_BG)),
|
||||
first: ItemAppearance {
|
||||
border: Border {
|
||||
radius: rad_m.into(),
|
||||
..Default::default()
|
||||
},
|
||||
},
|
||||
middle: ItemAppearance {
|
||||
border: Border {
|
||||
radius: rad_m.into(),
|
||||
..Default::default()
|
||||
},
|
||||
},
|
||||
last: ItemAppearance {
|
||||
border: Border {
|
||||
radius: rad_m.into(),
|
||||
..Default::default()
|
||||
},
|
||||
},
|
||||
text_color: crate::theme::STATE_DEFAULT_COLOR,
|
||||
};
|
||||
let inactive = ItemStatusAppearance {
|
||||
background: None,
|
||||
first: active.first,
|
||||
middle: active.middle,
|
||||
last: active.last,
|
||||
text_color: container.component.on.into(),
|
||||
};
|
||||
let hover_state = inactive;
|
||||
Appearance {
|
||||
active_width: 0.0,
|
||||
border: Border {
|
||||
radius: cosmic.corner_radii.radius_0.into(),
|
||||
..Default::default()
|
||||
},
|
||||
inactive,
|
||||
hover: hover_state,
|
||||
pressed: hover_state,
|
||||
active,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
SegmentedButton::TabBar => vertical::tab_bar(cosmic, container),
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue