docs: update theme doc (#1845)

IDuxFE · Jan 31, 2024 · c59ecf3 · c59ecf3
1 parent 2405527
commit c59ecf3
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 72 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);