@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/pagination/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @pagination-prefix-cls: ~'@{kd-prefix}-pagination';
 @pagination-action-prefix-cls: ~'@{pagination-prefix-cls}-action';
@@ -10,8 +11,8 @@
 
 .@{pagination-prefix-cls} {
   .reset-component;
-  color: @pagination-font-color;
-  font-size: @small-font-size;
+  color: @pagination-text-color;
+  font-size: @pagination-font-size;
 
   .@{pagination-prefix-cls}-total {
     display: inline-block;
@@ -31,22 +32,22 @@
       padding: 0;
       outline: none;
       text-align: center;
-      background: @white;
-      color: @primary-text-color;
-      font-size: @small-font-size;
-      border-radius: @radius-size;
-      border: 1px solid @strong-border-color;
-      transition: border-color @transition-duration;
+      background: @color-background;
+      color: @color-text-primary;
+      font-size: @pagination-font-size;
+      border-radius: @radius-border;
+      border: @pagination-border-size solid @color-border-strong;
+      transition: border-color @duration-promptly;
 
       &:hover,
       &:active,
       &:focus {
-        border-color: @pagination-hover-color;
+        border-color: @pagination-border-hover-color;
       }
 
       &:disabled {
-        color: @disabled-color;
-        border: 1px solid @strong-border-color;
+        color: @color-disabled;
+        border: @pagination-border-size solid @pagination-border-disabled-color;
         background: @pagination-button-disabled-background-color;
         cursor: not-allowed;
       }
@@ -63,14 +64,14 @@
       display: inline-block;
 
       &.bordered {
-        margin-right: @pagination-button-gap;
+        margin-right: calc(2 * @pagination-button-spacing);
 
         &:last-child {
           margin-right: 0;
         }
 
         button {
-          border: 1px solid @strong-border-color;
+          border: @pagination-border-size solid @pagination-border-color;
 
           &:disabled {
             background-color: @pagination-button-disabled-background-color;
@@ -84,17 +85,17 @@
         width: @pagination-size;
         height: @pagination-size;
         border: none;
-        background-color: @white;
-        border-radius: @radius-size;
+        background-color: @color-background;
+        border-radius: @radius-border;
         cursor: pointer;
         outline: none;
         vertical-align: middle;
-        transition: border-color @transition-duration;
+        transition: border-color @duration-promptly;
 
         &:hover,
         &:active {
           &:not(:disabled) {
-            border-color: @pagination-hover-color;
+            border-color: @pagination-border-hover-color;
           }
 
           i {
@@ -106,7 +107,7 @@
           cursor: not-allowed;
 
           i {
-            color: @pagination-button-disabled-color;
+            color: @pagination-icon-disabled-color;
           }
         }
 
@@ -121,8 +122,8 @@
           align-items: center;
           justify-content: center;
           font-size: @pagination-icon-size;
-          color: @pagination-button-color;
-          transition: color @transition-duration;
+          color: @pagination-icon-color;
+          transition: color @duration-promptly;
         }
       }
     }
@@ -141,10 +142,10 @@
       box-sizing: border-box;
       display: inline-block;
       line-height: @pagination-size;
-      font-size: @small-font-size;
-      color: @primary-text-color;
-      border-radius: @radius-size;
-      background: @white;
+      font-size: @pagination-font-size;
+      color: @color-text-primary;
+      border-radius: @radius-border;
+      background: @color-background;
       cursor: pointer;
       border: none;
       outline: none;
@@ -159,14 +160,14 @@
       &.disabled,
       &.disabled > i {
         cursor: not-allowed;
-        color: @disabled-border-color;
+        color: @color-border-disabled;
       }
 
       i {
         margin-left: 5px;
         line-height: @pagination-size;
         font-size: @pagination-icon-size;
-        color: @pagination-font-color;
+        color: @pagination-text-color;
       }
     }
   }
@@ -174,15 +175,15 @@
   // 简化版分页
   &.simple {
     display: inline-block;
-    border-radius: @radius-size;
-    border: 1px solid transparent;
+    border-radius: @radius-border;
+    border: @pagination-border-size solid transparent;
 
     &.bordered {
-      border-color: @strong-border-color;
-      transition: border-color @transition-duration;
+      border-color: @pagination-border-color;
+      transition: border-color @duration-promptly;
 
       &:active:not(.disabled) {
-        border-color: @pagination-hover-color;
+        border-color: @pagination-border-hover-color;
       }
 
       &.disabled,
@@ -192,14 +193,14 @@
     }
 
     &.disabled > .@{pagination-prefix-cls}-item {
-      color: @disabled-border-color;
+      color: @color-border-disabled;
     }
 
     .@{pagination-prefix-cls}-item {
       .reset-component;
       display: inline-block;
       vertical-align: middle;
-      color: @primary-text-color;
+      color: @color-text-primary;
       margin: 0 18px;
 
       &:first-child,
@@ -215,7 +216,7 @@
           margin: 0;
 
           &:disabled {
-            color: @disabled-color;
+            color: @color-disabled;
             cursor: not-allowed;
           }
         }
@@ -229,20 +230,20 @@
       button {
         box-sizing: border-box;
         position: relative;
-        width: @pagination-size - 2px;
-        height: @pagination-size - 2px;
+        width: calc(@pagination-size - 2px);
+        height: calc(@pagination-size - 2px);
         border: none;
-        background-color: @white;
-        border-radius: @radius-size;
+        background-color: @color-background;
+        border-radius: @radius-border;
         cursor: pointer;
         outline: none;
         vertical-align: middle;
-        transition: border-color @transition-duration;
+        transition: border-color @duration-promptly;
 
         &:hover,
         &:active {
           &:not(:disabled) {
-            border-color: @pagination-hover-color;
+            border-color: @pagination-border-hover-color
           }
 
           i {
@@ -254,7 +255,7 @@
           cursor: not-allowed;
 
           i {
-            color: @pagination-button-disabled-color;
+            color: @pagination-icon-disabled-color;
           }
         }
 
@@ -265,10 +266,10 @@
           bottom: 0;
           left: 0;
           margin: auto;
-          line-height: @pagination-size - 2px;
+          line-height: calc(@pagination-size - 2px);
           font-size: @pagination-icon-size;
-          color: @pagination-button-color;
-          transition: color @transition-duration;
+          color: @pagination-icon-color;
+          transition: color @duration-promptly;
         }
       }
     }
@@ -283,26 +284,15 @@
         .reset-component;
         position: relative;
         display: inline-block;
-        margin-right: @pagination-button-gap / 2;
+        margin-right: @pagination-button-spacing;
         vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
         }
 
