amis-ui 6.0.0 → 6.2.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.0.0",
-    "amis-formula": "^6.0.0",
+    "amis-core": "^6.2.0",
+    "amis-formula": "^6.2.0",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -65,6 +65,7 @@
     "react-intersection-observer": "9.5.2",
     "react-json-view": "1.21.3",
     "react-overlays": "5.1.1",
+    "react-pdf": "^7.7.1",
     "react-textarea-autosize": "8.3.3",
     "react-transition-group": "4.4.2",
     "react-visibility-sensor": "5.1.1",
@@ -123,12 +124,7 @@
       "js"
     ],
     "transform": {
-      "\\.(ts|tsx)$": [
-        "ts-jest",
-        {
-          "diagnostics": false
-        }
-      ]
+      "^.+\\.(t|j)sx?$": "@swc/jest"
     },
     "setupFiles": [
       "jest-canvas-mock"
@@ -147,5 +143,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "4adf8b9f4080bc440d54940899469706949e88cc"
+  "gitHead": "37d23b4a8eb1c663bc38e8dd9040889ea1526ec4"
 }

package/scss/_components.scss

@@ -1459,7 +1459,7 @@
   --Checkbox-borderRadius: #{px2rem(2px)};
   --Checkbox-color: var(--borderColor);
   --Checkbox-gap: var(--gap-xs);
-  --Checkbox-gb: #fff;
+  --Checkbox-gb: var(--colors-neutral-fill-11);
   --Checkbox-inner-size: var(--sizes-size-5);
   --Checkbox-onDisabled-color: var(--colors-neutral-text-6);
   --Checkbox-inner-onDisabled-bg: #d4d6d9;
@@ -1788,9 +1788,9 @@
   --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-borderColor: var(--colors-neutral-fill-9);
   --Modal-content-borderRadius: var(--borders-radius-4);
-  --Modal-content-borderWidth: var(--borders-width-1);
+  --Modal-content-borderWidth: var(--borders-width-2);
   --Modal-content-minHeight: #{px2rem(193px)};
   --Modal-content-startMarginTop: #{px2rem(60px)};
   --Modal-content-stepMarginTop: #{px2rem(30px)};
@@ -2049,7 +2049,7 @@
   --Tabs-borderWidth: var(--borderWidth);
   --Tabs-borderColor: var(--colors-neutral-line-8);
   --Tabs-color: var(--text-color);
-  --Tabs-content-bg: var(--background);
+  --Tabs-content-bg: var(--colors-neutral-fill-11);
   --Tabs-linkFontSize: var(--fonts-size-7);
   --Tabs-linkMargin: 0 #{px2rem(3px)} 0 0;
   --Tabs-linkPadding: var(--gap-sm) var(--gap-base);
@@ -2805,7 +2805,7 @@
   --select-multiple-paddingLeft: var(--sizes-size-3);
   --select-multiple-paddingRight: var(--sizes-size-3);
   --select-multiple-marginTop: var(--sizes-size-0);
-  --select-multiple-marginBottom: var(--sizes-size-2);
+  --select-multiple-marginBottom: var(--sizes-size-0);
   --select-multiple-marginLeft: var(--sizes-size-0);
   --select-multiple-marginRight: var(--sizes-size-3);
   --select-multiple-color: var(--colors-neutral-text-2);
@@ -2874,7 +2874,8 @@
   --Form-select-onFocused-color: var(--Form-select-color);
   --Form-select-onHover-bg: var(--select-base-hover-bg-color);
   --Form-select-onHover-borderColor: var(--colors-brand-5);
-  --Form-select-outer-borderWidth: var(--borders-width-1);
+  --Form-select-outer-borderWidth: var(--borders-width-2);
+  --Form-select-outer-borderColor: var(--colors-neutral-fill-9);
   --Form-select-outer-top: var(--sizes-base-16);
   --Form-select-outer-boxShadow: var(--shadows-shadow-normal);
   --Form-select-paddingX: var(--Form-input-paddingX);
@@ -2909,7 +2910,7 @@
   --Form-selectValue-onInvalid-color: var(--danger);
   --Form-valueLabel-maxWidth: #{px2rem(120px)};
   --Form-select-onFocus-boxShadow: none;
