{
  "name": "AvatarGradient",
  "source": "src/components/AvatarGradient.tsx",
  "propsType": "AvatarGradientProps",
  "description": "AvatarGradient is Avatar's initials-only sibling: a tinted, bevelled disc for\npeople who have no photo.\n\nIT IS A SEPARATE COMPONENT BECAUSE FIGMA DRAWS A SEPARATE COMPONENT, AND THE\nAXES ARE THE ARGUMENT\n\nIt has `Color`, which Avatar does not. It has no `Shape`, because a gradient\nthis directional only reads on a circle. It has no `Type`, because there is\nno image and no icon to fall back to — the initials are the whole content.\nFolding it into Avatar would mean a `color` prop that does nothing on three\nof Avatar's four states and a `shape` prop that this one has to reject.\n\nThere is no `icon` and no `src` fallback here on purpose. If you have a\nphoto, or nothing at all to put in the circle, that is `Avatar`.",
  "import": "import { AvatarGradient } from 'ionbase-ui';",
  "status": "stable",
  "summary": "Avatar's initials-only sibling: a tinted, bevelled disc in one of seven colours, for people with no photo.",
  "useWhen": [
    "someone has no profile image and the fallback should still look deliberate rather than empty",
    "a list of people reads better when each one is a different colour — the colour is recognisable long before the letters are legible"
  ],
  "useInstead": [
    {
      "when": "there is a photo, or there may be one later",
      "use": "Avatar",
      "why": "Avatar falls back from image to initials to icon on its own; this component has no image to fall back from"
    },
    {
      "when": "the mark needs a square shape, an icon, a ring or a status indicator",
      "use": "Avatar",
      "why": "Figma draws none of those on this component, and a gradient this directional only reads on a circle"
    },
    {
      "when": "the thing being marked is a status, count or category rather than a person",
      "use": "Badge"
    }
  ],
  "variants": {
    "size": {
      "mini": {
        "use": "24px — inline beside body text, dense table rows"
      },
      "sm": {
        "use": "32px — menu rows, compact lists"
      },
      "md": {
        "use": "the default, 40px"
      },
      "lg": {
        "use": "48px — profile headers and detail pages"
      }
    },
    "color": {
      "slate": {
        "use": "the default. The one to reach for when nothing about the person suggests a colour"
      },
      "blue": {
        "use": "one of seven, picked to tell people apart"
      },
      "violet": {
        "use": "one of seven, picked to tell people apart"
      },
      "pink": {
        "use": "one of seven, picked to tell people apart"
      },
      "orange": {
        "use": "one of seven, picked to tell people apart"
      },
      "green": {
        "use": "as the rest. Not a status — a green disc here does not mean online, and Avatar's `bottomIndicator` is what does"
      },
      "red": {
        "use": "as the rest. Not an error — this is identity, not state"
      }
    }
  },
  "a11y": {
    "guarantees": [
      "`alt` falls back to `initials`, so the disc is never announced as an unlabelled image",
      "all seven colours clear WCAG AA for the initials against the palest end of their own gradient, which is the worst case the text sits on"
    ],
    "requires": [
      "`alt` naming the person — \"Ada Lovelace\", not \"AB\". Two letters are not a name, and that is all a screen reader would otherwise get"
    ],
    "notes": [
      "Colour is decoration here, never information. Nothing about which of the seven a person gets should be recoverable, because a screen reader cannot recover it.",
      "The first version of this component was a saturated disc with white initials and failed AA on four of its colours. It was fixed in Figma by inverting it — pale disc, coloured initials — rather than in code. Do not reintroduce the saturated version."
    ]
  },
  "antiPatterns": [
    {
      "dont": "picking the colour from a status — green for online, red for failing",
      "do": "use Avatar's `bottomIndicator`, or say it in text",
      "why": "the colour is identity, not state. It is also invisible to assistive tech, so a status expressed only this way is not expressed at all"
    },
    {
      "dont": "hashing a user id to a colour and treating it as stable",
      "do": "store the chosen colour with the person, the way you would store their avatar",
      "why": "the palette has eight entries and any hash of it will collide; worse, it silently reassigns everyone the day the palette or the hash changes"
    },
    {
      "dont": "passing more than two letters",
      "why": "Figma draws two. Three fit at 48 and clip at 24, so it looks correct in the story and wrong in the table"
    }
  ],
  "stylesheet": "src/styles/avatar-gradient.css",
  "tokens": [
    "--border-width-default",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-regular",
    "--ion-avatar-gradient-bevel",
    "--ion-avatar-gradient-font-size",
    "--ion-avatar-gradient-font-weight",
    "--ion-avatar-gradient-from",
    "--ion-avatar-gradient-line-height",
    "--ion-avatar-gradient-mid",
    "--ion-avatar-gradient-size",
    "--ion-avatar-gradient-text",
    "--ion-avatar-gradient-to",
    "--radius-full",
    "--spacing-24",
    "--spacing-32",
    "--spacing-40",
    "--spacing-48",
    "--surface-palette-1",
    "--surface-palette-1-subtle",
    "--surface-palette-1-tint",
    "--surface-palette-2",
    "--surface-palette-2-subtle",
    "--surface-palette-2-tint",
    "--surface-palette-3",
    "--surface-palette-3-subtle",
    "--surface-palette-3-tint",
    "--surface-palette-4",
    "--surface-palette-4-subtle",
    "--surface-palette-4-tint",
    "--surface-palette-5",
    "--surface-palette-5-subtle",
    "--surface-palette-5-tint",
    "--surface-palette-6",
    "--surface-palette-6-subtle",
    "--surface-palette-6-tint",
    "--surface-palette-7",
    "--surface-palette-7-subtle",
    "--surface-palette-7-tint",
    "--surface-sheen",
    "--surface-sheen-subtle",
    "--text-palette-1",
    "--text-palette-2",
    "--text-palette-3",
    "--text-palette-4",
    "--text-palette-5",
    "--text-palette-6",
    "--text-palette-7",
    "--type-body",
    "--type-body-lg",
    "--type-body-lg-line-height",
    "--type-body-line-height",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "size": {
      "type": "AvatarSize | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches the Figma `Size` variant: Mini 24, Small 32, Medium 40, Large 48.",
      "values": [
        "sm",
        "md",
        "lg",
        "mini"
      ]
    },
    "color": {
      "type": "AvatarGradientColor | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches the Figma `Color` variant.",
      "values": [
        "slate",
        "blue",
        "violet",
        "pink",
        "orange",
        "green",
        "red"
      ]
    },
    "initials": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "The two letters. Figma's `Initials`."
    },
    "alt": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Describes the person, not the picture — \"Ada Lovelace\", not \"avatar\".\nWithout it the initials are announced as the letters they are, which is\nnot a name."
    }
  },
  "propCounts": {
    "own": 4,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}