Replace blue button and label classes with primary (#19763)

* make blue really blue

* replace blue button and label classes with primary

* add --color-blue-dark

* add light color variants, tweak a few colors

* fix colors

* add comment

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

4 files changed, 39 insertions, 30 deletions

diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js
index f3b7a7668e..272ea45cdd 100644
--- a/web_src/js/features/comp/ReactionSelector.js
+++ b/web_src/js/features/comp/ReactionSelector.js
@@ -16,7 +16,7 @@ export function initCompReactionSelector(parent) {
     if ($(this).hasClass('disabled')) return;
 
     const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url');
-    const url = `${actionURL}/${$(this).hasClass('blue') ? 'unreact' : 'react'}`;
+    const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`;
     $.ajax({
       type: 'POST',
       url,
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js
index 2a66dbc6f1..f0ea18dd10 100644
--- a/web_src/js/features/repo-home.js
+++ b/web_src/js/features/repo-home.js
@@ -84,8 +84,6 @@ export function initRepoTopicBar() {
       transition: 'horizontal flip',
       duration: 200,
       variation: false,
-      blue: true,
-      basic: true,
     },
     className: {
       label: 'ui small label'
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;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f8a23e071a..f6f86e3260 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -301,7 +301,7 @@
         font-weight: normal;
       }
 
-      .ui.tiny.blue.buttons {
+      .ui.tiny.primary.buttons {
         @media @mediaSm {
           width: 100%;
         }
@@ -1168,7 +1168,7 @@
             border-color: var(--color-secondary-dark-1) !important;
           }
 
-          .ui.label.basic.blue {
+          .ui.label.basic.primary {
             background-color: var(--color-reaction-active-bg) !important;
             border-color: var(--color-primary-alpha-80) !important;
           }
@@ -2411,7 +2411,7 @@
       color: var(--color-primary) !important;
     }
 
-    .ui.label.basic.blue {
+    .ui.label.basic.primary {
       background-color: var(--color-reaction-active-bg) !important;
       border-color: var(--color-secondary) !important;
     }