styles: 下拉框、日期、时间组件主题样式 (#6184)

* 单测范围修改 (#6133)

* 单测范围修改

* 单测范围修改

* feat:下拉框&时间/日期选择器主题适配 (#6134)

* feat: select支持主题变量配置

* feat:下拉框&时间/日期选择器主题适配

* fix:更新测试用例

* fix:代码扫描修复

* fix:代码扫描修复

---------

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* feat:下拉框主题样式优化 (#6142)

* feat:下拉框主题样式优化

* fix:测试用例修复

---------

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix: 下拉框&日期测试修复 (#6183)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix:恢复测试用例 (#6189)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix:恢复测试用例 (#6191)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com>
Co-authored-by: hongyang03 <hongyang03@baidu.com>

.github/workflows/codeql-analysis.yml

@@ -9,14 +9,14 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master ]
+    branches: ['**']
   schedule:
     - cron: '21 7 * * 2'
 
@@ -28,40 +28,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
+      - name: Checkout repository
-      uses: actions/checkout@v2
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
+      # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
+      - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+        uses: github/codeql-action/init@v1
-      with:
+        with:
-        languages: ${{ matrix.language }}
+          languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
+          # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
+          # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
+      # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
+      - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+        uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
+      # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
+      #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      #    uses a compiled language
 
-    #- run: |
+      #- run: |
-    #   make bootstrap
+      #   make bootstrap
-    #   make release
+      #   make release
 
-    - name: Perform CodeQL Analysis
+      - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+        uses: github/codeql-action/analyze@v1

.github/workflows/gh-pages.yml

@@ -2,7 +2,7 @@ name: gh-pages
 
 on:
   push:
-    branches: [master]
+    branches: ['**']
 
 jobs:
   build:
@@ -40,7 +40,7 @@ jobs:
           SINGLE_COMMIT: true
       - name: Generate coverage report
         env:
-          NODE_OPTIONS: "--max-old-space-size=8192"
+          NODE_OPTIONS: '--max-old-space-size=8192'
         run: |
           npm run coverage
       - uses: codecov/codecov-action@v2

.github/workflows/pr-test.yml

@@ -2,7 +2,7 @@ name: PR test
 
 on:
   pull_request:
-    branches: [master]
+    branches: ['**']
 
 jobs:
   build:

packages/amis-ui/scss/_components.scss

@@ -832,7 +832,7 @@
   --transfer-group-font-color: var(--colors-neutral-text-5);
   --transfer-group-fontWeight: var(--fonts-weight-6);
   --transfer-group-lineHeight: var(--fonts-lineHeight-2);
-  --transfer-table-last-paddingRight: var(--sizes-size-10);
+  --transfer-table-last-paddingRight: var(--sizes-base-9);
   --transfer-table-header-marginTop: var(--sizes-size-1);
   --transfer-table-header-marginLeft: var(--sizes-size-1);
   --transfer-table-header-paddingTop: var(--sizes-size-5);
@@ -1128,13 +1128,13 @@
   --inputNumber-base-default-unit-paddingTop: calc(
     (
         var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-          var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
+          var(--Form-input-fontSize) - var(--Form-input-borderWidth) * 2
       ) / 2
   );
   --inputNumber-base-default-unit-paddingBottom: calc(
     (
         var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-          var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
+          var(--Form-input-fontSize) - var(--Form-input-borderWidth) * 2
       ) / 2
   );
   --inputNumber-base-default-unit-paddingLeft: var(--sizes-size-6);
@@ -1468,7 +1468,7 @@
   --Checkbox--sm-inner-size: var(--sizes-size-5);
   --Checkbox--sm-size: var(--sizes-size-8);
   --Checkbox-borderRadius: #{px2rem(2px)};
-  --Checkbox-color: var(--Form-input-borderColor);
+  --Checkbox-color: var(--borderColor);
   --Checkbox-gap: var(--gap-xs);
   --Checkbox-gb: #fff;
   --Checkbox-inner-size: var(--sizes-size-5);
@@ -2576,4 +2576,461 @@
   --ImageControl-addBtn-onHover-color: var(--inputImage-base-hover-color);
   --ImageControl-addBtn-upload-color: var(--inputImage-base-default-color);
   --ImageControl-progress-borderRadius: var(--borders-radius-2);
+
+  --select-base-default-top-border-color: var(--colors-neutral-line-8);
+  --select-base-default-top-border-width: var(--borders-width-2);
+  --select-base-default-top-border-style: var(--borders-style-2);
+  --select-base-default-right-border-color: var(--colors-neutral-line-8);
+  --select-base-default-right-border-width: var(--borders-width-2);
+  --select-base-default-right-border-style: var(--borders-style-2);
+  --select-base-default-bottom-border-color: var(--colors-neutral-line-8);
+  --select-base-default-bottom-border-width: var(--borders-width-2);
+  --select-base-default-bottom-border-style: var(--borders-style-2);
+  --select-base-default-left-border-color: var(--colors-neutral-line-8);
+  --select-base-default-left-border-width: var(--borders-width-2);
+  --select-base-default-left-border-style: var(--borders-style-2);
+  --select-base-default-top-right-border-radius: var(--borders-radius-3);
+  --select-base-default-top-left-border-radius: var(--borders-radius-3);
+  --select-base-default-bottom-right-border-radius: var(--borders-radius-3);
+  --select-base-default-bottom-left-border-radius: var(--borders-radius-3);
+  --select-base-default-paddingTop: var(--sizes-size-3);
+  --select-base-default-paddingBottom: var(--sizes-size-3);
+  --select-base-default-paddingLeft: var(--sizes-size-6);
+  --select-base-default-paddingRight: var(--sizes-size-6);
+  --select-base-default-color: var(--colors-neutral-text-2);
+  --select-base-default-fontSize: var(--fonts-size-7);
+  --select-base-default-fontWeight: var(--fonts-weight-6);
+  --select-base-default-bg-color: transparent;
+  --select-base-default-option-paddingTop: var(--sizes-size-0);
+  --select-base-default-option-paddingBottom: var(--sizes-size-0);
+  --select-base-default-option-paddingLeft: var(--sizes-size-6);
+  --select-base-default-option-paddingRight: var(--sizes-size-6);
+  --select-base-default-option-color: var(--colors-neutral-text-2);
+  --select-base-default-option-fontSize: var(--fonts-size-7);
+  --select-base-default-option-fontWeight: var(--fonts-weight-6);
+  --select-base-default-option-bg-color: transparent;
+  --select-base-default-option-line-height: var(--sizes-base-16);
+  --select-base-hover-top-border-color: var(--colors-brand-5);
+  --select-base-hover-top-border-width: var(--borders-width-2);
+  --select-base-hover-top-border-style: var(--borders-style-2);
+  --select-base-hover-right-border-color: var(--colors-brand-5);
+  --select-base-hover-right-border-width: var(--borders-width-2);
+  --select-base-hover-right-border-style: var(--borders-style-2);
+  --select-base-hover-bottom-border-color: var(--colors-brand-5);
+  --select-base-hover-bottom-border-width: var(--borders-width-2);
+  --select-base-hover-bottom-border-style: var(--borders-style-2);
+  --select-base-hover-left-border-color: var(--colors-brand-5);
+  --select-base-hover-left-border-width: var(--borders-width-2);
+  --select-base-hover-left-border-style: var(--borders-style-2);
+  --select-base-hover-bg-color: transparent;
+  --select-base-hover-option-color: var(--colors-neutral-text-2);
+  --select-base-hover-option-bg-color: var(--colors-brand-10);
+  --select-base-active-top-border-color: var(--colors-brand-5);
+  --select-base-active-top-border-width: var(--borders-width-2);
+  --select-base-active-top-border-style: var(--borders-style-2);
+  --select-base-active-right-border-color: var(--colors-brand-5);
+  --select-base-active-right-border-width: var(--borders-width-2);
+  --select-base-active-right-border-style: var(--borders-style-2);
+  --select-base-active-bottom-border-color: var(--colors-brand-5);
+  --select-base-active-bottom-border-width: var(--borders-width-2);
+  --select-base-active-bottom-border-style: var(--borders-style-2);
+  --select-base-active-left-border-color: var(--colors-brand-5);
+  --select-base-active-left-border-width: var(--borders-width-2);
+  --select-base-active-left-border-style: var(--borders-style-2);
+  --select-base-active-shadow: var(--shadows-shadow-none);
+  --select-base-active-bg-color: transparent;
+  --select-base-active-option-color: var(--colors-brand-5);
+  --select-base-active-option-bg-color: transparent;
+  --select-base-disabled-top-border-color: var(--colors-neutral-line-8);
+  --select-base-disabled-top-border-width: var(--borders-width-2);
+  --select-base-disabled-top-border-style: var(--borders-style-2);
+  --select-base-disabled-right-border-color: var(--colors-neutral-line-8);
+  --select-base-disabled-right-border-width: var(--borders-width-2);
+  --select-base-disabled-right-border-style: var(--borders-style-2);
+  --select-base-disabled-bottom-border-color: var(--colors-neutral-line-8);
+  --select-base-disabled-bottom-border-width: var(--borders-width-2);
+  --select-base-disabled-bottom-border-style: var(--borders-style-2);
+  --select-base-disabled-left-border-color: var(--colors-neutral-line-8);
+  --select-base-disabled-left-border-width: var(--borders-width-2);
+  --select-base-disabled-left-border-style: var(--borders-style-2);
+  --select-base-disabled-bg-color: var(--colors-neutral-fill-10);
+  --select-base-disabled-option-color: var(--colors-neutral-text-6);
+  --select-base-disabled-option-bg-color: transparent;
+  --select-multiple-top-right-border-radius: var(--borders-radius-2);
+  --select-multiple-top-left-border-radius: var(--borders-radius-2);
+  --select-multiple-bottom-right-border-radius: var(--borders-radius-2);
+  --select-multiple-bottom-left-border-radius: var(--borders-radius-2);
+  --select-multiple-paddingTop: var(--sizes-size-0);
+  --select-multiple-paddingBottom: var(--sizes-size-0);
+  --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-marginLeft: var(--sizes-size-0);
+  --select-multiple-marginRight: var(--sizes-size-3);
+  --select-multiple-color: var(--colors-neutral-text-2);
+  --select-multiple-fontSize: var(--fonts-size-8);
+  --select-multiple-fontWeight: var(--fonts-weight-6);
+  --select-multiple-bg-color: var(--colors-neutral-fill-10);
+  --select-multiple-hover-bg-color: var(--colors-brand-10);
+  --select-multiple-icon-color: var(--colors-neutral-text-6);
+  --select-multiple-icon-hover-color: var(--colors-neutral-text-2);
+  --select-group-color: var(--colors-neutral-text-5);
+  --select-group-fontSize: var(--fonts-size-7);
+  --select-group-fontWeight: var(--fonts-weight-6);
+  --select-group-lineHeight: var(--fonts-lineHeight-2);
+  --select-group-paddingTop: var(--sizes-size-3);
+  --select-group-paddingBottom: var(--sizes-size-3);
+  --select-group-paddingLeft: var(--sizes-size-7);
+  --select-group-paddingRight: var(--sizes-size-7);
+  --select-table-header-paddingTop: var(--sizes-size-5);
+  --select-table-header-paddingBottom: var(--sizes-size-5);
+  --select-table-header-paddingLeft: var(--sizes-size-7);
+  --select-table-header-paddingRight: var(--sizes-base-9);
+  --select-table-option-paddingTop: var(--sizes-size-4);
+  --select-table-option-paddingBottom: var(--sizes-size-5);
+  --select-table-option-paddingLeft: var(--sizes-size-7);
+  --select-table-option-paddingRight: var(--sizes-base-9);
+  --select-table-color: var(--colors-neutral-text-2);
+  --select-table-fontSize: var(--fonts-size-8);
+  --select-tree-color: var(--colors-neutral-text-2);
+  --select-tree-fontSize: var(--fonts-size-7);
+  --select-tree-hover-bg-color: var(--colors-neutral-fill-10);
+  --select-tree-active-bg-color: var(--colors-brand-10);
+
+  --Form-select-bg: var(--select-base-default-bg-color);
+  --Form-select-height: var(--Form-select-outer-top);
+  --Form-select-borderColor: var(--select-base-default-top-border-color)
+    var(--select-base-default-right-border-color)
+    var(--select-base-default-bottom-border-color)
+    var(--select-base-default-left-border-color);
+  --Form-select-borderRadius: var(--select-base-default-top-left-border-radius)
+    var(--select-base-default-top-right-border-radius)
+    var(--select-base-default-bottom-right-border-radius)
+    var(--select-base-default-bottom-left-border-radius);
+  --Form-select-borderWidth: var(--select-base-default-top-border-width)
+    var(--select-base-default-right-border-width)
+    var(--select-base-default-bottom-border-width)
+    var(--select-base-default-left-border-width);
+  --Form-select-caret-iconColor: var(--colors-neutral-text-5);
+  --Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5);
+  --Form-select-caret-fontSize: var(--fonts-size-8);
+  --Form-select-checkall-bottomBorder: #eceff8;
+  --Form-select-color: var(--select-base-default-color);
+  --Form-select-input-fontSize: var(--fontSizeSm);
+  --Form-select-menu-bg: var(--colors-neutral-fill-11);
+  --Form-select-menu-color: var(--colors-neutral-text-2);
+  --Form-select-menu-height: var(--sizes-base-12);
+  --Form-select-menu-onActive-bg: var(--select-base-active-option-bg-color);
+  --Form-select-menu-onActive-color: var(--select-base-active-option-color);
+  --Form-select-menu-onDisabled-bg: var(--select-base-disabled-option-bg-color);
+  --Form-select-menu-onDisabled-color: var(--select-base-disabled-option-color);
+  --Form-select-menu-onHover-bg: var(--select-base-hover-option-bg-color);
+  --Form-select-menu-onHover-color: var(--select-base-hover-option-color);
+  --Form-select-group-color: var(--Form-select-caret-iconColor);
+  --Form-select-onError-borderColor: var(--Form-input-onError-borderColor);
+  --Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
+  --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-top: var(--sizes-base-16);
+  --Form-select-outer-boxShadow: var(--shadows-shadow-normal);
+  --Form-select-paddingX: var(--Form-input-paddingX);
+  --Form-select-placeholderColor: var(--Form-input-placeholderColor);
+  --Form-select-popoverGap: var(--borders-radius-3);
+  --Form-select-icon-rigin: var(--sizes-size-9);
+  --Form-select-search-height: var(--sizes-base-15);
+  --Form-select-value-bgColor: var(--select-multiple-bg-color);
+  --Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
+  --Form-select-value-borderColor: var(--colors-neutral-line-9);
+  --Form-select-valueIcon-color: var(--select-multiple-icon-color);
+  --Form-select-valueIcon-color--dark: var(--colors-neutral-text-8);
+  --Form-select-valueIcon-onHover-color: var(
+    --select-multiple-icon-hover-color
+  );
+  --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
+  --Form-selectOption-height: var(--Form-select-height);
+  --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
+  --Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color);
+  --Form-selectValue-borderColor: var(--colors-brand-7);
+  --Form-selectValue-color: var(--colors-brand-5);
+  --Form-selectValue-fontSize: var(--select-multiple-fontSize);
+  --Form-selectValue-onDisable-bg: #{lighten(
+      saturate(lighten($info, 40%), 2.5%),
+      5%
+    )};
+  --Form-selectValue-onHover-bg: #{darken(
+      saturate(lighten($info, 40%), 2.5%),
+      5%
+    )};
+  --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
+  --Form-selectValue-onInvalid-color: var(--danger);
+  --Form-valueLabel-maxWidth: #{px2rem(120px)};
+  --Form-select-onFocus-boxShadow: none;
+  --ResultBox-tag-height: #{px2rem(24px)};
+  --ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);
+  --ResultBox-icon--onDisabled-color: #ebebeb;
+  --ResultBox-icon--onHover-color: var(--select-multiple-icon-hover-color);
+  --ResultBox-icon-color: var(--select-multiple-icon-color);
+  --ResultBox-value--onDisabled-color: #cccccc;
+  --ResultBox-value--onHover-bg: var(--select-multiple-hover-bg-color);
+  --ResultBox-value--onHover-bg--dark: #b8babf;
+  --ResultBox-value-bg: var(--select-multiple-bg-color);
+  --ResultBox-value-color: var(--select-multiple-color);
+  --ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
+  --ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
+  --Tree-indent: var(--gap-md);
+  --Tree-icon-gap: var(--sizes-size-5);
+  --Tree-icon-margin-right: #{px2rem(8px)};
+  --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
+  --Tree-item-onHover-bg: var(--colors-neutral-fill-10);
+  --Tree-item-onHover-bg-pure: var(--select-tree-hover-bg-color);
+  --Tree-itemArrowWidth: #{px2rem(16px)};
+  --Tree-itemHeight: var(--sizes-base-12);
+  --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
+  --TreeSelect-popover-bg: var(--colors-neutral-fill-11);
+  --Tree-item-text-max-height: #{px2rem(250px)};
+  --Tree-item-text-top: #{px2rem(4px)};
+  --Tree-item-arrow-padding-left: #{px2rem(4px)};
+  --Tree-item-arrow-color: #84868c;
+  --Tree-item-onChekced-bg: var(--select-tree-active-bg-color);
+  --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
+
+  --inputDate-default-top-border-color: var(--colors-neutral-line-8);
+  --inputDate-default-top-border-width: var(--borders-width-2);
+  --inputDate-default-top-border-style: var(--borders-style-2);
+  --inputDate-default-right-border-color: var(--colors-neutral-line-8);
+  --inputDate-default-right-border-width: var(--borders-width-2);
+  --inputDate-default-right-border-style: var(--borders-style-2);
+  --inputDate-default-bottom-border-color: var(--colors-neutral-line-8);
+  --inputDate-default-bottom-border-width: var(--borders-width-2);
+  --inputDate-default-bottom-border-style: var(--borders-style-2);
+  --inputDate-default-left-border-color: var(--colors-neutral-line-8);
+  --inputDate-default-left-border-width: var(--borders-width-2);
+  --inputDate-default-left-border-style: var(--borders-style-2);
+  --inputDate-default-top-right-border-radius: var(--borders-radius-3);
+  --inputDate-default-top-left-border-radius: var(--borders-radius-3);
+  --inputDate-default-bottom-right-border-radius: var(--borders-radius-3);
+  --inputDate-default-bottom-left-border-radius: var(--borders-radius-3);
+  --inputDate-default-paddingTop: var(--sizes-size-3);
+  --inputDate-default-paddingBottom: var(--sizes-size-3);
+  --inputDate-default-paddingLeft: var(--sizes-size-6);
+  --inputDate-default-paddingRight: var(--sizes-base-6);
+  --inputDate-default-fontSize: var(--fonts-size-7);
+  --inputDate-default-fontWeight: var(--fonts-weight-6);
+  --inputDate-default-height: var(--sizes-base-16);
+  --inputDate-default-color: var(--colors-neutral-text-2);
+  --inputDate-default-bg-color: var(--colors-neutral-fill-11);
+  --inputDate-default-icon: '<svg viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1.338385, -2.000000)"><rect x="0" y="0" width="16" height="16"></rect><path d="M6,2 L6,3 L10,3 L10,2 L11,2 L11,3 L14,3 L14,14 L2,14 L2,3 L5,3 L5,2 L6,2 Z M13,7 L3,7 L3,13 L13,13 L13,7 Z M5,4 L3,4 L3,6 L13,6 L13,4 L11,4 L11,5 L10,5 L10,4 L6,4 L6,5 L5,5 L5,4 Z" fill="currentColor"></path></g></g></svg>';
+  --inputDate-default-icon-color: var(--colors-brand-5);
+  --inputDate-default-icon-size: var(--sizes-base-7);
+  --inputDate-default-title-color: var(--colors-neutral-text-2);
+  --inputDate-default-title-arrow-color: var(--colors-neutral-text-5);
+  --inputDate-default-option-color: var(--colors-neutral-text-2);
+  --inputDate-default-option-bg-color: var(--colors-neutral-fill-11);
+  --inputDate-default-option-today-border-color: var(--colors-brand-5);
+  --inputDate-default-option-top-right-border-radius: var(--borders-radius-2);
+  --inputDate-default-option-top-left-border-radius: var(--borders-radius-2);
+  --inputDate-default-option-bottom-right-border-radius: var(
+    --borders-radius-2
+  );
+  --inputDate-default-option-bottom-left-border-radius: var(--borders-radius-2);
+  --inputDate-hover-top-border-color: var(--colors-brand-5);
+  --inputDate-hover-top-border-width: var(--borders-width-2);
+  --inputDate-hover-top-border-style: var(--borders-style-2);
+  --inputDate-hover-right-border-color: var(--colors-brand-5);
+  --inputDate-hover-right-border-width: var(--borders-width-2);
+  --inputDate-hover-right-border-style: var(--borders-style-2);
+  --inputDate-hover-bottom-border-color: var(--colors-brand-5);
+  --inputDate-hover-bottom-border-width: var(--borders-width-2);
+  --inputDate-hover-bottom-border-style: var(--borders-style-2);
+  --inputDate-hover-left-border-color: var(--colors-brand-5);
+  --inputDate-hover-left-border-width: var(--borders-width-2);
+  --inputDate-hover-left-border-style: var(--borders-style-2);
+  --inputDate-hover-color: var(--colors-neutral-text-2);
+  --inputDate-hover-bg-color: var(--colors-neutral-fill-11);
+  --inputDate-hover-title-color: var(--colors-brand-6);
+  --inputDate-hover-title-arrow-color: var(--colors-neutral-text-2);
+  --inputDate-hover-option-color: var(--colors-neutral-text-2);
+  --inputDate-hover-option-bg-color: var(--colors-neutral-fill-10);
+  --inputDate-active-top-border-color: var(--colors-brand-5);
+  --inputDate-active-top-border-width: var(--borders-width-2);
+  --inputDate-active-top-border-style: var(--borders-style-2);
+  --inputDate-active-right-border-color: var(--colors-brand-5);
+  --inputDate-active-right-border-width: var(--borders-width-2);
+  --inputDate-active-right-border-style: var(--borders-style-2);
+  --inputDate-active-bottom-border-color: var(--colors-brand-5);
+  --inputDate-active-bottom-border-width: var(--borders-width-2);
+  --inputDate-active-bottom-border-style: var(--borders-style-2);
+  --inputDate-active-left-border-color: var(--colors-brand-5);
+  --inputDate-active-left-border-width: var(--borders-width-2);
+  --inputDate-active-left-border-style: var(--borders-style-2);
+  --inputDate-active-shadow: var(--shadows-shadow-none);
+  --inputDate-active-color: var(--colors-neutral-text-2);
+  --inputDate-active-bg-color: var(--colors-neutral-fill-11);
+  --inputDate-active-option-color: var(--colors-neutral-text-11);
+  --inputDate-active-option-bg-color: var(--colors-brand-5);
+  --inputDate-disabled-top-border-color: var(--colors-neutral-line-8);
+  --inputDate-disabled-top-border-width: var(--borders-width-2);
+  --inputDate-disabled-top-border-style: var(--borders-style-2);
+  --inputDate-disabled-right-border-color: var(--colors-neutral-line-8);
+  --inputDate-disabled-right-border-width: var(--borders-width-2);
+  --inputDate-disabled-right-border-style: var(--borders-style-2);
+  --inputDate-disabled-bottom-border-color: var(--colors-neutral-line-8);
+  --inputDate-disabled-bottom-border-width: var(--borders-width-2);
+  --inputDate-disabled-bottom-border-style: var(--borders-style-2);
+  --inputDate-disabled-left-border-color: var(--colors-neutral-line-8);
+  --inputDate-disabled-left-border-width: var(--borders-width-2);
+  --inputDate-disabled-left-border-style: var(--borders-style-2);
+  --inputDate-disabled-color: var(--colors-neutral-text-2);
+  --inputDate-disabled-bg-color: var(--colors-neutral-fill-10);
+  --inputDate-disabled-option-color: var(--colors-neutral-text-6);
+  --inputDate-disabled-option-bg-color: transparent;
+  --inputDate-other-color: var(--colors-neutral-text-2);
+  --inputDate-other-bg-color: transparent;
+  --inputDate-other-top-right-border-radius: var(--borders-radius-2);
+  --inputDate-other-top-left-border-radius: var(--borders-radius-2);
+  --inputDate-other-bottom-right-border-radius: var(--borders-radius-2);
+  --inputDate-other-bottom-left-border-radius: var(--borders-radius-2);
+  --inputDate-other-hover-color: var(--colors-neutral-text-2);
+  --inputDate-other-hover-bg-color: var(--colors-neutral-fill-10);
+  --inputDate-other-active-color: var(--colors-neutral-text-11);
+  --inputDate-other-active-bg-color: var(--colors-brand-5);
+  --inputDate-other-disabled-color: var(--colors-neutral-text-6);
+  --inputDate-other-disabled-bg-color: var(--colors-neutral-fill-10);
+  --inputDate-range-line-height: var(--borders-width-3);
+  --inputDate-range-line-color: var(--colors-brand-4);
+  --inputDate-range-separator-width: var(--sizes-size-5);
+  --inputDate-range-separator-margin: var(--sizes-size-5);
+  --inputDate-range-separator-color: var(--colors-neutral-fill-6);
+  --inputDate-range-between-color: var(--colors-brand-10);
+
+  --DatePicker-bg: var(--inputDate-default-bg-color);
+  --DatePicker-borderColor: var(--inputDate-default-top-border-color)
+    var(--inputDate-default-right-border-color)
+    var(--inputDate-default-bottom-border-color)
+    var(--inputDate-default-left-border-color);
+  --DatePicker-borderStyle: var(--inputDate-default-top-border-style)
+    var(--inputDate-default-right-border-style)
+    var(--inputDate-default-bottom-border-style)
+    var(--inputDate-default-left-border-style);
+  --DatePicker-borderWidth: var(--inputDate-default-top-border-width)
+    var(--inputDate-default-right-border-width)
+    var(--inputDate-default-bottom-border-width)
+    var(--inputDate-default-left-border-width);
+  --DatePicker-borderRadius: var(--inputDate-default-top-left-border-radius)
+    var(--inputDate-default-top-right-border-radius)
+    var(--inputDate-default-bottom-right-border-radius)
+    var(--inputDate-default-bottom-left-border-radius);
+  --DatePicker-color: var(--inputDate-default-color);
+  --DatePicker-header-onHover-color: var(--inputDate-hover-title-color);
+  --DatePicker-arrow-color: var(--inputDate-default-title-arrow-color);
+  --DatePicker-fontSize: var(--inputDate-default-fontSize);
+  --DatePicker-header-select-borderColor: #fff;
+  --DatePicker-height: var(--inputDate-default-height);
+  --DatePicker-iconColor: var(--icon-color);
+  --DatePicker-lineHeight: var(--Form-input-lineHeight);
+  --DatePicker-onFocused-borderColor: var(--inputDate-active-top-border-color)
+    var(--inputDate-active-right-border-color)
+    var(--inputDate-active-bottom-border-color)
+    var(--inputDate-active-left-border-color);
+  --DatePicker-onHover-bg: var(--inputDate-hover-bg-color);
+  --DatePicker-onHover-borderColor: var(--inputDate-hover-top-border-color)
+    var(--inputDate-hover-right-border-color)
+    var(--inputDate-hover-bottom-border-color)
+    var(--inputDate-hover-left-border-color);
+  --DatePicker-onDisabled-bg: var(--colors-neutral-text-9);
+  --DatePicker-onDisabled-color: var(--colors-neutral-text-6);
+  --DatePicker-onHover-iconColor: var(--colors-brand-5);
+  --DatePicker-paddingX: #{px2rem(12px)};
+  --DatePicker-paddingY: var(--sizes-size-3);
+  --DatePicker-placeholderColor: var(--colors-neutral-text-6);
+  --DatePicker-minWidth: calc(
+    var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 +
+      var(--Form-input-clearBtn-size) * 2
+  );
+  --DateRangePicker-minWidth: calc(
+    var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 +
+      var(--Form-input-clearBtn-size) * 2
+  );
+  --DateRangePicker-activeCursor-color: var(--inputDate-range-line-color);
+  --DateRangePicker-activeCursor-height: var(--inputDate-range-line-height);
+  --Calendar-btn-bg: var(--info);
+  --Calendar-btn-border: var(--Calendar-btn-bg);
+  --Calendar-btn-borderRadius: var(--Button-borderRadius);
+  --Calendar-btn-color: var(--colors-neutral-fill-11);
+  --Calendar-btn-fontSize: var(--fontSizeSm);
+  --Calendar-btn-height: #{px2rem(30px)};
+  --Calendar-btn-lineHeight: var(--lineHeightBase);
+  --Calendar-btn-onActive-bg: var(--colors-brand-4);
+  --Calendar-btn-onActive-border: var(--colors-brand-3);
+  --Calendar-btn-onActive-color: var(--Calendar-btn-color);
+  --Calendar-btn-onHover-bg: var(--colors-brand-4);
+  --Calendar-btn-onHover-border: var(--colors-brand-3);
+  --Calendar-btn-onHover-color: var(--Calendar-btn-color);
+  --Calendar-btn-paddingX: #{px2rem(10px)};
+  --Calendar-btn-paddingY: calc(
+    (
+        var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) *
+          var(--Calendar-btn-fontSize)
+      ) / 2
+  );
+  --Calendar-btnCancel-bg: var(--light);
+  --Calendar-btnCancel-border: var(--colors-neutral-line-7);
+  --Calendar-btnCancel-borderRadius: var(--borders-radius-3);
+  --Calendar-btnCancel-color: var(--text-color);
+  --Calendar-btnCancel-onActive-bg: var(--colors-neutral-fill-11);
+  --Calendar-btnCancel-onActive-border: var(--colors-brand-4);
+  --Calendar-btnCancel-onActive-color: var(--colors-brand-4);
+  --Calendar-btnCancel-onHover-bg: var(--colors-neutral-fill-11);
+  --Calendar-btnCancel-onHover-border: var(--colors-brand-6);
+  --Calendar-btnCancel-onHover-color: var(--colors-brand-6);
+  --Calendar-cell-bg: var(--inputDate-default-option-bg-color);
+  --Calendar-cell-onActive-bg: var(--inputDate-active-option-bg-color);
+  --Calendar-cell-onBetween-bg: var(--inputDate-range-between-color);
+  --Calendar-cell-onDisabled-bg: var(--inputDate-other-disabled-bg-color);
+  --Calendar-cell-onHover-bg: var(--inputDate-hover-option-bg-color);
+  --Calendar-color: var(--inputDate-default-option-color);
+  --Calendar-fontSize: var(--fontSizeSm);
+  --Calendar-input-borderColor: var(--borderColor);
+  --Calendar-input-borderRadius: var(--borders-radius-3);
+  --Calendar-input-color: var(--info);
+  --Calendar-input-fontSize: var(--fontSizeBase);
+  --Calendar-input-height: #{px2rem(40px)};
+  --Calendar-input-lineHeight: var(--lineHeightBase);
+  --Calendar-input-onFocused-borderColor: var(--info);
+  --Calendar-input-paddingX: #{px2rem(10px)};
+  --Calendar-input-paddingY: calc(
+    (
+        var(--Calendar-input-height) - var(--Calendar-input-lineHeight) *
+          var(--Calendar-input-fontSize)
+      ) / 2
+  );
+  --Calendar-shortcut-color: #151b26;
+  --Calendar-shortcut-decoration: none;
+  --Calendar-shortcut-onHover-color: var(--colors-brand-6);
+  --Calendar-shortcut-onHover-decoration: none;
+  --Calendar-shortcuts-bg: var(--colors-neutral-text-9);
+  --Calendar-shortcuts-height: var(--sizes-size-9);
+  --Calendar-wLabel-color: var(--colors-neutral-text-6);
+  --Calendar-icon-bottom: #{px2rem(-4px)};
+  --Calendar-icon-width: var(--sizes-size-6);
+  --Calendar-icon-height: var(--sizes-size-6);
+  --Calendar-borderWidth: var(--borders-width-2);
+  --Calendar-borderColor: var(--inputDate-default-option-today-border-color);
+  --Calendar-rdt-day: var(--sizes-base-49);
+  --Calendar-schedule-content-padding: 0 var(--sizes-size-3);
+  --Calendar-schedule-content-height: var(--sizes-base-10);
+  --Calendar-schedule-content-color: var(--colors-neutral-text-11);
+
+  --inputTime-default-icon: '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="currentColor" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="currentColor" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>';
+  --inputTime-default-fontSize: var(--fonts-size-8);
+  --inputTime-default-fontWeight: var(--fonts-weight-6);
+  --inputTime-default-color: var(--colors-neutral-text-2);
+  --inputTime-default-bg-color: var(--colors-neutral-text-11);
+  --inputTime-hover-color: var(--colors-neutral-text-2);
+  --inputTime-hover-bg-color: var(--colors-neutral-fill-10);
+  --inputTime-active-color: var(--colors-neutral-text-2);
+  --inputTime-active-bg-color: var(--colors-brand-10);
 }

