refactor: 全面基于CSS Token改造 (#157)

* 去除冗余的less vars

* 替换less vars为css vars

* 统一css vars前缀

Author: kerwin612

src/App.vue

@@ -20,6 +20,6 @@ onMounted(() => {
 @import '@/style/variables.less';
 
 #nprogress .bar {
-  background: @brand-color !important;
+  background: var(--tdvns-brand-color) !important;
 }
 </style>

src/assets/assets-setting-auto.svg

@@ -21,7 +21,7 @@ const style = computed(() => {
   const { value } = props;
   const { colorList } = store;
   return {
-    background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
+    background: value !== 'dynamic' ? getBrandColor(value, colorList)['--td-brand-color'] : panelColor,
   };
 });
 </script>

src/assets/assets-setting-light.svg

@@ -108,11 +108,11 @@ const handleClickDelete = (product: CardProductType) => {
       margin-bottom: 8px;
       font-size: 16px;
       font-weight: 400;
-      color: @text-color-primary;
+      color: var(--tdvns-text-color-primary);
     }
 
     &--desc {
-      color: @text-color-secondary;
+      color: var(--tdvns-text-color-secondary);
       font-size: 12px;
       line-height: 20px;
       overflow: hidden;

src/components/color/index.vue

@@ -48,20 +48,20 @@ const dynamicComponent = computed(() => {
 
 .result {
   &-link {
-    color: @brand-color;
+    color: var(--tdvns-brand-color);
     text-decoration: none;
     cursor: pointer;
 
     &:hover {
-      color: @brand-color;
+      color: var(--tdvns-brand-color);
     }
 
     &:active {
-      color: @brand-color;
+      color: var(--tdvns-brand-color);
     }
 
     &--active {
-      color: @brand-color;
+      color: var(--tdvns-brand-color);
     }
 
     &:focus {
@@ -81,23 +81,23 @@ const dynamicComponent = computed(() => {
 
   &-bg-img {
     width: 200px;
-    color: @brand-color;
+    color: var(--tdvns-brand-color);
   }
 
   &-title {
     font-style: normal;
     font-weight: 500;
     margin-top: 8px;
-    color: @text-color-primary;
-    font-size: @font-size-xl;
-    line-height: @text-line-height-xl;
+    color: var(--tdvns-text-color-primary);
+    font-size: var(--tdvns-font-size-xl);
+    line-height: var(--tdvns-text-line-height-xl);
   }
 
   &-tip {
     margin: 8px 0 32px;
-    font-size: @font-size-base;
-    color: @text-color-secondary;
-    line-height: @text-line-height-base;
+    font-size: var(--tdvns-font-size-base);
+    color: var(--tdvns-text-color-secondary);
+    line-height: var(--tdvns-text-line-height-base);
   }
 }
 </style>

src/components/product-card/index.vue

@@ -32,7 +32,7 @@ const className = computed(() => {
   }
 
   &-circle {
-    border-radius: @border-radius-50;
+    border-radius: var(--tdvns-border-radius-50);
   }
 
   &-layout {

src/components/result/index.vue

@@ -52,25 +52,25 @@ const iconCls = computed(() => ['trend-icon-container']);
 .trend {
   &-container {
     &__up {
-      color: @error-color;
+      color: var(--tdvns-error-color);
       display: inline-flex;
       align-items: center;
       justify-content: center;
 
       .trend-icon-container {
-        background: @error-color-2;
+        background: var(--tdvns-error-color-2);
         margin-right: 8px;
       }
     }
 
     &__down {
-      color: @success-color;
+      color: var(--tdvns-success-color);
       display: inline-flex;
       align-items: center;
       justify-content: center;
 
       .trend-icon-container {
-        background: @success-color-2;
+        background: var(--tdvns-success-color-2);
         margin-right: 8px;
       }
     }
@@ -82,7 +82,7 @@ const iconCls = computed(() => ['trend-icon-container']);
       justify-content: center;
 
       .trend-icon-container {
-        background: @brand-color-5;
+        background: var(--tdvns-brand-color-5);
         margin-right: 8px;
       }
     }