-  --ResultBox-tag-height: #{px2rem(24px)};
+  --ResultBox-tag-height: #{px2rem(22px)};
   --ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);
   --ResultBox-icon--onDisabled-color: #ebebeb;
   --ResultBox-icon--onHover-color: var(--select-multiple-icon-hover-color);
@@ -3187,9 +3188,9 @@
   --steps-base-des-fontWeight: var(--fonts-weight-6);
   --steps-base-title-paddingRight: var(--sizes-size-5);
   --steps-base-subTitle-paddingLeft: var(--sizes-size-6);
-  --steps-base-icon-size: var(--sizes-base-15);
-  --steps-base-icon-paddingRight: var(--sizes-size-6);
-  --steps-base-icon-fontSize: var(--fonts-size-6);
+  --steps-base-icon-size: var(--sizes-base-12);
+  --steps-base-icon-paddingRight: var(--sizes-size-5);
+  --steps-base-icon-fontSize: var(--fonts-size-8);
   --steps-base-line-color: var(--colors-neutral-line-8);
   --steps-base-line-active-color: var(--colors-brand-5);
   --steps-status-wait-bg-color: var(--colors-neutral-fill-11);
@@ -3303,10 +3304,11 @@
   // 修改自 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: var(--spinner-size-size);
-  --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
+  --Spinner-overlay-bg: rgba(255, 255, 255, 0.1);
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
   --Spinner-color--disabled: rgba(0, 0, 0, 0.65);
+  --loading-dark-bg-color: var(--colors-neutral-text-11);
 
   // Image
   --image-image-normal-paddingTop: var(--sizes-size-3);
@@ -3425,7 +3427,7 @@
     var(--Tag-model-normal-top-right-border-radius)
     var(--Tag-model-normal-bottom-right-border-radius)
     var(--Tag-model-normal-bottom-left-border-radius);
-  --Tag-fontColor: var(--Tag-base-color);
+  --Tag-fontColor: var(--colors-neutral-text-2);
 
   --Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
     var(--Tag-model-rounded-top-right-border-radius)
@@ -3796,7 +3798,7 @@
   --inputTag-option-paddingLeft: var(--sizes-size-6);
   --inputTag-option-paddingRight: var(--sizes-size-6);
   --inputTag-option-bg-color: var(--colors-neutral-fill-11);
-  --inputTag-option-hover-color: var(--colors-brand-5);
+  --inputTag-option-hover-color: var(--colors-neutral-text-2);
   --inputTag-option-hover-bg-color: var(--colors-brand-10);
   --inputTag-popover-maxHeight: 300px;
 
@@ -3980,8 +3982,8 @@
   --table-size-small-paddingBottom: var(--sizes-size-4);
   --table-size-small-paddingLeft: var(--sizes-size-3);
 
-  --Table--unsaved-heading-bg: #e8f0fe;
-  --Table--unsaved-heading-color: #4285f4;
+  --Table--unsaved-heading-bg: var(--colors-neutral-fill-9);
+  --Table--unsaved-heading-color: var(--colors-brand-5);
   --Table-bg: var(--colors-neutral-fill-11);
   --Table-borderColor: var(--table-border-color);
   --Table-borderRadius: var(--borderRadius);
@@ -4026,7 +4028,7 @@
   --Table-toolbar-marginY: var(--gap-base);
   --Table-tree-borderColor: var(--colors-neutral-line-8);
   --Table-tree-indent: var(--gap-lg);
-  --Table-searchableForm-backgroundColor: #f6f7f8;
+  --Table-searchableForm-backgroundColor: var(--colors-neutral-fill-10);
   --Table-searchableForm-borderRadius: #{px2rem(4px)};
   --Table-empty-icon-size: #{px2rem(74px)};
   --TableRow-onDisabled-bg: var(--table-body-disabled-bg-color);
@@ -4110,7 +4112,7 @@
   --combo-vertical-paddingRight: var(--sizes-size-6);
   --combo-vertical-paddingBottom: var(--sizes-size-6);
   --combo-vertical-paddingLeft: var(--sizes-size-6);
-  --combo-multi-addBtn-color: var(--colors-neutral-text-11);
+  --combo-multi-addBtn-color: var(--button-primary-default-font-color);
   --combo-multi-addBtn-fontSize: var(--fonts-size-8);
   --combo-multi-addBtn-fontWeight: var(--fonts-weight-6);
   --combo-multi-addBtn-lineHeight: var(--fonts-lineHeight-2);
