amis-ui 2.8.0 → 3.0.0

package/scss/_mixins.scss

@@ -417,7 +417,6 @@
 
   svg {
     fill: var(--Form-input-clearBtn-color);
-    top: 0;
     width: var(--Form-input-clearBtn-size);
     height: var(--Form-input-clearBtn-size);
   }
@@ -451,7 +450,7 @@
     border: none;
     color: var(--Form-input-color);
     width: 100%;
-    height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+    height: var(--Form-input-lineHeight);
 
     &::placeholder {
       color: var(--Form-input-placeholderColor);

package/scss/_properties.scss

@@ -1,6 +1,10 @@
 @import './functions';
 @import './variables';
 $remFactor: 16px;
+
+/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
+$Table-strip-bg: transparent;
+
 :root {
   --white: var(--colors-neutral-text-11);
   --primary: var(--colors-brand-5);
@@ -108,31 +112,6 @@ $remFactor: 16px;
 
   --scrollbar-width: #{px2rem(17px)};
 
-  // 以下是分组件的
-  --Alert--danger-bg: var(--colors-error-10);
-  --Alert--danger-borderColor: transparent;
-  --Alert--danger-color: var(--colors-neutral-text-2);
-  --Alert--info-bg: var(--colors-info-10);
-  --Alert--info-borderColor: transparent;
-  --Alert--info-color: var(--colors-neutral-text-2);
-  --Alert--success-bg: var(--colors-success-10);
-  --Alert--success-borderColor: transparent;
-  --Alert--success-color: var(--colors-neutral-text-2);
-  --Alert--warning-bg: var(--colors-warning-10);
-  --Alert--warning-borderColor: transparent;
-  --Alert--warning-color: var(--colors-neutral-text-2);
-  --Alert-borderColor: transparent;
-  --Alert-borderRadius: var(--borders-radius-3);
-  --Alert-borderWidth: var(--borderWidth);
-  --Alert-boxShadow: none;
-  --Alert-fontSize: var(--fonts-size-8);
-  --Alert-marginBottom: var(--sizes-size-9);
-  --Alert-paddingX: var(--sizes-size-9);
-  --Alert-paddingY: var(--gap-xs);
-  --Alert-fontColor: var(--colors-neutral-text-4);
-  --Alert-title-fontColor: var(--colors-neutral-text-2);
-  --Alert-height: var(--sizes-base-20);
-
   --Audio-border: #{px2rem(1px)} solid #dee2e6;
   --Audio-height: #{px2rem(50px)};
   --Audio-input-width: #{px2rem(80px)};
@@ -279,44 +258,6 @@ $remFactor: 16px;
   --ColorPicker-placeholderColor: var(--colors-neutral-text-6);
   --ColorPicker-boxShadow: var(--shadows-shadow-normal);
 
-  --Combo--horizontal-dragger-top: var(--sizes-size-3);
-  --Combo--horizontal-item-gap: var(--gap-xs);
-  --Combo--vertical-item-borderColor: var(--borderColor);
-  --Combo--vertical-item-borderRadius: var(--borderRadius);
-  --Combo--vertical-item-borderWidth: var(--borderWidth);
-  --Combo--vertical-item-gap: var(--gap-xs);
-  --Combo--vertical-item-onHover-borderColor: var(--info);
-  --Combo--vertical-item-paddingX: #{px2rem(10px)};
-  --Combo--vertical-item-paddingY: #{px2rem(10px)};
-
-  --Combo-addBtn-bg: var(--colors-brand-5);
-  --Combo-addBtn-border: var(--colors-neutral-line-11);
-  --Combo-addBtn-borderRadius: var(--borders-radius-3);
-  --Combo-addBtn-color: var(--colors-neutral-text-11);
-  --Combo-addBtn-fontSize: var(--fonts-size-8);
-  --Combo-addBtn-fontWeight: var(--fonts-weight-6);
-  --Combo-addBtn-height: var(--sizes-base-13);
-  --Combo-addBtn-lineHeight: var(--fonts-lineHeight-2);
-  --Combo-addBtn-onActive-bg: var(--colors-brand-4);
-  --Combo-addBtn-onActive-border: var(--colors-neutral-line-4);
-  --Combo-addBtn-onActive-color: var(--Combo-addBtn-color);
-  --Combo-addBtn-onHover-bg: var(--colors-brand-6);
-  --Combo-addBtn-onHover-color: var(--Combo-addBtn-color);
-  --Combo-addBtn-paddingX: var(--sizes-size-5);
-  --Combo-addBtn-paddingY: calc(
-    (
-        var(--Combo-addBtn-height) - var(--borders-width-2) * 2 -
-          var(--Combo-addBtn-lineHeight) * var(--Combo-addBtn-fontSize)
-      ) / 2
-  );
-  --Combo-items-marginBottom: var(--gap-sm);
-  --Combo-toolbarBtn-color: var(--icon-color);
-  --Combo-toolbarBtn-height: var(--gap-md);
-  --Combo-toolbarBtn-lineHeight: 1;
-  --Combo-toolbarBtn-onHover-color: var(--colors-neutral-text-4);
-  --Combo-toolbarBtn-paddingX: var(--gap-xs);
-  --Combo-toolbarBtn-paddingY: #{px2rem(2px)};
-
   --Copyable-iconColor: var(--icon-color);
   --Copyable-onHover-iconColor: var(--icon-onHover-color);
 
@@ -326,30 +267,6 @@ $remFactor: 16px;
 
   --LocationPicker-borderRadius: var(--borders-radius-3);
 
-  --Drawer-bg: var(--background);
-  --Drawer-body-padding: var(--sizes-base-12);
-  --Drawer-footer-margin: var(--sizes-size-9);
-  --Drawer-close-color: var(--colors-neutral-text-2);
-  --Drawer-close-onHover-color: var(--text-color);
-  --Drawer-close-size: #{px2rem(12px)};
-  --Drawer-content-borderColor: var(--borderColor);
-  --Drawer-content-borderRadius: 0;
-  --Drawer-content-borderWidth: var(--borderWidth);
-  --Drawer-footer-borderColor: var(--colors-neutral-line-10);
-  --Drawer-footer-padding: var(--gap-base);
-  --Drawer-header-bg: var(--colors-neutral-fill-11);
-  --Drawer-header-borderColor: var(--colors-neutral-line-10);
-  --Drawer-header-padding: var(--sizes-size-9) var(--sizes-base-12);
-  --Drawer-overlay-bg: rgba(0, 0, 0, 0.6);
-  --Drawer-title-fontColor: var(--colors-neutral-text-2);
-  --Drawer-title-fontSize: var(--fontSizeMd);
-  --Drawer-widthBase: #{px2rem(400px)};
-  --Drawer-widthLg: #{px2rem(800px)};
-  --Drawer-widthMd: #{px2rem(500px)};
-  --Drawer-widthSm: #{px2rem(300px)};
-  --Drawer-widthXl: 90%;
-  --Drawer-widthXs: #{px2rem(200px)};
-
   --DropDown-caret-marginLeft: var(--gap-sm);
   --DropDown-menu-bg: var(--colors-neutral-fill-11);
   --DropDown-menu-borderColor: var(--borderColor);
@@ -537,7 +454,7 @@ $remFactor: 16px;
   --Layout-light-fontColor: var(--colors-neutral-text-1);
   --Layout-fontColor--onHover: var(--colors-brand-5);
   --Layout-dark-fontColor: var(--colors-neutral-text-11);
-  --Layout-fontColor--onActive: var(--colors-brand-5);
+  --Layout-fontColor--onActive: var(--colors-brand-4);
   --Layout-fontColor--info: var(--colors-brand-5);
   --Layout-dark-backgroundColor: var(--colors-neutral-fill-2);
   --Layout-dark-selected-color: var(--colors-brand-6);
@@ -617,42 +534,6 @@ $remFactor: 16px;
   --Log-color: #f1f1f1;
   --Log-line--onHover-bg: #444;
 
-  --Modal-bg: var(--background);
-  --Modal-body--noHeader-paddingTop: var(--gap-base);
-  --Modal-body-borderBottom: var(--borders-style-1) solid
-    var(--colors-neutral-line-10);
-  --Modal-body-borderTop: var(--borders-style-1) solid
-    var(--colors-neutral-line-10);
-  --Modal-body-paddingX: var(--sizes-size-0);
-  --Modal-body-paddingY: var(--sizes-base-12);
-  --Modal-close-color: var(--text--muted-color);
-  --Modal-close-width: #{px2rem(16px)};
-  --Modal-content-borderColor: var(--borderColor);
-  --Modal-content-borderRadius: var(--borders-radius-4);
-  --Modal-content-borderWidth: var(--borders-width-1);
-  --Modal-content-minHeight: #{px2rem(193px)};
-  --Modal-content-startMarginTop: #{px2rem(60px)};
-  --Modal-content-stepMarginTop: #{px2rem(30px)};
-  --Modal-footer-button-width: #{px2rem(72px)};
-  --Modal-footer-marginX: var(--sizes-size-0);
-  --Modal-footer-marginY: var(--sizes-size-0);
-  --Modal-footer-padding: var(--sizes-size-0);
-  --Modal-header-bg: var(--colors-neutral-fill-11);
-  --Modal-header-height: #{px2rem(40px)};
-  --Modal-header-paddingX: var(--sizes-size-0);
-  --Modal-header-paddingY: var(--sizes-size-0);
-  --Modal-overlay-bg: rgba(0, 0, 0, 0.7);
-  --Modal-title-color: var(--colors-neutral-text-2);
-  --Modal-title-fontSize: var(--fonts-size-7);
-  --Modal-title-fontWeight: var(--fonts-weight-5);
-  --Modal-title-lineHeight: var(--lineHeightBase);
-  --Modal-widthBase: #{px2rem(500px)};
-  --Modal-widthLg: #{px2rem(1100px)};
-  --Modal-widthMd: #{px2rem(800px)};
-  --Modal-widthSm: #{px2rem(350px)};
-  --Modal-widthXl: 90%;
-  --Model-close-onHover-color: var(--text-color);
-
   --Nav-item-bg: transparent;
   --Nav-item-borderRadius: var(--borders-radius-1);
   --Nav-item-color: var(--text-color);
@@ -779,120 +660,9 @@ $remFactor: 16px;
   --Remark-onHover-iconColor: var(--colors-neutral-text-11);
   --Remark-width: var(--sizes-size-9);
 
-  --Satus-icon-width: var(--sizes-size-8);
-  --Satus-icon-height: var(--Satus-icon-width);
-
   --Sparkline-line-color: var(--info);
   --Sparkline-area-color: #{rgba($info, 0.1)};
 
-  --Spinner--lg-height: #{px2rem(48px)};
-  --Spinner--lg-width: #{px2rem(48px)};
-  --Spinner--sm-height: #{px2rem(16px)};
-  --Spinner--sm-width: #{px2rem(16px)};
-  // 修改自 https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg
-  --Spinner-bg: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
-  --Spinner-height: #{px2rem(32px)};
-  --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
-  --Spinner-width: #{px2rem(32px)};
-  --Spinner-color: var(--colors-brand-5);
-
-  --Table--unsaved-heading-bg: #e8f0fe;
-  --Table--unsaved-heading-color: #4285f4;
-  --Table-bg: var(--colors-neutral-fill-11);
-  --Table-borderColor: var(--colors-neutral-line-8);
-  --Table-borderRadius: var(--borderRadius);
-  --Table-borderWidth: var(--borderWidth);
-  --Table-color: var(--colors-neutral-text-2);
-  --Table-expandBtn-color: var(--colors-neutral-text-5);
-  --Table-fixed-zIndex: 5;
-  --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
-  --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
-  --Table-fixedTop-boxShadow: var(--shadows-shadow-normal);
-  --Table-fontSize: var(--fonts-size-8);
-  --Table-heading-bg: var(--colors-neutral-fill-11);
-  --Table-heading-height: #{px2rem(40px)};
-  --Table-lineHeight: var(--fonts-lineHeight-2);
-  --Table-onChecked-bg: var(--colors-neutral-fill-10);
-  --Table-onChecked-borderColor: var(--colors-neutral-line-8);
-  --Table-onChecked-color: var(--colors-neutral-text-6);
-  --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10);
-  --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8);
-  --Table-onChecked-onHover-color: var(--colors-neutral-line-4);
-  --Table-onDragging-opacity: 0.1;
-  // 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了
-  --Table-onHover-bg-rgb: 245, 251, 255;
-  --Table-onHover-bg: var(--colors-brand-10);
-  --Table-onHover-borderColor: var(--colors-neutral-line-8);
-  --Table-onHover-boxShadow: var(--shadows-shadow-normal);
-  --Table-onHover-color: var(--text-color);
-  --Table-onModified-bg: #e8f0fe;
-  --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
-  --Table-onModified-color: #4285f4;
-  --Table-placeholder-height: #{px2rem(200px)};
-  --Table-strip-bg: transparent;
-  --Table-tbody-borderTopColor: var(--colors-neutral-line-9);
-  --Table-thead-bg: var(--colors-neutral-fill-10);
-  --Table-thead-borderColor: var(--colors-neutral-line-11);
-  --Table-thead-borderWidth: var(--Table-borderWidth);
-  --Table-thead-color: var(--colors-neutral-text-2);
-  --Table-thead-fontSize: var(--fontSizeBase);
-  --Table-thead-iconColor: var(--colors-neutral-text-5);
-  --Table-toolbar-marginX: #{px2rem(4px)};
-  --Table-toolbar-marginY: var(--gap-base);
-  --Table-tree-borderColor: var(--colors-neutral-line-8);
-  --Table-searchableForm-backgroundColor: #f6f7f8;
-  --Table-searchableForm-borderRadius: #{px2rem(4px)};
-  --Table-empty-icon-size: #{px2rem(74px)};
-
-  --TableRow-onDisabled-bg: var(--colors-neutral-fill-10);
-  --TableRow-onDisabled-color: var(--colors-neutral-text-6);
-
-  --TableCell--edge-paddingX: var(--gap-md);
-  --TableCell--edge-paddingX-default: var(--gap-base);
-  --TableCell-filterBtn--onActive-color: var(--colors-brand-5);
-  --TableCell-filterBtn-width: #{px2rem(16px)};
-  --TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-15);
-  --TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0)
-    var(--sizes-size-6);
-  --TableCell-line-height-large: #{px2rem(40px)};
-  --TableCell-line-height-middle: #{px2rem(30px)};
-  --TableCell-height: #{px2rem(40px)};
-  --TableCell-height-default: #{px2rem(41px)};
-  --TableCell-height-large: #{px2rem(61px)};
-  --TableCell-height-small: #{px2rem(33px)};
-  --TableCell-paddingX: var(--sizes-size-6);
-  --TableCell-paddingX-large: var(--gap-base);
-  --TableCell-paddingX-small: var(--gap-xs);
-  --TableCell-paddingY: calc(
-    (var(--TableCell-height) - var(--Table-fontSize) * var(--Table-lineHeight)) /
-      2
-  );
-  --TableCell-paddingY-default: calc(
-    (
-        var(--TableCell-height-default) - var(--Table-fontSize) *
-          var(--Table-lineHeight)
-      ) / 2
-  );
-  --TableCell-paddingY-large: calc(
-    (
-        var(--TableCell-height-large) - var(--Table-fontSize) *
-          var(--Table-lineHeight)
-      ) / 2
-  );
-  --TableCell-paddingY-small: calc(
-    (
-        var(--TableCell-height-small) - var(--Table-fontSize) *
-          var(--Table-lineHeight)
-      ) / 2
-  );
-  --TableCell-searchBtn--onActive-color: var(--colors-brand-5);
-  --TableCell-searchBtn-width: #{px2rem(16px)};
-  --TableCell-sortBtn--default-onActive-opacity: 1;
-  --TableCell-sortBtn--default-opacity: 0;
-  --TableCell-sortBtn--onActive-color: var(--colors-brand-5);
-  --TableCell-sortBtn-width: var(--sizes-size-8);
-  --TableCell-icon-gap: var(--gap-sm);
-
   --Table-fixedLeftLast-boxShadow: inset 10px 0 8px -8px #00000026;
   --Table-fixedRightFirst-boxShadow: inset -10px 0 8px -8px #00000026;
   --Table-loading-padding: 30px 0px;
