gnome-shell: Merge with non-accent color related upstream changes

We prefer keeping the multi-css based theming for now since it allows further customization based on the accent itself (as the warty brown!). But we can likely ignore those in future.
ubuntu · Sep 6, 2024 · d7de06c · d7de06c
1 parent 5e77192
commit d7de06c
Show file tree

Hide file tree

Showing 16 changed files with 308 additions and 162 deletions.
diff --git a/gnome-shell/src/gnome-shell-sass/_common.scss b/gnome-shell/src/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.
@@ -189,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
 }
 
@@ -206,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

diff --git a/gnome-shell/src/gnome-shell-sass/_default-colors.scss b/gnome-shell/src/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/src/gnome-shell-sass/_drawing.scss b/gnome-shell/src/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,9 +383,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/src/gnome-shell-sass/_yaru-colors.scss b/gnome-shell/src/gnome-shell-sass/_yaru-colors.scss
@@ -5,7 +5,9 @@ $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%);

diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_base.scss b/gnome-shell/src/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/src/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell/src/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/src/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell/src/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/src/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell/src/gnome-shell-sass/widgets/_login-lock.scss
@@ -319,7 +319,7 @@ $_gdm_dialog_width: 25em;
   .unlock-dialog-clock-time {
     @extend %numeric;
     @include fontsize(72pt);
-    font-weight: 200;
+    font-weight: 800;
   }
 
   .unlock-dialog-clock-date {
@@ -420,7 +420,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;
       }
@@ -429,7 +430,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
         }
       }