GNOME.org
 

[libadwaita/wip/exalm/recoloring: 10/11] Recoloring


commit eae30eb2a57ff9258140c00a6d4fac728cc8dfa7
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu May 20 00:05:47 2021 +0500

    Recoloring

 src/stylesheet/_common.scss                 |  2 +-
 src/stylesheet/_drawing.scss                |  6 +++++-
 src/stylesheet/widgets/_calendar.scss       |  6 +++---
 src/stylesheet/widgets/_checks.scss         |  8 ++++----
 src/stylesheet/widgets/_entries.scss        |  6 +++---
 src/stylesheet/widgets/_header-bar.scss     |  4 ++--
 src/stylesheet/widgets/_level-bar.scss      |  2 +-
 src/stylesheet/widgets/_lists.scss          |  2 +-
 src/stylesheet/widgets/_notebook.scss       |  8 ++++----
 src/stylesheet/widgets/_paned.scss          |  2 +-
 src/stylesheet/widgets/_scale.scss          |  4 ++--
 src/stylesheet/widgets/_switch.scss         | 10 +++++-----
 src/stylesheet/widgets/_text-selection.scss |  2 +-
 src/stylesheet/widgets/_trees.scss          |  8 ++++----
 src/stylesheet/widgets/_views.scss          |  4 ++--
 15 files changed, 39 insertions(+), 35 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index e7072a3e..a7845786 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -47,7 +47,7 @@ selection {
   color: transparent;
 
   &:focus-within {
-    background-color: transparentize($selected_bg_color, 0.7);
+    background-color: #{'alpha(@theme_selected_bg_color, .3)'};
   }
 }
 
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index d34a0de3..8e34da9d 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -19,7 +19,11 @@
   }
 
   &:#{$focus-state} #{$target} {
