fix(comp:*): update colorInfo and colorOfflineText token (#1896)

IDuxFE · Apr 17, 2024 · 8a10fc8 · 8a10fc8
1 parent f9737fd
commit 8a10fc8
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 38 deletions.
diff --git a/packages/components/breadcrumb/docs/Theme.zh.md b/packages/components/breadcrumb/docs/Theme.zh.md
@@ -1,6 +1,6 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `fontSize` |  | `number` | `12` | `12` |
+| `fontSize` |  | `number` | `14` | `14` |
 | `itemColor` |  | `string` | `#6f7785` | `#808999` |
 | `lastItemColor` |  | `string` | `#2f3540` | `#F4F8FF` |
 | `linkColor` |  | `string` | `#6f7785` | `#808999` |

diff --git a/packages/components/breadcrumb/theme/dark.css b/packages/components/breadcrumb/theme/dark.css
@@ -1,6 +1,6 @@
 /* ------ breadcrumb css variables ------ */
 :root {
-  --ix-breadcrumb-font-size: 12px;
+  --ix-breadcrumb-font-size: 14px;
   --ix-breadcrumb-item-color: #808999;
   --ix-breadcrumb-link-color: #808999;
   --ix-breadcrumb-link-color-hover: #4083e8;

diff --git a/packages/components/breadcrumb/theme/default.css b/packages/components/breadcrumb/theme/default.css
@@ -1,6 +1,6 @@
 /* ------ breadcrumb css variables ------ */
 :root {
-  --ix-breadcrumb-font-size: 12px;
+  --ix-breadcrumb-font-size: 14px;
   --ix-breadcrumb-item-color: #6f7785;
   --ix-breadcrumb-link-color: #6f7785;
   --ix-breadcrumb-link-color-hover: #1c6eff;

diff --git a/packages/components/dark.css b/packages/components/dark.css
@@ -109,7 +109,7 @@
   --ix-color-info-icon: #4083e8;
   --ix-color-offline: #525966;
   --ix-color-offline-bg: #525966;
-  --ix-color-offline-text: #525966;
+  --ix-color-offline-text: #808999;
   --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
@@ -109,7 +109,7 @@
   --ix-color-info-icon: #4083e8;
   --ix-color-offline: #525966;
   --ix-color-offline-bg: #525966;
-  --ix-color-offline-text: #525966;
+  --ix-color-offline-text: #808999;
   --ix-font-size-xs: 10px;
   --ix-font-size-sm: 12px;
   --ix-font-size-md: 14px;
@@ -322,7 +322,7 @@
 
 /* ------ breadcrumb css variables ------ */
 :root {
-  --ix-breadcrumb-font-size: 12px;
+  --ix-breadcrumb-font-size: 14px;
   --ix-breadcrumb-item-color: #808999;
   --ix-breadcrumb-link-color: #808999;
   --ix-breadcrumb-link-color-hover: #4083e8;

diff --git a/packages/components/default.css b/packages/components/default.css
@@ -99,17 +99,17 @@
   --ix-color-fatal-icon: #8f1820;
   --ix-color-info-bg: #458fff;
   --ix-color-info-bg-hover: #6eadff;
-  --ix-color-info-bg-active: #306ed9;
+  --ix-color-info-bg-active: #1c6eff;
   --ix-color-info-border: #458fff;
   --ix-color-info-border-hover: #6eadff;
-  --ix-color-info-border-active: #306ed9;
+  --ix-color-info-border-active: #1c6eff;
   --ix-color-info-text: #458fff;
   --ix-color-info-text-hover: #6eadff;
-  --ix-color-info-text-active: #306ed9;
+  --ix-color-info-text-active: #1c6eff;
   --ix-color-info-icon: #458fff;
   --ix-color-offline: #a1a7b3;
   --ix-color-offline-bg: #a1a7b3;
-  --ix-color-offline-text: #a1a7b3;
+  --ix-color-offline-text: #6f7785;
   --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
@@ -99,17 +99,17 @@
   --ix-color-fatal-icon: #8f1820;
   --ix-color-info-bg: #458fff;
   --ix-color-info-bg-hover: #6eadff;
-  --ix-color-info-bg-active: #306ed9;
+  --ix-color-info-bg-active: #1c6eff;
   --ix-color-info-border: #458fff;
   --ix-color-info-border-hover: #6eadff;
-  --ix-color-info-border-active: #306ed9;
+  --ix-color-info-border-active: #1c6eff;
   --ix-color-info-text: #458fff;
   --ix-color-info-text-hover: #6eadff;
-  --ix-color-info-text-active: #306ed9;
+  --ix-color-info-text-active: #1c6eff;
   --ix-color-info-icon: #458fff;
   --ix-color-offline: #a1a7b3;
   --ix-color-offline-bg: #a1a7b3;
-  --ix-color-offline-text: #a1a7b3;
+  --ix-color-offline-text: #6f7785;
   --ix-font-size-xs: 10px;
   --ix-font-size-sm: 12px;
   --ix-font-size-md: 14px;
@@ -322,7 +322,7 @@
 
 /* ------ breadcrumb css variables ------ */
 :root {
-  --ix-breadcrumb-font-size: 12px;
+  --ix-breadcrumb-font-size: 14px;
   --ix-breadcrumb-item-color: #6f7785;
   --ix-breadcrumb-link-color: #6f7785;
   --ix-breadcrumb-link-color-hover: #1c6eff;

diff --git a/packages/components/theme/src/themeTokens/index.ts b/packages/components/theme/src/themeTokens/index.ts
@@ -56,7 +56,7 @@ export function getThemeTokens(
   const presetBasicTokens = getBasicTokens(getBaseColors, getColorPalette, getGreyColors)
   const mergedBasicTokens = merge(presetBasicTokens, pick(mergedPresetTokens, Object.keys(presetBasicTokens)))
 
-  const presetDerivedTokens = getDerivedTokens(mergedBasicTokens, { getColorPalette, getGreyColors })
+  const presetDerivedTokens = getDerivedTokens(mergedBasicTokens, { getBaseColors, getColorPalette, getGreyColors })
   const mergedDerivedTokens = merge(presetDerivedTokens, pick(mergedPresetTokens, Object.keys(presetDerivedTokens)))
 
   const presetExtendedTokens = getExtendedTokens(

diff --git a/packages/components/theme/src/themeTokens/shared/derivedTokens/getDerivedColorTokens.ts b/packages/components/theme/src/themeTokens/shared/derivedTokens/getDerivedColorTokens.ts
@@ -5,10 +5,11 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { BasicTokens, DerivedColorTokens, GetColorPalette, GetGreyColors } from '../../../types'
+import type { BasicTokens, DerivedColorTokens, GetBaseColors, GetColorPalette, GetGreyColors } from '../../../types'
 
 export function getDerivedColorTokens(
   basicTokens: BasicTokens,
+  getBaseColors: GetBaseColors,
   getColorPalette: GetColorPalette,
   getGreyColors: GetGreyColors,
 ): DerivedColorTokens {
@@ -18,6 +19,8 @@ export function getDerivedColorTokens(
   const warningColorPalette = getColorPalette(basicTokens.colorWarning)
   const riskColorPalette = getColorPalette(basicTokens.colorRisk)
   const fatalColorPalette = getColorPalette(basicTokens.colorFatal)
+
+  const blueColorPalette = getColorPalette(getBaseColors().blue)
   const infoColorPalette = getColorPalette(basicTokens.colorInfo)
 
   const primaryStatusColors: Partial<DerivedColorTokens> = {
@@ -106,19 +109,34 @@ export function getDerivedColorTokens(
     colorFatalIcon: fatalColorPalette.l10,
   }
 
-  const infoColors: Partial<DerivedColorTokens> = {
-    colorInfoBg: infoColorPalette.base,
-    colorInfoBgHover: infoColorPalette.l10,
-    colorInfoBgActive: infoColorPalette.d10,
-    colorInfoBorder: infoColorPalette.base,
-    colorInfoBorderHover: infoColorPalette.l10,
-    colorInfoBorderActive: infoColorPalette.d10,
-
-    colorInfoText: infoColorPalette.base,
-    colorInfoTextHover: infoColorPalette.l10,
-    colorInfoTextActive: infoColorPalette.d10,
-    colorInfoIcon: infoColorPalette.base,
-  }
+  const infoColors: Partial<DerivedColorTokens> =
+    basicTokens.colorInfo === blueColorPalette.l10
+      ? {
+          colorInfoBg: blueColorPalette.l10,
+          colorInfoBgHover: blueColorPalette.l20,
+          colorInfoBgActive: blueColorPalette.base,
+          colorInfoBorder: blueColorPalette.l10,
+          colorInfoBorderHover: blueColorPalette.l20,
+          colorInfoBorderActive: blueColorPalette.base,
+
+          colorInfoText: blueColorPalette.l10,
+          colorInfoTextHover: blueColorPalette.l20,
+          colorInfoTextActive: blueColorPalette.base,
+          colorInfoIcon: blueColorPalette.l10,
+        }
+      : {
+          colorInfoBg: infoColorPalette.base,
+          colorInfoBgHover: infoColorPalette.l10,
+          colorInfoBgActive: infoColorPalette.d10,
+          colorInfoBorder: infoColorPalette.base,
+          colorInfoBorderHover: infoColorPalette.l10,
+          colorInfoBorderActive: infoColorPalette.d10,
+
+          colorInfoText: infoColorPalette.base,
+          colorInfoTextHover: infoColorPalette.l10,
+          colorInfoTextActive: infoColorPalette.d10,
+          colorInfoIcon: infoColorPalette.base,
+        }
 
   const greyColors = getGreyColors()
 
@@ -132,6 +150,6 @@ export function getDerivedColorTokens(
     ...infoColors,
     colorOffline: greyColors.base,
     colorOfflineBg: greyColors.base,
-    colorOfflineText: greyColors.base,
+    colorOfflineText: greyColors.d10,
   } as DerivedColorTokens
 }
diff --git a/packages/components/theme/src/themeTokens/shared/derivedTokens/index.ts b/packages/components/theme/src/themeTokens/shared/derivedTokens/index.ts
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { BasicTokens, DerivedTokens, GetColorPalette, GetGreyColors } from '../../../types'
+import type { BasicTokens, DerivedTokens, GetBaseColors, GetColorPalette, GetGreyColors } from '../../../types'
 
 import { getDerivedColorTokens } from './getDerivedColorTokens'
 import { getDerivedFontTokens } from './getDerivedFontTokens'
@@ -14,15 +14,16 @@ import { getDerivedSizeTokens } from './getDerivedSizeTokens'
 import { getShadowTokens } from './getShadowTokens'
 
 export interface GetDerivedTokensOptions {
+  getBaseColors: GetBaseColors
   getColorPalette: GetColorPalette
   getGreyColors: GetGreyColors
 }
 
 export function getDerivedTokens(basicTokens: BasicTokens, options: GetDerivedTokensOptions): DerivedTokens {
-  const { getColorPalette, getGreyColors } = options
+  const { getBaseColors, getColorPalette, getGreyColors } = options
 
   return {
-    ...getDerivedColorTokens(basicTokens, getColorPalette, getGreyColors),
+    ...getDerivedColorTokens(basicTokens, getBaseColors, getColorPalette, getGreyColors),
     ...getDerivedFontTokens(basicTokens),
     ...getDerivedSizeTokens(basicTokens),
     ...getDerivedMotionTokens(basicTokens),

diff --git a/packages/site/src/docs/CustomizeTheme.zh.md b/packages/site/src/docs/CustomizeTheme.zh.md
@@ -382,18 +382,18 @@ token `getter` 只会在第一次注册成功的时候实际执行，因此不
 | `colorFatalTextActive` | 失陷色阶文字激活颜色 | `string` | `#5c000c` | `#a23e3b` |
 | `colorFatalTextHover` | 失陷色阶文字悬浮颜色 | `string` | `#8f1820` | `#701a1b` |
 | `colorInfoBg` | 信息色阶背景颜色 | `string` | `#458fff` | `#4083E8` |
-| `colorInfoBgActive` | 信息色阶背景激活颜色 | `string` | `#306ed9` | `#6AA6F4` |
+| `colorInfoBgActive` | 信息色阶背景激活颜色 | `string` | `#1c6eff` | `#6AA6F4` |
 | `colorInfoBgHover` | 信息色阶背景悬浮颜色 | `string` | `#6eadff` | `#1B61DD` |
 | `colorInfoBorder` | 信息色阶边框颜色 | `string` | `#458fff` | `#4083E8` |
-| `colorInfoBorderActive` | 信息色阶边框激活颜色 | `string` | `#306ed9` | `#6AA6F4` |
+| `colorInfoBorderActive` | 信息色阶边框激活颜色 | `string` | `#1c6eff` | `#6AA6F4` |
 | `colorInfoBorderHover` | 信息色阶边框悬浮颜色 | `string` | `#6eadff` | `#1B61DD` |
 | `colorInfoIcon` | 信息色阶图标颜色 | `string` | `#458fff` | `#4083E8` |
 | `colorInfoText` | 信息色阶文字颜色 | `string` | `#458fff` | `#4083E8` |
-| `colorInfoTextActive` | 信息色阶文字激活颜色 | `string` | `#306ed9` | `#6AA6F4` |
+| `colorInfoTextActive` | 信息色阶文字激活颜色 | `string` | `#1c6eff` | `#6AA6F4` |
 | `colorInfoTextHover` | 信息色阶文字悬浮颜色 | `string` | `#6eadff` | `#1B61DD` |
 | `colorOffline` | 离线颜色 | `string` | `#a1a7b3` | `#525966` |
 | `colorOfflineBg` | 离线背景颜色 | `string` | `#a1a7b3` | `#525966` |
-| `colorOfflineText` | 离线文字颜色 | `string` | `#a1a7b3` | `#525966` |
+| `colorOfflineText` | 离线文字颜色 | `string` | `#6f7785` | `#808999` |
 | `colorPrimaryActive` | 主题色阶激活颜色，常用于背景色 | `string` | `#0d51d9` | `#6AA6F4` |
 | `colorPrimaryBorder` | 主题色阶边框颜色 | `string` | `#1c6eff` | `#4083E8` |
 | `colorPrimaryBorderActive` | 主题色阶边框激活颜色 | `string` | `#0d51d9` | `#6AA6F4` |