Merge branch 'cosmic-design-system' into sctk-cosmic-design-system

This commit is contained in:
Ashley Wulber 2022-12-06 17:03:31 -05:00
commit 9796fa9f15
No known key found for this signature in database
GPG key ID: 5216D4F46A90A820
34 changed files with 850 additions and 1360 deletions

View file

@ -0,0 +1,2 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0

View file

@ -1,3 +1,6 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use iced_core::{Background, Color};
/// The appearance of a [`Expander`](crate::native::expander::Expander).

View file

@ -1,6 +1,12 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
pub mod expander;
pub mod palette;
use std::hash::Hash;
use std::hash::Hasher;
pub use self::palette::Palette;
use cosmic_theme::Component;
@ -52,6 +58,7 @@ pub enum Theme {
}
impl Theme {
#[must_use]
pub fn cosmic(self) -> &'static CosmicTheme {
match self {
Self::Dark => &COSMIC_DARK,
@ -59,6 +66,7 @@ impl Theme {
}
}
#[must_use]
pub fn palette(self) -> Palette {
match self {
Self::Dark => Palette::DARK,
@ -66,6 +74,7 @@ impl Theme {
}
}
#[must_use]
pub fn extended_palette(&self) -> &self::palette::Extended {
match self {
Self::Dark => &self::palette::EXTENDED_DARK,
@ -113,10 +122,11 @@ impl application::StyleSheet for Theme {
*/
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Button {
Deactivated,
Destructive,
Positive,
Primary,
Secondary,
Positive,
Destructive,
Text,
Transparent,
}
@ -137,6 +147,7 @@ impl Button {
Button::Destructive => &cosmic.destructive,
Button::Text => &cosmic.secondary.component,
Button::Transparent => &TRANSPARENT_COMPONENT,
Button::Deactivated => &cosmic.secondary.component,
}
}
}
@ -189,7 +200,11 @@ impl Default for Checkbox {
impl checkbox::StyleSheet for Theme {
type Style = Checkbox;
fn active(&self, style: &Self::Style, is_checked: bool) -> checkbox::Appearance {
fn active(
&self,
style: &Self::Style,
is_checked: bool,
) -> checkbox::Appearance {
let palette = self.extended_palette();
match style {
@ -220,7 +235,11 @@ impl checkbox::StyleSheet for Theme {
}
}
fn hovered(&self, style: &Self::Style, is_checked: bool) -> checkbox::Appearance {
fn hovered(
&self,
style: &Self::Style,
is_checked: bool,
) -> checkbox::Appearance {
let palette = self.extended_palette();
match style {
@ -291,7 +310,7 @@ impl expander::StyleSheet for Theme {
fn appearance(&self, style: Self::Style) -> expander::Appearance {
match style {
Expander::Default => Default::default(),
Expander::Default => expander::Appearance::default(),
Expander::Custom(f) => f(self),
}
}
@ -324,7 +343,7 @@ impl container::StyleSheet for Theme {
fn appearance(&self, style: &Self::Style) -> container::Appearance {
match style {
Container::Transparent => Default::default(),
Container::Transparent => container::Appearance::default(),
Container::Box => {
let palette = self.extended_palette();
@ -368,7 +387,9 @@ impl slider::StyleSheet for Theme {
fn hovered(&self, style: &Self::Style) -> slider::Appearance {
let mut style = self.active(&style);
style.handle.shape = slider::HandleShape::Circle { radius: 16.0 };
style.handle.shape = slider::HandleShape::Circle {
radius: 16.0
};
style.handle.border_width = 6.0;
style.handle.border_color = match self {
Theme::Dark => Color::from_rgba8(0xFF, 0xFF, 0xFF, 0.1),
@ -444,7 +465,7 @@ impl pick_list::StyleSheet for Theme {
impl radio::StyleSheet for Theme {
type Style = ();
fn active(&self, _style: &Self::Style, _is_checked: bool) -> radio::Appearance {
fn active(&self, _style: &Self::Style, is_selected: bool) -> radio::Appearance {
let palette = self.extended_palette();
radio::Appearance {
@ -456,8 +477,8 @@ impl radio::StyleSheet for Theme {
}
}
fn hovered(&self, style: &Self::Style, is_checked: bool) -> radio::Appearance {
let active = self.active(&style, is_checked);
fn hovered(&self, style: &Self::Style, is_selected: bool) -> radio::Appearance {
let active = self.active(&style, is_selected);
let palette = self.extended_palette();
radio::Appearance {
@ -474,7 +495,11 @@ impl radio::StyleSheet for Theme {
impl toggler::StyleSheet for Theme {
type Style = ();
fn active(&self, _style: &Self::Style, is_active: bool) -> toggler::Appearance {
fn active(
&self,
_style: &Self::Style,
is_active: bool,
) -> toggler::Appearance {
let palette = self.palette();
toggler::Appearance {
@ -497,7 +522,11 @@ impl toggler::StyleSheet for Theme {
}
}
fn hovered(&self, style: &Self::Style, is_active: bool) -> toggler::Appearance {
fn hovered(
&self,
style: &Self::Style,
is_active: bool,
) -> toggler::Appearance {
//TODO: grab colors from palette
match self {
Theme::Dark => toggler::Appearance {
@ -515,7 +544,7 @@ impl toggler::StyleSheet for Theme {
Color::from_rgb8(0x54, 0x54, 0x54)
},
..self.active(&style, is_active)
},
}
}
}
}
@ -659,23 +688,42 @@ impl scrollable::StyleSheet for Theme {
#[derive(Default, Clone, Copy)]
pub enum Svg {
/// Apply a custom appearance filter
Custom(fn(&Theme) -> svg::Appearance),
/// No filtering is applied
#[default]
Default,
Accent,
/// Icon fill color will match text color
Symbolic,
/// Icon fill color will match accent color
SymbolicActive,
}
impl Hash for Svg {
fn hash<H: Hasher>(&self, state: &mut H) {
let id = match self {
Svg::Custom(_) => 0,
Svg::Default => 1,
Svg::Symbolic => 2,
Svg::SymbolicActive => 3
};
id.hash(state);
}
}
impl svg::StyleSheet for Theme {
type Style = Svg;
fn appearance(&self, style: Self::Style) -> svg::Appearance {
let cosmic = self.cosmic();
match style {
Svg::Default => Default::default(),
Svg::Default => svg::Appearance::default(),
Svg::Custom(appearance) => appearance(self),
Svg::Accent => svg::Appearance {
fill: Some(cosmic.accent.base.into()),
Svg::Symbolic => svg::Appearance {
fill: Some(self.extended_palette().background.base.text),
},
Svg::SymbolicActive => svg::Appearance {
fill: Some(self.cosmic().accent.base.into()),
},
}
}
@ -707,7 +755,7 @@ impl text::StyleSheet for Theme {
Text::Accent => text::Appearance {
color: Some(self.cosmic().accent.base.into()),
},
Text::Default => Default::default(),
Text::Default => text::Appearance::default(),
Text::Color(c) => text::Appearance { color: Some(c) },
Text::Custom(f) => f(self),
}

View file

@ -1,3 +1,6 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
//TODO: GET CORRECT PALETTE FROM COSMIC-THEME
use iced_core::Color;
@ -85,6 +88,7 @@ lazy_static! {
}
impl Extended {
#[must_use]
pub fn generate(palette: Palette) -> Self {
Self {
background: Background::new(palette.background, palette.text),
@ -118,6 +122,7 @@ pub struct Background {
}
impl Background {
#[must_use]
pub fn new(base: Color, text: Color) -> Self {
let weak = mix(base, text, 0.15);
let strong = mix(base, text, 0.40);
@ -137,6 +142,7 @@ pub struct Primary {
}
impl Primary {
#[must_use]
pub fn generate(base: Color, background: Color, text: Color) -> Self {
let weak = mix(base, background, 0.4);
let strong = deviate(base, 0.1);
@ -156,6 +162,7 @@ pub struct Secondary {
}
impl Secondary {
#[must_use]
pub fn generate(base: Color, text: Color) -> Self {
let base = mix(base, text, 0.2);
let weak = mix(base, text, 0.1);
@ -176,6 +183,7 @@ pub struct Success {
}
impl Success {
#[must_use]
pub fn generate(base: Color, background: Color, text: Color) -> Self {
let weak = mix(base, background, 0.4);
let strong = deviate(base, 0.1);
@ -195,6 +203,7 @@ pub struct Danger {
}
impl Danger {
#[must_use]
pub fn generate(base: Color, background: Color, text: Color) -> Self {
let weak = mix(base, background, 0.4);
let strong = deviate(base, 0.1);