@adobe/design-data-spec 0.3.0 → 0.5.0

package/components/drop-zone.json

@@ -0,0 +1,211 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/drop-zone.json",
+  "specVersion": "1.0.0-draft",
+  "name": "drop-zone",
+  "displayName": "Drop zone",
+  "description": "A drop zone allows users to drag and drop files or other content into a designated area.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/drop-zone/"
+  },
+  "options": {
+    "accept": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "description": "File types that are accepted by the drop zone."
+      }
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m"
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "onDrop": {
+      "type": "string",
+      "description": "Callback function called when files are dropped onto the drop zone."
+    },
+    "onDragOver": {
+      "type": "string",
+      "description": "Callback function called when a file is dragged over the drop zone."
+    },
+    "onDragLeave": {
+      "type": "string",
+      "description": "Callback function called when a file is dragged out of the drop zone."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "drop-zone-width",
+      "context": "Component width"
+    },
+    {
+      "token": "spacing-400",
+      "context": "Padding"
+    },
+    {
+      "token": "drop-zone-content-maximum-width",
+      "context": "Content width (maximum)"
+    },
+    {
+      "token": "border-width-200",
+      "context": "Border width and corner radius"
+    },
+    {
+      "token": "corner-radius-700",
+      "context": "Border width and corner radius"
+    },
+    {
+      "token": "drop-zone-border-dash-length",
+      "context": "Border width and corner radius"
+    },
+    {
+      "token": "drop-zone-border-dash-gap",
+      "context": "Border width and corner radius"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (illustration to title area) "
+    },
+    {
+      "token": "spacing-75",
+      "context": "Spacing (title area to body area) "
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (body area to action) "
+    },
+    {
+      "token": "component-height-300",
+      "context": "Text area (filled, hover)"
+    },
+    {
+      "token": "component-edge-to-text-300",
+      "context": "Text area (filled, hover)"
+    },
+    {
+      "token": "component-top",
+      "context": "Text area (filled, hover)"
+    },
+    {
+      "token": "text-300",
+      "context": "Text area (filled, hover)"
+    },
+    {
+      "token": "component-bottom-to-text-300",
+      "context": "Text area (filled, hover)"
+    },
+    {
+      "token": "title-sans-serif-font-family",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "title-sans-serif-font-weight",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "title-sans-serif-font-style",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "drop-zone-title-font-size",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "drop-zone-cjk-title-font-size",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "title-line-height",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "body-sans-serif-font-family",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "body-sans-serif-font-weight",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "body-sans-serif-font-style",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "drop-zone-body-font-size",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "body-line-height",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "sans-serif-font-family",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "bold-font-weight",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "default-font-size",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Title area and body area"
+    },
+    {
+      "token": "grey-300",
+      "context": "Border color"
+    },
+    {
+      "token": "neutral-content-color-default",
+      "context": "Illustration color"
+    },
+    {
+      "token": "accent-content-color",
+      "context": "Illustration color"
+    },
+    {
+      "token": "heading-color",
+      "context": "Title and body color"
+    },
+    {
+      "token": "body-color",
+      "context": "Title and body color"
+    },
+    {
+      "token": "accent-visual-color",
+      "context": "Border and background color (empty, hover)"
+    },
+    {
+      "token": "drop-zone-background-color",
+      "context": "Border and background color (empty, hover)"
+    },
+    {
+      "token": "drop-zone-background-color-opacity",
+      "context": "Border and background color (empty, hover)"
+    },
+    {
+      "token": "drop-zone-background-color-opacity-indicatored",
+      "context": "Border, background, and text area color (filled, hover)"
+    },
+    {
+      "token": "white",
+      "context": "Border, background, and text area color (filled, hover)"
+    }
+  ]
+}

package/components/field-label.json

