@gitlab/ui 88.5.0 → 88.6.0

package/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/src/tokens/contextual/avatar.tokens.json

@@ -21,54 +21,88 @@
       }
     },
     "fallback": {
-      "background": {
+      "text": {
         "color": {
           "red": {
             "$value": {
-              "default": "{color.red.50}",
-              "dark": "{color.red.950}"
+              "default": "{color.red.800}",
+              "dark": "{color.red.200}"
             },
             "$type": "color",
-            "$description": "Red background for avatar fallback with no particular meaning."
+            "$description": "Red text color for avatar fallback with no particular meaning."
           },
           "purple": {
             "$value": {
-              "default": "{color.purple.50}",
-              "dark": "{color.purple.950}"
+              "default": "{color.purple.800}",
+              "dark": "{color.purple.200}"
             },
             "$type": "color",
-            "$description": "Purple background for avatar fallback with no particular meaning."
+            "$description": "Purple text color for avatar fallback with no particular meaning."
           },
           "blue": {
             "$value": {
-              "default": "{color.blue.50}",
-              "dark": "{color.blue.950}"
+              "default": "{color.blue.800}",
+              "dark": "{color.blue.200}"
             },
             "$type": "color",
-            "$description": "Blue background for avatar fallback with no particular meaning."
+            "$description": "Blue text color for avatar fallback with no particular meaning."
           },
           "green": {
             "$value": {
-              "default": "{color.green.50}",
-              "dark": "{color.green.950}"
+              "default": "{color.green.800}",
+              "dark": "{color.green.200}"
             },
             "$type": "color",
-            "$description": "Green background for avatar fallback with no particular meaning."
+            "$description": "Green text color for avatar fallback with no particular meaning."
           },
           "orange": {
             "$value": {
-              "default": "{color.orange.50}",
-              "dark": "{color.orange.950}"
+              "default": "{color.orange.800}",
+              "dark": "{color.orange.200}"
             },
             "$type": "color",
-            "$description": "Orange background for avatar fallback with no particular meaning."
+            "$description": "Orange text color for avatar fallback with no particular meaning."
           },
           "neutral": {
             "$value": {
-              "default": "{color.neutral.50}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.neutral.800}",
+              "dark": "{color.neutral.200}"
             },
             "$type": "color",
+            "$description": "Neutral text color for avatar fallback with no particular meaning."
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "red": {
+            "$value": "#fcb5aa3d",
+            "$type": "color",
+            "$description": "Red background for avatar fallback with no particular meaning."
+          },
+          "purple": {
+            "$value": "#cbbbf23d",
+            "$type": "color",
+            "$description": "Purple background for avatar fallback with no particular meaning."
+          },
+          "blue": {
+            "$value": "#9dc7f13d",
+            "$type": "color",
+            "$description": "Blue background for avatar fallback with no particular meaning."
+          },
+          "green": {
+            "$value": "#91d4a83d",
+            "$type": "color",
+            "$description": "Green background for avatar fallback with no particular meaning."
+          },
+          "orange": {
+            "$value": "#e9be743d",
+            "$type": "color",
+            "$description": "Orange background for avatar fallback with no particular meaning."
+          },
+          "neutral": {
+            "$value": "#bfbfc33d",
+            "$type": "color",
             "$description": "Neutral background for avatar fallback with no particular meaning."
           }
         }