@adobe/spectrum-design-data 0.1.0 → 0.3.0

package/components/avatar.json

@@ -0,0 +1,246 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/avatar.json",
+  "specVersion": "1.0.0-draft",
+  "name": "avatar",
+  "displayName": "Avatar",
+  "description": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
+  },
+  "options": {
+    "size": {
+      "type": "number",
+      "default": 500,
+      "values": [
+        {
+          "value": 50
+        },
+        {
+          "value": 75
+        },
+        {
+          "value": 100
+        },
+        {
+          "value": 200
+        },
+        {
+          "value": 300
+        },
+        {
+          "value": 400
+        },
+        {
+          "value": 500
+        },
+        {
+          "value": 600
+        },
+        {
+          "value": 700
+        },
+        {
+          "value": 800
+        },
+        {
+          "value": 900
+        },
+        {
+          "value": 1000
+        },
+        {
+          "value": 1100
+        },
+        {
+          "value": 1200
+        },
+        {
+          "value": 1300
+        },
+        {
+          "value": 1400
+        },
+        {
+          "value": 1500
+        }
+      ]
+    },
+    "image": {
+      "type": "string",
+      "default": "user image",
+      "values": [
+        {
+          "value": "user image"
+        },
+        {
+          "value": "gradient image"
+        },
+        {
+          "value": "gradient"
+        },
+        {
+          "value": "guest image"
+        },
+        {
+          "value": "initials"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "showStroke": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "avatar-size-50",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-75",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-100",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-200",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-300",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-400",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-500",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-600",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-700",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-800",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-900",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-1000",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-1100",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-1200",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-1300",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-1400",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-size-1500",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-border-thickness",
+      "context": "Border"
+    },
+    {
+      "token": "focus-indicator-thickness",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "focus-indicator-gap",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "avatar-gradient-stop-1",
+      "context": "0% "
+    },
+    {
+      "token": "static-[color]-400",
+      "context": "0% "
+    },
+    {
+      "token": "avatar-gradient-stop-2",
+      "context": "66% "
+    },
+    {
+      "token": "static-[color]-600",
+      "context": "66% "
+    },
+    {
+      "token": "avatar-gradient-stop-3",
+      "context": "100% "
+    },
+    {
+      "token": "static-[color]-800",
+      "context": "100% "
+    },
+    {
+      "token": "gradient-angle",
+      "context": "Top-left to bottom-right"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Text (List view item)"
+    },
+    {
+      "token": "extra-bold-font-weight",
+      "context": "Text (List view item)"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Text (List view item)"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Text (List view item)"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Text (List view item)"
+    }
+  ],
+  "accessibility": {
+    "focusable": false
+  }
+}