Merge pull request #3863 from NishulDhakar/fix/storage-bar-contrast

Fix/storage bar contrast

Author: ksen0

client/styles/abstracts/_variables.scss

@@ -108,7 +108,8 @@ $themes: (
     preferences-warning-color: $p5js-pink,
     primary-text-color: $dark,
     progress-bar-active-color: $p5js-active-pink,
-    progress-bar-background-color: $middle-gray,
+    progress-bar-background-color: $light,
+    progress-bar-border-color: $middle-gray,
     search-background-color: $lightest,
     search-clear-background-color: $light,
     search-hover-background-color: $medium-dark,
@@ -205,7 +206,8 @@ $themes: (
     preferences-warning-color: $yellow,
     primary-text-color: $lightest,
     progress-bar-active-color: $p5js-active-pink,
-    progress-bar-background-color: $middle-gray,
+    progress-bar-background-color: $darker,
+    progress-bar-border-color: $middle-gray,
     search-background-color: $darker,
     search-clear-background-color: $medium-dark,
     search-hover-background-color: $p5js-pink,
@@ -300,8 +302,9 @@ $themes: (
     preferences-button-background-color: $medium-light,
     preferences-warning-color: $yellow,
     primary-text-color: $lightest,
-    progress-bar-active-color: $p5js-active-pink,
-    progress-bar-background-color: $middle-gray,
+    progress-bar-active-color: $yellow,
+    progress-bar-background-color: $darker,
+    progress-bar-border-color: $middle-light,
     search-background-color: $darker,
     search-clear-background-color: $medium-dark,
     search-hover-background-color: $yellow,

client/styles/components/_asset-size.scss

@@ -20,6 +20,7 @@
 
   @include themify() {
     background-color: getThemifyVariable('progress-bar-background-color');
+    border-color: getThemifyVariable('progress-bar-border-color');
   }
 }