feat(Tag): `Tag` colours follow the theme colours

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>
       )}

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;

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');