[libadwaita/wip/exalm/recoloring2] tmp

[Alexander Mikhaylenko <alexm src gnome org>]

commit 84541c2a2d6faa01be7fd87448703e18b5465949
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun May 23 20:06:32 2021 +0500

    tmp

 src/stylesheet/_drawing.scss         | 95 ++++++++++++++++++++----------------
 src/stylesheet/widgets/_buttons.scss | 52 ++++++++++++++++----
 src/stylesheet/widgets/_entries.scss |  7 ++-
 src/stylesheet/widgets/_linked.scss  |  4 ++
 4 files changed, 103 insertions(+), 55 deletions(-)
---
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 7018cdc1..4419e4f3 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -55,12 +55,14 @@
     color: $text_color;
     border-color: $borders_color;
     background-color: $base_color;
+    box-shadow: 0 0 0 1px transparentize(black, .85);
     // for the transition to work the number of shadows in different states needs to match, hence the 
transparent shadow here.
   }
   @if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $borders_color;
     background-color: $insensitive_bg_color;
+    box-shadow: 0 0 0 1px transparentize(black, .85);
   }
   @if $t==osd {
     color: $osd_text_color;
@@ -94,7 +96,7 @@
   @else { @return darken($c, 15%); }
 }
 
-$_default_button_c: lighten($bg_color,2%);
+$_default_button_c: lighten($bg_color, 10%);
 @mixin button($t, $c:$_default_button_c, $tc:$fg_color) {
 //
 // Button drawing function
@@ -115,26 +117,37 @@ $_default_button_c: lighten($bg_color,2%);
   //
     color: $tc;
     outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
-    border-color: if($c!=$_default_button_c, _border_color($c, true), $borders_color); //tint if not default 
button color
-    background-image: if($variant == 'light', linear-gradient(to top, darken($c, 2%) 2px, $c),
-                                              linear-gradient(to top, darken($c,1%) 2px, $c));
-    @include _shadows($_button_shadow);
+    border-color: transparent;
+
+    @if $variant == 'light' and $c == $_default_button_c {
+      background-color: transparentize(white, .1);
+    } @else if $c == $_default_button_c {
+      background-color: transparentize(white, .9);
+    }
+
+    @if $variant == 'light' and $c != $_default_button_c {
+      box-shadow: 0 0 0 1px shade($c, .8), 0 2px 1px transparentize(black, .85);
+    } @else {
+      box-shadow: 0 0 0 1px transparentize(black, .85), 0 2px 1px transparentize(black, .85);
+    }
   }
 
   @else if $t==hover {
   //
   // hovered button
   //
+
     color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    @if $variant == 'light' {
-      background-image: linear-gradient(to top, darken($c,16%), darken($c,8%) 1px);
-      @include _shadows($_button_shadow);
-    }
-    @else {
-      background-image: linear-gradient(to top, darken($c,4%) 20%, darken($c, 3%) 90%);
-      @include _shadows($_button_shadow);
+    border-color: transparent;
+    background-color: $c;
+
+    @if $variant == 'light' and $c != $_default_button_c {
+      box-shadow: 0 0 0 1px shade($c, .8), 0 2px 1px transparentize(black, .85);
+    } @else {
+      box-shadow: 0 0 0 1px transparentize(black, .85), 0 2px 1px transparentize(black, .85);
     }
+
+    background-image: image(transparentize($text_color, .9));
   }
 
   @else if $t==active {
@@ -142,9 +155,27 @@ $_default_button_c: lighten($bg_color,2%);
   // pushed button
   //
     color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
-    box-shadow: none;
+    border-color: transparent;
+
+    background-color: $c;
+
+    @if $variant == 'light' and $c != $_default_button_c {
+      box-shadow: 0 0 0 1px shade($c, .7);
+    } @else {
+      box-shadow: 0 0 0 1px transparentize(black, .7);
+    }
+
+    background-image: image(transparentize(black, .8));
+  }
+
+  @else if $t==checked {
+  //
+  // pushed button
+  //
+    color: $tc;
+    border-color: transparent;
+    background-color: if($c != $_default_button_c, $c, transparentize(black, .82));
+    box-shadow: 0 0 0 1px transparentize(if($c == $_default_button_c, black, $c), .8);
   }
 
   @else if $t==checked-hover {
@@ -152,9 +183,8 @@ $_default_button_c: lighten($bg_color,2%);
   // pushed togglebutton hover
   //
     color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 18%)), image(darken($c, 12%)));