@@ -4124,9 +4126,9 @@
   --combo-multi-addBtn-paddingRight: var(--sizes-size-5);
   --combo-multi-addBtn-paddingBottom: var(--sizes-size-3);
   --combo-multi-addBtn-paddingLeft: var(--sizes-size-5);
-  --combo-multi-addBtn-hover-color: var(--colors-neutral-text-11);
+  --combo-multi-addBtn-hover-color: var(--button-primary-hover-font-color);
   --combo-multi-addBtn-hover-bg-color: var(--colors-brand-6);
-  --combo-multi-addBtn-active-color: var(--colors-neutral-text-11);
+  --combo-multi-addBtn-active-color: var(--button-primary-active-font-color);
   --combo-multi-addBtn-active-bg-color: var(--colors-brand-4);
   --combo-multi-delBtn-color: var(--colors-neutral-text-5);
   --combo-multi-delBtn-hover-color: var(--colors-neutral-text-2);
@@ -4162,7 +4164,7 @@
   --Combo--vertical-item-paddingX: #{px2rem(10px)};
   --Combo--vertical-item-paddingY: #{px2rem(10px)};
   --Combo-addBtn-bg: var(--combo-multi-addBtn-bg-color);
-  --Combo-addBtn-border: var(--colors-neutral-line-11);
+  --Combo-addBtn-border: var(--combo-multi-addBtn-bg-color);
   --Combo-addBtn-borderRadius: var(--borders-radius-3);
   --Combo-addBtn-color: var(--combo-multi-addBtn-color);
   --Combo-addBtn-fontSize: var(--combo-multi-addBtn-fontSize);
@@ -4248,4 +4250,7 @@
     var(--Wizard-stepContent-paddingRight)
     var(--Wizard-stepContent-paddingBottom)
     var(--Wizard-stepContent-paddingLeft);
+
+  --common-popover-border: var(--borders-width-2) solid
+    var(--colors-neutral-fill-9);
 }

package/scss/_properties.scss

@@ -113,8 +113,8 @@ $Table-strip-bg: transparent;
   --label--warning-bg: var(--warning);
   --label--danger-bg: var(--danger);
 
-  --label-color: var(--colors-neutral-text-11);
-  --label-link--hover-color: var(--colors-neutral-text-11);
+  --label-color: #fff;
+  --label-link--hover-color: #fff;
 
   --scrollbar-width: #{px2rem(17px)};
 
@@ -161,7 +161,7 @@ $Table-strip-bg: transparent;
   --Avatar-icon-size-small: #{px2rem(12px)};
 
   --Badge-size: var(--gap-md);
-  --Badge-color: var(--colors-neutral-fill-11);
+  --Badge-color: #fff;
   --Badge--success-bg: var(--success);
   --Badge--info-bg: var(--info);
   --Badge--warning-bg: var(--warning);
@@ -183,7 +183,7 @@ $Table-strip-bg: transparent;
   --Breadcrumb-item-default-color: var(--colors-neutral-text-5);
   --Breadcrumb-item-hover-color: var(--colors-brand-5);
   --Breadcrumb-item-active-color: var(--colors-brand-4);
-  --Breadcrumb-item-last-color: #151a26;
+  --Breadcrumb-item-last-color: var(--colors-neutral-text-2);
   --BreadcrumbDropdown-item-default-color: var(--colors-neutral-text-2);
   --BreadcrumbDropdown-item-default-bg: var(--colors-neutral-text-11);
   --BreadcrumbDropdown-item-hover-bg: var(--colors-brand-10);
@@ -423,7 +423,7 @@ $Table-strip-bg: transparent;
   --Layout-asideLink-onActive-arrowColor: var(
     --Layout-asideLink-onActive-color
   );
-  --Layout-asideLink-onActive-color: var(--colors-brand-4);
+  --Layout-asideLink-onActive-color: var(--colors-brand-6);
   --Layout-asideLink-onHover-color: var(--colors-brand-6);
   --Layout-asideLink-onHover-iconColor: var(--colors-brand-6);
   --Layout-asideLink-onHover-iconSize: var(--sizes-size-9);
