Fixed gnome-shell issues

src/sass/gnome-shell/_drawing.scss

@@ -78,24 +78,24 @@
 
   @if $t == focus {
     color: $tc;
-    background-color: overlay($bc, focus);
     box-shadow: none !important;
+    background-color: if($bc == $primary, rgba(white, 0.08), overlay($bc, focus));
   }
 
   @if $t == hover {
     color: $tc;
-    background-color: overlay($bc, hover);
     box-shadow: none !important;
+    background-color: if($bc == $primary, rgba(white, 0.08), overlay($bc, hover));
   }
 
   @if $t == active {
     color: $tc;
-    background-color: overlay($bc, active);
     box-shadow: none !important;
+    background-color: if($bc == $primary, rgba(white, 0.12), overlay($bc, active));
   }
 
   @if $t == checked {
-    color: on($fc);
+    color: if($fc == $primary, white, on($fc));
     background-color: $fc;
     box-shadow: none !important;
   }

src/sass/gnome-shell/_widgets-47-0.scss

@@ -1,3 +1,13 @@
+$primary-text: $white;
+
+@if $gnome_version == 'new' and $colortype == 'system' {
+  $primary:            -st-accent-color;
+  $indicator:          -st-accent-color;
+  $inverse-indicator:  -st-accent-color;
+} @else {
+  $primary-text:       on($primary);
+}
+
 @import 'common/a11y';
 @import 'common/base';
 @import 'common/buttons';

src/sass/gnome-shell/common/_a11y.scss

@@ -3,8 +3,14 @@
   width: 48px;
   height: 48px;
   border-radius: 24px; // radius equals the size of the box to give us the curve
+
+  @if $gnome_version == 'default' {
     background-color: lighten(transparentize($primary, 0.7), 30%);
     box-shadow: 0 0 2px 2px lighten($primary, 20%);
+  } @else {
+    background-color: st-lighten(st-transparentize($primary, 0.7), 30%);
+    box-shadow: 0 0 2px 2px st-lighten($primary, 20%);
+  }
 }
 
 // Pointer accessibility notifications
@@ -13,7 +19,11 @@
   height: 60px;
   -pie-border-width: 3px;
   -pie-border-color: $primary;
+  @if $gnome_version == 'default' {
     -pie-background-color: lighten(transparentize($primary, 0.7), 40%);
+  } @else {
+    -pie-background-color: st-lighten(st-transparentize($primary, 0.7), 40%);
+  }
 }
 
 // Screen zoom/Magnifier

src/sass/gnome-shell/common/_buttons.scss

@@ -17,11 +17,11 @@
 }
 
 %default_button {
-  @include button(normal, $bc:$primary, $tc:on($primary),);
-  &:focus { @include button(focus, $bc:$primary, $tc:on($primary)); }
-  &:hover { @include button(hover, $bc:$primary, $tc:on($primary)); }
-  &:insensitive { @include button(insensitive, $bc:$primary, $tc:on($primary)); }
-  &:active { @include button(active, $bc:$primary, $tc:on($primary),); }
+  @include button(normal, $bc:$primary, $tc:$primary-text);
+  &:focus { @include button(focus, $bc:$primary, $tc:$primary-text); }
+  &:hover { @include button(hover, $bc:$primary, $tc:$primary-text); }
+  &:insensitive { @include button(insensitive, $bc:$primary, $tc:$primary-text); }
+  &:active { @include button(active, $bc:$primary, $tc:$primary-text); }
 }
 
 .button {

src/sass/gnome-shell/common/_calendar.scss

@@ -202,17 +202,25 @@
     }
 
     &:active {
+      @if $gnome_version == 'default' {
         background-color: darken($primary, 5%);
-      color: on($primary) !important;
+      } @else {
+        background-color: st-darken($primary, 5%);
+      }
+      color: $primary-text !important;
     }
 
     &:selected {
       background-color: $primary;
-      color: on($primary) !important;
+      color: $primary-text !important;
 
       &:hover, &:focus {
+        @if $gnome_version == 'default' {
           background-color: lighten($primary, 8%);
-        color: on($primary) !important;
+        } @else {
+          background-color: st-lighten($primary, 8%);
+        }
+        color: $primary-text !important;
       }
     }
   }

