[console/wip/exalm/gtk4: 10/13] Port styles away from SCSS




commit d26a9bc1d935dabfff10eea2b5832d0620552514
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Jul 26 01:53:24 2022 +0400

    Port styles away from SCSS
    
    Use AdwApplication style loading, drop scss. Since VTE doesn't use the
    application priority anymore, we can override its styles just fine. without
    any special tricks.

 .gitlab-ci.yml                                 |   4 +-
 build-aux/flatpak/org.gnome.Console.Devel.json |  22 ---
 meson.build                                    |   2 +-
 meson_options.txt                              |   5 -
 src/kgx-application.c                          |  28 ---
 src/kgx-application.h                          |   2 -
 src/kgx.gresource.xml.in                       |   4 +-
 src/meson.build                                |   5 +-
 src/style-dark.css                             |  13 ++
 src/style.css                                  | 202 +++++++++++++++++++++
 src/styles/_styles.scss                        | 240 -------------------------
 src/styles/meson.build                         |  31 ----
 src/styles/styles-dark.scss                    |   4 -
 src/styles/styles-light.scss                   |   4 -
 subprojects/libsass.wrap                       |   5 -
 subprojects/sassc.wrap                         |   5 -
 16 files changed, 221 insertions(+), 355 deletions(-)
---
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 8acbb45..8b3b1c0 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -6,7 +6,7 @@ debian:
   before_script:
     - apt -y update
     - apt -y install gcc g++ gettext git libgnutls28-dev libgtk-4-dev
-      libsystemd-dev libgtop2-dev meson sassc desktop-file-utils appstream-util
+      libsystemd-dev libgtop2-dev meson desktop-file-utils appstream-util
       gsettings-desktop-schemas-dev
   script:
     - meson --buildtype=release _build .
@@ -21,7 +21,7 @@ fedora:
       desktop-file-utils gperf "pkgconfig(gtk4)" libappstream-glib
       "pkgconfig(libgtop-2.0)" "pkgconfig(fribidi)" "pkgconfig(gnutls)"
       "pkgconfig(libsystemd)" "pkgconfig(libpcre2-8)"
-      "pkgconfig(gsettings-desktop-schemas)" sassc
+      "pkgconfig(gsettings-desktop-schemas)"
   script:
     - meson --buildtype=release -Dtests=true _build .
     - meson compile -C _build
diff --git a/build-aux/flatpak/org.gnome.Console.Devel.json b/build-aux/flatpak/org.gnome.Console.Devel.json
index cfdc60b..a0c1a96 100644
--- a/build-aux/flatpak/org.gnome.Console.Devel.json
+++ b/build-aux/flatpak/org.gnome.Console.Devel.json
@@ -49,28 +49,6 @@
                 }
             ]
         },
-        {
-          "name" : "libsass",
-          "buildsystem" : "meson",
-          "sources" : [
-            {
-              "type" : "git",
-              "url" : "https://github.com/lazka/libsass.git";,
-              "branch" : "meson"
-            }
-          ]
-        },
-        {
-          "name" : "sassc",
-          "buildsystem" : "meson",
-          "sources" : [
-            {
-              "type" : "git",
-              "url" : "https://github.com/lazka/sassc.git";,
-              "branch" : "meson"
-            }
-          ]
-        },
         {
             "name" : "gnome-console",
             "builddir" : true,
diff --git a/meson.build b/meson.build
index 65da618..3f38e36 100644
--- a/meson.build
+++ b/meson.build
@@ -9,13 +9,13 @@ project('gnome-console', 'c', version: '42.beta',
     'vte:werror=false',
     'vte:gir=false',
     'vte:vapi=false',
-    'libsass:werror=false',
     'vte:gtk3=false',
     'vte:gtk4=true',
     'adwaita:werror=false',
     'adwaita:vapi=false',
     'adwaita:introspection=disabled',
     'adwaita:tests=false',
+    'libsass:werror=false',
   ],
 )
 
diff --git a/meson_options.txt b/meson_options.txt
index 506e6cf..35fa25e 100644
--- a/meson_options.txt
+++ b/meson_options.txt
@@ -8,11 +8,6 @@ option('tests',
        value: false,
        description: 'Enable tests')
 
-option('sassc',
-       type: 'feature',
-       value: 'auto',
-       description: 'Rebuild styles using sassc')
-
 option('nautilus',
        type: 'feature',
        value: 'auto',
diff --git a/src/kgx-application.c b/src/kgx-application.c
index 2be3845..f2a0f7f 100644
--- a/src/kgx-application.c
+++ b/src/kgx-application.c
@@ -314,25 +314,10 @@ set_watcher (KgxApplication *self, gboolean focused)
 }
 
 
