@adobe/design-data-spec 0.3.0 → 0.5.0

package/components/steplist.json

@@ -0,0 +1,270 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/steplist.json",
+  "specVersion": "1.0.0-draft",
+  "name": "steplist",
+  "displayName": "Steplist",
+  "description": "Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/steplist/"
+  },
+  "options": {
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of step items in the step list.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text displayed for the step item."
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether the step item is disabled."
+          },
+          "stepState": {
+            "type": "string",
+            "enum": [
+              "completed default",
+              "completed hover",
+              "current default",
+              "incomplete default"
+            ],
+            "default": "current default",
+            "description": "The current state of the step item."
+          }
+        },
+        "required": ["label", "stepState"]
+      }
+    },
+    "currentStep": {
+      "type": "string",
+      "description": "The identifier or label of the currently active step."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "steplist-step-default-width-small",
+      "context": "Width small (default)"
+    },
+    {
+      "token": "steplist-step-default-width-medium",
+      "context": "Width small (default)"
+    },
+    {
+      "token": "steplist-step-default-width-large",
+      "context": "Width small (default)"
+    },
+    {
+      "token": "steplist-step-default-width-extra-large",
+      "context": "Width small (default)"
+    },
+    {
+      "token": "steplist-step-default-height-small",
+      "context": "Height small (default)"
+    },
+    {
+      "token": "steplist-step-default-height-medium",
+      "context": "Height small (default)"
+    },
+    {
+      "token": "steplist-step-default-height-large",
+      "context": "Height small (default)"
+    },
+    {
+      "token": "steplist-step-default-height-extra-large",
+      "context": "Height small (default)"
+    },
+    {
+      "token": "steplist-step-to-track-size-small",
+      "context": "Spacing (step to track)"
+    },
+    {
+      "token": "steplist-step-to-track-size-medium",
+      "context": "Spacing (step to track)"
+    },
+    {
+      "token": "steplist-step-to-track-size-large",
+      "context": "Spacing (step to track)"
+    },
+    {
+      "token": "steplist-step-to-track-size-extra-large",
+      "context": "Spacing (step to track)"
+    },
+    {
+      "token": "steplist-bottom-to-text",
+      "context": "Text adjustment"
+    },
+    {
+      "token": "border-width-200",
+      "context": "Visual border"
+    },
+    {
+      "token": "text-to-visual-75",
+      "context": "Spacing (text to visual)"
+    },
+    {
+      "token": "text-to-visual-100",
+      "context": "Spacing (text to visual)"
+    },
+    {
+      "token": "text-to-visual-200",
+      "context": "Spacing (text to visual)"
+    },
+    {
+      "token": "text-to-visual-300",
+      "context": "Spacing (text to visual)"
+    },
+    {
+      "token": "steplist-visual-size-small",
+      "context": "Visual size"
+    },
+    {
+      "token": "steplist-visual-size-medium",
+      "context": "Visual size"
+    },
+    {
+      "token": "steplist-visual-size-large",
+      "context": "Visual size"
+    },
+    {
+      "token": "steplist-visual-size-extra-large",
+      "context": "Visual size"
+    },
+    {
+      "token": "steplist-track-thickness-thickness",
+      "context": "Steplist track thickness"
+    },
+    {
+      "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-content-color-default",
+      "context": "Step text"
+    },
+    {
+      "token": "neutral-content-color-key-focus",
+      "context": "Step text"
+    },
+    {
+      "token": "accent-content-color-default",
+      "context": "Step text"
+    },
+    {
+      "token": "accent-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"
+    },
+    {
+      "token": "accent-background-color-default",
+      "context": "Step visual"
+    },
+    {
+      "token": "accent-background-color-key-focus",
+      "context": "Step visual"
+    },
+    {
+      "token": "accent-background-color-hover",
+      "context": "Step visual"
+    },
+    {
+      "token": "gray-25",
+      "context": "Step visual text"
+    },
+    {
+      "token": "white",
+      "context": "Step visual text"
+    },
+    {
+      "token": "accent-visual-color",
+      "context": "Steplist track"
+    },
+    {
+      "token": "disabled-content-color",
+      "context": "Disabled"
+    },
+    {
+      "token": "disabled-background-color",
+      "context": "Disabled"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Label"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Label"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Label"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Label"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Label"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Label"
+    }
+  ]
+}