@@ -0,0 +1,189 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/field-label.json",
+  "specVersion": "1.0.0-draft",
+  "name": "field-label",
+  "displayName": "Field label",
+  "description": "Field labels give context to the information that a user needs to input. They're commonly used in forms.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/field-label/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["top", "side"],
+      "default": "top"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "component-height-75",
+      "context": "Minimum height"
+    },
+    {
+      "token": "component-height-100",
+      "context": "Minimum height"
+    },
+    {
+      "token": "component-height-200",
+      "context": "Minimum height"
+    },
+    {
+      "token": "component-height-300",
+      "context": "Minimum height"
+    },
+    {
+      "token": "field-label-text-to-asterisk-small",
+      "context": "Spacing (label to asterisk icon)"
+    },
+    {
+      "token": "field-label-text-to-asterisk-medium",
+      "context": "Spacing (label to asterisk icon)"
+    },
+    {
+      "token": "field-label-text-to-asterisk-large",
+      "context": "Spacing (label to asterisk icon)"
+    },
+    {
+      "token": "field-label-text-to-asterisk-extra-large",
+      "context": "Spacing (label to asterisk icon)"
+    },
+    {
+      "token": "field-label-top-to-asterisk-small",
+      "context": "Spacing (top edge to asterisk icon)"
+    },
+    {
+      "token": "field-label-top-to-asterisk-medium",
+      "context": "Spacing (top edge to asterisk icon)"
+    },
+    {
+      "token": "field-label-top-to-asterisk-large",
+      "context": "Spacing (top edge to asterisk icon)"
+    },
+    {
+      "token": "field-label-top-to-asterisk-extra-large",
+      "context": "Spacing (top edge to asterisk icon)"
+    },
+    {
+      "token": "component-top-to-text-75",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-top-to-text-200",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-top-to-text-300",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-75",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-100",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-200",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-300",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "asterisk-icon-size-100",
+      "context": "Asterisk UI icon asset"
+    },
+    {
+      "token": "asterisk-icon-size-200",
+      "context": "Asterisk UI icon asset"
+    },
+    {
+      "token": "asterisk-icon-size-300",
+      "context": "Asterisk UI icon asset"
+    },
+    {
+      "token": "neutral-subdued-content-color-default",
+      "context": "Label and asterisk icon"
+    },
+    {
+      "token": "disabled-content-color",
+      "context": "Label and asterisk icon (disabled)"
+    },
+    {
+      "token": "white",
+      "context": "Label and asterisk icon (white)"
+    },
+    {
+      "token": "black",
+      "context": "Label and asterisk icon (black)"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Label"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Label"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Label"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Label"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Label"
+    }
+  ]
+}

package/components/heading.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/heading.json",
+  "specVersion": "1.0.0-draft",
+  "name": "heading",
+  "displayName": "Heading",
+  "description": "Heading is a typography component used to create various levels of hierarchies between text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/heading/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "classification": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-classification.json"
+    },
+    "weight": {
+      "type": "string",
+      "enum": ["light", "default", "heavy"],
+      "default": "default"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l", "xl", "xxl", "xxxl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/help-text.json

@@ -0,0 +1,186 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/help-text.json",
+  "specVersion": "1.0.0-draft",
+  "name": "help-text",
+  "displayName": "Help text",
+  "description": "Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/help-text/"
+  },
+  "options": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["neutral", "negative"],
+      "default": "neutral"
+    },
+    "hideIcon": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if variant is negative."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Help text cannot be both disabled and negative variant."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "component-height-75",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "component-height-100",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "component-height-200",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "component-height-300",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "workflow-icon-size-75",
+      "context": "Icon size"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon size"
+    },
+    {
+      "token": "workflow-icon-size-200",
+      "context": "Icon size"
+    },
+    {
+      "token": "workflow-icon-size-300",
+      "context": "Icon size"
+    },
+    {
+      "token": "text-to-visual-75",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "text-to-visual-100",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "text-to-visual-200",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "text-to-visual-300",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-75",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-100",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-200",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-300",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-text-75",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-top-to-text-200",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-top-to-text-300",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-75",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-100",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-200",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-300",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "neutral-subdued-content-color-default",
+      "context": "Text"
+    },
+    {
+      "token": "disabled-content-color-default",
+      "context": "Text and alert icon (disabled)"
+    },
+    {
+      "token": "negative-content-color-default",
+      "context": "Text and alert icon (warning)"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Text"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Text"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Text"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Text"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Text"
+    }
+  ]
+}