Merge branch '2673-use-design-tokens-in-glavatar' into 'main'

feat(GlAvatar): Use color design tokens

Closes #2673

See merge request !4292



Merged-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: Scott de Jonge <sdejonge@gitlab.com>
Approved-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: Dan MH <dmizzi-harris@gitlab.com>
Reviewed-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Co-authored-by: GitLab Bot <gitlab-bot@gitlab.com>
Co-authored-by: Thomas Hutterer <thutterer@gitlab.com>

src/components/base/avatar/avatar.scss

-$gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $green-50, $orange-50,
-  $gray-50;
+// Available background colors for the identicon fallback for avatars
+//
+// Purple is duplicated on purpose. We have replaced indigo with it.
+// If we had simply removed it, the total number of colors would have
+// changed, resulting in changing the color of all identicons, because
+// we do a modulo division with the total number of colors on the
+// object's id to always give it the same "random" color.
+$gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
+  var(--gl-avatar-fallback-background-color-purple),
+  var(--gl-avatar-fallback-background-color-purple), var(--gl-avatar-fallback-background-color-blue),
+  var(--gl-avatar-fallback-background-color-green),
+  var(--gl-avatar-fallback-background-color-orange),
+  var(--gl-avatar-fallback-background-color-neutral);
 
 @mixin gl-avatar {
   @include gl-display-inline-flex;
@@ -7,7 +18,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-flex-shrink-0;
   @include gl-line-height-ratio-1000;
   @include gl-object-fit-contain;
-  outline: 1px solid var(--t-gray-a-08, #{$t-gray-a-08});
+  outline: 1px solid var(--gl-avatar-border-color-default);
   outline-offset: -1px;
 }
 
@@ -196,9 +207,9 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
 .gl-avatar-identicon {
   @include gl-text-center;
   @include gl-vertical-align-top;
-  @include gl-text-gray-900;
   @include gl-justify-content-center;
   @include gl-align-items-center;
+  color: var(--gl-text-color-strong);
 }
 
 // Background colors

src/components/base/avatar/avatar.stories.js

@@ -133,6 +133,19 @@ export const FallbackOnAvatarLoadFailure = (args, { argTypes }) => ({
 });
 FallbackOnAvatarLoadFailure.args = { ...generateProjectFallbackProps(), ...generateImageProps() };
 
+export const AllIdenticons = () => ({
+  components,
+  template: `
+    <div class="gl-display-flex gl-gap-2">
+      <gl-avatar
+        v-for="i in [0,1,2,3,4,5,6]"
+        :entity-id="i"
+        :entity-name="i.toString()"
+      />
+    </div>
+  `,
+});
+
 export default {
   title: 'base/avatar',
   component: GlAvatar,

src/components/base/avatar_labeled/avatar_labeled.scss

@@ -8,7 +8,7 @@
     @include gl-justify-content-center;
     @include gl-font-base;
     @include gl-line-height-normal;
-    @include gl-text-gray-900;
+    color: var(--gl-text-color-strong);
   }
 
   &-labels.inline-labels {
@@ -20,11 +20,11 @@
   &-label {
     @include gl-font-weight-bold;
     @include gl-p-1;
-    @include gl-text-gray-900;
+    color: var(--gl-text-color-strong);
   }
 
   &-sublabel {
-    color: $gl-text-color-subtle;
+    color: var(--gl-text-color-subtle);
     overflow-wrap: anywhere;
   }
 }

src/components/base/avatar_link/avatar_link.scss

@@ -11,7 +11,7 @@
     @include gl-text-decoration-none;
 
     .gl-avatar {
-      @include gl-border-gray-a-24;
+      outline: 1px solid var(--gl-avatar-border-color-hover);
     }
 
     .gl-avatar-labeled {

src/components/base/avatars_inline/avatars_inline.scss

@@ -48,15 +48,15 @@
   @include gl-display-inline-flex;
   @include gl-align-items-center;
   @include gl-justify-content-center;
-  @include gl-bg-gray-100;
-  @include gl-text-gray-900;
   @include gl-font-sm;
   @include gl-px-2;
   @include gl-line-height-normal;
   @include gl-rounded-pill;
+  background-color: var(--gl-status-neutral-background-color-default);
+  color: var(--gl-status-neutral-text-color-default);
   height: var(--avatar-size);
   min-width: var(--avatar-size);
-  
+
   &.lg {
     @include gl-font-base;
     @include gl-rounded-6;

src/tokens/build/css/tokens.css

@@ -520,6 +520,14 @@
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-300); /* Used to compliment the info banner. */
+  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-50); /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-50); /* Orange background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-green: var(--gl-color-green-50); /* Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-50); /* Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: var(--gl-color-purple-50); /* Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: var(--gl-color-red-50); /* Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
+  --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */

src/tokens/build/css/tokens.dark.css

@@ -520,6 +520,14 @@
   --gl-breadcrumb-separator-color: var(--gl-color-neutral-700); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-600); /* Used to compliment the info banner. */
