refactor(popconfirm): [popconfirm] refactor theme vars (#2282)

* refactor(popconfirm): [popconfirm] refactor theme vars

* refactor(popconfirm): [popconfirm] refactor theme vars

Author: Youyou-smiles

packages/theme/src/popconfirm/index.less

@@ -17,7 +17,7 @@
 @popconfirm-prefix-cls: ~'@{css-prefix}popconfirm';
 
 .@{popconfirm-prefix-cls} {
-  .component-css-vars-popconfirm();
+  .inject-Popconfirm-vars();
 
   display: inline-block;
 
@@ -27,49 +27,49 @@
 }
 
 .@{popconfirm-prefix-cls}-popover {
-  .component-css-vars-popconfirm();
+  .inject-Popconfirm-vars();
 
   min-width: 168px;
   max-width: 90vw;
 
   &__container {
-    padding: var(--ti-popconfirm-popover-container-padding-vertical) 0;
-    font-size: var(--ti-popconfirm-popover-footer-font-size);
-    color: var(--ti-popconfirm-popover-footer-font-color);
+    padding: var(--tv-Popconfirm-popover-container-padding-vertical) 0;
+    font-size: var(--tv-Popconfirm-popover-footer-font-size);
+    color: var(--tv-Popconfirm-popover-footer-font-color);
   }
 
   &__header {
     display: flex;
     align-items: center;
-    margin-bottom: var(--ti-popconfirm-popover-margin-bottom);
+    margin-bottom: var(--tv-Popconfirm-popover-margin-bottom);
   }
 
   &__icon {
-    height: var(--ti-popconfirm-popover-icon-width);
-    width: var(--ti-popconfirm-popover-icon-width);
-    margin-right: var(--ti-popconfirm-popover-icon-margin-right);
-    margin-bottom: var(--ti-popconfirm-popover-icon-margin-bottom);
+    height: 20px;
+    width: 20px;
+    margin-right: var(--tv-Popconfirm-popover-icon-margin-right);
+    margin-bottom: var(--tv-Popconfirm-popover-icon-margin-bottom);
   }
 
   &__title {
-    font-size: var(--ti-popconfirm-popover-title-font-size);
-    font-weight: var(--ti-popconfirm-popover-title-font-weight);
-    line-height: var(--ti-popconfirm-popover-title-line-height);
+    font-size: var(--tv-Popconfirm-popover-title-font-size);
+    font-weight: var(--tv-Popconfirm-popover-title-font-weight);
+    line-height: var(--tv-Popconfirm-popover-title-line-height);
   }
 
   &__content {
-    color: var(--ti-popconfirm-popover-text-color);
-    line-height: var(--ti-popconfirm-popover-content-line-height);
+    color: var(--tv-Popconfirm-popover-text-color);
+    line-height: var(--tv-Popconfirm-popover-content-line-height);
   }
 
   &__footer {
     display: flex;
-    justify-content: var(--ti-popconfirm-popover-footer-justify-content);
-    margin-top: var(--ti-popconfirm-popover-footer-margin-top);
+    justify-content: right;
+    margin-top: var(--tv-Popconfirm-popover-footer-margin-top);
   }
 
   &__confirm-button {
-    margin-left: 8px;
+    margin-left: var(--tv-Popconfirm-popover-confirm-button-margin-left);
     width: 72px;
   }
 
@@ -78,18 +78,18 @@
   }
 
   &--info {
-    fill: #1476FF;
+    fill: var(--tv-Popconfirm-icon-info-fill);
   }
 
   &--error {
-    fill: #F23030;
+    fill: var(--tv-Popconfirm-icon-error-fill);
   }
 
   &--warning {
-    fill: #FF8800;
+    fill: var(--tv-Popconfirm-icon-warning-fill);
   }
 
   &--success {
-    fill: #5CB300;
+    fill: var(--tv-Popconfirm-icon-success-fill);
   }
 }

packages/theme/src/popconfirm/vars.less

@@ -10,30 +10,32 @@
 *
 */
 
-.component-css-vars-popconfirm() {
+.inject-Popconfirm-vars() {
   // 提示弹窗title字体行高
-  --ti-popconfirm-popover-title-line-height:var(--ti-common-line-height-2, 24px);
+  --tv-Popconfirm-popover-title-line-height: var(--tv-line-height-number);
   // 提示弹窗content字体行高
-  --ti-popconfirm-popover-content-line-height: var(--ti-common-line-height-1, 22px);
-  // 底部按钮flex排列方式
-  --ti-popconfirm-popover-footer-justify-content: right;
+  --tv-Popconfirm-popover-content-line-height: var(--tv-line-height-number);
   // 提示弹窗字体大小
-  --ti-popconfirm-popover-footer-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Popconfirm-popover-footer-font-size: var(--tv-font-size-md);
   // 提示弹窗字体颜色
-  --ti-popconfirm-popover-footer-font-color: #191919;
+  --tv-Popconfirm-popover-footer-font-color: var(--tv-color-text);
   // 提示弹窗容器垂直内边距
-  --ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base, 4px);
-  // 提示弹窗图标大小
-  --ti-popconfirm-popover-icon-width: var(--ti-common-size-5x, 20px);
-  --ti-popconfirm-popover-icon-margin-bottom: 2px;
-  // 提示弹窗图标上侧外边距
-  --ti-popconfirm-popover-icon-margin-right: var(--ti-common-space-base, 4px);
+  --tv-Popconfirm-popover-container-padding-vertical: var(--tv-space-base);
+  // 提示弹窗图标外边距
+  --tv-Popconfirm-popover-icon-margin-bottom: var(--tv-space-xs);
+  --tv-Popconfirm-popover-icon-margin-right: var(--tv-space-base);
   // 提示弹窗底部按钮容器上侧外边距
-  --ti-popconfirm-popover-footer-margin-top: var(--ti-common-space-4x, 16px);
-  // 标题字重、大小
-  --ti-popconfirm-popover-title-font-size: var(--ti-common-font-size-2, 16px);
-  --ti-popconfirm-popover-title-font-weight: var(--ti-common-font-weight-bold, 600);
-  --ti-popconfirm-popover-text-color: #191919;
+  --tv-Popconfirm-popover-footer-margin-top: var(--tv-space-xl);
+  // 标题字重、大小、颜色
+  --tv-Popconfirm-popover-title-font-size: var(--tv-icon-size);
+  --tv-Popconfirm-popover-title-font-weight: var(--tv-font-weight-bold);
+  --tv-Popconfirm-popover-text-color: var(--tv-color-text);
   // 标题距离内容下边距
-  --ti-popconfirm-popover-margin-bottom: var(--ti-common-space-2x, 8px);
+  --tv-Popconfirm-popover-margin-bottom: var(--tv-space-md);
+  --tv-Popconfirm-popover-confirm-button-margin-left: var(--tv-space-md);
+  // 图标色
+  --tv-Popconfirm-icon-info-fill: var(--tv-color-info-icon);
+  --tv-Popconfirm-icon-error-fill: var(--tv-color-error-icon);
+  --tv-Popconfirm-icon-warning-fill: var(--tv-color-warning-icon);
+  --tv-Popconfirm-icon-success-fill: var(--tv-color-success-icon);
 }