docs: update theme docs (#1797)

IDuxFE · Jan 8, 2024 · f9394f8 · f9394f8
1 parent 97cf777
commit f9394f8
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 89 deletions.
diff --git a/packages/components/alert/docs/Theme.zh.md b/packages/components/alert/docs/Theme.zh.md
@@ -1,9 +1,4 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `borderRadius` |  | `number` | `2` | `2` |
-| `errorBgColor` |  | `string` | `rgba(255, 87, 82, 0.1)` | `rgba(232, 81, 76, 0.2)` |
-| `height` |  | `number` | `32` | `32` |
-| `infoBgColor` |  | `string` | `rgba(28, 110, 255, 0.1)` | `rgba(64, 131, 232, 0.2)` |
-| `offlineBgColor` |  | `string` | `rgba(111, 119, 133, 0.1)` | `rgba(128, 137, 153, 0.2)` |
-| `successBgColor` |  | `string` | `rgba(18, 166, 121, 0.1)` | `rgba(64, 198, 149, 0.2)` |
-| `warningBgColor` |  | `string` | `rgba(253, 170, 29, 0.1)` | `rgba(253, 170, 29, 0.2)` |
+| `borderRadius` | 边框圆角 | `number` | `2` | `2` |
+| `height` | 高度 | `number` | `32` | `32` |
diff --git a/packages/components/alert/theme/dark.css b/packages/components/alert/theme/dark.css
@@ -6,5 +6,5 @@
   --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(128, 137, 153, 0.2);
+  --ix-alert-offline-bg-color: rgba(82, 89, 102, 0.2);
 }
diff --git a/packages/components/alert/theme/default.css b/packages/components/alert/theme/default.css
@@ -3,8 +3,8 @@
   --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(28, 110, 255, 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(111, 119, 133, 0.1);
+  --ix-alert-offline-bg-color: rgba(161, 167, 179, 0.1);
 }
diff --git a/packages/components/dark.css b/packages/components/dark.css
@@ -107,9 +107,9 @@
   --ix-color-info-text-hover: #1b61dd;
   --ix-color-info-text-active: #6aa6f4;
   --ix-color-info-icon: #4083e8;
-  --ix-color-offline: #808999;
-  --ix-color-offline-bg: #808999;
-  --ix-color-offline-text: #808999;
+  --ix-color-offline: #525966;
+  --ix-color-offline-bg: #525966;
+  --ix-color-offline-text: #525966;
   --ix-font-size-xs: 10px;
   --ix-font-size-sm: 12px;
   --ix-font-size-md: 14px;

diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css
@@ -107,9 +107,9 @@
   --ix-color-info-text-hover: #1b61dd;
   --ix-color-info-text-active: #6aa6f4;
   --ix-color-info-icon: #4083e8;
-  --ix-color-offline: #808999;
-  --ix-color-offline-bg: #808999;
-  --ix-color-offline-text: #808999;
+  --ix-color-offline: #525966;
+  --ix-color-offline-bg: #525966;
+  --ix-color-offline-text: #525966;
   --ix-font-size-xs: 10px;
   --ix-font-size-sm: 12px;
   --ix-font-size-md: 14px;
@@ -283,7 +283,7 @@
   --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(128, 137, 153, 0.2);
+  --ix-alert-offline-bg-color: rgba(82, 89, 102, 0.2);
 }
 
 /* ------ anchor css variables ------ */
@@ -572,8 +572,10 @@
   --ix-header-height-md: 48px;
   --ix-header-height-lg: 48px;
   --ix-header-height-xl: 56px;
-  --ix-header-bar-width: 4px;
+  --ix-header-bar-width: 2px;
   --ix-header-bar-bg-color: #4083e8;
+  --ix-header-bar-border-radius: 0;
+  --ix-header-bar-margin-right: 6px;
   --ix-header-prefix-color: #f4f8ff;
   --ix-header-prefix-color-hover: #4083e8;
   --ix-header-prefix-color-active: #4083e8;
@@ -1001,7 +1003,7 @@
   --ix-timeline-line-width: 2px;
   --ix-timeline-line-bg-color: #1f2329;
   --ix-timeline-pending-item-content-min-width: 40px;
-  --ix-timeline-content-margin-bottom: 20px;
+  --ix-timeline-content-margin-bottom: 16px;
 }
 
 /* ------ tooltip css variables ------ */
@@ -1059,7 +1061,7 @@
   --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 4px;
+  --ix-tree-node-checkbox-margin: 0 4px 0 1px;
   --ix-tree-node-icon-width: 24px;
   --ix-tree-expand-icon-color: #687080;
 }

diff --git a/packages/components/default.css b/packages/components/default.css
@@ -5,7 +5,7 @@
   --ix-color-warning: #fdaa1d;
   --ix-color-risk: #fa721b;
   --ix-color-fatal: #82010e;
-  --ix-color-info: #1c6eff;
+  --ix-color-info: #458fff;
   --ix-color-link: #1c6eff;
   --ix-color-white: #ffffff;
   --ix-color-text: #2f3540;