src/sass/gnome-shell/common/_corner-ripple.scss

@@ -3,8 +3,14 @@
 $ripple_size: 50px;
 
 .ripple-box {
-  background-color: rgba($primary, 0.35);
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.65);
     box-shadow: 0 0 2px 2px lighten($primary, 20%);
+  } @else {
+    background-color: st-transparentize($primary, 0.65);
+    box-shadow: 0 0 2px 2px st-lighten($primary, 20%);
+  }
+
   // plus + 2px for the border (box-shadow)
   width: $ripple_size + 2px;
   height: $ripple_size + 2px;

src/sass/gnome-shell/common/_dialogs.scss

@@ -14,22 +14,37 @@
 }
 
 %last_dialog_button {
-  color: on($primary);
+  color: $primary-text;
   background-color: $primary;
 
   &:hover {
-    color: on($primary);
-    background-color: lighten($primary, 9%);
+    color: $primary-text;
+
+    @if $gnome_version == 'default' {
+      background-color: darken($primary, 9%);
+    } @else {
+      background-color: st-darken($primary, 9%);
+    }
   }
 
   &:active {
-    color: on($primary);
+    color: $primary-text;
+
+    @if $gnome_version == 'default' {
       background-color: darken($primary, 5%);
+    } @else {
+      background-color: st-darken($primary, 5%);
+    }
   }
 
   &:insensitive {
-    background-color: rgba($primary, 0.05);
-    color: rgba($primary, 0.35);
+    @if $gnome_version == 'default' {
+      background-color: transparentize($primary, 0.95);
+      color: transparentize($primary, 0.65);
+    } @else {
+      background-color: st-transparentize($primary, 0.95);
+      color: st-transparentize($primary, 0.65);
+    }
   }
 }
 
@@ -211,7 +226,7 @@
   &:hover, &:focus { background-color: overlay($popover, hover); }
   &:active {
     background-color: $primary;
-    color: on($primary);
+    color: $primary-text;
   }
 }
 

src/sass/gnome-shell/common/_entries.scss

