Merge branch 'cosmic-design-system' into sctk-cosmic-design-system
This commit is contained in:
commit
9796fa9f15
34 changed files with 850 additions and 1360 deletions
|
|
@ -0,0 +1,2 @@
|
|||
// Copyright 2022 System76 <info@system76.com>
|
||||
// SPDX-License-Identifier: MPL-2.0
|
||||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue