@adobe/design-data-spec 0.3.0 → 0.5.0

package/components/action-group.json

@@ -0,0 +1,82 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/action-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "action-group",
+  "displayName": "Action group",
+  "description": "An action group is a grouping of action buttons that are related to each other.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/action-group/"
+  },
+  "options": {
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["regular", "compact"],
+      "default": "regular"
+    },
+    "isJustified": {
+      "type": "boolean",
+      "default": false
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "enableSelection": {
+      "type": "boolean",
+      "default": false
+    },
+    "selectionMode": {
+      "type": "string",
+      "enum": ["single", "multiple"],
+      "default": "single",
+      "description": "Only applicable if selection is enabled"
+    },
+    "allowsEmptySelection": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if selection is enabled"
+    },
+    "overflowMode": {
+      "type": "string",
+      "enum": ["wrap", "collapse"],
+      "default": "wrap"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "spacing-75",
+      "context": "Spacing (horizontal, regular)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (horizontal, regular)"
+    },
+    {
+      "token": "spacing-50",
+      "context": "Spacing (horizontal, compact)"
+    }
+  ]
+}

package/components/alert-banner.json

@@ -0,0 +1,111 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/alert-banner.json",
+  "specVersion": "1.0.0-draft",
+  "name": "alert-banner",
+  "displayName": "Alert banner",
+  "description": "Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/alert-banner/"
+  },
+  "options": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["neutral", "informative", "negative", "accent"],
+      "default": "neutral"
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "isDismissible": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon asset"
+    },
+    {
+      "token": "alert-banner-minimum-height",
+      "context": "Height"
+    },
+    {
+      "token": "alert-banner-width",
+      "context": "Width"
+    },
+    {
+      "token": "text-to-visual-300",
+      "context": "Spacing (icon to text)"
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (start edge to text and icon)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (close button to end edge)"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (close button to end edge)"
+    },
+    {
+      "token": "alert-banner-top-to-workflow-icon",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "alert-banner-top-to-text",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "alert-banner-bottom-to-text",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "neutral-subdued-background-color-default",
+      "context": "Background"
+    },
+    {
+      "token": "informative-background-color-default",
+      "context": "Background"
+    },
+    {
+      "token": "negative-background-color-default",
+      "context": "Background"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Text"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Text"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Text"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Text"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Text"
+    }
+  ]
+}

package/components/alert-dialog.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/alert-dialog.json",
+  "specVersion": "1.0.0-draft",
+  "name": "alert-dialog",
+  "displayName": "Alert dialog",
+  "description": "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/alert-dialog/"
+  },
+  "options": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": [
+        "confirmation",
+        "information",
+        "warning",
+        "destructive",
+        "error"
+      ],
+      "default": "confirmation"
+    },
+    "primaryActionLabel": {
+      "type": "string"
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "cancelActionLabel": {
+      "type": "string",
+      "default": "cancel",
+      "description": "If undefined, this button does not appear."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "heading-sans-serif-font-family",
+      "context": "Title"
+    },
+    {
+      "token": "heading-sans-serif-font-weight",
+      "context": "Title"
+    },
+    {
+      "token": "heading-sans-serif-font-style",
+      "context": "Title"
+    },
+    {
+      "token": "alert-dialog-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "heading-line-height",
+      "context": "Title"
+    },
+    {
+      "token": "heading-color",
+      "context": "Title"
+    },
+    {
+      "token": "body-sans-serif-font-family",
+      "context": "Description"
+    },
+    {
+      "token": "body-sans-serif-font-weight",
+      "context": "Description"
+    },
+    {
+      "token": "body-sans-serif-font-style",
+      "context": "Description"
+    },
+    {
+      "token": "alert-dialog-body-font-size",
+      "context": "Description"
+    },
+    {
+      "token": "line-height-200",
+      "context": "Description"
+    },
+    {
+      "token": "body-color",
+      "context": "Description"
+    },
+    {
+      "token": "alert-dialog-maximum-width",
+      "context": "Maximum width"
+    },
+    {
+      "token": "alert-dialog-minimum-width",
+      "context": "Minimum width"
+    },
+    {
+      "token": "corner-radius-extra-large-default",
+      "context": "Rounding"
+    },
+    {
+      "token": "spacing-500",
+      "context": "Spacing (edge to content)"
+    },
+    {
+      "token": "spacing-400",
+      "context": "Spacing (edge to content)"
+    },
+    {
+      "token": "alert-dialog-top-to-alert-icon",
+      "context": "Icon asset (error and warning variants)"
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (title to description)"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon (error and warning variants)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Minimum spacing (title to icon)"
+    },
+    {
+      "token": "background-color-layer2",
+      "context": "Background"
+    },
+    {
+      "token": "overlay-color",
+      "context": "Overlay"
+    },
+    {
+      "token": "overlay-opacity",
+      "context": "Overlay"
+    },
+    {
+      "token": "notice-visual-color",
+      "context": "Icon (warning variant)"
+    },
+    {
+      "token": "negative-visual-color",
+      "context": "Icon (error variant)"
+    }
+  ]
+}

package/components/avatar-group.json

@@ -0,0 +1,140 @@
+{
+  "$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-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "avatar-group",
+  "displayName": "Avatar group",
+  "description": "Avatar groups display a collection of avatars representing people or entities.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/avatar-group/"
+  },
+  "options": {
+    "label": {
+      "type": "string",
+      "description": "Optional text label displayed with the avatar group (e.g., group name)."
+    },
+    "size": {
+      "type": "number",
+      "enum": [50, 75, 100, 200, 300, 400, 500],
+      "default": 100
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "avatar-group-size-50",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-75",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-100",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-200",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-300",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-400",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-500",
+      "context": "Size"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (avatar group to label)"
+    },
+    {
+      "token": "avatar-to-avatar-50",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-75",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-100",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-200",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-300",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-400",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-500",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Layout"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Layout"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-50",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-400",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-500",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-600",
+      "context": "Layout"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Layout"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Layout"
+    }
+  ]
+}

package/components/avatar.json

@@ -0,0 +1,184 @@
+{
+  "$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",
+      "enum": [
+        50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
+        1300, 1400, 1500
+      ],
+      "default": 500
+    },
+    "image": {
+      "type": "string",
+      "enum": [
+        "user image",
+        "gradient image",
+        "gradient",
+        "guest image",
+        "initials"
+      ],
+      "default": "user image"
+    },
+    "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)"
+    }
+  ]
+}