[libadwaita/wip/exalm/background-colors: 4/7] stylesheet: Rename base/text/bg/fg_color variables

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [libadwaita/wip/exalm/background-colors: 4/7] stylesheet: Rename base/text/bg/fg_color variables
Date: Tue, 19 Oct 2021 21:22:47 +0000 (UTC)

commit fba34582d22c48368d4463c021e80d18f4a2e51c
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Oct 20 02:14:02 2021 +0500

    stylesheet: Rename base/text/bg/fg_color variables
    
    * base_color -> view_bg_color
    * text_color -> view_fg_color
    * bg_color -> window_bg_color
    * fg_color -> window_fg_color
    
    Replace a few sass function instances, consistently use underscores in
    their names.

 src/stylesheet/_colors.scss                 | 23 ++++++++++++-----------
 src/stylesheet/_common.scss                 |  8 ++++----
 src/stylesheet/_compat-colors.scss          | 22 +++++++++++-----------
 src/stylesheet/widgets/_buttons.scss        |  2 +-
 src/stylesheet/widgets/_calendar.scss       |  2 +-
 src/stylesheet/widgets/_color-chooser.scss  |  4 ++--
 src/stylesheet/widgets/_dialogs.scss        |  2 +-
 src/stylesheet/widgets/_emoji-chooser.scss  |  2 +-
 src/stylesheet/widgets/_entries.scss        | 14 +++++++-------
 src/stylesheet/widgets/_file-chooser.scss   |  2 +-
 src/stylesheet/widgets/_labels.scss         |  4 ++--
 src/stylesheet/widgets/_lists.scss          |  4 ++--
 src/stylesheet/widgets/_notebook.scss       |  2 +-
 src/stylesheet/widgets/_paned.scss          |  2 +-
 src/stylesheet/widgets/_scrolling.scss      |  8 ++++----
 src/stylesheet/widgets/_text-selection.scss |  2 +-
 src/stylesheet/widgets/_toolbars.scss       |  2 +-
 src/stylesheet/widgets/_trees.scss          | 24 ++++++++++++------------
 src/stylesheet/widgets/_views.scss          |  8 ++++----
 19 files changed, 69 insertions(+), 68 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 74b03241..5d6a5d40 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -13,10 +13,11 @@ $success_color: gtkcolor(success_color);
 $warning_color: gtkcolor(warning_color);
 $error_color: gtkcolor(error_color);
 