+  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-900); /* Orange background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-green: var(--gl-color-green-900); /* Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-900); /* Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: var(--gl-color-purple-950); /* Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: var(--gl-color-red-900); /* Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
+  --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */

src/tokens/build/js/tokens.dark.js

@@ -421,6 +421,14 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(31, 30, 36, 0.08)'; // Used to define the edge of an avatar.
+export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(31, 30, 36, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#660e00'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#232150'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#333238'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#333238'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.

src/tokens/build/js/tokens.js

@@ -421,6 +421,14 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(31, 30, 36, 0.08)'; // Used to define the edge of an avatar.
+export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(31, 30, 36, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#fcf1ef'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#f4f0ff'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.

src/tokens/build/json/tokens.dark.json

@@ -8943,6 +8943,202 @@
       ]
     }
   },
+  "avatar": {
+    "border": {
+      "color": {
+        "default": {
+          "value": "rgba(31, 30, 36, 0.08)",
+          "$type": "color",
+          "comment": "Used to define the edge of an avatar.",
+          "filePath": "src/tokens/contextual/avatar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.alpha.dark.8}",
+            "$type": "color",
+            "comment": "Used to define the edge of an avatar."
+          },
+          "name": "AVATAR_BORDER_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "avatar",
+            "border",
+            "color",
+            "default"
+          ]
+        },
+        "hover": {
+          "value": "rgba(31, 30, 36, 0.24)",
+          "$type": "color",
+          "comment": "Used to increase the edge definition of an avatar in the hover state.",
+          "filePath": "src/tokens/contextual/avatar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.alpha.dark.24}",
+            "$type": "color",
+            "comment": "Used to increase the edge definition of an avatar in the hover state."
+          },
+          "name": "AVATAR_BORDER_COLOR_HOVER",
+          "attributes": {},
+          "path": [
+            "avatar",
+            "border",
+            "color",
+            "hover"
+          ]
+        }
+      }
+    },
+    "fallback": {
+      "background": {
+        "color": {
+          "red": {
+            "value": "#660e00",
+            "$type": "color",
+            "comment": "Red background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$type": "color",
+              "comment": "Red background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_RED",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "red"
+            ]
+          },
+          "purple": {
+            "value": "#232150",
+            "$type": "color",
+            "comment": "Purple background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.purple.50}",
+                "dark": "{color.purple.950}"
+              },
+              "$type": "color",
+              "comment": "Purple background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "purple"
+            ]
+          },
+          "blue": {
+            "value": "#033464",
+            "$type": "color",
+            "comment": "Blue background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.50}",
+                "dark": "{color.blue.900}"
+              },
+              "$type": "color",
+              "comment": "Blue background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "blue"
+            ]
+          },
+          "green": {
+            "value": "#0a4020",
+            "$type": "color",
+            "comment": "Green background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.green.50}",
+                "dark": "{color.green.900}"
+              },
+              "$type": "color",
+              "comment": "Green background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "green"
+            ]
+          },
+          "orange": {
+            "value": "#5c2900",
+            "$type": "color",
+            "comment": "Orange background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.orange.50}",
+                "dark": "{color.orange.900}"
+              },
+              "$type": "color",
+              "comment": "Orange background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "orange"
+            ]
+          },
+          "neutral": {
+            "value": "#333238",
+            "$type": "color",
+            "comment": "Neutral background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.neutral.50}",
+                "dark": "{color.neutral.900}"
+              },
+              "$type": "color",
+              "comment": "Neutral background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "neutral"
+            ]
+          }
+        }
+      }
+    }
+  },
   "banner": {
     "intro": {
       "border": {

src/tokens/build/json/tokens.json

@@ -8943,6 +8943,202 @@
       ]
     }
   },
