@gitlab/ui 88.5.0 → 88.6.0

package/src/tokens/build/css/tokens.css

@@ -182,6 +182,12 @@
   --theme-indigo-100: #dbdbf8;
   --theme-indigo-50: #f1f1ff;
   --theme-indigo-10: #f8f8ff;
+  --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-orange: #e9be743d; /* Orange background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /* Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /* Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /* Red background for avatar fallback with no particular meaning. */
   --data-viz-orange-950: #4b2707;
   --data-viz-orange-900: #5e2f05;
   --data-viz-orange-800: #6f3500;
@@ -651,12 +657,12 @@
   --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
   --gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a muted badge in the active state. */
   --gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /* Used for the background of a muted badge when static or the default state when linked. */
-  --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-fallback-text-color-neutral: var(--gl-color-neutral-800); /* Neutral text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-800); /* Orange text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-green: var(--gl-color-green-800); /* Green text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-800); /* Blue text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-800); /* Purple text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /* Red text color 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. */

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

@@ -182,6 +182,12 @@
   --theme-indigo-100: #303083;
   --theme-indigo-50: #222261;
   --theme-indigo-10: #14143d;
+  --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-orange: #e9be743d; /* Orange background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /* Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /* Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /* Red background for avatar fallback with no particular meaning. */
   --data-viz-orange-950: #fae8d1;
   --data-viz-orange-900: #f5d6b3;
   --data-viz-orange-800: #eebd8c;
@@ -651,12 +657,12 @@
   --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a muted badge when static or the default state when linked. */
   --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a muted badge in the active state. */
   --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a muted badge when static or the default state when linked. */
-  --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-950); /* Orange background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-green: var(--gl-color-green-950); /* Green background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-blue: var(--gl-color-blue-950); /* 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-950); /* Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-200); /* Neutral text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-200); /* Orange text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-green: var(--gl-color-green-200); /* Green text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-200); /* Blue text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-200); /* Purple text color for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-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. */

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

@@ -278,12 +278,18 @@ export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
 export const DATA_VIZ_ORANGE_950 = '#fae8d1';
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#4d0a00'; // 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 = '#002850'; // Blue background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#072b15'; // Green background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#421f00'; // Orange background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; // Red text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_PURPLE = '#cbbbf2'; // Purple text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_BLUE = '#9dc7f1'; // Blue text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_GREEN = '#91d4a8'; // Green text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_ORANGE = '#e9be74'; // Orange text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL = '#bfbfc3'; // Neutral text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#fcb5aa3d'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#cbbbf23d'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#9dc7f13d'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#91d4a83d'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#e9be743d'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#bfbfc33d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a muted badge when static or the default state when linked.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a muted badge in the hover state.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of a muted badge in the focus state.

package/src/tokens/build/js/tokens.js

@@ -278,12 +278,18 @@ export const DATA_VIZ_ORANGE_900 = '#5e2f05';
 export const DATA_VIZ_ORANGE_950 = '#4b2707';
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 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_AVATAR_FALLBACK_TEXT_COLOR_RED = '#8d1300'; // Red text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_PURPLE = '#453894'; // Purple text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_BLUE = '#064787'; // Blue text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_GREEN = '#0d532a'; // Green text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_ORANGE = '#703800'; // Orange text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL = '#3a383f'; // Neutral text color for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#fcb5aa3d'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#cbbbf23d'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#9dc7f13d'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#91d4a83d'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#e9be743d'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#bfbfc33d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a muted badge when static or the default state when linked.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of a muted badge in the hover state.
 export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of a muted badge in the focus state.

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

@@ -5452,20 +5452,165 @@
       }
     },
     "fallback": {
-      "background": {
+      "text": {
         "color": {
           "red": {
-            "value": "#4d0a00",
+            "value": "#fcb5aa",
             "$type": "color",
-            "comment": "Red background for avatar fallback with no particular meaning.",
+            "comment": "Red text color 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.950}"
+                "default": "{color.red.800}",
+                "dark": "{color.red.200}"
               },
               "$type": "color",
+              "comment": "Red text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_RED",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "red"
+            ]
+          },
+          "purple": {
+            "value": "#cbbbf2",
+            "$type": "color",
+            "comment": "Purple text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.purple.800}",
+                "dark": "{color.purple.200}"
+              },
+              "$type": "color",
+              "comment": "Purple text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_PURPLE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "purple"
+            ]
+          },
+          "blue": {
+            "value": "#9dc7f1",
+            "$type": "color",
+            "comment": "Blue text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.800}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Blue text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_BLUE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "blue"
+            ]
+          },
+          "green": {
+            "value": "#91d4a8",
+            "$type": "color",
+            "comment": "Green text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.green.800}",
+                "dark": "{color.green.200}"
+              },
+              "$type": "color",
+              "comment": "Green text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_GREEN",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "green"
+            ]
+          },
+          "orange": {
+            "value": "#e9be74",
+            "$type": "color",
+            "comment": "Orange text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.orange.800}",
+                "dark": "{color.orange.200}"
+              },
+              "$type": "color",
+              "comment": "Orange text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_ORANGE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "orange"
+            ]
+          },
+          "neutral": {
+            "value": "#bfbfc3",
+            "$type": "color",
+            "comment": "Neutral text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.neutral.800}",
+                "dark": "{color.neutral.200}"
+              },
+              "$type": "color",
+              "comment": "Neutral text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "neutral"
+            ]
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "red": {
+            "value": "#fcb5aa3d",
+            "$type": "color",
+            "comment": "Red background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "#fcb5aa3d",
+              "$type": "color",
               "comment": "Red background for avatar fallback with no particular meaning."
             },
             "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_RED",
