fix(list_column): match padding/spacing to designs

examples/cosmic/src/window.rs

@@ -17,7 +17,7 @@ use cosmic::{
     prelude::*,
     theme::{self, Theme},
     widget::{
-        button, header_bar, icon, list, nav_bar, nav_bar_toggle, scrollable, segmented_button,
+        button, container, header_bar, icon, nav_bar, nav_bar_toggle, scrollable, segmented_button,
         settings, warning,
     },
     Element,
@@ -231,7 +231,7 @@ impl Window {
     }
 
     fn page_title<Message: 'static>(&self, page: Page) -> Element<Message> {
-        row!(text(page.title()).size(28), horizontal_space(Length::Fill),).into()
+        row!(text(page.title()).size(28), horizontal_space(),).into()
     }
 
     fn is_condensed(&self) -> bool {
@@ -253,10 +253,7 @@ impl Window {
                 .label(page.title())
                 .padding(0)
                 .on_press(Message::from(page)),
-            row!(
+            row!(text(sub_page.title()).size(28), horizontal_space(),),
-                text(sub_page.title()).size(28),
-                horizontal_space(Length::Fill),
-            ),
         )
         .spacing(10)
         .into()
@@ -272,7 +269,7 @@ impl Window {
         sub_page: impl SubPage,
     ) -> Element<Message> {
         iced::widget::Button::new(
-            list::container(
+            container(
                 settings::item_row(vec![
                     icon::from_name(sub_page.icon_name()).size(20).icon().into(),
                     column!(
@@ -281,12 +278,14 @@ impl Window {
                     )
                     .spacing(2)
                     .into(),
-                    horizontal_space(iced::Length::Fill).into(),
+                    horizontal_space().into(),
                     icon::from_name("go-next-symbolic").size(20).icon().into(),
                 ])
                 .spacing(16),
             )
-            .padding([20, 24]),
+            .padding([20, 24])
+            .class(theme::Container::List)
+            .width(Length::Fill),
         )
         .width(Length::Fill)
         .padding(0)
@@ -361,10 +360,7 @@ impl Application for Window {
 
     fn subscription(&self) -> Subscription<Message> {
         let window_break = listen_raw(|event, _| match event {
-            cosmic::iced::Event::Window(
+            cosmic::iced::Event::Window(window::Event::Resized { width, height: _ }) => {
-                _window_id,
-                window::Event::Resized { width, height: _ },
-            ) => {
                 let old_width = WINDOW_WIDTH.load(Ordering::Relaxed);
                 if old_width == 0
                     || old_width < BREAK_POINT && width > BREAK_POINT
@@ -584,7 +580,9 @@ impl Application for Window {
                 header,
                 container(column(vec![
                     warning,
-                    iced::widget::vertical_space(Length::Fixed(12.0)).into(),
+                    iced::widget::vertical_space()
+                        .width(Length::Fixed(12.0))
+                        .into(),
                     content,
                 ]))
                 .style(theme::Container::Background)

src/app/mod.rs

@@ -888,7 +888,7 @@ impl<App: Application> ApplicationExt for App {
                         // Needed to avoid header bar corner gaps for apps without a content container
                         header
                             .apply(container)
-                            .style(move |theme| container::Style {
+                            .class(crate::theme::Container::custom(|theme| container::Style {
                                 background: Some(iced::Background::Color(
                                     theme.cosmic().background.base.into(),
                                 )),
@@ -903,7 +903,7 @@ impl<App: Application> ApplicationExt for App {
                                     ..Default::default()
                                 },
                                 ..Default::default()
-                            })
+                            }))
                             .apply(|w| id_container(w, iced_core::id::Id::new("COSMIC_header")))
                     }
                 })
@@ -914,21 +914,23 @@ impl<App: Application> ApplicationExt for App {
             .push(content)
             .apply(container)
             .padding(if sharp_corners { 0 } else { 1 })
-            .style(move |theme| container::Style {
+            .class(crate::theme::Container::custom(move |theme| {
-                background: if content_container {
+                container::Style {
-                    Some(iced::Background::Color(
+                    background: if content_container {
-                        theme.cosmic().background.base.into(),
+                        Some(iced::Background::Color(
-                    ))
+                            theme.cosmic().background.base.into(),
-                } else {
+                        ))
-                    None
+                    } else {
-                },
+                        None
-                border: iced::Border {
+                    },
-                    color: theme.cosmic().bg_divider().into(),
+                    border: iced::Border {
-                    width: if sharp_corners { 0.0 } else { 1.0 },
+                        color: theme.cosmic().bg_divider().into(),
-                    radius: theme.cosmic().radius_s().into(),
+                        width: if sharp_corners { 0.0 } else { 1.0 },
-                },
+                        radius: theme.cosmic().radius_s().into(),
-                ..Default::default()
+                    },
-            });
+                    ..Default::default()
+                }
+            }));
 
         // Show any current dialog on top and centered over the view content
         // We have to use a popover even without a dialog to keep the tree from changing

src/widget/dialog.rs

@@ -109,7 +109,7 @@ impl<'a, Message: Clone + 'static> From<Dialog<'a, Message>> for Element<'a, Mes
         if let Some(button) = dialog.tertiary_action {
             button_row = button_row.push(button);
         }
-        button_row = button_row.push(widget::horizontal_space().width(Length::Fill));
+        button_row = button_row.push(widget::horizontal_space());
         if let Some(button) = dialog.secondary_action {
             button_row = button_row.push(button);
         }

src/widget/flex_row/widget.rs

@@ -10,7 +10,7 @@ use iced_core::{
     Widget,
 };
 
-/// Responsively generates rows and columns of widgets based on its dimmensions.
+/// Responsively generates rows and columns of widgets based on its dimensions.
 #[derive(Setters)]
 #[must_use]
 pub struct FlexRow<'a, Message> {

src/widget/header_bar.rs

@@ -329,7 +329,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
                     .center_x(Length::Fill)
                     .into()
             } else if self.title.is_empty() {
-                widget::horizontal_space().width(Length::Fill).into()
+                widget::horizontal_space().into()
             } else {
                 self.title_widget()
             })

src/widget/list/column.rs

@@ -4,7 +4,11 @@
 use iced_core::Padding;
 use iced_widget::container::Catalog;
 
-use crate::{theme, widget::divider, Apply, Element};
+use crate::{
+    theme,
+    widget::{container, divider, vertical_space},
+    Apply, Element,
+};
 
 pub fn list_column<'a, Message: 'static>() -> ListColumn<'a, Message> {
     ListColumn::default()
@@ -14,16 +18,16 @@ pub fn list_column<'a, Message: 'static>() -> ListColumn<'a, Message> {
 pub struct ListColumn<'a, Message> {
     spacing: u16,
     padding: Padding,
-    style: crate::theme::Container<'a>,
+    style: theme::Container<'a>,
     children: Vec<Element<'a, Message>>,
 }
 
 impl<'a, Message: 'static> Default for ListColumn<'a, Message> {
     fn default() -> Self {
         Self {
-            spacing: theme::THEME.lock().unwrap().cosmic().spacing.space_xxs,
+            spacing: 0,
             padding: Padding::from(0),
-            style: crate::theme::Container::List,
+            style: theme::Container::List,
             children: Vec::with_capacity(4),
         }
     }
@@ -36,15 +40,24 @@ impl<'a, Message: 'static> ListColumn<'a, Message> {
 
     #[allow(clippy::should_implement_trait)]
     pub fn add(mut self, item: impl Into<Element<'a, Message>>) -> Self {
+        let cosmic_theme::Spacing {
+            space_xxs, space_m, ..
+        } = theme::active().cosmic().spacing;
+
         if !self.children.is_empty() {
-            self.children.push(divider::horizontal::light().into());
+            self.children.push(
+                container(divider::horizontal::default())
+                    .padding([0, 16])
+                    .into(),
+            );
         }
 
         // Ensure a minimum height of 32.
         let list_item = iced::widget::row![
-            crate::widget::container(item).align_y(iced::Alignment::Center),
+            container(item).align_y(iced::Alignment::Center),
-            crate::widget::vertical_space().height(iced::Length::Fixed(32.))
+            vertical_space().height(iced::Length::Fixed(32.))
         ]
+        .padding([space_xxs, space_m])
         .align_y(iced::Alignment::Center);
 
         self.children.push(list_item.into());
@@ -72,9 +85,10 @@ impl<'a, Message: 'static> ListColumn<'a, Message> {
         crate::widget::column::with_children(self.children)
             .spacing(self.spacing)
             .padding(self.padding)
-            .apply(super::container)
+            .apply(container)
-            .padding([self.spacing, 8])
+            .padding([self.spacing, 0])
             .class(self.style)
+            .width(iced::Length::Fill)
             .into()
     }
 }

src/widget/list/mod.rs

@@ -4,15 +4,3 @@
 pub mod column;
 
 pub use self::column::{list_column, ListColumn};
-
-use crate::widget::Container;
-use crate::Element;
-
-pub fn container<'a, Message>(
-    content: impl Into<Element<'a, Message>>,
-) -> Container<'a, Message, crate::Theme, crate::Renderer> {
-    super::container(content)
-        .padding([16, 6])
-        .class(crate::theme::Container::List)
-        .width(iced::Length::Fill)
-}

src/widget/menu/menu_tree.rs

@@ -248,7 +248,7 @@ where
                     let key = find_key(&action, key_binds);
                     let mut items = vec![
                         widget::text(label).into(),
-                        widget::horizontal_space().width(Length::Fill).into(),
+                        widget::horizontal_space().into(),
                         widget::text(key).into(),
                     ];
 
@@ -266,7 +266,7 @@ where
 
                     let mut items = vec![
                         widget::text(label).into(),
-                        widget::horizontal_space().width(Length::Fill).into(),
+                        widget::horizontal_space().into(),
                         widget::text(key).into(),
                     ];
 
@@ -298,7 +298,7 @@ where
                         },
                         widget::Space::with_width(spacing.space_xxs).into(),
                         widget::text(label).align_x(iced::Alignment::Start).into(),
-                        widget::horizontal_space().width(Length::Fill).into(),
+                        widget::horizontal_space().into(),
                         widget::text(key).into(),
                     ];
 
@@ -313,7 +313,7 @@ where
                     trees.push(MenuTree::<Message, Renderer>::with_children(
                         menu_button(vec![
                             widget::text(label).into(),
-                            widget::horizontal_space().width(Length::Fill).into(),
+                            widget::horizontal_space().into(),
                             widget::icon::from_name("pan-end-symbolic")
                                 .size(16)
                                 .icon()

src/widget/settings/item.rs

@@ -21,7 +21,7 @@ pub fn item<'a, Message: 'static>(
 ) -> Row<'a, Message> {
     item_row(vec![
         text(title).wrapping(Wrapping::Word).into(),
-        horizontal_space().width(iced::Length::Fill).into(),
+        horizontal_space().into(),
         widget.into(),
     ])
 }
@@ -30,13 +30,9 @@ pub fn item<'a, Message: 'static>(
 #[must_use]
 #[allow(clippy::module_name_repetitions)]
 pub fn item_row<Message>(children: Vec<Element<Message>>) -> Row<Message> {
-    let cosmic_theme::Spacing {
-        space_s, space_xs, ..
-    } = theme::THEME.lock().unwrap().cosmic().spacing;
     row::with_children(children)
-        .spacing(space_xs)
+        .spacing(theme::active().cosmic().space_xs())
         .align_y(iced::Alignment::Center)
-        .padding([0, space_s])
 }
 
 /// A settings item aligned in a flex row
@@ -57,12 +53,8 @@ pub fn flex_item<'a, Message: 'static>(
 /// A settings item aligned in a flex row
 #[allow(clippy::module_name_repetitions)]
 pub fn flex_item_row<Message>(children: Vec<Element<Message>>) -> FlexRow<Message> {
-    let cosmic_theme::Spacing {
-        space_s, space_xs, ..
-    } = theme::THEME.lock().unwrap().cosmic().spacing;
     flex_row(children)
-        .padding([0, space_s])
+        .spacing(theme::active().cosmic().space_xs())
-        .spacing(space_xs)
         .min_item_width(200.0)
         .justify_items(iced::Alignment::Center)
         .justify_content(AlignContent::SpaceBetween)

src/widget/settings/mod.rs

@@ -13,8 +13,5 @@ use crate::{theme, Element};
 /// A column with a predefined style for creating a settings panel
 #[must_use]
 pub fn view_column<Message: 'static>(children: Vec<Element<Message>>) -> Column<Message> {
-    let space_m = theme::THEME.lock().unwrap().cosmic().spacing.space_m;
+    column::with_children(children).spacing(theme::active().cosmic().space_m())
-    column::with_children(children)
-        .spacing(space_m)
-        .padding([0, space_m])
 }

src/widget/settings/section.rs

@@ -1,7 +1,6 @@
 // Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
-use crate::ext::CollectionWidget;
 use crate::widget::{column, text, ListColumn};
 use crate::Element;
 use std::borrow::Cow;