@adobe/spectrum-design-data 2.0.0 → 2.1.0

package/components/table.json

@@ -22,7 +22,10 @@
       "type": "guideline",
       "content": "Tables come in three sizes: small, medium, and large. Size affects the overall scale, including font size and spacing. Medium is the default. Use large for high-visibility tables or when readability is critical. Use small in constrained spaces or when the table is secondary to other content."
     },
-    { "type": "guideline", "content": "If true, the table header is hidden." },
+    {
+      "type": "guideline",
+      "content": "If true, the table header is hidden."
+    },
     {
       "type": "guideline",
       "content": "Configuration for the table header row."
@@ -35,12 +38,18 @@
       "type": "guideline",
       "content": "Use a standard table when a table is the main focus of an experience. Quiet tables are for when a table is meant to be supplementary, subtle, or lightweight."
     },
-    { "type": "guideline", "content": "If true, table columns can be sorted." },
+    {
+      "type": "guideline",
+      "content": "If true, table columns can be sorted."
+    },
     {
       "type": "guideline",
       "content": "An array of column definitions for the table."
     },
-    { "type": "guideline", "content": "An array of row data for the table." },
+    {
+      "type": "guideline",
+      "content": "An array of row data for the table."
+    },
     {
       "type": "guideline",
       "content": "Column dividers help organize table content and aid users in parsing related data. You can apply dividers selectively to group related columns—for example, separating user information from action columns, or grouping metadata fields together. Use dividers sparingly to avoid visual clutter."
@@ -87,7 +96,17 @@
       "type": "string",
       "default": "m",
       "description": "Controls the density of table rows.",
-      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
     },
     "hideHeader": {
       "type": "boolean",
@@ -116,9 +135,15 @@
       "type": "string",
       "default": "regular",
       "values": [
-        { "value": "compact" },
-        { "value": "regular" },
-        { "value": "spacious" }
+        {
+          "value": "compact"
+        },
+        {
+          "value": "regular"
+        },
+        {
+          "value": "spacious"
+        }
       ]
     },
     "isQuiet": {
@@ -215,182 +240,14 @@
       "name": "header-row-checkbox",
       "description": "Select-all checkbox within the column header row."
     },