@@ -472,7 +472,7 @@ $Table-strip-bg: transparent;
   --ListControl-item-borderWidth: var(--borders-width-2);
   --ListControl-item-borderRadius: var(--borders-radius-3);
   --ListControl-item-color: var(--colors-neutral-text-2);
-  --ListControl-item-onActive-after-borderColor: var(--colors-neutral-line-11);
+  --ListControl-item-onActive-after-borderColor: #fff;
   --ListControl-item-onActive-before-bg: var(--colors-brand-5);
   --ListControl-item-onActive-bg: var(--colors-neutral-fill-11);
   --ListControl-item-onActive-borderColor: var(--colors-brand-4);
@@ -606,7 +606,7 @@ $Table-strip-bg: transparent;
   --Pagination-onDisabled-backgroundColor: var(--colors-neutral-fill-10);
   --Pagination-padding: 0 #{px2rem(8px)};
   --Pagination-padding-sm: 0 #{px2rem(4px)};
-  --Pagination-light-color: #84868c;
+  --Pagination-light-color: var(--colors-neutral-text-4);
 
   --Panel--default-badgeBg: var(--colors-neutral-fill-3);
   --Panel--default-badgeColor: var(--colors-neutral-fill-10);
@@ -636,19 +636,17 @@ $Table-strip-bg: transparent;
   --PopUp-cancelAction-color: #666;
   --PopUp-confirmAction-color: var(--primary);
 
-  --Property-title-bg: #f2f2f2;
-  --Property-label-bg: #f7f7f7;
+  --Property-title-bg: var(--colors-neutral-fill-10);
+  --Property-label-bg: var(--colors-neutral-fill-10);
 
   --Portlet-borderColor: var(--borderColor);
   --Portlet-borderStyle: solid;
   --Portlet-borderWidth: var(--borderWidth);
   --Portlet-borderRadius: var(--borderRadius);
 
-  --QuickEdit-iconColor: inherit;
-  --QuickEdit-iconSize: #{px2rem(13px)};
+  --QuickEdit-iconSize: #{px2rem(14px)};
   --QuickEdit-onFocus-borderColor: var(--info);
   --QuickEdit-onFocus-borderWidth: var(--borderWidth);
-  --QuickEdit-onHover-iconColor: inherit;
 
   --Remark-bg: var(--colors-neutral-text-11);
   --Remark-borderColor: var(--colors-neutral-line-8);
@@ -698,7 +696,7 @@ $Table-strip-bg: transparent;
   --Tooltip--attr-borderRadius: var(--borderRadius);
   --Tooltip--attr-borderWidth: 0;
   --Tooltip--attr-boxShadow: var(--shadows-shadow-normal);
-  --Tooltip--attr-color: var(--background);
+  --Tooltip--attr-color: #fff;
   --Tooltip--attr-fontSize: var(--fontSizeSm);
   --Tooltip--attr-gap: var(--gap-sm);
   --Tooltip--attr-lineHeigt: var(--lineHeightBase);
@@ -713,7 +711,7 @@ $Table-strip-bg: transparent;
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-body-color: var(--text-color);
-  --Tooltip-body-color--dark: var(--colors-neutral-fill-11);
+  --Tooltip-body-color--dark: #fff;
   --Tooltip-body-paddingX: var(--gap-base);
   --Tooltip-body-paddingY: var(--gap-sm);
   --Tooltip-borderColor: var(--borderColor);
@@ -729,7 +727,7 @@ $Table-strip-bg: transparent;
   --Tooltip-title-bg: #{darken($white, 3%)};
   --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
   --Tooltip-title-color: var(--text--loud-color);
-  --Tooltip-title-color--dark: var(--colors-neutral-fill-11);
+  --Tooltip-title-color--dark: #fff;
   --Tooltip-title-paddingX: var(--gap-base);
   --Tooltip-title-paddingY: var(--gap-sm);
 
@@ -739,8 +737,8 @@ $Table-strip-bg: transparent;
   --TransferSelect--normal-heading-bg: var(--colors-neutral-fill-10);
   --TransferSelect-heading-borderBottom: var(--borders-width-1);
 
