Update avatar styles (#3021)

Author: shleewhite

.changeset/sweet-cats-press.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/design-tokens': patch
+'@twilio-paste/core': patch
+---
+
+[Design Tokens] update the value of colorTextUser for default and dark themes

.changeset/thin-suns-flow.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/avatar': patch
+'@twilio-paste/core': patch
+---
+
+[Avatar] Update styles to align with new Paste Twilio theme

packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Avatar image should render responsive css with an image 1`] = `
   width: sizeIcon30;
   height: sizeIcon30;
   background-color: colorBackgroundUser;
-  color: colorText;
+  color: colorTextUser;
   border-radius: borderRadiusCircle;
 }
 
@@ -77,8 +77,9 @@ exports[`Avatar intials should render responsive css 1`] = `
   flex-shrink: 0;
   width: sizeIcon10;
   height: sizeIcon10;
+  box-shadow: shadowBorderUser;
   background-color: colorBackgroundUser;
-  color: colorText;
+  color: colorTextUser;
   border-radius: borderRadiusCircle;
 }
 
@@ -103,7 +104,7 @@ exports[`Avatar intials should render responsive css 1`] = `
   font-size: fontSize10;
   line-height: lineHeight10;
   display: inline-block;
-  font-weight: fontWeightBold;
+  font-weight: fontWeightSemibold;
   vertical-align: top;
   -webkit-text-decoration: none;
   text-decoration: none;

packages/paste-core/components/avatar/src/index.tsx

@@ -31,7 +31,7 @@ const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE
       as="abbr"
       display="inline-block"
       fontSize={computedTokenNames.fontSize}
-      fontWeight="fontWeightBold"
+      fontWeight="fontWeightSemibold"
       lineHeight={computedTokenNames.lineHeight}
       verticalAlign="top"
       textDecoration="none"
@@ -48,7 +48,7 @@ AvatarContents.displayName = 'AvatarContents';
 const colorVariants: Record<ColorVariants, BoxStyleProps> = {
   default: {
     backgroundColor: 'colorBackgroundUser',
-    color: 'colorText',
+    color: 'colorTextUser',
   },
   decorative10: {
     backgroundColor: 'colorBackgroundDecorative10Weakest',
@@ -77,6 +77,24 @@ const variants: Record<AvatarVariants, BoxStyleProps> = {
   },
 };
 
+const shadowVariants: Record<ColorVariants, BoxStyleProps> = {
+  default: {
+    boxShadow: 'shadowBorderUser',
+  },
+  decorative10: {
+    boxShadow: 'shadowBorderDecorative10Weaker',
+  },
+  decorative20: {
+    boxShadow: 'shadowBorderDecorative20Weaker',
+  },
+  decorative30: {
+    boxShadow: 'shadowBorderDecorative30Weaker',
+  },
+  decorative40: {
+    boxShadow: 'shadowBorderDecorative40Weaker',
+  },
+};
+
 const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   (
     {name, children, size = DEFAULT_SIZE, element = 'AVATAR', src, icon, color = 'default', variant = 'user', ...props},
@@ -97,6 +115,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         flexShrink={0}
         ref={ref}
         size={size}
+        {...(src ? undefined : shadowVariants[color])}
         {...colorVariants[color]}
         {...variants[variant]}
       >

packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap

@@ -328,7 +328,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"space-negative-110\\": \\"-2.5rem\\",
   \\"color-text-link-destructive-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-text-link-stronger\\": \\"rgb(235, 244, 255)\\",
-  \\"color-text-user\\": \\"rgb(200, 175, 240)\\",
+  \\"color-text-user\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-icon-new\\": \\"rgb(200, 175, 240)\\",
   \\"color-text-icon-offline\\": \\"rgb(244, 244, 246)\\",
   \\"color-text-link-destructive\\": \\"rgb(235, 86, 86)\\",
@@ -787,7 +787,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-link-destructive-dark\\": \\"rgb(173, 17, 17)\\",
   \\"color-text-link-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-link-stronger\\": \\"rgb(3, 11, 93)\\",
-  \\"color-text-user\\": \\"rgb(109, 46, 209)\\",
+  \\"color-text-user\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-icon-new\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-icon-offline\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -1178,7 +1178,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"space-negative-110\\": \\"-2.5rem\\",
   \\"color-text-link-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-link-stronger\\": \\"rgb(3, 11, 93)\\",
-  \\"color-text-user\\": \\"rgb(109, 46, 209)\\",
+  \\"color-text-user\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-icon-new\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-icon-offline\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",

packages/paste-design-tokens/tokens/global/text-color.yml

@@ -508,5 +508,5 @@ props:
 
   # user
   color-text-user:
-    value: "{!palette-purple-60}"
+    value: "{!palette-gray-100}"
     comment: Text color for user avatar.

packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml

@@ -183,5 +183,5 @@ props:
 
   # user
   color-text-user:
-    value: "{!palette-purple-30}"
+    value: "{!palette-gray-0}"
     comment: Text color for user avatar.

packages/paste-design-tokens/tokens/themes/twilio-dark/global/text-color.yml

@@ -32,3 +32,8 @@ props:
       - color-background
       - color-background-body
       - color-background-decorative-40
+
+  # user
+  color-text-user:
+    value: "{!palette-purple-30}"
+    comment: Text color for user avatar.

packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml

@@ -53,3 +53,8 @@ props:
       - color-background
       - color-background-body
       - color-background-decorative-30
+
+  # user
+  color-text-user:
+    value: "{!palette-purple-60}"
+    comment: Text color for user avatar.

packages/paste-website/src/pages/components/avatar/index.mdx

@@ -240,15 +240,7 @@ The Avatar `size` can be set as a responsive array of sizes.
 
 The Avatar displays its contents in this priority: image, then icon, then initials.
 
-## Anatomy
-
-| Property         | Default token         | Modifiable? |
-| ---------------- | --------------------- | ----------- |
-| border-radius    | border-radius-circle  | No          |
-| background-color | color-background-user | No          |
-| font-weight      | font-weight-bold      | No          |
-
-#### Size Token Mapping
+### Size Token Mapping
 
 | Size          | Font Size    | Line Height     | Icon Size    |
 | ------------- | ------------ | --------------- | ------------ |