packages/amis-ui/scss/_properties.scss

@@ -210,75 +210,6 @@ $remFactor: 16px;
   );
   --Breadcrumb-item-disabled-color: var(--colors-neutral-text-6);
 
-  --Calendar-btn-bg: var(--info);
-  --Calendar-btn-border: var(--Calendar-btn-bg);
-  --Calendar-btn-borderRadius: var(--Button-borderRadius);
-  --Calendar-btn-color: var(--colors-neutral-fill-11);
-  --Calendar-btn-fontSize: var(--fontSizeSm);
-  --Calendar-btn-height: #{px2rem(30px)};
-  --Calendar-btn-lineHeight: var(--lineHeightBase);
-  --Calendar-btn-onActive-bg: var(--colors-brand-4);
-  --Calendar-btn-onActive-border: var(--colors-brand-3);
-  --Calendar-btn-onActive-color: var(--Calendar-btn-color);
-  --Calendar-btn-onHover-bg: var(--colors-brand-4);
-  --Calendar-btn-onHover-border: var(--colors-brand-3);
-  --Calendar-btn-onHover-color: var(--Calendar-btn-color);
-  --Calendar-btn-paddingX: #{px2rem(10px)};
-  --Calendar-btn-paddingY: calc(
-    (
-        var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) *
-          var(--Calendar-btn-fontSize)
-      ) / 2
-  );
-  --Calendar-btnCancel-bg: var(--light);
-  --Calendar-btnCancel-border: var(--colors-neutral-line-7);
-  --Calendar-btnCancel-borderRadius: var(--borders-radius-3);
-  --Calendar-btnCancel-color: var(--text-color);
-  --Calendar-btnCancel-onActive-bg: var(--colors-neutral-fill-11);
-  --Calendar-btnCancel-onActive-border: var(--colors-brand-4);
-  --Calendar-btnCancel-onActive-color: var(--colors-brand-4);
-  --Calendar-btnCancel-onHover-bg: var(--colors-neutral-fill-11);
-  --Calendar-btnCancel-onHover-border: var(--colors-brand-6);
-  --Calendar-btnCancel-onHover-color: var(--colors-brand-6);
-  --Calendar-cell-bg: var(--colors-neutral-fill-11);
-  --Calendar-cell-onActive-bg: var(--info);
-  --Calendar-cell-onBetween-bg: #{rgba($info, 0.1)};
-  --Calendar-cell-onDisabled-bg: #f7f7f9;
-  --Calendar-cell-onHover-bg: #f7f7f9;
-  --Calendar-color: #151b26;
-  --Calendar-fontSize: var(--fontSizeSm);
-  --Calendar-input-borderColor: var(--borderColor);
-  --Calendar-input-borderRadius: var(--borders-radius-3);
-  --Calendar-input-color: var(--info);
-  --Calendar-input-fontSize: var(--fontSizeBase);
-  --Calendar-input-height: #{px2rem(40px)};
-  --Calendar-input-lineHeight: var(--lineHeightBase);
-  --Calendar-input-onFocused-borderColor: var(--info);
-  --Calendar-input-paddingX: #{px2rem(10px)};
-  --Calendar-input-paddingY: calc(
-    (
-        var(--Calendar-input-height) - var(--Calendar-input-lineHeight) *
-          var(--Calendar-input-fontSize)
-      ) / 2
-  );
-  --Calendar-shortcut-color: #151b26;
-  --Calendar-shortcut-decoration: none;
-  --Calendar-shortcut-onHover-color: var(--colors-brand-6);
-  --Calendar-shortcut-onHover-decoration: none;
-  --Calendar-shortcuts-bg: var(--colors-neutral-text-9);
-  --Calendar-shortcuts-height: var(--sizes-size-9);
-  --Calendar-wLabel-color: var(--colors-neutral-text-6);
-
-  --Calendar-icon-bottom: #{px2rem(-4px)};
-  --Calendar-icon-width: var(--sizes-size-6);
-  --Calendar-icon-height: var(--sizes-size-6);
-  --Calendar-borderWidth: var(--borders-width-2);
-  --Calendar-borderColor: var(--colors-brand-5);
-  --Calendar-rdt-day: var(--sizes-base-49);
-  --Calendar-schedule-content-padding: 0 var(--sizes-size-3);
-  --Calendar-schedule-content-height: var(--sizes-base-10);
-  --Calendar-schedule-content-color: var(--colors-neutral-text-11);
-
   --Card-actions-borderColor: var(--colors-neutral-line-10);
   --Card-actions-fontSize: var(--fonts-size-8);
   --Card-actions-onChecked-onHover-bg: var(--colors-neutral-fill-11);