-  --TabsTransfer-title-bg: #f7f7f9;
-  --TabsTransfer-border-color: #e8e9eb;
+  --TabsTransfer-title-bg: var(--colors-neutral-fill-10);
+  --TabsTransfer-border-color: var(--colors-neutral-fill-8);
 
   --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
   --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};
@@ -757,7 +755,7 @@ $Table-strip-bg: transparent;
   --ColumnToggler-item-margin: #{px2rem(4px)};
   --ColumnToggler-item-dragBar-color: #d8d8d8;
 
-  --InputFormula-header-bgColor: #fafafa;
+  --InputFormula-header-bgColor: var(--colors-neutral-fill-10);
   --InputFormula-icon-size: #{px2rem(18px)};
   --InputFormula-icon-color-onActive: var(--colors-brand-5);
   --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
@@ -821,7 +819,7 @@ $Table-strip-bg: transparent;
   --SearchBox-hover-color: var(--colors-brand-5);
   --SearchBox-focus-color: var(--colors-brand-4);
   --SearchBox-search-icon-color: var(--colors-neutral-text-5);
-  --SearchBox-enhonce-icon-color: var(--colors-neutral-text-11);
+  --SearchBox-enhonce-icon-color: var(--button-primary-default-font-color);
   --SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
   --SearchBox-clearable-icon-size: var(--sizes-size-9);
   --SearchBox-height: var(--sizes-base-15);

package/scss/components/_anchor-nav.scss

@@ -13,6 +13,9 @@
       > .#{$ns}AnchorNav-link {
         position: relative;
         display: block;
+        &.#{$ns}AnchorNav-link-child {
+          margin-left: px2rem(16px);
+        }
 
         > a {
           display: block;

package/scss/components/_app.scss

@@ -2,11 +2,16 @@
   height: px2rem(30px);
   line-height: px2rem(30px);
   font-size: px2rem(12px);
+
   list-style: none;
   margin: 0;
   padding: 0 0 0 var(--gap-md);
   border-bottom: var(--borderWidth) solid var(--borderColor);
 
+  a {
+    font-size: inherit;
+  }
+
   &-item {
     display: inline-block;
   }

package/scss/components/_array-input.scss

@@ -31,7 +31,7 @@
       var(--Combo-addBtn-bg),
       var(--Combo-addBtn-border),
       var(--Combo-addBtn-color),
-      var(--Combo-addBtn-onHover-bg),
+      var(--combo-multi-addBtn-hover-bg-color),
       var(--Combo-addBtn-onHover-border),
       var(--Combo-addBtn-onHover-color),
       var(--Combo-addBtn-onActive-bg),

package/scss/components/_breadcrumb.scss

@@ -47,11 +47,10 @@
       cursor: pointer;
       display: inline-block;
       transition: transform var(--animation-duration) ease;
-  
       > svg {
         width: px2rem(10px);
         height: px2rem(10px);
-        top: px2rem(1px);
+        top: px2rem(-2px);
       }
     }
 
@@ -60,7 +59,7 @@
       color: var(--Breadcrumb-item-hover-color);
     }
 
-    &.is-opened &-default{
+    &.is-opened &-default {
       color: var(--Breadcrumb-item-hover-color);
     }
   }
@@ -81,7 +80,8 @@
     background: var(--DropDown-menu-bg);
     list-style: none;
     padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
-    border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
+    border: var(--DropDown-menu-borderWidth) solid
+      var(--DropDown-menu-borderColor);
     border-radius: var(--DropDown-menu-borderRadius);
     box-shadow: var(--DropDown-menu-boxShadow);
     min-width: 100%;
@@ -90,7 +90,8 @@
   }
 
   &-dropdown > li {
-    padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY);
+    padding: var(--BreadcrumbDropdown-item-paddingX)
+      var(--BreadcrumbDropdown-item-paddingY);
     white-space: nowrap;
     box-sizing: border-box;
     padding-left: px2rem(12px);

package/scss/components/_button-group.scss

@@ -50,6 +50,11 @@
   }
   &-button--active {
     z-index: 1;
+
+    &.is-disabled {
+      color: var(--text-color);
+      border: var(--borderWidth) solid var(--borderColor);
+    }
   }
 }
 
@@ -149,8 +154,12 @@
   display: flex;
 
   .#{$ns}Button,
