refactor(theme): [file-upload] refactor file-upload theme vars (#2289)

Author: zzcr

examples/sites/demos/pc/app/file-upload/upload-file-list.spec.ts

@@ -15,7 +15,8 @@ test('文件列表', async ({ page }) => {
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
   await expect(width).toBeGreaterThanOrEqual(height)
-  await expect(height).toBeGreaterThanOrEqual(22, 0)
+  // 行高取1.5，计算结果是21
+  await expect(height).toBeGreaterThanOrEqual(21, 0)
   await expect(items).toHaveCount(2)
   await expect(items).toHaveText([/test1/, /test2/])
   await fileChooser.setFiles(currentPath)

packages/theme/src/file-upload/index.less

@@ -11,35 +11,43 @@
 */
 
 @import '../custom.less';
+@import './vars.less';
 
 @upload-thumb-prefix-cls: ~'@{css-prefix}upload--thumb';
 
 .@{upload-thumb-prefix-cls} {
+  .inject-FileUpload-vars();
+
   &__wrap {
     margin-top: 8px;
   }
 
   &__head {
     cursor: pointer;
     color: #343434;
-    font-size: var(--ti-common-font-size-1);
+    font-size: var(--tv-FileUpload-font-size);
+
     .thumb-icon {
       margin-right: 8px;
       fill: #999;
     }
+
     span {
       vertical-align: middle;
     }
   }
+
   &__body {
     .thumb-item {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+
       &:not(:last-child) {
         padding-bottom: 8px;
       }
     }
+
     .thumb-item-name {
       padding: 4px 8px;
       color: #333;

packages/theme/src/file-upload/vars.less

@@ -9,3 +9,7 @@
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 */
+
+.inject-FileUpload-vars() {
+  --tv-FileUpload-font-size: var(--tv-font-size-md);
+}

packages/theme/src/upload-dragger/index.less

@@ -18,15 +18,15 @@
 @upload-dragger-prefix-cls: ~'@{css-prefix}upload-dragger';
 
 .@{file-upload-prefix-cls} {
-  .component-css-vars-upload-dragger();
+  .inject-UploadDragger-vars();
 }
 
 .@{upload-dragger-prefix-cls} {
-  width: var(--ti-upload-dragger-width);
-  height: var(--ti-upload-dragger-height);
-  background-color: var(--ti-upload-dragger-bg-color);
-  border: 1px dashed var(--ti-upload-dragger-border-color);
-  border-radius: var(--ti-upload-dragger-border-radius);
+  width: var(--tv-UploadDragger-width);
+  height: var(--tv-UploadDragger-height);
+  background-color: var(--tv-UploadDragger-bg-color);
+  border: 1px dashed var(--tv-UploadDragger-border-color);
+  border-radius: var(--tv-UploadDragger-border-radius);
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
@@ -36,27 +36,27 @@
   align-items: center;
 
   &:hover {
-    border-color: var(--ti-upload-dragger-hover-text-color);
+    border-color: var(--tv-UploadDragger-hover-text-color);
   }
 
   &.is-dragover {
-    background-color: var(--ti-upload-dragger-dragover-bg-color, rgba(32, 159, 255, 0.06));
-    border: 2px dashed var(--ti-upload-dragger-hover-text-color);
+    background-color: var(--tv-UploadDragger-dragover-bg-color, rgba(32, 159, 255, 0.06));
+    border: 2px dashed var(--tv-UploadDragger-hover-text-color);
   }
 
   .icon-fileupload {
-    font-size: var(--ti-upload-dragger-icon-font-size);
-    fill: var(--ti-upload-dragger-icon-color);
+    font-size: var(--tv-UploadDragger-icon-font-size);
+    fill: var(--tv-UploadDragger-icon-color);
   }
 
   .@{upload-prefix-cls}__text {
-    color: var(--ti-upload-dragger-text-color);
-    font-size: var(--ti-upload-dragger-text-font-size);
+    color: var(--tv-UploadDragger-text-color);
+    font-size: var(--tv-UploadDragger-text-font-size);
     text-align: center;
     line-height: 1.5;
 
     em {
-      color: var(--ti-upload-dragger-hover-text-color);
+      color: var(--tv-UploadDragger-hover-text-color);
       font-style: normal;
     }
   }
@@ -66,7 +66,7 @@
   }
 
   & ~ .@{upload-prefix-cls}__files {
-    border-top: 1px solid var(--ti-upload-dragger-files-border-color);
+    border-top: 1px solid var(--tv-UploadDragger-files-border-color);
     margin-top: 7px;
     padding-top: 5px;
   }

packages/theme/src/upload-dragger/vars.less

@@ -10,29 +10,29 @@
 *
 */
 
-.component-css-vars-upload-dragger() {
+.inject-UploadDragger-vars() {
   // 拖拽上传框宽度
-  --ti-upload-dragger-width: 100px;
+  --tv-UploadDragger-width: 100px;
   // 拖拽上传框高度
-  --ti-upload-dragger-height: 100px;
+  --tv-UploadDragger-height: 100px;
   // 拖拽上传框背景色
-  --ti-upload-dragger-bg-color: var(--ti-common-color-bg-gray, #fafafa);
+  --tv-UploadDragger-bg-color: var(--tv-color-bg-gray-1);
   // 拖拽上传框边框色
-  --ti-upload-dragger-border-color: var(--ti-common-color-border, #999999);
+  --tv-UploadDragger-border-color: var(--tv-color-border);
   // 拖拽上传框圆角
-  --ti-upload-dragger-border-radius: var(--ti-common-border-radius-normal, 6px);
+  --tv-UploadDragger-border-radius: var(--tv-border-radius-md);
   // 拖拽上传框(链接文本|悬浮边框)色
-  --ti-upload-dragger-hover-text-color: var(--ti-common-color-primary-hover, #595959);
+  --tv-UploadDragger-hover-text-color: var(--tv-color-text-secondary);
   // 文件拖到框内上传框背景色
-  --ti-upload-dragger-dragover-bg-color: rgba(32, 159, 255, 0.06);
+  --tv-UploadDragger-dragover-bg-color: rgba(32, 159, 255, 0.06);
   // 拖拽上传框内图标色
-  --ti-upload-dragger-icon-color: #191919;
+  --tv-UploadDragger-icon-color: var(--tv-color-icon-control);
   // 拖拽上传框内图标尺寸
-  --ti-upload-dragger-icon-font-size: 24px;
+  --tv-UploadDragger-icon-font-size: 24px;
   // 拖拽上传框内文本色
-  --ti-upload-dragger-text-color: var(--ti-common-color-text-secondary, #595959);
+  --tv-UploadDragger-text-color: var(--tv-color-text-secondary);
   // 拖拽上传框内字号
-  --ti-upload-dragger-text-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-UploadDragger-text-font-size: var(--tv-font-size-md);
   // 拖拽上传框文件列表边框色(hide)
-  --ti-upload-dragger-files-border-color: #dcdfe6;
+  --tv-UploadDragger-files-border-color: #dcdfe6;
 }