@@ -922,40 +692,6 @@ $remFactor: 16px;
   );
   --TagControl-sugTip-color: var(--colors-brand-5);
 
-  --Toast-color: var(--colors-neutral-text-11);
-  --Toast--danger-bgColor: var(--colors-neutral-fill-11);
-  --Toast--danger-borderColor: var(--colors-neutral-line-11);
-  --Toast--danger-color: var(--colors-neutral-text-2);
-  --Toast--info-bgColor: var(--colors-neutral-fill-11);
-  --Toast--info-borderColor: var(--colors-neutral-line-11);
-  --Toast--info-color: var(--colors-neutral-text-2);
-  --Toast--success-bgColor: var(--colors-neutral-fill-11);
-  --Toast--success-borderColor: var(--colors-neutral-line-11);
-  --Toast--success-color: var(--colors-neutral-text-2);
-  --Toast--warning-bgColor: ar(--colors-neutral-fill-11);
-  --Toast--warning-borderColor: var(--colors-neutral-line-11);
-  --Toast--warning-color: var(--colors-neutral-text-2);
-
-  --Toast-border-width: var(--borders-width-2);
-  --Toast-borderRadius: var(--borders-radius-3);
-  --Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
-    0px 1px 10px 0px rgba(8, 14, 26, 0.05),
-    0px 2px 4px -1px rgba(8, 14, 26, 0.04);
-  --Toast-close-color: var(--colors-neutral-text-5);
-  --Toast-close--onHover-color: var(--colors-brand-5);
-
-  --Toast-icon-width: #{px2rem(16px)};
-  --Toast-icon-height: var(--Toast-icon-width);
-
-  --Toast-opacity: 1;
-  --Toast-paddingL: var(--sizes-base-13);
-  --Toast-paddingX: var(--sizes-size-9);
-  --Toast-paddingY: var(--gap-xs);
-  --Toast-title-display: inline;
-  --Toast-width: #{px2rem(400px)};
-
-  --Toast--info-paddingL: var(--sizes-size-0);
-
   --Tooltip--attr-bg: rgba(0, 0, 0, 0.7);
   --Tooltip--attr-borderColor: var(--borderColor);
   --Tooltip--attr-borderRadius: var(--borderRadius);
