@adobe/spectrum-design-data 2.0.0 → 2.1.0

package/components/in-line-alert.json

@@ -30,7 +30,10 @@
       "type": "guideline",
       "content": "The outline style is the default for in-line alerts."
     },
-    { "type": "guideline", "content": "There are five semantic variants:" },
+    {
+      "type": "guideline",
+      "content": "There are five semantic variants:"
+    },
     {
       "type": "guideline",
       "content": "When the title of an in-line alert is too long for the available horizontal space, it wraps to form another line. The optional icon in the top-right corner stays aligned to the top."
@@ -41,12 +44,24 @@
       "type": "string",
       "default": "neutral",
       "values": [
-        { "value": "neutral" },
-        { "value": "informative" },
-        { "value": "positive" },
-        { "value": "notice" },
-        { "value": "negative" },
-        { "value": "accent" }
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "informative"
+        },
+        {
+          "value": "positive"
+        },
+        {
+          "value": "notice"
+        },
+        {
+          "value": "negative"
+        },
+        {
+          "value": "accent"
+        }
       ]
     },
     "style": {
@@ -54,9 +69,15 @@
       "default": "outline",
       "description": "The visual style of the alert.",
       "values": [
-        { "value": "bold" },
-        { "value": "subtle" },
-        { "value": "outline" }
+        {
+          "value": "bold"
+        },
+        {
+          "value": "subtle"
+        },
+        {
+          "value": "outline"
+        }
       ]
     },
     "href": {
@@ -72,129 +93,17 @@
       "description": "If undefined, this button does not appear."
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "border-width-200", "context": "Border " },
-    { "token": "corner-radius-700", "context": "Rounding" },
-    { "token": "workflow-icon-size-100", "context": "Icon" },
-    { "token": "in-line-alert-minimum-width", "context": "Minimum width" },
-    {
-      "token": "spacing-300",
-      "context": "Spacing (Top/Bottom/Start/End edge to Content)"
-    },
-    { "token": "spacing-100", "context": "Spacing (Title to Description) " },
-    {
-      "token": "spacing-200",
-      "context": "Spacing (Description to Link, Description to Button, Link to Button) "
-    },
-    { "token": "component-height-50", "context": "Minimum title area height" },
-    {
-      "token": "heading-color",
-      "context": "Title and Description (Border fill)"
-    },
-    { "token": "body-color", "context": "Title and Description (Border fill)" },
-    {
-      "token": "background-layer-2-color",
-      "context": "Background (Border fill)"
-    },
-    {
-      "token": "informative-visual-color",
-      "context": "Border and Icon (Border fill, Informative)"
-    },
-    {
-      "token": "positive-visual-color",
-      "context": "Border and Icon (Border fill, Positive)"
-    },
-    {
-      "token": "notice-visual-color",
-      "context": "Border and Icon (Border fill, Notice)"
-    },
-    {
-      "token": "negative-visual-color",
-      "context": "Border and Icon (Border fill, Negative)"
-    },
-    {
-      "token": "neutral-visual-color",
-      "context": "Border (Border fill, Neutral)"
-    },
-    {
-      "token": "informative-subtle-background-color-default",
-      "context": "Background and Icon (Subtle fill, Informative)"
-    },
-    {
-      "token": "positive-subtle-background-color-default",
-      "context": "Background and Icon (Subtle fill, Positive)"
-    },
-    {
-      "token": "notice-subtle-background-color-default",
-      "context": "Background and Icon (Subtle fill, Notice)"
-    },
-    {
-      "token": "negative-subtle-background-color-default",
-      "context": "Background and Icon (Subtle fill, Negative)"
-    },
-    {
-      "token": "neutral-subtle-background-color-default",
-      "context": "Background and Icon (Subtle fill, Neutral)"
-    },
-    { "token": "white", "context": "Title and Description (Bold fill)" },
-    {
-      "token": "black",
-      "context": "Title and Description (Bold fill, Notice)"
-    },
-    {
-      "token": "informative-background-color-default",
-      "context": "Background (Bold fill, Informative)"
-    },
-    {
-      "token": "positive-background-color-default",
-      "context": "Background (Bold fill, Positive)"
-    },
-    {
-      "token": "notice-background-color-default",
-      "context": "Background (Bold fill, Notice)"
-    },
-    {
-      "token": "negative-background-color-default",
-      "context": "Background (Bold fill, Negative)"
-    },
-    {
-      "token": "neutral-subdued-background-color-default",
-      "context": "Background (Bold fill, Neutral)"
-    },
-    {
-      "token": "heading-sans-serif-font-family",
-      "context": "Title and Description"
-    },
-    {
-      "token": "heading-sans-serif-font-weight",
-      "context": "Title and Description"
-    },
-    {
-      "token": "heading-sans-serif-font-style",
-      "context": "Title and Description"
-    },
-    { "token": "heading-size-xxs", "context": "Title and Description" },
-    { "token": "heading-line-height", "context": "Title and Description" },
-    {
-      "token": "body-sans-serif-font-family",
-      "context": "Title and Description"
-    },
-    {
-      "token": "body-sans-serif-font-weight",
-      "context": "Title and Description"
-    },
-    {
-      "token": "body-sans-serif-font-style",
-      "context": "Title and Description"
-    },
-    { "token": "body-size-s", "context": "Title and Description" },
-    { "token": "body-line-height", "context": "Title and Description" }
-  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "focusable": false,
     "wcag": [
-      { "criterion": "4.1.3", "level": "AA", "title": "Status Messages" }
+      {
+        "criterion": "4.1.3",
+        "level": "AA",
+        "title": "Status Messages"
+      }
     ]
   }
 }

