Fix/storage bar contrast

client/styles/abstracts/_functions.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 @function map-fetch($map, $keys) {
   $key: nth($keys, 1);
   $length: length($keys);

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-dark,
     search-background-color: $darker,
     search-clear-background-color: $medium-dark,
     search-hover-background-color: $p5js-pink,
@@ -301,7 +303,9 @@ $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-active-color: $yellow,
+    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');
   }
 }