From 703ac12b4aef8ca9dfa29b0307a9f38bf31e1a56 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 23 Jan 2024 12:06:17 -0330 Subject: [PATCH] style: Fix issues with OSD buttons in light style - update drawing mixin to account for missing always_dark colors - fix button in app grid folder not being always dark Part-of: --- data/theme/gnome-shell-sass/_common.scss | 24 +++++++++---------- data/theme/gnome-shell-sass/_drawing.scss | 18 ++++++++++---- .../gnome-shell-sass/widgets/_app-grid.scss | 18 +++++++++++--- 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 002dc6d22..0997d76aa 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -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 */ diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index d206d1c19..07020ee71 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -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' { diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index bdcd98e65..fcada18a2 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -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);} }