package/components/link.json

@@ -63,83 +63,65 @@
     "variant": {
       "type": "string",
       "default": "primary",
-      "values": [{ "value": "primary" }, { "value": "secondary" }]
+      "values": [
+        {
+          "value": "primary"
+        },
+        {
+          "value": "secondary"
+        }
+      ]
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
     },
-    "isQuiet": { "type": "boolean", "default": false },
     "staticColor": {
       "type": "string",
       "description": "Static color must not be set for the default version of this component.",
-      "values": [{ "value": "white" }, { "value": "black" }]
+      "values": [
+        {
+          "value": "white"
+        },
+        {
+          "value": "black"
+        }
+      ]
     }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "accent-content-color-default", "context": "Text (primary)" },
-    { "token": "accent-content-color-hover", "context": "Text (primary)" },
-    { "token": "accent-content-color-down", "context": "Text (primary)" },
-    { "token": "accent-content-color-key-focus", "context": "Text (primary)" },
-    { "token": "neutral-content-color-default", "context": "Text (secondary)" },
-    { "token": "neutral-content-color-hover", "context": "Text (secondary)" },
-    { "token": "neutral-content-color-down", "context": "Text (secondary)" },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Text (secondary)"
-    },
-    { "token": "white", "context": "Text (white)" },
-    { "token": "black", "context": "Text (black)" },
-    {
-      "token": "default-font-family",
-      "context": "Standalone variant, Default style"
-    },
-    {
-      "token": "medium-font-weight",
-      "context": "Standalone variant, Default style"
-    },
-    {
-      "token": "default-font-style",
-      "context": "Standalone variant, Default style"
-    },
     {
-      "token": "font-size-100",
-      "context": "Standalone variant, Default style"
+      "name": "hover",
+      "trigger": "interaction"
     },
     {
-      "token": "line-height-100",
-      "context": "Standalone variant, Default style"
+      "name": "down",
+      "trigger": "interaction"
     },
     {
-      "token": "cjk-line-height-100",
-      "context": "Standalone variant, Default style"
-    },
-    {
-      "token": "text-underline-gap",
-      "context": "Standalone variant, Default style"
-    },
-    {
-      "token": "text-underline-thickness",
-      "context": "Standalone variant, Default style"
-    },
-    {
-      "token": "regular-font-weight",
-      "context": "Inline variant, Default style"
-    },
-    { "token": "focus-indicator-color", "context": "Focus ring" },
-    { "token": "focus-indicator-thickness", "context": "Focus ring" },
-    { "token": "focus-indicator-gap", "context": "Focus ring" }
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "link",
     "intents": ["navigate"],
     "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/list-view.json

