style: Improve the styles for the separation in quick setting buttons

- remove the highlighting js in favour of color definitions, to fix it not really working in light theme or high contrast
- add a bunch of color definitions to set the color of the menu button in the different styles
- drop the border drawing for a separator, to fix visual issues with the high border radius, in favour of a separator element
- change the class names of some things to make it understandable
- bit of overall css tidying

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3554>

data/theme/gnome-shell-sass/widgets/_quick-settings.scss

@@ -12,16 +12,15 @@
   spacing-columns: $base_padding * 2;
 }
 
-.quick-toggle, .quick-menu-toggle {
+.quick-toggle, .quick-toggle-has-menu {
   border-radius: $forced_circular_radius;
   min-width: 12em;
   max-width: 12em;
   min-height: $scalable_icon_size * 3; // use icon size so the button scales
-  border:none;
 }
 
+// standalone toggle button
 .quick-toggle {
-  background-color: none;
   &:checked { @extend %default_button;}
 
   & > StBoxLayout { spacing: $base_padding * 1.5; }
@@ -29,13 +28,18 @@
   /* Move padding into the box; this is to allow menu arrows
      to extend to the border */
   &.button { padding: 0; }
-  & > StBoxLayout { padding: 0 $base_padding * 2; }
+  & > StBoxLayout {
+    padding: 0 $base_padding * 2;
+  }
+
   &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
   &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
 
-  .quick-toggle-title { font-weight: bold; }
+  .quick-toggle-title {
+    @extend %heading;
+  }
 
-  & StBoxLayout > .quick-toggle-subtitle {
+  .quick-toggle-subtitle {
     @extend %caption;
     font-weight: normal;
   }
@@ -43,39 +47,92 @@
   .quick-toggle-icon { icon-size: $scalable_icon_size; }
 }
 
-.quick-menu-toggle {
+// toggle with a menu button
+.quick-toggle-has-menu {
   & .quick-toggle {
     min-width: auto;
     max-width: auto;
 
-    &:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
+    &:ltr {
-    &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
+      border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
-    &:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
+      > StBoxLayout { padding-right: $scaled_padding * 1.5; }
-    &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
+    }
+
+    &:rtl {
+      border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
+      > StBoxLayout { padding-left: $scaled_padding * 1.5; }
+    }
 
     &:ltr:last-child { border-radius: $forced_circular_radius; }
     &:rtl:last-child { border-radius: $forced_circular_radius; }
   }
 
-  & .quick-toggle-arrow {
+  & .quick-toggle-menu-button {
     padding: $scaled_padding $scaled_padding * 1.75;
-    border-width: 0;
-    border-color: transparentize($fg_color, .75);
-
-    &:checked {
-      @extend %default_button;
-      border-color: $accent_borders_color;
-    }
 
     &:ltr {
       border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
-      border-left-width: 1px;
     }
     &:rtl {
       border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
-      border-right-width: 1px;
     }
   }
+
+  & .quick-toggle-separator {
+    width: 1px;
+  }
+}
+
+
+// Set the color of separators and menu buttons within the toggle.
+// This is bit of a mess but needed to have working colors in
+// both light, dark and high contrast styles.
+
+// menu button colors
+$quick_toggle_menubutton_bg_color: if(
+  $contrast == 'high', lighten($bg_color, 22%),
+  if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 8%))
+);
+$quick_toggle_menubutton_checked_bg_color: if(
+  $contrast == 'high', st-mix(-st-accent-color, $fg_color, 75%),
+  if($variant == 'light', st-mix(-st-accent-color, $fg_color, 92%), st-mix(-st-accent-color, $fg_color, 85%))
+);
+
+// separator colors
+$quick_toggle_separator_color: if(
+  $contrast == 'high', transparent,
+  transparentize($fg_color, .75)
+);
+
+$quick_toggle_checked_separator_color: if(
+  $contrast == 'high', transparent,
+  if($variant == 'light', st-mix(-st-accent-fg-color, -st-accent-color, 20%), st-mix(-st-accent-fg-color, -st-accent-color, 30%),)
+);
+
+.quick-toggle-has-menu {
+  & .quick-toggle-menu-button {
+    @include button(normal, $c: $quick_toggle_menubutton_bg_color);
+    &:focus { @include button(focus, $c: $quick_toggle_menubutton_bg_color);}
+    &:hover { @include button(hover, $c: $quick_toggle_menubutton_bg_color);}
+    &:active { @include button(active, $c: $quick_toggle_menubutton_bg_color);}
+
+    &:checked {
+      @include button(normal, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);
+      &:focus { @include button(focus, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);}
+      &:hover { @include button(hover, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);}
+      &:active { @include button(active, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);}
+    }
+  }
+
+  &:checked {
+    & .quick-toggle-separator {
+      background-color: $quick_toggle_checked_separator_color;
+    }
+  }
+
+  & .quick-toggle-separator {
+    background-color: $quick_toggle_separator_color;
+  }
 }
 
 .quick-slider {

js/ui/quickSettings.js

@@ -17,7 +17,6 @@ import {PopupAnimation} from './boxpointer.js';
 
 const DIM_BRIGHTNESS = -0.4;
 const POPUP_ANIMATION_TIME = 400;
-const MENU_BUTTON_BRIGHTNESS = 0.1;
 
 export const QuickSettingsItem = GObject.registerClass({
     Properties: {
@@ -167,7 +166,7 @@ export const QuickMenuToggle = GObject.registerClass({
             hasMenu: true,
         });
 
-        this.add_style_class_name('quick-menu-toggle');
+        this.add_style_class_name('quick-toggle-has-menu');
 
         this._box = new St.BoxLayout({x_expand: true});
         this.set_child(this._box);
@@ -177,17 +176,13 @@ export const QuickMenuToggle = GObject.registerClass({
         });
         this._box.add_child(contents);
 
-        // Use an effect to lighten the menu button a bit, so we don't
+        let separator = new St.Widget({style_class: 'quick-toggle-separator'});
-        // have to define two full sets of button styles (normal/default)
+        this._box.add_child(separator);
-        // with slightly different colors
-        const menuHighlight = new Clutter.BrightnessContrastEffect();
-        menuHighlight.set_brightness(MENU_BUTTON_BRIGHTNESS);
 
         this._menuButton = new St.Button({
-            style_class: 'quick-toggle-arrow icon-button',
+            style_class: 'quick-toggle-menu-button icon-button',
             child: new St.Icon({icon_name: 'go-next-symbolic'}),
             accessible_name: _('Open menu'),
-            effect: menuHighlight,
             can_focus: true,
             x_expand: false,
             y_expand: true,