@adobe/spectrum-design-data 2.0.0 → 2.1.0

package/components/accordion.json

@@ -72,21 +72,41 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "isQuiet": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
     "density": {
       "type": "string",
       "default": "regular",
       "values": [
-        { "value": "compact" },
-        { "value": "regular" },
-        { "value": "spacious" }
+        {
+          "value": "compact"
+        },
+        {
+          "value": "regular"
+        },
+        {
+          "value": "spacious"
+        }
       ]
     },
     "items": {
@@ -129,303 +149,37 @@
     }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "accordion-minimum-width", "context": "Width (default)" },
-    { "token": "field-default-width-medium", "context": "Width (default)" },
-    { "token": "field-default-width-large", "context": "Width (default)" },
-    {
-      "token": "field-default-width-extra-large",
-      "context": "Width (default)"
-    },
-    { "token": "accordion-edge-to-content-area-small", "context": "Paddings" },
-    { "token": "accordion-edge-to-content-area-medium", "context": "Paddings" },
-    { "token": "accordion-edge-to-content-area-large", "context": "Paddings" },
-    {
-      "token": "accordion-edge-to-content-area-extra-large",
-      "context": "Paddings"
-    },
-    {
-      "token": "accordion-item-to-divider",
-      "context": "Spacing (between accordion item and divider)"
-    },
-    {
-      "token": "component-height-75",
-      "context": "Spacing (top/bottom edge to label)"
-    },
-    {
-      "token": "component-height-100",
-      "context": "Spacing (top/bottom edge to label)"
-    },
-    {
-      "token": "component-height-200",
-      "context": "Spacing (top/bottom edge to label)"
-    },
-    {
-      "token": "component-height-300",
-      "context": "Spacing (top/bottom edge to label)"
-    },
-    {
-      "token": "accordion-edge-to-text",
-      "context": "Spacing (end edges to content)"
-    },
-    {
-      "token": "accordion-top-to-text-compact-small",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-small",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-spacious-small",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-compact-medium",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-medium",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-spacious-medium",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-compact-large",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-large",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-spacious-large",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-compact-extra-large",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-extra-large",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-top-to-text-spacious-extra-large",
-      "context": "Spacing (top edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-compact-small",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-small",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-spacious-small",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-compact-medium",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-medium",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-spacious-medium",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-compact-large",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-large",
-      "context": "Spacing (bottom edge to text)"
-    },
     {
-      "token": "accordion-bottom-to-text-spacious-large",
-      "context": "Spacing (bottom edge to text)"
+      "name": "hover",
+      "trigger": "interaction"
     },
     {
-      "token": "accordion-bottom-to-text-compact-extra-large",
-      "context": "Spacing (bottom edge to text)"
+      "name": "down",
+      "trigger": "interaction"
     },
     {
-      "token": "accordion-bottom-to-text-extra-large",
-      "context": "Spacing (bottom edge to text)"
-    },
-    {
-      "token": "accordion-bottom-to-text-spacious-extra-large",
-      "context": "Spacing (bottom edge to text)"
-    },
-    { "token": "accordion-focus-indicator-gap", "context": "Focus indicator" },
-    { "token": "focus-indicator-thickness", "context": "Focus indicator" },
-    { "token": "corner-radius-medium-size-small", "context": "Rounding" },
-    { "token": "corner-radius-medium-size-medium", "context": "Rounding" },
-    { "token": "corner-radius-medium-size-large", "context": "Rounding" },
-    { "token": "corner-radius-medium-size-extra-large", "context": "Rounding" },
-    {
-      "token": "field-top-to-disclosure-icon-compact-small",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-small",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-spacious-small",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-compact-medium",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-medium",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-spacious-medium",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-compact-large",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-large",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-spacious-large",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-compact-extra-large",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-extra-large",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-top-to-disclosure-icon-spacious-extra-large",
-      "context": "Spacing (top/bottom to disclosure icon)"
-    },
-    {
-      "token": "field-edge-to-disclosure-icon-75",
-      "context": "Spacing (end edge to disclosure icon)"
-    },
-    {
-      "token": "field-edge-to-disclosure-icon-100",
-      "context": "Spacing (end edge to disclosure icon)"
-    },
-    {
-      "token": "field-edge-to-disclosure-icon-200",
-      "context": "Spacing (end edge to disclosure icon)"
-    },
-    {
-      "token": "field-edge-to-disclosure-icon-300",
-      "context": "Spacing (end edge to disclosure icon)"
-    },
-    {
-      "token": "accordion-disclosure-indicator-to-text-small",
-      "context": "Spacing (disclosure icon to text)"
-    },
-    {
-      "token": "accordion-disclosure-indicator-to-text-medium",
-      "context": "Spacing (disclosure icon to text)"
-    },
-    {
-      "token": "accordion-disclosure-indicator-to-text-large",
-      "context": "Spacing (disclosure icon to text)"
-    },
-    {
-      "token": "accordion-disclosure-indicator-to-text-extra-large",
-      "context": "Spacing (disclosure icon to text)"
-    },
-    {
-      "token": "spacing-100",
-      "context": "Spacing (section title to action area)"
-    },
-    {
-      "token": "accordion-content-area-top-to-content",
-      "context": "Expanded (content area top/bottom to text)"
-    },
-    {
-      "token": "accordion-content-area-bottom-to-content",
-      "context": "Expanded (content area top/bottom to text)"
-    },
-    {
-      "token": "accordion-content-area-edge-to-content-small",
-      "context": "Expanded (content area start/end edges)"
-    },
-    {
-      "token": "accordion-content-area-edge-to-content-medium",
-      "context": "Expanded (content area start/end edges)"
-    },
-    {
-      "token": "accordion-content-area-edge-to-content-large",
-      "context": "Expanded (content area start/end edges)"
-    },
-    {
-      "token": "accordion-content-area-edge-to-content-extra-large",
-      "context": "Expanded (content area start/end edges)"
-    },
-    { "token": "background-opacity-default", "context": "Background" },
-    { "token": "background-opacity-hover", "context": "Background" },
-    { "token": "background-opacity-down", "context": "Background" },
-    { "token": "background-opacity-key-focus", "context": "Background" },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Section title and chevron"
-    },
-    {
-      "token": "neutral-content-color-hover",
-      "context": "Section title and chevron"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Section title and chevron"
-    },
-    { "token": "disabled-content-color", "context": "Disabled" },
-    { "token": "focus-indicator-color", "context": "Focus ring" },
-    { "token": "default-font-family", "context": "Value" },
-    { "token": "bold-font-weight", "context": "Value" },
-    { "token": "default-font-style", "context": "Value" },
-    { "token": "font-size-100", "context": "Value" },
-    { "token": "font-size-200", "context": "Value" },
-    { "token": "font-size-300", "context": "Value" },
-    { "token": "font-size-400", "context": "Value" },
-    { "token": "line-height-100", "context": "Value" },
-    { "token": "cjk-line-height-100", "context": "Value" },
-    { "token": "accordion-top-to-text-regular-small", "context": "S" },
-    { "token": "accordion-bottom-to-text-regular-small", "context": "S" },
-    { "token": "accordion-top-to-text-regular-medium", "context": "S" },
-    { "token": "accordion-bottom-to-text-regular-medium", "context": "S" },
-    { "token": "accordion-top-to-text-regular-large", "context": "S" },
-    { "token": "accordion-bottom-to-text-regular-large", "context": "S" },
-    { "token": "accordion-top-to-text-regular-extra-large", "context": "S" },
-    { "token": "accordion-bottom-to-text-regular-extra-large", "context": "S" }
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["expand"],
     "focusable": true,
     "keyboardIntents": ["activate", "expand", "collapse"],
     "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/action-bar.json

