amis 1.4.1 → 1.4.2-beta.1

package/scss/components/form/_image.scss

@@ -10,9 +10,11 @@
     width: px2rem(120px);
     height: px2rem(120px);
     display: inline-flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     border: var(--borderWidth) solid var(--borderColor);
+    border-radius: var(--ImageControl-addBtn-borderRadius);
     cursor: pointer;
     margin-right: var(--gap-base);
 
@@ -29,9 +31,10 @@
     );
 
     > svg {
-      width: px2rem(40px);
-      height: px2rem(40px);
+      width: px2rem(24px);
+      height: px2rem(24px);
       top: 0;
+      margin-bottom: px2rem(8px);
     }
 
     &.is-disabled {
@@ -71,6 +74,7 @@
 
   &-item {
     border: var(--borderWidth) solid var(--borderColor);
+    border-radius: var(--ImageControl-addBtn-borderRadius);
     vertical-align: top;
     padding: var(--gap-xs);
     display: inline-block;
@@ -129,6 +133,7 @@
 
   &-progressValue {
     height: 5px;
+    border-radius: var(--ImageControl-progress-borderRadius);
     display: block;
     background: var(--info);
     min-width: 10%;

package/scss/components/form/_list.scss

@@ -22,6 +22,7 @@
     color: var(--ListControl-item-color);
     transition: var(--ListControl-item-transition);
     max-width: calc(#{px2rem(200px)} + 2 * var(--ListControl-item-paddingX));
+    border-radius: var(--ListControl-item-borderRadius);
 
     &:not(.is-disabled) {
       cursor: pointer;

package/scss/components/form/_location.scss

@@ -10,7 +10,7 @@
   white-space: nowrap;
   color: var(--DatePicker-color);
   background: var(--DatePicker-bg);
-  border-radius: var(--DatePicker-borderRadius);
+  border-radius: var(--LocationPicker-borderRadius);
 
   &:not(.is-disabled) {
     cursor: pointer;

package/scss/components/form/_text.scss

@@ -268,4 +268,17 @@
   .has-error--maxLength &-counter {
     color: var(--danger);
   }
+
+  // yunshe4.0
+  &-input {
+    &:hover {
+      border-color: var(--Form-input-onHover-borderColor);
+    }
+  }
+}
+
+.#{$ns}TextControl.is-disabled {
+  &-input input {
+    color: var(--Form-input-onDisabled-color);
+  }
 }

package/scss/components/form/_textarea.scss

@@ -18,12 +18,22 @@
     &::placeholder {
       color: var(--Form-input-placeholderColor);
     }
+
+    // yunshe4.0
+    &:hover {
+      border-color: var(--Form-input-onHover-borderColor);
+    }
   }
 
   & > textarea:focus,
   &.is-focused > textarea {
     border-color: var(--Form-input-onFocused-borderColor);
     box-shadow: var(--Form-input-boxShadow);
+
+    // yunshe4.0
+    &:hover {
+      border-color: var(--Form-input-onFocused-borderColor);
+    }
   }
 
   &.is-disabled > textarea,

package/scss/components/form/_transfer.scss

@@ -24,6 +24,7 @@
       )
       var(--gap-sm);
     flex-direction: row;
+    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
 
     &--light {
       background: transparent;
@@ -43,6 +44,7 @@
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
     display: flex;
     flex-direction: column;
+    border-radius: var(--borderRadius);
   }
 
   &-select > &-checkboxes,

package/scss/themes/_common.scss

@@ -42,6 +42,7 @@
 @import '../components/wizard';
 @import '../components/crud';
 @import '../components/table';
+@import '../components/column-toggler';
 @import '../components/list';
 @import '../components/cards';
 @import '../components/card';
@@ -107,5 +108,6 @@
 @import '../components/form/form';
 @import '../components/anchor-nav';
 @import '../components/markdown';
+@import '../components/link';
 
 @import '../utilities';

package/scss/themes/_cxd-colors.scss

@@ -0,0 +1,56 @@
+// yunshe4.0
+$B1: #e9f0fd;
+$B2: #d3e0fc;
+$B3: #a7c2f9;
+$B4: #7ba4f7;
+$B5: #4f86f4;
+$B6: #2468f2;
+$B7: #1c53c1;
+$B8: #153e91;
+$B9: #0e2960;
+$B10: #091a3c;
+
+$E1: #fdf0ee;
+$E2: #fce0dc;
+$E3: #fac1ba;
+$E4: #f8a397;
+$E5: #f68475;
+$E6: #e8684a;
+$E7: #c35142;
+$E8: #923d31;
+$E9: #612821;
+$E10: #3d1914;
+
+$S1: #e7f9f2;
+$S2: #cff2de;
+$S3: #a0e5bd;
+$S4: #71d99c;
+$S5: #42cc7b;
+$S6: #0bc286;
+$S7: #0f9948;
+$S8: #0b7336;
+$S9: #074c24;
+$S10: #004d25;
+
+$W1: #fff7e6;
+$W2: #ffefcc;
+$W3: #ffe099;
+$W4: #ffd066;
+$W5: #ffc133;
+$W6: #ffb200;
+$W7: #cc8e00;
+$W8: #996a00;
+$W9: #664700;
+$W10: #332300;
+
+$G1: #080e1a;
+$G2: #151a26;
+$G3: #2d323c;
+$G4: #5e626a;
+$G5: #83868c;
+$G6: #b4b6ba;
+$G7: #cecfd1;
+$G8: #dadbdd;
+$G9: #e6e6e8;
+$G10: #f2f2f4;
+$G11: #ffffff;

package/scss/themes/_cxd-variables.scss

@@ -1,21 +1,23 @@
 @import '../functions';
+@import './cxd-colors';
 
 $remFactor: 16px;
 
 $ns: 'cxd-';
 
-$info: #2468f2;
-$primary: #2468f2;
-$success: #5fb333;
-$warning: #f39000;
-$danger: #ea2e2e;
-$light: #eaf6fe;
+$info: $B6;
+$primary: $B6;
+$success: $S6;
+$warning: $W6;
+$danger: $E6;
+$light: #1ac5ff;
 $white: #fff;
+$secondary: $G6;
 
-$info-bg: #eaf6fe;
-$success-bg: #f1fdeb;
-$warning-bg: #fcf7f1;
-$danger-bg: #fff5f5;
+$info-bg: $B1;
+$success-bg: $S1;
+$warning-bg: $W1;
+$danger-bg: $E1;
 
 $text-color: #151a26;
 
@@ -26,14 +28,60 @@ $Wizard-steps-liAfterBorder: none !important;
 @import '../variables';
 @import '../properties';
 
+// yunshe4.0 font-size
+$T1: 10px;
+$T2: 12px;
+$T3: 14px;
+$T4: 16px;
+$T5: 18px;
+$T6: 20px;
+$T7: 22px;
+$T8: 24px;
+$T9: 28px;
+$T10: 30px;
+$T11: 32px;
+$T12: 34px;
+$T13: 36px;
+$T14: 40px;
+
+// yunshe4.0 font-weight
+$W1: 200;
+$W2: 400;
+$W3: 500;
+$W4: 600;
+
+// yunshe4.0 间距
+$H1: 4px;
+$H2: 8px;
+$H3: 16px;
+$H5: 24px;
+$H6: 32px;
+$H7: 40px;
+$H8: 48px;
+$H9: 56px;
+$H10: 80px;
+
+// yunshe4.0 border-radius
+$R1: 0;
+$R2: px2rem(2px);
+$R3: px2rem(4px);
+$R4: px2rem(6px);
+$R5: px2rem(8px);
+$R6: px2rem(10px);
+$R7: px2rem(16px);
+$R8: 50%;
+
+// yunshe4.0 box-shadow
+
 :root {
   --borderColor: #eceff8;
+  --borderRadius: #{$R3};
   --body-bg: #ffffff;
   --text-color: #151a26;
 
-  --text--muted-color: #b4b6ba;
+  --text--muted-color: #{$G6};
   --text--loud-color: #333;
-  --link-onHover-decoration: none;
+  --link-onHover-decoration: underline;
 
   --icon-color: #999;
   --icon-onHover-color: var(--primary);
@@ -70,16 +118,22 @@ $Wizard-steps-liAfterBorder: none !important;
   --Page-header-paddingY: #{px2rem(10px)};
 
   --Form-item-gap: var(--gap-base);
-  --Form-input-onFocused-bg: var(--white);
-  --Form-input-borderRadius: 0;
-  --Form-input-borderColor: #ccc;
-  --Form-input-onFocused-borderColor: var(--primary);
-  --Form-input-onError-borderColor: #d0021b;
+  --Form-input-bg: #{$G11};
+  --Form-input-color: #{$G2};
+  --Form-input-height: #{px2rem(32px)};
+  // --Form-input-lineHeight: #{px2rem(32px)};
+  --Form-input-borderColor: #{$G8};
+  --Form-input-borderRadius: #{$R3};
+  --Form-input-onHover-borderColor: #{$B6};
+  --Form-input-onFocused-bg: #{$G11};
+  --Form-input-onFocused-borderColor: #{$B7};
+  --Form-input-onError-borderColor: #{$E6};
+  --Form-input-onError-bg: #{$G11};
+  --Form-input-onDisabled-bg: #{$G10};
+  --Form-input-onDisabled-borderColor: #{$G8};
+  --Form-input-onDisabled-color: #{$G5};
   --Form-input-paddingX: #{px2rem(10px)};
   --Form-description-color: #999;
-  --Form-input-onError-bg: #fffbfb;
-  --Form-input-onDisabled-bg: #f5f5f5;
-  --Form-input-onDisabled-borderColor: #ebebeb;
   --Form--horizontal-label-whiteSpace: normal;
   --Form--horizontal-label-widthXs: #{px2rem(50px)};
   --Form--horizontal-label-widthSm: #{px2rem(70px)};
@@ -92,24 +146,25 @@ $Wizard-steps-liAfterBorder: none !important;
   --Form-input-addOnDividerBorderWidth: 0;
 
   --Form-select-borderWidth: #{px2rem(1px)};
-  --Form-select-borderRadius: 0;
-  --Form-select-borderColor: #ccc;
+  --Form-select-borderRadius: #{$R3};
+  --Form-select-borderColor: #{$G8};
   --Form-select-bg: var(--white);
   --Form-select-onHover-bg: var(--white);
   --Form-select-onHover-borderColor: var(--primary);
   --Form-select-placeholderColor: #999;
   --Form-select-color: #000;
-  --Form-select-caret-iconColor: #999;
-  --Form-select-caret-onHover-iconColor: var(--primary);
+  --Form-select-caret-iconColor: #{$G5};
+  --Form-select-caret-onHover-iconColor: #{$G5};
   --Form-select-caret-fontSize: #{px2rem(12px)};
   --Form-select-outer-borderWidth: 0;
   --Form-select-outer-top: #{px2rem(32px)};
   --Form-select-outer-boxShadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
-  --Form-select-menu-color: #333;
-  --Form-select-menu-onHover-color: #000;
-  --Form-select-menu-onHover-bg: #eaf6fe;
+  --Form-select-menu-color: #{$G2};
+  --Form-select-menu-onHover-color: #{$G2};
+  --Form-select-menu-onHover-bg: #{$B1};
+  --Form-select-menu-onActive-color: #{$B6};
   --Form-select-menu-height: #{px2rem(24px)};
-  --Form-select-popoverGap: #{px2rem(3px)};
+  --Form-select-popoverGap: #{$R3};
   --Form-select-search-height: #{px2rem(30px)};
   --Form-selectValue-color: var(--primary);
 
@@ -151,15 +206,21 @@ $Wizard-steps-liAfterBorder: none !important;
   --Radio-size: #{px2rem(16px)};
   --Radio-inner-size: #{px2rem(10px)};
 
-  --Switch-bgColor: #ccc;
-  --Switch-borderColor: #f0f0f0;
-  --Switch-onActive-bgColor: var(--primary);
-  --Switch-onDisabled-bgColor: #f5f5f5;
-  --Switch-onDisabled-color: #ccc;
-  --Switch-onDisabled-circle-BackgroundColor: #ccc;
+  --Switch-height: #{px2rem(20px)};
+  --Switch-width: #{px2rem(44px)};
+  --Switch-valueColor: #{$G11};
+  --Switch-bgColor: #{$G7};
+  --Switch-onActive-bgColor: #{$G6};
+  --Switch-onHover-bgColor: #{$G6};
+  --Switch-checked-bgColor: var(--primary);
+  --Switch-checked-onHover-bgColor: #{$B7};
+  --Switch-checked-onActive-bgColor: #{$B7};
+  --Switch-onDisabled-bgColor: #{$B2};
+  --Switch-onDisabled-color: #{$G11};
+  // --Switch-onDisabled-circle-BackgroundColor: #fff;
 
   --ColorPicker-borderWidth: #{px2rem(1px)};
-  --ColorPicker-borderRadius: 0;
+  --ColorPicker-borderRadius: #{$R3};
   --ColorPicker-bg: var(--white);
   --ColorPicker-onHover-bg: var(--white);
   --ColorPicker-onHover-borderColor: var(--primary);
@@ -168,8 +229,21 @@ $Wizard-steps-liAfterBorder: none !important;
   --ColorPicker-onDisabled-bg: #f5f5f5;
   --ColorPicker-onDisabled-color: #999;
 
+  --Collapse-border: #{px2rem(1px)} solid #{$G8};
+  --Collapse-border-color: #{$G8};
+  --Collapse-header-fontSize: #{$T3};
+  --Collapse-header-fontWeight: #{$W3};
+  --Collapse-header-padding: #{px2rem(16px)};
+  --Collapse-header-bg: #{$G10};
+  --Collapse-header-onHover-bg: #{$G9};
+  --Collapse-header-collapsed-borderBottom: none;
+  --Collapse-content-padding: #{px2rem(16px)};
+  --Collapse-content-color: #{$G4};
+  --Collapse-content-fontSize: #{$T2};
+  --Collapse-content-fontWeight: #{$W2};
+
   --DatePicker-borderWidth: #{px2rem(1px)};
-  --DatePicker-borderRadius: 0;
+  --DatePicker-borderRadius: #{$R3};
   --DatePicker-bg: var(--white);
   --DatePicker-onHover-bg: var(--white);
   --DatePicker-color: #000;
@@ -180,7 +254,10 @@ $Wizard-steps-liAfterBorder: none !important;
   --DatePicker-onHover-iconColor: var(--primary);
   --DatePicker-onHover-borderColor: var(--primary);
 
+  --LocationPicker-borderRadius: #{$R3};
+
   --Calendar-input-borderRadius: 0;
+  --Calendar-input-borderRadius: #{$R3};
   --Calendar-shortcuts-bg: #f5f5f5;
   --Calendar-shortcuts-height: #{px2rem(30px)};
 
@@ -188,42 +265,68 @@ $Wizard-steps-liAfterBorder: none !important;
   --Button-borderWidth: #{px2rem(1px)};
   --Button-boxShadow: none;
   --Button-onActive-boxShadow: none;
-  // --Button-borderRadius: 0;
-  --Button--lg-borderRadius: 0;
-  --Button--sm-borderRadius: 0;
 
-  --Button-paddingX: #{px2rem(10px)};
+  --Button-borderRadius: #{$R3};
+
+  --Button-paddingX: #{px2rem(12px)};
 
   --Button--lg-height: #{px2rem(40px)};
   --Button--lg-fontSize: #{px2rem(14px)};
-
-  --Button--default-bg: var(--white);
-  --Button--default-border: #cccccc;
-  // --Button--default-color: #000;
-  // --Button--default-onHover-bg: var(--white);
-  // --Button--default-onHover-border: var(--primary);
-  // --Button--default-onHover-color: var(--primary);
-  // --Button--default-onActive-bg: var(--white);
-  // --Button--default-onActive-border: var(--primary);
-  // --Button--default-onActive-color: var(--primary);
+  --Button--lg-lineHeight: 30 / 20;
+  --Button--lg-paddingX: #{px2rem(16px)};
+
+  --Button--default-bg: #{$G11};
+  --Button--default-border: #{$G8};
+  --Button--default-color: #{$G2};
+  --Button--default-onHover-bg: #{$G11};
+  --Button--default-onHover-border: var(--primary);
+  --Button--default-onHover-color: var(--primary);
+  --Button--default-onActive-bg: #{$G11};
+  --Button--default-onActive-border: #{$B7};
+  --Button--default-onActive-color: #{$B7};
+
+  --Button--emphasize-bg: #{$G11};
+  --Button--emphasize-color: var(--primary);
+  --Button--emphasize-onHover-bg: #{$G11};
+  --Button--emphasize-onHover-border: var(--primary);
+  --Button--emphasize-onHover-color: #{$B5};
+  --Button--emphasize-onActive-bg: #{$G11};
+  --Button--emphasize-onActive-border: #{$B7};
+  --Button--emphasize-onActive-color: #{$B7};
 
   --Button--primary-bg: var(--primary);
   --Button--primary-border: var(--primary);
-  // --Button--primary-onHover-bg: #4F86F4;
-  // --Button--primary-onHover-border: #4F86F4;
-  --Button--primary-onHover-color: var(--white);
-  // --Button--primary-onActive-bg: #1C53C1;
-  // --Button--primary-onActive-border: #1C53C1;
-  --Button--primary-onActive-color: var(--white);
+  --Button--primary-onHover-bg: #{$B5};
+  --Button--primary-onHover-border: #{$B5};
+  --Button--primary-onHover-color: #{$G11};
+  --Button--primary-onActive-bg: #{$B7};
+  --Button--primary-onActive-border: #{$B7};
+  --Button--primary-onActive-color: #{$G11};
+
+  --Button--light-border: var(--light);
+  --Button--light-color: var(--button-color);
+
+  --Button-onDisabled-borderColor: #{$G9};
+  --Button-onDisabled-opacity: 0.65;
+  --Button-onDisabled-bg: #{$G9};
+
+  // 这个颜色太奇怪了，先不用
+  // --Button--danger-bg: #{$E6};
+  // --Button--danger-onHover-bg: #{$E5};
+  // --Button--danger-onHover-border: #{$E5};
+  // --Button--danger-onActive-bg: #{$E7};
+  // --Button--danger-onActive-border: #{$E7};
 
   --Button--danger-bg: #ea2e2e;
   --Button--danger-onHover-bg: #f64545;
+  --Button--danger-onHover-border: #f64545;
   --Button--danger-onActive-bg: #d72b2b;
+  --Button--danger-onActive-border: #d72b2b;
 
   --ButtonGroup-divider-width: #{px2rem(1px)};
   --ButtonGroup-divider-color: #fff;
   --ButtonGroup--primary-isActive-color: var(--primary);
-  --ButtonGroup--primary-isActive-bg: var(--white);
+  --ButtonGroup--primary-isActive-bg: #{$G11};
 
   --Button--link-color: var(--primary);
   --Button--link-onHover-color: #209bfd;
@@ -263,6 +366,7 @@ $Wizard-steps-liAfterBorder: none !important;
   // listControl
   --ListControl-item-borderWidth: #{px2rem(1px)};
   --ListControl-item-borderColor: #ccc;
+  --ListControl-item-borderRadius: #{$R3};
   --ListControl-item-paddingX: #{px2rem(10px)};
   --ListControl-item-bg: var(--Button--default-bg);
   --ListControl-item-color: var(--Button--default-color);
@@ -271,21 +375,22 @@ $Wizard-steps-liAfterBorder: none !important;
   --ListControl-item-onHover-bg: var(--Button--default-onHover-bg);
   --ListControl-item-onHover-borderColor: var(--primary);
 
-  --ListControl-item-onActive-bg: var(--white);
-  --ListControl-item-onActive-onHover-bg: var(--white);
-  --ListControl-item-onActive-color: var(--primary);
-  --ListControl-item-onActive-borderColor: var(--primary);
-  --ListControl-item-onActive-before-bg: var(--primary);
-  --ListControl-item-onActive-after-borderColor: var(--white);
+  --ListControl-item-onActive-bg: #{$G11};
+  --ListControl-item-onActive-onHover-bg: #{$G11};
+  --ListControl-item-onActive-color: #{$B7};
+  --ListControl-item-onActive-borderColor: #{$B7};
+  --ListControl-item-onActive-before-bg: #{$B7};
+  --ListControl-item-onActive-after-borderColor: #{$G11};
 
   --ListControl-item-onDisabled-opacity: 1;
-  --ListControl-item-onDisabled-bg: #f5f5f5;
-  --ListControl-item-onDisabled-color: #999;
-  --ListControl-item-onDisabled-borderColor: #ebebeb;
+  --ListControl-item-onDisabled-bg: #{$G9};
+  --ListControl-item-onDisabled-color: #{$G6};
+  --ListControl-item-onDisabled-borderColor: #{$G9};
 
   // 图片上传
   --ImageControl-addBtn-bg: #fff;
   --ImageControl-addBtn-border: #dbdbdb;
+  --ImageControl-addBtn-borderRadius: #{$R3};
   --ImageControl-addBtn-color: #666;
   --ImageControl-addBtn-onHover-bg: var(--ImageControl-addBtn-bg);
   --ImageControl-addBtn-onHover-border: var(--primary);
@@ -296,23 +401,36 @@ $Wizard-steps-liAfterBorder: none !important;
   --ImageControl-addBtn-onDisabled-bg: #f5f5f5;
   --ImageControl-addBtn-onDisabled-border: #ebebeb;
   --ImageControl-addBtn-onDisabled-color: #ccc;
+  --ImageControl-progress-borderRadius: #{$R2};
+
+  // 文件上传
+  --FileControl-progress-borderRadius: #{$R2};
 
   // Modal
+  --Modal-title-fontSize: #{$T3};
+  --Modal-title-color: #{$W3};
+  --Modal-title-fontWeight: #{$G2};
   --Modal-overlay-bg: rgba(0, 0, 0, 0.7);
   --Modal-content-borderWidth: 0;
   --Modal-content-borderRadius: 0;
   --Modal-content-minHeight: #{px2rem(193px)};
-  --Modal-header-bg: #f6f7fb;
+  --Modal-header-bg: #fff;
+  --Modal-header-paddingY: 0;
+  --Modal-header-paddingX: 0;
   --Modal-title-color: #333;
   --Modal-body-paddingY: var(--gap-md);
   --Modal-body-paddingX: var(--gap-md);
   --Modal-body-borderTop: none;
-  --Modal-body-borderBottom: #{px2rem(1px)} solid #eceff8;
-  --Modal-footer-marginX: var(--gap-md);
-  --Modal-footer-padding: var(--gap-base) 0;
+  --Modal-body-borderBottom: none;
+  --Modal-footer-marginX: 0;
+  --Modal-footer-marginY: 0;
+  --Modal-footer-padding: 0;
 
   // Drawer
+  --Drawer-header-padding: #{px2rem(16px)} #{px2rem(24px)};
   --Drawer-widthBase: #{px2rem(400px)};
+  --Drawer-header-bg: #fff;
+  --Drawer-body-padding: #{px2rem(24px)};
 
   // Remark
   --Remark-icon-fontSize: #{px2rem(12px)};
@@ -361,7 +479,7 @@ $Wizard-steps-liAfterBorder: none !important;
   --Pagination-onActive-border: #{px2rem(1px)} solid var(--primary);
 
   // Panel
-  --Panel-borderRadius: 0;
+  --Panel-borderRadius: #{$R3};
   --Panel-fixedBottom-boxShadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.05);
   --Panel--default-bg: #f5f5f5;
 
@@ -380,24 +498,25 @@ $Wizard-steps-liAfterBorder: none !important;
   --TransferSelect-heading-borderBottom: 0;
 
   // Alert
-  --Alert-height: #{px2rem(30px)};
-  --Alert-fontSize: #{px2rem(12px)};
-  --Alert-borderRadius: 0;
+  --Alert-height: #{px2rem(40px)};
+  --Alert-paddingX: #{px2rem(16px)};
+  --Alert-fontSize: #{$T2};
+  --Alert-borderRadius: #{$R3};
   --Alert-marginBottom: var(--Alert-md);
 
-  --Alert--danger-color: #333;
+  --Alert--danger-color: #{$G4};
   --Alert--danger-bg: #{$danger-bg};
   --Alert--danger-borderColor: transparent;
 
-  --Alert--info-color: #333;
+  --Alert--info-color: #{$G4};
   --Alert--info-bg: #{$info-bg};
   --Alert--info-borderColor: transparent;
 
-  --Alert--success-color: #333;
+  --Alert--success-color: #{$G4};
   --Alert--success-bg: #{$success-bg};
   --Alert--success-borderColor: transparent;
 
-  --Alert--warning-color: #333;
+  --Alert--warning-color: #{$G4};
   --Alert--warning-bg: #{$warning-bg};
   --Alert--warning-borderColor: transparent;
 
@@ -412,22 +531,24 @@ $Wizard-steps-liAfterBorder: none !important;
 
   // Toast color
   --Toast-color: var(--white);
+  --Toast-borderRadius: #{$R3};
+  --Toast-paddingX: #{px2rem(16px)};
 
-  --Toast--danger-color: var(--danger);
-  --Toast--danger-bgColor: #{$danger-bg};
-  --Toast--danger-borderColor: var(--danger);
+  --Toast--danger-color: #{$G2};
+  --Toast--danger-bgColor: #{$G11};
+  --Toast--danger-borderColor: #{$G11};
 
-  --Toast--info-color: var(--info);
-  --Toast--info-bgColor: #{$info-bg};
-  --Toast--info-borderColor: var(--info);
+  --Toast--info-color: #{$G2};
+  --Toast--info-bgColor: #{$G11};
+  --Toast--info-borderColor: #{$G11};
 
-  --Toast--success-color: var(--success);
-  --Toast--success-bgColor: #{$success-bg};
-  --Toast--success-borderColor: var(--success);
+  --Toast--success-color: #{$G2};
+  --Toast--success-bgColor: #{$G11};
+  --Toast--success-borderColor: #{$G11};
 
-  --Toast--warning-color: var(--warning);
-  --Toast--warning-bgColor: #{$warning-bg};
-  --Toast--warning-borderColor: var(--warning);
+  --Toast--warning-color: #{$G2};
+  --Toast--warning-bgColor: #{$G11};
+  --Toast--warning-borderColor: #{$G11};
 
   --Toast-close-color: var(--icon-color);
   --Toast-close--onHover-color: var(--icon-onHover-color);
@@ -469,4 +590,8 @@ $Wizard-steps-liAfterBorder: none !important;
   --Transfer-title-bg: var(--Table-thead-bg);
 
   --Satus-icon-width: #{px2rem(14px)};
+
+  --Tree-itemHeight: #{px2rem(32px)};
+
+  --Progress-borderRadius: #{$R7};
 }