feat: switch to fully custom, Material3-based theme

4 files changed, 46 insertions, 37 deletions

diff --git a/src/panes/code_view.rs b/src/panes/code_view.rs
index 890af8a..5999b8f 100644
--- a/src/panes/code_view.rs
+++ b/src/panes/code_view.rs
@@ -1,27 +1,36 @@
 use iced::advanced::text::highlighter::Format;
-use iced::widget::{Space, button, pane_grid, row, text, text_editor};
-use iced::{Alignment, Background, Border, Font, Length, Theme};
+use iced::border::Radius;
+use iced::widget::{button, pane_grid, row, text, text_editor};
+use iced::{Alignment, Border, Font, Length};
 use iced_custom_highlighter::{Highlight, Highlighter, Scope, Settings};
+use material_theme::Theme;
 
 use super::style;
 use crate::icon;
 use crate::types::{DesignerPane, Message};
 use crate::widget::tip;
 
+// TODO: implement a highlight style for the material theme
 fn highlight_style(theme: &Theme, scope: &Scope) -> Format<Font> {
+    let theme = if theme.is_dark() {
+        iced::Theme::SolarizedDark
+    } else {
+        iced::Theme::SolarizedLight
+    };
+
     match scope {
         Scope::Custom { .. } | Scope::Other => Format {
             color: Some(theme.extended_palette().primary.strong.color),
             font: None,
         },
-        _ => Highlight::default_style(theme, scope),
+        _ => Highlight::default_style(&theme, scope),
     }
 }
 
 pub fn view(
     editor_content: &text_editor::Content,
     is_focused: bool,
-) -> pane_grid::Content<'_, Message> {
+) -> pane_grid::Content<'_, Message, Theme> {
     let title_bar = pane_grid::TitleBar::new(text("Generated Code").center())
         .controls(pane_grid::Controls::dynamic(
             row![
@@ -29,28 +38,28 @@ pub fn view(
                     button(icon::copy())
                         .on_press(Message::CopyCode)
                         .padding([2, 7])
-                        .style(button::text),
+                        .style(material_theme::button::text),
                     "Copy",
                     tip::Position::FollowCursor
                 ),
-                Space::with_width(20),
                 button("Switch to Designer view")
                     .on_press(Message::SwitchPage(DesignerPane::DesignerView))
             ]
+            .spacing(20)
             .align_y(Alignment::Center),
             row![
                 tip(
                     button(icon::copy())
                         .on_press(Message::CopyCode)
                         .padding([2, 7])
-                        .style(button::text),
+                        .style(material_theme::button::text),
                     "Copy",
                     tip::Position::FollowCursor
                 ),
-                Space::with_width(20),
                 button(icon::switch())
                     .on_press(Message::SwitchPage(DesignerPane::DesignerView))
             ]
+            .spacing(20)
             .align_y(Alignment::Center),
         ))
         .padding(10)
