@adobe/spectrum-design-data 2.0.0 → 2.2.0

package/components/drop-zone.json

@@ -50,7 +50,17 @@
     "size": {
       "type": "string",
       "default": "m",
-      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
     },
     "actionLabel": {
       "type": "string",
@@ -69,129 +79,24 @@
       "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": "gray-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-filled",
-      "context": "Border, background, and text area color (filled, hover)"
-    },
-    {
-      "token": "white",
-      "context": "Border, background, and text area color (filled, hover)"
-    }
-  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "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" }
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/field-label.json

@@ -56,29 +56,59 @@
     }
   ],
   "options": {
-    "label": { "type": "string" },
+    "label": {
+      "type": "string"
+    },
     "labelPosition": {
       "type": "string",
       "default": "top",
-      "values": [{ "value": "top" }, { "value": "side" }]
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "side"
+        }
+      ]
     },
     "size": {
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
     "necessityIndicator": {
       "type": "string",
       "default": "icon",
-      "values": [{ "value": "text" }, { "value": "icon" }]
+      "values": [
+        {
+          "value": "text"
+        },
+        {
+          "value": "icon"
+        }
+      ]
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
     },
-    "isRequired": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "anatomy": [
     {
@@ -86,98 +116,10 @@
       "description": "Required-field indicator."
     }
   ],
-  "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 }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
 }

package/components/help-text.json

@@ -64,11 +64,20 @@
     }
   ],
   "options": {
-    "text": { "type": "string" },
+    "text": {
+      "type": "string"
+    },
     "variant": {
       "type": "string",
       "default": "neutral",
-      "values": [{ "value": "neutral" }, { "value": "negative" }]
+      "values": [
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "negative"
+        }
+      ]
     },
     "hideIcon": {
       "type": "boolean",
@@ -79,10 +88,18 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
     "isDisabled": {
@@ -91,95 +108,10 @@
       "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",
-      "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" }
-  ],
-  "accessibility": { "focusable": false }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
 }

package/components/illustrated-message.json

@@ -108,13 +108,30 @@
       "type": "string",
       "default": "m",
       "description": "Size of the illustration.",
-      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
     },
     "orientation": {
       "type": "string",
       "default": "vertical",
       "description": "Orientation of the illustrated message.",
-      "values": [{ "value": "vertical" }, { "value": "horizontal" }]
+      "values": [
+        {
+          "value": "vertical"
+        },
+        {
+          "value": "horizontal"
+        }
+      ]
     },
     "title": {
       "type": "string",
@@ -133,76 +150,10 @@
       "description": "Label for the secondary action button. If undefined, no secondary action is shown."
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    {
-      "token": "illustrated-message-vertical-maximum-width",
-      "context": "Maximum width (Vertical variant)"
-    },
-    {
-      "token": "illustrated-message-horizontal-maximum-width",
-      "context": "Maximum width (Horizontal variant)"
-    },
-    { "token": "spacing-200", "context": "Spacing (Illustration to heading)" },
-    { "token": "spacing-100", "context": "Spacing (Illustration to heading)" },
-    {
-      "token": "spacing-75",
-      "context": "Spacing (Heading to description - vertical)"
-    },
-    {
-      "token": "spacing-300",
-      "context": "Spacing (Description to action - vertical)"
-    },
-    { "token": "title-sans-serif-font-family", "context": "Title" },
-    { "token": "title-sans-serif-font-weight", "context": "Title" },
-    { "token": "title-sans-serif-font-style", "context": "Title" },
-    { "token": "title-line-height", "context": "Title" },
-    {
-      "token": "illustrated-message-small-title-font-size",
-      "context": "Title"
-    },
-    {
-      "token": "illustrated-message-small-cjk-title-font-size",
-      "context": "Title"
-    },
-    {
-      "token": "illustrated-message-medium-title-font-size",
-      "context": "Title"
-    },
-    {
-      "token": "illustrated-message-medium-cjk-title-font-size",
-      "context": "Title"
-    },
-    {
-      "token": "illustrated-message-large-title-font-size",
-      "context": "Title"
-    },
-    {
-      "token": "illustrated-message-large-cjk-title-font-size",
-      "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": "line-height-200", "context": "Description" },
-    {
-      "token": "illustrated-message-small-body-font-size",
-      "context": "Description"
-    },
-    {
-      "token": "illustrated-message-medium-body-font-size",
-      "context": "Description"
-    },
-    {
-      "token": "illustrated-message-large-body-font-size",
-      "context": "Description"
-    },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Illustration color"
-    },
-    { "token": "heading-color", "context": "Heading color" },
-    { "token": "body-color", "context": "Description color" }
-  ],
-  "accessibility": { "focusable": false }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
 }

package/components/in-field-progress-circle.json

@@ -43,60 +43,6 @@
   "lifecycle": {
     "introduced": "1.0.0-draft"
   },
-  "tokenBindings": [
-    {
-      "token": "in-field-progress-circle-size-75",
-      "context": "Height"
-    },
-    {
-      "token": "in-field-progress-circle-size-100",
-      "context": "Height"
-    },
-    {
-      "token": "in-field-progress-circle-size-200",
-      "context": "Height"
-    },
-    {
-      "token": "in-field-progress-circle-size-300",
-      "context": "Height"
-    },
-    {
-      "token": "gray-300",
-      "context": "Track and fill"
-    },
-    {
-      "token": "accent-content-color-default",
-      "context": "Track and fill"
-    },
-    {
-      "token": "transparent-white-300",
-      "context": "Track and fill (static white)"
-    },
-    {
-      "token": "transparent-white-900",
-      "context": "Track and fill (static white)"
-    },
-    {
-      "token": "transparent-black-300",
-      "context": "Track and fill (static black)"
-    },
-    {
-      "token": "transparent-black-900",
-      "context": "Track and fill (static black)"
-    },
-    {
-      "token": "progress-circle-thickness-small",
-      "context": "S1 Thickness"
-    },
-    {
-      "token": "progress-circle-thickness-medium",
-      "context": "S1 Thickness"
-    },
-    {
-      "token": "progress-circle-thickness-large",
-      "context": "S1 Thickness"
-    }
-  ],
   "accessibility": {
     "role": "progressbar",
     "focusable": false,