-static void
-update_styles (KgxApplication *self)
-{
-  AdwStyleManager *style_manager = adw_style_manager_get_default ();
-  gboolean dark = adw_style_manager_get_dark (style_manager);
-
-  if (dark) {
-    gtk_css_provider_load_from_resource (self->provider, KGX_APPLICATION_PATH "styles-dark.css");
-  } else {
-    gtk_css_provider_load_from_resource (self->provider, KGX_APPLICATION_PATH "styles-light.css");
-  }
-}
-
-
 static void
 kgx_application_startup (GApplication *app)
 {
   KgxApplication    *self = KGX_APPLICATION (app);
-  AdwStyleManager   *style_manager;
   g_autoptr (GAction) settings_action = NULL;
 
   const char *const new_window_accels[] = { "<shift><primary>n", NULL };
@@ -381,19 +366,6 @@ kgx_application_startup (GApplication *app)
   settings_action = g_settings_create_action (self->settings, "theme");
   g_action_map_add_action (G_ACTION_MAP (self), G_ACTION (settings_action));
 
-  self->provider = gtk_css_provider_new ();
-  gtk_style_context_add_provider_for_display (gdk_display_get_default (),
-                                              GTK_STYLE_PROVIDER (self->provider),
-                                              /* Is this stupid? Yes
-                                               * Does it fix vte using the wrong
-                                               * priority for fallback styles? Yes*/
-                                              GTK_STYLE_PROVIDER_PRIORITY_APPLICATION + 1);
-
-  style_manager = adw_style_manager_get_default ();
-  g_signal_connect_swapped (style_manager, "notify::dark", G_CALLBACK (update_styles), self);
-  g_signal_connect_swapped (style_manager, "notify::high-contrast", G_CALLBACK (update_styles), self);
-  update_styles (self);
-
   set_watcher (KGX_APPLICATION (app), TRUE);
 }
 
diff --git a/src/kgx-application.h b/src/kgx-application.h
index 63a700d..fa401cd 100644
--- a/src/kgx-application.h
+++ b/src/kgx-application.h
@@ -89,8 +89,6 @@ struct _KgxApplication
 
   guint                     timeout;
   int                       active;
-
-  GtkCssProvider           *provider;
 };
 
 G_DECLARE_FINAL_TYPE (KgxApplication, kgx_application, KGX, APPLICATION, AdwApplication)
diff --git a/src/kgx.gresource.xml.in b/src/kgx.gresource.xml.in
index bb82543..6994231 100644
--- a/src/kgx.gresource.xml.in
+++ b/src/kgx.gresource.xml.in
@@ -10,8 +10,8 @@
     <file compressed="true">kgx-tab-switcher-row.ui</file>
     <file compressed="true">kgx-theme-switcher.ui</file>
     <file compressed="true">kgx-simple-tab.ui</file>
-    <file compressed="true">styles-light.css</file>
-    <file compressed="true">styles-dark.css</file>
+    <file compressed="true">style.css</file>
+    <file compressed="true">style-dark.css</file>
     <file compressed="true">logo.txt</file>
     <file preprocess="xml-stripblanks">icons/scalable/status/status-privileged-symbolic.svg</file>
     <file preprocess="xml-stripblanks">icons/scalable/status/status-regular-symbolic.svg</file>
