CN-1594 feat: 增加business的light和dark色

3 files changed, 70 insertions, 65 deletions

diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index e3a318a8..0a401d4a 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -140,84 +140,72 @@
         color: var(--el-text-color-regular);
         margin-right: 4px;
       }
-    }
-
-    .top-tool-btn:disabled {
-      cursor: not-allowed;
-      opacity: 0.66;
-
-      i {
-
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.66;
       }
-    }
-
-    .top-tool-btn.top-tool-btn--text {
-      padding: 0 8px;
-      width: unset;
-      color: var(--el-text-color-regular);
-    }
-
-    .top-tool-btn:hover:not(.cn-btn-disabled) {
-      border: 1px solid $border-color;
-      background-color: var(--cn-bg-color-light);
-    }
-
-    .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-      background-color: $--button-gray-active-background-color;
-      border: 1px solid $border-color;
-
-      i {
+      &.top-tool-btn--text {
+        padding: 0 8px;
+        width: unset;
         color: var(--el-text-color-regular);
       }
-    }
-
-    .top-tool-btn--create {
-      background-color: var(--el-color-business) !important;
-      border-color: #2E88A6 !important; // 涉及到表格样式，后续修改
-      color: $color-white;
-
-      i {
-        color: $color-white;
-      }
-    }
-
-    .top-tool-btn--create:hover {
-      background-color: #57B8D9 !important;
-      border-color: #2E88A6 !important;
-      color: $color-white;
-
-      i {
-        color: $color-white;
+      &:hover:not(.cn-btn-disabled) {
+        border: 1px solid $border-color;
+        background-color: var(--el-fill-color);
       }
-    }
+      &:focus:not(.cn-btn-disabled), &.is-focus {
+        background-color: var(--el-fill-color-darker);
+        border: 1px solid $border-color;
 
-    .top-tool-btn--create:focus {
-      background-color: #31A5CD !important;
-      border-color: #2E88A6 !important;
-      color: $color-white !important;
-
-      i {
-        color: $color-white !important;
+        i {
+          color: var(--el-text-color-regular);
+        }
       }
-    }
-
-    .top-tool-btn--create:disabled {
-      opacity: 0.66;
-      background-color: var(--el-color-business) !important;
-      border-color: #2E88A6 !important;
-      color: $color-white;
-
-      i {
+      &.top-tool-btn--create {
+        background-color: var(--el-color-business);
+        border-color: var(--el-color-business-dark-2); // 涉及到表格样式，后续修改
         color: $color-white;
+
+        i {
+          color: $color-white;
+        }
+        &:hover {
+          background-color: var(--el-color-business-light-2);
+          border-color: var(--el-color-business-dark-2);
+          color: $color-white;
+
+          i {
+            color: $color-white;
+          }
+        }
+        &:focus {
+          background-color: var(--el-color-business-dark-1);
+          border-color: var(--el-color-business-dark-2);
+          color: $color-white;
+
+          i {
+            color: $color-white;
+          }
+        }
+        &:disabled {
+          opacity: 0.66;
+          background-color: var(--el-color-business);
+          border-color: var(--el-color-business-dark-2);
+          color: $color-white;
+
+          i {
+            color: $color-white;
+          }
+        }
       }
     }
 
     .btn-customize {
-      color: #2E88A6;
+      color: var(--el-color-business-dark-2);
       font-size: 12px;
 
       .icon-gear {
-        color: #2E88A6;
+        color: var(--el-color-business-dark-2);
         width: 12px;
         height: 12px;
         margin-right: 2px;
diff --git a/src/assets/css/components/views/charts2/domainNameResolution.scss b/src/assets/css/components/views/charts2/domainNameResolution.scss
index 6a4872e3..689399f3 100644
--- a/src/assets/css/components/views/charts2/domainNameResolution.scss
+++ b/src/assets/css/components/views/charts2/domainNameResolution.scss
@@ -17,7 +17,6 @@
       align-items: center;
       margin-bottom: 15px;
       margin-right: 10px;
-      font-family: PingFangSC-Semibold;
       font-size: 14px;
       color: var(--el-text-color-regular);
       line-height: 20px;
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index ce8c86bb..bb842d80 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:math';
 
 @use './common.scss';
 /* 主题 */
@@ -50,6 +51,23 @@
 :root {
   // 为新增的业务色设置css变量
   @include var.set-css-var-value(('color', 'business'), map.get(css-var.$colors, 'business', 'base'));
+  // 生成 business 的 light 色值
+  @for $i from 1 through 9 {
+    @include var.set-css-var-value(('color', 'business', 'light', $i), mix(
+        css-var.$color-white,
+        map.get(css-var.$colors, 'business', 'base'),
+        math.percentage(math.div($i, 10))
+    ));
+  }
+  // 生成 business 的 dark2色值
+  @for $i from 1 through 2 {
+    @include var.set-css-var-value(('color', 'business', 'dark', $i), mix(
+        css-var.$color-black,
+        map.get(css-var.$colors, 'business', 'base'),
+        math.percentage(math.div($i, 10))
+    ));
+  }
+
   --cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
   --cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
   --cn-color-critical: #D84C4C; // critical 严重等级分布