@adobe/design-data-spec 1.5.0 → 2.0.0

package/components/coach-mark.json

@@ -1,169 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/coach-mark.json",
-  "specVersion": "1.0.0-draft",
-  "name": "coach-mark",
-  "displayName": "Coach mark",
-  "description": "Coach marks provide contextual guidance to users by highlighting specific interface elements.",
-  "meta": {
-    "category": "feedback",
-    "documentationUrl": "https://spectrum.adobe.com/page/coach-mark/"
-  },
-  "options": {
-    "title": {
-      "type": "string"
-    },
-    "description": {
-      "type": "string"
-    },
-    "hideImage": {
-      "type": "boolean",
-      "default": false,
-      "description": "Optional image to display in dialog."
-    },
-    "actions": {
-      "type": "object",
-      "description": "Configuration for coach mark actions.",
-      "properties": {
-        "topActionLabel": {
-          "type": "string",
-          "description": "Optional action button displayed at the top, often for a menu."
-        },
-        "footerContent": {
-          "type": "string",
-          "description": "Optional footer content to display in the dialog footer like a checkbox."
-        },
-        "primaryActionLabel": {
-          "type": "string",
-          "description": "Label for the primary footer action."
-        },
-        "secondaryActionLabel": {
-          "type": "string",
-          "description": "Label for the secondary footer action (optional)."
-        },
-        "cancelActionLabel": {
-          "type": "string",
-          "default": "cancel",
-          "description": "Label for the cancel action (optional)."
-        }
-      }
-    }
-  },
-  "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)"
-    },
-    {
-      "token": "spacing-300",
-      "context": "Spacing (header to body, body to footer)"
-    },
-    {
-      "token": "coach-mark-pagination-text-to-bottom-edge",
-      "context": "Spacing (pagination to bottom)"
-    },
-    {
-      "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"
-    }
-  ],
-  "accessibility": {
-    "intents": ["dismiss"],
-    "focusable": true,
-    "keyboardIntents": ["dismiss"],
-    "wcag": [
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
-    ]
-  }
-}

package/components/code.json

@@ -1,44 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/code.json",
-  "specVersion": "1.0.0-draft",
-  "name": "code",
-  "displayName": "Code",
-  "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/code/"
-  },
-  "options": {
-    "script": {
-      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
-    },
-    "size": {
-      "type": "string",
-      "default": "m",
-      "values": [
-        {
-          "value": "xs"
-        },
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
-      ]
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "accessibility": {
-    "focusable": false
-  }
-}

package/components/color-area.json

@@ -1,138 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-area.json",
-  "specVersion": "1.0.0-draft",
-  "name": "color-area",
-  "displayName": "Color area",
-  "description": "A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.",
-  "meta": {
-    "category": "inputs",
-    "documentationUrl": "https://spectrum.adobe.com/page/color-area/"
-  },
-  "options": {
-    "background": {
-      "type": "string",
-      "description": "This will vary depending on implementation."
-    },
-    "x-value": {
-      "type": "number",
-      "description": "Number (from x-minValue to x-maxValue)"
-    },
-    "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
-    }
-  },
-  "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"
-    }
-  ],
-  "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"
-      }
-    ]
-  }
-}

package/components/color-handle.json

@@ -1,111 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-handle.json",
-  "specVersion": "1.0.0-draft",
-  "name": "color-handle",
-  "displayName": "Color handle",
-  "description": "Color handles allow users to select and adjust colors in a color picker.",
-  "meta": {
-    "category": "inputs",
-    "documentationUrl": "https://spectrum.adobe.com/page/color-handle/"
-  },
-  "options": {
-    "channel": {
-      "type": "string",
-      "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"
-        }
-      ]
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "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"
-      }
-    ]
-  }
-}

package/components/color-loupe.json

@@ -1,77 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-loupe.json",
-  "specVersion": "1.0.0-draft",
-  "name": "color-loupe",
-  "displayName": "Color loupe",
-  "description": "A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.",
-  "meta": {
-    "category": "feedback",
-    "documentationUrl": "https://spectrum.adobe.com/page/color-loupe/"
-  },
-  "options": {
-    "value": {
-      "$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
-  }
-}

package/components/color-slider.json

@@ -1,165 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-slider.json",
-  "specVersion": "1.0.0-draft",
-  "name": "color-slider",
-  "displayName": "Color slider",
-  "description": "A color slider lets users visually change an individual channel of a color.",
-  "meta": {
-    "category": "inputs",
-    "documentationUrl": "https://spectrum.adobe.com/page/color-slider/"
-  },
-  "options": {
-    "background": {
-      "type": "string",
-      "description": "This will vary depending on implementation."
-    },
-    "channel": {
-      "type": "string",
-      "default": "hue",
-      "description": "Which channel of the color this slider controls. Use 'alpha' for opacity.",
-      "values": [
-        {
-          "value": "hue"
-        },
-        {
-          "value": "saturation"
-        },
-        {
-          "value": "lightness"
-        },
-        {
-          "value": "red"
-        },
-        {
-          "value": "green"
-        },
-        {
-          "value": "blue"
-        },
-        {
-          "value": "alpha"
-        }
-      ]
-    },
-    "value": {
-      "type": "number",
-      "description": "Number (from minValue to maxValue)."
-    },
-    "minValue": {
-      "type": "number",
-      "default": 0
-    },
-    "maxValue": {
-      "type": "number",
-      "default": 100
-    },
-    "step": {
-      "type": "number",
-      "default": 1
-    },
-    "orientation": {
-      "type": "string",
-      "default": "horizontal",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
-    },
-    "length": {
-      "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-slider-length",
-      "context": "Length"
-    },
-    {
-      "token": "color-slider-minimum-length",
-      "context": "Length"
-    },
-    {
-      "token": "color-control-track-width",
-      "context": "Width"
-    },
-    {
-      "token": "color-slider-border-width",
-      "context": "Border"
-    },
-    {
-      "token": "color-slider-border-rounding",
-      "context": "Border"
-    },
-    {
-      "token": "component-top-to-text-75",
-      "context": "Spacing (field label value to track)"
-    },
-    {
-      "token": "color-slider-border-color",
-      "context": "Border"
-    },
-    {
-      "token": "color-slider-border-opacity",
-      "context": "Border"
-    },
-    {
-      "token": "disabled-content-color",
-      "context": "Disabled"
-    },
-    {
-      "token": "disabled-background-color",
-      "context": "Disabled"
-    }
-  ],
-  "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"
-      }
-    ]
-  }
-}