@gitlab/ui 85.7.0 → 85.8.0

package/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.

package/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);

package/src/tokens/contextual/avatar.tokens.json

@@ -0,0 +1,72 @@
+{
+  "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."
+          }
+        }
+      }
+    }
+  }
+}