isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: High contrast fixes for buttons

Browse Source 
- improves hover style; fixes #5765
- adds missing high contrast borders
- bumps colors for visibility

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2441>
This commit is contained in:
Sam Hewitt 2022-08-22 13:41:27 -02:30 committed by Marge Bot
parent 2f3256fe72
commit b9359f4f07
3 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
data/theme/gnome-shell-sass/_colors.scss
View File

@ -3,6 +3,8 @@
@import '_palette.scss';
$is_highcontrast: "false";
$_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
$base_color: if($variant == 'light', #fff, $_dark_base_color);
@ -33,6 +35,9 @@ $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
// button
$button_mix_factor: 5%;
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));

29
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -145,27 +145,30 @@
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
$button_bg_color: mix($tc, $c, 5%);
$button_bg_color: mix($tc, $c, $button_mix_factor);
transition-duration: 100ms;
// normal button
@if $t==normal {
color: $tc;
background-color: $button_bg_color;
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px $button_inset_color;
}
}
// focused button
@if $t==focus {
color: $tc;
background-color: mix($button_bg_color, $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
&:hover {
background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
}
&:active {
background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
}
}
@ -173,18 +176,31 @@
@else if $t==hover {
color: $tc;
background-color: lighten($button_bg_color, 3%);
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
}
}
// active button
@else if $t==active {
color: $tc;
background-color: lighten($button_bg_color, 6%);
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
}
}
// checked button
@else if $t==checked {
color: $tc;
background-color: lighten($button_bg_color, 9%);
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
}
&:hover { background-color: lighten($button_bg_color, 12%);}
&:active { background-color: lighten($button_bg_color, 15%);}
}
@ -193,12 +209,16 @@
@else if $t==insensitive {
color: transparentize($tc, 0.5);
background-color: transparentize($tc, .95);
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5);
}
}
// default/suggested button
@else if $t==default {
background-color: $selected_bg_color;
color: $selected_fg_color;
box-shadow: none;
&:focus {
box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
}
@ -221,6 +241,7 @@
@else if $t==undecorated {
background-color: transparent;
background-color: none;
box-shadow: none;
&:insensitive {
@include button(insensitive);
background-color: transparent;

6
data/theme/gnome-shell-sass/_high-contrast-colors.scss
View File

@ -3,6 +3,8 @@
@import '_palette.scss';
$is_highcontrast: 'true';
$base_color: if($variant == 'light', #fff, #000);
$bg_color: $base_color;
$fg_color: if($variant == 'light', transparentize(black, .2), white);
@ -30,6 +32,10 @@ $osd_outer_borders_color: $osd_bg_color;
$shadow_color: transparent;
// button
$button_inset_color: transparentize($fg_color, 0.8);
$button_mix_factor: 10%;
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%));