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

style: Fix issues with OSD buttons in light style

Browse Source 
- update drawing mixin to account for missing always_dark colors
- fix button in app grid folder not being always dark

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3139>
This commit is contained in:
Sam Hewitt 2024-01-23 12:06:17 -03:30 committed by Sam Hewitt
parent b14623c664
commit 703ac12b4a
3 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
data/theme/gnome-shell-sass/_common.scss
View File

@ -323,22 +323,22 @@ stage {
// buttons on OSD elements // buttons on OSD elements
%osd_button { %osd_button {
@extend %button_common; @extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color); @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);} &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);} &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);} &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);} &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
} }
%osd_button_flat { %osd_button_flat {
@extend %button_common; @extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat); @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
} }
/* System Elements */ /* System Elements */

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

@ -172,18 +172,27 @@
$hover_factor: 7%; // stronger factor in flat style $hover_factor: 7%; // stronger factor in flat style
} }
// button state background colors // button base state background colors
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor)); $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor)); $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor)); $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor)); $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
// button extended state background colors
$active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
$checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
$checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
// override button background colours if element is always dark // override button background colours if element is always dark
@if $always_dark { @if $always_dark {
$hover_button_bg_color: lighten($button_bg_color, $hover_factor); $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
$active_button_bg_color: lighten($button_bg_color, $active_factor); $active_button_bg_color: lighten($button_bg_color, $active_factor);
$checked_button_bg_color: lighten($button_bg_color, $checked_factor); $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor); $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
// extended
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
} }
// flat style overrides // flat style overrides
@ -228,7 +237,7 @@
@else if $type == 'active' { @else if $type == 'active' {
color: $tc; color: $tc;
background-color: $active_button_bg_color; background-color: $active_button_bg_color;
&:hover { background-color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));} &:hover { background-color: $active_hover_button_bg_color;}
&:focus { &:focus {
// otherwise use focus bg color mixin // otherwise use focus bg color mixin
$bg: focus_bg_color($active_button_bg_color); $bg: focus_bg_color($active_button_bg_color);
@ -240,8 +249,8 @@
@else if $type == 'checked' { @else if $type == 'checked' {
color: $tc; color: $tc;
background-color: $checked_button_bg_color; background-color: $checked_button_bg_color;
&:hover {background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));} &:hover { background-color: $checked_hover_button_bg_color;}
&:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));} &:active { background-color: $checked_active_button_bg_color;}
} }
// insensitive button // insensitive button
@ -249,7 +258,6 @@
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
color: $insensitive_button_fg_color; color: $insensitive_button_fg_color;
background-color: $insensitive_button_bg_color; background-color: $insensitive_button_bg_color;
&:hover { background-color: if($variant == 'light', darken($insensitive_button_bg_color, $hover_factor), lighten($insensitive_button_bg_color, $hover_factor));}
// no outline in High Contrast for insensitive buttons // no outline in High Contrast for insensitive buttons
@if $contrast == 'high' { @if $contrast == 'high' {

18
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -92,10 +92,22 @@ $app_folder_size: 720px;
} }
} }
& .icon-button {
@include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
&:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
}
& .page-indicators { & .page-indicators {
margin-bottom: $base_padding * 4; margin-bottom: $base_padding * 4;
} }
& .page-navigation-arrow {
@include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
&:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
}
& .overview-tile { & .overview-tile {
@include tile_button($bg:$system_overlay_bg_color); @include tile_button($bg:$system_overlay_bg_color);
} }
@ -172,7 +184,7 @@ $page_indicator_size: 10px;
> StIcon { color: $system_fg_color;} > StIcon { color: $system_fg_color;}
@include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat); @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);} &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
&:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat);} &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
} }