-        &:hover,
-        &:active,
-        &.active {
-          button {
-            border-color: @theme-color;
-            &:disabled {
-              border-color: @strong-border-color;
-            }
-          }
-        }
-
         &.active > button:disabled {
-          background-color: @contain-bg;
+          background-color: @color-background-contain;
         }
 
         &:hover,
@@ -311,7 +301,7 @@
         &:first-child,
         &:last-child {
           button {
-            color: @theme-color;
+            color: @color-theme;
           }
         }
 
@@ -320,15 +310,15 @@
           button {
             width: @pagination-size;
             padding: 0;
-            border-radius: @radius-size;
-            border: 1px solid @strong-border-color;
+            border-radius: @radius-border;
+            border: @pagination-border-size solid @pagination-border-color;
 
             &:hover,
             &:active {
-              border-color: @theme-color;
+              border-color: @pagination-border-hover-color;
 
               &:disabled {
-                border-color: @strong-border-color;
+                border-color: @pagination-border-disabled-color
               }
             }
           }
@@ -339,17 +329,17 @@
           min-width: @pagination-size;
           height: @pagination-size;
           padding: 0 4px;
-          color: @primary-text-color;
-          font-size: @small-font-size;
+          color: @color-text-primary;
+          font-size: @pagination-font-size;
           cursor: pointer;
           outline: none;
           border: none;
-          background: @white;
-          transition: color @transition-duration, border-color @transition-duration;
+          background: @color-background;
+          transition: color @duration-promptly, border-color @duration-promptly;
 
           &:disabled {
             cursor: not-allowed;
-            color: @disabled-color;
+            color: @color-disabled;
           }
         }
       }
