@gitlab/ui/src/tokens/contextual/avatar.tokens.json

GitLab UI Components

{
  "avatar": {
    "border": {
      "color": {
        "default": {
          "$value": {
            "default": "{color.alpha.dark.8}",
            "dark": "{color.alpha.light.8}"
          },
          "$type": "color",
          "$description": "Used to define the edge of an avatar.",
          "$extensions": {
            "com.figma.scope": [
              "STROKE_COLOR"
            ]
          }
        },
        "hover": {
          "$value": {
            "default": "{color.alpha.dark.24}",
            "dark": "{color.alpha.light.24}"
          },
          "$type": "color",
          "$description": "Used to increase the edge definition of an avatar in the hover state.",
          "$extensions": {
            "com.figma.scope": [
              "STROKE_COLOR"
            ]
          }
        }
      }
    },
    "fallback": {
      "text": {
        "color": {
          "red": {
            "$value": {
              "default": "{color.red.800}",
              "dark": "{color.red.200}"
            },
            "$type": "color",
            "$description": "Red text color for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "TEXT_FILL"
              ]
            }
          },
          "purple": {
            "$value": {
              "default": "{color.purple.800}",
              "dark": "{color.purple.200}"
            },
            "$type": "color",
            "$description": "Purple text color for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "TEXT_FILL"
              ]
            }
          },
          "blue": {
            "$value": {
              "default": "{color.blue.800}",
              "dark": "{color.blue.200}"
            },
            "$type": "color",
            "$description": "Blue text color for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "TEXT_FILL"
              ]
            }
          },
          "green": {
            "$value": {
              "default": "{color.green.800}",
              "dark": "{color.green.200}"
            },
            "$type": "color",
            "$description": "Green text color for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "TEXT_FILL"
              ]
            }
          },
          "orange": {
            "$value": {
              "default": "{color.orange.800}",
              "dark": "{color.orange.200}"
            },
            "$type": "color",
            "$description": "Orange text color for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "TEXT_FILL"
              ]
            }
          },
          "neutral": {
            "$value": {
              "default": "{color.neutral.800}",
              "dark": "{color.neutral.200}"
            },
            "$type": "color",
            "$description": "Neutral text color for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "TEXT_FILL"
              ]
            }
          }
        }
      },
      "background": {
        "color": {
          "red": {
            "$value": "#fcb5aa3d",
            "$type": "color",
            "$description": "Red background for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "FRAME_FILL",
                "SHAPE_FILL"
              ]
            }
          },
          "purple": {
            "$value": "#cbbbf23d",
            "$type": "color",
            "$description": "Purple background for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "FRAME_FILL",
                "SHAPE_FILL"
              ]
            }
          },
          "blue": {
            "$value": "#9dc7f13d",
            "$type": "color",
            "$description": "Blue background for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "FRAME_FILL",
                "SHAPE_FILL"
              ]
            }
          },
          "green": {
            "$value": "#91d4a83d",
            "$type": "color",
            "$description": "Green background for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "FRAME_FILL",
                "SHAPE_FILL"
              ]
            }
          },
          "orange": {
            "$value": "#e9be743d",
            "$type": "color",
            "$description": "Orange background for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "FRAME_FILL",
                "SHAPE_FILL"
              ]
            }
          },
          "neutral": {
            "$value": "#bfbfc33d",
            "$type": "color",
            "$description": "Neutral background for avatar fallback with no particular meaning.",
            "$extensions": {
              "com.figma.scope": [
                "FRAME_FILL",
                "SHAPE_FILL"
              ]
            }
          }
        }
      }
    }
  }
}