@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/notification/style/index.less

@@ -1,11 +1,12 @@
 @import '../../style/themes/index';
+@import './token.less';
 
 @notice-prefix-cls: ~'@{kd-prefix}-notice';
 @notice-box: ~'@{notice-prefix-cls}-box';
 
 .@{notice-box}-topRight, .@{notice-box}-topLeft, .@{notice-box}-bottomLeft, .@{notice-box}-bottomRight {
   position: fixed;
-  z-index: @notice-zIndex;
+  z-index: @notice-z-index;
 }
 
 
@@ -17,8 +18,8 @@
   margin: 0 auto 16px;
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
   border-radius: 2px;
-  background-color: @white;
-  animation: kdNoticeEffect calc(@transition-duration - 0.2s) @ease-out forwards;
+  background-color: @notice-content-color-background;
+  animation: kdNoticeEffect @notice-motion-duration cubic-bezier(0,.4,.4,1) forwards;
 
   &-content {
     width: 100%;
@@ -29,7 +30,7 @@
       white-space: nowrap;
       padding: 0 20px;
       display: flex;
-      font-size: @font-size;
+      font-size: @notice-font-size;
       align-content: center;
       justify-content: space-between;
 
@@ -57,7 +58,7 @@
       }
     }
 
-    &-main {
+    &-description {
       height: 46px;
       padding: 10px 20px;
       font-size: 12px;
@@ -73,14 +74,14 @@
       align-items: center;
       padding: 0 20px 15px 20px;
       font-size: 12px;
-      color: @link-color;
+      color: @notice-footer-color;
       cursor: pointer;
 
       > div {
         margin-right: 10px;
 
         &:hover {
-          color: @link-color-hover;
+          color: @notice-footer-color-hover;
         }
       }
     }
@@ -88,18 +89,18 @@
 
   &-info {
     .@{notice-prefix-cls}-content-title {
-      color: @primary-text-color;
-      background: @white;
+      color: @notice-info-color;
+      background: @notice-info-header-color-background;
 
       &-left-icon {
-        color: @theme-color;
+        color: @notice-icon-color;
       }
 
       &-close {
-        color: @theme-color;
+        color: @notice-icon-color;
 
         &:hover {
-          color: @ongoing-border-color;
+          color: @notice-icon-color-hover;
         }
       }
     }
@@ -109,38 +110,38 @@
 
   &-primary {
     .@{notice-prefix-cls}-content-title {
-      color: @white;
-      background: @theme-color;
+      color: @notice-header-color;
+      background: @notice-header-color-background;
 
       &-close {
-        color: @white;
+        color: @notice-header-color;
 
         &:hover {
-          color: @ongoing-border-color;
+          color: @notice-icon-color-hover;
         }
       }
     }
   }
 
   &-leave {
-    animation: kdNoticeLeaveEffect calc(@transition-duration - 0.2s) @ease-out forwards;
+    animation: kdNoticeLeaveEffect @notice-motion-duration cubic-bezier(0,.4,.4,1) forwards;
   }
 
   &-leave-after {
     padding: 0;
     margin: 0;
     opacity: 0;
-    transition: all calc(@transition-duration - 0.2s) @ease-out;
+    transition: all @notice-motion-duration cubic-bezier(0,.4,.4,1);
 
     &.@{notice-prefix-cls}-success,
     &.@{notice-prefix-cls}-warning,
     &.@{notice-prefix-cls}-error {
-      transition: all calc(@transition-duration - 0.2s) @ease-out;
+      transition: all @notice-motion-duration cubic-bezier(0,.4,.4,1);
       border: none;
     }
 
     & div, & i {
-      transition: all calc(@transition-duration - 0.2s) @ease-out;
+      transition: all @notice-motion-duration cubic-bezier(0,.4,.4,1);
       height: 0;
       font-size: 0;
     }

package/es/notification/style/token.less

@@ -0,0 +1,28 @@
+@import "../../style/themes/token.less";
+
+@notice-prefix: '--@{kd-prefix}-c-notice';
+
+// shadow
+// color
+@notice-icon-color: var(~'@{notice-prefix}-icon-color', @color-theme);
+@notice-icon-color-hover: var(~'@{notice-prefix}-icon-color-hover', @color-border-ongoing);
+@notice-header-color: var(~'@{notice-prefix}-header-color', @color-white);
+@notice-header-color-background: var(~'@{notice-prefix}-header-color-background', @color-theme);
+@notice-content-color-background: var(~'@{notice-prefix}-content-color-background', @color-white);
+@notice-info-color: var(~'@{notice-prefix}-info-color', @color-text-primary);
+@notice-info-header-color-background: var(~'@{notice-prefix}-info-header-color-background', @color-white);
+@notice-footer-color: var(~'@{notice-prefix}-footer-color', @color-text-link);
+@notice-footer-color-hover: var(~'@{notice-prefix}-footer-color-hover', @color-text-link-hover);
+
+// sizing
+// spacing
+// motion
+@notice-motion-duration: var(~'@{notice-prefix}-motion-duration', @duration-quickly);
+
+// font
+@notice-font-size: var(~'@{notice-prefix}-title-font-size', @font-size-middle);
+
+// radius
+// line-height
+// z-index
+@notice-z-index: var(~'@{notice-prefix}-z-index', @z-index-apex);

package/es/pagination/pagination.js

@@ -244,7 +244,7 @@ var Pagination = function Pagination(props) {
     className: "".concat(prefixCls, "-selector")
   }, /*#__PURE__*/React.createElement(Dropdown, _extends({
     selectable: true,
-    defaultKey: size,
+    selectedKey: size,
     menu: sizeOptions,
     trigger: "click",
     disabled: disabled,
@@ -395,7 +395,7 @@ var Pagination = function Pagination(props) {
     size: /*#__PURE__*/React.createElement(Dropdown, _extends({
       selectable: true,
       trigger: "click",
-      defaultKey: size,
+      selectedKey: size,
       menu: sizeOptions,
       disabled: disabled,
       popperStyle: {