[gtk/wip/jimmac/adwaitadark-lighten-switches] Adwaita: dark switches/check/radios
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk/wip/jimmac/adwaitadark-lighten-switches] Adwaita: dark switches/check/radios
- Date: Fri, 6 Mar 2020 12:16:24 +0000 (UTC)
commit d3150f1a7ac45dd623120d69c2aec1c5a92ea56f
Author: Jakub Steiner <jimmac gmail com>
Date: Fri Mar 6 13:13:37 2020 +0100
Adwaita: dark switches/check/radios
- lighten up radios, switches and checkboxes
Fixes https://gitlab.gnome.org/GNOME/gtk/issues/2461
gtk/theme/Adwaita/_colors.scss | 3 ++-
gtk/theme/Adwaita/_common.scss | 36 ++++++++++++++++++------------------
2 files changed, 20 insertions(+), 19 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 810a668539..c565f706b0 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -73,5 +73,6 @@ $suggested_bg_color: $selected_bg_color;
$suggested_border_color: $selected_borders_color;
$progress_bg_color: $selected_bg_color;
$progress_border_color: $selected_borders_color;
-$checkradio_bg_color: $selected_bg_color;
+$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
$checkradio_fg_color: $selected_fg_color;
+$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%),
darken($checkradio_bg_color,40%));
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 15ad38c6ae..2df35cd0e5 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2254,8 +2254,8 @@ switch {
&:checked {
color: $selected_fg_color;
- border-color: $selected_borders_color;
- background-color: $selected_bg_color;
+ border-color: $checkradio_borders_color;
+ background-color: $checkradio_bg_color;
text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
0 0 2px transparentize(white, 0.4);
}
@@ -2276,9 +2276,9 @@ switch {
&:checked {
@if $variant == 'light' { color: $backdrop_bg_color; }
- border-color: if($variant == 'light', $selected_bg_color,
+ border-color: if($variant == 'light', $checkradio_borders_color,
$selected_borders_color);
- background-color: $selected_bg_color;
+ background-color: $checkradio_bg_color;
}
&:disabled {
@@ -2315,7 +2315,7 @@ switch {
}
}
- &:checked > slider { border: 1px solid $selected_borders_color; }
+ &:checked > slider { border: 1px solid $checkradio_borders_color; }
&:disabled > slider { @include button(insensitive); }
@@ -2326,7 +2326,7 @@ switch {
@include button(backdrop);
}
- &:checked > slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color);
}
+ &:checked > slider { border-color: $checkradio_borders_color; }
&:disabled > slider { @include button(backdrop-insensitive); }
}
@@ -2334,11 +2334,11 @@ switch {
row:selected & {
@if $variant == 'light' {
box-shadow: none;
- border-color: $selected_borders_color;
+ border-color: $checkradio_borders_color;
- &:backdrop { border-color: $selected_borders_color; }
+ &:backdrop { border-color: $checkradio_borders_color; }
- > slider { &:checked, & { border-color: $selected_borders_color; } }
+ > slider { &:checked, & { border-color: $checkradio_borders_color; } }
}
}
}
@@ -2353,14 +2353,14 @@ switch {
//selection-mode
@each $check_state, $check_icon, $check_color, $check_background in
- ('', 'none', 'transparent', '#{transparentize($selected_bg_color, .05)}'),
- (':hover', 'none', 'transparent', '#{transparentize($selected_bg_color, .05)}'),
- (':active', 'none', 'transparent', '#{transparentize($selected_bg_color, .05)}'),
- (':backdrop', 'none', 'transparent', '#{transparentize(desaturate($selected_bg_color, 100%), .05)}'),
- (':checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}',
'#{transparentize($selected_bg_color, .05)}'),
- (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}',
'#{transparentize($selected_bg_color, .05)}'),
- (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}',
'#{transparentize($selected_bg_color, .05)}'),
- (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color,
0.2)}', '#{transparentize(desaturate($selected_bg_color, 100%), .05)}'), {
+ ('', 'none', 'transparent', '$checkradio_bg_color'),
+ (':hover', 'none', 'transparent', '$checkradio_bg_color'),
+ (':active', 'none', 'transparent', '$checkradio_bg_color'),
+ (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
+ (':checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', '$checkradio_bg_color'),
+ (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}',
'$checkradio_bg_color'),
+ (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}',
'$checkradio_bg_color'),
+ (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color,
0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
.view.content-view.check#{$check_state}:not(list),
.content-view .tile check#{$check_state}:not(list) {
@@ -2436,7 +2436,7 @@ radio {
@if $variant == 'light' {
// the borders of the light variant versions of checks and radios are too similar in luminosity to the
selected background
// color, hence we need special casing.
- row:selected & { border-color: $selected_borders_color; }
+ row:selected & { border-color: $checkradio_borders_color; }
}
.osd & {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]