@adobe/spectrum-design-data 0.0.1 → 0.2.0

package/components/coach-mark.json

@@ -0,0 +1,169 @@
+{
+  "$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

@@ -0,0 +1,44 @@
+{
+  "$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

@@ -0,0 +1,138 @@
+{
+  "$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

@@ -0,0 +1,111 @@
+{
+  "$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

@@ -0,0 +1,77 @@
+{
+  "$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

@@ -0,0 +1,165 @@
+{
+  "$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"
+      }
+    ]
+  }
+}