@adobe/spectrum-design-data 0.0.1 → 0.2.0

package/components/badge.json

@@ -0,0 +1,594 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/badge.json",
+  "specVersion": "1.0.0-draft",
+  "name": "badge",
+  "displayName": "Badge",
+  "description": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/badge/"
+  },
+  "options": {
+    "label": {
+      "type": "string",
+      "description": "When the label is not defined, the badge appears as icon-only."
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json"
+    },
+    "variant": {
+      "type": "string",
+      "values": [
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "info"
+        },
+        {
+          "value": "positive"
+        },
+        {
+          "value": "negative"
+        },
+        {
+          "value": "indigo"
+        },
+        {
+          "value": "yellow"
+        },
+        {
+          "value": "magenta"
+        },
+        {
+          "value": "fuchsia"
+        },
+        {
+          "value": "purple"
+        },
+        {
+          "value": "seafoam"
+        },
+        {
+          "value": "accent"
+        },
+        {
+          "value": "notice"
+        },
+        {
+          "value": "gray"
+        },
+        {
+          "value": "red"
+        },
+        {
+          "value": "orange"
+        },
+        {
+          "value": "chartreuse"
+        },
+        {
+          "value": "celery"
+        },
+        {
+          "value": "green"
+        },
+        {
+          "value": "cyan"
+        },
+        {
+          "value": "blue"
+        },
+        {
+          "value": "pink"
+        },
+        {
+          "value": "turquoise"
+        },
+        {
+          "value": "brown"
+        },
+        {
+          "value": "cinnamon"
+        },
+        {
+          "value": "silver"
+        }
+      ]
+    },
+    "style": {
+      "type": "string",
+      "values": [
+        {
+          "value": "bold"
+        },
+        {
+          "value": "subtle"
+        },
+        {
+          "value": "outline"
+        }
+      ]
+    },
+    "fixed": {
+      "type": "string",
+      "default": "none",
+      "values": [
+        {
+          "value": "none"
+        },
+        {
+          "value": "top"
+        },
+        {
+          "value": "right"
+        },
+        {
+          "value": "bottom"
+        },
+        {
+          "value": "left"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "default": "s",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "component-height-75",
+      "context": "Minimum height"
+    },
+    {
+      "token": "component-height-100",
+      "context": "Minimum height"
+    },
+    {
+      "token": "component-height-200",
+      "context": "Minimum height"
+    },
+    {
+      "token": "component-height-300",
+      "context": "Minimum height"
+    },
+    {
+      "token": "corner-radius-medium-size-small",
+      "context": "Rounding"
+    },
+    {
+      "token": "corner-radius-medium-size-medium",
+      "context": "Rounding"
+    },
+    {
+      "token": "corner-radius-medium-size-large",
+      "context": "Rounding"
+    },
+    {
+      "token": "corner-radius-medium-size-extra-large",
+      "context": "Rounding"
+    },
+    {
+      "token": "workflow-icon-size-75",
+      "context": "Icon"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon"
+    },
+    {
+      "token": "workflow-icon-size-200",
+      "context": "Icon"
+    },
+    {
+      "token": "workflow-icon-size-300",
+      "context": "Icon"
+    },
+    {
+      "token": "text-to-visual-75",
+      "context": "Spacing (icon to label)"
+    },
+    {
+      "token": "text-to-visual-100",
+      "context": "Spacing (icon to label)"
+    },
+    {
+      "token": "text-to-visual-200",
+      "context": "Spacing (icon to label)"
+    },
+    {
+      "token": "text-to-visual-300",
+      "context": "Spacing (icon to label)"
+    },
+    {
+      "token": "component-edge-to-visual-75",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-visual-100",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-visual-200",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-visual-300",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-text-75",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-text-100",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-text-200",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-text-300",
+      "context": "Spacing (start/end edges)"
+    },
+    {
+      "token": "component-edge-to-visual-only-75",
+      "context": "Spacing (start/end edges, icon only)"
+    },
+    {
+      "token": "component-edge-to-visual-only-100",
+      "context": "Spacing (start/end edges, icon only)"
+    },
+    {
+      "token": "component-edge-to-visual-only-200",
+      "context": "Spacing (start/end edges, icon only)"
+    },
+    {
+      "token": "component-edge-to-visual-only-300",
+      "context": "Spacing (start/end edges, icon only)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-75",
+      "context": "Spacing (top edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-100",
+      "context": "Spacing (top edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-200",
+      "context": "Spacing (top edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-300",
+      "context": "Spacing (top edge to icon)"
+    },
+    {
+      "token": "border-width-200",
+      "context": "Border"
+    },
+    {
+      "token": "component-top-to-text-75",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-top-to-text-200",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-top-to-text-300",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-75",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-100",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-200",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-300",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "white",
+      "context": "Text and icon (semantic)"
+    },
+    {
+      "token": "black",
+      "context": "Text and icon (semantic)"
+    },
+    {
+      "token": "neutral-subdued-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "accent-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "informative-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "negative-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "notice-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "positive-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "gray-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "red-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "orange-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "yellow-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "chartreuse-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "celery-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "green-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "seafoam-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "cyan-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "blue-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "indigo-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "purple-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "fuchsia-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "magenta-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "pink-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "turquoise-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "brown-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "cinnamon-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "silver-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "gray-1000",
+      "context": "Text and icon (semantic)"
+    },
+    {
+      "token": "neutral-subtle-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "accent-subtle-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "informative-subtle-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "negative-subtle-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "notice-subtle-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "positive-subtle-background-color-default",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "gray-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "red-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "orange-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "yellow-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "chartreuse-subtle--background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "celery-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "green-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "seafoam-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "cyan-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "blue-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "indigo-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "purple-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "magenta-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "pink-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "turquoise-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "brown-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "cinnamon-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "silver-subtle-background-color-default",
+      "context": "Background (non-semantic) "
+    },
+    {
+      "token": "background-layer-2-color",
+      "context": "Background (semantic)"
+    },
+    {
+      "token": "neutral-visual-color",
+      "context": "Border (semantic)"
+    },
+    {
+      "token": "accent-visual-color",
+      "context": "Border (semantic)"
+    },
+    {
+      "token": "informative-visual-color",
+      "context": "Border (semantic)"
+    },
+    {
+      "token": "negative-visual-color",
+      "context": "Border (semantic)"
+    },
+    {
+      "token": "notice-visual-color",
+      "context": "Border (semantic)"
+    },
+    {
+      "token": "positive-visual-color",
+      "context": "Border (semantic)"
+    },
+    {
+      "token": "default-font-family"
+    },
+    {
+      "token": "medium-font-weight"
+    },
+    {
+      "token": "default-font-style"
+    },
+    {
+      "token": "font-size-75"
+    },
+    {
+      "token": "font-size-100"
+    },
+    {
+      "token": "font-size-200"
+    },
+    {
+      "token": "font-size-300"
+    },
+    {
+      "token": "line-height-100"
+    },
+    {
+      "token": "cjk-line-height-100"
+    }
+  ],
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/body.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/body.json",
+  "specVersion": "1.0.0-draft",
+  "name": "body",
+  "displayName": "Body",
+  "description": "Body is a typography component primarily used within Spectrum components and for blocks of text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/body/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "classification": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-classification.json"
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "default": "m",
+      "values": [
+        {
+          "value": "xs"
+        },
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        },
+        {
+          "value": "xxl"
+        },
+        {
+          "value": "xxxl"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
+}