@@ -1005,52 +741,9 @@ $remFactor: 16px;
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
 
-  --Wizard-badge-bg: var(--colors-neutral-fill-11);
-  --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2)
-    var(--colors-neutral-fill-6);
-  --Wizard-badge-borderRadius: var(--borders-radius-7);
-  --Wizard-badge-color: var(--colors-neutral-text-6);
-  --Wizard-badge-fontSize: var(--fonts-size-7);
-  --Wizard-badge-marginRight: var(--sizes-size-4);
-  --Wizard-badge-onActive-backgroundColor: var(--colors-neutral-text-3);
-  --Wizard-badge-onComplete-backgroundColor: var(--colors-neutral-text-3);
-  --Wizard-badge-size: var(--sizes-base-13);
-  --Wizard-steps-bg--isComplete: var(--colors-neutral-fill-11);
-  --Wizard-steps-bg: var(--colors-neutral-fill-11);
-  --Wizard-steps-borderWidth: var(--borders-width-1);
-  --Wizard-steps-height: var(--sizes-base-30);
-  --Wizard-steps-li-onActive-arrow-bg: var(--colors-neutral-text-11);
-  --Wizard-steps-li-onActive-bg: var(--colors-neutral-fill-11);
-  --Wizard-steps-li-onActive-color: var(--colors-neutral-text-3);
-
-  --Wizard-steps-liAfterContent: '\e6ee';
-  --Wizard-steps-liVender: 'iconfont';
-  --Wizard-steps-padding: var(--sizes-size-6) var(--sizes-size-0);
-  --Wizard-steps-textAlign: center;
-  --Wizard-steps-ulDisplay: inline-block;
-  --Wizard-stepsContent-padding: var(--gap-base);
-
   --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
   --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};
 