+  "avatar": {
+    "border": {
+      "color": {
+        "default": {
+          "value": "rgba(31, 30, 36, 0.08)",
+          "$type": "color",
+          "comment": "Used to define the edge of an avatar.",
+          "filePath": "src/tokens/contextual/avatar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.alpha.dark.8}",
+            "$type": "color",
+            "comment": "Used to define the edge of an avatar."
+          },
+          "name": "AVATAR_BORDER_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "avatar",
+            "border",
+            "color",
+            "default"
+          ]
+        },
+        "hover": {
+          "value": "rgba(31, 30, 36, 0.24)",
+          "$type": "color",
+          "comment": "Used to increase the edge definition of an avatar in the hover state.",
+          "filePath": "src/tokens/contextual/avatar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.alpha.dark.24}",
+            "$type": "color",
+            "comment": "Used to increase the edge definition of an avatar in the hover state."
+          },
+          "name": "AVATAR_BORDER_COLOR_HOVER",
+          "attributes": {},
+          "path": [
+            "avatar",
+            "border",
+            "color",
+            "hover"
+          ]
+        }
+      }
+    },
+    "fallback": {
+      "background": {
+        "color": {
+          "red": {
+            "value": "#fcf1ef",
+            "$type": "color",
+            "comment": "Red background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$type": "color",
+              "comment": "Red background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_RED",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "red"
+            ]
+          },
+          "purple": {
+            "value": "#f4f0ff",
+            "$type": "color",
+            "comment": "Purple background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.purple.50}",
+                "dark": "{color.purple.950}"
+              },
+              "$type": "color",
+              "comment": "Purple background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "purple"
+            ]
+          },
+          "blue": {
+            "value": "#e9f3fc",
+            "$type": "color",
+            "comment": "Blue background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.50}",
+                "dark": "{color.blue.900}"
+              },
+              "$type": "color",
+              "comment": "Blue background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "blue"
+            ]
+          },
+          "green": {
+            "value": "#ecf4ee",
+            "$type": "color",
+            "comment": "Green background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.green.50}",
+                "dark": "{color.green.900}"
+              },
+              "$type": "color",
+              "comment": "Green background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "green"
+            ]
+          },
+          "orange": {
+            "value": "#fdf1dd",
+            "$type": "color",
+            "comment": "Orange background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.orange.50}",
+                "dark": "{color.orange.900}"
+              },
+              "$type": "color",
+              "comment": "Orange background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "orange"
+            ]
+          },
+          "neutral": {
+            "value": "#ececef",
+            "$type": "color",
+            "comment": "Neutral background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.neutral.50}",
+                "dark": "{color.neutral.900}"
+              },
+              "$type": "color",
+              "comment": "Neutral background for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "background",
+              "color",
+              "neutral"
+            ]
+          }
+        }
+      }
+    }
+  },
   "banner": {
     "intro": {
       "border": {

src/tokens/build/scss/_tokens.dark.scss

@@ -518,6 +518,14 @@ $gl-popover-background-color: $gl-color-neutral-900; // Used for the background
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
+$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-orange: $gl-color-orange-900; // Orange background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-green: $gl-color-green-900; // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: $gl-color-blue-900; // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: $gl-color-purple-950; // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-red: $gl-color-red-900; // Red background for avatar fallback with no particular meaning.
+$gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
+$gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.

src/tokens/build/scss/_tokens.scss

@@ -518,6 +518,14 @@ $gl-popover-background-color: $gl-color-neutral-0; // Used for the background co
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
+$gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-orange: $gl-color-orange-50; // Orange background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-green: $gl-color-green-50; // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: $gl-color-blue-50; // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: $gl-color-purple-50; // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-red: $gl-color-red-50; // Red background for avatar fallback with no particular meaning.
+$gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
+$gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.

src/tokens/build/scss/_tokens_custom_properties.scss

@@ -421,6 +421,14 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
+$gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
+$gl-avatar-fallback-background-color-red: var(--gl-avatar-fallback-background-color-red);
+$gl-avatar-fallback-background-color-purple: var(--gl-avatar-fallback-background-color-purple);
+$gl-avatar-fallback-background-color-blue: var(--gl-avatar-fallback-background-color-blue);
+$gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
+$gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
+$gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
 $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);

src/tokens/contextual/avatar.tokens.json

+{
+  "avatar": {
+    "border": {
+      "color": {
+        "default": {
+          "$value": "{color.alpha.dark.8}",
+          "$type": "color",
+          "$description": "Used to define the edge of an avatar."
+        },
+        "hover": {
+          "$value": "{color.alpha.dark.24}",
+          "$type": "color",
+          "$description": "Used to increase the edge definition of an avatar in the hover state."
+        }
+      }
+    },
+    "fallback": {
+      "background": {
+        "color": {
+          "red": {
+            "$value": {
+              "default": "{color.red.50}",
+              "dark": "{color.red.900}"
+            },
+            "$type": "color",
+            "$description": "Red background for avatar fallback with no particular meaning."
+          },
+          "purple": {
+            "$value": {
+              "default": "{color.purple.50}",
+              "dark": "{color.purple.950}"
+            },
+            "$type": "color",
+            "$description": "Purple background for avatar fallback with no particular meaning."
+          },
+          "blue": {
+            "$value": {
+              "default": "{color.blue.50}",
+              "dark": "{color.blue.900}"
+            },
+            "$type": "color",
+            "$description": "Blue background for avatar fallback with no particular meaning."
+          },
+          "green": {
+            "$value": {
+              "default": "{color.green.50}",
+              "dark": "{color.green.900}"
+            },
+            "$type": "color",
+            "$description": "Green background for avatar fallback with no particular meaning."
+          },
+          "orange": {
+            "$value": {
+              "default": "{color.orange.50}",
+              "dark": "{color.orange.900}"
+            },
+            "$type": "color",
+            "$description": "Orange background for avatar fallback with no particular meaning."
+          },
+          "neutral": {
+            "$value": {
+              "default": "{color.neutral.50}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Neutral background for avatar fallback with no particular meaning."
+          }
+        }
+      }
+    }
+  }
+}