@@ -60,25 +69,22 @@ pub fn view(
         text_editor(editor_content)
             .on_action(Message::EditorAction)
             .font(Font::MONOSPACE)
-            .highlight_with::<Highlighter>(
+            .highlight_with::<Highlighter<Theme>>(
                 Settings::new(vec![], highlight_style, "rs"),
                 Highlight::to_format,
             )
             .style(|theme, _| {
-                let palette = theme.extended_palette();
+                let style = material_theme::text_editor::default(
+                    theme,
+                    text_editor::Status::Active,
+                );
+
                 text_editor::Style {
-                    background: Background::Color(
-                        palette.background.base.color,
-                    ),
                     border: Border {
-                        radius: 2.into(),
-                        width: 1.0,
-                        color: palette.background.strong.color,
+                        radius: Radius::default(),
+                        ..style.border
                     },
-                    icon: palette.background.weak.text,
-                    placeholder: palette.background.strong.color,
-                    value: palette.background.base.text,
-                    selection: palette.primary.weak.color,
+                    ..style
                 }
             })
             .height(Length::Fill)
diff --git a/src/panes/designer_view.rs b/src/panes/designer_view.rs
index af72022..0255b40 100644
--- a/src/panes/designer_view.rs
+++ b/src/panes/designer_view.rs
@@ -1,7 +1,8 @@
 use iced::widget::{
     button, center, container, pane_grid, responsive, row, text, themer,
 };
-use iced::{Alignment, Element, Length};
+use iced::{Alignment, Length};
+use material_theme::Theme;
 
 use super::style;
 use crate::icon;
@@ -11,8 +12,8 @@ pub fn view<'a>(
     element_tree: Option<&'a RenderedElement>,
     designer_theme: iced::Theme,
     is_focused: bool,
-) -> pane_grid::Content<'a, Message> {
-    let el_tree: Element<'a, Message> = match element_tree {
+) -> pane_grid::Content<'a, Message, Theme> {
+    let el_tree: iced::Element<'a, Message> = match element_tree {
         Some(tree) => responsive(|size| {
             center(
                 container(tree.clone())
diff --git a/src/panes/element_list.rs b/src/panes/element_list.rs
index 594c203..0e5dbfe 100644
--- a/src/panes/element_list.rs
+++ b/src/panes/element_list.rs
@@ -1,9 +1,10 @@
 use iced::widget::{Column, column, container, pane_grid, text};
-use iced::{Alignment, Element, Length};
+use iced::{Alignment, Length};
 use iced_drop::droppable;
+use material_theme::Theme;
 
 use super::style;
-use crate::types::{ElementName, Message};
+use crate::types::{Element, ElementName, Message};
 
 fn items_list_view<'a>() -> Element<'a, Message> {
     let mut column = Column::new()
@@ -25,7 +26,7 @@ fn items_list_view<'a>() -> Element<'a, Message> {
         .into()
 }
 
-pub fn view<'a>(is_focused: bool) -> pane_grid::Content<'a, Message> {
+pub fn view<'a>(is_focused: bool) -> pane_grid::Content<'a, Message, Theme> {
     let items_list = items_list_view();
     let content = column![items_list]
         .align_x(Alignment::Center)
diff --git a/src/panes/style.rs b/src/panes/style.rs
index 1eefb2d..acca6f9 100644
--- a/src/panes/style.rs
+++ b/src/panes/style.rs
@@ -1,24 +1,25 @@
 use iced::widget::container::Style;
-use iced::{Border, Theme};
+use iced::{Background, Border};
+use material_theme::Theme;
 
 pub fn title_bar(theme: &Theme) -> Style {
-    let palette = theme.extended_palette();
+    let surface = theme.colors().surface;
 
     Style {
-        text_color: Some(palette.background.strong.text),
-        background: Some(palette.background.strong.color.into()),
+        text_color: Some(surface.on_surface),
+        background: Some(Background::Color(surface.surface_container.high)),
         ..Default::default()
     }
 }
 
 pub fn pane_active(theme: &Theme) -> Style {
-    let palette = theme.extended_palette();
+    let surface = theme.colors().surface;
 
     Style {
-        background: Some(palette.background.weak.color.into()),
+        background: Some(Background::Color(surface.surface_container.low)),
         border: Border {
             width: 1.0,
-            color: palette.background.strong.color,
+            color: surface.surface_container.high,
             ..Border::default()
         },
         ..Default::default()
@@ -26,13 +27,13 @@ pub fn pane_active(theme: &Theme) -> Style {
 }
 
 pub fn pane_focused(theme: &Theme) -> Style {
-    let palette = theme.extended_palette();
+    let surface = theme.colors().surface;
 
     Style {
-        background: Some(palette.background.weak.color.into()),
+        background: Some(Background::Color(surface.surface_container.low)),
         border: Border {
-            width: 4.0,
-            color: palette.background.strong.color,
+            width: 2.0,
+            color: surface.surface_container.high,
             ..Border::default()
         },
         ..Default::default()