refactor(pager): [pager] refactor pager style

packages/theme/src/pager/index.less

@@ -25,7 +25,7 @@
   .component-css-vars-pager();
 
   text-align: left;
-  padding: var(--tv-Pager-selector-padding-y) 0;
+  padding: var(--tv-Pager-padding-y) 0;
   color: var(--tv-Pager-text-color);
 
   & &__group {
@@ -45,9 +45,8 @@
   }
 
   & &__total {
-    height: var(--tv-Pager-total-height);
-    line-height: var(--tv-Pager-total-line-height);
-    font-size: var(--tv-Pager-total-font-size);
+    height: var(--tv-Pager-height);
+    line-height: var(--tv-Pager-height);
 
     &-num {
       font-family: var(--tv-Pager-number-font-family);
@@ -236,7 +235,6 @@
     align-items: center;
     font-size: var(--tv-Pager-font-size);
     font-weight: bolder;
-    color: var(--ti-pagination-prev-next-color);
     outline: none;
     border: 1px solid var(--tv-Pager-page-item-border-color);
     background: transparent;
@@ -296,10 +294,10 @@
     &.@{popover-prefix-cls}.@{popper-prefix-cls} {
       border: 0;
       padding: 8px 0;
-      border-radius: var(--tv-Pager-pop-body-border-radius);
+      border-radius: var(--tv-Pager-input-border-radius);
 
       &[x-placement^='bottom'] {
-        margin-top: var(--tv-Pager-pop-body-margin-top);
+        margin-top: 4px;
       }
 
       &[x-placement^='top'] {
@@ -316,9 +314,9 @@
     &-poplist {
       .list-item {
         color: var(--tv-Pager-text-color);
-        min-height: var(--tv-Pager-poplist-item-min-height);
+        min-height: var(--tv-Pager-sizes-popup-item-height);
         padding: 0 16px;
-        line-height: var(--tv-Pager-poplist-item-min-height);
+        line-height: var(--tv-Pager-sizes-popup-item-height);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -339,7 +337,7 @@
           background: var(--tv-Pager-sizes-popup-bg-color-hover);
 
           &.is-selected {
-            color: var(--tv-Pager-poplist-item-selected-text-color);
+            color: var(--tv-Pager-sizes-popup-text-color-active);
             background: transparent;
             font-weight: bold;
 
@@ -401,7 +399,7 @@
     }
 
     &-btn {
-      padding: 0 var(--tv-Pager-input-btn-padding-x);
+      padding: 0 var(--tv-Pager-sizes-arrow-padding-x);
       height: var(--tv-Pager-height);
       line-height: calc(var(--tv-Pager-height) - 2px);
       position: relative;
@@ -446,18 +444,18 @@
 
     .@{pager-prefix-cls}__goto-text {
       font-size: var(--tv-Pager-font-size-xs);
-      line-height: var(----tv-Pager-input-height-xs);
+      line-height: var(--tv-Pager-input-height-xs);
     }
 
     .@{pager-prefix-cls}__goto {
       input {
-        height: var(----tv-Pager-input-height-xs);
-        line-height: var(----tv-Pager-input-height-xs);
+        height: var(--tv-Pager-input-height-xs);
+        line-height: var(--tv-Pager-input-height-xs);
       }
     }
 
     li {
-      min-width: var(--tv-Pager-mini-min-width);
+      min-width: var(--tv-Pager-min-width-xs);
       height: 24px;
       padding: 0 4px;
       line-height: 22px;

packages/theme/src/pager/vars.less

@@ -49,6 +49,8 @@
   --tv-Pager-bg-color-disabled: var(--tv-color-bg-disabled);
   // 分页高度
   --tv-Pager-height: var(--tv-size-height-md);
+  // 分页纵向内边距
+  --tv-Pager-padding-y: var(--tv-space-md);
   // -------分页页码相关样式-------
   // 分页页码选中时背景色
   --tv-Pager-page-item-bg-color-active: var(--tv-color-bg);
@@ -63,16 +65,26 @@
   // 分页页码项项圆角
   --tv-Pager-page-item-border-radius: var(--tv-border-radius-round);
   // 分页页码悬浮字重
-  --tv-Pager-page-item-font-weight-hover: var(--ti-common-font-weight-6);
+  --tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-medium);
   // 分页页码项最小宽度
   --tv-Pager-page-item-min-width: 32px;
+  // 小尺寸分页页码项最小宽度
+  --tv-Pager-min-width-xs: 24px;
   // 分页页码项水平内边距
   --tv-Pager-page-item-padding-x: var(--tv-space-md);
   // -------上一页、下一页相关样式-------
   // 分页前进和后退按钮悬浮背景色
   --tv-Pager-prev-next-bg-color-hover: transparent;
   // 自定义上下页按钮文本色
   --tv-Pager-custom-prev-next-text-color: var(--tv-color-text-link);
+  // 分页上一页左侧外边距
+  --tv-Pager-prev-margin-left: var(--tv-space-xl);
+  // 分页上一页右侧外边距
+  --tv-Pager-prev-margin-right: var(--tv-space-md);
+  // 分页下一页右侧外边距
+  --tv-Pager-next-margin-right: 0;
+  // 分页下一页左侧外边距
+  --tv-Pager-next-margin-left: var(--tv-space-md);
   // -------分页输入框相关样式-------
   // 分页输入框圆角
   --tv-Pager-input-border-radius: var(--tv-border-radius-md);
@@ -82,50 +94,16 @@
   --tv-Pager-input-height-xs: var(--tv-size-height-xs);
   // -------跳至相关样式------
   // 跳至左侧文字左侧内边距
-  --tv-Pager-goto-left-padding-left: var(--ti-common-space-4x);
-
-  // -----------分割线-----------
-
-  // 分页项悬浮字重
-  --tv-Pager-li-item-hover-font-weight: var(--ti-common-font-weight-6);
-
-  // 分页项默认悬浮背景色
+  --tv-Pager-goto-left-padding-left: var(--tv-space-xl);
+  // -------分页大小下拉面板相关样式
+  // 分页大小下拉图标水平内边距
+  --tv-Pager-sizes-arrow-padding-x: var(--tv-space-md);
+  // 分页大小数字右侧外边距
+  --tv-Pager-sizes-num-margin-right: var(--tv-space-sm);
+  // 分页大小选项悬浮背景色
   --tv-Pager-sizes-popup-bg-color-hover: var(--tv-color-bg-hover);
-
-  // 分页下拉框项选中字体颜色
-  --tv-Pager-poplist-item-selected-text-color: var(--ti-common-color-text-highlight);
-  // 分页下拉框圆角
-  --tv-Pager-pop-body-border-radius: var(--ti-common-border-radius-normal, 2px);
-  // 分页下拉框顶部外边距
-  --tv-Pager-pop-body-margin-top: var(--ti-common-space-base);
+  // 分页大小下拉框选项选中字体颜色
+  --tv-Pager-sizes-popup-text-color-active: var(--tv-color-text-active);
   // 分页下拉项最小高度
-  --tv-Pager-poplist-item-min-height: 32px;
-
-  // 分页上一页左侧外边距
-  --tv-Pager-prev-margin-left: var(--ti-common-space-4x);
-  // 分页上一页右侧外边距
-  --tv-Pager-prev-margin-right: var(--ti-common-space-2x);
-  // 分页下一页右侧外边距
-  --tv-Pager-next-margin-right: var(--ti-common-space-0);
-  // 分页下一页左侧外边距
-  --tv-Pager-next-margin-left: var(--ti-common-space-2x);
-  // 分页总条数字体大小
-  --tv-Pager-total-font-size: var(--ti-common-font-size-base);
-  // 分页总条数高度
-  --tv-Pager-total-height: var(--ti-common-line-height-2);
-  // 分页总条数行高
-  --tv-Pager-total-line-height: var(--ti-common-line-height-2);
-  // 分页总条数图标填充色
-  --tv-Pager-total-svg-fill-color: var(--ti-common-color-icon-normal);
-
-  // 分页选择框右侧下拉按钮水平内边距
-  --tv-Pager-input-btn-padding-x: var(--ti-common-size-2x);
-
-  // 分页下拉弹出框纵向内边距
-  --tv-Pager-selector-padding-y: var(--ti-common-space-2x);
-
-  // 小尺寸分页最小宽度
-  --tv-Pager-mini-min-width: var(--ti-common-size-width-mini);
-  // 分页大小数字右侧外边距
-  --tv-Pager-sizes-num-margin-right: var(--ti-common-dropdown-gap);
+  --tv-Pager-sizes-popup-item-height: 32px;
 }