@adobe/spectrum-design-data 0.1.0 → 0.3.0

package/components/detail.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/detail.json",
+  "specVersion": "1.0.0-draft",
+  "name": "detail",
+  "displayName": "Detail",
+  "description": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/detail/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "weight": {
+      "type": "string",
+      "default": "default",
+      "values": [
+        {
+          "value": "light"
+        },
+        {
+          "value": "default"
+        }
+      ]
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/divider.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/divider.json",
+  "specVersion": "1.0.0-draft",
+  "name": "divider",
+  "displayName": "Divider",
+  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/divider/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "default": "s",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
+    },
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "divider-thickness-small",
+      "context": "Thickness"
+    },
+    {
+      "token": "divider-thickness-medium",
+      "context": "Thickness"
+    },
+    {
+      "token": "divider-thickness-large",
+      "context": "Thickness"
+    },
+    {
+      "token": "divider-horizontal-minimum-width",
+      "context": "Horizontal"
+    },
+    {
+      "token": "divider-vertical-minimum-height",
+      "context": "Horizontal"
+    },
+    {
+      "token": "gray-200",
+      "context": "Fill "
+    },
+    {
+      "token": "gray-800",
+      "context": "Fill "
+    },
+    {
+      "token": "transparent-white-200",
+      "context": "Fill (white)"
+    },
+    {
+      "token": "transparent-white-800",
+      "context": "Fill (white)"
+    },
+    {
+      "token": "transparent-black-200",
+      "context": "Fill (black)"
+    },
+    {
+      "token": "transparent-black-800",
+      "context": "Fill (black)"
+    }
+  ],
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/drop-zone.json

@@ -0,0 +1,238 @@
+{
+  "$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",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
+    },
+    "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)"
+    }
+  ],
+  "accessibility": {
+    "intents": ["input"],
+    "focusable": true,
+    "keyboardIntents": ["activate"],
+    "wcag": [
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/field-label.json

@@ -0,0 +1,219 @@
+{
+  "$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",
+      "default": "top",
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "side"
+        }
+      ]
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "default": "icon",
+      "values": [
+        {
+          "value": "text"
+        },
+        {
+          "value": "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"
+    }
+  ],
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/heading.json

@@ -0,0 +1,68 @@
+{
+  "$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",
+      "default": "default",
+      "values": [
+        {
+          "value": "light"
+        },
+        {
+          "value": "default"
+        },
+        {
+          "value": "heavy"
+        }
+      ]
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "xs"
+        },
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        },
+        {
+          "value": "xxl"
+        },
+        {
+          "value": "xxxl"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
+}