amis-ui 2.9.0 → 3.0.0

package/scss/components/_condition-builder.scss

@@ -28,9 +28,9 @@
       width: px2rem(20px);
       height: px2rem(20px);
       border-radius: 50%;
-      background: #d4e5ff;
+      background: var(--conditionBuilder-toolbar-bg-color);
       text-align: center;
-      color: #0832a6;
+      color: var(--conditionBuilder-toolbar-color);
       cursor: pointer;
       transition: transform 0.3s ease;
 
@@ -39,26 +39,39 @@
       }
 
       &:hover {
-        background: #2468f2;
-        color: $white;
+        background: var(--conditionBuilder-toolbar-hover-bg-color);
+        color: var(--conditionBuilder-toolbar-hover-color);
       }
     }
 
     .#{$ns}Select {
-      font-size: px2rem(12px);
-      height: px2rem(28px);
-      width: px2rem(28px);
-      background: #d4e5ff;
+      font-size: var(--conditionBuilder-toolbar-fontSize);
+      height: var(--conditionBuilder-toolbar-height);
+      width: var(--conditionBuilder-toolbar-width);
+      background: var(--conditionBuilder-toolbar-bg-color);
       border: none;
-      color: #0832a6;
-      font-weight: 500;
+      color: var(--conditionBuilder-toolbar-color);
+      font-weight: var(--conditionBuilder-toolbar-fontWeight);
       padding: 0;
-      padding-left: px2rem(8px);
-      min-height: px2rem(28px);
+      text-align: center;
+      min-height: var(--conditionBuilder-toolbar-height);
+
+      &.is-focused {
+        color: var(--conditionBuilder-toolbar-color) !important;
+        font-size: var(--conditionBuilder-toolbar-fontSize);
+        font-weight: var(--conditionBuilder-toolbar-fontWeight);
+        background: var(--conditionBuilder-toolbar-bg-color) !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
 
       &:hover {
-        color: $white;
-        background: #2468f2;
+        color: var(--conditionBuilder-toolbar-hover-color) !important;
+        font-size: var(--conditionBuilder-toolbar-hover-fontSize);
+        font-weight: var(--conditionBuilder-toolbar-hover-fontWeight);
+        background: var(--conditionBuilder-toolbar-hover-bg-color) !important;
+        border: none !important;
+        box-shadow: none !important;
       }
 
       &-arrow {
@@ -83,8 +96,8 @@
       position: absolute;
       top: px2rem(5px);
       bottom: px2rem(5px);
-      width: 2px;
-      background-color: #d4e5ff;
+      width: var(--conditionBuilder-line-width);
+      background-color: var(--conditionBuilder-line-bg-color);
     }
   }
 
@@ -193,9 +206,10 @@
   &-placeholder {
     color: var(--text--muted-color);
     position: relative;
-    padding: 10px;
-    background: rgba(0, 0, 0, 0.03);
-    border-radius: 5px;
+    padding: var(--conditionBuilder-body-paddingTop)
+      var(--conditionBuilder-body-paddingRight)
+      var(--conditionBuilder-body-paddingBottom) px2rem(10px);
+    background: var(--conditionBuilder-body-bg-color);
     &.simple {
       margin-left: 0;
     }
@@ -276,10 +290,12 @@
     }
 
     &-item {
-      background-color: #f7f7f9;
+      background-color: var(--conditionBuilder-body-bg-color);
       width: 100%;
-      padding: px2rem(12px);
-      padding-left: px2rem(28px);
+      padding: var(--conditionBuilder-body-paddingTop)
+        var(--conditionBuilder-body-paddingRight)
+        var(--conditionBuilder-body-paddingBottom)
+        var(--conditionBuilder-body-paddingLeft);
       display: flex;
       flex-direction: row;
       align-items: center;

package/scss/components/_crud.scss

@@ -25,11 +25,26 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -44,6 +59,7 @@
   }
 
   &-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;

package/scss/components/_crud2.scss

@@ -21,11 +21,26 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -40,6 +55,7 @@
   }
 
   &-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;

package/scss/components/_drawer.scss

