@adobe/design-data-spec 0.3.0 → 0.5.0

package/components/code.json

@@ -0,0 +1,25 @@
+{
+  "$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",
+      "enum": ["xs", "s", "m", "l", "xl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/color-area.json

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

package/components/color-handle.json

@@ -0,0 +1,85 @@
+{
+  "$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",
+      "enum": [
+        "hue",
+        "saturation",
+        "lightness",
+        "red",
+        "green",
+        "blue",
+        "alpha"
+      ],
+      "default": "hue",
+      "description": "Which channel of the color this handle controls. Use 'alpha' for opacity."
+    },
+    "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)"
+    }
+  ]
+}

package/components/color-loupe.json

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

package/components/color-slider.json

@@ -0,0 +1,121 @@
+{
+  "$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",
+      "enum": [
+        "hue",
+        "saturation",
+        "lightness",
+        "red",
+        "green",
+        "blue",
+        "alpha"
+      ],
+      "default": "hue",
+      "description": "Which channel of the color this slider controls. Use 'alpha' for opacity."
+    },
+    "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",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    },
+    "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"
+    }
+  ]
+}

package/components/color-wheel.json

@@ -0,0 +1,94 @@
+{
+  "$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-wheel.json",
+  "specVersion": "1.0.0-draft",
+  "name": "color-wheel",
+  "displayName": "Color wheel",
+  "description": "A color wheel lets users visually change an individual channel of a color on a circular track.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/color-wheel/"
+  },
+  "options": {
+    "background": {
+      "type": "string",
+      "description": "This will vary depending on implementation."
+    },
+    "value": {
+      "type": "number",
+      "description": "Number (from minValue to maxValue)"
+    },
+    "minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "maxValue": {
+      "type": "number",
+      "default": 360
+    },
+    "step": {
+      "type": "number",
+      "default": 1
+    },
+    "size": {
+      "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": "border-width-100",
+      "context": "Border"
+    },
+    {
+      "token": "color-wheel-width",
+      "context": "Width"
+    },
+    {
+      "token": "color-wheel-minimum-width",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "color-control-track-width",
+      "context": "Track width"
+    },
+    {
+      "token": "color-wheel-color-area-margin",
+      "context": "Margin to color area"
+    },
+    {
+      "token": "color-wheel-border-color",
+      "context": "Border"
+    },
+    {
+      "token": "color-wheel-border-opacity",
+      "context": "Border"
+    },
+    {
+      "token": "disabled-background-color",
+      "context": "Disabled"
+    }
+  ]
+}