theme: Support accent colorwip/exalm/accent-color

22 files changed, 114 insertions, 116 deletions

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index d2f406b79..a935791fe 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -11,15 +11,13 @@ $base_color: if($variant == 'light', $light_1, $_dark_base_color);
 $bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%));
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
-$selected_fg_color: $light_1;
-$selected_bg_color: $blue_3;
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-darken(-st-accent-color, 20%));
 
 $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
 $outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
 
-$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
-$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
+$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
+$link_visited_color: if($variant == 'light', st-darken(-st-accent-color, 20%), st-lighten(-st-accent-color, 10%));
 
 $warning_color: if($variant == 'light', $yellow_5, #cd9309);
 $error_color: if($variant == 'light', $red_3, $red_4);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 3e793bde5..1b0214634 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -115,7 +115,7 @@ stage {
   border-radius: $base_border_radius;
   padding: $base_padding*1.5 $base_padding*1.5;
   color: $fg_color;
-  selection-background-color: transparentize($selected_bg_color, 0.7);
+  selection-background-color: st-transparentize(-st-accent-color, 0.7);
   selected-color: $fg_color;
 
   @include entry(normal);
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 80d59cb33..b9fe5aba7 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -25,7 +25,7 @@
 
 // entries
 
-@mixin entry($t, $fc:$selected_bg_color) {
+@mixin entry($t, $fc:-st-accent-color) {
 //
 // Entries drawing function
 //
@@ -47,7 +47,7 @@
   }
 
   @if $t==focus {
-    background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%);
+    background-color: st-mix(transparentize($fg_color, 0.8), -st-accent-color, 95%);
     box-shadow: inset 0 0 0 2px $fc;
     color: $fg_color;
     &:hover {}
@@ -82,40 +82,40 @@
   // normal key
   @if $t==normal {
     color: $tc;
-    background-color: lighten($c, 3%);
+    background-color: st-lighten($c, 3%);
   }
 
   // focused key
   @if $t==focus {
     color: $tc;
-    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    background-color: st-mix(lighten($c, 3%), -st-accent-color, 90%);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, 0.4);
     &:hover {
-      background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+      background-color: st-mix(lighten($c, 8%), -st-accent-color, 90%);
+      box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, 0.3);
     }
     &:active {
-      background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+      background-color: st-mix(lighten($c, 10%), -st-accent-color, 90%);
+      box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, 0.3);
     }
   }
 
   // hover key
   @else if $t==hover {
     color: $tc;
-    background-color: lighten($c, 7%);
+    background-color: st-lighten($c, 7%);
   }
 
   // active key
   @else if $t==active {
     color: $tc;
-    background-color: lighten($c, 10%);
+    background-color: st-lighten($c, 10%);
   }
 
   // checked key
   @else if $t==checked {
     color: $tc;
-    background-color: lighten($c, 15%);
+    background-color: st-lighten($c, 15%);
   }
 
   // insensitive key
@@ -147,7 +147,7 @@
 
 @mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) {
 
-  $button_bg_color: mix($tc, $c, $button_mix_factor);
+  $button_bg_color: st-mix($tc, $c, $button_mix_factor);
   transition-duration: 100ms;
 
   // normal button
@@ -165,7 +165,7 @@
   // hover button
   @else if $t==hover {
     color: $tc;
-    background-color: lighten($button_bg_color, 3%);
+    background-color: st-lighten($button_bg_color, 3%);
     @if $is_highcontrast {
       box-shadow: inset 0 0 0 1px $hc_inset_color !important;
     }
@@ -174,58 +174,58 @@
   // active button
   @else if $t==active {
     color: $tc;
-    background-color:  lighten($button_bg_color, 9%);
+    background-color: st-lighten($button_bg_color, 9%);
   }
 
   // checked button
   @else if $t==checked {
     color: $tc;
-    background-color: lighten($button_bg_color, 9%);
-    &:hover { background-color: lighten($button_bg_color, 12%);}
-    &:active { background-color: lighten($button_bg_color, 15%);}
+    background-color: st-lighten($button_bg_color, 9%);
+    &:hover { background-color: st-lighten($button_bg_color, 12%);}
+    &:active { background-color: st-lighten($button_bg_color, 15%);}
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
-    background-color: mix($button_bg_color, $selected_bg_color, 90%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
+    background-color: st-mix($button_bg_color, -st-accent-color, 90%);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, 0.4) !important;
     &:hover {
-      background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
+      background-color: st-mix(st-lighten($button_bg_color, 3%), -st-accent-color, 90%);
+      box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, 0.3) !important;
     }
     &:active {
-      background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
+      background-color: st-mix(st-lighten($button_bg_color, 6%), -st-accent-color, 90%);
+      box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, 0.3) !important;
     }
   }
 
   // insensitive button
   @else if $t==insensitive {
-    color: transparentize($tc, 0.5);
-    background-color: transparentize($tc, .95);
+    color: st-transparentize($tc, 0.5);
+    background-color: st-transparentize($tc, .95);
   }
 
   // default/suggested button
   @else if $t==default {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
 
     &:focus {
-      box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
+      box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-fg-color, .4) !important;
     }
     &:hover, &:focus {
-      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%);
     }
     &:active {
-      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%);
     }
     &:insensitive {
       @include button(insensitive);
-      background-color: transparentize($selected_bg_color, .5);
-      color: transparentize($selected_fg_color, .5);
+      background-color: st-transparentize(-st-accent-color, .5);
+      color: st-transparentize(-st-accent-fg-color, .5);
     }
   }
 
