refactor(ui-avatar): rename Avatar tokens in index.tsx and styles.ts

Author: joyenjoyer

packages/ui-avatar/src/Avatar/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { useStyle } from '@instructure/emotion'
+import { useStyle, useTheme } from '@instructure/emotion'
 import { useState, useEffect, forwardRef, SyntheticEvent } from 'react'
 
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
@@ -53,6 +53,8 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       margin
     } = props
     const [loaded, setLoaded] = useState(false)
+    const theme = useTheme()
+    const iconTokens = (theme as any).newTheme.components.Icon
 
     const styles = useStyle({
       generateStyle,
@@ -66,7 +68,8 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
         showBorder,
         themeOverride,
         display,
-        margin
+        margin,
+        iconTokens
       },
       componentId: 'Avatar',
       displayName: 'Avatar'

packages/ui-avatar/src/Avatar/styles.ts

@@ -37,6 +37,7 @@ type StyleParams = {
   themeOverride: AvatarProps['themeOverride']
   display: AvatarProps['display']
   margin: AvatarProps['margin']
+  iconTokens: NewComponentTypes['Icon']
 }
 /**
  * ---
@@ -61,7 +62,8 @@ const generateStyle = (
     shape,
     showBorder,
     display,
-    margin
+    margin,
+    iconTokens
   } = params
 
   const sizeStyles = {
@@ -111,40 +113,34 @@ const generateStyle = (
 
   const colorVariants = {
     accent1: {
-      text: componentTheme.accent1TextColor,
-      background: componentTheme.accent1BackgroundColor
-      //TODO-rework add icon handling
-      // icon: componentTheme.accent1IconColor
+      text: componentTheme.blueTextColor,
+      background: componentTheme.blueBackgroundColor,
+      icon: iconTokens.accentBlueColor
     },
     accent2: {
-      text: componentTheme.accent2TextColor,
-      background: componentTheme.accent2BackgroundColor
-      //TODO-rework add icon handling
-      // icon: componentTheme.accent2IconColor
+      text: componentTheme.greenTextColor,
+      background: componentTheme.greenBackgroundColor,
+      icon: iconTokens.accentGreenColor
     },
     accent3: {
-      text: componentTheme.accent3TextColor,
-      background: componentTheme.accent3BackgroundColor
-      //TODO-rework add icon handling
-      // icon: componentTheme.accent3IconColor
+      text: componentTheme.redTextColor,
+      background: componentTheme.redBackgroundColor,
+      icon: iconTokens.accentRedColor
     },
     accent4: {
-      text: componentTheme.accent4TextColor,
-      background: componentTheme.accent4BackgroundColor
-      //TODO-rework add icon handling
-      // icon: componentTheme.accent4IconColor
+      text: componentTheme.orangeTextColor,
+      background: componentTheme.orangeBackgroundColor,
+      icon: iconTokens.accentOrangeColor
     },
     accent5: {
-      text: componentTheme.accent5TextColor,
-      background: componentTheme.accent5BackgroundColor
-      //TODO-rework add icon handling
-      // icon: componentTheme.accent5IconColor
+      text: componentTheme.greyTextColor,
+      background: componentTheme.greyBackgroundColor,
+      icon: iconTokens.accentGreyColor
     },
     accent6: {
-      text: componentTheme.accent6TextColor,
-      background: componentTheme.accent6BackgroundColor
-      //TODO-rework add icon handling
-      // icon: componentTheme.accent6IconColor
+      text: componentTheme.ashTextColor,
+      background: componentTheme.ashBackgroundColor,
+      icon: iconTokens.accentAshColor
     },
     ai: {
       text: componentTheme.textOnColor,