@gitlab/ui 85.7.0 → 85.9.0

package/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": {

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

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."
+          }
+        }
+      }
+    }
+  }
+}