-  .#{$ns}ButtonGroup {
+  .#{$ns}ButtonGroup,
+  .#{$ns}Badge {
     flex-grow: 1;
     text-align: center;
+    .#{$ns}Button {
+      width: 100%;
+    }
   }
 }

package/scss/components/_card.scss

@@ -46,7 +46,6 @@
   &-heading {
     display: flex;
     padding: var(--gap-md);
-    flex: 1 0 auto;
   }
 
   &-avtar {
@@ -115,15 +114,23 @@
   &-fieldValue {
     position: relative;
     flex-basis: 0;
-    flex-grow: 1;
-    width: 0;
+    flex-grow: 2;
+    min-width: 0;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
   &-fieldLabel {
-    width: px2rem(60px);
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 40%;
     color: var(--text--muted-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    word-wrap: break-word;
   }
 
   &-actions {

package/scss/components/_color.scss

@@ -7,7 +7,6 @@
     width: px2rem(16px);
     height: px2rem(16px);
     box-shadow: var(--boxShadowSm);
-    background: #ccc;
   }
 
   &-value {

package/scss/components/_drawer.scss

@@ -266,6 +266,7 @@
     transform: translate3d(0, -100%, 0);
     box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
     min-height: 120px;
+    border-bottom: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-resizeCtrl {
@@ -294,6 +295,7 @@
     transform: translate3d(100%, 0, 0);
     box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2);
     min-width: 120px;
+    border-left: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-footer {
@@ -343,6 +345,7 @@
     transform: translate3d(0, 100%, 0);
     box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2);
     min-height: 120px;
+    border-top: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-resizeCtrl {
@@ -372,6 +375,7 @@
     box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2);
     border-width: 0 var(--Drawer-content-borderWidth) 0 0;
     min-width: 120px;
+    border-right: var(--common-popover-border);
   }
 
   .#{$ns}Drawer-resizeCtrl {

package/scss/components/_dropdown.scss

@@ -50,7 +50,8 @@
       top: 100%;
       left: 0;
       margin: px2rem(1px) 0 0;
-      border: none;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
       border-radius: var(--DropDown-menu-borderRadius);
       box-shadow: var(--DropDown-menu-boxShadow);
       min-width: var(--DropDown-menu-minWidth);

package/scss/components/_formula.scss

@@ -265,8 +265,8 @@
         text-align: center;
         padding: 0 #{px2rem(8px)};
         border-radius: var(--borderRadius);
-        background: #f5f5f5;
-        color: var(--black);
+        background: var(--colors-neutral-fill-10);
+        color: var(--colors-neutral-text-2);
         font-size: var(--fontSizeSm);
         line-height: #{px2rem(24px)};
         height: #{px2rem(24px)};
@@ -479,9 +479,6 @@
     }
 
     &.is-filled {
-      fill: var(--InputFormula-icon-color-onActive);
-      color: var(--InputFormula-icon-color-onActive);
-
       &.icon-function.icon {
         font-size: var(--InputFormula-icon-size) !important;
       }
@@ -514,7 +511,7 @@
   border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
   padding: 0 var(--Form-input-paddingX) 0 0;
   border-radius: var(--borderRadius);
-  background-color: #fff;
+  background-color: var(--colors-neutral-fill-11);
   height: var(--Form-input-height);
 
   &.#{$ns}FormulaPicker--text {
@@ -563,6 +560,7 @@
   }
 
   .#{$ns}FormulaPicker-toggler {
+    color: var(--colors-neutral-text-2);
     .icon-function {
       transform: scale(1.3);
     }
@@ -573,6 +571,7 @@
 
     &:hover {
       cursor: pointer;
+      color: var(--colors-brand-5);
     }
   }
 }

package/scss/components/_image-gallery.scss

@@ -17,6 +17,7 @@
   border: none;
   border-radius: 0;
   max-width: 1010px !important;
+  padding-top: 0;
 
   &-close {
     position: absolute;
@@ -36,12 +37,13 @@
   }
 
   &-title {
-    height: px2rem(30px);
+    height: px2rem(18px);
     vertical-align: top;
-    line-height: px2rem(30px);
+    line-height: px2rem(18px);
     font-size: px2rem(12px);
     color: var(--white);
     text-align: center;
+    margin-bottom: 18px;
   }
 
   &-main {