@@ -237,7 +237,7 @@
     &:insensitive {
       @include button(insensitive);
       background-color: transparent;
-      color: transparentize($selected_fg_color, .5);
+      color: st-transparentize($tc, .5);
     }
   }
 }
@@ -266,8 +266,8 @@
     &:hover { background-color: transparentize($color, .75);}
   }
   &:drop {
-    border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
-    background-color: transparentize($selected_bg_color, .8);
+    border: 2px solid st-transparentize(-st-accent-color, .2); //already 2px transparent so no jumping
+    background-color: st-transparentize(-st-accent-color, .8);
   }
 }
 
@@ -300,8 +300,8 @@
     &:hover .overview-icon { background-color: transparentize($color, .75);}
   }
   &:drop .overview-icon {
-    border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
-    background-color: transparentize($selected_bg_color, .8);
+    border: 2px solid st-transparentize(-st-accent-color, .2); //already 2px transparent so no jumping
+    background-color: st-transparentize(-st-accent-color, .8);
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 4d9aafdd7..39b0c3c72 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -9,14 +9,11 @@ $base_color: if($variant == 'light', white, black);
 $bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
-$selected_fg_color: white;
-$selected_bg_color: $blue_3;
-
-$selected_borders_color: darken($selected_bg_color, 20%);
+$accent_borders_color: st-darken(-st-accent-color, 20%);
 $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
 $outer_borders_color: $borders_color;
-$link_color: lighten($selected_bg_color,20%);
-$link_visited_color: lighten($selected_bg_color,10%);
+$link_color: st-lighten(-st-accent-color,20%);
+$link_visited_color: st-lighten(-st-accent-color,10%);
 
 $warning_color: if($variant == 'light', $yellow_5, #cd9309);
 $error_color: if($variant == 'light', $red_3, $red_4);
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 69ebb301a..a4e21d245 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 df91dce5f..bcaa3d0f4 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -77,16 +77,16 @@
 
     &:hover {background-color: $hover_bg_color;}
     &:focus {
-      background-color: mix($bg_color, $selected_bg_color, 80%);
-      color: $selected_fg_color;
-      box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+      background-color: st-mix($bg_color, -st-accent-color, 80%);
+      color: -st-accent-fg-color;
+      box-shadow:inset 0 0 0 2px st-transparentize(-st-accent-color, 0.4);
     }
 
     &:active,&:selected {
       color: $active_fg_color;
       background-color: $active_bg_color;
       &:focus {
-        background-color: mix($active_bg_color, $selected_bg_color, 80%);
+        background-color: st-mix($active_bg_color, -st-accent-color, 80%);
       }
     }
 
@@ -118,21 +118,21 @@
 
   // Today
   .calendar-today {
-    background-color: $selected_bg_color;
+    background-color: -st-accent-color;
     font-weight: 800;
-    color: $selected_fg_color !important;
+    color: -st-accent-fg-color !important;
 
     &:hover,&:focus {
-      background-color:lighten($selected_bg_color, 3%);
+      background-color: st-lighten(-st-accent-color, 3%);
       color: inherit;
     }
 
     &:active,&:selected {
-      background-color: $selected_bg_color;
+      background-color: -st-accent-color;
       color: inherit;
 
       &:hover,&:focus {
-        background-color:lighten($selected_bg_color, 3%);
+        background-color: st-lighten(-st-accent-color, 3%);
         color: inherit;
       }
     }
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 98b3b8ce5..e039e6ee7 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 8cbaa9521..f858ea536 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 1dc6b953c..05a8867c1 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -64,17 +64,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 keyboard_key(normal, $selected_bg_color, $selected_fg_color);
-    &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
-    &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
-    &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
+    @include keyboard_key(normal, -st-accent-color, -st-accent-fg-color);
+    &:hover { @include keyboard_key(hover, -st-accent-color, -st-accent-fg-color);}
+    &:active {@include keyboard_key(active, -st-accent-color, -st-accent-fg-color);}
+    &:checked {@include keyboard_key(checked, -st-accent-color, -st-accent-fg-color);}
     border-radius: $key_border_radius;
     color: $osd_fg_color;
   }
@@ -129,8 +129,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 cc67cb954..71b970623 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -75,8 +75,8 @@ $_gdm_dialog_width: 23em;
   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;
   }
 }
 