-  --Steps-bg: var(--borderColorDarken);
-  --Steps-status-success: var(--info);
-  --Steps-status-error: var(--Tag-error-color);
-  --Steps-status-wait: #84868c;
-  --Steps-icon-fontsize: var(--fontSizeLg);
-  --Steps-title-fontsize: var(--fontSizeMd);
-  --Steps-title-color: #151b26;
-  --Steps-sub-title-fontsize: var(--fontSizeBase);
-  --Steps-sub-title-color: var(--text-color);
-  --Steps-description-title-fontsize: var(--fontSizeSm);
-  --Steps-description-title-color: #84868c;
-  --Steps-line-bg: var(--Steps-bg);
-  --Steps-line-success-bg: var(--Steps-status-success);
-
-  --Progress-borderRadius: var(--borderRadius);
-  --Progress-animate-backgroundColor: #fff;
-  --Progress-bar-backgroundColor: #d3d9e6;
-
   --ColumnToggler-backgroundColor: var(--colors-neutral-fill-11);
   --ColumnToggler-borderRadius: #{px2rem(4px)};
   --ColumnToggler-lineHeight: #{px2rem(24px)};
@@ -1068,74 +761,12 @@ $remFactor: 16px;
   --InputFormula-icon-color-onActive: var(--colors-brand-5);
   --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
 
