Merge branch 'theme-reorg' into 'master'

Reorganize our themes

See merge request GNOME/gtk!3079

demos/widget-factory/widget-factory.c

@@ -50,32 +50,19 @@ change_theme_state (GSimpleAction *action,
   GtkSettings *settings = gtk_settings_get_default ();
   const char *s;
   const char *theme;
-  gboolean prefer_dark = FALSE;
 
   g_simple_action_set_state (action, state);
 
   s = g_variant_get_string (state, NULL);
 
-  if (strcmp (s, "adwaita") == 0)
-    {
-      theme = "Adwaita";
-      prefer_dark = FALSE;
-    }
-  else if (strcmp (s, "adwaita-dark") == 0)
-    {
-      theme = "Adwaita";
-      prefer_dark = TRUE;
-    }
-  else if (strcmp (s, "highcontrast") == 0)
-    {
-      theme = "HighContrast";
-      prefer_dark = FALSE;
-    }
-  else if (strcmp (s, "highcontrast-inverse") == 0)
-    {
-      theme = "HighContrastInverse";
-      prefer_dark = FALSE;
-    }
+  if (strcmp (s, "default") == 0)
+    theme = "Default";
+  else if (strcmp (s, "dark") == 0)
+    theme = "Default-dark";
+  else if (strcmp (s, "hc") == 0)
+    theme = "Default-hc";
+  else if (strcmp (s, "hc-dark") == 0)
+    theme = "Default-hc-dark";
   else if (strcmp (s, "current") == 0)
     {
       gtk_settings_reset_property (settings, "gtk-theme-name");
@@ -87,7 +74,7 @@ change_theme_state (GSimpleAction *action,
 
   g_object_set (G_OBJECT (settings),
                 "gtk-theme-name", theme,
-                "gtk-application-prefer-dark-theme", prefer_dark,
+                "gtk-application-prefer-dark-theme", FALSE,
                 NULL);
 }
 

demos/widget-factory/widget-factory.ui

@@ -15,24 +15,24 @@
             <attribute name="target">current</attribute>
           </item>
           <item>
-            <attribute name="label" translatable="yes">Adwaita</attribute>
+            <attribute name="label" translatable="yes">Default</attribute>
             <attribute name="action">win.theme</attribute>
-            <attribute name="target">adwaita</attribute>
+            <attribute name="target">default</attribute>
           </item>
           <item>
-            <attribute name="label" translatable="yes">Adwaita dark</attribute>
+            <attribute name="label" translatable="yes">Dark</attribute>
             <attribute name="action">win.theme</attribute>
-            <attribute name="target">adwaita-dark</attribute>
+            <attribute name="target">dark</attribute>
           </item>
           <item>
-            <attribute name="label" translatable="yes">High contrast</attribute>
+            <attribute name="label" translatable="yes">Highcontrast</attribute>
             <attribute name="action">win.theme</attribute>
-            <attribute name="target">highcontrast</attribute>
+            <attribute name="target">hc</attribute>
           </item>
           <item>
-            <attribute name="label" translatable="yes">High contrast inverse</attribute>
+            <attribute name="label" translatable="yes">Highcontrast inverse</attribute>
             <attribute name="action">win.theme</attribute>
-            <attribute name="target">highcontrast-inverse</attribute>
+            <attribute name="target">hc-dark</attribute>
           </item>
         </section>
       </submenu>

gtk/gen-gtk-gresources-xml.py

@@ -32,36 +32,37 @@ def get_files(subdir,extension):
 
 xml += '''
     <file>theme/Empty/gtk.css</file>
-    <file>theme/Adwaita/gtk.css</file>
-    <file>theme/Adwaita/gtk-dark.css</file>
-    <file alias='theme/Adwaita-dark/gtk.css'>theme/Adwaita/gtk-dark.css</file>
-    <file>theme/Adwaita/Adwaita.css</file>
-    <file>theme/Adwaita/Adwaita-dark.css</file>
+
+    <file>theme/Default/gtk.css</file>
+    <file alias='theme/Default-dark/gtk.css'>theme/Default/gtk-dark.css</file>
+    <file alias='theme/Default-hc/gtk.css'>theme/Default/gtk-hc.css</file>
+    <file alias='theme/Default-hc-dark/gtk.css'>theme/Default/gtk-hc-dark.css</file>
+
+    <file>theme/Default/gtk-light.css</file>
+    <file>theme/Default/gtk-dark.css</file>
+    <file>theme/Default/gtk-hc.css</file>
+    <file>theme/Default/gtk-hc-dark.css</file>
+    <file>theme/Default/Default-light.css</file>
+    <file>theme/Default/Default-dark.css</file>
+    <file>theme/Default/Default-hc.css</file>
+    <file>theme/Default/Default-hc-dark.css</file>
 '''
 
-for f in get_files('theme/Adwaita/assets', '.png'):
-  xml += '    <file>theme/Adwaita/assets/{0}</file>\n'.format(f)
+for f in get_files('theme/Default/assets', '.png'):
+  xml += '    <file>theme/Default/assets/{0}</file>\n'.format(f)
 
 xml += '\n'
 
-for f in get_files('theme/Adwaita/assets', '.svg'):
-  xml += '    <file>theme/Adwaita/assets/{0}</file>\n'.format(f)
+for f in get_files('theme/Default/assets', '.svg'):
+  xml += '    <file>theme/Default/assets/{0}</file>\n'.format(f)
 
-xml += '''
-    <file>theme/HighContrast/gtk.css</file>
-    <file>theme/HighContrast/gtk-dark.css</file>
-    <file alias='theme/HighContrastInverse/gtk.css'>theme/HighContrast/gtk-dark.css</file>
-    <file>theme/HighContrast/HighContrast.css</file>
-    <file>theme/HighContrast/HighContrast-dark.css</file>
-'''
-
-for f in get_files('theme/HighContrast/assets', '.png'):
-  xml += '    <file>theme/HighContrast/assets/{0}</file>\n'.format(f)
+for f in get_files('theme/Default/assets-hc', '.png'):
+  xml += '    <file>theme/Default/assets-hc/{0}</file>\n'.format(f)
 
 xml += '\n'
 
-for f in get_files('theme/HighContrast/assets', '.svg'):
-  xml += '    <file>theme/HighContrast/assets/{0}</file>\n'.format(f)
+for f in get_files('theme/Default/assets-hc', '.svg'):
+  xml += '    <file>theme/Default/assets-hc/{0}</file>\n'.format(f)
 
 for f in get_files('ui', '.ui'):
   xml += '    <file preprocess=\'xml-stripblanks\'>ui/{0}</file>\n'.format(f)

gtk/gtkcssprovider.c

@@ -1385,16 +1385,20 @@ gtk_css_provider_load_named (GtkCssProvider *provider,
   else
     {
       /* Things failed! Fall back! Fall back! */
-
-      if (variant)
+      if (strcmp (name, "HighContrast") == 0)
         {
-          /* If there was a variant, try without */
-          gtk_css_provider_load_named (provider, name, NULL);
+          if (g_strcmp0 (variant, "dark") == 0)
+            gtk_css_provider_load_named (provider, DEFAULT_THEME_NAME, "hc-dark");
+          else
+            gtk_css_provider_load_named (provider, DEFAULT_THEME_NAME, "hc");
         }
+      else if (strcmp (name, "HighConstrastInverse") == 0)
+        gtk_css_provider_load_named (provider, DEFAULT_THEME_NAME, "hc-dark");
+      else if (strcmp (name, DEFAULT_THEME_NAME) != 0)
+        gtk_css_provider_load_named (provider, DEFAULT_THEME_NAME, variant);
       else
         {
-          /* Worst case, fall back to the default */
-          g_return_if_fail (!g_str_equal (name, DEFAULT_THEME_NAME)); /* infloop protection */
+          g_return_if_fail (variant != NULL);
           gtk_css_provider_load_named (provider, DEFAULT_THEME_NAME, NULL);
         }
     }

gtk/gtksettingsprivate.h

@@ -23,7 +23,7 @@
 
 G_BEGIN_DECLS
 
-#define DEFAULT_THEME_NAME      "Adwaita"
+#define DEFAULT_THEME_NAME      "Default"
 #define DEFAULT_ICON_THEME      "Adwaita"
 
 const cairo_font_options_t *

gtk/meson.build

@@ -848,12 +848,10 @@ endif
 if sassc.found()
   sassc_opts = [ '-a', '-M', '-t', 'compact' ]
 
-  subdir('theme/Adwaita')
-  subdir('theme/HighContrast')
+  subdir('theme/Default')
 
   theme_deps = [
-    adwaita_theme_deps,
-    hc_theme_deps,
+    default_theme_deps,
   ]
 else
   theme_deps = []

gtk/theme/Adwaita/gtk-dark.css

@@ -1 +0,0 @@
-@import url("resource:///org/gtk/libgtk/theme/Adwaita/Adwaita-dark.css");

gtk/theme/Adwaita/gtk.css

@@ -1 +0,0 @@
-@import url("resource:///org/gtk/libgtk/theme/Adwaita/Adwaita.css");

gtk/theme/Adwaita/meson.build

@@ -1,32 +0,0 @@
-adwaita_scss_files = files([
-  '_colors-public.scss',
-  '_colors.scss',
-  '_common.scss',
-  '_drawing.scss',
-])
-
-adwaita_theme_variants = [
-  'dark',
-]
-
-adwaita_theme_deps = [
-  custom_target('Adwaita theme',
-    input: 'Adwaita.scss',
-    output: 'Adwaita.css',
-    command: [
-      sassc, sassc_opts, '@INPUT@', '@OUTPUT@',
-    ],
-    depend_files: adwaita_scss_files,
-  ),
-]
-
-foreach variant: adwaita_theme_variants
-  adwaita_theme_deps += custom_target('Adwaita theme variant: ' + variant,
-    input: 'Adwaita-@0@.scss'.format(variant),
-    output: 'Adwaita-@0@.css'.format(variant),
-    command: [
-      sassc, sassc_opts, '@INPUT@', '@OUTPUT@',
-    ],
-    depend_files: adwaita_scss_files,
-  )
-endforeach

gtk/theme/Adwaita/render-assets.sh

@@ -1,34 +0,0 @@
-#! /bin/bash
-
-INKSCAPE="/usr/bin/inkscape"
-OPTIPNG="/usr/bin/optipng"
-
-SRC_FILE="assets.svg"
-ASSETS_DIR="assets"
-INDEX="assets.txt"
-
-for i in `cat $INDEX`
-do 
-if [ -f $ASSETS_DIR/$i.png ]; then
-    echo $ASSETS_DIR/$i.png exists.
-else
-    echo
-    echo Rendering $ASSETS_DIR/$i.png
-    $INKSCAPE --export-id=$i \
-              --export-id-only \
-              --export-png=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null #\
-    # && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i.png 
-fi
-if [ -f $ASSETS_DIR/$i@2.png ]; then
-    echo $ASSETS_DIR/$i@2.png exists.
-else
-    echo
-    echo Rendering $ASSETS_DIR/$i@2.png
-    $INKSCAPE --export-id=$i \
-              --export-dpi=180 \
-              --export-id-only \
-              --export-png=$ASSETS_DIR/$i@2.png $SRC_FILE >/dev/null #\
-    # && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i@2.png 
-fi
-done
-exit 0

gtk/theme/Default/Default-dark.scss

@@ -0,0 +1,7 @@
+$variant: 'dark';
+$contrast: 'normal';
+
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'colors-public';

gtk/theme/Default/Default-hc-dark.scss

@@ -1,6 +1,7 @@
 $variant: 'dark';
+$contrast: 'high';
 
 @import 'colors';
+@import 'colors-public';
 @import 'drawing';
 @import 'common';
-@import 'colors-public';

gtk/theme/Default/Default-hc.scss

@@ -0,0 +1,7 @@
+$variant: 'light';
+$contrast: 'high';
+
+@import 'colors';
+@import 'colors-public';
+@import 'drawing';
+@import 'common';

gtk/theme/Default/Default-light.scss

@@ -5,6 +5,7 @@
 // - if you need to inverse a color function use the @if directive to match for dark $variant
 
 $variant: 'light';
+$contrast: 'normal';
 
 @import 'colors';
 @import 'drawing';

gtk/theme/Default/README

@@ -6,10 +6,18 @@ Summary
 * Note that meson always builds out-of-tree, so the modified css files will
   appear in your builddir.
 
+Theme variants
+--------------
+
+The Default theme comes in 4 variants: light, dark, hc (highcontrast) and
+hc-dark (highcontrast inverse). The generated CSS files for the variants
+are called Default-$variant.css. For technical reasons, GTK adds one level
+of include wrappers around these, which are called gtk-$variant.css.
+
 How to tweak the theme
 ----------------------
 
-Adwaita is a complex theme, so to keep it maintainable it's written and
+Default is a complex theme, so to keep it maintainable it's written and
 processed in SASS. The generated CSS is then transformed into a gresource file
 during gtk build and used at runtime in a non-legible or editable form.
 
@@ -28,10 +36,10 @@ _colors-public.scss - SCSS colors exported through gtk to allow for 3rd party
 
 _drawing.scss       - drawing helper mixings/functions to allow easier
                       definition of widget drawing under specific context. This
-                      is why Adwaita isn't 15000 LOC.
+                      is why Default isn't 15000 LOC.
 
 _common.scss        - actual definitions of style for each widget. This is
                       where you are likely to add/remove your changes.
-                      
+
 You can read about SASS at http://sass-lang.com/documentation/. Once you make
 your changes to the _common.scss file, GTK will rebuild the CSS files.

gtk/theme/Default/_colors.scss

@@ -72,3 +72,30 @@ $switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darke
 $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3));
 $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
 $dim_label_opacity: 0.55;
+
+// High Contrast color overrides
+@if $contrast == 'high' {
+
+  $fg_color: if($variant == 'light', darken($fg_color, 3%), lighten($fg_color, 2%));
+  $bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%));
+  $selected_bg_color: darken($selected_bg_color,10%);
+  $selected_borders_color: darken($selected_borders_color, 10%);
+  $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
+  $alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 28%));
+  $menu_color: $base_color;
+  $menu_selected_color: darken($bg_color,10%);
+
+  //insensitive state derived colors
+  $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+  $insensitive_bg_color: mix($bg_color, $base_color, 60%);
+  $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
+
+  //focus rings
+  $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.2), transparentize(white, 0.4));
+  $alt_focus_border_color: if($variant == 'light', white, transparentize(white,0.4));
+
+  $dim_label_opacity: 0.9;
+
+  $switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),lighten($switch_bg_color,15%));
+
+}

