[epiphany/wip/exalm/hc: 13/15] css: Refactor Adwaita recoloring

[Alexander Mikhaylenko <alexm src gnome org>]

commit 47cec5abfef4ca4cc42ea8d91e5b82ff3fa100ed
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Apr 21 20:08:41 2020 +0500

    css: Refactor Adwaita recoloring
    
    Generalize the incognito style and move it to a separate file. Use
    variables from Adwaita to not trigger special-casing in button mixing
    (leading to wrong borders).
    
    This allows to use it for both incognito and automation modes, with
    different base color and icon variables.
    
    Remove the shared incognito mode definitions other than icon and the base
    color, as they are unused now.

 src/resources/themes/_Adwaita-base.scss           | 200 +---------------------
 src/resources/themes/_Adwaita-colored-window.scss | 170 ++++++++++++++++++
 src/resources/themes/_definitions.scss            |  12 +-
 3 files changed, 179 insertions(+), 203 deletions(-)
---
diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
index 38ec1997e..d65a439a3 100644
--- a/src/resources/themes/_Adwaita-base.scss
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -2,203 +2,19 @@
 @import 'shared-base';
 
 .incognito-mode {
-  headerbar {
-    @include headerbar_fill(darken($incognito_color, 10%), $incognito_edge_color, 
-gtk-icontheme($incognito_icon) 180px 0 / 64px 64px no-repeat);
-
-    border-color: _border_color($incognito_borders_color);
-
-    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
-
-    &:backdrop {
-      background-image: -gtk-icontheme($incognito_icon), image($incognito_color);
-      box-shadow: inset 0 1px $incognito_edge_color;
-      color: transparentize($incognito_backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
-    }
-  }
-
-  actionbar {
-    background: $incognito_color;
-
-    > revealer > box {
-      border-color: $incognito_borders_color;
-    }
-  }
-
-  notebook > header {
-    border-color: $incognito_borders_color;
-    background-color: $incognito_dark_fill;
-
-    &:backdrop {
-      border-color: $incognito_backdrop_borders_color;
-      background-color: $incognito_backdrop_dark_fill;
-    }
-
-    > tabs > tab {
-      color: $incognito_insensitive_fg_color;
-
-      button.flat {
-        &:hover { color: currentColor; }
-        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
-      }
-
-      &:hover {
-        color: mix($incognito_insensitive_fg_color, $fg_color, 50%);
-        border-color: transparentize($incognito_borders_color, 0.7);
-        background-color: transparentize($incognito_color, 0.8);
-        box-shadow: inset 0 -3px $incognito_borders_color;
-      }
-
-      &:backdrop {
-        color: mix($incognito_backdrop_fg_color, $incognito_backdrop_bg_color, 60%);
-        border-color: transparent;
-        background-color: transparent;
-        box-shadow: none;
-      }
-
-      &:checked {
-        color: $fg_color;
-        border-color: transparentize($incognito_borders_color, 0.5);
-        background-color: transparentize($incognito_color, 0.5);
-        box-shadow: inset 0 -3px $selected_bg_color;
-
-        &:hover { background-color: transparentize($incognito_color, 0.3); }
-      }
-
-      &:backdrop:checked {
-        color: $incognito_backdrop_fg_color;
-        border-color: $incognito_backdrop_borders_color;
-        background-color: $incognito_backdrop_bg_color;
-      }
-    }
-
-    > tabs > arrow:active {
-      @include button(active, $incognito_color);
-    }
-  }
-
-  headerbar, actionbar, notebook > header {
-    > * {
-      color: $fg_color;
-
-      &:backdrop { color: $incognito_backdrop_fg_color }
-    }
-
-    button { // changing the headerbar background color requires changing widget borders accordingly
-      @include button(normal, $incognito_color);
-
-      &.flat, &.titlebutton { @include button(undecorated); }
-
-      &.titlebutton { @include _button_text_shadow($fg_color, $incognito_color); }
-
-      &:hover { @include button(hover, $incognito_color); }
-
-      &:active, &:checked { @include button(active, $incognito_color); }
-
-      &:disabled { @include button(insensitive, $incognito_color); }
-
-      &:backdrop {
-        @include button(backdrop, $incognito_color);
-        border-color: _border_color($incognito_color);
-
-        &:active {
-          @include button(backdrop-active, $incognito_color);
-          border-color: _border_color($incognito_color);
-        }
-
-        &:disabled {
-          @include button(backdrop-insensitive, $incognito_color);
-          border-color: _border_color($incognito_color);
-        }
-      }
-
-      &:checked {
-        background: if($variant == 'light', image(darken($incognito_color, 17%)), 
image(darken($incognito_color, 9%)));
-        border-color: darken($incognito_borders_color, 3%);
-        border-top-color: darken($incognito_borders_color, 8%);
-        &:backdrop {
-          @include button(backdrop-active, $incognito_color);
-        }
-      }
-
-      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
-    }
-
-    entry {
-      border-color: _border_color($incognito_borders_color);
-
-      &:focus {
-        border-color: entry_focus_border($selected_bg_color);
-        box-shadow: entry_focus_shadow($selected_bg_color);
-      }
-
-      &:backdrop { box-shadow: none; }
-    }
-  }
+  $window_color: $incognito_color;
+  $window_icon: $incognito_icon;
+  @import 'Adwaita-colored-window';
 }
 
 .automation-mode {
-  headerbar {
-    @include headerbar_fill($automation_color, $automation_edge_color);
-
-    border-color: _border_color($automation_color);
-
-    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
-
-    > * {
-      color: $fg_color;
-
-      &:backdrop { color: $backdrop_fg_color }
-    }
-
-    &:backdrop {
-      box-shadow: inset 0 1px $automation_edge_color;
-      color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
-    }
-
-    button { // changing the headerbar background color requires changing widget borders accordingly
-      @include button(normal, $automation_color);
-
-      &.flat, &.titlebutton { @include button(undecorated); }
-
-      &.titlebutton { @include _button_text_shadow($fg_color, $automation_color); }
-
-      &:hover { @include button(hover, $automation_color); }
-
-      &:active, &:checked { @include button(active, $automation_color); }
-
-      &:disabled { @include button(insensitive, $automation_color); }
-
-      &:backdrop {
-        @include button(backdrop, $automation_color);
-        border-color: _border_color($automation_color);
-
-        &:active {
-          @include button(backdrop-active, $automation_color);
-          border-color: _border_color($automation_color);
-        }
-
-        &:disabled {
-          @include button(backdrop-insensitive, $automation_color);
-          border-color: _border_color($automation_color);
-        }
-      }
-
-      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
-    }
-
-    entry {
-      border-color: _border_color($automation_color);
-
-      &:focus {
-        border-color: entry_focus_border($selected_bg_color);
-        box-shadow: entry_focus_shadow($selected_bg_color);
-      }
-
-      &:backdrop { box-shadow: none; }
-    }
-  }
+  $window_color: $automation_color;
+  $window_icon: '';
+  @import 'Adwaita-colored-window';
 }
 
+@import 'drawing';
+
 $close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken($fg_color, 10%));
 @mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
   background: none;
