@adobe/spectrum-design-data 0.1.0 → 0.2.0

package/components/cards.json

@@ -0,0 +1,541 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/cards.json",
+  "specVersion": "1.0.0-draft",
+  "name": "cards",
+  "displayName": "Cards",
+  "description": "Cards group related content into distinct layouts depending on context.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/cards/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "default": "asset",
+      "description": "Determines which card layout variant is used.",
+      "values": [
+        {
+          "value": "asset"
+        },
+        {
+          "value": "collection"
+        },
+        {
+          "value": "flex"
+        },
+        {
+          "value": "gallery"
+        },
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "product"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "card-minimum-width-extra-small",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "card-minimum-width-small",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "card-minimum-width-medium",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "card-minimum-width-large",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "card-minimum-width-extra-large",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "card-default-width-extra-small",
+      "context": "Width (default)"
+    },
+    {
+      "token": "card-default-width-small",
+      "context": "Width (default)"
+    },
+    {
+      "token": "card-default-width-medium",
+      "context": "Width (default)"
+    },
+    {
+      "token": "card-default-width-large",
+      "context": "Width (default)"
+    },
+    {
+      "token": "card-default-width-extra-large",
+      "context": "Width (default)"
+    },
+    {
+      "token": "card-maximum-width-extra-small",
+      "context": "Width (maximum)"
+    },
+    {
+      "token": "card-maximum-width-small",
+      "context": "Width (maximum)"
+    },
+    {
+      "token": "card-maximum-width-medium",
+      "context": "Width (maximum)"
+    },
+    {
+      "token": "card-maximum-width-large",
+      "context": "Width (maximum)"
+    },
+    {
+      "token": "card-maximum-width-extra-large",
+      "context": "Width (maximum)"
+    },
+    {
+      "token": "corner-radius-medium-default",
+      "context": "Rounding"
+    },
+    {
+      "token": "corner-radius-large-default",
+      "context": "Rounding"
+    },
+    {
+      "token": "card-edge-to-content-compact-extra-small",
+      "context": "Spacing (top/side/bottom edge to content, extra small)"
+    },
+    {
+      "token": "card-edge-to-content-default-extra-small",
+      "context": "Spacing (top/side/bottom edge to content, extra small)"
+    },
+    {
+      "token": "card-edge-to-content-spacious-extra-small",
+      "context": "Spacing (top/side/bottom edge to content, extra small)"
+    },
+    {
+      "token": "card-edge-to-content-compact-small",
+      "context": "Spacing (top/side/bottom edge to content, small)"
+    },
+    {
+      "token": "card-edge-to-content-default-small",
+      "context": "Spacing (top/side/bottom edge to content, small)"
+    },
+    {
+      "token": "card-edge-to-content-spacious-small",
+      "context": "Spacing (top/side/bottom edge to content, small)"
+    },
+    {
+      "token": "card-edge-to-content-compact-medium",
+      "context": "Spacing (top/side/bottom edge to content, medium)"
+    },
+    {
+      "token": "card-edge-to-content-default-medium",
+      "context": "Spacing (top/side/bottom edge to content, medium)"
+    },
+    {
+      "token": "card-edge-to-content-spacious-medium",
+      "context": "Spacing (top/side/bottom edge to content, medium)"
+    },
+    {
+      "token": "card-edge-to-content-compact-large",
+      "context": "Spacing (top/side/bottom edge to content, large)"
+    },
+    {
+      "token": "card-edge-to-content-default-large",
+      "context": "Spacing (top/side/bottom edge to content, large)"
+    },
+    {
+      "token": "card-edge-to-content-spacious-large",
+      "context": "Spacing (top/side/bottom edge to content, large)"
+    },
+    {
+      "token": "card-edge-to-content-compact-extra-large",
+      "context": "Spacing (top/side/bottom edge to content, extra large)"
+    },
+    {
+      "token": "card-edge-to-content-default-extra-large",
+      "context": "Spacing (top/side/bottom edge to content, extra large)"
+    },
+    {
+      "token": "card-edge-to-content-spacious-extra-large",
+      "context": "Spacing (top/side/bottom edge to content, extra large)"
+    },
+    {
+      "token": "border-width-200",
+      "context": "Border"
+    },
+    {
+      "token": "focus-indicator-thickness",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "focus-indicator-gap",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "background-layer-2-color",
+      "context": "Background"
+    },
+    {
+      "token": "background-layer-1-color",
+      "context": "Background"
+    },
+    {
+      "token": "card-background-well-color",
+      "context": "Well"
+    },
+    {
+      "token": "gray-100",
+      "context": "Border"
+    },
+    {
+      "token": "gray-200",
+      "context": "Border"
+    },
+    {
+      "token": "neutral-subdued-content-color-selected",
+      "context": "Border"
+    },
+    {
+      "token": "focus-indicator-color",
+      "context": "Focus ring"
+    },
+    {
+      "token": "disabled-background-color",
+      "context": "Disabled"
+    },
+    {
+      "token": "opacity-disabled",
+      "context": "Disabled"
+    },
+    {
+      "token": "card-background-color-loading",
+      "context": "Loading"
+    },
+    {
+      "token": "card-minimum-height-extra-small",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "card-minimum-height-small",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "card-minimum-height-medium",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "card-minimum-height-large",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "card-minimum-height-extra-large",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "card-selection-background-size-small",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-size-medium",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-size-large",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-size-extra",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-corner-radius-small",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-corner-radius-medium",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-corner-radius-large",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-corner-radius-extra-large",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "card-selection-background-color",
+      "context": "Selection checkbox "
+    },
+    {
+      "token": "text-to-visual-100",
+      "context": "Spacing (title to action button)"
+    },
+    {
+      "token": "card-header-to-description",
+      "context": "Spacing (header to description)"
+    },
+    {
+      "token": "border-width-400",
+      "context": "Border"
+    },
+    {
+      "token": "title-color",
+      "context": "Value"
+    },
+    {
+      "token": "body-color",
+      "context": "Value"
+    },
+    {
+      "token": "neutral-content-color-default",
+      "context": "Value"
+    },
+    {
+      "token": "disabled-content-color",
+      "context": "Disabled"
+    },
+    {
+      "token": "title-sans-serif-font-family",
+      "context": "Title"
+    },
+    {
+      "token": "title-sans-serif-font-weight",
+      "context": "Title"
+    },
+    {
+      "token": "title-serif-font-style",
+      "context": "Title"
+    },
+    {
+      "token": "font-size-50",
+      "context": "Title"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Title"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Title"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Title"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Title"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Title"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "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": "collection-card-minimum-height-extra-small",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "collection-card-minimum-height-small",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "collection-card-minimum-height-medium",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "collection-card-minimum-height-large",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "collection-card-minimum-height-extra-large",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "collection-card-hero-minimum-height-extra-small",
+      "context": "Height (minimum), hero image variant"
+    },
+    {
+      "token": "collection-card-hero-minimum-height-small",
+      "context": "Height (minimum), hero image variant"
+    },
+    {
+      "token": "collection-card-hero-minimum-height-medium",
+      "context": "Height (minimum), hero image variant"
+    },
+    {
+      "token": "collection-card-hero-minimum-height-large",
+      "context": "Height (minimum), hero image variant"
+    },
+    {
+      "token": "collection-card-hero-minimum-height-extra-large",
+      "context": "Height (minimum), hero image variant"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (header to footer)"
+    },
+    {
+      "token": "card-header-to-footer",
+      "context": "Spacing (text to visual)"
+    },
+    {
+      "token": "card-edge-to-content-compact-extra-medium",
+      "context": "Spacing (top/side/bottom edge to content, medium)"
+    },
+    {
+      "token": "card-edge-to-content-default-extra-medium",
+      "context": "Spacing (top/side/bottom edge to content, medium)"
+    },
+    {
+      "token": "card-edge-to-content-spacious-extra-medium",
+      "context": "Spacing (top/side/bottom edge to content, medium)"
+    },
+    {
+      "token": "user-card-minimum-height-small",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "user-card-minimum-height-medium",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "user-card-minimum-height-large",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "user-carde-minimum-height-extra-large",
+      "context": "Height (minimum), default variant"
+    },
+    {
+      "token": "user-card-minimum-height-title-below-small",
+      "context": "Height (minimum), title below variant"
+    },
+    {
+      "token": "user-card-minimum-height-title-below-medium",
+      "context": "Height (minimum), title below variant"
+    },
+    {
+      "token": "user-card-minimum-height-title-below-large",
+      "context": "Height (minimum), title below variant"
+    },
+    {
+      "token": "user-card-minimum-height-title-below-extra-large",
+      "context": "Height (minimum), title below variant"
+    },
+    {
+      "token": "card-thumbnail-to-title",
+      "context": "Spacing (thumbnail to title)"
+    },
+    {
+      "token": "card-title-to-description",
+      "context": "Spacing (title to description)"
+    },
+    {
+      "token": "card-description-to-footer",
+      "context": "Spacing (description to footer)"
+    },
+    {
+      "token": "thumbnail-size-100",
+      "context": "Components"
+    },
+    {
+      "token": "thumbnail-size-300",
+      "context": "Components"
+    },
+    {
+      "token": "thumbnail-size-500",
+      "context": "Components"
+    },
+    {
+      "token": "thumbnail-size-700",
+      "context": "Components"
+    },
+    {
+      "token": "thumbnail-size-900",
+      "context": "Components"
+    },
+    {
+      "token": "thumbnail-size-1000",
+      "context": "Components"
+    },
+    {
+      "token": "card-horizontal-edge-to-content-compact",
+      "context": "Spacing (top/side/bottom edge to content)"
+    },
+    {
+      "token": "card-horizontal-edge-to-content-default",
+      "context": "Spacing (top/side/bottom edge to content)"
+    },
+    {
+      "token": "card-horizontal-edge-to-content-spacious",
+      "context": "Spacing (top/side/bottom edge to content)"
+    },
+    {
+      "token": "border-width-100",
+      "context": "Stroke width (secondary, dark)"
+    },
+    {
+      "token": "horizontal-card-edge-to-content-default",
+      "context": "Spacing"
+    },
+    {
+      "token": "popover-border-color",
+      "context": "Border (Secondary, Light theme)"
+    },
+    {
+      "token": "horizontal-card-edge-to-content-compact",
+      "context": "Spacing (top/side/bottom edge to content)"
+    },
+    {
+      "token": "horizontal-card-edge-to-content-regular",
+      "context": "Spacing (top/side/bottom edge to content)"
+    },
+    {
+      "token": "horizontal-card-edge-to-content-spacious",
+      "context": "Spacing (top/side/bottom edge to content)"
+    }
+  ],
+  "accessibility": {
+    "intents": ["select"],
+    "focusable": true,
+    "keyboardIntents": ["activate"],
+    "wcag": [
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/checkbox-group.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/checkbox-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "checkbox-group",
+  "displayName": "Checkbox group",
+  "description": "A checkbox group is a grouping of checkboxes that are related to each other.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/checkbox-group/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "side"
+        }
+      ]
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "default": "icon",
+      "values": [
+        {
+          "value": "text"
+        },
+        {
+          "value": "icon"
+        }
+      ]
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "orientation": {
+      "type": "string",
+      "default": "vertical",
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "description": {
+      "type": "string"
+    },
+    "errorMessage": {
+      "type": "string"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [],
+  "accessibility": {
+    "intents": ["choose"],
+    "focusable": false,
+    "wcag": [
+      {
+        "criterion": "1.3.1",
+        "level": "A",
+        "title": "Info and Relationships"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}