improv(appearance): checkmark for selected font

Also includes using spacing variables in more places, and some tweaks to more closely match designs in code (no visual changes), like the 8 padding around icons in `page_list_item`.

Cargo.lock

@@ -1457,7 +1457,7 @@ dependencies = [
 [[package]]
 name = "cosmic-config"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "atomicwrites",
  "cosmic-config-derive",
@@ -1479,7 +1479,7 @@ dependencies = [
 [[package]]
 name = "cosmic-config-derive"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "quote",
  "syn 1.0.109",
@@ -1734,7 +1734,7 @@ dependencies = [
 [[package]]
 name = "cosmic-theme"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "almost",
  "cosmic-config",
@@ -3085,7 +3085,7 @@ dependencies = [
 [[package]]
 name = "iced"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "dnd",
  "iced_accessibility",
@@ -3104,7 +3104,7 @@ dependencies = [
 [[package]]
 name = "iced_accessibility"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "accesskit",
  "accesskit_unix",
@@ -3113,7 +3113,7 @@ dependencies = [
 [[package]]
 name = "iced_core"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "bitflags 2.6.0",
  "dnd",
@@ -3135,7 +3135,7 @@ dependencies = [
 [[package]]
 name = "iced_futures"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "futures",
  "iced_core",
@@ -3148,7 +3148,7 @@ dependencies = [
 [[package]]
 name = "iced_graphics"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "bitflags 2.6.0",
  "bytemuck",
@@ -3172,7 +3172,7 @@ dependencies = [
 [[package]]
 name = "iced_renderer"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "iced_graphics",
  "iced_tiny_skia",
@@ -3184,7 +3184,7 @@ dependencies = [
 [[package]]
 name = "iced_runtime"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "dnd",
  "iced_accessibility",
@@ -3198,7 +3198,7 @@ dependencies = [
 [[package]]
 name = "iced_sctk"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "enum-repr",
  "float-cmp",
@@ -3224,7 +3224,7 @@ dependencies = [
 [[package]]
 name = "iced_style"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "iced_core",
  "once_cell",
@@ -3234,7 +3234,7 @@ dependencies = [
 [[package]]
 name = "iced_tiny_skia"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "bytemuck",
  "cosmic-text",
@@ -3251,7 +3251,7 @@ dependencies = [
 [[package]]
 name = "iced_wgpu"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "as-raw-xcb-connection",
  "bitflags 2.6.0",
@@ -3280,7 +3280,7 @@ dependencies = [
 [[package]]
 name = "iced_widget"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "dnd",
  "iced_renderer",
@@ -3297,7 +3297,7 @@ dependencies = [
 [[package]]
 name = "iced_winit"
 version = "0.12.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "dnd",
  "iced_graphics",
@@ -4109,7 +4109,7 @@ checksum = "561d97a539a36e26a9a5fad1ea11a3039a67714694aaa379433e580854bc3dc5"
 [[package]]
 name = "libcosmic"
 version = "0.1.0"
-source = "git+https://github.com/pop-os/libcosmic#173a9557c2f03bc5fda132e884c11bf8661256ff"
+source = "git+https://github.com/pop-os/libcosmic#100f75f88edc5b602e29587fd6698dbf0038901d"
 dependencies = [
  "apply",
  "ashpd 0.9.1",

cosmic-settings/src/pages/desktop/appearance/font_config.rs

@@ -1,12 +1,15 @@
 // Copyright 2024 System76 <info@system76.com>
 // SPDX-License-Identifier: GPL-3.0-only
 
+use std::rc::Rc;
 use std::sync::Arc;
 
 use cosmic::{
     config::{CosmicTk, FontConfig},
     iced::Length,
     iced_core::text::Wrap,
+    iced_style::svg::Appearance,
+    theme,
     widget::{self, settings},
     Apply, Command, Element,
 };
@@ -66,17 +69,35 @@ pub fn load_font_families() -> (Vec<Arc<str>>, Vec<Arc<str>>) {
 pub fn selection_context<'a>(
     families: &'a [Arc<str>],
     search: &'a str,
+    current_font: &'a str,
     system: bool,
 ) -> Element<'a, super::Message> {
+    let space_l = theme::active().cosmic().spacing.space_l;
+
+    let svg_accent = Rc::new(|theme: &cosmic::Theme| {
+        let color = theme.cosmic().accent_color().into();
+        Appearance { color: Some(color) }
+    });
+
     let search_input = widget::search_input(fl!("type-to-search"), search)
         .on_input(super::Message::FontSearch)
         .on_clear(super::Message::FontSearch(String::new()));
 
     let list = families.iter().fold(widget::list_column(), |list, family| {
+        let selected = &**family == current_font;
         list.add(
             settings::item_row(vec![
                 widget::text::body(&**family).wrap(Wrap::Word).into(),
                 widget::horizontal_space(Length::Fill).into(),
+                if selected {
+                    widget::icon::from_name("object-select-symbolic")
+                        .size(16)
+                        .icon()
+                        .style(cosmic::theme::Svg::Custom(svg_accent.clone()))
+                        .into()
+                } else {
+                    widget::horizontal_space(16).into()
+                },
             ])
             .apply(widget::container)
             .style(cosmic::theme::Container::List)
@@ -88,7 +109,7 @@ pub fn selection_context<'a>(
 
     widget::column()
         .padding([2, 0])
-        .spacing(32)
+        .spacing(space_l)
         .push(search_input)
         .push(list)
         .into()

cosmic-settings/src/pages/desktop/appearance/mod.rs

@@ -22,8 +22,7 @@ use cosmic::widget::{
     button, color_picker::ColorPickerUpdate, container, flex_row, horizontal_space, radio, row,
     settings, spin_button, text, ColorPickerModel,
 };
-use cosmic::Apply;
+use cosmic::{command, Apply, Command, Element};
-use cosmic::{command, Command, Element};
 use cosmic_panel_config::CosmicPanelConfig;
 use cosmic_settings_page::Section;
 use cosmic_settings_page::{self as page, section};
@@ -1466,8 +1465,9 @@ impl page::Page<crate::pages::Message> for Page {
                 } else {
                     &self.font_filter
                 };
+                let current_font = cosmic::config::interface_font().family.as_str();
 
-                font_config::selection_context(filter, &self.font_search, true)
+                font_config::selection_context(filter, &self.font_search, current_font, true)
                     .map(crate::pages::Message::Appearance)
             }
 
@@ -1477,8 +1477,9 @@ impl page::Page<crate::pages::Message> for Page {
                 } else {
                     &self.font_filter
                 };
+                let current_font = cosmic::config::monospace_font().family.as_str();
 
-                font_config::selection_context(filter, &self.font_search, false)
+                font_config::selection_context(filter, &self.font_search, current_font, false)
                     .map(crate::pages::Message::Appearance)
             }
 
@@ -1516,6 +1517,10 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
         .title(fl!("mode-and-colors"))
         .descriptions(descriptions)
         .view::<Page>(move |_binder, page, section| {
+            let Spacing {
+                space_xxs, space_s, ..
+            } = cosmic::theme::active().cosmic().spacing;
+
             let descriptions = &section.descriptions;
             let palette = &page.theme_builder.palette.as_ref();
             let cur_accent = page
@@ -1539,7 +1544,7 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                                 .on_press(Message::DarkMode(true)),
                                 text::body(&descriptions[dark])
                             ]
-                            .spacing(8)
+                            .spacing(space_xxs)
                             .width(Length::FillPortion(1))
                             .align_items(cosmic::iced_core::Alignment::Center),
                             cosmic::iced::widget::column![
@@ -1554,11 +1559,11 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                                 .on_press(Message::DarkMode(false)),
                                 text::body(&descriptions[light])
                             ]
-                            .spacing(8)
+                            .spacing(space_xxs)
                             .width(Length::FillPortion(1))
                             .align_items(cosmic::iced_core::Alignment::Center)
                         ]
-                        .spacing(48)
+                        .spacing(48) // TODO: dynamic spacing based on window width
                         .align_items(cosmic::iced_core::Alignment::Center)
                         .width(Length::Fixed(424.0)),
                     )
@@ -1675,8 +1680,8 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                             scrollable::Properties::new()
                         ))
                     ]
-                    .padding([16, 24, 0, 24])
+                    .padding([16, space_s, 0, space_s])
-                    .spacing(8),
+                    .spacing(space_xxs),
                 )
                 .add(
                     settings::item::builder(&descriptions[app_bg]).control(

cosmic-settings/src/pages/desktop/panel/applets_inner.rs

@@ -297,7 +297,7 @@ impl Page {
                         .on_press(msg_map(Message::AddApplet(info.clone())))
                         .into(),
                 ])
-                .padding([0, 32, 0, 32])
+                .padding([0, spacing.space_l])
                 .spacing(spacing.space_xs)
                 .align_items(Alignment::Center),
             );
@@ -571,8 +571,8 @@ pub fn lists<
             .spacing(spacing.space_xxs)
             .into(),
         ])
-        .padding([0, 16, 0, 16])
+        .padding([0, spacing.space_s])
-        .spacing(12.0)
+        .spacing(spacing.space_xs)
         .apply(Element::from)
         .map(msg_map)
     })

cosmic-settings/src/pages/input/keyboard/mod.rs

@@ -505,6 +505,8 @@ impl Page {
     }
 
     pub fn add_input_source_view(&self) -> Element<'_, crate::pages::Message> {
+        let space_l = theme::active().cosmic().spacing.space_l;
+
         let search = widget::search_input(fl!("type-to-search"), &self.input_source_search)
             .on_input(Message::InputSourceSearch)
             .on_clear(Message::InputSourceSearch(String::new()));
@@ -528,7 +530,7 @@ impl Page {
 
         widget::column()
             .padding([2, 0])
-            .spacing(32)
+            .spacing(space_l)
             .push(search)
             .push(toggler)
             .push(list)

cosmic-settings/src/pages/input/keyboard/shortcuts/common.rs

@@ -476,6 +476,13 @@ fn context_drawer(
     id: usize,
     show_action: bool,
 ) -> Element<ShortcutMessage> {
+    let cosmic::cosmic_theme::Spacing {
+        space_xxs,
+        space_xs,
+        space_l,
+        ..
+    } = theme::active().cosmic().spacing;
+
     let model = &shortcuts[id];
 
     let action = show_action.then(|| {
@@ -489,7 +496,7 @@ fn context_drawer(
     });
 
     let bindings = model.bindings.iter().enumerate().fold(
-        widget::list_column().spacing(8),
+        widget::list_column().spacing(space_xxs),
         |section, (_, (bind_id, shortcut))| {
             let text: Cow<'_, str> = if !shortcut.editing && shortcut.binding.is_set() {
                 Cow::Owned(shortcut.binding.to_string())
@@ -503,7 +510,7 @@ fn context_drawer(
             .select_on_focus(true)
             .on_input(move |text| ShortcutMessage::InputBinding(bind_id, text))
             .on_submit(ShortcutMessage::SubmitBinding(bind_id))
-            .padding([0, 12])
+            .padding([0, space_xs])
             .id(shortcut.id.clone())
             .into();
 
@@ -533,13 +540,13 @@ fn context_drawer(
     let button_container = widget::row::with_capacity(2)
         .push_maybe(reset_keybinding_button)
         .push(add_keybinding_button)
-        .spacing(12)
+        .spacing(space_xs)
         .apply(widget::container)
         .width(Length::Fill)
         .align_x(Horizontal::Right);
 
     widget::column::with_capacity(if show_action { 3 } else { 2 })
-        .spacing(32)
+        .spacing(space_l)
         .push_maybe(action)
         .push(bindings)
         .push(button_container)

cosmic-settings/src/pages/time/date.rs

@@ -306,6 +306,8 @@ impl Page {
     }
 
     fn timezone_context_view(&self) -> Element<'_, crate::pages::Message> {
+        let space_l = cosmic::theme::active().cosmic().spacing.space_l;
+
         let search = widget::search_input(fl!("type-to-search"), &self.timezone_search)
             .on_input(Message::TimezoneSearch)
             .on_clear(Message::TimezoneSearch(String::new()));
@@ -322,7 +324,7 @@ impl Page {
 
         widget::column()
             .padding([2, 0])
-            .spacing(32)
+            .spacing(space_l)
             .push(search)
             .push(list)
             .apply(Element::from)

cosmic-settings/src/widget/mod.rs

@@ -143,16 +143,15 @@ pub fn page_list_item<'a, Message: 'static + Clone>(
     }
 
     builder
-        .icon(icon::from_name(icon).size(20))
+        .icon(container(icon::from_name(icon).size(20)).padding(8))
         .control(
             row::with_capacity(2)
-                .padding([8, 0]) // fixed value to set minimum height to 36
-                .spacing(space_xxs)
                 .push(text::body(info))
-                .push(icon::from_name("go-next-symbolic").size(20)),
+                .push(container(icon::from_name("go-next-symbolic").size(20)).padding(8))
+                .align_items(alignment::Alignment::Center),
         )
-        .padding([0, space_xxs])
+        .padding(0)
-        .spacing(space_s)
+        .spacing(space_xxs)
         .apply(container)
         .padding([space_s, space_m])
         .align_x(alignment::Horizontal::Center)