2 files changed, 13 insertions, 2 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4766e4490..bafc82d7d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -72,6 +72,14 @@
   }
 }
 
+@mixin fill-svg-color ($color) {
+  ::ng-deep svg {
+    path {
+      fill: $color;
+    }
+  }
+}
+
 @mixin button-focus-visible-shadow($color) {
   &.focus-visible {
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 4ef8e17b9..91229cee0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,6 +14,7 @@ $grey-foreground-color: #585858;
 $grey-foreground-hover-color: #303030;
 
 $orange-color: #F1680D;
+$orange-color-lighter: rgb(233, 159, 110);
 $orange-hover-color: #F97D46;
 
 $cyan-color: hsl(187, 77%, 34%);
@@ -74,6 +75,7 @@ $activated-action-button-color: black;
 // to be warned of non-existing variables
 $variables: (
   --mainColor: var(--mainColor),
+  --mainColorLighter: var(--mainColorLighter),
   --mainHoverColor: var(--mainHoverColor),
   --mainBackgroundColor: var(--mainBackgroundColor),
   --mainForegroundColor: var(--mainForegroundColor),
@@ -112,8 +114,9 @@ $zindex: (
   tooltip      : 14000,
   loadbar      : 15000,
   modal        : 16000,
-  notification : 17000,
-  hotkeys      : 18000
+  help-popover : 17000,
+  notification : 18000,
+  hotkeys      : 19000
 );
 
 @function z($label) {