Migrate palette to HSL

diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index dae8b21c7d8c13080dd5f0b38a54f6798b649b59..c4690ac9ea8774ef869b0543aed7fff8f5e9e2c4 100644 (file)
--- 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 a9475e484c3bc1fb323918e3015f03f9d79bf455..f76a822434092f032ecc86d4775eb3868ab9fcaa 100644 (file)
--- 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 0a500b6f36823024ded87bbea19408ee4150b4e8..5163ea0564cd0caa6e8065dd79175550a25ac27e 100644 (file)
--- 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 91229cee071c6d7dc462248289f3b133c2481ea8..3c9fa59398b6d58ceaf02af8fd8937575cf66e1c 100644 (file)
--- 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;