fix(status-badge): inherit icon color from text, fix dark mode icon colors #545

src/tedi/components/tags/status-badge/status-badge.module.scss

@@ -88,13 +88,5 @@ $badge-status-colors: ('inactive', 'success', 'danger', 'warning');
     line-height: var(--body-small-regular-line-height);
   }
 
-  &__icon-primary {
-    color: var(--status-badge-icon-primary);
-  }
-
-  &__icon-accent {
-    color: var(--status-badge-icon-secondary);
-  }
-
   @include mixins.print-grayscale;
 }

src/tedi/components/tags/status-badge/status-badge.spec.tsx

@@ -22,7 +22,6 @@ describe('StatusBadge component', () => {
     expect(badge).toHaveTextContent('Default Badge');
     expect(badge).toHaveClass('tedi-status-badge');
     expect(badge).toHaveClass('tedi-status-badge--variant-filled');
-    expect(badge).toHaveClass('tedi-status-badge--color-neutral');
     expect(badge).not.toHaveAttribute('role');
   });
 
@@ -35,7 +34,6 @@ describe('StatusBadge component', () => {
     const badge = container.querySelector('.tedi-status-badge');
     expect(badge).toHaveTextContent('Primary Bordered Badge');
     expect(badge).toHaveClass('tedi-status-badge--variant-bordered');
-    expect(badge).toHaveClass('tedi-status-badge--color-brand');
   });
 
   it('renders with large size', () => {
@@ -114,7 +112,6 @@ describe('StatusBadge component', () => {
     const { container } = render(<StatusBadge {...props}>All Props Badge</StatusBadge>);
     const badge = container.querySelector('.tedi-status-badge');
     expect(badge).toHaveClass('tedi-status-badge--variant-filled-bordered');
-    expect(badge).toHaveClass('tedi-status-badge--color-accent');
     expect(badge).toHaveClass('tedi-status-badge--status-success');
     expect(badge).toHaveClass('tedi-status-badge--large');
     expect(badge).toHaveClass('custom-class');

src/tedi/components/tags/status-badge/status-badge.stories.tsx

@@ -31,14 +31,14 @@ export default meta;
 
 type Story = StoryObj<typeof StatusBadge>;
 
-const colors: StatusBadgeColor[] = ['neutral', 'brand', 'accent', 'success', 'danger', 'warning'];
+const colors: StatusBadgeColor[] = ['neutral', 'brand', 'accent', 'warning', 'danger', 'success'];
 const variants: StatusBadgeProps['variant'][] = ['filled', 'filled-bordered', 'bordered'];
 const statuses: StatusBadgeStatus[] = ['inactive', 'success', 'warning', 'danger'];
 const colorToIconMap: Record<StatusBadgeColor, string> = {
   neutral: 'edit',
   brand: 'send',
   accent: 'sync',
-  success: 'check_circle',
+  success: 'check',
   danger: 'error',
   warning: 'warning',
   transparent: 'edit',

src/tedi/components/tags/status-badge/status-badge.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 
 import { BreakpointSupport, useBreakpointProps } from '../../../helpers';
-import { Icon, IconColor } from '../../base/icon/icon';
+import { Icon } from '../../base/icon/icon';
 import styles from './status-badge.module.scss';
 
 export type StatusBadgeColor = 'neutral' | 'brand' | 'accent' | 'success' | 'danger' | 'warning' | 'transparent';
@@ -78,23 +78,6 @@ export const StatusBadge = (props: StatusBadgeProps): JSX.Element => {
 
   const BadgeElement = title ? 'abbr' : 'div';
 
-  const mapBadgeColorToIconColor = (badgeColor: StatusBadgeColor): IconColor => {
-    switch (badgeColor) {
-      case 'brand':
-        return 'brand-dark';
-      case 'success':
-        return 'success';
-      case 'accent':
-        return 'secondary';
-      case 'danger':
-        return 'danger';
-      case 'warning':
-        return 'warning-dark';
-      default:
-        return 'primary';
-    }
-  };
-
   const badgeClass = cn(
     styles['tedi-status-badge'],
     styles[`tedi-status-badge--variant-${variant}`],
@@ -117,14 +100,7 @@ export const StatusBadge = (props: StatusBadgeProps): JSX.Element => {
       aria-live={role ? ariaLive : undefined}
       {...rest}
     >
-      {icon && (
-        <Icon
-          name={icon}
-          color={mapBadgeColorToIconColor(color)}
-          size={16}
-          className={styles[`tedi-status-badge__icon-${color}`]}
-        />
-      )}
+      {icon && <Icon name={icon} color="inherit" size={16} className={styles[`tedi-status-badge__icon-${color}`]} />}
       {children && <span className={styles['tedi-status-badge__inner-text']}>{children}</span>}
     </BadgeElement>
   );