@@ -50,9 +50,10 @@
   }
 
   &-title {
-    font-size: var(--Drawer-title-fontSize);
-    font-weight: 500;
-    color: var(--Drawer-title-fontColor);
+    font-size: var(--drawer-header-fontSize);
+    font-weight: var(--drawer-header-fontWeight);
+    color: var(--drawer-header-color);
+    height: var(--drawer-header-height);
   }
 
   &-close {
@@ -63,9 +64,14 @@
 
     svg {
       margin-top: px2rem(2px);
-      width: var(--Drawer-close-size);
-      height: var(--Drawer-close-size);
+      width: var(--drawer-header-icon-size);
+      height: var(--drawer-header-icon-size);
       fill: var(--Drawer-close-color);
+      color: var(--drawer-header-icon-color);
+    }
+
+    .Drawer-close {
+      content: var(--drawer-header-icon-icon);
     }
 
     &:not(.is-disabled) {
@@ -83,7 +89,8 @@
   }
 
   &-body {
-    padding: var(--Drawer-body-padding);
+    padding: var(--drawer-content-paddingTop) var(--drawer-content-paddingRight)
+      var(--drawer-content-paddingBottom) var(--drawer-content-paddingLeft);
     flex-basis: 0;
     flex-grow: 1;
     overflow: auto;
@@ -92,6 +99,7 @@
   &-footer {
     display: flex;
     align-items: flex-end;
+    height: var(--drawer-footer-height);
     justify-content: flex-end;
     padding: var(--Drawer-footer-padding);
     border-top: var(--Drawer-content-borderWidth) solid
@@ -140,27 +148,27 @@
   }
 
   .#{$ns}Drawer--xs .#{$ns}Drawer-content {
-    width: var(--Drawer-widthXs);
+    width: var(--drawer-size-xs-width);
     height: var(--Drawer-widthXs);
   }
 
   .#{$ns}Drawer--sm .#{$ns}Drawer-content {
-    width: var(--Drawer-widthSm);
+    width: var(--drawer-size-sm-width);
     height: var(--Drawer-widthSm);
   }
 
   .#{$ns}Drawer--md .#{$ns}Drawer-content {
-    width: var(--Drawer-widthMd);
+    width: var(--drawer-size-md-width);
     height: var(--Drawer-widthMd);
   }
 
   .#{$ns}Drawer--lg .#{$ns}Drawer-content {
-    width: var(--Drawer-widthLg);
+    width: var(--drawer-size-lg-width);
     height: var(--Drawer-widthLg);
   }
 
   .#{$ns}Drawer--xl .#{$ns}Drawer-content {
-    width: var(--Drawer-widthXl);
+    width: var(--drawer-size-xl-width);
     height: var(--Drawer-widthXl);
   }
 
@@ -283,7 +291,7 @@
     justify-content: flex-end;
 
     .#{$ns}Button {
-      margin-left: var(--Drawer-footer-margin);
+      margin-left: var(--drawer-footer-margin-left);
       margin-right: var(--gap-xs);
     }
 

package/scss/components/_image-gallery.scss

@@ -66,15 +66,15 @@
   &-prevBtn,
   &-nextBtn {
     > svg {
-      width: px2rem(48px);
-      height: px2rem(48px);
+      width: var(--image-images-item-size);
+      height: var(--image-images-item-size);
     }
 
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
-    color: #999;
+    color: var(--image-images-item-color);
     text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
 
     &:hover {
@@ -206,11 +206,14 @@
 }
 
 .#{$ns}ImageGallery-toolbar {
-  background-color: var(--white);
-  border-radius: px2rem(4px);
+  background-color: var(--image-images-preview-bgColor);
+  border-radius: var(--image-images-preview-radius);
   display: flex;
   align-items: flex-start;
-  padding: px2rem(4px) px2rem(16px);
+  padding: var(--image-images-preview-paddingTop)
+    var(--image-images-preview-paddingRight)
+    var(--image-images-preview-paddingBottom)
+    var(--image-images-preview-paddingLeft);
   position: absolute;
   bottom: px2rem(20px);
   left: 50%;

package/scss/components/_images.scss

@@ -7,7 +7,9 @@
 
   &-item {
     display: flex;
-    margin: var(--gap-xs);
+    margin: var(--image-images-item-marginTop)
+      var(--image-images-item-marginRight) var(--image-images-item-marginBottom)
+      var(--image-images-item-marginLeft);
   }
 }
 
@@ -16,7 +18,10 @@
 
   &--thumb {
     display: inline-block;
-    padding: var(--gap-xs);
+    padding: var(--image-image-normal-paddingTop)
+      var(--image-image-normal-paddingRight)
+      var(--image-image-normal-paddingBottom)
+      var(--image-image-normal-paddingLeft);
   }
 
   &-thumbWrap {
@@ -132,12 +137,15 @@
   }
 
   &-caption {
-    font-size: var(--fontSizeSm);
+    font-size: var(--image-image-description-fontSize);
+    color: var(--image-image-description-color);
+    margin-top: var(--image-image-description-marginTop);
   }
 
   &-title {
-    font-size: var(--fontSizeBase);
-    color: var(--text--loud-color);
+    font-size: var(--image-image-normal-fontSize);
+    color: var(--image-image-normal-color);
+    margin-top: var(--image-image-normal-title-marginTop);
   }
 
   &-overlay {