@adobe/design-data-spec 0.3.0 → 0.5.0

package/components/date-picker.json

@@ -0,0 +1,439 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/date-picker.json",
+  "specVersion": "1.0.0-draft",
+  "name": "date-picker",
+  "displayName": "Date picker",
+  "description": "A date picker lets users enter a single date or a date range. It includes a calendar popover and a field.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/date-picker/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": ["single", "double", "triple"],
+      "default": "single",
+      "description": "Controls the number of months displayed in the calendar popover."
+    },
+    "selectedDate": {
+      "type": "string",
+      "description": "The currently selected date. Used when selectionMode is single."
+    },
+    "selectedRange": {
+      "type": "object",
+      "description": "The currently selected date range, used when selectionMode is range.",
+      "properties": {
+        "start": {
+          "type": "string",
+          "description": "Range start date."
+        },
+        "end": {
+          "type": "string",
+          "description": "Range end date."
+        }
+      }
+    },
+    "dateField": {
+      "type": "object",
+      "description": "Configuration for the date input field.",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Optional text label displayed with the date field."
+        },
+        "labelPosition": {
+          "type": "string",
+          "enum": ["top", "side"],
+          "default": "top"
+        },
+        "hideLabel": {
+          "type": "boolean",
+          "default": false
+        },
+        "isDisabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "isReadOnly": {
+          "type": "boolean",
+          "default": false
+        },
+        "isRequired": {
+          "type": "boolean",
+          "default": false
+        },
+        "isError": {
+          "type": "boolean",
+          "default": false,
+          "description": "If there is an error, this property overrides show valid icon."
+        },
+        "state": {
+          "type": "string",
+          "enum": [
+            "default",
+            "hover",
+            "hover (in-field button)",
+            "focus + hover",
+            "focus + open",
+            "focus + not hover",
+            "keyboard focus"
+          ],
+          "default": "default"
+        }
+      }
+    },
+    "calendarPopover": {
+      "type": "object",
+      "description": "Configuration for the calendar popover.",
+      "properties": {
+        "isDisabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "minValue": {
+          "type": "string",
+          "description": "The minimum allowed date that a user may select."
+        },
+        "maxValue": {
+          "type": "string",
+          "description": "The maximum allowed date that a user may select (ISO format string)."
+        },
+        "currentMonth": {
+          "type": "number",
+          "minimum": 1,
+          "maximum": 12,
+          "description": "The month currently displayed in the calendar (1 = January, 12 = December)."
+        },
+        "currentYear": {
+          "type": "number",
+          "description": "The year currently displayed in the calendar (Gregorian year number)."
+        },
+        "selectionMode": {
+          "type": "string",
+          "enum": ["single", "range"],
+          "default": "single",
+          "description": "Controls whether the calendar allows selecting a single date or a date range."
+        },
+        "showTimeZone": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether to show a time zone indicator in the popover."
+        },
+        "isError": {
+          "type": "boolean",
+          "default": false,
+          "description": "If the calendar popover is in an error state."
+        },
+        "timeFields": {
+          "type": "object",
+          "description": "Optional start and end time fields displayed within the calendar popover.",
+          "properties": {
+            "showStartTime": {
+              "type": "boolean",
+              "default": false,
+              "description": "If true, displays a start time field."
+            },
+            "showEndTime": {
+              "type": "boolean",
+              "default": false,
+              "description": "If true, displays an end time field."
+            },
+            "granularity": {
+              "type": "string",
+              "enum": ["hour", "minute", "second"],
+              "default": "minute",
+              "description": "The level of time granularity for the time fields."
+            },
+            "is24Hour": {
+              "type": "boolean",
+              "default": false,
+              "description": "If true, displays time in 24-hour format instead of AM/PM."
+            }
+          }
+        }
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "component-to-calendar-popover",
+      "context": "Spacing (open)"
+    },
+    {
+      "token": "single-calendar-popover-minimum-width",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "double-calendar-popover-minimum-width",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "single-calendar-popover-minimum-height",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "double-calendar-popover-minimum-height",
+      "context": "Height (minimum)"
+    },
+    {
+      "token": "corner-radius-700",
+      "context": "Corner rounding"
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (start/end edge to days) "
+    },
+    {
+      "token": "spacing-400",
+      "context": "Spacing (top/bottom edge to days) "
+    },
+    {
+      "token": "spacing-700",
+      "context": "Spacing (month + year to chevron) "
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (between week labels) "
+    },
+    {
+      "token": "current-day-indicator-size-100",
+      "context": "Current day indicator"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (between week labels and days) "
+    },
+    {
+      "token": "range-border-dash-length",
+      "context": "Range fill stroke padding"
+    },
+    {
+      "token": "range-border-dash-gap",
+      "context": "Range fill stroke padding"
+    },
+    {
+      "token": "range-border-dash-thickness",
+      "context": "Range fill stroke padding"
+    },
+    {
+      "token": "blue-900",
+      "context": "Day values "
+    },
+    {
+      "token": "white",
+      "context": "Day values "
+    },
+    {
+      "token": "blue-1000",
+      "context": "Day values "
+    },
+    {
+      "token": "focus-indicator-color",
+      "context": "Day values "
+    },
+    {
+      "token": "neutral-content-color-default",
+      "context": "Day values "
+    },
+    {
+      "token": "gray-100",
+      "context": "Day values "
+    },
+    {
+      "token": "disabled-content-color",
+      "context": "Day values "
+    },
+    {
+      "token": "negative-background-color-default",
+      "context": "Day values "
+    },
+    {
+      "token": "negative-background-color-hover",
+      "context": "Day values "
+    },
+    {
+      "token": "neutral-content-color-hover",
+      "context": "Current day"
+    },
+    {
+      "token": "strikethrough-day-thickness",
+      "context": "Strikethrough day "
+    },
+    {
+      "token": "strikethrough-day-orientation",
+      "context": "Strikethrough day "
+    },
+    {
+      "token": "blue-subtle-background-color-default",
+      "context": "Range fill color "
+    },
+    {
+      "token": "gray-25",
+      "context": "Background and border "
+    },
+    {
+      "token": "neutral-content-color-focus-hover",
+      "context": "In field button colors "
+    },
+    {
+      "token": "neutral-content-color-focus",
+      "context": "In field button colors "
+    },
+    {
+      "token": "neutral-content-color-key-focus",
+      "context": "In field button colors "
+    },
+    {
+      "token": "disabled-color-content",
+      "context": "In field button colors "
+    },
+    {
+      "token": "gray-200",
+      "context": "In field button colors "
+    },
+    {
+      "token": "background-disabled-color",
+      "context": "In field button colors "
+    },
+    {
+      "token": "disabled-background-color",
+      "context": "Disabled"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Label, value, help text, and error message"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Label, value, help text, and error message"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Label, value, help text, and error message"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Label, value, help text, and error message"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Label, value, help text, and error message"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Label, value, help text, and error message"
+    },
+    {
+      "token": "date-picker-minimum-width",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "component-height-100",
+      "context": "Height"
+    },
+    {
+      "token": "corner-radius-medium-size-medium",
+      "context": "Corner rounding "
+    },
+    {
+      "token": "component-edge-to-text-100",
+      "context": "Spacing (start edge to value) "
+    },
+    {
+      "token": "date-picker-text-to-in-field-button",
+      "context": "Spacing (value to in-field button)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "component-bottom-to-text-100",
+      "context": "Spacing (top/bottom edge to label)"
+    },
+    {
+      "token": "border-width-200",
+      "context": "Border "
+    },
+    {
+      "token": "focus-indicator-thickness",
+      "context": "Keyboard focus indicator "
+    },
+    {
+      "token": "focus-indicator-gap",
+      "context": "Keyboard focus indicator "
+    },
+    {
+      "token": "spacing-50",
+      "context": "Individual value spacing "
+    },
+    {
+      "token": "segmented-text-field-gap",
+      "context": "Spacing between values"
+    },
+    {
+      "token": "segmented-text-field-rounding",
+      "context": "Focused value rounding "
+    },
+    {
+      "token": "date-picker-visual-to-field-button",
+      "context": "Icon spacing (error)"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Alert icon size "
+    },
+    {
+      "token": "date-field-minimum-width",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "date-field-text-to-visual",
+      "context": "Spacing (value to alert icon)"
+    },
+    {
+      "token": "time-field-minimum-width",
+      "context": "Width (minimum)"
+    },
+    {
+      "token": "time-field-text-to-visual",
+      "context": "Spacing (value to alert icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-100",
+      "context": "Spacing (top/bottom edge to alert icon)"
+    },
+    {
+      "token": "date-picker-text-to-visual",
+      "context": "Spacing (value to alert icon)"
+    },
+    {
+      "token": "negative-visual-color",
+      "context": "Alert icon (error) color"
+    },
+    {
+      "token": "negative-content-color-default",
+      "context": "Error message (error) color"
+    },
+    {
+      "token": "neutral-subdued-content-color-default",
+      "context": "Help text color "
+    },
+    {
+      "token": "triple-calendar-popover-minimum-width",
+      "context": "Popover minimum width"
+    },
+    {
+      "token": "triple-calendar-popover-minimum-height",
+      "context": "Popover minimum width"
+    },
+    {
+      "token": "spacing-500",
+      "context": "Popover minimum width"
+    }
+  ]
+}

