Build with Granite 9

.github/workflows/main.yml

@@ -23,7 +23,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y libgee-0.8-dev libglib2.0-dev libgranite-7-dev libgtk-4-dev libadwaita-1-dev meson sassc valac
+        apt install -y libgee-0.8-dev libglib2.0-dev libgranite-9-dev libgtk-4-dev libadwaita-1-dev meson sassc valac
     - name: Build
       run: |
         meson build -Dexample=true

README.md

@@ -16,7 +16,7 @@ You'll need the following dependencies:
 
 * libgee-0.8-dev
 * libglib2.0-dev (>= 2.76)
-* libgranite-7-dev (>= 7.7.0)
+* libgranite-9-dev
 * libgtk-4-dev
 * libadwaita-1-dev (>= 1.4)
 * meson (>= 0.57.0)

data/styles/CategoryView.scss

@@ -1,10 +1,6 @@
 category-view .main-clamp {
-    padding: rem(12px);
-
-    .rich-list row {
-        border-radius: rem(3px);
-    }
-
+    padding: 1rem;
+
     flowboxchild box {
         margin: 0.5rem;
     }

data/styles/SettingsPage.scss

@@ -4,22 +4,22 @@ settingspage {
             background:
                 linear-gradient(
                     to top,
-                    #{'alpha(@accent_color, 0)'} 80%,
-                    #{'alpha(@accent_color, 0.25)'} 100%
+                    color-mix(in srgb, var(--accent-color) 0%, transparent) 80%,
+                    color-mix(in srgb, var(--accent-color) 25%, transparent) 100%
                 ),
                 linear-gradient(
-                    #{'@borders'},
-                    rgba(black, 0.05) 1px,
-                    rgba(black, 0.0) rem(3px)
+                    var(--border-color),
+                    color-mix(in srgb, black 5%, transparent) 1px,
+                    transparent 0.25rem
                 );
         }
 
         undershoot.top {
             background:
                 linear-gradient(
-                    #{'@borders'},
-                    rgba(black, 0.05) 1px,
-                    rgba(black, 0.0) rem(3px)
+                    var(--border-color),
+                    color-mix(in srgb, black 5%, transparent) 1px,
+                    transparent 0.25rem
                 );
         }
     }
