@gitlab/ui 88.5.0 → 88.6.0

package/dist/tokens/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/dist/tokens/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."
             },

package/dist/tokens/scss/_tokens.dark.scss

@@ -180,6 +180,12 @@ $theme-indigo-200: #41419f !default;
 $theme-indigo-100: #303083 !default;
 $theme-indigo-50: #222261 !default;
 $theme-indigo-10: #14143d !default;
+$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 !default;
 $data-viz-orange-900: #f5d6b3 !default;
 $data-viz-orange-800: #eebd8c !default;
@@ -649,12 +655,12 @@ $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the borde
 $gl-badge-muted-border-color-default: $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: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
 $gl-badge-muted-background-color-default: $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: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-orange: $gl-color-orange-950; // Orange background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-green: $gl-color-green-950; // Green background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-blue: $gl-color-blue-950; // 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-950; // Red background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-neutral: $gl-color-neutral-200; // Neutral text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-orange: $gl-color-orange-200; // Orange text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-green: $gl-color-green-200; // Green text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-blue: $gl-color-blue-200; // Blue text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-purple: $gl-color-purple-200; // Purple text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-light-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.

package/dist/tokens/scss/_tokens.scss

@@ -180,6 +180,12 @@ $theme-indigo-200: #c7c7f2 !default;
 $theme-indigo-100: #dbdbf8 !default;
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-10: #f8f8ff !default;
+$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 !default;
 $data-viz-orange-900: #5e2f05 !default;
 $data-viz-orange-800: #6f3500 !default;
@@ -649,12 +655,12 @@ $gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the borde
 $gl-badge-muted-border-color-default: $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: $gl-color-neutral-100; // Used for the background of a muted badge in the active state.
 $gl-badge-muted-background-color-default: $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: $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-fallback-text-color-neutral: $gl-color-neutral-800; // Neutral text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-orange: $gl-color-orange-800; // Orange text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-green: $gl-color-green-800; // Green text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-blue: $gl-color-blue-800; // Blue text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-purple: $gl-color-purple-800; // Purple text color for avatar fallback with no particular meaning.
+$gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color 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.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -278,6 +278,12 @@ $data-viz-orange-900: var(--data-viz-orange-900);
 $data-viz-orange-950: var(--data-viz-orange-950);
 $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-text-color-red: var(--gl-avatar-fallback-text-color-red);
+$gl-avatar-fallback-text-color-purple: var(--gl-avatar-fallback-text-color-purple);
+$gl-avatar-fallback-text-color-blue: var(--gl-avatar-fallback-text-color-blue);
+$gl-avatar-fallback-text-color-green: var(--gl-avatar-fallback-text-color-green);
+$gl-avatar-fallback-text-color-orange: var(--gl-avatar-fallback-text-color-orange);
+$gl-avatar-fallback-text-color-neutral: var(--gl-avatar-fallback-text-color-neutral);
 $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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "88.5.0",
+  "version": "88.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/avatar/avatar.scss

@@ -12,6 +12,13 @@ $gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
   var(--gl-avatar-fallback-background-color-orange),
   var(--gl-avatar-fallback-background-color-neutral);
 
+$gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
+  var(--gl-avatar-fallback-text-color-purple),
+  var(--gl-avatar-fallback-text-color-purple), var(--gl-avatar-fallback-text-color-blue),
+  var(--gl-avatar-fallback-text-color-green),
+  var(--gl-avatar-fallback-text-color-orange),
+  var(--gl-avatar-fallback-text-color-neutral);
+
 @mixin gl-avatar {
   @include gl-display-inline-flex;
   @include gl-overflow-hidden;
@@ -215,6 +222,7 @@ $gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
 // Background colors
 @for $i from 1 through length($gl-avatar-identicon-bgs) {
   .gl-avatar-identicon-bg#{$i} {
+    color: nth($gl-avatar-identicon-texts, $i);
     background-color: nth($gl-avatar-identicon-bgs, $i);
   }
 }

package/src/components/base/form/form_checkbox_tree/models/tree.js

@@ -45,6 +45,7 @@ export class Tree {
    * @param {object} parent The options' parent
    * @param {number} depth  The current depth-level in the tree
    */
+  // eslint-disable-next-line max-params
   initNodes(options = [], selected = [], parent = null, depth = 0) {
     if (!options.length) {
       return;

package/src/components/charts/series_label/series_label.vue

@@ -1,4 +1,5 @@
 <script>
+// eslint-disable-next-line max-params
 const makePathRect = (startX, startY, width, height) =>
   `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;