feat: update Avatar

src/components/Avatar/Avatar.style.ts

@@ -5,6 +5,7 @@ import { rem } from 'theme/utils';
 import type { AvatarTokens } from './Avatar.tokens';
 import { getAvatarTokens, parseAvatarIconSize } from './Avatar.tokens';
 import type { AvatarColors, AvatarProps, AvatarSizes } from './Avatar.types';
+import { avatarColorToSemColor } from './constants';
 import type { Theme } from '../../theme';
 import { flex } from '../../theme/functions';
 import { generateStylesFromTokens } from 'components/Typography/utils';
@@ -18,7 +19,7 @@ export const iconStyles =
       width: ${rem(parseFloat(tokens(`size.${size}` as AvatarTokens, parseAvatarIconSize)))};
       height: ${rem(parseFloat(tokens(`size.${size}` as AvatarTokens, parseAvatarIconSize)))};
       path {
-        fill: ${tokens(`textColor.${color}` as AvatarTokens)};
+        fill: ${theme.tokens.colors.get(avatarColorToSemColor[color].text)};
       }
     `;
   };
@@ -32,12 +33,12 @@ export const avatarStyle =
       ${flex};
       width: ${tokens(`size.${size}` as const)};
       height: ${tokens(`size.${size}` as const)};
-      border-radius: ${tokens('borderRadius')};
-      border: ${tokens('borderWidth')} solid;
-      border-color: ${tokens(`borderColor.${color}` as const)};
+      border-radius: ${theme.dimension.borderRadius.get('circle')};
+      border: ${theme.dimension.borderWidth.get('default')} solid;
+      border-color: ${theme.tokens.colors.get(avatarColorToSemColor[color].border)};
       box-sizing: border-box;
-      background-color: ${tokens(`backgroundColor.${color}` as const)};
-      color: ${tokens(`textColor.${color}` as const)};
+      background-color: ${theme.tokens.colors.get(avatarColorToSemColor[color].fill)};
+      color: ${theme.tokens.colors.get(avatarColorToSemColor[color].text)};
       overflow: hidden;
       position: relative;
       align-items: center;
@@ -48,7 +49,7 @@ export const avatarStyle =
       ${generateStylesFromTokens(tokens(`label.${size}` as const))};
 
       img {
-        border-radius: ${tokens('borderRadius')};
+        border-radius: ${theme.dimension.borderRadius.get('circle')};
         width: 100%;
         height: 100%;
       }

src/components/Avatar/constants.ts

@@ -0,0 +1,31 @@
+import type { SemanticColorsKey } from 'theme/tokens/semantic/colors';
+
+import type { AvatarColors } from './Avatar.types';
+
+export const avatarColorToSemColor: Record<AvatarColors, Record<string, SemanticColorsKey>> = {
+  blue: {
+    border: 'palette.primaryAlt.contrast',
+    fill: 'palette.primaryAlt.base',
+    text: 'textColor.default.active',
+  },
+  red: {
+    border: 'palette.error.contrast',
+    fill: 'palette.error.base',
+    text: 'textColor.default.error',
+  },
+  purple: {
+    border: 'palette.upsell.contrast',
+    fill: 'palette.upsell.base',
+    text: 'textColor.default.visited',
+  },
+  teal: {
+    border: 'palette.success.contrast',
+    fill: 'palette.success.base',
+    text: 'textColor.default.success',
+  },
+  orange: {
+    border: 'palette.warning.contrast',
+    fill: 'palette.warning.base',
+    text: 'textColor.default.warning',
+  },
+};