diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index ffd4e9fc9..cbb3b716e 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -65,5 +65,5 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
 $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
 $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
 
-// selection colors
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
\ No newline at end of file
+// accent colors
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 673e9ce50..2124a3a2f 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -117,11 +117,11 @@ stage {
 }
 
 %default_button {
-  @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
-  &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
-  &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
-  &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
-  &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+  @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);
+  &:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+  &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+  &:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+  &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
 }
 
 // items in popover menus
@@ -173,7 +173,7 @@ stage {
   border-radius: $base_border_radius;
   padding: $base_padding * 1.5 $base_padding * 1.5;
 
-  selection-background-color: transparentize($selected_bg_color, 0.7);
+  selection-background-color: st-transparentize(-st-accent-color, 0.7);
   selected-color: $fg_color;
 }
 
diff --git a/data/theme/gnome-shell-sass/_default-colors.scss b/data/theme/gnome-shell-sass/_default-colors.scss
index 6c700871f..bf1854140 100644
--- a/data/theme/gnome-shell-sass/_default-colors.scss
+++ b/data/theme/gnome-shell-sass/_default-colors.scss
@@ -22,13 +22,9 @@ $error_bg_color: if($variant == 'light', $red_3, $red_4);
 $error_fg_color: $light_1;
 $error_color: $error_bg_color;
 
-// colors for selected or default elements
-$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
-$selected_fg_color: $light_1;
-
 // link colors
-$link_color: if($variant == 'light', $blue_4, $blue_2);
-$link_visited_color: transparentize($link_color, .6);
+$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
+$link_visited_color: st-transparentize($link_color, .6);
 
 // special cased widget definitions
 $background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
@@ -39,8 +35,8 @@ $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
 $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
 
 // focus colors
-$focus_color: $selected_bg_color;
-$focus_border_color: transparentize($focus_color, 0.5);
+$focus_color: -st-accent-color;
+$focus_border_color: st-transparentize($focus_color, 0.5);
 
 // High Contrast overrides
 @if $contrast == 'high' {
@@ -50,5 +46,5 @@ $focus_border_color: transparentize($focus_color, 0.5);
     $shadow_color: transparent;
     $text_shadow_color: transparent;
     // less transparent focus color
-    $focus_border_color: transparentize($focus_color, 0.2);
+    $focus_border_color: st-transparentize($focus_color, 0.2);
 }
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 39c6eb7b5..447feb6a4 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -16,12 +16,12 @@
   // $mc: mix color, defined in High Contrast specific stylesheet
   // $mf: mix factor (%), defined in High Contrast specific stylesheet
   //
-  @return mix($c, $mc, $mf);
+  @return st-mix($c, $mc, $mf);
 }
 
 // Function to mix the color and make the focus background
 @function focus_bg_color($bg, $fc:$focus_color) {
-  @return mix($fc, $bg, 5%);
+  @return st-mix($fc, $bg, 5%);
 }
 
 //
@@ -165,7 +165,7 @@
   //
 
   // mix input colors to get button background color
-  $button_bg_color: mix($tc, $c, $background_mix_factor);
+  $button_bg_color: st-mix($tc, $c, $background_mix_factor);
 
   // background color override for card elements
   @if $style == 'card' { $button_bg_color: $card_bg_color;}
@@ -187,26 +187,26 @@
   }
 
   // button base state background colors
-  $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
-  $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
-  $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
-  $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
+  $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
+  $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
+  $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
+  $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));
 
   // button extended state background colors
-  $active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
-  $checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
-  $checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
+  $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
+  $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
+  $checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor));
 
   // override button background colours if element is always dark
   @if $always_dark {
-    $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
-    $active_button_bg_color: lighten($button_bg_color, $active_factor);
-    $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
-    $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+    $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
+    $active_button_bg_color: st-lighten($button_bg_color, $active_factor);
+    $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
+    $insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
     // extended
-    $active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
-    $checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
-    $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
+    $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
+    $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
+    $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
   }
 
   // background color override for buttons that use transparency
@@ -283,7 +283,7 @@
 
   // insensitive button
   @else if $type == 'insensitive' {
-    $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
+    $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
     color: $insensitive_button_fg_color;
     background-color: $insensitive_button_bg_color;
 
@@ -300,7 +300,7 @@
 
     // use a different focus ring color for default style
     @if $style == 'default' {
-      @include focus_ring($fc:$selected_borders_color);
+      @include focus_ring($fc:$accent_borders_color);
     }
     // change background color if style is flat
     @if $style == 'flat' {
@@ -357,8 +357,8 @@
   }
 
   &:drop {
-    background-color: transparentize($selected_bg_color, .8);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
+    background-color: st-transparentize(-st-accent-color, .8);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 3cc447c22..3b05e0b9a 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
 $active_bg_color: lighten($bg_color, 22%);
 $active_fg_color: lighten($fg_color, 22%);
 
-// selection colors
-$selected_borders_color: lighten($selected_bg_color, 30%);
+// accent colors
+$accent_borders_color: st-lighten(-st-accent-color, 30%);
 
 //
 // High Contrast specific definitions
diff --git a/data/theme/gnome-shell-sass/widgets/_a11y.scss b/data/theme/gnome-shell-sass/widgets/_a11y.scss
index 31b5c4b7e..0bbf185b6 100644
--- a/data/theme/gnome-shell-sass/widgets/_a11y.scss
+++ b/data/theme/gnome-shell-sass/widgets/_a11y.scss
@@ -3,8 +3,8 @@
   width: $ripple_size;
   height: $ripple_size;
   border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
-  background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
-  box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
+  background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%);
+  box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%);
 }
 
 // Pointer accessibility notifications