gtk/theme/Default/_common.scss

@@ -4,6 +4,7 @@
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
+$assets: if($contrast=='normal', 'assets', 'assets-hc');
 $backdrop_transition: 200ms ease-out;
 $button_transition: all 200ms $ease-out-quad;
 $focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
@@ -2525,11 +2526,11 @@ check {
   border-radius: 3px;
   -gtk-icon-size: 14px;
 
-  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
-                                            -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); }
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/check-symbolic.symbolic.png")),
+                                            -gtk-recolor(url("#{$assets}/check@2-symbolic.symbolic.png"))); }
 
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
+                                                  -gtk-recolor(url("#{$assets}/dash@2-symbolic.symbolic.png"))); }
 }
 
 %radio,
@@ -2537,11 +2538,11 @@ radio {
   border-radius: 100%;
   -gtk-icon-size: 14px;
 
-  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")),
-                                            -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); }
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/bullet-symbolic.symbolic.png")),
+                                            -gtk-recolor(url("#{$assets}/bullet@2-symbolic.symbolic.png"))); }
 
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
+                                                  -gtk-recolor(url("#{$assets}/dash@2-symbolic.symbolic.png"))); }
 }
 
 treeview.view check,
@@ -2805,7 +2806,7 @@ scale {
               // an asymmetric slider asset is used here, so the margins are uneven, the smaller
               // margin is set on the point side.
               margin: -10px;
-              $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+              $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
               border-style: none;
               border-radius: 0;
 
@@ -4151,19 +4152,19 @@ cursor-handle {
                   (':hover','-hover'),
                   (':active','-active') { //no need for insensitive and backdrop
     &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
-      $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
+      $_url: '#{$assets}/text-select-start#{$as}#{$asset_suffix}';
       -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
                                     url('#{$_url}@2.png'));
     }
 
     &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
-      $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
+      $_url: '#{$assets}/text-select-end#{$as}#{$asset_suffix}';
       -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
                                     url('#{$_url}@2.png'));
     }
 
     &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
-      $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+      $_url: '#{$assets}/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
       -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
                                     url('#{$_url}@2.png'));
     }