GNOME.org
 

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


commit dbb8b886dacb7c9e7a4bdb418b8a74b4ebb6e7d8
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                                    |   1 -
 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, 220 insertions(+), 355 deletions(-)
---
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 4a19889..6ead2ca 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(vte-2.91)" "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..d79a180 100644
--- a/meson.build
+++ b/meson.build
@@ -9,7 +9,6 @@ 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',
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 cfcf7e7..1f9e964 100644
--- a/src/kgx-application.h
+++ b/src/kgx-application.h
@@ -93,8 +93,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..7bf4c32
--- /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.52);
+
+@define-color remote_headerbar_bg_color       shade(@purple_5, 0.6);
+@define-color remote_headerbar_backdrop_color shade(@ourple_5, 0.52);
+
+.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..f82757e
--- /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]