wip: use CosmicContainer

src/widget/cosmic_container.rs

@@ -0,0 +1,228 @@
+use cosmic_theme::LayeredTheme;
+use iced::widget::Container;
+use iced_native::alignment;
+use iced_native::event::{self, Event};
+use iced_native::layout;
+use iced_native::mouse;
+use iced_native::overlay;
+use iced_native::renderer;
+use iced_native::widget::{Operation, Tree};
+use iced_native::{Clipboard, Element, Layout, Length, Padding, Point, Rectangle, Shell, Widget};
+pub use iced_style::container::{Appearance, StyleSheet};
+
+pub fn cosmic_container<'a, Message: 'static, T>(
+    content: T,
+    layer: cosmic_theme::Layer,
+) -> CosmicContainer<'a, Message, crate::Renderer>
+where
+    T: Into<Element<'a, Message, crate::Renderer>>,
+{
+    CosmicContainer::new(content, layer)
+}
+
+/// An element decorating some content.
+///
+/// It is normally used for alignment purposes.
+#[allow(missing_debug_implementations)]
+pub struct CosmicContainer<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet + Clone + cosmic_theme::LayeredTheme,
+{
+    layer: cosmic_theme::Layer,
+    container: Container<'a, Message, Renderer>,
+}
+
+impl<'a, Message, Renderer> CosmicContainer<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet + Clone + cosmic_theme::LayeredTheme,
+{
+    /// Creates an empty [`Container`].
+    pub(crate) fn new<T>(content: T, layer: cosmic_theme::Layer) -> Self
+    where
+        T: Into<Element<'a, Message, Renderer>>,
+    {
+        CosmicContainer {
+            layer,
+            container: Container::new(content),
+        }
+    }
+
+    /// Sets the [`Padding`] of the [`Container`].
+    #[must_use]
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.container = self.container.padding(padding);
+        self
+    }
+
+    /// Sets the width of the [`self.`].
+    #[must_use]
+    pub fn width(mut self, width: Length) -> Self {
+        self.container = self.container.width(width);
+        self
+    }
+
+    /// Sets the height of the [`Container`].
+    #[must_use]
+    pub fn height(mut self, height: Length) -> Self {
+        self.container = self.container.height(height);
+        self
+    }
+
+    /// Sets the maximum width of the [`Container`].
+    #[must_use]
+    pub fn max_width(mut self, max_width: u32) -> Self {
+        self.container = self.container.max_width(max_width);
+        self
+    }
+
+    /// Sets the maximum height of the [`Container`] in pixels.
+    #[must_use]
+    pub fn max_height(mut self, max_height: u32) -> Self {
+        self.container = self.container.max_height(max_height);
+        self
+    }
+
+    /// Sets the content alignment for the horizontal axis of the [`Container`].
+    #[must_use]
+    pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
+        self.container = self.container.align_x(alignment);
+        self
+    }
+
+    /// Sets the content alignment for the vertical axis of the [`Container`].
+    #[must_use]
+    pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
+        self.container = self.container.align_y(alignment);
+        self
+    }
+
+    /// Centers the contents in the horizontal axis of the [`Container`].
+    #[must_use]
+    pub fn center_x(mut self) -> Self {
+        self.container = self.container.center_x();
+        self
+    }
+
+    /// Centers the contents in the vertical axis of the [`Container`].
+    #[must_use]
+    pub fn center_y(mut self) -> Self {
+        self.container = self.container.center_y();
+        self
+    }
+
+    /// Sets the style of the [`Container`].
+    #[must_use]
+    pub fn style(mut self, style: impl Into<<Renderer::Theme as StyleSheet>::Style>) -> Self {
+        self.container = self.container.style(style);
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for CosmicContainer<'a, Message, Renderer>
+where
+    Renderer: iced_native::Renderer,
+    Renderer::Theme: StyleSheet + Clone + cosmic_theme::LayeredTheme,
+{
+    fn children(&self) -> Vec<Tree> {
+        self.container.children()
+    }
+
+    fn diff(&self, tree: &mut Tree) {
+        self.container.diff(tree);
+    }
+
+    fn width(&self) -> Length {
+        Widget::width(&self.container)
+    }
+
+    fn height(&self) -> Length {
+        Widget::height(&self.container)
+    }
+
+    fn layout(&self, renderer: &Renderer, limits: &layout::Limits) -> layout::Node {
+        self.container.layout(renderer, &limits)
+    }
+
+    fn operate(&self, tree: &mut Tree, layout: Layout<'_>, operation: &mut dyn Operation<Message>) {
+        self.container.operate(tree, layout, operation);
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> event::Status {
+        self.container.on_event(
+            tree,
+            event,
+            layout,
+            cursor_position,
+            renderer,
+            clipboard,
+            shell,
+        )
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> mouse::Interaction {
+        self.container
+            .mouse_interaction(tree, layout, cursor_position, viewport, renderer)
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        renderer_style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        viewport: &Rectangle,
+    ) {
+        let mut theme = theme.clone();
+        theme.set_layer(self.layer);
+        self.container.draw(
+            tree,
+            renderer,
+            &theme,
+            renderer_style,
+            layout,
+            cursor_position,
+            viewport,
+        );
+    }
+
+    fn overlay<'b>(
+        &'b self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+        self.container.overlay(tree, layout, renderer)
+    }
+}
+
+impl<'a, Message, Renderer> From<CosmicContainer<'a, Message, Renderer>>
+    for Element<'a, Message, Renderer>
+where
+    Message: 'a,
+    Renderer: 'a + iced_native::Renderer,
+    Renderer::Theme: StyleSheet + Clone + cosmic_theme::LayeredTheme,
+{
+    fn from(column: CosmicContainer<'a, Message, Renderer>) -> Element<'a, Message, Renderer> {
+        Element::new(column)
+    }
+}

src/widget/list/column.rs

@@ -60,9 +60,10 @@ impl<'a, Message: 'static> From<ListColumn<'a, Message>> for Element<'a, Message
 #[allow(clippy::trivially_copy_pass_by_ref)]
 pub fn style(theme: &crate::Theme) -> iced::widget::container::Appearance {
     let cosmic = &theme.cosmic();
+    let container = cosmic.current_container();
     iced::widget::container::Appearance {
-        text_color: Some(cosmic.on.into()),
-        background: Some(Background::Color(cosmic.basic.base.into())),
+        text_color: Some(container.on.into()),
+        background: Some(Background::Color(container.base.into())),
         border_radius: 8.0,
         border_width: 0.0,
         border_color: Color::TRANSPARENT,

src/widget/mod.rs

@@ -56,6 +56,9 @@ pub use view_switcher::vertical as vertical_view_switcher;
 pub mod warning;
 pub use warning::*;
 
+pub mod cosmic_container;
+pub use cosmic_container::*;
+
 /// An element to distinguish a boundary between two elements.
 pub mod divider {
     /// Horizontal variant of a divider.

src/widget/nav_bar.rs

@@ -43,7 +43,7 @@ where
 pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance {
     let cosmic = &theme.cosmic();
     iced_style::container::Appearance {
-        text_color: Some(cosmic.on.into()),
+        text_color: Some(cosmic.on_bg_color().into()),
         background: Some(Background::Color(cosmic.primary.base.into())),
         border_radius: 8.0,
         border_width: 0.0,

src/widget/search/field.rs

@@ -79,9 +79,11 @@ fn clear_button<Message: 'static>() -> Button<'static, Message, Renderer> {
 #[allow(clippy::trivially_copy_pass_by_ref)]
 fn active_style(theme: &crate::Theme) -> container::Appearance {
     let cosmic = &theme.cosmic();
+    let mut neutral_7 = cosmic.palette.neutral_7;
+    neutral_7.alpha = 0.25;
     iced::widget::container::Appearance {
-        text_color: Some(cosmic.on.into()),
-        background: Some(Background::Color(cosmic.divider.into())),
+        text_color: Some(cosmic.palette.neutral_9.into()),
+        background: Some(Background::Color(neutral_7.into())),
         border_radius: 24.0,
         border_width: 2.0,
         border_color: cosmic.accent.focus.into(),

src/widget/spin_button/mod.rs

@@ -97,11 +97,13 @@ impl<'a, Message: 'static> From<SpinButton<'a, Message>> for Element<'a, Message
 
 #[allow(clippy::trivially_copy_pass_by_ref)]
 fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance {
-    let basic = &theme.cosmic().basic;
+    let basic = &theme.cosmic();
+    let mut neutral_10 = basic.palette.neutral_10;
+    neutral_10.alpha = 0.1;
     let accent = &theme.cosmic().accent;
     iced_style::container::Appearance {
-        text_color: None,
-        background: Some(Background::Color(basic.base.into())),
+        text_color: Some(basic.palette.neutral_10.into()),
+        background: Some(Background::Color(neutral_10.into())),
         border_radius: 24.0,
         border_width: 0.0,
         border_color: accent.base.into(),