Reorganize our themes

Rename the included theme to Default, with 4 variants:
light, dark, hc, hc-dark. This replaces Adwaita,
Adwaita:dark, HighContrast and HighContrastInverse.
We still make the themes available under these names,
and we still set up Adwaita-dark and HighContrastInverse
as the dark variants of Adwaita and HighContrast.

The unification of the theme variants under Default
is not quite perfect; it would be nice to merge
the assets/ and assets-hc/ subdirectories and render
all assets from a single svg file.

gtk/gen-gtk-gresources-xml.py

@@ -32,36 +32,38 @@ 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>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>
+    <file alias='theme/Adwaita/gtk.css'>theme/Default/gtk.css</file>
+    <file alias='theme/Adwaita/gtk-dark.css'>theme/Default/gtk-dark.css</file>
+    <file alias='theme/Adwaita-dark/gtk.css'>theme/Default/gtk-dark.css</file>
+    <file alias='theme/HighContrast/gtk.css'>theme/Default/gtk-hc.css</file>
+    <file alias='theme/HighContrast/gtk-dark.css'>theme/Default/gtk-hc-dark.css</file>
+    <file alias='theme/HighContrastInverse/gtk.css'>theme/Default/gtk-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/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;
@@ -2524,11 +2525,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,
@@ -2536,11 +2537,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,
@@ -2804,7 +2805,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;
 
@@ -4150,19 +4151,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'));
     }