Finish base colors and adjusted colors sections in less file

Author: rodolv-commons

src/components/MappingEditor.vue

@@ -783,7 +783,7 @@ export default {
   border-radius: 10px;
 }
 .mappingEditorPart-dropTarget > div {
-  border: 1px dashed @color-success-dark;
+  border: 1px dashed var(--color-success-dark);
   border-radius: 10px;
 }
 .mappingEditor-addButton {
@@ -906,7 +906,7 @@ export default {
   z-index: @zIndex-2;
 }
 .mappingEditor-mappingSaved {
-  color: @color-success-dark;
+  color: var(--color-success-dark);
 }
 .mappingEditor-mappingAlert {
   // Prevent other icons from moving by using min-width

src/style/colors.css

@@ -2,13 +2,13 @@
     /* Base colors */
 
     --color-primary: hsl(16.71, 80.6%, 38.4%); /* Hex is #b13f13 */ 
-    --color-secondary: hsl(0, 13.9%, 83.1%) /* Hex is #dacece */;
+    --color-secondary: hsl(0, 13.9%, 83.1%); /* Hex is #dacece */
     --color-black: #212121;
     /* --color-white: #f2f1ef */
 
-    --color-success: desaturate(#309000, 30%);
+    --color-success: hsl(100, 70%, 28.24%); /* desaturate of #309000 by 30%, second argument) */
     --color-warning: var(--color-secondary);
-    --color-danger: rgb(206, 18, 18);
+    --color-danger: hsl(0, 84%, 44%);
 
     /* Adjusted base colors */
     --color-primary-dark: hsl(16.7, 80.6%, 33.4%); /* darken decrease third 5%*/
@@ -20,6 +20,17 @@
     --color-secondary-dark-faded-70: hsla(0, 13.9%, 58.1%, 0.3); /* Opacity at 70%*/
     --color-secondary-dark-faded-35: hsla(0, 13.9%, 58.1%, 0.65); /* Opacity at 35%*/
 
+    --color-success-light: hsl(100, 70%, 43.24%); /* lighten increase third 15%*/
+    --color-success-lighter: hsl(100, 70%, 93.24%); /* lighten increase third 50%*/
+    --color-success-dark: hsl(100, 70%, 13.24%); /* darken decrease third 15%*/
+    --color-warning-light: hsl(0, 13.9%, 98.1%); /* lighten increase third 15%*/
+    --color-warning-dark: hsl(0, 13.9%, 68.1%); /* darken decrease third 15%*/
+    --color-warning-darker: hsl(0, 13.9%, 43.1%); /* darken decrease third 25%*/
+    --color-danger-light: hsl(0, 84%, 59%); /* lighten increase third 15%*/
+    --color-danger-lighter-30: hsl(0, 84%, 89%); /* lighten increase third 30%*/
+    --color-danger-lighter-15: hsl(0, 84%, 74%); /* lighten increase third 15%*/
+    --color-danger-dark: hsl(0, 84%, 29%);; /* darken decrease third 15%*/
+
     /* Text colors (monochrome) */
     --color-text-dark: var(--color-black);
     --color-text-grey: rgb(74, 74, 74);
@@ -35,7 +46,6 @@
     /* Button colors (monochrome) */
     --color-button-hover: var(--color-primary-light);
 
-
     /* Component specific colors */
     --color--conceptSearch-result-selected: var(--color-primary-dark);
 

src/style/main.less

@@ -290,45 +290,45 @@ h6 {
   background-color: var(--color-success);
 }
 .btn-success:hover {
-  background-color: @color-success-dark;
+  background-color: var(--color-success-dark);
 }
 .btn-warning {
   background-color: var(--color-warning);
 }
 .btn-warning:hover {
-  background-color: @color-warning-dark;
+  background-color: var(--color-warning-dark);
 }
 .btn-danger {
   background-color: var(--color-danger);
 }
 .btn-danger:hover {
-  background-color: @color-danger-dark;
+  background-color: var(--color-danger-dark);
 }
 // bootstrap text
 .text-success {
   color: var(--color-success) !important;
 }
 .text-warning {
-  color: @color-warning-dark !important;
+  color: var(--color-warning-dark) !important;
 }
 .text-danger {
   color: var(--color-danger) !important;
 }
 // bootstrap alerts
 .alert-success {
-  color: @color-success-dark !important;
-  background-color: lighten(@color-success-light, 50%) !important;
-  border-color: @color-success-light !important;
+  color: var(--color-success-dark) !important;
+  background-color: var(---color-success-lighter) !important;
+  border-color: var(--color-success-light) !important;
 }
 .alert-warning {
-  color: darken(@color-warning-dark, 25%) !important;
-  background-color: @color-warning-light !important;
+  color: var(--color-warning-darker) !important;
+  background-color: var(--color-warning-light) !important;
   border-color: var(--color-warning) !important;
 }
 .alert-danger {
-  color: @color-danger-dark !important;
-  background-color: lighten(@color-danger-light, 30%) !important;
-  border-color: lighten(@color-danger-light, 15%) !important;
+  color: var(--color-danger-dark) !important;
+  background-color: var(--color-danger-lighter-30) !important;
+  border-color: var(--color-danger-lighter-15) !important;
 }
 
 // Orders