-  // timeline
-  --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
-  --TimelineItem--left-line-width: #{px2rem(2px)};
-  --TimelineItem--left-line-left: #{px2rem(13px)};
-  --TimelineItem--left-line-top: #{px2rem(20px)};
-  --TimelineItem--horizontal-left-line-top: #{px2rem(18px)};
-  --TimelineItem--icon-left-line-left: #{px2rem(12px)};
-  --TimelineItem--round-width: #{px2rem(8px)};
-  --TimelineItem--round-height: #{px2rem(8px)};
-  --TimelineItem--round-left: #{px2rem(10px)};
-  --TimelineItem--round-top: #{px2rem(8px)};
-  --TimelineItem--icon-width: #{px2rem(16px)};
-  --TimelineItem--icon-height: #{px2rem(16px)};
-  --TimelineItem--icon-left: #{px2rem(6px)};
-  --TimelineItem--content-padding-bottom: var(--gap-md);
-  --TimelineItem--content-margin-left: #{px2rem(2px)};
-  --TimelineItem--content-time-margin-bottom: var(--gap-xs);
-  --TimelineItem--content-title-margin-bottom: var(--gap-xs);
-  --TimelineItem--detail-button-margin-bottom: var(--gap-base);
-  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
-  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
-  --TimelineItem-detail-visible-max-width: #{px2rem(300px)};
-  --Timeline-alternate-margin-left: var(--gap-xl);
-  --Timeline-visible-border-radius: var(--gap-xs);
-  --Timeline-horizontal-content-margin-top: #{px2rem(-3px)};
-
-  --TimelineItem--icon-radius: 50%;
-  --TimelineItem--round-radius: 50%;
-  --TimelineItem--content-radius: px2rem(2px);
-
-  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0
-    rgba(0 0 0 / 10%);
-
-  --TimelineItem--font-size: var(--fontSizeSm);
-
-  --TimelineItem--text-primary-color: #151a26;
-  --TimelineItem--text-secondary-color: #83868c;
-  --TimelineItem--detail-button-color: var(--colors-brand-5);
-  --TimelineItem--line-bg: #e6e6e8;
-  --TimelineItem--content-bg: #f2f2f4;
-  --TimelineItem-custem-button-margin-left: var(--fontSizeSm);
-  --TimelineItem-custem-time-padding-right: var(--fontSizeSm);
-  --TimelineItem-round-bg: #dadbdd;
-
-  --Timeline--success-bg: var(--success);
-  --Timeline--info-bg: var(--info);
-  --Timeline--warning-bg: var(--warning);
-  --Timeline--danger-bg: var(--danger);
-
   --UserSelect--post-bg: var(--colors-brand-6);
   --UserSelect--department-bg: #ffab52;
   --UserSelect--role-bg: #0bc286;
   --UserSelect--border-color: #f7f7f9;
   --UserSelect--content-bg: #f5f7f8;
   --UserSelect--bread-color: #5e626a;