-    box-shadow: none;
+    border-color: transparent;
+    background-color: if($c != $_default_button_c, $c, #{'alpha(mix(black, currentColor, .35), .24)'});
   }
 
   @else if $t==checked-active {
@@ -162,9 +192,9 @@ $_default_button_c: lighten($bg_color,2%);
   // pushed togglebutton pushed further :)
   //
     color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 22%)), image(darken($c, 14%)));
-    box-shadow: none;
+    border-color: transparent;
+    background-color: if($c != $_default_button_c, $c, transparentize(black, .7));
+    box-shadow: 0 0 0 1px transparentize(if($c == $_default_button_c, black, $c), .7);
   }
 
   @else if $t==insensitive {
@@ -249,34 +279,17 @@ $_default_button_c: lighten($bg_color,2%);
   //
     border-color: transparent;
     background-color: transparent;
-    background-image: none;
     box-shadow: none;
   }
   @else if $t==undecorated-hover {
     border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_hover_color;
+    background-color: if($c != $_default_button_c, $c, transparentize($tc, .92));
   }
   @else if $t==undecorated-active {
     border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_active_color;
-  }
-  @else if $t==undecorated-checked {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_color;
+    background-color: if($c != $_default_button_c, $c, transparentize(black, .88));
   }
-  @else if $t==undecorated-checked-hover {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_hover_color;
   }
-}
 
 @mixin overshoot($p, $c:$fg_color) {
 //
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 9f73c252..b62d6a20 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -11,14 +11,13 @@ button {
   @at-root %button_basic, & {
     min-height: 24px;
     min-width: 16px;
-    padding: 4px 9px;
-    border: 1px solid;
+    padding: 5px 10px;
     border-radius: $button_radius;
     transition: $button_transition;
 
     @include button(normal);
 
-    @include focus-ring();
+    @include focus-ring($offset: -1px);
 
     &:hover {
       @include button(hover);
@@ -79,18 +78,18 @@ button {
 
     &.image-button {
       min-width: 24px;
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 6px;
+      padding-right: 6px;
     }
 
     &.text-button {
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: 17px;
+      padding-right: 17px;
     }
 
     &.text-button.image-button {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 9px;
+      padding-right: 9px;
 
       label {
         padding-left: 8px;
@@ -289,7 +288,7 @@ button {
 }
 
 button.color {
-  padding: 4px;
+  padding: 5px;
 
   > colorswatch:only-child {
     &, > overlay { border-radius: 0; }
@@ -352,3 +351,36 @@ menubutton {
     }
   }
 }
+
+button {
+  color: inherit;
+}
+
+$shade_color: rgb(50,0,50);
+
+.colored button {
+  background: rgba(255,255,255,.25);
+  box-shadow: 0 0 0 1px gtkalpha(black, .15), 0 2px 1px gtkalpha(black, .1);
+}
+
+.colored.shifted button {
+  background: rgba(255,255,220,.25);
+  box-shadow: 0 0 0 1px gtkalpha($shade_color, .15), 0 2px 1px gtkalpha($shade_color, .1);
+}
+
+.colored.shifted.dark button {
+  background: rgba(255,255,220, .1);
+}
+
+.colored.dark button {
+  background: rgba(255,255,255, .1);
+}
+
+.colored.shifted.light button {
+  background: rgba(255,255,220, .9);
+}
+
+.colored.light button {
+  background: rgba(255,255,255, .9);
+}
+
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 095de974..8b4e13df 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -2,16 +2,15 @@
 entry {
   %entry_basic, & {
     min-height: 32px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border: 1px solid;
+    padding-left: 9px;
+    padding-right: 9px;
     border-radius: $button_radius;
     border-spacing: 6px;
     transition: all 200ms $ease-out-quad;
 
     @include entry(normal);
 
-    @include focus-ring($focus-state: 'focus-within');
+    @include focus-ring($focus-state: 'focus-within', $offset: -1px);
 
     > text {
       > placeholder {
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 44834088..e580ae08 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -77,3 +77,7 @@ entry {
     }
   }
 }
+
+.linked {
+  border-spacing: 1px;
+}