@@ -85,9 +85,15 @@
       "default": "single",
       "description": "Defines how many items can be selected at once.",
       "values": [
-        { "value": "none" },
-        { "value": "single" },
-        { "value": "multiple" }
+        {
+          "value": "none"
+        },
+        {
+          "value": "single"
+        },
+        {
+          "value": "multiple"
+        }
       ]
     },
     "isQuiet": {
@@ -146,7 +152,10 @@
             "default": "none",
             "description": "Defines the border radius of the list view item."
           },
-          "isEmphasized": { "type": "boolean", "default": false },
+          "isEmphasized": {
+            "type": "boolean",
+            "default": false
+          },
           "state": {
             "type": "string",
             "enum": ["default", "hover", "dragged"],
@@ -176,7 +185,10 @@
       "name": "checkbox",
       "description": "Checkbox control for a list view item in checkbox selection style."
     },
-    { "name": "icon", "description": "Leading icon of a list view item." },
+    {
+      "name": "icon",
+      "description": "Leading icon of a list view item."
+    },
     {
       "name": "thumbnail",
       "description": "Thumbnail image of a list view item."
@@ -198,187 +210,30 @@
       "description": "Icon indicating a list view item navigates to a new context."
     }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "tokenBindings": [
-    { "token": "workflow-icon-size-100", "context": "Icon size" },
-    { "token": "list-view-minimum-height", "context": "Component height" },
-    { "token": "list-view-minimum-width", "context": "Component width" },
-    { "token": "corner-radius-medium-default", "context": "Item rounding" },
-    {
-      "token": "stack-item-start-edge-to-content",
-      "context": "Spacing (edge to drag handle)"
-    },
     {
       "token": "stack-item-drag-handle-to-control",
       "context": "Spacing (drag handle to checkbox, to visual, to text)"
-    },
-    {
-      "token": "visual-to-control-100",
-      "context": "Spacing (drag handle to checkbox, to visual, to text)"
-    },
-    {
-      "token": "stack-item-text-to-control",
-      "context": "Spacing (drag handle to checkbox, to visual, to text)"
-    },
-    {
-      "token": "stack-item-edge-to-control",
-      "context": "Spacing (edge to checkbox, edge to visual, edge to text)"
-    },
-    {
-      "token": "stack-item-edge-to-visual",
-      "context": "Spacing (edge to checkbox, edge to visual, edge to text)"
-    },
-    {
-      "token": "component-edge-to-text-100",
-      "context": "Spacing (edge to checkbox, edge to visual, edge to text)"
-    },
-    {
-      "token": "text-to-visual-100",
-      "context": "Spacing (content items to text)"
-    },
-    {
-      "token": "stack-item-action-to-navigation",
-      "context": "Spacing (navigation indicator to edge, actions to edge)"
-    },
-    {
-      "token": "list-view-end-edge-to-content",
-      "context": "Spacing (edge to Navigation icon)"
-    },
-    { "token": "vertical-align-items", "context": "Spacing (vertical)" },
-    {
-      "token": "stack-item-minimum-padding-vertical",
-      "context": "Spacing (vertical)"
-    },
-    {
-      "token": "label-to-description-0",
-      "context": "Spacing (navigation indicator)"
-    },
-    {
-      "token": "border-width-100",
-      "context": "Border width (selected - highlight)"
-    },
-    { "token": "focus-indicator-thickness", "context": "Focus" },
-    { "token": "focus-indicator-gap", "context": "Focus (drag handle)" },
-    { "token": "drop-shadow-dragged-x", "context": "Dragged shadow" },
-    { "token": "drop-shadow-dragged-y", "context": "Dragged shadow" },
-    { "token": "drop-shadow-dragged-blur", "context": "Dragged shadow" },
-    { "token": "drop-shadow-dragged-color", "context": "Dragged shadow" },
-    { "token": "component-height-100", "context": "Height" },
-    { "token": "stack-item-header-minimum-width", "context": "Width" },
-    {
-      "token": "component-edge-to-text-100",
-      "context": "Spacing (horizontal)"
-    },
-    { "token": "component-top-to-text-100", "context": "Spacing (vertical)" },
-    {
-      "token": "component-bottom-to-text-100",
-      "context": "Spacing (vertical)"
-    },
-    {
-      "token": "component-top-to-workflow-icon-100",
-      "context": "Spacing (vertical)"
-    },
-    {
-      "token": "stack-item-header-to-item",
-      "context": "Spacing (vertically, between list view header to list view items)"
-    },
-    {
-      "token": "stack-item-item-to-item",
-      "context": "Spacing (vertically, between list view header to list view items)"
-    },
-    { "token": "stack-item-background-color-hover", "context": "Background" },
-    { "token": "stack-item-background-color-down", "context": "Background" },
-    {
-      "token": "stack-item-background-color-key-focus",
-      "context": "Background"
-    },
-    {
-      "token": "stack-item-selected-background-color-default",
-      "context": "Background (selected, checkbox)"
-    },
-    {
-      "token": "stack-item-selected-background-color-hover",
-      "context": "Background (selected, checkbox)"
-    },
-    {
-      "token": "stack-item-selected-background-color-down",
-      "context": "Background (selected, checkbox)"
-    },
-    {
-      "token": "stack-item-selected-background-color-key-focus",
-      "context": "Background (selected, checkbox)"
-    },
-    {
-      "token": "stack-item-selected-background-color-highlight",
-      "context": "Background (selected, highlight)"
-    },
-    {
-      "token": "stack-item-selected-background-opacity-highlight-hover",
-      "context": "Background (selected, highlight)"
-    },
-    {
-      "token": "accent-content-color-selected",
-      "context": "Border (selected, highlight)"
-    },
-    { "token": "gray-300", "context": "Border" },
-    {
-      "token": "neutral-subdued-content-color-default",
-      "context": "Label and icon (non-selected)"
-    },
-    {
-      "token": "neutral-subdued-content-color-hover",
-      "context": "Label and icon (non-selected)"
-    },
-    {
-      "token": "neutral-subdued-content-color-down",
-      "context": "Label and icon (non-selected)"
-    },
-    {
-      "token": "neutral-subdued-content-color-key-focus",
-      "context": "Label and icon (non-selected)"
-    },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Label and icon (selected, checkbox and highlight)"
-    },
-    {
-      "token": "neutral-content-color-hover",
-      "context": "Label and icon (selected, checkbox and highlight)"
-    },
-    {
-      "token": "neutral-content-color-down",
-      "context": "Label and icon (selected, checkbox and highlight)"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Label and icon (selected, checkbox and highlight)"
-    },
-    {
-      "token": "disabled-background-color",
-      "context": "Background (disabled)"
-    },
-    {
-      "token": "disabled-content-color",
-      "context": "Label and icon (disabled)"
-    },
-    { "token": "focus-indicator-color", "context": "Focus indicator" },
-    { "token": "title-color", "context": "Title label and icon" },
-    { "token": "default-font-family", "context": "Text (List view item)" },
-    { "token": "regular-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)" },
-    { "token": "cjk-line-height-100", "context": "Text (List view item)" },
-    { "token": "font-size-75", "context": "Text (List view description)" },
-    { "token": "bold-font-weight", "context": "Text (List view title)" }
+    }
   ],
   "accessibility": {
     "intents": ["select", "navigate"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate", "select-all"],
     "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"
+      }
     ]
   }
 }