@@ -12,13 +12,13 @@
   width: 60px;
   height: 60px;
   -pie-border-width: 3px;
-  -pie-border-color: $selected_bg_color;
-  -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
+  -pie-border-color: -st-accent-color;
+  -pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
 }
 
 // Screen zoom/Magnifier
 .magnifier-zoom-region {
-  border: 2px solid $selected_bg_color;
+  border: 2px solid -st-accent-color;
 
   &.full-screen { border-width: 0; }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_base.scss b/data/theme/gnome-shell-sass/widgets/_base.scss
index 20a1666e2..0a9618d30 100644
--- a/data/theme/gnome-shell-sass/widgets/_base.scss
+++ b/data/theme/gnome-shell-sass/widgets/_base.scss
@@ -3,7 +3,7 @@
   color: $link_color;
 
   &:hover {
-    color: lighten($link_color, 10%);
+    color: st-lighten($link_color, 10%);
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 80b30dc93..a4c6a8870 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -111,7 +111,7 @@
     &.calendar-today {
       @extend %default_button;
       // override colors above for when today is a weekend
-      color: $selected_fg_color !important;
+      color: -st-accent-fg-color !important;
       &.calendar-day-with-events {
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
       }
diff --git a/data/theme/gnome-shell-sass/widgets/_check-box.scss b/data/theme/gnome-shell-sass/widgets/_check-box.scss
index f18d6418c..956a59ee5 100644
--- a/data/theme/gnome-shell-sass/widgets/_check-box.scss
+++ b/data/theme/gnome-shell-sass/widgets/_check-box.scss
@@ -11,7 +11,7 @@
   &: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 transparentize($selected_bg_color, .65);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
   }
 
   StIcon {
@@ -32,18 +32,18 @@
   }
 
   &:checked StIcon {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
     border-color: transparent;
   }
 
   &:checked:hover StIcon {
-    background-color: lighten($selected_bg_color, 5%);
-    color: lighten($selected_fg_color, 5%);
+    background-color: st-lighten(-st-accent-color, 5%);
+    color: st-lighten(-st-accent-fg-color, 5%);
   }
 
   &:checked:active StIcon {
-    background-color: darken($selected_bg_color, 7%);
-    color: darken($selected_fg_color, 7%);
+    background-color: st-darken(-st-accent-color, 7%);
+    color: st-darken(-st-accent-fg-color, 7%);
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 48bb9c0ca..2f21f9447 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -145,8 +145,8 @@
   border-radius: $base_border_radius * 2;
   &:hover,&:focus { background-color: $hover_bg_color; }
   &:active {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
index c1c0cfad8..648c375c4 100644
--- a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
@@ -19,7 +19,7 @@
 .candidate-box {
   padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
   border-radius: $base_border_radius;
-  &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+  &:selected { background-color: -st-accent-color; color: -st-accent-fg-color; }
   &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 39e63949f..489da5791 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
     // keys that may be latched: ctrl/alt/shift
     &:latched {
-      border-color: lighten($selected_bg_color, 5%);
-      background-color: $selected_bg_color;
+      border-color: st-lighten(-st-accent-color, 5%);
+      background-color: -st-accent-color;
     }
   }
 
   // enter key is suggested-action
   &.enter-key {
-    @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
-    &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
-    &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
+    @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
+    &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
+    &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
+    &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
     border-radius: $key_border_radius;
     color: $osd_fg_color;
   }
@@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
 .emoji-panel {
   .keyboard-key:latched {
-    border-color: lighten($selected_bg_color, 5%);
-    background-color: $selected_bg_color;
+    border-color: st-lighten(-st-accent-color, 5%);
+    background-color: -st-accent-color;
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
index 909fa6238..7e00a4623 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -128,8 +128,8 @@ $_gdm_dialog_width: 25em;
   color: darken($_gdm_fg,30%);
 
   &:focus, &:selected {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
   }
 }
 
@@ -175,9 +175,9 @@ $_gdm_dialog_width: 25em;
       &:logged-in {
         // color border for logged-in user
         .user-icon {
-          border-color: $selected_bg_color;
+          border-color: -st-accent-color;
           StIcon {
-            background-color: transparentize($selected_bg_color, .7);
+            background-color: st-transparentize(-st-accent-color, .7);
           }
         }
       }
@@ -238,7 +238,7 @@ $_gdm_dialog_width: 25em;
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($bg_color,0.7);
     &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
-    &:active { background-color: transparentize($selected_bg_color,0.5); }
+    &:active { background-color: st-transparentize(-st-accent-color,0.5); }
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index 7b8d90475..53cf74fff 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -59,8 +59,8 @@
 
   .shell-link {
     color: $link_color;
-    &:hover { color: lighten($link_color, 10%); }
-    &:active { color: darken($link_color, 10%); }
+    &:hover { color: st-lighten($link_color, 10%); }
+    &:active { color: st-darken($link_color, 10%); }
    }
 
   .actor-link {
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index f07ac0e2a..0fb1c8d2a 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -56,7 +56,7 @@
     border-style: solid;
 
     &:focus {
-      border-color: transparentize($selected_bg_color, 0.4);
+      border-color: st-transparentize(-st-accent-color, 0.4);
     }
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 35f9dc9a1..2f1bfc3a4 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -1,7 +1,7 @@
 // Rubberband for select-area screenshots
 .select-area-rubberband {
-  background-color: transparentize($selected_bg_color,0.7);
-  border: 1px solid $selected_bg_color;
+  background-color: st-transparentize(-st-accent-color,0.7);
+  border: 1px solid -st-accent-color;
 }
 
 // User icon
@@ -48,6 +48,6 @@
 
 /* Tiled window previews */
 .tile-preview {
-  background-color: transparentize($selected_bg_color,0.5);
-  border: 1px solid $selected_bg_color;
+  background-color: st-transparentize(-st-accent-color,0.5);
+  border: 1px solid -st-accent-color;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_osd.scss b/data/theme/gnome-shell-sass/widgets/_osd.scss
index 55cf44ac3..13a77bca3 100644
--- a/data/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/data/theme/gnome-shell-sass/widgets/_osd.scss
@@ -36,8 +36,8 @@ $osd_levelbar_height:6px;
 
 // Monitor number label
 .osd-monitor-label {
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
+  background-color: -st-accent-color;
+  color: -st-accent-fg-color;
   border-radius: $modal_radius;
   font-size: 3em;
   font-weight: bold;
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index c43081baf..71b1a1448 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -64,7 +64,7 @@
 
     &:checked {
       @extend %default_button;
-      border-color: $selected_borders_color;
+      border-color: $accent_borders_color;
     }
 
     &:ltr {
@@ -119,8 +119,8 @@
       background-color: transparentize($fg_color, 0.8);
 
       &.active {
-        background-color: $selected_bg_color;
-        color: $selected_fg_color;
+        background-color: -st-accent-color;
+        color: -st-accent-fg-color;
       }
 
       // draw hc outline
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 05ecd95c3..5d10b782f 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4;
 .screenshot-ui-window-selector-window {
   &:hover {
     .screenshot-ui-window-selector-window-border {
-      border-color: darken($selected_bg_color, 15%);
+      border-color: st-darken(-st-accent-color, 15%);
     }
   }
   &:checked {
     .screenshot-ui-window-selector-window-border {
-      border-color: $selected_bg_color;
-      background-color: transparentize($selected_bg_color, 0.8);
+      border-color: -st-accent-color;
+      background-color: st-transparentize(-st-accent-color, 0.8);
     }
 
     .screenshot-ui-window-selector-check {
-      color: $selected_fg_color;
-      background-color: $selected_bg_color;
+      color: -st-accent-fg-color;
+      background-color: -st-accent-color;
     }
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss
index 6ba104d6f..b75c6fb32 100644
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -9,7 +9,7 @@ $slider_size: $scalable_icon_size;
   -barlevel-height: 4px;
   -barlevel-background-color: transparentize($fg_color, 0.9);
   // fill style
-  -barlevel-active-background-color: $selected_bg_color;
+  -barlevel-active-background-color: -st-accent-color;
   // overfill style (red in this case)
   -barlevel-overdrive-color: $destructive_color;
   -barlevel-overdrive-separator-width:1px;
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index bf534b047..9ac607df4 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding;
 
 // Window cycler highlight
 .cycler-highlight {
-  border: 5px solid $selected_bg_color;
+  border: 5px solid -st-accent-color;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss
index 28416b5c8..ec79e1fe2 100644
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -38,12 +38,12 @@ $switch_handle_size: 20px;
   }
 
   &:checked {
-    background: $selected_bg_color;
-    color: $selected_fg_color;
+    background: -st-accent-color;
+    color: -st-accent-fg-color;
 
     &:hover {
-      background-color: lighten($selected_bg_color, 5%);
-      color: lighten($selected_fg_color, 5%);
+      background-color: st-lighten(-st-accent-color, 5%);
+      color: st-lighten(-st-accent-fg-color, 5%);
     }
 
     .handle {
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index e9b9ceacd..f7e7e4b22 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
@@ -27,6 +27,6 @@
 
 // selected indicator
 .workspace-thumbnail-indicator {
-  border: 3px solid $selected_bg_color;
+  border: 3px solid -st-accent-color;
   border-radius: $base_border_radius;
 }