Migrate palette to HSL

4 files changed, 12 insertions, 11 deletions

diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index dae8b21c7..c4690ac9e 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -28,7 +28,7 @@
   }
 
   .warn {
-    color: $orange-color;
+    color: var(--mainColor);
   }
 
   .error {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a9475e484..f76a82243 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -23,12 +23,12 @@ body {
   /*** theme ***/
   // now beware node-sass requires interpolation
   // for css custom properties #{$var}
-  --mainColor: #{$orange-color};
-  --mainColorLighter: #{$orange-color-lighter};
-  --mainHoverColor: #{$orange-hover-color};
+  --mainColor: #{$main-color};
+  --mainColorLighter: #{$main-color-lighter};
+  --mainHoverColor: #{$main-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
-  --secondaryColor: #{$cyan-color};
+  --secondaryColor: #{$secondary-color};
 
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0a500b6f3..5163ea056 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -398,7 +398,7 @@
 
   &:checked + span {
     border-color: transparent;
-    background: $orange-color;
+    background: var(--mainColor);
     animation: jelly 0.6s ease;
 
     &:after {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 91229cee0..3c9fa5939 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -13,11 +13,12 @@ $grey-background-hover-color: #EFEFEF;
 $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%);
+// Palette
+$main-color: hsl(24, 90%, 50%);
+$main-hover-color: lighten($main-color, 5%);
+$main-color-lighter: lighten($main-color, 10%);
+$secondary-color: hsl(187, 77, 34);
+//
 
 $support-button: inherit;
 $support-button-heart: #e83e8c;