@@ -97,19 +97,19 @@
   --ix-color-fatal-text-hover: #8f1820;
   --ix-color-fatal-text-active: #5c000c;
   --ix-color-fatal-icon: #8f1820;
-  --ix-color-info-bg: #1c6eff;
-  --ix-color-info-bg-hover: #458fff;
-  --ix-color-info-bg-active: #0d51d9;
-  --ix-color-info-border: #1c6eff;
-  --ix-color-info-border-hover: #458fff;
-  --ix-color-info-border-active: #0d51d9;
-  --ix-color-info-text: #1c6eff;
-  --ix-color-info-text-hover: #458fff;
-  --ix-color-info-text-active: #0d51d9;
+  --ix-color-info-bg: #458fff;
+  --ix-color-info-bg-hover: #6eadff;
+  --ix-color-info-bg-active: #306ed9;
+  --ix-color-info-border: #458fff;
+  --ix-color-info-border-hover: #6eadff;
+  --ix-color-info-border-active: #306ed9;
+  --ix-color-info-text: #458fff;
+  --ix-color-info-text-hover: #6eadff;
+  --ix-color-info-text-active: #306ed9;
   --ix-color-info-icon: #458fff;
-  --ix-color-offline: #6f7785;
-  --ix-color-offline-bg: #6f7785;
-  --ix-color-offline-text: #6f7785;
+  --ix-color-offline: #a1a7b3;
+  --ix-color-offline-bg: #a1a7b3;
+  --ix-color-offline-text: #a1a7b3;
   --ix-font-size-xs: 10px;
   --ix-font-size-sm: 12px;
   --ix-font-size-md: 14px;

diff --git a/packages/components/default.full.css b/packages/components/default.full.css
@@ -5,7 +5,7 @@
   --ix-color-warning: #fdaa1d;
   --ix-color-risk: #fa721b;
   --ix-color-fatal: #82010e;
-  --ix-color-info: #1c6eff;
+  --ix-color-info: #458fff;
   --ix-color-link: #1c6eff;
   --ix-color-white: #ffffff;
   --ix-color-text: #2f3540;
@@ -97,19 +97,19 @@
   --ix-color-fatal-text-hover: #8f1820;
   --ix-color-fatal-text-active: #5c000c;
   --ix-color-fatal-icon: #8f1820;
-  --ix-color-info-bg: #1c6eff;
-  --ix-color-info-bg-hover: #458fff;
-  --ix-color-info-bg-active: #0d51d9;
-  --ix-color-info-border: #1c6eff;
-  --ix-color-info-border-hover: #458fff;
-  --ix-color-info-border-active: #0d51d9;
-  --ix-color-info-text: #1c6eff;
-  --ix-color-info-text-hover: #458fff;
-  --ix-color-info-text-active: #0d51d9;
+  --ix-color-info-bg: #458fff;
+  --ix-color-info-bg-hover: #6eadff;
+  --ix-color-info-bg-active: #306ed9;
+  --ix-color-info-border: #458fff;
+  --ix-color-info-border-hover: #6eadff;
+  --ix-color-info-border-active: #306ed9;
+  --ix-color-info-text: #458fff;
+  --ix-color-info-text-hover: #6eadff;
+  --ix-color-info-text-active: #306ed9;
   --ix-color-info-icon: #458fff;
-  --ix-color-offline: #6f7785;
-  --ix-color-offline-bg: #6f7785;
-  --ix-color-offline-text: #6f7785;
+  --ix-color-offline: #a1a7b3;
+  --ix-color-offline-bg: #a1a7b3;
+  --ix-color-offline-text: #a1a7b3;
   --ix-font-size-xs: 10px;
   --ix-font-size-sm: 12px;
   --ix-font-size-md: 14px;
@@ -280,10 +280,10 @@
   --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(28, 110, 255, 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(111, 119, 133, 0.1);
+  --ix-alert-offline-bg-color: rgba(161, 167, 179, 0.1);
 }
 
 /* ------ anchor css variables ------ */
@@ -572,8 +572,10 @@
   --ix-header-height-md: 48px;
   --ix-header-height-lg: 48px;
   --ix-header-height-xl: 56px;
-  --ix-header-bar-width: 4px;
+  --ix-header-bar-width: 2px;
   --ix-header-bar-bg-color: #1c6eff;
+  --ix-header-bar-border-radius: 0;
+  --ix-header-bar-margin-right: 6px;
   --ix-header-prefix-color: #2f3540;
   --ix-header-prefix-color-hover: #1c6eff;
   --ix-header-prefix-color-active: #1c6eff;
@@ -948,7 +950,7 @@
   --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(28, 110, 255, 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);
@@ -1001,7 +1003,7 @@
   --ix-timeline-line-width: 2px;
   --ix-timeline-line-bg-color: #e1e5eb;
   --ix-timeline-pending-item-content-min-width: 40px;
-  --ix-timeline-content-margin-bottom: 20px;
+  --ix-timeline-content-margin-bottom: 16px;
 }
 
 /* ------ tooltip css variables ------ */
@@ -1059,7 +1061,7 @@
   --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 4px;
+  --ix-tree-node-checkbox-margin: 0 4px 0 1px;
   --ix-tree-node-icon-width: 24px;
   --ix-tree-expand-icon-color: #bec3cc;
 }

diff --git a/packages/components/tag/theme/default.css b/packages/components/tag/theme/default.css
@@ -7,7 +7,7 @@
   --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(28, 110, 255, 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);

diff --git a/packages/components/timeline/docs/Theme.zh.md b/packages/components/timeline/docs/Theme.zh.md
@@ -1,10 +1,10 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `contentLabelMarginTop` |  | `number` | `8` | `8` |
-| `contentMarginBottom` |  | `number` | `20` | `20` |
-| `dotBorderWidth` |  | `number` | `2` | `2` |
-| `dotSize` |  | `number` | `12` | `12` |
-| `fontSize` |  | `number` | `12` | `12` |
-| `lineBgColor` |  | `string` | `#e1e5eb` | `#1F2329` |
-| `lineWidth` |  | `number` | `2` | `2` |
-| `pendingItemContentMinWidth` |  | `number` | `40` | `40` |
+| `contentLabelMarginTop` | 内容区标题上边距 | `number` | `8` | `8` |
+| `contentMarginBottom` | 内容区下边距 | `number` | `16` | `16` |
+| `dotBorderWidth` | 时间线圆点边框宽度 | `number` | `2` | `2` |
+| `dotSize` | 时间线圆点尺寸 | `number` | `12` | `12` |
+| `fontSize` | 字体大小 | `number` | `12` | `12` |
+| `lineBgColor` | 线条背景颜色 | `string` | `#e1e5eb` | `#1F2329` |
+| `lineWidth` | 线条宽度 | `number` | `2` | `2` |
+| `pendingItemContentMinWidth` | pending状态元素的内容区最小宽度 | `number` | `40` | `40` |
diff --git a/packages/components/timeline/theme/dark.css b/packages/components/timeline/theme/dark.css
@@ -7,5 +7,5 @@
   --ix-timeline-line-width: 2px;
   --ix-timeline-line-bg-color: #1f2329;
   --ix-timeline-pending-item-content-min-width: 40px;
-  --ix-timeline-content-margin-bottom: 20px;
+  --ix-timeline-content-margin-bottom: 16px;
 }
diff --git a/packages/components/timeline/theme/default.css b/packages/components/timeline/theme/default.css
@@ -7,5 +7,5 @@
   --ix-timeline-line-width: 2px;
   --ix-timeline-line-bg-color: #e1e5eb;
   --ix-timeline-pending-item-content-min-width: 40px;
-  --ix-timeline-content-margin-bottom: 20px;
+  --ix-timeline-content-margin-bottom: 16px;
 }
diff --git a/packages/components/timeline/theme/tokens.ts b/packages/components/timeline/theme/tokens.ts
@@ -6,13 +6,37 @@
  */
 
 export interface TimelineThemeTokens {
+  /**
+   * @desc 字体大小
+   */
   fontSize: number
+  /**
+   * @desc 时间线圆点尺寸
+   */
   dotSize: number
+  /**
+   * @desc 时间线圆点边框宽度
+   */
   dotBorderWidth: number
+  /**
+   * @desc 内容区标题上边距
+   */
   contentLabelMarginTop: number
+  /**
+   * @desc 线条宽度
+   */
   lineWidth: number
+  /**
+   * @desc 线条背景颜色
+   */
   lineBgColor: string
 
+  /**
+   * @desc pending状态元素的内容区最小宽度
+   */
   pendingItemContentMinWidth: number
+  /**
+   * @desc 内容区下边距
+   */
   contentMarginBottom: number
 }
diff --git a/packages/components/tree/docs/Theme.zh.md b/packages/components/tree/docs/Theme.zh.md
@@ -6,7 +6,7 @@
 | `expandIconColor` |  | `string` | `#bec3cc` | `#687080` |
 | `nodeBgColorHover` |  | `string` | `#f7f9fc` | `#171A1F` |
 | `nodeBgColorSelected` |  | `string` | `#ffffff` | `#0A0C0F` |
-| `nodeCheckboxMargin` |  | `string` | `0 4px 0 4px` | `0 4px 0 4px` |
+| `nodeCheckboxMargin` |  | `string` | `0 4px 0 1px` | `0 4px 0 1px` |
 | `nodeColorSelected` |  | `string` | `#1c6eff` | `#4083E8` |
 | `nodeContentHeight` |  | `number` | `32` | `32` |
 | `nodeContentLabelHighlightColor` |  | `string` | `#1c6eff` | `#4083E8` |

diff --git a/packages/components/tree/theme/dark.css b/packages/components/tree/theme/dark.css
@@ -11,7 +11,7 @@
   --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 4px;
+  --ix-tree-node-checkbox-margin: 0 4px 0 1px;
   --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
@@ -11,7 +11,7 @@
   --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 4px;
+  --ix-tree-node-checkbox-margin: 0 4px 0 1px;
   --ix-tree-node-icon-width: 24px;
   --ix-tree-expand-icon-color: #bec3cc;
 }