@@ -393,43 +324,6 @@ $remFactor: 16px;
   --Crud-toolbar-height: #{px2rem(30px)};
   --Crud-toolbar-lineHeight: var(--lineHeightBase);
 
-  --DatePicker-bg: var(--colors-neutral-fill-11);
-  --DatePicker-borderColor: var(--Form-input-borderColor);
-  --DatePicker-borderRadius: var(--borders-radius-3);
-  --DatePicker-borderWidth: var(--borders-width-2);
-  --DatePicker-color: var(--colors-neutral-text-2);
-  --DatePicker-header-onHover-color: var(--colors-brand-6);
-  --DatePicker-arrow-color: #84868c;
-  --DatePicker-fontSize: var(--fontSizeSm);
-  --DatePicker-header-select-borderColor: #fff;
-  --DatePicker-height: var(--Form-input-height);
-  --DatePicker-iconColor: var(--icon-color);
-  --DatePicker-lineHeight: var(--Form-input-lineHeight);
-  --DatePicker-onFocused-borderColor: var(--colors-brand-4);
-  --DatePicker-onHover-bg: var(--colors-neutral-fill-11);
-  --DatePicker-onHover-borderColor: var(--colors-brand-5);
-  --DatePicker-onDisabled-bg: var(--colors-neutral-text-9);
-  --DatePicker-onDisabled-color: var(--colors-neutral-text-6);
-  --DatePicker-onHover-iconColor: var(--colors-brand-5);
-  --DatePicker-paddingX: #{px2rem(12px)};
-  --DatePicker-paddingY: calc(
-    (
-        var(--DatePicker-height) - var(--DatePicker-lineHeight) *
-          var(--DatePicker-fontSize)
-      ) / 2 - var(--DatePicker-borderWidth)
-  );
-  --DatePicker-placeholderColor: var(--colors-neutral-text-6);
-  --DatePicker-minWidth: calc(
-    var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 +
-      var(--Form-input-clearBtn-size) * 2
-  );
-  --DateRangePicker-minWidth: calc(
-    var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 +
-      var(--Form-input-clearBtn-size) * 2
-  );
-  --DateRangePicker-activeCursor-color: var(--colors-brand-4);
-  --DateRangePicker-activeCursor-height: 2px;
-
   --LocationPicker-borderRadius: var(--borders-radius-3);
 
   --Drawer-bg: var(--background);
