diff --git a/gnome-shell/src/gnome-shell-sass/_colors.scss b/gnome-shell/src/gnome-shell-sass/_colors.scss
index 92acd37b0f..1ddde81f4e 100644
--- a/gnome-shell/src/gnome-shell-sass/_colors.scss
+++ b/gnome-shell/src/gnome-shell-sass/_colors.scss
@@ -86,7 +86,7 @@ $hover_borders_color: lighten($borders_color, 5%);
 $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%));
+// accent colors
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
 
 @import '_yaru-colors.scss';
diff --git a/gnome-shell/src/gnome-shell-sass/_common.scss b/gnome-shell/src/gnome-shell-sass/_common.scss
index 99b3e16380..21652be3be 100644
--- a/gnome-shell/src/gnome-shell-sass/_common.scss
+++ b/gnome-shell/src/gnome-shell-sass/_common.scss
@@ -126,11 +126,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
diff --git a/gnome-shell/src/gnome-shell-sass/_default-colors.scss b/gnome-shell/src/gnome-shell-sass/_default-colors.scss
index 6c02d603bb..bf18541408 100644
--- a/gnome-shell/src/gnome-shell-sass/_default-colors.scss
+++ b/gnome-shell/src/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,7 +35,7 @@ $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_color: -st-accent-color;
 $focus_border_color: st-transparentize($focus_color, 0.5);
 
 // High Contrast overrides
diff --git a/gnome-shell/src/gnome-shell-sass/_drawing.scss b/gnome-shell/src/gnome-shell-sass/_drawing.scss
index 09f31aebfa..4e04b23dcf 100644
--- a/gnome-shell/src/gnome-shell-sass/_drawing.scss
+++ b/gnome-shell/src/gnome-shell-sass/_drawing.scss
@@ -372,8 +372,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/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss b/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss
index 8f08f188f0..463c8222a0 100644
--- a/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss
+++ b/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss
@@ -113,8 +113,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/gnome-shell/src/gnome-shell-sass/widgets/_a11y.scss b/gnome-shell/src/gnome-shell-sass/widgets/_a11y.scss
index 31b5c4b7e2..0bbf185b6a 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_a11y.scss
+++ b/gnome-shell/src/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/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss b/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss
index aaa3f1cd8f..87ae8bde40 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss
@@ -118,7 +118,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/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss
index ad4db615ad..6204c59092 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss
@@ -147,8 +147,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/gnome-shell/src/gnome-shell-sass/widgets/_ibus-popup.scss b/gnome-shell/src/gnome-shell-sass/widgets/_ibus-popup.scss
index c1c0cfad86..648c375c46 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/gnome-shell/src/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/gnome-shell/src/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell/src/gnome-shell-sass/widgets/_keyboard.scss
index 1073ceef0b..ced810d9a7 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_keyboard.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_keyboard.scss
@@ -67,8 +67,8 @@ $default_key_bg_color: $key_bg_color; // Yaru: Make keyboard buttons work on bot
 
     // 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;
     }
   }
 
@@ -147,8 +147,8 @@ $default_key_bg_color: $key_bg_color; // Yaru: Make keyboard buttons work on bot
 
 .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/gnome-shell/src/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell/src/gnome-shell-sass/widgets/_login-lock.scss
index 413a238acb..8a345e94c8 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_login-lock.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_login-lock.scss
@@ -156,8 +156,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;
   }
 }
 
@@ -202,9 +202,9 @@ $_gdm_dialog_width: 25em;
 
       &:logged-in {
         .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);
           }
         }
       }
@@ -340,7 +340,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/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss b/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss
index 407f972bb4..a8c33ca9b3 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss
@@ -53,6 +53,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/gnome-shell/src/gnome-shell-sass/widgets/_osd.scss b/gnome-shell/src/gnome-shell-sass/widgets/_osd.scss
index ddcb4168d2..08bceba191 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_osd.scss
+++ b/gnome-shell/src/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/gnome-shell/src/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell/src/gnome-shell-sass/widgets/_quick-settings.scss
index 27c8043213..d00e32c260 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_quick-settings.scss
@@ -120,8 +120,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/gnome-shell/src/gnome-shell-sass/widgets/_screenshot.scss b/gnome-shell/src/gnome-shell-sass/widgets/_screenshot.scss
index 4c41afd6ae..1d58559316 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_screenshot.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_screenshot.scss
@@ -170,18 +170,18 @@ $screenshot_ui_button_red: $red; // Yaru: Use our palette's color
 .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/gnome-shell/src/gnome-shell-sass/widgets/_switcher-popup.scss b/gnome-shell/src/gnome-shell-sass/widgets/_switcher-popup.scss
index 25705494b4..476e67d6a0 100644
--- a/gnome-shell/src/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/gnome-shell/src/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -77,5 +77,5 @@ $switcher_radius: $modal_radius + $switcher_padding;
 
 // Window cycler highlight
 .cycler-highlight {
-  border: 5px solid $selected_bg_color;
+  border: 5px solid -st-accent-color;
 }