@@ -114,7 +114,7 @@ $_gdm_dialog_width: 23em;
       background-color: darken($_gdm_fg, 30%);
     }
 
-    &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
+    &:focus .login-dialog-timed-login-indicator { background-color: -st-accent-fg-color; }
   }
 
   &:expanded .login-dialog-user-list-item {
@@ -127,14 +127,14 @@ $_gdm_dialog_width: 23em;
     }
 
     &:selected {
-      background-color: $selected_bg_color;
-      color: $selected_fg_color;
-      &:hover { background-color: lighten($selected_bg_color,5%); }
+      background-color: -st-accent-color;
+      color: -st-accent-fg-color;
+      &:hover { background-color: st-lighten(-st-accent-color,5%); }
     }
 
     &:logged-in {
       .user-widget .user-icon {
-        border-color: $selected_bg_color;
+        border-color: -st-accent-color;
       }
     }
   }
@@ -193,7 +193,7 @@ $_gdm_dialog_width: 23em;
   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 adcc372d6..c6b3bf245 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -57,8 +57,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 d0e5d8551..1b65d43c6 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -55,7 +55,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 0a98d570b..e7fab02a1 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/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index 86480a874..2f339c378 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -29,8 +29,8 @@ $notification_banner_radius: $base_border_radius*1.5;
   width: 1.6em;
   -shell-counter-overlap-x: 3px;
   -shell-counter-overlap-y: 3px;
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
+  background-color: -st-accent-color;
+  color: -st-accent-fg-color;
   border: 2px solid $fg_color;
   box-shadow: 0 2px 2px rgba(0,0,0,0.5);
   border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index d6b4e5a3d..71cf10e3f 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -21,7 +21,7 @@
 }
 
 .quick-toggle {
-  &:checked { @include button(default, $c:$selected_bg_color); }
+  &:checked { @include button(default); }
 
   & > StBoxLayout { spacing: $base_padding*1.5; }
 
@@ -61,8 +61,8 @@
     border-width: 0;
 
     &:checked {
-      @include button(default, $c:$selected_bg_color);
-      border-color: $selected_borders_color;
+      @include button(default);
+      border-color: $accent_borders_color;
     }
 
     &:ltr {
@@ -108,7 +108,10 @@
       padding: 1.5 * $base_padding;
       background-color: transparentize($fg_color, 0.8);
 
-      &.active { background-color: $selected_bg_color;}
+      &.active {
+        color: -st-accent-fg-color;
+        background-color: -st-accent-color;
+      }
     }
 
     & .title {
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 150f273b4..f82b802b5 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -166,18 +166,18 @@ $screenshot_ui_button_red: $error_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/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss
index 500249aa5..755a6bc87 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: 16px;
   -barlevel-border-width: 2px; 
   -barlevel-border-color: transparent; // trough border color
   // fill style
-  -barlevel-active-background-color: $selected_bg_color;
+  -barlevel-active-background-color: -st-accent-color;
   -barlevel-active-border-color: transparent;
   // overfill style (red in this case)
   -barlevel-overdrive-color: $destructive_color;
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 5136c3cfe..b0e5c2e73 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -70,5 +70,5 @@ $switcher_padding: $base_padding*2;
 
 // 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 489cb0df8..87e1efda2 100644
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -33,10 +33,10 @@ $switch_icon_padding: 0.35em;
   }
 
   &:checked {
-    background: $selected_bg_color;
+    background: -st-accent-color;
 
     @if $is_highcontrast {
-      color: $selected_fg_color;
+      color: -st-accent-fg-color;
     }
 
     .handle {
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index ecbbc4113..b4beede1f 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;
 }