@adobe/spectrum-design-data 2.0.0 → 2.2.0

package/components/close-button.json

@@ -44,102 +44,73 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "iconSize": { "type": "string" },
+    "iconSize": {
+      "type": "string"
+    },
     "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"
+        }
+      ]
     },
-    "isDisabled": { "type": "boolean", "default": false }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "component-height-75", "context": "Button size" },
-    { "token": "component-height-100", "context": "Button size" },
-    { "token": "component-height-200", "context": "Button size" },
-    { "token": "component-height-300", "context": "Button size" },
-    {
-      "token": "component-size-difference-down",
-      "context": "Button size (down)"
-    },
-    {
-      "token": "component-size-width-ratio-down",
-      "context": "Button size (down)"
-    },
-    {
-      "token": "component-size-minimum-perspective-down",
-      "context": "Button size (down)"
-    },
-    { "token": "cross-icon-size-200", "context": "Cross icon size" },
-    { "token": "cross-icon-size-300", "context": "Cross icon size" },
-    { "token": "cross-icon-size-400", "context": "Cross icon size" },
-    { "token": "cross-icon-size-500", "context": "Cross icon size" },
-    { "token": "focus-indicator-thickness", "context": "Focus ring " },
-    { "token": "focus-indicator-gap", "context": "Focus ring " },
-    { "token": "neutral-content-color-default", "context": "Cross icon" },
-    { "token": "neutral-content-color-hover", "context": "Cross icon" },
-    { "token": "neutral-content-color-down", "context": "Cross icon" },
-    { "token": "neutral-content-color-key-focus", "context": "Cross icon" },
-    { "token": "disabled-content-color", "context": "Cross icon" },
-    { "token": "focus-indicator-color", "context": "Focus ring" },
-    { "token": "gray-100", "context": "Background " },
-    {
-      "token": "transparent-white-800",
-      "context": "Cross icon (static white)"
-    },
     {
-      "token": "transparent-white-900",
-      "context": "Cross icon (static white)"
+      "name": "hover",
+      "trigger": "interaction"
     },
     {
-      "token": "disabled-static-white-background-color",
-      "context": "Cross icon (static white)"
+      "name": "down",
+      "trigger": "interaction"
     },
     {
-      "token": "static-white-focus-indicator-color",
-      "context": "Focus ring (static white)"
-    },
-    {
-      "token": "transparent-white-100",
-      "context": "Background (static white)"
-    },
-    {
-      "token": "transparent-black-800",
-      "context": "Cross icon (static black) "
-    },
-    {
-      "token": "transparent-black-900",
-      "context": "Cross icon (static black) "
-    },
-    {
-      "token": "disabled-static-black-background-color",
-      "context": "Cross icon (static black) "
-    },
-    {
-      "token": "static-black-focus-indicator-color",
-      "context": "Focus ring (static black) "
-    },
-    { "token": "transparent-black-100", "context": "Background (static black)" }
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "button",
     "intents": ["dismiss"],
     "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/coach-indicator.json

@@ -55,42 +55,55 @@
     "cornerRounding": {
       "type": "string",
       "values": [
-        { "value": "none" },
-        { "value": "corner-radius-75" },
-        { "value": "corner-radius-100" },
-        { "value": "corner-radius-200" },
-        { "value": "corner-radius-300" },
-        { "value": "corner-radius-400" },
-        { "value": "corner-radius-500" },
-        { "value": "corner-radius-600" },
-        { "value": "corner-radius-700" },
-        { "value": "corner-radius-800" },
-        { "value": "full" }
+        {
+          "value": "none"
+        },
+        {
+          "value": "corner-radius-75"
+        },
+        {
+          "value": "corner-radius-100"
+        },
+        {
+          "value": "corner-radius-200"
+        },
+        {
+          "value": "corner-radius-300"
+        },
+        {
+          "value": "corner-radius-400"
+        },
+        {
+          "value": "corner-radius-500"
+        },
+        {
+          "value": "corner-radius-600"
+        },
+        {
+          "value": "corner-radius-700"
+        },
+        {
+          "value": "corner-radius-800"
+        },
+        {
+          "value": "full"
+        }
       ]
     },
     "staticColor": {
       "type": "string",
       "description": "If not set to white, the coach indicator uses the default color.",
-      "values": [{ "value": "white" }]
+      "values": [
+        {
+          "value": "white"
+        }
+      ]
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "coach-indicator-collapsed-ring-thickness", "context": "Ring" },
-    { "token": "coach-indicator-expanded-ring-thickness", "context": "Ring" },
-    { "token": "coach-indicator-collapsed-gap", "context": "Ring" },
-    { "token": "coach-indicator-expanded-gap", "context": "Ring" },
-    {
-      "token": "coach-indicator-collapsed-ring-rounding-increment",
-      "context": "Rounding"
-    },
-    {
-      "token": "coach-indicator-expanded-ring-rounding-increment",
-      "context": "Rounding"
-    },
-    { "token": "coach-indicator-color", "context": "Indicator (Default)" },
-    { "token": "coach-indicator-opacity", "context": "Indicator (Default)" },
-    { "token": "white", "context": "Indicator (Static white)" }
-  ],
-  "accessibility": { "focusable": false }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
 }

