chore: code review

Author: geotrev

packages/avatars/src/styled/StyledStatusIndicator.ts

@@ -69,15 +69,15 @@ const colorStyles = ({
   $borderColor,
   $surfaceColor
 }: IStatusIndicatorProps & ThemeProps<DefaultTheme>) => {
-  let boxShadow = theme.shadows.sm(
-    $surfaceColor ||
-      ($type
-        ? getColor({ variable: 'background.default', theme })
-        : (theme.palette.white as string))
-  );
-
-  if ($size === xxs) {
-    boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
+  const shadowSize = $size === xxs ? 'xs' : 'sm';
+  let boxShadow;
+
+  if ($type) {
+    boxShadow = theme.shadows[shadowSize](
+      $surfaceColor || getColor({ theme, variable: 'background.default' })
+    );
+  } else {
+    boxShadow = theme.shadows[shadowSize]($surfaceColor || (theme.palette.white as string));
   }
 
   return css`

packages/avatars/src/styled/StyledStatusIndicatorBase.ts

@@ -69,12 +69,15 @@ const sizeStyles = (props: IStyledStatusIndicatorProps) => {
 
 const colorStyles = ({ theme, $type }: IStyledStatusIndicatorProps) => {
   const foregroundColor = getColor({ variable: 'foreground.onEmphasis', theme });
-  let backgroundColor = getStatusColor(theme, $type);
-  let borderColor = backgroundColor;
+  let backgroundColor;
+  let borderColor;
 
   if ($type === 'offline') {
     borderColor = getStatusColor(theme, $type);
     backgroundColor = getColor({ variable: 'background.default', theme });
+  } else {
+    backgroundColor = getStatusColor(theme, $type);
+    borderColor = backgroundColor;
   }
 
   return css`