From efa154f4afea4213dd9f379e8863095b328c36ae Mon Sep 17 00:00:00 2001 From: didrocks <1823296+didrocks@users.noreply.github.com> Date: Fri, 21 Jun 2024 01:33:53 +0000 Subject: [PATCH] New upstream snapshot for GNOME Shell --- .../upstream/theme/checkbox-focused.svg | 1 - .../theme/checkbox-off-focused-light.svg | 220 ------------------ .../upstream/theme/checkbox-off-focused.svg | 1 - .../upstream/theme/checkbox-off-light.svg | 211 ----------------- gnome-shell/upstream/theme/checkbox-off.svg | 1 - gnome-shell/upstream/theme/checkbox.svg | 1 - .../theme/gnome-shell-sass/_colors.scss | 4 +- .../theme/gnome-shell-sass/_common.scss | 15 +- .../gnome-shell-sass/_default-colors.scss | 14 +- .../theme/gnome-shell-sass/_drawing.scss | 45 ++-- .../_high-contrast-colors.scss | 4 +- .../theme/gnome-shell-sass/widgets/_a11y.scss | 10 +- .../theme/gnome-shell-sass/widgets/_base.scss | 2 +- .../gnome-shell-sass/widgets/_calendar.scss | 2 +- .../gnome-shell-sass/widgets/_check-box.scss | 53 ++++- .../gnome-shell-sass/widgets/_dialogs.scss | 4 +- .../gnome-shell-sass/widgets/_ibus-popup.scss | 2 +- .../gnome-shell-sass/widgets/_keyboard.scss | 16 +- .../gnome-shell-sass/widgets/_login-lock.scss | 141 +---------- .../widgets/_looking-glass.scss | 4 +- .../widgets/_message-list.scss | 2 +- .../theme/gnome-shell-sass/widgets/_misc.scss | 8 +- .../theme/gnome-shell-sass/widgets/_osd.scss | 4 +- .../gnome-shell-sass/widgets/_popovers.scss | 10 +- .../widgets/_quick-settings.scss | 6 +- .../gnome-shell-sass/widgets/_screenshot.scss | 10 +- .../gnome-shell-sass/widgets/_slider.scss | 2 +- .../widgets/_switcher-popup.scss | 2 +- .../gnome-shell-sass/widgets/_switches.scss | 53 ++++- .../widgets/_workspace-thumbnails.scss | 2 +- .../upstream/theme/toggle-off-light.svg | 1 - gnome-shell/upstream/theme/toggle-off.svg | 1 - .../upstream/theme/toggle-on-light.svg | 1 - gnome-shell/upstream/theme/toggle-on.svg | 1 - 34 files changed, 174 insertions(+), 680 deletions(-) delete mode 100644 gnome-shell/upstream/theme/checkbox-focused.svg delete mode 100644 gnome-shell/upstream/theme/checkbox-off-focused-light.svg delete mode 100644 gnome-shell/upstream/theme/checkbox-off-focused.svg delete mode 100644 gnome-shell/upstream/theme/checkbox-off-light.svg delete mode 100644 gnome-shell/upstream/theme/checkbox-off.svg delete mode 100644 gnome-shell/upstream/theme/checkbox.svg delete mode 100644 gnome-shell/upstream/theme/toggle-off-light.svg delete mode 100644 gnome-shell/upstream/theme/toggle-off.svg delete mode 100644 gnome-shell/upstream/theme/toggle-on-light.svg delete mode 100644 gnome-shell/upstream/theme/toggle-on.svg diff --git a/gnome-shell/upstream/theme/checkbox-focused.svg b/gnome-shell/upstream/theme/checkbox-focused.svg deleted file mode 100644 index 01eb733dca..0000000000 --- a/gnome-shell/upstream/theme/checkbox-focused.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/checkbox-off-focused-light.svg b/gnome-shell/upstream/theme/checkbox-off-focused-light.svg deleted file mode 100644 index 47673776dd..0000000000 --- a/gnome-shell/upstream/theme/checkbox-off-focused-light.svg +++ /dev/null @@ -1,220 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/gnome-shell/upstream/theme/checkbox-off-focused.svg b/gnome-shell/upstream/theme/checkbox-off-focused.svg deleted file mode 100644 index d5a042e97f..0000000000 --- a/gnome-shell/upstream/theme/checkbox-off-focused.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/checkbox-off-light.svg b/gnome-shell/upstream/theme/checkbox-off-light.svg deleted file mode 100644 index 5d37c85d60..0000000000 --- a/gnome-shell/upstream/theme/checkbox-off-light.svg +++ /dev/null @@ -1,211 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - diff --git a/gnome-shell/upstream/theme/checkbox-off.svg b/gnome-shell/upstream/theme/checkbox-off.svg deleted file mode 100644 index 50eece1b02..0000000000 --- a/gnome-shell/upstream/theme/checkbox-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/checkbox.svg b/gnome-shell/upstream/theme/checkbox.svg deleted file mode 100644 index da385b6281..0000000000 --- a/gnome-shell/upstream/theme/checkbox.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss index ffd4e9fc9c..cbb3b716e8 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss @@ -65,5 +65,5 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%)); $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%)); -// selection colors -$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%)); \ No newline at end of file +// accent colors +$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%)); diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_common.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_common.scss index 28a7a5c1c1..2124a3a2f0 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/_common.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/_common.scss @@ -117,11 +117,11 @@ stage { } %default_button { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default); - &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} - &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} - &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} - &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} + @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default); + &:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} + &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} + &:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} + &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);} } // items in popover menus @@ -172,8 +172,9 @@ stage { %entry_common { border-radius: $base_border_radius; padding: $base_padding * 1.5 $base_padding * 1.5; - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; + + selection-background-color: st-transparentize(-st-accent-color, 0.7); + selected-color: $fg_color; } %entry { diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss index 6c700871f6..bf18541408 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss @@ -22,13 +22,9 @@ $error_bg_color: if($variant == 'light', $red_3, $red_4); $error_fg_color: $light_1; $error_color: $error_bg_color; -// colors for selected or default elements -$selected_bg_color: if($variant == 'light', $blue_4, $blue_3); -$selected_fg_color: $light_1; - // link colors -$link_color: if($variant == 'light', $blue_4, $blue_2); -$link_visited_color: transparentize($link_color, .6); +$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%)); +$link_visited_color: st-transparentize($link_color, .6); // special cased widget definitions $background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants @@ -39,8 +35,8 @@ $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); // focus colors -$focus_color: $selected_bg_color; -$focus_border_color: transparentize($focus_color, 0.5); +$focus_color: -st-accent-color; +$focus_border_color: st-transparentize($focus_color, 0.5); // High Contrast overrides @if $contrast == 'high' { @@ -50,5 +46,5 @@ $focus_border_color: transparentize($focus_color, 0.5); $shadow_color: transparent; $text_shadow_color: transparent; // less transparent focus color - $focus_border_color: transparentize($focus_color, 0.2); + $focus_border_color: st-transparentize($focus_color, 0.2); } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss index 3f0259019c..447feb6a4d 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss @@ -16,12 +16,12 @@ // $mc: mix color, defined in High Contrast specific stylesheet // $mf: mix factor (%), defined in High Contrast specific stylesheet // - @return mix($c, $mc, $mf); + @return st-mix($c, $mc, $mf); } // Function to mix the color and make the focus background @function focus_bg_color($bg, $fc:$focus_color) { - @return mix($fc, $bg, 5%); + @return st-mix($fc, $bg, 5%); } // @@ -165,7 +165,7 @@ // // mix input colors to get button background color - $button_bg_color: mix($tc, $c, $background_mix_factor); + $button_bg_color: st-mix($tc, $c, $background_mix_factor); // background color override for card elements @if $style == 'card' { $button_bg_color: $card_bg_color;} @@ -187,26 +187,26 @@ } // 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)); + $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor)); + $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor)); + $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor)); + $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-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)); + $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor)); + $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor)); + $checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-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); + $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor); + $active_button_bg_color: st-lighten($button_bg_color, $active_factor); + $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor); + $insensitive_button_bg_color: st-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); + $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor); + $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor); + $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor); } // background color override for buttons that use transparency @@ -283,7 +283,7 @@ // insensitive button @else if $type == 'insensitive' { - $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); + $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5)); color: $insensitive_button_fg_color; background-color: $insensitive_button_bg_color; @@ -300,7 +300,7 @@ // use a different focus ring color for default style @if $style == 'default' { - @include focus_ring($fc:$selected_borders_color); + @include focus_ring($fc:$accent_borders_color); } // change background color if style is flat @if $style == 'flat' { @@ -357,8 +357,8 @@ } &:drop { - background-color: transparentize($selected_bg_color, .8); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2); + background-color: st-transparentize(-st-accent-color, .8); + box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2); } } @@ -368,9 +368,6 @@ // extend common styles @extend %menuitem; - // lighten the background color always - $bg: lighten($bg,5%); - @if $style == 'flat' { @include button(undecorated); } @else { diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_high-contrast-colors.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_high-contrast-colors.scss index 3cc447c22a..3b05e0b9a3 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%); $active_bg_color: lighten($bg_color, 22%); $active_fg_color: lighten($fg_color, 22%); -// selection colors -$selected_borders_color: lighten($selected_bg_color, 30%); +// accent colors +$accent_borders_color: st-lighten(-st-accent-color, 30%); // // High Contrast specific definitions diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_a11y.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_a11y.scss index 31b5c4b7e2..0bbf185b6a 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_a11y.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_a11y.scss @@ -3,8 +3,8 @@ width: $ripple_size; height: $ripple_size; border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve - background-color: lighten(transparentize($selected_bg_color, 0.7), 30%); - box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%); + background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%); + box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%); } // Pointer accessibility notifications @@ -12,13 +12,13 @@ width: 60px; height: 60px; -pie-border-width: 3px; - -pie-border-color: $selected_bg_color; - -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%); + -pie-border-color: -st-accent-color; + -pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%); } // Screen zoom/Magnifier .magnifier-zoom-region { - border: 2px solid $selected_bg_color; + border: 2px solid -st-accent-color; &.full-screen { border-width: 0; } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_base.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_base.scss index 20a1666e2f..0a9618d300 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_base.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_base.scss @@ -3,7 +3,7 @@ color: $link_color; &:hover { - color: lighten($link_color, 10%); + color: st-lighten($link_color, 10%); } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_calendar.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_calendar.scss index 80b30dc930..a4c6a88708 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_calendar.scss @@ -111,7 +111,7 @@ &.calendar-today { @extend %default_button; // override colors above for when today is a weekend - color: $selected_fg_color !important; + color: -st-accent-fg-color !important; &.calendar-day-with-events { background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_check-box.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_check-box.scss index 1480ade265..956a59ee52 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_check-box.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_check-box.scss @@ -1,18 +1,49 @@ /* Check Boxes */ -// these are equal to the size of the SVG assets -$check_height: 24px; -$check_width: 24px; - - .check-box { StBoxLayout { spacing: .8em; } + StBin { - width: $check_width; - height: $check_height; - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off.svg")); + border-radius: 7px; + padding: 2px; + } + + &:focus StBin { + // Trick due to St limitations. It needs a background to draw a box-shadow + background-color: rgba(0, 0, 0, 0.01); + box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65); + } + + StIcon { + icon-size: 14px; + padding: 1px; + + color: transparent; + border-radius: 6px; + border: 2px solid transparentize(if($variant == 'light', black, white), .85); + } + + &:hover StIcon { + border-color: transparentize(if($variant == 'light', black, white), .8); + } + + &:active StIcon { + border-color: transparentize(if($variant == 'light', black, white), .7); + } + + &:checked StIcon { + background-color: -st-accent-color; + color: -st-accent-fg-color; + border-color: transparent; + } + + &:checked:hover StIcon { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + } + + &:checked:active StIcon { + background-color: st-darken(-st-accent-color, 7%); + color: st-darken(-st-accent-fg-color, 7%); } - &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; } - &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } - &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss index 48bb9c0ca6..2f21f9447b 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -145,8 +145,8 @@ border-radius: $base_border_radius * 2; &:hover,&:focus { background-color: $hover_bg_color; } &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss index c1c0cfad86..648c375c46 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss @@ -19,7 +19,7 @@ .candidate-box { padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2; border-radius: $base_border_radius; - &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } + &:selected { background-color: -st-accent-color; color: -st-accent-fg-color; } &:hover { background-color: $hover_bg_color; color: $hover_fg_color; } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss index 39e63949f3..489da57915 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss @@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( // keys that may be latched: ctrl/alt/shift &:latched { - border-color: lighten($selected_bg_color, 5%); - background-color: $selected_bg_color; + border-color: st-lighten(-st-accent-color, 5%); + background-color: -st-accent-color; } } // enter key is suggested-action &.enter-key { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); - &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);} - &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);} - &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);} + @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color); + &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);} + &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);} + &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);} border-radius: $key_border_radius; color: $osd_fg_color; } @@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( .emoji-panel { .keyboard-key:latched { - border-color: lighten($selected_bg_color, 5%); - background-color: $selected_bg_color; + border-color: st-lighten(-st-accent-color, 5%); + background-color: -st-accent-color; } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss index 07c5a9e766..7e00a46235 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss @@ -31,9 +31,7 @@ $_gdm_dialog_width: 25em; &.cancel-button, &.switch-user-button, - &.login-dialog-auth-menu-button, - &.login-dialog-session-list-button, - &.web-login-intro-button { + &.login-dialog-session-list-button { @extend .icon-button; @extend %system_button; } @@ -43,25 +41,6 @@ $_gdm_dialog_width: 25em; } } -.login-dialog-auth-menu-button-title { - @include fontsize($base_font_size - 1); - color: darken($_gdm_fg,40%); - font-weight: bold; - padding-top: $base_padding; - padding-bottom: $base_padding * 2; - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; -} - -.login-dialog-auth-menu-button-popup-menu-box { - padding: $base_padding * 3; -} - -.login-dialog-auth-menu-button-item { - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; -} - .login-dialog-button-box { spacing: $base_padding * 2; } @@ -85,13 +64,6 @@ $_gdm_dialog_width: 25em; } } -.login-dialog-menu-button-box { - spacing: $base_padding * 2; - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; - padding-bottom: $base_padding * 2; -} - .login-dialog-logo-bin { margin: 3em 0; } @@ -156,8 +128,8 @@ $_gdm_dialog_width: 25em; color: darken($_gdm_fg,30%); &:focus, &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; } } @@ -203,9 +175,9 @@ $_gdm_dialog_width: 25em; &:logged-in { // color border for logged-in user .user-icon { - border-color: $selected_bg_color; + border-color: -st-accent-color; StIcon { - background-color: transparentize($selected_bg_color, .7); + background-color: st-transparentize(-st-accent-color, .7); } } } @@ -213,80 +185,8 @@ $_gdm_dialog_width: 25em; } } -.login-dialog-prompt-layout { - spacing: $base_padding * 2; - min-width: 30em; -} - -.login-dialog-prompt-entry { - @extend %system_entry; -} - -.web-login-dialog-content-overlay { - background-color: transparentize($bg_color, 0.3); - border-radius: $modal_radius; - margin-bottom: 3em; -} - -.web-login-spinner { - color: $osd_fg_color; - background-color: transparentize($osd_bg_color, 0.5); - border: 5px transparent; - border-radius: 50px; -} - -.web-login-title-label { - @include fontsize($base_font_size); - color: if($variant == 'dark', darken($fg_color,30%), lighten($fg_color,20%)); -} - -.web-login-url-label { - @include fontsize($base_font_size); - @extend %monospace; - color: $fg_color; - text-align: center; -} - -.web-login-code-title-label { - @include fontsize($base_font_size); - @include fontsize($base_font_size); - color: $fg_color; -} - -.web-login-code-label { - @include fontsize($base_font_size); - color: $fg_color; - font-weight: bold; -} - -.web-login-prompt { - padding-top: $base_padding; - padding-bottom: $base_padding; - padding-left: $base_padding * 4.5; - padding-right: $base_padding * 4.5; - spacing: 1.75em; - border-radius: $base_border_radius * 2; -} - -.web-login-intro-button-label { - @include fontsize($base_font_size + 5); - color: $fg_color; - height: 3em; - text-align: center; - font-weight: bold; -} - -.web-login-intro-button { - @include fontsize($base_font_size); - color: $fg_color; - height: 3em; - text-align: center; - border-radius: $base_border_radius * 4; -} - // Screen Shield // a.k.a. the lockscreen, uses transparent styles - .unlock-dialog { background-color: transparent; @@ -338,7 +238,7 @@ $_gdm_dialog_width: 25em; StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); &:hover, &:focus { background-color: transparentize($bg_color,0.5); } - &:active { background-color: transparentize($selected_bg_color,0.5); } + &:active { background-color: st-transparentize(-st-accent-color,0.5); } } } @@ -433,32 +333,3 @@ $_gdm_dialog_width: 25em; } } } - -// Login Failed banner -.auth-notification-banner { - .message-header { - width: 0px; - height: 0px; - - .message-close-button { - border: none; - background-color: rgba(0, 0, 0, 0.0); - } - } -} - -// QR Code -.qr-code { - @if ($variant == 'light') { - $qrcode_bg_color: mix($fg_color, $bg_color, 8%); - background-color: $qrcode_bg_color; - border-color: $qrcode_bg_color; - color: $fg_color; - } @else { - background-color: $_gdm_fg; - border-color: $_gdm_fg; - color: $_gdm_bg; - } - border-radius: $base_border_radius * .5; - border-width: 1em; -} diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_looking-glass.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_looking-glass.scss index 7b8d904751..53cf74fffd 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -59,8 +59,8 @@ .shell-link { color: $link_color; - &:hover { color: lighten($link_color, 10%); } - &:active { color: darken($link_color, 10%); } + &:hover { color: st-lighten($link_color, 10%); } + &:active { color: st-darken($link_color, 10%); } } .actor-link { diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss index f07ac0e2ac..0fb1c8d2a4 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss @@ -56,7 +56,7 @@ border-style: solid; &:focus { - border-color: transparentize($selected_bg_color, 0.4); + border-color: st-transparentize(-st-accent-color, 0.4); } } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss index 35f9dc9a12..2f1bfc3a4c 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss @@ -1,7 +1,7 @@ // Rubberband for select-area screenshots .select-area-rubberband { - background-color: transparentize($selected_bg_color,0.7); - border: 1px solid $selected_bg_color; + background-color: st-transparentize(-st-accent-color,0.7); + border: 1px solid -st-accent-color; } // User icon @@ -48,6 +48,6 @@ /* Tiled window previews */ .tile-preview { - background-color: transparentize($selected_bg_color,0.5); - border: 1px solid $selected_bg_color; + background-color: st-transparentize(-st-accent-color,0.5); + border: 1px solid -st-accent-color; } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss index 55cf44ac34..13a77bca31 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss @@ -36,8 +36,8 @@ $osd_levelbar_height:6px; // Monitor number label .osd-monitor-label { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; border-radius: $modal_radius; font-size: 3em; font-weight: bold; diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_popovers.scss index 7f3df1ac8f..fdc4f17f1c 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_popovers.scss @@ -1,10 +1,11 @@ /* Popovers/Menus */ $menu_bg_color: $bg_color; -$menuitem_bg_color: lighten($menu_bg_color, 4%); + +$menuitem_bg_color: if($variant == 'light', darken($menu_bg_color, 5%), lighten($menu_bg_color, 5%)); $menuitem_border_radius: $base_border_radius * 1.5; -$submenu_bg_color: lighten($menu_bg_color, 7%); +$submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten($menu_bg_color, 13%)); // the popover itself .popup-menu-boxpointer { @@ -33,7 +34,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // menu items .popup-menu-item { - @include menuitem($bg:$menu_bg_color); + @include menuitem($bg:$menuitem_bg_color); border-radius: $menuitem_border_radius; @@ -75,6 +76,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px; margin-bottom: $base_padding; border: 1px solid transparent; + background-color: $submenu_bg_color; @if $contrast == 'high' { border-color: $hc_inset_color; @@ -83,8 +85,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // submenu specific styles .popup-menu-item { border-radius: 0; - @include menuitem($bg:$submenu_bg_color); border-top-width:0; + @include menuitem($bg:$submenu_bg_color); &:last-child { border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss index c43081baf0..71b1a14488 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -64,7 +64,7 @@ &:checked { @extend %default_button; - border-color: $selected_borders_color; + border-color: $accent_borders_color; } &:ltr { @@ -119,8 +119,8 @@ background-color: transparentize($fg_color, 0.8); &.active { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: -st-accent-color; + color: -st-accent-fg-color; } // draw hc outline diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_screenshot.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_screenshot.scss index 05ecd95c30..5d10b782f2 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_screenshot.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4; .screenshot-ui-window-selector-window { &:hover { .screenshot-ui-window-selector-window-border { - border-color: darken($selected_bg_color, 15%); + border-color: st-darken(-st-accent-color, 15%); } } &:checked { .screenshot-ui-window-selector-window-border { - border-color: $selected_bg_color; - background-color: transparentize($selected_bg_color, 0.8); + border-color: -st-accent-color; + background-color: st-transparentize(-st-accent-color, 0.8); } .screenshot-ui-window-selector-check { - color: $selected_fg_color; - background-color: $selected_bg_color; + color: -st-accent-fg-color; + background-color: -st-accent-color; } } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_slider.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_slider.scss index 6ba104d6fc..b75c6fb32a 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_slider.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_slider.scss @@ -9,7 +9,7 @@ $slider_size: $scalable_icon_size; -barlevel-height: 4px; -barlevel-background-color: transparentize($fg_color, 0.9); // fill style - -barlevel-active-background-color: $selected_bg_color; + -barlevel-active-background-color: -st-accent-color; // overfill style (red in this case) -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width:1px; diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switcher-popup.scss index bf534b0471..9ac607df45 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding; // Window cycler highlight .cycler-highlight { - border: 5px solid $selected_bg_color; + border: 5px solid -st-accent-color; } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switches.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switches.scss index ef8a7b6368..ec79e1fe22 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switches.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_switches.scss @@ -1,18 +1,53 @@ /* Switches */ -// these are equal to the size of the SVG assets -$switch_height: 26px; $switch_width: 46px; +$switch_handle_size: 20px; .toggle-switch { - color: $fg_color; - height: $switch_height; width: $switch_width; - background-size: contain; - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg")); - &:checked { - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); + border-radius: $forced_circular_radius; + transition-duration: 100ms; + color: $fg_color; + + @if $contrast == 'high' { + background: transparentize(if($variant == 'light', black, white), .7); + + &:hover { + background: transparentize(if($variant == 'light', black, white), .6); + } + } @else { + background: transparentize(if($variant == 'light', black, white), .85); + + &:hover { + background: transparentize(if($variant == 'light', black, white), .8); + } + } + + StIcon { + icon-size: $base_icon_size; + } + + .handle { + margin: 3px; + width: $switch_handle_size; + height: $switch_handle_size; + border-radius: $forced_circular_radius; + background: if($variant == 'light', white, mix(white, $bg_color, 80%)); + box-shadow: 0 2px 4px transparentize(black, .8); + transition-duration: 100ms; } - & StIcon {icon-size: $base_icon_size;} + &:checked { + background: -st-accent-color; + color: -st-accent-fg-color; + + &:hover { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + } + + .handle { + background: white; + } + } } diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss index e9b9ceacd6..f7e7e4b22f 100644 --- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -27,6 +27,6 @@ // selected indicator .workspace-thumbnail-indicator { - border: 3px solid $selected_bg_color; + border: 3px solid -st-accent-color; border-radius: $base_border_radius; } diff --git a/gnome-shell/upstream/theme/toggle-off-light.svg b/gnome-shell/upstream/theme/toggle-off-light.svg deleted file mode 100644 index aa2385bcfa..0000000000 --- a/gnome-shell/upstream/theme/toggle-off-light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/toggle-off.svg b/gnome-shell/upstream/theme/toggle-off.svg deleted file mode 100644 index 43cb59fc4c..0000000000 --- a/gnome-shell/upstream/theme/toggle-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/toggle-on-light.svg b/gnome-shell/upstream/theme/toggle-on-light.svg deleted file mode 100644 index 778f922c8e..0000000000 --- a/gnome-shell/upstream/theme/toggle-on-light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/gnome-shell/upstream/theme/toggle-on.svg b/gnome-shell/upstream/theme/toggle-on.svg deleted file mode 100644 index 43c221ed76..0000000000 --- a/gnome-shell/upstream/theme/toggle-on.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file