@@ -555,66 +449,6 @@ $remFactor: 16px;
   );
   --Form-row-gutterWidth: #{px2rem(10px)};
 
-  --Form-select-bg: var(--colors-neutral-fill-11);
-  --Form-select-height: var(--Form-select-outer-top);
-  --Form-select-borderColor: var(--Form-input-borderColor);
-  --Form-select-borderRadius: var(--borders-radius-3);
-  --Form-select-borderWidth: var(--borders-width-2);
-  --Form-select-caret-iconColor: var(--colors-neutral-text-5);
-  --Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5);
-  --Form-select-caret-fontSize: var(--fonts-size-8);
-  --Form-select-checkall-bottomBorder: #eceff8;
-  --Form-select-color: var(--colors-neutral-text-2);
-  --Form-select-input-fontSize: var(--fontSizeSm);
-  --Form-select-menu-bg: var(--colors-neutral-fill-11);
-  --Form-select-menu-color: var(--colors-neutral-text-2);
-  --Form-select-menu-height: var(--sizes-base-12);
-  --Form-select-menu-onActive-bg: transparent;
-  --Form-select-menu-onActive-color: var(--colors-brand-5);
-  --Form-select-menu-onDisabled-bg: transparent;
-  --Form-select-menu-onDisabled-color: var(--text--muted-color);
-  --Form-select-menu-onHover-bg: var(--colors-brand-10);
-  --Form-select-menu-onHover-color: var(--colors-neutral-text-2);
-  --Form-select-group-color: var(--Form-select-caret-iconColor);
-  --Form-select-onError-borderColor: var(--Form-input-onError-borderColor);
-  --Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
-  --Form-select-onFocused-color: var(--Form-select-color);
-  --Form-select-onHover-bg: var(--colors-neutral-fill-11);
-  --Form-select-onHover-borderColor: var(--colors-brand-5);
-  --Form-select-outer-borderWidth: var(--borders-width-1);
-  --Form-select-outer-top: var(--sizes-base-16);
-  --Form-select-outer-boxShadow: var(--shadows-shadow-normal);
-  --Form-select-paddingX: var(--Form-input-paddingX);
-  --Form-select-placeholderColor: var(--Form-input-placeholderColor);
-  --Form-select-popoverGap: var(--borders-radius-3);
-  --Form-select-icon-rigin: var(--sizes-size-9);
-  --Form-select-search-height: var(--sizes-base-15);
-  --Form-select-value-bgColor: var(--Form-input-onDisabled-bg);
-  --Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
-  --Form-select-value-borderColor: var(--colors-neutral-line-9);
-  --Form-select-valueIcon-color: var(--colors-neutral-text-4);
-  --Form-select-valueIcon-color--dark: var(--colors-neutral-text-8);
-  --Form-select-valueIcon-onHover-color: var(--Form-select-color);
-  --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
-  --Form-selectOption-height: var(--Form-select-height);
-  --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
-  --Form-selectValue-onHover-bgColor: var(--Form-select-borderColor);
-  --Form-selectValue-borderColor: var(--colors-brand-7);
-  --Form-selectValue-color: var(--colors-brand-5);
-  --Form-selectValue-fontSize: var(--fontSizeSm);
-  --Form-selectValue-onDisable-bg: #{lighten(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
-    )};
-  --Form-selectValue-onHover-bg: #{darken(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
-    )};
-  --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
-  --Form-selectValue-onInvalid-color: var(--danger);
-  --Form-valueLabel-maxWidth: #{px2rem(120px)};
-  --Form-select-onFocus-boxShadow: none;
-
   --IconPicker-content-maxHeight: #{px2rem(350px)};
   --IconPicker-padding: var(--gap-xs);
   --IconPicker-selectedIcon-marginRight: var(--gap-xs);
@@ -647,10 +481,10 @@ $remFactor: 16px;
   );
   --InputGroup-select-arrowColor: var(--colors-neutral-text-5);
   --InputGroup-select-bg: var(--colors-neutral-fill-11);