package/components/detail.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/detail.json",
+  "specVersion": "1.0.0-draft",
+  "name": "detail",
+  "displayName": "Detail",
+  "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/detail/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "weight": {
+      "type": "string",
+      "enum": ["light", "default"],
+      "default": "default"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/divider.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/divider.json",
+  "specVersion": "1.0.0-draft",
+  "name": "divider",
+  "displayName": "Divider",
+  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/divider/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "s"
+    },
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "divider-thickness-small",
+      "context": "Thickness"
+    },
+    {
+      "token": "divider-thickness-medium",
+      "context": "Thickness"
+    },
+    {
+      "token": "divider-thickness-large",
+      "context": "Thickness"
+    },
+    {
+      "token": "divider-horizontal-minimum-width",
+      "context": "Horizontal"
+    },
+    {
+      "token": "divider-vertical-minimum-height",
+      "context": "Horizontal"
+    },
+    {
+      "token": "gray-200",
+      "context": "Fill "
+    },
+    {
+      "token": "gray-800",
+      "context": "Fill "
+    },
+    {
+      "token": "transparent-white-200",
+      "context": "Fill (white)"
+    },
+    {
+      "token": "transparent-white-800",
+      "context": "Fill (white)"
+    },
+    {
+      "token": "transparent-black-200",
+      "context": "Fill (black)"
+    },
+    {
+      "token": "transparent-black-800",
+      "context": "Fill (black)"
+    }
+  ]
+}