Add stylesheet gresource

.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 valac
+        apt install -y libgee-0.8-dev libglib2.0-dev libgranite-7-dev libgtk-4-dev libadwaita-1-dev meson sassc valac
     - name: Build
       run: |
         meson build -Dexample=true

data/meson.build

@@ -38,3 +38,5 @@ foreach i : icon_sizes
         rename: meson.project_name() + '.svg'
     )
 endforeach
+
+subdir('styles')

data/styles/Index.scss

@@ -0,0 +1,5 @@
+// Class constants and common styles
+@import '_common.scss';
+
+@import 'SettingsPage.scss';
+@import 'SettingsSidebar.scss';

data/styles/SettingsPage.scss

@@ -0,0 +1,54 @@
+simplesettingspage {
+    > scrolledwindow > viewport > box {
+        padding: rem(12px);
+    }
+
+    .header-area {
+        margin-bottom: rem(24px);
+
+        > image {
+            -gtk-icon-size: rem(48px);
+
+            &:dir(ltr) {
+                // Match square icon canvas whitespace at 48px
+                margin-left: rem(-4px);
+                margin-right: rem(7px);
+            }
+
+            &:dir(rtl) {
+                margin-left: rem(7px);
+                margin-right: rem(-4px);
+            }
+        }
+
+        label.title-2 {
+            font-weight: 600;
+            font-size: 2rem;
+        }
+
+        label:not(.title-2) {
+            font-size: 0.95rem;
+            opacity: 0.85;
+        }
+
+        switch {
+            slider {
+                // Match font size for title
+                min-height: 2rem;
+                min-width: 2rem;
+            }
+
+            &:dir(ltr) {
+                margin-left: rem(12px);
+            }
+
+            &:dir(rtl) {
+                margin-right: rem(12px);
+            }
+        }
+    }
+
+    .buttonbox {
+        margin-top: rem(24px);
+    }
+}

data/styles/SettingsSidebar.scss

@@ -0,0 +1,23 @@
+settingssidebar list {
+    min-width: rem(200px);
+
+    row,
+    > .title-4 {
+        padding: rem(6px);
+    }
+
+    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);
+        }
+    }
+}

data/styles/_common.scss

@@ -0,0 +1,17 @@
+@function rem($pixels, $text-size: 9pt) {
+    @if (unitless($pixels)) {
+        $pixels: $pixels * 1px;
+    }
+
+    @if (unitless($text-size)) {
+        $text-size: $text-size * 1px;
+    }
+
+    @if ($pixels > 0) {
+        // Workaround GTK clamping instead of rounding up
+        @return ($pixels / $text-size * 1rem) + 0.000000001rem;
+    } @else {
+        // Workaround GTK clamping instead of rounding up
+        @return ($pixels / $text-size * 1rem) - 0.000000001rem;
+    }
+}

data/styles/meson.build

@@ -0,0 +1,25 @@
+sassc = find_program('sassc')
+
+sassc_opts = [ '-a', '-M', '-t', 'compact' ]
+
+stylesheet_deps = custom_target(
+    'Application.scss',
+    input: 'Index.scss',
+    output: 'Application.css',
+    command: [
+        sassc,
+        sassc_opts,
+        '@INPUT@',
+        '@OUTPUT@',
+    ]
+)
+
+stylesheet_resource = gnome.compile_resources(
+    'styles-resource',
+    'styles.gresource.xml',
+    source_dir: [
+        meson.current_build_dir(),
+        meson.current_source_dir(),
+    ],
+    dependencies: stylesheet_deps
+)

data/styles/styles.gresource.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+  <gresource prefix="/io/elementary/settings">
+    <file compressed="true">Application.css</file>
+  </gresource>
+</gresources>

meson.build

@@ -24,6 +24,7 @@ conf_file = configure_file(
 
 plugs_dir = get_option('prefix') / get_option('libdir') / 'switchboard-3'
 
+gnome = import('gnome')
 i18n = import('i18n')
 pkg = import('pkgconfig')
 

src/meson.build

@@ -15,6 +15,7 @@ switchboard_deps = [
 ]
 
 executable(meson.project_name(),
+    stylesheet_resource,
     switchboard_files,
     conf_file,
     dependencies: switchboard_deps,