From 18a6a20590a2472680e6a36028fb02aed0690d31 Mon Sep 17 00:00:00 2001
From: haitaoo <haitao@sifou.com>
Date: Wed, 21 Jun 2023 15:53:10 +0800
Subject: [PATCH] feat(Tag): `Tag` colours follow the theme colours

---
 ui/src/components/CustomizeTheme/index.tsx | 10 ++++++++++
 ui/src/index.scss                          |  8 --------
 ui/src/utils/color.ts                      |  7 +++++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/CustomizeTheme/index.tsx b/ui/src/components/CustomizeTheme/index.tsx
index 2599f60d..a3b450f2 100644
--- a/ui/src/components/CustomizeTheme/index.tsx
+++ b/ui/src/components/CustomizeTheme/index.tsx
@@ -96,6 +96,16 @@ const Index: FC = () => {
               .link-primary:hover, .link-primary:focus {
                 color: ${shadeColor(primaryColor, 0.8).hex()}!important;
               }
+              .badge-tag:not(.badge-tag-reserved, .badge-tag-required) {
+                background-color: rgba(${tintColor(primaryColor, 0.2)
+                  .rgb()
+                  .array()
+                  .join(',')}, .5);
+                color: ${shadeColor(primaryColor, 0.6).hex()}
+              }
+              .badge-tag:not(.badge-tag-reserved, .badge-tag-required):hover {
+                 background-color: ${tintColor(primaryColor, 0.2).hex()};
+              }
             `}
         </style>
       )}
diff --git a/ui/src/index.scss b/ui/src/index.scss
index 9eced793..b3148310 100644
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -246,14 +246,6 @@ a {
   flex-grow: 1;
   height: 128px;
 }
-.badge-label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  padding: 1px 0.5rem 2px;
-  height: 24px;
-}
 
 .review-text-delete {
   color: #842029;
diff --git a/ui/src/utils/color.ts b/ui/src/utils/color.ts
index 06e177f3..bcc58732 100644
--- a/ui/src/utils/color.ts
+++ b/ui/src/utils/color.ts
@@ -13,6 +13,13 @@ import Color from 'color';
  * $blue-900: shade-color($blue, 80%) !default;
  */
 
+/**
+ *  The `weight` parameter in `Color`:
+ *    1. Must use decimals rather than percentages. eg: color.mix(Color("blue"), 0.6)
+ *    2. The value is the difference between `1 - $weight` in `bootstrap`.
+ *      eg: color.mix(Color("blue"), 0.6) === shade-color($blue, 40%) !default
+ */
+
 const WHITE = Color('#fff');
 const BLACK = Color('#000');