@@ -5479,16 +5624,13 @@
             ]
           },
           "purple": {
-            "value": "#232150",
+            "value": "#cbbbf23d",
             "$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}"
-              },
+              "value": "#cbbbf23d",
               "$type": "color",
               "comment": "Purple background for avatar fallback with no particular meaning."
             },
@@ -5503,16 +5645,13 @@
             ]
           },
           "blue": {
-            "value": "#002850",
+            "value": "#9dc7f13d",
             "$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.950}"
-              },
+              "value": "#9dc7f13d",
               "$type": "color",
               "comment": "Blue background for avatar fallback with no particular meaning."
             },
@@ -5527,16 +5666,13 @@
             ]
           },
           "green": {
-            "value": "#072b15",
+            "value": "#91d4a83d",
             "$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.950}"
-              },
+              "value": "#91d4a83d",
               "$type": "color",
               "comment": "Green background for avatar fallback with no particular meaning."
             },
@@ -5551,16 +5687,13 @@
             ]
           },
           "orange": {
-            "value": "#421f00",
+            "value": "#e9be743d",
             "$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.950}"
-              },
+              "value": "#e9be743d",
               "$type": "color",
               "comment": "Orange background for avatar fallback with no particular meaning."
             },
@@ -5575,16 +5708,13 @@
             ]
           },
           "neutral": {
-            "value": "#28272d",
+            "value": "#bfbfc33d",
             "$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}"
-              },
+              "value": "#bfbfc33d",
               "$type": "color",
               "comment": "Neutral background for avatar fallback with no particular meaning."
             },

package/src/tokens/build/json/tokens.json

@@ -5452,20 +5452,165 @@
       }
     },
     "fallback": {
-      "background": {
+      "text": {
         "color": {
           "red": {
-            "value": "#fcf1ef",
+            "value": "#8d1300",
             "$type": "color",
-            "comment": "Red background for avatar fallback with no particular meaning.",
+            "comment": "Red text color 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.950}"
+                "default": "{color.red.800}",
+                "dark": "{color.red.200}"
               },
               "$type": "color",
+              "comment": "Red text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_RED",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "red"
+            ]
+          },
+          "purple": {
+            "value": "#453894",
+            "$type": "color",
+            "comment": "Purple text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.purple.800}",
+                "dark": "{color.purple.200}"
+              },
+              "$type": "color",
+              "comment": "Purple text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_PURPLE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "purple"
+            ]
+          },
+          "blue": {
+            "value": "#064787",
+            "$type": "color",
+            "comment": "Blue text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.800}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Blue text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_BLUE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "blue"
+            ]
+          },
+          "green": {
+            "value": "#0d532a",
+            "$type": "color",
+            "comment": "Green text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.green.800}",
+                "dark": "{color.green.200}"
+              },
+              "$type": "color",
+              "comment": "Green text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_GREEN",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "green"
+            ]
+          },
+          "orange": {
+            "value": "#703800",
+            "$type": "color",
+            "comment": "Orange text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.orange.800}",
+                "dark": "{color.orange.200}"
+              },
+              "$type": "color",
+              "comment": "Orange text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_ORANGE",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "orange"
+            ]
+          },
+          "neutral": {
+            "value": "#3a383f",
+            "$type": "color",
+            "comment": "Neutral text color for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.neutral.800}",
+                "dark": "{color.neutral.200}"
+              },
+              "$type": "color",
+              "comment": "Neutral text color for avatar fallback with no particular meaning."
+            },
+            "name": "AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL",
+            "attributes": {},
+            "path": [
+              "avatar",
+              "fallback",
+              "text",
+              "color",
+              "neutral"
+            ]
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "red": {
+            "value": "#fcb5aa3d",
+            "$type": "color",
+            "comment": "Red background for avatar fallback with no particular meaning.",
+            "filePath": "src/tokens/contextual/avatar.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "#fcb5aa3d",
+              "$type": "color",
               "comment": "Red background for avatar fallback with no particular meaning."
             },
             "name": "AVATAR_FALLBACK_BACKGROUND_COLOR_RED",
@@ -5479,16 +5624,13 @@
             ]
           },
           "purple": {
-            "value": "#f4f0ff",
+            "value": "#cbbbf23d",
             "$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}"
-              },
+              "value": "#cbbbf23d",
               "$type": "color",
               "comment": "Purple background for avatar fallback with no particular meaning."
             },
@@ -5503,16 +5645,13 @@
             ]
           },
           "blue": {
-            "value": "#e9f3fc",
+            "value": "#9dc7f13d",
             "$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.950}"
-              },
+              "value": "#9dc7f13d",
               "$type": "color",
               "comment": "Blue background for avatar fallback with no particular meaning."
             },
@@ -5527,16 +5666,13 @@
             ]
           },
           "green": {
-            "value": "#ecf4ee",
+            "value": "#91d4a83d",
             "$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.950}"
-              },
+              "value": "#91d4a83d",
               "$type": "color",
               "comment": "Green background for avatar fallback with no particular meaning."
             },
@@ -5551,16 +5687,13 @@
             ]
           },
           "orange": {
-            "value": "#fdf1dd",
+            "value": "#e9be743d",
             "$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.950}"
-              },
+              "value": "#e9be743d",
               "$type": "color",
               "comment": "Orange background for avatar fallback with no particular meaning."
             },
@@ -5575,16 +5708,13 @@
             ]
           },
           "neutral": {
-            "value": "#ececef",
+            "value": "#bfbfc33d",
             "$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}"
-              },
+              "value": "#bfbfc33d",
               "$type": "color",
               "comment": "Neutral background for avatar fallback with no particular meaning."
             },