@@ -365,7 +355,7 @@
         .reset-component;
         position: relative;
         display: inline-block;
-        margin-right: @pagination-button-gap / 2;
+        margin-right: @pagination-button-spacing;
         vertical-align: middle;
 
         &:last-child {
@@ -376,15 +366,15 @@
         &:active,
         &.active {
           button {
-            border-color: @theme-color;
+            border-color: @pagination-border-hover-color;
             &:disabled {
-              border-color: @strong-border-color;
+              border-color: @pagination-border-disabled-color;
             }
           }
         }
 
         &.active > button:disabled {
-          background-color: @contain-bg;
+          background-color: @color-background-contain;
         }
 
         &:hover,
@@ -393,7 +383,7 @@
         &:first-child,
         &:last-child {
           button {
-            color: @theme-color;
+            color: @color-theme;
 
             &:not(:disabled) > .@{pagination-pages-prefix-cls}-jumper-icon {
               opacity: 1;
@@ -406,6 +396,7 @@
           button {
             width: @pagination-nicety-size;
             padding: 0;
+            line-height: calc(@pagination-nicety-size - 2px);
           }
         }
 
@@ -416,16 +407,16 @@
           padding: 0 6px;
           cursor: pointer;
           outline: none;
-          font-size: @small-font-size;
-          color: @primary-text-color;
-          border-radius: @radius-size;
-          border: 1px solid @strong-border-color;
-          background: @white;
-          transition: color @transition-duration, border-color @transition-duration, background-color @transition-duration;
+          font-size: @pagination-font-size;
+          color: @color-text-primary;
+          border-radius: @radius-border;
+          border: @pagination-border-size solid @pagination-border-color;
+          background: @color-background;
+          transition: color @duration-promptly, border-color @duration-promptly, background-color @duration-promptly;
 
           &:disabled {
             cursor: not-allowed;
-            color: @disabled-color;
+            color: @color-disabled;
           }
 
           .@{pagination-pages-prefix-cls}-jumper-icon {
@@ -435,10 +426,10 @@
             opacity: 0;
             width: 100%;
             height: 100%;
-            color: @theme-color;
+            color: @color-theme;
             line-height: @pagination-nicety-size;
-            background-color: @white;
-            transition: opacity @transition-duration;
+            background-color: @color-background;
+            transition: opacity @duration-promptly;
           }
         }
       }
@@ -456,22 +447,22 @@
         padding: 0;
         outline: none;
         text-align: center;
-        background: @white;
-        color: @primary-text-color;
-        font-size: @small-font-size;
-        border-radius: @radius-size;
-        border: 1px solid @strong-border-color;
-        transition: border-color @transition-duration;
+        background: @color-background;
+        color: @color-text-primary;
+        font-size: @pagination-font-size;
+        border-radius: @radius-border;
+        border: @pagination-border-size solid @color-border-strong;
+        transition: border-color @duration-promptly;
 
         &:hover,
         &:active,
         &:focus {
-          border-color: @pagination-hover-color;
+          border-color: @pagination-border-hover-color;
         }
 
         &:disabled {
-          color: @disabled-color;
-          border: 1px solid @strong-border-color;
+          color: @color-disabled;
+          border: @pagination-border-size solid @pagination-border-disabled-color;
           background: @pagination-button-disabled-background-color;
           cursor: not-allowed;
         }
@@ -481,30 +472,30 @@
         .reset-component;
         width: @pagination-nicety-size;
         height: @pagination-nicety-size;
-        margin-left: @pagination-button-gap / 2;
+        margin-left: @pagination-button-spacing;
         line-height: @pagination-nicety-size;
         vertical-align: top;
         cursor: pointer;
         outline: none;
-        color: @theme-color;
-        font-size: @small-font-size;
-        border-radius: @radius-size;
-        border: 1px solid @strong-border-color;
-        background: @white;
-        transition: border-color @transition-duration;
+        color: @color-theme;
+        font-size: @pagination-font-size;
+        border-radius: @radius-border;
+        border: @pagination-border-size solid @color-border-strong;
+        background: @color-background;
+        transition: border-color @duration-promptly;
 
         &:hover,
         &:active,
         &.active {
-          border-color: @theme-color;
+          border-color: @pagination-border-hover-color;
 
           &:disabled {
-            border-color: @strong-border-color;
+            border-color: @pagination-border-disabled-color;
           }
         }
 
         &:disabled {
-          color: @disabled-color;
+          color: @color-disabled;
           cursor: not-allowed;
         }
       }