@@ -33,11 +33,11 @@ settingspage {
         widget {
             &:dir(ltr) {
                 margin-left: rem(4px);
-                margin-right: rem(3px);
+                margin-right: 0.25rem;
             }
 
             &:dir(rtl) {
-                margin-left: rem(3px);
+                margin-left: 0.25rem;
                 margin-right: rem(4px);
             }
         }
@@ -68,7 +68,7 @@ settingspage {
 
     .header-area,
     .content-area {
-        padding: rem(12px);
+        padding: 1rem;
     }
 
     actionbar.action-area {
@@ -79,17 +79,17 @@ settingspage {
 
         box.end,
         box.start {
-            border-spacing: rem(6px);
-            padding: rem(12px);
+            border-spacing: 0.5rem;
+            padding: 1rem;
         }
     }
 
     windowcontrols {
-        margin: rem(6px);
+        margin: 0.5rem;
 
         &.start,
         &.end {
-            border-spacing: rem(6px);
+            border-spacing: 0.5rem;
         }
     }
 }

data/styles/SettingsSidebar.scss

@@ -1,70 +1,46 @@
 settingssidebar {
     list {
-        background: inherit;
         min-width: rem(200px);
 
         row,
         > .title-4 {
-            padding: rem(6px);
+            padding: 0.5rem;
         }
 
-        row {
-            overlay {
-                // IconSize.LARGE + padding
-                min-width: calc(32px + #{rem(6px)});
-            }
-
-            overlay:dir(ltr) {
-                margin-right: rem(6px);
-            }
-
-            overlay:dir(rtl) {
-                margin-left: rem(6px);
-            }
+        row overlay {
+            // IconSize.LARGE + padding
+            min-width: calc(32px + 0.5rem);
         }
     }
 
     toolbarview {
         revealer.bottom-bar {
-            color: #{'mix(@text_color, @insensitive_bg_color, 0.15)'};
+            color: color-mix(in oklab, var(--fg-color) 85%, var(--bg-level-3));
 
             &.raised {
-                box-shadow: 0 -1px #{'alpha(@highlight_color, 0.2)'};
-                background-color: rgba(black, 0.01);
+                box-shadow: 0 -1px color-mix(in srgb, var(--highlight-color) 20%, transparent);
+                background-color: color-mix(in srgb, black 1%, transparent);
                 background-image:
                     linear-gradient(
                         to bottom,
-                        #{'@borders'} 1px,
-                        rgba(black, 0.07) 1px,
-                        transparent rem(3px)
+                        var(--border-color) 1px,
+                        color-mix(in srgb, black 7%, transparent) 1px,
+                        transparent 0.25rem
                     );
             }
 
             &.raised.border {
-                background: rgba(black, 0.03);
+                background: color-mix(in srgb, black 3%, transparent);
                 box-shadow:
-                    0 -1px #{'@borders'},
-                    inset 0 1px #{'alpha(@highlight_color, 0.3)'};
+                    0 -1px var(--border-color),
+                    inset 0 1px color-mix(in srgb, var(--highlight-color) 30%, transparent);
             }
 
             actionbar {
-                padding: rem(6px);
-
                 box.start > label {
-                    margin: rem(6px);
+                    margin: 0.5rem;
                     font-weight: 500;
                 }
-
-                box.end > switch {
-                    slider,
-                    trough {
-                         min-height: 1.5em;
-                    }
-
-                    slider {
-                         min-width: 1.5em;
-                    }
-                }
             }
         }
     }

lib/SettingsSidebarRow.vala

@@ -27,35 +27,15 @@ private class Switchboard.SettingsSidebarRow : Gtk.ListBoxRow {
     }
 
     public string? header { get; set; }
+    public string? status { get; set; }
+    public string title { get; set; }
 
     public unowned SettingsPage page { get; construct; }
 
     public Icon icon { get; set; }
 
-    public string status {
-        set {
-            status_label.label = value;
-            status_label.visible = true;
-            update_property (Gtk.AccessibleProperty.DESCRIPTION, value, -1);
-        }
-    }
-
-    public string title {
-        get {
-            return _title;
-        }
-        set {
-            _title = value;
-            title_label.label = value;
-            update_property (Gtk.AccessibleProperty.LABEL, value, -1);
-        }
-    }
-
     private Gtk.Widget display_widget;
     private Gtk.Image status_icon;
-    private Gtk.Label status_label;
-    private Gtk.Label title_label;
-    private string _title;
 
     public SettingsSidebarRow (SettingsPage page) {
         Object (
@@ -64,27 +44,19 @@ private class Switchboard.SettingsSidebarRow : Gtk.ListBoxRow {
     }
 
     construct {
-        title_label = new Gtk.Label (page.title) {
-            ellipsize = Pango.EllipsizeMode.END,
-            vexpand = true,
-            xalign = 0
+        var header_label = new Granite.HeaderLabel (page.title) {
+            ellipsize = END,
+            mnemonic_widget = this,
+            size = H3,
+            valign = CENTER,
+            vexpand = true
         };
-        title_label.add_css_class (Granite.STYLE_CLASS_H3_LABEL);
 
         status_icon = new Gtk.Image () {
             halign = Gtk.Align.END,
             valign = Gtk.Align.END
         };
 
-        status_label = new Gtk.Label (null) {
-            use_markup = true,
-            ellipsize = Pango.EllipsizeMode.END,
-            vexpand = true,
-            xalign = 0,
-            visible = false
-        };
-        status_label.add_css_class (Granite.CssClass.SMALL);
-
         if (!page.with_avatar) {
             display_widget = new Gtk.Image () {
                 icon_size = LARGE
@@ -100,23 +72,23 @@ private class Switchboard.SettingsSidebarRow : Gtk.ListBoxRow {
             page.bind_property ("title", display_widget, "text", SYNC_CREATE);
         }
 
-        var overlay = new Gtk.Overlay ();
-        overlay.set_child (display_widget);
+        var overlay = new Gtk.Overlay () {
+            child = display_widget
+        };
         overlay.add_overlay (status_icon);
 
-        var grid = new Gtk.Grid ();
-        grid.attach (overlay, 0, 0, 1, 2);
-        grid.attach (title_label, 1, 0);
-        grid.attach (status_label, 1, 1);
+        var box = new Granite.Box (HORIZONTAL, HALF);
+        box.append (overlay);
+        box.append (header_label);
 
         accessible_role = TAB;
-        child = grid;
+        child = box;
 
         header = page.header;
         page.bind_property ("icon", this, "icon", BindingFlags.DEFAULT);
-        page.bind_property ("status", this, "status", BindingFlags.DEFAULT);
+        page.bind_property ("status", header_label, "secondary-text", BindingFlags.DEFAULT);
         page.bind_property ("status-type", this, "status-type", BindingFlags.DEFAULT);
-        page.bind_property ("title", this, "title", BindingFlags.DEFAULT);
+        page.bind_property ("title", header_label, "label", BindingFlags.DEFAULT);
 
         if (page.status != null) {
             status = page.status;

meson.build

@@ -36,7 +36,7 @@ gio_unix_dep = dependency('gio-unix-2.0')
 gmodule_dep = dependency('gmodule-2.0', version: '>=2.76')
 gtk_dep = dependency('gtk4', version: '>=3.10')
 gee_dep = dependency('gee-0.8')
-granite_dep = dependency('granite-7', version: '>=7.7.0')
+granite_dep = dependency('granite-9', version: '>=7.7.0')
 adwaita_dep = dependency('libadwaita-1', version: '>=1.4')
 m_dep = meson.get_compiler('c').find_library('m', required : false)