-  --InputGroup-select-borderColor: var(--Form-select-borderColor);
+  --InputGroup-select-borderColor: var(--borderColor);
-  --InputGroup-select-borderRadius: var(--Form-select-borderRadius);
+  --InputGroup-select-borderRadius: var(--borders-radius-3);
   --InputGroup-select-borderWidth: var(--borders-width-2);
-  --InputGroup-select-color: var(--Form-select-color);
+  --InputGroup-select-color: var(--colors-neutral-text-2);
   --InputGroup-select-onFocused-arrowColor: var(--colors-brand-5);
   --InputGroup-select-onFocused-bg: var(--colors-brand-10);
   --InputGroup-select-onFocused-color: var(--colors-brand-5);
@@ -945,19 +779,6 @@ $remFactor: 16px;
   --Remark-onHover-iconColor: var(--colors-neutral-text-11);
   --Remark-width: var(--sizes-size-9);
 
-  --ResultBox-tag-height: #{px2rem(24px)};
-  --ResultBox-tag-marginBottom: #{px2rem(2px)};
-  --ResultBox-icon--onDisabled-color: #ebebeb;
-  --ResultBox-icon--onHover-color: #666666;
-  --ResultBox-icon-color: var(--colors-neutral-text-6);
-  --ResultBox-value--onDisabled-color: #cccccc;
-  --ResultBox-value--onHover-bg: rgba(0, 145, 255, 0.1);
-  --ResultBox-value--onHover-bg--dark: #b8babf;
-  --ResultBox-value-bg: var(--colors-neutral-fill-10);
-  --ResultBox-value-color: #000;
-  --ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
-  --ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
-
   --Satus-icon-width: var(--sizes-size-8);
   --Satus-icon-height: var(--Satus-icon-width);
 
@@ -1184,23 +1005,6 @@ $remFactor: 16px;
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
 
-  --Tree-indent: var(--gap-md);
-  --Tree-icon-gap: var(--sizes-size-5);
-  --Tree-icon-margin-right: #{px2rem(8px)};
-  --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
-  --Tree-item-onHover-bg: var(--colors-neutral-fill-10);
-  --Tree-item-onHover-bg-pure: var(--colors-neutral-fill-10);
-  --Tree-itemArrowWidth: #{px2rem(16px)};
-  --Tree-itemHeight: var(--sizes-base-12);
-  --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
-  --TreeSelect-popover-bg: var(--colors-neutral-fill-11);
-  --Tree-item-text-max-height: #{px2rem(250px)};
-  --Tree-item-text-top: #{px2rem(4px)};
-  --Tree-item-arrow-padding-left: #{px2rem(4px)};
-  --Tree-item-arrow-color: #84868c;
-  --Tree-item-onChekced-bg: var(--colors-brand-10);
-  --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
-
   --Wizard-badge-bg: var(--colors-neutral-fill-11);
   --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2)
     var(--colors-neutral-fill-6);

packages/amis-ui/scss/components/_result-box.scss

@@ -7,6 +7,22 @@
   align-items: center;
   border-radius: 3px;
   position: relative;
+  color: var(--Form-select-color);
+  font-size: var(--select-base-default-fontSize);
+  font-weight: var(--select-base-default-fontWeight);
+  border-width: var(--Form-select-borderWidth);
+  border-style: var(--select-base-default-top-border-style)
+    var(--select-base-default-right-border-style)
+    var(--select-base-default-bottom-border-style)
+    var(--select-base-default-left-border-style);
+  border-color: var(--Form-select-borderColor);
+  background: var(--Form-select-bg);
+  border-radius: var(--Form-select-borderRadius);
+  min-height: var(--Form-selectOption-height);
+  padding: var(--select-base-default-paddingTop)
+    var(--select-base-default-paddingRight)
+    var(--select-base-default-paddingBottom)
+    var(--select-base-default-paddingLeft);
 
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
@@ -14,21 +30,58 @@
   }
 
   &.is-focused,
-  &.is-active,
   &:focus {
     outline: none;
-    border-color: var(--Form-input-onFocused-borderColor);
+    background: var(--Form-select-onHover-bg);
-    box-shadow: var(--Form-input-boxShadow);
+    border-width: var(--select-base-hover-top-border-width)
-    background: var(--Form-input-onFocused-bg);
+      var(--select-base-hover-right-border-width)
+      var(--select-base-hover-bottom-border-width)
+      var(--select-base-hover-left-border-width);
+    border-style: var(--select-base-hover-top-border-style)
+      var(--select-base-hover-right-border-style)
+      var(--select-base-hover-bottom-border-style)
+      var(--select-base-hover-left-border-style);
+    border-color: var(--select-base-hover-top-border-color)
+      var(--select-base-hover-right-border-color)
+      var(--select-base-hover-bottom-border-color)
+      var(--select-base-hover-left-border-color);
+  }
+
+  &.is-active,
+  &.is-opened {
+    border-width: var(--select-base-active-top-border-width)
+      var(--select-base-active-right-border-width)
+      var(--select-base-active-bottom-border-width)
+      var(--select-base-active-left-border-width);
+    border-style: var(--select-base-active-top-border-style)
+      var(--select-base-active-right-border-style)
+      var(--select-base-active-bottom-border-style)
+      var(--select-base-active-left-border-style);
+    border-color: var(--select-base-active-top-border-color)
+      var(--select-base-active-right-border-color)
+      var(--select-base-active-bottom-border-color)
+      var(--select-base-active-left-border-color);
+    box-shadow: var(--select-base-active-shadow);
+    background: var(--select-base-active-bg-color);
   }
 
   &.is-clickable:not(.is-disabled) {
     cursor: pointer;
 
     &:hover {
-      border-color: var(--Form-input-onFocused-borderColor);
+      background: var(--Form-select-onHover-bg);
-      box-shadow: var(--Form-input-boxShadow);
+      border-width: var(--select-base-hover-top-border-width)
-      background: var(--Form-input-onFocused-bg);
+        var(--select-base-hover-right-border-width)
+        var(--select-base-hover-bottom-border-width)
+        var(--select-base-hover-left-border-width);
+      border-style: var(--select-base-hover-top-border-style)
+        var(--select-base-hover-right-border-style)
+        var(--select-base-hover-bottom-border-style)
+        var(--select-base-hover-left-border-style);
+      border-color: var(--select-base-hover-top-border-color)
+        var(--select-base-hover-right-border-color)
+        var(--select-base-hover-bottom-border-color)
+        var(--select-base-hover-left-border-color);
     }
   }
 
@@ -38,10 +91,20 @@
 
   &.is-disabled {
     color: var(--text--muted-color);
-    background: var(--Form-input-onDisabled-bg);
-    border-color: var(--Form-input-onDisabled-borderColor);
     pointer-events: none;
-    background: var(--TabsTransfer-title-bg);
+    border-width: var(--select-base-disabled-top-border-width)
+      var(--select-base-disabled-right-border-width)
+      var(--select-base-disabled-bottom-border-width)
+      var(--select-base-disabled-left-border-width);
+    border-style: var(--select-base-disabled-top-border-style)
+      var(--select-base-disabled-right-border-style)
+      var(--select-base-disabled-bottom-border-style)
+      var(--select-base-disabled-left-border-style);
+    border-color: var(--select-base-disabled-top-border-color)
+      var(--select-base-disabled-right-border-color)
+      var(--select-base-disabled-bottom-border-color)
+      var(--select-base-disabled-left-border-color);
+    background: var(--select-base-disabled-bg-color);
 
     div.#{$ns}ResultBox-value {
       background: var(--TabsTransfer-border-color);
@@ -137,16 +200,21 @@
   &-value {
     background: var(--ResultBox-value-bg);
     color: var(--ResultBox-value-color);
-    font-size: var(--Form-input-fontSize);
+    font-size: var(--select-multiple-fontSize);
-    padding: 0 var(--gap-xs);
     min-height: var(--ResultBox-tag-height);
     flex-wrap: nowrap;
     display: inline-flex;
     align-items: center;
-    margin-right: var(--gap-xs);
+    padding: var(--select-multiple-paddingTop)
-    margin-bottom: var(--ResultBox-tag-marginBottom);
+      var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
+      var(--select-multiple-paddingLeft);
+    margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight)
+      var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
     user-select: none;
-    border-radius: #{px2rem(2px)};
+    border-radius: var(--select-multiple-top-left-border-radius)
+      var(--select-multiple-top-right-border-radius)
+      var(--select-multiple-bottom-right-border-radius)
+      var(--select-multiple-bottom-left-border-radius);
 
     > a {
       cursor: pointer;
@@ -197,8 +265,6 @@
   }
 
   &.#{$ns}TransferDropDown {
-    padding: 0 var(--gap-base);
-
     &.is-group {
       > .#{$ns}TransferDropDown-icon {
         margin-right: var(--gap-sm);

packages/amis-ui/scss/components/form/_date-range.scss

@@ -2,9 +2,12 @@
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   font-size: var(--DatePicker-fontSize);
-  padding: 0 var(--DatePicker-paddingX);
+  padding: 0 var(--inputDate-default-paddingRight) 0
+    var(--inputDate-default-paddingLeft);
   height: var(--DatePicker-height);
   outline: none;
   border-radius: var(--DatePicker-borderRadius);
@@ -20,6 +23,18 @@
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
+      border-style: var(--inputDate-hover-top-border-style)
+        var(--inputDate-hover-right-border-style)
+        var(--inputDate-hover-bottom-border-style)
+        var(--inputDate-hover-left-border-style);
+      border-width: var(--inputDate-hover-top-border-width)
+        var(--inputDate-hover-right-border-width)
+        var(--inputDate-hover-bottom-border-width)
+        var(--inputDate-hover-left-border-width);
+
+      .#{$ns}DateRangePicker-input {
+        color: var(--inputDate-hover-color);
+      }
 
       .#{$ns}DateRangePicker-clear {
         display: flex;
@@ -31,21 +46,36 @@
     }
 
     &.is-focused {
+      background: var(--inputDate-active-bg-color);
       border-color: var(--DatePicker-onFocused-borderColor);
-      box-shadow: var(--Form-input-boxShadow);
+      box-shadow: var(--inputDate-active-shadow);
+      border-style: var(--inputDate-active-top-border-style)
+        var(--inputDate-active-right-border-style)
+        var(--inputDate-active-bottom-border-style)
+        var(--inputDate-active-left-border-style);
+      border-width: var(--inputDate-active-top-border-width)
+        var(--inputDate-active-right-border-width)
+        var(--inputDate-active-bottom-border-width)
+        var(--inputDate-active-left-border-width);
+
+      .#{$ns}DateRangePicker-input {
+        color: var(--inputDate-active-color);
+      }
     }
   }
 
   .#{$ns}DateRangePicker-input {
     border: none;
-    border-bottom: 2px solid transparent;
+    border-bottom: var(--DateRangePicker-activeCursor-height) solid transparent;
     outline: none;
     padding: 0;
     background: 0;
     flex: 1;
     width: 50%;
     line-height: px2rem(30px);
