diff --git a/packages/components/alert/theme/dark.css b/packages/components/alert/theme/dark.css index db5fada04..eb8408ffe 100644 --- a/packages/components/alert/theme/dark.css +++ b/packages/components/alert/theme/dark.css @@ -2,9 +2,9 @@ :root { --ix-alert-height: 32px; --ix-alert-border-radius: 2px; - --ix-alert-success-bg-color: rgba(64, 198, 149, 0.2); - --ix-alert-info-bg-color: rgba(64, 131, 232, 0.2); - --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.2); - --ix-alert-error-bg-color: rgba(232, 81, 76, 0.2); - --ix-alert-offline-bg-color: rgba(82, 89, 102, 0.2); + --ix-alert-success-bg-color: rgb(21, 49, 42); + --ix-alert-info-bg-color: rgb(21, 36, 58); + --ix-alert-warning-bg-color: rgb(59, 44, 18); + --ix-alert-error-bg-color: rgb(54, 26, 27); + --ix-alert-offline-bg-color: rgb(24, 27, 32); } diff --git a/packages/components/alert/theme/default.css b/packages/components/alert/theme/default.css index 449baddf4..50d8ce1a1 100644 --- a/packages/components/alert/theme/default.css +++ b/packages/components/alert/theme/default.css @@ -2,9 +2,9 @@ :root { --ix-alert-height: 32px; --ix-alert-border-radius: 2px; - --ix-alert-success-bg-color: rgba(18, 166, 121, 0.1); - --ix-alert-info-bg-color: rgba(69, 143, 255, 0.1); - --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.1); - --ix-alert-error-bg-color: rgba(255, 87, 82, 0.1); - --ix-alert-offline-bg-color: rgba(161, 167, 179, 0.1); + --ix-alert-success-bg-color: rgb(231, 246, 242); + --ix-alert-info-bg-color: rgb(236, 244, 255); + --ix-alert-warning-bg-color: rgb(255, 247, 232); + --ix-alert-error-bg-color: rgb(255, 238, 238); + --ix-alert-offline-bg-color: rgb(246, 246, 247); } diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css index 37f66b9ce..691e7bcb8 100644 --- a/packages/components/dark.full.css +++ b/packages/components/dark.full.css @@ -279,11 +279,11 @@ :root { --ix-alert-height: 32px; --ix-alert-border-radius: 2px; - --ix-alert-success-bg-color: rgba(64, 198, 149, 0.2); - --ix-alert-info-bg-color: rgba(64, 131, 232, 0.2); - --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.2); - --ix-alert-error-bg-color: rgba(232, 81, 76, 0.2); - --ix-alert-offline-bg-color: rgba(82, 89, 102, 0.2); + --ix-alert-success-bg-color: rgb(21, 49, 42); + --ix-alert-info-bg-color: rgb(21, 36, 58); + --ix-alert-warning-bg-color: rgb(59, 44, 18); + --ix-alert-error-bg-color: rgb(54, 26, 27); + --ix-alert-offline-bg-color: rgb(24, 27, 32); } /* ------ anchor css variables ------ */ @@ -943,19 +943,19 @@ /* ------ tag css variables ------ */ :root { - --ix-tag-bg-color-normal: rgba(128, 137, 153, 0.2); + --ix-tag-bg-color-normal: rgb(34, 37, 43); --ix-tag-bg-color-filled: #525966; --ix-tag-border-width: 1px; --ix-tag-border-radius: 2px; --ix-tag-min-width-rect: 40px; --ix-tag-min-width-round: 48px; --ix-tag-min-width-numeric: 64px; - --ix-tag-success-bg-color: rgba(64, 198, 149, 0.2); - --ix-tag-info-bg-color: rgba(64, 131, 232, 0.2); - --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.2); - --ix-tag-risk-bg-color: rgba(232, 134, 65, 0.2); - --ix-tag-error-bg-color: rgba(232, 81, 76, 0.2); - --ix-tag-fatal-bg-color: rgba(143, 30, 31, 0.2); + --ix-tag-success-bg-color: rgb(21, 49, 42); + --ix-tag-info-bg-color: rgb(21, 36, 58); + --ix-tag-warning-bg-color: rgb(59, 44, 18); + --ix-tag-risk-bg-color: rgb(54, 36, 25); + --ix-tag-error-bg-color: rgb(54, 26, 27); + --ix-tag-fatal-bg-color: rgb(37, 16, 18); } /* ------ textarea css variables ------ */ @@ -1057,12 +1057,12 @@ --ix-tree-node-bg-color-hover: #171a1f; --ix-tree-node-bg-color-selected: #0a0c0f; --ix-tree-node-color-selected: #4083e8; + --ix-tree-node-padding-horizontal: 4px; --ix-tree-node-padding-vertical: 0px; --ix-tree-node-content-height: 32px; - --ix-tree-node-content-padding: 0 8px 0 4px; - --ix-tree-node-content-label-padding: 0 4px; --ix-tree-node-content-label-highlight-color: #4083e8; - --ix-tree-node-checkbox-margin: 0 4px 0 1px; + --ix-tree-node-content-prefix-margin-right: 4px; + --ix-tree-node-checkbox-margin-right: 4px; --ix-tree-node-icon-width: 24px; --ix-tree-expand-icon-color: #687080; } @@ -1074,7 +1074,7 @@ --ix-tree-select-option-padding: 8px 12px; --ix-tree-select-option-margin-left: 8px; --ix-tree-select-option-container-padding: 4px 0; - --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; + --ix-tree-select-option-container-tree-node-padding: 0 0 0 12px; --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; } diff --git a/packages/components/default.full.css b/packages/components/default.full.css index bf093ffe4..6cb4f39a1 100644 --- a/packages/components/default.full.css +++ b/packages/components/default.full.css @@ -279,11 +279,11 @@ :root { --ix-alert-height: 32px; --ix-alert-border-radius: 2px; - --ix-alert-success-bg-color: rgba(18, 166, 121, 0.1); - --ix-alert-info-bg-color: rgba(69, 143, 255, 0.1); - --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.1); - --ix-alert-error-bg-color: rgba(255, 87, 82, 0.1); - --ix-alert-offline-bg-color: rgba(161, 167, 179, 0.1); + --ix-alert-success-bg-color: rgb(231, 246, 242); + --ix-alert-info-bg-color: rgb(236, 244, 255); + --ix-alert-warning-bg-color: rgb(255, 247, 232); + --ix-alert-error-bg-color: rgb(255, 238, 238); + --ix-alert-offline-bg-color: rgb(246, 246, 247); } /* ------ anchor css variables ------ */ @@ -943,19 +943,19 @@ /* ------ tag css variables ------ */ :root { - --ix-tag-bg-color-normal: rgba(111, 119, 133, 0.1); + --ix-tag-bg-color-normal: rgb(241, 241, 243); --ix-tag-bg-color-filled: #a1a7b3; --ix-tag-border-width: 1px; --ix-tag-border-radius: 2px; --ix-tag-min-width-rect: 40px; --ix-tag-min-width-round: 48px; --ix-tag-min-width-numeric: 64px; - --ix-tag-success-bg-color: rgba(18, 166, 121, 0.1); - --ix-tag-info-bg-color: rgba(69, 143, 255, 0.1); - --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.1); - --ix-tag-risk-bg-color: rgba(250, 114, 27, 0.1); - --ix-tag-error-bg-color: rgba(255, 87, 82, 0.1); - --ix-tag-fatal-bg-color: rgba(130, 1, 14, 0.1); + --ix-tag-success-bg-color: rgb(231, 246, 242); + --ix-tag-info-bg-color: rgb(236, 244, 255); + --ix-tag-warning-bg-color: rgb(255, 247, 232); + --ix-tag-risk-bg-color: rgb(255, 241, 232); + --ix-tag-error-bg-color: rgb(255, 238, 238); + --ix-tag-fatal-bg-color: rgb(243, 230, 231); } /* ------ textarea css variables ------ */ @@ -1057,12 +1057,12 @@ --ix-tree-node-bg-color-hover: #f7f9fc; --ix-tree-node-bg-color-selected: #ffffff; --ix-tree-node-color-selected: #1c6eff; + --ix-tree-node-padding-horizontal: 4px; --ix-tree-node-padding-vertical: 0px; --ix-tree-node-content-height: 32px; - --ix-tree-node-content-padding: 0 8px 0 4px; - --ix-tree-node-content-label-padding: 0 4px; --ix-tree-node-content-label-highlight-color: #1c6eff; - --ix-tree-node-checkbox-margin: 0 4px 0 1px; + --ix-tree-node-content-prefix-margin-right: 4px; + --ix-tree-node-checkbox-margin-right: 4px; --ix-tree-node-icon-width: 24px; --ix-tree-expand-icon-color: #bec3cc; } @@ -1074,7 +1074,7 @@ --ix-tree-select-option-padding: 8px 12px; --ix-tree-select-option-margin-left: 8px; --ix-tree-select-option-container-padding: 4px 0; - --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; + --ix-tree-select-option-container-tree-node-padding: 0 0 0 12px; --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; } diff --git a/packages/components/tag/docs/Theme.zh.md b/packages/components/tag/docs/Theme.zh.md index e02a048da..4b581e114 100644 --- a/packages/components/tag/docs/Theme.zh.md +++ b/packages/components/tag/docs/Theme.zh.md @@ -1,7 +1,7 @@ | 名称 | 描述 | 类型 | default | dark | |---|---|---|---|---| | `bgColorFilled` | 标签填充背景颜色 | `string` | `#a1a7b3` | `#525966` | -| `bgColorNormal` | 标签普通背景颜色 | `string` | `rgba(111, 119, 133, 0.1)` | `rgba(128, 137, 153, 0.2)` | +| `bgColorNormal` | 标签普通背景颜色 | `string` | `rgb(241, 241, 243)` | `rgb(34, 37, 43)` | | `borderRadius` | 标签边框圆角尺寸 | `number` | `2` | `2` | | `borderWidth` | 标签边框尺寸 | `number` | `1` | `1` | | `minWidthNumeric` | numeric标签最小宽度 | `number` | `64` | `64` | diff --git a/packages/components/tag/theme/dark.css b/packages/components/tag/theme/dark.css index ea67e746f..32bcba53e 100644 --- a/packages/components/tag/theme/dark.css +++ b/packages/components/tag/theme/dark.css @@ -1,16 +1,16 @@ /* ------ tag css variables ------ */ :root { - --ix-tag-bg-color-normal: rgba(128, 137, 153, 0.2); + --ix-tag-bg-color-normal: rgb(34, 37, 43); --ix-tag-bg-color-filled: #525966; --ix-tag-border-width: 1px; --ix-tag-border-radius: 2px; --ix-tag-min-width-rect: 40px; --ix-tag-min-width-round: 48px; --ix-tag-min-width-numeric: 64px; - --ix-tag-success-bg-color: rgba(64, 198, 149, 0.2); - --ix-tag-info-bg-color: rgba(64, 131, 232, 0.2); - --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.2); - --ix-tag-risk-bg-color: rgba(232, 134, 65, 0.2); - --ix-tag-error-bg-color: rgba(232, 81, 76, 0.2); - --ix-tag-fatal-bg-color: rgba(143, 30, 31, 0.2); + --ix-tag-success-bg-color: rgb(21, 49, 42); + --ix-tag-info-bg-color: rgb(21, 36, 58); + --ix-tag-warning-bg-color: rgb(59, 44, 18); + --ix-tag-risk-bg-color: rgb(54, 36, 25); + --ix-tag-error-bg-color: rgb(54, 26, 27); + --ix-tag-fatal-bg-color: rgb(37, 16, 18); } diff --git a/packages/components/tag/theme/default.css b/packages/components/tag/theme/default.css index 864093d2e..1a15dbfb5 100644 --- a/packages/components/tag/theme/default.css +++ b/packages/components/tag/theme/default.css @@ -1,16 +1,16 @@ /* ------ tag css variables ------ */ :root { - --ix-tag-bg-color-normal: rgba(111, 119, 133, 0.1); + --ix-tag-bg-color-normal: rgb(241, 241, 243); --ix-tag-bg-color-filled: #a1a7b3; --ix-tag-border-width: 1px; --ix-tag-border-radius: 2px; --ix-tag-min-width-rect: 40px; --ix-tag-min-width-round: 48px; --ix-tag-min-width-numeric: 64px; - --ix-tag-success-bg-color: rgba(18, 166, 121, 0.1); - --ix-tag-info-bg-color: rgba(69, 143, 255, 0.1); - --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.1); - --ix-tag-risk-bg-color: rgba(250, 114, 27, 0.1); - --ix-tag-error-bg-color: rgba(255, 87, 82, 0.1); - --ix-tag-fatal-bg-color: rgba(130, 1, 14, 0.1); + --ix-tag-success-bg-color: rgb(231, 246, 242); + --ix-tag-info-bg-color: rgb(236, 244, 255); + --ix-tag-warning-bg-color: rgb(255, 247, 232); + --ix-tag-risk-bg-color: rgb(255, 241, 232); + --ix-tag-error-bg-color: rgb(255, 238, 238); + --ix-tag-fatal-bg-color: rgb(243, 230, 231); } diff --git a/packages/components/tree-select/docs/Theme.zh.md b/packages/components/tree-select/docs/Theme.zh.md index 9925c2a8e..fce52a31b 100644 --- a/packages/components/tree-select/docs/Theme.zh.md +++ b/packages/components/tree-select/docs/Theme.zh.md @@ -1,7 +1,7 @@ | 名称 | 描述 | 类型 | default | dark | |---|---|---|---|---| | `optionContainerPadding` | | `string | number` | `4px 0` | `4px 0` | -| `optionContainerTreeNodePadding` | | `string | number` | `0 0 0 8px` | `0 0 0 8px` | +| `optionContainerTreeNodePadding` | | `string | number` | `0 0 0 12px` | `0 0 0 12px` | | `optionFontSize` | | `number` | `12` | `12` | | `optionHeight` | | `number` | `32` | `32` | | `optionMarginLeft` | | `number` | `8` | `8` | diff --git a/packages/components/tree-select/theme/dark.css b/packages/components/tree-select/theme/dark.css index 9eba992a8..f4766cbd8 100644 --- a/packages/components/tree-select/theme/dark.css +++ b/packages/components/tree-select/theme/dark.css @@ -5,6 +5,6 @@ --ix-tree-select-option-padding: 8px 12px; --ix-tree-select-option-margin-left: 8px; --ix-tree-select-option-container-padding: 4px 0; - --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; + --ix-tree-select-option-container-tree-node-padding: 0 0 0 12px; --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; } diff --git a/packages/components/tree-select/theme/default.css b/packages/components/tree-select/theme/default.css index 9eba992a8..f4766cbd8 100644 --- a/packages/components/tree-select/theme/default.css +++ b/packages/components/tree-select/theme/default.css @@ -5,6 +5,6 @@ --ix-tree-select-option-padding: 8px 12px; --ix-tree-select-option-margin-left: 8px; --ix-tree-select-option-container-padding: 4px 0; - --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; + --ix-tree-select-option-container-tree-node-padding: 0 0 0 12px; --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; } diff --git a/packages/components/tree/docs/Theme.zh.md b/packages/components/tree/docs/Theme.zh.md index 980aae41b..a4cccee8d 100644 --- a/packages/components/tree/docs/Theme.zh.md +++ b/packages/components/tree/docs/Theme.zh.md @@ -6,11 +6,11 @@ | `expandIconColor` | | `string` | `#bec3cc` | `#687080` | | `nodeBgColorHover` | | `string` | `#f7f9fc` | `#171A1F` | | `nodeBgColorSelected` | | `string` | `#ffffff` | `#0A0C0F` | -| `nodeCheckboxMargin` | | `string` | `0 4px 0 1px` | `0 4px 0 1px` | +| `nodeCheckboxMarginRight` | | `number` | `4` | `4` | | `nodeColorSelected` | | `string` | `#1c6eff` | `#4083E8` | | `nodeContentHeight` | | `number` | `32` | `32` | | `nodeContentLabelHighlightColor` | | `string` | `#1c6eff` | `#4083E8` | -| `nodeContentLabelPadding` | | `string | number` | `0 4px` | `0 4px` | -| `nodeContentPadding` | | `string | number` | `0 8px 0 4px` | `0 8px 0 4px` | +| `nodeContentPrefixMarginRight` | | `number` | `4` | `4` | | `nodeIconWidth` | | `number` | `24` | `24` | +| `nodePaddingHorizontal` | | `string | number` | `4` | `4` | | `nodePaddingVertical` | | `string | number` | `0px` | `0px` | diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less index 7c1b74971..09437d1a3 100644 --- a/packages/components/tree/style/index.less +++ b/packages/components/tree/style/index.less @@ -185,7 +185,7 @@ height: var(--ix-tree-node-content-height); display: flex; align-items: center; - justify-content: start; + justify-content: flex-start; cursor: pointer; &-noop { @@ -203,7 +203,7 @@ text-align: center; display: flex; align-items: center; - justify-content: left; + justify-content: flex-start; cursor: default; &-line { @@ -251,6 +251,10 @@ display: flex; justify-items: center; align-items: center; + + .@{icon-prefix} { + color: var(--ix-color-icon); + } } &-prefix { margin-right: var(--ix-tree-node-content-prefix-margin-right); diff --git a/packages/components/tree/theme/dark.css b/packages/components/tree/theme/dark.css index dd10d92b9..d13ca8093 100644 --- a/packages/components/tree/theme/dark.css +++ b/packages/components/tree/theme/dark.css @@ -6,12 +6,12 @@ --ix-tree-node-bg-color-hover: #171a1f; --ix-tree-node-bg-color-selected: #0a0c0f; --ix-tree-node-color-selected: #4083e8; + --ix-tree-node-padding-horizontal: 4px; --ix-tree-node-padding-vertical: 0px; --ix-tree-node-content-height: 32px; - --ix-tree-node-content-padding: 0 8px 0 4px; - --ix-tree-node-content-label-padding: 0 4px; --ix-tree-node-content-label-highlight-color: #4083e8; - --ix-tree-node-checkbox-margin: 0 4px 0 1px; + --ix-tree-node-content-prefix-margin-right: 4px; + --ix-tree-node-checkbox-margin-right: 4px; --ix-tree-node-icon-width: 24px; --ix-tree-expand-icon-color: #687080; } diff --git a/packages/components/tree/theme/default.css b/packages/components/tree/theme/default.css index fd1b818b4..5f6a6f66a 100644 --- a/packages/components/tree/theme/default.css +++ b/packages/components/tree/theme/default.css @@ -6,12 +6,12 @@ --ix-tree-node-bg-color-hover: #f7f9fc; --ix-tree-node-bg-color-selected: #ffffff; --ix-tree-node-color-selected: #1c6eff; + --ix-tree-node-padding-horizontal: 4px; --ix-tree-node-padding-vertical: 0px; --ix-tree-node-content-height: 32px; - --ix-tree-node-content-padding: 0 8px 0 4px; - --ix-tree-node-content-label-padding: 0 4px; --ix-tree-node-content-label-highlight-color: #1c6eff; - --ix-tree-node-checkbox-margin: 0 4px 0 1px; + --ix-tree-node-content-prefix-margin-right: 4px; + --ix-tree-node-checkbox-margin-right: 4px; --ix-tree-node-icon-width: 24px; --ix-tree-expand-icon-color: #bec3cc; } diff --git a/packages/pro/tree/style/variables.less b/packages/pro/tree/style/variables.less index 62453252a..e619376fa 100644 --- a/packages/pro/tree/style/variables.less +++ b/packages/pro/tree/style/variables.less @@ -13,4 +13,4 @@ @pro-tree-divider-horizontal-spacing: @pro-tree-header-search-wrapper-horizontal-spacing; @pro-tree-divider-vertical-spacing: var(--ix-margin-size-sm); -@pro-tree-node-padding: 0 0 0 var(--ix-padding-size-md); +@pro-tree-node-padding: 0 var(--ix-padding-size-md) 0 var(--ix-padding-size-md);