Add Sass build system

.github/workflows/main.yml

@@ -23,7 +23,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y gettext libadwaita-1-dev libappstream-dev libflatpak-dev libgee-0.8-dev libgranite-7-dev libgtk-4-dev libjson-glib-dev libpackagekit-glib2-dev libportal-dev libportal-gtk4-dev libsoup-3.0-dev libxml2-dev libxml2-utils libpolkit-gobject-1-dev meson valac
+        apt install -y gettext libadwaita-1-dev libappstream-dev libflatpak-dev libgee-0.8-dev libgranite-7-dev libgtk-4-dev libjson-glib-dev libpackagekit-glib2-dev libportal-dev libportal-gtk4-dev libsoup-3.0-dev libxml2-dev libxml2-utils libpolkit-gobject-1-dev meson sassc valac
     - name: Build and Test
       env:
         DESTDIR: out

README.md

@@ -24,6 +24,7 @@ You'll need the following dependencies:
 * libxml2-dev
 * libxml2-utils
 * meson
+* sassc
 * valac (>= 0.26)
 
 Run `meson build` to configure the build environment. Change to the build directory and run `ninja` to build

data/meson.build

@@ -72,14 +72,10 @@ install_data(
     install_dir: join_paths(get_option('datadir'), 'glib-2.0', 'schemas')
 )
 
-# Use GResource
-css_gresource = gnome.compile_resources(
-    'gresource_css',
-    meson.project_name() + '.gresource.xml'
-)
-
 icons_gresource = gnome.compile_resources(
     'gresource_icons',
     'icons/categories.gresource.xml',
     source_dir: 'icons'
 )
+
+subdir('styles')

data/styles/AbstractAppContainer.scss

@@ -0,0 +1,19 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2021-2024 elementary, Inc. (https://elementary.io)
+ */
+
+.progress-button {
+    background-image: linear-gradient(
+        0deg,
+        #{'@accent_color'} 0.125em,
+        transparent 0.125em
+    );
+    /* 2px spacing on each side; otherwise it looks weird with button borders */
+    background-position: 2px;
+    background-repeat: no-repeat;
+
+    &:dir(rtl) {
+        background-position: calc(100% - 2px);
+    }
+}

data/styles/AppInfoView.scss

@@ -0,0 +1,138 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2023-2024 elementary, Inc. (https://elementary.io)
+ */
+
+appinfoview {
+    .banner {
+        clamp > box {
+            margin: rem(12px);
+
+            &:dir(ltr) {
+                margin-left: calc(#{rem(12px)} - 12px); /*Offset space inside icon*/;
+            }
+
+            &:dir(rtl) {
+                margin-right: calc(#{rem(12px)} - 12px); /*Offset space inside icon*/;
+            }
+        }
+
+        combobox {
+            margin-top: rem(12px);
+        }
+
+        button.text-button,
+        button.image-button {
+            background-color: #{'@banner_fg_color'};
+            background-image: none;
+            border: none;
+            box-shadow: none;
+            color: #{'@banner_bg_color'};
+            font-size: 11pt;
+            font-weight: 600;
+
+            /*Hack to make the button square-ish*/
+            &.raised {
+                padding: 0 0.333em;
+            }
+
+            &:active,
+            &:checked {
+                opacity: 0.9;
+            }
+
+            &:disabled {
+                opacity: 0.33;
+            }
+
+            &:not(.suggested-action) {
+                opacity: 0.8;
+            }
+
+            label,
+            image {
+                color: inherit;
+                font-weight: inherit;
+            }
+        }
+    }
+
+    .content-warning-box {
+        margin: rem(12px) rem(12px) 0;
+    }
+
+    .screenshot {
+        background: #{'@selected_bg_color'};
+        border-radius: rem(6px);
+        color: #{'@selected_fg_color'};
+        font-size: 1.5rem;
+        font-weight: bold;
+        margin: rem(12px);
+        padding: rem(12px);
+    }
+
+    .content-box {
+        margin: 0 rem(12px);
+
+        > label {
+            font-size: 1.25em;
+        }
+
+        .h4 {
+            font-size: 1.5rem;
+            opacity: 1;
+            padding-bottom: 0;
+        }
+    }
+
+    .loading {
+        animation: loading 1.5s ease-in infinite;
+        background-image: linear-gradient(
+            to right,
+            #{'@bg_color'} 20%,
+            #{'@base_color'},
+            #{'@bg_color'} 80%
+        );
+    }
+
+    button.arrow {
+        background: #{'@base_color'};
+        border: none;
+        box-shadow:
+            outset-highlight("full"),
+            0 0 0 1px #{'@borders'},
+            0 3px 4px rgba(black, 0.15),
+            0 3px 3px -3px rgba(black, 0.35);
+        margin: 12px;
+        padding: 6px;
+        color: #{'@text_color'};
+        -gtk-icon-size: 24px;
+
+        &:active,
+        &:disabled {
+            background-color: #{'@insensitive_bg_color'};
+            box-shadow:
+                outset-highlight("full"),
+                0 0 0 1px #{'@borders'},
+                0 1px 1px rgba(black, 0.07),
+                0 1px 2px rgba(black, 0.08);
+        }
+    }
+
+    release {
+        background: #{'@selected_bg_color'};
+        border-radius: rem(6px);
+        margin: rem(6px) rem(12px) rem(12px) rem(12px);
+        padding: rem(12px);
+    }
+}
+
+@keyframes loading {
+    from {
+        background-position: -600px center;
+    }
+
+    to {
+        background-position: 600px center;
+    }
+}

data/styles/Banner.scss

@@ -0,0 +1,37 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2017-2024 elementary, Inc. (https://elementary.io)
+ */
+
+.banner {
+    background-color: #{'@banner_bg_color'};
+    background-image:
+        linear-gradient(
+            to bottom right,
+            #{'shade(@banner_bg_color, 1.05)'},
+            #{'shade(@banner_bg_color, 0.95)'}
+        );
+    color: #{'@banner_fg_color'};
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+
+    &.card {
+        border: 1px solid #{'shade(@banner_bg_color, 0.8)'};
+        box-shadow:
+            inset 0 0 0 1px #{'alpha(shade(@banner_bg_color, 1.7), 0.05)'},
+            inset 0 1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.45)'},
+            inset 0 -1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.15)'},
+            0 3px 2px -1px #{'alpha(shade(@banner_bg_color, 0.5), 0.2)'},
+            0 3px 5px #{'alpha(shade(@banner_bg_color, 0.5), 0.15)'};
+        margin: rem(24px);
+
+        &:hover {
+            box-shadow:
+                inset 0 0 0 1px #{'alpha(shade(@banner_bg_color, 1.7), 0.05)'},
+                inset 0 1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.45)'},
+                inset 0 -1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.15)'},
+                0 10px 8px -11px #{'alpha(shade(@banner_bg_color, 0.6), 0.8)'},
+                0 8px 12px #{'alpha(shade(@banner_bg_color, 0.8), 0.6)'};
+        }
+    }
+}