style: Fix HighContrast issues with notifications

- 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

View File

@ -197,7 +197,7 @@
background-color: $hover_bg_color;
@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;
@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%);}
@if $is_highcontrast {
background-color: mix($checked_bg_color, $hc_inset_color, 10%);
&:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_inset_color, 10%);}
&:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_inset_color, 10%);}
background-color: mix($checked_bg_color, $hc_mix_color, 90%);
&:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_mix_color, 90%);}
&:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_mix_color, 90%);}
}
}
@ -355,6 +355,7 @@
} @else {
@include button(normal);
}
&:hover {@include button(hover);}
&:active {@include button(active);}
&:focus {@include button(focus);}

View File

@ -56,7 +56,7 @@ $system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
// derived global colors
// 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_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
$hc_inset_color: transparentize($fg_color, 0.6);
$hc_mix_color: $light_1;

View File

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

View File

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