diff --git a/src/resources/themes/_Adwaita-colored-window.scss 
b/src/resources/themes/_Adwaita-colored-window.scss
new file mode 100644
index 000000000..62729109d
--- /dev/null
+++ b/src/resources/themes/_Adwaita-colored-window.scss
@@ -0,0 +1,170 @@
+$backdrop_transition: 200ms ease-out;
+
+$base_color: lighten($window_color, 5%);
+$bg_color: lighten($window_color, 5%);
+$fg_color: hsl(hue($base_color), saturation($base_color), lightness($fg_color));
+$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
+$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
+$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
+$top_hilight: $borders_edge;
+$dark_fill: mix($borders_color, $bg_color, 50%);
+
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
+$backdrop_bg_color: $bg_color;
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
+$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
+$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
+$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), 
lighten($backdrop_bg_color, 15%));
+
+@import 'drawing';
+
+headerbar {
+  @if $window_icon != '' {
+    @include headerbar_fill(darken($bg_color, 10%), $top_hilight, -gtk-icontheme($window_icon) 180px 0 / 
64px 64px no-repeat);
+  }
+  @else {
+    @include headerbar_fill(darken($bg_color, 10%));
+  }
+
+  border-color: $alt_borders_color;
+  color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
+
+  &:backdrop {
+    @if $window_icon != '' {
+      background-image: cross-fade(50% -gtk-icontheme($window_icon), image(transparent)), image($bg_color);
+    }
+    @else {
+      background-image: image($bg_color);
+    }
+
+    border-color: $backdrop_borders_color;
+    box-shadow: inset 0 1px $top_hilight;
+  }
+}
+
+actionbar {
+  background: $bg_color;
+
+  > revealer > box {
+    border-color: $borders_color;
+  }
+
+  &:backdrop {
+    background: $backdrop_bg_color;
+
+    > revealer > box {
+      border-color: $backdrop_borders_color;
+    }
+  }
+}
+
+notebook > header {
+  border-color: $borders_color;
+  background-color: $dark_fill;
+
+  &:backdrop {
+    border-color: $backdrop_borders_color;
+    background-color: $backdrop_dark_fill;
+  }
+
+  > tabs > tab {
+    color: $insensitive_fg_color;
+
+    button.flat {
+      &:hover { color: currentColor; }
+      &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+    }
+
+    &:hover {
+      color: mix($insensitive_fg_color, $fg_color, 50%);
+      border-color: transparentize($borders_color, 0.7);
+      background-color: transparentize($bg_color, 0.8);
+      box-shadow: inset 0 -3px $borders_color;
+    }
+
+    &:backdrop {
+      color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
+      border-color: transparent;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:checked {
+      color: $fg_color;
+      border-color: transparentize($borders_color, 0.5);
+      background-color: transparentize($bg_color, 0.5);
+      box-shadow: inset 0 -3px $selected_bg_color;
+
+      &:hover { background-color: transparentize($bg_color, 0.3); }
+    }
+
+    &:backdrop:checked {
+      color: $backdrop_fg_color;
+      border-color: $backdrop_borders_color;
+      background-color: $backdrop_bg_color;
+    }
+  }
+
+  > tabs > arrow:active {
+    @include button(active);
+  }
+}
+
+headerbar, actionbar, notebook > header {
+  > * {
+    color: $fg_color;
+
+    &:backdrop { color: $backdrop_fg_color }
+  }
+
+  button {
+    @include button(normal);
+
+    &.flat, &.titlebutton { @include button(undecorated); }
+
+    &.titlebutton { @include _button_text_shadow($fg_color); }
+
+    &:hover { @include button(hover); }
+
+    &:active, &:checked { @include button(active); }
+
+    &:disabled { @include button(insensitive); }
+
+    &:backdrop {
+      @include button(backdrop);
+
+      &:active { @include button(backdrop-active); }
+
+      &:disabled { @include button(backdrop-insensitive); }
+    }
+
+    &:checked {
+      background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
+      border-color: darken($borders_color, 3%);
+      border-top-color: darken($borders_color, 8%);
+      &:backdrop {
+        @include button(backdrop-active);
+      }
+    }
+
+    &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
+  }
+
+  entry {
+    border-color: $borders_color;
+
+    &:focus {
+      border-color: entry_focus_border($selected_bg_color);
+      box-shadow: entry_focus_shadow($selected_bg_color);
+    }
+
+    &:backdrop {
+      box-shadow: none;
+      border-color: $backdrop_borders_color;
+    }
+  }
+}
diff --git a/src/resources/themes/_definitions.scss b/src/resources/themes/_definitions.scss
index 4885f482c..da5cb064c 100644
--- a/src/resources/themes/_definitions.scss
+++ b/src/resources/themes/_definitions.scss
@@ -1,19 +1,9 @@
 @import 'colors';
-@import 'drawing';
 
 // incognito mode
 
-$incognito_base_color: if($variant == 'light', #d7e3f0, #1c2438);
-$incognito_color: lighten($incognito_base_color, 5%);
+$incognito_color: if($variant == 'light', #d7e3f0, #1c2438);
 $incognito_icon: 'user-not-tracked-symbolic';
-$incognito_edge_color: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
-$incognito_borders_color: if($variant == 'light', darken($incognito_color, 11%), darken($incognito_color, 
5%));
-$incognito_dark_fill: mix($incognito_borders_color, $incognito_color, 50%);
-$incognito_insensitive_fg_color: mix($fg_color, $incognito_color, 50%);
-$incognito_backdrop_bg_color: $incognito_color;
-$incognito_backdrop_fg_color: mix($fg_color, $incognito_backdrop_bg_color, 50%);
-$incognito_backdrop_borders_color: mix($incognito_borders_color, $incognito_color, 80%);
-$incognito_backdrop_dark_fill: mix($incognito_backdrop_borders_color, $incognito_backdrop_bg_color, 35%);
 
 // automation mode
 $automation_color: #ff9600;