From d841acf5d7bf14267586d3f76f005ab44c4dd31a Mon Sep 17 00:00:00 2001 From: qkiroc <30946345+qkiroc@users.noreply.github.com> Date: Mon, 20 Feb 2023 12:34:43 +0800 Subject: [PATCH] =?UTF-8?q?styles:=20=E4=B8=8B=E6=8B=89=E6=A1=86=E3=80=81?= =?UTF-8?q?=E6=97=A5=E6=9C=9F=E3=80=81=E6=97=B6=E9=97=B4=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=20(#6184)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 单测范围修改 (#6133) * 单测范围修改 * 单测范围修改 * feat:下拉框&时间/日期选择器主题适配 (#6134) * feat: select支持主题变量配置 * feat:下拉框&时间/日期选择器主题适配 * fix:更新测试用例 * fix:代码扫描修复 * fix:代码扫描修复 --------- Co-authored-by: hongyang03 * feat:下拉框主题样式优化 (#6142) * feat:下拉框主题样式优化 * fix:测试用例修复 --------- Co-authored-by: hongyang03 * fix: 下拉框&日期测试修复 (#6183) Co-authored-by: hongyang03 * fix:恢复测试用例 (#6189) Co-authored-by: hongyang03 * fix:恢复测试用例 (#6191) Co-authored-by: hongyang03 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com> Co-authored-by: hongyang03 --- .github/workflows/codeql-analysis.yml | 58 +-- .github/workflows/gh-pages.yml | 4 +- .github/workflows/pr-test.yml | 2 +- packages/amis-ui/scss/_components.scss | 465 +++++++++++++++++- packages/amis-ui/scss/_properties.scss | 202 +------- .../amis-ui/scss/components/_result-box.scss | 100 +++- .../scss/components/form/_date-range.scss | 84 +++- .../amis-ui/scss/components/form/_date.scss | 116 ++++- .../scss/components/form/_location.scss | 32 +- .../scss/components/form/_nested-select.scss | 8 +- .../amis-ui/scss/components/form/_select.scss | 171 +++++-- .../scss/components/form/_selection.scss | 102 ++-- .../amis-ui/scss/components/form/_text.scss | 1 + .../amis-ui/scss/components/form/_tree.scss | 3 +- .../scss/components/react-datetime.scss | 10 +- .../amis-ui/src/components/DatePicker.tsx | 5 + .../src/components/DateRangePicker.tsx | 7 +- .../Form/__snapshots__/datetime.test.tsx.snap | 4 + .../__snapshots__/inputDate.test.tsx.snap | 16 + 19 files changed, 990 insertions(+), 400 deletions(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index ad3fa6557..78a490468 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.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 - uses: actions/checkout@v2 + - name: Checkout repository + uses: actions/checkout@v2 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v1 - with: - languages: ${{ matrix.language }} - # 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. - # 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 + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + languages: ${{ matrix.language }} + # 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. + # 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 - # 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) - - name: Autobuild - uses: github/codeql-action/autobuild@v1 + # 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) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 - # ℹ️ Command-line programs to run using the OS shell. - # 📚 https://git.io/JvXDl + # ℹ️ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl - # ✏️ 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 - # uses a compiled language + # ✏️ 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 + # uses a compiled language - #- run: | - # make bootstrap - # make release + #- run: | + # make bootstrap + # make release - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index eda8ec427..98ed60f37 100644 --- a/.github/workflows/gh-pages.yml +++ b/.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 diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index f73c4a9ce..1cd0e13ad 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -2,7 +2,7 @@ name: PR test on: pull_request: - branches: [master] + branches: ['**'] jobs: build: diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 83a8977dd..1eba046e9 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/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: ''; + --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: 'ic_时间'; + --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); } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 45d103177..23818827a 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/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-borderRadius: var(--Form-select-borderRadius); + --InputGroup-select-borderColor: var(--borderColor); + --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); diff --git a/packages/amis-ui/scss/components/_result-box.scss b/packages/amis-ui/scss/components/_result-box.scss index b4450754a..d91e26ad0 100644 --- a/packages/amis-ui/scss/components/_result-box.scss +++ b/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); - box-shadow: var(--Form-input-boxShadow); - background: var(--Form-input-onFocused-bg); + background: var(--Form-select-onHover-bg); + 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); + } + + &.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); - box-shadow: var(--Form-input-boxShadow); - background: var(--Form-input-onFocused-bg); + background: var(--Form-select-onHover-bg); + 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); } } @@ -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); - padding: 0 var(--gap-xs); + font-size: var(--select-multiple-fontSize); min-height: var(--ResultBox-tag-height); flex-wrap: nowrap; display: inline-flex; align-items: center; - margin-right: var(--gap-xs); - margin-bottom: var(--ResultBox-tag-marginBottom); + 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); 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); diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss index e6bb9539b..01b87749c 100644 --- a/packages/amis-ui/scss/components/form/_date-range.scss +++ b/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); } diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index 0718798cd..045cee532 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/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); - color: var(--Form-select-menu-color); + background: var(--inputTime-default-bg-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); - background: var(--Form-select-menu-onHover-bg); + color: var(--inputTime-active-color); + background: var(--inputTime-active-bg-color); } &:hover { - color: var(--Form-select-menu-onHover-color); - background: #f7f7f9; + color: var(--inputTime-hover-color); + 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); - background: #f7f7f9; + color: var(--inputDate-other-hover-color); + background: var(--inputDate-other-hover-bg-color); } } @@ -659,15 +725,19 @@ td.rdtQuarter { background: transparent; > span { - background: var(--info) !important; - color: var(--white); + background: var(--inputDate-other-active-bg-color) !important; + color: var(--inputDate-other-active-color) !important; } } &.rdtDisabled, &.rdtDisabled:hover { - background: var(--Calendar-cell-onDisabled-bg); - color: #b8babf; + background: var(--inputDate-other-disabled-bg-color); + + > span { + background: var(--inputDate-other-disabled-bg-color); + color: var(--inputDate-other-disabled-color); + } } } diff --git a/packages/amis-ui/scss/components/form/_location.scss b/packages/amis-ui/scss/components/form/_location.scss index b66fadd04..cc8c54745 100644 --- a/packages/amis-ui/scss/components/form/_location.scss +++ b/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); - font-size: var(--DatePicker-fontSize); - padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX); - height: var(--DatePicker-height); + border: var(--borders-width-2) solid var(--colors-neutral-line-8); + font-size: var(--fonts-size-7); + padding: var(--sizes-size-4) var(--sizes-size-7); + height: var(--sizes-base-16); outline: none; white-space: nowrap; - color: var(--DatePicker-color); - background: var(--DatePicker-bg); + color: var(--colors-neutral-text-2); + background: var(--colors-neutral-fill-11); border-radius: var(--LocationPicker-borderRadius); &:not(.is-disabled) { cursor: pointer; &:hover { - background: var(--DatePicker-onHover-bg); - border-color: var(--DatePicker-onHover-borderColor); + background: var(--colors-neutral-fill-11); + 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; - box-shadow: var(--boxShadow); - } + border: none; + box-shadow: var(--boxShadow); + } } .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker { diff --git a/packages/amis-ui/scss/components/form/_nested-select.scss b/packages/amis-ui/scss/components/form/_nested-select.scss index a8bcb535e..71823d0b4 100644 --- a/packages/amis-ui/scss/components/form/_nested-select.scss +++ b/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); - line-height: var(--Form-input-height); + min-height: var(--select-base-default-option-line-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; diff --git a/packages/amis-ui/scss/components/form/_select.scss b/packages/amis-ui/scss/components/form/_select.scss index c9734bee8..66425046a 100644 --- a/packages/amis-ui/scss/components/form/_select.scss +++ b/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); - margin-right: var(--gap-xs); - margin-bottom: var(--gap-xs); + 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); + 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); - border: var(--Form-select-borderWidth) solid var(--Form-select-borderColor); + 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); - $paddingY: calc( - ( - var(--Form-selectOption-height) - var(--Form-input-lineHeight) * - var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2 - ) / 2 - ); - padding: $paddingY 0 $paddingY var(--Form-select-paddingX); + padding: var(--select-base-default-paddingTop) + var(--select-base-default-paddingRight) + var(--select-base-default-paddingBottom) + var(--select-base-default-paddingLeft); 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); - background: var(--Form-input-onDisabled-bg); - border-color: var(--Form-input-onDisabled-borderColor); + 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); } &:focus { @@ -87,12 +151,10 @@ margin-top: px2rem(4px); .#{$ns}Select-menu { .#{$ns}Select-option { - height: px2rem(32px); - line-height: px2rem(32px); + line-height: var(--select-base-default-option-line-height); } .#{$ns}Select-addBtn { - height: px2rem(32px); - line-height: px2rem(30px); + line-height: var(--select-base-default-option-line-height); } } } @@ -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( - ( - var(--Form-select-menu-height) - var(--Form-input-lineHeight) * - var(--Form-input-fontSize) - ) / 2 - ) - var(--Form-select-paddingX); + padding: var(--select-base-default-option-paddingTop) + var(--select-base-default-option-paddingRight) + var(--select-base-default-option-paddingBottom) + var(--select-base-default-option-paddingLeft); 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( - ( - var(--Form-select-menu-height) - var(--Form-input-lineHeight) * - var(--Form-input-fontSize) - ) / 2 - ) - var(--Form-select-paddingX); + padding: var(--select-base-default-option-paddingTop) + var(--select-base-default-option-paddingRight) + var(--select-base-default-option-paddingBottom) + var(--select-base-default-option-paddingLeft); &: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 { diff --git a/packages/amis-ui/scss/components/form/_selection.scss b/packages/amis-ui/scss/components/form/_selection.scss index 31e8a4305..6541f0d86 100644 --- a/packages/amis-ui/scss/components/form/_selection.scss +++ b/packages/amis-ui/scss/components/form/_selection.scss @@ -48,23 +48,25 @@ padding: var(--gap-xs) 0; &-group > &-itemLabel { - height: px2rem(32px); - padding: var(--gap-xs) var(--gap-base); - color: var(--FileControl-icon-color); + padding: var(--select-group-paddingTop) var(--select-group-paddingRight) + var(--select-group-paddingBottom) var(--select-group-paddingLeft); + 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); - line-height: var(--Form-input-lineHeight); - font-size: var(--Form-input-fontSize); - padding: calc( - ( - var(--Form-input-height) - var(--Form-input-lineHeight) * - var(--Form-input-fontSize) - ) / 2 - ) - var(--gap-sm); + color: var(--select-base-default-option-color); + background: var(--select-base-default-option-bg-color); + line-height: var(--select-base-default-option-line-height); + font-size: var(--select-base-default-option-fontSize); + font-weight: var(--select-base-default-option-fontWeight); + padding: var(--select-base-default-option-paddingTop) + var(--select-base-default-option-paddingRight) + var(--select-base-default-option-paddingBottom) + var(--select-base-default-option-paddingLeft); 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); - padding-top: var(--gap-xs); - padding-bottom: px2rem(6px); + color: var(--select-table-color); + font-size: var(--select-table-fontSize); 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:first-child { - padding-left: px2rem(10px); + .#{$ns}Table-table > tbody > tr > td { + padding: var(--select-table-option-paddingTop) + 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(--Form-input-fontSize); - padding: calc( - ( - var(--Form-input-height) - var(--Form-input-lineHeight) * - var(--Form-input-fontSize) - ) / 2 - ) - var(--gap-sm); + 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); + line-height: var(--select-base-default-option-line-height); + padding: var(--select-base-default-option-paddingTop) + var(--select-base-default-option-paddingRight) + var(--select-base-default-option-paddingBottom) + 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); } } diff --git a/packages/amis-ui/scss/components/form/_text.scss b/packages/amis-ui/scss/components/form/_text.scss index 70ea1441a..4b5c408d1 100644 --- a/packages/amis-ui/scss/components/form/_text.scss +++ b/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 { diff --git a/packages/amis-ui/scss/components/form/_tree.scss b/packages/amis-ui/scss/components/form/_tree.scss index 6d4d31cc9..4e9b8847e 100644 --- a/packages/amis-ui/scss/components/form/_tree.scss +++ b/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; diff --git a/packages/amis-ui/scss/components/react-datetime.scss b/packages/amis-ui/scss/components/react-datetime.scss index 62cd71093..c456eebc3 100644 --- a/packages/amis-ui/scss/components/react-datetime.scss +++ b/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; diff --git a/packages/amis-ui/src/components/DatePicker.tsx b/packages/amis-ui/src/components/DatePicker.tsx index e239910cd..b2c85e882 100644 --- a/packages/amis-ui/src/components/DatePicker.tsx +++ b/packages/amis-ui/src/components/DatePicker.tsx @@ -818,6 +818,11 @@ export class DatePicker extends React.Component { diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx index da3fd9bdf..f9d129685 100644 --- a/packages/amis-ui/src/components/DateRangePicker.tsx +++ b/packages/amis-ui/src/components/DateRangePicker.tsx @@ -1655,10 +1655,15 @@ export class DateRangePicker extends React.Component< ) : null} - + diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap index 98a363401..6dee3db9e 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap @@ -74,6 +74,10 @@ exports[`Renderer:date 1`] = ` +