Feat/upgrade style (#365)

* feat: upgrade vars

* feat: replace vars

* feat: remove variables

package.json

@@ -28,7 +28,7 @@
     "qrcode.vue": "^3.2.2",
     "qs": "^6.10.5",
     "tdesign-icons-vue-next": "^0.1.1",
-    "tdesign-vue-next": "^0.24.7",
+    "tdesign-vue-next": "^0.24.9",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-clipboard3": "^2.0.0",

src/components/result/index.vue

@@ -84,18 +84,16 @@ const dynamicComponent = computed(() => {
 
   &-title {
     font-style: normal;
-    font-weight: 500;
     margin-top: 8px;
     color: var(--td-text-color-primary);
-    font-size: @font-size-xl;
-    line-height: @line-height-xl;
+    font: var(--td-font-title-large);
+    font-weight: 500;
   }
 
   &-tip {
     margin: 8px 0 32px;
-    font-size: @font-size-base;
+    font: var(--td-font-body-medium);
     color: var(--td-text-color-secondary);
-    line-height: @line-height-base;
   }
 }
 </style>

src/components/thumbnail/index.vue

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

src/config/color.ts

@@ -27,17 +27,17 @@ export const defaultDarkColor = [
 
 export const COLOR_TOKEN: TColorSeries = {
   DEFAULT: {
-    '--td-brand-color': '#0052D9',
-    '--td-brand-color-1': '#e0ebff',
-    '--td-brand-color-2': '#c0d8ff',
-    '--td-brand-color-3': '#a1c4ff',
-    '--td-brand-color-4': '#81b1ff',
-    '--td-brand-color-5': '#5f9bff',
-    '--td-brand-color-6': '#3d87ff',
-    '--td-brand-color-7': '#176eff',
-    '--td-brand-color-8': '#0052D9',
-    '--td-brand-color-9': '#0048cd',
-    '--td-brand-color-10': '#0035b5',
+    '--td-brand-color': '#0052d9',
+    '--td-brand-color-1': '#f2f3ff',
+    '--td-brand-color-2': '#d9e1ff',
+    '--td-brand-color-3': '#b5c7ff',
+    '--td-brand-color-4': '#8eabff',
+    '--td-brand-color-5': '#618dff',
+    '--td-brand-color-6': '#366ef4',
+    '--td-brand-color-7': '#0052d9',
+    '--td-brand-color-8': '#003cab',
+    '--td-brand-color-9': '#002a7c',
+    '--td-brand-color-10': '#001a57',
   },
 
   CYAN: {

src/layouts/components/Header.vue

@@ -156,10 +156,6 @@ const navToHelper = () => {
 </script>
 <style lang="less" scoped>
 .@{starter-prefix}-header {
-  &-layout {
-    height: 64px;
-  }
-
   &-menu-fixed {
     position: fixed;
     top: 0;
@@ -180,7 +176,6 @@ const navToHelper = () => {
   &-logo-container {
     cursor: pointer;
     display: inline-flex;
-    height: 64px;
   }
 }
 .header-menu {

src/layouts/components/Notice.vue

@@ -136,7 +136,7 @@ const goDetail = () => {
     overflow: hidden;
     width: 100%;
     padding: 16px 24px;
-    border-radius: @border-radius;
+    border-radius: var(--td-radius-default);
     font-size: 14px;
     color: var(--td-text-color-primary);
     line-height: 22px;
@@ -147,7 +147,7 @@ const goDetail = () => {
       background: var(--td-bg-color-container-hover);
 
       .msg-content {
-        color: var(--td-brand-color-8);
+        color: var(--td-brand-color);
       }
 
       .t-list-item__action {

src/layouts/setting.vue

@@ -315,7 +315,7 @@ watchEffect(() => {
       display: inline-flex;
       max-height: 78px;
       padding: 8px;
-      border-radius: @border-radius;
+      border-radius: var(--td-radius-default);
       border: 2px solid #e3e6eb;
       > .t-radio-button__label {
         display: inline-flex;

src/pages/dashboard/base/index.ts

@@ -92,17 +92,14 @@ export function constructInitDataset({
   placeholderColor,
   borderColor,
 }: { dateTime: Array<string> } & TChartColor) {
-  // const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
   const divideNum = 10;
   const timeArray = [];
   const inArray = [];
   const outArray = [];
   for (let i = 0; i < divideNum; i++) {
-    // const [timeArray, inArray, outArray] = dataset;
     if (dateTime.length > 0) {
       const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
       const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
-      // console.log('dateAbsTime..', dateAbsTime, enhandTime);
       timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
     } else {
       timeArray.push(

src/pages/detail/base/index.less

@@ -23,11 +23,10 @@
 
     h1 {
       width: 200px;
-      font-weight: normal;
-      font-size: @font-size-base;
+      font: var(--td-font-body-medium);
       color: var(--td-text-color-secondary);
+      font-weight: normal;
       text-align: left;
-      line-height: 22px;
 
       @media (max-width: @screen-sm-max) {
         width: 100px;
@@ -49,7 +48,7 @@
       display: inline-block;
       width: 8px;
       height: 8px;
-      border-radius: @border-radius-50;
+      border-radius: var(--td-radius-circle);
       background: var(--td-success-color-5);
     }
 
@@ -74,7 +73,7 @@
 
     h1 {
       width: 84px;
-      font-family: PingFangSC-Regular;
+      font-family: var(--td-font-family);
       font-size: 14px;
       color: var(--td-text-color-secondary);
       text-align: left;
@@ -89,7 +88,7 @@
       display: inline-block;
       width: 8px;
       height: 8px;
-      border-radius: @border-radius-50;
+      border-radius: var(--td-radius-circle);
       background: var(--td-success-color-5);
     }
 
@@ -98,7 +97,7 @@
     }
 
     .blue {
-      color: var(--td-brand-color-8);
+      color: var(--td-brand-color);
     }
   }
 }

src/pages/detail/secondary/index.less

@@ -1,7 +1,7 @@
 .secondary-notification {
   background-color: var(--td-bg-color-container);
-  border-radius: @border-radius;
-  padding: @spacer-3 @spacer-4;
+  border-radius: var(--td-radius-default);
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
 
   .t-tabs__content {
     padding-top: 0;
@@ -34,7 +34,7 @@
     }
 
     .t-tag.t-size-s {
-      margin-right: @spacer-1;
+      margin-right: var(--td-comp-margin-s);
       margin-left: 0;
     }
   }
@@ -51,7 +51,7 @@
   }
 
   .unread {
-    color: var(--td-brand-color-8);
+    color: var(--td-brand-color);
   }
 
   .msg-action {

src/pages/list/components/CommonTable.vue

@@ -274,7 +274,7 @@ const getContainer = () => {
 .list-common-table {
   background-color: var(--td-bg-color-container);
   padding: 30px 32px;
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 
   .table-container {
     margin-top: 30px;

src/pages/list/tree/index.vue

@@ -45,7 +45,7 @@ const onInput = () => {
 <style lang="less" scoped>
 .table-tree-container {
   background-color: var(--td-bg-color-container);
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 
   .t-tree {
     margin-top: 24px;

src/pages/login/components/Header.vue

@@ -37,7 +37,6 @@ const navToHelper = () => {
 
 <style lang="less" scoped>
 .login-header {
-  height: 64px;
   padding: 0 24px;
   display: flex;
   justify-content: space-between;
@@ -47,7 +46,6 @@ const navToHelper = () => {
 
   .logo {
     width: 188px;
-    height: 64px;
   }
 
   .operations-container {

src/pages/login/index.less

@@ -152,7 +152,7 @@
 
   .tip {
     font-size: 14px;
-    color: var(--td-brand-color-8);
+    color: var(--td-brand-color);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -182,7 +182,7 @@
   .tip {
     float: right;
     font-size: 14px;
-    color: var(--td-brand-color-8);
+    color: var(--td-brand-color);
   }
 }
 

src/pages/user/index.less

@@ -10,7 +10,7 @@
   background: var(--td-bg-color-container);
   color: var(--td-text-color-primary);
   text-align: left;
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -35,7 +35,7 @@
   .contract {
     width: 340px;
     height: 88px;
-    border-radius: @border-radius;
+    border-radius: var(--td-radius-default);
     margin: 8px 0;
 
     &-title {
@@ -66,7 +66,7 @@
 .user-intro {
   padding: 32px 24px;
   background: var(--td-brand-color);
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
   color: var(--td-text-color-primary);
 
   .name {
@@ -107,7 +107,7 @@
 
 .product-container {
   margin-top: 16px;
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 
   .content {
     width: 100%;
@@ -122,7 +122,7 @@
 .content-container {
   margin-top: 16px;
   background: var(--td-bg-color-container);
-  border-radius: @border-radius;
+  border-radius: var(--td-radius-default);
 }
 
 .user-team {

src/style/layout.less

@@ -6,12 +6,8 @@
   width: fit-content;
 }
 
-.t-layout__header {
-  height: auto;
-}
-
 .t-button + .t-button {
-  margin-left: @spacer;
+  margin-left: var(--td-comp-margin-s);
 }
 
 .t-jumper {
@@ -30,7 +26,7 @@
 .left-operation-container,
 .operation-container {
   .t-button + .t-button {
-    margin-left: @spacer;
+    margin-left: var(--td-comp-margin-s);
   }
 }
 
@@ -80,7 +76,7 @@
   }
 
   &-content-layout {
-    padding: @spacer-3;
+    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
   }
 
   &-layout {
@@ -93,7 +89,7 @@
       z-index: 100;
     }
     &-tabs-nav + .@{starter-prefix}-content-layout {
-      padding-top: @spacer-3;
+      padding-top: var(--td-comp-paddingTB-xxl);
     }
 
     &::-webkit-scrollbar {
@@ -111,7 +107,7 @@
 
   &-footer-layout {
     padding: 0;
-    margin-bottom: @spacer-3;
+    margin-bottom: var(--td-comp-margin-xxl);
   }
 
   // slideBar
@@ -136,10 +132,10 @@
     min-height: 100%;
 
     &-mix {
-      top: 64px;
+      top: var(--td-comp-size-xxxl);
 
       &-fixed {
-        top: 64px;
+        top: var(--td-comp-size-xxxl);
         z-index: 0;
       }
     }
@@ -177,7 +173,7 @@
 
     &-logo-normal {
       color: var(--td-brand-color);
-      font-size: @font-size-l;
+      font: var(--td-font-body-large);
       transition: all 0.3s;
     }
   }

src/style/reset.less

@@ -1,16 +1,15 @@
 // 对部分样式进行重置
 body {
   color: var(--td-text-color-secondary);
-  font-family: -apple-system, BlinkMacSystemFont, @font-family;
-  font-size: @font-size-base;
-  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
+  font: var(--td-font-body-medium);
   -webkit-font-smoothing: antialiased;
   padding: 0;
   margin: 0;
 }
 
 pre {
-  font-family: @font-family;
+  font-family: var(--td-font-family);
 }
 
 ul,
@@ -63,9 +62,9 @@ a {
 }
 
 .t-button-link {
-  margin-right: @spacer-3;
+  margin-right: var(--td-comp-margin-xxl);
 
   &:last-child {
     margin-right: 0;
   }
-}
+}

src/style/theme/default.less

@@ -1,15 +1,15 @@
 :root,
 :root[theme-mode='light'] {
-  --td-brand-color-1: #e0ebff;
-  --td-brand-color-2: #c0d8ff;
-  --td-brand-color-3: #a1c4ff;
-  --td-brand-color-4: #81b1ff;
-  --td-brand-color-5: #5f9bff;
-  --td-brand-color-6: #3d87ff;
-  --td-brand-color-7: #176eff;
-  --td-brand-color-8: #0052d9;
-  --td-brand-color-9: #0048cd;
-  --td-brand-color-10: #0035b5;
+  --td-brand-color-1: #f2f3ff;
+  --td-brand-color-2: #d9e1ff;
+  --td-brand-color-3: #b5c7ff;
+  --td-brand-color-4: #8eabff;
+  --td-brand-color-5: #618dff;
+  --td-brand-color-6: #366ef4;
+  --td-brand-color-7: #0052d9;
+  --td-brand-color-8: #003cab;
+  --td-brand-color-9: #002a7c;
+  --td-brand-color-10: #001a57;
 }
 
 :root[theme-mode='dark'] {

src/style/variables.less

@@ -1,47 +1,7 @@
 /** 公共前缀 */
 @starter-prefix: tdesign-starter;
 
-// 组件库本身只有色彩相关的css token 扩展其他css token使用 待组件库扩充其他token后再做替换 这里使用less vars 避免两种css token让使用者混淆
-// tdesign 只保持一套token即可
-
-// Spacer
-@spacer: 8px;
-@spacer-s: calc(@spacer * 0.5); // 间距-4
-@spacer-l: calc(@spacer * 1.5); // 间距-12
-@spacer-1: @spacer; // 间距-8
-@spacer-2: calc(@spacer * 2); // 间距-16
-@spacer-3: calc(@spacer * 3); // 间距-24
-@spacer-4: calc(@spacer * 4); // 间距-32
-@spacer-5: calc(@spacer * 5); // 间距-大-40
-@spacer-6: calc(@spacer * 6); // 间距-大-48
-@spacer-7: calc(@spacer * 7); // 间距-大-48
-@spacer-8: calc(@spacer * 8); // 间距-大-48
-@spacer-9: calc(@spacer * 9); // 间距-大-48
-@spacer-10: calc(@spacer * 10); // 间距-大-80
-
-// Font
-@font-size: 10px;
-@font-size-s: calc(@font-size * 1.2); // 字号-五级字号
-@font-size-base: calc(@font-size * 1.4); // 字号-四级字号
-@font-size-l: calc(@font-size * 1.6); // 字号-三级字号
-@font-size-xl: calc(@font-size * 2); // 字号-二级字号
-@font-size-xxl: calc(@font-size * 3.6); // 字号-一级字号
-
-// Line Height
-@line-height: 1.5; // 行高-常规
-@line-height-s: 20px; // 行高-对应五级文字
-@line-height-base: 22px; // 行高-对应四级文字
-@line-height-l: 24px; // 行高-对应三级文字
-@line-height-xl: 28px; // 行高-对应二级文字
-@line-height-xxl: 44px; //行高-对应一级文字
-
-@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
-@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
-
-// Border Radius
-@border-radius: 3px; // 圆角-全局
-@border-radius-50: 50%; // 圆角-全圆角
-
+// 颜色、尺寸、阴影、圆角、字体 variables 请参考 https://tdesign.tencent.com/starter/docs/vue/design-token
 // 响应式断点
 @screen-sm: 768px;
 @screen-md: 992px;