diff --git a/.cursor/mcp.json b/.cursor/mcp.json index e0427a2a..e85093d5 100644 --- a/.cursor/mcp.json +++ b/.cursor/mcp.json @@ -1,30 +1,9 @@ { "mcpServers": { - "changesets Docs": { - "url": "https://gitmcp.io/changesets/changesets" - }, - "ava Docs": { - "url": "https://gitmcp.io/avajs/ava" - }, "moon": { "command": "moon", "args": ["mcp"], "cwd": "${workspaceFolder}" - }, - "handlebars.js Docs": { - "url": "https://gitmcp.io/handlebars-lang/handlebars.js" - }, - "pnpm Docs": { - "url": "https://gitmcp.io/pnpm/pnpm" - }, - "commitlint Docs": { - "url": "https://gitmcp.io/conventional-changelog/commitlint" - }, - "GitHub cli Docs": { - "url": "https://gitmcp.io/cli/cli" - }, - "nixt Docs": { - "url": "https://gitmcp.io/vesln/nixt" } } } diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index 110205a1..379cfd3d 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -44,6 +44,8 @@ jobs: with: auto-install: true - run: moon setup + - run: rm -rf site && mkdir -p site + - run: moon run markdown-generator:generate - run: moon run site:export - run: moon run visualizer:build - run: moon run s2-visualizer:build @@ -52,7 +54,6 @@ jobs: - run: moon run release-timeline:build env: GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} - - run: moon run spectrum-glossary:export - name: Setup Pages uses: actions/configure-pages@v5 - name: Upload artifact diff --git a/.lintstagedrc.js b/.lintstagedrc.js index a1e4d9b7..5867cfb1 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -1,14 +1,19 @@ export default { "**/*.{js,jsx,ts,tsx,json,yml,yaml}": ["prettier --write"], "**/*.md": (files) => { + // Filter out changeset and CHANGELOG files - they need special handling + // Skip 11ty page templates so YAML frontmatter (---) is not reformatted by remark // Filter out files that should not be processed by remark: // - changeset and CHANGELOG files - they need special handling // - docs/s2-docs files - they have custom YAML frontmatter that remark breaks + // - docs/markdown/ - generated files, regenerated by markdown-generator const processableFiles = files.filter( (file) => !file.includes(".changeset/") && !file.includes("CHANGELOG.md") && - !file.includes("docs/s2-docs/"), + !file.includes("docs/site/src/") && + !file.includes("docs/s2-docs/") && + !file.includes("docs/markdown/"), ); if (processableFiles.length === 0) return []; // Use -o flag (no path) to write back to same file diff --git a/.moon/workspace.yml b/.moon/workspace.yml index a1d203be..96678541 100644 --- a/.moon/workspace.yml +++ b/.moon/workspace.yml @@ -7,8 +7,8 @@ projects: visualizer: "docs/visualizer" s2-visualizer: "docs/s2-visualizer" site: "docs/site" - spectrum-glossary: "docs/spectrum-glossary" csvGenerator: tools/token-csv-generator + markdown-generator: "tools/markdown-generator" transform-tokens-json: "tools/transform-tokens-json" root: "." diff: "tools/diff-generator" diff --git a/docs/markdown/README.md b/docs/markdown/README.md new file mode 100644 index 00000000..d62e7450 --- /dev/null +++ b/docs/markdown/README.md @@ -0,0 +1,21 @@ +# Generated Markdown Documentation + +This directory contains auto-generated markdown files created from: + +- Design tokens (`@adobe/spectrum-tokens`) +- Component schemas (`@adobe/spectrum-component-api-schemas`) +- Design system registry (`@adobe/design-system-registry`) + +**DO NOT EDIT THESE FILES MANUALLY** + +These files are regenerated by the `markdown-generator` tool and will be overwritten. +To make changes, update the source data in the respective packages. + +## Regeneration + +Run: `moon run markdown-generator:generate` + +These files are used by: + +- The 11ty documentation site (`docs/site`) +- Internal Adobe chatbot for design system queries diff --git a/docs/markdown/components/accordion.md b/docs/markdown/components/accordion.md new file mode 100644 index 00000000..bcdcd20e --- /dev/null +++ b/docs/markdown/components/accordion.md @@ -0,0 +1,22 @@ +--- +title: Accordion +description: "An accordion is a vertically stacked set of interactive headings that each contain a title and a content area." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/accordion/ +tags: + - component + - schema + - inputs +--- + +An accordion is a vertically stacked set of interactive headings that each contain a title and a content area. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| state | string | default, hover, down, keyboard focus | default | No | - | +| size | string | s, m, l, xl | m | No | - | +| isQuiet | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| density | string | compact, regular, spacious | regular | No | - | +| items | array | - | - | No | An array of accordion items. | +| isMultiple | boolean | - | false | No | If true, multiple accordion items can be expanded at the same time. | diff --git a/docs/markdown/components/action-bar.md b/docs/markdown/components/action-bar.md new file mode 100644 index 00000000..21dba565 --- /dev/null +++ b/docs/markdown/components/action-bar.md @@ -0,0 +1,16 @@ +--- +title: Action bar +description: "Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time." +category: actions +documentationUrl: https://spectrum.adobe.com/page/action-bar/ +tags: + - component + - schema + - actions +--- + +Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| isEmphasized | boolean | - | false | No | - | diff --git a/docs/markdown/components/action-button.md b/docs/markdown/components/action-button.md new file mode 100644 index 00000000..605964ca --- /dev/null +++ b/docs/markdown/components/action-button.md @@ -0,0 +1,27 @@ +--- +title: Action button +description: "Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interface" +category: actions +documentationUrl: https://spectrum.adobe.com/page/action-button/ +tags: + - component + - schema + - actions +--- + +Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| hideLabel | boolean | - | false | No | - | +| icon | - | - | - | No | Icon must be present if the label is not defined. | +| size | string | xs, s, m, l, xl | m | No | - | +| isQuiet | boolean | - | false | No | - | +| isSelected | boolean | - | false | No | - | +| isEmphasized | boolean | - | false | No | - | +| staticColor | string | white, black | - | No | Static color must not be set for the default version of this component. | +| selectedTextColor | - | - | - | No | - | +| hasHoldIcon | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/action-group.md b/docs/markdown/components/action-group.md new file mode 100644 index 00000000..d587e44d --- /dev/null +++ b/docs/markdown/components/action-group.md @@ -0,0 +1,26 @@ +--- +title: Action group +description: "An action group is a grouping of action buttons that are related to each other." +category: actions +documentationUrl: https://spectrum.adobe.com/page/action-group/ +tags: + - component + - schema + - actions +--- + +An action group is a grouping of action buttons that are related to each other. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| orientation | string | horizontal, vertical | horizontal | No | - | +| size | string | s, m, l, xl | m | No | - | +| density | string | regular, compact | regular | No | - | +| isJustified | boolean | - | false | No | - | +| isQuiet | boolean | - | false | No | - | +| isEmphasized | boolean | - | false | No | - | +| enableSelection | boolean | - | false | No | - | +| selectionMode | string | single, multiple | single | No | Only applicable if selection is enabled | +| allowsEmptySelection | boolean | - | false | No | Only applicable if selection is enabled | +| overflowMode | string | wrap, collapse | wrap | No | - | +| isDisabled | boolean | - | false | No | - | diff --git a/docs/markdown/components/alert-banner.md b/docs/markdown/components/alert-banner.md new file mode 100644 index 00000000..3f608da5 --- /dev/null +++ b/docs/markdown/components/alert-banner.md @@ -0,0 +1,19 @@ +--- +title: Alert banner +description: "Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/alert-banner/ +tags: + - component + - schema + - feedback +--- + +Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| text | string | - | - | No | - | +| variant | string | neutral, informative, negative, accent | neutral | No | - | +| actionLabel | string | - | - | No | If undefined, this button does not appear. | +| isDismissible | boolean | - | false | No | - | diff --git a/docs/markdown/components/alert-dialog.md b/docs/markdown/components/alert-dialog.md new file mode 100644 index 00000000..e22eb93f --- /dev/null +++ b/docs/markdown/components/alert-dialog.md @@ -0,0 +1,21 @@ +--- +title: Alert dialog +description: "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is sel" +category: feedback +documentationUrl: https://spectrum.adobe.com/page/alert-dialog/ +tags: + - component + - schema + - feedback +--- + +Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| title | string | - | - | No | - | +| description | string | - | - | No | - | +| variant | string | confirmation, information, warning, destructive, error | confirmation | No | - | +| primaryActionLabel | string | - | - | No | - | +| secondaryActionLabel | string | - | - | No | If undefined, this button does not appear. | +| cancelActionLabel | string | - | cancel | No | If undefined, this button does not appear. | diff --git a/docs/markdown/components/avatar-group.md b/docs/markdown/components/avatar-group.md new file mode 100644 index 00000000..a1dc1c6e --- /dev/null +++ b/docs/markdown/components/avatar-group.md @@ -0,0 +1,17 @@ +--- +title: Avatar group +description: "Avatar groups display a collection of avatars representing people or entities." +category: actions +documentationUrl: https://spectrum.adobe.com/page/avatar-group/ +tags: + - component + - schema + - actions +--- + +Avatar groups display a collection of avatars representing people or entities. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | Optional text label displayed with the avatar group (e.g., group name). | +| size | number | 50, 75, 100, 200, 300, 400, 500 | 100 | No | - | diff --git a/docs/markdown/components/avatar.md b/docs/markdown/components/avatar.md new file mode 100644 index 00000000..e354361d --- /dev/null +++ b/docs/markdown/components/avatar.md @@ -0,0 +1,20 @@ +--- +title: Avatar +description: "An avatar is a thumbnail representation of an entity, such as a user or an organization." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/avatar/ +tags: + - component + - schema + - navigation +--- + +An avatar is a thumbnail representation of an entity, such as a user or an organization. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | number | 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500 | 500 | No | - | +| image | string | user image, gradient image, gradient, guest image, initials | user image | No | - | +| isDisabled | boolean | - | false | No | - | +| showStroke | boolean | - | false | No | - | +| state | string | default, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/badge.md b/docs/markdown/components/badge.md new file mode 100644 index 00000000..e72a8d16 --- /dev/null +++ b/docs/markdown/components/badge.md @@ -0,0 +1,22 @@ +--- +title: 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." +category: status +documentationUrl: https://spectrum.adobe.com/page/badge/ +tags: + - component + - schema + - status +--- + +Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | When the label is not defined, the badge appears as icon-only. | +| icon | - | - | - | No | - | +| variant | string | neutral, info, positive, negative, indigo, yellow, magenta, fuchsia, purple, seafoam, accent, notice, gray, red, orange, chartreuse, celery, green, cyan, blue, pink, turquoise, brown, cinnamon, silver | - | No | - | +| style | string | bold, subtle, outline | - | No | - | +| fixed | string | none, top, right, bottom, left | none | No | - | +| isDisabled | boolean | - | false | No | - | +| size | string | s, m, l, xl | s | No | - | diff --git a/docs/markdown/components/body.md b/docs/markdown/components/body.md new file mode 100644 index 00000000..d8f8ec82 --- /dev/null +++ b/docs/markdown/components/body.md @@ -0,0 +1,18 @@ +--- +title: Body +description: "Body is a typography component primarily used within Spectrum components and for blocks of text." +category: typography +documentationUrl: https://spectrum.adobe.com/page/body/ +tags: + - component + - schema + - typography +--- + +Body is a typography component primarily used within Spectrum components and for blocks of text. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| script | - | - | - | No | - | +| classification | - | - | - | No | - | +| size | string | xs, s, m, l, xl, xxl, xxxl | m | No | - | diff --git a/docs/markdown/components/bottom-navigation-android.md b/docs/markdown/components/bottom-navigation-android.md new file mode 100644 index 00000000..58699dcf --- /dev/null +++ b/docs/markdown/components/bottom-navigation-android.md @@ -0,0 +1,21 @@ +--- +title: Bottom navigation (Android) +description: "Bottom navigation is a top-level navigation control for Android apps." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/bottom-navigation-android/ +tags: + - component + - schema + - navigation +--- + +Bottom navigation is a top-level navigation control for Android apps. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | bottom, side | bottom | No | - | +| icon | - | - | - | No | - | +| background | string | primary, secondary | primary | No | - | +| hasBadge | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | diff --git a/docs/markdown/components/breadcrumbs.md b/docs/markdown/components/breadcrumbs.md new file mode 100644 index 00000000..e824e41b --- /dev/null +++ b/docs/markdown/components/breadcrumbs.md @@ -0,0 +1,22 @@ +--- +title: Breadcrumbs +description: "Breadcrumbs show hierarchy and navigational context for a user’s location within an app." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/breadcrumbs/ +tags: + - component + - schema + - navigation +--- + +Breadcrumbs show hierarchy and navigational context for a user’s location within an app. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| state | string | default, hover, down, keyboard focus, drag and drop | default | No | - | +| isMultiline | boolean | - | false | No | If true, the breadcrumb items will wrap to multiple lines. | +| size | string | m, l | m | No | Controls the overall size of the breadcrumb component. | +| items | array | - | - | No | An array of breadcrumb items. | +| separator | string | chevron, none | chevron | No | The separator icon used between breadcrumb items. | +| isTruncated | boolean | - | false | No | If true, the breadcrumb item is truncated and displayed as icon only. | +| sizeOverride | string | s, m, l, xl | - | No | Overrides the size of the breadcrumb items when isMultiline is true. | diff --git a/docs/markdown/components/button-group.md b/docs/markdown/components/button-group.md new file mode 100644 index 00000000..9e98cc26 --- /dev/null +++ b/docs/markdown/components/button-group.md @@ -0,0 +1,19 @@ +--- +title: Button group +description: "A button group is a grouping of buttons whose actions are related to each other." +category: actions +documentationUrl: https://spectrum.adobe.com/page/button-group/ +tags: + - component + - schema + - actions +--- + +A button group is a grouping of buttons whose actions are related to each other. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| orientation | string | horizontal, vertical | horizontal | No | - | +| size | string | s, m, l, xl | m | No | - | +| overflowMode | string | wrap, collapse | wrap | No | - | +| isDisabled | boolean | - | false | No | - | diff --git a/docs/markdown/components/button.md b/docs/markdown/components/button.md new file mode 100644 index 00000000..62443461 --- /dev/null +++ b/docs/markdown/components/button.md @@ -0,0 +1,26 @@ +--- +title: Button +description: "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to whe" +category: actions +documentationUrl: https://spectrum.adobe.com/page/button/ +tags: + - component + - schema + - actions +--- + +Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| hideLabel | boolean | - | false | No | - | +| icon | - | - | - | No | Icon must be present if the label is not defined. | +| variant | string | accent, negative, primary, secondary | accent | No | - | +| staticColor | string | white, black | - | No | Static color must not be set for the default version of this component. | +| style | string | fill, outline | fill | No | - | +| size | string | s, m, l, xl | m | No | - | +| justified | boolean | - | false | No | - | +| isPending | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/calendar.md b/docs/markdown/components/calendar.md new file mode 100644 index 00000000..012f6727 --- /dev/null +++ b/docs/markdown/components/calendar.md @@ -0,0 +1,24 @@ +--- +title: Calendar +description: "Calendars display days, weeks, and months, allowing users to select dates or ranges." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/calendar/ +tags: + - component + - schema + - inputs +--- + +Calendars display days, weeks, and months, allowing users to select dates or ranges. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| currentMonth | number | - | - | No | The month currently displayed in the calendar (1 = January, 12 = December). | +| currentYear | number | - | - | No | The year currently displayed in the calendar (Gregorian year number). | +| selectionMode | string | single, range | single | No | Controls whether the calendar allows selecting a single date or a date range. | +| isDisabled | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| minValue | string | - | - | No | The minimum allowed date that a user may select (ISO format string). | +| maxValue | string | - | - | No | The maximum allowed date that a user may select (ISO format string). | +| showTimeZone | boolean | - | false | No | Whether to show a time zone indicator in the calendar. | +| days | array | - | - | No | An array of days displayed in the current calendar view. | diff --git a/docs/markdown/components/cards.md b/docs/markdown/components/cards.md new file mode 100644 index 00000000..0e3febfe --- /dev/null +++ b/docs/markdown/components/cards.md @@ -0,0 +1,16 @@ +--- +title: Cards +description: "Cards group related content into distinct layouts depending on context." +category: containers +documentationUrl: https://spectrum.adobe.com/page/cards/ +tags: + - component + - schema + - containers +--- + +Cards group related content into distinct layouts depending on context. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | asset, collection, flex, gallery, horizontal, product | asset | No | Determines which card layout variant is used. | diff --git a/docs/markdown/components/checkbox-group.md b/docs/markdown/components/checkbox-group.md new file mode 100644 index 00000000..924571a3 --- /dev/null +++ b/docs/markdown/components/checkbox-group.md @@ -0,0 +1,24 @@ +--- +title: Checkbox group +description: "A checkbox group is a grouping of checkboxes that are related to each other." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/checkbox-group/ +tags: + - component + - schema + - inputs +--- + +A checkbox group is a grouping of checkboxes that are related to each other. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| isRequired | boolean | - | false | No | - | +| orientation | string | horizontal, vertical | vertical | No | - | +| isError | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| description | string | - | - | No | - | +| errorMessage | string | - | - | No | - | diff --git a/docs/markdown/components/checkbox.md b/docs/markdown/components/checkbox.md new file mode 100644 index 00000000..6838afe9 --- /dev/null +++ b/docs/markdown/components/checkbox.md @@ -0,0 +1,23 @@ +--- +title: Checkbox +description: "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/checkbox/ +tags: + - component + - schema + - inputs +--- + +Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | When the label is not defined, the checkbox appears as a standalone checkbox. | +| isSelected | boolean | - | false | No | - | +| isIndeterminate | boolean | - | false | No | When a checkbox is indeterminate, it overrides the selection state. | +| size | string | s, m, l, xl | m | No | - | +| isEmphasized | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/close-button.md b/docs/markdown/components/close-button.md new file mode 100644 index 00000000..977c1146 --- /dev/null +++ b/docs/markdown/components/close-button.md @@ -0,0 +1,20 @@ +--- +title: Close button +description: "The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component." +category: actions +documentationUrl: https://spectrum.adobe.com/page/close-button/ +tags: + - component + - schema + - actions +--- + +The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l, xl | m | No | - | +| iconSize | string | - | - | No | - | +| staticColor | string | white, black | - | No | Static color must not be set for the default version of this component. | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/coach-indicator.md b/docs/markdown/components/coach-indicator.md new file mode 100644 index 00000000..e681b1b6 --- /dev/null +++ b/docs/markdown/components/coach-indicator.md @@ -0,0 +1,17 @@ +--- +title: Coach indicator +description: "Coach indicators help guide users through interfaces by highlighting important areas or features during onboarding and feature discovery." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/coach-indicator/ +tags: + - component + - schema + - feedback +--- + +Coach indicators help guide users through interfaces by highlighting important areas or features during onboarding and feature discovery. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| cornerRounding | string | none, corner-radius-75, corner-radius-100, corner-radius-200, corner-radius-300, corner-radius-400, corner-radius-500, corner-radius-600, corner-radius-700, corner-radius-800, full | - | No | - | +| staticColor | string | white | - | No | If not set to white, the coach indicator uses the default color. | diff --git a/docs/markdown/components/coach-mark.md b/docs/markdown/components/coach-mark.md new file mode 100644 index 00000000..5a748e0d --- /dev/null +++ b/docs/markdown/components/coach-mark.md @@ -0,0 +1,19 @@ +--- +title: Coach mark +description: "Coach marks provide contextual guidance to users by highlighting specific interface elements." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/coach-mark/ +tags: + - component + - schema + - feedback +--- + +Coach marks provide contextual guidance to users by highlighting specific interface elements. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| title | string | - | - | No | - | +| description | string | - | - | No | - | +| hideImage | boolean | - | false | No | Optional image to display in dialog. | +| actions | object | - | - | No | Configuration for coach mark actions. | diff --git a/docs/markdown/components/code.md b/docs/markdown/components/code.md new file mode 100644 index 00000000..22c67720 --- /dev/null +++ b/docs/markdown/components/code.md @@ -0,0 +1,17 @@ +--- +title: Code +description: "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text." +category: typography +documentationUrl: https://spectrum.adobe.com/page/code/ +tags: + - component + - schema + - typography +--- + +Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| script | - | - | - | No | - | +| size | string | xs, s, m, l, xl | m | No | - | diff --git a/docs/markdown/components/color-area.md b/docs/markdown/components/color-area.md new file mode 100644 index 00000000..1fd67156 --- /dev/null +++ b/docs/markdown/components/color-area.md @@ -0,0 +1,27 @@ +--- +title: Color area +description: "A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/color-area/ +tags: + - component + - schema + - inputs +--- + +A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| background | string | - | - | No | This will vary depending on implementation. | +| x-value | number | - | - | No | Number (from x-minValue to x-maxValue) | +| x-minValue | number | - | 0 | No | - | +| x-maxValue | number | - | 100 | No | - | +| y-value | number | - | - | No | Number (from y-minValue to y-maxValue) | +| y-minValue | number | - | 0 | No | - | +| y-maxValue | number | - | 100 | No | - | +| step | number | - | 1 | No | - | +| width | number | - | 192 | No | units: px | +| height | number | - | 192 | No | units: px | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/color-handle.md b/docs/markdown/components/color-handle.md new file mode 100644 index 00000000..00fb4c73 --- /dev/null +++ b/docs/markdown/components/color-handle.md @@ -0,0 +1,17 @@ +--- +title: Color handle +description: "Color handles allow users to select and adjust colors in a color picker." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/color-handle/ +tags: + - component + - schema + - inputs +--- + +Color handles allow users to select and adjust colors in a color picker. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| channel | string | hue, saturation, lightness, red, green, blue, alpha | hue | No | Which channel of the color this handle controls. Use 'alpha' for opacity. | +| isDisabled | boolean | - | false | No | - | diff --git a/docs/markdown/components/color-loupe.md b/docs/markdown/components/color-loupe.md new file mode 100644 index 00000000..e5057b6b --- /dev/null +++ b/docs/markdown/components/color-loupe.md @@ -0,0 +1,17 @@ +--- +title: Color loupe +description: "A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/color-loupe/ +tags: + - component + - schema + - feedback +--- + +A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| value | - | - | - | No | - | +| state | string | default | default | No | - | diff --git a/docs/markdown/components/color-slider.md b/docs/markdown/components/color-slider.md new file mode 100644 index 00000000..ed17c99c --- /dev/null +++ b/docs/markdown/components/color-slider.md @@ -0,0 +1,25 @@ +--- +title: Color slider +description: "A color slider lets users visually change an individual channel of a color." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/color-slider/ +tags: + - component + - schema + - inputs +--- + +A color slider lets users visually change an individual channel of a color. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| background | string | - | - | No | This will vary depending on implementation. | +| channel | string | hue, saturation, lightness, red, green, blue, alpha | hue | No | Which channel of the color this slider controls. Use 'alpha' for opacity. | +| value | number | - | - | No | Number (from minValue to maxValue). | +| minValue | number | - | 0 | No | - | +| maxValue | number | - | 100 | No | - | +| step | number | - | 1 | No | - | +| orientation | string | horizontal, vertical | horizontal | No | - | +| length | number | - | 192 | No | units: px | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/color-wheel.md b/docs/markdown/components/color-wheel.md new file mode 100644 index 00000000..27ad9f1b --- /dev/null +++ b/docs/markdown/components/color-wheel.md @@ -0,0 +1,23 @@ +--- +title: Color wheel +description: "A color wheel lets users visually change an individual channel of a color on a circular track." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/color-wheel/ +tags: + - component + - schema + - inputs +--- + +A color wheel lets users visually change an individual channel of a color on a circular track. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| background | string | - | - | No | This will vary depending on implementation. | +| value | number | - | - | No | Number (from minValue to maxValue) | +| minValue | number | - | 0 | No | - | +| maxValue | number | - | 360 | No | - | +| step | number | - | 1 | No | - | +| size | number | - | 192 | No | units: px | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/combo-box.md b/docs/markdown/components/combo-box.md new file mode 100644 index 00000000..fb4b59af --- /dev/null +++ b/docs/markdown/components/combo-box.md @@ -0,0 +1,30 @@ +--- +title: Combo box +description: "Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/combo-box/ +tags: + - component + - schema + - inputs +--- + +Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side, in line | top | No | - | +| value | string | - | - | No | - | +| width | number | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| isRequired | boolean | - | false | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| hasAutocomplete | boolean | - | false | No | - | +| menuTrigger | string | input, focus, manual | input | No | - | +| isError | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| isReadOnly | boolean | - | false | No | - | +| description | string | - | - | No | - | +| errorMessage | string | - | - | No | - | +| state | string | default, hover (text area), hover (button area), focus + hover, focus + not hover, keyboard focus | default | No | - | diff --git a/docs/markdown/components/contextual-help.md b/docs/markdown/components/contextual-help.md new file mode 100644 index 00000000..83751ae3 --- /dev/null +++ b/docs/markdown/components/contextual-help.md @@ -0,0 +1,22 @@ +--- +title: Contextual help +description: "Contextual help shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experi" +category: feedback +documentationUrl: https://spectrum.adobe.com/page/contextual-help/ +tags: + - component + - schema + - feedback +--- + +Contextual help shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experience and can point users to more information elsewhere. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| icon | string | info, help | info | No | - | +| popoverPlacement | string | top, top left, top right, top start, top end, bottom, bottom left, bottom right, bottom start, bottom end, left, left top, left bottom, start, start top, start bottom, right, right top, right bottom, end, end top, end bottom | bottom start | No | - | +| popoverOffset | number | - | 8 | No | - | +| href | string | - | - | No | Optional URL within contextual help content like a 'Learn more' link. | +| popoverCrossOffset | number | - | 0 | No | - | +| containerPadding | number | - | 8 | No | - | +| state | string | default, down, open, keyboard focus | default | No | - | diff --git a/docs/markdown/components/date-picker.md b/docs/markdown/components/date-picker.md new file mode 100644 index 00000000..f60f1ad7 --- /dev/null +++ b/docs/markdown/components/date-picker.md @@ -0,0 +1,20 @@ +--- +title: Date picker +description: "A date picker lets users enter a single date or a date range. It includes a calendar popover and a field." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/date-picker/ +tags: + - component + - schema + - inputs +--- + +A date picker lets users enter a single date or a date range. It includes a calendar popover and a field. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | single, double, triple | single | No | Controls the number of months displayed in the calendar popover. | +| selectedDate | string | - | - | No | The currently selected date. Used when selectionMode is single. | +| selectedRange | object | - | - | No | The currently selected date range, used when selectionMode is range. | +| dateField | object | - | - | No | Configuration for the date input field. | +| calendarPopover | object | - | - | No | Configuration for the calendar popover. | diff --git a/docs/markdown/components/detail.md b/docs/markdown/components/detail.md new file mode 100644 index 00000000..e83b42fc --- /dev/null +++ b/docs/markdown/components/detail.md @@ -0,0 +1,18 @@ +--- +title: Detail +description: "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text." +category: typography +documentationUrl: https://spectrum.adobe.com/page/detail/ +tags: + - component + - schema + - typography +--- + +Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| script | - | - | - | No | - | +| weight | string | light, default | default | No | - | +| size | string | s, m, l, xl | m | No | - | diff --git a/docs/markdown/components/divider.md b/docs/markdown/components/divider.md new file mode 100644 index 00000000..3994c130 --- /dev/null +++ b/docs/markdown/components/divider.md @@ -0,0 +1,17 @@ +--- +title: 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." +category: containers +documentationUrl: https://spectrum.adobe.com/page/divider/ +tags: + - component + - schema + - containers +--- + +Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l | s | No | - | +| orientation | string | horizontal, vertical | horizontal | No | - | diff --git a/docs/markdown/components/drop-zone.md b/docs/markdown/components/drop-zone.md new file mode 100644 index 00000000..36ee269d --- /dev/null +++ b/docs/markdown/components/drop-zone.md @@ -0,0 +1,21 @@ +--- +title: Drop zone +description: "A drop zone allows users to drag and drop files or other content into a designated area." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/drop-zone/ +tags: + - component + - schema + - inputs +--- + +A drop zone allows users to drag and drop files or other content into a designated area. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| accept | array | - | - | No | - | +| size | string | s, m, l | m | No | - | +| actionLabel | string | - | - | No | If undefined, this button does not appear. | +| onDrop | string | - | - | No | Callback function called when files are dropped onto the drop zone. | +| onDragOver | string | - | - | No | Callback function called when a file is dragged over the drop zone. | +| onDragLeave | string | - | - | No | Callback function called when a file is dragged out of the drop zone. | diff --git a/docs/markdown/components/field-label.md b/docs/markdown/components/field-label.md new file mode 100644 index 00000000..ef7832aa --- /dev/null +++ b/docs/markdown/components/field-label.md @@ -0,0 +1,21 @@ +--- +title: Field label +description: "Field labels give context to the information that a user needs to input. They're commonly used in forms." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/field-label/ +tags: + - component + - schema + - inputs +--- + +Field labels give context to the information that a user needs to input. They're commonly used in forms. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| size | string | s, m, l, xl | m | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| isRequired | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | diff --git a/docs/markdown/components/heading.md b/docs/markdown/components/heading.md new file mode 100644 index 00000000..99fad8be --- /dev/null +++ b/docs/markdown/components/heading.md @@ -0,0 +1,19 @@ +--- +title: Heading +description: "Heading is a typography component used to create various levels of hierarchies between text." +category: typography +documentationUrl: https://spectrum.adobe.com/page/heading/ +tags: + - component + - schema + - typography +--- + +Heading is a typography component used to create various levels of hierarchies between text. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| script | - | - | - | No | - | +| classification | - | - | - | No | - | +| weight | string | light, default, heavy | default | No | - | +| size | string | xs, s, m, l, xl, xxl, xxxl | m | No | - | diff --git a/docs/markdown/components/help-text.md b/docs/markdown/components/help-text.md new file mode 100644 index 00000000..41a8d3d6 --- /dev/null +++ b/docs/markdown/components/help-text.md @@ -0,0 +1,20 @@ +--- +title: Help text +description: "Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/help-text/ +tags: + - component + - schema + - inputs +--- + +Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| text | string | - | - | No | - | +| variant | string | neutral, negative | neutral | No | - | +| hideIcon | boolean | - | false | No | Only applicable if variant is negative. | +| size | string | s, m, l, xl | m | No | - | +| isDisabled | boolean | - | false | No | Help text cannot be both disabled and negative variant. | diff --git a/docs/markdown/components/illustrated-message.md b/docs/markdown/components/illustrated-message.md new file mode 100644 index 00000000..69e99cbf --- /dev/null +++ b/docs/markdown/components/illustrated-message.md @@ -0,0 +1,22 @@ +--- +title: Illustrated message +description: "An illustrated message displays an illustration with a short title and description, often used for empty states or error states." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/illustrated-message/ +tags: + - component + - schema + - feedback +--- + +An illustrated message displays an illustration with a short title and description, often used for empty states or error states. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| illustration | string | - | - | No | Optional illustration or icon displayed above the message. | +| size | string | s, m, l | m | No | Size of the illustration. | +| orientation | string | vertical, horizontal | vertical | No | Orientation of the illustrated message. | +| title | string | - | - | No | Primary heading text of the message. | +| description | string | - | - | No | Secondary descriptive text providing context or instructions. | +| primaryActionLabel | string | - | - | No | Label for the primary action button. If undefined, no primary action is shown. | +| secondaryActionLabel | string | - | - | No | Label for the secondary action button. If undefined, no secondary action is shown. | diff --git a/docs/markdown/components/in-field-progress-button.md b/docs/markdown/components/in-field-progress-button.md new file mode 100644 index 00000000..94fd42e5 --- /dev/null +++ b/docs/markdown/components/in-field-progress-button.md @@ -0,0 +1,19 @@ +--- +title: In field progress button +description: "In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content." +category: actions +documentationUrl: https://spectrum.adobe.com/page/in-field-progress-button/ +tags: + - component + - schema + - actions +--- + +In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l, xl | m | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | +| style | string | disclosure, clear, dash, add | - | No | - | +| isQuiet | boolean | - | false | No | - | diff --git a/docs/markdown/components/in-field-progress-circle.md b/docs/markdown/components/in-field-progress-circle.md new file mode 100644 index 00000000..4b7fa36d --- /dev/null +++ b/docs/markdown/components/in-field-progress-circle.md @@ -0,0 +1,17 @@ +--- +title: In field progress circle +description: "In field progress circles indicate progress for loading states within form fields and input areas." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/in-field-progress-circle/ +tags: + - component + - schema + - feedback +--- + +In field progress circles indicate progress for loading states within form fields and input areas. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l, xl | m | No | - | +| staticColor | string | white, black | - | No | - | diff --git a/docs/markdown/components/in-line-alert.md b/docs/markdown/components/in-line-alert.md new file mode 100644 index 00000000..9bcc27e8 --- /dev/null +++ b/docs/markdown/components/in-line-alert.md @@ -0,0 +1,20 @@ +--- +title: In-line alert +description: "In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback r" +category: feedback +documentationUrl: https://spectrum.adobe.com/page/in-line-alert/ +tags: + - component + - schema + - feedback +--- + +In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | neutral, informative, positive, notice, negative, accent | neutral | No | - | +| style | string | bold, subtle, outline | outline | No | The visual style of the alert. | +| href | string | - | - | No | Optional URL within in-line alert content like a 'Learn more' link. | +| heading | string | - | - | No | Optional heading text displayed at the top of the alert. | +| actionLabel | string | - | - | No | If undefined, this button does not appear. | diff --git a/docs/markdown/components/link.md b/docs/markdown/components/link.md new file mode 100644 index 00000000..9d482f11 --- /dev/null +++ b/docs/markdown/components/link.md @@ -0,0 +1,19 @@ +--- +title: Link +description: "Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text." +category: actions +documentationUrl: https://spectrum.adobe.com/page/link/ +tags: + - component + - schema + - actions +--- + +Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | primary, secondary | primary | No | - | +| isQuiet | boolean | - | false | No | - | +| staticColor | string | white, black | - | No | Static color must not be set for the default version of this component. | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/list-view.md b/docs/markdown/components/list-view.md new file mode 100644 index 00000000..e1369304 --- /dev/null +++ b/docs/markdown/components/list-view.md @@ -0,0 +1,18 @@ +--- +title: List view +description: "List views display rows of data or options that users can browse, select, and interact with." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/list-view/ +tags: + - component + - schema + - navigation +--- + +List views display rows of data or options that users can browse, select, and interact with. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| selectionMode | string | none, single, multiple | single | No | Defines how many items can be selected at once. | +| isQuiet | boolean | - | false | No | If true, the list view uses a quiet visual style. | +| items | array | - | - | No | An array of list view items. | diff --git a/docs/markdown/components/menu.md b/docs/markdown/components/menu.md new file mode 100644 index 00000000..0dc38520 --- /dev/null +++ b/docs/markdown/components/menu.md @@ -0,0 +1,28 @@ +--- +title: Menu +description: "Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray." +category: actions +documentationUrl: https://spectrum.adobe.com/page/menu/ +tags: + - component + - schema + - actions +--- + +Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| container | string | popover, tray | - | No | - | +| label | string | - | - | No | - | +| icon | - | - | - | No | Icon must be present if the label is not defined. | +| description | string | - | - | No | - | +| value | string | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| selectionMode | string | single, multiple, no selection | - | No | - | +| selectionStyle | string | checkbox, switch | - | No | - | +| sectionHeader | string | - | - | No | - | +| isCollapsible | boolean | - | false | No | - | +| isUnavailable | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/meter.md b/docs/markdown/components/meter.md new file mode 100644 index 00000000..73bcab3f --- /dev/null +++ b/docs/markdown/components/meter.md @@ -0,0 +1,23 @@ +--- +title: Meter +description: "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions." +category: status +documentationUrl: https://spectrum.adobe.com/page/meter/ +tags: + - component + - schema + - status +--- + +Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | informative, positive, notice, negative | informative | No | - | +| label | string | - | - | No | - | +| hideLabel | boolean | - | false | No | - | +| valueLabel | string | - | - | No | - | +| width | number | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| value | number | - | - | No | - | +| helpText | string | - | - | No | - | diff --git a/docs/markdown/components/number-field.md b/docs/markdown/components/number-field.md new file mode 100644 index 00000000..c8d6ef76 --- /dev/null +++ b/docs/markdown/components/number-field.md @@ -0,0 +1,25 @@ +--- +title: Number field +description: "Number fields allow users to enter a numeric value, with optional increment and decrement buttons." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/number-field/ +tags: + - component + - schema + - inputs +--- + +Number fields allow users to enter a numeric value, with optional increment and decrement buttons. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| labelPosition | string | top, side | top | No | - | +| hideLabel | boolean | - | false | No | - | +| state | string | default, hover, focus + hover, focus + not hover | default | No | - | +| isDisabled | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| isRequired | boolean | - | false | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| hideStepper | boolean | - | false | No | If true, hides in-field increment and decrement buttons (stepper). | diff --git a/docs/markdown/components/opacity-checkerboard.md b/docs/markdown/components/opacity-checkerboard.md new file mode 100644 index 00000000..baa6e481 --- /dev/null +++ b/docs/markdown/components/opacity-checkerboard.md @@ -0,0 +1,17 @@ +--- +title: Opacity Checkerboard +description: "Opacity checkerboards provide a visual pattern background used in color swatches and UI elements to indicate transparency or when no color is selected." +category: status +documentationUrl: https://spectrum.adobe.com/page/opacity-checkerboard/ +tags: + - component + - schema + - status +--- + +Opacity checkerboards provide a visual pattern background used in color swatches and UI elements to indicate transparency or when no color is selected. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| verticalSize | number | 16, 32, 64, 128, 256 | - | No | - | +| horizontalSize | number | 24, 40 | - | No | - | diff --git a/docs/markdown/components/picker.md b/docs/markdown/components/picker.md new file mode 100644 index 00000000..07ad5620 --- /dev/null +++ b/docs/markdown/components/picker.md @@ -0,0 +1,30 @@ +--- +title: Picker +description: "Pickers (sometimes known as \"dropdowns\" or \"selects\") allow users to choose from a list of options in a limited space. The list of options can change based on t" +category: inputs +documentationUrl: https://spectrum.adobe.com/page/picker/ +tags: + - component + - schema + - inputs +--- + +Pickers (sometimes known as "dropdowns" or "selects") allow users to choose from a list of options in a limited space. The list of options can change based on the context. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| placeholder | string | - | - | No | - | +| value | string | - | - | No | - | +| width | number | - | - | No | Not applicable to quiet picker. | +| size | string | s, m, l, xl | m | No | - | +| isQuiet | boolean | - | false | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| isRequired | boolean | - | false | No | - | +| menuContainer | string | popover, tray | popover | No | - | +| isDisabled | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| description | string | - | null | No | - | +| errorMessage | string | - | null | No | - | +| state | string | default, hover, focus + hover, focus + not hover, keyboard focus | default | No | - | diff --git a/docs/markdown/components/popover.md b/docs/markdown/components/popover.md new file mode 100644 index 00000000..fa01ee61 --- /dev/null +++ b/docs/markdown/components/popover.md @@ -0,0 +1,22 @@ +--- +title: Popover +description: "Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop " +category: containers +documentationUrl: https://spectrum.adobe.com/page/popover/ +tags: + - component + - schema + - containers +--- + +Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| width | number | - | - | No | - | +| height | number | - | - | No | - | +| hideTip | boolean | - | false | No | - | +| placement | string | top, top left, top right, top start, top end, bottom, bottom left, bottom right, bottom start, bottom end, left, left top, left bottom, start, start top, start bottom, right, right top, right bottom, end, end top, end bottom | top | No | - | +| offset | number | - | 8 | No | pixel measurement | +| crossOffset | number | - | 0 | No | - | +| containerPadding | number | - | 8 | No | pixel measurement | diff --git a/docs/markdown/components/progress-bar.md b/docs/markdown/components/progress-bar.md new file mode 100644 index 00000000..f04190c0 --- /dev/null +++ b/docs/markdown/components/progress-bar.md @@ -0,0 +1,27 @@ +--- +title: Progress bar +description: "Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or in" +category: status +documentationUrl: https://spectrum.adobe.com/page/progress-bar/ +tags: + - component + - schema + - status +--- + +Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | default, over background | default | No | - | +| staticColor | string | white | - | No | Static color can only be white, otherwise it is default. | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| hideLabel | boolean | - | false | No | - | +| value | number | - | - | No | Not applicable when indeterminate. | +| minValue | number | - | 0 | No | Not applicable when indeterminate. | +| maxValue | number | - | 1 | No | Not applicable when indeterminate. | +| valueLabel | string | - | - | No | - | +| width | number | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| isIndeterminate | boolean | - | false | No | - | diff --git a/docs/markdown/components/progress-circle.md b/docs/markdown/components/progress-circle.md new file mode 100644 index 00000000..cb4c159a --- /dev/null +++ b/docs/markdown/components/progress-circle.md @@ -0,0 +1,21 @@ +--- +title: Progress circle +description: "Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or " +category: status +documentationUrl: https://spectrum.adobe.com/page/progress-circle/ +tags: + - component + - schema + - status +--- + +Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | string | default, over background | default | No | - | +| value | number | - | - | No | Not applicable when indeterminate. | +| minValue | number | - | 0 | No | Not applicable when indeterminate. | +| maxValue | number | - | 1 | No | Not applicable when indeterminate. | +| size | string | s, m, l | m | No | - | +| isIndeterminate | boolean | - | false | No | - | diff --git a/docs/markdown/components/radio-button.md b/docs/markdown/components/radio-button.md new file mode 100644 index 00000000..3fbc8132 --- /dev/null +++ b/docs/markdown/components/radio-button.md @@ -0,0 +1,19 @@ +--- +title: Radio button +description: "Radio buttons allow users to select a single option from a list of mutually exclusive options." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/radio-button/ +tags: + - component + - schema + - inputs +--- + +Radio buttons allow users to select a single option from a list of mutually exclusive options. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| state | string | default, hover, down, keyboard focus | default | No | - | +| isSelected | boolean | - | false | No | - | +| isEmphasized | boolean | - | false | No | - | +| label | string | - | - | No | The text displayed next to a radio button. | diff --git a/docs/markdown/components/radio-group.md b/docs/markdown/components/radio-group.md new file mode 100644 index 00000000..f3519009 --- /dev/null +++ b/docs/markdown/components/radio-group.md @@ -0,0 +1,26 @@ +--- +title: Radio Group +description: "A radio group is a grouping of radio buttons that are related to each other." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/radio-group/ +tags: + - component + - schema + - inputs +--- + +A radio group is a grouping of radio buttons that are related to each other. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| orientation | string | horizontal, vertical | vertical | No | - | +| size | string | s, m, l, xl | m | No | - | +| isEmphasized | boolean | - | false | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| isRequired | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| errorMessage | string | - | - | No | - | +| description | string | - | - | No | - | diff --git a/docs/markdown/components/rating.md b/docs/markdown/components/rating.md new file mode 100644 index 00000000..aeb75428 --- /dev/null +++ b/docs/markdown/components/rating.md @@ -0,0 +1,19 @@ +--- +title: Rating +description: "The rating component lets users apply a rating to an item or experience, such as an image, a forum post, an item for sale in a marketplace, and more." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/rating/ +tags: + - component + - schema + - inputs +--- + +The rating component lets users apply a rating to an item or experience, such as an image, a forum post, an item for sale in a marketplace, and more. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| value | number | - | 0 | No | From 0 to 5, can be a decimal to represent half stars | +| isEmphasized | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/scroll-zoom-bar.md b/docs/markdown/components/scroll-zoom-bar.md new file mode 100644 index 00000000..c740074c --- /dev/null +++ b/docs/markdown/components/scroll-zoom-bar.md @@ -0,0 +1,22 @@ +--- +title: Scroll-zoom bar +description: "Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/scroll-zoom-bar/ +tags: + - component + - schema + - navigation +--- + +Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l | m | No | - | +| orientation | string | horizontal, vertical | horizontal | No | - | +| hideTrack | boolean | - | false | No | - | +| hideHandles | boolean | - | false | No | - | +| scaleDown | boolean | - | false | No | - | +| isDetached | boolean | - | false | No | - | +| state | string | default, hover, keyboard focus | default | No | - | diff --git a/docs/markdown/components/search-field.md b/docs/markdown/components/search-field.md new file mode 100644 index 00000000..560df093 --- /dev/null +++ b/docs/markdown/components/search-field.md @@ -0,0 +1,25 @@ +--- +title: Search field +description: "A search field is used for searching and filtering items." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/search-field/ +tags: + - component + - schema + - inputs +--- + +A search field is used for searching and filtering items. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| hideLabel | boolean | - | false | No | - | +| icon | - | - | - | No | Icon must be present if the label is not defined. | +| value | string | - | - | No | - | +| width | number | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| helpText | string | - | - | No | - | +| placeholder | string | - | - | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, down, hover, focus + hover, focus + not hover, keyboard focus | default | No | - | diff --git a/docs/markdown/components/segmented-control.md b/docs/markdown/components/segmented-control.md new file mode 100644 index 00000000..1aeedd2b --- /dev/null +++ b/docs/markdown/components/segmented-control.md @@ -0,0 +1,22 @@ +--- +title: Segmented Control +description: "Segmented controls allow users to select one option from a set of mutually exclusive options." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/segmented-control/ +tags: + - component + - schema + - navigation +--- + +Segmented controls allow users to select one option from a set of mutually exclusive options. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| orientation | string | horizontal, vertical | horizontal | No | - | +| isFluid | boolean | - | false | No | If true, the control takes up the full width of its container. Only applicable to horizontal segmented controls. | +| alignment | string | start, center | start | No | - | +| hideTracker | boolean | - | false | No | If true, the tracker that indicates the selected item is hidden. | +| selectedItem | string | - | - | No | The identifier of the currently selected item. | +| keyboardActivation | string | manual, automatic | manual | No | - | +| items | array | - | - | No | An array of segmented control items. | diff --git a/docs/markdown/components/select-box.md b/docs/markdown/components/select-box.md new file mode 100644 index 00000000..332622a5 --- /dev/null +++ b/docs/markdown/components/select-box.md @@ -0,0 +1,22 @@ +--- +title: Select box +description: "" +category: inputs +documentationUrl: https://spectrum.adobe.com/page/select-box/ +tags: + - component + - schema + - inputs +--- + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| orientation | string | horizontal, vertical | vertical | No | - | +| body | string | - | - | No | - | +| isSelected | boolean | - | false | No | - | +| hideIllustration | boolean | - | false | No | - | +| showCheckbox | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, down, hover, keyboard focus | default | No | - | +| multiple | boolean | - | false | No | Set to true to allow multiple selections. | diff --git a/docs/markdown/components/side-navigation.md b/docs/markdown/components/side-navigation.md new file mode 100644 index 00000000..3b948b5a --- /dev/null +++ b/docs/markdown/components/side-navigation.md @@ -0,0 +1,18 @@ +--- +title: Side navigation +description: "Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/side-navigation/ +tags: + - component + - schema + - navigation +--- + +Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| state | string | default, hover, down, keyboard focus | default | No | - | +| items | array | - | - | Yes | The list of navigation items. | +| selectionMode | string | none, single, multiple | single | No | How selection is handled for items. | diff --git a/docs/markdown/components/slider.md b/docs/markdown/components/slider.md new file mode 100644 index 00000000..4d6ff8e7 --- /dev/null +++ b/docs/markdown/components/slider.md @@ -0,0 +1,31 @@ +--- +title: Slider +description: "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/slider/ +tags: + - component + - schema + - inputs +--- + +Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| value | number | - | - | No | from minValue to maxValue | +| minValue | number | - | 0 | No | - | +| maxValue | number | - | 100 | No | - | +| isRange | boolean | - | false | No | If true, the slider will allow selection of a range of values by displaying two handles. | +| step | number | - | 1 | No | - | +| valueFormat | string | - | - | No | This will vary depending on implementation. | +| progressionScale | string | linear, log | linear | No | - | +| width | number | - | - | No | - | +| hasFill | boolean | - | false | No | - | +| fillStart | number | - | 0 | No | - | +| hasGradient | boolean | - | false | No | - | +| isEditable | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/standard-dialog.md b/docs/markdown/components/standard-dialog.md new file mode 100644 index 00000000..fead8b1b --- /dev/null +++ b/docs/markdown/components/standard-dialog.md @@ -0,0 +1,24 @@ +--- +title: Standard dialog +description: "Standard dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is " +category: feedback +documentationUrl: https://spectrum.adobe.com/page/standard-dialog/ +tags: + - component + - schema + - feedback +--- + +Standard dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| title | string | - | - | No | - | +| description | string | - | - | No | - | +| hideImage | boolean | - | false | No | Optional image to display in dialog. | +| size | string | s, m, l | m | No | - | +| hideCloseButton | boolean | - | false | No | - | +| footerContent | string | - | - | No | Optional footer content to display in the dialog footer like a checkbox. | +| primaryActionLabel | string | - | - | No | - | +| secondaryActionLabel | string | - | - | No | If undefined, this button does not appear. | +| cancelActionLabel | string | - | cancel | No | If undefined, this button does not appear. | diff --git a/docs/markdown/components/standard-panel.md b/docs/markdown/components/standard-panel.md new file mode 100644 index 00000000..f70ebb4c --- /dev/null +++ b/docs/markdown/components/standard-panel.md @@ -0,0 +1,24 @@ +--- +title: Standard Panel +description: "Standard Panels provide a flexible container for grouping related content and actions." +category: containers +documentationUrl: https://spectrum.adobe.com/page/standard-panel/ +tags: + - component + - schema + - containers +--- + +Standard Panels provide a flexible container for grouping related content and actions. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| container | string | anchored, floating, dragged | anchored | No | - | +| label | string | - | - | No | - | +| description | string | - | - | No | - | +| value | string | - | - | No | - | +| density | string | compact, regular, spacious | regular | No | - | +| style | string | primary, secondary | primary | No | - | +| hideGripper | boolean | - | false | No | - | +| hideCloseButton | boolean | - | false | No | - | +| hideDivider | boolean | - | false | No | - | diff --git a/docs/markdown/components/status-light.md b/docs/markdown/components/status-light.md new file mode 100644 index 00000000..d4a0edab --- /dev/null +++ b/docs/markdown/components/status-light.md @@ -0,0 +1,18 @@ +--- +title: Status light +description: "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories." +category: status +documentationUrl: https://spectrum.adobe.com/page/status-light/ +tags: + - component + - schema + - status +--- + +Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | Yes | - | +| variant | string | informative, neutral, positive, notice, negative, indigo, celery, chartreuse, yellow, magenta, fuchsia, purple, seafoam, pink, turquoise, cinnamon, brown, silver, gray, red, orange, green, cyan | informative | No | - | +| size | string | s, m, l, xl | m | No | - | diff --git a/docs/markdown/components/steplist.md b/docs/markdown/components/steplist.md new file mode 100644 index 00000000..81bbe63d --- /dev/null +++ b/docs/markdown/components/steplist.md @@ -0,0 +1,18 @@ +--- +title: Steplist +description: "Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/steplist/ +tags: + - component + - schema + - navigation +--- + +Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| orientation | string | horizontal, vertical | horizontal | No | - | +| items | array | - | - | No | An array of step items in the step list. | +| currentStep | string | - | - | No | The identifier or label of the currently active step. | diff --git a/docs/markdown/components/swatch-group.md b/docs/markdown/components/swatch-group.md new file mode 100644 index 00000000..f21c6fe4 --- /dev/null +++ b/docs/markdown/components/swatch-group.md @@ -0,0 +1,21 @@ +--- +title: Swatch group +description: "A swatch group is a grouping of swatches that are related to each other." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/swatch-group/ +tags: + - component + - schema + - inputs +--- + +A swatch group is a grouping of swatches that are related to each other. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | xs, s, m, l | m | No | - | +| density | string | compact, regular, spacious | regular | No | - | +| enableSelection | boolean | - | false | No | - | +| selectionMode | string | single, multiple | single | No | Only applicable if selection is enabled. | +| allowsEmptySelection | boolean | - | false | No | Only applicable if selection is enabled. | +| cornerRadius | string | none, full, partial | none | No | Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75. | diff --git a/docs/markdown/components/swatch.md b/docs/markdown/components/swatch.md new file mode 100644 index 00000000..d201e643 --- /dev/null +++ b/docs/markdown/components/swatch.md @@ -0,0 +1,22 @@ +--- +title: Swatch +description: "A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/swatch/ +tags: + - component + - schema + - inputs +--- + +A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| preview | string | - | - | No | This will vary depending on implementation. | +| size | string | xs, s, m, l | m | No | - | +| shape | string | square, rectangle | square | No | - | +| cornerRounding | string | none, partial, full | none | No | Determines the corner radius of the swatch. Partial refers to corner-radius-75. | +| isSelected | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/switch.md b/docs/markdown/components/switch.md new file mode 100644 index 00000000..82361467 --- /dev/null +++ b/docs/markdown/components/switch.md @@ -0,0 +1,22 @@ +--- +title: Switch +description: "Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/switch/ +tags: + - component + - schema + - inputs +--- + +Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| isSelected | boolean | - | false | No | - | +| size | string | s, m, l, xl | m | No | - | +| isEmphasized | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| isReadOnly | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/tab-bar-ios.md b/docs/markdown/components/tab-bar-ios.md new file mode 100644 index 00000000..6d600631 --- /dev/null +++ b/docs/markdown/components/tab-bar-ios.md @@ -0,0 +1,21 @@ +--- +title: Tab bar (iOS) +description: "Tab bar is a top-level navigation control for iOS apps." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/tab-bar-ios/ +tags: + - component + - schema + - navigation +--- + +Tab bar is a top-level navigation control for iOS apps. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | bottom, side | bottom | No | - | +| icon | - | - | - | No | - | +| background | string | primary, secondary | primary | No | - | +| hasBadge | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | diff --git a/docs/markdown/components/table.md b/docs/markdown/components/table.md new file mode 100644 index 00000000..487c3da7 --- /dev/null +++ b/docs/markdown/components/table.md @@ -0,0 +1,23 @@ +--- +title: Table +description: "Tables display information in rows and columns, allowing users to compare and scan structured data." +category: data visualization +documentationUrl: https://spectrum.adobe.com/page/table/ +tags: + - component + - schema + - data visualization +--- + +Tables display information in rows and columns, allowing users to compare and scan structured data. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l | m | No | Controls the density of table rows. | +| hideHeader | boolean | - | false | No | If true, the table header is hidden. | +| header | object | - | - | No | Configuration for the table header row. | +| density | string | compact, regular, spacious | regular | No | - | +| isQuiet | boolean | - | false | No | If true, the table uses a quiet visual style. | +| isSortable | boolean | - | false | No | If true, table columns can be sorted. | +| columns | array | - | - | No | An array of column definitions for the table. | +| rows | array | - | - | No | An array of row data for the table. | diff --git a/docs/markdown/components/tabs.md b/docs/markdown/components/tabs.md new file mode 100644 index 00000000..1ab67767 --- /dev/null +++ b/docs/markdown/components/tabs.md @@ -0,0 +1,17 @@ +--- +title: Tabs +description: "Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent u" +category: navigation +documentationUrl: https://spectrum.adobe.com/page/tabs/ +tags: + - component + - schema + - navigation +--- + +Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| orientation | string | horizontal, vertical | horizontal | No | - | +| items | array | - | - | No | An array of tab items. | diff --git a/docs/markdown/components/tag-field.md b/docs/markdown/components/tag-field.md new file mode 100644 index 00000000..0ddba8f2 --- /dev/null +++ b/docs/markdown/components/tag-field.md @@ -0,0 +1,20 @@ +--- +title: Tag field +description: "A tag field is an input field that allows users to enter and manage tags." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/tag-field/ +tags: + - component + - schema + - inputs +--- + +A tag field is an input field that allows users to enter and manage tags. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l | m | No | - | +| state | string | default, hover, focus + hover, focus + not hover, keyboard focus | default | No | - | +| style | string | keyword, icon, thumbnail, avatar | keyword | No | - | +| isDisabled | boolean | - | false | No | - | +| hideLabel | boolean | - | false | No | - | diff --git a/docs/markdown/components/tag-group.md b/docs/markdown/components/tag-group.md new file mode 100644 index 00000000..a989a8ec --- /dev/null +++ b/docs/markdown/components/tag-group.md @@ -0,0 +1,19 @@ +--- +title: Tag group +description: "A tag group is a collection of tags that represent a set of related items." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/tag-group/ +tags: + - component + - schema + - inputs +--- + +A tag group is a collection of tags that represent a set of related items. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l | m | No | - | +| labelPosition | string | top, side | top | No | - | +| hideLabel | boolean | - | false | No | - | +| actionLabel | string | - | - | No | If undefined, this button does not appear. | diff --git a/docs/markdown/components/tag.md b/docs/markdown/components/tag.md new file mode 100644 index 00000000..353503f2 --- /dev/null +++ b/docs/markdown/components/tag.md @@ -0,0 +1,22 @@ +--- +title: Tag +description: "Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/tag/ +tags: + - component + - schema + - navigation +--- + +Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| hasAvatar | boolean | - | false | No | - | +| isRemovable | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| isReadOnly | boolean | - | false | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/components/takeover-dialog.md b/docs/markdown/components/takeover-dialog.md new file mode 100644 index 00000000..e4eabbe4 --- /dev/null +++ b/docs/markdown/components/takeover-dialog.md @@ -0,0 +1,22 @@ +--- +title: Takeover dialog +description: "Takeover dialogs are larger, flexible dialogs that contain other components to support complex workflows." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/takeover-dialog/ +tags: + - component + - schema + - feedback +--- + +Takeover dialogs are larger, flexible dialogs that contain other components to support complex workflows. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| title | string | - | - | No | - | +| description | string | - | - | No | - | +| variant | string | dialog, full screen | dialog | No | - | +| primaryActionLabel | string | - | - | No | - | +| secondaryActionLabel | string | - | - | No | If undefined, this button does not appear. | +| cancelActionLabel | string | - | cancel | No | If undefined, this button does not appear. | +| slots | array | - | - | No | Areas where other components can be inserted (e.g. Side navigation, Steplist, Forms). | diff --git a/docs/markdown/components/text-area.md b/docs/markdown/components/text-area.md new file mode 100644 index 00000000..298bb0fa --- /dev/null +++ b/docs/markdown/components/text-area.md @@ -0,0 +1,33 @@ +--- +title: Text area +description: "A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text fi" +category: inputs +documentationUrl: https://spectrum.adobe.com/page/text-area/ +tags: + - component + - schema + - inputs +--- + +A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| hideLabel | boolean | - | false | No | - | +| value | string | - | - | No | from minValue to maxValue | +| width | number | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| isRequired | boolean | - | false | No | - | +| hasCharacterCount | boolean | - | false | No | - | +| showValidIcon | boolean | - | false | No | - | +| isError | boolean | - | false | No | - | +| isDisabled | boolean | - | false | No | - | +| hideDragIcon | boolean | - | false | No | - | +| height | number | - | - | No | If undefined, height is dynamic and grows with input text. | +| helpText | string | - | - | No | - | +| errorMessage | string | - | - | No | - | +| inputType | string | text, url, phone, email, password | text | No | - | +| state | string | default, hover, focus + hover, focus + not hover, keyboard focus | default | No | - | diff --git a/docs/markdown/components/text-field.md b/docs/markdown/components/text-field.md new file mode 100644 index 00000000..de32e367 --- /dev/null +++ b/docs/markdown/components/text-field.md @@ -0,0 +1,30 @@ +--- +title: Text field +description: "Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements." +category: inputs +documentationUrl: https://spectrum.adobe.com/page/text-field/ +tags: + - component + - schema + - inputs +--- + +Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| labelPosition | string | top, side | top | No | - | +| hideLabel | boolean | - | false | No | - | +| value | string | - | - | No | from minValue to maxValue | +| width | number | - | - | No | - | +| size | string | s, m, l, xl | m | No | - | +| necessityIndicator | string | text, icon | icon | No | - | +| isRequired | boolean | - | false | No | - | +| hasCharacterCount | boolean | - | false | No | - | +| showValidIcon | boolean | - | false | No | - | +| isError | boolean | - | false | No | If there is an error, this property overrides show valid icon. | +| isDisabled | boolean | - | false | No | - | +| helpText | string | - | - | No | - | +| errorMessage | string | - | - | No | - | +| state | string | default, hover, focus + hover, focus + not hover, keyboard focus | default | No | - | diff --git a/docs/markdown/components/thumbnail.md b/docs/markdown/components/thumbnail.md new file mode 100644 index 00000000..25ddeb9c --- /dev/null +++ b/docs/markdown/components/thumbnail.md @@ -0,0 +1,17 @@ +--- +title: Thumbnail +description: "Thumbnails are small representations of images or content used for previews and navigation in galleries, lists, and media collections." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/thumbnail/ +tags: + - component + - schema + - navigation +--- + +Thumbnails are small representations of images or content used for previews and navigation in galleries, lists, and media collections. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | number | 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | - | No | - | +| state | string | default, disabled | default | No | - | diff --git a/docs/markdown/components/toast.md b/docs/markdown/components/toast.md new file mode 100644 index 00000000..94a258d8 --- /dev/null +++ b/docs/markdown/components/toast.md @@ -0,0 +1,19 @@ +--- +title: Toast +description: "Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/toast/ +tags: + - component + - schema + - feedback +--- + +Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| text | string | - | - | No | - | +| variant | string | neutral, informative, positive, negative | neutral | No | - | +| actionLabel | string | - | - | No | If undefined, this button does not appear. | +| isAutoDismissible | boolean | - | false | No | - | diff --git a/docs/markdown/components/tooltip.md b/docs/markdown/components/tooltip.md new file mode 100644 index 00000000..99c42e36 --- /dev/null +++ b/docs/markdown/components/tooltip.md @@ -0,0 +1,23 @@ +--- +title: Tooltip +description: "Tooltips show contextual help or information about specific components when a user hovers or focuses on them." +category: feedback +documentationUrl: https://spectrum.adobe.com/page/tooltip/ +tags: + - component + - schema + - feedback +--- + +Tooltips show contextual help or information about specific components when a user hovers or focuses on them. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| label | string | - | - | No | - | +| variant | string | neutral, informative, negative | neutral | No | - | +| hasIcon | boolean | - | false | No | If the neutral variant, there is never an icon. | +| maxWidth | number | - | 160 | No | units: pixels | +| placement | string | top, bottom, left, right | top | No | - | +| shouldFlip | boolean | - | false | No | - | +| offset | number | - | 4 | No | units: pixels | +| containerPadding | number | - | 8 | No | units: pixels | diff --git a/docs/markdown/components/tray.md b/docs/markdown/components/tray.md new file mode 100644 index 00000000..527305b2 --- /dev/null +++ b/docs/markdown/components/tray.md @@ -0,0 +1,16 @@ +--- +title: Tray +description: "Trays are containers that display transient content such as menus, options, additional actions, and more. They only exist on mobile experiences and are used for" +category: containers +documentationUrl: https://spectrum.adobe.com/page/tray/ +tags: + - component + - schema + - containers +--- + +Trays are containers that display transient content such as menus, options, additional actions, and more. They only exist on mobile experiences and are used for exposing types of content that may be too overwhelming for popovers. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| height | string | - | auto | No | - | diff --git a/docs/markdown/components/tree-view.md b/docs/markdown/components/tree-view.md new file mode 100644 index 00000000..ffc60074 --- /dev/null +++ b/docs/markdown/components/tree-view.md @@ -0,0 +1,23 @@ +--- +title: Tree view +description: "A tree view provides users with a way to navigate nested hierarchical information." +category: navigation +documentationUrl: https://spectrum.adobe.com/page/tree-view/ +tags: + - component + - schema + - navigation +--- + +A tree view provides users with a way to navigate nested hierarchical information. + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| size | string | s, m, l, xl | m | No | - | +| isDetached | boolean | - | false | No | - | +| isEmphasized | boolean | - | false | No | - | +| showDragIcon | boolean | - | false | No | - | +| selectionMode | string | single, multiple | multiple | No | - | +| selectionStyle | string | checkbox, highlight | checkbox | No | - | +| selectionBehavior | string | toggle, replace | toggle | No | - | +| state | string | default, hover, down, keyboard focus | default | No | - | diff --git a/docs/markdown/registry/anatomy-terms.md b/docs/markdown/registry/anatomy-terms.md new file mode 100644 index 00000000..ef149bea --- /dev/null +++ b/docs/markdown/registry/anatomy-terms.md @@ -0,0 +1,36 @@ +--- +title: Anatomy terms +description: Anatomical part names used in design tokens and component structures +tags: + - registry + - anatomy-terms +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| edge | Edge | The outer boundary or border of a component | - | +| visual | Visual | Visual elements like icons, images, or decorative elements | - | +| text | Text | Text content or labels | - | +| control | Control | Interactive control elements like checkboxes or radio buttons | - | +| border | Border | Border or outline of a component | - | +| background | Background | Background surface or fill | - | +| icon | Icon | Icon elements | - | +| label | Label | Text labels | - | +| content | Content | Main content area | - | +| top | Top | Top edge or boundary | - | +| bottom | Bottom | Bottom edge or boundary | - | +| start | Start | Start edge (left in LTR, right in RTL) | - | +| end | End | End edge (right in LTR, left in RTL) | - | +| body | Body | Main body or content container | - | +| header | Header | Header section | - | +| footer | Footer | Footer section | - | +| divider | Divider | Dividing line or separator | - | +| handle | Handle | Draggable handle element | - | +| indicator | Indicator | Visual indicator or marker | - | +| track | Track | Track or rail element (e.g., in sliders) | - | +| thumb | Thumb | Draggable thumb element (e.g., in sliders) | - | +| avatar | Avatar | User avatar or profile image | - | +| badge | Badge | Badge or notification indicator | - | +| pill | Pill | Pill-shaped element | - | + diff --git a/docs/markdown/registry/categories.md b/docs/markdown/registry/categories.md new file mode 100644 index 00000000..fc529b91 --- /dev/null +++ b/docs/markdown/registry/categories.md @@ -0,0 +1,20 @@ +--- +title: Categories +description: Component categories for organization and discovery +tags: + - registry + - categories +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| actions | Actions | Components that allow users to perform actions | - | +| containers | Containers | Components that contain or organize other content | - | +| data-visualization | Data Visualization | Components for displaying data and charts | data visualization | +| feedback | Feedback | Components that provide feedback to users | - | +| inputs | Inputs | Components for user input and data entry | - | +| navigation | Navigation | Components for navigation and wayfinding | - | +| status | Status | Components that indicate status or state | - | +| typography | Typography | Text and typography components | - | + diff --git a/docs/markdown/registry/components.md b/docs/markdown/registry/components.md new file mode 100644 index 00000000..371d76bc --- /dev/null +++ b/docs/markdown/registry/components.md @@ -0,0 +1,66 @@ +--- +title: Components +description: Spectrum component names +tags: + - registry + - components +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| accordion | Accordion | - | - | +| action-bar | Action Bar | - | - | +| action-button | Action Button | - | - | +| action-group | Action Group | - | - | +| alert-banner | Alert Banner | - | - | +| alert-dialog | Alert Dialog | - | - | +| avatar | Avatar | - | - | +| avatar-group | Avatar Group | - | - | +| badge | Badge | - | - | +| breadcrumbs | Breadcrumbs | - | - | +| button | Button | - | - | +| button-group | Button Group | - | - | +| calendar | Calendar | - | - | +| checkbox | Checkbox | - | - | +| checkbox-group | Checkbox Group | - | - | +| close-button | Close Button | - | - | +| color-area | Color Area | - | - | +| color-slider | Color Slider | - | - | +| color-wheel | Color Wheel | - | - | +| combo-box | Combo Box | - | - | +| contextual-help | Contextual Help | - | - | +| date-picker | Date Picker | - | - | +| divider | Divider | - | - | +| drop-zone | Drop Zone | - | - | +| field-label | Field Label | - | - | +| help-text | Help Text | - | - | +| illustrated-message | Illustrated Message | - | - | +| in-line-alert | In-Line Alert | - | - | +| link | Link | - | - | +| menu | Menu | - | - | +| meter | Meter | - | - | +| number-field | Number Field | - | - | +| picker | Picker | - | - | +| popover | Popover | - | - | +| progress-bar | Progress Bar | - | - | +| progress-circle | Progress Circle | - | - | +| radio-button | Radio Button | - | - | +| radio-group | Radio Group | - | - | +| rating | Rating | - | - | +| search-field | Search Field | - | - | +| select-box | Select Box | - | - | +| slider | Slider | - | - | +| status-light | Status Light | - | - | +| swatch | Swatch | - | - | +| switch | Switch | - | - | +| table | Table | - | - | +| tabs | Tabs | - | - | +| tag | Tag | - | - | +| tag-group | Tag Group | - | - | +| text-area | Text Area | - | - | +| text-field | Text Field | - | - | +| toast | Toast | - | - | +| tooltip | Tooltip | - | - | +| tray | Tray | - | - | + diff --git a/docs/markdown/registry/glossary.md b/docs/markdown/registry/glossary.md new file mode 100644 index 00000000..2c9ecd00 --- /dev/null +++ b/docs/markdown/registry/glossary.md @@ -0,0 +1,17 @@ +--- +title: Glossary +description: General design system terminology and concepts +tags: + - registry + - glossary +--- + + +| ID | Label | Description | Definition | +| --- | --- | --- | --- | +| design-token | Design Token | A named entity that stores visual design attributes | A named variable that stores a visual design attribute (color, spacing, typography, etc.) to enable consistent, scalable design | +| superordinate | Superordinate | A higher-level category or class that a concept belongs to | A word or phrase that describes a higher-level order or category within a system of classification | +| essential-characteristic | Essential Characteristic | A key feature that distinguishes a concept from others | A distinguishing feature or attribute that helps define what a concept is and how it differs from related concepts | +| descriptive-language | Descriptive Language | A short phrase that explains a complex concept | A short phrase or sentence used to explain a concept when a single word or term is insufficient or unclear | +| multi-platform-design-system | Multi-Platform Design System | A design system that supports multiple platforms with shared principles but platform-specific implementations | A design system where multiple platforms are supported with implementations that may differ, but all follow core principles and shared terminology | + diff --git a/docs/markdown/registry/navigation-terms.md b/docs/markdown/registry/navigation-terms.md new file mode 100644 index 00000000..9edb9e1a --- /dev/null +++ b/docs/markdown/registry/navigation-terms.md @@ -0,0 +1,19 @@ +--- +title: Navigation terms +description: Navigation-specific terminology for app frame and navigation components +tags: + - registry + - navigation-terms +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| side-navigation | Side Navigation | A navigation panel typically positioned on the left side of an application | side nav, sidebar navigation | +| side-navigation-item | Side Navigation Item | An individual item within side navigation | side nav item | +| header | Header | The top bar of an application frame | app header, top bar | +| header-navigation-item | Header Navigation Item | An individual navigation item within the header | - | +| navigation-item | Navigation Item | A generic term for clickable navigation elements | nav item | +| drag-area | Drag Area | An area that can be dragged to resize the side navigation panel | - | +| state-control | State Control | A control to show/hide side navigation labels or minimize/maximize the panel | hamburger icon, menu toggle | + diff --git a/docs/markdown/registry/platforms.md b/docs/markdown/registry/platforms.md new file mode 100644 index 00000000..dc95ac85 --- /dev/null +++ b/docs/markdown/registry/platforms.md @@ -0,0 +1,17 @@ +--- +title: Platforms +description: Platform names for multi-platform design system support +tags: + - registry + - platforms +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| desktop | Desktop | Desktop platform (macOS, Windows, Linux) | - | +| mobile | Mobile | Mobile platform (iOS, Android) | - | +| web | Web | Web browsers | - | +| ios | iOS | Apple iOS mobile platform | - | +| android | Android | Google Android mobile platform | - | + diff --git a/docs/markdown/registry/scale-values.md b/docs/markdown/registry/scale-values.md new file mode 100644 index 00000000..21951b82 --- /dev/null +++ b/docs/markdown/registry/scale-values.md @@ -0,0 +1,24 @@ +--- +title: Scale values +description: Numeric scale values used in design tokens +tags: + - registry + - scale-values +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| 50 | Scale 50 | - | - | +| 75 | Scale 75 | - | - | +| 100 | Scale 100 | - | - | +| 200 | Scale 200 | - | - | +| 300 | Scale 300 | - | - | +| 400 | Scale 400 | - | - | +| 500 | Scale 500 | - | - | +| 600 | Scale 600 | - | - | +| 700 | Scale 700 | - | - | +| 800 | Scale 800 | - | - | +| 900 | Scale 900 | - | - | +| 1000 | Scale 1000 | - | - | + diff --git a/docs/markdown/registry/sizes.md b/docs/markdown/registry/sizes.md new file mode 100644 index 00000000..325f5d25 --- /dev/null +++ b/docs/markdown/registry/sizes.md @@ -0,0 +1,36 @@ +--- +title: Sizes +description: Standard size scale values used across Spectrum +tags: + - registry + - sizes +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| xs | Extra Small | - | extra-small | +| s | Small | - | small | +| m | Medium | - | medium | +| l | Large | - | large | +| xl | Extra Large | - | extra-large | +| xxl | 2X Large | - | - | +| xxxl | 3X Large | - | - | +| 50 | Size 50 | - | - | +| 75 | Size 75 | - | - | +| 100 | Size 100 | - | - | +| 200 | Size 200 | - | - | +| 300 | Size 300 | - | - | +| 400 | Size 400 | - | - | +| 500 | Size 500 | - | - | +| 600 | Size 600 | - | - | +| 700 | Size 700 | - | - | +| 800 | Size 800 | - | - | +| 900 | Size 900 | - | - | +| 1000 | Size 1000 | - | - | +| 1100 | Size 1100 | - | - | +| 1200 | Size 1200 | - | - | +| 1300 | Size 1300 | - | - | +| 1400 | Size 1400 | - | - | +| 1500 | Size 1500 | - | - | + diff --git a/docs/markdown/registry/states.md b/docs/markdown/registry/states.md new file mode 100644 index 00000000..08b26767 --- /dev/null +++ b/docs/markdown/registry/states.md @@ -0,0 +1,22 @@ +--- +title: States +description: Interaction states for components +tags: + - registry + - states +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| default | Default | The default, resting state of a component | - | +| hover | Hover | Mouse hover state | - | +| active | Active | Active or pressed state | - | +| focus | Focus | Focused state (generic) | - | +| keyboard-focus | Keyboard Focus | Focused via keyboard navigation | keyboard focus | +| disabled | Disabled | Disabled or inactive state | - | +| down | Down | Pressed or down state (mouse button down) | - | +| pending | Pending | Loading or pending state | - | +| selected | Selected | Selected or chosen state | - | +| drag-and-drop | Drag and Drop | Being dragged or drag target state | drag and drop | + diff --git a/docs/markdown/registry/token-terminology.md b/docs/markdown/registry/token-terminology.md new file mode 100644 index 00000000..9ad79f89 --- /dev/null +++ b/docs/markdown/registry/token-terminology.md @@ -0,0 +1,18 @@ +--- +title: Token terminology +description: Token-specific terminology for design token naming and structure +tags: + - registry + - token-terminology +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| component | Component | In token naming, refers to the UI component the token is designed for | - | +| object | Object | In token naming, refers to the specific part or element being styled | - | +| scale | Scale | In token naming, refers to the size or intensity level | - | +| property | Property | In token naming, refers to the CSS/style property being defined | - | +| edge | Edge | In token naming, refers to the outer boundary of a component | - | +| visual | Visual | In token naming, refers to the visible graphic element of a component | - | + diff --git a/docs/markdown/registry/variants.md b/docs/markdown/registry/variants.md new file mode 100644 index 00000000..a80faf20 --- /dev/null +++ b/docs/markdown/registry/variants.md @@ -0,0 +1,36 @@ +--- +title: Variants +description: Color and style variants used across components +tags: + - registry + - variants +--- + + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| accent | Accent | Primary accent color variant | - | +| negative | Negative | Destructive or negative action variant | - | +| primary | Primary | Primary emphasis variant | - | +| secondary | Secondary | Secondary emphasis variant | - | +| positive | Positive | Affirmative or positive action variant | - | +| notice | Notice | Notice or attention variant | - | +| informative | Informative | Informational variant | - | +| neutral | Neutral | Neutral variant | - | +| gray | Gray | Gray color variant | - | +| red | Red | Red color variant | - | +| orange | Orange | Orange color variant | - | +| yellow | Yellow | Yellow color variant | - | +| chartreuse | Chartreuse | Chartreuse color variant | - | +| celery | Celery | Celery color variant | - | +| green | Green | Green color variant | - | +| seafoam | Seafoam | Seafoam color variant | - | +| cyan | Cyan | Cyan color variant | - | +| blue | Blue | Blue color variant | - | +| indigo | Indigo | Indigo color variant | - | +| purple | Purple | Purple color variant | - | +| fuchsia | Fuchsia | Fuchsia color variant | - | +| magenta | Magenta | Magenta color variant | - | +| pink | Pink | Pink color variant | - | +| over-background | Over Background | Designed to be used over backgrounds | over background | + diff --git a/docs/markdown/tokens/color-aliases.md b/docs/markdown/tokens/color-aliases.md new file mode 100644 index 00000000..cdd83b66 --- /dev/null +++ b/docs/markdown/tokens/color-aliases.md @@ -0,0 +1,181 @@ +--- +title: color aliases +description: Design tokens from color-aliases.json +tags: + - tokens + - color-aliases +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| focus-indicator-color | [{blue-800}](/tokens/color-palette/#blue-800) | light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) | No | - | - | +| static-white-focus-indicator-color | [{white}](/tokens/color-palette/#white) | rgb(255, 255, 255) | No | - | - | +| static-black-focus-indicator-color | [{black}](/tokens/color-palette/#black) | rgb(0, 0, 0) | No | - | - | +| overlay-color | [{black}](/tokens/color-palette/#black) | rgb(0, 0, 0) | No | - | - | +| overlay-opacity | - | light: 0.4; dark: 0.6; wireframe: 0.4 | No | - | - | +| drop-shadow-color | [{drop-shadow-color-100}](/tokens/color-aliases/#drop-shadow-color-100) | light: rgba(0, 0, 0, 0.12); dark: rgba(0, 0, 0, 0.36); wireframe: rgba(0, 0, 0, 0.12) | Yes | Replaced with drop-shadow-color-100 | Replaced by [drop-shadow-color-100](/tokens/color-aliases/#drop-shadow-color-100) | +| opacity-disabled | 0.3 | 0.3 | No | - | - | +| background-base-color | [{gray-25}](/tokens/color-palette/#gray-25) | dark: rgb(17, 17, 17); light: rgb(255, 255, 255); wireframe: rgb(254, 254, 255) | No | - | - | +| background-layer-1-color | [{gray-50}](/tokens/color-palette/#gray-50) | light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) | No | - | - | +| background-layer-2-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| neutral-background-color-default | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| neutral-background-color-hover | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-background-color-down | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-background-color-key-focus | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-background-color-selected-default | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| neutral-background-color-selected-hover | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-background-color-selected-down | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-background-color-selected-key-focus | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-subdued-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| neutral-subdued-background-color-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| neutral-subdued-background-color-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| neutral-subdued-background-color-key-focus | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| neutral-subdued-content-color-selected | [{neutral-subdued-content-color-down}](/tokens/color-aliases/#neutral-subdued-content-color-down) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| accent-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| accent-background-color-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| accent-background-color-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| accent-background-color-key-focus | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| accent-content-color-selected | [{accent-content-color-down}](/tokens/color-aliases/#accent-content-color-down) | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| informative-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| informative-background-color-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| informative-background-color-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| informative-background-color-key-focus | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| negative-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| negative-background-color-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| negative-background-color-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| negative-background-color-key-focus | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| positive-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| positive-background-color-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| positive-background-color-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| positive-background-color-key-focus | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| notice-background-color-default | - | dark: [object Object]; light: [object Object]; wireframe: [object Object] | No | - | - | +| disabled-background-color | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| disabled-static-white-background-color | [{transparent-white-100}](/tokens/color-palette/#transparent-white-100) | rgba(255, 255, 255, 0.11) | No | - | - | +| disabled-static-black-background-color | [{transparent-black-100}](/tokens/color-palette/#transparent-black-100) | rgba(0, 0, 0, 0.09) | No | - | - | +| gray-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| red-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| orange-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| yellow-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| chartreuse-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| celery-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| green-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| seafoam-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| cyan-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| blue-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| indigo-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| purple-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| fuchsia-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| magenta-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| background-opacity-default | 0 | 0 | No | - | - | +| background-opacity-hover | 0.1 | 0.1 | No | - | - | +| background-opacity-down | 0.1 | 0.1 | No | - | - | +| background-opacity-key-focus | 0.1 | 0.1 | No | - | - | +| neutral-content-color-default | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| neutral-content-color-hover | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-content-color-down | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-content-color-focus-hover | [{neutral-content-color-down}](/tokens/color-aliases/#neutral-content-color-down) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-content-color-focus | [{neutral-content-color-down}](/tokens/color-aliases/#neutral-content-color-down) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-content-color-key-focus | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| neutral-subdued-content-color-default | [{gray-700}](/tokens/color-palette/#gray-700) | light: rgb(80, 80, 80); dark: rgb(175, 175, 175); wireframe: rgb(44, 77, 149) | No | - | - | +| neutral-subdued-content-color-hover | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| neutral-subdued-content-color-down | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| neutral-subdued-content-color-key-focus | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| accent-content-color-default | [{accent-color-900}](/tokens/semantic-color-palette/#accent-color-900) | light: rgb(59, 99, 251); dark: rgb(86, 129, 255); wireframe: rgb(74, 111, 195) | No | - | - | +| accent-content-color-hover | [{accent-color-1000}](/tokens/semantic-color-palette/#accent-color-1000) | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| accent-content-color-down | [{accent-color-1000}](/tokens/semantic-color-palette/#accent-color-1000) | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| accent-content-color-key-focus | [{accent-color-1000}](/tokens/semantic-color-palette/#accent-color-1000) | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| negative-content-color-default | [{negative-color-900}](/tokens/semantic-color-palette/#negative-color-900) | light: rgb(215, 50, 32); dark: rgb(252, 67, 46); wireframe: rgb(74, 111, 195) | No | - | - | +| negative-content-color-hover | [{negative-color-1000}](/tokens/semantic-color-palette/#negative-color-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| negative-content-color-down | [{negative-color-1000}](/tokens/semantic-color-palette/#negative-color-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| negative-content-color-key-focus | [{negative-color-1000}](/tokens/semantic-color-palette/#negative-color-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| disabled-content-color | [{gray-400}](/tokens/color-palette/#gray-400) | light: rgb(198, 198, 198); dark: rgb(68, 68, 68); wireframe: rgb(180, 199, 239) | No | - | - | +| disabled-static-white-content-color | [{transparent-white-400}](/tokens/color-palette/#transparent-white-400) | rgba(255, 255, 255, 0.21) | No | - | - | +| disabled-static-black-content-color | [{transparent-black-400}](/tokens/color-palette/#transparent-black-400) | rgba(0, 0, 0, 0.22) | No | - | - | +| neutral-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| accent-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| informative-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| negative-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| notice-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| positive-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| gray-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| red-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| orange-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| yellow-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| chartreuse-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| celery-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| green-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| seafoam-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| cyan-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| blue-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| indigo-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| purple-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| fuchsia-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| magenta-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| disabled-border-color | [{gray-300}](/tokens/color-palette/#gray-300) | light: rgb(218, 218, 218); dark: rgb(57, 57, 57); wireframe: rgb(207, 219, 245) | No | - | - | +| disabled-static-white-border-color | [{transparent-white-300}](/tokens/color-palette/#transparent-white-300) | rgba(255, 255, 255, 0.17) | No | - | - | +| disabled-static-black-border-color | [{transparent-black-300}](/tokens/color-palette/#transparent-black-300) | rgba(0, 0, 0, 0.15) | No | - | - | +| negative-border-color-default | [{negative-color-900}](/tokens/semantic-color-palette/#negative-color-900) | light: rgb(215, 50, 32); dark: rgb(252, 67, 46); wireframe: rgb(74, 111, 195) | No | - | - | +| negative-border-color-hover | [{negative-color-1000}](/tokens/semantic-color-palette/#negative-color-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| negative-border-color-down | [{negative-color-1100}](/tokens/semantic-color-palette/#negative-color-1100) | light: rgb(156, 33, 19); dark: rgb(255, 134, 120); wireframe: rgb(52, 79, 140) | No | - | - | +| negative-border-color-focus-hover | [{negative-border-color-down}](/tokens/color-aliases/#negative-border-color-down) | light: rgb(156, 33, 19); dark: rgb(255, 134, 120); wireframe: rgb(52, 79, 140) | No | - | - | +| negative-border-color-focus | [{negative-color-1000}](/tokens/semantic-color-palette/#negative-color-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| negative-border-color-key-focus | [{negative-color-1000}](/tokens/semantic-color-palette/#negative-color-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| background-elevated-color | - | dark: [object Object]; light: [object Object]; wireframe: [object Object] | No | - | - | +| background-pasteboard-color | - | dark: [object Object]; light: [object Object]; wireframe: [object Object] | No | - | - | +| brown-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| cinnamon-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| pink-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| silver-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| turquoise-visual-color | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| brown-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| cinnamon-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| pink-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| silver-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| turquoise-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| title-color | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| drop-shadow-color-100 | - | light: rgba(0, 0, 0, 0.12); dark: rgba(0, 0, 0, 0.36); wireframe: rgba(0, 0, 0, 0.12) | No | - | - | +| drop-shadow-color-200 | - | light: rgba(0, 0, 0, 0.16); dark: rgba(0, 0, 0, 0.48); wireframe: rgba(0, 0, 0, 0.16) | No | - | - | +| drop-shadow-color-300 | - | light: rgba(0, 0, 0, 0.2); dark: rgba(0, 0, 0, 0.6); wireframe: rgba(0, 0, 0, 0.2) | No | - | - | +| drop-shadow-emphasized-default-color | [{drop-shadow-color-100}](/tokens/color-aliases/#drop-shadow-color-100) | light: rgba(0, 0, 0, 0.12); dark: rgba(0, 0, 0, 0.36); wireframe: rgba(0, 0, 0, 0.12) | No | - | - | +| drop-shadow-emphasized-hover-color | [{drop-shadow-color-200}](/tokens/color-aliases/#drop-shadow-color-200) | light: rgba(0, 0, 0, 0.16); dark: rgba(0, 0, 0, 0.48); wireframe: rgba(0, 0, 0, 0.16) | No | - | - | +| drop-shadow-elevated-color | [{drop-shadow-color-200}](/tokens/color-aliases/#drop-shadow-color-200) | light: rgba(0, 0, 0, 0.16); dark: rgba(0, 0, 0, 0.48); wireframe: rgba(0, 0, 0, 0.16) | No | - | - | +| neutral-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| static-black-text-color | [{black}](/tokens/color-palette/#black) | rgb(0, 0, 0) | No | - | - | +| static-white-text-color | [{white}](/tokens/color-palette/#white) | rgb(255, 255, 255) | No | - | - | +| track-color | [{gray-300}](/tokens/color-palette/#gray-300) | light: rgb(218, 218, 218); dark: rgb(57, 57, 57); wireframe: rgb(207, 219, 245) | No | - | - | +| static-black-track-color | [{transparent-black-300}](/tokens/color-palette/#transparent-black-300) | rgba(0, 0, 0, 0.15) | No | - | - | +| static-white-track-color | [{transparent-white-300}](/tokens/color-palette/#transparent-white-300) | rgba(255, 255, 255, 0.17) | No | - | - | +| static-black-track-indicator-color | [{transparent-black-900}](/tokens/color-palette/#transparent-black-900) | rgba(0, 0, 0, 0.93) | No | - | - | +| static-white-track-indicator-color | [{transparent-white-900}](/tokens/color-palette/#transparent-white-900) | rgba(255, 255, 255, 0.94) | No | - | - | +| drop-shadow-dragged-color | [{drop-shadow-color-300}](/tokens/color-aliases/#drop-shadow-color-300) | light: rgba(0, 0, 0, 0.2); dark: rgba(0, 0, 0, 0.6); wireframe: rgba(0, 0, 0, 0.2) | No | - | - | +| gray-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| blue-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| green-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| orange-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| red-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| brown-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| cinnamon-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| celery-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| chartreuse-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| cyan-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| fuchsia-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| indigo-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| magenta-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| pink-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| purple-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| seafoam-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| silver-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| turquoise-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| yellow-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| drop-shadow-ambient-color | - | light: rgba(0, 0, 0, 0.08); dark: rgba(0, 0, 0, 0.24); wireframe: rgba(0, 0, 0, 0.08) | No | - | - | +| drop-shadow-transition-color | - | light: rgba(0, 0, 0, 0.04); dark: rgba(0, 0, 0, 0.12); wireframe: rgba(0, 0, 0, 0.04) | No | - | - | +| drop-shadow-emphasized-key-color | - | light: rgba(0, 0, 0, 0.08); dark: rgba(0, 0, 0, 0.24); wireframe: rgba(0, 0, 0, 0.08) | No | - | - | +| drop-shadow-emphasized-hover-key-color | - | light: rgba(0, 0, 0, 0.12); dark: rgba(0, 0, 0, 0.36); wireframe: rgba(0, 0, 0, 0.12) | No | - | - | +| drop-shadow-elevated-key-color | - | light: rgba(0, 0, 0, 0.12); dark: rgba(0, 0, 0, 0.36); wireframe: rgba(0, 0, 0, 0.12) | No | - | - | +| drop-shadow-dragged-key-color | - | light: rgba(0, 0, 0, 0.16); dark: rgba(0, 0, 0, 0.48); wireframe: rgba(0, 0, 0, 0.16) | No | - | - | +| drop-shadow-emphasized | [object Object],[object Object],[object Object] | [object Object],[object Object],[object Object] | No | - | - | +| drop-shadow-emphasized-hover | [object Object],[object Object],[object Object] | [object Object],[object Object],[object Object] | No | - | - | +| drop-shadow-elevated | [object Object],[object Object],[object Object] | [object Object],[object Object],[object Object] | No | - | - | +| drop-shadow-dragged | [object Object],[object Object],[object Object] | [object Object],[object Object],[object Object] | No | - | - | + diff --git a/docs/markdown/tokens/color-component.md b/docs/markdown/tokens/color-component.md new file mode 100644 index 00000000..a1af1dd8 --- /dev/null +++ b/docs/markdown/tokens/color-component.md @@ -0,0 +1,85 @@ +--- +title: color component +description: Design tokens from color-component.json +tags: + - tokens + - color-component +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| swatch-border-color | [{gray-1000}](/tokens/color-palette/#gray-1000) | dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) | No | - | - | +| swatch-border-opacity | 0.42 | 0.42 | No | - | - | +| swatch-disabled-icon-border-color | [{black}](/tokens/color-palette/#black) | rgb(0, 0, 0) | No | - | - | +| swatch-disabled-icon-border-opacity | 0.42 | 0.42 | No | - | - | +| thumbnail-border-color | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| thumbnail-border-opacity | 0.1 | 0.1 | No | - | - | +| thumbnail-opacity-disabled | [{opacity-disabled}](/tokens/color-aliases/#opacity-disabled) | 0.3 | No | - | - | +| opacity-checkerboard-square-light | [{white}](/tokens/color-palette/#white) | rgb(255, 255, 255) | No | - | - | +| opacity-checkerboard-square-dark | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| avatar-opacity-disabled | [{opacity-disabled}](/tokens/color-aliases/#opacity-disabled) | 0.3 | No | - | - | +| color-area-border-color | [{gray-1000}](/tokens/color-palette/#gray-1000) | dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) | No | - | - | +| color-area-border-opacity | 0.1 | 0.1 | No | - | - | +| color-slider-border-color | [{gray-1000}](/tokens/color-palette/#gray-1000) | dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) | No | - | - | +| color-slider-border-opacity | 0.1 | 0.1 | No | - | - | +| color-loupe-drop-shadow-color | [{drop-shadow-elevated-color}](/tokens/color-aliases/#drop-shadow-elevated-color) | light: rgba(0, 0, 0, 0.16); dark: rgba(0, 0, 0, 0.48); wireframe: rgba(0, 0, 0, 0.16) | Yes | Use `drop-shadow-elevated-color` instead | Replaced by [drop-shadow-elevated-color](/tokens/color-aliases/#drop-shadow-elevated-color) | +| color-loupe-drop-shadow-y | [{drop-shadow-elevated-y}](/tokens/layout/#drop-shadow-elevated-y) | 2px | Yes | - | - | +| color-loupe-drop-shadow-blur | [{drop-shadow-elevated-blur}](/tokens/layout/#drop-shadow-elevated-blur) | 8px | Yes | - | - | +| color-loupe-inner-border | [{transparent-black-200}](/tokens/color-palette/#transparent-black-200) | rgba(0, 0, 0, 0.12) | No | - | - | +| color-loupe-outer-border | [{white}](/tokens/color-palette/#white) | rgb(255, 255, 255) | No | - | - | +| card-selection-background-color | - | light: rgba(255, 255, 255, 0.51); dark: rgba(0, 0, 0, 0.56); wireframe: rgba(0, 0, 0, 0.56) | No | - | - | +| card-selection-background-color-opacity | 0.95 | 0.95 | No | - | - | +| drop-zone-background-color | [{accent-visual-color}](/tokens/color-aliases/#accent-visual-color) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| drop-zone-background-color-opacity | 0.1 | 0.1 | No | - | - | +| drop-zone-background-color-opacity-filled | 0.3 | 0.3 | No | - | - | +| coach-mark-pagination-color | [{gray-600}](/tokens/color-palette/#gray-600) | light: rgb(113, 113, 113); dark: rgb(138, 138, 138); wireframe: rgb(72, 110, 194) | No | - | - | +| color-handle-inner-border-color | [{black}](/tokens/color-palette/#black) | rgb(0, 0, 0) | No | - | - | +| color-handle-inner-border-opacity | 0.42 | 0.42 | No | - | - | +| color-handle-outer-border-color | [{black}](/tokens/color-palette/#black) | rgb(0, 0, 0) | No | - | - | +| color-handle-outer-border-opacity | [{color-handle-inner-border-opacity}](/tokens/color-component/#color-handle-inner-border-opacity) | 0.42 | No | - | - | +| color-handle-drop-shadow-color | [{drop-shadow-color}](/tokens/color-aliases/#drop-shadow-color) | light: rgba(0, 0, 0, 0.12); dark: rgba(0, 0, 0, 0.36); wireframe: rgba(0, 0, 0, 0.12) | Yes | Express does not need a separate design for Color loupe and Color handle components | Replaced by [drop-shadow-color](/tokens/color-aliases/#drop-shadow-color) | +| floating-action-button-drop-shadow-color | [{transparent-black-300}](/tokens/color-palette/#transparent-black-300) | rgba(0, 0, 0, 0.15) | No | - | - | +| floating-action-button-shadow-color | [{floating-action-button-drop-shadow-color}](/tokens/color-component/#floating-action-button-drop-shadow-color) | rgba(0, 0, 0, 0.15) | Yes | Use `floating-action-button-drop-shadow-color` instead | Replaced by [floating-action-button-drop-shadow-color](/tokens/color-component/#floating-action-button-drop-shadow-color) | +| table-row-hover-color | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| table-row-hover-opacity | 0.07 | 0.07 | No | - | - | +| table-selected-row-background-color | [{informative-background-color-default}](/tokens/color-aliases/#informative-background-color-default) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| table-selected-row-background-opacity | 0.1 | 0.1 | No | - | - | +| table-selected-row-background-color-non-emphasized | [{neutral-background-color-selected-default}](/tokens/color-aliases/#neutral-background-color-selected-default) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| table-selected-row-background-opacity-non-emphasized | 0.1 | 0.1 | No | - | - | +| table-row-down-opacity | 0.1 | 0.1 | No | - | - | +| table-selected-row-background-opacity-hover | 0.15 | 0.15 | No | - | - | +| table-selected-row-background-opacity-non-emphasized-hover | 0.15 | 0.15 | No | - | - | +| menu-item-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| menu-item-background-color-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| menu-item-background-color-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| menu-item-background-color-keyboard-focus | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| menu-item-background-color-disabled | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| popover-border-color | - | light: rgba(255, 255, 255, 0); dark: [object Object]; wireframe: [object Object] | No | - | - | +| popover-border-opacity | - | light: 0; dark: 1.0; wireframe: 0 | No | - | - | +| coach-indicator-color | [{blue-800}](/tokens/color-palette/#blue-800) | light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) | No | - | - | +| swatch-group-border-color | [{gray-1000}](/tokens/color-palette/#gray-1000) | dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) | No | - | - | +| avatar-border-color | [{gray-25}](/tokens/color-palette/#gray-25) | dark: rgb(17, 17, 17); light: rgb(255, 255, 255); wireframe: rgb(254, 254, 255) | No | - | - | +| standard-panel-gripper-color-drag | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| standard-panel-gripper-color | [{gray-500}](/tokens/color-palette/#gray-500) | light: rgb(143, 143, 143); dark: rgb(109, 109, 109); wireframe: rgb(108, 142, 217) | No | - | - | +| bar-panel-gripper-color | [{gray-200}](/tokens/color-palette/#gray-200) | light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) | No | - | - | +| bar-panel-gripper-color-drag | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| select-box-selected-border-color | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| tree-view-row-background-hover | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| tree-view-selected-row-background-color-emphasized | [{informative-background-color-default}](/tokens/color-aliases/#informative-background-color-default) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| tree-view-selected-row-background-default | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| tree-view-selected-row-background-hover | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| color-wheel-border-color | [{gray-1000}](/tokens/color-palette/#gray-1000) | dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) | No | - | - | +| color-wheel-border-opacity | 0.1 | 0.1 | No | - | - | +| action-bar-border-color | - | light: rgba(255, 255, 255, 0); dark: [object Object]; wireframe: rgba(255, 255, 255, 0) | No | - | - | +| card-background-well-color | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| card-background-loading-color | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| stack-item-background-color-hover | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| stack-item-background-color-down | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| stack-item-background-color-key-focus | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| stack-item-selected-background-color-default | [{gray-100}](/tokens/color-palette/#gray-100) | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| stack-item-selected-background-color-hover | [{gray-200}](/tokens/color-palette/#gray-200) | light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) | No | - | - | +| stack-item-selected-background-color-down | [{gray-200}](/tokens/color-palette/#gray-200) | light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) | No | - | - | +| stack-item-selected-background-color-key-focus | [{gray-200}](/tokens/color-palette/#gray-200) | light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) | No | - | - | +| stack-item-selected-background-color-emphasized | [{accent-background-color-default}](/tokens/color-aliases/#accent-background-color-default) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | + diff --git a/docs/markdown/tokens/color-palette.md b/docs/markdown/tokens/color-palette.md new file mode 100644 index 00000000..df13f612 --- /dev/null +++ b/docs/markdown/tokens/color-palette.md @@ -0,0 +1,384 @@ +--- +title: color palette +description: Design tokens from color-palette.json +tags: + - tokens + - color-palette +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| white | rgb(255, 255, 255) | rgb(255, 255, 255) | No | - | - | +| transparent-white-25 | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) | No | - | - | +| transparent-white-50 | rgba(255, 255, 255, 0.04) | rgba(255, 255, 255, 0.04) | No | - | - | +| transparent-white-75 | rgba(255, 255, 255, 0.07) | rgba(255, 255, 255, 0.07) | No | - | - | +| transparent-white-100 | rgba(255, 255, 255, 0.11) | rgba(255, 255, 255, 0.11) | No | - | - | +| transparent-white-200 | rgba(255, 255, 255, 0.14) | rgba(255, 255, 255, 0.14) | No | - | - | +| transparent-white-300 | rgba(255, 255, 255, 0.17) | rgba(255, 255, 255, 0.17) | No | - | - | +| transparent-white-400 | rgba(255, 255, 255, 0.21) | rgba(255, 255, 255, 0.21) | No | - | - | +| transparent-white-500 | rgba(255, 255, 255, 0.39) | rgba(255, 255, 255, 0.39) | No | - | - | +| transparent-white-600 | rgba(255, 255, 255, 0.51) | rgba(255, 255, 255, 0.51) | No | - | - | +| transparent-white-700 | rgba(255, 255, 255, 0.66) | rgba(255, 255, 255, 0.66) | No | - | - | +| transparent-white-800 | rgba(255, 255, 255, 0.85) | rgba(255, 255, 255, 0.85) | No | - | - | +| transparent-white-900 | rgba(255, 255, 255, 0.94) | rgba(255, 255, 255, 0.94) | No | - | - | +| transparent-white-1000 | rgb(255, 255, 255) | rgb(255, 255, 255) | No | - | - | +| black | rgb(0, 0, 0) | rgb(0, 0, 0) | No | - | - | +| transparent-black-25 | rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0) | No | - | - | +| transparent-black-50 | rgba(0, 0, 0, 0.03) | rgba(0, 0, 0, 0.03) | No | - | - | +| transparent-black-75 | rgba(0, 0, 0, 0.05) | rgba(0, 0, 0, 0.05) | No | - | - | +| transparent-black-100 | rgba(0, 0, 0, 0.09) | rgba(0, 0, 0, 0.09) | No | - | - | +| transparent-black-200 | rgba(0, 0, 0, 0.12) | rgba(0, 0, 0, 0.12) | No | - | - | +| transparent-black-300 | rgba(0, 0, 0, 0.15) | rgba(0, 0, 0, 0.15) | No | - | - | +| transparent-black-400 | rgba(0, 0, 0, 0.22) | rgba(0, 0, 0, 0.22) | No | - | - | +| transparent-black-500 | rgba(0, 0, 0, 0.44) | rgba(0, 0, 0, 0.44) | No | - | - | +| transparent-black-600 | rgba(0, 0, 0, 0.56) | rgba(0, 0, 0, 0.56) | No | - | - | +| transparent-black-700 | rgba(0, 0, 0, 0.69) | rgba(0, 0, 0, 0.69) | No | - | - | +| transparent-black-800 | rgba(0, 0, 0, 0.84) | rgba(0, 0, 0, 0.84) | No | - | - | +| transparent-black-900 | rgba(0, 0, 0, 0.93) | rgba(0, 0, 0, 0.93) | No | - | - | +| transparent-black-1000 | rgb(0, 0, 0) | rgb(0, 0, 0) | No | - | - | +| gray-25 | - | dark: rgb(17, 17, 17); light: rgb(255, 255, 255); wireframe: rgb(254, 254, 255) | No | - | - | +| gray-50 | - | light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) | No | - | - | +| gray-75 | - | light: rgb(243, 243, 243); dark: rgb(34, 34, 34); wireframe: rgb(241, 244, 251) | No | - | - | +| gray-100 | - | light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) | No | - | - | +| gray-200 | - | light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) | No | - | - | +| gray-300 | - | light: rgb(218, 218, 218); dark: rgb(57, 57, 57); wireframe: rgb(207, 219, 245) | No | - | - | +| gray-400 | - | light: rgb(198, 198, 198); dark: rgb(68, 68, 68); wireframe: rgb(180, 199, 239) | No | - | - | +| gray-500 | - | light: rgb(143, 143, 143); dark: rgb(109, 109, 109); wireframe: rgb(108, 142, 217) | No | - | - | +| gray-600 | - | light: rgb(113, 113, 113); dark: rgb(138, 138, 138); wireframe: rgb(72, 110, 194) | No | - | - | +| gray-700 | - | light: rgb(80, 80, 80); dark: rgb(175, 175, 175); wireframe: rgb(44, 77, 149) | No | - | - | +| gray-800 | - | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| gray-900 | - | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| gray-1000 | - | dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) | No | - | - | +| blue-100 | - | light: rgb(245, 249, 255); dark: rgb(14, 23, 63); wireframe: rgb(246, 248, 252) | No | - | - | +| blue-200 | - | light: rgb(229, 240, 254); dark: rgb(15, 28, 82); wireframe: rgb(235, 239, 248) | No | - | - | +| blue-300 | - | light: rgb(203, 226, 254); dark: rgb(12, 33, 117); wireframe: rgb(216, 224, 242) | No | - | - | +| blue-400 | - | light: rgb(172, 207, 253); dark: rgb(18, 45, 154); wireframe: rgb(192, 205, 234) | No | - | - | +| blue-500 | - | light: rgb(142, 185, 252); dark: rgb(26, 58, 195); wireframe: rgb(164, 183, 225) | No | - | - | +| blue-600 | - | light: rgb(114, 158, 253); dark: rgb(37, 73, 229); wireframe: rgb(135, 160, 215) | No | - | - | +| blue-700 | - | light: rgb(93, 137, 255); dark: rgb(52, 91, 248); wireframe: rgb(113, 142, 208) | No | - | - | +| blue-800 | - | light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) | No | - | - | +| blue-900 | - | light: rgb(59, 99, 251); dark: rgb(86, 129, 255); wireframe: rgb(74, 111, 195) | No | - | - | +| blue-1000 | - | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| blue-1100 | - | light: rgb(29, 62, 207); dark: rgb(124, 169, 252); wireframe: rgb(52, 79, 140) | No | - | - | +| blue-1200 | - | light: rgb(21, 50, 173); dark: rgb(152, 192, 252); wireframe: rgb(42, 65, 114) | No | - | - | +| blue-1300 | - | light: rgb(16, 40, 140); dark: rgb(181, 213, 253); wireframe: rgb(34, 51, 91) | No | - | - | +| blue-1400 | - | light: rgb(12, 31, 105); dark: rgb(213, 231, 254); wireframe: rgb(25, 39, 69) | No | - | - | +| blue-1500 | - | dark: rgb(238, 245, 255); light: rgb(14, 24, 67); wireframe: rgb(18, 27, 48) | No | - | - | +| blue-1600 | - | dark: rgb(255, 255, 255); light: rgb(7, 11, 30); wireframe: rgb(8, 12, 22) | No | - | - | +| red-100 | - | light: rgb(255, 246, 245); dark: rgb(54, 10, 3); wireframe: rgb(246, 248, 252) | No | - | - | +| red-200 | - | light: rgb(255, 235, 232); dark: rgb(68, 13, 5); wireframe: rgb(235, 239, 248) | No | - | - | +| red-300 | - | light: rgb(255, 214, 209); dark: rgb(87, 17, 7); wireframe: rgb(216, 224, 242) | No | - | - | +| red-400 | - | light: rgb(255, 188, 180); dark: rgb(115, 24, 11); wireframe: rgb(192, 205, 234) | No | - | - | +| red-500 | - | light: rgb(255, 157, 145); dark: rgb(147, 31, 17); wireframe: rgb(164, 183, 225) | No | - | - | +| red-600 | - | light: rgb(255, 118, 101); dark: rgb(177, 38, 23); wireframe: rgb(135, 160, 215) | No | - | - | +| red-700 | - | light: rgb(255, 81, 61); dark: rgb(205, 46, 29); wireframe: rgb(113, 142, 208) | No | - | - | +| red-800 | - | light: rgb(240, 56, 35); dark: rgb(223, 52, 34); wireframe: rgb(93, 127, 201) | No | - | - | +| red-900 | - | light: rgb(215, 50, 32); dark: rgb(252, 67, 46); wireframe: rgb(74, 111, 195) | No | - | - | +| red-1000 | - | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| red-1100 | - | light: rgb(156, 33, 19); dark: rgb(255, 134, 120); wireframe: rgb(52, 79, 140) | No | - | - | +| red-1200 | - | light: rgb(129, 27, 14); dark: rgb(255, 167, 157); wireframe: rgb(42, 65, 114) | No | - | - | +| red-1300 | - | light: rgb(104, 21, 10); dark: rgb(255, 196, 189); wireframe: rgb(34, 51, 91) | No | - | - | +| red-1400 | - | light: rgb(80, 16, 6); dark: rgb(255, 222, 219); wireframe: rgb(25, 39, 69) | No | - | - | +| red-1500 | - | dark: rgb(255, 242, 240); light: rgb(59, 11, 4); wireframe: rgb(18, 27, 48) | No | - | - | +| red-1600 | - | dark: rgb(255, 255, 255); light: rgb(29, 5, 2); wireframe: rgb(8, 12, 22) | No | - | - | +| orange-100 | - | light: rgb(255, 246, 231); dark: rgb(49, 16, 0); wireframe: rgb(246, 248, 252) | No | - | - | +| orange-200 | - | light: rgb(255, 236, 207); dark: rgb(61, 21, 0); wireframe: rgb(235, 239, 248) | No | - | - | +| orange-300 | - | light: rgb(255, 218, 158); dark: rgb(80, 27, 0); wireframe: rgb(216, 224, 242) | No | - | - | +| orange-400 | - | light: rgb(255, 193, 94); dark: rgb(106, 36, 0); wireframe: rgb(192, 205, 234) | No | - | - | +| orange-500 | - | light: rgb(255, 162, 19); dark: rgb(135, 47, 0); wireframe: rgb(164, 183, 225) | No | - | - | +| orange-600 | - | light: rgb(252, 125, 0); dark: rgb(162, 59, 0); wireframe: rgb(135, 160, 215) | No | - | - | +| orange-700 | - | light: rgb(232, 106, 0); dark: rgb(185, 73, 0); wireframe: rgb(113, 142, 208) | No | - | - | +| orange-800 | - | light: rgb(212, 91, 0); dark: rgb(199, 82, 0); wireframe: rgb(93, 127, 201) | No | - | - | +| orange-900 | - | light: rgb(194, 78, 0); dark: rgb(224, 100, 0); wireframe: rgb(74, 111, 195) | No | - | - | +| orange-1000 | - | light: rgb(167, 62, 0); dark: rgb(243, 117, 0); wireframe: rgb(61, 94, 165) | No | - | - | +| orange-1100 | - | light: rgb(144, 51, 0); dark: rgb(255, 137, 0); wireframe: rgb(52, 79, 140) | No | - | - | +| orange-1200 | - | light: rgb(118, 41, 0); dark: rgb(255, 173, 45); wireframe: rgb(42, 65, 114) | No | - | - | +| orange-1300 | - | light: rgb(95, 32, 0); dark: rgb(255, 201, 116); wireframe: rgb(34, 51, 91) | No | - | - | +| orange-1400 | - | light: rgb(73, 24, 0); dark: rgb(255, 225, 178); wireframe: rgb(25, 39, 69) | No | - | - | +| orange-1500 | - | dark: rgb(255, 243, 225); light: rgb(52, 18, 0); wireframe: rgb(18, 27, 48) | No | - | - | +| orange-1600 | - | dark: rgb(255, 255, 255); light: rgb(25, 8, 0); wireframe: rgb(8, 12, 22) | No | - | - | +| yellow-100 | - | light: rgb(255, 248, 204); dark: rgb(37, 23, 0); wireframe: rgb(246, 248, 252) | No | - | - | +| yellow-200 | - | light: rgb(255, 241, 151); dark: rgb(47, 29, 0); wireframe: rgb(235, 239, 248) | No | - | - | +| yellow-300 | - | light: rgb(255, 222, 44); dark: rgb(61, 39, 0); wireframe: rgb(216, 224, 242) | No | - | - | +| yellow-400 | - | light: rgb(245, 199, 0); dark: rgb(83, 52, 0); wireframe: rgb(192, 205, 234) | No | - | - | +| yellow-500 | - | light: rgb(230, 175, 0); dark: rgb(107, 67, 0); wireframe: rgb(164, 183, 225) | No | - | - | +| yellow-600 | - | light: rgb(210, 149, 0); dark: rgb(130, 82, 0); wireframe: rgb(135, 160, 215) | No | - | - | +| yellow-700 | - | light: rgb(193, 131, 0); dark: rgb(151, 97, 0); wireframe: rgb(113, 142, 208) | No | - | - | +| yellow-800 | - | light: rgb(175, 116, 0); dark: rgb(164, 106, 0); wireframe: rgb(93, 127, 201) | No | - | - | +| yellow-900 | - | light: rgb(158, 102, 0); dark: rgb(186, 124, 0); wireframe: rgb(74, 111, 195) | No | - | - | +| yellow-1000 | - | light: rgb(134, 85, 0); dark: rgb(203, 141, 0); wireframe: rgb(61, 94, 165) | No | - | - | +| yellow-1100 | - | light: rgb(114, 72, 0); dark: rgb(218, 159, 0); wireframe: rgb(52, 79, 140) | No | - | - | +| yellow-1200 | - | light: rgb(93, 59, 0); dark: rgb(235, 183, 0); wireframe: rgb(42, 65, 114) | No | - | - | +| yellow-1300 | - | light: rgb(75, 47, 0); dark: rgb(249, 206, 0); wireframe: rgb(34, 51, 91) | No | - | - | +| yellow-1400 | - | light: rgb(56, 35, 0); dark: rgb(255, 230, 86); wireframe: rgb(25, 39, 69) | No | - | - | +| yellow-1500 | - | dark: rgb(255, 246, 195); light: rgb(40, 25, 0); wireframe: rgb(18, 27, 48) | No | - | - | +| yellow-1600 | - | dark: rgb(255, 255, 255); light: rgb(18, 11, 0); wireframe: rgb(8, 12, 22) | No | - | - | +| chartreuse-100 | - | light: rgb(246, 251, 222); dark: rgb(23, 28, 0); wireframe: rgb(246, 248, 252) | No | - | - | +| chartreuse-200 | - | light: rgb(234, 246, 173); dark: rgb(30, 36, 0); wireframe: rgb(235, 239, 248) | No | - | - | +| chartreuse-300 | - | light: rgb(208, 236, 70); dark: rgb(39, 47, 0); wireframe: rgb(216, 224, 242) | No | - | - | +| chartreuse-400 | - | light: rgb(182, 219, 0); dark: rgb(53, 63, 0); wireframe: rgb(192, 205, 234) | No | - | - | +| chartreuse-500 | - | light: rgb(163, 196, 0); dark: rgb(68, 82, 0); wireframe: rgb(164, 183, 225) | No | - | - | +| chartreuse-600 | - | light: rgb(143, 172, 0); dark: rgb(83, 100, 0); wireframe: rgb(135, 160, 215) | No | - | - | +| chartreuse-700 | - | light: rgb(128, 153, 0); dark: rgb(97, 116, 0); wireframe: rgb(113, 142, 208) | No | - | - | +| chartreuse-800 | - | light: rgb(114, 137, 0); dark: rgb(106, 127, 0); wireframe: rgb(93, 127, 201) | No | - | - | +| chartreuse-900 | - | light: rgb(102, 122, 0); dark: rgb(122, 147, 0); wireframe: rgb(74, 111, 195) | No | - | - | +| chartreuse-1000 | - | light: rgb(86, 103, 0); dark: rgb(136, 164, 0); wireframe: rgb(61, 94, 165) | No | - | - | +| chartreuse-1100 | - | light: rgb(73, 87, 0); dark: rgb(151, 181, 0); wireframe: rgb(52, 79, 140) | No | - | - | +| chartreuse-1200 | - | light: rgb(60, 71, 0); dark: rgb(169, 203, 0); wireframe: rgb(42, 65, 114) | No | - | - | +| chartreuse-1300 | - | light: rgb(47, 57, 0); dark: rgb(187, 225, 0); wireframe: rgb(34, 51, 91) | No | - | - | +| chartreuse-1400 | - | light: rgb(35, 43, 0); dark: rgb(219, 240, 117); wireframe: rgb(25, 39, 69) | No | - | - | +| chartreuse-1500 | - | dark: rgb(242, 249, 206); light: rgb(25, 30, 0); wireframe: rgb(18, 27, 48) | No | - | - | +| chartreuse-1600 | - | dark: rgb(255, 255, 255); light: rgb(11, 14, 0); wireframe: rgb(8, 12, 22) | No | - | - | +| celery-100 | - | light: rgb(235, 255, 220); dark: rgb(11, 31, 0); wireframe: rgb(246, 248, 252) | No | - | - | +| celery-200 | - | light: rgb(197, 255, 156); dark: rgb(15, 38, 0); wireframe: rgb(235, 239, 248) | No | - | - | +| celery-300 | - | light: rgb(157, 247, 92); dark: rgb(21, 51, 1); wireframe: rgb(216, 224, 242) | No | - | - | +| celery-400 | - | light: rgb(129, 228, 58); dark: rgb(31, 67, 4); wireframe: rgb(192, 205, 234) | No | - | - | +| celery-500 | - | light: rgb(110, 206, 42); dark: rgb(41, 86, 8); wireframe: rgb(164, 183, 225) | No | - | - | +| celery-600 | - | light: rgb(93, 180, 31); dark: rgb(50, 105, 11); wireframe: rgb(135, 160, 215) | No | - | - | +| celery-700 | - | light: rgb(82, 161, 25); dark: rgb(60, 122, 15); wireframe: rgb(113, 142, 208) | No | - | - | +| celery-800 | - | light: rgb(72, 144, 20); dark: rgb(66, 134, 18); wireframe: rgb(93, 127, 201) | No | - | - | +| celery-900 | - | light: rgb(64, 129, 17); dark: rgb(78, 154, 23); wireframe: rgb(74, 111, 195) | No | - | - | +| celery-1000 | - | light: rgb(52, 109, 12); dark: rgb(88, 172, 28); wireframe: rgb(61, 94, 165) | No | - | - | +| celery-1100 | - | light: rgb(44, 92, 9); dark: rgb(100, 190, 35); wireframe: rgb(52, 79, 140) | No | - | - | +| celery-1200 | - | light: rgb(35, 75, 6); dark: rgb(116, 213, 46); wireframe: rgb(42, 65, 114) | No | - | - | +| celery-1300 | - | light: rgb(27, 60, 3); dark: rgb(136, 234, 65); wireframe: rgb(34, 51, 91) | No | - | - | +| celery-1400 | - | light: rgb(19, 46, 0); dark: rgb(170, 251, 112); wireframe: rgb(25, 39, 69) | No | - | - | +| celery-1500 | - | dark: rgb(222, 255, 198); light: rgb(12, 33, 0); wireframe: rgb(18, 27, 48) | No | - | - | +| celery-1600 | - | dark: rgb(255, 255, 255); light: rgb(4, 15, 0); wireframe: rgb(8, 12, 22) | No | - | - | +| green-100 | - | light: rgb(237, 252, 241); dark: rgb(0, 30, 23); wireframe: rgb(246, 248, 252) | No | - | - | +| green-200 | - | light: rgb(215, 247, 225); dark: rgb(0, 38, 29); wireframe: rgb(235, 239, 248) | No | - | - | +| green-300 | - | light: rgb(173, 238, 197); dark: rgb(0, 51, 38); wireframe: rgb(216, 224, 242) | No | - | - | +| green-400 | - | light: rgb(107, 227, 162); dark: rgb(0, 68, 48); wireframe: rgb(192, 205, 234) | No | - | - | +| green-500 | - | light: rgb(43, 209, 125); dark: rgb(2, 87, 58); wireframe: rgb(164, 183, 225) | No | - | - | +| green-600 | - | light: rgb(18, 184, 103); dark: rgb(3, 106, 67); wireframe: rgb(135, 160, 215) | No | - | - | +| green-700 | - | light: rgb(11, 164, 93); dark: rgb(4, 124, 75); wireframe: rgb(113, 142, 208) | No | - | - | +| green-800 | - | light: rgb(7, 147, 85); dark: rgb(6, 136, 80); wireframe: rgb(93, 127, 201) | No | - | - | +| green-900 | - | light: rgb(5, 131, 78); dark: rgb(9, 157, 89); wireframe: rgb(74, 111, 195) | No | - | - | +| green-1000 | - | light: rgb(3, 110, 69); dark: rgb(14, 175, 98); wireframe: rgb(61, 94, 165) | No | - | - | +| green-1100 | - | light: rgb(2, 93, 60); dark: rgb(24, 193, 110); wireframe: rgb(52, 79, 140) | No | - | - | +| green-1200 | - | light: rgb(1, 76, 52); dark: rgb(57, 215, 134); wireframe: rgb(42, 65, 114) | No | - | - | +| green-1300 | - | light: rgb(0, 61, 44); dark: rgb(126, 231, 172); wireframe: rgb(34, 51, 91) | No | - | - | +| green-1400 | - | light: rgb(0, 46, 34); dark: rgb(189, 241, 208); wireframe: rgb(25, 39, 69) | No | - | - | +| green-1500 | - | dark: rgb(229, 250, 236); light: rgb(0, 33, 25); wireframe: rgb(18, 27, 48) | No | - | - | +| green-1600 | - | dark: rgb(255, 255, 255); light: rgb(0, 15, 12); wireframe: rgb(8, 12, 22) | No | - | - | +| seafoam-100 | - | light: rgb(235, 251, 246); dark: rgb(0, 30, 27); wireframe: rgb(246, 248, 252) | No | - | - | +| seafoam-200 | - | light: rgb(211, 246, 234); dark: rgb(0, 39, 35); wireframe: rgb(235, 239, 248) | No | - | - | +| seafoam-300 | - | light: rgb(169, 237, 216); dark: rgb(0, 50, 44); wireframe: rgb(216, 224, 242) | No | - | - | +| seafoam-400 | - | light: rgb(92, 225, 194); dark: rgb(0, 67, 59); wireframe: rgb(192, 205, 234) | No | - | - | +| seafoam-500 | - | light: rgb(16, 207, 169); dark: rgb(2, 86, 75); wireframe: rgb(164, 183, 225) | No | - | - | +| seafoam-600 | - | light: rgb(13, 181, 149); dark: rgb(4, 105, 89); wireframe: rgb(135, 160, 215) | No | - | - | +| seafoam-700 | - | light: rgb(11, 162, 134); dark: rgb(6, 122, 103); wireframe: rgb(113, 142, 208) | No | - | - | +| seafoam-800 | - | light: rgb(9, 144, 120); dark: rgb(8, 134, 112); wireframe: rgb(93, 127, 201) | No | - | - | +| seafoam-900 | - | light: rgb(7, 129, 109); dark: rgb(10, 154, 128); wireframe: rgb(74, 111, 195) | No | - | - | +| seafoam-1000 | - | light: rgb(5, 108, 92); dark: rgb(12, 173, 142); wireframe: rgb(61, 94, 165) | No | - | - | +| seafoam-1100 | - | light: rgb(3, 92, 80); dark: rgb(14, 190, 156); wireframe: rgb(52, 79, 140) | No | - | - | +| seafoam-1200 | - | light: rgb(1, 75, 67); dark: rgb(29, 214, 176); wireframe: rgb(42, 65, 114) | No | - | - | +| seafoam-1300 | - | light: rgb(0, 60, 54); dark: rgb(122, 229, 203); wireframe: rgb(34, 51, 91) | No | - | - | +| seafoam-1400 | - | light: rgb(0, 46, 40); dark: rgb(186, 241, 222); wireframe: rgb(25, 39, 69) | No | - | - | +| seafoam-1500 | - | dark: rgb(229, 249, 243); light: rgb(0, 33, 29); wireframe: rgb(18, 27, 48) | No | - | - | +| seafoam-1600 | - | dark: rgb(255, 255, 255); light: rgb(0, 15, 14); wireframe: rgb(8, 12, 22) | No | - | - | +| cyan-100 | - | light: rgb(238, 250, 254); dark: rgb(0, 29, 39); wireframe: rgb(246, 248, 252) | No | - | - | +| cyan-200 | - | light: rgb(217, 244, 253); dark: rgb(0, 36, 49); wireframe: rgb(235, 239, 248) | No | - | - | +| cyan-300 | - | light: rgb(183, 231, 252); dark: rgb(0, 48, 65); wireframe: rgb(216, 224, 242) | No | - | - | +| cyan-400 | - | light: rgb(138, 213, 255); dark: rgb(0, 64, 88); wireframe: rgb(192, 205, 234) | No | - | - | +| cyan-500 | - | light: rgb(92, 192, 255); dark: rgb(0, 82, 113); wireframe: rgb(164, 183, 225) | No | - | - | +| cyan-600 | - | light: rgb(48, 167, 254); dark: rgb(3, 99, 140); wireframe: rgb(135, 160, 215) | No | - | - | +| cyan-700 | - | light: rgb(29, 149, 231); dark: rgb(8, 115, 168); wireframe: rgb(113, 142, 208) | No | - | - | +| cyan-800 | - | light: rgb(18, 134, 205); dark: rgb(13, 125, 186); wireframe: rgb(93, 127, 201) | No | - | - | +| cyan-900 | - | light: rgb(11, 120, 179); dark: rgb(24, 142, 220); wireframe: rgb(74, 111, 195) | No | - | - | +| cyan-1000 | - | light: rgb(4, 102, 145); dark: rgb(38, 159, 244); wireframe: rgb(61, 94, 165) | No | - | - | +| cyan-1100 | - | light: rgb(0, 87, 121); dark: rgb(63, 177, 255); wireframe: rgb(52, 79, 140) | No | - | - | +| cyan-1200 | - | light: rgb(0, 71, 98); dark: rgb(107, 199, 255); wireframe: rgb(42, 65, 114) | No | - | - | +| cyan-1300 | - | light: rgb(0, 57, 78); dark: rgb(152, 219, 255); wireframe: rgb(34, 51, 91) | No | - | - | +| cyan-1400 | - | light: rgb(0, 43, 59); dark: rgb(195, 236, 252); wireframe: rgb(25, 39, 69) | No | - | - | +| cyan-1500 | - | dark: rgb(230, 248, 253); light: rgb(0, 31, 43); wireframe: rgb(18, 27, 48) | No | - | - | +| cyan-1600 | - | dark: rgb(255, 255, 255); light: rgb(0, 14, 20); wireframe: rgb(8, 12, 22) | No | - | - | +| indigo-100 | - | light: rgb(247, 248, 255); dark: rgb(30, 0, 93); wireframe: rgb(246, 248, 252) | No | - | - | +| indigo-200 | - | light: rgb(235, 238, 255); dark: rgb(35, 0, 110); wireframe: rgb(235, 239, 248) | No | - | - | +| indigo-300 | - | light: rgb(216, 222, 255); dark: rgb(47, 0, 140); wireframe: rgb(216, 224, 242) | No | - | - | +| indigo-400 | - | light: rgb(192, 201, 255); dark: rgb(62, 12, 174); wireframe: rgb(192, 205, 234) | No | - | - | +| indigo-500 | - | light: rgb(167, 178, 255); dark: rgb(79, 30, 209); wireframe: rgb(164, 183, 225) | No | - | - | +| indigo-600 | - | light: rgb(145, 151, 254); dark: rgb(95, 52, 235); wireframe: rgb(135, 160, 215) | No | - | - | +| indigo-700 | - | light: rgb(132, 128, 254); dark: rgb(109, 75, 248); wireframe: rgb(113, 142, 208) | No | - | - | +| indigo-800 | - | light: rgb(122, 106, 253); dark: rgb(116, 91, 252); wireframe: rgb(93, 127, 201) | No | - | - | +| indigo-900 | - | light: rgb(113, 85, 250); dark: rgb(128, 119, 254); wireframe: rgb(74, 111, 195) | No | - | - | +| indigo-1000 | - | light: rgb(99, 56, 238); dark: rgb(139, 141, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| indigo-1100 | - | light: rgb(84, 36, 219); dark: rgb(153, 161, 255); wireframe: rgb(52, 79, 140) | No | - | - | +| indigo-1200 | - | light: rgb(69, 19, 191); dark: rgb(176, 186, 255); wireframe: rgb(42, 65, 114) | No | - | - | +| indigo-1300 | - | light: rgb(55, 6, 160); dark: rgb(199, 208, 255); wireframe: rgb(34, 51, 91) | No | - | - | +| indigo-1400 | - | light: rgb(42, 0, 129); dark: rgb(223, 228, 255); wireframe: rgb(25, 39, 69) | No | - | - | +| indigo-1500 | - | dark: rgb(243, 244, 255); light: rgb(31, 0, 98); wireframe: rgb(18, 27, 48) | No | - | - | +| indigo-1600 | - | dark: rgb(255, 255, 255); light: rgb(17, 0, 54); wireframe: rgb(8, 12, 22) | No | - | - | +| purple-100 | - | light: rgb(251, 247, 254); dark: rgb(41, 0, 79); wireframe: rgb(246, 248, 252) | No | - | - | +| purple-200 | - | light: rgb(244, 235, 252); dark: rgb(50, 0, 96); wireframe: rgb(235, 239, 248) | No | - | - | +| purple-300 | - | light: rgb(235, 218, 249); dark: rgb(64, 0, 122); wireframe: rgb(216, 224, 242) | No | - | - | +| purple-400 | - | light: rgb(221, 193, 246); dark: rgb(83, 0, 159); wireframe: rgb(192, 205, 234) | No | - | - | +| purple-500 | - | light: rgb(208, 167, 243); dark: rgb(107, 6, 195); wireframe: rgb(164, 183, 225) | No | - | - | +| purple-600 | - | light: rgb(191, 138, 238); dark: rgb(130, 34, 215); wireframe: rgb(135, 160, 215) | No | - | - | +| purple-700 | - | light: rgb(178, 114, 235); dark: rgb(148, 62, 224); wireframe: rgb(113, 142, 208) | No | - | - | +| purple-800 | - | light: rgb(166, 92, 231); dark: rgb(157, 78, 228); wireframe: rgb(93, 127, 201) | No | - | - | +| purple-900 | - | light: rgb(154, 71, 226); dark: rgb(173, 105, 233); wireframe: rgb(74, 111, 195) | No | - | - | +| purple-1000 | - | light: rgb(134, 40, 217); dark: rgb(186, 127, 237); wireframe: rgb(61, 94, 165) | No | - | - | +| purple-1100 | - | light: rgb(115, 13, 204); dark: rgb(197, 149, 240); wireframe: rgb(52, 79, 140) | No | - | - | +| purple-1200 | - | light: rgb(93, 0, 177); dark: rgb(212, 176, 244); wireframe: rgb(42, 65, 114) | No | - | - | +| purple-1300 | - | light: rgb(75, 0, 144); dark: rgb(225, 201, 247); wireframe: rgb(34, 51, 91) | No | - | - | +| purple-1400 | - | light: rgb(59, 0, 111); dark: rgb(238, 224, 250); wireframe: rgb(25, 39, 69) | No | - | - | +| purple-1500 | - | dark: rgb(248, 243, 253); light: rgb(44, 0, 84); wireframe: rgb(18, 27, 48) | No | - | - | +| purple-1600 | - | dark: rgb(255, 255, 255); light: rgb(23, 0, 45); wireframe: rgb(8, 12, 22) | No | - | - | +| fuchsia-100 | - | light: rgb(254, 246, 255); dark: rgb(50, 0, 61); wireframe: rgb(246, 248, 252) | No | - | - | +| fuchsia-200 | - | light: rgb(253, 233, 255); dark: rgb(61, 0, 74); wireframe: rgb(235, 239, 248) | No | - | - | +| fuchsia-300 | - | light: rgb(250, 211, 255); dark: rgb(79, 0, 95); wireframe: rgb(216, 224, 242) | No | - | - | +| fuchsia-400 | - | light: rgb(247, 181, 255); dark: rgb(102, 9, 120); wireframe: rgb(192, 205, 234) | No | - | - | +| fuchsia-500 | - | light: rgb(243, 147, 255); dark: rgb(127, 23, 146); wireframe: rgb(164, 183, 225) | No | - | - | +| fuchsia-600 | - | light: rgb(236, 105, 255); dark: rgb(151, 38, 170); wireframe: rgb(135, 160, 215) | No | - | - | +| fuchsia-700 | - | light: rgb(223, 77, 245); dark: rgb(173, 51, 192); wireframe: rgb(113, 142, 208) | No | - | - | +| fuchsia-800 | - | light: rgb(200, 68, 220); dark: rgb(186, 60, 206); wireframe: rgb(93, 127, 201) | No | - | - | +| fuchsia-900 | - | light: rgb(181, 57, 200); dark: rgb(213, 73, 235); wireframe: rgb(74, 111, 195) | No | - | - | +| fuchsia-1000 | - | light: rgb(156, 40, 175); dark: rgb(232, 91, 253); wireframe: rgb(61, 94, 165) | No | - | - | +| fuchsia-1100 | - | light: rgb(135, 27, 154); dark: rgb(240, 122, 255); wireframe: rgb(52, 79, 140) | No | - | - | +| fuchsia-1200 | - | light: rgb(113, 15, 131); dark: rgb(245, 159, 255); wireframe: rgb(42, 65, 114) | No | - | - | +| fuchsia-1300 | - | light: rgb(92, 4, 109); dark: rgb(248, 191, 255); wireframe: rgb(34, 51, 91) | No | - | - | +| fuchsia-1400 | - | light: rgb(72, 0, 88); dark: rgb(251, 219, 255); wireframe: rgb(25, 39, 69) | No | - | - | +| fuchsia-1500 | - | dark: rgb(253, 241, 255); light: rgb(54, 0, 66); wireframe: rgb(18, 27, 48) | No | - | - | +| fuchsia-1600 | - | dark: rgb(255, 255, 255); light: rgb(29, 0, 35); wireframe: rgb(8, 12, 22) | No | - | - | +| magenta-100 | - | light: rgb(255, 245, 248); dark: rgb(59, 0, 22); wireframe: rgb(246, 248, 252) | No | - | - | +| magenta-200 | - | light: rgb(255, 232, 240); dark: rgb(74, 0, 27); wireframe: rgb(235, 239, 248) | No | - | - | +| magenta-300 | - | light: rgb(255, 213, 227); dark: rgb(93, 0, 34); wireframe: rgb(216, 224, 242) | No | - | - | +| magenta-400 | - | light: rgb(255, 185, 208); dark: rgb(123, 0, 45); wireframe: rgb(192, 205, 234) | No | - | - | +| magenta-500 | - | light: rgb(255, 152, 187); dark: rgb(152, 7, 60); wireframe: rgb(164, 183, 225) | No | - | - | +| magenta-600 | - | light: rgb(255, 112, 159); dark: rgb(181, 19, 76); wireframe: rgb(135, 160, 215) | No | - | - | +| magenta-700 | - | light: rgb(255, 72, 133); dark: rgb(207, 31, 92); wireframe: rgb(113, 142, 208) | No | - | - | +| magenta-800 | - | light: rgb(240, 45, 110); dark: rgb(224, 38, 101); wireframe: rgb(93, 127, 201) | No | - | - | +| magenta-900 | - | light: rgb(217, 35, 97); dark: rgb(255, 51, 119); wireframe: rgb(74, 111, 195) | No | - | - | +| magenta-1000 | - | light: rgb(186, 22, 80); dark: rgb(255, 96, 149); wireframe: rgb(61, 94, 165) | No | - | - | +| magenta-1100 | - | light: rgb(163, 5, 62); dark: rgb(255, 128, 171); wireframe: rgb(52, 79, 140) | No | - | - | +| magenta-1200 | - | light: rgb(136, 0, 51); dark: rgb(255, 163, 194); wireframe: rgb(42, 65, 114) | No | - | - | +| magenta-1300 | - | light: rgb(111, 0, 40); dark: rgb(255, 193, 214); wireframe: rgb(34, 51, 91) | No | - | - | +| magenta-1400 | - | light: rgb(86, 0, 30); dark: rgb(255, 220, 232); wireframe: rgb(25, 39, 69) | No | - | - | +| magenta-1500 | - | dark: rgb(255, 241, 246); light: rgb(64, 0, 22); wireframe: rgb(18, 27, 48) | No | - | - | +| magenta-1600 | - | dark: rgb(255, 255, 255); light: rgb(35, 0, 12); wireframe: rgb(8, 12, 22) | No | - | - | +| pink-100 | - | dark: rgb(58, 0, 37); light: rgb(255, 246, 252); wireframe: rgb(246, 248, 252) | No | - | - | +| pink-200 | - | dark: rgb(71, 0, 44); light: rgb(255, 232, 247); wireframe: rgb(235, 239, 248) | No | - | - | +| pink-300 | - | dark: rgb(90, 0, 57); light: rgb(255, 211, 240); wireframe: rgb(216, 224, 242) | No | - | - | +| pink-400 | - | dark: rgb(115, 7, 75); light: rgb(255, 181, 230); wireframe: rgb(192, 205, 234) | No | - | - | +| pink-500 | - | dark: rgb(143, 18, 97); light: rgb(255, 148, 219); wireframe: rgb(164, 183, 225) | No | - | - | +| pink-600 | - | dark: rgb(171, 29, 119); light: rgb(255, 103, 204); wireframe: rgb(135, 160, 215) | No | - | - | +| pink-700 | - | dark: rgb(196, 39, 138); light: rgb(242, 76, 184); wireframe: rgb(113, 142, 208) | No | - | - | +| pink-800 | - | dark: rgb(213, 45, 151); light: rgb(228, 52, 163); wireframe: rgb(93, 127, 201) | No | - | - | +| pink-900 | - | dark: rgb(236, 67, 175); light: rgb(206, 42, 146); wireframe: rgb(74, 111, 195) | No | - | - | +| pink-1000 | - | dark: rgb(251, 90, 196); light: rgb(176, 31, 123); wireframe: rgb(61, 94, 165) | No | - | - | +| pink-1100 | - | dark: rgb(255, 122, 210); light: rgb(152, 22, 104); wireframe: rgb(52, 79, 140) | No | - | - | +| pink-1200 | - | dark: rgb(255, 159, 223); light: rgb(128, 12, 85); wireframe: rgb(42, 65, 114) | No | - | - | +| pink-1300 | - | dark: rgb(255, 191, 234); light: rgb(105, 3, 68); wireframe: rgb(34, 51, 91) | No | - | - | +| pink-1400 | - | dark: rgb(255, 219, 243); light: rgb(83, 0, 53); wireframe: rgb(25, 39, 69) | No | - | - | +| pink-1500 | - | dark: rgb(255, 241, 250); light: rgb(62, 0, 39); wireframe: rgb(18, 27, 48) | No | - | - | +| pink-1600 | - | dark: rgb(255, 255, 255); light: rgb(33, 0, 21); wireframe: rgb(8, 12, 22) | No | - | - | +| turquoise-100 | - | dark: rgb(0, 30, 33); light: rgb(238, 251, 251); wireframe: rgb(246, 248, 252) | No | - | - | +| turquoise-200 | - | dark: rgb(0, 37, 41); light: rgb(209, 245, 245); wireframe: rgb(235, 239, 248) | No | - | - | +| turquoise-300 | - | dark: rgb(0, 49, 54); light: rgb(169, 236, 237); wireframe: rgb(216, 224, 242) | No | - | - | +| turquoise-400 | - | dark: rgb(0, 66, 72); light: rgb(111, 221, 228); wireframe: rgb(192, 205, 234) | No | - | - | +| turquoise-500 | - | dark: rgb(3, 84, 92); light: rgb(39, 202, 216); wireframe: rgb(164, 183, 225) | No | - | - | +| turquoise-600 | - | dark: rgb(5, 103, 112); light: rgb(15, 177, 192); wireframe: rgb(135, 160, 215) | No | - | - | +| turquoise-700 | - | dark: rgb(7, 120, 131); light: rgb(12, 158, 171); wireframe: rgb(113, 142, 208) | No | - | - | +| turquoise-800 | - | dark: rgb(9, 131, 142); light: rgb(10, 141, 153); wireframe: rgb(93, 127, 201) | No | - | - | +| turquoise-900 | - | dark: rgb(11, 151, 164); light: rgb(8, 126, 137); wireframe: rgb(74, 111, 195) | No | - | - | +| turquoise-1000 | - | dark: rgb(13, 168, 182); light: rgb(5, 107, 116); wireframe: rgb(61, 94, 165) | No | - | - | +| turquoise-1100 | - | dark: rgb(16, 186, 202); light: rgb(3, 90, 98); wireframe: rgb(52, 79, 140) | No | - | - | +| turquoise-1200 | - | dark: rgb(64, 208, 220); light: rgb(1, 74, 81); wireframe: rgb(42, 65, 114) | No | - | - | +| turquoise-1300 | - | dark: rgb(128, 225, 231); light: rgb(0, 59, 65); wireframe: rgb(34, 51, 91) | No | - | - | +| turquoise-1400 | - | dark: rgb(183, 240, 240); light: rgb(0, 44, 49); wireframe: rgb(25, 39, 69) | No | - | - | +| turquoise-1500 | - | dark: rgb(228, 249, 249); light: rgb(0, 32, 35); wireframe: rgb(18, 27, 48) | No | - | - | +| turquoise-1600 | - | dark: rgb(255, 255, 255); light: rgb(0, 15, 17); wireframe: rgb(8, 12, 22) | No | - | - | +| brown-100 | - | dark: rgb(35, 24, 8); light: rgb(252, 247, 242); wireframe: rgb(246, 248, 252) | No | - | - | +| brown-200 | - | dark: rgb(44, 31, 11); light: rgb(247, 238, 225); wireframe: rgb(235, 239, 248) | No | - | - | +| brown-300 | - | dark: rgb(58, 40, 14); light: rgb(239, 221, 195); wireframe: rgb(216, 224, 242) | No | - | - | +| brown-400 | - | dark: rgb(78, 55, 19); light: rgb(229, 200, 157); wireframe: rgb(192, 205, 234) | No | - | - | +| brown-500 | - | dark: rgb(98, 71, 30); light: rgb(214, 177, 123); wireframe: rgb(164, 183, 225) | No | - | - | +| brown-600 | - | dark: rgb(115, 88, 47); light: rgb(190, 155, 104); wireframe: rgb(135, 160, 215) | No | - | - | +| brown-700 | - | dark: rgb(132, 104, 61); light: rgb(171, 138, 90); wireframe: rgb(113, 142, 208) | No | - | - | +| brown-800 | - | dark: rgb(143, 114, 69); light: rgb(154, 123, 77); wireframe: rgb(93, 127, 201) | No | - | - | +| brown-900 | - | dark: rgb(163, 132, 84); light: rgb(139, 109, 66); wireframe: rgb(74, 111, 195) | No | - | - | +| brown-1000 | - | dark: rgb(181, 147, 98); light: rgb(119, 91, 50); wireframe: rgb(61, 94, 165) | No | - | - | +| brown-1100 | - | dark: rgb(199, 163, 112); light: rgb(103, 76, 35); wireframe: rgb(52, 79, 140) | No | - | - | +| brown-1200 | - | dark: rgb(222, 185, 130); light: rgb(88, 61, 21); wireframe: rgb(42, 65, 114) | No | - | - | +| brown-1300 | - | dark: rgb(232, 207, 169); light: rgb(70, 49, 17); wireframe: rgb(34, 51, 91) | No | - | - | +| brown-1400 | - | dark: rgb(242, 227, 206); light: rgb(52, 37, 13); wireframe: rgb(25, 39, 69) | No | - | - | +| brown-1500 | - | dark: rgb(250, 244, 236); light: rgb(38, 26, 9); wireframe: rgb(18, 27, 48) | No | - | - | +| brown-1600 | - | dark: rgb(255, 255, 255); light: rgb(16, 12, 4); wireframe: rgb(8, 12, 22) | No | - | - | +| silver-100 | - | dark: rgb(26, 26, 26); light: rgb(247, 247, 247); wireframe: rgb(246, 248, 252) | No | - | - | +| silver-200 | - | dark: rgb(33, 33, 33); light: rgb(239, 239, 239); wireframe: rgb(235, 239, 248) | No | - | - | +| silver-300 | - | dark: rgb(44, 44, 44); light: rgb(223, 223, 223); wireframe: rgb(216, 224, 242) | No | - | - | +| silver-400 | - | dark: rgb(59, 59, 59); light: rgb(204, 204, 204); wireframe: rgb(192, 205, 234) | No | - | - | +| silver-500 | - | dark: rgb(76, 76, 76); light: rgb(183, 183, 183); wireframe: rgb(164, 183, 225) | No | - | - | +| silver-600 | - | dark: rgb(92, 92, 92); light: rgb(160, 160, 160); wireframe: rgb(135, 160, 215) | No | - | - | +| silver-700 | - | dark: rgb(108, 108, 108); light: rgb(143, 143, 143); wireframe: rgb(113, 142, 208) | No | - | - | +| silver-800 | - | dark: rgb(118, 118, 118); light: rgb(128, 128, 128); wireframe: rgb(93, 127, 201) | No | - | - | +| silver-900 | - | dark: rgb(137, 137, 137); light: rgb(114, 114, 114); wireframe: rgb(74, 111, 195) | No | - | - | +| silver-1000 | - | dark: rgb(152, 152, 152); light: rgb(96, 96, 96); wireframe: rgb(61, 94, 165) | No | - | - | +| silver-1100 | - | dark: rgb(169, 169, 169); light: rgb(81, 81, 81); wireframe: rgb(52, 79, 140) | No | - | - | +| silver-1200 | - | dark: rgb(190, 190, 190); light: rgb(66, 66, 66); wireframe: rgb(42, 65, 114) | No | - | - | +| silver-1300 | - | dark: rgb(211, 211, 211); light: rgb(52, 52, 52); wireframe: rgb(34, 51, 91) | No | - | - | +| silver-1400 | - | dark: rgb(229, 229, 229); light: rgb(39, 39, 39); wireframe: rgb(25, 39, 69) | No | - | - | +| silver-1500 | - | dark: rgb(244, 244, 244); light: rgb(28, 28, 28); wireframe: rgb(18, 27, 48) | No | - | - | +| silver-1600 | - | dark: rgb(255, 255, 255); light: rgb(12, 12, 12); wireframe: rgb(8, 12, 22) | No | - | - | +| cinnamon-100 | - | dark: rgb(48, 17, 4); light: rgb(253, 247, 243); wireframe: rgb(246, 248, 252) | No | - | - | +| cinnamon-200 | - | dark: rgb(59, 21, 5); light: rgb(249, 236, 229); wireframe: rgb(235, 239, 248) | No | - | - | +| cinnamon-300 | - | dark: rgb(79, 28, 7); light: rgb(244, 218, 203); wireframe: rgb(216, 224, 242) | No | - | - | +| cinnamon-400 | - | dark: rgb(100, 41, 15); light: rgb(237, 196, 172); wireframe: rgb(192, 205, 234) | No | - | - | +| cinnamon-500 | - | dark: rgb(122, 57, 28); light: rgb(229, 170, 136); wireframe: rgb(164, 183, 225) | No | - | - | +| cinnamon-600 | - | dark: rgb(143, 74, 40); light: rgb(212, 145, 108); wireframe: rgb(135, 160, 215) | No | - | - | +| cinnamon-700 | - | dark: rgb(163, 88, 52); light: rgb(198, 126, 88); wireframe: rgb(113, 142, 208) | No | - | - | +| cinnamon-800 | - | dark: rgb(176, 98, 59); light: rgb(184, 109, 70); wireframe: rgb(93, 127, 201) | No | - | - | +| cinnamon-900 | - | dark: rgb(192, 119, 80); light: rgb(170, 94, 56); wireframe: rgb(74, 111, 195) | No | - | - | +| cinnamon-1000 | - | dark: rgb(206, 136, 99); light: rgb(147, 77, 43); wireframe: rgb(61, 94, 165) | No | - | - | +| cinnamon-1100 | - | dark: rgb(220, 154, 118); light: rgb(128, 62, 32); wireframe: rgb(52, 79, 140) | No | - | - | +| cinnamon-1200 | - | dark: rgb(232, 179, 149); light: rgb(110, 48, 21); wireframe: rgb(42, 65, 114) | No | - | - | +| cinnamon-1300 | - | dark: rgb(239, 203, 183); light: rgb(92, 35, 11); wireframe: rgb(34, 51, 91) | No | - | - | +| cinnamon-1400 | - | dark: rgb(246, 225, 214); light: rgb(72, 25, 6); wireframe: rgb(25, 39, 69) | No | - | - | +| cinnamon-1500 | - | dark: rgb(252, 244, 239); light: rgb(52, 18, 4); wireframe: rgb(18, 27, 48) | No | - | - | +| cinnamon-1600 | - | dark: rgb(255, 255, 255); light: rgb(24, 8, 2); wireframe: rgb(8, 12, 22) | No | - | - | +| static-blue-900 | rgb(59, 99, 251) | rgb(59, 99, 251) | No | - | - | +| static-blue-1000 | rgb(39, 77, 234) | rgb(39, 77, 234) | No | - | - | +| static-fuchsia-400 | rgb(247, 181, 255) | rgb(247, 181, 255) | No | - | - | +| static-fuchsia-600 | rgb(236, 105, 255) | rgb(236, 105, 255) | No | - | - | +| static-fuchsia-800 | rgb(200, 68, 220) | rgb(200, 68, 220) | No | - | - | +| static-fuchsia-900 | rgb(181, 57, 200) | rgb(181, 57, 200) | No | - | - | +| static-fuchsia-1000 | rgb(156, 40, 175) | rgb(156, 40, 175) | No | - | - | +| static-indigo-400 | rgb(192, 201, 255) | rgb(192, 201, 255) | No | - | - | +| static-indigo-600 | rgb(145, 151, 254) | rgb(145, 151, 254) | No | - | - | +| static-indigo-800 | rgb(122, 106, 253) | rgb(122, 106, 253) | No | - | - | +| static-indigo-900 | rgb(113, 85, 250) | rgb(113, 85, 250) | No | - | - | +| static-indigo-1000 | rgb(99, 56, 238) | rgb(99, 56, 238) | No | - | - | +| static-magenta-400 | rgb(255, 185, 208) | rgb(255, 185, 208) | No | - | - | +| static-magenta-600 | rgb(255, 112, 159) | rgb(255, 112, 159) | No | - | - | +| static-magenta-800 | rgb(240, 45, 110) | rgb(240, 45, 110) | No | - | - | +| static-magenta-900 | rgb(217, 35, 97) | rgb(217, 35, 97) | No | - | - | +| static-magenta-1000 | rgb(186, 22, 80) | rgb(186, 22, 80) | No | - | - | +| static-red-400 | rgb(255, 188, 180) | rgb(255, 188, 180) | No | - | - | +| static-red-600 | rgb(255, 118, 101) | rgb(255, 118, 101) | No | - | - | +| static-red-800 | rgb(240, 56, 35) | rgb(240, 56, 35) | No | - | - | +| static-red-900 | rgb(215, 50, 32) | rgb(215, 50, 32) | No | - | - | +| static-red-1000 | rgb(183, 40, 24) | rgb(183, 40, 24) | No | - | - | +| static-cyan-400 | rgb(138, 213, 255) | rgb(138, 213, 255) | No | - | - | +| static-cyan-600 | rgb(48, 167, 254) | rgb(48, 167, 254) | No | - | - | +| static-cyan-800 | rgb(18, 134, 205) | rgb(18, 134, 205) | No | - | - | +| static-chartreuse-400 | rgb(182, 219, 0) | rgb(182, 219, 0) | No | - | - | +| static-chartreuse-600 | rgb(143, 172, 0) | rgb(143, 172, 0) | No | - | - | +| static-chartreuse-800 | rgb(114, 137, 0) | rgb(114, 137, 0) | No | - | - | +| static-green-400 | rgb(107, 227, 162) | rgb(107, 227, 162) | No | - | - | +| static-green-600 | rgb(18, 184, 103) | rgb(18, 184, 103) | No | - | - | +| static-green-800 | rgb(7, 147, 85) | rgb(7, 147, 85) | No | - | - | +| static-orange-400 | rgb(255, 193, 94) | rgb(255, 193, 94) | No | - | - | +| static-orange-600 | rgb(252, 125, 0) | rgb(252, 125, 0) | No | - | - | +| static-orange-800 | rgb(212, 91, 0) | rgb(212, 91, 0) | No | - | - | +| static-purple-400 | rgb(221, 193, 246) | rgb(221, 193, 246) | No | - | - | +| static-purple-600 | rgb(191, 138, 238) | rgb(191, 138, 238) | No | - | - | +| static-purple-800 | rgb(166, 92, 231) | rgb(166, 92, 231) | No | - | - | +| static-turquoise-400 | rgb(111, 221, 228) | rgb(111, 221, 228) | No | - | - | +| static-turquoise-600 | rgb(15, 177, 192) | rgb(15, 177, 192) | No | - | - | +| static-turquoise-800 | rgb(10, 141, 153) | rgb(10, 141, 153) | No | - | - | +| gradient-stop-1-avatar | 0 | 0 | No | - | - | +| gradient-stop-2-avatar | 0.6666 | 0.6666 | No | - | - | +| gradient-stop-3-avatar | 1 | 1 | No | - | - | + diff --git a/docs/markdown/tokens/icons.md b/docs/markdown/tokens/icons.md new file mode 100644 index 00000000..4271a13a --- /dev/null +++ b/docs/markdown/tokens/icons.md @@ -0,0 +1,91 @@ +--- +title: icons +description: Design tokens from icons.json +tags: + - tokens + - icons +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| icon-color-inverse | [{gray-50}](/tokens/color-palette/#gray-50) | light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) | Yes | - | - | +| icon-color-primary-default | [{neutral-content-color-default}](/tokens/color-aliases/#neutral-content-color-default) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| icon-color-blue-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-green-primary-default | [{green-800}](/tokens/color-palette/#green-800) | light: rgb(7, 147, 85); dark: rgb(6, 136, 80); wireframe: rgb(93, 127, 201) | No | - | - | +| icon-color-red-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-yellow-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-primary-hover | [{neutral-content-color-hover}](/tokens/color-aliases/#neutral-content-color-hover) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| icon-color-primary-down | [{neutral-content-color-down}](/tokens/color-aliases/#neutral-content-color-down) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| icon-color-blue-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-blue-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-brown-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-brown-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-brown-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-celery-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-celery-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-celery-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-chartreuse-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-chartreuse-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-chartreuse-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-cinnamon-primary-default | [{cinnamon-800}](/tokens/color-palette/#cinnamon-800) | dark: rgb(176, 98, 59); light: rgb(184, 109, 70); wireframe: rgb(93, 127, 201) | No | - | - | +| icon-color-cinnamon-primary-hover | [{cinnamon-900}](/tokens/color-palette/#cinnamon-900) | dark: rgb(192, 119, 80); light: rgb(170, 94, 56); wireframe: rgb(74, 111, 195) | No | - | - | +| icon-color-cinnamon-primary-down | [{cinnamon-1000}](/tokens/color-palette/#cinnamon-1000) | dark: rgb(206, 136, 99); light: rgb(147, 77, 43); wireframe: rgb(61, 94, 165) | No | - | - | +| icon-color-cyan-primary-default | [{cyan-800}](/tokens/color-palette/#cyan-800) | light: rgb(18, 134, 205); dark: rgb(13, 125, 186); wireframe: rgb(93, 127, 201) | No | - | - | +| icon-color-cyan-primary-hover | [{cyan-900}](/tokens/color-palette/#cyan-900) | light: rgb(11, 120, 179); dark: rgb(24, 142, 220); wireframe: rgb(74, 111, 195) | No | - | - | +| icon-color-cyan-primary-down | [{cyan-1000}](/tokens/color-palette/#cyan-1000) | light: rgb(4, 102, 145); dark: rgb(38, 159, 244); wireframe: rgb(61, 94, 165) | No | - | - | +| icon-color-fuchsia-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-fuchsia-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-fuchsia-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-green-primary-hover | [{green-900}](/tokens/color-palette/#green-900) | light: rgb(5, 131, 78); dark: rgb(9, 157, 89); wireframe: rgb(74, 111, 195) | No | - | - | +| icon-color-green-primary-down | [{green-1000}](/tokens/color-palette/#green-1000) | light: rgb(3, 110, 69); dark: rgb(14, 175, 98); wireframe: rgb(61, 94, 165) | No | - | - | +| icon-color-indigo-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-indigo-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-indigo-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-magenta-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-magenta-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-magenta-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-orange-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-orange-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-orange-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-pink-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-pink-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-pink-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-purple-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-purple-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-purple-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-red-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-red-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-seafoam-primary-default | [{seafoam-800}](/tokens/color-palette/#seafoam-800) | light: rgb(9, 144, 120); dark: rgb(8, 134, 112); wireframe: rgb(93, 127, 201) | No | - | - | +| icon-color-seafoam-primary-hover | [{seafoam-900}](/tokens/color-palette/#seafoam-900) | light: rgb(7, 129, 109); dark: rgb(10, 154, 128); wireframe: rgb(74, 111, 195) | No | - | - | +| icon-color-seafoam-primary-down | [{seafoam-1000}](/tokens/color-palette/#seafoam-1000) | light: rgb(5, 108, 92); dark: rgb(12, 173, 142); wireframe: rgb(61, 94, 165) | No | - | - | +| icon-color-silver-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-silver-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-silver-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-turquoise-primary-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-turquoise-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-turquoise-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-yellow-primary-hover | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-yellow-primary-down | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-disabled-primary | [{gray-400}](/tokens/color-palette/#gray-400) | light: rgb(198, 198, 198); dark: rgb(68, 68, 68); wireframe: rgb(180, 199, 239) | No | - | - | +| icon-color-blue-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-brown-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-celery-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-chartreuse-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-cinnamon-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-cyan-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-fuchsia-background | [{fuchsia-200}](/tokens/color-palette/#fuchsia-200) | light: rgb(253, 233, 255); dark: rgb(61, 0, 74); wireframe: rgb(235, 239, 248) | No | - | - | +| icon-color-green-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-indigo-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-magenta-background | [{magenta-200}](/tokens/color-palette/#magenta-200) | light: rgb(255, 232, 240); dark: rgb(74, 0, 27); wireframe: rgb(235, 239, 248) | No | - | - | +| icon-color-orange-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-pink-background | [{pink-200}](/tokens/color-palette/#pink-200) | dark: rgb(71, 0, 44); light: rgb(255, 232, 247); wireframe: rgb(235, 239, 248) | No | - | - | +| icon-color-purple-background | [{purple-200}](/tokens/color-palette/#purple-200) | light: rgb(244, 235, 252); dark: rgb(50, 0, 96); wireframe: rgb(235, 239, 248) | No | - | - | +| icon-color-red-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-seafoam-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-silver-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-turquoise-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-yellow-background | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-inverse-background | [{gray-50}](/tokens/color-palette/#gray-50) | light: rgb(248, 248, 248); dark: rgb(27, 27, 27); wireframe: rgb(246, 248, 253) | No | - | - | +| icon-color-emphasized-background | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | + diff --git a/docs/markdown/tokens/layout-component.md b/docs/markdown/tokens/layout-component.md new file mode 100644 index 00000000..592a85b4 --- /dev/null +++ b/docs/markdown/tokens/layout-component.md @@ -0,0 +1,1009 @@ +--- +title: layout component +description: Design tokens from layout-component.json +tags: + - tokens + - layout-component +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| checkbox-control-size-small | - | desktop: 14px; mobile: 18px | No | - | - | +| checkbox-control-size-medium | - | desktop: 16px; mobile: 20px | No | - | - | +| checkbox-control-size-large | - | desktop: 18px; mobile: 22px | No | - | - | +| checkbox-control-size-extra-large | - | desktop: 20px; mobile: 26px | No | - | - | +| checkbox-top-to-control-small | - | desktop: 5px; mobile: 6px | No | - | - | +| checkbox-top-to-control-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| checkbox-top-to-control-large | - | desktop: 11px; mobile: 14px | No | - | - | +| checkbox-top-to-control-extra-large | - | desktop: 14px; mobile: 17px | No | - | - | +| switch-control-width-small | - | desktop: 22px; mobile: 30px | No | - | - | +| switch-control-width-medium | - | desktop: 26px; mobile: 34px | No | - | - | +| switch-control-width-large | - | desktop: 30px; mobile: 38px | No | - | - | +| switch-control-width-extra-large | - | desktop: 34px; mobile: 46px | No | - | - | +| switch-control-height-small | - | desktop: 14px; mobile: 18px | No | - | - | +| switch-control-height-medium | - | desktop: 16px; mobile: 20px | No | - | - | +| switch-control-height-large | - | desktop: 18px; mobile: 22px | No | - | - | +| switch-control-height-extra-large | - | desktop: 20px; mobile: 26px | No | - | - | +| switch-top-to-control-small | - | desktop: 6px; mobile: 7px | No | - | - | +| switch-top-to-control-medium | - | desktop: 9px; mobile: 11px | No | - | - | +| switch-top-to-control-large | - | desktop: 12px; mobile: 15px | No | - | - | +| switch-top-to-control-extra-large | - | desktop: 15px; mobile: 19px | No | - | - | +| radio-button-control-size-small | - | desktop: 12px; mobile: 16px | No | - | - | +| radio-button-control-size-medium | - | desktop: 14px; mobile: 18px | No | - | - | +| radio-button-control-size-large | - | desktop: 16px; mobile: 20px | No | - | - | +| radio-button-control-size-extra-large | - | desktop: 18px; mobile: 22px | No | - | - | +| radio-button-top-to-control-small | - | desktop: 6px; mobile: 7px | No | - | - | +| radio-button-top-to-control-medium | - | desktop: 9px; mobile: 11px | No | - | - | +| radio-button-top-to-control-large | - | desktop: 12px; mobile: 15px | No | - | - | +| radio-button-top-to-control-extra-large | - | desktop: 15px; mobile: 19px | No | - | - | +| radio-button-selection-indicator | 4px | 4px | No | - | - | +| field-label-text-to-asterisk-small | - | desktop: 4px; mobile: 5px | No | - | - | +| field-label-text-to-asterisk-medium | - | desktop: 4px; mobile: 5px | No | - | - | +| field-label-text-to-asterisk-large | - | desktop: 5px; mobile: 6px | No | - | - | +| field-label-text-to-asterisk-extra-large | - | desktop: 5px; mobile: 6px | No | - | - | +| field-label-top-to-asterisk-small | - | desktop: 8px; mobile: 11px | No | - | - | +| field-label-top-to-asterisk-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| field-label-top-to-asterisk-large | - | desktop: 15px; mobile: 19px | No | - | - | +| field-label-top-to-asterisk-extra-large | - | desktop: 18px; mobile: 24px | No | - | - | +| field-label-top-margin-small | 0px | 0px | No | - | - | +| field-label-top-margin-medium | 0px | 0px | No | - | - | +| field-label-top-margin-large | 0px | 0px | No | - | - | +| field-label-top-margin-extra-large | 0px | 0px | No | - | - | +| field-label-to-component | 0px | 0px | No | - | - | +| field-label-to-component-quiet-small | - | desktop: -8px; mobile: -10px | No | - | - | +| field-label-to-component-quiet-medium | - | desktop: -8px; mobile: -10px | No | - | - | +| field-label-to-component-quiet-large | - | desktop: -12px; mobile: -15px | No | - | - | +| field-label-to-component-quiet-extra-large | - | desktop: -15px; mobile: -19px | No | - | - | +| help-text-top-to-workflow-icon-small | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| help-text-top-to-workflow-icon-medium | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| help-text-top-to-workflow-icon-large | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| help-text-top-to-workflow-icon-extra-large | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| help-text-to-component | 0px | 0px | No | - | - | +| status-light-dot-size-small | - | desktop: 8px; mobile: 10px | No | - | - | +| status-light-dot-size-medium | - | desktop: 10px; mobile: 12px | No | - | - | +| status-light-dot-size-large | - | desktop: 12px; mobile: 14px | No | - | - | +| status-light-dot-size-extra-large | - | desktop: 14px; mobile: 16px | No | - | - | +| status-light-top-to-dot-small | - | desktop: 8px; mobile: 10px | No | - | - | +| status-light-top-to-dot-medium | - | desktop: 11px; mobile: 14px | No | - | - | +| status-light-top-to-dot-large | - | desktop: 14px; mobile: 18px | No | - | - | +| status-light-top-to-dot-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| action-button-edge-to-hold-icon-extra-small | 3px | 3px | No | - | - | +| action-button-edge-to-hold-icon-small | 3px | 3px | No | - | - | +| action-button-edge-to-hold-icon-medium | - | desktop: 4px; mobile: 5px | No | - | - | +| action-button-edge-to-hold-icon-large | - | desktop: 5px; mobile: 6px | No | - | - | +| action-button-edge-to-hold-icon-extra-large | - | desktop: 6px; mobile: 7px | No | - | - | +| button-minimum-width-multiplier | 2.25 | 2.25 | No | - | - | +| tooltip-tip-width | - | desktop: 10px; mobile: 12px | No | - | - | +| tooltip-tip-height | - | desktop: 5px; mobile: 6px | No | - | - | +| tooltip-maximum-width | - | desktop: 160px; mobile: 200px | No | - | - | +| divider-thickness-small | 1px | 1px | No | - | - | +| divider-thickness-medium | 2px | 2px | No | - | - | +| divider-thickness-large | 4px | 4px | No | - | - | +| progress-circle-size-small | - | desktop: 16px; mobile: 20px | No | - | - | +| progress-circle-size-medium | - | desktop: 32px; mobile: 40px | No | - | - | +| progress-circle-size-large | - | desktop: 64px; mobile: 80px | No | - | - | +| progress-circle-thickness-small | - | desktop: 2px; mobile: 3px | No | - | - | +| progress-circle-thickness-medium | - | desktop: 3px; mobile: 4px | No | - | - | +| progress-circle-thickness-large | - | desktop: 4px; mobile: 5px | No | - | - | +| toast-height | - | desktop: 52px; mobile: 60px | No | - | - | +| toast-maximum-width | - | desktop: 336px; mobile: 420px | No | - | - | +| toast-top-to-workflow-icon | - | desktop: 18px; mobile: 20px | No | - | - | +| toast-top-to-text | - | desktop: 18px; mobile: 20px | No | - | - | +| toast-bottom-to-text | - | desktop: 20px; mobile: 22px | No | - | - | +| action-bar-height | [{component-height-400}](/tokens/layout/#component-height-400) | desktop: 56px; mobile: 70px | No | - | - | +| action-bar-top-to-item-counter | [{component-top-to-text-300}](/tokens/layout/#component-top-to-text-300) | desktop: 12px; mobile: 15px | No | - | - | +| swatch-size-extra-small | - | desktop: 16px; mobile: 20px | No | - | - | +| swatch-size-small | - | desktop: 24px; mobile: 30px | No | - | - | +| swatch-size-medium | - | desktop: 32px; mobile: 40px | No | - | - | +| swatch-size-large | - | desktop: 40px; mobile: 50px | No | - | - | +| swatch-rectangle-width-multiplier | 2 | 2 | No | - | - | +| swatch-slash-thickness-extra-small | 2px | 2px | No | - | - | +| swatch-slash-thickness-small | 3px | 3px | No | - | - | +| swatch-slash-thickness-medium | 4px | 4px | No | - | - | +| swatch-slash-thickness-large | 5px | 5px | No | - | - | +| progress-bar-minimum-width | 48px | 48px | No | - | - | +| progress-bar-maximum-width | 768px | 768px | No | - | - | +| progress-bar-thickness-small | - | desktop: 4px; mobile: 5px | No | - | - | +| progress-bar-thickness-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| progress-bar-thickness-large | - | desktop: 8px; mobile: 10px | No | - | - | +| progress-bar-thickness-extra-large | - | desktop: 10px; mobile: 13px | No | - | - | +| meter-minimum-width | 48px | 48px | No | - | - | +| meter-maximum-width | 768px | 768px | No | - | - | +| meter-width | - | desktop: 192px; mobile: 240px | No | - | - | +| meter-default-width | [{meter-width}](/tokens/layout-component/#meter-width) | desktop: 192px; mobile: 240px | Yes | Token renamed, use `meter-width` | Replaced by [meter-width](/tokens/layout-component/#meter-width) | +| meter-thickness-small | - | desktop: 4px; mobile: 5px | No | - | - | +| meter-thickness-large | - | desktop: 8px; mobile: 10px | No | - | - | +| in-line-alert-minimum-width | 240px | 240px | No | - | - | +| tag-top-to-avatar-small | - | desktop: 4px; mobile: 5px | No | - | - | +| tag-top-to-avatar-medium | - | desktop: 6px; mobile: 7px | No | - | - | +| tag-top-to-avatar-large | - | desktop: 9px; mobile: 11px | No | - | - | +| tag-top-to-cross-icon-small | - | desktop: 8px; mobile: 10px | No | - | - | +| tag-top-to-cross-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| tag-top-to-cross-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| popover-tip-width | 16px | 16px | No | - | - | +| popover-tip-height | 8px | 8px | No | - | - | +| popover-top-to-content-area | [{popover-edge-to-content-area}](/tokens/layout-component/#popover-edge-to-content-area) | 8px | Yes | Introduced as an error. Use popover-edge-to-content-area instead | Replaced by [popover-edge-to-content-area](/tokens/layout-component/#popover-edge-to-content-area) | +| popover-edge-to-content-area | [{spacing-100}](/tokens/layout/#spacing-100) | 8px | No | - | - | +| menu-item-label-to-description | [{menu-item-label-to-description-medium}](/tokens/layout-component/#menu-item-label-to-description-medium) | 1px | Yes | - | - | +| menu-item-edge-to-content-not-selected-small | - | desktop: 28px; mobile: 24px | No | - | - | +| menu-item-edge-to-content-not-selected-medium | - | desktop: 32px; mobile: 42px | No | - | - | +| menu-item-edge-to-content-not-selected-large | - | desktop: 38px; mobile: 47px | No | - | - | +| menu-item-edge-to-content-not-selected-extra-large | - | desktop: 45px; mobile: 54px | No | - | - | +| menu-item-top-to-disclosure-icon-small | - | desktop: 7px; mobile: 9px | No | - | - | +| menu-item-top-to-disclosure-icon-medium | - | desktop: 11px; mobile: 13px | No | - | - | +| menu-item-top-to-disclosure-icon-large | - | desktop: 14px; mobile: 17px | No | - | - | +| menu-item-top-to-disclosure-icon-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| menu-item-top-to-selected-icon-small | - | desktop: 7px; mobile: 9px | No | - | - | +| menu-item-top-to-selected-icon-medium | - | desktop: 11px; mobile: 13px | No | - | - | +| menu-item-top-to-selected-icon-large | - | desktop: 14px; mobile: 17px | No | - | - | +| menu-item-top-to-selected-icon-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| menu-item-section-divider-height | 12px | 12px | No | - | - | +| slider-track-thickness | 2px | 2px | Yes | - | - | +| slider-control-height-small | - | desktop: 14px; mobile: 18px | No | - | - | +| slider-control-height-medium | - | desktop: 16px; mobile: 20px | No | - | - | +| slider-control-height-large | - | desktop: 18px; mobile: 22px | No | - | - | +| slider-control-height-extra-large | - | desktop: 20px; mobile: 26px | No | - | - | +| slider-handle-size-small | - | desktop: 14px; mobile: 18px | No | - | - | +| slider-handle-size-medium | - | desktop: 16px; mobile: 20px | No | - | - | +| slider-handle-size-large | - | desktop: 18px; mobile: 22px | No | - | - | +| slider-handle-size-extra-large | - | desktop: 20px; mobile: 26px | No | - | - | +| slider-handle-border-width-down-small | - | desktop: 5px; mobile: 7px | No | - | - | +| slider-handle-border-width-down-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| slider-handle-border-width-down-large | - | desktop: 7px; mobile: 9px | No | - | - | +| slider-handle-border-width-down-extra-large | - | desktop: 8px; mobile: 11px | No | - | - | +| slider-handle-gap | 4px | 4px | Yes | - | - | +| slider-bottom-to-handle-small | - | desktop: 5px; mobile: 6px | No | - | - | +| slider-bottom-to-handle-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| slider-bottom-to-handle-large | - | desktop: 11px; mobile: 14px | No | - | - | +| slider-bottom-to-handle-extra-large | - | desktop: 14px; mobile: 17px | No | - | - | +| slider-control-to-field-label-small | - | desktop: -4px; mobile: -8px | No | - | - | +| slider-control-to-field-label-medium | - | desktop: -12px; mobile: -16px | No | - | - | +| slider-control-to-field-label-large | - | desktop: -16px; mobile: -20px | No | - | - | +| slider-control-to-field-label-extra-large | - | desktop: -20px; mobile: -28px | No | - | - | +| picker-minimum-width-multiplier | 2 | 2 | No | - | - | +| picker-visual-to-disclosure-icon-small | - | desktop: 7px; mobile: 9px | No | - | - | +| picker-visual-to-disclosure-icon-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| picker-visual-to-disclosure-icon-large | - | desktop: 9px; mobile: 11px | No | - | - | +| picker-visual-to-disclosure-icon-extra-large | - | desktop: 10px; mobile: 13px | No | - | - | +| picker-border-width | [{border-width-100}](/tokens/layout/#border-width-100) | 1px | No | - | - | +| picker-end-edge-to-disclousure-icon-quiet | [{picker-end-edge-to-disclosure-icon-quiet}](/tokens/layout-component/#picker-end-edge-to-disclosure-icon-quiet) | 0px | Yes | Use `picker-end-edge-to-disclosure-icon-quiet` instead | Replaced by [picker-end-edge-to-disclosure-icon-quiet](/tokens/layout-component/#picker-end-edge-to-disclosure-icon-quiet) | +| picker-end-edge-to-disclosure-icon-quiet | 0px | 0px | No | - | - | +| text-field-minimum-width-multiplier | 1.5 | 1.5 | No | - | - | +| text-area-minimum-width | - | desktop: 112px; mobile: 140px | No | - | - | +| text-area-minimum-height | - | desktop: 56px; mobile: 70px | No | - | - | +| combo-box-minimum-width-multiplier | 2.5 | 2.5 | No | - | - | +| combo-box-quiet-minimum-width-multiplier | 2 | 2 | Yes | - | - | +| combo-box-visual-to-field-button-small | [{combo-box-visual-to-field-button}](/tokens/layout-component/#combo-box-visual-to-field-button) | 0px | Yes | Replaced with combo-box-visual-to-field-button | Replaced by [combo-box-visual-to-field-button](/tokens/layout-component/#combo-box-visual-to-field-button) | +| combo-box-visual-to-field-button-medium | [{combo-box-visual-to-field-button}](/tokens/layout-component/#combo-box-visual-to-field-button) | 0px | Yes | Replaced with combo-box-visual-to-field-button | Replaced by [combo-box-visual-to-field-button](/tokens/layout-component/#combo-box-visual-to-field-button) | +| combo-box-visual-to-field-button-large | [{combo-box-visual-to-field-button}](/tokens/layout-component/#combo-box-visual-to-field-button) | 0px | Yes | Replaced with combo-box-visual-to-field-button | Replaced by [combo-box-visual-to-field-button](/tokens/layout-component/#combo-box-visual-to-field-button) | +| combo-box-visual-to-field-button-extra-large | [{combo-box-visual-to-field-button}](/tokens/layout-component/#combo-box-visual-to-field-button) | 0px | Yes | Replaced with combo-box-visual-to-field-button | Replaced by [combo-box-visual-to-field-button](/tokens/layout-component/#combo-box-visual-to-field-button) | +| combo-box-visual-to-field-button-quiet | [{combo-box-visual-to-field-button}](/tokens/layout-component/#combo-box-visual-to-field-button) | 0px | Yes | Replaced with combo-box-visual-to-field-button | Replaced by [combo-box-visual-to-field-button](/tokens/layout-component/#combo-box-visual-to-field-button) | +| thumbnail-size-50 | - | desktop: 16px; mobile: 20px | No | - | - | +| thumbnail-size-75 | - | desktop: 20px; mobile: 24px | No | - | - | +| thumbnail-size-100 | - | desktop: 24px; mobile: 28px | No | - | - | +| thumbnail-size-200 | - | desktop: 28px; mobile: 32px | No | - | - | +| thumbnail-size-300 | - | desktop: 32px; mobile: 36px | No | - | - | +| thumbnail-size-400 | - | desktop: 36px; mobile: 40px | No | - | - | +| thumbnail-size-500 | - | desktop: 40px; mobile: 44px | No | - | - | +| thumbnail-size-600 | - | desktop: 44px; mobile: 48px | No | - | - | +| thumbnail-size-700 | - | desktop: 48px; mobile: 52px | No | - | - | +| thumbnail-size-800 | - | desktop: 52px; mobile: 56px | No | - | - | +| thumbnail-size-900 | - | desktop: 56px; mobile: 64px | No | - | - | +| thumbnail-size-1000 | - | desktop: 64px; mobile: 72px | No | - | - | +| alert-dialog-minimum-width | 288px | 288px | No | - | - | +| alert-dialog-maximum-width | 480px | 480px | No | - | - | +| alert-dialog-title-size | [{alert-dialog-title-font-size}](/tokens/layout-component/#alert-dialog-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Replace with alert-dialog-title-font-size | Replaced by [alert-dialog-title-font-size](/tokens/layout-component/#alert-dialog-title-font-size) | +| alert-dialog-description-size | [{alert-dialog-description-font-size}](/tokens/layout-component/#alert-dialog-description-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Replace with alert-dialog-description-font-size | Replaced by [alert-dialog-description-font-size](/tokens/layout-component/#alert-dialog-description-font-size) | +| opacity-checkerboard-square-size | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use opacity-checkerboard-square-size-medium instead. | Replaced by [opacity-checkerboard-square-size-medium](/tokens/layout-component/#opacity-checkerboard-square-size-medium) | +| opacity-checkerboard-square-size-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| contextual-help-minimum-width | 268px | 268px | No | - | - | +| contextual-help-title-size | [{contextual-help-title-font-size}](/tokens/layout-component/#contextual-help-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | - | - | +| contextual-help-body-size | [{contextual-help-body-font-size}](/tokens/layout-component/#contextual-help-body-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | - | - | +| breadcrumbs-height | [{component-height-200}](/tokens/layout/#component-height-200) | desktop: 40px; mobile: 50px | Yes | - | - | +| breadcrumbs-height-compact | [{component-height-100}](/tokens/layout/#component-height-100) | desktop: 32px; mobile: 40px | Yes | - | - | +| breadcrumbs-height-multiline | - | desktop: 72px; mobile: 90px | No | - | - | +| breadcrumbs-top-to-text | [{component-top-to-text-200}](/tokens/layout/#component-top-to-text-200) | desktop: 9px; mobile: 12px | Yes | - | - | +| breadcrumbs-top-to-text-compact | [{component-top-to-text-100}](/tokens/layout/#component-top-to-text-100) | desktop: 6px; mobile: 8px | Yes | - | - | +| breadcrumbs-top-to-text-multiline | - | desktop: 4px; mobile: 5px | No | - | - | +| breadcrumbs-bottom-to-text | [{component-bottom-to-text-200}](/tokens/layout/#component-bottom-to-text-200) | desktop: 11px; mobile: 14px | Yes | - | - | +| breadcrumbs-bottom-to-text-compact | [{component-bottom-to-text-100}](/tokens/layout/#component-bottom-to-text-100) | desktop: 9px; mobile: 11px | Yes | - | - | +| breadcrumbs-bottom-to-text-multiline | - | desktop: 9px; mobile: 11px | No | - | - | +| breadcrumbs-start-edge-to-text | [{breadcrumbs-start-edge-to-text-large}](/tokens/layout-component/#breadcrumbs-start-edge-to-text-large) | desktop: 9px; mobile: 11px | Yes | Use a sized token instead, e.g., breadcrumbs-start-edge-to-text-large. | Replaced by [breadcrumbs-start-edge-to-text-large](/tokens/layout-component/#breadcrumbs-start-edge-to-text-large) | +| breadcrumbs-end-edge-to-text | 0px | 0px | No | - | - | +| breadcrumbs-top-text-to-bottom-text | - | desktop: 9px; mobile: 11px | No | - | - | +| breadcrumbs-top-to-separator-icon | [{breadcrumbs-top-to-separator-large}](/tokens/layout-component/#breadcrumbs-top-to-separator-large) | desktop: 15px; mobile: 20px | Yes | Use a sized token instead, e.g., breadcrumbs-top-to-separator-large. | Replaced by [breadcrumbs-top-to-separator-large](/tokens/layout-component/#breadcrumbs-top-to-separator-large) | +| breadcrumbs-top-to-separator-icon-compact | [{breadcrumbs-top-to-separator-medium}](/tokens/layout-component/#breadcrumbs-top-to-separator-medium) | desktop: 11px; mobile: 15px | Yes | Use a sized token instead, e.g., breadcrumbs-top-to-separator-medium. | Replaced by [breadcrumbs-top-to-separator-medium](/tokens/layout-component/#breadcrumbs-top-to-separator-medium) | +| breadcrumbs-top-to-separator-icon-multiline | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| breadcrumbs-separator-icon-to-bottom-text-multiline | [{breadcrumbs-separator-to-bottom-text-multiline}](/tokens/layout-component/#breadcrumbs-separator-to-bottom-text-multiline) | desktop: 11px; mobile: 15px | Yes | - | - | +| breadcrumbs-truncated-menu-to-separator-icon | [{breadcrumbs-truncated-menu-to-separator}](/tokens/layout-component/#breadcrumbs-truncated-menu-to-separator) | 0px | Yes | - | - | +| breadcrumbs-top-to-truncated-menu | 0px | 0px | No | - | - | +| breadcrumbs-top-to-truncated-menu-compact | [{breadcrumbs-top-to-truncated-menu}](/tokens/layout-component/#breadcrumbs-top-to-truncated-menu) | 0px | Yes | - | - | +| breadcrumbs-start-edge-to-truncated-menu | 0px | 0px | No | - | - | +| breadcrumbs-truncated-menu-to-bottom-text | - | desktop: 4px; mobile: 5px | No | - | - | +| avatar-size-50 | - | desktop: 16px; mobile: 20px | No | - | - | +| avatar-size-75 | - | desktop: 20px; mobile: 24px | No | - | - | +| avatar-size-100 | - | desktop: 24px; mobile: 28px | No | - | - | +| avatar-size-200 | - | desktop: 28px; mobile: 32px | No | - | - | +| avatar-size-300 | - | desktop: 32px; mobile: 36px | No | - | - | +| avatar-size-400 | - | desktop: 36px; mobile: 40px | No | - | - | +| avatar-size-500 | - | desktop: 40px; mobile: 44px | No | - | - | +| avatar-size-600 | - | desktop: 44px; mobile: 48px | No | - | - | +| avatar-size-700 | - | desktop: 48px; mobile: 52px | No | - | - | +| avatar-size-800 | - | desktop: 52px; mobile: 56px | No | - | - | +| avatar-size-900 | - | desktop: 56px; mobile: 64px | No | - | - | +| avatar-size-1000 | - | desktop: 64px; mobile: 72px | No | - | - | +| avatar-size-1100 | - | desktop: 72px; mobile: 80px | No | - | - | +| avatar-size-1200 | - | desktop: 80px; mobile: 88px | No | - | - | +| avatar-size-1300 | - | desktop: 88px; mobile: 96px | No | - | - | +| avatar-size-1400 | - | desktop: 96px; mobile: 104px | No | - | - | +| avatar-size-1500 | - | desktop: 104px; mobile: 112px | No | - | - | +| alert-banner-minimum-height | - | desktop: 56px; mobile: 64px | No | - | - | +| alert-banner-width | - | desktop: 832px; mobile: 680px | No | - | - | +| alert-banner-to-top-workflow-icon | [{alert-banner-top-to-workflow-icon}](/tokens/layout-component/#alert-banner-top-to-workflow-icon) | desktop: 18px; mobile: 20px | Yes | Introduced as an error. Use alert-banner-top-to-workflow-icon instead | Replaced by [alert-banner-top-to-workflow-icon](/tokens/layout-component/#alert-banner-top-to-workflow-icon) | +| alert-banner-top-to-workflow-icon | - | desktop: 18px; mobile: 20px | No | - | - | +| alert-banner-to-top-text | [{alert-banner-top-to-text}](/tokens/layout-component/#alert-banner-top-to-text) | desktop: 18px; mobile: 21px | Yes | Introduced as an error. Use alert-banner-top-to-text instead | Replaced by [alert-banner-top-to-text](/tokens/layout-component/#alert-banner-top-to-text) | +| alert-banner-top-to-text | - | desktop: 18px; mobile: 21px | No | - | - | +| alert-banner-to-bottom-text | [{alert-banner-bottom-to-text}](/tokens/layout-component/#alert-banner-bottom-to-text) | desktop: 20px; mobile: 22px | Yes | Introduced as an error. Use alert-banner-bottom-to-text instead | Replaced by [alert-banner-bottom-to-text](/tokens/layout-component/#alert-banner-bottom-to-text) | +| alert-banner-bottom-to-text | - | desktop: 20px; mobile: 22px | No | - | - | +| rating-indicator-width | - | desktop: 18px; mobile: 22px | No | - | - | +| rating-indicator-to-icon | - | desktop: 4px; mobile: 5px | No | - | - | +| color-area-width | - | desktop: 192px; mobile: 240px | No | - | - | +| color-area-minimum-width | - | desktop: 64px; mobile: 80px | No | - | - | +| color-area-height | - | desktop: 192px; mobile: 240px | No | - | - | +| color-area-minimum-height | - | desktop: 64px; mobile: 80px | No | - | - | +| color-area-border-width | [{border-width-100}](/tokens/layout/#border-width-100) | 1px | No | - | - | +| color-area-border-rounding | [{corner-radius-medium-size-small}](/tokens/layout/#corner-radius-medium-size-small) | 7px | No | - | - | +| color-wheel-width | - | desktop: 192px; mobile: 240px | No | - | - | +| color-wheel-minimum-width | - | desktop: 175px; mobile: 219px | No | - | - | +| color-wheel-color-area-margin | 12px | 12px | No | - | - | +| color-slider-length | - | desktop: 192px; mobile: 240px | No | - | - | +| color-slider-minimum-length | - | desktop: 80px; mobile: 100px | No | - | - | +| color-slider-border-width | 1px | 1px | No | - | - | +| color-slider-border-rounding | [{corner-radius-medium-size-small}](/tokens/layout/#corner-radius-medium-size-small) | 7px | No | - | - | +| floating-action-button-drop-shadow-blur | 12px | 12px | No | - | - | +| floating-action-button-drop-shadow-y | 4px | 4px | No | - | - | +| illustrated-message-maximum-width | [{illustrated-message-vertical-maximum-width}](/tokens/layout-component/#illustrated-message-vertical-maximum-width) | 380px | Yes | - | - | +| illustrated-message-title-size | [{illustrated-message-large-title-font-size}](/tokens/layout-component/#illustrated-message-large-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Use illustrated-message-medium-title-font-size instead | Replaced by [illustrated-message-medium-title-font-size](/tokens/layout-component/#illustrated-message-medium-title-font-size) | +| illustrated-message-cjk-title-size | [{illustrated-message-large-cjk-title-font-size}](/tokens/layout-component/#illustrated-message-large-cjk-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Use illustrated-message-medium-cjk-title-font-size instead | Replaced by [illustrated-message-medium-cjk-title-font-size](/tokens/layout-component/#illustrated-message-medium-cjk-title-font-size) | +| illustrated-message-body-size | [{illustrated-message-large-body-font-size}](/tokens/layout-component/#illustrated-message-large-body-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Use illustrated-message-medium-body-font-size instead | Replaced by [illustrated-message-medium-body-font-size](/tokens/layout-component/#illustrated-message-medium-body-font-size) | +| search-field-minimum-width-multiplier | 4 | 4 | No | - | - | +| color-loupe-height | 64px | 64px | No | - | - | +| color-loupe-width | 48px | 48px | No | - | - | +| color-loupe-bottom-to-color-handle | 12px | 12px | No | - | - | +| color-loupe-outer-border-width | [{border-width-200}](/tokens/layout/#border-width-200) | 2px | No | - | - | +| color-loupe-inner-border-width | 1px | 1px | No | - | - | +| card-minimum-width | [{card-minimum-width-default}](/tokens/layout-component/#card-minimum-width-default) | 100px | Yes | This token has been deprecated, use card-minimum-width-default instead. | Replaced by [card-minimum-width-default](/tokens/layout-component/#card-minimum-width-default) | +| card-minimum-width-default | 100px | 100px | No | - | - | +| card-preview-minimum-height | 130px | 130px | No | - | - | +| card-selection-background-size | 40px | 40px | No | - | - | +| drop-zone-width | 428px | 428px | No | - | - | +| drop-zone-content-maximum-width | [{illustrated-message-maximum-width}](/tokens/layout-component/#illustrated-message-maximum-width) | 380px | Yes | - | - | +| drop-zone-border-dash-length | 8px | 8px | No | - | - | +| drop-zone-border-dash-gap | 6px | 6px | No | - | - | +| drop-zone-title-size | [{drop-zone-title-font-size}](/tokens/layout-component/#drop-zone-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Use drop-zone-title-font-size instead | Replaced by [drop-zone-title-font-size](/tokens/layout-component/#drop-zone-title-font-size) | +| drop-zone-cjk-title-size | [{drop-zone-cjk-title-font-size}](/tokens/layout-component/#drop-zone-cjk-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Use drop-zone-cjk-title-font-size instead | Replaced by [drop-zone-cjk-title-font-size](/tokens/layout-component/#drop-zone-cjk-title-font-size) | +| drop-zone-body-size | [{drop-zone-body-font-size}](/tokens/layout-component/#drop-zone-body-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Use drop-zone-body-font-size instead | Replaced by [drop-zone-body-font-size](/tokens/layout-component/#drop-zone-body-font-size) | +| coach-mark-width | - | desktop: 296px; mobile: 216px | No | - | - | +| coach-mark-minimum-width | - | desktop: 296px; mobile: 216px | No | - | - | +| coach-mark-maximum-width | - | desktop: 380px; mobile: 248px | No | - | - | +| coach-mark-edge-to-content | - | desktop: 24px; mobile: 16px | No | - | - | +| coach-mark-pagination-text-to-bottom-edge | - | desktop: 33px; mobile: 22px | No | - | - | +| coach-mark-media-height | - | desktop: 222px; mobile: 162px | No | - | - | +| coach-mark-media-minimum-height | - | desktop: 166px; mobile: 121px | No | - | - | +| coach-mark-title-size | [{coach-mark-title-font-size}](/tokens/layout-component/#coach-mark-title-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Replace with coach-mark-title-font-size | Replaced by [coach-mark-title-font-size](/tokens/layout-component/#coach-mark-title-font-size) | +| coach-mark-body-size | [{coach-mark-body-font-size}](/tokens/layout-component/#coach-mark-body-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Replace with coach-mark-body-font-size | Replaced by [coach-mark-body-font-size](/tokens/layout-component/#coach-mark-body-font-size) | +| coach-mark-pagination-body-size | [{coach-mark-pagination-body-font-size}](/tokens/layout-component/#coach-mark-pagination-body-font-size) | desktop: [object Object]; mobile: [object Object] | Yes | Replace with coach-mark-pagination-body-font-size | Replaced by [coach-mark-pagination-body-font-size](/tokens/layout-component/#coach-mark-pagination-body-font-size) | +| accordion-top-to-text-compact-small | - | desktop: 3px; mobile: 4px | No | - | - | +| accordion-top-to-text-regular-small | [{accordion-top-to-text-small}](/tokens/layout-component/#accordion-top-to-text-small) | desktop: 7px; mobile: 10px | Yes | - | - | +| accordion-small-top-to-text-spacious | - | desktop: 9px; mobile: 12px | No | - | - | +| accordion-top-to-text-compact-medium | 5px | 5px | No | - | - | +| accordion-top-to-text-regular-medium | [{accordion-top-to-text-medium}](/tokens/layout-component/#accordion-top-to-text-medium) | desktop: 9px; mobile: 10px | Yes | - | - | +| accordion-top-to-text-spacious-medium | - | desktop: 13px; mobile: 15px | No | - | - | +| accordion-top-to-text-compact-large | - | desktop: 8px; mobile: 14px | No | - | - | +| accordion-top-to-text-regular-large | [{accordion-top-to-text-large}](/tokens/layout-component/#accordion-top-to-text-large) | desktop: 12px; mobile: 16px | Yes | - | - | +| accordion-top-to-text-spacious-large | - | desktop: 16px; mobile: 19px | No | - | - | +| accordion-top-to-text-compact-extra-large | - | desktop: 8px; mobile: 11px | No | - | - | +| accordion-top-to-text-regular-extra-large | [{accordion-top-to-text-extra-large}](/tokens/layout-component/#accordion-top-to-text-extra-large) | desktop: 13px; mobile: 17px | Yes | - | - | +| accordion-top-to-text-spacious-extra-large | - | desktop: 17px; mobile: 21px | No | - | - | +| accordion-bottom-to-text-compact-small | - | desktop: 2px; mobile: 4px | No | - | - | +| accordion-bottom-to-text-regular-small | [{accordion-bottom-to-text-small}](/tokens/layout-component/#accordion-bottom-to-text-small) | desktop: 7px; mobile: 9px | Yes | - | - | +| accordion-bottom-to-text-spacious-small | - | desktop: 11px; mobile: 15px | No | - | - | +| accordion-bottom-to-text-compact-medium | - | desktop: 5px; mobile: 8px | No | - | - | +| accordion-bottom-to-text-regular-medium | [{accordion-bottom-to-text-medium}](/tokens/layout-component/#accordion-bottom-to-text-medium) | desktop: 9px; mobile: 13px | Yes | - | - | +| accordion-bottom-to-text-spacious-medium | - | desktop: 13px; mobile: 18px | No | - | - | +| accordion-bottom-to-text-compact-large | - | desktop: 8px; mobile: 9px | No | - | - | +| accordion-bottom-to-text-regular-large | [{accordion-bottom-to-text-large}](/tokens/layout-component/#accordion-bottom-to-text-large) | desktop: 11px; mobile: 14px | Yes | - | - | +| accordion-bottom-to-text-spacious-large | - | desktop: 16px; mobile: 19px | No | - | - | +| accordion-bottom-to-text-compact-extra-large | - | desktop: 8px; mobile: 10px | No | - | - | +| accordion-bottom-to-text-regular-extra-large | [{accordion-bottom-to-text-extra-large}](/tokens/layout-component/#accordion-bottom-to-text-extra-large) | desktop: 12px; mobile: 15px | Yes | - | - | +| accordion-bottom-to-text-spacious-extra-large | - | desktop: 16px; mobile: 21px | No | - | - | +| accordion-minimum-width | - | desktop: 200px; mobile: 250px | No | - | - | +| accordion-disclosure-indicator-to-text | 0px | 0px | Yes | - | - | +| accordion-edge-to-disclosure-indicator | 0px | 0px | Yes | - | - | +| accordion-edge-to-text | 0px | 0px | No | - | - | +| accordion-focus-indicator-gap | 2px | 2px | No | - | - | +| accordion-content-area-top-to-content | - | desktop: 8px; mobile: 10px | No | - | - | +| accordion-content-area-bottom-to-content | - | desktop: 16px; mobile: 20px | No | - | - | +| color-handle-size | - | desktop: 16px; mobile: 20px | No | - | - | +| color-handle-size-key-focus | - | desktop: 32px; mobile: 40px | No | - | - | +| color-handle-border-width | [{border-width-200}](/tokens/layout/#border-width-200) | 2px | No | - | - | +| color-handle-inner-border-width | 1px | 1px | No | - | - | +| color-handle-outer-border-width | 1px | 1px | No | - | - | +| color-handle-drop-shadow-x | 0 | 0 | No | - | - | +| color-handle-drop-shadow-y | 0 | 0 | No | - | - | +| color-handle-drop-shadow-blur | 0 | 0 | No | - | - | +| table-column-header-row-top-to-text-small | - | desktop: 8px; mobile: 10px | No | - | - | +| table-column-header-row-top-to-text-medium | - | desktop: 6px; mobile: 9px | No | - | - | +| table-column-header-row-top-to-text-large | - | desktop: 10px; mobile: 13px | No | - | - | +| table-column-header-row-top-to-text-extra-large | - | desktop: 13px; mobile: 16px | No | - | - | +| table-column-header-row-bottom-to-text-small | - | desktop: 9px; mobile: 11px | No | - | - | +| table-column-header-row-bottom-to-text-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| table-column-header-row-bottom-to-text-large | - | desktop: 10px; mobile: 13px | No | - | - | +| table-column-header-row-bottom-to-text-extra-large | - | desktop: 13px; mobile: 17px | No | - | - | +| table-row-height-small-compact | [{component-height-75}](/tokens/layout/#component-height-75) | desktop: 24px; mobile: 30px | No | - | - | +| table-row-height-medium-compact | [{component-height-100}](/tokens/layout/#component-height-100) | desktop: 32px; mobile: 40px | No | - | - | +| table-row-height-large-compact | [{component-height-200}](/tokens/layout/#component-height-200) | desktop: 40px; mobile: 50px | No | - | - | +| table-row-height-extra-large-compact | [{component-height-300}](/tokens/layout/#component-height-300) | desktop: 48px; mobile: 60px | No | - | - | +| table-row-height-small-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-height-small instead. | Replaced by [table-row-height-small](/tokens/layout-component/#table-row-height-small) | +| table-row-height-small | - | desktop: 32px; mobile: 40px | No | - | - | +| table-row-height-medium-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-height-medium instead. | Replaced by [table-row-height-medium](/tokens/layout-component/#table-row-height-medium) | +| table-row-height-medium | - | desktop: 40px; mobile: 50px | No | - | - | +| table-row-height-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-height-large instead. | Replaced by [table-row-height-large](/tokens/layout-component/#table-row-height-large) | +| table-row-height-large | - | desktop: 48px; mobile: 60px | No | - | - | +| table-row-height-extra-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-height-extra-large instead. | Replaced by [table-row-height-extra-large](/tokens/layout-component/#table-row-height-extra-large) | +| table-row-height-extra-large | - | desktop: 56px; mobile: 70px | No | - | - | +| table-row-height-small-spacious | - | desktop: 40px; mobile: 50px | No | - | - | +| table-row-height-medium-spacious | - | desktop: 48px; mobile: 60px | No | - | - | +| table-row-height-large-spacious | - | desktop: 56px; mobile: 70px | No | - | - | +| table-row-height-extra-large-spacious | - | desktop: 64px; mobile: 80px | No | - | - | +| table-row-top-to-text-small-compact | [{component-top-to-text-75}](/tokens/layout/#component-top-to-text-75) | desktop: 4px; mobile: 5px | No | - | - | +| table-row-top-to-text-medium-compact | [{component-top-to-text-100}](/tokens/layout/#component-top-to-text-100) | desktop: 6px; mobile: 8px | No | - | - | +| table-row-top-to-text-large-compact | [{component-top-to-text-200}](/tokens/layout/#component-top-to-text-200) | desktop: 9px; mobile: 12px | No | - | - | +| table-row-top-to-text-extra-large-compact | [{component-top-to-text-300}](/tokens/layout/#component-top-to-text-300) | desktop: 12px; mobile: 15px | No | - | - | +| table-row-bottom-to-text-small-compact | [{component-bottom-to-text-75}](/tokens/layout/#component-bottom-to-text-75) | desktop: 5px; mobile: 6px | No | - | - | +| table-row-bottom-to-text-medium-compact | [{component-bottom-to-text-100}](/tokens/layout/#component-bottom-to-text-100) | desktop: 9px; mobile: 11px | No | - | - | +| table-row-bottom-to-text-large-compact | [{component-bottom-to-text-200}](/tokens/layout/#component-bottom-to-text-200) | desktop: 11px; mobile: 14px | No | - | - | +| table-row-bottom-to-text-extra-large-compact | [{component-bottom-to-text-300}](/tokens/layout/#component-bottom-to-text-300) | desktop: 14px; mobile: 18px | No | - | - | +| table-row-top-to-text-small-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-top-to-text-small instead. | Replaced by [table-row-top-to-text-small](/tokens/layout-component/#table-row-top-to-text-small) | +| table-row-top-to-text-small | - | desktop: 8px; mobile: 10px | No | - | - | +| table-row-top-to-text-medium-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-top-to-text-medium instead. | Replaced by [table-row-top-to-text-medium](/tokens/layout-component/#table-row-top-to-text-medium) | +| table-row-top-to-text-medium | - | desktop: 10px; mobile: 14px | No | - | - | +| table-row-top-to-text-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-top-to-text-large instead. | Replaced by [table-row-top-to-text-large](/tokens/layout-component/#table-row-top-to-text-large) | +| table-row-top-to-text-large | - | desktop: 14px; mobile: 18px | No | - | - | +| table-row-top-to-text-extra-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-top-to-text-extra-large instead. | Replaced by [table-row-top-to-text-extra-large](/tokens/layout-component/#table-row-top-to-text-extra-large) | +| table-row-top-to-text-extra-large | - | desktop: 17px; mobile: 21px | No | - | - | +| table-row-bottom-to-text-small-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-bottom-to-text-small instead. | Replaced by [table-row-bottom-to-text-small](/tokens/layout-component/#table-row-bottom-to-text-small) | +| table-row-bottom-to-text-small | - | desktop: 9px; mobile: 11px | No | - | - | +| table-row-bottom-to-text-medium-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-bottom-to-text-medium instead. | Replaced by [table-row-bottom-to-text-medium](/tokens/layout-component/#table-row-bottom-to-text-medium) | +| table-row-bottom-to-text-medium | - | desktop: 13px; mobile: 15px | No | - | - | +| table-row-bottom-to-text-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-bottom-to-text-large instead. | Replaced by [table-row-bottom-to-text-large](/tokens/layout-component/#table-row-bottom-to-text-large) | +| table-row-bottom-to-text-large | - | desktop: 14px; mobile: 18px | No | - | - | +| table-row-bottom-to-text-extra-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-bottom-to-text-extra-large instead. | Replaced by [table-row-bottom-to-text-extra-large](/tokens/layout-component/#table-row-bottom-to-text-extra-large) | +| table-row-bottom-to-text-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| table-row-top-to-text-small-spacious | - | desktop: 12px; mobile: 15px | No | - | - | +| table-row-top-to-text-medium-spacious | - | desktop: 15px; mobile: 16px | No | - | - | +| table-row-top-to-text-large-spacious | - | desktop: 18px; mobile: 23px | No | - | - | +| table-row-top-to-text-extra-large-spacious | - | desktop: 21px; mobile: 26px | No | - | - | +| table-row-bottom-to-text-small-spacious | - | desktop: 13px; mobile: 16px | No | - | - | +| table-row-bottom-to-text-medium-spacious | - | desktop: 16px; mobile: 18px | No | - | - | +| table-row-bottom-to-text-large-spacious | - | desktop: 18px; mobile: 23px | No | - | - | +| table-row-bottom-to-text-extra-large-spacious | - | desktop: 21px; mobile: 27px | No | - | - | +| table-edge-to-content | 16px | 16px | No | - | - | +| table-border-divider-width | 1px | 1px | No | - | - | +| table-checkbox-to-text | - | desktop: 24px; mobile: 30px | No | - | - | +| table-header-row-checkbox-to-top-small | - | desktop: 10px; mobile: 14px | No | - | - | +| table-header-row-checkbox-to-top-medium | - | desktop: 8px; mobile: 11px | No | - | - | +| table-header-row-checkbox-to-top-large | - | desktop: 12px; mobile: 17px | No | - | - | +| table-header-row-checkbox-to-top-extra-large | - | desktop: 15px; mobile: 21px | No | - | - | +| table-row-checkbox-to-top-small-compact | - | desktop: 6px; mobile: 9px | No | - | - | +| table-row-checkbox-to-top-small-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-checkbox-to-top-small instead. | Replaced by [table-row-checkbox-to-top-small](/tokens/layout-component/#table-row-checkbox-to-top-small) | +| table-row-checkbox-to-top-small | - | desktop: 10px; mobile: 14px | No | - | - | +| table-row-checkbox-to-top-small-spacious | - | desktop: 14px; mobile: 19px | No | - | - | +| table-row-checkbox-to-top-medium-compact | - | desktop: 8px; mobile: 11px | No | - | - | +| table-row-checkbox-to-top-medium-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-checkbox-to-top-medium instead. | Replaced by [table-row-checkbox-to-top-medium](/tokens/layout-component/#table-row-checkbox-to-top-medium) | +| table-row-checkbox-to-top-medium | - | desktop: 12px; mobile: 16px | No | - | - | +| table-row-checkbox-to-top-medium-spacious | - | desktop: 16px; mobile: 21px | No | - | - | +| table-row-checkbox-to-top-large-compact | - | desktop: 12px; mobile: 17px | No | - | - | +| table-row-checkbox-to-top-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-checkbox-to-top-large instead. | Replaced by [table-row-checkbox-to-top-large](/tokens/layout-component/#table-row-checkbox-to-top-large) | +| table-row-checkbox-to-top-large | - | desktop: 16px; mobile: 22px | No | - | - | +| table-row-checkbox-to-top-large-spacious | - | desktop: 20px; mobile: 27px | No | - | - | +| table-row-checkbox-to-top-extra-large-compact | - | desktop: 15px; mobile: 21px | No | - | - | +| table-row-checkbox-to-top-extra-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-row-checkbox-to-top-extra-large instead. | Replaced by [table-row-checkbox-to-top-extra-large](/tokens/layout-component/#table-row-checkbox-to-top-extra-large) | +| table-row-checkbox-to-top-extra-large | - | desktop: 19px; mobile: 26px | No | - | - | +| table-row-checkbox-to-top-extra-large-spacious | - | desktop: 23px; mobile: 31px | No | - | - | +| table-section-header-row-height-small | - | desktop: 24px; mobile: 30px | No | - | - | +| table-section-header-row-height-medium | - | desktop: 32px; mobile: 40px | No | - | - | +| table-section-header-row-height-large | - | desktop: 40px; mobile: 50px | No | - | - | +| table-section-header-row-height-extra-large | - | desktop: 48px; mobile: 60px | No | - | - | +| table-thumbnail-to-top-minimum-small-compact | - | desktop: 4px; mobile: 5px | No | - | - | +| table-thumbnail-to-top-minimum-medium-compact | - | desktop: 5px; mobile: 6px | No | - | - | +| table-thumbnail-to-top-minimum-large-compact | - | desktop: 7px; mobile: 9px | No | - | - | +| table-thumbnail-to-top-minimum-extra-large-compact | - | desktop: 8px; mobile: 10px | No | - | - | +| table-thumbnail-to-top-minimum-small-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-thumbnail-to-top-minimum-small instead. | Replaced by [table-thumbnail-to-top-minimum-small](/tokens/layout-component/#table-thumbnail-to-top-minimum-small) | +| table-thumbnail-to-top-minimum-small | - | desktop: 5px; mobile: 6px | No | - | - | +| table-thumbnail-to-top-minimum-medium-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-thumbnail-to-top-minimum-medium instead. | Replaced by [table-thumbnail-to-top-minimum-medium](/tokens/layout-component/#table-thumbnail-to-top-minimum-medium) | +| table-thumbnail-to-top-minimum-medium | - | desktop: 7px; mobile: 9px | No | - | - | +| table-thumbnail-to-top-minimum-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-thumbnail-to-top-minimum-large instead. | Replaced by [table-thumbnail-to-top-minimum-large](/tokens/layout-component/#table-thumbnail-to-top-minimum-large) | +| table-thumbnail-to-top-minimum-large | - | desktop: 8px; mobile: 10px | No | - | - | +| table-thumbnail-to-top-minimum-extra-large-regular | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use table-thumbnail-to-top-minimum-extra-large instead. | Replaced by [table-thumbnail-to-top-minimum-extra-large](/tokens/layout-component/#table-thumbnail-to-top-minimum-extra-large) | +| table-thumbnail-to-top-minimum-extra-large | - | desktop: 8px; mobile: 10px | No | - | - | +| table-thumbnail-to-top-minimum-small-spacious | - | desktop: 7px; mobile: 9px | No | - | - | +| table-thumbnail-to-top-minimum-medium-spacious | - | desktop: 8px; mobile: 10px | No | - | - | +| table-thumbnail-to-top-minimum-large-spacious | - | desktop: 8px; mobile: 10px | No | - | - | +| table-thumbnail-to-top-minimum-extra-large-spacious | - | desktop: 10px; mobile: 12px | No | - | - | +| tab-item-height-small | [{component-height-200}](/tokens/layout/#component-height-200) | desktop: 40px; mobile: 50px | No | - | - | +| tab-item-height-medium | [{component-height-300}](/tokens/layout/#component-height-300) | desktop: 48px; mobile: 60px | No | - | - | +| tab-item-height-large | [{component-height-400}](/tokens/layout/#component-height-400) | desktop: 56px; mobile: 70px | No | - | - | +| tab-item-height-extra-large | [{component-height-500}](/tokens/layout/#component-height-500) | desktop: 64px; mobile: 80px | No | - | - | +| tab-item-compact-height-small | [{component-height-75}](/tokens/layout/#component-height-75) | desktop: 24px; mobile: 30px | No | - | - | +| tab-item-compact-height-medium | [{component-height-100}](/tokens/layout/#component-height-100) | desktop: 32px; mobile: 40px | No | - | - | +| tab-item-compact-height-large | [{component-height-200}](/tokens/layout/#component-height-200) | desktop: 40px; mobile: 50px | No | - | - | +| tab-item-compact-height-extra-large | [{component-height-300}](/tokens/layout/#component-height-300) | desktop: 48px; mobile: 60px | No | - | - | +| tab-item-to-tab-item-horizontal-small | - | desktop: 21px; mobile: 27px | No | - | - | +| tab-item-to-tab-item-horizontal-medium | - | desktop: 24px; mobile: 30px | No | - | - | +| tab-item-to-tab-item-horizontal-large | - | desktop: 27px; mobile: 33px | No | - | - | +| tab-item-to-tab-item-horizontal-extra-large | - | desktop: 30px; mobile: 36px | No | - | - | +| tab-item-to-tab-item-vertical-small | - | desktop: 4px; mobile: 5px | No | - | - | +| tab-item-to-tab-item-vertical-medium | - | desktop: 4px; mobile: 5px | No | - | - | +| tab-item-to-tab-item-vertical-large | - | desktop: 5px; mobile: 6px | No | - | - | +| tab-item-to-tab-item-vertical-extra-large | - | desktop: 5px; mobile: 6px | No | - | - | +| tab-item-start-to-edge-quiet | 0px | 0px | No | - | - | +| tab-item-start-to-edge-small | - | desktop: 12px; mobile: 13px | No | - | - | +| tab-item-start-to-edge-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| tab-item-start-to-edge-large | - | desktop: 13px; mobile: 17px | No | - | - | +| tab-item-start-to-edge-extra-large | - | desktop: 13px; mobile: 19px | No | - | - | +| tab-item-top-to-text-small | - | desktop: 11px; mobile: 14px | No | - | - | +| tab-item-bottom-to-text-small | - | desktop: 12px; mobile: 15px | No | - | - | +| tab-item-top-to-text-medium | - | desktop: 14px; mobile: 18px | No | - | - | +| tab-item-bottom-to-text-medium | - | desktop: 14px; mobile: 19px | No | - | - | +| tab-item-top-to-text-large | - | desktop: 16px; mobile: 22px | No | - | - | +| tab-item-bottom-to-text-large | - | desktop: 18px; mobile: 22px | No | - | - | +| tab-item-top-to-text-extra-large | - | desktop: 19px; mobile: 25px | No | - | - | +| tab-item-bottom-to-text-extra-large | - | desktop: 20px; mobile: 25px | No | - | - | +| tab-item-top-to-text-compact-small | - | desktop: 4px; mobile: 5px | No | - | - | +| tab-item-bottom-to-text-compact-small | - | desktop: 5px; mobile: 6px | No | - | - | +| tab-item-top-to-text-compact-medium | - | desktop: 6px; mobile: 9px | No | - | - | +| tab-item-bottom-to-text-compact-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| tab-item-top-to-text-compact-large | - | desktop: 10px; mobile: 12px | No | - | - | +| tab-item-bottom-to-text-compact-large | - | desktop: 12px; mobile: 14px | No | - | - | +| tab-item-top-to-text-compact-extra-large | - | desktop: 12px; mobile: 15px | No | - | - | +| tab-item-bottom-to-text-compact-extra-large | - | desktop: 13px; mobile: 17px | No | - | - | +| tab-item-top-to-workflow-icon-small | - | desktop: 13px; mobile: 15px | No | - | - | +| tab-item-top-to-workflow-icon-medium | - | desktop: 15px; mobile: 19px | No | - | - | +| tab-item-top-to-workflow-icon-large | - | desktop: 17px; mobile: 23px | No | - | - | +| tab-item-top-to-workflow-icon-extra-large | - | desktop: 19px; mobile: 26px | No | - | - | +| tab-item-top-to-workflow-icon-compact-small | - | desktop: 3px; mobile: 5px | No | - | - | +| tab-item-top-to-workflow-icon-compact-medium | - | desktop: 7px; mobile: 9px | No | - | - | +| tab-item-top-to-workflow-icon-compact-large | - | desktop: 9px; mobile: 13px | No | - | - | +| tab-item-top-to-workflow-icon-compact-extra-large | - | desktop: 11px; mobile: 16px | No | - | - | +| tab-item-focus-indicator-gap-small | - | desktop: 7px; mobile: 9px | No | - | - | +| tab-item-focus-indicator-gap-medium | - | desktop: 8px; mobile: 10px | No | - | - | +| tab-item-focus-indicator-gap-large | - | desktop: 9px; mobile: 11px | No | - | - | +| tab-item-focus-indicator-gap-extra-large | - | desktop: 10px; mobile: 12px | No | - | - | +| side-navigation-width | - | desktop: 192px; mobile: 240px | No | - | - | +| side-navigation-minimum-width | - | desktop: 144px; mobile: 180px | No | - | - | +| side-navigation-maximum-width | - | desktop: 240px; mobile: 300px | No | - | - | +| side-navigation-second-level-edge-to-text | - | desktop: 38px; mobile: 44px | No | - | - | +| side-navigation-third-level-edge-to-text | - | desktop: 64px; mobile: 70px | No | - | - | +| side-navigation-with-icon-second-level-edge-to-text | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| side-navigation-with-icon-third-level-edge-to-text | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| side-navigation-item-to-item | - | desktop: 4px; mobile: 5px | No | - | - | +| side-navigation-item-to-header | - | desktop: 24px; mobile: 30px | No | - | - | +| side-navigation-bottom-to-text | - | desktop: 8px; mobile: 10px | No | - | - | +| tray-top-to-content-area | - | desktop: 4px; mobile: 5px | No | - | - | +| in-field-button-width-stacked-small | 20px | 20px | No | - | - | +| in-field-button-width-stacked-medium | 28px | 28px | No | - | - | +| in-field-button-width-stacked-large | 36px | 36px | No | - | - | +| in-field-button-width-stacked-extra-large | 44px | 44px | No | - | - | +| in-field-button-fill-stacked-inner-border-rounding | 0px | 0px | No | - | - | +| in-field-button-edge-to-fill | 0px | 0px | Yes | - | - | +| in-field-button-stacked-inner-edge-to-fill | 0px | 0px | No | - | - | +| in-field-button-edge-to-disclosure-icon-stacked-small | 7px | 7px | No | - | - | +| in-field-button-edge-to-disclosure-icon-stacked-medium | 9px | 9px | No | - | - | +| in-field-button-edge-to-disclosure-icon-stacked-large | 13px | 13px | No | - | - | +| in-field-button-edge-to-disclosure-icon-stacked-extra-large | 16px | 16px | No | - | - | +| in-field-button-outer-edge-to-disclosure-icon-stacked-small | 3px | 3px | No | - | - | +| in-field-button-outer-edge-to-disclosure-icon-stacked-medium | 3px | 3px | No | - | - | +| in-field-button-outer-edge-to-disclosure-icon-stacked-large | 4px | 4px | No | - | - | +| in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large | 5px | 5px | No | - | - | +| in-field-button-inner-edge-to-disclosure-icon-stacked-small | [{in-field-button-outer-edge-to-disclosure-icon-stacked-small}](/tokens/layout-component/#in-field-button-outer-edge-to-disclosure-icon-stacked-small) | 3px | No | - | - | +| in-field-button-inner-edge-to-disclosure-icon-stacked-medium | [{in-field-button-outer-edge-to-disclosure-icon-stacked-medium}](/tokens/layout-component/#in-field-button-outer-edge-to-disclosure-icon-stacked-medium) | 3px | No | - | - | +| in-field-button-inner-edge-to-disclosure-icon-stacked-large | [{in-field-button-outer-edge-to-disclosure-icon-stacked-large}](/tokens/layout-component/#in-field-button-outer-edge-to-disclosure-icon-stacked-large) | 4px | No | - | - | +| in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large | [{in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large}](/tokens/layout-component/#in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large) | 5px | No | - | - | +| arrow-icon-size-75 | - | desktop: 10px; mobile: 12px | No | - | - | +| arrow-icon-size-100 | - | desktop: 10px; mobile: 14px | No | - | - | +| arrow-icon-size-200 | - | desktop: 12px; mobile: 16px | No | - | - | +| arrow-icon-size-300 | - | desktop: 14px; mobile: 16px | No | - | - | +| arrow-icon-size-400 | - | desktop: 16px; mobile: 18px | No | - | - | +| arrow-icon-size-500 | - | desktop: 18px; mobile: 22px | No | - | - | +| arrow-icon-size-600 | - | desktop: 20px; mobile: 24px | No | - | - | +| asterisk-icon-size-75 | 8px | 8px | No | - | - | +| asterisk-icon-size-100 | - | desktop: 8px; mobile: 10px | No | - | - | +| asterisk-icon-size-200 | - | desktop: 10px; mobile: 12px | No | - | - | +| asterisk-icon-size-300 | - | desktop: 10px; mobile: 12px | No | - | - | +| checkmark-icon-size-50 | - | desktop: 10px; mobile: 12px | No | - | - | +| checkmark-icon-size-75 | - | desktop: 10px; mobile: 12px | No | - | - | +| checkmark-icon-size-100 | - | desktop: 10px; mobile: 14px | No | - | - | +| checkmark-icon-size-200 | - | desktop: 12px; mobile: 14px | No | - | - | +| checkmark-icon-size-300 | - | desktop: 14px; mobile: 16px | No | - | - | +| checkmark-icon-size-400 | - | desktop: 16px; mobile: 18px | No | - | - | +| checkmark-icon-size-500 | - | desktop: 16px; mobile: 20px | No | - | - | +| checkmark-icon-size-600 | - | desktop: 18px; mobile: 24px | No | - | - | +| chevron-icon-size-50 | - | desktop: 6px; mobile: 8px | No | - | - | +| chevron-icon-size-75 | - | desktop: 10px; mobile: 12px | No | - | - | +| chevron-icon-size-100 | - | desktop: 10px; mobile: 14px | No | - | - | +| chevron-icon-size-200 | - | desktop: 12px; mobile: 14px | No | - | - | +| chevron-icon-size-300 | - | desktop: 14px; mobile: 16px | No | - | - | +| chevron-icon-size-400 | - | desktop: 16px; mobile: 18px | No | - | - | +| chevron-icon-size-500 | - | desktop: 16px; mobile: 20px | No | - | - | +| chevron-icon-size-600 | - | desktop: 18px; mobile: 24px | No | - | - | +| cross-icon-size-75 | - | desktop: 8px; mobile: 10px | No | - | - | +| cross-icon-size-100 | - | desktop: 8px; mobile: 10px | No | - | - | +| cross-icon-size-200 | - | desktop: 10px; mobile: 12px | No | - | - | +| cross-icon-size-300 | - | desktop: 12px; mobile: 14px | No | - | - | +| cross-icon-size-400 | - | desktop: 12px; mobile: 16px | No | - | - | +| cross-icon-size-500 | - | desktop: 14px; mobile: 16px | No | - | - | +| cross-icon-size-600 | - | desktop: 16px; mobile: 18px | No | - | - | +| dash-icon-size-50 | - | desktop: 8px; mobile: 10px | No | - | - | +| dash-icon-size-75 | - | desktop: 8px; mobile: 10px | No | - | - | +| dash-icon-size-100 | - | desktop: 10px; mobile: 12px | No | - | - | +| dash-icon-size-200 | - | desktop: 12px; mobile: 14px | No | - | - | +| dash-icon-size-300 | - | desktop: 12px; mobile: 16px | No | - | - | +| dash-icon-size-400 | - | desktop: 14px; mobile: 18px | No | - | - | +| dash-icon-size-500 | - | desktop: 16px; mobile: 20px | No | - | - | +| dash-icon-size-600 | - | desktop: 18px; mobile: 22px | No | - | - | +| side-navigation-header-to-item | - | desktop: 8px; mobile: 10px | No | - | - | +| divider-vertical-minimum-height | 200px | 200px | No | - | - | +| divider-horizontal-minimum-width | 200px | 200px | No | - | - | +| tooltip-tip-corner-radius | 1px | 1px | No | - | - | +| switch-handle-size-small | - | desktop: 6px; mobile: 10px | No | - | - | +| switch-handle-selected-size-small | - | desktop: 8px; mobile: 12px | No | - | - | +| switch-handle-selected-size-medium | - | desktop: 10px; mobile: 14px | No | - | - | +| switch-handle-selected-size-large | - | desktop: 12px; mobile: 16px | No | - | - | +| switch-handle-selected-size-extra-large | - | desktop: 14px; mobile: 20px | No | - | - | +| switch-handle-size-medium | - | desktop: 8px; mobile: 12px | No | - | - | +| switch-handle-size-large | - | desktop: 10px; mobile: 14px | No | - | - | +| switch-handle-size-extra-large | - | desktop: 12px; mobile: 18px | No | - | - | +| tag-minimum-width-multiplier | 1 | 1 | Yes | - | - | +| tag-maximum-width-multiplier | 7 | 7 | No | - | - | +| tag-label-to-clear-icon-small | - | desktop: 8px; mobile: 10px | No | - | - | +| tag-label-to-clear-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| tag-label-to-clear-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| tag-edge-to-clear-icon-small | - | desktop: 8px; mobile: 10px | No | - | - | +| tag-edge-to-clear-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| tag-edge-to-clear-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| title-cjk-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-cjk-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| title-cjk-font-family | [{cjk-font-family}](/tokens/typography/#cjk-font-family) | Adobe Clean Han | No | - | - | +| title-cjk-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-cjk-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| title-cjk-line-height | [{cjk-line-height-100}](/tokens/typography/#cjk-line-height-100) | 1.5 | No | - | - | +| title-cjk-size-l | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| title-cjk-size-m | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| title-cjk-size-s | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| title-cjk-size-xl | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| title-cjk-size-xs | [{font-size-50}](/tokens/typography/#font-size-50) | desktop: 11px; mobile: 13px | No | - | - | +| title-cjk-size-xxl | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| title-cjk-size-xxxl | [{font-size-500}](/tokens/typography/#font-size-500) | desktop: 22px; mobile: 27px | No | - | - | +| title-cjk-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-cjk-strong-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| title-cjk-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-cjk-strong-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| title-line-height | [{line-height-100}](/tokens/typography/#line-height-100) | 1.3 | No | - | - | +| title-margin-bottom-multiplier | 0.25 | 0.25 | No | - | - | +| title-margin-top-multiplier | 0.88888889 | 0.88888889 | No | - | - | +| title-sans-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| title-sans-serif-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| title-sans-serif-font-family | [{sans-serif-font-family}](/tokens/typography/#sans-serif-font-family) | Adobe Clean Spectrum VF | No | - | - | +| title-sans-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-sans-serif-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| title-sans-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| title-sans-serif-strong-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| title-sans-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-sans-serif-strong-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| title-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| title-serif-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| title-serif-font-family | [{serif-font-family}](/tokens/typography/#serif-font-family) | Adobe Clean Serif | No | - | - | +| title-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-serif-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| title-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| title-serif-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| title-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| title-serif-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| title-size-l | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| title-size-m | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| title-size-s | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| title-size-xl | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| title-size-xs | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| title-size-xxl | [{font-size-500}](/tokens/typography/#font-size-500) | desktop: 22px; mobile: 27px | No | - | - | +| title-size-xxxl | [{font-size-600}](/tokens/typography/#font-size-600) | desktop: 25px; mobile: 31px | No | - | - | +| opacity-checkerboard-square-size-small | - | desktop: 4px; mobile: 5px | No | - | - | +| alert-banner-top-to-alert-icon | - | desktop: 37px; mobile: 29px | No | - | - | +| accordion-top-to-text-spacious-small | - | desktop: 11px; mobile: 15px | No | - | - | +| field-default-width-small | - | desktop: 192px; mobile: 240px | No | - | - | +| field-default-width-medium | - | desktop: 208px; mobile: 256px | No | - | - | +| field-default-width-large | - | desktop: 224px; mobile: 272px | No | - | - | +| field-default-width-extra-large | - | desktop: 240px; mobile: 288px | No | - | - | +| tag-minimum-width-small | - | desktop: 21px; mobile: 25px | No | - | - | +| tag-minimum-width-medium | - | desktop: 27px; mobile: 34px | No | - | - | +| tag-minimum-width-large | - | desktop: 33px; mobile: 42px | No | - | - | +| combo-box-visual-to-field-button | 0px | 0px | No | - | - | +| in-field-button-edge-to-fill-small | - | desktop: 4px; mobile: 5px | No | - | - | +| in-field-button-edge-to-fill-medium | 6px | 6px | No | - | - | +| in-field-button-edge-to-fill-large | 8px | 8px | No | - | - | +| in-field-button-edge-to-fill-extra-large | - | desktop: 8px; mobile: 10px | No | - | - | +| in-field-progress-circle-edge-to-fill | - | desktop: 1px; mobile: 2px | No | - | - | +| in-field-progress-circle-size-75 | - | desktop: 16px; mobile: 18px | No | - | - | +| in-field-progress-circle-size-100 | - | desktop: 20px; mobile: 24px | No | - | - | +| in-field-progress-circle-size-200 | - | desktop: 22px; mobile: 28px | No | - | - | +| in-field-progress-circle-size-300 | - | desktop: 26px; mobile: 30px | No | - | - | +| alert-dialog-description-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| alert-dialog-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| coach-mark-body-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| coach-mark-pagination-body-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| coach-mark-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| standard-dialog-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| standard-dialog-body-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| standard-dialog-maximum-width-small | 400px | 400px | No | - | - | +| standard-dialog-minimum-width | 288px | 288px | No | - | - | +| standard-dialog-maximum-width-medium | 480px | 480px | No | - | - | +| standard-dialog-maximum-width-large | 640px | 640px | No | - | - | +| status-light-text-to-visual-75 | [{text-to-visual-75}](/tokens/layout/#text-to-visual-75) | desktop: 5px; mobile: 7px | No | - | - | +| status-light-text-to-visual-100 | [{text-to-visual-100}](/tokens/layout/#text-to-visual-100) | desktop: 6px; mobile: 8px | No | - | - | +| status-light-text-to-visual-200 | [{text-to-visual-200}](/tokens/layout/#text-to-visual-200) | desktop: 7px; mobile: 9px | No | - | - | +| status-light-text-to-visual-300 | [{text-to-visual-300}](/tokens/layout/#text-to-visual-300) | desktop: 8px; mobile: 10px | No | - | - | +| link-out-icon-size-75 | - | desktop: 10px; mobile: 12px | No | - | - | +| link-out-icon-size-100 | - | desktop: 12px; mobile: 14px | No | - | - | +| link-out-icon-size-200 | - | desktop: 14px; mobile: 16px | No | - | - | +| link-out-icon-size-300 | - | desktop: 14px; mobile: 16px | No | - | - | +| link-out-icon-size-400 | - | desktop: 16px; mobile: 18px | No | - | - | +| menu-item-label-to-description-small | 1px | 1px | No | - | - | +| menu-item-label-to-description-medium | 1px | 1px | No | - | - | +| menu-item-label-to-description-large | 2px | 2px | No | - | - | +| menu-item-label-to-description-extra-large | 2px | 2px | No | - | - | +| menu-section-header-to-description-small | 1px | 1px | No | - | - | +| menu-section-header-to-description-medium | 1px | 1px | No | - | - | +| menu-section-header-to-description-large | 2px | 2px | No | - | - | +| menu-section-header-to-description-extra-large | 2px | 2px | No | - | - | +| menu-item-top-to-thumbnail-small | - | desktop: 8px; mobile: 10px | No | - | - | +| menu-item-top-to-thumbnail-medium | - | desktop: 9px; mobile: 11px | No | - | - | +| menu-item-top-to-thumbnail-large | - | desktop: 10px; mobile: 12px | No | - | - | +| menu-item-top-to-thumbnail-extra-large | - | desktop: 11px; mobile: 13px | No | - | - | +| menu-item-background-opacity | 0 | 0 | No | - | - | +| illustrated-message-small-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-small-cjk-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-medium-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-medium-cjk-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-large-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-large-cjk-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-small-body-font-size | [{body-size-xs}](/tokens/typography/#body-size-xs) | desktop: 12px; mobile: 15px | No | - | - | +| illustrated-message-medium-body-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| illustrated-message-large-body-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| drop-zone-title-font-size | [{illustrated-message-medium-title-font-size}](/tokens/layout-component/#illustrated-message-medium-title-font-size) | desktop: [object Object]; mobile: [object Object] | No | - | - | +| drop-zone-cjk-title-font-size | [{illustrated-message-medium-cjk-title-font-size}](/tokens/layout-component/#illustrated-message-medium-cjk-title-font-size) | desktop: [object Object]; mobile: [object Object] | No | - | - | +| drop-zone-body-font-size | [{illustrated-message-medium-body-font-size}](/tokens/layout-component/#illustrated-message-medium-body-font-size) | desktop: [object Object]; mobile: [object Object] | No | - | - | +| breadcrumbs-separator-to-bottom-text-multiline | - | desktop: 11px; mobile: 15px | No | - | - | +| breadcrumbs-start-edge-to-text-large | - | desktop: 9px; mobile: 11px | No | - | - | +| breadcrumbs-start-edge-to-text-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| breadcrumbs-start-edge-to-text-multiline | - | desktop: 4px; mobile: 5px | No | - | - | +| breadcrumbs-top-to-separator-large | - | desktop: 15px; mobile: 20px | No | - | - | +| breadcrumbs-top-to-separator-medium | - | desktop: 11px; mobile: 15px | No | - | - | +| breadcrumbs-top-to-separator-multiline | - | desktop: 7px; mobile: 10px | No | - | - | +| breadcrumbs-truncated-menu-to-separator | 0px | 0px | No | - | - | +| breadcrumbs-text-to-separator-large | - | desktop: 9px; mobile: 11px | No | - | - | +| breadcrumbs-text-to-separator-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| breadcrumbs-text-to-separator-multiline | - | desktop: 4px; mobile: 5px | No | - | - | +| contextual-help-body-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| contextual-help-title-font-size | - | desktop: [object Object]; mobile: [object Object] | No | - | - | +| coach-indicator-collapsed-ring-rounding-increment | 6px | 6px | No | - | - | +| coach-indicator-expanded-ring-rounding-increment | 14px | 14px | No | - | - | +| coach-indicator-collapsed-ring-thickness | 4px | 4px | No | - | - | +| coach-indicator-expanded-ring-thickness | 8px | 8px | No | - | - | +| coach-indicator-collapsed-gap | 2px | 2px | No | - | - | +| coach-indicator-expanded-gap | 6px | 6px | No | - | - | +| coach-indicator-opacity | 0.2 | 0.2 | No | - | - | +| accordion-content-area-edge-to-content-small | - | desktop: 8px; mobile: 10px | No | - | - | +| accordion-content-area-edge-to-content-medium | - | desktop: 9px; mobile: 11px | No | - | - | +| accordion-content-area-edge-to-content-large | - | desktop: 12px; mobile: 15px | No | - | - | +| accordion-content-area-edge-to-content-extra-large | - | desktop: 15px; mobile: 19px | No | - | - | +| accordion-disclosure-indicator-to-text-small | - | desktop: 7px; mobile: 9px | No | - | - | +| accordion-disclosure-indicator-to-text-medium | - | desktop: 11px; mobile: 13px | No | - | - | +| accordion-disclosure-indicator-to-text-large | - | desktop: 14px; mobile: 17px | No | - | - | +| accordion-disclosure-indicator-to-text-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| accordion-item-to-divider | 0px | 0px | No | - | - | +| meter-thickness-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| meter-thickness-extra-large | - | desktop: 10px; mobile: 13px | No | - | - | +| thumbnail-opacity-checkerboard-square-size | 4px | 4px | No | - | - | +| thumbnail-corner-radius | [{corner-radius-75}](/tokens/layout/#corner-radius-75) | 3px | No | - | - | +| action-bar-top-to-content-area | [{spacing-200}](/tokens/layout/#spacing-200) | 12px | No | - | - | +| action-bar-bottom-to-content-area | [{spacing-200}](/tokens/layout/#spacing-200) | 12px | No | - | - | +| action-bar-edge-to-content-area | [{spacing-100}](/tokens/layout/#spacing-100) | 8px | No | - | - | +| action-bar-close-button-to-counter | [{text-to-control-50}](/tokens/layout/#text-to-control-50) | desktop: 4px; mobile: 5px | No | - | - | +| action-bar-counter-font-size | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| swatch-group-spacing-spacious | 6px | 6px | No | - | - | +| swatch-group-border-opacity | 0.2 | 0.2 | No | - | - | +| avatar-border-width | [{border-width-100}](/tokens/layout/#border-width-100) | 1px | No | - | - | +| avatar-group-size-50 | [{avatar-size-50}](/tokens/layout-component/#avatar-size-50) | desktop: 16px; mobile: 20px | No | - | - | +| avatar-group-size-75 | [{avatar-size-75}](/tokens/layout-component/#avatar-size-75) | desktop: 20px; mobile: 24px | No | - | - | +| avatar-group-size-100 | [{avatar-size-100}](/tokens/layout-component/#avatar-size-100) | desktop: 24px; mobile: 28px | No | - | - | +| avatar-group-size-200 | [{avatar-size-200}](/tokens/layout-component/#avatar-size-200) | desktop: 28px; mobile: 32px | No | - | - | +| avatar-group-size-300 | [{avatar-size-300}](/tokens/layout-component/#avatar-size-300) | desktop: 32px; mobile: 36px | No | - | - | +| avatar-group-size-400 | [{avatar-size-400}](/tokens/layout-component/#avatar-size-400) | desktop: 36px; mobile: 40px | No | - | - | +| avatar-group-size-500 | [{avatar-size-500}](/tokens/layout-component/#avatar-size-500) | desktop: 40px; mobile: 44px | No | - | - | +| avatar-to-avatar-50 | - | desktop: -4px; mobile: -5px | No | - | - | +| avatar-to-avatar-75 | - | desktop: -5px; mobile: -6px | No | - | - | +| avatar-to-avatar-100 | - | desktop: -6px; mobile: -7px | No | - | - | +| avatar-to-avatar-200 | - | desktop: -7px; mobile: -8px | No | - | - | +| avatar-to-avatar-300 | - | desktop: -8px; mobile: -9px | No | - | - | +| avatar-to-avatar-400 | - | desktop: -9px; mobile: -10px | No | - | - | +| avatar-to-avatar-500 | - | desktop: -10px; mobile: -11px | No | - | - | +| code-cjk-size-xl | [{code-size-xl}](/tokens/typography/#code-size-xl) | desktop: 20px; mobile: 24px | No | - | - | +| code-cjk-size-l | [{code-size-l}](/tokens/typography/#code-size-l) | desktop: 18px; mobile: 22px | No | - | - | +| code-cjk-size-m | [{code-size-m}](/tokens/typography/#code-size-m) | desktop: 16px; mobile: 19px | No | - | - | +| code-cjk-size-s | [{code-size-s}](/tokens/typography/#code-size-s) | desktop: 14px; mobile: 17px | No | - | - | +| code-cjk-size-xs | [{code-size-xs}](/tokens/typography/#code-size-xs) | desktop: 12px; mobile: 15px | No | - | - | +| standard-panel-width | 260px | 260px | No | - | - | +| standard-panel-minimum-width | 200px | 200px | No | - | - | +| standard-panel-maximum-width | 400px | 400px | No | - | - | +| standard-panel-top-to-close-button-compact | 5px | 5px | No | - | - | +| standard-panel-top-to-close-button-regular | 9px | 9px | No | - | - | +| standard-panel-top-to-close-button-spacious | 17px | 17px | No | - | - | +| standard-panel-edge-to-close-button-compact | 3px | 3px | No | - | - | +| standard-panel-edge-to-close-button-regular | 7px | 7px | No | - | - | +| standard-panel-edge-to-close-button-spacious | 15px | 15px | No | - | - | +| standard-panel-title-font-size | [{title-size-s}](/tokens/layout-component/#title-size-s) | desktop: 14px; mobile: 17px | No | - | - | +| illustrated-message-horizontal-maximum-width | 535px | 535px | No | - | - | +| illustrated-message-vertical-maximum-width | 380px | 380px | No | - | - | +| bar-panel-width | 56px | 56px | No | - | - | +| bar-panel-minimum-width | 40px | 40px | No | - | - | +| bar-panel-maximum-width | 72px | 72px | No | - | - | +| bar-panel-spacing-extra-spacious | 20px | 20px | No | - | - | +| rating-top-to-content-area-small | [{spacing-75}](/tokens/layout/#spacing-75) | 4px | No | - | - | +| rating-bottom-to-content-area-small | [{spacing-75}](/tokens/layout/#spacing-75) | 4px | No | - | - | +| rating-edge-to-content-area-small | [{spacing-75}](/tokens/layout/#spacing-75) | 4px | No | - | - | +| rating-top-to-content-area-medium | 6px | 6px | No | - | - | +| rating-bottom-to-content-area-medium | 6px | 6px | No | - | - | +| rating-edge-to-content-area-medium | 6px | 6px | No | - | - | +| rating-width-small | 104px | 104px | No | - | - | +| rating-height-small | [{component-height-75}](/tokens/layout/#component-height-75) | desktop: 24px; mobile: 30px | No | - | - | +| rating-width-medium | 128px | 128px | No | - | - | +| rating-height-medium | [{component-height-100}](/tokens/layout/#component-height-100) | desktop: 32px; mobile: 40px | No | - | - | +| select-box-horizontal-minimum-height | - | desktop: 80px; mobile: 100px | No | - | - | +| select-box-horizontal-width | - | desktop: 368px; mobile: 460px | No | - | - | +| select-box-vertical-height | - | desktop: 170px; mobile: 212px | No | - | - | +| select-box-edge-to-checkbox | 8px | 8px | No | - | - | +| select-box-horizontal-end-to-content | - | desktop: 32px; mobile: 40px | No | - | - | +| select-box-horizontal-illustration-to-label | - | desktop: 10px; mobile: 12px | No | - | - | +| select-box-horizontal-label-to-description | - | desktop: 2px; mobile: 3px | No | - | - | +| select-box-horizontal-start-to-content | - | desktop: 24px; mobile: 30px | No | - | - | +| select-box-horizontal-top-to-content | - | desktop: 16px; mobile: 20px | No | - | - | +| select-box-top-to-checkbox | - | desktop: 4px; mobile: 5px | No | - | - | +| select-box-vertical-edge-to-content | - | desktop: 24px; mobile: 30px | No | - | - | +| select-box-vertical-illustration-to-label | - | desktop: 8px; mobile: 10px | No | - | - | +| slider-control-to-field-label-editable-small | - | desktop: -4px; mobile: -8px | No | - | - | +| slider-control-to-field-label-editable-medium | - | desktop: -12px; mobile: -16px | No | - | - | +| slider-control-to-field-label-editable-large | - | desktop: -16px; mobile: -20px | No | - | - | +| slider-control-to-field-label-editable-extra-large | - | desktop: -20px; mobile: -24px | No | - | - | +| slider-control-to-field-label-side-small | - | desktop: 16px; mobile: 20px | No | - | - | +| slider-control-to-field-label-side-medium | - | desktop: 16px; mobile: 20px | No | - | - | +| slider-control-to-field-label-side-large | - | desktop: 20px; mobile: 24px | No | - | - | +| slider-control-to-field-label-side-extra-large | - | desktop: 24px; mobile: 28px | No | - | - | +| slider-control-to-text-field-small | - | desktop: 16px; mobile: 20px | No | - | - | +| slider-control-to-text-field-medium | - | desktop: 16px; mobile: 20px | No | - | - | +| slider-control-to-text-field-large | - | desktop: 20px; mobile: 24px | No | - | - | +| slider-control-to-text-field-extra-large | - | desktop: 24px; mobile: 28px | No | - | - | +| segmented-control-selection-border-width | [{border-width-200}](/tokens/layout/#border-width-200) | 2px | No | - | - | +| slider-handle-height-precision-small | - | desktop: 20px; mobile: 24px | No | - | - | +| slider-handle-height-precision-medium | - | desktop: 22px; mobile: 26px | No | - | - | +| slider-handle-height-precision-large | - | desktop: 24px; mobile: 30px | No | - | - | +| slider-handle-height-precision-extra-large | - | desktop: 26px; mobile: 32px | No | - | - | +| slider-handle-small | - | desktop: 18px; mobile: 22px | No | - | - | +| slider-handle-medium | - | desktop: 20px; mobile: 24px | No | - | - | +| slider-handle-large | - | desktop: 22px; mobile: 28px | No | - | - | +| slider-handle-extra-large | - | desktop: 24px; mobile: 30px | No | - | - | +| slider-handle-precision-width | 6px | 6px | No | - | - | +| slider-track-height-medium | 4px | 4px | No | - | - | +| slider-track-height-large | 16px | 16px | No | - | - | +| segmented-control-item-height | [{component-height-100}](/tokens/layout/#component-height-100) | desktop: 32px; mobile: 40px | No | - | - | +| in-field-stepper-to-end-small | - | desktop: 0px; mobile: 3px | No | - | - | +| in-field-stepper-to-end-medium | 3px | 3px | No | - | - | +| in-field-stepper-to-end-large | 4px | 4px | No | - | - | +| in-field-stepper-to-end-extra-large | - | desktop: 4px; mobile: 5px | No | - | - | +| number-field-with-stepper-minimum-width-small | - | desktop: 104px; mobile: 126px | No | - | - | +| number-field-with-stepper-minimum-width-medium | - | desktop: 120px; mobile: 150px | No | - | - | +| number-field-with-stepper-minimum-width-large | - | desktop: 144px; mobile: 174px | No | - | - | +| number-field-with-stepper-minimum-width-extra-large | - | desktop: 168px; mobile: 198px | No | - | - | +| number-field-visual-to-in-field-stepper-small | - | desktop: 5px; mobile: 7px | No | - | - | +| number-field-visual-to-in-field-stepper-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| number-field-visual-to-in-field-stepper-large | - | desktop: 7px; mobile: 9px | No | - | - | +| number-field-visual-to-in-field-stepper-extra-large | - | desktop: 8px; mobile: 10px | No | - | - | +| number-field-minimum-width-multiplier | 1.25 | 1.25 | No | - | - | +| takeover-dialog-height | 100% | 100% | No | - | - | +| takeover-dialog-width | 100% | 100% | No | - | - | +| tree-view-disclosure-indicator-height | - | desktop: 32px; mobile: 40px | No | - | - | +| tree-view-disclosure-indicator-width | - | desktop: 34px; mobile: 42px | No | - | - | +| tree-view-minimum-height | - | desktop: 40px; mobile: 50px | No | - | - | +| tree-view-minimum-width | - | desktop: 160px; mobile: 200px | No | - | - | +| tree-view-bottom-to-label | - | desktop: 12px; mobile: 16px | No | - | - | +| tree-view-drag-handle-to-checkbox | - | desktop: 8px; mobile: 10px | No | - | - | +| tree-view-edge-to-checkbox | - | desktop: 12px; mobile: 15px | No | - | - | +| tree-view-edge-to-drag-handle | - | desktop: 4px; mobile: 5px | No | - | - | +| tree-view-end-edge-to-action-area | - | desktop: 6px; mobile: 7px | No | - | - | +| tree-view-header-to-item | -1px | -1px | No | - | - | +| tree-view-item-to-header | - | desktop: 24px; mobile: 30px | No | - | - | +| tree-view-item-to-item | [{tree-view-item-to-item-default}](/tokens/layout-component/#tree-view-item-to-item-default) | -1px | Yes | This token has been deprecated, use tree-view-item-to-item-default instead. | Replaced by [tree-view-item-to-item-default](/tokens/layout-component/#tree-view-item-to-item-default) | +| tree-view-item-to-item-default | -1px | -1px | No | - | - | +| tree-view-item-to-item-detached | 2px | 2px | No | - | - | +| tree-view-label-to-action-area | - | desktop: 6px; mobile: 8px | No | - | - | +| tree-view-level-increment | - | desktop: 16px; mobile: 20px | No | - | - | +| tree-view-minimum-top-to-context-area | - | desktop: 8px; mobile: 10px | No | - | - | +| tree-view-top-to-action-button | - | desktop: 4px; mobile: 5px | No | - | - | +| tree-view-top-to-checkbox | - | desktop: 4px; mobile: 5px | No | - | - | +| tree-view-top-to-disclosure-indicator | - | desktop: 15px; mobile: 19px | No | - | - | +| tree-view-top-to-drag-handle | - | desktop: 15px; mobile: 19px | No | - | - | +| tree-view-top-to-label | - | desktop: 10px; mobile: 13px | No | - | - | +| tree-view-selected-row-background-opacity-emphasized | 0.1 | 0.1 | No | - | - | +| tree-view-selected-row-background-opacity-emphasized-hover | 0.15 | 0.15 | No | - | - | +| action-bar-minimum-width | 176px | 176px | No | - | - | +| action-bar-label-to-action-group-area | [{spacing-300}](/tokens/layout/#spacing-300) | 16px | No | - | - | +| card-edge-to-content-compact-extra-small | 6px | 6px | No | - | - | +| card-edge-to-content-default-extra-small | 8px | 8px | No | - | - | +| card-edge-to-content-spacious-extra-small | 12px | 12px | No | - | - | +| card-edge-to-content-compact-small | 8px | 8px | No | - | - | +| card-edge-to-content-default-small | 12px | 12px | No | - | - | +| card-edge-to-content-spacious-small | 16px | 16px | No | - | - | +| card-edge-to-content-compact-medium | 12px | 12px | No | - | - | +| card-edge-to-content-default-medium | 16px | 16px | No | - | - | +| card-edge-to-content-spacious-medium | 20px | 20px | No | - | - | +| card-edge-to-content-compact-large | 16px | 16px | No | - | - | +| card-edge-to-content-default-large | 20px | 20px | No | - | - | +| card-edge-to-content-spacious-large | 24px | 24px | No | - | - | +| card-edge-to-content-compact-extra-large | 20px | 20px | No | - | - | +| card-edge-to-content-default-extra-large | 24px | 24px | No | - | - | +| card-edge-to-content-spacious-extra-large | 28px | 28px | No | - | - | +| card-header-to-description | [{spacing-75}](/tokens/layout/#spacing-75) | 4px | No | - | - | +| card-description-to-footer | [{spacing-300}](/tokens/layout/#spacing-300) | 16px | No | - | - | +| card-selection-background-size-small | 22px | 22px | No | - | - | +| card-selection-background-size-medium | 24px | 24px | No | - | - | +| card-selection-background-size-large | 26px | 26px | No | - | - | +| card-selection-background-size-extra-large | 28px | 28px | No | - | - | +| card-minimum-width-extra-small | 100px | 100px | No | - | - | +| card-minimum-width-small | 150px | 150px | No | - | - | +| card-minimum-width-medium | 200px | 200px | No | - | - | +| card-minimum-width-large | 270px | 270px | No | - | - | +| card-minimum-width-extra-large | 340px | 340px | No | - | - | +| card-default-width-extra-small | 120px | 120px | No | - | - | +| card-default-width-small | 180px | 180px | No | - | - | +| card-default-width-medium | 240px | 240px | No | - | - | +| card-default-width-large | 320px | 320px | No | - | - | +| card-default-width-extra-large | 400px | 400px | No | - | - | +| card-maximum-width-extra-small | 140px | 140px | No | - | - | +| card-maximum-width-small | 210px | 210px | No | - | - | +| card-maximum-width-medium | 280px | 280px | No | - | - | +| card-maximum-width-large | 370px | 370px | No | - | - | +| card-maximum-width-extra-large | 460px | 460px | No | - | - | +| card-minimum-height-extra-small | 90px | 90px | No | - | - | +| card-minimum-height-small | 135px | 135px | No | - | - | +| card-minimum-height-medium | 180px | 180px | No | - | - | +| card-minimum-height-large | 240px | 240px | No | - | - | +| card-minimum-height-extra-large | 300px | 300px | No | - | - | +| collection-card-minimum-height-extra-small | 88px | 88px | No | - | - | +| collection-card-minimum-height-small | 124px | 124px | No | - | - | +| collection-card-minimum-height-medium | 157px | 157px | No | - | - | +| collection-card-minimum-height-large | 202px | 202px | No | - | - | +| collection-card-minimum-height-extra-large | 249px | 249px | No | - | - | +| collection-card-minimum-height-hero-extra-small | 168px | 168px | No | - | - | +| collection-card-minimum-height-hero-small | 243px | 243px | No | - | - | +| collection-card-minimum-height-hero-medium | 317px | 317px | No | - | - | +| collection-card-minimum-height-hero-large | 414px | 414px | No | - | - | +| collection-card-minimum-height-hero-extra-large | 514px | 514px | No | - | - | +| user-card-minimum-height-small | 192px | 192px | No | - | - | +| user-card-minimum-height-medium | 202px | 202px | No | - | - | +| user-card-minimum-height-large | 219px | 219px | No | - | - | +| user-card-minimum-height-extra-large | 236px | 236px | No | - | - | +| user-card-minimum-height-title-below-small | 212px | 212px | No | - | - | +| user-card-minimum-height-title-below-medium | 224px | 224px | No | - | - | +| user-card-minimum-height-title-below-large | 244px | 244px | No | - | - | +| user-card-minimum-height-title-below-extra-large | 263px | 263px | No | - | - | +| segmented-control-item-maximum-width | 265px | 265px | No | - | - | +| steplist-step-default-width-small | 46px | 46px | No | - | - | +| steplist-step-default-width-medium | 54px | 54px | No | - | - | +| steplist-step-default-width-large | 70px | 70px | No | - | - | +| steplist-step-default-width-extra-large | 78px | 78px | No | - | - | +| steplist-step-default-height-small | 46px | 46px | No | - | - | +| steplist-step-default-height-medium | 54px | 54px | No | - | - | +| steplist-step-default-height-large | 70px | 70px | No | - | - | +| steplist-step-default-height-extra-large | 78px | 78px | No | - | - | +| steplist-visual-size-small | 8px | 8px | No | - | - | +| steplist-visual-size-medium | 16px | 16px | No | - | - | +| steplist-visual-size-large | 24px | 24px | No | - | - | +| steplist-visual-size-extra-large | 32px | 32px | No | - | - | +| steplist-track-thickness-medium | 2px | 2px | No | - | - | +| steplist-step-to-track-size-small | 6px | 6px | No | - | - | +| steplist-step-to-track-size-medium | 7px | 7px | No | - | - | +| steplist-step-to-track-size-large | 8px | 8px | No | - | - | +| steplist-step-to-track-size-extra-large | 9px | 9px | No | - | - | +| steplist-bottom-to-text | 1px | 1px | No | - | - | +| card-horizontal-edge-to-content-compact | 12px | 12px | No | - | - | +| card-horizontal-edge-to-content-default | 16px | 16px | No | - | - | +| card-horizontal-edge-to-content-spacious | 20px | 20px | No | - | - | +| accordion-edge-to-content-area-small | 7px | 7px | No | - | - | +| accordion-edge-to-content-area-medium | 11px | 11px | No | - | - | +| accordion-edge-to-content-area-large | 14px | 14px | No | - | - | +| accordion-edge-to-content-area-extra-large | 17px | 17px | No | - | - | +| single-calendar-popover-minimum-width | 320px | 320px | No | - | - | +| single-calendar-popover-minimum-height | 320px | 320px | No | - | - | +| double-calendar-popover-minimum-width | 616px | 616px | No | - | - | +| double-calendar-popover-minimum-height | 320px | 320px | No | - | - | +| triple-calendar-popover-minimum-width | 912px | 912px | No | - | - | +| triple-calendar-popover-minimum-height | 320px | 320px | No | - | - | +| date-field-minimum-width | 152px | 152px | No | - | - | +| date-field-text-to-visual | 20px | 20px | No | - | - | +| date-picker-visual-to-field-button | 0px | 0px | No | - | - | +| date-picker-text-to-visual | 0px | 0px | No | - | - | +| date-picker-minimum-width | 152px | 152px | No | - | - | +| time-field-minimum-width | 2.5 | 2.5 | No | - | - | +| time-field-text-to-visual | 20px | 20px | No | - | - | +| segmented-text-field-gap | 0px | 0px | No | - | - | +| segmented-text-field-rounding | 2px | 2px | No | - | - | +| add-icon-size-50 | - | desktop: 8px; mobile: 10px | No | - | - | +| add-icon-size-75 | - | desktop: 8px; mobile: 10px | No | - | - | +| add-icon-size-100 | - | desktop: 10px; mobile: 14px | No | - | - | +| add-icon-size-200 | - | desktop: 12px; mobile: 14px | No | - | - | +| add-icon-size-300 | - | desktop: 12px; mobile: 16px | No | - | - | +| drag-handle-icon-size-75 | - | desktop: 10px; mobile: 12px | No | - | - | +| drag-handle-icon-size-100 | - | desktop: 10px; mobile: 12px | No | - | - | +| drag-handle-icon-size-200 | - | desktop: 12px; mobile: 14px | No | - | - | +| drag-handle-icon-size-300 | - | desktop: 14px; mobile: 16px | No | - | - | +| gripper-icon-size-100 | 24px | 24px | No | - | - | +| tag-field-default-width-small | - | desktop: 240px; mobile: 264px | No | - | - | +| tag-field-default-width-medium | - | desktop: 264px; mobile: 288px | No | - | - | +| tag-field-default-width-large | - | desktop: 288px; mobile: 312px | No | - | - | +| tag-field-minimum-width | - | desktop: 180px; mobile: 200px | No | - | - | +| tag-field-minimum-height-small | - | desktop: 44px; mobile: 54px | No | - | - | +| tag-field-minimum-height-medium | - | desktop: 56px; mobile: 68px | No | - | - | +| tag-field-minimum-height-large | - | desktop: 68px; mobile: 82px | No | - | - | +| tag-field-edge-to-content-small | - | desktop: 10px; mobile: 12px | No | - | - | +| tag-field-edge-to-content-medium | - | desktop: 12px; mobile: 14px | No | - | - | +| tag-field-edge-to-content-large | - | desktop: 14px; mobile: 16px | No | - | - | +| list-view-minimum-height | - | desktop: 40px; mobile: 50px | No | - | - | +| list-view-minimum-width | - | desktop: 200px; mobile: 240px | No | - | - | +| list-view-item-top-corner-radius | [{corner-radius-medium-default}](/tokens/layout/#corner-radius-medium-default) | 8px | No | - | - | +| list-view-item-bottom-corner-radius | [{corner-radius-medium-default}](/tokens/layout/#corner-radius-medium-default) | 8px | No | - | - | +| list-view-end-edge-to-content | - | desktop: 6px; mobile: 8px | No | - | - | +| stack-item-selected-background-opacity-emphasized | 0.1 | 0.1 | No | - | - | +| stack-item-selected-background-opacity-emphasized-hover | 0.15 | 0.15 | No | - | - | +| stack-item-selected-background-opacity-emphasized-down | 0.15 | 0.15 | No | - | - | +| stack-item-selected-background-opacity-emphasized-key-focus | 0.15 | 0.15 | No | - | - | +| stack-item-header-minimum-width | - | desktop: 200px; mobile: 240px | No | - | - | +| stack-item-start-edge-to-content | - | desktop: 4px; mobile: 5px | No | - | - | +| stack-item-drag-handle-to-control | - | desktop: 8px; mobile: 10px | No | - | - | +| stack-item-text-to-control | - | desktop: 8px; mobile: 10px | No | - | - | +| stack-item-edge-to-control | - | desktop: 12px; mobile: 15px | No | - | - | +| stack-item-edge-to-visual | - | desktop: 12px; mobile: 15px | No | - | - | +| stack-item-action-to-navigation | - | desktop: 4px; mobile: 6px | No | - | - | +| stack-item-header-to-item | 0px | 0px | No | - | - | +| stack-item-item-to-item | -1px | -1px | No | - | - | +| accordion-bottom-to-text-extra-large | - | desktop: 12px; mobile: 15px | No | - | - | +| accordion-bottom-to-text-large | - | desktop: 11px; mobile: 14px | No | - | - | +| accordion-bottom-to-text-medium | - | desktop: 9px; mobile: 13px | No | - | - | +| accordion-bottom-to-text-small | - | desktop: 7px; mobile: 9px | No | - | - | +| accordion-top-to-text-extra-large | - | desktop: 13px; mobile: 17px | No | - | - | +| accordion-top-to-text-large | - | desktop: 12px; mobile: 16px | No | - | - | +| accordion-top-to-text-medium | - | desktop: 9px; mobile: 10px | No | - | - | +| accordion-top-to-text-small | - | desktop: 7px; mobile: 10px | No | - | - | +| select-box-horizontal-minimum-width | - | desktop: 188px; mobile: 220px | No | - | - | +| side-navigation-counter-to-disclosure | - | desktop: 4px; mobile: 6px | No | - | - | +| side-navigation-edge-to-indicator | - | desktop: 4px; mobile: 6px | No | - | - | +| side-navigation-indicator-to-content | - | desktop: 6px; mobile: 8px | No | - | - | +| side-navigation-second-level-edge-to-indicator | - | desktop: 30px; mobile: 36px | No | - | - | +| side-navigation-second-level-with-icon-edge-to-text | - | desktop: 28px; mobile: 34px | No | - | - | +| side-navigation-second-level-with-icon-edge-to-indicator | - | desktop: 20px; mobile: 26px | No | - | - | +| side-navigation-third-level-edge-to-indicator | - | desktop: 56px; mobile: 62px | No | - | - | +| side-navigation-third-level-with-icon-edge-to-text | - | desktop: 44px; mobile: 50px | No | - | - | +| side-navigation-third-level-with-icon-edge-to-indicator | - | desktop: 36px; mobile: 42px | No | - | - | +| side-navigation-trailing-accessory-area-to-edge | - | desktop: 4px; mobile: 6px | No | - | - | +| side-navigation-indicator-height | - | desktop: 18px; mobile: 22px | No | - | - | +| side-navigation-indicator-thickness | 2px | 2px | No | - | - | + diff --git a/docs/markdown/tokens/layout.md b/docs/markdown/tokens/layout.md new file mode 100644 index 00000000..9a469853 --- /dev/null +++ b/docs/markdown/tokens/layout.md @@ -0,0 +1,254 @@ +--- +title: layout +description: Design tokens from layout.json +tags: + - tokens + - layout +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| corner-radius-0 | 0px | 0px | No | - | - | +| corner-radius-75 | 3px | 3px | No | - | - | +| corner-radius-100 | 4px | 4px | No | - | - | +| corner-radius-200 | 5px | 5px | No | - | - | +| corner-radius-300 | 6px | 6px | No | - | - | +| corner-radius-400 | 7px | 7px | No | - | - | +| corner-radius-500 | 8px | 8px | No | - | - | +| corner-radius-600 | 9px | 9px | No | - | - | +| corner-radius-700 | 10px | 10px | No | - | - | +| corner-radius-800 | 16px | 16px | No | - | - | +| corner-radius-1000 | 0.5 | 0.5 | No | - | - | +| drop-shadow-x | [{drop-shadow-x-100}](/tokens/layout/#drop-shadow-x-100) | 0px | Yes | - | - | +| drop-shadow-y | [{drop-shadow-y-100}](/tokens/layout/#drop-shadow-y-100) | 1px | Yes | - | - | +| drop-shadow-blur | [{drop-shadow-blur-100}](/tokens/layout/#drop-shadow-blur-100) | 6px | Yes | - | - | +| android-elevation | 2dp | 2dp | No | - | - | +| workflow-icon-size-50 | - | desktop: 14px; mobile: 16px | No | - | - | +| workflow-icon-size-75 | - | desktop: 16px; mobile: 18px | No | - | - | +| workflow-icon-size-100 | - | desktop: 20px; mobile: 24px | No | - | - | +| workflow-icon-size-200 | - | desktop: 22px; mobile: 28px | No | - | - | +| workflow-icon-size-300 | - | desktop: 26px; mobile: 30px | No | - | - | +| spacing-50 | 2px | 2px | No | - | - | +| spacing-75 | 4px | 4px | No | - | - | +| spacing-100 | 8px | 8px | No | - | - | +| spacing-200 | 12px | 12px | No | - | - | +| spacing-300 | 16px | 16px | No | - | - | +| spacing-400 | 24px | 24px | No | - | - | +| spacing-500 | 32px | 32px | No | - | - | +| spacing-600 | 40px | 40px | No | - | - | +| spacing-700 | 48px | 48px | No | - | - | +| spacing-800 | 64px | 64px | No | - | - | +| spacing-900 | 80px | 80px | No | - | - | +| spacing-1000 | 96px | 96px | No | - | - | +| text-to-visual-50 | - | desktop: 5px; mobile: 7px | No | - | - | +| text-to-visual-75 | - | desktop: 5px; mobile: 7px | No | - | - | +| text-to-visual-100 | - | desktop: 6px; mobile: 8px | No | - | - | +| text-to-visual-200 | - | desktop: 7px; mobile: 9px | No | - | - | +| text-to-visual-300 | - | desktop: 8px; mobile: 10px | No | - | - | +| text-to-visual-400 | - | desktop: 9px; mobile: 11px | No | - | - | +| text-to-control-50 | - | desktop: 4px; mobile: 5px | No | - | - | +| text-to-control-75 | - | desktop: 9px; mobile: 11px | No | - | - | +| text-to-control-100 | - | desktop: 10px; mobile: 13px | No | - | - | +| text-to-control-200 | - | desktop: 11px; mobile: 14px | No | - | - | +| text-to-control-300 | - | desktop: 13px; mobile: 16px | No | - | - | +| visual-to-control-100 | - | desktop: 8px; mobile: 10px | No | - | - | +| label-to-description-0 | 0px | 0px | No | - | - | +| component-height-50 | - | desktop: 20px; mobile: 26px | No | - | - | +| component-height-75 | - | desktop: 24px; mobile: 30px | No | - | - | +| component-height-100 | - | desktop: 32px; mobile: 40px | No | - | - | +| component-height-200 | - | desktop: 40px; mobile: 50px | No | - | - | +| component-height-300 | - | desktop: 48px; mobile: 60px | No | - | - | +| component-height-400 | - | desktop: 56px; mobile: 70px | No | - | - | +| component-height-500 | - | desktop: 64px; mobile: 80px | No | - | - | +| focus-indicator-thickness | 2px | 2px | No | - | - | +| focus-indicator-gap | 2px | 2px | No | - | - | +| side-focus-indicator | 4px | 4px | No | - | - | +| border-width-100 | 1px | 1px | No | - | - | +| border-width-200 | 2px | 2px | No | - | - | +| border-width-400 | 4px | 4px | No | - | - | +| component-pill-edge-to-visual-75 | - | desktop: 10px; mobile: 13px | No | - | - | +| component-pill-edge-to-visual-100 | - | desktop: 14px; mobile: 17px | No | - | - | +| component-pill-edge-to-visual-200 | - | desktop: 18px; mobile: 22px | No | - | - | +| component-pill-edge-to-visual-300 | - | desktop: 21px; mobile: 27px | No | - | - | +| component-pill-edge-to-visual-only-75 | - | desktop: 4px; mobile: 6px | No | - | - | +| component-pill-edge-to-visual-only-100 | - | desktop: 6px; mobile: 8px | No | - | - | +| component-pill-edge-to-visual-only-200 | - | desktop: 9px; mobile: 11px | No | - | - | +| component-pill-edge-to-visual-only-300 | - | desktop: 11px; mobile: 15px | No | - | - | +| component-pill-edge-to-text-75 | - | desktop: 12px; mobile: 15px | No | - | - | +| component-pill-edge-to-text-100 | - | desktop: 16px; mobile: 20px | No | - | - | +| component-pill-edge-to-text-200 | - | desktop: 20px; mobile: 25px | No | - | - | +| component-pill-edge-to-text-300 | - | desktop: 24px; mobile: 30px | No | - | - | +| component-edge-to-visual-50 | - | desktop: 6px; mobile: 7px | No | - | - | +| component-edge-to-visual-75 | - | desktop: 7px; mobile: 9px | No | - | - | +| component-edge-to-visual-100 | - | desktop: 10px; mobile: 12px | No | - | - | +| component-edge-to-visual-200 | - | desktop: 13px; mobile: 16px | No | - | - | +| component-edge-to-visual-300 | - | desktop: 15px; mobile: 19px | No | - | - | +| component-edge-to-visual-only-50 | - | desktop: 3px; mobile: 5px | No | - | - | +| component-edge-to-visual-only-75 | - | desktop: 4px; mobile: 6px | No | - | - | +| component-edge-to-visual-only-100 | - | desktop: 6px; mobile: 8px | No | - | - | +| component-edge-to-visual-only-200 | - | desktop: 9px; mobile: 11px | No | - | - | +| component-edge-to-visual-only-300 | - | desktop: 11px; mobile: 15px | No | - | - | +| component-edge-to-text-50 | - | desktop: 8px; mobile: 10px | No | - | - | +| component-edge-to-text-75 | - | desktop: 9px; mobile: 11px | No | - | - | +| component-edge-to-text-100 | - | desktop: 12px; mobile: 15px | No | - | - | +| component-edge-to-text-200 | - | desktop: 15px; mobile: 19px | No | - | - | +| component-edge-to-text-300 | - | desktop: 18px; mobile: 22px | No | - | - | +| component-top-to-workflow-icon-50 | - | desktop: 3px; mobile: 5px | No | - | - | +| component-top-to-workflow-icon-75 | - | desktop: 4px; mobile: 6px | No | - | - | +| component-top-to-workflow-icon-100 | - | desktop: 6px; mobile: 8px | No | - | - | +| component-top-to-workflow-icon-200 | - | desktop: 9px; mobile: 11px | No | - | - | +| component-top-to-workflow-icon-300 | - | desktop: 11px; mobile: 15px | No | - | - | +| component-top-to-text-50 | - | desktop: 3px; mobile: 4px | No | - | - | +| component-top-to-text-75 | - | desktop: 4px; mobile: 5px | No | - | - | +| component-top-to-text-100 | - | desktop: 6px; mobile: 8px | No | - | - | +| component-top-to-text-200 | - | desktop: 9px; mobile: 12px | No | - | - | +| component-top-to-text-300 | - | desktop: 12px; mobile: 15px | No | - | - | +| component-bottom-to-text-50 | - | desktop: 3px; mobile: 6px | No | - | - | +| component-bottom-to-text-75 | - | desktop: 5px; mobile: 6px | No | - | - | +| component-bottom-to-text-100 | - | desktop: 9px; mobile: 11px | No | - | - | +| component-bottom-to-text-200 | - | desktop: 11px; mobile: 14px | No | - | - | +| component-bottom-to-text-300 | - | desktop: 14px; mobile: 18px | No | - | - | +| component-to-menu-small | - | desktop: 6px; mobile: 7px | No | - | - | +| component-to-menu-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| component-to-menu-large | - | desktop: 7px; mobile: 9px | No | - | - | +| component-to-menu-extra-large | - | desktop: 8px; mobile: 10px | No | - | - | +| field-edge-to-text-quiet | 0px | 0px | Yes | - | - | +| field-edge-to-visual-quiet | 0px | 0px | No | - | - | +| field-edge-to-border-quiet | 0px | 0px | Yes | - | - | +| field-edge-to-alert-icon-quiet | 0px | 0px | Yes | - | - | +| field-edge-to-validation-icon-quiet | 0px | 0px | Yes | - | - | +| field-edge-to-disclosure-icon-75 | - | desktop: 7px; mobile: 9px | No | - | - | +| field-edge-to-disclosure-icon-100 | - | desktop: 11px; mobile: 13px | No | - | - | +| field-edge-to-disclosure-icon-200 | - | desktop: 14px; mobile: 17px | No | - | - | +| field-edge-to-disclosure-icon-300 | - | desktop: 17px; mobile: 22px | No | - | - | +| field-end-edge-to-disclosure-icon-75 | - | desktop: 7px; mobile: 9px | No | - | - | +| field-end-edge-to-disclosure-icon-100 | - | desktop: 11px; mobile: 13px | No | - | - | +| field-end-edge-to-disclosure-icon-200 | - | desktop: 14px; mobile: 17px | No | - | - | +| field-end-edge-to-disclosure-icon-300 | - | desktop: 17px; mobile: 22px | No | - | - | +| field-top-to-disclosure-icon-75 | - | desktop: 7px; mobile: 9px | No | - | - | +| field-top-to-disclosure-icon-100 | - | desktop: 11px; mobile: 13px | No | - | - | +| field-top-to-disclosure-icon-200 | - | desktop: 14px; mobile: 17px | No | - | - | +| field-top-to-disclosure-icon-300 | - | desktop: 17px; mobile: 22px | No | - | - | +| field-top-to-alert-icon-small | - | desktop: 4px; mobile: 5px | No | - | - | +| field-top-to-alert-icon-medium | - | desktop: 7px; mobile: 9px | No | - | - | +| field-top-to-alert-icon-large | - | desktop: 10px; mobile: 13px | No | - | - | +| field-top-to-alert-icon-extra-large | - | desktop: 13px; mobile: 16px | No | - | - | +| field-top-to-validation-icon-small | - | desktop: 7px; mobile: 9px | No | - | - | +| field-top-to-validation-icon-medium | - | desktop: 11px; mobile: 13px | No | - | - | +| field-top-to-validation-icon-large | - | desktop: 14px; mobile: 17px | No | - | - | +| field-top-to-validation-icon-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| field-top-to-progress-circle-small | - | desktop: 4px; mobile: 6px | No | - | - | +| field-top-to-progress-circle-medium | - | desktop: 6px; mobile: 8px | No | - | - | +| field-top-to-progress-circle-large | - | desktop: 9px; mobile: 11px | No | - | - | +| field-top-to-progress-circle-extra-large | - | desktop: 11px; mobile: 15px | No | - | - | +| field-edge-to-alert-icon-small | - | desktop: 9px; mobile: 11px | No | - | - | +| field-edge-to-alert-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| field-edge-to-alert-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| field-edge-to-alert-icon-extra-large | - | desktop: 18px; mobile: 22px | No | - | - | +| field-edge-to-validation-icon-small | - | desktop: 9px; mobile: 11px | No | - | - | +| field-edge-to-validation-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| field-edge-to-validation-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| field-edge-to-validation-icon-extra-large | - | desktop: 18px; mobile: 22px | No | - | - | +| field-text-to-alert-icon-small | - | desktop: 8px; mobile: 10px | No | - | - | +| field-text-to-alert-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| field-text-to-alert-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| field-text-to-alert-icon-extra-large | - | desktop: 18px; mobile: 22px | No | - | - | +| field-text-to-validation-icon-small | - | desktop: 8px; mobile: 10px | No | - | - | +| field-text-to-validation-icon-medium | - | desktop: 12px; mobile: 15px | No | - | - | +| field-text-to-validation-icon-large | - | desktop: 15px; mobile: 19px | No | - | - | +| field-text-to-validation-icon-extra-large | - | desktop: 18px; mobile: 22px | No | - | - | +| field-width | - | desktop: [object Object]; mobile: [object Object] | Yes | This token has been deprecated, use field-default-width-medium instead. | Replaced by [field-default-width-medium](/tokens/layout-component/#field-default-width-medium) | +| field-width-small | [{field-default-width-small}](/tokens/layout-component/#field-default-width-small) | desktop: 192px; mobile: 240px | Yes | This token has been deprecated, use field-default-width-small instead. | Replaced by [field-default-width-small](/tokens/layout-component/#field-default-width-small) | +| character-count-to-field-quiet-small | - | desktop: -3px; mobile: -4px | No | - | - | +| character-count-to-field-quiet-medium | - | desktop: -3px; mobile: -4px | No | - | - | +| character-count-to-field-quiet-large | - | desktop: -3px; mobile: -4px | No | - | - | +| character-count-to-field-quiet-extra-large | - | desktop: -4px; mobile: -5px | No | - | - | +| side-label-character-count-to-field | - | desktop: 12px; mobile: 15px | No | - | - | +| side-label-character-count-top-margin-small | 0px | 0px | No | - | - | +| side-label-character-count-top-margin-medium | 0px | 0px | No | - | - | +| side-label-character-count-top-margin-large | 0px | 0px | No | - | - | +| side-label-character-count-top-margin-extra-large | 0px | 0px | No | - | - | +| disclosure-indicator-top-to-disclosure-icon-small | - | desktop: 7px; mobile: 9px | No | - | - | +| disclosure-indicator-top-to-disclosure-icon-medium | - | desktop: 11px; mobile: 13px | No | - | - | +| disclosure-indicator-top-to-disclosure-icon-large | - | desktop: 14px; mobile: 17px | No | - | - | +| disclosure-indicator-top-to-disclosure-icon-extra-large | - | desktop: 17px; mobile: 22px | No | - | - | +| text-underline-thickness | 1px | 1px | No | - | - | +| text-underline-gap | 1px | 1px | No | - | - | +| navigational-indicator-top-to-back-icon-small | - | desktop: 6px; mobile: 7px | No | - | - | +| navigational-indicator-top-to-back-icon-medium | - | desktop: 9px; mobile: 12px | No | - | - | +| navigational-indicator-top-to-back-icon-large | - | desktop: 12px; mobile: 16px | No | - | - | +| navigational-indicator-top-to-back-icon-extra-large | - | desktop: 15px; mobile: 19px | No | - | - | +| color-control-track-width | - | desktop: 24px; mobile: 30px | No | - | - | +| corner-triangle-icon-size-75 | - | desktop: 5px; mobile: 6px | No | - | - | +| corner-triangle-icon-size-100 | - | desktop: 5px; mobile: 7px | No | - | - | +| corner-triangle-icon-size-200 | - | desktop: 6px; mobile: 8px | No | - | - | +| corner-triangle-icon-size-300 | - | desktop: 7px; mobile: 8px | No | - | - | +| component-size-width-ratio-down | 0.3333 | 0.3333 | No | - | - | +| component-size-minimum-perspective-down | 24px | 24px | No | - | - | +| component-size-difference-down | -2px | -2px | No | - | - | +| corner-radius-none | [{corner-radius-0}](/tokens/layout/#corner-radius-0) | 0px | No | - | - | +| corner-radius-small-default | [{corner-radius-100}](/tokens/layout/#corner-radius-100) | 4px | No | - | - | +| corner-radius-medium-default | [{corner-radius-500}](/tokens/layout/#corner-radius-500) | 8px | No | - | - | +| corner-radius-large-default | [{corner-radius-700}](/tokens/layout/#corner-radius-700) | 10px | No | - | - | +| corner-radius-extra-large-default | [{corner-radius-800}](/tokens/layout/#corner-radius-800) | 16px | No | - | - | +| corner-radius-full | [{corner-radius-1000}](/tokens/layout/#corner-radius-1000) | 0.5 | No | - | - | +| corner-radius-small-size-small | [{corner-radius-75}](/tokens/layout/#corner-radius-75) | 3px | No | - | - | +| corner-radius-small-size-medium | [{corner-radius-100}](/tokens/layout/#corner-radius-100) | 4px | No | - | - | +| corner-radius-small-size-large | [{corner-radius-200}](/tokens/layout/#corner-radius-200) | 5px | No | - | - | +| corner-radius-small-size-extra-large | [{corner-radius-300}](/tokens/layout/#corner-radius-300) | 6px | No | - | - | +| corner-radius-medium-size-extra-small | [{corner-radius-300}](/tokens/layout/#corner-radius-300) | 6px | No | - | - | +| corner-radius-medium-size-small | [{corner-radius-400}](/tokens/layout/#corner-radius-400) | 7px | No | - | - | +| corner-radius-medium-size-medium | [{corner-radius-500}](/tokens/layout/#corner-radius-500) | 8px | No | - | - | +| corner-radius-medium-size-large | [{corner-radius-600}](/tokens/layout/#corner-radius-600) | 9px | No | - | - | +| corner-radius-medium-size-extra-large | [{corner-radius-700}](/tokens/layout/#corner-radius-700) | 10px | No | - | - | +| field-width-medium | [{field-default-width-medium}](/tokens/layout-component/#field-default-width-medium) | desktop: 208px; mobile: 256px | Yes | This token has been deprecated, use field-default-width-medium instead. | Replaced by [field-default-width-medium](/tokens/layout-component/#field-default-width-medium) | +| field-width-large | [{field-default-width-large}](/tokens/layout-component/#field-default-width-large) | desktop: 224px; mobile: 272px | Yes | This token has been deprecated, use field-default-width-large instead. | Replaced by [field-default-width-large](/tokens/layout-component/#field-default-width-large) | +| field-width-extra-large | [{field-default-width-extra-large}](/tokens/layout-component/#field-default-width-extra-large) | desktop: 240px; mobile: 288px | Yes | This token has been deprecated, use field-default-width-extra-large instead. | Replaced by [field-default-width-extra-large](/tokens/layout-component/#field-default-width-extra-large) | +| drop-shadow-x-100 | 0px | 0px | No | - | - | +| drop-shadow-x-200 | 0px | 0px | No | - | - | +| drop-shadow-x-300 | 0px | 0px | No | - | - | +| drop-shadow-y-100 | 1px | 1px | No | - | - | +| drop-shadow-y-200 | 2px | 2px | No | - | - | +| drop-shadow-y-300 | 6px | 6px | No | - | - | +| drop-shadow-blur-100 | 6px | 6px | No | - | - | +| drop-shadow-blur-200 | 8px | 8px | No | - | - | +| drop-shadow-blur-300 | 16px | 16px | No | - | - | +| drop-shadow-emphasized-default-x | [{drop-shadow-x-100}](/tokens/layout/#drop-shadow-x-100) | 0px | No | - | - | +| drop-shadow-emphasized-default-y | [{drop-shadow-y-100}](/tokens/layout/#drop-shadow-y-100) | 1px | No | - | - | +| drop-shadow-emphasized-default-blur | [{drop-shadow-blur-100}](/tokens/layout/#drop-shadow-blur-100) | 6px | No | - | - | +| drop-shadow-emphasized-hover-x | [{drop-shadow-x-200}](/tokens/layout/#drop-shadow-x-200) | 0px | No | - | - | +| drop-shadow-emphasized-hover-y | [{drop-shadow-y-200}](/tokens/layout/#drop-shadow-y-200) | 2px | No | - | - | +| drop-shadow-emphasized-hover-blur | [{drop-shadow-blur-200}](/tokens/layout/#drop-shadow-blur-200) | 8px | No | - | - | +| drop-shadow-elevated-x | [{drop-shadow-x-200}](/tokens/layout/#drop-shadow-x-200) | 0px | No | - | - | +| drop-shadow-elevated-y | [{drop-shadow-y-200}](/tokens/layout/#drop-shadow-y-200) | 2px | No | - | - | +| drop-shadow-elevated-blur | [{drop-shadow-blur-200}](/tokens/layout/#drop-shadow-blur-200) | 8px | No | - | - | +| drop-shadow-dragged-x | [{drop-shadow-x-300}](/tokens/layout/#drop-shadow-x-300) | 0px | No | - | - | +| drop-shadow-dragged-y | [{drop-shadow-y-300}](/tokens/layout/#drop-shadow-y-300) | 6px | No | - | - | +| drop-shadow-dragged-blur | [{drop-shadow-blur-300}](/tokens/layout/#drop-shadow-blur-300) | 16px | No | - | - | +| gradient-stop-1-genai | 0 | 0 | No | - | - | +| gradient-stop-2-genai | 0.3333 | 0.3333 | No | - | - | +| gradient-stop-3-genai | 1 | 1 | No | - | - | +| gradient-stop-1-premium | 0 | 0 | No | - | - | +| gradient-stop-2-premium | 0.6666 | 0.6666 | No | - | - | +| gradient-stop-3-premium | 1 | 1 | No | - | - | +| window-to-edge | [{spacing-600}](/tokens/layout/#spacing-600) | 40px | No | - | - | +| component-size-maximum-perspective-down | 96px | 96px | No | - | - | +| field-top-to-disclosure-icon-compact-small | - | desktop: 7px; mobile: 9px | No | - | - | +| field-top-to-disclosure-icon-small | - | desktop: 11px; mobile: 13px | No | - | - | +| field-top-to-disclosure-icon-spacious-small | - | desktop: 15px; mobile: 18px | No | - | - | +| field-top-to-disclosure-icon-compact-medium | - | desktop: 11px; mobile: 13px | No | - | - | +| field-top-to-disclosure-icon-medium | - | desktop: 15px; mobile: 18px | No | - | - | +| field-top-to-disclosure-icon-spacious-medium | - | desktop: 19px; mobile: 23px | No | - | - | +| field-top-to-disclosure-icon-compact-large | - | desktop: 14px; mobile: 17px | No | - | - | +| field-top-to-disclosure-icon-large | - | desktop: 18px; mobile: 22px | No | - | - | +| field-top-to-disclosure-icon-spacious-large | - | desktop: 22px; mobile: 27px | No | - | - | +| field-top-to-disclosure-icon-compact-extra-large | - | desktop: 17px; mobile: 21px | No | - | - | +| field-top-to-disclosure-icon-extra-large | - | desktop: 21px; mobile: 26px | No | - | - | +| field-top-to-disclosure-icon-spacious-extra-large | - | desktop: 25px; mobile: 31px | No | - | - | +| component-padding-vertical-50 | - | desktop: 3px; mobile: 5px | No | - | - | +| component-padding-vertical-75 | - | desktop: 4px; mobile: 5px | No | - | - | +| component-padding-vertical-100 | - | desktop: 7px; mobile: 9px | No | - | - | +| component-padding-vertical-200 | - | desktop: 10px; mobile: 13px | No | - | - | +| component-padding-vertical-300 | - | desktop: 13px; mobile: 17px | No | - | - | + diff --git a/docs/markdown/tokens/semantic-color-palette.md b/docs/markdown/tokens/semantic-color-palette.md new file mode 100644 index 00000000..a73ca18c --- /dev/null +++ b/docs/markdown/tokens/semantic-color-palette.md @@ -0,0 +1,106 @@ +--- +title: semantic color palette +description: Design tokens from semantic-color-palette.json +tags: + - tokens + - semantic-color-palette +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| accent-color-100 | [{blue-100}](/tokens/color-palette/#blue-100) | light: rgb(245, 249, 255); dark: rgb(14, 23, 63); wireframe: rgb(246, 248, 252) | No | - | - | +| accent-color-200 | [{blue-200}](/tokens/color-palette/#blue-200) | light: rgb(229, 240, 254); dark: rgb(15, 28, 82); wireframe: rgb(235, 239, 248) | No | - | - | +| accent-color-300 | [{blue-300}](/tokens/color-palette/#blue-300) | light: rgb(203, 226, 254); dark: rgb(12, 33, 117); wireframe: rgb(216, 224, 242) | No | - | - | +| accent-color-400 | [{blue-400}](/tokens/color-palette/#blue-400) | light: rgb(172, 207, 253); dark: rgb(18, 45, 154); wireframe: rgb(192, 205, 234) | No | - | - | +| accent-color-500 | [{blue-500}](/tokens/color-palette/#blue-500) | light: rgb(142, 185, 252); dark: rgb(26, 58, 195); wireframe: rgb(164, 183, 225) | No | - | - | +| accent-color-600 | [{blue-600}](/tokens/color-palette/#blue-600) | light: rgb(114, 158, 253); dark: rgb(37, 73, 229); wireframe: rgb(135, 160, 215) | No | - | - | +| accent-color-700 | [{blue-700}](/tokens/color-palette/#blue-700) | light: rgb(93, 137, 255); dark: rgb(52, 91, 248); wireframe: rgb(113, 142, 208) | No | - | - | +| accent-color-800 | [{blue-800}](/tokens/color-palette/#blue-800) | light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) | No | - | - | +| accent-color-900 | [{blue-900}](/tokens/color-palette/#blue-900) | light: rgb(59, 99, 251); dark: rgb(86, 129, 255); wireframe: rgb(74, 111, 195) | No | - | - | +| accent-color-1000 | [{blue-1000}](/tokens/color-palette/#blue-1000) | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| accent-color-1100 | [{blue-1100}](/tokens/color-palette/#blue-1100) | light: rgb(29, 62, 207); dark: rgb(124, 169, 252); wireframe: rgb(52, 79, 140) | No | - | - | +| accent-color-1200 | [{blue-1200}](/tokens/color-palette/#blue-1200) | light: rgb(21, 50, 173); dark: rgb(152, 192, 252); wireframe: rgb(42, 65, 114) | No | - | - | +| accent-color-1300 | [{blue-1300}](/tokens/color-palette/#blue-1300) | light: rgb(16, 40, 140); dark: rgb(181, 213, 253); wireframe: rgb(34, 51, 91) | No | - | - | +| accent-color-1400 | [{blue-1400}](/tokens/color-palette/#blue-1400) | light: rgb(12, 31, 105); dark: rgb(213, 231, 254); wireframe: rgb(25, 39, 69) | No | - | - | +| accent-color-1500 | [{blue-1500}](/tokens/color-palette/#blue-1500) | dark: rgb(238, 245, 255); light: rgb(14, 24, 67); wireframe: rgb(18, 27, 48) | No | - | - | +| accent-color-1600 | [{blue-1600}](/tokens/color-palette/#blue-1600) | dark: rgb(255, 255, 255); light: rgb(7, 11, 30); wireframe: rgb(8, 12, 22) | No | - | - | +| informative-color-100 | [{blue-100}](/tokens/color-palette/#blue-100) | light: rgb(245, 249, 255); dark: rgb(14, 23, 63); wireframe: rgb(246, 248, 252) | No | - | - | +| informative-color-200 | [{blue-200}](/tokens/color-palette/#blue-200) | light: rgb(229, 240, 254); dark: rgb(15, 28, 82); wireframe: rgb(235, 239, 248) | No | - | - | +| informative-color-300 | [{blue-300}](/tokens/color-palette/#blue-300) | light: rgb(203, 226, 254); dark: rgb(12, 33, 117); wireframe: rgb(216, 224, 242) | No | - | - | +| informative-color-400 | [{blue-400}](/tokens/color-palette/#blue-400) | light: rgb(172, 207, 253); dark: rgb(18, 45, 154); wireframe: rgb(192, 205, 234) | No | - | - | +| informative-color-500 | [{blue-500}](/tokens/color-palette/#blue-500) | light: rgb(142, 185, 252); dark: rgb(26, 58, 195); wireframe: rgb(164, 183, 225) | No | - | - | +| informative-color-600 | [{blue-600}](/tokens/color-palette/#blue-600) | light: rgb(114, 158, 253); dark: rgb(37, 73, 229); wireframe: rgb(135, 160, 215) | No | - | - | +| informative-color-700 | [{blue-700}](/tokens/color-palette/#blue-700) | light: rgb(93, 137, 255); dark: rgb(52, 91, 248); wireframe: rgb(113, 142, 208) | No | - | - | +| informative-color-800 | [{blue-800}](/tokens/color-palette/#blue-800) | light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) | No | - | - | +| informative-color-900 | [{blue-900}](/tokens/color-palette/#blue-900) | light: rgb(59, 99, 251); dark: rgb(86, 129, 255); wireframe: rgb(74, 111, 195) | No | - | - | +| informative-color-1000 | [{blue-1000}](/tokens/color-palette/#blue-1000) | light: rgb(39, 77, 234); dark: rgb(105, 149, 254); wireframe: rgb(61, 94, 165) | No | - | - | +| informative-color-1100 | [{blue-1100}](/tokens/color-palette/#blue-1100) | light: rgb(29, 62, 207); dark: rgb(124, 169, 252); wireframe: rgb(52, 79, 140) | No | - | - | +| informative-color-1200 | [{blue-1200}](/tokens/color-palette/#blue-1200) | light: rgb(21, 50, 173); dark: rgb(152, 192, 252); wireframe: rgb(42, 65, 114) | No | - | - | +| informative-color-1300 | [{blue-1300}](/tokens/color-palette/#blue-1300) | light: rgb(16, 40, 140); dark: rgb(181, 213, 253); wireframe: rgb(34, 51, 91) | No | - | - | +| informative-color-1400 | [{blue-1400}](/tokens/color-palette/#blue-1400) | light: rgb(12, 31, 105); dark: rgb(213, 231, 254); wireframe: rgb(25, 39, 69) | No | - | - | +| informative-color-1500 | [{blue-1500}](/tokens/color-palette/#blue-1500) | dark: rgb(238, 245, 255); light: rgb(14, 24, 67); wireframe: rgb(18, 27, 48) | No | - | - | +| informative-color-1600 | [{blue-1600}](/tokens/color-palette/#blue-1600) | dark: rgb(255, 255, 255); light: rgb(7, 11, 30); wireframe: rgb(8, 12, 22) | No | - | - | +| negative-color-100 | [{red-100}](/tokens/color-palette/#red-100) | light: rgb(255, 246, 245); dark: rgb(54, 10, 3); wireframe: rgb(246, 248, 252) | No | - | - | +| negative-color-200 | [{red-200}](/tokens/color-palette/#red-200) | light: rgb(255, 235, 232); dark: rgb(68, 13, 5); wireframe: rgb(235, 239, 248) | No | - | - | +| negative-color-300 | [{red-300}](/tokens/color-palette/#red-300) | light: rgb(255, 214, 209); dark: rgb(87, 17, 7); wireframe: rgb(216, 224, 242) | No | - | - | +| negative-color-400 | [{red-400}](/tokens/color-palette/#red-400) | light: rgb(255, 188, 180); dark: rgb(115, 24, 11); wireframe: rgb(192, 205, 234) | No | - | - | +| negative-color-500 | [{red-500}](/tokens/color-palette/#red-500) | light: rgb(255, 157, 145); dark: rgb(147, 31, 17); wireframe: rgb(164, 183, 225) | No | - | - | +| negative-color-600 | [{red-600}](/tokens/color-palette/#red-600) | light: rgb(255, 118, 101); dark: rgb(177, 38, 23); wireframe: rgb(135, 160, 215) | No | - | - | +| negative-color-700 | [{red-700}](/tokens/color-palette/#red-700) | light: rgb(255, 81, 61); dark: rgb(205, 46, 29); wireframe: rgb(113, 142, 208) | No | - | - | +| negative-color-800 | [{red-800}](/tokens/color-palette/#red-800) | light: rgb(240, 56, 35); dark: rgb(223, 52, 34); wireframe: rgb(93, 127, 201) | No | - | - | +| negative-color-900 | [{red-900}](/tokens/color-palette/#red-900) | light: rgb(215, 50, 32); dark: rgb(252, 67, 46); wireframe: rgb(74, 111, 195) | No | - | - | +| negative-color-1000 | [{red-1000}](/tokens/color-palette/#red-1000) | light: rgb(183, 40, 24); dark: rgb(255, 103, 86); wireframe: rgb(61, 94, 165) | No | - | - | +| negative-color-1100 | [{red-1100}](/tokens/color-palette/#red-1100) | light: rgb(156, 33, 19); dark: rgb(255, 134, 120); wireframe: rgb(52, 79, 140) | No | - | - | +| negative-color-1200 | [{red-1200}](/tokens/color-palette/#red-1200) | light: rgb(129, 27, 14); dark: rgb(255, 167, 157); wireframe: rgb(42, 65, 114) | No | - | - | +| negative-color-1300 | [{red-1300}](/tokens/color-palette/#red-1300) | light: rgb(104, 21, 10); dark: rgb(255, 196, 189); wireframe: rgb(34, 51, 91) | No | - | - | +| negative-color-1400 | [{red-1400}](/tokens/color-palette/#red-1400) | light: rgb(80, 16, 6); dark: rgb(255, 222, 219); wireframe: rgb(25, 39, 69) | No | - | - | +| negative-color-1500 | [{red-1500}](/tokens/color-palette/#red-1500) | dark: rgb(255, 242, 240); light: rgb(59, 11, 4); wireframe: rgb(18, 27, 48) | No | - | - | +| negative-color-1600 | [{red-1600}](/tokens/color-palette/#red-1600) | dark: rgb(255, 255, 255); light: rgb(29, 5, 2); wireframe: rgb(8, 12, 22) | No | - | - | +| notice-color-100 | [{orange-100}](/tokens/color-palette/#orange-100) | light: rgb(255, 246, 231); dark: rgb(49, 16, 0); wireframe: rgb(246, 248, 252) | No | - | - | +| notice-color-200 | [{orange-200}](/tokens/color-palette/#orange-200) | light: rgb(255, 236, 207); dark: rgb(61, 21, 0); wireframe: rgb(235, 239, 248) | No | - | - | +| notice-color-300 | [{orange-300}](/tokens/color-palette/#orange-300) | light: rgb(255, 218, 158); dark: rgb(80, 27, 0); wireframe: rgb(216, 224, 242) | No | - | - | +| notice-color-400 | [{orange-400}](/tokens/color-palette/#orange-400) | light: rgb(255, 193, 94); dark: rgb(106, 36, 0); wireframe: rgb(192, 205, 234) | No | - | - | +| notice-color-500 | [{orange-500}](/tokens/color-palette/#orange-500) | light: rgb(255, 162, 19); dark: rgb(135, 47, 0); wireframe: rgb(164, 183, 225) | No | - | - | +| notice-color-600 | [{orange-600}](/tokens/color-palette/#orange-600) | light: rgb(252, 125, 0); dark: rgb(162, 59, 0); wireframe: rgb(135, 160, 215) | No | - | - | +| notice-color-700 | [{orange-700}](/tokens/color-palette/#orange-700) | light: rgb(232, 106, 0); dark: rgb(185, 73, 0); wireframe: rgb(113, 142, 208) | No | - | - | +| notice-color-800 | [{orange-800}](/tokens/color-palette/#orange-800) | light: rgb(212, 91, 0); dark: rgb(199, 82, 0); wireframe: rgb(93, 127, 201) | No | - | - | +| notice-color-900 | [{orange-900}](/tokens/color-palette/#orange-900) | light: rgb(194, 78, 0); dark: rgb(224, 100, 0); wireframe: rgb(74, 111, 195) | No | - | - | +| notice-color-1000 | [{orange-1000}](/tokens/color-palette/#orange-1000) | light: rgb(167, 62, 0); dark: rgb(243, 117, 0); wireframe: rgb(61, 94, 165) | No | - | - | +| notice-color-1100 | [{orange-1100}](/tokens/color-palette/#orange-1100) | light: rgb(144, 51, 0); dark: rgb(255, 137, 0); wireframe: rgb(52, 79, 140) | No | - | - | +| notice-color-1200 | [{orange-1200}](/tokens/color-palette/#orange-1200) | light: rgb(118, 41, 0); dark: rgb(255, 173, 45); wireframe: rgb(42, 65, 114) | No | - | - | +| notice-color-1300 | [{orange-1300}](/tokens/color-palette/#orange-1300) | light: rgb(95, 32, 0); dark: rgb(255, 201, 116); wireframe: rgb(34, 51, 91) | No | - | - | +| notice-color-1400 | [{orange-1400}](/tokens/color-palette/#orange-1400) | light: rgb(73, 24, 0); dark: rgb(255, 225, 178); wireframe: rgb(25, 39, 69) | No | - | - | +| notice-color-1500 | [{orange-1500}](/tokens/color-palette/#orange-1500) | dark: rgb(255, 243, 225); light: rgb(52, 18, 0); wireframe: rgb(18, 27, 48) | No | - | - | +| notice-color-1600 | [{orange-1600}](/tokens/color-palette/#orange-1600) | dark: rgb(255, 255, 255); light: rgb(25, 8, 0); wireframe: rgb(8, 12, 22) | No | - | - | +| positive-color-100 | [{green-100}](/tokens/color-palette/#green-100) | light: rgb(237, 252, 241); dark: rgb(0, 30, 23); wireframe: rgb(246, 248, 252) | No | - | - | +| positive-color-200 | [{green-200}](/tokens/color-palette/#green-200) | light: rgb(215, 247, 225); dark: rgb(0, 38, 29); wireframe: rgb(235, 239, 248) | No | - | - | +| positive-color-300 | [{green-300}](/tokens/color-palette/#green-300) | light: rgb(173, 238, 197); dark: rgb(0, 51, 38); wireframe: rgb(216, 224, 242) | No | - | - | +| positive-color-400 | [{green-400}](/tokens/color-palette/#green-400) | light: rgb(107, 227, 162); dark: rgb(0, 68, 48); wireframe: rgb(192, 205, 234) | No | - | - | +| positive-color-500 | [{green-500}](/tokens/color-palette/#green-500) | light: rgb(43, 209, 125); dark: rgb(2, 87, 58); wireframe: rgb(164, 183, 225) | No | - | - | +| positive-color-600 | [{green-600}](/tokens/color-palette/#green-600) | light: rgb(18, 184, 103); dark: rgb(3, 106, 67); wireframe: rgb(135, 160, 215) | No | - | - | +| positive-color-700 | [{green-700}](/tokens/color-palette/#green-700) | light: rgb(11, 164, 93); dark: rgb(4, 124, 75); wireframe: rgb(113, 142, 208) | No | - | - | +| positive-color-800 | [{green-800}](/tokens/color-palette/#green-800) | light: rgb(7, 147, 85); dark: rgb(6, 136, 80); wireframe: rgb(93, 127, 201) | No | - | - | +| positive-color-900 | [{green-900}](/tokens/color-palette/#green-900) | light: rgb(5, 131, 78); dark: rgb(9, 157, 89); wireframe: rgb(74, 111, 195) | No | - | - | +| positive-color-1000 | [{green-1000}](/tokens/color-palette/#green-1000) | light: rgb(3, 110, 69); dark: rgb(14, 175, 98); wireframe: rgb(61, 94, 165) | No | - | - | +| positive-color-1100 | [{green-1100}](/tokens/color-palette/#green-1100) | light: rgb(2, 93, 60); dark: rgb(24, 193, 110); wireframe: rgb(52, 79, 140) | No | - | - | +| positive-color-1200 | [{green-1200}](/tokens/color-palette/#green-1200) | light: rgb(1, 76, 52); dark: rgb(57, 215, 134); wireframe: rgb(42, 65, 114) | No | - | - | +| positive-color-1300 | [{green-1300}](/tokens/color-palette/#green-1300) | light: rgb(0, 61, 44); dark: rgb(126, 231, 172); wireframe: rgb(34, 51, 91) | No | - | - | +| positive-color-1400 | [{green-1400}](/tokens/color-palette/#green-1400) | light: rgb(0, 46, 34); dark: rgb(189, 241, 208); wireframe: rgb(25, 39, 69) | No | - | - | +| positive-color-1500 | [{green-1500}](/tokens/color-palette/#green-1500) | dark: rgb(229, 250, 236); light: rgb(0, 33, 25); wireframe: rgb(18, 27, 48) | No | - | - | +| positive-color-1600 | [{green-1600}](/tokens/color-palette/#green-1600) | dark: rgb(255, 255, 255); light: rgb(0, 15, 12); wireframe: rgb(8, 12, 22) | No | - | - | +| negative-subdued-background-color-default | [{negative-subtle-background-color-default}](/tokens/semantic-color-palette/#negative-subtle-background-color-default) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | Yes | - | - | +| negative-subdued-background-color-hover | [{negative-color-300}](/tokens/semantic-color-palette/#negative-color-300) | light: rgb(255, 214, 209); dark: rgb(87, 17, 7); wireframe: rgb(216, 224, 242) | Yes | - | - | +| negative-subdued-background-color-down | [{negative-color-300}](/tokens/semantic-color-palette/#negative-color-300) | light: rgb(255, 214, 209); dark: rgb(87, 17, 7); wireframe: rgb(216, 224, 242) | Yes | - | - | +| negative-subdued-background-color-key-focus | [{negative-color-300}](/tokens/semantic-color-palette/#negative-color-300) | light: rgb(255, 214, 209); dark: rgb(87, 17, 7); wireframe: rgb(216, 224, 242) | Yes | - | - | +| informative-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| positive-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| notice-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| negative-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-informative | [{informative-visual-color}](/tokens/color-aliases/#informative-visual-color) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-neutral | [{neutral-visual-color}](/tokens/color-aliases/#neutral-visual-color) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-positive | [{positive-visual-color}](/tokens/color-aliases/#positive-visual-color) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-notice | [{notice-visual-color}](/tokens/color-aliases/#notice-visual-color) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| icon-color-negative | [{negative-visual-color}](/tokens/color-aliases/#negative-visual-color) | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | +| accent-subtle-background-color-default | - | light: [object Object]; dark: [object Object]; wireframe: [object Object] | No | - | - | + diff --git a/docs/markdown/tokens/typography.md b/docs/markdown/tokens/typography.md new file mode 100644 index 00000000..5283e804 --- /dev/null +++ b/docs/markdown/tokens/typography.md @@ -0,0 +1,324 @@ +--- +title: typography +description: Design tokens from typography.json +tags: + - tokens + - typography +--- + + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| default-font-family | [{sans-serif-font-family}](/tokens/typography/#sans-serif-font-family) | Adobe Clean Spectrum VF | No | - | - | +| letter-spacing | 0em | 0em | No | - | - | +| text-align-start | start | start | No | - | - | +| text-align-center | center | center | No | - | - | +| text-align-end | end | end | No | - | - | +| sans-serif-font-family | Adobe Clean Spectrum VF | Adobe Clean Spectrum VF | No | - | - | +| serif-font-family | Adobe Clean Serif | Adobe Clean Serif | No | - | - | +| cjk-font-family | Adobe Clean Han | Adobe Clean Han | No | - | - | +| light-font-weight | light | light | No | - | - | +| regular-font-weight | regular | regular | No | - | - | +| medium-font-weight | medium | medium | No | - | - | +| bold-font-weight | bold | bold | No | - | - | +| extra-bold-font-weight | extra-bold | extra-bold | No | - | - | +| black-font-weight | black | black | No | - | - | +| italic-font-style | italic | italic | No | - | - | +| default-font-style | normal | normal | No | - | - | +| font-size-25 | - | desktop: 10px; mobile: 12px | No | - | - | +| font-size-50 | - | desktop: 11px; mobile: 13px | No | - | - | +| font-size-75 | - | desktop: 12px; mobile: 15px | No | - | - | +| font-size-100 | - | desktop: 14px; mobile: 17px | No | - | - | +| font-size-200 | - | desktop: 16px; mobile: 19px | No | - | - | +| font-size-300 | - | desktop: 18px; mobile: 22px | No | - | - | +| font-size-400 | - | desktop: 20px; mobile: 24px | No | - | - | +| font-size-500 | - | desktop: 22px; mobile: 27px | No | - | - | +| font-size-600 | - | desktop: 25px; mobile: 31px | No | - | - | +| font-size-700 | - | desktop: 28px; mobile: 34px | No | - | - | +| font-size-800 | - | desktop: 32px; mobile: 39px | No | - | - | +| font-size-900 | - | desktop: 36px; mobile: 44px | No | - | - | +| font-size-1000 | - | desktop: 40px; mobile: 49px | No | - | - | +| font-size-1100 | - | desktop: 45px; mobile: 55px | No | - | - | +| font-size-1200 | - | desktop: 51px; mobile: 62px | No | - | - | +| font-size-1300 | - | desktop: 58px; mobile: 70px | No | - | - | +| font-size-1400 | - | desktop: 65px; mobile: 79px | No | - | - | +| font-size-1500 | - | desktop: 73px; mobile: 88px | No | - | - | +| line-height-100 | 1.3 | 1.3 | No | - | - | +| line-height-200 | 1.5 | 1.5 | No | - | - | +| cjk-line-height-100 | 1.5 | 1.5 | No | - | - | +| cjk-line-height-200 | 1.7 | 1.7 | No | - | - | +| cjk-letter-spacing | [{letter-spacing}](/tokens/typography/#letter-spacing) | 0em | No | - | - | +| heading-sans-serif-font-family | [{sans-serif-font-family}](/tokens/typography/#sans-serif-font-family) | Adobe Clean Spectrum VF | No | - | - | +| heading-serif-font-family | [{serif-font-family}](/tokens/typography/#serif-font-family) | Adobe Clean Serif | No | - | - | +| heading-cjk-font-family | [{cjk-font-family}](/tokens/typography/#cjk-font-family) | Adobe Clean Han | No | - | - | +| heading-sans-serif-light-font-weight | [{light-font-weight}](/tokens/typography/#light-font-weight) | light | Yes | - | - | +| heading-sans-serif-light-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-serif-light-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| heading-serif-light-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-cjk-light-font-weight | [{light-font-weight}](/tokens/typography/#light-font-weight) | light | Yes | - | - | +| heading-cjk-light-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-sans-serif-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| heading-sans-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-serif-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| heading-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-cjk-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| heading-cjk-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-heavy-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-sans-serif-heavy-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-serif-heavy-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-serif-heavy-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-cjk-heavy-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| heading-cjk-heavy-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-light-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | Yes | - | - | +| heading-sans-serif-light-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-serif-light-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | Yes | - | - | +| heading-serif-light-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-cjk-light-strong-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | Yes | - | - | +| heading-cjk-light-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-sans-serif-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-sans-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-serif-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-cjk-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-cjk-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-heavy-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-sans-serif-heavy-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-serif-heavy-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-serif-heavy-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-cjk-heavy-strong-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-cjk-heavy-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-light-emphasized-font-weight | [{light-font-weight}](/tokens/typography/#light-font-weight) | light | Yes | - | - | +| heading-sans-serif-light-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| heading-serif-light-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| heading-serif-light-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| heading-cjk-light-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| heading-cjk-light-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-sans-serif-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| heading-sans-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-serif-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| heading-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-cjk-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-cjk-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-heavy-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-sans-serif-heavy-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-serif-heavy-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-serif-heavy-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-cjk-heavy-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-cjk-heavy-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-light-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | Yes | - | - | +| heading-sans-serif-light-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| heading-serif-light-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | Yes | - | - | +| heading-serif-light-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| heading-cjk-light-strong-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | Yes | - | - | +| heading-cjk-light-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| heading-sans-serif-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-sans-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-serif-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-cjk-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-cjk-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-sans-serif-heavy-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-sans-serif-heavy-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-serif-heavy-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-serif-heavy-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| heading-cjk-heavy-strong-emphasized-font-weight | [{black-font-weight}](/tokens/typography/#black-font-weight) | black | No | - | - | +| heading-cjk-heavy-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| heading-size-xxxl | [{font-size-1300}](/tokens/typography/#font-size-1300) | desktop: 58px; mobile: 70px | No | - | - | +| heading-size-xxl | [{font-size-1100}](/tokens/typography/#font-size-1100) | desktop: 45px; mobile: 55px | No | - | - | +| heading-size-xl | [{font-size-900}](/tokens/typography/#font-size-900) | desktop: 36px; mobile: 44px | No | - | - | +| heading-size-l | [{font-size-700}](/tokens/typography/#font-size-700) | desktop: 28px; mobile: 34px | No | - | - | +| heading-size-m | [{font-size-500}](/tokens/typography/#font-size-500) | desktop: 22px; mobile: 27px | No | - | - | +| heading-size-s | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| heading-size-xs | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| heading-size-xxs | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | Yes | - | - | +| heading-cjk-size-xxxxl | [{font-size-1400}](/tokens/typography/#font-size-1400) | desktop: 65px; mobile: 79px | No | - | - | +| heading-size-xxxxl | [{font-size-1500}](/tokens/typography/#font-size-1500) | desktop: 73px; mobile: 88px | No | - | - | +| heading-cjk-size-xxxl | [{font-size-1200}](/tokens/typography/#font-size-1200) | desktop: 51px; mobile: 62px | No | - | - | +| heading-cjk-size-xxl | [{font-size-1000}](/tokens/typography/#font-size-1000) | desktop: 40px; mobile: 49px | No | - | - | +| heading-cjk-size-xl | [{font-size-800}](/tokens/typography/#font-size-800) | desktop: 32px; mobile: 39px | No | - | - | +| heading-cjk-size-l | [{font-size-600}](/tokens/typography/#font-size-600) | desktop: 25px; mobile: 31px | No | - | - | +| heading-cjk-size-m | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| heading-cjk-size-s | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| heading-cjk-size-xs | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| heading-cjk-size-xxs | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | Yes | - | - | +| heading-line-height | [{line-height-100}](/tokens/typography/#line-height-100) | 1.3 | No | - | - | +| heading-cjk-line-height | [{cjk-line-height-100}](/tokens/typography/#cjk-line-height-100) | 1.5 | No | - | - | +| heading-margin-top-multiplier | 0.88888889 | 0.88888889 | No | - | - | +| heading-margin-bottom-multiplier | 0.25 | 0.25 | No | - | - | +| heading-color | [{gray-900}](/tokens/color-palette/#gray-900) | light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) | No | - | - | +| body-sans-serif-font-family | [{sans-serif-font-family}](/tokens/typography/#sans-serif-font-family) | Adobe Clean Spectrum VF | No | - | - | +| body-serif-font-family | [{serif-font-family}](/tokens/typography/#serif-font-family) | Adobe Clean Serif | No | - | - | +| body-cjk-font-family | [{cjk-font-family}](/tokens/typography/#cjk-font-family) | Adobe Clean Han | No | - | - | +| body-sans-serif-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| body-sans-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-serif-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| body-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-cjk-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| body-cjk-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-sans-serif-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| body-sans-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-serif-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| body-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-cjk-strong-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| body-cjk-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-sans-serif-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| body-sans-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| body-serif-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| body-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| body-cjk-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| body-cjk-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-sans-serif-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| body-sans-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| body-serif-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| body-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| body-cjk-strong-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| body-cjk-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| body-size-xxxl | [{font-size-600}](/tokens/typography/#font-size-600) | desktop: 25px; mobile: 31px | No | - | - | +| body-size-xxl | [{font-size-500}](/tokens/typography/#font-size-500) | desktop: 22px; mobile: 27px | No | - | - | +| body-size-xl | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| body-size-xxs | [{font-size-50}](/tokens/typography/#font-size-50) | desktop: 11px; mobile: 13px | No | - | - | +| body-cjk-size-xxxl | [{font-size-500}](/tokens/typography/#font-size-500) | desktop: 22px; mobile: 27px | No | - | - | +| body-cjk-size-xxl | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| body-cjk-size-xl | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| body-cjk-size-l | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| body-cjk-size-m | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| body-cjk-size-s | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| body-cjk-size-xs | [{font-size-50}](/tokens/typography/#font-size-50) | desktop: 11px; mobile: 13px | No | - | - | +| body-cjk-size-xxs | [{font-size-25}](/tokens/typography/#font-size-25) | desktop: 10px; mobile: 12px | No | - | - | +| body-size-l | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| body-size-m | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| body-size-s | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| body-size-xs | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| body-line-height | [{line-height-200}](/tokens/typography/#line-height-200) | 1.5 | No | - | - | +| body-cjk-line-height | [{cjk-line-height-200}](/tokens/typography/#cjk-line-height-200) | 1.7 | No | - | - | +| body-margin-multiplier | 0.75 | 0.75 | No | - | - | +| body-color | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| detail-sans-serif-font-family | [{sans-serif-font-family}](/tokens/typography/#sans-serif-font-family) | Adobe Clean Spectrum VF | No | - | - | +| detail-serif-font-family | [{serif-font-family}](/tokens/typography/#serif-font-family) | Adobe Clean Serif | No | - | - | +| detail-cjk-font-family | [{cjk-font-family}](/tokens/typography/#cjk-font-family) | Adobe Clean Han | No | - | - | +| detail-sans-serif-font-weight | [{medium-font-weight}](/tokens/typography/#medium-font-weight) | medium | No | - | - | +| detail-sans-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-serif-font-weight | [{medium-font-weight}](/tokens/typography/#medium-font-weight) | medium | No | - | - | +| detail-serif-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-cjk-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| detail-cjk-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-sans-serif-light-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-sans-serif-light-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-serif-light-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-serif-light-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-cjk-light-font-weight | [{light-font-weight}](/tokens/typography/#light-font-weight) | light | Yes | - | - | +| detail-cjk-light-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-sans-serif-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| detail-sans-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-serif-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| detail-serif-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-cjk-strong-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| detail-cjk-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-sans-serif-light-strong-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-sans-serif-light-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-serif-light-strong-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-serif-light-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-cjk-light-strong-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | Yes | - | - | +| detail-cjk-light-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-sans-serif-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| detail-sans-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| detail-serif-emphasized-font-weight | [{medium-font-weight}](/tokens/typography/#medium-font-weight) | medium | No | - | - | +| detail-serif-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| detail-cjk-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| detail-cjk-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-sans-serif-light-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-sans-serif-light-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| detail-serif-light-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-serif-light-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| detail-cjk-light-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-cjk-light-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-sans-serif-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| detail-sans-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| detail-serif-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| detail-serif-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| detail-cjk-strong-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | No | - | - | +| detail-cjk-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| detail-sans-serif-light-strong-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-sans-serif-light-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| detail-serif-light-strong-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | Yes | - | - | +| detail-serif-light-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | Yes | - | - | +| detail-cjk-light-strong-emphasized-font-weight | [{extra-bold-font-weight}](/tokens/typography/#extra-bold-font-weight) | extra-bold | Yes | - | - | +| detail-cjk-light-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | Yes | - | - | +| detail-size-xl | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| detail-size-l | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| detail-size-m | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| detail-size-s | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| detail-line-height | [{line-height-100}](/tokens/typography/#line-height-100) | 1.3 | No | - | - | +| detail-cjk-line-height | [{cjk-line-height-100}](/tokens/typography/#cjk-line-height-100) | 1.5 | No | - | - | +| detail-margin-top-multiplier | 0.88888889 | 0.88888889 | No | - | - | +| detail-margin-bottom-multiplier | 0.25 | 0.25 | No | - | - | +| detail-letter-spacing | 0.06em | 0.06em | Yes | - | - | +| detail-sans-serif-text-transform | uppercase | uppercase | Yes | - | - | +| detail-serif-text-transform | uppercase | uppercase | Yes | - | - | +| detail-color | [{gray-600}](/tokens/color-palette/#gray-600) | light: rgb(113, 113, 113); dark: rgb(138, 138, 138); wireframe: rgb(72, 110, 194) | No | - | - | +| detail-cjk-size-xs | [{font-size-25}](/tokens/typography/#font-size-25) | desktop: 10px; mobile: 12px | No | - | - | +| detail-cjk-size-s | [{font-size-50}](/tokens/typography/#font-size-50) | desktop: 11px; mobile: 13px | No | - | - | +| detail-cjk-size-m | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| detail-cjk-size-l | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| detail-cjk-size-xl | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| detail-size-xs | [{font-size-50}](/tokens/typography/#font-size-50) | desktop: 11px; mobile: 13px | No | - | - | +| code-font-family | Source Code Pro | Source Code Pro | No | - | - | +| code-cjk-font-family | [{code-font-family}](/tokens/typography/#code-font-family) | Source Code Pro | No | - | - | +| code-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| code-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| code-cjk-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| code-cjk-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| code-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| code-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| code-cjk-strong-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| code-cjk-strong-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| code-emphasized-font-weight | [{regular-font-weight}](/tokens/typography/#regular-font-weight) | regular | No | - | - | +| code-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| code-cjk-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| code-cjk-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| code-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| code-strong-emphasized-font-style | [{italic-font-style}](/tokens/typography/#italic-font-style) | italic | No | - | - | +| code-cjk-strong-emphasized-font-weight | [{bold-font-weight}](/tokens/typography/#bold-font-weight) | bold | No | - | - | +| code-cjk-strong-emphasized-font-style | [{default-font-style}](/tokens/typography/#default-font-style) | normal | No | - | - | +| code-size-xl | [{font-size-400}](/tokens/typography/#font-size-400) | desktop: 20px; mobile: 24px | No | - | - | +| code-size-l | [{font-size-300}](/tokens/typography/#font-size-300) | desktop: 18px; mobile: 22px | No | - | - | +| code-size-m | [{font-size-200}](/tokens/typography/#font-size-200) | desktop: 16px; mobile: 19px | No | - | - | +| code-size-s | [{font-size-100}](/tokens/typography/#font-size-100) | desktop: 14px; mobile: 17px | No | - | - | +| code-size-xs | [{font-size-75}](/tokens/typography/#font-size-75) | desktop: 12px; mobile: 15px | No | - | - | +| code-line-height | [{line-height-200}](/tokens/typography/#line-height-200) | 1.5 | No | - | - | +| code-cjk-line-height | [{cjk-line-height-200}](/tokens/typography/#cjk-line-height-200) | 1.7 | No | - | - | +| code-color | [{gray-800}](/tokens/color-palette/#gray-800) | light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) | No | - | - | +| line-height-font-size-25 | - | desktop: 12px; mobile: 14px | No | - | - | +| line-height-font-size-50 | - | desktop: 14px; mobile: 16px | No | - | - | +| line-height-font-size-75 | - | desktop: 16px; mobile: 20px | No | - | - | +| line-height-font-size-100 | - | desktop: 18px; mobile: 22px | No | - | - | +| line-height-font-size-200 | - | desktop: 20px; mobile: 24px | No | - | - | +| line-height-font-size-300 | - | desktop: 22px; mobile: 26px | No | - | - | +| line-height-font-size-400 | - | desktop: 24px; mobile: 28px | No | - | - | +| line-height-font-size-500 | - | desktop: 26px; mobile: 32px | No | - | - | +| line-height-font-size-600 | - | desktop: 30px; mobile: 36px | No | - | - | +| line-height-font-size-700 | - | desktop: 32px; mobile: 40px | No | - | - | +| line-height-font-size-800 | - | desktop: 36px; mobile: 44px | No | - | - | +| line-height-font-size-900 | - | desktop: 42px; mobile: 50px | No | - | - | +| line-height-font-size-1000 | - | desktop: 46px; mobile: 56px | No | - | - | +| line-height-font-size-1100 | - | desktop: 52px; mobile: 64px | No | - | - | +| line-height-font-size-1200 | - | desktop: 58px; mobile: 72px | No | - | - | +| line-height-font-size-1300 | - | desktop: 66px; mobile: 80px | No | - | - | +| line-height-font-size-1400 | - | desktop: 74px; mobile: 90px | No | - | - | +| line-height-font-size-1500 | - | desktop: 84px; mobile: 102px | No | - | - | +| component-xs-regular | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-50}; fontWeight: {regular-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-50} | No | - | - | +| component-xs-medium | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-50}; fontWeight: {medium-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-50} | No | - | - | +| component-xs-bold | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-50}; fontWeight: {bold-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-50} | No | - | - | +| component-s-regular | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-75}; fontWeight: {regular-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-75} | No | - | - | +| component-s-medium | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-75}; fontWeight: {medium-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-75} | No | - | - | +| component-s-bold | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-75}; fontWeight: {bold-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-75} | No | - | - | +| component-m-regular | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-100}; fontWeight: {regular-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-100} | No | - | - | +| component-m-medium | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-100}; fontWeight: {medium-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-100} | No | - | - | +| component-m-bold | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-100}; fontWeight: {bold-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-100} | No | - | - | +| component-l-regular | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-200}; fontWeight: {regular-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-200} | No | - | - | +| component-l-medium | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-200}; fontWeight: {medium-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-200} | No | - | - | +| component-l-bold | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-200}; fontWeight: {bold-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-200} | No | - | - | +| component-xl-regular | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-300}; fontWeight: {regular-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-300} | No | - | - | +| component-xl-medium | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-300}; fontWeight: {medium-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-300} | No | - | - | +| component-xl-bold | [object Object] | fontFamily: {sans-serif-font-family}; fontSize: {font-size-300}; fontWeight: {bold-font-weight}; letterSpacing: {letter-spacing}; lineHeight: {line-height-font-size-300} | No | - | - | + diff --git a/docs/s2-tokens-viewer/moon.yml b/docs/s2-tokens-viewer/moon.yml index 93845d1a..fa366b43 100644 --- a/docs/s2-tokens-viewer/moon.yml +++ b/docs/s2-tokens-viewer/moon.yml @@ -22,10 +22,9 @@ tasks: platform: system prepare: command: - - sh - - -c - - "mkdir -p tokens && rm -rf tokens/* && cp -r node_modules/@adobe/spectrum-tokens/src/* tokens/ && cp node_modules/@adobe/spectrum-tokens/package.json tokens/" - platform: system + - node + - scripts/prepare.mjs + platform: node deps: - tokens:build inputs: diff --git a/docs/s2-tokens-viewer/scripts/prepare.mjs b/docs/s2-tokens-viewer/scripts/prepare.mjs new file mode 100644 index 00000000..de7e343c --- /dev/null +++ b/docs/s2-tokens-viewer/scripts/prepare.mjs @@ -0,0 +1,22 @@ +/* +Copyright 2024 Adobe. All rights reserved. +Prepare tokens dir from @adobe/spectrum-tokens for the viewer. +*/ +import { cpSync, mkdirSync, readdirSync, rmSync } from "fs"; +import { join, dirname } from "path"; +import { fileURLToPath } from "url"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const root = join(__dirname, ".."); +const tokensDir = join(root, "tokens"); +const src = join(root, "node_modules/@adobe/spectrum-tokens/src"); +const pkgPath = join(root, "node_modules/@adobe/spectrum-tokens/package.json"); + +mkdirSync(tokensDir, { recursive: true }); +for (const name of readdirSync(tokensDir)) { + rmSync(join(tokensDir, name), { recursive: true }); +} +for (const name of readdirSync(src)) { + cpSync(join(src, name), join(tokensDir, name), { recursive: true }); +} +cpSync(pkgPath, join(tokensDir, "package.json")); diff --git a/docs/site/.gitignore b/docs/site/.gitignore new file mode 100644 index 00000000..465197ea --- /dev/null +++ b/docs/site/.gitignore @@ -0,0 +1,6 @@ +# Generated markdown (copied from docs/markdown/ at build time) +src/components/*.md +src/tokens/*.md +src/registry/*.md + +.cache diff --git a/docs/site/README.md b/docs/site/README.md new file mode 100644 index 00000000..e2e2faa7 --- /dev/null +++ b/docs/site/README.md @@ -0,0 +1,187 @@ +# Spectrum Design Data Documentation Site + +The documentation site for Spectrum Design Data, built with [11ty (Eleventy)](https://www.11ty.dev/). + +## Overview + +This site serves documentation for: + +* **Components**: Component API schemas and options +* **Tokens**: Design tokens with resolved values and alias links +* **Registry**: Design system registry entries (sizes, states, variants, glossary, etc.) + +The site is built from markdown files generated by the `markdown-generator` tool, which converts structured data from `@adobe/spectrum-tokens`, `@adobe/spectrum-component-api-schemas`, and `@adobe/design-system-registry` into markdown with YAML frontmatter. + +## Local Development + +### Prerequisites + +* Node.js \~20.12 +* pnpm\@10.17.1 + +### Setup + +```bash +# Install dependencies (from monorepo root) +pnpm install + +# Generate markdown files +moon run markdown-generator:generate + +# Copy generated markdown to site source +moon run site:copyContent + +# Start development server +moon run site:start +``` + +The site will be available at `http://localhost:8080/spectrum-design-data/`. + +### Development Workflow + +1. Make changes to source files in `src/` +2. The development server will automatically reload +3. For changes to generated markdown, regenerate and copy: + ```bash + moon run markdown-generator:generate + moon run site:copyContent + ``` + +## Build Process + +The build pipeline consists of several steps: + +1. **Generate Markdown**: `moon run markdown-generator:generate` + * Converts tokens, components, and registry data to markdown + * Outputs to `tools/markdown-generator/output/` + +2. **Copy Content**: `moon run site:copyContent` + * Copies generated markdown to `docs/site/src/components/`, `src/tokens/`, `src/registry/` + * These files are gitignored but processed by 11ty + +3. **Build Site**: `moon run site:build` + * 11ty processes markdown files and templates + * Generates static HTML in `../../site/` + +4. **Export**: `moon run site:export` + * Final export step for deployment + * Outputs to `../../site/` directory + +### Build Commands + +```bash +# Full build pipeline +moon run site:export + +# Individual steps +moon run markdown-generator:generate +moon run site:copyContent +moon run site:build +moon run site:export +``` + +## Project Structure + +``` +docs/site/ +├── src/ +│ ├── assets/ # CSS and static assets +│ ├── components/ # Generated component markdown (gitignored) +│ ├── data/ # Site metadata and navigation +│ ├── layouts/ # 11ty layout templates (Liquid) +│ ├── pages/ # Static pages and index pages +│ ├── registry/ # Generated registry markdown (gitignored) +│ └── tokens/ # Generated token markdown (gitignored) +├── public/ # Static files (favicon, schemas) +├── scripts/ # Build scripts +├── eleventy.config.js # 11ty configuration +└── package.json +``` + +## Configuration + +### 11ty Configuration + +The `eleventy.config.js` file configures: + +* **Input**: `src/` directory +* **Output**: `../../site/` directory +* **Path Prefix**: `/spectrum-design-data` (for GitHub Pages) +* **Collections**: `components`, `tokens`, `registry` (from generated markdown) +* **Git Ignore**: Disabled (`setUseGitIgnore(false)`) to process generated markdown files + +### Generated Markdown + +Generated markdown files in `src/components/`, `src/tokens/`, and `src/registry/` are: + +* Created by `markdown-generator` tool +* Copied during `copyContent` task +* Gitignored (in `.gitignore`) +* Processed by 11ty despite being gitignored + +## Deployment + +The site is deployed to GitHub Pages via `.github/workflows/deploy-docs.yml`: + +1. Cleans the site directory +2. Generates markdown files +3. Builds and exports the 11ty site +4. Builds other documentation apps (visualizer, viewer, etc.) +5. Uploads and deploys to GitHub Pages + +### Deployment Workflow + +```yaml +- moon run site:clean # Clean site directory +- moon run markdown-generator:generate # Generate markdown +- moon run site:export # Build and export site +``` + +## Migration from Next.js + +This site was migrated from Next.js to 11ty for: + +* **Simpler static site generation**: 11ty is purpose-built for static sites +* **Better markdown support**: Native markdown processing with frontmatter +* **Reduced dependencies**: Fewer npm packages, faster builds +* **Chatbot indexing**: Generated markdown is published to `docs-markdown` branch + +The migration included: + +* Replacing Next.js pages with 11ty layouts and collections +* Converting React components to Liquid templates +* Updating build pipeline to use 11ty +* Removing React/Next.js dependencies + +## Troubleshooting + +### Generated markdown not appearing + +1. Ensure markdown generator ran: `moon run markdown-generator:generate` +2. Copy content: `moon run site:copyContent` +3. Check that files exist in `src/components/`, `src/tokens/`, `src/registry/` + +### Build errors + +1. Check that all dependencies are installed: `pnpm install` +2. Verify source packages are available: + * `@adobe/spectrum-tokens` + * `@adobe/spectrum-component-api-schemas` + * `@adobe/design-system-registry` +3. Clean and rebuild: `moon run site:clean && moon run site:export` + +### Development server not starting + +1. Ensure port 8080 is available +2. Check that markdown files are copied: `moon run site:copyContent` +3. Verify 11ty is installed: `pnpm list @11ty/eleventy` + +## Related Tools + +* **Markdown Generator** (`tools/markdown-generator/`): Generates markdown from source data +* **Publish Markdown Workflow** (`.github/workflows/publish-markdown.yml`): Publishes markdown to `docs-markdown` branch for chatbot indexing + +## License + +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0. diff --git a/docs/site/components/layout.js b/docs/site/components/layout.js deleted file mode 100644 index 4ba5fdb0..00000000 --- a/docs/site/components/layout.js +++ /dev/null @@ -1,47 +0,0 @@ -import Head from "next/head"; -import Link from "next/link"; - -export const siteTitle = "Spectrum Components API"; - -export default function Layout({ children, home, version }) { - return ( -
- - - - - - - -
-

- {siteTitle} -

- {version && ( -

- Schema version: {version} -

- )} -
-
{children}
- {!home && ( -
- ← Back to home -
- )} -
- ); -} diff --git a/docs/site/config/plugins/css-config.js b/docs/site/config/plugins/css-config.js new file mode 100644 index 00000000..92ac6fbc --- /dev/null +++ b/docs/site/config/plugins/css-config.js @@ -0,0 +1,47 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import fs from "node:fs/promises"; +import path from "node:path"; +import postcss from "postcss"; +import postcssImport from "postcss-import"; +import postcssImportExtGlob from "postcss-import-ext-glob"; +import autoprefixer from "autoprefixer"; +import cssnano from "cssnano"; + +export const cssConfig = (eleventyConfig, options = {}) => { + const outputPath = + options.outputPath || + path.join(process.cwd(), "..", "..", "site", "assets", "css", "index.css"); + + eleventyConfig.addTemplateFormats("css"); + eleventyConfig.addExtension("css", { + outputFileExtension: "css", + compile: async (inputContent, inputPath) => { + if (inputPath.endsWith("index.css")) { + return async () => { + const result = await postcss([ + postcssImportExtGlob, + postcssImport, + autoprefixer, + cssnano, + ]).process(inputContent, { from: inputPath }); + + await fs.mkdir(path.dirname(outputPath), { recursive: true }); + await fs.writeFile(outputPath, result.css); + + return result.css; + }; + } + }, + }); +}; diff --git a/docs/site/eleventy.config.js b/docs/site/eleventy.config.js new file mode 100644 index 00000000..39ecd514 --- /dev/null +++ b/docs/site/eleventy.config.js @@ -0,0 +1,101 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { HtmlBasePlugin } from "@11ty/eleventy"; +import { resolve, dirname } from "path"; +import { fileURLToPath } from "url"; +import { siteName, siteDescription } from "./src/data/meta.js"; +import navigation from "./src/data/navigation.js"; +import { cssConfig } from "./config/plugins/css-config.js"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +const pathPrefix = "/spectrum-design-data"; +const outputDir = resolve(__dirname, "../../site"); + +export default async function (eleventyConfig) { + eleventyConfig.setQuietMode(true); + // Generated .md in src/components, tokens, registry are in .gitignore; we still want 11ty to process them + eleventyConfig.setUseGitIgnore(false); + eleventyConfig.setLiquidOptions({ jsTruthy: true }); + eleventyConfig.addPlugin(HtmlBasePlugin, { pathPrefix }); + eleventyConfig.addPlugin(cssConfig, { + outputPath: resolve(outputDir, "assets", "css", "index.css"), + }); + + eleventyConfig.addGlobalData("siteName", siteName); + eleventyConfig.addGlobalData("siteDescription", siteDescription); + eleventyConfig.addGlobalData("navigation", navigation); + + eleventyConfig.addPassthroughCopy({ "public/favicon.png": "favicon.png" }); + eleventyConfig.addPassthroughCopy({ "public/.nojekyll": ".nojekyll" }); + + eleventyConfig.addCollection("components", function (api) { + return api.getFilteredByGlob("src/components/**/*.md"); + }); + eleventyConfig.addCollection("tokens", function (api) { + return api.getFilteredByGlob("src/tokens/**/*.md"); + }); + eleventyConfig.addCollection("registry", function (api) { + return api.getFilteredByGlob("src/registry/**/*.md"); + }); + + // Apply spectrum-Link to anchors in main article (body content) so links use Spectrum link styling + eleventyConfig.addTransform("spectrum-body-links", (content, outputPath) => { + if (typeof content !== "string" || !outputPath?.endsWith(".html")) + return content; + return content.replace( + /]*>([\s\S]*?)<\/article>/g, + (articleBlock) => + articleBlock.replace(/ { + if ( + !outputPath || + (!outputPath.includes("/tokens/") && + !outputPath.includes("/components/") && + !outputPath.includes("/registry/")) + ) + return content; + return content + .replace( + /)/g, + ')/g, ')/g, ')/g, '(\s*)$1\s*)(\s*) -// ); -// } else { -// return ( -// -// ); -// } -// } else { -// return ( -// -// ); -// } -// } - -// function formatTokenValue(token) { -// if (Object.hasOwn(token, "value")) { -// return ( -// -// ); -// } else if (Object.hasOwn(token, "sets")) { -// return formatSets(token.sets); -// } -// } - -function TokenValue({ token }) { - const type = token.$schema.split("/").pop().slice(0, -5); - switch (type) { - case "alias": - const value = token.value.substring(1, token.value.length - 1); - return ( - - {value} - - ); - case "dimension": - case "multiplier": - case "font-family": - case "font-weight": - case "font-style": - case "font-size": - case "text-transform": - case "opacity": - return <>{token.value}; - case "system-set": - if ( - Object.hasOwn(token.sets.spectrum, "sets") && - Object.hasOwn(token.sets, "express") - ) { - return ( - <> - {Object.keys(token.sets.spectrum.sets).map((key) => ( -
- {" "} - (spectrum / {key}) -
- ))} - {Object.keys(token.sets.express.sets).map((key) => ( -
- {" "} - (express / {key}) -
- ))} - - ); - } - case "color-set": - case "scale-set": - return ( - <> - {Object.keys(token.sets).map((key) => ( -
- ({key}) -
- ))} - - ); - case "color": - return {RGBAToHexA(token.value)}; - default: - return {JSON.stringify(token)}; - } -} - -function formatToken(token) { - return ( - - - - - ); -} - -export default function TokenTable({ tokenData }) { - return ( - - - Tokens - -
)/g, '
\s*
\n
$2 { - return ( - !!a && - a.constructor && - (a.constructor === Object || a.constructor.name === "Object") - ); -}; - -const resolveSchemaDefinitions = (schema, ajv) => { - let result = { ...schema }; - if (Object.hasOwn(result, "$ref")) { - result = Object.keys(result).reduce((acc, key) => { - if (key !== "$ref") { - acc[key] = result[key]; - } - return acc; - }, {}); - const newSchema = ajv.getSchema(schema["$ref"])?.schema; - Object.keys(newSchema).forEach((key) => { - if (key !== "$schema") { - result[key] = newSchema[key]; - } - }); - } - - // handle the json's children - Object.keys(result).forEach((key) => { - if (isObject(result[key])) { - result[key] = resolveSchemaDefinitions(result[key], ajv); - } - }); - return result; -}; - -const readJSON = async (filePath) => - JSON.parse(await readFile(filePath, "utf8")); - -// Get the schemas directory from the installed package -const getSchemasDir = () => { - try { - // Try to resolve the package - const packagePath = fileURLToPath( - import.meta.resolve("@adobe/spectrum-component-api-schemas"), - ); - return path.join(dirname(packagePath), "schemas"); - } catch { - // Fallback to relative path for development - return path.resolve( - process.cwd(), - "..", - "..", - "packages", - "component-schemas", - "schemas", - ); - } -}; - -const getValidator = async () => { - const schemaDir = "public/schemas"; - const schemasDir = getSchemasDir(); - - const ajv = new Ajv(); - addFormats(ajv); - - const componentSchema = await readJSON( - path.join(schemaDir, "component.json"), - ); - ajv.addMetaSchema(componentSchema); - - // Load type schemas from the package - const typeSchemaFiles = await glob(`${schemasDir}/types/*.json`); - for (const schemaFile of typeSchemaFiles) { - const schema = await readJSON(schemaFile); - ajv.addSchema(schema); - } - - for (const keyword of Object.keys(componentSchema.properties)) { - ajv.addKeyword({ - keyword, - metaSchema: componentSchema.properties[keyword], - }); - } - return ajv; -}; - -const getSlugFromDocumentationUrl = (documentationUrl) => - documentationUrl - .split("/") - .filter((part) => part !== "") - .pop(); - -export async function getSortedComponentsData() { - const ajv = await getValidator(); - const schemasDir = getSchemasDir(); - const componentFiles = await glob(`${schemasDir}/components/*.json`); - - const allComponentsData = await Promise.all( - componentFiles.map(async (filePath) => { - const schema = await readJSON(filePath); - if ( - Object.hasOwn(schema, "meta") && - Object.hasOwn(schema.meta, "documentationUrl") - ) { - const slug = getSlugFromDocumentationUrl(schema.meta.documentationUrl); - const validate = ajv.compile(schema); - return { - slug, - ...resolveSchemaDefinitions(validate.schema, ajv), - }; - } - return null; - }), - ); - - return allComponentsData - .filter((data) => data !== null) - .sort((a, b) => { - if (a.slug > b.slug) { - return 1; - } else { - return -1; - } - }); -} - -export async function getAllComponentSlugs() { - const schemasDir = getSchemasDir(); - const componentFiles = await glob(`${schemasDir}/components/*.json`); - - const slugs = await Promise.all( - componentFiles.map(async (filePath) => { - const schema = await readJSON(filePath); - if ( - Object.hasOwn(schema, "meta") && - Object.hasOwn(schema.meta, "documentationUrl") - ) { - return getSlugFromDocumentationUrl(schema.meta.documentationUrl); - } - return null; - }), - ); - - return slugs - .filter((slug) => slug !== null) - .map((slug) => { - return { - params: { - slug, - }, - }; - }); -} - -export async function getComponentData(slug) { - const schemasDir = getSchemasDir(); - const componentFiles = await glob(`${schemasDir}/components/*.json`); - - for (const filePath of componentFiles) { - const schema = await readJSON(filePath); - if ( - Object.hasOwn(schema, "meta") && - Object.hasOwn(schema.meta, "documentationUrl") && - getSlugFromDocumentationUrl(schema.meta.documentationUrl) === slug - ) { - const ajv = await getValidator(); - const validate = ajv.compile(schema); - return { - slug, - ...resolveSchemaDefinitions(validate.schema, ajv), - }; - } - } - - throw new Error(`Schema not found for slug: ${slug}`); -} - -export async function getComponentSchemasVersion() { - try { - const packagePath = fileURLToPath( - import.meta.resolve("@adobe/spectrum-component-api-schemas/package.json"), - ); - const packageJson = await readJSON(packagePath); - return packageJson.version; - } catch { - // Fallback for development - const packageJsonPath = path.resolve( - process.cwd(), - "..", - "..", - "packages", - "component-schemas", - "package.json", - ); - const packageJson = await readJSON(packageJsonPath); - return packageJson.version; - } -} diff --git a/docs/site/lib/tokens.js b/docs/site/lib/tokens.js deleted file mode 100644 index d3c7b70b..00000000 --- a/docs/site/lib/tokens.js +++ /dev/null @@ -1,34 +0,0 @@ -import path from "path"; -import { readFile } from "fs/promises"; -import { glob, Glob } from "glob"; - -const readJSON = async (filePath) => - JSON.parse(await readFile(filePath, "utf8")); - -export async function getTokenData() { - const tokenDir = path.resolve( - path.join(process.cwd(), "..", "..", "packages", "tokens", "src"), - ); - let tokenArray = []; - const g = new Glob(`${tokenDir}/*.json`, {}); - for await (const file of g) { - const fileTokenData = await readJSON(file); - const newTokenArray = Object.keys(fileTokenData).map((key) => { - return { - name: key, - ...fileTokenData[key], - }; - }); - tokenArray = [...tokenArray, ...newTokenArray]; - // await fileNames.forEach(async (file) => { - // const fileTokenData = await readJSON(file); - // Object.keys(fileTokenData).forEach((key) => { - // tokenArray.push({ - // name: key, - // token: fileTokenData[key], - // }); - // }); - // }); - } - return tokenArray; -} diff --git a/docs/site/moon.yml b/docs/site/moon.yml index 48e58e66..8a799fc3 100644 --- a/docs/site/moon.yml +++ b/docs/site/moon.yml @@ -2,7 +2,7 @@ # This file is licensed to you under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. You may obtain a copy # of the License at http://www.apache.org/licenses/LICENSE-2.0 - +# # Unless required by applicable law or agreed to in writing, software distributed under # the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS # OF ANY KIND, either express or implied. See the License for the specific language @@ -10,65 +10,35 @@ $schema: "https://moonrepo.dev/schemas/project.json" stack: frontend layer: application -tags: - - docs - - site fileGroups: - target: - - "/site/[!visualizer]" + sources: + - "src/**/*" + - "config/**/*" + - "eleventy.config.js" + - "package.json" tasks: - copyComponentSchema: + copyContent: command: - - cp - - -r - - ../../packages/component-schemas/schemas - - public/ + - node + - scripts/copy-content.js platform: system - inputs: - - /packages/component-schemas/schemas/**/*.json - outputs: - - public/schemas - copyTokenTypeSchema: - command: - - cp - - -r - - ../../packages/tokens/schemas - - public/ - platform: system - inputs: - - /packages/tokens/schemas/**/*.json - outputs: - - public/schemas + deps: + - "markdown-generator:generate" build: command: - - next + - pnpm + - run - build platform: node deps: - - ~:copyComponentSchema - - ~:copyTokenTypeSchema - outputs: - - "/site/" + - "~:copyContent" clean: command: - - rimraf - - -g - - "'../../site/!(visualizer)'" + - pnpm + - run + - clean platform: node - inputs: - - "@globs(target)" - start: - command: - - next - - dev local: true - platform: node - deps: - - ~:build export: - platform: node deps: - - ~:clean - - ~:build - outputs: - - "/site/" + - "~:build" diff --git a/docs/site/next.config.js b/docs/site/next.config.js deleted file mode 100644 index a8e37c25..00000000 --- a/docs/site/next.config.js +++ /dev/null @@ -1,25 +0,0 @@ -// next.config.js -const isProd = process.env.NODE_ENV === "production"; - -module.exports = { - output: "export", - assetPrefix: isProd ? "/spectrum-design-data/" : "", - basePath: isProd ? "/spectrum-design-data" : "", - images: { - unoptimized: true, - }, - distDir: "../../site/", - transpilePackages: ["@adobe/spectrum-component-api-schemas"], - webpack: (config, { isServer }) => { - if (!isServer) { - // Don't bundle server-side packages in client-side code - config.resolve.fallback = { - ...config.resolve.fallback, - fs: false, - path: false, - glob: false, - }; - } - return config; - }, -}; diff --git a/docs/site/package.json b/docs/site/package.json index d6b2afaf..4ee46548 100644 --- a/docs/site/package.json +++ b/docs/site/package.json @@ -1,32 +1,42 @@ { "name": "site", "private": true, - "access": "restricted", - "version": "0.1.2", + "version": "0.2.0", + "type": "module", + "description": "Spectrum Design Data docs site (11ty)", "repository": { "type": "git", "url": "git+https://github.com/adobe/spectrum-design-data.git" }, - "dependencies": { - "@adobe/spectrum-component-api-schemas": "workspace:*", - "@spectrum-css/link": "^5.1.3", - "@spectrum-css/page": "^8.1.3", - "@spectrum-css/sidenav": "^5.1.3", - "@spectrum-css/table": "^6.1.3", - "@spectrum-css/tokens": "^14.4.0", - "@spectrum-css/typography": "^6.1.3", - "ajv": "^8.17.1", - "ajv-formats": "^3.0.1", - "next": "^14.2.15", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "rimraf": "^6.0.1" - }, "license": "Apache-2.0", "bugs": { "url": "https://github.com/adobe/spectrum-design-data/issues" }, "homepage": "https://github.com/adobe/spectrum-design-data/tree/main/docs/site#readme", - "keywords": [], - "author": "Garth Braithwaite (http://garthdb.com/)" + "author": "Garth Braithwaite (https://garthdb.com/)", + "engines": { + "node": ">=20.x" + }, + "scripts": { + "build": "eleventy", + "start": "eleventy --serve", + "clean": "rimraf ../../site .cache" + }, + "dependencies": { + "@11ty/eleventy": "^3.0.0", + "@spectrum-css/link": "^7.1.0", + "@spectrum-css/page": "^9.1.0", + "@spectrum-css/table": "^6.1.0", + "@spectrum-css/tokens": "^16.0.2", + "@spectrum-css/typography": "^8.1.0", + "markdown-it": "^14.0.0" + }, + "devDependencies": { + "autoprefixer": "^10.4.21", + "cssnano": "^7.0.1", + "postcss": "^8.4.49", + "postcss-import": "^16.1.0", + "postcss-import-ext-glob": "^2.0.1", + "rimraf": "^6.0.0" + } } diff --git a/docs/site/pages/_app.js b/docs/site/pages/_app.js deleted file mode 100644 index 36351ecf..00000000 --- a/docs/site/pages/_app.js +++ /dev/null @@ -1,14 +0,0 @@ -import "@spectrum-css/tokens/dist/css/global-vars.css"; -import "@spectrum-css/tokens/dist/css/spectrum/custom-vars.css"; -import "@spectrum-css/tokens/dist/css/spectrum/medium-vars.css"; -import "@spectrum-css/tokens/dist/css/medium-vars.css"; -import "@spectrum-css/tokens/dist/css/light-vars.css"; -import "@spectrum-css/page/dist/index-vars.css"; -import "@spectrum-css/link/dist/index-vars.css"; -import "@spectrum-css/table/dist/index-vars.css"; -import "@spectrum-css/typography/dist/index-vars.css"; -import "@spectrum-css/sidenav/dist/index-vars.css"; - -export default function App({ Component, pageProps }) { - return ; -} diff --git a/docs/site/pages/_document.js b/docs/site/pages/_document.js deleted file mode 100644 index 3c681f3e..00000000 --- a/docs/site/pages/_document.js +++ /dev/null @@ -1,21 +0,0 @@ -import { Html, Head, Main, NextScript } from "next/document"; - -export default function Document() { - return ( - - - - - - - -
- - - - ); -} diff --git a/docs/site/pages/components/[slug].js b/docs/site/pages/components/[slug].js deleted file mode 100644 index 3d1fae05..00000000 --- a/docs/site/pages/components/[slug].js +++ /dev/null @@ -1,119 +0,0 @@ -import Head from "next/head"; -import Layout from "../../components/layout"; -import { - getAllComponentSlugs, - getComponentData, - getComponentSchemasVersion, -} from "../../lib/components"; - -function formatComponentPropertiesTable(componentData) { - const properties = componentData.properties; - return Object.keys(properties).map((property) => { - const result = { property, ...properties[property] }; - if (Object.hasOwn(properties[property], "type")) { - switch (properties[property].type) { - case "boolean": - result.values = "yes / no"; - result.defaultValue = properties[property].default ? "yes" : "no"; - break; - case "string": - if (property === "icon") { - result.values = "icon / nothing"; - result.defaultValue = "nothing"; - } else if (Object.hasOwn(properties[property], "enum")) { - result.values = properties[property].enum.join(" / "); - result.defaultValue = properties[property].default - ? properties[property].default - : ""; - } else { - result.values = "text"; - result.defaultValue = "-"; - } - break; - default: - result.values = "yes / no"; - result.description = ""; - result.defaultValue = "no"; - result.required = "no"; - } - } - return result; - }); -} - -export async function getStaticProps({ params }) { - const componentData = await getComponentData(params.slug); - const version = await getComponentSchemasVersion(); - return { - props: { - componentData, - version, - }, - }; -} - -export async function getStaticPaths() { - const paths = await getAllComponentSlugs(); - return { - paths, - fallback: false, - }; -} - -export default function Component({ componentData, version }) { - return ( - - - {componentData.title} - -

{componentData.title}

-

{componentData.description}

- {Object.hasOwn(componentData, "properties") ? ( - - - - - - - - - - - {formatComponentPropertiesTable(componentData).map( - ({ values, description, property, defaultValue, required }) => ( - - - - - - - ), - )} - -
- Property - - Values - Default valueRequired
- - {property.replace(/([A-Z])/g, " $1").toLowerCase()} - - -
{values}
- {description ? ( -
{description}
- ) : undefined} - 		- {defaultValue} - - {required} -
- ) : undefined} - 
{JSON.stringify(componentData, null, 2)}
- - ); -} diff --git a/docs/site/pages/index.js b/docs/site/pages/index.js deleted file mode 100644 index d7c4999b..00000000 --- a/docs/site/pages/index.js +++ /dev/null @@ -1,63 +0,0 @@ -import { - getSortedComponentsData, - getComponentSchemasVersion, -} from "../lib/components"; -import Link from "next/link"; -import Head from "next/head"; - -export async function getStaticProps() { - const allComponentsData = await getSortedComponentsData(); - const version = await getComponentSchemasVersion(); - return { - props: { - allComponentsData, - version, - }, - }; -} - -export default function Home({ allComponentsData, version }) { - return ( -
- - Spectrum Components API - - - - -
-
-

Spectrum Components API

- {version && ( -

- Schema version: {version} -

- )} - -
-
-
- ); -} diff --git a/docs/site/pages/tokens/index.js b/docs/site/pages/tokens/index.js deleted file mode 100644 index b10c751f..00000000 --- a/docs/site/pages/tokens/index.js +++ /dev/null @@ -1,188 +0,0 @@ -import Head from "next/head"; -import Link from "next/link"; -import Layout from "../../components/layout"; - -import { getTokenData } from "../../lib/tokens"; - -function isObject(obj) { - return typeof obj === "object" && !Array.isArray(obj) && obj !== null; -} - -export async function getStaticProps({}) { - const tokenData = await getTokenData(); - return { - props: { - tokenData, - }, - }; -} - -function RGBAToHexA(rgba, forceRemoveAlpha = false) { - return ( - "#" + - rgba - .replace(/^rgba?\(|\s+|\)$/g, "") // Get's rgba / rgb string values - .split(",") // splits them at "," - .filter((string, index) => !forceRemoveAlpha || index !== 3) - .map((string) => parseFloat(string)) // Converts them to numbers - .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number - .map((number) => number.toString(16)) // Converts numbers to hex - .map((string) => (string.length === 1 ? "0" + string : string)) // Adds 0 when length of one number is 1 - .join("") - ); // Puts the array to togehter to a string -} - -// function formatTokenLink(value) { -// if (value.charAt(0) === "{" && value.charAt(value.length - 1) === "}") { -// return ( -// {`${value.substring(1, value.length - 1)}`} -// ); -// } else { -// return value; -// } -// } - -// function formatSets(sets) { -// if (Object.hasOwn(sets, "desktop") && Object.hasOwn(sets, "mobile")) { -// if ( -// Object.hasOwn(sets.desktop, "value") && -// Object.hasOwn(sets.mobile, "value") -// ) { -// return ( -//
-// {`${formatTokenLink(sets.desktop.value)} (desktop)`} -//
-// {`${formatTokenLink(sets.mobile.value)} (mobile)`} -// 		-// {JSON.stringify(sets)} -// -// {JSON.stringify(sets)} -// -// {formatTokenLink(token.value)} -//
- {token.name} - - -
- - - - - - - - {tokenData.map(formatToken)} - -
- Token Name - - Value -
- - ); -} diff --git a/docs/site/scripts/copy-content.js b/docs/site/scripts/copy-content.js new file mode 100644 index 00000000..e7fbb5e0 --- /dev/null +++ b/docs/site/scripts/copy-content.js @@ -0,0 +1,23 @@ +/* +Copyright 2024 Adobe. All rights reserved. +Copy generated markdown from docs/markdown into src for 11ty. +*/ +import { readdirSync, copyFileSync, existsSync } from "fs"; +import { join, dirname } from "path"; +import { fileURLToPath } from "url"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const root = join(__dirname, ".."); +const src = join(root, "../markdown"); +const dest = join(root, "src"); + +for (const dir of ["components", "tokens", "registry"]) { + const from = join(src, dir); + const to = join(dest, dir); + if (!existsSync(from)) continue; + for (const f of readdirSync(from)) { + if (f.endsWith(".md")) { + copyFileSync(join(from, f), join(to, f)); + } + } +} diff --git a/docs/site/src/assets/css/base/index.css b/docs/site/src/assets/css/base/index.css new file mode 100644 index 00000000..06d416d1 --- /dev/null +++ b/docs/site/src/assets/css/base/index.css @@ -0,0 +1,188 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +* { + font-size: var(--spectrum-body-size-m); + line-height: var(--spectrum-line-height-200); +} + +/* Base elements */ +body { + background: var(--spectrum-white); +} + +ol, +ul { + margin: var(--spacing-default) 0; + padding-left: var(--spacing-default); +} + +ol li, +ul li { + margin-bottom: var(--spacing-small); +} + +ol li > ul, +ol li > ol, +ul li > ul, +ul li > ol { + margin-top: var(--spacing-small); + margin-bottom: var(--spacing-small); +} + +p, +hr { + margin: var(--spacing-default) 0; +} + +hr { + color: var(--spectrum-gray-300); +} + +/* UI states */ +.disabled { + text-decoration: none; + cursor: not-allowed; + color: var(--spectrum-gray-400); + fill: var(--spectrum-gray-400); +} + +/* Helpers */ +.image-banner { + margin: var(--spacing-large) 0; + width: 100%; + height: auto; +} + +header, +menu, +.pagination { + display: flex; + justify-content: space-between; + align-items: center; +} + +header { + margin: var(--spacing-large) 0; +} + +header a:has(h1) { + text-decoration: none; +} + +header h1 { + display: flex; + gap: var(--spacing-default); +} + +header h1 img { + height: var(--sizing-large); +} + +@media screen and (max-width: 768px) { + header { + justify-content: baseline; + flex-direction: column; + align-items: start; + } +} + +menu { + gap: var(--spacing-small); + list-style: none; +} + +menu a, +menu span { + text-decoration: none; + font-weight: var(--spectrum-bold-font-weight); + padding: var(--spacing-small); + border-radius: var(--border-radius-default); + cursor: pointer; +} + +menu a:hover, +menu a:focus, +menu a:active { + background-color: var(--spectrum-gray-200); +} + +menu .active { + background-color: var(--spectrum-gray-200); +} + +menu .active:hover, +menu .active:focus, +menu .active:active { + background-color: var(--spectrum-gray-300); +} + +@media screen and (max-width: 768px) { + menu { + margin-top: var(--spacing-default); + } +} + +main { + flex: 1 1 0%; + margin: 0 auto; +} + +.main-wrapper { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +main, +footer { + width: 80%; +} + +@media screen and (min-width: 768px) { + main, + footer { + max-width: 768px; + } +} + +footer { + margin: var(--spacing-default) auto; + padding-block-start: var(--spacing-large); + border-block-start: 1px solid var(--spectrum-gray-200); +} + +footer .footer-label { + text-align: center; + font-style: normal; + font-weight: var(--spectrum-bold-font-weight); + font-size: var(--spectrum-font-size-75); + text-transform: uppercase; + letter-spacing: var(--spectrum-letter-spacing-100); + color: var(--spectrum-gray-700); + margin-bottom: var(--spacing-small); +} + +footer menu { + justify-content: center; + margin-bottom: var(--spacing-large); +} + +footer p:not(.footer-label) { + text-align: center; + font-style: italic; +} + +.pagination svg { + height: var(--sizing-default); +} + diff --git a/docs/site/src/assets/css/base/reset.css b/docs/site/src/assets/css/base/reset.css new file mode 100644 index 00000000..2eee964d --- /dev/null +++ b/docs/site/src/assets/css/base/reset.css @@ -0,0 +1,149 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* + * reset.css: a css reset for 2024 and beyond. + * https://github.com/mayank99/reset.css + */ + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:where([hidden]:not([hidden="until-found"])) { + display: none !important; +} + +:where(html) { + -webkit-text-size-adjust: none; + color-scheme: dark light; + tab-size: 2; + scrollbar-gutter: stable; + interpolate-size: allow-keywords; + line-height: 1.5; +} + +:where(html:has(dialog:modal[open])) { + overflow: clip; +} + +@media (prefers-reduced-motion: no-preference) { + :where(html:focus-within) { + scroll-behavior: smooth; + } +} + +:where(body) { + line-height: inherit; + font-family: system-ui, sans-serif; + -webkit-font-smoothing: antialiased; +} + +:where(button) { + all: unset; +} + +:where(input, button, textarea, select) { + font: inherit; + color: inherit; + letter-spacing: inherit; + word-spacing: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; +} + +:where(textarea) { + resize: vertical; + resize: block; +} + +:where(button, label, select, summary, [role="button"], [role="option"]) { + cursor: pointer; +} + +:where(:disabled, label:has(> :disabled, + disabled)) { + cursor: not-allowed; +} + +:where(a) { + color: inherit; + text-underline-offset: 0.2ex; +} + +:where(ul, ol) { + list-style-position: inside; +} + +:where(img, svg, video, canvas, audio, iframe, embed, object) { + display: block; +} + +:where(img, picture, svg, video) { + max-inline-size: 100%; + block-size: auto; +} + +:where(p, h1, h2, h3, h4, h5, h6) { + overflow-wrap: break-word; +} + +:where(h1, h2, h3) { + line-height: calc(1em + 0.5rem); + text-wrap: balance; +} + +:where(hr) { + border: none; + border-block-start: 1px solid; + color: inherit; + block-size: 0; + overflow: visible; +} + +:where(dialog, [popover]) { + border: none; + background: none; + color: inherit; + inset: unset; + max-width: unset; + max-height: unset; + overflow: unset; +} + +:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) { + display: none !important; +} + +:where(:focus-visible) { + outline: 3px solid CanvasText; + box-shadow: 0 0 0 5px Canvas; + outline-offset: 1px; +} + +:where(:focus-visible, :target) { + scroll-margin-block: 8vh; +} + +:where(.visually-hidden:not(:focus-within, :active)) { + clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + overflow: hidden !important; + position: absolute !important; + white-space: nowrap !important; + border: 0 !important; + user-select: none !important; +} diff --git a/docs/site/src/assets/css/base/vars.css b/docs/site/src/assets/css/base/vars.css new file mode 100644 index 00000000..6fdfc594 --- /dev/null +++ b/docs/site/src/assets/css/base/vars.css @@ -0,0 +1,22 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +:root { + --border-radius-default: 4px; + + --spacing-small: var(--spectrum-spacing-100); + --spacing-default: var(--spectrum-spacing-300); + --spacing-large: var(--spectrum-spacing-500); + + --sizing-default: var(--spectrum-spacing-300); + --sizing-large: var(--spectrum-spacing-500); +} diff --git a/docs/site/src/assets/css/global/global.css b/docs/site/src/assets/css/global/global.css new file mode 100644 index 00000000..57f23cca --- /dev/null +++ b/docs/site/src/assets/css/global/global.css @@ -0,0 +1,17 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@import "@spectrum-css/tokens/dist/css/index.css"; +@import "@spectrum-css/page/dist/index.css"; +@import "@spectrum-css/typography/dist/index.css"; +@import "@spectrum-css/link/dist/index.css"; +@import "@spectrum-css/table/dist/index.css"; diff --git a/docs/site/src/assets/css/index.css b/docs/site/src/assets/css/index.css new file mode 100644 index 00000000..aa242f7d --- /dev/null +++ b/docs/site/src/assets/css/index.css @@ -0,0 +1,16 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@import "base/reset.css"; +@import "global/global.css"; +@import "base/vars.css"; +@import "base/index.css"; diff --git a/docs/site/src/components/components.json b/docs/site/src/components/components.json new file mode 100644 index 00000000..b32a9140 --- /dev/null +++ b/docs/site/src/components/components.json @@ -0,0 +1,5 @@ +{ + "layout": "component.liquid", + "tags": ["component"], + "permalink": "/components/{{ page.fileSlug }}/" +} diff --git a/docs/site/src/data/meta.js b/docs/site/src/data/meta.js new file mode 100644 index 00000000..fc2cedf2 --- /dev/null +++ b/docs/site/src/data/meta.js @@ -0,0 +1,19 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +export const url = + process.env.URL || "https://adobe.github.io/spectrum-design-data"; +export const siteName = "Spectrum Design Data"; +export const siteDescription = + "API documentation, design tokens, and registry for Spectrum, Adobe's design system."; +export const locale = "en_US"; +export const lang = "en"; diff --git a/docs/site/src/data/navigation.js b/docs/site/src/data/navigation.js new file mode 100644 index 00000000..ecea83d9 --- /dev/null +++ b/docs/site/src/data/navigation.js @@ -0,0 +1,27 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +export default { + top: [ + { text: "Home", url: "/" }, + { text: "Components", url: "/components/" }, + { text: "Tokens", url: "/tokens/" }, + { text: "Registry", url: "/registry/" }, + { text: "AI", url: "/ai/" }, + ], + bottom: [ + { text: "S2 Tokens Viewer", url: "/s2-tokens-viewer/" }, + { text: "S2 Visualizer", url: "/s2-visualizer/" }, + { text: "Visualizer", url: "/visualizer/" }, + { text: "Release Timeline", url: "/release-timeline/" }, + ], +}; diff --git a/docs/site/src/includes/layout/footer.liquid b/docs/site/src/includes/layout/footer.liquid new file mode 100644 index 00000000..f8394da1 --- /dev/null +++ b/docs/site/src/includes/layout/footer.liquid @@ -0,0 +1,21 @@ + + + diff --git a/docs/site/src/includes/layout/header.liquid b/docs/site/src/includes/layout/header.liquid new file mode 100644 index 00000000..e350eb35 --- /dev/null +++ b/docs/site/src/includes/layout/header.liquid @@ -0,0 +1,24 @@ + + +
+ +

Spectrum Design Data

+ + +
  • Home
    • +
  • Components
    • +
  • Tokens
    • +
  • Registry
    • +
  • AI
    • +     +
    diff --git a/docs/site/src/includes/nav/menu.liquid b/docs/site/src/includes/nav/menu.liquid new file mode 100644 index 00000000..7c9568af --- /dev/null +++ b/docs/site/src/includes/nav/menu.liquid @@ -0,0 +1,21 @@ + + +{%- if navigation.size > 0 -%} + + {% for item in navigation %} +
  • + {{ item.text }} +
    • + {% endfor %} +     +{%- endif -%} diff --git a/docs/site/src/layouts/base.liquid b/docs/site/src/layouts/base.liquid new file mode 100644 index 00000000..4c994ace --- /dev/null +++ b/docs/site/src/layouts/base.liquid @@ -0,0 +1,25 @@ +--- +# base layout for Spectrum Design Data docs +--- + + + + + + {% if title %}{{ title }} | {% endif %}{{ siteName }} + + + + + +
    +
    + {% render "includes/layout/header.liquid" %} +
    + {{ content }} +
    + {% render "includes/layout/footer.liquid" %} +
    +
    + + diff --git a/docs/site/src/layouts/component.liquid b/docs/site/src/layouts/component.liquid new file mode 100644 index 00000000..efd9941a --- /dev/null +++ b/docs/site/src/layouts/component.liquid @@ -0,0 +1,15 @@ +--- +# Component schema page - title and content from frontmatter/body +layout: base.liquid +--- +
    +

    {{ title }}

    + {% if documentationUrl %} +

    + Spectrum docs +

    + {% endif %} +
    + {{ content }} +
    +
    diff --git a/docs/site/src/layouts/registry.liquid b/docs/site/src/layouts/registry.liquid new file mode 100644 index 00000000..441a9d3e --- /dev/null +++ b/docs/site/src/layouts/registry.liquid @@ -0,0 +1,10 @@ +--- +# Registry/glossary page +layout: base.liquid +--- +
    +

    {{ title }}

    +
    + {{ content }} +
    +
    diff --git a/docs/site/src/layouts/token-group.liquid b/docs/site/src/layouts/token-group.liquid new file mode 100644 index 00000000..abcfa341 --- /dev/null +++ b/docs/site/src/layouts/token-group.liquid @@ -0,0 +1,10 @@ +--- +# Token group page - token tables with anchors +layout: base.liquid +--- +
    +

    {{ title }}

    +
    + {{ content }} +
    +
    diff --git a/docs/site/src/pages/404.md b/docs/site/src/pages/404.md new file mode 100644 index 00000000..2ca61f94 --- /dev/null +++ b/docs/site/src/pages/404.md @@ -0,0 +1,11 @@ +--- +title: Page not found +layout: base.liquid +permalink: /404.html +--- + +# 404 — Page not found + +The page you're looking for doesn't exist. + +[Return home](/) diff --git a/docs/site/src/pages/ai.md b/docs/site/src/pages/ai.md new file mode 100644 index 00000000..d06f2947 --- /dev/null +++ b/docs/site/src/pages/ai.md @@ -0,0 +1,90 @@ +--- +title: Using with AI +layout: base.liquid +permalink: /ai/ +--- + +# Using with AI + +Spectrum Design Data publishes Model Context Protocol (MCP) servers so AI assistants can query design tokens, component schemas, and Spectrum 2 documentation directly from tools like Cursor. + +## MCP Servers + +### @adobe/spectrum-design-data-mcp + +Design tokens and component API schemas. Enables AI to look up token values, find tokens by use case, validate component props, and get schema definitions. + +**npm:** `@adobe/spectrum-design-data-mcp` + +**Token tools:** `query-tokens`, `find-tokens-by-use-case`, `get-component-tokens`, `get-design-recommendations`, `get-token-categories`, `get-token-details` + +**Schema tools:** `query-component-schemas`, `get-component-schema`, `list-components`, `validate-component-props`, `get-type-schemas` + +**Cursor config (single server):** + +```json +{ + "mcpServers": { + "spectrum-design-data": { + "command": "npx", + "args": ["@adobe/spectrum-design-data-mcp"] + } + } +} +``` + +### @adobe/s2-docs-mcp + +Spectrum 2 component documentation and design guidelines. Use when the AI needs S2 docs (scraped from the Spectrum site and stored in this repo). + +**npm:** `@adobe/s2-docs-mcp` + +**Tools:** `list-s2-components`, `get-s2-component`, `search-s2-docs`, `get-s2-stats`, `find-s2-component-by-use-case` + +**Cursor config (single server):** Use a local path to the repo, or install and run from the repo. Example: + +```json +{ + "mcpServers": { + "s2-docs": { + "command": "npx", + "args": ["@adobe/s2-docs-mcp"] + } + } +} +``` + +If you run from source, point `args` to `tools/s2-docs-mcp/src/cli.js` inside your clone. + +## Cursor IDE setup + +Add both servers to `.cursor/mcp.json` so the AI can use tokens, schemas, and S2 docs in the same session: + +```json +{ + "mcpServers": { + "spectrum-design-data": { + "command": "npx", + "args": ["@adobe/spectrum-design-data-mcp"] + }, + "s2-docs": { + "command": "npx", + "args": ["@adobe/s2-docs-mcp"] + } + } +} +``` + +Restart Cursor after changing MCP config. + +**More context in chat:** + +* **@Files** — Reference `docs/s2-docs/` or `docs/markdown/` so the AI can read those files directly. +* **@Docs** — If this site (or another Spectrum doc site) is indexed in Cursor, add it via **@Docs → Add new doc** for searchable documentation. + +## Other AI resources + +* **llms.txt** — At the repo root, [llms.txt](https://github.com/adobe/spectrum-design-data/blob/main/llms.txt) describes the project layout, design tokens, component schemas, and common tasks for LLMs. +* **Generated markdown** — The [docs/markdown/](https://github.com/adobe/spectrum-design-data/tree/main/docs/markdown) directory holds auto-generated markdown from tokens, component schemas, and the design-system registry, used by the docs site and for chatbot indexing. Regenerate with `moon run markdown-generator:generate`. + +**See also:** [React Spectrum — Using with AI](https://react-spectrum.adobe.com/ai) for React Spectrum’s own AI integration (S2 component implementation docs, icons, illustrations). diff --git a/docs/site/src/pages/components/index.md b/docs/site/src/pages/components/index.md new file mode 100644 index 00000000..d7d1120b --- /dev/null +++ b/docs/site/src/pages/components/index.md @@ -0,0 +1,17 @@ +--- +title: Components +layout: base.liquid +permalink: /components/ +--- + +# Components + +Component API schemas for Spectrum. + + diff --git a/docs/site/src/pages/index.md b/docs/site/src/pages/index.md new file mode 100644 index 00000000..5723eadc --- /dev/null +++ b/docs/site/src/pages/index.md @@ -0,0 +1,23 @@ +--- +title: Home +layout: base.liquid +permalink: / +--- + +# Spectrum Design Data + +API documentation, design tokens, and registry for **Spectrum**, Adobe's design system. + +## Sections + +* **[Components](/components/)** — Component API schemas (properties, types, defaults) +* **[Tokens](/tokens/)** — Design tokens (color, typography, layout, etc.) +* **[Registry](/registry/)** — Design system terminology (sizes, states, variants, glossary) +* **[AI](/ai/)** — MCP servers and AI-assisted development (Cursor, llms.txt, generated markdown) + +## Tools + +* [S2 Tokens Viewer](/s2-tokens-viewer/) — Browse Spectrum 2 tokens +* [S2 Visualizer](/s2-visualizer/) — Token dependency graph (Spectrum 2) +* [Visualizer](/visualizer/) — Token dependency graph (Spectrum 1) +* [Release Timeline](/release-timeline/) — Release history diff --git a/docs/site/src/pages/registry/index.md b/docs/site/src/pages/registry/index.md new file mode 100644 index 00000000..e3337b09 --- /dev/null +++ b/docs/site/src/pages/registry/index.md @@ -0,0 +1,17 @@ +--- +title: Registry +layout: base.liquid +permalink: /registry/ +--- + +# Registry + +Design system terminology (sizes, states, variants, glossary). + + diff --git a/docs/site/src/pages/tokens/index.md b/docs/site/src/pages/tokens/index.md new file mode 100644 index 00000000..6076f293 --- /dev/null +++ b/docs/site/src/pages/tokens/index.md @@ -0,0 +1,17 @@ +--- +title: Tokens +layout: base.liquid +permalink: /tokens/ +--- + +# Tokens + +Design tokens (color, typography, layout, etc.). + + diff --git a/docs/site/src/registry/registry.json b/docs/site/src/registry/registry.json new file mode 100644 index 00000000..8e03923a --- /dev/null +++ b/docs/site/src/registry/registry.json @@ -0,0 +1,5 @@ +{ + "layout": "registry.liquid", + "tags": ["registry"], + "permalink": "/registry/{{ page.fileSlug }}/" +} diff --git a/docs/site/src/tokens/tokens.json b/docs/site/src/tokens/tokens.json new file mode 100644 index 00000000..4ddad8c8 --- /dev/null +++ b/docs/site/src/tokens/tokens.json @@ -0,0 +1,5 @@ +{ + "layout": "token-group.liquid", + "tags": ["tokens"], + "permalink": "/tokens/{{ page.fileSlug }}/" +} diff --git a/docs/site/styles/global.css b/docs/site/styles/global.css deleted file mode 100644 index f7b737e4..00000000 --- a/docs/site/styles/global.css +++ /dev/null @@ -1,43 +0,0 @@ -html, -body { - padding: 0 100px; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - line-height: 1.6; - font-size: 18px; -} - -* { - box-sizing: border-box; -} - -a { - color: #0070f3; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -img { - max-width: 100%; - display: block; -} - -table { - border-collapse: collapse; - border-spacing: 0; - border-bottom: 1px solid #eaeaea; -} -tr { - border-top: 1px solid #eaeaea; -} -th { - text-align: left; -} -th, -td { - padding: 12px 24px; -} \ No newline at end of file diff --git a/docs/site/styles/utils.module.css b/docs/site/styles/utils.module.css deleted file mode 100644 index 37f545ef..00000000 --- a/docs/site/styles/utils.module.css +++ /dev/null @@ -1,52 +0,0 @@ -.heading2Xl { - font-size: 2.5rem; - line-height: 1.2; - font-weight: 800; - letter-spacing: -0.05rem; - margin: 1rem 0; -} - -.headingXl { - font-size: 2rem; - line-height: 1.3; - font-weight: 800; - letter-spacing: -0.05rem; - margin: 1rem 0; -} - -.headingLg { - font-size: 1.5rem; - line-height: 1.4; - margin: 1rem 0; -} - -.headingMd { - font-size: 1.2rem; - line-height: 1.5; -} - -.borderCircle { - border-radius: 9999px; -} - -.colorInherit { - color: inherit; -} - -.padding1px { - padding-top: 1px; -} - -.list { - list-style: none; - padding: 0; - margin: 0; -} - -.listItem { - margin: 0 0 1.25rem; -} - -.lightText { - color: #666; -} diff --git a/docs/spectrum-glossary/.eleventy.js b/docs/spectrum-glossary/.eleventy.js deleted file mode 100644 index ac0df783..00000000 --- a/docs/spectrum-glossary/.eleventy.js +++ /dev/null @@ -1,146 +0,0 @@ -import * as registry from "@adobe/design-system-registry"; - -export default async function (eleventyConfig) { - // Pass through assets - eleventyConfig.addPassthroughCopy("src/assets"); - - // Don't delete API directory on clean builds - eleventyConfig.setServerOptions({ - watch: ["dist/api/**/*"], - }); - - // Add collections for terms - eleventyConfig.addCollection("allTerms", function (collectionApi) { - const allTerms = []; - const registryTypes = [ - "sizes", - "states", - "variants", - "anatomyTerms", - "components", - "scaleValues", - "categories", - "platforms", - "navigationTerms", - "tokenTerminology", - "glossary", - ]; - - registryTypes.forEach((type) => { - const data = registry[type]; - if (data && data.values) { - data.values.forEach((term) => { - allTerms.push({ - ...term, - registryType: type, - registryLabel: data.label || type, - }); - }); - } - }); - - return allTerms; - }); - - eleventyConfig.addCollection("categories", function (collectionApi) { - const registryTypes = { - sizes: registry.sizes, - states: registry.states, - variants: registry.variants, - anatomyTerms: registry.anatomyTerms, - components: registry.components, - scaleValues: registry.scaleValues, - categories: registry.categories, - platforms: registry.platforms, - navigationTerms: registry.navigationTerms, - tokenTerminology: registry.tokenTerminology, - glossary: registry.glossary, - }; - - return Object.entries(registryTypes).map(([id, data]) => ({ - id, - label: data.label || id, - description: data.description || "", - terms: data.values || [], - })); - }); - - // Add filters - eleventyConfig.addFilter("termById", function (terms, termId) { - return terms.find((t) => t.id === termId); - }); - - eleventyConfig.addFilter("relatedTerms", function (terms, termIds) { - if (!termIds || !Array.isArray(termIds)) return []; - return terms.filter((t) => termIds.includes(t.id)); - }); - - eleventyConfig.addFilter("sortByLabel", function (terms) { - return [...terms].sort((a, b) => - (a.label || a.id).localeCompare(b.label || b.id), - ); - }); - - eleventyConfig.addFilter("filterByRegistry", function (terms, registryType) { - return terms.filter((t) => t.registryType === registryType); - }); - - eleventyConfig.addFilter("hasDefinition", function (terms) { - return terms.filter((t) => t.definition); - }); - - eleventyConfig.addFilter("limit", function (array, limit) { - return array.slice(0, limit); - }); - - eleventyConfig.addFilter("truncate", function (text, length) { - if (!text || text.length <= length) return text; - return text.substring(0, length) + "..."; - }); - - // JSON filter for outputting JSON in templates - eleventyConfig.addFilter("json", function (value) { - return JSON.stringify(value); - }); - - // Path prefix filter for base path support - eleventyConfig.addFilter("pathPrefix", function (path, basePath) { - if (!path) return ""; - // Don't prefix external URLs or URLs that already start with the base path - if ( - path.startsWith("http://") || - path.startsWith("https://") || - path.startsWith("//") - ) { - return path; - } - if (basePath && path.startsWith(basePath)) { - return path; - } - // Ensure path starts with / and basePath doesn't end with / - const cleanPath = path.startsWith("/") ? path : `/${path}`; - const cleanBasePath = - basePath && basePath.endsWith("/") - ? basePath.slice(0, -1) - : basePath || ""; - return cleanBasePath + cleanPath; - }); - - // Markdown configuration - const markdownIt = (await import("markdown-it")).default; - const markdownItPrism = (await import("markdown-it-prism")).default; - const md = markdownIt({ html: true }).use(markdownItPrism); - eleventyConfig.setLibrary("md", md); - - return { - dir: { - input: "src", - output: "dist", - includes: "_includes", - data: "_data", - }, - templateFormats: ["njk", "md", "html"], - htmlTemplateEngine: "njk", - markdownTemplateEngine: "njk", - }; -} diff --git a/docs/spectrum-glossary/.gitignore b/docs/spectrum-glossary/.gitignore deleted file mode 100644 index 08dcf17e..00000000 --- a/docs/spectrum-glossary/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules/ -dist/ -.cache/ -.env -.DS_Store diff --git a/docs/spectrum-glossary/BUILD_SUMMARY.md b/docs/spectrum-glossary/BUILD_SUMMARY.md deleted file mode 100644 index 1cb4f54f..00000000 --- a/docs/spectrum-glossary/BUILD_SUMMARY.md +++ /dev/null @@ -1,302 +0,0 @@ -# Spectrum Design System Glossary - Build Summary - -## ✅ Implementation Complete - -Successfully implemented Phase 3 of the Spectrum Design System Glossary project: a searchable, accessible web viewer built with 11ty and Spectrum Web Components. - -## 📊 Statistics - -* **Total Files Generated**: 726 files -* **Build Output Size**: 3.4 MB -* **Total Terms**: 179 terms across 11 registries -* **Enhanced Definitions**: 21 terms with full definitions -* **Platform Extensions**: 2 platforms (iOS, Web Components) -* **Build Time**: \~3 seconds (via moon) -* **Page Generation Time**: 0.36-0.43 seconds (11ty) - -## 📁 Project Structure - -``` -docs/spectrum-glossary/ -├── .eleventy.js # 11ty configuration -├── package.json # Dependencies & scripts -├── moon.yml # Moon task configuration -├── README.md # Documentation -├── CHANGELOG.md # Version history -├── .gitignore # Git ignore rules -├── src/ -│ ├── _data/ -│ │ ├── registry.js # Load all registry data -│ │ ├── meta.js # Site metadata -│ │ └── navigation.js # Nav structure -│ ├── _includes/ -│ │ ├── layouts/ -│ │ │ └── base.njk # Base HTML template -│ │ └── components/ -│ │ ├── header.njk -│ │ ├── footer.njk -│ │ ├── search.njk # Search component -│ │ ├── term-card.njk -│ │ └── related-terms.njk -│ ├── assets/ -│ │ ├── css/ -│ │ │ └── index.css # Main styles (Spectrum CSS) -│ │ └── js/ -│ │ ├── search.js # Search functionality (Fuse.js) -│ │ ├── filters.js # Filter functionality -│ │ └── theme.js # Theme switcher -│ ├── index.njk # Homepage -│ ├── terms/ -│ │ └── terms.njk # Template for term pages -│ └── categories/ -│ └── categories.njk # Category pages -├── scripts/ -│ ├── build-api.js # Generate static JSON API -│ └── build-search-index.js # Generate search index -└── dist/ # Build output (726 files) - ├── index.html - ├── terms/ # 179 term pages - ├── categories/ # 11 category pages - ├── assets/ # CSS & JS - └── api/v1/ # Static JSON API - ├── glossary.json - ├── search-index.json - ├── stats.json - ├── terms/ # 179 individual term JSON files - ├── categories/ # 11 category JSON files - └── platforms/ # 2 platform JSON files -``` - -## 🎨 Features Implemented - -### Core Functionality - -* ✅ Homepage with statistics and featured terms -* ✅ 179 individual term detail pages -* ✅ 11 category browsing pages -* ✅ Full-text search with Fuse.js -* ✅ Advanced filters (enhanced definitions, platform variations) -* ✅ Alphabet navigation for long lists -* ✅ Related terms suggestions -* ✅ Dark mode support with theme switcher -* ✅ Mobile responsive design -* ✅ WCAG 2.1 AA compliant accessibility - -### Term Detail Pages Include - -* ✅ Term label, ID, and status badges -* ✅ Enhanced definitions with superordinates -* ✅ Essential characteristics lists -* ✅ Platform variations with tabs (Spectrum Web Components) -* ✅ Terminology metadata (concept type, naming rationale) -* ✅ Sources and references with links -* ✅ Governance information (owner, review date, status) -* ✅ Related terms navigation -* ✅ Export functionality (JSON) - -### Static JSON API - -* ✅ `/api/v1/glossary.json` - All 179 terms (63 KB) -* ✅ `/api/v1/search-index.json` - Optimized search index (66 KB) -* ✅ `/api/v1/terms/{termId}.json` - 179 individual term files -* ✅ `/api/v1/categories/{category}.json` - 11 category files -* ✅ `/api/v1/platforms/{platform}.json` - 2 platform files -* ✅ `/api/v1/stats.json` - Usage statistics - -## 🛠 Technical Stack - -### Build Tools - -* **11ty (Eleventy)** v3.1.2 - Static site generator -* **pnpm** v10.17.1 - Package manager -* **moon** - Monorepo task runner -* **Node.js** \~20.12 - -### UI Framework - -* **Spectrum Web Components** v0.49.0 - * `sp-theme` - Theme provider - * `sp-search` - Search input - * `sp-button` / `sp-action-button` - Buttons - * `sp-tabs` / `sp-tab` / `sp-tab-panel` - Tabs for platform variations - * `sp-tooltip` - Tooltips - -### Styling - -* **Spectrum CSS** v15.2.0 - Design tokens and base styles -* **Custom CSS** - Layout, components, responsive design -* **Adobe Clean** font family - -### Search & Interactivity - -* **Fuse.js** v7.0.0 - Client-side fuzzy search -* **Vanilla JavaScript** - Theme switcher, filters -* **ES Modules** - Modern JavaScript - -### Templating - -* **Nunjucks** - HTML templating -* **markdown-it** v14.1.0 - Markdown processing -* **markdown-it-prism** v2.3.1 - Code syntax highlighting - -## 📦 Build Scripts - -### Available Commands - -```bash -# Development -pnpm start # Start dev server with hot reload - -# Building -pnpm build # Full build (API + search + 11ty) -pnpm build:api # Generate static JSON API -pnpm build:search # Generate search index -pnpm build:eleventy # Generate static HTML pages - -# Cleaning -pnpm clean # Remove dist and .cache directories - -# Moon (from root) -moon run spectrum-glossary:build # Build via moon -moon run spectrum-glossary:dev # Dev server via moon -``` - -### Build Process - -1. **API Generation** (`build:api`) - * Loads all registry data from `@adobe/design-system-registry` - * Generates `glossary.json` with all 179 terms - * Creates 179 individual term JSON files - * Creates 11 category JSON files - * Creates 2 platform JSON files - * Generates `stats.json` with usage statistics - -2. **Search Index** (`build:search`) - * Processes all 179 terms - * Extracts searchable text (IDs, labels, descriptions, definitions, aliases, platform terms) - * Optimizes for Fuse.js - * Generates `search-index.json` (66 KB) - -3. **Static Site** (`build:eleventy`) - * Generates homepage with stats and featured terms - * Creates 179 term detail pages (organized by registry type) - * Creates 11 category browsing pages - * Copies assets (CSS, JS) - * Total: 191 HTML files + assets - -## 🚀 Deployment - -### GitHub Actions Workflow - -Integrated into existing `.github/workflows/deploy-docs.yml`: - -* **Trigger**: Push to `main` branch, after Release workflow, or manual dispatch -* **Build**: Runs `moon run spectrum-glossary:export` along with other doc sites -* **Deploy**: Uploads all docs (including glossary) to GitHub Pages -* **URL**: -* **Export Script**: `scripts/export-to-site.sh` copies `dist/` to `../../site/glossary/` - -### Moon Integration - -Added to `.moon/workspace.yml`: - -* Project ID: `spectrum-glossary` -* Path: `docs/spectrum-glossary` -* Dependencies: `design-system-registry` - -## 📋 Registry Content Breakdown - -| Registry | Terms | Enhanced | Description | -| -------------------- | ------- | -------- | --------------------------------------------------- | -| **sizes** | 24 | 0 | Size values (xs, s, m, l, xl, 50-1500) | -| **states** | 10 | 3 | Interaction states (default, hover, keyboard-focus) | -| **variants** | 24 | 0 | Color/style variants (accent, negative, colors) | -| **anatomyTerms** | 24 | 0 | Component anatomy (edge, visual, text, control) | -| **components** | 54 | 0 | Spectrum component names | -| **scaleValues** | 12 | 0 | Numeric scale values (50-1000) | -| **categories** | 8 | 0 | Component categories | -| **platforms** | 5 | 0 | Platform names (desktop, mobile, web, iOS, Android) | -| **navigationTerms** | 7 | 7 | Navigation-specific terms | -| **tokenTerminology** | 6 | 6 | Token-specific terms | -| **glossary** | 5 | 5 | General design system terms | -| **TOTAL** | **179** | **21** | | - -## 🎯 Success Criteria - All Met ✅ - -* ✅ All 179 terms have generated pages -* ✅ Search finds relevant terms < 500ms -* ✅ WCAG 2.1 AA compliant (semantic HTML, ARIA labels, keyboard nav) -* ✅ Mobile responsive (breakpoint at 768px) -* ✅ Loads in < 2 seconds (static HTML, optimized assets) -* ✅ Build completes successfully via moon -* ✅ All tests passing (registry validation) -* ✅ Documentation complete (README, CHANGELOG, this summary) - -## 🔗 Integration Points - -### 1. Design System Registry Package - -* Source: `packages/design-system-registry` -* Consumed via: `import * as registry from '@adobe/design-system-registry'` -* Used in: Data loading, API generation, search index - -### 2. Future Integrations (Planned) - -* **Component Options Editor**: Help links to glossary term pages -* **Token Validation**: Comments linking to glossary definitions -* **MCP Server**: Tools directing users to glossary URLs -* **Documentation**: README files referencing glossary - -## 🐛 Known Issues & Limitations - -### None Critical - -All major features are working as expected. - -### Minor Notes - -* Platform extensions currently only have 2 platforms (iOS, Web Components) -* Some terms don't have enhanced definitions yet (21/179) -* Search is client-side only (acceptable for 179 terms) - -## 📝 Next Steps (Phase 4-6) - -As outlined in the RFC and GitHub issues: - -1. **Phase 4**: MCP Server Integration ([#663](https://github.com/adobe/spectrum-design-data/issues/663)) - * Add glossary tools to `tools/spectrum-design-data-mcp` - * Expose static API endpoints - * Enable AI assistant access - -2. **Phase 5**: Content QA & Review ([#664](https://github.com/adobe/spectrum-design-data/issues/664)) - * Review enhanced definitions - * Add more platform extensions - * Validate terminology consistency - -3. **Phase 6**: Integration & Rollout ([#665](https://github.com/adobe/spectrum-design-data/issues/665)) - * Update Component Options Editor - * Integrate with token validation - * Community announcement - * Training materials - -## 📚 Documentation - -* **README.md**: User-facing documentation -* **CHANGELOG.md**: Version history -* **AUTHORING.md**: (in registry package) Content authoring guide -* **PLATFORM\_EXTENSIONS.md**: (in registry package) Platform extension guide -* **This file**: Technical build summary - -## 🎉 Conclusion - -The Spectrum Design System Glossary web viewer is **fully implemented and functional**. All planned features for Phase 3 have been completed, tested, and are ready for deployment to GitHub Pages. - -**Build Status**: ✅ SUCCESS\ -**Test Status**: ✅ PASSING\ -**Deployment**: ⏳ READY (awaiting PR merge) - -*** - -Generated: 2026-01-13\ -Build Time: \~20 minutes (implementation)\ -Files Created: 40+ source files, 726 output files diff --git a/docs/spectrum-glossary/CHANGELOG.md b/docs/spectrum-glossary/CHANGELOG.md deleted file mode 100644 index da6a4933..00000000 --- a/docs/spectrum-glossary/CHANGELOG.md +++ /dev/null @@ -1,96 +0,0 @@ -# Changelog - -## 2.0.0 - -### Major Changes - -- [#660](https://github.com/adobe/spectrum-design-data/pull/660) [`4051014`](https://github.com/adobe/spectrum-design-data/commit/4051014951c5c68c01b69be5ee156b4fc8fe98ed) Thanks [@GarthDB](https://github.com/GarthDB)! - feat(docs): add Spectrum Design System Glossary web viewer - - Comprehensive, searchable web interface for browsing Spectrum Design System - terminology with 179 terms across 11 registries. - - **Key Features:** - - Full-text search with Fuse.js and advanced filters - - 21 enhanced definitions with platform-specific variations - - Static JSON API for programmatic access - - Dark mode, mobile responsive, WCAG 2.1 AA compliant - - Built with 11ty + Spectrum Web Components - - Integrated into main docs deployment workflow - - **URL:** https://adobe.github.io/spectrum-design-data/glossary/ - -### Patch Changes - -- Updated dependencies [[`4051014`](https://github.com/adobe/spectrum-design-data/commit/4051014951c5c68c01b69be5ee156b4fc8fe98ed)]: - - @adobe/design-system-registry@1.1.0 - -All notable changes to the Spectrum Design System Glossary will be documented in this file. - -## [1.0.0] - 2026-01-13 - -### Added - -- Initial release of the Spectrum Design System Glossary -- 179 terms across 11 registries -- 21 enhanced definitions with superordinates and essential characteristics -- Platform-specific terminology for iOS, Web Components, Android, and more -- Full-text search with fuzzy matching using Fuse.js -- Advanced filters by registry, platform, status, and usage -- Static JSON API for programmatic access -- Dark mode support with theme switcher -- Mobile responsive design -- WCAG 2.1 AA compliant accessibility -- Individual term detail pages with rich metadata -- Category browsing pages -- Related terms navigation -- Export functionality (JSON) -- GitHub Pages deployment - -### Features - -#### Core Functionality - -- Searchable interface with real-time results -- Keyboard shortcuts (⌘K / Ctrl+K for search) -- Category-based navigation -- Alphabet navigation for long lists - -#### Term Detail Pages - -- Comprehensive definitions with superordinates -- Essential characteristics lists -- Platform variations with tabs -- Terminology metadata (concept type, naming rationale) -- Sources and references -- Governance information -- Related terms suggestions - -#### Static JSON API - -- `/api/v1/glossary.json` - All terms -- `/api/v1/search-index.json` - Optimized search index -- `/api/v1/terms/{termId}.json` - Individual term data -- `/api/v1/categories/{category}.json` - Terms by category -- `/api/v1/platforms/{platform}.json` - Terms by platform -- `/api/v1/stats.json` - Usage statistics - -#### Developer Experience - -- 11ty static site generation -- Spectrum Web Components integration -- ES modules support -- Moon monorepo task management -- Fast builds and hot reload - -### Technical Stack - -- **Static Site Generator**: 11ty (Eleventy) v3.0.0 -- **UI Components**: Spectrum Web Components v0.49.0 -- **Styling**: Spectrum CSS with custom theme support -- **Search**: Fuse.js v7.0.0 for client-side fuzzy search -- **Templating**: Nunjucks -- **Deployment**: GitHub Pages via GitHub Actions - -### Related Packages - -- `@adobe/design-system-registry@1.0.0` - Source data for the glossary diff --git a/docs/spectrum-glossary/DEPLOYMENT_INTEGRATION.md b/docs/spectrum-glossary/DEPLOYMENT_INTEGRATION.md deleted file mode 100644 index 76ec780a..00000000 --- a/docs/spectrum-glossary/DEPLOYMENT_INTEGRATION.md +++ /dev/null @@ -1,140 +0,0 @@ -# Glossary Deployment Integration - -## Summary - -The Spectrum Design System Glossary has been integrated into the main documentation deployment workflow, allowing it to be deployed to GitHub Pages alongside other doc sites. - -## Changes Made - -### 1. Added Export Task to `moon.yml` - -```yaml -export: - command: ./scripts/export-to-site.sh - deps: - - ~:build - platform: system - outputs: - - /site/glossary/ -``` - -This task exports the built glossary from `dist/` to `../../site/glossary/` for GitHub Pages deployment. - -### 2. Created Export Script - -**File**: `scripts/export-to-site.sh` - -```bash -#!/bin/sh -set -e - -# Create site directory structure -mkdir -p ../../site -rm -rf ../../site/glossary -mkdir -p ../../site/glossary - -# Copy built files -cp -r dist/* ../../site/glossary/ - -echo "✓ Exported glossary to site/glossary/" -``` - -This script safely creates the target directory and copies all built files. - -### 3. Updated Docs Deployment Workflow - -**File**: `.github/workflows/deploy-docs.yml` - -Added one line after the other doc builds: - -```yaml -- run: moon run spectrum-glossary:export -``` - -This integrates the glossary into the existing deployment pipeline that builds: - -* site (Next.js docs) -* visualizer -* s2-visualizer -* viewer (s2-tokens-viewer) -* release-timeline -* **glossary** (NEW) - -### 4. Removed Separate Workflow - -**Deleted**: `.github/workflows/deploy-glossary.yml` - -No longer needed since the glossary is now part of the main docs deployment. - -## Deployment Flow - -```mermaid -graph LR - A[Push to main] --> B[deploy-docs.yml triggered] - B --> C[Build all doc sites] - C --> D[moon run spectrum-glossary:export] - D --> E[Copy to site/glossary/] - E --> F[Upload site/ to GitHub Pages] - F --> G[Deploy to adobe.github.io] -``` - -## Testing - -Successfully tested the export task: - -```bash -$ cd /Users/garthdb/Spectrum/spectrum-design-data -$ moon run spectrum-glossary:export - -▪▪▪▪ spectrum-glossary:build (2s 880ms) -▪▪▪▪ spectrum-glossary:export (1s 296ms) -✓ Exported glossary to site/glossary/ - -Tasks: 2 completed -Time: 8s 391ms -``` - -**Verification**: - -* 726 files exported to `site/glossary/` -* Includes all HTML pages, assets, and API endpoints -* Directory structure preserved - -## URLs - -After deployment, the glossary will be accessible at: - -* **Homepage**: -* **Terms**: -* **Categories**: -* **API**: - -## Benefits - -1. **Unified Deployment**: All docs deploy together, reducing complexity -2. **Consistent Workflow**: Uses same CI/CD pipeline as other doc sites -3. **Automatic Updates**: Deploys whenever registry or glossary changes -4. **Single Pages Configuration**: No need to manage multiple GitHub Pages deployments - -## Deployment Triggers - -The glossary will be deployed when: - -1. **Push to main**: Any changes to the repository -2. **After Release**: Automatically after the Release workflow completes -3. **Manual**: Via workflow\_dispatch in GitHub Actions UI - -## Next Steps - -Once this PR is merged: - -1. The workflow will automatically deploy the glossary on next push to main -2. The glossary will be accessible at the GitHub Pages URL -3. Future updates to the registry or glossary will automatically redeploy - -*** - -**Status**: ✅ Ready for deployment\ -**Last Updated**: 2026-01-13\ -**Moon Integration**: Complete\ -**CI/CD Integration**: Complete diff --git a/docs/spectrum-glossary/README.md b/docs/spectrum-glossary/README.md deleted file mode 100644 index 8147810b..00000000 --- a/docs/spectrum-glossary/README.md +++ /dev/null @@ -1,111 +0,0 @@ -# Spectrum Design System Glossary - -A searchable, accessible web interface for browsing the Spectrum Design System terminology and definitions. - -## Features - -* **179 Terms** across 11 registries -* **Enhanced Definitions** with superordinates and essential characteristics -* **Platform Extensions** showing iOS, Web, Android-specific terminology -* **Full-Text Search** with fuzzy matching -* **Advanced Filters** by registry, platform, status, and usage -* **Static JSON API** for programmatic access -* **Dark Mode Support** with theme switcher -* **Mobile Responsive** design -* **WCAG 2.1 AA Compliant** accessibility - -## Development - -### Install Dependencies - -```bash -pnpm install -``` - -### Start Development Server - -```bash -pnpm start -``` - -Open to view the glossary. - -### Build for Production - -```bash -pnpm build -``` - -This will: - -1. Generate static JSON API (`build:api`) -2. Build search index (`build:search`) -3. Generate static HTML pages (`build:eleventy`) - -Output is in `dist/` directory. - -## Architecture - -**Stack**: - -* **11ty** (Eleventy) for static site generation -* **Spectrum Web Components** for interactive UI -* **Spectrum CSS** for styling -* **Fuse.js** for client-side search -* **Nunjucks** for templating - -**Directory Structure**: - -``` -docs/spectrum-glossary/ -├── src/ -│ ├── _data/ # Data files (registry, meta, navigation) -│ ├── _includes/ # Templates and components -│ ├── assets/ # CSS and JavaScript -│ ├── index.njk # Homepage -│ ├── terms/ # Term detail pages -│ └── categories/ # Category listing pages -├── scripts/ # Build scripts -├── .eleventy.js # 11ty configuration -└── dist/ # Build output -``` - -## Deployment - -The glossary is automatically deployed to GitHub Pages when changes are pushed to `main`: - -**URL**: - -See `.github/workflows/deploy-glossary.yml` for the deployment workflow. - -## Content Management - -Glossary content is managed in the `@adobe/design-system-registry` package: - -``` -packages/design-system-registry/ -├── registry/ -│ ├── states.json -│ ├── sizes.json -│ ├── variants.json -│ └── ... -└── schemas/ - └── registry-value.json -``` - -See [Design System Registry README](../../packages/design-system-registry/README.md) for content authoring guidelines. - -## API Endpoints - -The glossary generates a static JSON API: - -* `/api/v1/glossary.json` - All terms -* `/api/v1/search-index.json` - Search index -* `/api/v1/terms/{termId}.json` - Individual term -* `/api/v1/categories/{category}.json` - Terms by category -* `/api/v1/platforms/{platform}.json` - Terms by platform -* `/api/v1/stats.json` - Statistics - -## License - -Apache-2.0 © Adobe diff --git a/docs/spectrum-glossary/moon.yml b/docs/spectrum-glossary/moon.yml deleted file mode 100644 index 43360a83..00000000 --- a/docs/spectrum-glossary/moon.yml +++ /dev/null @@ -1,48 +0,0 @@ -$schema: "https://moonrepo.dev/schemas/project.json" - -type: application -language: javascript -platform: node - -fileGroups: - sources: - - "src/**/*" - assets: - - "src/assets/**/*" - scripts: - - "scripts/**/*" - configs: - - ".eleventy.js" - - "package.json" - -tasks: - build: - command: pnpm build - platform: node - env: - BASE_PATH: "/spectrum-design-data/glossary" - inputs: - - "@group(sources)" - - "@group(assets)" - - "@group(scripts)" - - "@group(configs)" - - "~:design-system-registry" - # Don't cache dist as output - export task needs it to persist - - export: - command: ./scripts/export-to-site.sh - deps: - - ~:build - platform: system - local: true # Only needed for deploy-docs workflow, not CI - outputs: - - /site/glossary/ - - dev: - command: pnpm start - platform: node - local: true - - clean: - command: pnpm clean - platform: node diff --git a/docs/spectrum-glossary/package.json b/docs/spectrum-glossary/package.json deleted file mode 100644 index 5ac46746..00000000 --- a/docs/spectrum-glossary/package.json +++ /dev/null @@ -1,43 +0,0 @@ -{ - "name": "spectrum-glossary", - "version": "2.0.0", - "private": true, - "type": "module", - "repository": { - "type": "git", - "url": "git+https://github.com/adobe/spectrum-design-data.git" - }, - "license": "Apache-2.0", - "bugs": { - "url": "https://github.com/adobe/spectrum-design-data/issues" - }, - "homepage": "https://github.com/adobe/spectrum-design-data/tree/main/docs/spectrum-glossary#readme", - "scripts": { - "clean": "rimraf dist .cache", - "build:api": "node scripts/build-api.js", - "build:search": "node scripts/build-search-index.js", - "build:eleventy": "eleventy", - "build:copy-api": "mkdir -p dist/api && cp -r dist/api dist/api || true", - "build": "pnpm build:api && pnpm build:search && pnpm build:eleventy", - "start": "pnpm build:api && pnpm build:search && eleventy --serve", - "deploy": "pnpm build" - }, - "dependencies": { - "@adobe/design-system-registry": "workspace:*", - "@11ty/eleventy": "^3.0.0", - "@spectrum-web-components/theme": "^0.49.0", - "@spectrum-web-components/search": "^0.49.0", - "@spectrum-web-components/button": "^0.49.0", - "@spectrum-web-components/tabs": "^0.49.0", - "@spectrum-web-components/tooltip": "^0.49.0", - "@spectrum-web-components/action-button": "^0.49.0", - "@spectrum-css/tokens": "^15.0.0", - "fuse.js": "^7.0.0", - "prism-themes": "^1.9.0", - "markdown-it": "^14.0.0", - "markdown-it-prism": "^2.3.0" - }, - "devDependencies": { - "rimraf": "^6.0.0" - } -} diff --git a/docs/spectrum-glossary/scripts/build-api.js b/docs/spectrum-glossary/scripts/build-api.js deleted file mode 100644 index 2d17ee21..00000000 --- a/docs/spectrum-glossary/scripts/build-api.js +++ /dev/null @@ -1,224 +0,0 @@ -#!/usr/bin/env node - -/** - * Build Static JSON API - * Generates JSON files for all terms, categories, and platforms - */ - -import * as registry from "@adobe/design-system-registry"; -import { mkdir, writeFile } from "node:fs/promises"; -import { join } from "node:path"; -import { fileURLToPath } from "node:url"; -import { dirname } from "node:path"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); -const API_DIR = join(__dirname, "..", "dist", "api", "v1"); - -// Ensure API directory exists -async function ensureDir(dir) { - try { - await mkdir(dir, { recursive: true }); - } catch (error) { - if (error.code !== "EEXIST") throw error; - } -} - -// Get all terms from all registries -function getAllTerms() { - const allTerms = []; - const registryTypes = [ - "sizes", - "states", - "variants", - "anatomyTerms", - "components", - "scaleValues", - "categories", - "platforms", - "navigationTerms", - "tokenTerminology", - "glossary", - ]; - - registryTypes.forEach((type) => { - const data = registry[type]; - if (data && data.values) { - data.values.forEach((term) => { - allTerms.push({ - ...term, - registryType: type, - registryLabel: data.label || type, - }); - }); - } - }); - - return allTerms; -} - -// Generate main glossary file -async function generateGlossary(allTerms) { - const glossaryPath = join(API_DIR, "glossary.json"); - await writeFile(glossaryPath, JSON.stringify(allTerms, null, 2)); - console.log(`✓ Generated glossary.json (${allTerms.length} terms)`); -} - -// Generate individual term files -async function generateTermFiles(allTerms) { - const termsDir = join(API_DIR, "terms"); - await ensureDir(termsDir); - - for (const term of allTerms) { - const termPath = join(termsDir, `${term.id}.json`); - await writeFile(termPath, JSON.stringify(term, null, 2)); - } - - console.log(`✓ Generated ${allTerms.length} term files`); -} - -// Generate category files -async function generateCategoryFiles() { - const categoriesDir = join(API_DIR, "categories"); - await ensureDir(categoriesDir); - - const registryTypes = { - sizes: registry.sizes, - states: registry.states, - variants: registry.variants, - anatomyTerms: registry.anatomyTerms, - components: registry.components, - scaleValues: registry.scaleValues, - categories: registry.categories, - platforms: registry.platforms, - navigationTerms: registry.navigationTerms, - tokenTerminology: registry.tokenTerminology, - glossary: registry.glossary, - }; - - let count = 0; - for (const [id, data] of Object.entries(registryTypes)) { - const categoryData = { - id, - label: data.label || id, - description: data.description || "", - terms: data.values || [], - }; - - const categoryPath = join(categoriesDir, `${id}.json`); - await writeFile(categoryPath, JSON.stringify(categoryData, null, 2)); - count++; - } - - console.log(`✓ Generated ${count} category files`); -} - -// Generate platform files -async function generatePlatformFiles(allTerms) { - const platformsDir = join(API_DIR, "platforms"); - await ensureDir(platformsDir); - - // Group terms by platform - const platformTerms = {}; - - allTerms.forEach((term) => { - if (term.platforms) { - Object.keys(term.platforms).forEach((platformKey) => { - if (!platformTerms[platformKey]) { - platformTerms[platformKey] = []; - } - platformTerms[platformKey].push({ - ...term, - platformData: term.platforms[platformKey], - }); - }); - } - }); - - let count = 0; - for (const [platformKey, terms] of Object.entries(platformTerms)) { - const platformPath = join(platformsDir, `${platformKey}.json`); - await writeFile(platformPath, JSON.stringify(terms, null, 2)); - count++; - } - - console.log(`✓ Generated ${count} platform files`); -} - -// Generate stats file -async function generateStats(allTerms) { - const enhancedTerms = allTerms.filter((t) => t.definition); - const platformCount = new Set(); - - allTerms.forEach((term) => { - if (term.platforms) { - Object.keys(term.platforms).forEach((p) => platformCount.add(p)); - } - }); - - const stats = { - totalTerms: allTerms.length, - enhancedTerms: enhancedTerms.length, - registries: 11, - platforms: platformCount.size, - lastUpdated: new Date().toISOString(), - byRegistry: {}, - }; - - // Count by registry - const registryTypes = [ - "sizes", - "states", - "variants", - "anatomyTerms", - "components", - "scaleValues", - "categories", - "platforms", - "navigationTerms", - "tokenTerminology", - "glossary", - ]; - - registryTypes.forEach((type) => { - const data = registry[type]; - if (data && data.values) { - stats.byRegistry[type] = { - label: data.label || type, - count: data.values.length, - }; - } - }); - - const statsPath = join(API_DIR, "stats.json"); - await writeFile(statsPath, JSON.stringify(stats, null, 2)); - console.log("✓ Generated stats.json"); -} - -// Main build function -async function build() { - console.log("Building static JSON API...\n"); - - try { - // Ensure API directory exists - await ensureDir(API_DIR); - - // Get all terms - const allTerms = getAllTerms(); - - // Generate all API files - await generateGlossary(allTerms); - await generateTermFiles(allTerms); - await generateCategoryFiles(); - await generatePlatformFiles(allTerms); - await generateStats(allTerms); - - console.log("\n✅ API build complete!"); - } catch (error) { - console.error("❌ API build failed:", error); - process.exit(1); - } -} - -// Run build -build(); diff --git a/docs/spectrum-glossary/scripts/build-search-index.js b/docs/spectrum-glossary/scripts/build-search-index.js deleted file mode 100644 index 85956f68..00000000 --- a/docs/spectrum-glossary/scripts/build-search-index.js +++ /dev/null @@ -1,135 +0,0 @@ -#!/usr/bin/env node - -/** - * Build Search Index - * Generates optimized search index for Fuse.js - */ - -import * as registry from "@adobe/design-system-registry"; -import { mkdir, writeFile } from "node:fs/promises"; -import { join } from "node:path"; -import { fileURLToPath } from "node:url"; -import { dirname } from "node:path"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); -const API_DIR = join(__dirname, "..", "dist", "api", "v1"); - -// Ensure API directory exists -async function ensureDir(dir) { - try { - await mkdir(dir, { recursive: true }); - } catch (error) { - if (error.code !== "EEXIST") throw error; - } -} - -// Get all terms from all registries -function getAllTerms() { - const allTerms = []; - const registryTypes = [ - "sizes", - "states", - "variants", - "anatomyTerms", - "components", - "scaleValues", - "categories", - "platforms", - "navigationTerms", - "tokenTerminology", - "glossary", - ]; - - registryTypes.forEach((type) => { - const data = registry[type]; - if (data && data.values) { - data.values.forEach((term) => { - allTerms.push({ - ...term, - registryType: type, - registryLabel: data.label || type, - }); - }); - } - }); - - return allTerms; -} - -// Build search index with optimized data -function buildSearchIndex(allTerms) { - return allTerms.map((term) => { - // Extract platform-specific terms for search - const platformTerms = []; - if (term.platforms) { - Object.entries(term.platforms).forEach(([platform, data]) => { - if (data.term) { - platformTerms.push(`${platform}: ${data.term}`); - } - }); - } - - return { - id: term.id, - label: term.label || term.id, - description: term.description || "", - definition: term.definition - ? { - superordinate: term.definition.superordinate || "", - description: term.definition.description || "", - } - : null, - aliases: term.aliases || [], - registryType: term.registryType, - registryLabel: term.registryLabel, - platformTerms: platformTerms, - usedIn: term.usedIn || [], - // Include searchable text for better matching - searchText: [ - term.id, - term.label || term.id, - term.description || "", - term.definition?.description || "", - term.definition?.superordinate || "", - ...(term.aliases || []), - ...platformTerms, - ] - .filter(Boolean) - .join(" ") - .toLowerCase(), - }; - }); -} - -// Main build function -async function build() { - console.log("Building search index...\n"); - - try { - // Ensure API directory exists - await ensureDir(API_DIR); - - // Get all terms - const allTerms = getAllTerms(); - console.log(`Processing ${allTerms.length} terms...`); - - // Build search index - const searchIndex = buildSearchIndex(allTerms); - - // Write search index - const indexPath = join(API_DIR, "search-index.json"); - await writeFile(indexPath, JSON.stringify(searchIndex, null, 2)); - - console.log( - `✓ Generated search-index.json (${searchIndex.length} entries)`, - ); - console.log("\n✅ Search index build complete!"); - } catch (error) { - console.error("❌ Search index build failed:", error); - process.exit(1); - } -} - -// Run build -build(); diff --git a/docs/spectrum-glossary/scripts/export-to-site.sh b/docs/spectrum-glossary/scripts/export-to-site.sh deleted file mode 100755 index 130387e7..00000000 --- a/docs/spectrum-glossary/scripts/export-to-site.sh +++ /dev/null @@ -1,15 +0,0 @@ -#!/bin/sh - -# Export glossary to site directory for GitHub Pages deployment - -set -e - -# Create site directory structure -mkdir -p ../../site -rm -rf ../../site/glossary -mkdir -p ../../site/glossary - -# Copy built files -cp -r dist/* ../../site/glossary/ - -echo "✓ Exported glossary to site/glossary/" diff --git a/docs/spectrum-glossary/src/_data/basePath.js b/docs/spectrum-glossary/src/_data/basePath.js deleted file mode 100644 index e89e1d79..00000000 --- a/docs/spectrum-glossary/src/_data/basePath.js +++ /dev/null @@ -1,3 +0,0 @@ -// Base path for GitHub Pages deployment -// Set via environment variable BASE_PATH or default to empty string for local dev -export default process.env.BASE_PATH || ""; diff --git a/docs/spectrum-glossary/src/_data/meta.js b/docs/spectrum-glossary/src/_data/meta.js deleted file mode 100644 index efe514fe..00000000 --- a/docs/spectrum-glossary/src/_data/meta.js +++ /dev/null @@ -1,11 +0,0 @@ -export default { - title: "Spectrum Design System Glossary", - description: - "A comprehensive glossary of Spectrum Design System terminology, including component states, sizes, variants, and platform-specific terms.", - url: "https://adobe.github.io/spectrum-design-data/glossary", - author: "Adobe Spectrum Team", - language: "en", - locale: "en_US", - repository: "https://github.com/adobe/spectrum-design-data", - version: "1.0.0", -}; diff --git a/docs/spectrum-glossary/src/_data/navigation.js b/docs/spectrum-glossary/src/_data/navigation.js deleted file mode 100644 index 810bd2fd..00000000 --- a/docs/spectrum-glossary/src/_data/navigation.js +++ /dev/null @@ -1,36 +0,0 @@ -export default [ - { - label: "Home", - url: "/", - icon: "home", - }, - { - label: "Categories", - url: "/categories/", - icon: "folder", - children: [ - { label: "States", url: "/categories/states/" }, - { label: "Sizes", url: "/categories/sizes/" }, - { label: "Variants", url: "/categories/variants/" }, - { label: "Anatomy Terms", url: "/categories/anatomyTerms/" }, - { label: "Components", url: "/categories/components/" }, - { label: "Scale Values", url: "/categories/scaleValues/" }, - { label: "Platforms", url: "/categories/platforms/" }, - { label: "Navigation Terms", url: "/categories/navigationTerms/" }, - { label: "Token Terminology", url: "/categories/tokenTerminology/" }, - { label: "Glossary", url: "/categories/glossary/" }, - ], - }, - { - label: "API", - url: "/api/v1/glossary.json", - icon: "code", - external: true, - }, - { - label: "GitHub", - url: "https://github.com/adobe/spectrum-design-data", - icon: "github", - external: true, - }, -]; diff --git a/docs/spectrum-glossary/src/_data/registry.js b/docs/spectrum-glossary/src/_data/registry.js deleted file mode 100644 index ed61a86d..00000000 --- a/docs/spectrum-glossary/src/_data/registry.js +++ /dev/null @@ -1,69 +0,0 @@ -import * as registry from "@adobe/design-system-registry"; - -function getAllTerms() { - const allTerms = []; - const registryTypes = [ - "sizes", - "states", - "variants", - "anatomyTerms", - "components", - "scaleValues", - "categories", - "platforms", - "navigationTerms", - "tokenTerminology", - "glossary", - ]; - - registryTypes.forEach((type) => { - const data = registry[type]; - if (data && data.values) { - data.values.forEach((term) => { - allTerms.push({ - ...term, - registryType: type, - registryLabel: data.label || type, - }); - }); - } - }); - - return allTerms; -} - -function getEnhancedTerms() { - return getAllTerms().filter((t) => t.definition); -} - -function getStats() { - const allTerms = getAllTerms(); - const enhancedTerms = getEnhancedTerms(); - - return { - totalTerms: allTerms.length, - enhancedTerms: enhancedTerms.length, - registries: 11, - platforms: registry.platforms?.values?.length || 0, - lastUpdated: new Date().toISOString(), - }; -} - -export default { - sizes: registry.sizes, - states: registry.states, - variants: registry.variants, - anatomyTerms: registry.anatomyTerms, - components: registry.components, - scaleValues: registry.scaleValues, - categories: registry.categories, - platforms: registry.platforms, - navigationTerms: registry.navigationTerms, - tokenTerminology: registry.tokenTerminology, - glossary: registry.glossary, - - // Helper functions - allTerms: getAllTerms(), - enhancedTerms: getEnhancedTerms(), - stats: getStats(), -}; diff --git a/docs/spectrum-glossary/src/_includes/components/footer.njk b/docs/spectrum-glossary/src/_includes/components/footer.njk deleted file mode 100644 index d8ab50ba..00000000 --- a/docs/spectrum-glossary/src/_includes/components/footer.njk +++ /dev/null @@ -1,30 +0,0 @@ - diff --git a/docs/spectrum-glossary/src/_includes/components/header.njk b/docs/spectrum-glossary/src/_includes/components/header.njk deleted file mode 100644 index c273cb87..00000000 --- a/docs/spectrum-glossary/src/_includes/components/header.njk +++ /dev/null @@ -1,34 +0,0 @@ -
    -
    -
    - - -

    Spectrum Glossary

    -     -
    - - - -
    - - - - - - -
    -
    -
    diff --git a/docs/spectrum-glossary/src/_includes/components/related-terms.njk b/docs/spectrum-glossary/src/_includes/components/related-terms.njk deleted file mode 100644 index dfe3af1b..00000000 --- a/docs/spectrum-glossary/src/_includes/components/related-terms.njk +++ /dev/null @@ -1,22 +0,0 @@ -{% macro relatedTerms(termIds, allTerms) %} -{% if termIds and termIds.length > 0 %} -
    -

    Related Terms

    -
    - {% for termId in termIds %} - {% set relatedTerm = allTerms | termById(termId) %} - {% if relatedTerm %} - -
    - {{ relatedTerm.label or relatedTerm.id }} - {% if relatedTerm.description %} -

    {{ relatedTerm.description | truncate(80) }}

    - {% endif %} -
    -     - {% endif %} - {% endfor %} -
    -
    -{% endif %} -{% endmacro %} diff --git a/docs/spectrum-glossary/src/_includes/components/search.njk b/docs/spectrum-glossary/src/_includes/components/search.njk deleted file mode 100644 index 7955dcb1..00000000 --- a/docs/spectrum-glossary/src/_includes/components/search.njk +++ /dev/null @@ -1,11 +0,0 @@ -
    - - - -
    diff --git a/docs/spectrum-glossary/src/_includes/components/term-card.njk b/docs/spectrum-glossary/src/_includes/components/term-card.njk deleted file mode 100644 index 05e246c1..00000000 --- a/docs/spectrum-glossary/src/_includes/components/term-card.njk +++ /dev/null @@ -1,42 +0,0 @@ -{% macro termCard(term) %} -
    -
    -

    {{ term.label or term.id }}

    -
    - {% if term.default %} - Default - {% endif %} - {% if term.definition %} - Enhanced - {% endif %} - {% if term.governance and term.governance.status %} - {{ term.governance.status }} - {% endif %} -
    -
    - -
    - {% if term.definition and term.definition.description %} -

    {{ term.definition.description }}

    - {% elif term.description %} -

    {{ term.description }}

    - {% endif %} - - {% if term.usedIn and term.usedIn.length > 0 %} -
    - Used in: - {% for use in term.usedIn %} - {{ use }} - {% endfor %} -
    - {% endif %} -
    - -
    - {{ term.registryLabel or term.registryType }} - {% if term.platforms %} - {{ term.platforms | length }} platforms - {% endif %} -
    -
    -{% endmacro %} diff --git a/docs/spectrum-glossary/src/_includes/layouts/base.njk b/docs/spectrum-glossary/src/_includes/layouts/base.njk deleted file mode 100644 index 525c6383..00000000 --- a/docs/spectrum-glossary/src/_includes/layouts/base.njk +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - {{ title }} | {{ meta.title }} - - - - - - - - - - - - - - - - - - - - - - {% include "components/header.njk" %} - -
    - {{ content | safe }} -
    - - {% include "components/footer.njk" %} -     - - - {% block scripts %}{% endblock %} - - diff --git a/docs/spectrum-glossary/src/assets/css/index.css b/docs/spectrum-glossary/src/assets/css/index.css deleted file mode 100644 index 68c77694..00000000 --- a/docs/spectrum-glossary/src/assets/css/index.css +++ /dev/null @@ -1,826 +0,0 @@ -/* Spectrum Design System Glossary Styles */ - -@import url('https://fonts.googleapis.com/css2?family=Adobe+Clean:wght@400;600;700&display=swap'); - -:root { - /* Spacing */ - --spectrum-spacing-100: 4px; - --spectrum-spacing-200: 8px; - --spectrum-spacing-300: 12px; - --spectrum-spacing-400: 16px; - --spectrum-spacing-500: 24px; - --spectrum-spacing-600: 32px; - --spectrum-spacing-700: 48px; - - /* Colors - Light Theme */ - --spectrum-gray-50: #ffffff; - --spectrum-gray-75: #fafafa; - --spectrum-gray-100: #f5f5f5; - --spectrum-gray-200: #e1e1e1; - --spectrum-gray-300: #cacaca; - --spectrum-gray-400: #b3b3b3; - --spectrum-gray-500: #8e8e8e; - --spectrum-gray-600: #6e6e6e; - --spectrum-gray-700: #4b4b4b; - --spectrum-gray-800: #2c2c2c; - --spectrum-gray-900: #1a1a1a; - - --spectrum-accent-color: #0265dc; - --spectrum-accent-hover: #0257bf; - --spectrum-accent-content-color: var(--spectrum-accent-color); - - /* Typography */ - --spectrum-font-family: 'Adobe Clean', system-ui, -apple-system, sans-serif; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - - /* Border Radius */ - --spectrum-corner-radius-75: 2px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - - /* Shadows */ - --spectrum-drop-shadow-y: 0 2px 8px rgba(0, 0, 0, 0.1); - --spectrum-drop-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15); -} - -/* Dark Theme Overrides */ -.spectrum--dark { - --spectrum-gray-50: #1a1a1a; - --spectrum-gray-75: #1e1e1e; - --spectrum-gray-100: #222222; - --spectrum-gray-200: #2c2c2c; - --spectrum-gray-300: #393939; - --spectrum-gray-400: #4a4a4a; - --spectrum-gray-500: #6e6e6e; - --spectrum-gray-600: #909090; - --spectrum-gray-700: #b9b9b9; - --spectrum-gray-800: #e3e3e3; - --spectrum-gray-900: #ffffff; - - --spectrum-accent-color: #378ef0; - --spectrum-accent-hover: #5aa3f5; -} - -/* Base Styles */ -* { - box-sizing: border-box; -} - -html { - font-family: var(--spectrum-font-family); - font-size: var(--spectrum-font-size-100); - line-height: 1.6; - color: var(--spectrum-gray-800); - background-color: var(--spectrum-gray-50); -} - -body { - margin: 0; - padding: 0; -} - -a { - color: var(--spectrum-accent-color); - text-decoration: none; - transition: color 0.2s; -} - -a:hover { - color: var(--spectrum-accent-hover); - text-decoration: underline; -} - -h1, h2, h3, h4, h5, h6 { - color: var(--spectrum-gray-900); - margin-top: 0; -} - -h1 { - font-size: var(--spectrum-font-size-800); - font-weight: 700; - line-height: 1.2; -} - -h2 { - font-size: var(--spectrum-font-size-600); - font-weight: 600; - margin-bottom: var(--spectrum-spacing-400); -} - -h3 { - font-size: var(--spectrum-font-size-400); - font-weight: 600; - margin-bottom: var(--spectrum-spacing-300); -} - -code { - font-family: 'Monaco', 'Courier New', monospace; - background-color: var(--spectrum-gray-100); - padding: 2px 6px; - border-radius: var(--spectrum-corner-radius-75); - font-size: var(--spectrum-font-size-75); -} - -pre { - background-color: var(--spectrum-gray-100); - padding: var(--spectrum-spacing-400); - border-radius: var(--spectrum-corner-radius-100); - overflow-x: auto; -} - -pre code { - background: none; - padding: 0; -} - -/* Header */ -.glossary-header { - background-color: var(--spectrum-gray-75); - border-bottom: 1px solid var(--spectrum-gray-200); - padding: var(--spectrum-spacing-400) var(--spectrum-spacing-500); -} - -.header-content { - max-width: 1400px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--spectrum-spacing-500); -} - -.logo-section { - display: flex; - align-items: center; - gap: var(--spectrum-spacing-300); -} - -.logo-link { - display: flex; - align-items: center; - gap: var(--spectrum-spacing-300); - text-decoration: none; -} - -.spectrum-logo { - color: var(--spectrum-accent-color); -} - -.logo-link h1 { - font-size: var(--spectrum-font-size-400); - margin: 0; - color: var(--spectrum-gray-900); -} - -.main-nav ul { - list-style: none; - display: flex; - gap: var(--spectrum-spacing-500); - margin: 0; - padding: 0; -} - -.main-nav a { - color: var(--spectrum-gray-700); - text-decoration: none; - font-weight: 500; -} - -.main-nav a:hover { - color: var(--spectrum-accent-color); -} - -.header-actions { - display: flex; - align-items: center; - gap: var(--spectrum-spacing-300); -} - -.theme-icon-dark { - display: none; -} - -.spectrum--dark .theme-icon-light { - display: none; -} - -.spectrum--dark .theme-icon-dark { - display: block; -} - -/* Container */ -.glossary-container { - max-width: 1400px; - margin: 0 auto; - padding: var(--spectrum-spacing-600) var(--spectrum-spacing-500); -} - -/* Hero Section */ -.hero-section { - text-align: center; - padding: var(--spectrum-spacing-700) 0; - border-bottom: 1px solid var(--spectrum-gray-200); - margin-bottom: var(--spectrum-spacing-600); -} - -.hero-section h1 { - font-size: var(--spectrum-font-size-900); - margin-bottom: var(--spectrum-spacing-400); -} - -.hero-description { - font-size: var(--spectrum-font-size-300); - color: var(--spectrum-gray-600); - max-width: 800px; - margin: 0 auto var(--spectrum-spacing-600); -} - -/* Search Section */ -.search-section { - max-width: 600px; - margin: 0 auto; -} - -.search-results { - margin-top: var(--spectrum-spacing-400); - background-color: var(--spectrum-gray-50); - border: 1px solid var(--spectrum-gray-200); - border-radius: var(--spectrum-corner-radius-100); - padding: var(--spectrum-spacing-400); -} - -.search-results-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--spectrum-spacing-300); -} - -.results-list { - max-height: 400px; - overflow-y: auto; -} - -/* Stats Section */ -.stats-section { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: var(--spectrum-spacing-400); - margin-bottom: var(--spectrum-spacing-700); -} - -.stat-card { - background-color: var(--spectrum-gray-75); - border: 1px solid var(--spectrum-gray-200); - border-radius: var(--spectrum-corner-radius-200); - padding: var(--spectrum-spacing-500); - text-align: center; -} - -.stat-number { - font-size: var(--spectrum-font-size-800); - font-weight: 700; - color: var(--spectrum-accent-color); - margin-bottom: var(--spectrum-spacing-200); -} - -.stat-label { - font-size: var(--spectrum-font-size-100); - color: var(--spectrum-gray-600); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* Category Grid */ -.categories-section, -.featured-terms-section { - margin-bottom: var(--spectrum-spacing-700); -} - -.category-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: var(--spectrum-spacing-400); -} - -.category-card { - background-color: var(--spectrum-gray-75); - border: 1px solid var(--spectrum-gray-200); - border-radius: var(--spectrum-corner-radius-100); - padding: var(--spectrum-spacing-500); - text-decoration: none; - transition: all 0.2s; - display: flex; - flex-direction: column; - gap: var(--spectrum-spacing-300); -} - -.category-card:hover { - transform: translateY(-2px); - box-shadow: var(--spectrum-drop-shadow-hover); - border-color: var(--spectrum-accent-color); -} - -.category-card h3 { - color: var(--spectrum-gray-900); - margin: 0; -} - -.category-card p { - color: var(--spectrum-gray-600); - margin: 0; - font-size: var(--spectrum-font-size-75); -} - -.category-count { - color: var(--spectrum-accent-color); - font-size: var(--spectrum-font-size-75); - font-weight: 600; - margin-top: auto; -} - -/* Terms Grid */ -.terms-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: var(--spectrum-spacing-400); - margin-bottom: var(--spectrum-spacing-500); -} - -/* Term Card */ -.term-card { - background-color: var(--spectrum-gray-75); - border: 1px solid var(--spectrum-gray-200); - border-radius: var(--spectrum-corner-radius-100); - padding: var(--spectrum-spacing-400); - transition: all 0.2s; - display: flex; - flex-direction: column; - gap: var(--spectrum-spacing-300); -} - -.term-card:hover { - transform: translateY(-2px); - box-shadow: var(--spectrum-drop-shadow-y); - border-color: var(--spectrum-accent-color); -} - -.term-card-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: var(--spectrum-spacing-300); -} - -.term-card h3 { - margin: 0; - font-size: var(--spectrum-font-size-300); -} - -.term-card h3 a { - color: var(--spectrum-gray-900); - text-decoration: none; -} - -.term-card h3 a:hover { - color: var(--spectrum-accent-color); -} - -.term-badges { - display: flex; - flex-wrap: wrap; - gap: var(--spectrum-spacing-200); -} - -.badge { - display: inline-block; - padding: 2px 8px; - border-radius: var(--spectrum-corner-radius-75); - font-size: var(--spectrum-font-size-50); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.badge-default { - background-color: var(--spectrum-accent-color); - color: white; -} - -.badge-enhanced { - background-color: #2d9d78; - color: white; -} - -.badge-status-approved { - background-color: #2d9d78; - color: white; -} - -.badge-status-draft { - background-color: var(--spectrum-gray-400); - color: white; -} - -.badge-status-deprecated { - background-color: #d7373f; - color: white; -} - -.badge-registry { - background-color: var(--spectrum-gray-200); - color: var(--spectrum-gray-700); -} - -.term-description { - color: var(--spectrum-gray-600); - margin: 0; - font-size: var(--spectrum-font-size-100); -} - -.term-usage { - display: flex; - flex-wrap: wrap; - gap: var(--spectrum-spacing-200); - align-items: center; - font-size: var(--spectrum-font-size-75); -} - -.usage-label { - color: var(--spectrum-gray-600); - font-weight: 600; -} - -.usage-badge { - background-color: var(--spectrum-gray-100); - padding: 2px 8px; - border-radius: var(--spectrum-corner-radius-75); - color: var(--spectrum-gray-700); -} - -.term-card-footer { - display: flex; - justify-content: space-between; - align-items: center; - font-size: var(--spectrum-font-size-75); - color: var(--spectrum-gray-500); - padding-top: var(--spectrum-spacing-200); - border-top: 1px solid var(--spectrum-gray-200); -} - -/* Term Detail Page */ -.term-detail { - max-width: 900px; - margin: 0 auto; -} - -.term-header { - margin-bottom: var(--spectrum-spacing-600); -} - -.term-title-section { - display: flex; - align-items: center; - gap: var(--spectrum-spacing-400); - margin-bottom: var(--spectrum-spacing-300); -} - -.term-id { - font-size: var(--spectrum-font-size-200); - color: var(--spectrum-gray-500); -} - -.definition-section, -.description-section, -.platforms-section, -.terminology-section { - margin-bottom: var(--spectrum-spacing-600); -} - -.definition-content { - background-color: var(--spectrum-gray-75); - padding: var(--spectrum-spacing-500); - border-radius: var(--spectrum-corner-radius-100); - border-left: 4px solid var(--spectrum-accent-color); -} - -.superordinate { - color: var(--spectrum-accent-color); - font-weight: 600; - text-transform: uppercase; - font-size: var(--spectrum-font-size-75); - letter-spacing: 0.05em; - margin-bottom: var(--spectrum-spacing-300); -} - -.definition-description { - font-size: var(--spectrum-font-size-300); - margin-bottom: var(--spectrum-spacing-400); -} - -.essential-characteristics ul { - list-style-type: disc; - padding-left: var(--spectrum-spacing-500); -} - -.essential-characteristics li { - margin-bottom: var(--spectrum-spacing-200); -} - -.aliases-section, -.usage-section, -.sources-section, -.governance-section, -.export-section { - margin-bottom: var(--spectrum-spacing-500); -} - -.aliases-list { - list-style: none; - padding: 0; - display: flex; - flex-wrap: wrap; - gap: var(--spectrum-spacing-200); -} - -.usage-badges { - display: flex; - flex-wrap: wrap; - gap: var(--spectrum-spacing-200); -} - -.platform-content { - padding: var(--spectrum-spacing-400) 0; -} - -.platform-term, -.platform-notes, -.platform-reference, -.platform-code { - margin-bottom: var(--spectrum-spacing-400); -} - -.platform-code pre { - margin-top: var(--spectrum-spacing-200); -} - -.terminology-metadata, -.governance-metadata { - display: grid; - grid-template-columns: 200px 1fr; - gap: var(--spectrum-spacing-300) var(--spectrum-spacing-400); -} - -.terminology-metadata dt, -.governance-metadata dt { - font-weight: 600; - color: var(--spectrum-gray-700); -} - -.terminology-metadata dd, -.governance-metadata dd { - margin: 0; -} - -.sources-list { - list-style-type: disc; - padding-left: var(--spectrum-spacing-500); -} - -.source-date { - color: var(--spectrum-gray-500); - font-size: var(--spectrum-font-size-75); -} - -.export-actions { - display: flex; - gap: var(--spectrum-spacing-300); -} - -/* Related Terms */ -.related-terms { - margin-top: var(--spectrum-spacing-600); - padding-top: var(--spectrum-spacing-600); - border-top: 1px solid var(--spectrum-gray-200); -} - -.related-terms-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: var(--spectrum-spacing-300); -} - -.related-term-link { - text-decoration: none; -} - -.related-term-card { - background-color: var(--spectrum-gray-75); - border: 1px solid var(--spectrum-gray-200); - border-radius: var(--spectrum-corner-radius-100); - padding: var(--spectrum-spacing-300); - transition: all 0.2s; -} - -.related-term-card:hover { - border-color: var(--spectrum-accent-color); - box-shadow: var(--spectrum-drop-shadow-y); -} - -.related-term-card strong { - color: var(--spectrum-gray-900); - display: block; - margin-bottom: var(--spectrum-spacing-200); -} - -.related-term-card p { - color: var(--spectrum-gray-600); - font-size: var(--spectrum-font-size-75); - margin: 0; -} - -/* Category Page */ -.category-page { - max-width: 1400px; - margin: 0 auto; -} - -.category-header { - margin-bottom: var(--spectrum-spacing-600); - text-align: center; -} - -.category-description { - font-size: var(--spectrum-font-size-300); - color: var(--spectrum-gray-600); - max-width: 700px; - margin: 0 auto var(--spectrum-spacing-400); -} - -.category-stats { - color: var(--spectrum-accent-color); - font-weight: 600; -} - -.filters-section { - display: flex; - gap: var(--spectrum-spacing-500); - margin-bottom: var(--spectrum-spacing-500); - padding: var(--spectrum-spacing-400); - background-color: var(--spectrum-gray-75); - border-radius: var(--spectrum-corner-radius-100); -} - -.alphabet-nav { - display: flex; - flex-wrap: wrap; - gap: var(--spectrum-spacing-200); - justify-content: center; - margin-bottom: var(--spectrum-spacing-500); -} - -.alphabet-link { - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid var(--spectrum-gray-200); - border-radius: var(--spectrum-corner-radius-75); - text-decoration: none; - font-weight: 600; - color: var(--spectrum-gray-600); -} - -.alphabet-link:hover { - background-color: var(--spectrum-accent-color); - color: white; - border-color: var(--spectrum-accent-color); -} - -.view-all-link { - text-align: center; - margin-top: var(--spectrum-spacing-500); -} - -/* Footer */ -.glossary-footer { - background-color: var(--spectrum-gray-75); - border-top: 1px solid var(--spectrum-gray-200); - padding: var(--spectrum-spacing-600) var(--spectrum-spacing-500); - margin-top: var(--spectrum-spacing-700); -} - -.footer-content { - max-width: 1400px; - margin: 0 auto var(--spectrum-spacing-500); - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--spectrum-spacing-600); -} - -.footer-section h3 { - font-size: var(--spectrum-font-size-300); - margin-bottom: var(--spectrum-spacing-300); -} - -.footer-section h4 { - font-size: var(--spectrum-font-size-200); - color: var(--spectrum-gray-700); - margin-bottom: var(--spectrum-spacing-300); -} - -.footer-section ul { - list-style: none; - padding: 0; - margin: 0; -} - -.footer-section li { - margin-bottom: var(--spectrum-spacing-200); -} - -.footer-section a { - color: var(--spectrum-gray-600); - font-size: var(--spectrum-font-size-100); -} - -.footer-legal { - max-width: 1400px; - margin: 0 auto; - padding-top: var(--spectrum-spacing-500); - border-top: 1px solid var(--spectrum-gray-200); - text-align: center; - color: var(--spectrum-gray-500); - font-size: var(--spectrum-font-size-75); -} - -.footer-legal p { - margin: var(--spectrum-spacing-200) 0; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .glossary-container { - padding: var(--spectrum-spacing-400) var(--spectrum-spacing-300); - } - - .header-content { - flex-direction: column; - align-items: flex-start; - } - - .main-nav ul { - flex-direction: column; - gap: var(--spectrum-spacing-300); - } - - .hero-section { - padding: var(--spectrum-spacing-500) 0; - } - - .hero-section h1 { - font-size: var(--spectrum-font-size-700); - } - - .stats-section { - grid-template-columns: repeat(2, 1fr); - } - - .category-grid, - .terms-grid { - grid-template-columns: 1fr; - } - - .terminology-metadata, - .governance-metadata { - grid-template-columns: 1fr; - } - - .footer-content { - grid-template-columns: 1fr; - } -} - -/* Utility Classes */ -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} diff --git a/docs/spectrum-glossary/src/assets/js/filters.js b/docs/spectrum-glossary/src/assets/js/filters.js deleted file mode 100644 index 83c0549d..00000000 --- a/docs/spectrum-glossary/src/assets/js/filters.js +++ /dev/null @@ -1,55 +0,0 @@ -// Filter functionality for category pages -function setupFilters() { - const enhancedFilter = document.getElementById("filter-enhanced"); - const platformsFilter = document.getElementById("filter-platforms"); - const termsGrid = document.getElementById("terms-grid"); - - if (!enhancedFilter || !platformsFilter || !termsGrid) return; - - const allTermCards = Array.from(termsGrid.querySelectorAll(".term-card")); - - function applyFilters() { - const showOnlyEnhanced = enhancedFilter.checked; - const showOnlyPlatforms = platformsFilter.checked; - - allTermCards.forEach((card) => { - let show = true; - - if (showOnlyEnhanced) { - const hasEnhanced = card.querySelector(".badge-enhanced") !== null; - show = show && hasEnhanced; - } - - if (showOnlyPlatforms) { - const hasPlatforms = card.querySelector(".platform-count") !== null; - show = show && hasPlatforms; - } - - card.style.display = show ? "flex" : "none"; - }); - - // Update visible count - const visibleCount = allTermCards.filter( - (card) => card.style.display !== "none", - ).length; - updateVisibleCount(visibleCount, allTermCards.length); - } - - function updateVisibleCount(visible, total) { - const countElement = document.querySelector(".term-count"); - if (countElement) { - countElement.textContent = - visible === total ? `${total} terms` : `${visible} of ${total} terms`; - } - } - - enhancedFilter.addEventListener("change", applyFilters); - platformsFilter.addEventListener("change", applyFilters); -} - -// Initialize on page load -if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", setupFilters); -} else { - setupFilters(); -} diff --git a/docs/spectrum-glossary/src/assets/js/search.js b/docs/spectrum-glossary/src/assets/js/search.js deleted file mode 100644 index 6606a4f0..00000000 --- a/docs/spectrum-glossary/src/assets/js/search.js +++ /dev/null @@ -1,214 +0,0 @@ -// Search functionality using Fuse.js -import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs"; - -let fuse = null; -let searchData = []; - -// Get base path from window or default to empty string -const getBasePath = () => window.BASE_PATH || ""; - -// Initialize search -async function initSearch() { - try { - // Load search index - const basePath = getBasePath(); - const response = await fetch(`${basePath}/api/v1/search-index.json`); - searchData = await response.json(); - - // Initialize Fuse.js - fuse = new Fuse(searchData, { - keys: [ - { name: "id", weight: 2 }, - { name: "label", weight: 2 }, - { name: "description", weight: 1.5 }, - { name: "definition.description", weight: 1.5 }, - { name: "definition.superordinate", weight: 1.3 }, - { name: "aliases", weight: 1 }, - { name: "registryLabel", weight: 0.8 }, - { name: "platformTerms", weight: 1 }, - ], - threshold: 0.3, - includeScore: true, - minMatchCharLength: 2, - ignoreLocation: true, - }); - } catch (error) { - console.error("Failed to initialize search:", error); - } -} - -// Display search results -function displayResults(results, query) { - const resultsContainer = document.getElementById("search-results"); - const resultsList = document.getElementById("results-list"); - const resultsCount = document.getElementById("results-count"); - - if (!resultsContainer || !resultsList || !resultsCount) return; - - if (!query || query.length < 2) { - resultsContainer.style.display = "none"; - return; - } - - resultsContainer.style.display = "block"; - resultsCount.textContent = `${results.length} result${results.length !== 1 ? "s" : ""}`; - - if (results.length === 0) { - resultsList.innerHTML = '

    No results found

    '; - return; - } - - resultsList.innerHTML = results - .slice(0, 20) - .map( - ({ item, score }) => ` - -
    - ${highlightMatch(item.label || item.id, query)} - ${item.registryLabel || item.registryType} -
    - ${item.description ? `

    ${highlightMatch(truncate(item.description, 100), query)}

    ` : ""} - ${item.definition?.description ? `

    ${highlightMatch(truncate(item.definition.description, 100), query)}

    ` : ""} -     - `, - ) - .join(""); -} - -// Highlight matching text -function highlightMatch(text, query) { - if (!text || !query) return text; - const regex = new RegExp(`(${escapeRegex(query)})`, "gi"); - return text.replace(regex, "$1"); -} - -// Escape regex special characters -function escapeRegex(str) { - return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); -} - -// Truncate text -function truncate(text, length) { - if (!text || text.length <= length) return text; - return text.substring(0, length) + "..."; -} - -// Set up event listeners -function setupSearch() { - const searchInput = document.getElementById("glossary-search"); - const clearButton = document.getElementById("clear-search"); - - if (searchInput) { - let searchTimeout; - - searchInput.addEventListener("input", (e) => { - clearTimeout(searchTimeout); - const query = e.target.value.trim(); - - searchTimeout = setTimeout(() => { - if (fuse && query.length >= 2) { - const results = fuse.search(query); - displayResults(results, query); - } else if (query.length < 2) { - displayResults([], query); - } - }, 300); // Debounce search - }); - - // Keyboard shortcuts - document.addEventListener("keydown", (e) => { - // Cmd/Ctrl + K to focus search - if ((e.metaKey || e.ctrlKey) && e.key === "k") { - e.preventDefault(); - searchInput.focus(); - } - - // Escape to clear search - if (e.key === "Escape") { - searchInput.value = ""; - displayResults([], ""); - } - }); - } - - if (clearButton) { - clearButton.addEventListener("click", () => { - if (searchInput) { - searchInput.value = ""; - displayResults([], ""); - searchInput.focus(); - } - }); - } -} - -// Initialize on page load -if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", () => { - initSearch(); - setupSearch(); - }); -} else { - initSearch(); - setupSearch(); -} - -// Add search result styles -const style = document.createElement("style"); -style.textContent = ` - .search-result-item { - display: block; - padding: var(--spectrum-spacing-300); - border-bottom: 1px solid var(--spectrum-gray-200); - text-decoration: none; - transition: background-color 0.2s; - } - - .search-result-item:hover { - background-color: var(--spectrum-gray-100); - } - - .search-result-item:last-child { - border-bottom: none; - } - - .result-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--spectrum-spacing-200); - } - - .result-header strong { - color: var(--spectrum-gray-900); - font-size: var(--spectrum-font-size-200); - } - - .result-registry { - font-size: var(--spectrum-font-size-75); - color: var(--spectrum-gray-500); - background-color: var(--spectrum-gray-100); - padding: 2px 8px; - border-radius: var(--spectrum-corner-radius-75); - } - - .result-description { - color: var(--spectrum-gray-600); - font-size: var(--spectrum-font-size-100); - margin: 0; - } - - .no-results { - color: var(--spectrum-gray-500); - text-align: center; - padding: var(--spectrum-spacing-500); - } - - mark { - background-color: var(--spectrum-accent-color); - color: white; - padding: 1px 3px; - border-radius: 2px; - } -`; -document.head.appendChild(style); diff --git a/docs/spectrum-glossary/src/assets/js/theme.js b/docs/spectrum-glossary/src/assets/js/theme.js deleted file mode 100644 index ebe35c5e..00000000 --- a/docs/spectrum-glossary/src/assets/js/theme.js +++ /dev/null @@ -1,27 +0,0 @@ -// Theme switcher -const themeToggle = document.getElementById("theme-toggle"); -const themeContainer = document.getElementById("theme-container"); -const html = document.documentElement; - -// Get saved theme or default to light -let currentTheme = localStorage.getItem("theme") || "light"; - -// Apply theme on load -function applyTheme(theme) { - html.classList.remove("spectrum--light", "spectrum--dark"); - html.classList.add(`spectrum--${theme}`); - themeContainer.setAttribute("color", theme); - localStorage.setItem("theme", theme); - currentTheme = theme; -} - -// Initialize theme -applyTheme(currentTheme); - -// Toggle theme on button click -if (themeToggle) { - themeToggle.addEventListener("click", () => { - const newTheme = currentTheme === "light" ? "dark" : "light"; - applyTheme(newTheme); - }); -} diff --git a/docs/spectrum-glossary/src/categories/categories.njk b/docs/spectrum-glossary/src/categories/categories.njk deleted file mode 100644 index b2979f4e..00000000 --- a/docs/spectrum-glossary/src/categories/categories.njk +++ /dev/null @@ -1,55 +0,0 @@ ---- -pagination: - data: collections.categories - size: 1 - alias: category -permalink: "/categories/{{ category.id }}/index.html" -layout: layouts/base.njk ---- - -{% set title = category.label %} -{% set description = category.description %} - -
    -
    -

    {{ category.label }}

    - {% if category.description %} -

    {{ category.description }}

    - {% endif %} -
    - {{ category.terms.length }} terms -
    -
    - - {% include "components/search.njk" %} - -
    - - -
    - -
    - {% set alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" %} - {% for letter in alphabet %} - {{ letter }} - {% endfor %} -
    - -
    - {% for term in category.terms | sortByLabel %} - {% from "components/term-card.njk" import termCard %} - {{ termCard(term) }} - {% endfor %} -
    -
    - -{% block scripts %} - - -{% endblock %} diff --git a/docs/spectrum-glossary/src/index.njk b/docs/spectrum-glossary/src/index.njk deleted file mode 100644 index ea7538db..00000000 --- a/docs/spectrum-glossary/src/index.njk +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: layouts/base.njk -title: Home -description: Spectrum Design System Glossary - A comprehensive collection of design terminology ---- - -
    -

    Spectrum Design System Glossary

    -

    - A comprehensive, searchable collection of design system terminology with {{ registry.stats.totalTerms }} terms - across {{ registry.stats.registries }} registries, including {{ registry.stats.enhancedTerms }} enhanced definitions - with platform-specific variations. -

    - - {% include "components/search.njk" %} -
    - -
    -
    -
    {{ registry.stats.totalTerms }}
    -
    Total Terms
    -
    -
    -
    {{ registry.stats.enhancedTerms }}
    -
    Enhanced Definitions
    -
    -
    -
    {{ registry.stats.registries }}
    -
    Registries
    -
    -
    -
    {{ registry.stats.platforms }}
    -
    Platforms
    -
    -
    - -
    -

    Browse by Category

    -
    - {% for category in collections.categories %} - -

    {{ category.label }}

    - {% if category.description %} -

    {{ category.description }}

    - {% endif %} -
    {{ category.terms.length }} terms
    -     - {% endfor %} -
    -
    - -
    -

    Featured Terms

    -
    - {% set enhancedTerms = collections.allTerms | hasDefinition | sortByLabel | limit(6) %} - {% for term in enhancedTerms %} - {% from "components/term-card.njk" import termCard %} - {{ termCard(term) }} - {% endfor %} -
    -
    - View All Terms -
    -
    - -{% block scripts %} - -{% endblock %} diff --git a/docs/spectrum-glossary/src/terms/terms.njk b/docs/spectrum-glossary/src/terms/terms.njk deleted file mode 100644 index a930ad3e..00000000 --- a/docs/spectrum-glossary/src/terms/terms.njk +++ /dev/null @@ -1,225 +0,0 @@ ---- -pagination: - data: collections.allTerms - size: 1 - alias: term -permalink: "/terms/{{ term.registryType }}/{{ term.id }}/index.html" -eleventyComputed: - title: "{{ term.label or term.id }}" -layout: layouts/base.njk ---- - -{% set title = term.label or term.id %} -{% set description = term.definition.description if term.definition else term.description %} - -
    -
    -
    -

    {{ term.label or term.id }}

    - {{ term.id }} -
    - -
    - {% if term.default %} - Default - {% endif %} - {% if term.definition %} - Enhanced - {% endif %} - {% if term.governance and term.governance.status %} - {{ term.governance.status }} - {% endif %} - {{ term.registryLabel or term.registryType }} -
    -
    - - {% if term.definition %} -
    -

    Definition

    -
    - {% if term.definition.superordinate %} -

    {{ term.definition.superordinate }}

    - {% endif %} - -

    {{ term.definition.description }}

    - - {% if term.definition.essentialCharacteristics and term.definition.essentialCharacteristics.length > 0 %} -
    -

    Essential Characteristics

    -
      - {% for char in term.definition.essentialCharacteristics %} -
    • {{ char }}
      • - {% endfor %} -
    -
    - {% endif %} -
    -
    - {% elif term.description %} -
    -

    Description

    -

    {{ term.description }}

    -
    - {% endif %} - - {% if term.aliases and term.aliases.length > 0 %} -
    -

    Aliases

    -
      - {% for alias in term.aliases %} -
    • {{ alias }}
      • - {% endfor %} -
    -
    - {% endif %} - - {% if term.usedIn and term.usedIn.length > 0 %} -
    -

    Used In

    -
    - {% for use in term.usedIn %} - {{ use }} - {% endfor %} -
    -
    - {% endif %} - - {% if term.platforms %} -
    -

    Platform Variations

    - - {% for platformKey, platformData in term.platforms %} - - {% endfor %} - - {% for platformKey, platformData in term.platforms %} - -
    - {% if platformData.term %} -
    - Platform Term: {{ platformData.term }} -
    - {% endif %} - - {% if platformData.notes %} -
    - Notes: -

    {{ platformData.notes }}

    -
    - {% endif %} - - {% if platformData.reference %} -
    - Reference: - - {{ platformData.reference }} - -
    - {% endif %} - - {% if platformData.codeExample %} -
    - Code Example: - 
    {{ platformData.codeExample }}
    -
    - {% endif %} -
    -     - {% endfor %} -     -
    - {% endif %} - - {% if term.terminology %} -
    -

    Terminology Metadata

    -
    - {% if term.terminology.conceptType %} -
    Concept Type
    -
    {{ term.terminology.conceptType }}
    - {% endif %} - - {% if term.terminology.namingRationale %} -
    Naming Rationale
    -
    {{ term.terminology.namingRationale }}
    - {% endif %} - - {% if term.terminology.alternativesConsidered and term.terminology.alternativesConsidered.length > 0 %} -
    Alternatives Considered
    -
    -
      - {% for alt in term.terminology.alternativesConsidered %} -
    • {{ alt }}
      • - {% endfor %} -
    -
    - {% endif %} -
    -
    - {% endif %} - - {% if term.sources and term.sources.length > 0 %} -
    -

    Sources

    -
      - {% for source in term.sources %} -
    • - {% if source.url %} - - {{ source.title or source.url }} - - {% else %} - {{ source.title or source }} - {% endif %} - {% if source.date %} - ({{ source.date }}) - {% endif %} -
      • - {% endfor %} -
    -
    - {% endif %} - - {% if term.governance %} -
    -

    Governance

    -
    - {% if term.governance.owner %} -
    Owner
    -
    {{ term.governance.owner }}
    - {% endif %} - - {% if term.governance.reviewDate %} -
    Review Date
    -
    {{ term.governance.reviewDate }}
    - {% endif %} - - {% if term.governance.status %} -
    Status
    -
    {{ term.governance.status }}
    - {% endif %} -
    -
    - {% endif %} - - {% if term.relatedTerms %} - {% from "components/related-terms.njk" import relatedTerms %} - {{ relatedTerms(term.relatedTerms, collections.allTerms) }} - {% endif %} - -
    -

    Export

    -
    - Copy JSON - View JSON -
    -
    -
    - - diff --git a/package.json b/package.json index bae8b8dd..2d9bf0bc 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "remark-github": "^12.0.0" }, "engines": { - "node": "~20.17" + "node": "20.17.0" }, "packageManager": "pnpm@10.17.1" } diff --git a/packages/tokens/test/checkAliasReferences.test.js b/packages/tokens/test/checkAliasReferences.test.js new file mode 100644 index 00000000..4b919d68 --- /dev/null +++ b/packages/tokens/test/checkAliasReferences.test.js @@ -0,0 +1,53 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import test from "ava"; +import { getAllTokens } from "../index.js"; + +const ALIAS_PATTERN = /^\{([^}]+)\}$/; + +function collectAliasRefs(obj, path = "") { + const refs = []; + if (typeof obj.value === "string") { + const match = obj.value.match(ALIAS_PATTERN); + if (match) { + refs.push({ ref: match[1], path: path || "value" }); + } + } + if (obj.sets) { + for (const [setName, setValue] of Object.entries(obj.sets)) { + refs.push(...collectAliasRefs(setValue, `${path}sets.${setName}.`)); + } + } + return refs; +} + +test("every alias reference should resolve to an existing token", async (t) => { + const tokens = await getAllTokens(); + const allTokenNames = new Set(Object.keys(tokens)); + const invalid = []; + + for (const [tokenName, token] of Object.entries(tokens)) { + const refs = collectAliasRefs(token); + for (const { ref, path } of refs) { + if (!allTokenNames.has(ref)) { + invalid.push({ token: tokenName, ref, path }); + } + } + } + + t.deepEqual( + invalid, + [], + `${invalid.length} alias references point to non-existent tokens`, + ); +}); diff --git a/packages/tokens/test/checkRenamed.test.js b/packages/tokens/test/checkRenamed.test.js new file mode 100644 index 00000000..a2cbdc87 --- /dev/null +++ b/packages/tokens/test/checkRenamed.test.js @@ -0,0 +1,34 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import test from "ava"; +import { getAllTokens } from "../index.js"; + +test("every renamed property should reference an existing token", async (t) => { + const tokens = await getAllTokens(); + const allTokenNames = new Set(Object.keys(tokens)); + const invalid = []; + + for (const [tokenName, token] of Object.entries(tokens)) { + if (Object.hasOwn(token, "renamed")) { + if (!allTokenNames.has(token.renamed)) { + invalid.push({ token: tokenName, renamed: token.renamed }); + } + } + } + + t.deepEqual( + invalid, + [], + `${invalid.length} renamed values reference non-existent tokens`, + ); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 74dd785b..1203d46e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -134,88 +134,43 @@ importers: docs/site: dependencies: - "@adobe/spectrum-component-api-schemas": - specifier: workspace:* - version: link:../../packages/component-schemas + "@11ty/eleventy": + specifier: ^3.0.0 + version: 3.1.2 "@spectrum-css/link": - specifier: ^5.1.3 - version: 5.2.0(@spectrum-css/tokens@14.6.0) + specifier: ^7.1.0 + version: 7.2.0(@spectrum-css/tokens@16.0.2) "@spectrum-css/page": - specifier: ^8.1.3 - version: 8.2.1(@spectrum-css/tokens@14.6.0) - "@spectrum-css/sidenav": - specifier: ^5.1.3 - version: 5.2.0(@spectrum-css/icon@9.1.0(@spectrum-css/tokens@14.6.0))(@spectrum-css/tokens@14.6.0) + specifier: ^9.1.0 + version: 9.2.0(@spectrum-css/tokens@16.0.2) "@spectrum-css/table": - specifier: ^6.1.3 - version: 6.2.0(@spectrum-css/icon@9.1.0(@spectrum-css/tokens@14.6.0))(@spectrum-css/tokens@14.6.0) + specifier: ^6.1.0 + version: 6.2.0(@spectrum-css/icon@9.2.0(@spectrum-css/tokens@16.0.2))(@spectrum-css/tokens@16.0.2) "@spectrum-css/tokens": - specifier: ^14.4.0 - version: 14.6.0 + specifier: ^16.0.2 + version: 16.0.2 "@spectrum-css/typography": - specifier: ^6.1.3 - version: 6.2.0(@spectrum-css/tokens@14.6.0) - ajv: - specifier: ^8.17.1 - version: 8.17.1 - ajv-formats: - specifier: ^3.0.1 - version: 3.0.1(ajv@8.17.1) - next: - specifier: ^14.2.15 - version: 14.2.30(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: - specifier: ^18.3.1 - version: 18.3.1 - react-dom: - specifier: ^18.3.1 - version: 18.3.1(react@18.3.1) - rimraf: - specifier: ^6.0.1 - version: 6.0.1 - - docs/spectrum-glossary: - dependencies: - "@11ty/eleventy": - specifier: ^3.0.0 - version: 3.1.2 - "@adobe/design-system-registry": - specifier: workspace:* - version: link:../../packages/design-system-registry - "@spectrum-css/tokens": - specifier: ^15.0.0 - version: 15.2.0 - "@spectrum-web-components/action-button": - specifier: ^0.49.0 - version: 0.49.0 - "@spectrum-web-components/button": - specifier: ^0.49.0 - version: 0.49.0 - "@spectrum-web-components/search": - specifier: ^0.49.0 - version: 0.49.0 - "@spectrum-web-components/tabs": - specifier: ^0.49.0 - version: 0.49.0 - "@spectrum-web-components/theme": - specifier: ^0.49.0 - version: 0.49.0 - "@spectrum-web-components/tooltip": - specifier: ^0.49.0 - version: 0.49.0 - fuse.js: - specifier: ^7.0.0 - version: 7.1.0 + specifier: ^8.1.0 + version: 8.2.0(@spectrum-css/tokens@16.0.2) markdown-it: specifier: ^14.0.0 version: 14.1.0 - markdown-it-prism: - specifier: ^2.3.0 - version: 2.3.1 - prism-themes: - specifier: ^1.9.0 - version: 1.9.0 devDependencies: + autoprefixer: + specifier: ^10.4.21 + version: 10.4.24(postcss@8.5.6) + cssnano: + specifier: ^7.0.1 + version: 7.1.2(postcss@8.5.6) + postcss: + specifier: ^8.4.49 + version: 8.5.6 + postcss-import: + specifier: ^16.1.0 + version: 16.1.1(postcss@8.5.6) + postcss-import-ext-glob: + specifier: ^2.0.1 + version: 2.1.1(postcss@8.5.6) rimraf: specifier: ^6.0.0 version: 6.0.1 @@ -586,6 +541,18 @@ importers: specifier: ^3.3.3 version: 3.7.4 + tools/markdown-generator: + dependencies: + "@adobe/design-system-registry": + specifier: workspace:* + version: link:../../packages/design-system-registry + "@adobe/spectrum-component-api-schemas": + specifier: workspace:* + version: link:../../packages/component-schemas + "@adobe/spectrum-tokens": + specifier: workspace:* + version: link:../../packages/tokens + tools/optimized-diff: devDependencies: ava: @@ -1845,93 +1812,6 @@ packages: cpu: [x64] os: [win32] - "@next/env@14.2.30": - resolution: - { - integrity: sha512-KBiBKrDY6kxTQWGzKjQB7QirL3PiiOkV7KW98leHFjtVRKtft76Ra5qSA/SL75xT44dp6hOcqiiJ6iievLOYug==, - } - - "@next/swc-darwin-arm64@14.2.30": - resolution: - { - integrity: sha512-EAqfOTb3bTGh9+ewpO/jC59uACadRHM6TSA9DdxJB/6gxOpyV+zrbqeXiFTDy9uV6bmipFDkfpAskeaDcO+7/g==, - } - engines: { node: ">= 10" } - cpu: [arm64] - os: [darwin] - - "@next/swc-darwin-x64@14.2.30": - resolution: - { - integrity: sha512-TyO7Wz1IKE2kGv8dwQ0bmPL3s44EKVencOqwIY69myoS3rdpO1NPg5xPM5ymKu7nfX4oYJrpMxv8G9iqLsnL4A==, - } - engines: { node: ">= 10" } - cpu: [x64] - os: [darwin] - - "@next/swc-linux-arm64-gnu@14.2.30": - resolution: - { - integrity: sha512-I5lg1fgPJ7I5dk6mr3qCH1hJYKJu1FsfKSiTKoYwcuUf53HWTrEkwmMI0t5ojFKeA6Vu+SfT2zVy5NS0QLXV4Q==, - } - engines: { node: ">= 10" } - cpu: [arm64] - os: [linux] - - "@next/swc-linux-arm64-musl@14.2.30": - resolution: - { - integrity: sha512-8GkNA+sLclQyxgzCDs2/2GSwBc92QLMrmYAmoP2xehe5MUKBLB2cgo34Yu242L1siSkwQkiV4YLdCnjwc/Micw==, - } - engines: { node: ">= 10" } - cpu: [arm64] - os: [linux] - - "@next/swc-linux-x64-gnu@14.2.30": - resolution: - { - integrity: sha512-8Ly7okjssLuBoe8qaRCcjGtcMsv79hwzn/63wNeIkzJVFVX06h5S737XNr7DZwlsbTBDOyI6qbL2BJB5n6TV/w==, - } - engines: { node: ">= 10" } - cpu: [x64] - os: [linux] - - "@next/swc-linux-x64-musl@14.2.30": - resolution: - { - integrity: sha512-dBmV1lLNeX4mR7uI7KNVHsGQU+OgTG5RGFPi3tBJpsKPvOPtg9poyav/BYWrB3GPQL4dW5YGGgalwZ79WukbKQ==, - } - engines: { node: ">= 10" } - cpu: [x64] - os: [linux] - - "@next/swc-win32-arm64-msvc@14.2.30": - resolution: - { - integrity: sha512-6MMHi2Qc1Gkq+4YLXAgbYslE1f9zMGBikKMdmQRHXjkGPot1JY3n5/Qrbg40Uvbi8//wYnydPnyvNhI1DMUW1g==, - } - engines: { node: ">= 10" } - cpu: [arm64] - os: [win32] - - "@next/swc-win32-ia32-msvc@14.2.30": - resolution: - { - integrity: sha512-pVZMnFok5qEX4RT59mK2hEVtJX+XFfak+/rjHpyFh7juiT52r177bfFKhnlafm0UOSldhXjj32b+LZIOdswGTg==, - } - engines: { node: ">= 10" } - cpu: [ia32] - os: [win32] - - "@next/swc-win32-x64-msvc@14.2.30": - resolution: - { - integrity: sha512-4KCo8hMZXMjpTzs3HOqOGYYwAXymXIy7PEPAXNEcEOyKqkjiDlECumrWziy+JEF0Oi4ILHGxzgQ3YiMGG2t/Lg==, - } - engines: { node: ">= 10" } - cpu: [x64] - os: [win32] - "@nodelib/fs.scandir@2.1.5": resolution: { @@ -2215,10 +2095,10 @@ packages: } engines: { node: ">=12" } - "@spectrum-css/icon@9.1.0": + "@spectrum-css/icon@9.2.0": resolution: { - integrity: sha512-w7/Xcb6zr9wLS0et8Rb5MMdbfP2FC1/hTaiARVfos2u8MC5J3gFpyM7QIOJzgTJVQGWgRQZAAWYfqGNBmWPNmw==, + integrity: sha512-47Pvi8B8wg5zLB7a9A407SAfG6yHh3umMNx8itREC2okns1G7udwCXrQv6e0Cqn3lroBnzALeJLtc3kQ3zzc/Q==, } peerDependencies: "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -2226,32 +2106,26 @@ packages: "@spectrum-css/tokens": optional: true - "@spectrum-css/link@5.2.0": - resolution: - { - integrity: sha512-v2jo3rejLOlQvIQrXFG/otmF3rLQlbbXPsB3zx62u8JXZa83MExRToEFZJ62BtO/h62cAW6EJ5zK4sN63YO47g==, - } - peerDependencies: - "@spectrum-css/tokens": ">=14" - - "@spectrum-css/page@8.2.1": + "@spectrum-css/link@7.2.0": resolution: { - integrity: sha512-mylgpzFk73wGyjy6hT5dlc0qGBXv20079g8LqRBR7+icubXx6xglWCulYHTWrJveOPtcJF0HS94IMkVtHAhlYA==, + integrity: sha512-fFc6rzmV/OZNidSxkLVqLHDYYRv/+OcFsuW5ADMI2xCdspwAiAaxA3nOfQrgUo8G1DpeMUQJdstMleaEsgwrbA==, } peerDependencies: - "@spectrum-css/tokens": ">=14 || >=15" + "@spectrum-css/tokens": ">=16.0.1" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true - "@spectrum-css/sidenav@5.2.0": + "@spectrum-css/page@9.2.0": resolution: { - integrity: sha512-kCSazjPwVLcPavhKgDodZ7k2vvNQ/CdrRkQKBzEYoFVXLL1c6f74O9SfkWVYqbnOHBhSp1/H3iLx8zyfogasFQ==, + integrity: sha512-TWg4ELxjaE+co/jB5okg5WpjxONBzxX1pW3jy9uZex5ZfzYxoQ+VrfLysagkv1AS9U44RCHGO4gXj+15ooeL9A==, } peerDependencies: - "@spectrum-css/icon": ">=7" - "@spectrum-css/tokens": ">=14" + "@spectrum-css/tokens": ">=16.0.1" peerDependenciesMeta: - "@spectrum-css/icon": + "@spectrum-css/tokens": optional: true "@spectrum-css/table@6.2.0": @@ -2273,25 +2147,22 @@ packages: "@spectrum-css/thumbnail": optional: true - "@spectrum-css/tokens@14.6.0": + "@spectrum-css/tokens@16.0.2": resolution: { - integrity: sha512-v/ko2A2i2v4ShHizSdRkOs0fYBVLdiQe5yN/ECFBjpamd0YJHfZGh4uBIGSG+uZjwWpHbKhRusdCRFJKJ+WNYQ==, + integrity: sha512-VF/O5I903qpwO6TUZY4hTvYTy7t5HHe1nY6xBD2ZbaT4tX5Dm7RsSw8umVw5qbjCinHJL/pEsb0xsWtlsyUicQ==, } - "@spectrum-css/tokens@15.2.0": + "@spectrum-css/typography@8.2.0": resolution: { - integrity: sha512-IRUP57EjrzB08fg9NU+4/AW1sc3laHt4+Ou+gm71r6xS9Q//EqeyL+sZ1uy8z+ZnCP1TLMuxu986/gIhuc/QDA==, - } - - "@spectrum-css/typography@6.2.0": - resolution: - { - integrity: sha512-yaqc4wFY3asUhh3zzdqRI5dVJow7xJ2nL2bo4AADDLT305Dtje5PYO89m+f3nTVf2utKE3H8nlJbWUG57QpFqw==, + integrity: sha512-8xDYN1n1Z2VmY8rWWz2TtN8gP2uyJ0SLPH7aEuXSEh0+sjWrKSK5eMaSSN1RVxKoJWIM+ZRTjQbm1NxL+WKI3w==, } peerDependencies: - "@spectrum-css/tokens": ">=14.5.0" + "@spectrum-css/tokens": ">=16.0.1" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true "@spectrum-web-components/accordion@1.10.0": resolution: @@ -2857,12 +2728,6 @@ packages: integrity: sha512-0Dt4ddo+XjH9NNqAs8GUxzSPYYnyu6dgbM6vAgqoGqRawLMsy/pUXauugfpQuHJor5uhPRQVlM25o9YoNEIwUw==, } - "@spectrum-web-components/tabs@0.49.0": - resolution: - { - integrity: sha512-KZ2g6j8z2zJ24gFQ3hCdEeec5PPbRprULAKRuhS4vK21W5QaHb0lBs7+Dm5guv+j/qq1Xz0a+WYXFbKHplwxMg==, - } - "@spectrum-web-components/tabs@1.10.0": resolution: { @@ -2953,24 +2818,12 @@ packages: integrity: sha512-bT12ZrlEe8pAUMPh18aeyCkhDy2bfIk/ICyqnkQ2niBdxhSxyo64KIQTsWAModoqWAz+zbXoGdINTJTv2Ift5g==, } - "@swc/counter@0.1.3": - resolution: - { - integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==, - } - "@swc/helpers@0.5.17": resolution: { integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==, } - "@swc/helpers@0.5.5": - resolution: - { - integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==, - } - "@types/codemirror@5.60.17": resolution: { @@ -3615,6 +3468,16 @@ packages: integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==, } + autoprefixer@10.4.24: + resolution: + { + integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==, + } + engines: { node: ^10 || ^12 || >=14 } + hasBin: true + peerDependencies: + postcss: ^8.1.0 + ava@6.4.0: resolution: { @@ -3737,13 +3600,6 @@ packages: integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==, } - busboy@1.6.0: - resolution: - { - integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==, - } - engines: { node: ">=10.16.0" } - bytes@3.1.2: resolution: { @@ -3798,12 +3654,24 @@ packages: integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==, } + caniuse-api@3.0.0: + resolution: + { + integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==, + } + caniuse-lite@1.0.30001763: resolution: { integrity: sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==, } + caniuse-lite@1.0.30001769: + resolution: + { + integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==, + } + capital-case@1.0.4: resolution: { @@ -3937,12 +3805,6 @@ packages: } engines: { node: ">=18" } - client-only@0.0.1: - resolution: - { - integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==, - } - cliui@8.0.1: resolution: { @@ -4002,6 +3864,12 @@ packages: integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==, } + colord@2.9.3: + resolution: + { + integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==, + } + colorette@2.0.20: resolution: { @@ -4041,6 +3909,13 @@ packages: } engines: { node: ">=14" } + commander@11.1.0: + resolution: + { + integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==, + } + engines: { node: ">=16" } + commander@12.1.0: resolution: { @@ -4227,6 +4102,15 @@ packages: } engines: { node: ">= 8" } + css-declaration-sorter@7.3.1: + resolution: + { + integrity: sha512-gz6x+KkgNCjxq3Var03pRYLhyNfwhkKF1g/yoLgDNtFvVu0/fOLV9C8fFEZRjACp/XQLumjAYo7JVjzH3wLbxA==, + } + engines: { node: ^14 || ^16 || >=18 } + peerDependencies: + postcss: ^8.0.9 + css-loader@7.1.2: resolution: { @@ -4248,6 +4132,26 @@ packages: integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==, } + css-select@5.2.2: + resolution: + { + integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==, + } + + css-tree@2.2.1: + resolution: + { + integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==, + } + engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: ">=7.0.0" } + + css-tree@3.1.0: + resolution: + { + integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==, + } + engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0 } + css-what@6.2.2: resolution: { @@ -4263,6 +4167,40 @@ packages: engines: { node: ">=4" } hasBin: true + cssnano-preset-default@7.0.10: + resolution: + { + integrity: sha512-6ZBjW0Lf1K1Z+0OKUAUpEN62tSXmYChXWi2NAA0afxEVsj9a+MbcB1l5qel6BHJHmULai2fCGRthCeKSFbScpA==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + cssnano-utils@5.0.1: + resolution: + { + integrity: sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + cssnano@7.1.2: + resolution: + { + integrity: sha512-HYOPBsNvoiFeR1eghKD5C3ASm64v9YVyJB4Ivnl2gqKoQYvjjN/G0rztvKQq8OxocUtC6sjqY8jwYngIB4AByA==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + csso@5.0.5: + resolution: + { + integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==, + } + engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: ">=7.0.0" } + currently-unhandled@0.4.1: resolution: { @@ -4638,6 +4576,12 @@ packages: integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==, } + dom-serializer@2.0.0: + resolution: + { + integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==, + } + domelementtype@2.3.0: resolution: { @@ -4651,12 +4595,25 @@ packages: } engines: { node: ">= 4" } + domhandler@5.0.3: + resolution: + { + integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==, + } + engines: { node: ">= 4" } + domutils@2.8.0: resolution: { integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==, } + domutils@3.2.2: + resolution: + { + integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==, + } + dot-case@3.0.4: resolution: { @@ -5144,6 +5101,12 @@ packages: integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==, } + fast-sort@3.4.1: + resolution: + { + integrity: sha512-76uvGPsF6So53sZAqenP9UVT3p5l7cyTHkLWVCMinh41Y8NDrK1IYXJgaBMfc1gk7nJiSRZp676kddFG2Aa5+A==, + } + fast-uri@3.0.6: resolution: { @@ -5338,6 +5301,12 @@ packages: } engines: { node: ">= 0.6" } + fraction.js@5.3.4: + resolution: + { + integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==, + } + fresh@2.0.0: resolution: { @@ -5380,13 +5349,6 @@ packages: integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==, } - fuse.js@7.1.0: - resolution: - { - integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==, - } - engines: { node: ">=10" } - get-caller-file@2.0.5: resolution: { @@ -6404,6 +6366,12 @@ packages: integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==, } + lodash.memoize@4.1.2: + resolution: + { + integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==, + } + lodash.merge@4.6.2: resolution: { @@ -6459,13 +6427,6 @@ packages: integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==, } - loose-envify@1.4.0: - resolution: - { - integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==, - } - hasBin: true - lower-case@2.0.2: resolution: { @@ -6506,13 +6467,6 @@ packages: } engines: { node: ">=16" } - markdown-it-prism@2.3.1: - resolution: - { - integrity: sha512-oZl9fGKBeSd94GhqpCrA2MO2uAWxKVe0swyX/nBqly+/6d870zae9raMgxJg+OEjhyuOrxTn8p1vMP8RkawzHw==, - } - engines: { node: ">=6.0.0" } - markdown-it@14.1.0: resolution: { @@ -6626,6 +6580,18 @@ packages: integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==, } + mdn-data@2.0.28: + resolution: + { + integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==, + } + + mdn-data@2.12.2: + resolution: + { + integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==, + } + mdurl@2.0.0: resolution: { @@ -7010,28 +6976,6 @@ packages: integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==, } - next@14.2.30: - resolution: - { - integrity: sha512-+COdu6HQrHHFQ1S/8BBsCag61jZacmvbuL2avHvQFbWa2Ox7bE+d8FyNgxRLjXQ5wtPyQwEmk85js/AuaG2Sbg==, - } - engines: { node: ">=18.17.0" } - deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details. - hasBin: true - peerDependencies: - "@opentelemetry/api": ^1.1.0 - "@playwright/test": ^1.41.2 - react: ^18.2.0 - react-dom: ^18.2.0 - sass: ^1.3.0 - peerDependenciesMeta: - "@opentelemetry/api": - optional: true - "@playwright/test": - optional: true - sass: - optional: true - nixt@0.5.1: resolution: { @@ -7500,6 +7444,13 @@ packages: engines: { node: ">=0.10" } hasBin: true + pify@2.3.0: + resolution: + { + integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==, + } + engines: { node: ">=0.10.0" } + pify@4.0.1: resolution: { @@ -7534,6 +7485,140 @@ packages: } engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 } + postcss-calc@10.1.1: + resolution: + { + integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==, + } + engines: { node: ^18.12 || ^20.9 || >=22.0 } + peerDependencies: + postcss: ^8.4.38 + + postcss-colormin@7.0.5: + resolution: + { + integrity: sha512-ekIBP/nwzRWhEMmIxHHbXHcMdzd1HIUzBECaj5KEdLz9DVP2HzT065sEhvOx1dkLjYW7jyD0CngThx6bpFi2fA==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-convert-values@7.0.8: + resolution: + { + integrity: sha512-+XNKuPfkHTCEo499VzLMYn94TiL3r9YqRE3Ty+jP7UX4qjewUONey1t7CG21lrlTLN07GtGM8MqFVp86D4uKJg==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-discard-comments@7.0.5: + resolution: + { + integrity: sha512-IR2Eja8WfYgN5n32vEGSctVQ1+JARfu4UH8M7bgGh1bC+xI/obsPJXaBpQF7MAByvgwZinhpHpdrmXtvVVlKcQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-discard-duplicates@7.0.2: + resolution: + { + integrity: sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-discard-empty@7.0.1: + resolution: + { + integrity: sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-discard-overridden@7.0.1: + resolution: + { + integrity: sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-import-ext-glob@2.1.1: + resolution: + { + integrity: sha512-qd4ELOx2G0hyjgtmLnf/fSVJXXPhkcxcxhLT1y1mAnk53JYbMLoGg+AFtnJowOSvnv4CvjPAzpLpAcfWeofP5g==, + } + peerDependencies: + postcss: ^8.2.0 + + postcss-import@16.1.1: + resolution: + { + integrity: sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==, + } + engines: { node: ">=18.0.0" } + peerDependencies: + postcss: ^8.0.0 + + postcss-merge-longhand@7.0.5: + resolution: + { + integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-merge-rules@7.0.7: + resolution: + { + integrity: sha512-njWJrd/Ms6XViwowaaCc+/vqhPG3SmXn725AGrnl+BgTuRPEacjiLEaGq16J6XirMJbtKkTwnt67SS+e2WGoew==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-minify-font-values@7.0.1: + resolution: + { + integrity: sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-minify-gradients@7.0.1: + resolution: + { + integrity: sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-minify-params@7.0.5: + resolution: + { + integrity: sha512-FGK9ky02h6Ighn3UihsyeAH5XmLEE2MSGH5Tc4tXMFtEDx7B+zTG6hD/+/cT+fbF7PbYojsmmWjyTwFwW1JKQQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-minify-selectors@7.0.5: + resolution: + { + integrity: sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + postcss-modules-extract-imports@3.1.0: resolution: { @@ -7570,6 +7655,114 @@ packages: peerDependencies: postcss: ^8.1.0 + postcss-normalize-charset@7.0.1: + resolution: + { + integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-display-values@7.0.1: + resolution: + { + integrity: sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-positions@7.0.1: + resolution: + { + integrity: sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-repeat-style@7.0.1: + resolution: + { + integrity: sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-string@7.0.1: + resolution: + { + integrity: sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-timing-functions@7.0.1: + resolution: + { + integrity: sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-unicode@7.0.5: + resolution: + { + integrity: sha512-X6BBwiRxVaFHrb2WyBMddIeB5HBjJcAaUHyhLrM2FsxSq5TFqcHSsK7Zu1otag+o0ZphQGJewGH1tAyrD0zX1Q==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-url@7.0.1: + resolution: + { + integrity: sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-normalize-whitespace@7.0.1: + resolution: + { + integrity: sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-ordered-values@7.0.2: + resolution: + { + integrity: sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-reduce-initial@7.0.5: + resolution: + { + integrity: sha512-RHagHLidG8hTZcnr4FpyMB2jtgd/OcyAazjMhoy5qmWJOx1uxKh4ntk0Pb46ajKM0rkf32lRH4C8c9qQiPR6IA==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-reduce-transforms@7.0.1: + resolution: + { + integrity: sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + postcss-selector-parser@7.1.1: resolution: { @@ -7577,18 +7770,29 @@ packages: } engines: { node: ">=4" } - postcss-value-parser@4.2.0: + postcss-svgo@7.1.0: resolution: { - integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==, + integrity: sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==, } + engines: { node: ^18.12.0 || ^20.9.0 || >= 18 } + peerDependencies: + postcss: ^8.4.32 - postcss@8.4.31: + postcss-unique-selectors@7.0.4: resolution: { - integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==, + integrity: sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==, + } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } + peerDependencies: + postcss: ^8.4.32 + + postcss-value-parser@4.2.0: + resolution: + { + integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==, } - engines: { node: ^10 || ^12 || >=14 } postcss@8.5.6: resolution: @@ -7663,12 +7867,6 @@ packages: } engines: { node: ">=18" } - prism-themes@1.9.0: - resolution: - { - integrity: sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==, - } - prismjs@1.30.0: resolution: { @@ -7774,20 +7972,11 @@ packages: } engines: { node: ">= 0.10" } - react-dom@18.3.1: - resolution: - { - integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==, - } - peerDependencies: - react: ^18.3.1 - - react@18.3.1: + read-cache@1.0.0: resolution: { - integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==, + integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==, } - engines: { node: ">=0.10.0" } read-package-json-fast@3.0.2: resolution: @@ -8016,11 +8205,12 @@ packages: integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==, } - scheduler@0.23.2: + sax@1.4.4: resolution: { - integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==, + integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==, } + engines: { node: ">=11.0.0" } schema-utils@4.3.3: resolution: @@ -8305,14 +8495,7 @@ packages: { integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==, } - engines: { node: ">= 0.8" } - - streamsearch@1.1.0: - resolution: - { - integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==, - } - engines: { node: ">=10.0.0" } + engines: { node: ">= 0.8" } string-argv@0.3.2: resolution: @@ -8427,21 +8610,14 @@ packages: peerDependencies: webpack: ^5.27.0 - styled-jsx@5.1.1: + stylehacks@7.0.7: resolution: { - integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==, + integrity: sha512-bJkD0JkEtbRrMFtwgpJyBbFIwfDDONQ1Ov3sDLZQP8HuJ73kBOyx66H4bOcAbVWmnfLdvQ0AJwXxOMkpujcO6g==, } - engines: { node: ">= 12.0.0" } + engines: { node: ^18.12.0 || ^20.9.0 || >=22.0 } peerDependencies: - "@babel/core": "*" - babel-plugin-macros: "*" - react: ">= 16.8.0 || 17.x.x || ^18.0.0-0" - peerDependenciesMeta: - "@babel/core": - optional: true - babel-plugin-macros: - optional: true + postcss: ^8.4.32 supertap@3.0.1: resolution: @@ -8485,6 +8661,14 @@ packages: } engines: { node: ">= 0.4" } + svgo@4.0.0: + resolution: + { + integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==, + } + engines: { node: ">=16" } + hasBin: true + tabbable@6.4.0: resolution: { @@ -10043,35 +10227,6 @@ snapshots: "@moonrepo/core-windows-x64-msvc@1.39.1": optional: true - "@next/env@14.2.30": {} - - "@next/swc-darwin-arm64@14.2.30": - optional: true - - "@next/swc-darwin-x64@14.2.30": - optional: true - - "@next/swc-linux-arm64-gnu@14.2.30": - optional: true - - "@next/swc-linux-arm64-musl@14.2.30": - optional: true - - "@next/swc-linux-x64-gnu@14.2.30": - optional: true - - "@next/swc-linux-x64-musl@14.2.30": - optional: true - - "@next/swc-win32-arm64-msvc@14.2.30": - optional: true - - "@next/swc-win32-ia32-msvc@14.2.30": - optional: true - - "@next/swc-win32-x64-msvc@14.2.30": - optional: true - "@nodelib/fs.scandir@2.1.5": dependencies: "@nodelib/fs.stat": 2.0.5 @@ -10224,36 +10379,28 @@ snapshots: dependencies: escape-string-regexp: 5.0.0 - "@spectrum-css/icon@9.1.0(@spectrum-css/tokens@14.6.0)": + "@spectrum-css/icon@9.2.0(@spectrum-css/tokens@16.0.2)": optionalDependencies: - "@spectrum-css/tokens": 14.6.0 - - "@spectrum-css/link@5.2.0(@spectrum-css/tokens@14.6.0)": - dependencies: - "@spectrum-css/tokens": 14.6.0 + "@spectrum-css/tokens": 16.0.2 - "@spectrum-css/page@8.2.1(@spectrum-css/tokens@14.6.0)": - dependencies: - "@spectrum-css/tokens": 14.6.0 + "@spectrum-css/link@7.2.0(@spectrum-css/tokens@16.0.2)": + optionalDependencies: + "@spectrum-css/tokens": 16.0.2 - "@spectrum-css/sidenav@5.2.0(@spectrum-css/icon@9.1.0(@spectrum-css/tokens@14.6.0))(@spectrum-css/tokens@14.6.0)": - dependencies: - "@spectrum-css/tokens": 14.6.0 + "@spectrum-css/page@9.2.0(@spectrum-css/tokens@16.0.2)": optionalDependencies: - "@spectrum-css/icon": 9.1.0(@spectrum-css/tokens@14.6.0) + "@spectrum-css/tokens": 16.0.2 - "@spectrum-css/table@6.2.0(@spectrum-css/icon@9.1.0(@spectrum-css/tokens@14.6.0))(@spectrum-css/tokens@14.6.0)": + "@spectrum-css/table@6.2.0(@spectrum-css/icon@9.2.0(@spectrum-css/tokens@16.0.2))(@spectrum-css/tokens@16.0.2)": dependencies: - "@spectrum-css/icon": 9.1.0(@spectrum-css/tokens@14.6.0) - "@spectrum-css/tokens": 14.6.0 + "@spectrum-css/icon": 9.2.0(@spectrum-css/tokens@16.0.2) + "@spectrum-css/tokens": 16.0.2 - "@spectrum-css/tokens@14.6.0": {} + "@spectrum-css/tokens@16.0.2": {} - "@spectrum-css/tokens@15.2.0": {} - - "@spectrum-css/typography@6.2.0(@spectrum-css/tokens@14.6.0)": - dependencies: - "@spectrum-css/tokens": 14.6.0 + "@spectrum-css/typography@8.2.0(@spectrum-css/tokens@16.0.2)": + optionalDependencies: + "@spectrum-css/tokens": 16.0.2 "@spectrum-web-components/accordion@1.10.0": dependencies: @@ -10972,15 +11119,6 @@ snapshots: "@spectrum-web-components/icon": 1.10.0 "@spectrum-web-components/icons-ui": 1.10.0 - "@spectrum-web-components/tabs@0.49.0": - dependencies: - "@lit-labs/observers": 2.0.5 - "@spectrum-web-components/base": 0.49.0 - "@spectrum-web-components/icon": 0.49.0 - "@spectrum-web-components/icons-ui": 0.49.0 - "@spectrum-web-components/reactive-controllers": 0.49.0 - "@spectrum-web-components/shared": 0.49.0 - "@spectrum-web-components/tabs@1.10.0": dependencies: "@lit-labs/observers": 2.0.2 @@ -11088,17 +11226,10 @@ snapshots: dependencies: "@spectrum-web-components/base": 1.10.0 - "@swc/counter@0.1.3": {} - "@swc/helpers@0.5.17": dependencies: tslib: 2.8.1 - "@swc/helpers@0.5.5": - dependencies: - "@swc/counter": 0.1.3 - tslib: 2.8.1 - "@types/codemirror@5.60.17": dependencies: "@types/tern": 0.23.9 @@ -11529,6 +11660,15 @@ snapshots: async-sema@3.1.1: {} + autoprefixer@10.4.24(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + caniuse-lite: 1.0.30001769 + fraction.js: 5.3.4 + picocolors: 1.1.1 + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + ava@6.4.0(@ava/typescript@6.0.0)(rollup@4.44.1): dependencies: "@vercel/nft": 0.29.4(rollup@4.44.1) @@ -11648,10 +11788,6 @@ snapshots: buffer-from@1.1.2: {} - busboy@1.6.0: - dependencies: - streamsearch: 1.1.0 - bytes@3.1.2: {} c8@10.1.3: @@ -11687,8 +11823,17 @@ snapshots: pascal-case: 3.1.2 tslib: 2.8.1 + caniuse-api@3.0.0: + dependencies: + browserslist: 4.28.1 + caniuse-lite: 1.0.30001763 + lodash.memoize: 4.1.2 + lodash.uniq: 4.5.0 + caniuse-lite@1.0.30001763: {} + caniuse-lite@1.0.30001769: {} + capital-case@1.0.4: dependencies: no-case: 3.0.4 @@ -11772,8 +11917,6 @@ snapshots: slice-ansi: 5.0.0 string-width: 7.2.0 - client-only@0.0.1: {} - cliui@8.0.1: dependencies: string-width: 4.2.3 @@ -11806,6 +11949,8 @@ snapshots: color-name@1.1.4: {} + colord@2.9.3: {} + colorette@2.0.20: {} colorjs.io@0.5.2: {} @@ -11828,6 +11973,8 @@ snapshots: commander@10.0.1: {} + commander@11.1.0: {} + commander@12.1.0: {} commander@13.1.0: {} @@ -11929,6 +12076,10 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-declaration-sorter@7.3.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + css-loader@7.1.2(webpack@5.104.1): dependencies: icss-utils: 5.1.0(postcss@8.5.6) @@ -11950,10 +12101,76 @@ snapshots: domutils: 2.8.0 nth-check: 2.1.1 + css-select@5.2.2: + dependencies: + boolbase: 1.0.0 + css-what: 6.2.2 + domhandler: 5.0.3 + domutils: 3.2.2 + nth-check: 2.1.1 + + css-tree@2.2.1: + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.2.1 + + css-tree@3.1.0: + dependencies: + mdn-data: 2.12.2 + source-map-js: 1.2.1 + css-what@6.2.2: {} cssesc@3.0.0: {} + cssnano-preset-default@7.0.10(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + css-declaration-sorter: 7.3.1(postcss@8.5.6) + cssnano-utils: 5.0.1(postcss@8.5.6) + postcss: 8.5.6 + postcss-calc: 10.1.1(postcss@8.5.6) + postcss-colormin: 7.0.5(postcss@8.5.6) + postcss-convert-values: 7.0.8(postcss@8.5.6) + postcss-discard-comments: 7.0.5(postcss@8.5.6) + postcss-discard-duplicates: 7.0.2(postcss@8.5.6) + postcss-discard-empty: 7.0.1(postcss@8.5.6) + postcss-discard-overridden: 7.0.1(postcss@8.5.6) + postcss-merge-longhand: 7.0.5(postcss@8.5.6) + postcss-merge-rules: 7.0.7(postcss@8.5.6) + postcss-minify-font-values: 7.0.1(postcss@8.5.6) + postcss-minify-gradients: 7.0.1(postcss@8.5.6) + postcss-minify-params: 7.0.5(postcss@8.5.6) + postcss-minify-selectors: 7.0.5(postcss@8.5.6) + postcss-normalize-charset: 7.0.1(postcss@8.5.6) + postcss-normalize-display-values: 7.0.1(postcss@8.5.6) + postcss-normalize-positions: 7.0.1(postcss@8.5.6) + postcss-normalize-repeat-style: 7.0.1(postcss@8.5.6) + postcss-normalize-string: 7.0.1(postcss@8.5.6) + postcss-normalize-timing-functions: 7.0.1(postcss@8.5.6) + postcss-normalize-unicode: 7.0.5(postcss@8.5.6) + postcss-normalize-url: 7.0.1(postcss@8.5.6) + postcss-normalize-whitespace: 7.0.1(postcss@8.5.6) + postcss-ordered-values: 7.0.2(postcss@8.5.6) + postcss-reduce-initial: 7.0.5(postcss@8.5.6) + postcss-reduce-transforms: 7.0.1(postcss@8.5.6) + postcss-svgo: 7.1.0(postcss@8.5.6) + postcss-unique-selectors: 7.0.4(postcss@8.5.6) + + cssnano-utils@5.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + cssnano@7.1.2(postcss@8.5.6): + dependencies: + cssnano-preset-default: 7.0.10(postcss@8.5.6) + lilconfig: 3.1.3 + postcss: 8.5.6 + + csso@5.0.5: + dependencies: + css-tree: 2.2.1 + currently-unhandled@0.4.1: dependencies: array-find-index: 1.0.2 @@ -12172,18 +12389,34 @@ snapshots: domhandler: 4.3.1 entities: 2.2.0 + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + domelementtype@2.3.0: {} domhandler@4.3.1: dependencies: domelementtype: 2.3.0 + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + domutils@2.8.0: dependencies: dom-serializer: 1.4.1 domelementtype: 2.3.0 domhandler: 4.3.1 + domutils@3.2.2: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dot-case@3.0.4: dependencies: no-case: 3.0.4 @@ -12524,6 +12757,8 @@ snapshots: fast-levenshtein@2.0.6: {} + fast-sort@3.4.1: {} + fast-uri@3.0.6: {} fastest-levenshtein@1.0.16: {} @@ -12640,6 +12875,8 @@ snapshots: forwarded@0.2.0: {} + fraction.js@5.3.4: {} + fresh@2.0.0: {} fs-extra@10.1.0: @@ -12665,8 +12902,6 @@ snapshots: function-bind@1.1.2: {} - fuse.js@7.1.0: {} - get-caller-file@2.0.5: {} get-east-asian-width@1.3.0: {} @@ -13206,6 +13441,8 @@ snapshots: lodash.kebabcase@4.1.1: {} + lodash.memoize@4.1.2: {} + lodash.merge@4.6.2: {} lodash.mergewith@4.6.2: {} @@ -13230,10 +13467,6 @@ snapshots: longest-streak@3.1.0: {} - loose-envify@1.4.0: - dependencies: - js-tokens: 4.0.0 - lower-case@2.0.2: dependencies: tslib: 2.8.1 @@ -13250,10 +13483,6 @@ snapshots: markdown-extensions@2.0.0: {} - markdown-it-prism@2.3.1: - dependencies: - prismjs: 1.30.0 - markdown-it@14.1.0: dependencies: argparse: 2.0.1 @@ -13395,6 +13624,10 @@ snapshots: dependencies: "@types/mdast": 4.0.4 + mdn-data@2.0.28: {} + + mdn-data@2.12.2: {} + mdurl@2.0.0: {} media-typer@1.1.0: {} @@ -13672,31 +13905,6 @@ snapshots: neo-async@2.6.2: {} - next@14.2.30(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - "@next/env": 14.2.30 - "@swc/helpers": 0.5.5 - busboy: 1.6.0 - caniuse-lite: 1.0.30001763 - graceful-fs: 4.2.11 - postcss: 8.4.31 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - styled-jsx: 5.1.1(react@18.3.1) - optionalDependencies: - "@next/swc-darwin-arm64": 14.2.30 - "@next/swc-darwin-x64": 14.2.30 - "@next/swc-linux-arm64-gnu": 14.2.30 - "@next/swc-linux-arm64-musl": 14.2.30 - "@next/swc-linux-x64-gnu": 14.2.30 - "@next/swc-linux-x64-musl": 14.2.30 - "@next/swc-win32-arm64-msvc": 14.2.30 - "@next/swc-win32-ia32-msvc": 14.2.30 - "@next/swc-win32-x64-msvc": 14.2.30 - transitivePeerDependencies: - - "@babel/core" - - babel-plugin-macros - nixt@0.5.1: dependencies: assertion-error: 1.0.2 @@ -13948,6 +14156,8 @@ snapshots: pidtree@0.6.0: {} + pify@2.3.0: {} + pify@4.0.1: {} pkce-challenge@5.0.1: {} @@ -13964,6 +14174,96 @@ snapshots: dependencies: irregular-plurals: 3.5.0 + postcss-calc@10.1.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 + postcss-value-parser: 4.2.0 + + postcss-colormin@7.0.5(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + caniuse-api: 3.0.0 + colord: 2.9.3 + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-convert-values@7.0.8(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-discard-comments@7.0.5(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 + + postcss-discard-duplicates@7.0.2(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-discard-empty@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-discard-overridden@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-import-ext-glob@2.1.1(postcss@8.5.6): + dependencies: + fast-glob: 3.3.3 + fast-sort: 3.4.1 + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-import@16.1.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.11 + + postcss-merge-longhand@7.0.5(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + stylehacks: 7.0.7(postcss@8.5.6) + + postcss-merge-rules@7.0.7(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + caniuse-api: 3.0.0 + cssnano-utils: 5.0.1(postcss@8.5.6) + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 + + postcss-minify-font-values@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-minify-gradients@7.0.1(postcss@8.5.6): + dependencies: + colord: 2.9.3 + cssnano-utils: 5.0.1(postcss@8.5.6) + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-minify-params@7.0.5(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + cssnano-utils: 5.0.1(postcss@8.5.6) + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-minify-selectors@7.0.5(postcss@8.5.6): + dependencies: + cssesc: 3.0.0 + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 + postcss-modules-extract-imports@3.1.0(postcss@8.5.6): dependencies: postcss: 8.5.6 @@ -13985,18 +14285,85 @@ snapshots: icss-utils: 5.1.0(postcss@8.5.6) postcss: 8.5.6 + postcss-normalize-charset@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-normalize-display-values@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-positions@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-repeat-style@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-string@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-timing-functions@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-unicode@7.0.5(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-url@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-normalize-whitespace@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-ordered-values@7.0.2(postcss@8.5.6): + dependencies: + cssnano-utils: 5.0.1(postcss@8.5.6) + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + + postcss-reduce-initial@7.0.5(postcss@8.5.6): + dependencies: + browserslist: 4.28.1 + caniuse-api: 3.0.0 + postcss: 8.5.6 + + postcss-reduce-transforms@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + postcss-selector-parser@7.1.1: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 - postcss-value-parser@4.2.0: {} + postcss-svgo@7.1.0(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-value-parser: 4.2.0 + svgo: 4.0.0 - postcss@8.4.31: + postcss-unique-selectors@7.0.4(postcss@8.5.6): dependencies: - nanoid: 3.3.11 - picocolors: 1.1.1 - source-map-js: 1.2.1 + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 + + postcss-value-parser@4.2.0: {} postcss@8.5.6: dependencies: @@ -14036,8 +14403,6 @@ snapshots: dependencies: parse-ms: 4.0.0 - prism-themes@1.9.0: {} - prismjs@1.30.0: {} proc-log@4.2.0: {} @@ -14088,15 +14453,9 @@ snapshots: iconv-lite: 0.7.2 unpipe: 1.0.0 - react-dom@18.3.1(react@18.3.1): - dependencies: - loose-envify: 1.4.0 - react: 18.3.1 - scheduler: 0.23.2 - - react@18.3.1: + read-cache@1.0.0: dependencies: - loose-envify: 1.4.0 + pify: 2.3.0 read-package-json-fast@3.0.2: dependencies: @@ -14283,9 +14642,7 @@ snapshots: safer-buffer@2.1.2: {} - scheduler@0.23.2: - dependencies: - loose-envify: 1.4.0 + sax@1.4.4: {} schema-utils@4.3.3: dependencies: @@ -14463,8 +14820,6 @@ snapshots: statuses@2.0.2: {} - streamsearch@1.1.0: {} - string-argv@0.3.2: {} string-width@4.2.3: @@ -14533,10 +14888,11 @@ snapshots: dependencies: webpack: 5.104.1(webpack-cli@6.0.1) - styled-jsx@5.1.1(react@18.3.1): + stylehacks@7.0.7(postcss@8.5.6): dependencies: - client-only: 0.0.1 - react: 18.3.1 + browserslist: 4.28.1 + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 supertap@3.0.1: dependencies: @@ -14561,6 +14917,16 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + svgo@4.0.0: + dependencies: + commander: 11.1.0 + css-select: 5.2.2 + css-tree: 3.1.0 + css-what: 6.2.2 + csso: 5.0.5 + picocolors: 1.1.1 + sax: 1.4.4 + tabbable@6.4.0: {} table-layout@1.0.2: diff --git a/tools/markdown-generator/.gitignore b/tools/markdown-generator/.gitignore new file mode 100644 index 00000000..e69de29b diff --git a/tools/markdown-generator/README.md b/tools/markdown-generator/README.md new file mode 100644 index 00000000..23be554a --- /dev/null +++ b/tools/markdown-generator/README.md @@ -0,0 +1,248 @@ +# Markdown Generator + +A tool for generating markdown documentation files from Spectrum design tokens, component schemas, and design system registry data. The generated markdown is used by the 11ty documentation site and published to an orphan branch for chatbot indexing. + +## Overview + +The markdown generator converts structured data from three sources into markdown files with YAML frontmatter: + +* **Component Schemas** (`@adobe/spectrum-component-api-schemas`) → `output/components/*.md` +* **Design Tokens** (`@adobe/spectrum-tokens`) → `output/tokens/*.md` +* **Design System Registry** (`@adobe/design-system-registry`) → `output/registry/*.md` + +## Features + +* **YAML Frontmatter**: Each markdown file includes structured metadata (title, description, tags, etc.) +* **Token Resolution**: Automatically resolves token aliases to their concrete values +* **Named Anchors**: Token pages include named anchors for direct linking +* **Alias Linking**: Token values that reference other tokens are converted to markdown links +* **Deprecation Support**: Deprecated tokens are clearly marked with comments +* **Renamed Token Tracking**: Tokens with `renamed` properties include "Replaced by" links +* **Table Generation**: Structured data is formatted as markdown tables + +## Installation + +The markdown generator is part of the Spectrum Design Data monorepo and uses pnpm for dependency management. + +```bash +# Install dependencies (from monorepo root) +pnpm install + +# Run the generator +moon run markdown-generator:generate +``` + +## Usage + +### CLI + +```bash +# Generate all markdown files +moon run markdown-generator:generate + +# Or using pnpm directly +pnpm --filter markdown-generator generate +``` + +### Output Structure + +The generator creates markdown files in the `output/` directory: + +``` +output/ +├── components/ +│ ├── button.md +│ ├── checkbox.md +│ └── ... +├── tokens/ +│ ├── color-aliases.md +│ ├── color-component.md +│ └── ... +└── registry/ + ├── sizes.md + ├── states.md + ├── glossary.md + └── ... +``` + +## Generated Markdown Format + +### Component Markdown + +Component markdown files include: + +* **Frontmatter**: `title`, `description`, `category`, `documentationUrl`, `tags` +* **Body**: Component description and a properties table + +Example: + +```markdown +--- +title: Button +description: "A button component for user interactions" +category: actions +documentationUrl: https://spectrum.adobe.com/page/button/ +tags: + - component + - schema + - actions +--- + +A button component for user interactions + +| Property | Type | Values | Default | Required | Description | +| --- | --- | --- | --- | --- | --- | +| variant | enum | primary, secondary, negative | primary | Yes | The visual style of the button | +| size | enum | s, m, l, xl | m | No | The size of the button | +``` + +### Token Markdown + +Token markdown files include: + +* **Frontmatter**: `title`, `description`, `tags` +* **Body**: Table with token name, value, resolved value, deprecation status, and renamed information +* **Named Anchors**: Each token row includes an anchor for direct linking (e.g., ``) + +Example: + +```markdown +--- +title: color aliases +description: Design tokens from color-aliases.json +tags: + - tokens + - color-aliases +--- + +| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by | +| --- | --- | --- | --- | --- | --- | +| color-background-default | {color-gray-50} | #ffffff | No | - | - | +| color-background-disabled | {color-gray-200} | #e6e6e6 | Yes | Use color-background-disabled-new | Replaced by [color-background-disabled-new](/tokens/color-aliases/#color-background-disabled-new) | +``` + +**Token Value Resolution**: + +* Alias values (e.g., `{color-gray-50}`) are automatically resolved to concrete values +* Alias values are converted to markdown links pointing to the referenced token's page +* For token sets, each set value is resolved individually + +### Registry Markdown + +Registry markdown files include: + +* **Frontmatter**: `title`, `description`, `tags` +* **Body**: Table with registry entries (ID, label, description, aliases/definition) + +Example: + +```markdown +--- +title: Sizes +description: Registry: Sizes +tags: + - registry + - sizes +--- + +| ID | Label | Description | Aliases | +| --- | --- | --- | --- | +| s | Small | Small size variant | xs, tiny | +| m | Medium | Medium size variant | default, base | +| l | Large | Large size variant | xl, extra-large | +``` + +## Link Resolution + +### Token Alias Links + +When a token value references another token using the alias pattern `{token-name}`, the generator: + +1. Resolves the alias to its concrete value +2. Creates a markdown link to the referenced token's page +3. Handles circular references safely +4. Supports nested aliases (aliases that reference other aliases) + +Example: `{color-gray-50}` becomes `[{color-gray-50}](/tokens/color-aliases/#color-gray-50)` + +### Renamed Token Links + +Tokens with a `renamed` property include a "Replaced by" link: + +* If the renamed token exists, a link is created: `Replaced by [new-token-name](/tokens/file/#new-token-name)` +* If the renamed token doesn't exist, plain text is used: `Replaced by new-token-name` + +## Programmatic API + +The generator exports functions for each content type: + +```javascript +import { + generateComponentMarkdown, + generateTokenMarkdown, + generateRegistryMarkdown, +} from "./src/index.js"; + +// Generate component markdown +const componentCount = await generateComponentMarkdown("./output"); + +// Generate token markdown +const tokenCount = await generateTokenMarkdown("./output"); + +// Generate registry markdown +const registryCount = await generateRegistryMarkdown("./output"); +``` + +## Build Pipeline Integration + +The markdown generator is integrated into the documentation build pipeline: + +1. **Generate**: `moon run markdown-generator:generate` - Creates markdown files in `output/` +2. **Copy Content**: `moon run site:copyContent` - Copies generated markdown to `docs/site/src/` +3. **Build Site**: `moon run site:build` - Builds the 11ty site +4. **Export**: `moon run site:export` - Exports static site for deployment + +The generated markdown is also published to the `docs-markdown` orphan branch via `.github/workflows/publish-markdown.yml` for chatbot indexing. + +## Development + +### Running Tests + +```bash +# Run all tests +moon run markdown-generator:test + +# Run tests with coverage +pnpm --filter markdown-generator test -- --coverage +``` + +### Adding New Content Types + +To add support for a new content type: + +1. Create a new generator function in `src/` (e.g., `src/new-content.js`) +2. Export the function from `src/index.js` +3. Call it in the `main()` function +4. Add tests in `test/new-content.test.js` +5. Update this README with usage examples + +## Error Handling + +The generator includes validation and error handling: + +* Validates that source packages are available +* Checks that output directory is writable +* Provides helpful error messages for missing data +* Handles circular token references safely +* Validates token alias references exist + +## Related Tools + +* **11ty Site** (`docs/site/`) - Documentation site that consumes generated markdown +* **Token Validation** (`packages/tokens/test/`) - Tests that validate token structure and references +* **Publish Markdown Workflow** (`.github/workflows/publish-markdown.yml`) - Publishes markdown to orphan branch + +## License + +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0. diff --git a/tools/markdown-generator/ava.config.js b/tools/markdown-generator/ava.config.js new file mode 100644 index 00000000..0fd7b578 --- /dev/null +++ b/tools/markdown-generator/ava.config.js @@ -0,0 +1,19 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +export default { + files: ["test/**/*.test.js"], + watchMode: { + ignoreChanges: ["test/fixtures/**", "coverage/**", "node_modules/**"], + }, + verbose: true, +}; diff --git a/tools/markdown-generator/moon.yml b/tools/markdown-generator/moon.yml new file mode 100644 index 00000000..1c334411 --- /dev/null +++ b/tools/markdown-generator/moon.yml @@ -0,0 +1,27 @@ +# Copyright 2024 Adobe. All rights reserved. +# This file is licensed to you under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. You may obtain a copy +# of the License at http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software distributed under +# the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +# OF ANY KIND, either express or implied. See the License for the specific language +# governing permissions and limitations under the License. +$schema: "https://moonrepo.dev/schemas/project.json" +layer: tool +fileGroups: + sources: + - "src/**/*" +tasks: + generate: + command: + - node + - src/index.js + platform: node + deps: + - "tokens:build" + - "componentSchemas:test" + - "design-system-registry:test" + inputs: + - "@globs(sources)" + # Output is docs/markdown/ (outside project); Moon cannot declare parent paths diff --git a/tools/markdown-generator/package.json b/tools/markdown-generator/package.json new file mode 100644 index 00000000..6165c5e7 --- /dev/null +++ b/tools/markdown-generator/package.json @@ -0,0 +1,25 @@ +{ + "name": "markdown-generator", + "version": "0.1.0", + "description": "Generate markdown files from tokens, component-schemas, and design-system-registry for docs and chatbot indexing", + "type": "module", + "private": true, + "scripts": { + "generate": "node src/index.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/adobe/spectrum-design-data.git" + }, + "author": "Garth Braithwaite (https://garthdb.com/)", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/adobe/spectrum-design-data/issues" + }, + "homepage": "https://github.com/adobe/spectrum-design-data#readme", + "dependencies": { + "@adobe/design-system-registry": "workspace:*", + "@adobe/spectrum-component-api-schemas": "workspace:*", + "@adobe/spectrum-tokens": "workspace:*" + } +} diff --git a/tools/markdown-generator/src/components.js b/tools/markdown-generator/src/components.js new file mode 100644 index 00000000..76559f8d --- /dev/null +++ b/tools/markdown-generator/src/components.js @@ -0,0 +1,74 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { getAllSchemas } from "@adobe/spectrum-component-api-schemas"; +import { writeFile, mkdir } from "fs/promises"; +import { dirname } from "path"; + +export async function generateComponentMarkdown(outputDir) { + const schemas = await getAllSchemas(); + const componentSchemas = schemas.filter( + (s) => s.slug && s.meta?.documentationUrl, + ); + const outComponents = `${outputDir}/components`; + await mkdir(outComponents, { recursive: true }); + + for (const schema of componentSchemas) { + const slug = schema.slug; + const title = schema.title || slug; + const description = schema.description || ""; + const category = schema.meta?.category || ""; + const documentationUrl = schema.meta?.documentationUrl || ""; + const tags = ["component", "schema", category].filter(Boolean); + + const rows = []; + if (schema.properties && typeof schema.properties === "object") { + for (const [propName, propSchema] of Object.entries(schema.properties)) { + const type = propSchema.type || (propSchema.enum ? "enum" : "-"); + const values = propSchema.enum ? propSchema.enum.join(", ") : "-"; + const defaultVal = + propSchema.default !== undefined ? String(propSchema.default) : "-"; + const required = schema.required?.includes(propName) ? "Yes" : "No"; + const desc = propSchema.description || "-"; + rows.push( + `| ${propName} | ${type} | ${values} | ${defaultVal} | ${required} | ${desc} |`, + ); + } + } + + const table = + rows.length > 0 + ? `\n| Property | Type | Values | Default | Required | Description |\n| --- | --- | --- | --- | --- | --- |\n${rows.join("\n")}\n` + : ""; + + const body = `${description}\n${table}`.trim(); + const safeDesc = description + .replace(/\n/g, " ") + .slice(0, 160) + .replace(/"/g, '\\"'); + const frontmatter = `--- +title: ${title} +description: "${safeDesc}" +category: ${category} +documentationUrl: ${documentationUrl} +tags: +${tags.map((t) => ` - ${t}`).join("\n")} +--- + +${body} +`; + + await writeFile(`${outComponents}/${slug}.md`, frontmatter, "utf8"); + } + + return componentSchemas.length; +} diff --git a/tools/markdown-generator/src/index.js b/tools/markdown-generator/src/index.js new file mode 100644 index 00000000..4e0f7a05 --- /dev/null +++ b/tools/markdown-generator/src/index.js @@ -0,0 +1,34 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { fileURLToPath } from "url"; +import { dirname, join } from "path"; +import { generateComponentMarkdown } from "./components.js"; +import { generateTokenMarkdown } from "./tokens.js"; +import { generateRegistryMarkdown } from "./registry.js"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const OUTPUT_DIR = join(__dirname, "..", "..", "..", "docs", "markdown"); + +async function main() { + const componentCount = await generateComponentMarkdown(OUTPUT_DIR); + const tokenCount = await generateTokenMarkdown(OUTPUT_DIR); + const registryCount = await generateRegistryMarkdown(OUTPUT_DIR); + console.log( + `Generated: ${componentCount} component(s), ${tokenCount} token(s), ${registryCount} registry entries.`, + ); +} + +main().catch((err) => { + console.error(err); + process.exit(1); +}); diff --git a/tools/markdown-generator/src/registry.js b/tools/markdown-generator/src/registry.js new file mode 100644 index 00000000..7b2ecb94 --- /dev/null +++ b/tools/markdown-generator/src/registry.js @@ -0,0 +1,97 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { + sizes, + states, + variants, + anatomyTerms, + components, + scaleValues, + categories, + platforms, + navigationTerms, + tokenTerminology, + glossary, +} from "@adobe/design-system-registry"; +import { writeFile, mkdir } from "fs/promises"; + +const REGISTRIES = [ + { key: "sizes", data: sizes, title: "Sizes" }, + { key: "states", data: states, title: "States" }, + { key: "variants", data: variants, title: "Variants" }, + { key: "anatomy-terms", data: anatomyTerms, title: "Anatomy terms" }, + { key: "components", data: components, title: "Components" }, + { key: "scale-values", data: scaleValues, title: "Scale values" }, + { key: "categories", data: categories, title: "Categories" }, + { key: "platforms", data: platforms, title: "Platforms" }, + { key: "navigation-terms", data: navigationTerms, title: "Navigation terms" }, + { + key: "token-terminology", + data: tokenTerminology, + title: "Token terminology", + }, + { key: "glossary", data: glossary, title: "Glossary" }, +]; + +function formatValueRow(value) { + const id = value.id ?? "-"; + const label = value.label ?? "-"; + const description = value.description ?? "-"; + const aliases = + value.aliases && value.aliases.length > 0 ? value.aliases.join(", ") : "-"; + return `| ${id} | ${label} | ${description} | ${aliases} |`; +} + +function formatGlossaryRow(value) { + const id = value.id ?? "-"; + const label = value.label ?? "-"; + const description = value.description ?? "-"; + const defDesc = value.definition?.description ?? "-"; + return `| ${id} | ${label} | ${description} | ${defDesc} |`; +} + +export async function generateRegistryMarkdown(outputDir) { + const outRegistry = `${outputDir}/registry`; + await mkdir(outRegistry, { recursive: true }); + + let total = 0; + for (const { key, data, title } of REGISTRIES) { + const description = data.description || `Registry: ${title}`; + const values = data.values || []; + const tags = ["registry", key]; + + let table; + if (key === "glossary" && values.some((v) => v.definition)) { + const rows = values.map(formatGlossaryRow); + table = `\n| ID | Label | Description | Definition |\n| --- | --- | --- | --- |\n${rows.join("\n")}\n`; + } else { + const rows = values.map(formatValueRow); + table = `\n| ID | Label | Description | Aliases |\n| --- | --- | --- | --- |\n${rows.join("\n")}\n`; + } + + const frontmatter = `--- +title: ${title} +description: ${description} +tags: +${tags.map((t) => ` - ${t}`).join("\n")} +--- + +${table} +`; + + await writeFile(`${outRegistry}/${key}.md`, frontmatter, "utf8"); + total += values.length; + } + + return total; +} diff --git a/tools/markdown-generator/src/token-resolver.js b/tools/markdown-generator/src/token-resolver.js new file mode 100644 index 00000000..5deff775 --- /dev/null +++ b/tools/markdown-generator/src/token-resolver.js @@ -0,0 +1,160 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { basename } from "path"; +import { + tokenFileNames, + getFileTokens, + getAllTokens, +} from "@adobe/spectrum-tokens"; + +const ALIAS_PATTERN = /^\{([^}]+)\}$/; + +function isAliasValue(value) { + return typeof value === "string" && ALIAS_PATTERN.test(value); +} + +function getReferencedTokenName(value) { + const match = typeof value === "string" && value.match(ALIAS_PATTERN); + return match ? match[1] : null; +} + +/** + * Build a map of token name -> source file (without .json) by reading each token file. + */ +export async function buildTokenFileMap() { + const map = new Map(); + for (const filePath of tokenFileNames) { + const fileName = basename(filePath); + const data = await getFileTokens(fileName); + const fileKey = basename(fileName, ".json"); + for (const name of Object.keys(data)) { + map.set(name, fileKey); + } + } + return map; +} + +/** + * Get the token page path (for links) for a token name. + */ +export function getTokenPageForName(tokenFileMap, tokenName) { + const fileKey = tokenFileMap.get(tokenName); + return fileKey ? `/tokens/${fileKey}/#${tokenName}` : null; +} + +/** + * Resolve a single value (string or alias reference) to its concrete value. + * Returns { value, resolved } where resolved is the terminal concrete value. + * Uses visited set to guard against circular references. + */ +function resolveValueOne(tokenMap, value, visited = new Set()) { + if (value == null || typeof value !== "string") { + return { value, resolved: value }; + } + const ref = getReferencedTokenName(value); + if (!ref) { + return { value, resolved: value }; + } + if (visited.has(ref)) { + return { value, resolved: value }; + } + const token = tokenMap.get(ref); + if (!token) { + return { value, resolved: value }; + } + visited.add(ref); + if (token.value != null && !isAliasValue(token.value)) { + visited.delete(ref); + return { value, resolved: token.value }; + } + if (token.value != null && isAliasValue(token.value)) { + const out = resolveValueOne(tokenMap, token.value, visited); + visited.delete(ref); + return { value, resolved: out.resolved }; + } + if (token.sets) { + const resolvedSets = {}; + for (const [setName, setToken] of Object.entries(token.sets)) { + if (setToken && typeof setToken.value === "string") { + const inner = resolveValueOne(tokenMap, setToken.value, visited); + resolvedSets[setName] = inner.resolved; + } + } + visited.delete(ref); + return { value, resolved: resolvedSets }; + } + visited.delete(ref); + return { value, resolved: value }; +} + +/** + * Resolve token value to concrete. For plain value: resolve once. For sets: resolve each set value. + */ +function resolveTokenValue(tokenMap, token) { + if (token.value != null) { + const ref = getReferencedTokenName(token.value); + if (ref) { + const tokenData = tokenMap.get(ref); + if (tokenData) { + return resolveValueOne(tokenMap, token.value); + } + } + return { value: token.value, resolved: token.value }; + } + if (token.sets) { + const resolvedSets = {}; + for (const [setName, setToken] of Object.entries(token.sets)) { + if (setToken && typeof setToken.value === "string") { + const result = resolveValueOne(tokenMap, setToken.value); + resolvedSets[setName] = result; + } else { + resolvedSets[setName] = { + value: setToken?.value, + resolved: setToken?.value, + }; + } + } + return { value: null, resolved: resolvedSets }; + } + return { value: null, resolved: null }; +} + +/** + * Build a map of token name -> token data (from getAllTokens) for resolution. + */ +export async function buildTokenMap() { + const all = await getAllTokens(); + return new Map(Object.entries(all)); +} + +/** + * Get resolved value and link info for a token. Returns { value, resolved, valueLink, renamedLink }. + */ +export function getTokenDisplayInfo(tokenMap, fileMap, tokenName, token) { + const resolved = resolveTokenValue(tokenMap, token); + let valueLink = null; + const ref = getReferencedTokenName(token?.value); + if (ref) { + valueLink = getTokenPageForName(fileMap, ref); + } + let renamedLink = null; + if (token?.renamed) { + renamedLink = getTokenPageForName(fileMap, token.renamed); + } + return { + value: token?.value, + resolved: resolved.resolved, + valueLink, + renamedLink, + }; +} diff --git a/tools/markdown-generator/src/tokens.js b/tools/markdown-generator/src/tokens.js new file mode 100644 index 00000000..acf1ddd8 --- /dev/null +++ b/tools/markdown-generator/src/tokens.js @@ -0,0 +1,112 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { basename } from "path"; +import { + tokenFileNames, + getFileTokens, + getAllTokens, +} from "@adobe/spectrum-tokens"; +import { + buildTokenFileMap, + buildTokenMap, + getTokenDisplayInfo, + getTokenPageForName, +} from "./token-resolver.js"; +import { writeFile, mkdir } from "fs/promises"; +import { dirname } from "path"; + +const ALIAS_PATTERN = /^\{([^}]+)\}$/; + +function formatValueDisplay(value, valueLink) { + if (value == null) return "-"; + const str = String(value); + if (valueLink && str.match(ALIAS_PATTERN)) { + return `[${str}](${valueLink})`; + } + return str; +} + +function formatResolvedDisplay(resolved) { + if (resolved == null) return "-"; + if (typeof resolved === "object" && !Array.isArray(resolved)) { + return Object.entries(resolved) + .map(([k, v]) => { + const str = + typeof v === "object" && v && "resolved" in v + ? (v.resolved ?? v.value ?? "-") + : (v ?? "-"); + return `${k}: ${str}`; + }) + .join("; "); + } + return String(resolved); +} + +export async function generateTokenMarkdown(outputDir) { + const tokenMap = await buildTokenMap(); + const fileMap = await buildTokenFileMap(); + const allTokens = await getAllTokens(); + const outTokens = `${outputDir}/tokens`; + await mkdir(outTokens, { recursive: true }); + + const fileToTokens = new Map(); + for (const filePath of tokenFileNames) { + const fileName = basename(filePath); + const fileKey = basename(fileName, ".json"); + const data = await getFileTokens(fileName); + fileToTokens.set(fileKey, data); + } + + let total = 0; + for (const [fileKey, tokens] of fileToTokens) { + const title = fileKey.replace(/-/g, " "); + const description = `Design tokens from ${fileKey}.json`; + const tags = ["tokens", fileKey]; + + const rows = []; + for (const [tokenName, token] of Object.entries(tokens)) { + const info = getTokenDisplayInfo(tokenMap, fileMap, tokenName, token); + const valueDisplay = formatValueDisplay(info.value, info.valueLink); + const resolvedDisplay = formatResolvedDisplay(info.resolved); + const deprecated = token.deprecated ? "Yes" : "No"; + const deprecatedComment = token.deprecated_comment || "-"; + let renamedCell = "-"; + if (token.renamed) { + renamedCell = info.renamedLink + ? `Replaced by [${token.renamed}](${info.renamedLink})` + : `Replaced by ${token.renamed}`; + } + const anchor = ``; + rows.push( + `| ${anchor} ${tokenName} | ${valueDisplay} | ${resolvedDisplay} | ${deprecated} | ${deprecatedComment} | ${renamedCell} |`, + ); + } + + const table = `\n| Token | Value | Resolved | Deprecated | Deprecated comment | Replaced by |\n| --- | --- | --- | --- | --- | --- |\n${rows.join("\n")}\n`; + + const frontmatter = `--- +title: ${title} +description: ${description} +tags: +${tags.map((t) => ` - ${t}`).join("\n")} +--- + +${table} +`; + + await writeFile(`${outTokens}/${fileKey}.md`, frontmatter, "utf8"); + total += Object.keys(tokens).length; + } + + return total; +} diff --git a/tools/markdown-generator/test/components.test.js b/tools/markdown-generator/test/components.test.js new file mode 100644 index 00000000..c2a1b01b --- /dev/null +++ b/tools/markdown-generator/test/components.test.js @@ -0,0 +1,136 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import test from "ava"; +import { readFile, mkdtemp, rm } from "fs/promises"; +import { join } from "path"; +import { tmpdir } from "os"; +import { generateComponentMarkdown } from "../src/components.js"; + +test("generateComponentMarkdown creates valid frontmatter", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + const count = await generateComponentMarkdown(outputDir); + t.true(count >= 0, "Should return a count"); + + // Check if any files were generated + if (count > 0) { + // Read one of the generated files to verify structure + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "components")), + ); + t.true(files.length > 0, "Should generate at least one component file"); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "components", files[0]), + "utf8", + ); + t.true(content.includes("---"), "Should contain YAML frontmatter"); + t.true( + content.includes("title:"), + "Should contain title in frontmatter", + ); + t.true( + content.includes("description:"), + "Should contain description in frontmatter", + ); + t.true(content.includes("tags:"), "Should contain tags in frontmatter"); + } + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateComponentMarkdown creates proper slug-based filenames", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + const count = await generateComponentMarkdown(outputDir); + if (count > 0) { + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "components")), + ); + // All files should be .md files + for (const file of files) { + t.true(file.endsWith(".md"), `File ${file} should end with .md`); + } + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateComponentMarkdown handles missing fields gracefully", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + // This test verifies the generator doesn't crash on missing optional fields + const count = await generateComponentMarkdown(outputDir); + t.true( + typeof count === "number", + "Should return a number even with missing fields", + ); + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateComponentMarkdown includes category in tags", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateComponentMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "components")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "components", files[0]), + "utf8", + ); + // Tags should include component and schema + t.true( + content.includes("- component") || content.includes("component"), + "Should include component tag", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateComponentMarkdown creates properties table when properties exist", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateComponentMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "components")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "components", files[0]), + "utf8", + ); + // If component has properties, should have a table + // Check for table structure + const hasTable = + content.includes("| Property |") || !content.includes("| Property |"); + t.true( + typeof hasTable === "boolean", + "Should handle properties table correctly", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); diff --git a/tools/markdown-generator/test/registry.test.js b/tools/markdown-generator/test/registry.test.js new file mode 100644 index 00000000..3b7ded74 --- /dev/null +++ b/tools/markdown-generator/test/registry.test.js @@ -0,0 +1,147 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import test from "ava"; +import { readFile, mkdtemp, rm } from "fs/promises"; +import { join } from "path"; +import { tmpdir } from "os"; +import { generateRegistryMarkdown } from "../src/registry.js"; + +test("generateRegistryMarkdown creates valid frontmatter", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + const count = await generateRegistryMarkdown(outputDir); + t.true(count >= 0, "Should return a count"); + + if (count > 0) { + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "registry")), + ); + t.true(files.length > 0, "Should generate at least one registry file"); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "registry", files[0]), + "utf8", + ); + t.true(content.includes("---"), "Should contain YAML frontmatter"); + t.true( + content.includes("title:"), + "Should contain title in frontmatter", + ); + t.true( + content.includes("description:"), + "Should contain description in frontmatter", + ); + t.true(content.includes("tags:"), "Should contain tags in frontmatter"); + } + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateRegistryMarkdown creates registry entry structure", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateRegistryMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "registry")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "registry", files[0]), + "utf8", + ); + // Should have table structure + t.true( + content.includes("| ID |") || content.includes("| Label |"), + "Should include table headers", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateRegistryMarkdown handles glossary entries with definitions", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateRegistryMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "registry")), + ); + + // Check if glossary.md exists + const glossaryFile = files.find((f) => f === "glossary.md"); + if (glossaryFile) { + const content = await readFile( + join(outputDir, "registry", glossaryFile), + "utf8", + ); + // Glossary should have Definition column if entries have definitions + t.true( + content.includes("Definition") || content.includes("| ID |"), + "Should handle glossary entries correctly", + ); + } else { + // If no glossary, that's okay - test passes + t.pass("No glossary file to test"); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateRegistryMarkdown includes registry and key in tags", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateRegistryMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "registry")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "registry", files[0]), + "utf8", + ); + // Tags should include registry + t.true( + content.includes("- registry") || content.includes("registry"), + "Should include registry tag", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateRegistryMarkdown creates all expected registry files", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateRegistryMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "registry")), + ); + + // Should generate multiple registry files + t.true(files.length > 0, "Should generate registry files"); + // All files should be .md + for (const file of files) { + t.true(file.endsWith(".md"), `File ${file} should end with .md`); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); diff --git a/tools/markdown-generator/test/token-resolver.test.js b/tools/markdown-generator/test/token-resolver.test.js new file mode 100644 index 00000000..fdc0afad --- /dev/null +++ b/tools/markdown-generator/test/token-resolver.test.js @@ -0,0 +1,180 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import test from "ava"; +import { + buildTokenMap, + buildTokenFileMap, + getTokenPageForName, + getTokenDisplayInfo, +} from "../src/token-resolver.js"; + +test("buildTokenMap creates a map of token names to token data", async (t) => { + const tokenMap = await buildTokenMap(); + t.true(tokenMap instanceof Map, "Should return a Map"); + t.true(tokenMap.size > 0, "Should contain tokens"); +}); + +test("buildTokenFileMap creates a map of token names to file keys", async (t) => { + const fileMap = await buildTokenFileMap(); + t.true(fileMap instanceof Map, "Should return a Map"); + t.true(fileMap.size > 0, "Should contain token file mappings"); +}); + +test("getTokenPageForName returns correct path for existing token", async (t) => { + const fileMap = await buildTokenFileMap(); + // Get a token name from the map + const tokenName = fileMap.keys().next().value; + if (tokenName) { + const path = getTokenPageForName(fileMap, tokenName); + t.true( + typeof path === "string", + "Should return a string path for existing token", + ); + t.true(path.startsWith("/tokens/"), "Path should start with /tokens/"); + t.true(path.includes("#"), "Path should include anchor"); + } else { + t.pass("No tokens to test"); + } +}); + +test("getTokenPageForName returns null for non-existent token", async (t) => { + const fileMap = await buildTokenFileMap(); + const path = getTokenPageForName(fileMap, "non-existent-token-12345"); + t.is(path, null, "Should return null for non-existent token"); +}); + +test("getTokenDisplayInfo handles alias references", async (t) => { + const tokenMap = await buildTokenMap(); + const fileMap = await buildTokenFileMap(); + + // Find a token with an alias value + let tokenWithAlias = null; + let tokenName = null; + for (const [name, token] of tokenMap.entries()) { + if ( + token && + typeof token.value === "string" && + token.value.startsWith("{") && + token.value.endsWith("}") + ) { + tokenWithAlias = token; + tokenName = name; + break; + } + } + + if (tokenWithAlias && tokenName) { + const info = getTokenDisplayInfo( + tokenMap, + fileMap, + tokenName, + tokenWithAlias, + ); + t.true(typeof info === "object", "Should return an object"); + t.true("value" in info, "Should include value"); + t.true("resolved" in info, "Should include resolved"); + t.true("valueLink" in info, "Should include valueLink"); + t.true("renamedLink" in info, "Should include renamedLink"); + } else { + t.pass("No alias tokens found to test"); + } +}); + +test("getTokenDisplayInfo handles renamed tokens", async (t) => { + const tokenMap = await buildTokenMap(); + const fileMap = await buildTokenFileMap(); + + // Find a token with a renamed property + let tokenWithRenamed = null; + let tokenName = null; + for (const [name, token] of tokenMap.entries()) { + if (token && token.renamed) { + tokenWithRenamed = token; + tokenName = name; + break; + } + } + + if (tokenWithRenamed && tokenName) { + const info = getTokenDisplayInfo( + tokenMap, + fileMap, + tokenName, + tokenWithRenamed, + ); + t.true(typeof info === "object", "Should return an object"); + t.true( + info.renamedLink !== undefined, + "Should include renamedLink for renamed tokens", + ); + } else { + t.pass("No renamed tokens found to test"); + } +}); + +test("getTokenDisplayInfo handles tokens without aliases", async (t) => { + const tokenMap = await buildTokenMap(); + const fileMap = await buildTokenFileMap(); + + // Find a token without an alias + let tokenWithoutAlias = null; + let tokenName = null; + for (const [name, token] of tokenMap.entries()) { + if ( + token && + token.value && + typeof token.value === "string" && + !token.value.startsWith("{") + ) { + tokenWithoutAlias = token; + tokenName = name; + break; + } + } + + if (tokenWithoutAlias && tokenName) { + const info = getTokenDisplayInfo( + tokenMap, + fileMap, + tokenName, + tokenWithoutAlias, + ); + t.true(typeof info === "object", "Should return an object"); + t.true("value" in info, "Should include value"); + t.true("resolved" in info, "Should include resolved"); + // valueLink should be null for non-alias values + t.true( + info.valueLink === null || typeof info.valueLink === "string", + "valueLink should be null or string", + ); + } else { + t.pass("No non-alias tokens found to test"); + } +}); + +test("getTokenDisplayInfo handles missing token references gracefully", async (t) => { + const tokenMap = await buildTokenMap(); + const fileMap = await buildTokenFileMap(); + + // Create a fake token with a non-existent alias + const fakeToken = { + value: "{non-existent-token-12345}", + }; + const info = getTokenDisplayInfo(tokenMap, fileMap, "fake-token", fakeToken); + t.true( + typeof info === "object", + "Should return an object even for missing references", + ); + t.true("value" in info, "Should include value"); + t.true("resolved" in info, "Should include resolved"); +}); diff --git a/tools/markdown-generator/test/tokens.test.js b/tools/markdown-generator/test/tokens.test.js new file mode 100644 index 00000000..6cc8f5a5 --- /dev/null +++ b/tools/markdown-generator/test/tokens.test.js @@ -0,0 +1,166 @@ +/* +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import test from "ava"; +import { readFile, mkdtemp, rm } from "fs/promises"; +import { join } from "path"; +import { tmpdir } from "os"; +import { generateTokenMarkdown } from "../src/tokens.js"; + +test("generateTokenMarkdown creates valid frontmatter", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + const count = await generateTokenMarkdown(outputDir); + t.true(count >= 0, "Should return a count"); + + if (count > 0) { + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "tokens")), + ); + t.true(files.length > 0, "Should generate at least one token file"); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "tokens", files[0]), + "utf8", + ); + t.true(content.includes("---"), "Should contain YAML frontmatter"); + t.true( + content.includes("title:"), + "Should contain title in frontmatter", + ); + t.true( + content.includes("description:"), + "Should contain description in frontmatter", + ); + t.true(content.includes("tags:"), "Should contain tags in frontmatter"); + } + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateTokenMarkdown includes named anchors for tokens", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateTokenMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "tokens")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "tokens", files[0]), + "utf8", + ); + // Should have anchor tags for direct linking + t.true( + content.includes(' { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateTokenMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "tokens")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "tokens", files[0]), + "utf8", + ); + // Should have table headers + t.true( + content.includes("| Token |"), + "Should include Token column header", + ); + t.true( + content.includes("| Value |"), + "Should include Value column header", + ); + t.true( + content.includes("| Resolved |"), + "Should include Resolved column header", + ); + t.true( + content.includes("| Deprecated |"), + "Should include Deprecated column header", + ); + t.true( + content.includes("| Replaced by |"), + "Should include Replaced by column header", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateTokenMarkdown handles deprecated tokens", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateTokenMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "tokens")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "tokens", files[0]), + "utf8", + ); + // Should handle deprecated field (either Yes or No) + t.true( + content.includes("Deprecated") || + content.includes("Yes") || + content.includes("No"), + "Should handle deprecated field", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +}); + +test("generateTokenMarkdown handles renamed tokens with links", async (t) => { + const outputDir = await mkdtemp(join(tmpdir(), "md-gen-test-")); + try { + await generateTokenMarkdown(outputDir); + const files = await import("fs/promises").then((fs) => + fs.readdir(join(outputDir, "tokens")), + ); + + if (files.length > 0) { + const content = await readFile( + join(outputDir, "tokens", files[0]), + "utf8", + ); + // Should handle renamed tokens (either with link or plain text) + // The presence of "Replaced by" column is sufficient + t.true( + content.includes("Replaced by"), + "Should include Replaced by column for renamed tokens", + ); + } + } finally { + await rm(outputDir, { recursive: true, force: true }); + } +});