fix(comp:alert,tag): replace rgba bg color with color with no alpha

mix color with alpha with container bg color to get a bg color with no alpha
IDuxFE · Jan 29, 2024 · 8d05916 · 8d05916
1 parent d062236
commit 8d05916
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/packages/components/alert/theme/default.ts b/packages/components/alert/theme/default.ts
@@ -11,6 +11,7 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     heightMd,
     borderRadiusSm,
     alertCompColorAlpha,
+    colorContainerBg,
     colorSuccessBg,
     colorInfoBg,
     colorWarningBg,
@@ -22,10 +23,10 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     height: heightMd,
     borderRadius: borderRadiusSm,
 
-    successBgColor: getAlphaColor(colorSuccessBg, alertCompColorAlpha),
-    infoBgColor: getAlphaColor(colorInfoBg, alertCompColorAlpha),
-    warningBgColor: getAlphaColor(colorWarningBg, alertCompColorAlpha),
-    errorBgColor: getAlphaColor(colorErrorBg, alertCompColorAlpha),
-    offlineBgColor: getAlphaColor(colorOffline, alertCompColorAlpha),
+    successBgColor: getAlphaColor(colorSuccessBg, alertCompColorAlpha, colorContainerBg),
+    infoBgColor: getAlphaColor(colorInfoBg, alertCompColorAlpha, colorContainerBg),
+    warningBgColor: getAlphaColor(colorWarningBg, alertCompColorAlpha, colorContainerBg),
+    errorBgColor: getAlphaColor(colorErrorBg, alertCompColorAlpha, colorContainerBg),
+    offlineBgColor: getAlphaColor(colorOffline, alertCompColorAlpha, colorContainerBg),
   }
 }
diff --git a/packages/components/tag/theme/default.ts b/packages/components/tag/theme/default.ts
@@ -19,6 +19,7 @@ export function getDefaultThemeTokens(
     lineWidth,
     borderRadiusSm,
     tagCompColorAlpha,
+    colorContainerBg,
     colorTextInfo,
     colorSuccessBg,
     colorInfoBg,
@@ -31,7 +32,7 @@ export function getDefaultThemeTokens(
   const greyColors = getGreyColors()
 
   return {
-    bgColorNormal: getAlphaColor(colorTextInfo, tagCompColorAlpha),
+    bgColorNormal: getAlphaColor(colorTextInfo, tagCompColorAlpha, colorContainerBg),
     bgColorFilled: greyColors.base,
     borderWidth: lineWidth,
     borderRadius: borderRadiusSm,
@@ -41,11 +42,11 @@ export function getDefaultThemeTokens(
     minWidthNumeric: 64,
 
     // private
-    successBgColor: getAlphaColor(colorSuccessBg, tagCompColorAlpha),
-    infoBgColor: getAlphaColor(colorInfoBg, tagCompColorAlpha),
-    warningBgColor: getAlphaColor(colorWarningBg, tagCompColorAlpha),
-    riskBgColor: getAlphaColor(colorRiskBg, tagCompColorAlpha),
-    errorBgColor: getAlphaColor(colorErrorBg, tagCompColorAlpha),
-    fatalBgColor: getAlphaColor(colorFatalBg, tagCompColorAlpha),
+    successBgColor: getAlphaColor(colorSuccessBg, tagCompColorAlpha, colorContainerBg),
+    infoBgColor: getAlphaColor(colorInfoBg, tagCompColorAlpha, colorContainerBg),
+    warningBgColor: getAlphaColor(colorWarningBg, tagCompColorAlpha, colorContainerBg),
+    riskBgColor: getAlphaColor(colorRiskBg, tagCompColorAlpha, colorContainerBg),
+    errorBgColor: getAlphaColor(colorErrorBg, tagCompColorAlpha, colorContainerBg),
+    fatalBgColor: getAlphaColor(colorFatalBg, tagCompColorAlpha, colorContainerBg),
   }
 }
diff --git a/packages/components/theme/src/themeTokens/shared/color/getAlphaColor.ts b/packages/components/theme/src/themeTokens/shared/color/getAlphaColor.ts
@@ -7,6 +7,12 @@
 
 import { TinyColor } from '@ctrl/tinycolor'
 
-export function getAlphaColor(baseColor: string, alpha: number): string {
-  return new TinyColor(baseColor).setAlpha(alpha).toRgbString()
+export function getAlphaColor(baseColor: string, alpha: number, bgColor?: string): string {
+  const alphaColor = new TinyColor(baseColor).setAlpha(alpha)
+
+  if (!bgColor) {
+    return alphaColor.toRgbString()
+  }
+
+  return alphaColor.onBackground(bgColor).toRgbString()
 }