From b408efed5e529369f23e963e0d5596d4a8ff8819 Mon Sep 17 00:00:00 2001 From: hsbasu <41947504+hsbasu@users.noreply.github.com> Date: Thu, 12 Sep 2024 01:44:42 +0000 Subject: [PATCH] New upstream snapshot for GNOME Shell --- .../colorable-assets/checkbox-focused.svg | 46 ---- .../colorable-assets/checkbox-off-focused.svg | 42 ---- .../colorable-assets/checkbox-off.svg | 42 ---- .../upstream/colorable-assets/checkbox.svg | 46 ---- .../upstream/colorable-assets/toggle-off.svg | 1 - .../upstream/colorable-assets/toggle-on.svg | 1 - .../data/gnome-shell-icons.gresource.xml | 3 +- .../icons/scalable/status/check-symbolic.svg | 37 +++ .../status/keyboard-zwnj-symbolic.svg | 5 + .../upstream/gnome-shell-sass/_colors.scss | 7 +- .../upstream/gnome-shell-sass/_common.scss | 78 +++--- .../gnome-shell-sass/_default-colors.scss | 4 +- .../upstream/gnome-shell-sass/_dock.scss | 73 +++++- .../upstream/gnome-shell-sass/_drawing.scss | 60 +++-- .../gnome-shell-sass/_yaru-colors.scss | 10 +- .../gnome-shell-sass/widgets/_app-grid.scss | 7 +- .../gnome-shell-sass/widgets/_base.scss | 7 +- .../gnome-shell-sass/widgets/_calendar.scss | 8 +- .../gnome-shell-sass/widgets/_check-box.scss | 62 ++++- .../gnome-shell-sass/widgets/_dash.scss | 11 +- .../gnome-shell-sass/widgets/_dialogs.scss | 10 +- .../gnome-shell-sass/widgets/_keyboard.scss | 14 +- .../gnome-shell-sass/widgets/_login-lock.scss | 80 ++++-- .../widgets/_looking-glass.scss | 231 +++++++++++++----- .../widgets/_message-list.scss | 53 ++-- .../gnome-shell-sass/widgets/_misc.scss | 6 +- .../widgets/_notifications.scss | 2 +- .../gnome-shell-sass/widgets/_overview.scss | 6 +- .../gnome-shell-sass/widgets/_panel.scss | 10 +- .../gnome-shell-sass/widgets/_popovers.scss | 11 +- .../widgets/_quick-settings.scss | 3 +- .../widgets/_search-results.scss | 3 +- .../gnome-shell-sass/widgets/_slider.scss | 25 +- .../gnome-shell-sass/widgets/_switches.scss | 61 ++++- .../widgets/_window-picker.scss | 13 + .../widgets/_workspace-switcher.scss | 2 +- .../widgets/_workspace-thumbnails.scss | 3 +- gnome-shell/upstream/gnome-shell.scss.in | 31 +-- gnome-shell/upstream/meson.build | 66 ----- 39 files changed, 649 insertions(+), 531 deletions(-) delete mode 100644 gnome-shell/upstream/colorable-assets/checkbox-focused.svg delete mode 100644 gnome-shell/upstream/colorable-assets/checkbox-off-focused.svg delete mode 100644 gnome-shell/upstream/colorable-assets/checkbox-off.svg delete mode 100644 gnome-shell/upstream/colorable-assets/checkbox.svg delete mode 100644 gnome-shell/upstream/colorable-assets/toggle-off.svg delete mode 100644 gnome-shell/upstream/colorable-assets/toggle-on.svg create mode 100644 gnome-shell/upstream/data/icons/scalable/status/check-symbolic.svg create mode 100644 gnome-shell/upstream/data/icons/scalable/status/keyboard-zwnj-symbolic.svg diff --git a/gnome-shell/upstream/colorable-assets/checkbox-focused.svg b/gnome-shell/upstream/colorable-assets/checkbox-focused.svg deleted file mode 100644 index 9ff64ffd..00000000 --- a/gnome-shell/upstream/colorable-assets/checkbox-focused.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - diff --git a/gnome-shell/upstream/colorable-assets/checkbox-off-focused.svg b/gnome-shell/upstream/colorable-assets/checkbox-off-focused.svg deleted file mode 100644 index da731a07..00000000 --- a/gnome-shell/upstream/colorable-assets/checkbox-off-focused.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - diff --git a/gnome-shell/upstream/colorable-assets/checkbox-off.svg b/gnome-shell/upstream/colorable-assets/checkbox-off.svg deleted file mode 100644 index 7d2a56ba..00000000 --- a/gnome-shell/upstream/colorable-assets/checkbox-off.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - diff --git a/gnome-shell/upstream/colorable-assets/checkbox.svg b/gnome-shell/upstream/colorable-assets/checkbox.svg deleted file mode 100644 index 683834cc..00000000 --- a/gnome-shell/upstream/colorable-assets/checkbox.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - diff --git a/gnome-shell/upstream/colorable-assets/toggle-off.svg b/gnome-shell/upstream/colorable-assets/toggle-off.svg deleted file mode 100644 index 5ef845ef..00000000 --- a/gnome-shell/upstream/colorable-assets/toggle-off.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/gnome-shell/upstream/colorable-assets/toggle-on.svg b/gnome-shell/upstream/colorable-assets/toggle-on.svg deleted file mode 100644 index 05be4e56..00000000 --- a/gnome-shell/upstream/colorable-assets/toggle-on.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/gnome-shell/upstream/data/gnome-shell-icons.gresource.xml b/gnome-shell/upstream/data/gnome-shell-icons.gresource.xml index 51571614..80774a54 100644 --- a/gnome-shell/upstream/data/gnome-shell-icons.gresource.xml +++ b/gnome-shell/upstream/data/gnome-shell-icons.gresource.xml @@ -37,6 +37,7 @@ scalable/actions/shell-focus-top-bar-symbolic-rtl.svg scalable/actions/shell-focus-windows-symbolic.svg scalable/status/background-app-ghost-symbolic.svg + scalable/status/check-symbolic.svg scalable/status/keyboard-brightness-high-symbolic.svg scalable/status/keyboard-brightness-medium-symbolic.svg scalable/status/keyboard-brightness-off-symbolic.svg @@ -45,6 +46,7 @@ scalable/status/keyboard-hide-symbolic.svg scalable/status/keyboard-layout-symbolic.svg scalable/status/keyboard-shift-symbolic.svg + scalable/status/keyboard-zwnj-symbolic.svg scalable/status/message-indicator-symbolic.svg scalable/status/no-notifications-symbolic.svg scalable/status/screen-privacy-disabled-symbolic.svg @@ -53,4 +55,3 @@ scalable/status/switch-off-symbolic.svg - diff --git a/gnome-shell/upstream/data/icons/scalable/status/check-symbolic.svg b/gnome-shell/upstream/data/icons/scalable/status/check-symbolic.svg new file mode 100644 index 00000000..b6b7e957 --- /dev/null +++ b/gnome-shell/upstream/data/icons/scalable/status/check-symbolic.svg @@ -0,0 +1,37 @@ + + + + + + diff --git a/gnome-shell/upstream/data/icons/scalable/status/keyboard-zwnj-symbolic.svg b/gnome-shell/upstream/data/icons/scalable/status/keyboard-zwnj-symbolic.svg new file mode 100644 index 00000000..7204f474 --- /dev/null +++ b/gnome-shell/upstream/data/icons/scalable/status/keyboard-zwnj-symbolic.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/gnome-shell/upstream/gnome-shell-sass/_colors.scss b/gnome-shell/upstream/gnome-shell-sass/_colors.scss index e423b327..92acd37b 100644 --- a/gnome-shell/upstream/gnome-shell-sass/_colors.scss +++ b/gnome-shell/upstream/gnome-shell-sass/_colors.scss @@ -18,6 +18,11 @@ $bg_color: if($variant=='light', #FAFAFA, $bg_color_dark); $fg_color_dark: $porcelain; $fg_color: if($variant=='light', $inkstone, $fg_color_dark); +$is_warty_nostalgia: false !default; +@if $is_warty_nostalgia { + $bg_color: $warty_nostalgia_bg; +} + // OSD elements $osd_fg_color: $light_1; $osd_bg_color: lighten($_base_color_dark, 5%); @@ -57,7 +62,7 @@ $osd_outer_borders_color: transparentize($osd_fg_color, 0.98); // system colors $system_bg_color: lighten($system_base_color, 5%); -$system_bg_color: lighten($jet, 4%); // Lighten than dash but darken than bg-color +$system_bg_color: $_base_color_dark; // Yaru - use our definition our definition $system_borders_color: transparentize($system_fg_color, .9); $system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%); $system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash diff --git a/gnome-shell/upstream/gnome-shell-sass/_common.scss b/gnome-shell/upstream/gnome-shell-sass/_common.scss index 176271cc..99b3e163 100644 --- a/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -41,6 +41,10 @@ $forced_circular_radius: 999px; $modal_radius: $base_border_radius * 2; $modal_radius: $base_border_radius; // Yaru change: reduce modal border-radius +// radii of dialogs +$alert_radius: 18px; +$alert_radius: 8px; // Yaru change: reduce modal border-radius + // Chroma key to flag when a background-color is always occluded, not visible. // This allows any box-shadow behind it to be rendered more efficiently by // omitting the middle rectangle. @@ -63,6 +67,9 @@ $large_scalable_icon_size: $scalable_icon_size * 2; // animation definition $ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +// Yaru menu radius +$yaru_menu_border_radius: $modal_radius * 2.25; + // Stage stage { @include fontsize($base_font_size); @@ -186,8 +193,12 @@ stage { min-height: 22px; // Yaru change: fix for height shift border-radius: $base_border_radius; padding: $base_padding * 1.5 $base_padding * 1.5; + selection-background-color: st-transparentize(-st-accent-color, 0.7); + selected-color: $fg_color; + // Yaru: Use legacy accent color. TODO: drop. selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; + border-width: 1px; // Yaru change: we want bordered entries } @@ -203,50 +214,33 @@ stage { } } -// buttons in dialogs/notifications -// lighter in color and have a greater radius +// buttons in notifications +// use a rounded style and have a lighter background +%notification_button { + // font-weight: bold; // Yaru change: use normal font weight + padding: $base_padding $base_padding * 2; + border-radius: $base_border_radius; + + @include button(normal, $style: notification); + &:focus { @include button(focus, $style: notification);} + &:hover { @include button(hover, $style: notification);} + &:active { @include button(active, $style: notification);} + &:checked { @include button(checked, $style: notification);} + &:insensitive { @include button(insensitive, $style: notification);} +} // buttons in dialogs -%bubble_button { +%dialog_button { + // font-weight: bold; // Yaru change: use normal font weight padding: $base_padding * 2; - // font-weight: bold !important; // Yaru change: use normal font weight - - &:ltr {margin-right: 1px;} - &:rtl {margin-left: 1px;} - - // needs a 1px adjustment to fit exactly into the outer radius - $bubble_button_radius: $modal_radius - 1px; - - @include button(normal, $style: bubble); - &:focus { @include button(focus, $style: bubble);} - &:hover { @include button(hover, $style: bubble);} - &:active { @include button(active, $style: bubble);} - &:checked { @include button(checked, $style: bubble);} - &:insensitive { @include button(insensitive, $style: bubble);} - - &:first-child:ltr { - border-radius: 0 0 0 $bubble_button_radius; - } - - &:last-child:ltr { - border-radius: 0 0 $bubble_button_radius; - margin-right: 0 !important; - } - - &:first-child:rtl { - border-radius: 0 0 $bubble_button_radius; - } - - &:last-child:rtl { - border-radius: 0 0 0 $bubble_button_radius; - margin-left: 0 !important; - } + border-radius: $base_border_radius * 1.5; - &:first-child:last-child { - border-radius: 0 0 $bubble_button_radius $bubble_button_radius; - margin-left: 0 !important; - margin-right: 0 !important; - } + @include button(normal, $style: dialog); + &:focus { @include button(focus, $style: dialog);} + &:hover { @include button(hover, $style: dialog);} + &:active { @include button(active, $style: dialog);} + &:checked { @include button(checked, $style: dialog);} + &:insensitive { @include button(insensitive, $style: dialog);} } // tooltip @@ -308,10 +302,10 @@ stage { %smaller { font-weight: 400; - @include fontsize(8pt); + @include fontsize(9pt); } -%monospace {font-family: monospace;} +%monospace {font-family: 'Ubuntu Mono 15', monospace;} %numeric { font-feature-settings: "tnum";} diff --git a/gnome-shell/upstream/gnome-shell-sass/_default-colors.scss b/gnome-shell/upstream/gnome-shell-sass/_default-colors.scss index 6c700871..6c02d603 100644 --- a/gnome-shell/upstream/gnome-shell-sass/_default-colors.scss +++ b/gnome-shell/upstream/gnome-shell-sass/_default-colors.scss @@ -40,7 +40,7 @@ $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0. // focus colors $focus_color: $selected_bg_color; -$focus_border_color: transparentize($focus_color, 0.5); +$focus_border_color: st-transparentize($focus_color, 0.5); // High Contrast overrides @if $contrast == 'high' { @@ -50,5 +50,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/gnome-shell-sass/_dock.scss b/gnome-shell/upstream/gnome-shell-sass/_dock.scss index a3979402..fe69ea6d 100644 --- a/gnome-shell/upstream/gnome-shell-sass/_dock.scss +++ b/gnome-shell/upstream/gnome-shell-sass/_dock.scss @@ -196,7 +196,8 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; padding-#{opposite($side)}: $padding; } - .app-well-app { + .app-well-app, + .overview-tile { &.running .overview-icon { background-image: none; } @@ -204,7 +205,8 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; background-color: $dock_remark_color; } - .app-well-app-running-dot { + .app-well-app-running-dot, + .app-grid-running-dot { margin-bottom: 2px; } } @@ -337,7 +339,9 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; background: $dash_background_color; } -#dashtodockContainer.dashtodock .progress-bar { +#dashtodockContainer.dashtodock .progress-bar, +.overview-tile .progress-bar, +.icon-grid .progress-bar { /* Customization of the progress bar style. The possible elements * are: * @@ -381,7 +385,12 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; * -progress-bar-track-line-width: 1 * -progress-bar-background: 204, 204, 204, 1.0 * -progress-bar-border: 230, 230, 230, 1.0 + * -progress-bar-height-factor: (0.20) 20% of the icon size * -progress-bar-line-width: 1 + * -progress-bar-top-offset: undefined + * -progress-bar-valign: 1.0 + * -progress-bar-horizontal-padding: 0.05 (5% of icon size) + * -progress-bar-vertical-padding: 0.05 (5% of icon size) */ -progress-bar-track-background: rgba(0, 0, 0, 0.45); -progress-bar-track-border: rgba(0, 0, 0, 0.7); @@ -389,6 +398,20 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; -progress-bar-border: rgba(255, 255, 255, 1.0); } +#overview, +.apps-scroll-view { + .progress-bar { + -progress-bar-height-factor: 0.15; + -progress-bar-top-offset: 0; + -progress-bar-valign: 0.95; + } +} + +#overview .grid-search-results .overview-tile .progress-bar, +#overview .app-folder-dialog .progress-bar { + -progress-bar-height-factor: 0.13; +} + #dashtodockContainer.top #dash .placeholder, #dashtodockContainer.bottom #dash .placeholder { width: 32px; @@ -415,13 +438,17 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; transition-duration: 500ms; } -#dashtodockContainer .number-overlay { +#dashtodockContainer .number-overlay, +.overview-tile .number-overlay, +.icon-grid .number-overlay { color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 0.8); text-align: center; } -#dashtodockContainer .notification-badge { +#dashtodockContainer .notification-badge, +.overview-tile .notification-badge, +.icon-grid .notification-badge { color: rgba(255, 255, 255, 1); background-color: rgba(255, 0, 0, 1); padding: 0.2em 0.5em; @@ -461,6 +488,9 @@ $dock_style_modes: [null, shrink, extended, extended-shrink]; /* Yaru Dock styling */ $dock_color: $panel_bg_color; +@if $is_warty_nostalgia { + $dock_color: darken($jet, 2%); +} @each $side in bottom, top, left, right { #dashtodockContainer.#{$side} { @@ -512,12 +542,6 @@ $dock_color: $panel_bg_color; } } - .notification-badge { - background-color: $success_color; - border: 1px solid darken($success_color,10%); - box-shadow: -1px 1px 5px 0px transparentize(black, 0.5); - } - .dash-item-container { // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets // as such the %tile style is overriden and button styles are applied to the child class .overview-icon @@ -531,7 +555,9 @@ $dock_color: $panel_bg_color; $fg:$system_fg_color; $normal_bg: transparent; - $bg: transparentize(lighten($dock_color, 15%), 0.25); + $focus_bg: transparentize($fg, .83); + $bg: transparentize($fg, .90); + $checked_bg: transparentize($fg, .75); .overview-icon { @extend %tile; @@ -541,7 +567,8 @@ $dock_color: $panel_bg_color; &:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} &:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} &:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} - &:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:checked .overview-icon { @include button(checked, $tc:$fg, $c:$checked_bg, $style: flat, $always_dark: true);} + &.focused .overview-icon { @include button(active, $tc: $fg, $c:$focus_bg, $style: flat, $always_dark: true);} } // running app dot @@ -555,3 +582,23 @@ $dock_color: $panel_bg_color; } } } + +// Use success color for the notification badges in the overview +#dashtodockContainer .notification-badge, +.overview-tile .notification-badge, +.icon-grid .notification-badge { + background-color: $success_color; + border: 1px solid darken($success_color, 10%); + box-shadow: -1px 1px 5px 0px transparentize(black, 0.5); +} + +// Yaru: align the progress bar with the bottom edge of the icon +#overview, +.apps-scroll-view, +#dashtodockContainer.dashtodock { + .progress-bar { + -progress-bar-height-multiplier: 0.95; + -progress-bar-valign: 1; + -progress-bar-vertical-padding: 0; + } +} diff --git a/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/gnome-shell/upstream/gnome-shell-sass/_drawing.scss index e95ef459..09f31aeb 100644 --- a/gnome-shell/upstream/gnome-shell-sass/_drawing.scss +++ b/gnome-shell/upstream/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%); } // @@ -161,14 +161,14 @@ // - normal, focus, hover, active, checked, insensitive, default, undecorated // $c: button bg color, derived from bg_color // $tc: button text color, derived from fg_color - // $style: button style, possible values: card, bubble, flat, default + // $style: button style, possible values: card, notification, dialog, flat, default // $always_dark: override the light theme check to use dark colors, true or false // // 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); + $button_bg_color: if($bg != null, $bg, st-mix($tc, $c, $background_mix_factor)); // Yaru change: allow forced $variant: if($brightness ==null, $variant, $brightness); // Yaru change: add forced brightness support - $button_bg_color: if($bg != null, $bg, mix($tc, $c, $background_mix_factor)); // Yaru change: allow forced // background color override for card elements @if $style == 'card' { $button_bg_color: $card_bg_color;} @@ -190,31 +190,31 @@ } // 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 - // styles: notification bubbles, lockscreen - @if $style == 'bubble' or $style == 'lockscreen' { + // styles: dialogs bubbles, lockscreen + @if $style == 'dialog' or $style == 'lockscreen' { $button_bg_color: transparentize($tc, .9); $hover_button_bg_color: transparentize($tc, .87); $active_button_bg_color: transparentize($tc, .84); @@ -224,6 +224,15 @@ $insensitive_button_bg_color: transparentize($tc, .83); } + // background color overrides for notification style + @if $style == 'notification' { + $button_bg_color: transparentize($tc, .85); + $hover_button_bg_color: transparentize($tc, .7); + $insensitive_button_bg_color: transparentize($tc, .9); + $active_button_bg_color: transparentize($tc, .8); + $active_hover_button_bg_color: transparentize($tc, .8); + } + // flat style overrides @if $style == 'flat' { $insensitive_button_bg_color: $button_bg_color; @@ -289,7 +298,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; @@ -306,7 +315,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' { @@ -374,19 +383,16 @@ // extend common styles @extend %menuitem; - // lighten the background color always - $bg: lighten($bg,5%); - @if $style == 'flat' { @include button(undecorated); } @else { @include button(normal, $c:$bg); } - &:focus, &:hover { @include button(hover, $c:$bg); } &:active {@include button(active, $c:$bg);} + &:selected, &:checked {@include button(checked, $c:$bg);} &:insensitive {@include button(insensitive, $c:$bg);} } diff --git a/gnome-shell/upstream/gnome-shell-sass/_yaru-colors.scss b/gnome-shell/upstream/gnome-shell-sass/_yaru-colors.scss index 07137c8e..029b76e1 100644 --- a/gnome-shell/upstream/gnome-shell-sass/_yaru-colors.scss +++ b/gnome-shell/upstream/gnome-shell-sass/_yaru-colors.scss @@ -5,11 +5,18 @@ $base_active_color: transparentize(white, 0.75); $active_bg_color: transparentize($fg_color, 0.8); $active_fg_color: darken($fg_color, if($variant=='light', 5%, 3%)); -$selected_borders_color: if($variant=='light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); +// accent colors, using legacy accent color definition +// TODO: Remove when using upstream only. +$accent_borders_color: if($variant=='light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $panel_bg_color: darken($jet, 2%); $panel_fg_color: darken($porcelain, 2%); +@if $is_warty_nostalgia { + $panel_bg_color: darken($bg_color, 3%); + $panel_fg_color: $_base_color_dark; +} + $panel-alpha-value: 0.6; $panel_opaque_value: 0.0; @@ -24,6 +31,7 @@ $focus_border_color: lighten($accent_bg_color, 14%); $alt_borders_color: if($variant=='light', darken($bg_color, 24%), darken($bg_color, 10%)); $system_borders_color: $yaru_borders_color_dark; // Yaru: use our definition +$system_overlay_bg_color: $dash_background_color; // Yaru - Use system bg color for overlay items // card elements $card_bg_color: if($variant =='light', $light_1, lighten($bg_color, 7%)); diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss index 16a4ba97..07ee24af 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss @@ -47,12 +47,7 @@ $app_folder_size: 720px; width: 5px; border-radius:5px; background-color: $system_fg_color; - - @if $contrast == 'high' { - margin-bottom: 4px; - } @else { - margin-bottom: 2px; - } + offset-y: 6px; } .app-folder-dialog-container { diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_base.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_base.scss index 7d6f2809..0a9618d3 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_base.scss +++ b/gnome-shell/upstream/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%); } } @@ -18,10 +18,5 @@ @if $contrast == 'high' { icon-shadow: none; - background-color: $osd_bg_color; - padding: $base_padding * 2; - border-radius: $modal_radius; - border: 2px solid $hc_inset_color; - margin: $base_padding * 3; } } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss index 4d1326cc..aaa3f1cd 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss @@ -7,6 +7,7 @@ .datemenu-popover { border-radius: $base_border_radius * 1.5 + $base_padding * 3; + border-radius: $yaru_menu_border_radius; } // calendar menu side column @@ -274,10 +275,9 @@ spacing-columns: $base_padding * 2; .weather-forecast-time { - @extend %numeric; - @include fontsize(10pt); - padding-top: 0.2em; - padding-bottom: 0.4em; + @extend %smaller; + padding-top: $base_padding; + padding-bottom: $base_padding; } .weather-forecast-icon { icon-size: $large_scalable_icon_size; diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss index 53a51619..db485147 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss @@ -1,18 +1,58 @@ /* Check Boxes */ -// these are equal to the size of the SVG assets -$check_height: 22px; -$check_width: 24px; - -// Yaru: we also provide check box assets for the light theme .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); + + // Yaru: keep the accent as we may override it in CSS + box-shadow: inset 0 0 0 2px st-transparentize($selected_bg_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; + background-color: $selected_bg_color; // Yaru: keep the accent as we may override it in CSS + color: $selected_fg_color; // Yaru: keep the accent as we may override it in CSS + border-color: transparent; + } + + &:checked:hover StIcon { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + background-color: st-lighten($selected_bg_color, 5%); // Yaru: keep the accent as we may override it in CSS + color: st-lighten($selected_fg_color, 5%); // Yaru: keep the accent as we may override it in CSS + } + + &:checked:active StIcon { + background-color: st-darken(-st-accent-color, 7%); + color: st-darken(-st-accent-fg-color, 7%); + background-color: st-lighten($selected_bg_color, 5%); // Yaru: keep the accent as we may override it in CSS + color: st-darken($selected_fg_color, 7%); // Yaru: keep the accent as we may override it in CSS } - &: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: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox.svg"), url("resource:///org/gnome/shell/theme/checkbox-dark.svg")); } - &:focus:checked StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-focused.svg"), url("resource:///org/gnome/shell/theme/checkbox-focused-dark.svg")); } } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss index 32d98f37..6f692b1b 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss @@ -1,7 +1,7 @@ /* Dash */ // uses system colors -$dash_background_color: $system_overlay_bg_color !default; // Yaru: we define those colors in _colors.scss for _dock.scss to use it +$dash_background_color: $system_overlay_bg_color; $dash_placeholder_size: 32px; $dash_padding: $base_padding * 2; @@ -11,7 +11,9 @@ $dash_spacing: $base_margin * 0.5; // container for the dash #dash { - margin-top: $dash_edge_offset; + // a bit of spacing so that dash doesn't touch the screen edges + padding-left: $base_padding; + padding-right: $base_padding; // background behind item container .dash-background { @@ -70,6 +72,11 @@ $dash_spacing: $base_margin * 0.5; // running app dot .app-grid-running-dot { // manually position the dot within the dash item + @if $contrast == 'high' { + offset-y: -$dash_padding - 1px; // don't draw dot directly on inset + } @else { + // offset-y: -$dash_padding; // Yaru: we manage this through margin + } margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js // margin-bottom: 13px; // hardcoded - Yaru change: move dot a bit down diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss index f0c495b3..ad4db615 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss @@ -6,23 +6,25 @@ .modal-dialog { background-color: $bg_color; - border-radius: $modal_radius; + border-radius: $alert_radius; box-shadow: inset 0 0 0 1px $outer_borders_color; + padding: $base_padding * 4; .modal-dialog-content-box { - margin: $base_margin * 8 $base_margin * 10; spacing: $base_margin * 8; + margin-top: $base_margin * 2; + margin-bottom: $base_margin * 4; max-width: 28em; } .modal-dialog-linked-button { - @extend %bubble_button; + @extend %dialog_button; } } /* End Session Dialog */ .end-session-dialog { - width: 30em; + width: 24em; .end-session-dialog-battery-warning, .dialog-list-title { diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss index 14f3ee4b..1073ceef 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss @@ -74,11 +74,23 @@ $default_key_bg_color: $key_bg_color; // Yaru: Make keyboard buttons work on bot // enter key is suggested-action &.enter-key { - // Yaru: use our suggested action color +/* Yaru: use our suggested action 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);} +*/ + @include button(normal, $c:$suggested_bg_color, $tc:-st-accent-fg-color); + &:hover { @include button(hover, $c:$suggested_bg_color, $tc:-st-accent-fg-color);} + &:active { @include button(active, $c:$suggested_bg_color, $tc:-st-accent-fg-color);} + &:checked { @include button(checked, $c:$suggested_bg_color, $tc:-st-accent-fg-color);} + + // Yaru: Use legacy accent color. TODO: drop! @include button(normal, $c:$suggested_bg_color, $tc:$selected_fg_color); &:hover { @include button(hover, $c:$suggested_bg_color, $tc:$selected_fg_color);} &:active { @include button(active, $c:$suggested_bg_color, $tc:$selected_fg_color);} &:checked { @include button(checked, $c:$suggested_bg_color, $tc:$selected_fg_color);} + border-radius: $key_border_radius; color: $osd_fg_color; } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss index d89a7df2..d0380960 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss @@ -108,6 +108,11 @@ $_gdm_dialog_width: 25em; text-align: center; } +.login-dialog-message-hint, .login-dialog-message { + color: darken($_gdm_fg, 10%); + min-height: 2.75em; +} + .login-dialog-user-selection-box { // padding to ensure the box doesn't overlap the panel padding-top: 4em; @@ -143,8 +148,10 @@ $_gdm_dialog_width: 25em; .login-dialog-auth-list-title { margin-left: 2em; + padding-bottom: $base_padding; // Yaru: add some bottom padding } +/* Yaru: Use button styling .login-dialog-auth-list-item { border-radius: $base_border_radius * 2; padding: $base_margin; @@ -155,6 +162,36 @@ $_gdm_dialog_width: 25em; color: $selected_fg_color; } } +*/ + +.login-dialog-auth-list-item { + min-width: 300px; +} + +.login-dialog { + .login-dialog-auth-list-item { + // Yaru: use button styling + @extend %button_common; + @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true); + &:selected, + &:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);} + &:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);} + &:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true)}; + + border-radius: $modal_radius; + padding: $base_padding * 1.2; + } +} + +.unlock-dialog { + // Yaru: use button styling + .login-dialog-auth-list-item { + @extend %lockscreen_button; + + border-radius: $modal_radius; + padding: $base_padding * 1.2; + } +} .login-dialog-auth-list-label { @extend %title_4; @@ -196,7 +233,6 @@ $_gdm_dialog_width: 25em; } &:logged-in { - // color border for logged-in user .user-icon { border-color: $selected_bg_color; StIcon { @@ -213,9 +249,10 @@ $_gdm_dialog_width: 25em; min-width: 30em; } -.login-dialog-prompt-entry { +// removed, causes missing entry selection border theming +/*.login-dialog-prompt-entry { @extend %system_entry; -} +}*/ .web-login-dialog-content-overlay { background-color: transparentize($bg_color, 0.3); @@ -224,32 +261,32 @@ $_gdm_dialog_width: 25em; } .web-login-spinner { - background-color: rgba(0, 0, 0, 0.5); - border: 5px rgba(0, 0, 0, 0.0); + 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: darken($_gdm_fg, 30%); + color: if($variant =='dark', darken($fg_color, 30%), lighten($fg_color, 20%)); } .web-login-url-label { @include fontsize($base_font_size); @extend %monospace; - color: $_gdm_fg; + color: $fg_color; text-align: center; } .web-login-code-title-label { @include fontsize($base_font_size); - @include fontsize($base_font_size); - color: $_gdm_fg; + color: $fg_color; } .web-login-code-label { @include fontsize($base_font_size); - color: $_gdm_fg; + color: $fg_color; font-weight: bold; } @@ -264,7 +301,7 @@ $_gdm_dialog_width: 25em; .web-login-intro-button-label { @include fontsize($base_font_size + 5); - color: $_gdm_fg; + color: $fg_color; height: 3em; text-align: center; font-weight: bold; @@ -272,7 +309,7 @@ $_gdm_dialog_width: 25em; .web-login-intro-button { @include fontsize($base_font_size); - color: $_gdm_fg; + color: $fg_color; height: 3em; text-align: center; border-radius: $base_border_radius * 4; @@ -314,7 +351,7 @@ $_gdm_dialog_width: 25em; .unlock-dialog-clock-time { @extend %numeric; @include fontsize(72pt); - font-weight: 200; + font-weight: 800; } .unlock-dialog-clock-date { @@ -415,7 +452,8 @@ $_gdm_dialog_width: 25em; spacing: $base_padding * 4; .user-widget-label { - @extend %title_1; + font-weight: 400; + @include fontsize(20pt); text-align: center; margin-bottom: .75em; } @@ -424,7 +462,7 @@ $_gdm_dialog_width: 25em; icon-size: $base_icon_size * 10; & StIcon { - padding: $base_padding * 4; + padding: $base_padding * 5; color: $_gdm_fg; // Yaru change: dark/light theme support } } @@ -503,8 +541,16 @@ $_gdm_dialog_width: 25em; // QR Code .qr-code { - background: black; + @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-color: white; border-width: 1em; } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss index a43271cc..2720faa4 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss @@ -1,5 +1,37 @@ /* Looking Glass */ +// common +.lg-dialog { + + StEntry { + @extend %osd_entry; + min-height: to_em(22px); + } + + // override link color since OSD style + $lg_link_color: st-lighten(-st-accent-color, 20%); + // Yaru: keep the accent as we may override it in CSS + $lg_link_color: st-lighten($selected_bg_color, 20%); + .shell-link { + color: $lg_link_color; + &:hover { color: st-lighten($lg_link_color, 10%); } + &:active { color: st-darken($lg_link_color, 10%); } + } + + .actor-link { + @extend %monospace; + color: st-darken($osd_fg_color, 20%); + &:hover { color:$osd_fg_color; } + &:active { color: st-lighten($osd_fg_color, 20%); } + & StIcon { icon-size: 12px; } + } +} + +.lg-completions-text { + @extend %caption; + font-style: italic; +} + // Dialog #LookingGlassDialog { @@ -40,95 +72,172 @@ } .notebook-tab { - @extend %osd_button; + @extend %osd_button_flat; + background-color: transparent; -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding * 2; padding: $base_padding $base_padding * 2; + &:selected { + @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + } } - - StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } - StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; } } -.lg-dialog { - StEntry { - @extend %osd_entry; - min-height: to_em(22px); +// Inspector +#LookingGlassPropertyInspector { + + background-color: $osd_bg_color; + color: $osd_fg_color; + border-radius: $modal_radius; + border: 1px solid $osd_borders_color; + padding: $base_padding * 2; + + @if $contrast == 'high' { + border-color: $hc_inset_color; } - .shell-link { - color: $link_color; - &:hover { color: lighten($link_color, 10%); } - &:active { color: darken($link_color, 10%); } - } + .lg-obj-inspector-title { + @extend %heading; + spacing: $base_margin; + } - .actor-link { - color: $insensitive_fg_color; - &:hover { color: lighten($insensitive_fg_color, 20%); } - &:active { color: darken($insensitive_fg_color, 20%); } + .lg-obj-inspector-close-button, + .lg-obj-inspector-button { + @extend %osd_button; + padding: $base_padding $base_padding * 2; + } - & StIcon { icon-size: 12px; } - } + .lg-obj-inspector-close-button { + margin: $base_margin; + padding: $base_padding; + border-radius: $forced_circular_radius; + > StIcon { + icon-size: $base_icon_size; + } + } } -.lg-completions-text { - @extend %caption; - font-style: italic; -} -.lg-obj-inspector-title { - spacing: $base_padding; -} +// Evaluator +#LookingGlassEvaluator { + padding: $base_padding; -.lg-obj-inspector-button { - // border: 1px solid $borders_color; // Yaru change: fix button look - padding: 4px; - border-radius: $base_border_radius; - // &:hover { border: 1px solid $fg_color; } // Yaru change: fix button look - // Yaru change: fix button look - @include button(normal); - &:hover { @include button(hover); } + .evaluator-results { + @extend %monospace; + spacing: $base_padding; + } } -// Extensions -#lookingGlassExtensions { padding: $base_padding; } +// Window List +#LookingGlassWindows { -.lg-extensions-list { padding: $base_padding; spacing: $base_padding; -} -.lg-extension { - @extend %card; -} + .lg-window { + @extend %card_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + margin: 0; + padding: $base_padding * 2; + + .lg-window-name { + @extend %heading; + } -.lg-extension-name { - @extend %heading; + .lg-window-props-box { + .lg-window-props { + } + } + } } -.lg-extension-meta { - spacing: $base_padding; +// Extensions +#LookingGlassExtensions { + + .lg-extensions-list { + padding: $base_padding; + spacing: $base_padding; + } + + .lg-extension { + @extend %card_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + margin: 0; + spacing: $base_margin; + padding: $base_padding * 2; + + .lg-extension-name { + @extend %heading; + color: $osd_fg_color !important; + } + + .lg-extension-description { + } + + .lg-extension-meta { + spacing: $base_padding * 2; + } + } + + .lg-extensions-none { + @extend %title_4; + color: transparentize($osd_fg_color, 0.5); + } } -// Inspector -#LookingGlassPropertyInspector { - background: $bg_color; - border: 1px solid $borders_color; - border-radius: $base_border_radius; +// Actors +#LookingGlassActors { padding: $base_padding; - // color: $fg_color; // Yaru change: fix for the light theme + spacing: $base_margin; } -.lg-debug-flag-button { - StLabel { padding: $base_padding, 2 * $base_padding; } +// Debug +#LookingGlassDebugFlags { - color: $osd_fg_color; - &:hover { color: lighten($osd_fg_color, 20%); } - &:active { color: darken($osd_fg_color, 20%); } -} + .lg-debug-flags-header { + padding: $base_padding; + padding-top: 2 * $base_padding; + @extend %title_4; + } -.lg-debug-flags-header { - padding-top: 2 * $base_padding; - padding: $base_padding; - @extend %title_2; + .lg-debug-flag-button { + @extend %osd_button; + padding: $base_padding * 1.5 $base_padding * 2; + margin-bottom: $base_padding; + + StLabel { + @extend %monospace; + font-weight: normal !important; + } + + // switch style overrides since lg is OSD style + .toggle-switch { + @if $contrast == 'high' { + background: transparentize(white, .7); + &:hover { + background: transparentize(white, .6); + } + } @else { + background: transparentize(white, .85); + &:hover { + background: transparentize(white, .8); + } + } + &:checked { + background: -st-accent-color; + color: -st-accent-fg-color; + + background-color: $selected_bg_color; // Yaru: keep the accent as we may override it in CSS + color: $selected_fg_color; // Yaru: keep the accent as we may override it in CSS + + &:hover { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + + background-color: st-lighten($selected_bg_color, 5%); // Yaru: keep the accent as we may override it in CSS + color: st-lighten($selected_fg_color, 5%); // Yaru: keep the accent as we may override it in CSS + } + } + } + } } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss index d21d1d19..50dfc114 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss @@ -60,6 +60,7 @@ border-style: solid; &:focus { + border-color: st-transparentize(-st-accent-color, 0.4); border-color: $focus_border_color; // Yaru: we detached focus from selected } } @@ -68,21 +69,19 @@ // message bubbles .message { @extend %card; - padding: 0; + padding: $base_padding; margin: 0; border-radius: $modal_radius; - // subtract side padding to accommodate the close button's border - &:ltr { padding-right:-2px; }; - &:rtl { padding-left:-2px; }; - // message header .message-header { - padding: 0 $scaled_padding; - margin: $base_padding; - margin-bottom: 0; spacing: $base_padding; color: $insensitive_fg_color; + padding:0 $base_padding; + + // side padding to accommodate the close button + &:ltr { padding-right:$base_padding - 2px; }; + &:rtl { padding-left:$base_padding - 2px; }; // header source icon .message-source-icon { @@ -117,17 +116,14 @@ .message-expand-button, .message-close-button { @extend .icon-button; + @extend %notification_button; + border-radius: $forced_circular_radius; // make circular color: $fg_color; - background-color: transparentize($fg_color, .9); padding: 4px; - &:hover { background-color: transparentize($fg_color, .81);} - &:active, - &:active:hover { background-color: transparentize($fg_color, .76);} - &:insensitive { background-color: transparentize($fg_color, .93);} } .message-expand-button { - padding: 6px; + padding: $base_padding; &:ltr { margin-right: $base_padding; } &:rtl { margin-left: $base_padding; } } @@ -136,7 +132,6 @@ // container for message contents .message-box { padding: $base_padding; - margin: $base_padding; margin-top: 0; spacing: $base_padding; @@ -147,12 +142,12 @@ // icon size and color icon-size: $base_icon_size * 3; // 48px - -st-icon-style: symbolic; + // a small symbolic icon on a circle background &.message-themed-icon { - border-radius: $forced_circular_radius; // is circular - background-color: transparentize($fg_color, 0.8); - icon-size: $base_icon_size; + border-radius: $forced_circular_radius; + background-color: transparentize($fg_color, .93); + icon-size: $scalable_icon_size; min-width: $base_icon_size * 3; min-height: $base_icon_size * 3; } @@ -173,6 +168,26 @@ } } } + + // container for message buttons + .message-action-bin { + padding: $base_margin; + spacing: $base_padding; + + // set margin on children + * { + margin: 0 $base_margin; + // remove margins + &:first-child { + &:ltr { margin-left:0;} + &:rtl { margin-right:0;} + } + &:last-child { + &:ltr { margin-right:0;} + &:rtl { margin-left:0;} + } + } + } } // URLs in messages diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss index a9726af5..407f972b 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss @@ -1,5 +1,9 @@ // Rubberband for select-area screenshots -.select-area-rubberband { // Yaru: orange is too colorful here, thus use grays +.select-area-rubberband { + background-color: st-transparentize(-st-accent-color,0.7); + border: 1px solid -st-accent-color; + + // Yaru: accents are too colorful here, thus use grays background-color: transparentize($ash, 0.8); border: 1px solid transparentize($silk, 0.2); } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss index 9d5592f0..6d65b2d3 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss @@ -41,5 +41,5 @@ $notification_banner_width: 34em; } .notification-button { - @extend %bubble_button; + @extend %notification_button; } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss index 117213e8..1172c070 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss @@ -1,13 +1,9 @@ /* OVERVIEW */ -.controls-manager, .secondary-monitor-workspaces { +.secondary-monitor-workspaces { spacing: $base_padding * 2; } #overviewGroup { background-color: $system_base_color; } - -.overview-controls { - padding-bottom: $base_margin * 8; -} diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss index 575892bf..d1118c1a 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss @@ -136,17 +136,21 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } // use system text styles for overview panel + $button-system-panel-fg-color: $system_panel_fg_color; + @if $is_warty_nostalgia { + $button-system-panel-fg-color: lighten($panel_fg_color, 5%); + } &:overview { .panel-button { - @include panel_button($fg:$system_panel_fg_color); + @include panel_button($fg:$button-system-panel-fg-color); &#panelActivities .workspace-dot { - background-color: $system_panel_fg_color; + background-color: $button-system-panel-fg-color; } // clock &.clock-display { - @include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock'); + @include panel_button($fg:$button-system-panel-fg-color, $highlighted_child: true, $child_class: '.clock'); } } } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss index 7f3df1ac..6c64f0f1 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss +++ b/gnome-shell/upstream/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 { @@ -27,13 +28,14 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); padding: $base_padding; background-color: $bg_color; border-radius: $modal_radius * 1.25; + border-radius: $yaru_menu_border_radius; border: 1px solid $outer_borders_color; box-shadow: 0 2px 4px 0 $shadow_color; } // menu items .popup-menu-item { - @include menuitem($bg:$menu_bg_color); + @include menuitem($bg:$menuitem_bg_color); border-radius: $menuitem_border_radius; @@ -75,6 +77,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 +86,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/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss index c43081ba..27c80432 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss @@ -1,6 +1,7 @@ .quick-settings { padding: $base_padding * 3; border-radius: $modal_radius * 2.25; + border-radius: $yaru_menu_border_radius; .icon-button, .button { padding: $base_padding * 1.75; @@ -64,7 +65,7 @@ &:checked { @extend %default_button; - border-color: $selected_borders_color; + border-color: $accent_borders_color; } &:ltr { diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss index 28375964..bd25c951 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss @@ -23,7 +23,7 @@ // content .search-section-content { - background-color: $dash_background_color; // Yaru: use same background as dash + background-color: $system_overlay_bg_color; color: $system_fg_color; border-radius: $modal_radius * 1.5; padding: $base_padding * 2; @@ -49,7 +49,6 @@ .grid-search-results { spacing: $base_padding * 5; - margin:0 $base_margin * 3; } // Search results with icons diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss index 359edc4f..93f18a17 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss @@ -4,17 +4,17 @@ $slider_size: $scalable_icon_size; $slider_size: to_em(18px);; // Yaru change: larger slider cause to border in light theme .slider { + // Yaru: Use less invasive handle color on light theme + color: if($variant == 'light', lighten($fg_color, 15%), darken($fg_color, 9%)); + // slider trough -barlevel-height: 4px; - -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough - -barlevel-border-width: 2px; - -barlevel-border-color: transparent; // trough border color + -barlevel-background-color: transparentize($fg_color, 0.9); // fill style - -barlevel-active-background-color: $progress_bg_color; // Yaru change: we detached progress from selected - -barlevel-active-border-color: transparent; + -barlevel-active-background-color: -st-accent-color; + -barlevel-active-background-color: $selected_bg_color; // Yaru: keep the accent as we may override it in CSS // overfill style (red in this case) -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-border-color: transparent; //trough border when red; -barlevel-overdrive-separator-width:1px; // slider handler // -slider-handle-border-width: 0; @@ -23,11 +23,14 @@ $slider_size: to_em(18px);; // Yaru change: larger slider cause to border in lig -slider-handle-border-color: if($variant=='light', darken($alt_borders_color, 3%), transparent); // because 0 width - Yaru change: the handle border needs to be darker for the light theme -slider-handle-radius: $slider_size * 0.5; // half the size of the size - color: darken(white, 1%); // Yaru change: adapt knob to gtk height: $slider_size + to_em(2px); // Yaru change: increase height due to border - // hc style - @if $contrast == 'high' { - -barlevel-background-color: transparentize($fg_color, 0.6); - } + // hc style + @if $contrast == 'high' { + -barlevel-background-color: transparentize($fg_color, 0.6); + } + + &:hover { + color: if($variant == 'light', lighten($fg_color, 7%), $fg_color); + } } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss index ef8a7b63..bc53c6c9 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss @@ -1,18 +1,61 @@ /* 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; } - & 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; + } + + &:checked { + background: -st-accent-color; + color: -st-accent-fg-color; + + // Yaru: keep using scss colors + background: $selected_bg_color; + color: $selected_fg_color; + + &:hover { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + + // Yaru: keep using scss colors + background: st-lighten($selected_bg_color, 5%); + color: st-lighten($selected_fg_color, 5%); + } + + .handle { + background: white; + } + } } diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss index 9b6938ef..5527308b 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss @@ -7,6 +7,19 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); spacing: $base_padding; } +// Window icons +.window-icon { + // styled only with .icon-dropshadow + // but has a different style in high-contrast + @if $contrast == 'high' { + background-color: $osd_bg_color; + padding: $base_padding * 2; + border-radius: $modal_radius; + border: 2px solid $hc_inset_color; + margin: $base_padding * 3; + } +} + // Window titles .window-caption { @extend %tooltip; diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss index f3e069f7..da8d77fd 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss @@ -1,6 +1,6 @@ /* Workspace Switcher */ -$ws_indicator_height: 48px; +$ws_indicator_height: 32px; $ws_dot_active: $ws_indicator_height / 3; $ws_dot_inactive: $ws_indicator_height / 6; diff --git a/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss index db27e559..dfba6d99 100644 --- a/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -13,7 +13,7 @@ border-radius: $base_border_radius * 0.5; border: 1px solid transparent; - background-color: $dash_background_color; // Yaru: use same background as dash + background-color: $system_overlay_bg_color; // Yaru: use same background as dash border: 1px solid $system_borders_color; // Yaru: use same border as dash @if $contrast == 'high' { @@ -31,6 +31,7 @@ // selected indicator .workspace-thumbnail-indicator { + border: 3px solid -st-accent-color; border: 2px solid $focus_border_color; // Yaru: we detached focus from selected border-radius: $base_border_radius; } diff --git a/gnome-shell/upstream/gnome-shell.scss.in b/gnome-shell/upstream/gnome-shell.scss.in index 7552001e..42df7d01 100644 --- a/gnome-shell/upstream/gnome-shell.scss.in +++ b/gnome-shell/upstream/gnome-shell.scss.in @@ -1,5 +1,6 @@ $variant: if(@DarkVariant@, 'dark', 'light'); $yaru_variant: '@YaruVariant@'; +$yaru_accent_color: '@YaruVariant@'; $use_gresource: @UseGResource@; $is_highcontrast: @HighContrast@; $UPSTREAM_VARIANTS: ['dark', 'light']; @@ -7,34 +8,6 @@ $contrast: if($is_highcontrast, 'high', 'normal'); @import 'sass-utils'; -@function is-asset-colorable($asset) { - $COLORABLE_ASSETS: @ColorableAssets@; // This is going to be a list. - - @return list-index($COLORABLE_ASSETS, $asset) != null; -} - -@function maybe-add-variant-to-colorable-asset($url) { - $path: str-dirname($url); - $path: if($path == '.', '', $path + '/'); - $asset: str-basename($url); - $extension: str-extension($asset); - $extension: if($extension, '.' + $extension, ''); - - /* First remove the upstream variant (if any) from the asset */ - @each $v in $UPSTREAM_VARIANTS { - $suffix: '-' + $v + $extension; - @if str-ends-with($asset, $suffix) { - $asset: str-slice($asset, 1, - (str-length($suffix) + 1)) + $extension; - } - } - - @if is-asset-colorable($asset) { - $url: $path + str-insert($asset, '-' + $yaru_variant, str-index($asset, $extension)); - } - - @return $url; -} - @function yaru_url_handler($arg) { $url: unquote($arg); @@ -45,8 +18,6 @@ $contrast: if($is_highcontrast, 'high', 'normal'); } } - $url: maybe-add-variant-to-colorable-asset($url); - @if $url != $arg { @debug($arg + " -> " + $url); } diff --git a/gnome-shell/upstream/meson.build b/gnome-shell/upstream/meson.build index 8d4d78f0..ce9ddab3 100644 --- a/gnome-shell/upstream/meson.build +++ b/gnome-shell/upstream/meson.build @@ -50,18 +50,6 @@ theme_assets = files( ).stdout().strip().split('\n') ) -colorable_theme_assets = files( - run_command( - 'find', meson.current_source_dir() / 'colorable-assets', '-maxdepth', '1', '-name', '*.svg' - ).stdout().strip().split('\n') -) - -colorable_assets_names = [] -foreach asset: colorable_theme_assets - basename = fs.name(asset) - colorable_assets_names += basename -endforeach - theme_gresource_files = theme_assets theme_gresource_deps = [] @@ -108,59 +96,6 @@ foreach variant: variants 'yaru_accent_color': is_custom_accent ? variant_base_name : 'default', } - # Prepare colorable assets - shell_yaru_colors_defs_scss = configure_file( - configuration: accent_configuration + { - 'yaru_theme_entry_point': yaru_colors_defs_scss - }, - input: accent_colors_definitions_scss, - output: 'gnome-shell-yaru-colors-defs-@0@.scss'.format(variant), - ) - - shell_yaru_colors_defs = custom_target( - 'gnome-shell-yaru-color-definitions-@0@'.format(variant), - input: shell_yaru_colors_defs_scss, - output: '@BASENAME@.css'.format(variant), - command: [ - sassc, '-a', '@INPUT@', '@OUTPUT@', - '-I', css_sources_path / 'gnome-shell-sass', - '-I', meson.project_source_root() / 'common', - ], - depends: source_deps, - depend_files: [ - yaru_colors_defs_scss, - theme_sources, - ] - ) - - foreach colorable_asset: colorable_theme_assets - basename = fs.name(colorable_asset) - - # We don't support other variants here... - if (not INCLUDE_HIGH_CONTRAST_VARIANTS and - variant != DEFAULT_HIGH_CONTRAST_VARIANT and basename.endswith('-hc.svg')) - continue - endif - - asset_target = custom_target( - fs.stem(basename) + '-' + variant + '.svg', - input: colorable_asset, - output: '@BASENAME@-@0@.svg'.format(variant), - command: [ - colorize_dummy_svg, - shell_yaru_colors_defs, - '--input-file', '@INPUT@', - '--output-folder', '@OUTDIR@', - '--variant', variant, - ], - depends: shell_yaru_colors_defs, - install: install_theme_sources, - install_dir: install_dir, - ) - theme_gresource_files += asset_target.full_path() - theme_gresource_deps += asset_target - endforeach - # generate .css files style_css = [] variant_styles = [] @@ -190,7 +125,6 @@ foreach variant: variants 'UseGResource': gnomeshell_use_gresource ? 'true' : 'false', 'HighContrast': high_contrast ? 'true' : 'false', 'Colors': (high_contrast ? 'high-contrast-' : '') + 'colors', - 'ColorableAssets': '@0@'.format(colorable_assets_names), }, )