-    font-size: var(--fonts-size-7);
+    font-size: var(--DatePicker-fontSize);
+    font-weight: var(--inputDate-default-fontWeight);
+    color: var(--inputDate-default-color);
 
     &::placeholder {
       color: var(--colors-neutral-text-6);
@@ -58,22 +88,34 @@
   }
 
   .#{$ns}DateRangePicker-input-separator {
-    margin: 0 var(--gap-sm);
+    margin: 0 var(--inputDate-range-separator-margin);
     display: flex;
     align-items: center;
 
     &-line {
-      width: var(--gap-sm);
+      width: var(--inputDate-range-separator-width);
       height: 1px;
-      background: #b8babf;
+      background: var(--inputDate-range-separator-color);
     }
   }
 
   &.is-disabled {
-    background: $gray200;
+    background: var(--inputDate-disabled-bg-color);
+    border-width: var(--inputDate-disabled-top-border-width)
+      var(--inputDate-disabled-right-border-width)
+      var(--inputDate-disabled-bottom-border-width)
+      var(--inputDate-disabled-left-border-width);
+    border-style: var(--inputDate-disabled-top-border-style)
+      var(--inputDate-disabled-right-border-style)
+      var(--inputDate-disabled-bottom-border-style)
+      var(--inputDate-disabled-left-border-style);
+    border-color: var(--inputDate-disabled-top-border-color)
+      var(--inputDate-disabled-right-border-color)
+      var(--inputDate-disabled-bottom-border-color)
+      var(--inputDate-disabled-left-border-color);
 
     > .#{$ns}DateRangePicker-input {
-      color: var(--text--muted-color);
+      color: var(--inputDate-disabled-color);
     }
   }
 
@@ -94,11 +136,29 @@
   &-toggler {
     @include input-clear();
     line-height: 1;
+
+    svg {
+      color: var(--inputDate-default-icon-color);
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
+  }
+
+  .DatePicker-toggler-clock {
+    content: var(--inputTime-default-icon);
+  }
+
+  .DatePicker-toggler-date {
+    content: var(--inputDate-default-icon);
   }
 
   &-clear {
     @include input-clear();
     line-height: 1;
+    svg {
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
   }
 
   &-activeCursor {
@@ -203,7 +263,9 @@
 
 .#{$ns}DateRangeCalendar {
   display: inline-block;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   background: var(--DatePicker-bg);
   border-radius: var(--DatePicker-borderRadius);
 }

packages/amis-ui/scss/components/form/_date.scss

@@ -2,9 +2,13 @@
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   font-size: var(--DatePicker-fontSize);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
+  padding: var(--inputDate-default-paddingTop)
+    var(--inputDate-default-paddingRight) var(--inputDate-default-paddingBottom)
+    var(--inputDate-default-paddingLeft);
   height: var(--DatePicker-height);
   outline: none;
   white-space: nowrap;
@@ -19,6 +23,9 @@
     background: none;
     padding: 0;
     border: 0;
+    font-size: var(--DatePicker-fontSize);
+    font-weight: var(--inputDate-default-fontWeight);
+    color: var(--inputDate-default-color);
     &:focus {
       border: none;
       outline: none;
@@ -41,6 +48,18 @@
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
+      border-style: var(--inputDate-hover-top-border-style)
+        var(--inputDate-hover-right-border-style)
+        var(--inputDate-hover-bottom-border-style)
+        var(--inputDate-hover-left-border-style);
+      border-width: var(--inputDate-hover-top-border-width)
+        var(--inputDate-hover-right-border-width)
+        var(--inputDate-hover-bottom-border-width)
+        var(--inputDate-hover-left-border-width);
+
+      .#{$ns}DatePicker-input {
+        color: var(--inputDate-hover-color);
+      }
 
       .#{$ns}DatePicker-clear {
         display: flex;
@@ -52,20 +71,40 @@
     }
 
     &.is-focused {
+      background: var(--inputDate-active-bg-color);
       border-color: var(--DatePicker-onFocused-borderColor);
-      box-shadow: var(--Form-input-boxShadow);
+      box-shadow: var(--inputDate-active-shadow);
+      border-style: var(--inputDate-active-top-border-style)
+        var(--inputDate-active-right-border-style)
+        var(--inputDate-active-bottom-border-style)
+        var(--inputDate-active-left-border-style);
+      border-width: var(--inputDate-active-top-border-width)
+        var(--inputDate-active-right-border-width)
+        var(--inputDate-active-bottom-border-width)
+        var(--inputDate-active-left-border-width);
+      .#{$ns}DatePicker-input {
+        color: var(--inputDate-active-color);
+      }
     }
   }
 
-  .#{$ns}DatePicker-input {
-    font-size: var(--fonts-size-7);
-  }
-
   &.is-disabled {
-    background: $gray200;
+    background: var(--inputDate-disabled-bg-color);
+    border-width: var(--inputDate-disabled-top-border-width)
+      var(--inputDate-disabled-right-border-width)
+      var(--inputDate-disabled-bottom-border-width)
+      var(--inputDate-disabled-left-border-width);
+    border-style: var(--inputDate-disabled-top-border-style)
+      var(--inputDate-disabled-right-border-style)
+      var(--inputDate-disabled-bottom-border-style)
+      var(--inputDate-disabled-left-border-style);
+    border-color: var(--inputDate-disabled-top-border-color)
+      var(--inputDate-disabled-right-border-color)
+      var(--inputDate-disabled-bottom-border-color)
+      var(--inputDate-disabled-left-border-color);
 
     > .#{$ns}DatePicker-input {
-      color: var(--text--muted-color);
+      color: var(--inputDate-disabled-color);
     }
   }
 
@@ -87,11 +126,28 @@
   &-toggler {
     @include input-clear();
     line-height: 1;
+    svg {
+      color: var(--inputDate-default-icon-color);
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
+  }
+
+  .DatePicker-toggler-clock {
+    content: var(--inputTime-default-icon);
+  }
+
+  .DatePicker-toggler-date {
+    content: var(--inputDate-default-icon);
   }
 
   &-clear {
     @include input-clear();
     line-height: 1;
+    svg {
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
   }
 }
 
@@ -261,6 +317,7 @@
       background: var(--Calendar-cell-bg);
 
       &:hover span {
+        color: var(--inputDate-hover-option-color);
         background: var(--Calendar-cell-onHover-bg);
       }
     }
@@ -297,6 +354,7 @@
     td.rdtActive,
     td.rdtActive:hover {
       > span {
+        color: var(--inputDate-active-option-color);
         background: var(--Calendar-cell-onActive-bg);
       }
     }
@@ -365,8 +423,8 @@
   overflow: auto;
   .#{$ns}CalendarInput-sugs {
     list-style: none;
-    background: var(--Form-select-menu-bg);
+    background: var(--inputTime-default-bg-color);
-    color: var(--Form-select-menu-color);
+    color: var(--inputTime-default-color);
     left: px2rem(-1px);
     right: px2rem(-1px);
     top: 100%;
@@ -382,15 +440,17 @@
       text-align: center;
       height: 28px;
       line-height: 28px;
+      font-size: var(--inputTime-default-fontSize);
+      font-weight: var(--inputTime-default-fontWeight);
       cursor: pointer;
 
       &.is-highlight {
-        color: var(--Form-select-menu-onHover-color);
+        color: var(--inputTime-active-color);
-        background: var(--Form-select-menu-onHover-bg);
+        background: var(--inputTime-active-bg-color);
       }
       &:hover {
-        color: var(--Form-select-menu-onHover-color);
+        color: var(--inputTime-hover-color);
-        background: #f7f7f9;
+        background: var(--inputTime-hover-bg-color);
       }
     }
   }
@@ -573,7 +633,7 @@
 
   &:hover {
     text-decoration: none;
-    color: var(--DatePicker-color);
+    color: var(--inputDate-hover-title-arrow-color);
   }
 }
 
@@ -585,7 +645,7 @@
   text-align: center;
   cursor: pointer;
   font-weight: normal;
