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
%osd_button {
@extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:insensitive { @include button(insensitive, $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, $always_dark: true);}
&: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, $always_dark: true);}
&: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, $always_dark: true);}
}
%osd_button_flat {
@extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
&:insensitive { @include button(insensitive, $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, $always_dark: true);}
&: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, $always_dark: true);}
&: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, $always_dark: true);}
}
/* System Elements */

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

@ -172,18 +172,27 @@
$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));
$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));
$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
@if $always_dark {
$hover_button_bg_color: lighten($button_bg_color, $hover_factor);
$active_button_bg_color: lighten($button_bg_color, $active_factor);
$checked_button_bg_color: lighten($button_bg_color, $checked_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
@ -228,7 +237,7 @@
@else if $type == 'active' {
color: $tc;
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 {
// otherwise use focus bg color mixin
$bg: focus_bg_color($active_button_bg_color);
@ -240,8 +249,8 @@
@else if $type == 'checked' {
color: $tc;
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));}
&:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));}
&:hover { background-color: $checked_hover_button_bg_color;}
&:active { background-color: $checked_active_button_bg_color;}
}
// insensitive button
@ -249,7 +258,6 @@
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
color: $insensitive_button_fg_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
@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 {
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 {
@include tile_button($bg:$system_overlay_bg_color);
}
@ -172,7 +184,7 @@ $page_indicator_size: 10px;
> StIcon { color: $system_fg_color;}
@include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat);
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
&:active { @include button(active, $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, $always_dark: true);}
&:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
}