@@ -8,7 +8,7 @@ StEntry, %entry {
   color: $text;
   caret-color: $text;
   selection-background-color: $primary;
-  selected-color: on($primary);
+  selected-color: $primary-text;
   @include entry(normal);
   &:hover { @include entry(hover);}
   &:focus { @include entry(focus);}

src/sass/gnome-shell/common/_ibus-popup.scss

@@ -29,7 +29,7 @@
 .candidate-index {
   padding: 0 0.5em 0 0;
   color: $text-secondary;
-  .candidate-box:selected & { color: on($primary, secondary); }
+  .candidate-box:selected & { color: $primary-text; }
 }
 
 .candidate-box {
@@ -39,7 +39,7 @@
   color: $text-secondary;
   &:hover { background-color: $divider; color: $text; }
   &:active { background-color: $track; color: $text; }
-  &:selected { background-color: $primary; color: on($primary); }
+  &:selected { background-color: $primary; color: $primary-text; }
   &:last-child { margin-right: 0; }
 }
 

src/sass/gnome-shell/common/_keyboard.scss

@@ -72,11 +72,18 @@ $default_key_bg_color: if($variant == 'light', #adb3bc, #4b4b4b);
   }
 
   &.enter-key { // enter key is suggested-action
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
 
-    &:focus, &:hover { color: on($primary); background-color: lighten($primary, 5%); }
-    &:checked, &:active { color: on($primary); background-color: darken($primary, 10%); }
+    &:focus, &:hover, &:checked, &:active { color: $primary-text; }
+
+    @if $gnome_version == 'default' {
+      &:focus, &:hover { background-color: lighten($primary, 5%); }
+      &:checked, &:active { background-color: darken($primary, 10%); }
+    } @else {
+      &:focus, &:hover { background-color: st-lighten($primary, 5%); }
+      &:checked, &:active { background-color: st-darken($primary, 10%); }
+    }
   }
 
   &.shift-key-uppercase {

src/sass/gnome-shell/common/_login-dialog.scss

@@ -17,7 +17,7 @@
 
   StEntry {
     selection-background-color: $primary;
-    selected-color: on($primary);
+    selected-color: $primary-text;
     padding: 4px 8px;
     min-height: $item_size - $base_padding;
     border-radius: $circular_radius;
@@ -37,16 +37,16 @@
   .modal-dialog-button {
     padding: 0 16px;
     border: none;
-    @include button(flat-normal, $tc: on($primary));
-    &:hover, &:focus { @include button(flat-hover, $tc: on($primary)); }
-    &:active { @include button(flat-active, $tc: on($primary)); }
-    &:insensitive { @include button(flat-insensitive, $tc: on($primary, disabled)); }
+    @include button(flat-normal, $tc: $primary-text);
+    &:hover, &:focus { @include button(flat-hover, $tc: $primary-text); }
+    &:active { @include button(flat-active, $tc: $primary-text); }
+    &:insensitive { @include button(flat-insensitive, $tc: rgba(white, 0.3)); }
 
     &:default {
-      @include button(normal, $tc: on($primary));
-      &:hover, &:focus { @include button(hover, $tc: on($primary)); }
-      &:active { @include button(active, $tc: on($primary)); }
-      &:insensitive { @include button(insensitive, $tc: on($primary, disabled)); }
+      @include button(normal, $tc: $primary-text);
+      &:hover, &:focus { @include button(hover, $tc: $primary-text); }
+      &:active { @include button(active, $tc: $primary-text); }
+      &:insensitive { @include button(insensitive, $tc: rgba(white, 0.3)); }
     }
   }
 

src/sass/gnome-shell/common/_looking-glass.scss

@@ -64,7 +64,7 @@
   StEntry {
     min-height: 22px;
     selection-background-color: $primary;
-    selected-color: on($primary);
+    selected-color: $primary-text;
   }
 
   .shell-link {

src/sass/gnome-shell/common/_misc.scss

@@ -1,6 +1,10 @@
 // Rubberband for select-area screenshots
 .select-area-rubberband {
-  background-color: transparentize($primary, 0.7);
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.3);
+  } @else {
+    background-color: st-transparentize($primary, 0.3);
+  }
   border: 1px solid $primary;
   border-radius: $base_radius;
 }

src/sass/gnome-shell/common/_network-dialog.scss

@@ -45,7 +45,7 @@
 
   &:selected {
     background-color: $primary;
-    color: on($primary);
+    color: $primary-text;
   }
 
   &:hover, &:focus { background-color: $divider; }

src/sass/gnome-shell/common/_notifications.scss

@@ -71,7 +71,7 @@
   -shell-counter-overlap-x: 3px;
   -shell-counter-overlap-y: 3px;
   background-color: $primary;
-  color: on($primary);
+  color: $primary-text;
   border: 2px solid $track;
   box-shadow: 0 2px 2px rgba(black, 0.5);
   border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;

src/sass/gnome-shell/common/_screen-shield.scss

@@ -54,7 +54,7 @@
 .unlock-dialog-notification-count-text {
   weight: bold;
   padding: 0 6px;
-  color: on($primary);
+  color: $primary-text;
   background-color: $primary;
   border-radius: $circular_radius;
   margin-right: 12px;
@@ -68,7 +68,12 @@
 #unlockDialogNotifications {
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($background, 0.7);
-    &:hover, &:focus { background-color: transparentize($background,0.5); }
+    &:hover, &:focus { background-color: transparentize($background, 0.5); }
+
+    @if $gnome_version == 'default' {
       &:active { background-color: transparentize($primary, 0.5); }
+    } @else {
+      &:active { background-color: st-transparentize($primary, 0.5); }
+    }
   }
 }

src/sass/gnome-shell/common/_search-entry.scss

@@ -7,7 +7,7 @@
   border-radius: $base_radius;
   caret-color: $text;
   selection-background-color: $divider;
-  selected-color: on($primary) !important;
+  selected-color: $primary-text !important;
   @include entry(normal, $bc: $base);
 
   &:hover {

src/sass/gnome-shell/common/_switcher-popup.scss

@@ -22,7 +22,7 @@
 
     &:selected {
       background-color: $primary;
-      color: on($primary);
+      color: $primary-text;
     }
   }
 

src/sass/gnome-shell/common/_tiled-previews.scss

@@ -4,8 +4,13 @@
 $tile_corner_radius: $base_radius + 1px;
 
 .tile-preview {
-  background-color: rgba($primary, 0.3);
   border: 1px solid $primary;
+
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.7);
+  } @else {
+    background-color: st-transparentize($primary, 0.7);
+  }
 }
 
 .tile-preview-left.on-primary {

src/sass/gnome-shell/common/_workspace-switcher.scss

@@ -30,7 +30,7 @@
 .ws-switcher-active-right {
   height: 52px;
   background-color: $primary;
-  color: on($primary);
+  color: $primary-text;
   border-radius: $base_radius + 3px;
   border: none;
 }

src/sass/gnome-shell/extensions-3-28/_dash-to-dock.scss

@@ -25,7 +25,7 @@
   }
 
   .notification-badge {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular_radius;

src/sass/gnome-shell/extensions-40-0/_dash-to-dock.scss

@@ -21,7 +21,7 @@
   }
 
   .notification-badge {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular_radius;

src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss

@@ -24,7 +24,7 @@
   .notification-badge {
     min-width: 16px;
     min-height: 16px;
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular-radius;

src/sass/gnome-shell/extensions-46-0/_misc.scss

@@ -122,7 +122,11 @@
 }
 
 .pop-shell-overlay {
-  background-color: rgba($primary, 0.3);
+  @if $gnome_version == 'default' {
+    background-color: transparentize($primary, 0.7);
+  } @else {
+    background-color: st-transparentize($primary, 0.7);
+  }
 }
 
 .pop-shell-search-element:select{

src/sass/gnome-shell/widgets-3-28/_app-grid.scss

@@ -109,7 +109,7 @@ $app_icon_spacing: 6px;
   }
 
   &:checked {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
     box-shadow: none;
   }

src/sass/gnome-shell/widgets-42-0/_quick-settings.scss

@@ -35,16 +35,16 @@
 
   &:checked {
     background-color: $primary !important;
-    color: on($primary);
+    color: $primary-text;
 
     &:hover {
       background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
 
     &:active {
       background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
   }
 
@@ -145,7 +145,7 @@
 
       &.active {
         background-color: $primary !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 

src/sass/gnome-shell/widgets-42-0/_screenshot.scss

@@ -166,17 +166,25 @@ $screenshot_ui_button_red: $error;
 .screenshot-ui-window-selector-window {
   &:hover {
     .screenshot-ui-window-selector-window-border {
+      @if $gnome_version == 'default' {
         border-color: darken($primary, 15%);
+      } @else {
+        border-color: st-darken($primary, 15%);
+      }
     }
   }
   &:checked {
     .screenshot-ui-window-selector-window-border {
       border-color: $primary;
+      @if $gnome_version == 'default' {
         background-color: transparentize($primary, 0.8);
+      } @else {
+        background-color: st-transparentize($primary, 0.8);
+      }
     }
 
     .screenshot-ui-window-selector-check {
-      color: on($primary);
+      color: $primary-text;
       background-color: $primary;
     }
   }

src/sass/gnome-shell/widgets-44-0/_quick-settings.scss

@@ -38,16 +38,16 @@
 
   &:checked {
     background-color: $primary !important;
-    color: on($primary);
+    color: $primary-text;
 
     &:hover {
       background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
 
     &:active {
       background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      color: $primary-text;
     }
   }
 
@@ -100,16 +100,16 @@
   
     &:checked {
       background-color: $primary !important;
-      color: on($primary);
+      color: $primary-text;
   
       &:hover {
         background-color: mix($text, $primary, 6%) !important;
-        color: on($primary);
+        color: $primary-text;
       }
   
       &:active {
         background-color: mix($text, $primary, 15%) !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 
@@ -183,7 +183,7 @@
 
       &.active {
         background-color: $primary !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 

src/sass/gnome-shell/widgets-46-0/_app-grid.scss

@@ -132,7 +132,16 @@ $app_folder_size: 720px;
     > StIcon { icon-size: $base_icon_size; }
 
     &:hover { background-color: overlay($osd, hover); }
-    &:checked, &:active { background-color: $inverse-indicator; color: on($inverse-indicator); }
+
+    &:checked, &:active {
+      background-color: $inverse-indicator;
+
+      @if $gnome_version == 'default' {
+        color: on($inverse-indicator);
+      } @else {
+        color: if($theme == 'grey', rgba(black, 0.87), white);
+      }
+    }
   }
 
   .page-indicators {

src/sass/gnome-shell/widgets-46-0/_calendar.scss

@@ -206,17 +206,25 @@
     }
 
     &:active {
+      color: $primary-text !important;
+      @if $gnome_version == 'default' {
         background-color: darken($primary, 5%);
-      color: on($primary) !important;
+      } @else {
+        background-color: st-darken($primary, 5%);
+      }
     }
 
     &:selected {
       background-color: $primary;
-      color: on($primary) !important;
+      color: $primary-text !important;
 
       &:hover, &:focus {
-        background-color: lighten($primary, 8%);
-        color: on($primary) !important;
+        color: $primary-text !important;
+        @if $gnome_version == 'default' {
+          background-color: darken($primary, 8%);
+        } @else {
+          background-color: st-darken($primary, 8%);
+        }
       }
     }
   }

src/sass/gnome-shell/widgets-46-0/_quick-settings.scss

@@ -38,16 +38,24 @@
 
   &:checked {
     background-color: $primary !important;
-    color: on($primary);
+    color: $primary-text;
 
     &:hover {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
         background-color: mix($text, $primary, 6%) !important;
-      color: on($primary);
+      } @else {
+        background-color: st-mix($text, $primary, 6%) !important;
+      }
     }
 
     &:active {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
         background-color: mix($text, $primary, 15%) !important;
-      color: on($primary);
+      } @else {
+        background-color: st-mix($text, $primary, 15%) !important;
+      }
     }
   }
 
@@ -100,16 +108,24 @@
   
     &:checked {
       background-color: $primary !important;
-      color: on($primary);
+      color: $primary-text;
   
       &:hover {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
           background-color: mix($text, $primary, 6%) !important;
-        color: on($primary);
+        } @else {
+          background-color: st-mix($text, $primary, 6%) !important;
+        }
       }
   
       &:active {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
           background-color: mix($text, $primary, 15%) !important;
-        color: on($primary);
+        } @else {
+          background-color: st-mix($text, $primary, 15%) !important;
+        }
       }
     }
 
@@ -183,7 +199,7 @@
 
       &.active {
         background-color: $primary !important;
-        color: on($primary);
+        color: $primary-text;
       }
     }
 

src/sass/gnome-shell/widgets-47-0/_check-box.scss

@@ -4,50 +4,46 @@
   StBoxLayout { spacing: .8em; }
 
   StBin {
-    width: 24px;
-    height: 24px;
-    padding: $base_padding / 2;
+    border-radius: 7px;
+    padding: 2px;
   }
 
-  StBin, &:focus StBin {
-    background-image: url("assets/checkbox-off.svg");
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  &:hover StBin {
-    background-color: $divider;
-  }
-
-  &:active StBin {
-    background-color: $track;
-  }
-
-  &:checked StBin, &:focus:checked StBin {
-    @if $theme == 'default' {
-      background-image: url("assets/checkbox#{$asset_suffix}.svg");
-    }
-    @else {
-      background-image: url("assets/checkbox.svg");
-    }
+  &: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: 0;
-    padding: 0;
+    icon-size: 14px;
+    padding: 1px;
+
     color: transparent;
-    border: none;
+    border-radius: 6px;
+    border: 2px solid transparentize(if($variant == 'light', black, white), .85);
+  }
+
+  &:hover StIcon {
+    border-color: transparentize(if($variant == 'light', black, white), .8);
   }
 
-  &:hover StIcon,
   &:active StIcon {
-    border: none;
+    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 StIcon,
-  &:checked:hover StIcon,
   &:checked:active StIcon {
-    background-color: transparent;
-    color: transparent;
+    background-color: st-darken(-st-accent-color, 7%);
+    color: st-darken(-st-accent-fg-color, 7%);
   }
 }

src/sass/gnome-shell/widgets-47-0/_dialogs.scss

@@ -30,22 +30,37 @@
   }
 
   &:last-child {
-    color: on($primary);
+    color: $primary-text;
     background-color: $primary;
 
     &:hover {
-      color: on($primary);
+      color: $primary-text;
+
+      @if $gnome_version == 'default' {
         background-color: lighten($primary, 9%);
+      } @else {
+        background-color: st-lighten($primary, 9%);
+      }
     }
 
     &:active {
-      color: on($primary);
+      color: $primary-text;
+
+      @if $gnome_version == 'default' {
         background-color: darken($primary, 5%);
+      } @else {
+        background-color: st-darken($primary, 5%);
+      }
     }
 
    &:insensitive {
-      background-color: rgba($primary, 0.05);
-      color: rgba($primary, 0.35);
+      @if $gnome_version == 'default' {
+        background-color: transparentize($primary, 0.95);
+        color: transparentize($primary, 0.65);
+      } @else {
+        background-color: st-transparentize($primary, 0.95);
+        color: st-transparentize($primary, 0.65);
+      }
     }
   }
 }
@@ -211,7 +226,7 @@
   &:hover, &:focus { background-color: overlay($popover, hover); }
   &:active {
     background-color: $primary;
-    color: on($primary);
+    color: $primary-text;
   }
 }
 