package/components/swatch-group.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/swatch-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "swatch-group",
+  "displayName": "Swatch group",
+  "description": "A swatch group is a grouping of swatches that are related to each other.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/swatch-group/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l"],
+      "default": "m"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["compact", "regular", "spacious"],
+      "default": "regular"
+    },
+    "enableSelection": {
+      "type": "boolean",
+      "default": false
+    },
+    "selectionMode": {
+      "type": "string",
+      "description": "Only applicable if selection is enabled.",
+      "enum": ["single", "multiple"],
+      "default": "single"
+    },
+    "allowsEmptySelection": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if selection is enabled."
+    },
+    "cornerRadius": {
+      "type": "string",
+      "enum": ["none", "full", "partial"],
+      "default": "none",
+      "description": "Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "swatch-group-spacing-spacious",
+      "context": "Spacing (spacious)"
+    },
+    {
+      "token": "swatch-group-border-color",
+      "context": "Border"
+    },
+    {
+      "token": "swatch-group-border-opacity",
+      "context": "Border"
+    }
+  ]
+}

package/components/swatch.json

@@ -0,0 +1,193 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/swatch.json",
+  "specVersion": "1.0.0-draft",
+  "name": "swatch",
+  "displayName": "Swatch",
+  "description": "A swatch shows a small sample of a fill \u2014 such as a color, gradient, texture, or material \u2014 that is intended to be applied to an object.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/swatch/"
+  },
+  "options": {
+    "preview": {
+      "type": "string",
+      "description": "This will vary depending on implementation."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l"],
+      "default": "m"
+    },
+    "shape": {
+      "type": "string",
+      "enum": ["square", "rectangle"],
+      "default": "square"
+    },
+    "cornerRounding": {
+      "type": "string",
+      "enum": ["none", "partial", "full"],
+      "default": "none",
+      "description": "Determines the corner radius of the swatch. Partial refers to corner-radius-75."
+    },
+    "isSelected": {
+      "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": "swatch-size-extra-small",
+      "context": "Size (square)"
+    },
+    {
+      "token": "swatch-size-small",
+      "context": "Size (square)"
+    },
+    {
+      "token": "swatch-size-medium",
+      "context": "Size (square)"
+    },
+    {
+      "token": "swatch-size-large",
+      "context": "Size (square)"
+    },
+    {
+      "token": "swatch-rectangle-width-multiplier",
+      "context": "Width (rectangle)"
+    },
+    {
+      "token": "corner-radius-75",
+      "context": "Rounding"
+    },
+    {
+      "token": "border-width-100",
+      "context": "Border"
+    },
+    {
+      "token": "border-width-200",
+      "context": "Border and inner border (selected)"
+    },
+    {
+      "token": "workflow-icon-size-50",
+      "context": "Disabled icon asset"
+    },
+    {
+      "token": "workflow-icon-size-75",
+      "context": "Disabled icon asset"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Disabled icon asset"
+    },
+    {
+      "token": "workflow-icon-size-200",
+      "context": "Disabled icon asset"
+    },
+    {
+      "token": "swatch-slash-thickness-extra-small",
+      "context": "Slash thickness (empty)"
+    },
+    {
+      "token": "swatch-slash-thickness-small",
+      "context": "Slash thickness (empty)"
+    },
+    {
+      "token": "swatch-slash-thickness-medium",
+      "context": "Slash thickness (empty)"
+    },
+    {
+      "token": "swatch-slash-thickness-large",
+      "context": "Slash thickness (empty)"
+    },
+    {
+      "token": "focus-indicator-thickness",
+      "context": "Focus ring"
+    },
+    {
+      "token": "focus-indicator-gap",
+      "context": "Focus ring"
+    },
+    {
+      "token": "spacing-75",
+      "context": "Spacing (Tooltip to Swatch)"
+    },
+    {
+      "token": "swatch-border-color",
+      "context": "Border"
+    },
+    {
+      "token": "swatch-border-opacity",
+      "context": "Border"
+    },
+    {
+      "token": "gray-1000",
+      "context": "Border and inner border (selected)"
+    },
+    {
+      "token": "gray-25",
+      "context": "Border and inner border (selected)"
+    },
+    {
+      "token": "swatch-disabled-icon-border-color",
+      "context": "Disabled icon"
+    },
+    {
+      "token": "swatch-disabled-icon-border-opacity",
+      "context": "Disabled icon"
+    },
+    {
+      "token": "white",
+      "context": "Disabled icon"
+    },
+    {
+      "token": "negative-visual-color",
+      "context": "Slash"
+    },
+    {
+      "token": "neutral-content-color-default",
+      "context": "Dash UI icon"
+    },
+    {
+      "token": "gray-100",
+      "context": "Add \u201cbutton\u201d background"
+    },
+    {
+      "token": "gray-200",
+      "context": "Add \u201cbutton\u201d background"
+    },
+    {
+      "token": "focus-indicator-color",
+      "context": "Focus ring"
+    },
+    {
+      "token": "spacing-50",
+      "context": "Spacing (compact)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (spacious)"
+    }
+  ]
+}