-    outline-color: $fc;
+    @if $fc == $focus_border_color {
+      outline-color: #{'alpha(@theme_selected_bg_color, .5)'};
+    } @else {
+      outline-color: $fc;
+    }
     outline-width: $width;
     outline-offset: $offset;
   }
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 89b535e2..8293fa26 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -31,10 +31,10 @@ calendar {
         &:selected {
           border-radius: 3px;
 
-          background-color: $selected_bg_color;
-          color: $selected_fg_color;
+          background-color: #{'@theme_selected_bg_color'};
+          color: #{'@theme_selected_fg_color'};
 
-          &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+          &:disabled { color: #{'alpha(@theme_selected_bg_color, .5)'}; }
         }
       }
 
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 105bde4d..d81b395b 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -33,18 +33,18 @@ radio {
 
   &:checked,
   &:indeterminate {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: #{'@theme_selected_bg_color'};
+    color: #{'@theme_selected_fg_color'};
 
     @if $contrast == "high" {
       box-shadow: none;
     }
 
     &:hover {
-      background-color: mix($selected_bg_color, $text_color, 90%);
+      background-color: #{'mix(@theme_selected_bg_color, #{$text_color}, .1)'};
 
       &:active {
-        background-color: mix($selected_bg_color, black, 80%);
+        background-color: #{'mix(@theme_selected_bg_color, black, .2)'};
       }
     }
   }
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 57be96b4..fd113c1c 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -56,7 +56,7 @@ entry {
 
       &:hover { color: $fg_color; }
 
-      &:active { color: $selected_bg_color; }
+      &:active { color: #{'@theme_selected_bg_color'}; }
 
       &.left { margin-right: 6px; }
       &.right { margin-left: 6px; }
@@ -90,7 +90,7 @@ entry {
       background-image: none;
       border-radius: 0;
       border-width: 0 0 2px;
-      border-color: $selected_bg_color;
+      border-color: #{'@theme_selected_bg_color'};
       border-style: solid;
       box-shadow: none;
     }
@@ -153,6 +153,6 @@ treeview entry {
     background-image: none;
     background-color: $base_color;
 
-    &:focus-within { border-color: $selected_bg_color; }
+    &:focus-within { border-color: #{'@theme_selected_bg_color'}; }
   }
 }
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 4ea84f4e..6921b252 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -156,11 +156,11 @@ window.devel {
   headerbar {
     $c: darken($bg_color, 10%);
     $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
-               linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
+               linear-gradient(to right, transparent 65%, #{'alpha(@theme_selected_bg_color, 0.2)'}),
                $_header_bar_gradient;
     @if $variant == 'dark' {
       $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
-                 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+                 linear-gradient(to right, transparent 65%, #{'alpha(@theme_selected_bg_color, 0.1)'}),
                  $_header_bar_gradient;
     }
 
diff --git a/src/stylesheet/widgets/_level-bar.scss b/src/stylesheet/widgets/_level-bar.scss
index ccbcf3f7..919a33fd 100644
--- a/src/stylesheet/widgets/_level-bar.scss
+++ b/src/stylesheet/widgets/_level-bar.scss
@@ -81,7 +81,7 @@ levelbar {
 
       &.high,
       &:not(.empty) {
-        background-color: $selected_bg_color;
+        background-color: #{'@theme_selected_bg_color'};
       }
 
       &.full {
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 7bcf2a85..927f470a 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -172,7 +172,7 @@ row.expander {
   }
 
   &:checked image.expander-row-arrow:not(:disabled) {
-    color: $selected_bg_color;
+    color: #{'@theme_selected_bg_color'};
   }
 
   & image.expander-row-arrow:disabled {
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index bf0060d0..6cfac367 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -17,7 +17,7 @@ notebook {
           &:hover { box-shadow: inset 0 -4px $borders_color; }
 
 
-          &:checked { box-shadow: inset 0 -4px $selected_bg_color; }
+          &:checked { box-shadow: inset 0 -4px #{'@theme_selected_bg_color'}; }
         }
       }
     }
@@ -29,7 +29,7 @@ notebook {
         > tab {
           &:hover { box-shadow: inset 0 4px $borders_color; }
 
-          &:checked { box-shadow: inset 0 4px $selected_bg_color; }
+          &:checked { box-shadow: inset 0 4px #{'@theme_selected_bg_color'}; }
         }
       }
     }
@@ -41,7 +41,7 @@ notebook {
         > tab {
           &:hover { box-shadow: inset -4px 0 $borders_color; }
 
-          &:checked { box-shadow: inset -4px 0 $selected_bg_color; }
+          &:checked { box-shadow: inset -4px 0 #{'@theme_selected_bg_color'}; }
         }
       }
     }
@@ -53,7 +53,7 @@ notebook {
         > tab {
           &:hover { box-shadow: inset 4px 0 $borders_color; }
 
-          &:checked { box-shadow: inset 4px 0 $selected_bg_color; }
+          &:checked { box-shadow: inset 4px 0 #{'@theme_selected_bg_color'}; }
         }
       }
     }
diff --git a/src/stylesheet/widgets/_paned.scss b/src/stylesheet/widgets/_paned.scss
index 09f2681f..6ba2c9f6 100644
--- a/src/stylesheet/widgets/_paned.scss
+++ b/src/stylesheet/widgets/_paned.scss
@@ -9,7 +9,7 @@ paned {
     background-image: image($borders_color);
     background-size: 1px 1px;
 
-    &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+    &:selected { background-image: image(#{'@theme_selected_bg_color'}); } // FIXME is this needed?
 
     &.wide {
       min-width: 5px;
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 42af4780..529c78e4 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -14,7 +14,7 @@
 
 %scale_highlight {
   border-radius: 3px;
-  background-color: $selected_bg_color;
+  background-color: #{'@theme_selected_bg_color'};
 }
 
 scale {
@@ -67,7 +67,7 @@ scale {
       background-color: transparentize($text_color, .8);
 
       > highlight {
-        background-color: mix($selected_bg_color, $text_color, 90%);
+        background-color: #{'mix(@theme_selected_bg_color, #{$text_color}, .1)'};
       }
 
       > slider {
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index bb52748e..71ce55de 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -51,17 +51,17 @@ switch {
   }
 
   &:checked {
-    color: $selected_fg_color;
-    background-color: $selected_bg_color;
+    color: #{'@theme_selected_fg_color'};
+    background-color: #{'@theme_selected_bg_color'};
 
     &:hover {
-      background-color: mix($selected_bg_color, $text_color, 90%);
+      background-color: #{'mix(@theme_selected_bg_color, #{$text_color}, .1)'};
 
-      &:active { background-color: mix($selected_bg_color, black, 80%); }
+      &:active { background-color: #{'mix(@theme_selected_bg_color, black, .2)'}; }
     }
 
     > slider {
-      background-color: $selected_fg_color;
+      background-color: #{'@theme_selected_fg_color'};
     }
   }
 }
diff --git a/src/stylesheet/widgets/_text-selection.scss b/src/stylesheet/widgets/_text-selection.scss
index 2d6ed479..08e76ec0 100644
--- a/src/stylesheet/widgets/_text-selection.scss
+++ b/src/stylesheet/widgets/_text-selection.scss
@@ -7,7 +7,7 @@ cursor-handle {
     min-height: 20px;
     border-radius: 50%;
 
-    background-color: $selected_bg_color;
+    background-color: #{'@theme_selected_bg_color'};
   }
 
   &.top > contents {
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index d85a5f9f..bc12a557 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -54,8 +54,8 @@ treeview.view {
     @if $variant == light { color: $base_color; }
 
     &, &:selected {
-      background-color: $selected_bg_color;
-      color: $selected_fg_color;
+      background-color: #{'@theme_selected_bg_color'};
+      color: #{'@theme_selected_fg_color'};
     }
 
     box-shadow: none;
@@ -110,7 +110,7 @@ treeview.view {
       padding: 0 6px;
       color: $base_color;
       background-image: none;
-      background-color: $selected_bg_color;
+      background-color: #{'@theme_selected_bg_color'};
       border-style: none;
       border-radius: 0;
       box-shadow: inset 0 0 0 1px $base_color;
@@ -177,7 +177,7 @@ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
 }
 
 columnview row:not(:selected) cell editablelabel.editing:focus-within {
-  outline: 2px solid $selected_bg_color;
+  outline: 2px solid #{'@theme_selected_bg_color'};
 }
 
 treeexpander {
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index 985b44ac..e6e8d085 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -48,8 +48,8 @@ iconview {
 }
 
 rubberband {
-  border: 1px solid $selected_bg_color;
-  background-color: transparentize($selected_bg_color, 0.8);
+  border: 1px solid #{'@theme_selected_bg_color'};
+  background-color: #{'alpha(@theme_selected_bg_color, 0.2)'};
 }
 
 flowbox {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]