fix(avatar): use semantic token (#2171)

Author: QuintonJason

packages/sage-assets/lib/stylesheets/components/_avatar.scss

@@ -10,11 +10,11 @@ $-avatar-max-size: calc(2 * var(--pine-dimension-800));
 $-avatar-ring-colors: (
   charcoal: (
     main: var(--pine-color-primary-hover),
-    bg: var(--pine-color-grey-200)
+    bg: var(--pine-color-background-inset)
   ),
   grey: (
     main: var(--pine-color-primary-hover),
-    bg: var(--pine-color-grey-200)
+    bg: var(--pine-color-background-inset)
   ),
   purple: (
     main: var(--pine-color-accent-hover),
@@ -30,7 +30,7 @@ $-avatar-ring-colors: (
   ),
   orange: (
     main: var(--pine-color-brand),
-    bg: var(--pine-color-grey-150)
+    bg: var(--pine-color-background-muted)
   ),
   red: (
     main: var(--pine-color-danger),
@@ -64,7 +64,7 @@ $-avatar-group-item-sizes: (
   width: $-avatar-min-size;
   height: $-avatar-min-size;
   border-radius: var(--pine-border-radius-full);
-  background-color: var(--pine-color-grey-050);
+  background-color: var(--pine-color-background-container-hover);
 
   // Documentation-specific styles
   .sage-avatar-wrapper > & {