-  color: var(--DatePicker-color);
+  color: var(--inputDate-default-title-color);
 
   &:hover {
     color: var(--DatePicker-header-onHover-color);
@@ -639,6 +699,12 @@ td.rdtYear,
 td.rdtQuarter {
   > span {
     display: inline-block;
+    color: var(--inputDate-other-color);
+    background: var(--inputDate-other-bg-color);
+    border-radius: var(--inputDate-other-top-left-border-radius)
+      var(--inputDate-other-top-right-border-radius)
+      var(--inputDate-other-bottom-right-border-radius)
+      var(--inputDate-other-bottom-left-border-radius);
   }
 
   &.rdtBetween {
@@ -649,8 +715,8 @@ td.rdtQuarter {
     background: transparent;
 
     > span {
-      color: var(--Form-select-menu-onHover-color);
+      color: var(--inputDate-other-hover-color);
-      background: #f7f7f9;
+      background: var(--inputDate-other-hover-bg-color);
     }
   }
 
@@ -659,15 +725,19 @@ td.rdtQuarter {
     background: transparent;
 
     > span {
-      background: var(--info) !important;
+      background: var(--inputDate-other-active-bg-color) !important;
-      color: var(--white);
+      color: var(--inputDate-other-active-color) !important;
     }
   }
 
   &.rdtDisabled,
   &.rdtDisabled:hover {
-    background: var(--Calendar-cell-onDisabled-bg);
+    background: var(--inputDate-other-disabled-bg-color);
-    color: #b8babf;
+
+    > span {
+      background: var(--inputDate-other-disabled-bg-color);
+      color: var(--inputDate-other-disabled-color);
+    }
   }
 }
 

packages/amis-ui/scss/components/form/_location.scss

@@ -2,32 +2,32 @@
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border: var(--borders-width-2) solid var(--colors-neutral-line-8);
-  font-size: var(--DatePicker-fontSize);
+  font-size: var(--fonts-size-7);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
+  padding: var(--sizes-size-4) var(--sizes-size-7);
-  height: var(--DatePicker-height);
+  height: var(--sizes-base-16);
   outline: none;
   white-space: nowrap;
-  color: var(--DatePicker-color);
+  color: var(--colors-neutral-text-2);
-  background: var(--DatePicker-bg);
+  background: var(--colors-neutral-fill-11);
   border-radius: var(--LocationPicker-borderRadius);
 
   &:not(.is-disabled) {
     cursor: pointer;
 
     &:hover {
-      background: var(--DatePicker-onHover-bg);
+      background: var(--colors-neutral-fill-11);
-      border-color: var(--DatePicker-onHover-borderColor);
+      border-color: var(--colors-brand-5);
 
       .#{$ns}DatePicker-toggler:before {
-        color: var(--DatePicker-onHover-iconColor);
+        color: var(--colors-brand-5);
       }
     }
   }
 
   &.is-focused,
   &.is-active {
-    border-color: var(--DatePicker-onFocused-borderColor);
+    border-color: var(--colors-brand-5);
     box-shadow: var(--Form-input-boxShadow);
   }
 
@@ -40,7 +40,7 @@
   }
 
   &-placeholder {
-    color: var(--DatePicker-placeholderColor);
+    color: var(--colors-neutral-text-6);
     user-select: none;
     margin-right: var(--gap-base);
     flex-basis: 0;
@@ -55,10 +55,10 @@
 
   &-toggler {
     cursor: pointer;
-    color: var(--DatePicker-iconColor);
+    color: var(--colors-neutral-text-5);
 
     &:hover {
-      color: var(--DatePicker-onHover-iconColor);
+      color: var(--colors-brand-5);
     }
   }
 
@@ -73,9 +73,9 @@
   position: relative;
   width: 100%;
   .#{$ns}PopOver {
-      border: none;
+    border: none;
-      box-shadow: var(--boxShadow);
+    box-shadow: var(--boxShadow);
-    }
+  }
 }
 
 .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {

packages/amis-ui/scss/components/form/_nested-select.scss

@@ -62,10 +62,14 @@
     .#{$ns}NestedSelect-option {
       position: relative;
       padding-left: var(--gap-md);
-      min-height: var(--Form-input-height);
+      min-height: var(--select-base-default-option-line-height);
-      line-height: var(--Form-input-height);
+      line-height: var(--select-base-default-option-line-height);
       cursor: pointer;
       display: flex;
+      font-size: var(--select-base-default-option-fontSize);
+      font-weight: var(--select-base-default-option-fontWeight);
+      color: var(--select-base-default-option-color);
+      background: var(--select-base-default-option-bg-color);
 
       > .#{$ns}NestedSelect-optionLabel {
         flex: 1;

packages/amis-ui/scss/components/form/_select.scss

@@ -15,11 +15,20 @@
       display: inline-block;
       vertical-align: middle;
       font-size: var(--Form-selectValue-fontSize);
+      font-weight: var(--select-multiple-fontWeight);
+      color: var(--select-multiple-color);
       background: var(--Form-select-value-bgColor);
       border: px2rem(1px) solid var(--Form-select-value-borderColor);
-      border-radius: px2rem(2px);
+      border-radius: var(--select-multiple-top-left-border-radius)
-      margin-right: var(--gap-xs);
+        var(--select-multiple-top-right-border-radius)
-      margin-bottom: var(--gap-xs);
+        var(--select-multiple-bottom-right-border-radius)
+        var(--select-multiple-bottom-left-border-radius);
+      padding: var(--select-multiple-paddingTop)
+        var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
+        var(--select-multiple-paddingLeft);
+      margin: var(--select-multiple-marginTop)
+        var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom)
+        var(--select-multiple-marginLeft);
 
       &:hover {
         background-color: var(--Form-selectValue-onHover-bgColor);
@@ -29,7 +38,6 @@
     .#{$ns}Select-valueLabel {
       display: inline-block;
       max-width: var(--Form-valueLabel-maxWidth);
-      padding: 0 var(--gap-xs);
       overflow: hidden;
       vertical-align: top;
       text-overflow: ellipsis;
@@ -45,24 +53,38 @@
   align-items: center;
   outline: none;
   position: relative;
-  font-size: var(--Form-input-fontSize);
+  font-size: var(--select-base-default-fontSize);
-  border: var(--Form-select-borderWidth) solid var(--Form-select-borderColor);
+  font-weight: var(--select-base-default-fontWeight);
+  border-width: var(--Form-select-borderWidth);
+  border-style: var(--select-base-default-top-border-style)
+    var(--select-base-default-right-border-style)
+    var(--select-base-default-bottom-border-style)
+    var(--select-base-default-left-border-style);
+  border-color: var(--Form-select-borderColor);
   background: var(--Form-select-bg);
   border-radius: var(--Form-select-borderRadius);
   min-height: var(--Form-selectOption-height);
-  $paddingY: calc(
+  padding: var(--select-base-default-paddingTop)
-    (
+    var(--select-base-default-paddingRight)
-        var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
+    var(--select-base-default-paddingBottom)
-          var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
+    var(--select-base-default-paddingLeft);
-      ) / 2
-  );
-  padding: $paddingY 0 $paddingY var(--Form-select-paddingX);
   cursor: pointer;
   color: var(--Form-select-color);
 
   &:hover {
     background: var(--Form-select-onHover-bg);
-    border-color: var(--Form-input-onHover-borderColor);
+    border-width: var(--select-base-hover-top-border-width)
+      var(--select-base-hover-right-border-width)
+      var(--select-base-hover-bottom-border-width)
+      var(--select-base-hover-left-border-width);
+    border-style: var(--select-base-hover-top-border-style)
+      var(--select-base-hover-right-border-style)
+      var(--select-base-hover-bottom-border-style)
+      var(--select-base-hover-left-border-style);
+    border-color: var(--select-base-hover-top-border-color)
+      var(--select-base-hover-right-border-color)
+      var(--select-base-hover-bottom-border-color)
+      var(--select-base-hover-left-border-color);
 
     .#{$ns}Select-arrow:before {
       color: var(--Form-select-caret-onHover-iconColor);
@@ -70,13 +92,55 @@
   }
 
   &:active {
-    border-color: var(--Button--default-onActive-border);
+    border-width: var(--select-base-active-top-border-width)
+      var(--select-base-active-right-border-width)
+      var(--select-base-active-bottom-border-width)
+      var(--select-base-active-left-border-width);
+    border-style: var(--select-base-active-top-border-style)
+      var(--select-base-active-right-border-style)
+      var(--select-base-active-bottom-border-style)
+      var(--select-base-active-left-border-style);
+    border-color: var(--select-base-active-top-border-color)
+      var(--select-base-active-right-border-color)
+      var(--select-base-active-bottom-border-color)
+      var(--select-base-active-left-border-color);
+    box-shadow: var(--select-base-active-shadow);
+    background: var(--select-base-active-bg-color);
+  }
+
+  &.is-focused:not(.is-mobile),
+  &.is-opened:not(.is-mobile) {
+    border-width: var(--select-base-active-top-border-width)
+      var(--select-base-active-right-border-width)
+      var(--select-base-active-bottom-border-width)
+      var(--select-base-active-left-border-width);
+    border-style: var(--select-base-active-top-border-style)
+      var(--select-base-active-right-border-style)
+      var(--select-base-active-bottom-border-style)
+      var(--select-base-active-left-border-style);
+    border-color: var(--select-base-active-top-border-color)
+      var(--select-base-active-right-border-color)
+      var(--select-base-active-bottom-border-color)
+      var(--select-base-active-left-border-color);
+    box-shadow: var(--select-base-active-shadow);
+    background: var(--select-base-active-bg-color);
+    color: var(--Form-select-onFocused-color);
   }
 
   &.is-disabled {
-    color: var(--text--muted-color);
+    border-width: var(--select-base-disabled-top-border-width)
-    background: var(--Form-input-onDisabled-bg);
+      var(--select-base-disabled-right-border-width)
-    border-color: var(--Form-input-onDisabled-borderColor);
+      var(--select-base-disabled-bottom-border-width)
+      var(--select-base-disabled-left-border-width);
+    border-style: var(--select-base-disabled-top-border-style)
+      var(--select-base-disabled-right-border-style)
+      var(--select-base-disabled-bottom-border-style)
+      var(--select-base-disabled-left-border-style);
+    border-color: var(--select-base-disabled-top-border-color)
+      var(--select-base-disabled-right-border-color)
+      var(--select-base-disabled-bottom-border-color)
+      var(--select-base-disabled-left-border-color);
+    background: var(--select-base-disabled-bg-color);
   }
 
   &:focus {
@@ -87,12 +151,10 @@
     margin-top: px2rem(4px);
     .#{$ns}Select-menu {
       .#{$ns}Select-option {
-        height: px2rem(32px);
+        line-height: var(--select-base-default-option-line-height);
-        line-height: px2rem(32px);
       }
       .#{$ns}Select-addBtn {
-        height: px2rem(32px);
+        line-height: var(--select-base-default-option-line-height);
-        line-height: px2rem(30px);
       }
     }
   }