-  // tag
-  --Tag-content-fontSize: var(--fontSizeSm);
-  --Tag-height: #{px2rem(24px)};
-  --Tag-borderRadius: #{px2rem(2px)};
-  --Tag-fontColor: #151a26;
-
-  --Tag-default-color: #f2f2f4;
-  --Tag-inactive-color: #b8babf;
-  --Tag-active-color: var(--colors-brand-5);
-  --Tag-processing-color: var(--colors-brand-6);
-  --Tag-success-color: var(--colors-success-5);
-  --Tag-error-color: var(--colors-error-5);
-  --Tag-warning-color: var(--colors-warning-5);
 
   --Tag-checkable-bgColor: #f2f2f4;
   --Tag-checkable-bgColor-onDisable: #e6e6e8;

package/scss/_variables.scss

@@ -410,6 +410,7 @@ $zindex-tooltip: 1600 !default;
 $zindex-toast: 2000 !default;
 $zindex-top: 3000 !default;
 $zindex-debug: 4000 !default;
+$zindex-spinner-overlay: 11 !default;
 
 $Form--horizontal-columns: 12;
 $Table-strip-bg: lighten(#f6f8f8, 1%) !default;

package/scss/base/_common.scss

@@ -1,3 +1,7 @@
 .has-popover {
   position: relative;
 }
+
+.is-keyword {
+  color: var(--primary-onActive);
+}

package/scss/components/_alert.scss

@@ -1,10 +1,13 @@
 .#{$ns}Alert {
   font-size: var(--Alert-fontSize);
+  font-weight: var(--alert-base-fontWeight);
   box-shadow: var(--Alert-boxShadow);
-  padding: var(--Alert-paddingY) var(--Alert-paddingX);
+  padding: var(--alert-base-paddingTop) var(--alert-base-paddingRight)
+    var(--alert-base-paddingBottom) var(--alert-base-paddingLeft);
   border: var(--Alert-borderWidth) solid var(--Alert-borderColor);
   border-radius: var(--Alert-borderRadius);
-  margin-bottom: var(--Alert-marginBottom);
+  margin: var(--alert-base-marginTop) var(--alert-base-marginRight)
+    var(--Alert-marginBottom) var(--alert-base-marginLeft);
   position: relative;
   color: var(--Alert-fontColor);
   display: flex;
@@ -13,7 +16,9 @@
   align-items: flex-start;
 
   &-has-title {
-    padding: var(--Alert-paddingX);
+    padding: var(--alert-base-title-paddingTop)
+      var(--alert-base-title-paddingRight) var(--alert-base-title-paddingBottom)
+      var(--alert-base-title-paddingLeft);
 
     .#{$ns}Alert-content {
       .#{$ns}Alert-title {
@@ -27,19 +32,19 @@
   }
 
   &-icon {
-    margin-right: var(--gap-sm);
-    font-size: var(--fontSizeLg);
+    margin-right: var(--alert-icon-margin-right);
+    font-size: var(--alert-icon-size);
   }
 
   &-content {
     flex: 1;
 
     .#{$ns}Alert-title {
-      color: var(--text-color);
-      font-size: var(--fontSizeBase);
-      font-weight: 500;
+      color: var(--alert-base-title-color);
+      font-size: var(--alert-base-title-fontSize);
+      font-weight: var(--alert-base-title-fontWeight);
       line-height: #{px2rem(24px)};
-      margin-bottom: #{px2rem(4px)};
+      margin-bottom: var(--alert-base-title-margin-bottom);
     }
 
     .#{$ns}Alert-desc {
@@ -74,23 +79,39 @@
     color: var(--Alert--danger-color);
     background: var(--Alert--danger-bg);
     border-color: var(--Alert--danger-borderColor);
+
+    .#{$ns}Alert-icon .icon-alert-danger path {
+      fill: var(--alert-level-danger-icon-color);
+    }
   }
 
   &--info {
     color: var(--Alert--info-color);
     background: var(--Alert--info-bg);
     border-color: var(--Alert--info-borderColor);
+
+    .#{$ns}Alert-icon .icon-alert-info path {
+      fill: var(--alert-level-info-icon-color);
+    }
   }
 
   &--success {
     color: var(--Alert--success-color);
     background: var(--Alert--success-bg);
     border-color: var(--Alert--success-borderColor);
+
+    .#{$ns}Alert-icon .icon-alert-success path {
+      fill: var(--alert-level-success-icon-color);
+    }
   }
 
   &--warning {
     color: var(--Alert--warning-color);
     background: var(--Alert--warning-bg);
     border-color: var(--Alert--warning-borderColor);
+
+    .#{$ns}Alert-icon .icon-alert-warning path {
+      fill: var(--alert-level-warning-icon-color);
+    }
   }
 }

package/scss/components/_badge.scss

@@ -76,7 +76,7 @@
   &-ribbon-out {
     overflow: hidden;
     position: absolute;
-    top: 0;
+
     bottom: 0;
     right: 0;
   }
@@ -93,6 +93,11 @@
     top: 5px;
   }
 
+  &-ribbon-out--top-left,
+  &-ribbon-out--top-right {
+    top: 0;
+  }
+
   &-ribbon-out--top-left,
   &-ribbon-out--bottom-left {
     left: 0;
@@ -105,7 +110,8 @@
     right: auto;
   }
 
-  &-ribbon--bottom-left {
+  &-ribbon--bottom-left,
+  &-ribbon-out--bottom--left {
     transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7);
     transform-origin: 50% 100%;
     left: 0;
@@ -114,7 +120,8 @@
     top: auto;
   }
 
-  &-ribbon--bottom-right {
+  &-ribbon--bottom-right,
+  &-ribbon-out--bottom--right {
     transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7);
     transform-origin: 50% 100%;
     left: auto;