@@ -53,7 +53,12 @@
       "dont": "Instead of quick actions, use an action bar for both single and bulk selection patterns. An action bar is useful for when a user needs to perform actions on either a single or multiple items at the same time. It can be used on either a grid view or a table view.\n\nDon't use quick actions — a deprecated component — because it presents conflicting nested actions (for example, a whole asset card could open a detailed view). This makes targeting specific actions very difficult, especially on smaller screens or with the keyboard."
     }
   ],
-  "options": { "isEmphasized": { "type": "boolean", "default": false } },
+  "options": {
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    }
+  },
   "anatomy": [
     {
       "name": "action-group-area",
@@ -63,130 +68,22 @@
       "name": "item-counter",
       "description": "Badge showing a count of items or actions."
     },
-    { "name": "counter" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "action-bar-height", "context": "Height" },
-    { "token": "action-bar-minimum-width", "context": "Width (minimum)" },
-    { "token": "corner-radius-medium-size-extra-large", "context": "Rounding" },
-    {
-      "token": "action-bar-top-to-content-area",
-      "context": "Spacing (padding)"
-    },
-    {
-      "token": "action-bar-bottom-to-content-area",
-      "context": "Spacing (padding)"
-    },
-    {
-      "token": "action-bar-edge-to-content-area",
-      "context": "Spacing (padding)"
-    },
-    {
-      "token": "action-bar-label-to-action-group-area",
-      "context": "Spacing (label to action button group)"
-    },
-    {
-      "token": "action-bar-top-to-item-counter",
-      "context": "Spacing (counter)"
-    },
-    {
-      "token": "action-bar-close-button-to-counter",
-      "context": "Spacing (counter)"
-    },
-    { "token": "background-elevated-color", "context": "Background (default)" },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Background (emphasized)"
-    },
-    { "token": "action-bar-border-color", "context": "Border" },
-    { "token": "drop-shadow-elevated-color", "context": "Drop shadow" },
-    { "token": "drop-shadow-elevated-x", "context": "Drop shadow" },
-    { "token": "drop-shadow-elevated-y", "context": "Drop shadow" },
-    { "token": "drop-shadow-elevated-blur", "context": "Drop shadow" },
-    { "token": "action-bar-counter-font-size", "context": "Counter" },
-    { "token": "line-height-100", "context": "Counter" },
-    { "token": "cjk-line-height-100", "context": "Counter" },
-    { "token": "accent-background-color-default", "context": "Background" },
-    { "token": "accent-background-color-hover", "context": "Background" },
-    { "token": "accent-background-color-down", "context": "Background" },
-    { "token": "accent-background-color-key-focus", "context": "Background" },
-    { "token": "white", "context": "Icon and Clear icon" },
-    {
-      "token": "neutral-background-color-selected-default",
-      "context": "Background"
-    },
-    {
-      "token": "neutral-background-color-selected-hover",
-      "context": "Background"
-    },
-    {
-      "token": "neutral-background-color-selected-down",
-      "context": "Background"
-    },
-    {
-      "token": "neutral-background-color-selected-key-focus",
-      "context": "Background"
-    },
-    { "token": "gray-25", "context": "Icon and Clear icon" },
     {
-      "token": "neutral-content-color-hover",
-      "context": "Control (selected, non emphasized)"
-    },
-    {
-      "token": "neutral-content-color-down",
-      "context": "Control (selected, non emphasized)"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Control (selected, non emphasized)"
-    },
-    {
-      "token": "accent-content-color-default",
-      "context": "Control (selected, emphasized)"
-    },
-    {
-      "token": "accent-content-color-hover",
-      "context": "Control (selected, emphasized)"
-    },
-    {
-      "token": "accent-content-color-down",
-      "context": "Control (selected, emphasized)"
-    },
-    {
-      "token": "accent-content-color-key-focus",
-      "context": "Control (selected, emphasized)"
-    },
-    {
-      "token": "neutral-subdued-content-color-default",
-      "context": "Step text"
-    },
-    { "token": "neutral-subdued-content-color-hover", "context": "Step text" },
-    {
-      "token": "neutral-subdued-content-color-key-focus",
-      "context": "Step text"
-    },
-    {
-      "token": "neutral-subdued-background-color-default",
-      "context": "Step visual"
-    },
-    {
-      "token": "neutral-subdued-background-color-hover",
-      "context": "Step visual"
-    },
-    {
-      "token": "neutral-subdued-background-color-key-focus",
-      "context": "Step visual"
-    },
-    { "token": "neutral-background-color-default", "context": "Step visual" },
-    { "token": "neutral-background-color-key-focus", "context": "Step visual" },
-    { "token": "neutral-visual-color", "context": "Step visual" }
+      "name": "counter"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["trigger"],
     "focusable": false,
     "wcag": [
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }