1 files changed, 35 insertions, 24 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 5584a6c353..4aff590de4 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -71,8 +71,23 @@
   --color-pink: #e03997;
   --color-brown: #a5673f;
   --color-grey: #888888;
-  --color-black: #1b1c1d;
   --color-gold: #a1882b;
+  /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
+  --color-red-light: #e45e5e;
+  --color-orange-light: #f59555;
+  --color-yellow-light: #fcce46;
+  --color-olive-light: #d3e942;
+  --color-green-light: #46de6a;
+  --color-teal-light: #08fff4;
+  --color-blue-light: #51a5e3;
+  --color-violet-light: #8b67d7;
+  --color-purple-light: #bb64d8;
+  --color-pink-light: #e86bb1;
+  --color-brown-light: #c58b66;
+  --color-grey-light: #a6a6a6;
+  --color-gold-light: #cfb34a;
+  /* other colors */
+  --color-black: #1b1c1d;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #fdb8c0;
   --color-diff-added-word-bg: #acf2bd;
@@ -887,19 +902,19 @@ a.ui.card:hover,
         color: inherit !important;
 
         &:hover {
-          color: #e67777 !important;
+          color: var(--color-red-light) !important;
         }
       }
     }
 
     &.blue {
-      color: var(--color-primary) !important;
+      color: var(--color-blue) !important;
 
       a {
         color: inherit !important;
 
         &:hover {
-          color: var(--color-primary-dark-1) !important;
+          color: var(--color-blue-light) !important;
         }
       }
     }
@@ -1078,11 +1093,11 @@ a.ui.card:hover,
     }
 
     &.blue {
-      background-color: var(--color-primary) !important;
+      background-color: var(--color-blue) !important;
     }
 
     &.black {
-      background-color: #444444;
+      background-color: var(--color-black) !important;
     }
 
     &.grey {
@@ -1133,11 +1148,11 @@ a.ui.card:hover,
     }
 
     &.blue {
-      border-color: var(--color-primary) !important;
+      border-color: var(--color-blue) !important;
     }
 
     &.black {
-      border-color: #444444;
+      border-color: var(--color-black) !important;
     }
 
     &.grey {
@@ -1748,59 +1763,55 @@ a.ui.label:hover {
   background: var(--color-hover);
 }
 
-.ui.blue.button,
-.ui.blue.buttons .button,
 .ui.primary.button,
 .ui.primary.buttons .button {
   background-color: var(--color-primary) !important;
 }
 
-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover,
 .ui.primary.button:hover,
 .ui.primary.buttons .button:hover {
   background-color: var(--color-primary-dark-2) !important;
 }
 
-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus,
 .ui.primary.button:focus,
 .ui.primary.buttons .button:focus {
   background-color: var(--color-primary-dark-3) !important;
 }
 
-.ui.basic.blue.button,
-.ui.basic.blue.buttons .button,
 .ui.basic.primary.button,
 .ui.basic.primary.buttons .button {
   box-shadow: inset 0 0 0 1px var(--color-primary) !important;
   color: #fff !important;
 }
 
-.ui.basic.blue.button:hover,
-.ui.basic.blue.buttons .button:hover,
 .ui.basic.primary.button:hover,
 .ui.basic.primary.buttons .button:hover {
   box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
 }
 
-.ui.basic.blue.button:focus,
-.ui.basic.blue.buttons .button:focus,
 .ui.basic.primary.button:focus,
 .ui.basic.primary.buttons .button:focus {
   box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
 }
 
-.ui.blue.label,
-.ui.blue.labels .label,
+.ui.basic.secondary.buttons .button,
+.ui.basic.secondary.button {
+  color: var(--color-secondary-dark-6) !important;
+}
+
+.ui.basic.secondary.buttons .button:hover,
+.ui.basic.secondary.button:hover,
+.ui.basic.secondary.buttons .button:active,
+.ui.basic.secondary.button:active {
+  color: var(--color-secondary-dark-8) !important;
+}
+
 .ui.primary.label,
 .ui.primary.labels .label {
   background-color: var(--color-primary) !important;
   border-color: var(--color-primary-dark-2) !important;
 }
 
-.ui.basic.labels .blue.label,
-.ui.ui.ui.basic.blue.label,
 .ui.basic.labels .primary.label,
 .ui.ui.ui.basic.primary.label {
   background: transparent !important;