-    { "name": "section-header" }
+    {
+      "name": "section-header"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "tokenBindings": [
-    { "token": "chevron-icon-size-100", "context": "Header icons" },
-    {
-      "token": "corner-radius-medium-size-extra-small",
-      "context": "Note: desktop 6px, mobile 6px;"
-    },
-    { "token": "component-height-100", "context": "Column header row height" },
-    {
-      "token": "table-column-header-row-top-to-text-medium",
-      "context": "Spacing (column header row top/bottom to text)"
-    },
-    {
-      "token": "table-column-header-row-bottom-to-text-medium",
-      "context": "Spacing (column header row top/bottom to text)"
-    },
-    {
-      "token": "table-row-height-medium-compact",
-      "context": "Row height (minimum, compact density)"
-    },
-    {
-      "token": "table-row-height-medium",
-      "context": "Row height (minimum, regular density)"
-    },
-    {
-      "token": "table-row-height-medium-spacious",
-      "context": "Row height (minimum, spacious density)"
-    },
-    {
-      "token": "table-row-top-to-text-medium-compact",
-      "context": "Spacing (row top/bottom to text, compact density)"
-    },
-    {
-      "token": "table-row-bottom-to-text-medium-compact",
-      "context": "Spacing (row top/bottom to text, compact density)"
-    },
-    {
-      "token": "table-row-top-to-text-medium",
-      "context": "Note: desktop 11px, mobile 14px;"
-    },
-    {
-      "token": "table-row-bottom-to-text-medium",
-      "context": "Note: desktop 11px, mobile 14px;"
-    },
-    {
-      "token": "table-row-top-to-text-medium-spacious",
-      "context": "Spacing (row top/bottom to text, spacious density)"
-    },
-    {
-      "token": "table-row-bottom-to-text-medium-spacious",
-      "context": "Spacing (row top/bottom to text, spacious density)"
-    },
-    {
-      "token": "table-edge-to-content",
-      "context": "Spacing (text to start/end edge or divider)"
-    },
-    {
-      "token": "text-to-visual-300",
-      "context": "Note: desktop 8px, mobile 10px;\n\nThis applies to icon, avatar, and thumbnail."
-    },
-    {
-      "token": "table-border-divider-width",
-      "context": "Border and column divider width"
-    },
-    {
-      "token": "table-checkbox-to-text",
-      "context": "Spacing (checkbox to text)"
-    },
-    {
-      "token": "table-header-row-checkbox-to-top-medium",
-      "context": "Note: desktop 8px, mobile 11px;"
-    },
-    {
-      "token": "table-row-checkbox-to-top-medium-compact",
-      "context": "Note: desktop 8px, mobile 11px;"
-    },
-    {
-      "token": "table-row-checkbox-to-top-medium",
-      "context": "Note: desktop 12px, mobile 16px;"
-    },
-    {
-      "token": "table-row-checkbox-to-top-medium-spacious",
-      "context": "Note: desktop 16px, mobile 21px;"
-    },
-    {
-      "token": "table-section-header-row-height-medium",
-      "context": "Section header row height"
-    },
-    {
-      "token": "component-top-to-text-100",
-      "context": "Spacing (section header row top/bottom to text) "
-    },
-    {
-      "token": "component-bottom-to-text-100",
-      "context": "Spacing (section header row top/bottom to text) "
-    },
-    {
-      "token": "accent-content-color-selected",
-      "context": "Selection indicator"
-    },
-    { "token": "border-width-100", "context": "Note: 1px;" },
-    {
-      "token": "corner-radius-small-default",
-      "context": "Focus indicator (cell)"
-    },
-    { "token": "side-focus-indicator", "context": "Focus indicator (row)" },
-    { "token": "body-color", "context": "Column header and row (text)" },
-    {
-      "token": "neutral-subdued-content-color-default",
-      "context": "Row: not selected"
-    },
-    {
-      "token": "neutral-subdued-content-color-hover",
-      "context": "Row: not selected"
-    },
-    {
-      "token": "neutral-subdued-content-color-key-focus",
-      "context": "Row: not selected"
-    },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Row: selected, checkbox & highlight"
-    },
-    {
-      "token": "neutral-content-color-hover",
-      "context": "Row: selected, checkbox & highlight"
-    },
-    {
-      "token": "neutral-content-color-down",
-      "context": "Row: selected, checkbox & highlight"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Row: selected, checkbox & highlight"
-    },
-    {
-      "token": "neutral-subdued-content-color-down",
-      "context": "Sort UI icon asset"
-    },
-    {
-      "token": "gray-25",
-      "context": "Note: change applies to both desktop and mobile."
-    },
-    {
-      "token": "gray-300",
-      "context": "Column header and row (background, border and divider)"
-    },
-    {
-      "token": "gray-75",
-      "context": "Column header and row (background, border and divider)"
-    },
-    { "token": "gray-200", "context": "Summary row (background)" },
-    { "token": "gray-100", "context": "Row (disabled)" },
-    { "token": "gray-400", "context": "Row (disabled)" },
-    {
-      "token": "stack-item-background-color-hover",
-      "context": "Row (not selected, hover)"
-    },
-    {
-      "token": "stack-item-selected-background-color-default",
-      "context": "Row (checkbox selection)"
-    },
-    {
-      "token": "stack-item-selected-background-color-hover",
-      "context": "Row (checkbox selection, hover)"
-    },
-    {
-      "token": "stack-item-selected-background-color-down",
-      "context": "Row (checkbox selection, down)"
-    },
-    {
-      "token": "stack-item-selected-background-color-key-focus",
-      "context": "Row (checkbox selection, keyboard focus)"
-    },
     {
       "token": "table-selected-row-background-color-highlight",
       "context": "Selected row background (highlight selection)"
@@ -403,41 +260,9 @@
       "token": "table-selected-row-background-opacity-highlight-hover",
       "context": "Selected row background (highlight selection, hover)"
     },
-    { "token": "focus-indicator-color", "context": "Focus indicator (cell)" },
-    { "token": "default-font-family", "context": "Column header and row" },
-    { "token": "bold-font-weight", "context": "Column header and row" },
-    { "token": "default-font-style", "context": "Column header and row" },
-    { "token": "font-size-100", "context": "Column header and row" },
-    { "token": "line-height-100", "context": "Column header and row" },
-    { "token": "cjk-line-height-100", "context": "Column header and row" },
-    { "token": "regular-font-weight", "context": "Column header and row" },
-    {
-      "token": "table-row-hover-color",
-      "context": "S1 Row (not selected, hover)"
-    },
-    {
-      "token": "table-row-hover-opacity",
-      "context": "S1 Row (not selected, hover)"
-    },
-    {
-      "token": "table-row-down-opacity",
-      "context": "S1 Row (checkbox selection, down)"
-    },
     {
       "token": "table-selected-row-background-opacity-hover-highlight",
       "context": "S2 Selected row background (highlight selection, hover)"
-    },
-    {
-      "token": "table-selected-row-background-color",
-      "context": "S1 Selected row background (highlight selection)"
-    },
-    {
-      "token": "table-selected-row-background-opacity",
-      "context": "S1 Selected row background (highlight selection)"
-    },
-    {
-      "token": "table-selected-row-background-opacity-hover",
-      "context": "S1 Selected row background (highlight selection, hover)"
     }
   ],
   "accessibility": {
@@ -446,9 +271,21 @@
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate", "select-all"],
     "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" }