package/components/coach-mark.json

@@ -76,8 +76,12 @@
     }
   ],
   "options": {
-    "title": { "type": "string" },
-    "description": { "type": "string" },
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
     "hideImage": {
       "type": "boolean",
       "default": false,
@@ -116,60 +120,32 @@
       "name": "pagination-text",
       "description": "Text indicating step position (e.g. '2 of 5')."
     },
-    { "name": "body" },
-    { "name": "media" },
-    { "name": "pagination" },
-    { "name": "title" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "coach-mark-width", "context": "Width" },
-    { "token": "coach-mark-minimum-width", "context": "Width" },
-    { "token": "coach-mark-maximum-width", "context": "Width" },
-    {
-      "token": "coach-mark-edge-to-content",
-      "context": "Spacing (top/bottom/start/end edge to text)"
-    },
     {
-      "token": "spacing-200",
-      "context": "Spacing (header to body, body to footer)"
+      "name": "body"
     },
     {
-      "token": "spacing-300",
-      "context": "Spacing (header to body, body to footer)"
+      "name": "media"
     },
     {
-      "token": "coach-mark-pagination-text-to-bottom-edge",
-      "context": "Spacing (pagination to bottom)"
+      "name": "pagination"
     },
-    { "token": "coach-mark-media-minimum-height", "context": "Media (16:9)" },
-    { "token": "coach-mark-media-height", "context": "Media (4:3)" },
-    { "token": "spacing-100", "context": "Spacing (action button to menu)" },
-    { "token": "title-sans-serif-font-family", "context": "Title" },
-    { "token": "title-sans-serif-font-weight", "context": "Title" },
-    { "token": "title-serif-font-style", "context": "Title" },
-    { "token": "coach-mark-title-font-size", "context": "Title" },
-    { "token": "title-line-height", "context": "Title" },
-    { "token": "body-sans-serif-font-family", "context": "Body" },
-    { "token": "body-sans-serif-font-weight", "context": "Body" },
-    { "token": "body-serif-font-style", "context": "Body" },
-    { "token": "coach-mark-body-font-size", "context": "Body" },
-    { "token": "line-height-200", "context": "Body" },
-    { "token": "medium-font-weight", "context": "Pagination" },
     {
-      "token": "coach-mark-pagination-body-font-size",
-      "context": "Pagination"
-    },
-    { "token": "heading-color", "context": "Color" },
-    { "token": "body-color", "context": "Color" },
-    { "token": "coach-mark-pagination-color", "context": "Color" }
+      "name": "title"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["dismiss"],
     "focusable": true,
     "keyboardIntents": ["dismiss"],
     "wcag": [
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/color-area.json

@@ -68,45 +68,83 @@
       "type": "number",
       "description": "Number (from x-minValue to x-maxValue)"
     },
-    "x-minValue": { "type": "number", "default": 0 },
-    "x-maxValue": { "type": "number", "default": 100 },
+    "x-minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "x-maxValue": {
+      "type": "number",
+      "default": 100
+    },
     "y-value": {
       "type": "number",
       "description": "Number (from y-minValue to y-maxValue)"
     },
