feat: add shadow color, impl `button::Catalog` and `text::Catalog`

4 files changed, 272 insertions, 8 deletions

diff --git a/src/main.rs b/src/main.rs
index c8a60c6..7728e63 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -35,6 +35,8 @@ use types::{
     Project,
 };
 
+//pub type Element<'a, Message> = iced::Element<'a, Message, OtherTheme>;
+
 fn main() -> Result<(), Box<dyn std::error::Error>> {
     let version = std::env::args()
         .nth(1)
@@ -58,7 +60,9 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
     iced::application(App::title, App::update, App::view)
         .font(icon::FONT)
         .theme(|state| state.theme.value().clone())
+        //.theme(|_| theme::LIGHT.clone())
         .subscription(App::subscription)
+        .antialiasing(true)
         .run_with(move || App::new(config_load))?;
     Ok(())
 }
@@ -445,5 +449,21 @@ impl App {
         Animation::new(&self.theme, content)
             .on_update(Message::SwitchTheme)
             .into()
+        //row![
+        //    button("filled")
+        //        .style(theme::button::filled)
+        //        .on_press(Message::RefreshEditorContent),
+        //    button("elevated")
+        //        .style(theme::button::elevated)
+        //        .on_press(Message::RefreshEditorContent),
+        //    button("filled tonal")
+        //        .style(theme::button::filled_tonal)
+        //        .on_press(Message::RefreshEditorContent),
+        //    button("outlined")
+        //        .style(theme::button::outlined)
+        //        .on_press(Message::RefreshEditorContent),
+        //]
+        //.spacing(10)
+        //.into()
     }
 }
diff --git a/src/theme.rs b/src/theme.rs
index 3e6092b..6fe844c 100644
--- a/src/theme.rs
+++ b/src/theme.rs
@@ -1,3 +1,6 @@
+pub mod button;
+pub mod text;
+
 use std::sync::{Arc, LazyLock};
 
 use iced::Color;
@@ -115,7 +118,7 @@ impl Default for OtherTheme {
 impl Base for OtherTheme {
     fn base(&self) -> iced::theme::Style {
         iced::theme::Style {
-            background_color: self.colorscheme.surface.surface,
+            background_color: self.colorscheme.surface.color,
             text_color: self.colorscheme.surface.on_surface,
         }
     }
@@ -130,6 +133,8 @@ pub struct ColorScheme {
     pub surface: Surface,
     pub inverse: Inverse,
     pub outline: Outline,
+    #[serde(with = "color_serde")]
+    pub shadow: Color,
 }
 
 pub static DARK: LazyLock<OtherTheme> = LazyLock::new(|| {
@@ -143,7 +148,7 @@ pub static LIGHT: LazyLock<OtherTheme> = LazyLock::new(|| {
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
 pub struct Primary {
     #[serde(with = "color_serde")]
-    pub primary: Color,
+    pub color: Color,
     #[serde(with = "color_serde")]
     pub on_primary: Color,
     #[serde(with = "color_serde")]
@@ -155,7 +160,7 @@ pub struct Primary {
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
 pub struct Secondary {
     #[serde(with = "color_serde")]
-    pub secondary: Color,
+    pub color: Color,
     #[serde(with = "color_serde")]
     pub on_secondary: Color,
     #[serde(with = "color_serde")]
@@ -167,7 +172,7 @@ pub struct Secondary {
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
 pub struct Tertiary {
     #[serde(with = "color_serde")]
-    pub tertiary: Color,
+    pub color: Color,
     #[serde(with = "color_serde")]
     pub on_tertiary: Color,
     #[serde(with = "color_serde")]
@@ -179,7 +184,7 @@ pub struct Tertiary {
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
 pub struct Error {
     #[serde(with = "color_serde")]
-    pub error: Color,
+    pub color: Color,
     #[serde(with = "color_serde")]
     pub on_error: Color,
     #[serde(with = "color_serde")]
@@ -191,7 +196,7 @@ pub struct Error {
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
 pub struct Surface {
     #[serde(with = "color_serde")]
-    pub surface: Color,
+    pub color: Color,
     #[serde(with = "color_serde")]
     pub on_surface: Color,
     #[serde(with = "color_serde")]
@@ -226,9 +231,9 @@ pub struct Inverse {
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
 pub struct Outline {
     #[serde(with = "color_serde")]
-    pub outline: Color,
+    pub color: Color,
     #[serde(with = "color_serde")]
-    pub outline_variant: Color,
+    pub variant: Color,
 }
 
 #[derive(Debug, Deserialize)]
diff --git a/src/theme/button.rs b/src/theme/button.rs
new file mode 100644
index 0000000..ddd2c71
--- /dev/null
+++ b/src/theme/button.rs
@@ -0,0 +1,189 @@
+#![allow(dead_code)]
+use iced::widget::button::{Catalog, Status, Style, StyleFn};
+use iced::{Background, Border, Color, Shadow, Vector};
+
+use super::OtherTheme;
+
+impl Catalog for OtherTheme {
+    type Class<'a> = StyleFn<'a, Self>;
+
+    fn default<'a>() -> Self::Class<'a> {
+        Box::new(default)
+    }
+
+    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
+        class(self, status)
+    }
+}
+
+fn default(theme: &OtherTheme, status: Status) -> Style {
+    filled(theme, status)
+}
+
+fn button(
+    foreground: Color,
+    background: Color,
+    background_hover: Color,
+    disabled: Color,
+    shadow_color: Color,
+    shadow_elevation: u8,
+    status: Status,
+) -> Style {
+    let border = Border {
+        radius: 400.0.into(),
+        ..Default::default()
+    };
+
+    let elevation_to_offset = |elevation: u8| {
+        (match elevation {
+            0 => 0.0,
+            1 => 1.0,
+            2 => 3.0,
+            3 => 6.0,
+            4 => 8.0,
+            _ => 12.0,
+        } as f32)
+    };
+
+    match status {
+        Status::Active | Status::Pressed => Style {
+            background: Some(Background::Color(background)),
+            text_color: foreground,
+            border,
+            shadow: Shadow {
+                color: shadow_color,
+                offset: Vector {
+                    x: 0.0,
+                    y: elevation_to_offset(shadow_elevation),
+                },
+                blur_radius: elevation_to_offset(shadow_elevation)
+                    * (1.0
+                        + 0.4_f32.powf(elevation_to_offset(shadow_elevation))),
+            },
+        },
+        Status::Hovered => Style {
+            background: Some(Background::Color(background_hover)),
+            text_color: foreground,
+            border,
+            shadow: Shadow {
+                color: shadow_color,
+                offset: Vector {
+                    x: 0.0,
+                    y: elevation_to_offset(shadow_elevation + 1),
+                },
+                blur_radius: (elevation_to_offset(shadow_elevation + 1))
+                    * (1.0
+                        + 0.4_f32
+                            .powf(elevation_to_offset(shadow_elevation + 1))),
+            },
+        },
+        Status::Disabled => Style {
+            background: Some(Background::Color(Color {
+                a: 0.12,
+                ..disabled
+            })),
+            text_color: Color {
+                a: 0.38,
+                ..disabled
+            },
+            border,
+            ..Default::default()
+        },
+    }
+}
+
+pub fn elevated(theme: &OtherTheme, status: Status) -> Style {
+    let surface_colors = theme.colorscheme.surface;
+
+    let foreground = theme.colorscheme.primary.color;
+    let background = surface_colors.surface_container.low;
+    let disabled = surface_colors.on_surface;
+
+    let shadow_color = theme.colorscheme.shadow;
+
+    button(
+        foreground,
+        background,
+        background,
+        disabled,
+        shadow_color,
+        1,
+        status,
+    )
+}
+
+pub fn filled(theme: &OtherTheme, status: Status) -> Style {
+    let primary_colors = theme.colorscheme.primary;
+
+    let foreground = primary_colors.on_primary;
+    let background = primary_colors.color;
+    let disabled = theme.colorscheme.surface.on_surface;
+
+    let shadow_color = theme.colorscheme.shadow;
+
+    button(
+        foreground,
+        background,
+        background,
+        disabled,
+        shadow_color,
+        0,
+        status,
+    )
+}
+
+pub fn filled_tonal(theme: &OtherTheme, status: Status) -> Style {
+    let secondary_colors = theme.colorscheme.secondary;
+
+    let foreground = secondary_colors.on_secondary_container;
+    let background = secondary_colors.secondary_container;
+    let disabled = theme.colorscheme.surface.on_surface;
+
+    let shadow_color = theme.colorscheme.shadow;
+
+    button(
+        foreground,
+        background,
+        background,
+        disabled,
+        shadow_color,
+        0,
+        status,
+    )
+}
+
+pub fn outlined(theme: &OtherTheme, status: Status) -> Style {
+    let foreground = theme.colorscheme.primary.color;
+    let background = Color::TRANSPARENT;
+    let disabled = theme.colorscheme.surface.on_surface;
+
+    let outline = theme.colorscheme.outline.color;
+
+    let border = match status {
+        Status::Active | Status::Pressed | Status::Hovered => Border {
+            color: outline,
+            width: 1.0,
+            radius: 400.0.into(),
+        },
+        Status::Disabled => Border {
+            color: Color {
+                a: 0.12,
+                ..disabled
+            },
+            width: 1.0,
+            radius: 400.0.into(),
+        },
+    };
+
+    let style = button(
+        foreground,
+        background,
+        background,
+        disabled,
+        Color::TRANSPARENT,
+        0,
+        status,
+    );
+
+    Style { border, ..style }
+}
diff --git a/src/theme/text.rs b/src/theme/text.rs
new file mode 100644
index 0000000..9cbd056
--- /dev/null
+++ b/src/theme/text.rs
@@ -0,0 +1,50 @@
+#![allow(dead_code)]
+use iced::widget::text::{Catalog, Style, StyleFn};
+
+use super::OtherTheme;
+
+impl Catalog for OtherTheme {
+    type Class<'a> = StyleFn<'a, Self>;
+
+    fn default<'a>() -> Self::Class<'a> {
+        Box::new(none)
+    }
+
+    fn style(&self, class: &Self::Class<'_>) -> Style {
+        class(self)
+    }
+}
+
+pub fn none(_: &OtherTheme) -> Style {
+    Style { color: None }
+}
+
+pub fn primary(theme: &OtherTheme) -> Style {
+    Style {
+        color: Some(theme.colorscheme.primary.on_primary),
+    }
+}
+
+pub fn secondary(theme: &OtherTheme) -> Style {
+    Style {
+        color: Some(theme.colorscheme.secondary.on_secondary),
+    }
+}
+
+pub fn tertiary(theme: &OtherTheme) -> Style {
+    Style {
+        color: Some(theme.colorscheme.tertiary.on_tertiary),
+    }
+}
+
+pub fn error(theme: &OtherTheme) -> Style {
+    Style {
+        color: Some(theme.colorscheme.error.on_error),
+    }
+}
+
+pub fn surface(theme: &OtherTheme) -> Style {
+    Style {
+        color: Some(theme.colorscheme.surface.on_surface),
+    }
+}