diff --git a/src/meson.build b/src/meson.build
index 0820d73..35c712b 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -1,5 +1,3 @@
-subdir('styles')
-
 kgx_sources = [
   'kgx-application.c',
   'kgx-application.h',
@@ -54,8 +52,7 @@ resources_file = configure_file(
 
 kgx_sources += gnome.compile_resources('kgx-resources',
   resources_file,
-  c_name: 'kgx',
-  dependencies: style_deps
+  c_name: 'kgx'
 )
 
 kgx_enums = gnome.mkenums_simple('kgx-enums',
diff --git a/src/style-dark.css b/src/style-dark.css
new file mode 100644
index 0000000..e6ec435
--- /dev/null
+++ b/src/style-dark.css
@@ -0,0 +1,13 @@
+@define-color root_headerbar_bg_color       shade(@red_5, 0.6);
+@define-color root_headerbar_backdrop_color shade(@red_5, 0.45);
+
+@define-color remote_headerbar_bg_color       shade(@purple_5, 0.6);
+@define-color remote_headerbar_backdrop_color shade(@purple_5, 0.45);
+
+.empty-state {
+  background: alpha(@view_bg_color, 0.96);
+}
+
+window.opaque .empty-state {
+  background: @view_bg_color;
+}
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..debdd16
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,202 @@
+@define-color root_headerbar_bg_color       shade(@red_1, 1.37);
+@define-color root_headerbar_backdrop_color shade(@red_1, 1.45);
+
+@define-color remote_headerbar_bg_color       shade(@purple_1, 1.27);
+@define-color remote_headerbar_backdrop_color shade(@purple_1, 1.35);
+
+.terminal-window {
+  background: transparent;
+}
+
+.terminal-window.root headerbar,
+.terminal-window.root searchbar > revealer > box,
+.terminal-window.root tabbar > revealer > box {
+  background-color: @root_headerbar_bg_color;
+}
+
+.terminal-window.root:backdrop headerbar,
+.terminal-window.root:backdrop searchbar > revealer > box,
+.terminal-window.root:backdrop tabbar > revealer > box {
+  background-color: @root_headerbar_backdrop_color;
+}
+
+.terminal-window.remote headerbar,
+.terminal-window.remote searchbar > revealer > box,
+.terminal-window.remote tabbar > revealer > box {
+  background-color: @remote_headerbar_bg_color;
+}
+
+.terminal-window.remote:backdrop headerbar,
+.terminal-window.remote:backdrop searchbar > revealer > box,
+.terminal-window.remote:backdrop tabbar > revealer > box {
+  background-color: @remote_headerbar_backdrop_color;
+}
+
+.terminal-window vte-terminal {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+/* Taken from nautilus */
+.floating-bar {
+  padding: 6px;
+  background-color: @view_bg_color;
+  color: @view_fg_color;
+  box-shadow: 0 0 0 1px @borders;
+  margin-top: 1px;
+}
+
+.floating-bar:dir(rtl) {
+  border-top-right-radius: 6px;
+  margin-right: 1px;
+}
+
+.floating-bar:dir(ltr) {
+  border-top-left-radius: 6px;
+  margin-left: 1px;
+}
+
+/* Sync to KgxTerminal! */
+.empty-state {
+  background: @view_bg_color;
+  color: alpha(currentColor, .5);
+}
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid #1e78e4;
+  background: rgba(13, 54, 104, 0.96);
+  color: #ffffff;
+}
+
+.error .exit-info {
+  border-top: 2px solid #ed333b;
+  background: rgba(104, 13, 13, 0.96);
+}
+
+box.tab:drop(active) {
+  outline: 1px solid @accent_bg_color;
+  outline-offset: -1px;
+}
+
+window:not(.tiled)
+      :not(.tiled-top)
+      :not(.tiled-bottom)
+      :not(.tiled-left)
+      :not(.tiled-right)
+      :not(.fullscreen)
+      :not(.maximized) box.tab:drop(active) {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.process-list row .header {
+  min-height: 0;
+}
+
+.process-list row .title {
+  font-family: monospace;
+}
+
+.tab-button label {
+  font-weight: 800;
+  font-size: 8pt;
+}
+
+.tab-button label.small {
+  font-size: 6pt;
+}
+
+.tab-switcher {
+  min-height: 180px;
+}
+
+.tab-switcher list {
+  padding-top: 48px;
+  padding-bottom: 84px;
+  background-color: @popover_bg_color;
+  color: @popover_fg_color;
+}
+
+.tab-switcher list row {
+  min-height: 40px;
+  padding: 3px;
+}
+
+.tab-switcher list row:dir(ltr) { padding-left: 11px; }
+.tab-switcher list row:dir(rtl) { padding-right: 11px; }
+
+.tab-switcher list row.needs-attention {
+  color: @accent_color;
+}
+
+.tab-switcher list row .close-btn,
+.tab-switcher list row .indicator-btn {
+  min-width: 36px;
+  min-height: 36px;
+  border-radius: 99px;
+  padding: 0;
+}
+
+.tab-switcher .collapse-button {
+  border-radius: 99px;
+  padding: 6px 30px;
+  margin: 6px;
+}
+
+.tab-switcher .new-tab-button {
+  min-width: 48px;
+  min-height: 48px;
+  border-radius: 100%;
+  padding: 0;
+  margin: 18px;
+}
+
+themeswitcher {
+  padding: 6px;
+}
+
+themeswitcher .check {
+  background: @accent_bg_color;
+  color: white;
+  padding: 2px;
+  border-radius: 17px;
+  margin: 3px;
+}
+
+/* Adapted from 
https://gitlab.gnome.org/GNOME/gnome-text-editor/-/blob/bf8c0c249f06a0be69e65aed3b786ba02a9f999e/src/TextEditor.css#L51
 */
+
+themeswitcher checkbutton {
+  outline-offset: 1px;
+  transition: none;
+}
+
+themeswitcher checkbutton radio {
+  -gtk-icon-source: none;
+  background: none;
+  padding: 12px;
+  min-height: 24px;
+  min-width: 24px;
+  border: none;
+  outline-color: currentColor;
+  transition: none;
+  box-shadow: inset 0 0 0 1px @borders;
+}
+
+themeswitcher checkbutton radio:checked {
+  box-shadow: inset 0 0 0 2px @accent_bg_color;
+}
+
+themeswitcher checkbutton.system radio {
+  background: linear-gradient(-45deg, #1e1e1e 49.99%, white 50.01%);
+}
+
+themeswitcher checkbutton.light radio {
+  color: alpha(black, .8);
+  background-color: white;
+}
+
+themeswitcher checkbutton.dark radio {
+  color: white;
+  background-color: #1e1e1e;
+}


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]