-    "y-minValue": { "type": "number", "default": 0 },
-    "y-maxValue": { "type": "number", "default": 100 },
-    "step": { "type": "number", "default": 1 },
-    "width": { "type": "number", "default": 192, "description": "units: px" },
-    "height": { "type": "number", "default": 192, "description": "units: px" },
-    "isDisabled": { "type": "boolean", "default": false }
+    "y-minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "y-maxValue": {
+      "type": "number",
+      "default": 100
+    },
+    "step": {
+      "type": "number",
+      "default": 1
+    },
+    "width": {
+      "type": "number",
+      "default": 192,
+      "description": "units: px"
+    },
+    "height": {
+      "type": "number",
+      "default": 192,
+      "description": "units: px"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "color-area-width", "context": "Size" },
-    { "token": "color-area-minimum-width", "context": "Size" },
-    { "token": "color-area-height", "context": "Size" },
-    { "token": "color-area-minimum-height", "context": "Size" },
-    { "token": "color-area-border-width", "context": "Color area border" },
-    { "token": "color-area-border-rounding", "context": "Color area border" },
-    { "token": "color-area-border-color", "context": "Color area border" },
-    { "token": "color-area-border-opacity", "context": "Color area border" },
-    { "token": "disabled-background-color", "context": "Disabled" }
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "slider",
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["increment", "decrement"],
     "wcag": [
-      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
-      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "1.3.1",
+        "level": "A",
+        "title": "Info and Relationships"
+      },
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/color-handle.json

@@ -33,39 +33,47 @@
       "default": "hue",
       "description": "Which channel of the color this handle controls. Use 'alpha' for opacity.",
       "values": [
-        { "value": "hue" },
-        { "value": "saturation" },
-        { "value": "lightness" },
-        { "value": "red" },
-        { "value": "green" },
-        { "value": "blue" },
-        { "value": "alpha" }
+        {
+          "value": "hue"
+        },
+        {
+          "value": "saturation"
+        },
+        {
+          "value": "lightness"
+        },
+        {
+          "value": "red"
+        },
+        {
+          "value": "green"
+        },
+        {
+          "value": "blue"
+        },
+        {
+          "value": "alpha"
+        }
       ]
     },
-    "isDisabled": { "type": "boolean", "default": false }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "color-handle-size", "context": "Size (keyboard focus)" },
-    {
-      "token": "color-handle-size-key-focus",
-      "context": "Size (keyboard focus)"
-    },
-    { "token": "color-handle-border-width", "context": "Border" },
-    { "token": "color-handle-inner-border-width", "context": "Border" },
-    { "token": "color-handle-outer-border-width", "context": "Border" },
-    { "token": "white", "context": "Border" },
-    { "token": "color-handle-inner-border-color", "context": "Border" },
-    { "token": "color-handle-inner-border-opacity", "context": "Border" },
-    { "token": "color-handle-outer-border-color", "context": "Border" },
-    { "token": "color-handle-outer-border-opacity", "context": "Border" },
-    { "token": "disabled-content-color", "context": "Border (disabled)" },
-    { "token": "disabled-background-color", "context": "Border (disabled)" }
-  ],
   "accessibility": {
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["increment", "decrement"],
-    "wcag": [{ "criterion": "2.1.1", "level": "A", "title": "Keyboard" }]
+    "wcag": [
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      }
+    ]
   }
 }

package/components/color-loupe.json

@@ -40,21 +40,10 @@
       "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/hex-color.json"
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "color-loupe-height", "context": "Size" },
-    { "token": "color-loupe-width", "context": "Size" },
-    { "token": "color-loupe-outer-border-width", "context": "Border" },
-    { "token": "color-loupe-inner-border-width", "context": "Border" },
-    { "token": "color-loupe-bottom-to-color-handle", "context": "Spacing" },
-    { "token": "drop-shadow-elevated-x", "context": "Shadows" },
-    { "token": "drop-shadow-elevated-y", "context": "Shadows" },
-    { "token": "drop-shadow-elevated-blur", "context": "Shadows" },
-    { "token": "color-loupe-outer-border", "context": "Border" },
-    { "token": "drop-shadow-x", "context": "S1 Shadows" },
-    { "token": "color-loupe-drop-shadow-y", "context": "S1 Shadows" },
-    { "token": "color-loupe-drop-shadow-blur", "context": "S1 Shadows" },
-    { "token": "color-loupe-drop-shadow-color", "context": "S1 Shadows" }
-  ],
-  "accessibility": { "focusable": false }
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
 }