[PR feedback] Create internal color util for badge colors

elastic · Sep 22, 2022 · e3ddcd0 · e3ddcd0
1 parent feb1bb6
commit e3ddcd0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/src/components/badge/beta_badge/beta_badge.styles.ts b/src/components/badge/beta_badge/beta_badge.styles.ts
@@ -14,16 +14,11 @@ import {
   euiTextTruncate,
   mathWithUnits,
 } from '../../../global_styling';
-import { UseEuiTheme, tint } from '../../../services';
+import { UseEuiTheme, tint, isColorDark, hexToRgb } from '../../../services';
 
 export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
 
-  const textColor =
-    colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink;
-  const invertedTextColor =
-    colorMode === 'DARK' ? euiTheme.colors.ink : euiTheme.colors.ghost;
-
   return {
     euiBetaBadge: css`
       display: inline-block;
@@ -39,22 +34,20 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
 
       &:focus {
         ${euiFocusRing(euiThemeContext, 'outset', {
-          color: textColor,
+          color:
+            colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink,
         })}
       }
     `,
     // Colors
     accent: css`
-      background-color: ${euiTheme.colors.accentText};
-      color: ${invertedTextColor};
+      ${getBadgeColors(euiTheme.colors.accentText, euiThemeContext)}
     `,
     subdued: css`
-      background-color: ${tint(euiTheme.colors.lightShade, 0.3)};
-      color: ${textColor};
+      ${getBadgeColors(tint(euiTheme.colors.lightShade, 0.3), euiThemeContext)}
     `,
     hollow: css`
-      background-color: ${euiTheme.colors.emptyShade};
-      color: ${textColor};
+      ${getBadgeColors(euiTheme.colors.emptyShade, euiThemeContext)}
       box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
         ${euiTheme.border.color};
     `,
@@ -94,3 +87,18 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     `,
   };
 };
+
+// Util for detecting text color based on badge bg color
+export const getBadgeColors = (
+  backgroundColor: string,
+  { euiTheme }: UseEuiTheme
+) => {
+  const textColor = isColorDark(...hexToRgb(backgroundColor))
+    ? euiTheme.colors.ghost
+    : euiTheme.colors.ink;
+
+  return `
+    background-color: ${backgroundColor};
+    color: ${textColor};
+  `;
+};
diff --git a/src/components/badge/notification_badge/badge_notification.styles.ts b/src/components/badge/notification_badge/badge_notification.styles.ts
@@ -16,8 +16,10 @@ import {
 } from '../../../global_styling';
 import { UseEuiTheme, tint } from '../../../services';
 
+import { getBadgeColors } from '../beta_badge/beta_badge.styles';
+
 export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   return {
     euiNotificationBadge: css`
@@ -53,16 +55,10 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Colors
     accent: css`
-      background-color: ${euiTheme.colors.accentText};
-      color: ${colorMode === 'DARK'
-        ? euiTheme.colors.ink
-        : euiTheme.colors.ghost};
+      ${getBadgeColors(euiTheme.colors.accentText, euiThemeContext)}
     `,
     subdued: css`
-      background-color: ${tint(euiTheme.colors.lightShade, 0.3)};
-      color: ${colorMode === 'DARK'
-        ? euiTheme.colors.ghost
-        : euiTheme.colors.ink};
+      ${getBadgeColors(tint(euiTheme.colors.lightShade, 0.3), euiThemeContext)}
     `,
   };
 };