@@ -123,9 +185,6 @@
   }
 
   &-value {
-    line-height: calc(
-      var(--Form-input-lineHeight) * var(--Form-input-fontSize)
-    );
     white-space: nowrap;
     max-width: 100%;
     overflow: hidden;
@@ -142,7 +201,10 @@
   &--multi {
     height: auto;
     min-height: var(--Form-selectOption-height);
-    padding: var(--gap-xs) 0 var(--gap-xs) var(--gap-xs);
+    padding: var(--select-base-default-paddingTop)
+      var(--select-base-default-paddingRight)
+      var(--select-base-default-paddingBottom)
+      var(--select-base-default-paddingLeft);
 
     .#{$ns}Select-valueWrap {
       > input {
@@ -163,7 +225,7 @@
   }
   &-valueIcon {
     cursor: pointer;
-    padding: 1px 5px;
+    margin-left: px2rem(10px);
     color: var(--Form-select-valueIcon-color);
 
     &:hover {
@@ -184,9 +246,6 @@
   }
 
   &-arrow {
-    margin-right: px2rem(12px);
-    // margin-right: var(--gap-xs);
-    // margin-left: var(--gap-xs);
     width: var(--gap-md);
     text-align: center;
     display: flex;
@@ -285,14 +344,16 @@
   &-option {
     cursor: pointer;
     // min-width: px2rem(120px);
-    padding: calc(
+    padding: var(--select-base-default-option-paddingTop)
-        (
+      var(--select-base-default-option-paddingRight)
-            var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
+      var(--select-base-default-option-paddingBottom)
-              var(--Form-input-fontSize)
+      var(--select-base-default-option-paddingLeft);
-          ) / 2
-      )
-      var(--Form-select-paddingX);
     display: flex;
+    color: var(--select-base-default-option-color);
+    font-size: var(--select-base-default-option-fontSize);
+    font-weight: var(--select-base-default-option-fontWeight);
+    background: var(--select-base-default-option-bg-color);
+    line-height: var(--select-base-default-option-line-height);
 
     &-checkbox {
       width: 100%;
@@ -318,6 +379,9 @@
           overflow: hidden;
           white-space: nowrap;
           width: 100%;
+          font-size: var(--select-base-default-option-fontSize);
+          font-weight: var(--select-base-default-option-fontWeight);
+          color: var(--select-base-default-option-color);
         }
       }
     }
@@ -325,16 +389,28 @@
     &.is-active {
       color: var(--Form-select-menu-onActive-color);
       background: var(--Form-select-menu-onActive-bg);
+
+      .#{$ns}Select-option-checkbox > label > span {
+        color: var(--Form-select-menu-onActive-color);
+      }
     }
 
     &.is-highlight {
       color: var(--Form-select-menu-onHover-color);
       background: var(--Form-select-menu-onHover-bg);
+
+      .#{$ns}Select-option-checkbox > label > span {
+        color: var(--Form-select-menu-onHover-color);
+      }
     }
 
     &.is-disabled {
       color: var(--Form-select-menu-onDisabled-color);
       background: var(--Form-select-menu-onDisabled-bg);
+
+      .#{$ns}Select-option-checkbox > label > span {
+        color: var(--Form-select-menu-onDisabled-color);
+      }
     }
 
     > label {
@@ -383,13 +459,10 @@
   &-addBtn {
     display: block;
     cursor: pointer;
-    padding: calc(
+    padding: var(--select-base-default-option-paddingTop)
-        (
+      var(--select-base-default-option-paddingRight)
-            var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
+      var(--select-base-default-option-paddingBottom)
-              var(--Form-input-fontSize)
+      var(--select-base-default-option-paddingLeft);
-          ) / 2
-      )
-      var(--Form-select-paddingX);
 
     &:hover {
       text-decoration: none;
@@ -402,12 +475,6 @@
     }
   }
 
-  &.is-focused:not(.is-mobile),
-  &.is-opened:not(.is-mobile) {
-    border-color: var(--Form-input-onFocused-borderColor);
-    color: var(--Form-select-onFocused-color);
-  }
-
   &-spinner {
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize)
@@ -523,13 +590,13 @@
           &:hover {
             background-color: transparent;
             .#{$ns}Tree-itemText {
-              background: var(--Transfer-title-bg);
+              background: var(--select-tree-hover-bg-color);
             }
           }
           &:active {
             background-color: transparent;
             .#{$ns}Tree-itemText {
-              background: var(--Tree-item-onChekced-bg);
+              background: var(--select-tree-active-bg-color);
             }
           }
           &.is-checked {

packages/amis-ui/scss/components/form/_selection.scss

@@ -48,23 +48,25 @@
   padding: var(--gap-xs) 0;
 
   &-group > &-itemLabel {
-    height: px2rem(32px);
+    padding: var(--select-group-paddingTop) var(--select-group-paddingRight)
-    padding: var(--gap-xs) var(--gap-base);
+      var(--select-group-paddingBottom) var(--select-group-paddingLeft);
-    color: var(--FileControl-icon-color);
+    color: var(--select-group-color);
+    font-size: var(--select-group-fontSize);
+    font-weight: var(--select-group-fontWeight);
+    line-height: var(--select-group-lineHeight);
   }
 
   &-item {
     display: flex;
-    // height: var(--Form-input-height);
+    color: var(--select-base-default-option-color);
-    line-height: var(--Form-input-lineHeight);
+    background: var(--select-base-default-option-bg-color);
-    font-size: var(--Form-input-fontSize);
+    line-height: var(--select-base-default-option-line-height);
-    padding: calc(
+    font-size: var(--select-base-default-option-fontSize);
-        (
+    font-weight: var(--select-base-default-option-fontWeight);
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
+    padding: var(--select-base-default-option-paddingTop)
-              var(--Form-input-fontSize)
+      var(--select-base-default-option-paddingRight)
-          ) / 2
+      var(--select-base-default-option-paddingBottom)
-      )
+      var(--select-base-default-option-paddingLeft);
-      var(--gap-sm);
     flex-direction: row;
 
     > .#{$ns}Checkbox {
@@ -73,21 +75,26 @@
     cursor: pointer;
     user-select: none;
 
-    &.is-active {
-      background: var(--Form-select-menu-onActive-bg);
-    }
-
     &:hover {
-      background: var(--Tree-item-onHover-bg);
+      color: var(--Form-select-menu-onHover-color);
+      background: var(--Form-select-menu-onHover-bg);
 
       i {
         border: 1px solid var(--menu-active-color);
       }
     }
 
+    &.is-active,
+    &.is-focused,
+    &.is-opened {
+      color: var(--Form-select-menu-onActive-color);
+      background: var(--Form-select-menu-onActive-bg);
+    }
+
     &.is-disabled {
       pointer-events: none;
-      color: var(--text--muted-color);
+      color: var(--Form-select-menu-onDisabled-color);
+      background: var(--Form-select-menu-onDisabled-bg);
     }
   }
 
@@ -142,30 +149,43 @@
 
   .#{$ns}Table-table > thead > tr > th,
   .#{$ns}Table-table > tbody > tr > td {
-    font-size: var(--fontSizeSm);
+    color: var(--select-table-color);
-    padding-top: var(--gap-xs);
+    font-size: var(--select-table-fontSize);
-    padding-bottom: px2rem(6px);
     vertical-align: middle;
   }
 
   .#{$ns}Table-table > thead > tr > th {
-    padding-top: px2rem(6px);
+    padding: var(--select-table-header-paddingTop)
+      var(--select-table-header-paddingLeft)
+      var(--select-table-header-paddingBottom)
+      var(--select-table-header-paddingLeft);
   }
 
-  .#{$ns}Table-table > thead > tr > th:first-child,
+  .#{$ns}Table-table > tbody > tr > td {
-  .#{$ns}Table-table > tbody > tr > td:first-child {
+    padding: var(--select-table-option-paddingTop)
-    padding-left: px2rem(10px);
+      var(--select-table-option-paddingLeft)
+      var(--select-table-option-paddingBottom)
+      var(--select-table-option-paddingLeft);
+  }
+
+  .#{$ns}Table-table > thead > tr > th:last-child {
+    padding-right: var(--select-table-header-paddingRight);
   }
 
-  .#{$ns}Table-table > thead > tr > th:last-child,
   .#{$ns}Table-table > tbody > tr > td:last-child {
-    padding-right: var(--gap-md);
+    padding-right: var(--select-table-option-paddingRight);
   }
 
-  .#{$ns}Table-table > tbody > tr.is-active {
+  .#{$ns}Table-table > tbody > tr.is-active > td {
     color: var(--Form-select-menu-onActive-color);
     background: var(--Form-select-menu-onActive-bg);
   }
+
+  .#{$ns}Table-table > tbody > tr:hover > td,
+  .#{$ns}Table-table > tbody > tr.is-hovered > td {
+    color: var(--Form-select-menu-onHover-color);
+    background: var(--Form-select-menu-onHover-bg);
+  }
 }
 
 .#{$ns}TreeSelection {
@@ -270,15 +290,15 @@
   &-item {
     display: flex;
     // height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
+    font-size: var(--select-base-default-option-fontSize);
-    font-size: var(--Form-input-fontSize);
+    font-weight: var(--select-base-default-option-fontWeight);
-    padding: calc(
+    color: var(--select-base-default-option-color);
-        (
+    background: var(--select-base-default-option-bg-color);
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
+    line-height: var(--select-base-default-option-line-height);
-              var(--Form-input-fontSize)
+    padding: var(--select-base-default-option-paddingTop)
-          ) / 2
+      var(--select-base-default-option-paddingRight)
-      )
+      var(--select-base-default-option-paddingBottom)
-      var(--gap-sm);
+      var(--select-base-default-option-paddingLeft);
     flex-direction: row;
 
     > .#{$ns}Checkbox {
@@ -293,12 +313,14 @@
     }
 
     &:hover {
-      background: var(--Tree-item-onHover-bg);
+      color: var(--Form-select-menu-onHover-color);
+      background: var(--Form-select-menu-onHover-bg);
     }
 
     &.is-disabled {
       pointer-events: none;
-      color: var(--text--muted-color);
+      color: var(--Form-select-menu-onDisabled-color);
+      background: var(--Form-select-menu-onDisabled-bg);
     }
   }
 

packages/amis-ui/scss/components/form/_text.scss

@@ -12,6 +12,7 @@
   .#{$ns}TextControl-clear svg {
     font-size: var(--input-clearable-icon-size);
     fill: var(--input-clearable-default-color);
+    color: var(--input-clearable-default-color);
     width: var(--input-clearable-icon-size);
     height: var(--input-clearable-icon-size);
     &:hover {

packages/amis-ui/scss/components/form/_tree.scss

@@ -303,7 +303,8 @@
     cursor: pointer;
     flex: 1 auto;
     display: inline-block;
-    color: var(--Form-input-color);
+    color: var(--select-tree-color);
+    font-size: var(--select-tree-fontSize);
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

packages/amis-ui/scss/components/react-datetime.scss

@@ -62,7 +62,10 @@
   cursor: pointer;
   > span {
     display: inline-block;
-    border-radius: 2px;
+    border-radius: var(--inputDate-default-option-top-left-border-radius)
+      var(--inputDate-default-option-top-right-border-radius)
+      var(--inputDate-default-option-bottom-right-border-radius)
+      var(--inputDate-default-option-bottom-left-border-radius);
     height: 24px;
     width: 24px;
   }
@@ -77,7 +80,10 @@
 }
 .rdtPicker td.rdtOld,
 .rdtPicker td.rdtNew {
-  color: #b8babf;
+  color: var(--inputDate-disabled-option-color);
+  span {
+    background: var(--inputDate-disabled-option-bg-color);
+  }
 }
 .rdtPicker td.rdtToday {
   position: relative;

packages/amis-ui/src/components/DatePicker.tsx

@@ -818,6 +818,11 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           <Icon
             icon={viewMode === 'time' ? 'clock' : 'date'}
             className="icon"
+            iconContent={
+              viewMode === 'time'
+                ? 'DatePicker-toggler-clock'
+                : 'DatePicker-toggler-date'
+            }
           />
         </a>
 

packages/amis-ui/src/components/DateRangePicker.tsx

@@ -1655,10 +1655,15 @@ export class DateRangePicker extends React.Component<
           </a>
         ) : null}
 
-        <a className={`${ns}DateRangePicker-toggler`}>
+        <a className={cx(`DateRangePicker-toggler`)}>
           <Icon
             icon={viewMode === 'time' ? 'clock' : 'date'}
             className="icon"
+            iconContent={
+              viewMode === 'time'
+                ? 'DatePicker-toggler-clock'
+                : 'DatePicker-toggler-date'
+            }
           />
         </a>
 

packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap

@@ -74,6 +74,10 @@ exports[`Renderer:date 1`] = `
               <a
                 class="cxd-DatePicker-toggler"
               >
+                <div
+                  class=" DatePicker-toggler-date"
+                  style="display: none;"
+                />
                 <icon-mock
                   classname="icon icon-date"
                   icon="date"

packages/amis/__tests__/renderers/Form/__snapshots__/inputDate.test.tsx.snap

@@ -74,6 +74,10 @@ exports[`Renderer:inputDate 1`] = `
               <a
                 class="cxd-DatePicker-toggler"
               >
+                <div
+                  class=" DatePicker-toggler-date"
+                  style="display: none;"
+                />
                 <icon-mock
                   classname="icon icon-date"
                   icon="date"
@@ -209,6 +213,10 @@ exports[`Renderer:inputDate with clearable: clearable false 1`] = `
                         <a
                           class="cxd-DatePicker-toggler"
                         >
+                          <div
+                            class=" DatePicker-toggler-date"
+                            style="display: none;"
+                          />
                           <icon-mock
                             classname="icon icon-date"
                             icon="date"
@@ -365,6 +373,10 @@ exports[`Renderer:inputDate with clearable: clearable true 1`] = `
                         <a
                           class="cxd-DatePicker-toggler"
                         >
+                          <div
+                            class=" DatePicker-toggler-date"
+                            style="display: none;"
+                          />
                           <icon-mock
                             classname="icon icon-date"
                             icon="date"
@@ -560,6 +572,10 @@ exports[`Renderer:inputDate with format & inputFormat 1`] = `
                         <a
                           class="cxd-DatePicker-toggler"
                         >
+                          <div
+                            class=" DatePicker-toggler-date"
+                            style="display: none;"
+                          />
                           <icon-mock
                             classname="icon icon-date"
                             icon="date"