src/sass/gnome-shell/widgets-47-0/_message-list.scss

@@ -58,7 +58,11 @@
     border-style: solid;
 
     &:focus {
+      @if $gnome_version == 'default' {
         border-color: transparentize($primary, 0.4);
+      } @else {
+        border-color: st-transparentize($primary, 0.4);
+      }
     }
   }
 }

src/sass/gnome-shell/widgets-47-0/_slider.scss

@@ -17,6 +17,10 @@ $slide_size: if($compact == 'false', 7px, 6px);
   -barlevel-overdrive-separator-width: 2px;
 
   &:hover {
+    @if $gnome_version == 'default' and $variant == 'dark' and $theme == 'grey' {
       color: lighten($slide_color, 7%);
+    } @else {
+      color: st-lighten($slide_color, 7%);
+    }
   }
 }

src/sass/gnome-shell/widgets-47-0/_switches.scss

@@ -1,34 +1,49 @@
 /* Switches */
 
+$switch_width: 46px;
+$switch_handle_size: 20px;
+
 .toggle-switch {
-  width: 46px;
-  height: 24px;
-  background-size: contain;
-  background-color: transparent;
-  color: transparent;
+  width: $switch_width;
+  border-radius: $circular-radius;
+  transition-duration: 100ms;
+  color: $text;
+  background: transparentize(if($variant == 'light', black, white), .85);
 
-  &, .popup-sub-menu & {
-    background-image: url("assets/toggle-off.svg");
-
-    &:checked {
-      background-image: url("assets/toggle-on#{$asset_suffix}.svg");
-    }
+  &:hover {
+    background: transparentize(if($variant == 'light', black, white), .8);
   }
 
   StIcon {
-    icon-size: 0;
+    icon-size: $base_icon_size;
   }
 
   .handle {
-    margin: 0;
-    background: none;
-    box-shadow: none;
-    transition-duration: 0;
+    margin: 3px;
+    width: $switch_handle_size;
+    height: $switch_handle_size;
+    border-radius: $circular-radius;
+    background: if($variant == 'light', white, mix(white, $background, 80%));
+    box-shadow: 0 2px 4px transparentize(black, .8);
+    transition-duration: 100ms;
   }
 
   &:checked {
+    background: $primary;
+    color: $primary-text;
+
+    &:hover {
+      @if $gnome_version == 'default' {
+        background-color: lighten($primary, 5%);
+        color: lighten($primary-text, 5%);
+      } @else {
+        background-color: st-lighten($primary, 5%);
+        color: st-lighten($primary-text, 5%);
+      }
+    }
+
     .handle {
-      background: none;
+      background: white;
     }
   }
 }