[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]