@@ -517,7 +508,7 @@
       margin-left: 40px;
       outline: none;
       height: @pagination-nicety-size;
-      color: @primary-text-color;
+      color: @color-text-primary;
       vertical-align: middle;
 
       .@{pagination-options-prefix-cls}-size {
@@ -529,36 +520,36 @@
         margin-right: 8px;
         padding: 0 8px;
         line-height: @pagination-nicety-size;
-        font-size: @small-font-size;
-        color: @primary-text-color;
+        font-size: @pagination-font-size;
+        color: @color-text-primary;
         text-align: left;
-        border-radius: @radius-size;
-        border: 1px solid @strong-border-color;
-        background: @white;
+        border-radius: @radius-border;
+        border: @pagination-border-size solid @color-border-strong;
+        background: @color-background;
         cursor: pointer;
         outline: none;
-        transition: border-color @transition-duration;
+        transition: border-color @duration-promptly;
 
         &:hover,
         &:active {
-          border-color: @theme-color;
+          border-color: @pagination-border-hover-color;
 
           &.disabled {
-            border-color: @strong-border-color;
+            border-color: @color-border-strong;
           }
         }
 
         &.disabled,
         &.disabled > i {
           cursor: not-allowed;
-          color: @disabled-border-color;
+          color: @color-border-disabled;
         }
 
         i {
           position: absolute;
           top: 50%;
           right: 5px;
-          line-height: @pagination-size - 2px;
+          line-height: calc(@pagination-size - 2px);
           font-size: @pagination-icon-size;
           color: @pagination-hover-color;
           transform: translateY(-50%);
@@ -571,7 +562,7 @@
     }
   }
   &-dropdown-icon {
-    transition: transform @transition-duration;
+    transition: transform @duration-promptly;
     &-open {
       transform: rotate(180deg);
     }

package/lib/pagination/style/token.less

@@ -0,0 +1,28 @@
+@import '../../style/themes/token.less';
+
+@pagination-custom-prefix: ~'--@{kd-prefix}-c-pagination';
+
+// color
+@pagination-text-color: var(~'@{pagination-custom-prefix}-text-color', @color-text-secondary);
+@pagination-hover-color: var(~'@{pagination-custom-prefix}-color-text-hover', @color-theme);
+@pagination-disabled-color: var(~'@{pagination-custom-prefix}-color-text-disabled', @color-border-disabled);
+@pagination-icon-color: var(~'@{pagination-custom-prefix}-button-color', @color-text-secondary);
+@pagination-icon-disabled-color: var(~'@{pagination-custom-prefix}-button-color-disabled', @color-border-disabled);
+@pagination-border-color: var(~'@{pagination-custom-prefix}-color-border', @color-border-strong);
+@pagination-border-hover-color: var(~'@{pagination-custom-prefix}-color-border-hover', @color-theme);
+@pagination-border-disabled-color: var(~'@{pagination-custom-prefix}-color-border-disabled', @color-border-strong);
+@pagination-button-disabled-background-color: var(~'@{pagination-custom-prefix}-button-color-background-disabled', @color-background-contain-disabled);
+
+// sizing
+@pagination-size: var(~'@{pagination-custom-prefix}-sizing-square', 24px);
+@pagination-nicety-size: var(~'@{pagination-custom-prefix}-nicety-sizing-square', 30px);
+@pagination-border-size: var(~'@{pagination-custom-prefix}-sizing-border-width', 1px);
+
+// spacing
+@pagination-button-spacing: var(~'@{pagination-custom-prefix}-button-spacing', 4px);
+
+// font
+@pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
+@pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
+
+