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

style: Fix HighContrast issues with notifications

Browse Source 
- define a new hc_mix_color for mixing functions that was making bg color transparent
- fix missing HC outline on banner notifications
- fix notification timestamp not changing in HC due to color
- closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7283

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3075>
This commit is contained in:
Sam Hewitt 2023-12-22 11:17:27 -03:30 committed by Marge Bot
parent 15e0440a8b
commit d3c3e02d52
4 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -197,7 +197,7 @@
background-color: $hover_bg_color; background-color: $hover_bg_color;
@if $is_highcontrast { @if $is_highcontrast {
background-color: mix($hover_bg_color, $hc_inset_color, 10%); background-color: mix($hover_bg_color, $hc_mix_color, 90%);
} }
} }
@ -208,7 +208,7 @@
background-color: $active_bg_color; background-color: $active_bg_color;
@if $is_highcontrast { @if $is_highcontrast {
background-color: mix($active_bg_color, $hc_inset_color, 10%); background-color: mix($active_bg_color, $hc_mix_color, 90%);
} }
} }
@ -222,9 +222,9 @@
&:active { background-color: lighten($checked_bg_color, 15%);} &:active { background-color: lighten($checked_bg_color, 15%);}
@if $is_highcontrast { @if $is_highcontrast {
background-color: mix($checked_bg_color, $hc_inset_color, 10%); background-color: mix($checked_bg_color, $hc_mix_color, 90%);
&:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_inset_color, 10%);} &:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_mix_color, 90%);}
&:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_inset_color, 10%);} &:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_mix_color, 90%);}
} }
} }
@ -355,6 +355,7 @@
} @else { } @else {
@include button(normal); @include button(normal);
} }
&:hover {@include button(hover);} &:hover {@include button(hover);}
&:active {@include button(active);} &:active {@include button(active);}
&:focus {@include button(focus);} &:focus {@include button(focus);}

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

@ -56,7 +56,7 @@ $system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
// derived global colors // derived global colors
// insensitive state // insensitive state
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: $fg_color;
$insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color; $insensitive_borders_color: $borders_color;
@ -74,3 +74,4 @@ $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_colo
// inset colour for high contrast // inset colour for high contrast
$hc_inset_color: transparentize($fg_color, 0.6); $hc_inset_color: transparentize($fg_color, 0.6);
$hc_mix_color: $light_1;

2
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -105,7 +105,7 @@
// notification time stamp // notification time stamp
> .event-time { > .event-time {
@extend %caption; @extend %caption;
color: transparentize($fg_color, 0.5); color: $insensitive_fg_color;
padding-bottom: to_em(1px); padding-bottom: to_em(1px);
&:ltr { text-align: right }; &:ltr { text-align: right };

4
data/theme/gnome-shell-sass/widgets/_notifications.scss
View File

@ -11,6 +11,10 @@ $notification_banner_width: 34em;
border-radius: $modal_radius; border-radius: $modal_radius;
margin: $base_margin; margin: $base_margin;
@if $is_highcontrast {
border: 1px solid $hc_inset_color;
}
.notification-actions { .notification-actions {
spacing: 0; spacing: 0;
} }