refactor(theme): [qr-code,text-popup,watemark,rate] refactor some com…

examples/sites/demos/pc/app/text-popup/basic-usage.spec.ts

@@ -10,16 +10,16 @@ test('Textpopup 基本用法', async ({ page }) => {
 
   // 正常时只显示小输入框
   await expect(small).toBeVisible()
-  await expect(small).toHaveCSS('border-color', 'rgb(173, 176, 184)')
+  await expect(small).toHaveCSS('border-color', 'rgb(194, 194, 194)')
   await expect(larger).toHaveCSS('display', 'none')
   await small.hover()
-  await expect(small).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+  await expect(small).toHaveCSS('border-color', 'rgb(25, 25, 25)')
 
   // 点击输入框后，大输入框弹出，小输入框消失
   await small.click()
   await expect(larger).toBeVisible()
   await expect(small).toHaveCSS('display', 'none')
-  await expect(larger).toHaveCSS('border-color', 'rgb(94, 124, 224)')
+  await expect(larger).toHaveCSS('border-color', 'rgb(25, 25, 25)')
 
   // 点击非输入框区域，大输入框消失
   await preview.click()

packages/theme/src/base/vars.less

@@ -376,6 +376,7 @@
   --tv-font-weight-bold: 600;
 
   /** 4. 圆角变量 **/
+  --tv-border-radius-xs: 2px;
   --tv-border-radius-sm: 4px;
   --tv-border-radius-md: 6px;
   --tv-border-radius-lg: 8px;

packages/theme/src/bulletin-board/index.less

@@ -18,20 +18,19 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{bulletin-board-prefix-cls} {
-  .component-css-vars-bulletin-board();
+  .inject-BulletinBoard-vars();
 
   &__item {
-    margin-bottom: var(--ti-bulletin-board-item-margin-bottom);
+    margin-bottom: 24px;
 
     .@{bulletin-board-prefix-cls}__textTitle {
       display: block;
-      color: var(--ti-bulletin-board-item-title-text-color);
-      margin-bottom: var(--ti-bulletin-board-item-title-text-margin-bottom);
+      color: var(--tv-BulletinBoard-item-title-text-color);
+      margin-bottom: 8px;
       font-size: var(--ti-common-font-size-base);
       white-space: normal;
-      font-family: Helvetica, Arial, 'microsoft yahei';
       line-height: initial;
-      font-weight: var(--ti-bulletin-board-item-title-font-weight);
+      font-weight: var(--tv-BulletinBoard-item-title-font-weight);
 
       &,
       &:hover {
@@ -40,57 +39,56 @@
     }
 
     .@{bulletin-board-prefix-cls}__textDate {
-      color: var(--ti-bulletin-board-item-date-text-color);
-      font-size: var(--ti-bulletin-board-item-date-font-size);
+      color: var(--tv-BulletinBoard-item-date-text-color);
+      font-size: var(--tv-BulletinBoard-item-date-font-size);
     }
   }
 
   &__title {
-    font-size: var(--ti-bulletin-board-title-font-size);
-    padding: 12px 0px 8px 24px;
-    color: var(--ti-bulletin-board-title-text-color);
-    font-weight: var(--ti-bulletin-board-title-font-weight);
+    font-size: var(--tv-BulletinBoard-title-font-size);
+    padding: 12px 0 8px 24px;
+    color: var(--tv-BulletinBoard-title-text-color);
+    font-weight: var(--tv-BulletinBoard-title-font-weight);
   }
 
   &__more {
     text-align: right;
 
     & &-link {
-      color: var(--ti-bulletin-board-more-text-color);
-      font-size: var(--ti-bulletin-board-more-font-size);
+      color: var(--tv-BulletinBoard-more-text-color);
+      font-size: var(--tv-BulletinBoard-more-font-size);
       line-height: normal;
       display: inline-flex;
       justify-content: center;
       align-items: center;
 
       .@{svg-prefix-cls} {
-        fill: var(--ti-bulletin-board-more-text-color);
-        font-size: var(--ti-bulletin-board-more-icon-font-size);
+        fill: var(--tv-BulletinBoard-more-icon-color);
+        font-size: var(--tv-BulletinBoard-more-icon-font-size);
         margin-left: 4px;
       }
 
       &:hover {
         text-decoration: none;
 
         .@{svg-prefix-cls} {
-          fill: var(--ti-bulletin-board-more-hover-text-color);
+          fill: var(--tv-BulletinBoard-more-icon-color-hover);
         }
       }
     }
   }
 
   &__new {
-    background-color: var(--ti-bulletin-board-new-bg-color);
-    color: var(--ti-bulletin-board-new-text-color);
-    border-radius: var(--ti-bulletin-board-new-border-radius);
-    padding: 0 var(--ti-bulletin-board-new-padding-left);
-    margin-left: var(--ti-bulletin-board-new-margin-left);
+    background-color: var(--tv-BulletinBoard-new-bg-color);
+    color: var(--tv-BulletinBoard-new-text-color);
+    border-radius: var(--tv-BulletinBoard-new-border-radius);
+    padding: 0 4px;
+    margin-left: 6px;
     min-width: 30px;
     min-height: 16px;
     line-height: 16px;
-    font-size: var(--ti-bulletin-board-new-font-size);
+    font-size: var(--tv-BulletinBoard-new-font-size);
     display: inline-block;
-    font-family: var(--ti-bulletin-board-new-font-family);
     box-sizing: border-box;
     font-weight: 500;
     text-align: center;
@@ -143,13 +141,13 @@
     .@{tabs-prefix-cls}__item {
       line-height: 36px;
       height: 36px;
-      padding: 0 var(--ti-bulletin-board-tabs-item-text-padding-right);
+      padding: 0;
       box-sizing: border-box;
       display: inline-block;
       list-style: none;
       font-size: var(--ti-common-font-size-1);
       font-weight: 500;
-      color: var(--ti-bulletin-board-tabs-item-text-color);
+      color: var(--tv-BulletinBoard-tabs-item-text-color);
       position: relative;
 
       &:focus,
@@ -158,18 +156,16 @@
       }
 
       &:hover {
-        color: var(--ti-bulletin-board-tabs-item-hover-text-color);
         cursor: pointer;
-        font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
+        font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
       }
 
       &.is-active {
-        color: var(--ti-bulletin-board-tabs-item-hover-text-color);
-        font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
+        font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
       }
 
       &.is-disabled {
-        color: var(--ti-bulletin-board-tabs-item-disabled-text-color);
+        color: var(--tv-BulletinBoard-tabs-item-disabled-text-color);
         cursor: default;
       }
 
@@ -201,15 +197,15 @@
         }
       }
 
-      &::before {
-        bottom: 0px;
+      &:before {
+        bottom: 0;
         top: auto !important;
         left: auto !important;
       }
     }
 
     .@{tabs-prefix-cls}__content {
-      padding: 12px var(--ti-bulletin-board-contentr-padding-right) var(--ti-bulletin-board-contentr-padding-button);
+      padding: 12px 0 0;
     }
 
     &.@{tabs-prefix-cls}--card {
@@ -224,7 +220,7 @@
       }
 
       > .@{tabs-prefix-cls}__header {
-        border-bottom: 1px solid var(--ti-bulletin-board-tabs-header-border-color);
+        border-bottom: 1px solid var(--tv-BulletinBoard-tabs-header-border-color);
 
         .@{tabs-prefix-cls}__item {
           border-bottom: 1px solid transparent;
@@ -249,7 +245,7 @@
               content: '';
               width: 100%;
               height: 3px;
-              background: var(--ti-bulletin-board-tabs-item-hover-text-color);
+              background: var(--tv-BulletinBoard-tabs-item-bg-color);
               margin-left: -24px;
             }
           }

packages/theme/src/bulletin-board/vars.less

@@ -10,33 +10,47 @@
 *
 */
 
-.component-css-vars-bulletin-board() {
-  --ti-bulletin-board-title-font-size: var(--ti-common-font-size-3, 18px);
-  --ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7, bold);
-  --ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-bulletin-board-item-title-text-color: var(--ti-common-color-text-primary, #191919);
-  --ti-bulletin-board-item-title-text-margin-bottom: var(--ti-common-space-2x, 8px);
-  --ti-bulletin-board-tabs-item-hover-text-font-weight: var(--ti-common-font-weight-bold, 600);
-  --ti-bulletin-board-item-title-font-weight: var(--ti-common-font-weight-bold, 600);
-  --ti-bulletin-board-tabs-item-text-padding-right: var(--ti-common-space-0, 0px);
-  --ti-bulletin-board-contentr-padding-right: var(--ti-common-space-0, 0px);
-  --ti-bulletin-board-contentr-padding-button: var(--ti-common-space-0, 0px);
-  --ti-bulletin-board-new-padding-left: var(--ti-common-size-base, 4px);
-  --ti-bulletin-board-new-margin-left: var(--ti-common-space-6, 6px);
-  --ti-bulletin-board-new-font-family: PingFangSC ,PingFangSC-Regular;
-  --ti-bulletin-board-item-margin-bottom: var(--ti-common-space-6x, 24px);
-  --ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder, #808080);
-  --ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-bulletin-board-new-bg-color: var(--ti-common-color-error-border-secondary, #fce3e1);
-  --ti-bulletin-board-new-text-color: var(--ti-common-color-error-border, #f23030);
-  --ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-1, 2px);
-  --ti-bulletin-board-more-text-color: var(--ti-common-color-text-primary, #191919);
-  --ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
-  --ti-bulletin-board-more-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1, 14px);
-  --ti-bulletin-board-new-font-size: var(--ti-common-font-size-0, 12px);
-  --ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-bulletin-board-tabs-item-hover-text-color: var(--ti-common-color-text-primary, #191919);
-  --ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder, #808080);
-  --ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #999999);
+.inject-BulletinBoard-vars() {
+  // 标题字号
+  --tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
+  // 标题字重
+  --tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
+  // 标题文字颜色
+  --tv-BulletinBoard-title-text-color: var(--tv-color-text);
+  // 子项文字颜色
+  --tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
+  // tabs标题想文字hover字重
+  --tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
+  // 子项标题文字字重
+  --tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
+  // 子项日期文字颜色
+  --tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
+  // 子项日期文字尺寸
+  --tv-BulletinBoard-item-date-font-size: var(--tv-font-size-md);
+  // new标签背景颜色
+  --tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
+  // new标签文字颜色
+  --tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
+  // new标签边框圆角
+  --tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
+  // new标签文字大小
+  --tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
+  // 更多按钮文字颜色
+  --tv-BulletinBoard-more-text-color: var(--tv-color-text);
+  // 更多按钮图标颜色
+  --tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
+  // 更多按钮图标悬浮颜色
+  --tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
+  // 更多按钮文字尺寸
+  --tv-BulletinBoard-more-font-size: var(--tv-font-size-md);
+  // 更多按钮图标尺寸
+  --tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-md);
+  // tabs标签文字颜色
+  --tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
+  // tabs标签背景颜色
+  --tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
+  // tabs标签文字禁用颜色
+  --tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
+  // tabs标签头部边框颜色
+  --tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
 }

packages/theme/src/dept/index.less

@@ -19,17 +19,17 @@
 @col-prefix-cls: ~'@{css-prefix}col';
 
 .@{dept-prefix-cls} {
-  .component-css-vars-dept();
+  .inject-Dept-vars();
 
   &__search {
     margin-bottom: 12px;
   }
 
   &__text,
   &__label {
-    font-size: var(--ti-dept-label-font-size);
-    color: var(--ti-dept-label-text-color);
-    font-weight: var(--ti-dept-label-font-weight);
+    font-size: var(--tv-Dept-label-font-size);
+    color: var(--tv-Dept-label-text-color);
+    font-weight: var(--tv-Dept-label-font-weight);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -45,11 +45,11 @@
   }
 
   &__selected-info {
-    color: var(--ti-dept-selected-info-text-color);
-    font-size: var(--ti-dept-label-font-size);
-    background: var(--ti-dept-selected-info-bg-color);
+    color: var(--tv-Dept-selected-info-text-color);
+    font-size: var(--tv-Dept-label-font-size);
+    background: var(--tv-Dept-selected-info-bg-color);
     padding: 5px;
-    border-radius: var(--ti-dept-selected-info-border-radius);
+    border-radius: var(--tv-Dept-selected-info-border-radius);
   }
 
   &__item {
@@ -75,6 +75,6 @@
 
   .@{input-prefix-cls}__icon {
     vertical-align: middle;
-    fill: var(--ti-dept-selected-info-text-color);
+    fill: var(--tv-Dept-selected-info-text-color);
   }
 }

packages/theme/src/dept/vars.less

@@ -10,11 +10,11 @@
 *
 */
 
-.component-css-vars-dept() {
-  --ti-dept-label-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-dept-label-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-dept-label-font-weight: var(--ti-common-font-weight-7, bold);
-  --ti-dept-selected-info-text-color: var(--ti-base-color-brand-6, #191919);
-  --ti-dept-selected-info-bg-color: #f1f1f1;
-  --ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal, 6px);
+.inject-Dept-vars() {
+  --tv-Dept-label-font-size: var(--tv-font-size-md);
+  --tv-Dept-label-text-color: var(--tv-color-text);
+  --tv-Dept-label-font-weight: var(--tv-font-weight-bold);
+  --tv-Dept-selected-info-text-color: var(--tv-color-text);
+  --tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
+  --tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
 }

packages/theme/src/espace/index.less

@@ -17,7 +17,7 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{espace-prefix-cls} {
-  .component-css-vars-espace();
+  .inject-Espace-vars();
 
   .item-talk,
   .item-call,
@@ -26,13 +26,13 @@
     line-height: 1;
 
     .@{svg-prefix-cls} {
-      fill: var(--ti-espace-text-color);
-      font-size: var(--ti-espace-font-size);
+      fill: var(--tv-Espace-icon-color);
+      font-size: var(--tv-Espace-font-size);
     }
 
     &:hover {
       .@{svg-prefix-cls} {
-        fill: var(--ti-espace-hover-text-color);
+        fill: var(--tv-Espace-icon-color-hover);
       }
     }
   }

packages/theme/src/espace/vars.less

@@ -10,8 +10,8 @@
 *
 */
 
-.component-css-vars-espace() {
-  --ti-espace-font-size: 26px;
-  --ti-espace-text-color: var(--ti-base-color-brand-6, #191919);
-  --ti-espace-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
+.inject-Espace-vars() {
+  --tv-Espace-font-size: 26px;
+  --tv-Espace-icon-color: var(--tv-color-icon);
+  --tv-Espace-icon-color-hover: var(--tv-color-icon-hover);
 }