fix(avatars): use default background surfaceColor with statuses

Author: geotrev

packages/avatars/src/styled/StyledAvatar.spec.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { render, renderRtl } from 'garden-test-utils';
+import { getRenderFn, render, renderRtl } from 'garden-test-utils';
 import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 
 import { StyledAvatar } from './StyledAvatar';
@@ -32,6 +32,16 @@ describe('StyledAvatar', () => {
   });
 
   describe('color', () => {
+    it.each(['light', 'dark'])('renders default %s mode surface color as expected', mode => {
+      const { container } = getRenderFn(mode)(<StyledAvatar $status="away" />);
+
+      expect(container.firstChild).toHaveStyleRule(
+        'color',
+        mode === 'light' ? PALETTE.white : PALETTE.grey[1100],
+        { modifier: '&&' }
+      );
+    });
+
     it('renders surface color as expected', () => {
       const { container } = render(<StyledAvatar $status="away" $surfaceColor="red" />);
 

packages/avatars/src/styled/StyledAvatar.ts

@@ -65,7 +65,7 @@ const colorStyles = ({
   const statusColor = getStatusColor(theme, $status);
   let backgroundColor = 'transparent';
   let foregroundColor = theme.palette.white;
-  let surfaceColor = 'transparent';
+  let surfaceColor;
 
   if ($backgroundColor) {
     backgroundColor = $backgroundColor.includes('.')
@@ -79,10 +79,12 @@ const colorStyles = ({
       : $foregroundColor;
   }
 
-  if ($surfaceColor) {
-    surfaceColor = $surfaceColor.includes('.')
-      ? getColor({ theme, variable: $surfaceColor })
-      : $surfaceColor;
+  if ($status) {
+    surfaceColor = $surfaceColor?.includes('.')
+      ? getColor({ variable: $surfaceColor, theme })
+      : $surfaceColor || getColor({ variable: 'background.default', theme });
+  } else {
+    surfaceColor = $surfaceColor || 'transparent';
   }
 
   return css`