+      {
+        "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/tabs.json

@@ -63,7 +63,14 @@
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
     },
     "items": {
       "type": "array",
@@ -102,13 +109,18 @@
             "default": false,
             "description": "This overrides density and is only applicable to horizontal tabs."
           },
-          "isEmphasized": { "type": "boolean", "default": false },
+          "isEmphasized": {
+            "type": "boolean",
+            "default": false
+          },
           "alignment": {
             "type": "string",
             "enum": ["start", "center"],
             "default": "start"
           },
-          "selectedItem": { "description": "(list of available items)" },
+          "selectedItem": {
+            "description": "(list of available items)"
+          },
           "keyboardActivation": {
             "type": "string",
             "enum": ["manual", "automatic"],
@@ -118,101 +130,34 @@
       }
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "tokenBindings": [
-    { "token": "tab-item-compact-height-medium", "context": "Height " },
-    { "token": "tab-item-height-medium", "context": "Regular density " },
-    { "token": "corner-radius-0", "context": "Corner radius" },
-    { "token": "workflow-icon-size-100", "context": "Icon " },
-    { "token": "text-to-visual-100", "context": "Spacing (icon to label)" },
-    {
-      "token": "tab-item-top-to-workflow-icon-compact-medium",
-      "context": "Spacing (top/bottom to edge, workflow icon only)"
-    },
-    {
-      "token": "tab-item-top-to-workflow-icon-medium",
-      "context": "Spacing (top/bottom to edge, workflow icon only)"
-    },
-    { "token": "spacing-100", "context": "Spacing (edge to edge)" },
-    {
-      "token": "tab-item-top-to-text-compact-medium",
-      "context": "Spacing (top edge to label)"
-    },
-    {
-      "token": "tab-item-top-to-text-medium",
-      "context": "Spacing (top edge to label)"
-    },
-    {
-      "token": "tab-item-bottom-to-text-compact-medium",
-      "context": "Spacing (bottom edge to label)"
-    },
-    {
-      "token": "tab-item-bottom-to-text-medium",
-      "context": "Spacing (bottom edge to label)"
-    },
     {
       "token": "tab-item-to-tab-item-compact-horizontal-medium",
       "context": "Spacing (between tab items, horizontal)"
     },
-    {
-      "token": "tab-item-to-tab-item-horizontal-medium",
-      "context": "Spacing (between tab items, horizontal)"
-    },
-    { "token": "focus-indicator-thickness", "context": "Focus ring" },
-    { "token": "focus-indicator-gap", "context": "Focus ring" },
     {
       "token": "tab-selection-indicator-thickness",
       "context": "Selection indicator (underline)"
-    },
-    { "token": "spacing-75", "context": "Spacing (selected) " },
-    { "token": "spacing-200", "context": "Spacing (selected) " },
-    {
-      "token": "spacing-50",
-      "context": "Spacing (selected with keyboard focus) "
-    },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Tab items and selection indicator"
-    },
-    {
-      "token": "neutral-content-color-hover",
-      "context": "Tab items and selection indicator"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Tab items and selection indicator"
-    },
-    {
-      "token": "neutral-subdued-content-color-default",
-      "context": "Tab items and selection indicator"
-    },
-    {
-      "token": "neutral-subdued-content-color-hover",
-      "context": "Tab items and selection indicator"
-    },
-    {
-      "token": "neutral-subdued-content-color-key-focus",
-      "context": "Tab items and selection indicator"
-    },
-    { "token": "disabled-border-color", "context": "Disabled" },
-    { "token": "disabled-content-color", "context": "Disabled" },
-    { "token": "focus-indicator-color", "context": "Focus ring" },
-    { "token": "default-font-family" },
-    { "token": "default-font-style" },
-    { "token": "regular-font-weight" },
-    { "token": "font-size-75" },
-    { "token": "font-size-100" },
-    { "token": "font-size-200" },
-    { "token": "font-size-300" },
-    { "token": "line-height-100" }
+    }
   ],
   "accessibility": {
     "intents": ["navigate"],
     "focusable": true,
     "keyboardIntents": ["navigate-items"],
     "wcag": [
-      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/tag-field.json

@@ -67,113 +67,81 @@
     "size": {
       "type": "string",
       "default": "m",
-      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
     },
     "style": {
       "type": "string",
       "default": "keyword",
       "values": [
-        { "value": "keyword" },
-        { "value": "icon" },
-        { "value": "thumbnail" },
-        { "value": "avatar" }
+        {
+          "value": "keyword"
+        },
+        {
+          "value": "icon"
+        },
+        {
+          "value": "thumbnail"
+        },
+        {
+          "value": "avatar"
+        }
       ]
     },
-    "isDisabled": { "type": "boolean", "default": false },
-    "hideLabel": { "type": "boolean", "default": false }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "focus-+-hover", "trigger": "prop" },
-    { "name": "focus-+-not-hover", "trigger": "prop" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
-  ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
-  "tokenBindings": [
-    { "token": "tag-field-default-width-small", "context": "Width (default)" },
-    { "token": "tag-field-default-width-medium", "context": "Width (default)" },
-    { "token": "tag-field-default-width-large", "context": "Width (default)" },
-    { "token": "tag-field-minimum-width", "context": "Width (minimum)" },
-    {
-      "token": "tag-field-minimum-height-small",
-      "context": "Height (minimum)"
-    },
-    {
-      "token": "tag-field-minimum-height-medium",
-      "context": "Height (minimum)"
-    },
-    {
-      "token": "tag-field-minimum-height-large",
-      "context": "Height (minimum)"
-    },
-    { "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": "border-width-200", "context": "Border" },
-    { "token": "focus-indicator-thickness", "context": "Focus indicator" },
-    { "token": "workflow-icon-size-75", "context": "Alert icon" },
-    { "token": "workflow-icon-size-100", "context": "Alert icon" },
-    { "token": "workflow-icon-size-200", "context": "Alert icon" },
-    {
-      "token": "field-edge-to-alert-icon-small",
-      "context": "Spacing (top/bottom edge to alert icon)"
-    },
     {
-      "token": "field-edge-to-alert-icon-medium",
-      "context": "Spacing (top/bottom edge to alert icon)"
+      "name": "hover",
+      "trigger": "interaction"
     },
     {
-      "token": "field-edge-to-alert-icon-large",
-      "context": "Spacing (top/bottom edge to alert icon)"
+      "name": "focus-+-hover",
+      "trigger": "prop"
     },
     {
-      "token": "field-label-to-component",
-      "context": "Spacing (field label to tag field)"
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
     },
     {
-      "token": "tag-field-edge-to-content-small",
-      "context": "Spacing (edge to tag group)"
-    },
-    {
-      "token": "tag-field-edge-to-content-medium",
-      "context": "Spacing (edge to tag group)"
-    },
-    {
-      "token": "tag-field-edge-to-content-large",
-      "context": "Spacing (edge to tag group)"
-    },
-    {
-      "token": "help-text-to-component",
-      "context": "Spacing (tag field to help text)"
-    },
-    {
-      "token": "spacing-200",
-      "context": "Spacing (minimum, field label to field)"
-    },
-    { "token": "gray-25", "context": "Background and border" },
-    { "token": "gray-300", "context": "Background and border" },
-    { "token": "gray-400", "context": "Background and border" },
-    { "token": "gray-900", "context": "Background and border" },
-    { "token": "gray-800", "context": "Background and border" },
-    { "token": "negative-border-color-default", "context": "Border (error)" },
-    { "token": "negative-border-color-hover", "context": "Border (error)" },
-    {
-      "token": "negative-border-color-focus-hover",
-      "context": "Border (error)"
-    },
-    { "token": "negative-border-color-focus", "context": "Border (error)" },
-    { "token": "negative-border-color-key-focus", "context": "Border (error)" },
-    { "token": "negative-visual-color", "context": "Alert icon" },
-    { "token": "disabled-border-color", "context": "Disabled" },
-    { "token": "focus-indicator-color", "context": "Focus ring" }
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["input", "select"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate"],
     "wcag": [
-      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "1.3.1",
+        "level": "A",
+        "title": "Info and Relationships"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }