feat(comp:alert): add theme tokens for typed alert text and bg colors (…

…#1918) 1. add typed alert theme tokens 2. change warining typed alert text and bg color to bronze and gold
IDuxFE · May 9, 2024 · 114e26f · 114e26f
1 parent e08e100
commit 114e26f
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 20 deletions.
diff --git a/packages/components/alert/docs/Theme.zh.md b/packages/components/alert/docs/Theme.zh.md
@@ -1,4 +1,14 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
 | `borderRadius` | 边框圆角 | `number` | `2` | `2` |
+| `errorBgColor` | error 类型背景颜色 | `string` | `rgb(255, 238, 238)` | `rgb(54, 26, 27)` |
+| `errorTextColor` | error 类型文字颜色 | `string` | `#cf171d` | `#E8514C` |
 | `height` | 高度 | `number` | `32` | `32` |
+| `infoBgColor` | info 类型背景颜色 | `string` | `rgb(236, 244, 255)` | `rgb(21, 36, 58)` |
+| `infoTextColor` | info 类型文字颜色 | `string` | `#458fff` | `#4083E8` |
+| `offlineBgColor` | offline 类型背景颜色 | `string` | `rgb(246, 246, 247)` | `rgb(24, 27, 32)` |
+| `offlineTextColor` | offline 类型文字颜色 | `string` | `#6f7785` | `#808999` |
+| `successBgColor` | success 类型背景颜色 | `string` | `rgb(233, 250, 244)` | `rgb(21, 49, 42)` |
+| `successTextColor` | success 类型文字颜色 | `string` | `#12a679` | `#40C695` |
+| `warningBgColor` | warning 类型背景颜色 | `string` | `rgb(253, 247, 236)` | `rgb(54, 44, 25)` |
+| `warningTextColor` | warning 类型文字颜色 | `string` | `#a35f40` | `#D6A181` |
diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
@@ -14,11 +14,11 @@
   border: 1px solid transparent;
   border-radius: var(--ix-alert-border-radius);
 
-  .alert-status-color(success, var(--ix-color-success-text), var(--ix-alert-success-bg-color));
-  .alert-status-color(info, var(--ix-color-info-text), var(--ix-alert-info-bg-color));
-  .alert-status-color(warning, var(--ix-color-warning-text), var(--ix-alert-warning-bg-color));
-  .alert-status-color(error, var(--ix-color-error-text), var(--ix-alert-error-bg-color));
-  .alert-status-color(offline, var(--ix-color-offline-text), var(--ix-alert-offline-bg-color));
+  .alert-status-color(success, var(--ix-alert-success-text-color), var(--ix-alert-success-bg-color));
+  .alert-status-color(info, var(--ix-alert-info-text-color), var(--ix-alert-info-bg-color));
+  .alert-status-color(warning, var(--ix-alert-warning-text-color), var(--ix-alert-warning-bg-color));
+  .alert-status-color(error, var(--ix-alert-error-text-color), var(--ix-alert-error-bg-color));
+  .alert-status-color(offline, var(--ix-alert-offline-text-color), var(--ix-alert-offline-bg-color));
 
   &-banner {
     padding: calc((var(--ix-alert-height) - @line-height - 2px) / 2) 16px;

diff --git a/packages/components/alert/theme/dark.css b/packages/components/alert/theme/dark.css
@@ -2,9 +2,14 @@
 :root {
   --ix-alert-height: 32px;
   --ix-alert-border-radius: 2px;
+  --ix-alert-success-text-color: #40c695;
   --ix-alert-success-bg-color: rgb(21, 49, 42);
+  --ix-alert-info-text-color: #4083e8;
   --ix-alert-info-bg-color: rgb(21, 36, 58);
-  --ix-alert-warning-bg-color: rgb(59, 44, 18);
+  --ix-alert-warning-text-color: #d6a181;
+  --ix-alert-warning-bg-color: rgb(54, 44, 25);
+  --ix-alert-error-text-color: #e8514c;
   --ix-alert-error-bg-color: rgb(54, 26, 27);
+  --ix-alert-offline-text-color: #808999;
   --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,14 @@
 :root {
   --ix-alert-height: 32px;
   --ix-alert-border-radius: 2px;
+  --ix-alert-success-text-color: #12a679;
   --ix-alert-success-bg-color: rgb(233, 250, 244);
+  --ix-alert-info-text-color: #458fff;
   --ix-alert-info-bg-color: rgb(236, 244, 255);
-  --ix-alert-warning-bg-color: rgb(255, 247, 232);
+  --ix-alert-warning-text-color: #a35f40;
+  --ix-alert-warning-bg-color: rgb(253, 247, 236);
+  --ix-alert-error-text-color: #cf171d;
   --ix-alert-error-bg-color: rgb(255, 238, 238);
+  --ix-alert-offline-text-color: #6f7785;
   --ix-alert-offline-bg-color: rgb(246, 246, 247);
 }
diff --git a/packages/components/alert/theme/default.ts b/packages/components/alert/theme/default.ts
@@ -5,28 +5,47 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type CertainThemeTokens, type GlobalThemeTokens, getAlphaColor } from '@idux/components/theme'
-export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'alert'> {
+import {
+  type CertainThemeTokens,
+  type GlobalThemeTokens,
+  type ThemeTokenAlgorithms,
+  getAlphaColor,
+} from '@idux/components/theme'
+export function getDefaultThemeTokens(
+  tokens: GlobalThemeTokens,
+  algorithms: ThemeTokenAlgorithms,
+): CertainThemeTokens<'alert'> {
   const {
     heightMd,
     borderRadiusSm,
     alertCompColorAlpha,
     colorContainerBg,
+    colorSuccessText,
     colorSuccessBg,
+    colorInfoText,
     colorInfoBg,
-    colorWarningBg,
+    colorErrorText,
     colorErrorBg,
+    colorOfflineText,
     colorOffline,
   } = tokens
+  const { getColorPalette, getBaseColors } = algorithms
+
+  const bronzeColorPalette = getColorPalette(getBaseColors().bronze)
 
   return {
     height: heightMd,
     borderRadius: borderRadiusSm,
 
+    successTextColor: colorSuccessText,
     successBgColor: getAlphaColor(colorSuccessBg, alertCompColorAlpha, colorContainerBg),
+    infoTextColor: colorInfoText,
     infoBgColor: getAlphaColor(colorInfoBg, alertCompColorAlpha, colorContainerBg),
-    warningBgColor: getAlphaColor(colorWarningBg, alertCompColorAlpha, colorContainerBg),
+    warningTextColor: bronzeColorPalette.d10,
+    warningBgColor: getAlphaColor(getBaseColors().gold, alertCompColorAlpha, colorContainerBg),
+    errorTextColor: colorErrorText,
     errorBgColor: getAlphaColor(colorErrorBg, alertCompColorAlpha, colorContainerBg),
+    offlineTextColor: colorOfflineText,
     offlineBgColor: getAlphaColor(colorOffline, alertCompColorAlpha, colorContainerBg),
   }
 }
diff --git a/packages/components/alert/theme/index.ts b/packages/components/alert/theme/index.ts
@@ -9,8 +9,10 @@ import type { TokenGetter } from '@idux/components/theme'
 
 import { getDefaultThemeTokens } from './default'
 
-export const getThemeTokens: TokenGetter<'alert'> = (tokens, presetTheme) => {
-  return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens)
+export const getThemeTokens: TokenGetter<'alert'> = (tokens, presetTheme, algorithms) => {
+  return presetTheme === 'default'
+    ? getDefaultThemeTokens(tokens, algorithms)
+    : getDefaultThemeTokens(tokens, algorithms)
 }
 
 export type { AlertThemeTokens } from './tokens'
diff --git a/packages/components/alert/theme/tokens.ts b/packages/components/alert/theme/tokens.ts
@@ -16,23 +16,43 @@ export interface AlertThemeTokens {
   borderRadius: number
 
   /**
-   * @private internal
+   * @desc success 类型文字颜色
+   */
+  successTextColor: string
+  /**
+   * @desc success 类型背景颜色
    */
   successBgColor: string
   /**
-   * @private internal
+   * @desc info 类型文字颜色
+   */
+  infoTextColor: string
+  /**
+   * @desc info 类型背景颜色
    */
   infoBgColor: string
   /**
-   * @private internal
+   * @desc warning 类型文字颜色
+   */
+  warningTextColor: string
+  /**
+   * @desc warning 类型背景颜色
    */
   warningBgColor: string
   /**
-   * @private internal
+   * @desc error 类型文字颜色
+   */
+  errorTextColor: string
+  /**
+   * @desc error 类型背景颜色
    */
   errorBgColor: string
   /**
-   * @private internal
+   * @desc offline 类型文字颜色
+   */
+  offlineTextColor: string
+  /**
+   * @desc offline 类型背景颜色
    */
   offlineBgColor: string
 }
diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css
@@ -279,10 +279,15 @@
 :root {
   --ix-alert-height: 32px;
   --ix-alert-border-radius: 2px;
+  --ix-alert-success-text-color: #40c695;
   --ix-alert-success-bg-color: rgb(21, 49, 42);
+  --ix-alert-info-text-color: #4083e8;
   --ix-alert-info-bg-color: rgb(21, 36, 58);
-  --ix-alert-warning-bg-color: rgb(59, 44, 18);
+  --ix-alert-warning-text-color: #d6a181;
+  --ix-alert-warning-bg-color: rgb(54, 44, 25);
+  --ix-alert-error-text-color: #e8514c;
   --ix-alert-error-bg-color: rgb(54, 26, 27);
+  --ix-alert-offline-text-color: #808999;
   --ix-alert-offline-bg-color: rgb(24, 27, 32);
 }
 

diff --git a/packages/components/default.full.css b/packages/components/default.full.css
@@ -279,10 +279,15 @@
 :root {
   --ix-alert-height: 32px;
   --ix-alert-border-radius: 2px;
+  --ix-alert-success-text-color: #12a679;
   --ix-alert-success-bg-color: rgb(233, 250, 244);
+  --ix-alert-info-text-color: #458fff;
   --ix-alert-info-bg-color: rgb(236, 244, 255);
-  --ix-alert-warning-bg-color: rgb(255, 247, 232);
+  --ix-alert-warning-text-color: #a35f40;
+  --ix-alert-warning-bg-color: rgb(253, 247, 236);
+  --ix-alert-error-text-color: #cf171d;
   --ix-alert-error-bg-color: rgb(255, 238, 238);
+  --ix-alert-offline-text-color: #6f7785;
   --ix-alert-offline-bg-color: rgb(246, 246, 247);
 }