-$base_color: if($variant == 'light', white, #1e1e1e);
-$text_color: if($variant == 'light', black, white);
-$bg_color: if($variant == 'light', #fafafa, #242424);
-$fg_color: if($variant == 'light', transparentize(black, .2), white);
+$window_bg_color: if($variant == 'light', #fafafa, #242424);
+$window_fg_color: if($variant == 'light', transparentize(black, .2), white);
+
+$view_bg_color: if($variant == 'light', white, #1e1e1e);
+$view_fg_color: if($variant == 'light', black, white);
 
 $border_opacity: if($contrast == 'high', .5, .15);
 $window_outline_opacity: if($contrast == 'high', .3, .1);
@@ -24,13 +25,13 @@ $window_outline_opacity: if($contrast == 'high', .3, .1);
 $border_color: gtkalpha(currentColor, $border_opacity);
 $thin_border_color: gtkalpha(currentColor, .05);
 $link_color: $accent_color;
-$link_visited_color: gtkmix($accent_color, $text_color, 80%);
+$link_visited_color: gtkmix($accent_color, $view_fg_color, 80%);
 $headerbar_bg_color: if($variant == 'light', #ebebeb, #303030);
-$headerbar_fg_color: $fg_color;
-$headerbar_border_color: gtkalpha($fg_color, $border_opacity);
-$headerbar_backdrop_color: $bg_color;
+$headerbar_fg_color: $window_fg_color;
+$headerbar_border_color: gtkalpha($window_fg_color, $border_opacity);
+$headerbar_backdrop_color: $window_bg_color;
 $card_bg_color: if($variant == 'light', #ffffff, transparentize(white, .945));
-$card_fg_color: $fg_color;
+$card_fg_color: $window_fg_color;
 $card_border_color: if($variant == 'light', gtkalpha(currentColor, .18), gtkalpha(currentColor, .18));
 $scrollbar_outline_color: if($variant == 'light', white, transparentize(black, .5));
 
@@ -38,7 +39,7 @@ $shade_color: if($variant == 'light', transparentize(black, .93), transparentize
 $headerbar_shade_color: $shade_color;
 
 $popover_bg_color: if($variant == 'light', #ffffff, #383838);
-$popover_fg_color: $fg_color;
+$popover_fg_color: $window_fg_color;
 
 $window_outline_color: gtkalpha(if($variant == 'light', transparent, white), $window_outline_opacity);
 $window_border_color: if($variant == 'light', transparentize(black, 0.77), transparentize(black, 0.25));
@@ -59,7 +60,7 @@ $fill_text_color: $accent_fg_color;
 $fill_hover_color: gtkmix($accent_bg_color, currentColor, 90%);
 $fill_active_color: gtkmix($accent_bg_color, black, 80%);
 
-$slider_color: mix(white, $base_color, 80%);
+$slider_color: gtkmix(white, $view_bg_color, 80%);
 $slider_hover_color: white;
 
 $osd_fg_color: transparentize(white, .1);
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index ae193d46..4b083b6d 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -11,12 +11,12 @@ $window_radius: $button_radius + 6;
 $popover_radius: $window_radius;
 
 .background {
-  color: $fg_color;
-  background-color: $bg_color;
+  color: $window_fg_color;
+  background-color: $window_bg_color;
 }
 
 dnd {
-  color: $fg-color;
+  color: $window_fg_color;
 }
 
 .normal-icons {
@@ -38,7 +38,7 @@ dnd {
 /* Text selection */
 
 selection {
-  background-color: transparentize($text_color, 0.9);
+  background-color: gtkalpha($view_fg_color, 0.1);
   color: transparent;
 
   &:focus-within {
diff --git a/src/stylesheet/_compat-colors.scss b/src/stylesheet/_compat-colors.scss
index 0028ec8c..dd0a65de 100644
--- a/src/stylesheet/_compat-colors.scss
+++ b/src/stylesheet/_compat-colors.scss
@@ -3,27 +3,27 @@
 
 /* Public colors from Default */
 
-@define-color theme_bg_color #{$bg_color};
-@define-color theme_fg_color #{$fg_color};
+@define-color theme_bg_color #{$window_bg_color};
+@define-color theme_fg_color #{$window_fg_color};
 
-@define-color theme_base_color #{$base_color};
-@define-color theme_text_color #{$text_color};
+@define-color theme_base_color #{$view_bg_color};
+@define-color theme_text_color #{$view_fg_color};
 
 @define-color theme_selected_bg_color #{$accent_bg_color};
 @define-color theme_selected_fg_color #{$accent_fg_color};
 
-@define-color insensitive_bg_color #{gtkmix($bg_color, $base_color, 60%)};
-@define-color insensitive_fg_color #{gtkalpha($fg_color, .5)};
+@define-color insensitive_bg_color #{gtkmix($window_bg_color, $view_bg_color, 60%)};
+@define-color insensitive_fg_color #{gtkalpha($window_fg_color, .5)};
 
-@define-color insensitive_base_color #{$base_color};
+@define-color insensitive_base_color #{$view_bg_color};
 
 @define-color borders #{$border_color};
 
-@define-color theme_unfocused_bg_color #{$bg_color};
-@define-color theme_unfocused_fg_color #{$fg_color};
+@define-color theme_unfocused_bg_color #{$window_bg_color};
+@define-color theme_unfocused_fg_color #{$window_fg_color};
 
-@define-color theme_unfocused_base_color #{$base_color};
-@define-color theme_unfocused_text_color #{$text_color};
+@define-color theme_unfocused_base_color #{$view_bg_color};
+@define-color theme_unfocused_text_color #{$view_fg_color};
 
 @define-color theme_unfocused_selected_bg_color #{$accent_bg_color};
 @define-color theme_unfocused_selected_fg_color #{$accent_fg_color};
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 0b826811..da0e9ab2 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -310,7 +310,7 @@ button.color {
     }
 
     &.light > overlay {
-      border-color: gtkalpha($text_color, 0.1);
+      border-color: gtkalpha($view_fg_color, 0.1);
     }
   }
 }
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 15d32d48..94a10090 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -1,5 +1,5 @@
 calendar {
-  color: $text_color;
+  color: $view_fg_color;
   background-clip: padding-box;
   border: 1px solid $border_color;
 
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index 97aa16a8..e8f9698a 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -56,7 +56,7 @@ colorswatch {
 
   @if $contrast == 'high' {
     > overlay {
-      box-shadow: inset 0 0 0 1px gtkalpha($text_color, .5);
+      box-shadow: inset 0 0 0 1px gtkalpha($view_fg_color, .5);
     }
   }
 
@@ -68,7 +68,7 @@ colorswatch {
     color: transparentize(black, .25);
 
     @if $contrast != 'high' {
-      box-shadow: inset 0 0 0 1px gtkalpha($text_color, 0.1);
+      box-shadow: inset 0 0 0 1px gtkalpha($view_fg_color, 0.1);
     }
   }
 
diff --git a/src/stylesheet/widgets/_dialogs.scss b/src/stylesheet/widgets/_dialogs.scss
index 92bd2512..3c9107e2 100644
--- a/src/stylesheet/widgets/_dialogs.scss
+++ b/src/stylesheet/widgets/_dialogs.scss
@@ -9,7 +9,7 @@
 
 window.dialog.print {
   drawing {
-    color: $fg_color;
+    color: $window_fg_color;
     background: none;
     border: none;
     padding: 0;
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
index 6874d9c7..84b98848 100644
--- a/src/stylesheet/widgets/_emoji-chooser.scss
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -60,7 +60,7 @@ emoji-completion-row {
   &:focus,
   &:hover {
     background-color: $view_selected_color;
-    color: $text-color;
+    color: $view_fg_color;
 
     &:active {
       background-color: $view_active_color; // matching buttons
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 650a9153..c37b1c22 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -7,8 +7,8 @@ entry {
     border: 1px solid $border_color;
     border-radius: $button_radius;
     border-spacing: 6px;
-    color: $text_color;
-    background-color: $base_color;
+    color: $view_fg_color;
+    background-color: $view_bg_color;
     background-clip: padding-box;
     transition: all 200ms $ease-out-quad;
     caret-color: currentColor;
@@ -21,8 +21,8 @@ entry {
       }
 
       > block-cursor {
-        color: $base_color;
-        background-color: $text_color;
+        color: $view_bg_color;
+        background-color: $view_fg_color;
       }
     }
 
@@ -42,7 +42,7 @@ entry {
     @each $e_type, $e_color in (error, $error_color),
                                (warning, $warning_color) {
       &.#{$e_type} {
-        color: gtkmix($e_color, $text_color, 70%);
+        color: gtkmix($e_color, $view_fg_color, 70%);
 
         @include focus-ring($focus-state: ':focus-within', $fc: gtkalpha($e_color, 0.5));
 
@@ -100,7 +100,7 @@ entry {
 treeview entry {
   &:focus-within {
     &:dir(rtl), &:dir(ltr) { // specificity bump hack
-      background-color: $base_color;
+      background-color: $view_bg_color;
       transition-property: color, background;
     }
   }
@@ -108,7 +108,7 @@ treeview entry {
   &.flat, & {
     border-radius: 0;
     background-image: none;
-    background-color: $base_color;
+    background-color: $view_bg_color;
 
     &:focus-within { border-color: $accent_bg_color; }
   }
diff --git a/src/stylesheet/widgets/_file-chooser.scss b/src/stylesheet/widgets/_file-chooser.scss
index 858e9cc0..66bcfdb2 100644
--- a/src/stylesheet/widgets/_file-chooser.scss
+++ b/src/stylesheet/widgets/_file-chooser.scss
@@ -19,7 +19,7 @@ placesview {
 filechooser {
   box-shadow: 0 1px $border_color;
 
-  #pathbarbox { border-bottom: 1px solid $bg_color; }
+  #pathbarbox { border-bottom: 1px solid $window_bg_color; }
 
   pathbar > button {
     &.text-button, &.image-button, & {
diff --git a/src/stylesheet/widgets/_labels.scss b/src/stylesheet/widgets/_labels.scss
index 4c206ff9..a3cf51dd 100644
--- a/src/stylesheet/widgets/_labels.scss
+++ b/src/stylesheet/widgets/_labels.scss
@@ -84,6 +84,6 @@ label {
  *******************/
 
 editablelabel > stack > text {
-  color: $text_color;
-  background-color: $base_color;
+  color: $view_fg_color;
+  background-color: $view_bg_color;
 }
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 9e0a3650..5c40a977 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -1,7 +1,7 @@
 listview,
 list {
-  color: $text_color;
-  background-color: $base_color;
+  color: $view_fg_color;
+  background-color: $view_bg_color;
   background-clip: padding-box;
   border-color: $border_color;
 
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index e3c50b23..6d25a601 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -203,6 +203,6 @@ notebook {
   }
 
   > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
-    background-color: $base_color;
+    background-color: $view_bg_color;
   }
 }
diff --git a/src/stylesheet/widgets/_paned.scss b/src/stylesheet/widgets/_paned.scss
index f924db05..8aa30fb6 100644
--- a/src/stylesheet/widgets/_paned.scss
+++ b/src/stylesheet/widgets/_paned.scss
@@ -14,7 +14,7 @@ paned {
     &.wide {
       min-width: 5px;
       min-height: 5px;
-      background-color: $bg_color;
+      background-color: $window_bg_color;
       background-image: image($border_color), image($border_color);
       background-size: 1px 1px, 1px 1px;
     }
diff --git a/src/stylesheet/widgets/_scrolling.scss b/src/stylesheet/widgets/_scrolling.scss
index bc604667..2d669730 100644
--- a/src/stylesheet/widgets/_scrolling.scss
+++ b/src/stylesheet/widgets/_scrolling.scss
@@ -5,8 +5,8 @@ scrollbar {
   $_slider_width: 8px;
   $_scrollbar_transition: all 200ms linear;
 
-  background-color: $base_color;
-  color: $text_color;
+  background-color: $view_bg_color;
+  color: $view_fg_color;
 
   // scrollbar border
   &.top    { box-shadow: inset 0 -1px $border_color; padding-bottom: 1px; }
@@ -163,10 +163,10 @@ scrolledwindow {
     // Only color the top-left (or top right in RTL) pixel, to visually connect
     // the borders of the two scrollbars.
 
-    background: linear-gradient(to bottom right, $border_color 1px, $base_color 1px);
+    background: linear-gradient(to bottom right, $border_color 1px, $view_bg_color 1px);
 
     &:dir(rtl) {
-      background: linear-gradient(to bottom left, $border_color 1px, $base_color 1px);
+      background: linear-gradient(to bottom left, $border_color 1px, $view_bg_color 1px);
     }
   }
 }
diff --git a/src/stylesheet/widgets/_text-selection.scss b/src/stylesheet/widgets/_text-selection.scss
index c2bb4b72..2d596f5b 100644
--- a/src/stylesheet/widgets/_text-selection.scss
+++ b/src/stylesheet/widgets/_text-selection.scss
@@ -26,5 +26,5 @@ cursor-handle {
 }
 
 magnifier {
-  background-color: $base_color;
+  background-color: $view_bg_color;
 }
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 96e3ded8..cdd1bcf9 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -193,7 +193,7 @@ infobar {
                              (warning, $warning_color),
                              (error, $error_color) {
     &.#{$i_type} > revealer > box {
-      background-color: gtkmix($i_color, $bg_color, 30%);
+      background-color: gtkmix($i_color, $window_bg_color, 30%);
     }
   }
 
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index 0c042894..4989eeea 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -1,6 +1,6 @@
 // To be used for opaque elements overlaid atop the selected row
-$treeview_selection_opaque: gtkmix($text_color, $base_color, 10%);
-$treeview_borders_opaque: gtkmix($text_color, $base_color, if($contrast == 'high', 40%, 20%));
+$treeview_selection_opaque: gtkmix($view_fg_color, $view_bg_color, 10%);
+$treeview_borders_opaque: gtkmix($view_fg_color, $view_bg_color, if($contrast == 'high', 40%, 20%));
 
 treeview.view {
   border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
@@ -44,9 +44,9 @@ treeview.view {
 
     &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
-    color: gtkalpha($text_color, .7);
+    color: gtkalpha($view_fg_color, .7);
 
-    &:hover { color: $text_color; }
+    &:hover { color: $view_fg_color; }
 
     &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
 
@@ -63,34 +63,34 @@ treeview.view {
   }
 
   &.trough { // progress bar trough in treeviews
-    background-color: gtkalpha($fg_color, 0.1);
+    background-color: gtkalpha($window_fg_color, 0.1);
   }
 
   > header {
     > button {
       @extend %undecorated_button;
       padding: 0 6px;
-      border: 1px solid gtkalpha($text_color, .15);
+      border: 1px solid gtkalpha($view_fg_color, .15);
       border-width: 0 0 1px 1px;
       border-radius: 0;
 
       &:disabled {
-        border-color: $bg_color;
+        border-color: $window_bg_color;
       }
 
       &:last-child { border-right-width: 0; }
 
-      color: gtkalpha($text_color, .4);
+      color: gtkalpha($view_fg_color, .4);
       font-weight: bold;
       box-shadow: none;
 
       &:hover {
-        color: gtkalpha($text_color, .7);
+        color: gtkalpha($view_fg_color, .7);
         box-shadow: none;
       }
 
       &:active {
-        color: $text_color;
+        color: $view_fg_color;
       }
       sort-indicator {
         &.ascending {
@@ -110,12 +110,12 @@ treeview.view {
   header.button.dnd { // for treeview-like derive widgets
     &:active, &:selected, &:hover, & {
       padding: 0 6px;
-      color: $base_color;
+      color: $view_bg_color;
       background-image: none;
       background-color: $accent_bg_color;
       border-style: none;
       border-radius: 0;
-      box-shadow: inset 0 0 0 1px $base_color;
+      box-shadow: inset 0 0 0 1px $view_bg_color;
       transition: none;
     }
   }
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index 0f241248..b595eeff 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -1,11 +1,11 @@
 .view,
 %view {
-  color: $text_color;
-  background-color: $base_color;
+  color: $view_fg_color;
+  background-color: $view_bg_color;
 
   &:disabled {
     color: gtkalpha(currentColor, .5);
-    background-color: gtkmix($bg_color, $base_color, 60%);
+    background-color: gtkmix($window_bg_color, $view_bg_color, 60%);
   }
 
   &:selected {
@@ -25,7 +25,7 @@ textview {
   }
 
   > border {
-    background-color: mix($bg_color, $base_color, 50%);
+    background-color: gtkmix($window_bg_color, $view_bg_color, 50%);
   }
 
   &:drop(active) {
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]