diff --git a/.lintstagedrc.js b/.lintstagedrc.js index 3d1d72ef..a1e4d9b7 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -1,9 +1,14 @@ export default { "**/*.{js,jsx,ts,tsx,json,yml,yaml}": ["prettier --write"], "**/*.md": (files) => { - // Filter out changeset and CHANGELOG files - they need special handling + // 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 const processableFiles = files.filter( - (file) => !file.includes(".changeset/") && !file.includes("CHANGELOG.md"), + (file) => + !file.includes(".changeset/") && + !file.includes("CHANGELOG.md") && + !file.includes("docs/s2-docs/"), ); if (processableFiles.length === 0) return []; // Use -o flag (no path) to write back to same file diff --git a/docs/s2-docs/components/actions/action-bar.md b/docs/s2-docs/components/actions/action-bar.md index db652337..1e72d55d 100644 --- a/docs/s2-docs/components/actions/action-bar.md +++ b/docs/s2-docs/components/actions/action-bar.md @@ -1,14 +1,13 @@ --- - title: "Action bar" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/action-bar/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions +- components-actions parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/action-button.md b/docs/s2-docs/components/actions/action-button.md index 0d41a757..5af9e6e3 100644 --- a/docs/s2-docs/components/actions/action-button.md +++ b/docs/s2-docs/components/actions/action-button.md @@ -1,20 +1,19 @@ --- - title: "Action button" -source\_url: -last\_updated: 2026-02-01 +source_url: https://s2.spectrum.corp.adobe.com/page/action-button/ +last_updated: 2026-02-01 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions -* action -* button -* interactive +- components-actions +- action +- button +- interactive related\_components: -* action-bar -* action-group +- action-bar +- action-group parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/action-group.md b/docs/s2-docs/components/actions/action-group.md index c1b5327c..cc395ea2 100644 --- a/docs/s2-docs/components/actions/action-group.md +++ b/docs/s2-docs/components/actions/action-group.md @@ -1,17 +1,16 @@ --- - title: "Action group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/action-group/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions +- components-actions related\_components: -* action-button -* button +- action-button +- button parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/button-group.md b/docs/s2-docs/components/actions/button-group.md index f0a81325..4d0686da 100644 --- a/docs/s2-docs/components/actions/button-group.md +++ b/docs/s2-docs/components/actions/button-group.md @@ -1,20 +1,19 @@ --- - title: "Button group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/button-group/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions -* action -* button -* interactive +- components-actions +- action +- button +- interactive related\_components: -* button -* close-button +- button +- close-button parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/button.md b/docs/s2-docs/components/actions/button.md index 80cc9c34..6320162b 100644 --- a/docs/s2-docs/components/actions/button.md +++ b/docs/s2-docs/components/actions/button.md @@ -1,22 +1,21 @@ --- - title: "Button" -source\_url: -last\_updated: 2026-02-01 +source_url: https://s2.spectrum.corp.adobe.com/page/button/ +last_updated: 2026-02-01 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions -* action -* button -* interactive +- components-actions +- action +- button +- interactive related\_components: -* action-group -* button-group -* progress-bar -* progress-circle +- action-group +- button-group +- progress-bar +- progress-circle parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/close-button.md b/docs/s2-docs/components/actions/close-button.md index c5227b16..9f125309 100644 --- a/docs/s2-docs/components/actions/close-button.md +++ b/docs/s2-docs/components/actions/close-button.md @@ -1,20 +1,19 @@ --- - title: "Close button" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/close-button/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions -* action -* button -* interactive +- components-actions +- action +- button +- interactive related\_components: -* button-group -* link +- button-group +- link parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/link.md b/docs/s2-docs/components/actions/link.md index 2fd52d89..2fff0eb7 100644 --- a/docs/s2-docs/components/actions/link.md +++ b/docs/s2-docs/components/actions/link.md @@ -1,17 +1,16 @@ --- - title: "Link" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/link/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions +- components-actions related\_components: -* close-button -* list-view +- close-button +- list-view parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/list-view.md b/docs/s2-docs/components/actions/list-view.md index 3f8c4f5f..61d90b2d 100644 --- a/docs/s2-docs/components/actions/list-view.md +++ b/docs/s2-docs/components/actions/list-view.md @@ -1,17 +1,16 @@ --- - title: "List view" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/list-view/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions +- components-actions related\_components: -* link -* menu +- link +- menu parent\_category: actions --- diff --git a/docs/s2-docs/components/actions/menu.md b/docs/s2-docs/components/actions/menu.md index bac1e907..082309ba 100644 --- a/docs/s2-docs/components/actions/menu.md +++ b/docs/s2-docs/components/actions/menu.md @@ -1,20 +1,19 @@ --- - title: "Menu" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/menu/ +last_updated: 2026-02-02 category: components/actions -component\_type: action +component_type: action status: published tags: -* components-actions -* navigation -* menu -* dropdown +- components-actions +- navigation +- menu +- dropdown related\_components: -* list-view -* cards +- list-view +- cards parent\_category: actions --- diff --git a/docs/s2-docs/components/containers/cards.md b/docs/s2-docs/components/containers/cards.md index 0d672d5a..2847481f 100644 --- a/docs/s2-docs/components/containers/cards.md +++ b/docs/s2-docs/components/containers/cards.md @@ -1,17 +1,16 @@ --- - title: "Cards" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/cards/ +last_updated: 2026-02-02 category: components/containers -component\_type: container +component_type: container status: published tags: -* components-containers +- components-containers related\_components: -* menu -* divider +- menu +- divider parent\_category: containers --- diff --git a/docs/s2-docs/components/containers/divider.md b/docs/s2-docs/components/containers/divider.md index 88217487..440bc521 100644 --- a/docs/s2-docs/components/containers/divider.md +++ b/docs/s2-docs/components/containers/divider.md @@ -1,14 +1,13 @@ --- - title: "Divider" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/divider/ +last_updated: 2026-02-02 category: components/containers -component\_type: container +component_type: container status: published tags: -* components-containers +- components-containers parent\_category: containers --- diff --git a/docs/s2-docs/components/containers/popover.md b/docs/s2-docs/components/containers/popover.md index 45a009c5..f66818a3 100644 --- a/docs/s2-docs/components/containers/popover.md +++ b/docs/s2-docs/components/containers/popover.md @@ -1,17 +1,16 @@ --- - title: "Popover" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/popover/ +last_updated: 2026-02-02 category: components/containers -component\_type: container +component_type: container status: published tags: -* components-containers +- components-containers related\_components: -* divider -* standard-panel +- divider +- standard-panel parent\_category: containers --- diff --git a/docs/s2-docs/components/containers/standard-panel.md b/docs/s2-docs/components/containers/standard-panel.md index b31f115e..5f793e9b 100644 --- a/docs/s2-docs/components/containers/standard-panel.md +++ b/docs/s2-docs/components/containers/standard-panel.md @@ -1,17 +1,16 @@ --- - title: "Standard panel" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/standard-panel/ +last_updated: 2026-02-02 category: components/containers -component\_type: container +component_type: container status: published tags: -* components-containers +- components-containers related\_components: -* popover -* table +- popover +- table parent\_category: containers --- diff --git a/docs/s2-docs/components/containers/table.md b/docs/s2-docs/components/containers/table.md index cac7992a..1318800e 100644 --- a/docs/s2-docs/components/containers/table.md +++ b/docs/s2-docs/components/containers/table.md @@ -1,17 +1,16 @@ --- - title: "Table" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/table/ +last_updated: 2026-02-02 category: components/containers -component\_type: container +component_type: container status: published tags: -* components-containers +- components-containers related\_components: -* standard-panel -* alert-banner +- standard-panel +- alert-banner parent\_category: containers --- diff --git a/docs/s2-docs/components/feedback/alert-banner.md b/docs/s2-docs/components/feedback/alert-banner.md index 2ade976d..5f376acb 100644 --- a/docs/s2-docs/components/feedback/alert-banner.md +++ b/docs/s2-docs/components/feedback/alert-banner.md @@ -1,19 +1,18 @@ --- - title: "Alert banner" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/alert-banner/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback -* feedback -* overlay +- components-feedback +- feedback +- overlay related\_components: -* table -* alert-dialog +- table +- alert-dialog parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/alert-dialog.md b/docs/s2-docs/components/feedback/alert-dialog.md index 53003176..7a7144c2 100644 --- a/docs/s2-docs/components/feedback/alert-dialog.md +++ b/docs/s2-docs/components/feedback/alert-dialog.md @@ -1,19 +1,18 @@ --- - title: "Alert dialog" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/alert-dialog/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback -* feedback -* overlay +- components-feedback +- feedback +- overlay related\_components: -* alert-banner -* coach-indicator +- alert-banner +- coach-indicator parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/coach-indicator.md b/docs/s2-docs/components/feedback/coach-indicator.md index 15dd7fbe..c6e8d02d 100644 --- a/docs/s2-docs/components/feedback/coach-indicator.md +++ b/docs/s2-docs/components/feedback/coach-indicator.md @@ -1,17 +1,16 @@ --- - title: "Coach indicator" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/coach-indicator/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback +- components-feedback related\_components: -* alert-dialog -* coach-mark +- alert-dialog +- coach-mark parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/coach-mark.md b/docs/s2-docs/components/feedback/coach-mark.md index 6b329cbb..66ce096e 100644 --- a/docs/s2-docs/components/feedback/coach-mark.md +++ b/docs/s2-docs/components/feedback/coach-mark.md @@ -1,17 +1,16 @@ --- - title: "Coach mark" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/coach-mark/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback +- components-feedback related\_components: -* coach-indicator -* contextual-help +- coach-indicator +- contextual-help parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/contextual-help.md b/docs/s2-docs/components/feedback/contextual-help.md index 2d3bb8ec..7a2e0edf 100644 --- a/docs/s2-docs/components/feedback/contextual-help.md +++ b/docs/s2-docs/components/feedback/contextual-help.md @@ -1,17 +1,16 @@ --- - title: "Contextual help" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/contextual-help/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback +- components-feedback related\_components: -* coach-mark -* illustrated-message +- coach-mark +- illustrated-message parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/illustrated-message.md b/docs/s2-docs/components/feedback/illustrated-message.md index bc1d0934..924a54b2 100644 --- a/docs/s2-docs/components/feedback/illustrated-message.md +++ b/docs/s2-docs/components/feedback/illustrated-message.md @@ -1,17 +1,16 @@ --- - title: "Illustrated message" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/illustrated-message/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback +- components-feedback related\_components: -* contextual-help -* in-line-alert +- contextual-help +- in-line-alert parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/in-line-alert.md b/docs/s2-docs/components/feedback/in-line-alert.md index 2255bfdf..38ca2b9c 100644 --- a/docs/s2-docs/components/feedback/in-line-alert.md +++ b/docs/s2-docs/components/feedback/in-line-alert.md @@ -1,19 +1,18 @@ --- - title: "In-line alert" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/in-line-alert/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback -* feedback -* overlay +- components-feedback +- feedback +- overlay related\_components: -* illustrated-message -* standard-dialog +- illustrated-message +- standard-dialog parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/standard-dialog.md b/docs/s2-docs/components/feedback/standard-dialog.md index 10bb6b84..b7a8d3c1 100644 --- a/docs/s2-docs/components/feedback/standard-dialog.md +++ b/docs/s2-docs/components/feedback/standard-dialog.md @@ -1,19 +1,18 @@ --- - title: "Standard dialog" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/standard-dialog/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback -* feedback -* overlay +- components-feedback +- feedback +- overlay related\_components: -* in-line-alert -* takeover-dialog +- in-line-alert +- takeover-dialog parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/takeover-dialog.md b/docs/s2-docs/components/feedback/takeover-dialog.md index 1f022ddc..a85baf88 100644 --- a/docs/s2-docs/components/feedback/takeover-dialog.md +++ b/docs/s2-docs/components/feedback/takeover-dialog.md @@ -1,19 +1,18 @@ --- - title: "Takeover dialog" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/takeover-dialog/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback -* feedback -* overlay +- components-feedback +- feedback +- overlay related\_components: -* standard-dialog -* toast +- standard-dialog +- toast parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/toast.md b/docs/s2-docs/components/feedback/toast.md index 7cb3bf72..bb552aa9 100644 --- a/docs/s2-docs/components/feedback/toast.md +++ b/docs/s2-docs/components/feedback/toast.md @@ -1,19 +1,18 @@ --- - title: "Toast" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/toast/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback -* feedback -* overlay +- components-feedback +- feedback +- overlay related\_components: -* takeover-dialog -* tooltip +- takeover-dialog +- tooltip parent\_category: feedback --- diff --git a/docs/s2-docs/components/feedback/tooltip.md b/docs/s2-docs/components/feedback/tooltip.md index 4bb04f0c..628fa4e6 100644 --- a/docs/s2-docs/components/feedback/tooltip.md +++ b/docs/s2-docs/components/feedback/tooltip.md @@ -1,17 +1,16 @@ --- - title: "Tooltip" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/tooltip/ +last_updated: 2026-02-02 category: components/feedback -component\_type: feedback +component_type: feedback status: published tags: -* components-feedback +- components-feedback related\_components: -* toast -* calendar +- toast +- calendar parent\_category: feedback --- diff --git a/docs/s2-docs/components/inputs/calendar.md b/docs/s2-docs/components/inputs/calendar.md index a54e4299..6291b9d2 100644 --- a/docs/s2-docs/components/inputs/calendar.md +++ b/docs/s2-docs/components/inputs/calendar.md @@ -1,17 +1,16 @@ --- - title: "Calendar" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/calendar/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* tooltip -* checkbox +- tooltip +- checkbox parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/checkbox-group.md b/docs/s2-docs/components/inputs/checkbox-group.md index 6e970e37..925b2161 100644 --- a/docs/s2-docs/components/inputs/checkbox-group.md +++ b/docs/s2-docs/components/inputs/checkbox-group.md @@ -1,19 +1,18 @@ --- - title: "Checkbox group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/checkbox-group/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* checkbox -* color-area +- checkbox +- color-area parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/checkbox.md b/docs/s2-docs/components/inputs/checkbox.md index 154e8f9c..dea76613 100644 --- a/docs/s2-docs/components/inputs/checkbox.md +++ b/docs/s2-docs/components/inputs/checkbox.md @@ -1,19 +1,18 @@ --- - title: "Checkbox" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/checkbox/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* calendar -* checkbox-group +- calendar +- checkbox-group parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/color-area.md b/docs/s2-docs/components/inputs/color-area.md index dd5abaec..4e7ae44f 100644 --- a/docs/s2-docs/components/inputs/color-area.md +++ b/docs/s2-docs/components/inputs/color-area.md @@ -1,19 +1,18 @@ --- - title: "Color area" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/color-area/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* design-tokens -* color +- components-inputs +- design-tokens +- color related\_components: -* checkbox-group -* color-handle +- checkbox-group +- color-handle parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/color-handle-and-loupe.md b/docs/s2-docs/components/inputs/color-handle-and-loupe.md index 5ad72c83..200378b9 100644 --- a/docs/s2-docs/components/inputs/color-handle-and-loupe.md +++ b/docs/s2-docs/components/inputs/color-handle-and-loupe.md @@ -1,19 +1,18 @@ --- - title: "Color handle and loupe" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/color-handle-and-loupe/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* design-tokens -* color +- components-inputs +- design-tokens +- color related\_components: -* color-area -* color-slider +- color-area +- color-slider parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/color-handle.md b/docs/s2-docs/components/inputs/color-handle.md index 958bb902..2253a027 100644 --- a/docs/s2-docs/components/inputs/color-handle.md +++ b/docs/s2-docs/components/inputs/color-handle.md @@ -1,17 +1,16 @@ --- - title: "Color handle" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/color-handle/ +last_updated: 2026-02-12 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* color -* color-picker +- components-inputs +- input +- color +- color-picker parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/color-slider.md b/docs/s2-docs/components/inputs/color-slider.md index 34619720..0005c5ce 100644 --- a/docs/s2-docs/components/inputs/color-slider.md +++ b/docs/s2-docs/components/inputs/color-slider.md @@ -1,19 +1,18 @@ --- - title: "Color slider" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/color-slider/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* design-tokens -* color +- components-inputs +- design-tokens +- color related\_components: -* color-handle -* color-wheel +- color-handle +- color-wheel parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/color-wheel.md b/docs/s2-docs/components/inputs/color-wheel.md index b8d08130..a06feaec 100644 --- a/docs/s2-docs/components/inputs/color-wheel.md +++ b/docs/s2-docs/components/inputs/color-wheel.md @@ -1,19 +1,18 @@ --- - title: "Color wheel" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/color-wheel/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* design-tokens -* color +- components-inputs +- design-tokens +- color related\_components: -* color-slider -* combo-box +- color-slider +- combo-box parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/combo-box.md b/docs/s2-docs/components/inputs/combo-box.md index 485a26ce..e81b0ae9 100644 --- a/docs/s2-docs/components/inputs/combo-box.md +++ b/docs/s2-docs/components/inputs/combo-box.md @@ -1,17 +1,16 @@ --- - title: "Combo box" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/combo-box/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* color-wheel -* date-picker +- color-wheel +- date-picker parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/date-picker.md b/docs/s2-docs/components/inputs/date-picker.md index 86fddab7..d8cac896 100644 --- a/docs/s2-docs/components/inputs/date-picker.md +++ b/docs/s2-docs/components/inputs/date-picker.md @@ -1,17 +1,16 @@ --- - title: "Date picker" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/date-picker/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* combo-box -* drop-zone +- combo-box +- drop-zone parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/drop-zone.md b/docs/s2-docs/components/inputs/drop-zone.md index 66505ac2..52d95724 100644 --- a/docs/s2-docs/components/inputs/drop-zone.md +++ b/docs/s2-docs/components/inputs/drop-zone.md @@ -1,17 +1,16 @@ --- - title: "Drop zone" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/drop-zone/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* date-picker -* field-label +- date-picker +- field-label parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/field-label.md b/docs/s2-docs/components/inputs/field-label.md index bdf0ef6e..29c9daf9 100644 --- a/docs/s2-docs/components/inputs/field-label.md +++ b/docs/s2-docs/components/inputs/field-label.md @@ -1,19 +1,18 @@ --- - title: "Field label" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/field-label/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* drop-zone -* help-text +- drop-zone +- help-text parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/help-text.md b/docs/s2-docs/components/inputs/help-text.md index 23c3df21..554b9b94 100644 --- a/docs/s2-docs/components/inputs/help-text.md +++ b/docs/s2-docs/components/inputs/help-text.md @@ -1,17 +1,16 @@ --- - title: "Help text" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/help-text/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* field-label -* number-field +- field-label +- number-field parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/number-field.md b/docs/s2-docs/components/inputs/number-field.md index 9e029359..53686cb3 100644 --- a/docs/s2-docs/components/inputs/number-field.md +++ b/docs/s2-docs/components/inputs/number-field.md @@ -1,19 +1,18 @@ --- - title: "Number field" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/number-field/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* help-text -* picker +- help-text +- picker parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/picker.md b/docs/s2-docs/components/inputs/picker.md index c71940f7..abfaf836 100644 --- a/docs/s2-docs/components/inputs/picker.md +++ b/docs/s2-docs/components/inputs/picker.md @@ -1,17 +1,16 @@ --- - title: "Picker" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/picker/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* number-field -* radio-button +- number-field +- radio-button parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/radio-button.md b/docs/s2-docs/components/inputs/radio-button.md index 4f07e50f..955ebc39 100644 --- a/docs/s2-docs/components/inputs/radio-button.md +++ b/docs/s2-docs/components/inputs/radio-button.md @@ -1,20 +1,19 @@ --- - title: "Radio button" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/radio-button/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* action -* button -* interactive +- components-inputs +- action +- button +- interactive related\_components: -* picker -* radio-group +- picker +- radio-group parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/radio-group.md b/docs/s2-docs/components/inputs/radio-group.md index 7fb78086..55597c2c 100644 --- a/docs/s2-docs/components/inputs/radio-group.md +++ b/docs/s2-docs/components/inputs/radio-group.md @@ -1,17 +1,16 @@ --- - title: "Radio group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/radio-group/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* radio-button -* rating +- radio-button +- rating parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/rating.md b/docs/s2-docs/components/inputs/rating.md index 77d73b6e..085b33ca 100644 --- a/docs/s2-docs/components/inputs/rating.md +++ b/docs/s2-docs/components/inputs/rating.md @@ -1,17 +1,16 @@ --- - title: "Rating" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/rating/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* radio-group -* search-field +- radio-group +- search-field parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/search-field.md b/docs/s2-docs/components/inputs/search-field.md index 2ba5f37e..dfcbcea5 100644 --- a/docs/s2-docs/components/inputs/search-field.md +++ b/docs/s2-docs/components/inputs/search-field.md @@ -1,19 +1,18 @@ --- - title: "Search field" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/search-field/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* rating -* segmented-control +- rating +- segmented-control parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/segmented-control.md b/docs/s2-docs/components/inputs/segmented-control.md index f7f0b4d1..3384caf4 100644 --- a/docs/s2-docs/components/inputs/segmented-control.md +++ b/docs/s2-docs/components/inputs/segmented-control.md @@ -1,17 +1,16 @@ --- - title: "Segmented control" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/segmented-control/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* search-field -* select-box +- search-field +- select-box parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/select-box.md b/docs/s2-docs/components/inputs/select-box.md index 6bdb3cb7..98eb929f 100644 --- a/docs/s2-docs/components/inputs/select-box.md +++ b/docs/s2-docs/components/inputs/select-box.md @@ -1,19 +1,18 @@ --- - title: "Select box" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/select-box/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* segmented-control -* slider +- segmented-control +- slider parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/slider.md b/docs/s2-docs/components/inputs/slider.md index b1ed7309..2b625895 100644 --- a/docs/s2-docs/components/inputs/slider.md +++ b/docs/s2-docs/components/inputs/slider.md @@ -1,17 +1,16 @@ --- - title: "Slider" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/slider/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* select-box -* swatch +- select-box +- swatch parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/swatch-group.md b/docs/s2-docs/components/inputs/swatch-group.md index afacdc0d..ba27c8eb 100644 --- a/docs/s2-docs/components/inputs/swatch-group.md +++ b/docs/s2-docs/components/inputs/swatch-group.md @@ -1,17 +1,16 @@ --- - title: "Swatch group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/swatch-group/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* swatch -* switch +- swatch +- switch parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/swatch.md b/docs/s2-docs/components/inputs/swatch.md index d900c594..5c9768e8 100644 --- a/docs/s2-docs/components/inputs/swatch.md +++ b/docs/s2-docs/components/inputs/swatch.md @@ -1,17 +1,16 @@ --- - title: "Swatch" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/swatch/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* slider -* swatch-group +- slider +- swatch-group parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/switch.md b/docs/s2-docs/components/inputs/switch.md index ace0bc9c..3aa191c5 100644 --- a/docs/s2-docs/components/inputs/switch.md +++ b/docs/s2-docs/components/inputs/switch.md @@ -1,17 +1,16 @@ --- - title: "Switch" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/switch/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* swatch-group -* tag +- swatch-group +- tag parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/tag-field.md b/docs/s2-docs/components/inputs/tag-field.md index a78136b4..e3c74ae2 100644 --- a/docs/s2-docs/components/inputs/tag-field.md +++ b/docs/s2-docs/components/inputs/tag-field.md @@ -1,19 +1,18 @@ --- - title: "Tag field" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/tag-field/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* tag -* tag-group +- tag +- tag-group parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/tag-group.md b/docs/s2-docs/components/inputs/tag-group.md index acde6406..650aac5e 100644 --- a/docs/s2-docs/components/inputs/tag-group.md +++ b/docs/s2-docs/components/inputs/tag-group.md @@ -1,17 +1,16 @@ --- - title: "Tag group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/tag-group/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* tag-field -* text-area +- tag-field +- text-area parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/tag.md b/docs/s2-docs/components/inputs/tag.md index b1ce1c52..af93d5a6 100644 --- a/docs/s2-docs/components/inputs/tag.md +++ b/docs/s2-docs/components/inputs/tag.md @@ -1,17 +1,16 @@ --- - title: "Tag" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/tag/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* switch -* tag-field +- switch +- tag-field parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/text-area.md b/docs/s2-docs/components/inputs/text-area.md index 647b5b10..12ef8636 100644 --- a/docs/s2-docs/components/inputs/text-area.md +++ b/docs/s2-docs/components/inputs/text-area.md @@ -1,17 +1,16 @@ --- - title: "Text area" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/text-area/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* tag-group -* text-field +- tag-group +- text-field parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/text-field.md b/docs/s2-docs/components/inputs/text-field.md index be566f47..fe2f704c 100644 --- a/docs/s2-docs/components/inputs/text-field.md +++ b/docs/s2-docs/components/inputs/text-field.md @@ -1,19 +1,18 @@ --- - title: "Text field" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/text-field/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs -* input -* form +- components-inputs +- input +- form related\_components: -* text-area -* thumbnail +- text-area +- thumbnail parent\_category: inputs --- diff --git a/docs/s2-docs/components/inputs/thumbnail.md b/docs/s2-docs/components/inputs/thumbnail.md index ed770a50..de26806a 100644 --- a/docs/s2-docs/components/inputs/thumbnail.md +++ b/docs/s2-docs/components/inputs/thumbnail.md @@ -1,17 +1,16 @@ --- - title: "Thumbnail" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/thumbnail/ +last_updated: 2026-02-02 category: components/inputs -component\_type: input +component_type: input status: published tags: -* components-inputs +- components-inputs related\_components: -* text-field -* accordion +- text-field +- accordion parent\_category: inputs --- diff --git a/docs/s2-docs/components/navigation/accordion.md b/docs/s2-docs/components/navigation/accordion.md index 5517ecf0..6ebae133 100644 --- a/docs/s2-docs/components/navigation/accordion.md +++ b/docs/s2-docs/components/navigation/accordion.md @@ -1,17 +1,16 @@ --- - title: "Accordion" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/accordion/ +last_updated: 2026-02-02 category: components/navigation -component\_type: navigation +component_type: navigation status: published tags: -* components-navigation +- components-navigation related\_components: -* thumbnail -* breadcrumbs +- thumbnail +- breadcrumbs parent\_category: navigation --- diff --git a/docs/s2-docs/components/navigation/breadcrumbs.md b/docs/s2-docs/components/navigation/breadcrumbs.md index 03f449d8..2118e58a 100644 --- a/docs/s2-docs/components/navigation/breadcrumbs.md +++ b/docs/s2-docs/components/navigation/breadcrumbs.md @@ -1,17 +1,16 @@ --- - title: "Breadcrumbs" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/breadcrumbs/ +last_updated: 2026-02-02 category: components/navigation -component\_type: navigation +component_type: navigation status: published tags: -* components-navigation +- components-navigation related\_components: -* accordion -* side-navigation +- accordion +- side-navigation parent\_category: navigation --- diff --git a/docs/s2-docs/components/navigation/side-navigation.md b/docs/s2-docs/components/navigation/side-navigation.md index ebf3da8f..ab7ab223 100644 --- a/docs/s2-docs/components/navigation/side-navigation.md +++ b/docs/s2-docs/components/navigation/side-navigation.md @@ -1,17 +1,16 @@ --- - title: "Side navigation" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/side-navigation/ +last_updated: 2026-02-02 category: components/navigation -component\_type: navigation +component_type: navigation status: published tags: -* components-navigation +- components-navigation related\_components: -* breadcrumbs -* tabs +- breadcrumbs +- tabs parent\_category: navigation --- diff --git a/docs/s2-docs/components/navigation/tabs.md b/docs/s2-docs/components/navigation/tabs.md index fce42209..cad579f5 100644 --- a/docs/s2-docs/components/navigation/tabs.md +++ b/docs/s2-docs/components/navigation/tabs.md @@ -1,17 +1,16 @@ --- - title: "Tabs" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/tabs/ +last_updated: 2026-02-02 category: components/navigation -component\_type: navigation +component_type: navigation status: published tags: -* components-navigation +- components-navigation related\_components: -* side-navigation -* tree-view +- side-navigation +- tree-view parent\_category: navigation --- diff --git a/docs/s2-docs/components/navigation/tree-view.md b/docs/s2-docs/components/navigation/tree-view.md index 93e49a57..ec33ca5e 100644 --- a/docs/s2-docs/components/navigation/tree-view.md +++ b/docs/s2-docs/components/navigation/tree-view.md @@ -1,17 +1,16 @@ --- - title: "Tree view" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/tree-view/ +last_updated: 2026-02-02 category: components/navigation -component\_type: navigation +component_type: navigation status: published tags: -* components-navigation +- components-navigation related\_components: -* tabs -* avatar +- tabs +- avatar parent\_category: navigation --- diff --git a/docs/s2-docs/components/status/avatar-group.md b/docs/s2-docs/components/status/avatar-group.md index 61118be7..36a24f98 100644 --- a/docs/s2-docs/components/status/avatar-group.md +++ b/docs/s2-docs/components/status/avatar-group.md @@ -1,17 +1,16 @@ --- - title: "Avatar group" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/avatar-group/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* avatar -* badge +- avatar +- badge parent\_category: status --- diff --git a/docs/s2-docs/components/status/avatar.md b/docs/s2-docs/components/status/avatar.md index ada82503..dfddc271 100644 --- a/docs/s2-docs/components/status/avatar.md +++ b/docs/s2-docs/components/status/avatar.md @@ -1,17 +1,16 @@ --- - title: "Avatar" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/avatar/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* tree-view -* avatar-group +- tree-view +- avatar-group parent\_category: status --- diff --git a/docs/s2-docs/components/status/badge.md b/docs/s2-docs/components/status/badge.md index db864a4b..786dd4d5 100644 --- a/docs/s2-docs/components/status/badge.md +++ b/docs/s2-docs/components/status/badge.md @@ -1,17 +1,16 @@ --- - title: "Badge" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/badge/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* avatar-group -* meter +- avatar-group +- meter parent\_category: status --- diff --git a/docs/s2-docs/components/status/meter.md b/docs/s2-docs/components/status/meter.md index e0bed3a9..76af66fb 100644 --- a/docs/s2-docs/components/status/meter.md +++ b/docs/s2-docs/components/status/meter.md @@ -1,17 +1,16 @@ --- - title: "Meter" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/meter/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* badge -* progress-bar +- badge +- progress-bar parent\_category: status --- diff --git a/docs/s2-docs/components/status/progress-bar.md b/docs/s2-docs/components/status/progress-bar.md index 81f5d8c5..c8336827 100644 --- a/docs/s2-docs/components/status/progress-bar.md +++ b/docs/s2-docs/components/status/progress-bar.md @@ -1,17 +1,16 @@ --- - title: "Progress bar" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/progress-bar/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* meter -* progress-circle +- meter +- progress-circle parent\_category: status --- diff --git a/docs/s2-docs/components/status/progress-circle.md b/docs/s2-docs/components/status/progress-circle.md index 754f782e..131625b6 100644 --- a/docs/s2-docs/components/status/progress-circle.md +++ b/docs/s2-docs/components/status/progress-circle.md @@ -1,17 +1,16 @@ --- - title: "Progress circle" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/progress-circle/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* progress-bar -* status-light +- progress-bar +- status-light parent\_category: status --- diff --git a/docs/s2-docs/components/status/status-light.md b/docs/s2-docs/components/status/status-light.md index 0de23827..c1f322fb 100644 --- a/docs/s2-docs/components/status/status-light.md +++ b/docs/s2-docs/components/status/status-light.md @@ -1,17 +1,16 @@ --- - title: "Status light" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/status-light/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* progress-circle -* steplist +- progress-circle +- steplist parent\_category: status --- diff --git a/docs/s2-docs/components/status/steplist.md b/docs/s2-docs/components/status/steplist.md index 079fb6e7..fdaac3ed 100644 --- a/docs/s2-docs/components/status/steplist.md +++ b/docs/s2-docs/components/status/steplist.md @@ -1,17 +1,16 @@ --- - title: "Steplist" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/steplist/ +last_updated: 2026-02-02 category: components/status -component\_type: status +component_type: status status: published tags: -* components-status +- components-status related\_components: -* status-light -* faqs +- status-light +- faqs parent\_category: status --- diff --git a/docs/s2-docs/designing/app-frame-content-area.md b/docs/s2-docs/designing/app-frame-content-area.md index 7000d7af..b3288613 100644 --- a/docs/s2-docs/designing/app-frame-content-area.md +++ b/docs/s2-docs/designing/app-frame-content-area.md @@ -1,16 +1,15 @@ --- - title: "App frame content area (browsing context)" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/app-frame-content-area/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* s2-app-frame-side-navigation-browsing-context -* s2-app-frame-creating-bluelines-browsing-context +- s2-app-frame-side-navigation-browsing-context +- s2-app-frame-creating-bluelines-browsing-context --- diff --git a/docs/s2-docs/designing/app-frame-creating-bluelines.md b/docs/s2-docs/designing/app-frame-creating-bluelines.md index f42b6fbd..547d7e56 100644 --- a/docs/s2-docs/designing/app-frame-creating-bluelines.md +++ b/docs/s2-docs/designing/app-frame-creating-bluelines.md @@ -1,16 +1,15 @@ --- - title: "Creating bluelines (browsing context)" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/app-frame-creating-bluelines/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* s2-app-frame-content-area-browsing-context -* brand +- s2-app-frame-content-area-browsing-context +- brand --- diff --git a/docs/s2-docs/designing/app-frame-header.md b/docs/s2-docs/designing/app-frame-header.md index 1c15fcb5..43831a62 100644 --- a/docs/s2-docs/designing/app-frame-header.md +++ b/docs/s2-docs/designing/app-frame-header.md @@ -1,16 +1,15 @@ --- - title: "App frame header (browsing context)" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/app-frame-header/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* s2-app-frame -* s2-app-frame-side-navigation-browsing-context +- s2-app-frame +- s2-app-frame-side-navigation-browsing-context --- diff --git a/docs/s2-docs/designing/app-frame-overview.md b/docs/s2-docs/designing/app-frame-overview.md index 11b28380..1ae93dcb 100644 --- a/docs/s2-docs/designing/app-frame-overview.md +++ b/docs/s2-docs/designing/app-frame-overview.md @@ -1,16 +1,15 @@ --- - title: "App frame" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/app-frame-overview/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* containers -* s2-app-frame-header-browsing-context +- containers +- s2-app-frame-header-browsing-context --- diff --git a/docs/s2-docs/designing/app-frame-side-navigation.md b/docs/s2-docs/designing/app-frame-side-navigation.md index 17019b65..a4e877b2 100644 --- a/docs/s2-docs/designing/app-frame-side-navigation.md +++ b/docs/s2-docs/designing/app-frame-side-navigation.md @@ -1,16 +1,15 @@ --- - title: "App frame side navigation (browsing context)" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/app-frame-side-navigation/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* s2-app-frame-header-browsing-context -* s2-app-frame-content-area-browsing-context +- s2-app-frame-header-browsing-context +- s2-app-frame-content-area-browsing-context --- diff --git a/docs/s2-docs/designing/attention-hierarchy.md b/docs/s2-docs/designing/attention-hierarchy.md index 50b37c6b..964f30c2 100644 --- a/docs/s2-docs/designing/attention-hierarchy.md +++ b/docs/s2-docs/designing/attention-hierarchy.md @@ -1,13 +1,12 @@ --- - title: "Attention hierarchy" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/attention-hierarchy/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/background-layers.md b/docs/s2-docs/designing/background-layers.md index 004137e7..e1c9bd7c 100644 --- a/docs/s2-docs/designing/background-layers.md +++ b/docs/s2-docs/designing/background-layers.md @@ -1,16 +1,15 @@ --- - title: "Background layers" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/background-layers/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* colors -* typography-fundamentals +- colors +- typography-fundamentals --- diff --git a/docs/s2-docs/designing/brand.md b/docs/s2-docs/designing/brand.md index 9e7b8caa..6f6aeb4c 100644 --- a/docs/s2-docs/designing/brand.md +++ b/docs/s2-docs/designing/brand.md @@ -1,13 +1,12 @@ --- - title: "Brand" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/brand/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/colors.md b/docs/s2-docs/designing/colors.md index c83ef83d..a16f25b7 100644 --- a/docs/s2-docs/designing/colors.md +++ b/docs/s2-docs/designing/colors.md @@ -1,18 +1,17 @@ --- - title: "Colors" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/colors/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing -* design-tokens -* color +- designing +- design-tokens +- color related\_components: -* grays -* background-layers +- grays +- background-layers --- diff --git a/docs/s2-docs/designing/containers.md b/docs/s2-docs/designing/containers.md index 2ccd6f4a..5d986c21 100644 --- a/docs/s2-docs/designing/containers.md +++ b/docs/s2-docs/designing/containers.md @@ -1,16 +1,15 @@ --- - title: "Containers" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/containers/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* states -* s2-app-frame +- states +- s2-app-frame --- diff --git a/docs/s2-docs/designing/fonts.md b/docs/s2-docs/designing/fonts.md index 44a9a730..7f5725d8 100644 --- a/docs/s2-docs/designing/fonts.md +++ b/docs/s2-docs/designing/fonts.md @@ -1,13 +1,12 @@ --- - title: "Fonts" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/fonts/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/grays.md b/docs/s2-docs/designing/grays.md index f4f52d68..8df5d8bf 100644 --- a/docs/s2-docs/designing/grays.md +++ b/docs/s2-docs/designing/grays.md @@ -1,16 +1,15 @@ --- - title: "Grays" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/grays/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* attention-hierarchy -* colors +- attention-hierarchy +- colors --- diff --git a/docs/s2-docs/designing/icon-fundamentals.md b/docs/s2-docs/designing/icon-fundamentals.md index 633ccc50..c4912385 100644 --- a/docs/s2-docs/designing/icon-fundamentals.md +++ b/docs/s2-docs/designing/icon-fundamentals.md @@ -1,13 +1,12 @@ --- - title: "Icon fundamentals" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/icon-fundamentals/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/illustrations.md b/docs/s2-docs/designing/illustrations.md index e8a71c62..d22e0152 100644 --- a/docs/s2-docs/designing/illustrations.md +++ b/docs/s2-docs/designing/illustrations.md @@ -1,16 +1,15 @@ --- - title: "Illustrations" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/illustrations/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* using-icons -* motion +- using-icons +- motion --- diff --git a/docs/s2-docs/designing/motion.md b/docs/s2-docs/designing/motion.md index 70fe53c3..c2821957 100644 --- a/docs/s2-docs/designing/motion.md +++ b/docs/s2-docs/designing/motion.md @@ -1,13 +1,12 @@ --- - title: "Motion" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/motion/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/object-styles.md b/docs/s2-docs/designing/object-styles.md index 8ed48f6e..b0e20dfa 100644 --- a/docs/s2-docs/designing/object-styles.md +++ b/docs/s2-docs/designing/object-styles.md @@ -1,16 +1,15 @@ --- - title: "Object styles" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/object-styles/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* fonts -* spacing +- fonts +- spacing --- diff --git a/docs/s2-docs/designing/s2-app-frame-content-area-browsing-context.md b/docs/s2-docs/designing/s2-app-frame-content-area-browsing-context.md index 689ff567..7ee141b7 100644 --- a/docs/s2-docs/designing/s2-app-frame-content-area-browsing-context.md +++ b/docs/s2-docs/designing/s2-app-frame-content-area-browsing-context.md @@ -1,16 +1,15 @@ --- - title: "S2 App Frame - Content Area (Browsing Context)" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/s2-app-frame-content-area-browsing-context/ +last_updated: 2026-02-12 category: designing status: published tags: -* designing -* app-frame -* content-area -* browsing-context +- designing +- app-frame +- content-area +- browsing-context --- diff --git a/docs/s2-docs/designing/s2-app-frame-creating-bluelines-browsing-context.md b/docs/s2-docs/designing/s2-app-frame-creating-bluelines-browsing-context.md index b56684d9..2335399e 100644 --- a/docs/s2-docs/designing/s2-app-frame-creating-bluelines-browsing-context.md +++ b/docs/s2-docs/designing/s2-app-frame-creating-bluelines-browsing-context.md @@ -1,16 +1,15 @@ --- - title: "S2 App Frame - Creating Bluelines (Browsing Context)" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/s2-app-frame-creating-bluelines-browsing-context/ +last_updated: 2026-02-12 category: designing status: published tags: -* designing -* app-frame -* bluelines -* browsing-context +- designing +- app-frame +- bluelines +- browsing-context --- diff --git a/docs/s2-docs/designing/s2-app-frame-header-browsing-context.md b/docs/s2-docs/designing/s2-app-frame-header-browsing-context.md index ba063657..2e34fe83 100644 --- a/docs/s2-docs/designing/s2-app-frame-header-browsing-context.md +++ b/docs/s2-docs/designing/s2-app-frame-header-browsing-context.md @@ -1,16 +1,15 @@ --- - title: "S2 App Frame - Header (Browsing Context)" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/s2-app-frame-header-browsing-context/ +last_updated: 2026-02-12 category: designing status: published tags: -* designing -* app-frame -* header -* browsing-context +- designing +- app-frame +- header +- browsing-context --- diff --git a/docs/s2-docs/designing/s2-app-frame-side-navigation-browsing-context.md b/docs/s2-docs/designing/s2-app-frame-side-navigation-browsing-context.md index ec8268f1..fb4f8f10 100644 --- a/docs/s2-docs/designing/s2-app-frame-side-navigation-browsing-context.md +++ b/docs/s2-docs/designing/s2-app-frame-side-navigation-browsing-context.md @@ -1,16 +1,15 @@ --- - title: "S2 App Frame - Side Navigation (Browsing Context)" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/s2-app-frame-side-navigation-browsing-context/ +last_updated: 2026-02-12 category: designing status: published tags: -* designing -* app-frame -* side-navigation -* browsing-context +- designing +- app-frame +- side-navigation +- browsing-context --- diff --git a/docs/s2-docs/designing/s2-app-frame.md b/docs/s2-docs/designing/s2-app-frame.md index 84dabcfb..b71c82a7 100644 --- a/docs/s2-docs/designing/s2-app-frame.md +++ b/docs/s2-docs/designing/s2-app-frame.md @@ -1,15 +1,14 @@ --- - title: "S2 App Frame" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/s2-app-frame/ +last_updated: 2026-02-12 category: designing status: published tags: -* designing -* app-frame -* layout +- designing +- app-frame +- layout --- diff --git a/docs/s2-docs/designing/spacing.md b/docs/s2-docs/designing/spacing.md index eb8e8c48..f8de7d67 100644 --- a/docs/s2-docs/designing/spacing.md +++ b/docs/s2-docs/designing/spacing.md @@ -1,13 +1,12 @@ --- - title: "Spacing" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/spacing/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/states.md b/docs/s2-docs/designing/states.md index 06d99667..660d7f95 100644 --- a/docs/s2-docs/designing/states.md +++ b/docs/s2-docs/designing/states.md @@ -1,13 +1,12 @@ --- - title: "States" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/states/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing --- diff --git a/docs/s2-docs/designing/typography-fundamentals.md b/docs/s2-docs/designing/typography-fundamentals.md index 4a167a5e..43d77877 100644 --- a/docs/s2-docs/designing/typography-fundamentals.md +++ b/docs/s2-docs/designing/typography-fundamentals.md @@ -1,16 +1,15 @@ --- - title: "Typography fundamentals" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/typography-fundamentals/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* background-layers -* fonts +- background-layers +- fonts --- diff --git a/docs/s2-docs/designing/using-icons.md b/docs/s2-docs/designing/using-icons.md index 5f233b6d..de0a1e16 100644 --- a/docs/s2-docs/designing/using-icons.md +++ b/docs/s2-docs/designing/using-icons.md @@ -1,16 +1,15 @@ --- - title: "Using icons" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/using-icons/ +last_updated: 2026-02-02 category: designing status: published tags: -* designing +- designing related\_components: -* icon-fundamentals -* illustrations +- icon-fundamentals +- illustrations --- diff --git a/docs/s2-docs/developing/developer-overview.md b/docs/s2-docs/developing/developer-overview.md index d15195b7..77900c65 100644 --- a/docs/s2-docs/developing/developer-overview.md +++ b/docs/s2-docs/developing/developer-overview.md @@ -1,16 +1,15 @@ --- - title: "Developer overview" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/developer-overview/ +last_updated: 2026-02-02 category: developing status: published tags: -* developing +- developing related\_components: -* motion -* action-bar +- motion +- action-bar --- diff --git a/docs/s2-docs/fundamentals/home.md b/docs/s2-docs/fundamentals/home.md index 106e12c9..3e3c028e 100644 --- a/docs/s2-docs/fundamentals/home.md +++ b/docs/s2-docs/fundamentals/home.md @@ -1,15 +1,14 @@ --- - title: "Spectrum 2 Home" -source\_url: -last\_updated: 2026-02-12 +source_url: https://s2.spectrum.corp.adobe.com/page/home/ +last_updated: 2026-02-12 category: fundamentals status: published tags: -* fundamentals -* home -* overview +- fundamentals +- home +- overview --- diff --git a/docs/s2-docs/fundamentals/introduction.md b/docs/s2-docs/fundamentals/introduction.md index 202d9638..27d62218 100644 --- a/docs/s2-docs/fundamentals/introduction.md +++ b/docs/s2-docs/fundamentals/introduction.md @@ -1,16 +1,15 @@ --- - title: "Introduction" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/introduction/ +last_updated: 2026-02-02 category: fundamentals status: published tags: -* fundamentals +- fundamentals related\_components: -* home -* principles +- home +- principles --- diff --git a/docs/s2-docs/fundamentals/principles.md b/docs/s2-docs/fundamentals/principles.md index e5f7950d..d9590689 100644 --- a/docs/s2-docs/fundamentals/principles.md +++ b/docs/s2-docs/fundamentals/principles.md @@ -1,13 +1,12 @@ --- - title: "Principles" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/principles/ +last_updated: 2026-02-02 category: fundamentals status: published tags: -* fundamentals +- fundamentals --- diff --git a/docs/s2-docs/support/faqs.md b/docs/s2-docs/support/faqs.md index cf68f9c1..27872266 100644 --- a/docs/s2-docs/support/faqs.md +++ b/docs/s2-docs/support/faqs.md @@ -1,16 +1,15 @@ --- - title: "FAQs" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/faqs/ +last_updated: 2026-02-02 category: support status: published tags: -* support +- support related\_components: -* steplist -* contact +- steplist +- contact --- diff --git a/docs/s2-docs/support/resources.md b/docs/s2-docs/support/resources.md index 7d7edbf8..55ab5b8c 100644 --- a/docs/s2-docs/support/resources.md +++ b/docs/s2-docs/support/resources.md @@ -1,15 +1,14 @@ --- - title: "Resources" -source\_url: -last\_updated: 2026-02-02 +source_url: https://s2.spectrum.corp.adobe.com/page/resources/ +last_updated: 2026-02-02 category: support status: published tags: -* support +- support related\_components: -* contact +- contact --- diff --git a/tools/markdown-generator/output/components/accordion.md b/tools/markdown-generator/output/components/accordion.md new file mode 100644 index 00000000..9848f6e8 --- /dev/null +++ b/tools/markdown-generator/output/components/accordion.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/action-bar.md b/tools/markdown-generator/output/components/action-bar.md new file mode 100644 index 00000000..c2cb4565 --- /dev/null +++ b/tools/markdown-generator/output/components/action-bar.md @@ -0,0 +1,19 @@ +*** + +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: +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/tools/markdown-generator/output/components/action-button.md b/tools/markdown-generator/output/components/action-button.md new file mode 100644 index 00000000..479137dd --- /dev/null +++ b/tools/markdown-generator/output/components/action-button.md @@ -0,0 +1,30 @@ +*** + +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: +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/tools/markdown-generator/output/components/action-group.md b/tools/markdown-generator/output/components/action-group.md new file mode 100644 index 00000000..38850e21 --- /dev/null +++ b/tools/markdown-generator/output/components/action-group.md @@ -0,0 +1,29 @@ +*** + +title: Action group +description: "An action group is a grouping of action buttons that are related to each other." +category: actions +documentationUrl: +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/tools/markdown-generator/output/components/alert-banner.md b/tools/markdown-generator/output/components/alert-banner.md new file mode 100644 index 00000000..f057f115 --- /dev/null +++ b/tools/markdown-generator/output/components/alert-banner.md @@ -0,0 +1,22 @@ +*** + +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: +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/tools/markdown-generator/output/components/alert-dialog.md b/tools/markdown-generator/output/components/alert-dialog.md new file mode 100644 index 00000000..67649684 --- /dev/null +++ b/tools/markdown-generator/output/components/alert-dialog.md @@ -0,0 +1,24 @@ +*** + +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: +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/tools/markdown-generator/output/components/avatar-group.md b/tools/markdown-generator/output/components/avatar-group.md new file mode 100644 index 00000000..b5bf0cc7 --- /dev/null +++ b/tools/markdown-generator/output/components/avatar-group.md @@ -0,0 +1,20 @@ +*** + +title: Avatar group +description: "Avatar groups display a collection of avatars representing people or entities." +category: actions +documentationUrl: +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/tools/markdown-generator/output/components/avatar.md b/tools/markdown-generator/output/components/avatar.md new file mode 100644 index 00000000..b80f6887 --- /dev/null +++ b/tools/markdown-generator/output/components/avatar.md @@ -0,0 +1,23 @@ +*** + +title: Avatar +description: "An avatar is a thumbnail representation of an entity, such as a user or an organization." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/badge.md b/tools/markdown-generator/output/components/badge.md new file mode 100644 index 00000000..ae80944b --- /dev/null +++ b/tools/markdown-generator/output/components/badge.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/body.md b/tools/markdown-generator/output/components/body.md new file mode 100644 index 00000000..8429033b --- /dev/null +++ b/tools/markdown-generator/output/components/body.md @@ -0,0 +1,21 @@ +*** + +title: Body +description: "Body is a typography component primarily used within Spectrum components and for blocks of text." +category: typography +documentationUrl: +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/tools/markdown-generator/output/components/bottom-navigation-android.md b/tools/markdown-generator/output/components/bottom-navigation-android.md new file mode 100644 index 00000000..5fbe1899 --- /dev/null +++ b/tools/markdown-generator/output/components/bottom-navigation-android.md @@ -0,0 +1,24 @@ +*** + +title: Bottom navigation (Android) +description: "Bottom navigation is a top-level navigation control for Android apps." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/breadcrumbs.md b/tools/markdown-generator/output/components/breadcrumbs.md new file mode 100644 index 00000000..b8aad83a --- /dev/null +++ b/tools/markdown-generator/output/components/breadcrumbs.md @@ -0,0 +1,25 @@ +*** + +title: Breadcrumbs +description: "Breadcrumbs show hierarchy and navigational context for a user’s location within an app." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/button-group.md b/tools/markdown-generator/output/components/button-group.md new file mode 100644 index 00000000..c36872de --- /dev/null +++ b/tools/markdown-generator/output/components/button-group.md @@ -0,0 +1,22 @@ +*** + +title: Button group +description: "A button group is a grouping of buttons whose actions are related to each other." +category: actions +documentationUrl: +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/tools/markdown-generator/output/components/button.md b/tools/markdown-generator/output/components/button.md new file mode 100644 index 00000000..e6e1aa64 --- /dev/null +++ b/tools/markdown-generator/output/components/button.md @@ -0,0 +1,29 @@ +*** + +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: +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/tools/markdown-generator/output/components/calendar.md b/tools/markdown-generator/output/components/calendar.md new file mode 100644 index 00000000..ffe74c27 --- /dev/null +++ b/tools/markdown-generator/output/components/calendar.md @@ -0,0 +1,27 @@ +*** + +title: Calendar +description: "Calendars display days, weeks, and months, allowing users to select dates or ranges." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/cards.md b/tools/markdown-generator/output/components/cards.md new file mode 100644 index 00000000..1cc57e2c --- /dev/null +++ b/tools/markdown-generator/output/components/cards.md @@ -0,0 +1,19 @@ +*** + +title: Cards +description: "Cards group related content into distinct layouts depending on context." +category: containers +documentationUrl: +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/tools/markdown-generator/output/components/checkbox-group.md b/tools/markdown-generator/output/components/checkbox-group.md new file mode 100644 index 00000000..64eed151 --- /dev/null +++ b/tools/markdown-generator/output/components/checkbox-group.md @@ -0,0 +1,27 @@ +*** + +title: Checkbox group +description: "A checkbox group is a grouping of checkboxes that are related to each other." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/checkbox.md b/tools/markdown-generator/output/components/checkbox.md new file mode 100644 index 00000000..8761734a --- /dev/null +++ b/tools/markdown-generator/output/components/checkbox.md @@ -0,0 +1,26 @@ +*** + +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: +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/tools/markdown-generator/output/components/close-button.md b/tools/markdown-generator/output/components/close-button.md new file mode 100644 index 00000000..47b7d7a1 --- /dev/null +++ b/tools/markdown-generator/output/components/close-button.md @@ -0,0 +1,23 @@ +*** + +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: +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/tools/markdown-generator/output/components/coach-indicator.md b/tools/markdown-generator/output/components/coach-indicator.md new file mode 100644 index 00000000..89809e03 --- /dev/null +++ b/tools/markdown-generator/output/components/coach-indicator.md @@ -0,0 +1,20 @@ +*** + +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: +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/tools/markdown-generator/output/components/coach-mark.md b/tools/markdown-generator/output/components/coach-mark.md new file mode 100644 index 00000000..a8626723 --- /dev/null +++ b/tools/markdown-generator/output/components/coach-mark.md @@ -0,0 +1,22 @@ +*** + +title: Coach mark +description: "Coach marks provide contextual guidance to users by highlighting specific interface elements." +category: feedback +documentationUrl: +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/tools/markdown-generator/output/components/code.md b/tools/markdown-generator/output/components/code.md new file mode 100644 index 00000000..ce34e22a --- /dev/null +++ b/tools/markdown-generator/output/components/code.md @@ -0,0 +1,20 @@ +*** + +title: Code +description: "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text." +category: typography +documentationUrl: +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/tools/markdown-generator/output/components/color-area.md b/tools/markdown-generator/output/components/color-area.md new file mode 100644 index 00000000..5e85a82f --- /dev/null +++ b/tools/markdown-generator/output/components/color-area.md @@ -0,0 +1,30 @@ +*** + +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: +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/tools/markdown-generator/output/components/color-handle.md b/tools/markdown-generator/output/components/color-handle.md new file mode 100644 index 00000000..c263a4c4 --- /dev/null +++ b/tools/markdown-generator/output/components/color-handle.md @@ -0,0 +1,20 @@ +*** + +title: Color handle +description: "Color handles allow users to select and adjust colors in a color picker." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/color-loupe.md b/tools/markdown-generator/output/components/color-loupe.md new file mode 100644 index 00000000..c3eaf0cb --- /dev/null +++ b/tools/markdown-generator/output/components/color-loupe.md @@ -0,0 +1,20 @@ +*** + +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: +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/tools/markdown-generator/output/components/color-slider.md b/tools/markdown-generator/output/components/color-slider.md new file mode 100644 index 00000000..ea5b87cb --- /dev/null +++ b/tools/markdown-generator/output/components/color-slider.md @@ -0,0 +1,28 @@ +*** + +title: Color slider +description: "A color slider lets users visually change an individual channel of a color." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/color-wheel.md b/tools/markdown-generator/output/components/color-wheel.md new file mode 100644 index 00000000..8bd70a03 --- /dev/null +++ b/tools/markdown-generator/output/components/color-wheel.md @@ -0,0 +1,26 @@ +*** + +title: Color wheel +description: "A color wheel lets users visually change an individual channel of a color on a circular track." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/combo-box.md b/tools/markdown-generator/output/components/combo-box.md new file mode 100644 index 00000000..6babdc11 --- /dev/null +++ b/tools/markdown-generator/output/components/combo-box.md @@ -0,0 +1,33 @@ +*** + +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: +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/tools/markdown-generator/output/components/contextual-help.md b/tools/markdown-generator/output/components/contextual-help.md new file mode 100644 index 00000000..270cbfba --- /dev/null +++ b/tools/markdown-generator/output/components/contextual-help.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/date-picker.md b/tools/markdown-generator/output/components/date-picker.md new file mode 100644 index 00000000..3b706fcb --- /dev/null +++ b/tools/markdown-generator/output/components/date-picker.md @@ -0,0 +1,23 @@ +*** + +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: +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/tools/markdown-generator/output/components/detail.md b/tools/markdown-generator/output/components/detail.md new file mode 100644 index 00000000..55089111 --- /dev/null +++ b/tools/markdown-generator/output/components/detail.md @@ -0,0 +1,21 @@ +*** + +title: Detail +description: "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text." +category: typography +documentationUrl: +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/tools/markdown-generator/output/components/divider.md b/tools/markdown-generator/output/components/divider.md new file mode 100644 index 00000000..e97da642 --- /dev/null +++ b/tools/markdown-generator/output/components/divider.md @@ -0,0 +1,20 @@ +*** + +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: +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/tools/markdown-generator/output/components/drop-zone.md b/tools/markdown-generator/output/components/drop-zone.md new file mode 100644 index 00000000..2b662f00 --- /dev/null +++ b/tools/markdown-generator/output/components/drop-zone.md @@ -0,0 +1,24 @@ +*** + +title: Drop zone +description: "A drop zone allows users to drag and drop files or other content into a designated area." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/field-label.md b/tools/markdown-generator/output/components/field-label.md new file mode 100644 index 00000000..808c0081 --- /dev/null +++ b/tools/markdown-generator/output/components/field-label.md @@ -0,0 +1,24 @@ +*** + +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: +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/tools/markdown-generator/output/components/heading.md b/tools/markdown-generator/output/components/heading.md new file mode 100644 index 00000000..81e6af86 --- /dev/null +++ b/tools/markdown-generator/output/components/heading.md @@ -0,0 +1,22 @@ +*** + +title: Heading +description: "Heading is a typography component used to create various levels of hierarchies between text." +category: typography +documentationUrl: +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/tools/markdown-generator/output/components/help-text.md b/tools/markdown-generator/output/components/help-text.md new file mode 100644 index 00000000..6fe70083 --- /dev/null +++ b/tools/markdown-generator/output/components/help-text.md @@ -0,0 +1,23 @@ +*** + +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: +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/tools/markdown-generator/output/components/illustrated-message.md b/tools/markdown-generator/output/components/illustrated-message.md new file mode 100644 index 00000000..3ae955a7 --- /dev/null +++ b/tools/markdown-generator/output/components/illustrated-message.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/in-field-progress-button.md b/tools/markdown-generator/output/components/in-field-progress-button.md new file mode 100644 index 00000000..8b1856ce --- /dev/null +++ b/tools/markdown-generator/output/components/in-field-progress-button.md @@ -0,0 +1,22 @@ +*** + +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: +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/tools/markdown-generator/output/components/in-field-progress-circle.md b/tools/markdown-generator/output/components/in-field-progress-circle.md new file mode 100644 index 00000000..b8841d4e --- /dev/null +++ b/tools/markdown-generator/output/components/in-field-progress-circle.md @@ -0,0 +1,20 @@ +*** + +title: In field progress circle +description: "In field progress circles indicate progress for loading states within form fields and input areas." +category: feedback +documentationUrl: +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/tools/markdown-generator/output/components/in-line-alert.md b/tools/markdown-generator/output/components/in-line-alert.md new file mode 100644 index 00000000..dc7882f5 --- /dev/null +++ b/tools/markdown-generator/output/components/in-line-alert.md @@ -0,0 +1,23 @@ +*** + +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: +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/tools/markdown-generator/output/components/link.md b/tools/markdown-generator/output/components/link.md new file mode 100644 index 00000000..7a03df71 --- /dev/null +++ b/tools/markdown-generator/output/components/link.md @@ -0,0 +1,22 @@ +*** + +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: +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/tools/markdown-generator/output/components/list-view.md b/tools/markdown-generator/output/components/list-view.md new file mode 100644 index 00000000..3105a219 --- /dev/null +++ b/tools/markdown-generator/output/components/list-view.md @@ -0,0 +1,21 @@ +*** + +title: List view +description: "List views display rows of data or options that users can browse, select, and interact with." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/menu.md b/tools/markdown-generator/output/components/menu.md new file mode 100644 index 00000000..b5eed4d3 --- /dev/null +++ b/tools/markdown-generator/output/components/menu.md @@ -0,0 +1,31 @@ +*** + +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: +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/tools/markdown-generator/output/components/meter.md b/tools/markdown-generator/output/components/meter.md new file mode 100644 index 00000000..c5b7d634 --- /dev/null +++ b/tools/markdown-generator/output/components/meter.md @@ -0,0 +1,26 @@ +*** + +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: +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/tools/markdown-generator/output/components/number-field.md b/tools/markdown-generator/output/components/number-field.md new file mode 100644 index 00000000..73b5bb29 --- /dev/null +++ b/tools/markdown-generator/output/components/number-field.md @@ -0,0 +1,28 @@ +*** + +title: Number field +description: "Number fields allow users to enter a numeric value, with optional increment and decrement buttons." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/opacity-checkerboard.md b/tools/markdown-generator/output/components/opacity-checkerboard.md new file mode 100644 index 00000000..5f3f1816 --- /dev/null +++ b/tools/markdown-generator/output/components/opacity-checkerboard.md @@ -0,0 +1,20 @@ +*** + +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: +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/tools/markdown-generator/output/components/picker.md b/tools/markdown-generator/output/components/picker.md new file mode 100644 index 00000000..bef50850 --- /dev/null +++ b/tools/markdown-generator/output/components/picker.md @@ -0,0 +1,33 @@ +*** + +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: +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/tools/markdown-generator/output/components/popover.md b/tools/markdown-generator/output/components/popover.md new file mode 100644 index 00000000..30b6c163 --- /dev/null +++ b/tools/markdown-generator/output/components/popover.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/progress-bar.md b/tools/markdown-generator/output/components/progress-bar.md new file mode 100644 index 00000000..8ebb2815 --- /dev/null +++ b/tools/markdown-generator/output/components/progress-bar.md @@ -0,0 +1,30 @@ +*** + +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: +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/tools/markdown-generator/output/components/progress-circle.md b/tools/markdown-generator/output/components/progress-circle.md new file mode 100644 index 00000000..fd9e8428 --- /dev/null +++ b/tools/markdown-generator/output/components/progress-circle.md @@ -0,0 +1,24 @@ +*** + +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: +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/tools/markdown-generator/output/components/radio-button.md b/tools/markdown-generator/output/components/radio-button.md new file mode 100644 index 00000000..b8d17126 --- /dev/null +++ b/tools/markdown-generator/output/components/radio-button.md @@ -0,0 +1,22 @@ +*** + +title: Radio button +description: "Radio buttons allow users to select a single option from a list of mutually exclusive options." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/radio-group.md b/tools/markdown-generator/output/components/radio-group.md new file mode 100644 index 00000000..8cfeab2b --- /dev/null +++ b/tools/markdown-generator/output/components/radio-group.md @@ -0,0 +1,29 @@ +*** + +title: Radio Group +description: "A radio group is a grouping of radio buttons that are related to each other." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/rating.md b/tools/markdown-generator/output/components/rating.md new file mode 100644 index 00000000..b9bbc2ed --- /dev/null +++ b/tools/markdown-generator/output/components/rating.md @@ -0,0 +1,22 @@ +*** + +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: +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/tools/markdown-generator/output/components/scroll-zoom-bar.md b/tools/markdown-generator/output/components/scroll-zoom-bar.md new file mode 100644 index 00000000..bbedac10 --- /dev/null +++ b/tools/markdown-generator/output/components/scroll-zoom-bar.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/search-field.md b/tools/markdown-generator/output/components/search-field.md new file mode 100644 index 00000000..8584d30e --- /dev/null +++ b/tools/markdown-generator/output/components/search-field.md @@ -0,0 +1,28 @@ +*** + +title: Search field +description: "A search field is used for searching and filtering items." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/segmented-control.md b/tools/markdown-generator/output/components/segmented-control.md new file mode 100644 index 00000000..815eed18 --- /dev/null +++ b/tools/markdown-generator/output/components/segmented-control.md @@ -0,0 +1,25 @@ +*** + +title: Segmented Control +description: "Segmented controls allow users to select one option from a set of mutually exclusive options." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/select-box.md b/tools/markdown-generator/output/components/select-box.md new file mode 100644 index 00000000..d1168872 --- /dev/null +++ b/tools/markdown-generator/output/components/select-box.md @@ -0,0 +1,25 @@ +*** + +title: Select box +description: "" +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/side-navigation.md b/tools/markdown-generator/output/components/side-navigation.md new file mode 100644 index 00000000..8988ec49 --- /dev/null +++ b/tools/markdown-generator/output/components/side-navigation.md @@ -0,0 +1,21 @@ +*** + +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: +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/tools/markdown-generator/output/components/slider.md b/tools/markdown-generator/output/components/slider.md new file mode 100644 index 00000000..a153d73e --- /dev/null +++ b/tools/markdown-generator/output/components/slider.md @@ -0,0 +1,34 @@ +*** + +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: +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/tools/markdown-generator/output/components/standard-dialog.md b/tools/markdown-generator/output/components/standard-dialog.md new file mode 100644 index 00000000..af75421b --- /dev/null +++ b/tools/markdown-generator/output/components/standard-dialog.md @@ -0,0 +1,27 @@ +*** + +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: +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/tools/markdown-generator/output/components/standard-panel.md b/tools/markdown-generator/output/components/standard-panel.md new file mode 100644 index 00000000..9d5fa44c --- /dev/null +++ b/tools/markdown-generator/output/components/standard-panel.md @@ -0,0 +1,27 @@ +*** + +title: Standard Panel +description: "Standard Panels provide a flexible container for grouping related content and actions." +category: containers +documentationUrl: +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/tools/markdown-generator/output/components/status-light.md b/tools/markdown-generator/output/components/status-light.md new file mode 100644 index 00000000..6d850f10 --- /dev/null +++ b/tools/markdown-generator/output/components/status-light.md @@ -0,0 +1,21 @@ +*** + +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: +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/tools/markdown-generator/output/components/steplist.md b/tools/markdown-generator/output/components/steplist.md new file mode 100644 index 00000000..1fd0d683 --- /dev/null +++ b/tools/markdown-generator/output/components/steplist.md @@ -0,0 +1,21 @@ +*** + +title: Steplist +description: "Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/swatch-group.md b/tools/markdown-generator/output/components/swatch-group.md new file mode 100644 index 00000000..61b1da95 --- /dev/null +++ b/tools/markdown-generator/output/components/swatch-group.md @@ -0,0 +1,24 @@ +*** + +title: Swatch group +description: "A swatch group is a grouping of swatches that are related to each other." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/swatch.md b/tools/markdown-generator/output/components/swatch.md new file mode 100644 index 00000000..f0721097 --- /dev/null +++ b/tools/markdown-generator/output/components/swatch.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/switch.md b/tools/markdown-generator/output/components/switch.md new file mode 100644 index 00000000..d0c11522 --- /dev/null +++ b/tools/markdown-generator/output/components/switch.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/tab-bar-ios.md b/tools/markdown-generator/output/components/tab-bar-ios.md new file mode 100644 index 00000000..87dbe5bb --- /dev/null +++ b/tools/markdown-generator/output/components/tab-bar-ios.md @@ -0,0 +1,24 @@ +*** + +title: Tab bar (iOS) +description: "Tab bar is a top-level navigation control for iOS apps." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/components/table.md b/tools/markdown-generator/output/components/table.md new file mode 100644 index 00000000..0a773c28 --- /dev/null +++ b/tools/markdown-generator/output/components/table.md @@ -0,0 +1,26 @@ +*** + +title: Table +description: "Tables display information in rows and columns, allowing users to compare and scan structured data." +category: data visualization +documentationUrl: +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/tools/markdown-generator/output/components/tabs.md b/tools/markdown-generator/output/components/tabs.md new file mode 100644 index 00000000..efcdbb28 --- /dev/null +++ b/tools/markdown-generator/output/components/tabs.md @@ -0,0 +1,20 @@ +*** + +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: +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/tools/markdown-generator/output/components/tag-field.md b/tools/markdown-generator/output/components/tag-field.md new file mode 100644 index 00000000..03fd9d54 --- /dev/null +++ b/tools/markdown-generator/output/components/tag-field.md @@ -0,0 +1,23 @@ +*** + +title: Tag field +description: "A tag field is an input field that allows users to enter and manage tags." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/tag-group.md b/tools/markdown-generator/output/components/tag-group.md new file mode 100644 index 00000000..be6edde2 --- /dev/null +++ b/tools/markdown-generator/output/components/tag-group.md @@ -0,0 +1,22 @@ +*** + +title: Tag group +description: "A tag group is a collection of tags that represent a set of related items." +category: inputs +documentationUrl: +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/tools/markdown-generator/output/components/tag.md b/tools/markdown-generator/output/components/tag.md new file mode 100644 index 00000000..9519fe30 --- /dev/null +++ b/tools/markdown-generator/output/components/tag.md @@ -0,0 +1,25 @@ +*** + +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: +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/tools/markdown-generator/output/components/takeover-dialog.md b/tools/markdown-generator/output/components/takeover-dialog.md new file mode 100644 index 00000000..7120a84c --- /dev/null +++ b/tools/markdown-generator/output/components/takeover-dialog.md @@ -0,0 +1,25 @@ +*** + +title: Takeover dialog +description: "Takeover dialogs are larger, flexible dialogs that contain other components to support complex workflows." +category: feedback +documentationUrl: +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/tools/markdown-generator/output/components/text-area.md b/tools/markdown-generator/output/components/text-area.md new file mode 100644 index 00000000..7fa45843 --- /dev/null +++ b/tools/markdown-generator/output/components/text-area.md @@ -0,0 +1,36 @@ +*** + +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: +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/tools/markdown-generator/output/components/text-field.md b/tools/markdown-generator/output/components/text-field.md new file mode 100644 index 00000000..5a371cca --- /dev/null +++ b/tools/markdown-generator/output/components/text-field.md @@ -0,0 +1,33 @@ +*** + +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: +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/tools/markdown-generator/output/components/thumbnail.md b/tools/markdown-generator/output/components/thumbnail.md new file mode 100644 index 00000000..2b92a115 --- /dev/null +++ b/tools/markdown-generator/output/components/thumbnail.md @@ -0,0 +1,20 @@ +*** + +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: +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/tools/markdown-generator/output/components/toast.md b/tools/markdown-generator/output/components/toast.md new file mode 100644 index 00000000..57f7feb3 --- /dev/null +++ b/tools/markdown-generator/output/components/toast.md @@ -0,0 +1,22 @@ +*** + +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: +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/tools/markdown-generator/output/components/tooltip.md b/tools/markdown-generator/output/components/tooltip.md new file mode 100644 index 00000000..1eaece41 --- /dev/null +++ b/tools/markdown-generator/output/components/tooltip.md @@ -0,0 +1,26 @@ +*** + +title: Tooltip +description: "Tooltips show contextual help or information about specific components when a user hovers or focuses on them." +category: feedback +documentationUrl: +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/tools/markdown-generator/output/components/tray.md b/tools/markdown-generator/output/components/tray.md new file mode 100644 index 00000000..41a6e493 --- /dev/null +++ b/tools/markdown-generator/output/components/tray.md @@ -0,0 +1,19 @@ +*** + +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: +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/tools/markdown-generator/output/components/tree-view.md b/tools/markdown-generator/output/components/tree-view.md new file mode 100644 index 00000000..701a9c9e --- /dev/null +++ b/tools/markdown-generator/output/components/tree-view.md @@ -0,0 +1,26 @@ +*** + +title: Tree view +description: "A tree view provides users with a way to navigate nested hierarchical information." +category: navigation +documentationUrl: +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/tools/markdown-generator/output/registry/anatomy-terms.md b/tools/markdown-generator/output/registry/anatomy-terms.md new file mode 100644 index 00000000..7364971d --- /dev/null +++ b/tools/markdown-generator/output/registry/anatomy-terms.md @@ -0,0 +1,37 @@ +*** + +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/tools/markdown-generator/output/registry/categories.md b/tools/markdown-generator/output/registry/categories.md new file mode 100644 index 00000000..dcb70480 --- /dev/null +++ b/tools/markdown-generator/output/registry/categories.md @@ -0,0 +1,21 @@ +*** + +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/tools/markdown-generator/output/registry/components.md b/tools/markdown-generator/output/registry/components.md new file mode 100644 index 00000000..29c87caa --- /dev/null +++ b/tools/markdown-generator/output/registry/components.md @@ -0,0 +1,67 @@ +*** + +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/tools/markdown-generator/output/registry/glossary.md b/tools/markdown-generator/output/registry/glossary.md new file mode 100644 index 00000000..61d5bb9a --- /dev/null +++ b/tools/markdown-generator/output/registry/glossary.md @@ -0,0 +1,18 @@ +*** + +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/tools/markdown-generator/output/registry/navigation-terms.md b/tools/markdown-generator/output/registry/navigation-terms.md new file mode 100644 index 00000000..0f2619c7 --- /dev/null +++ b/tools/markdown-generator/output/registry/navigation-terms.md @@ -0,0 +1,20 @@ +*** + +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/tools/markdown-generator/output/registry/platforms.md b/tools/markdown-generator/output/registry/platforms.md new file mode 100644 index 00000000..aaa113f7 --- /dev/null +++ b/tools/markdown-generator/output/registry/platforms.md @@ -0,0 +1,18 @@ +*** + +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/tools/markdown-generator/output/registry/scale-values.md b/tools/markdown-generator/output/registry/scale-values.md new file mode 100644 index 00000000..d719eb5f --- /dev/null +++ b/tools/markdown-generator/output/registry/scale-values.md @@ -0,0 +1,25 @@ +*** + +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/tools/markdown-generator/output/registry/sizes.md b/tools/markdown-generator/output/registry/sizes.md new file mode 100644 index 00000000..30d76cbd --- /dev/null +++ b/tools/markdown-generator/output/registry/sizes.md @@ -0,0 +1,37 @@ +*** + +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/tools/markdown-generator/output/registry/states.md b/tools/markdown-generator/output/registry/states.md new file mode 100644 index 00000000..acfb3f05 --- /dev/null +++ b/tools/markdown-generator/output/registry/states.md @@ -0,0 +1,23 @@ +*** + +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/tools/markdown-generator/output/registry/token-terminology.md b/tools/markdown-generator/output/registry/token-terminology.md new file mode 100644 index 00000000..dc9f3c14 --- /dev/null +++ b/tools/markdown-generator/output/registry/token-terminology.md @@ -0,0 +1,19 @@ +*** + +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/tools/markdown-generator/output/registry/variants.md b/tools/markdown-generator/output/registry/variants.md new file mode 100644 index 00000000..55dd8529 --- /dev/null +++ b/tools/markdown-generator/output/registry/variants.md @@ -0,0 +1,37 @@ +*** + +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/tools/markdown-generator/output/tokens/color-aliases.md b/tools/markdown-generator/output/tokens/color-aliases.md new file mode 100644 index 00000000..f1595b3d --- /dev/null +++ b/tools/markdown-generator/output/tokens/color-aliases.md @@ -0,0 +1,182 @@ +*** + +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/tools/markdown-generator/output/tokens/color-component.md b/tools/markdown-generator/output/tokens/color-component.md new file mode 100644 index 00000000..f6564f2d --- /dev/null +++ b/tools/markdown-generator/output/tokens/color-component.md @@ -0,0 +1,86 @@ +*** + +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/tools/markdown-generator/output/tokens/color-palette.md b/tools/markdown-generator/output/tokens/color-palette.md new file mode 100644 index 00000000..28b0f852 --- /dev/null +++ b/tools/markdown-generator/output/tokens/color-palette.md @@ -0,0 +1,385 @@ +*** + +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/tools/markdown-generator/output/tokens/icons.md b/tools/markdown-generator/output/tokens/icons.md new file mode 100644 index 00000000..5fe0c847 --- /dev/null +++ b/tools/markdown-generator/output/tokens/icons.md @@ -0,0 +1,92 @@ +*** + +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/tools/markdown-generator/output/tokens/layout-component.md b/tools/markdown-generator/output/tokens/layout-component.md new file mode 100644 index 00000000..a144f1a9 --- /dev/null +++ b/tools/markdown-generator/output/tokens/layout-component.md @@ -0,0 +1,1010 @@ +*** + +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/tools/markdown-generator/output/tokens/layout.md b/tools/markdown-generator/output/tokens/layout.md new file mode 100644 index 00000000..210b5ca4 --- /dev/null +++ b/tools/markdown-generator/output/tokens/layout.md @@ -0,0 +1,255 @@ +*** + +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/tools/markdown-generator/output/tokens/semantic-color-palette.md b/tools/markdown-generator/output/tokens/semantic-color-palette.md new file mode 100644 index 00000000..15f83605 --- /dev/null +++ b/tools/markdown-generator/output/tokens/semantic-color-palette.md @@ -0,0 +1,107 @@ +*** + +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/tools/markdown-generator/output/tokens/typography.md b/tools/markdown-generator/output/tokens/typography.md new file mode 100644 index 00000000..b1837cf1 --- /dev/null +++ b/tools/markdown-generator/output/tokens/typography.md @@ -0,0 +1,325 @@ +*** + +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/tools/s2-docs-transformer/README.md b/tools/s2-docs-transformer/README.md index c784f5c4..d085c51a 100644 --- a/tools/s2-docs-transformer/README.md +++ b/tools/s2-docs-transformer/README.md @@ -84,7 +84,39 @@ pnpm run add-metadata * Adds `parent_category` for component docs * Only updates files that have related links -### 4. Process All +### 4. Fix YAML Frontmatter + +Fix common YAML frontmatter issues in S2 documentation files: + +```bash +pnpm run fix-yaml +``` + +**What it fixes:** + +* Replaces asterisk (\*) list items with dash (-) syntax +* Removes escaped underscores (\_) from field names +* Removes angle brackets from URLs +* Cleans up excessive blank lines +* Ensures valid YAML syntax + +This script automatically fixes YAML parsing errors that can cause GitHub rendering issues. + +### 5. Test YAML Frontmatter + +Validate YAML frontmatter across all S2 docs: + +```bash +pnpm run test +``` + +**What it validates:** + +* YAML syntax correctness (no asterisk lists, escaped underscores, etc.) +* Required fields are present (title, source\_url, category, status) +* Consistent formatting across all files + +### 6. Process All Run complete transformation pipeline: @@ -100,12 +132,16 @@ Runs: transform → add-metadata tools/s2-docs-transformer/ ├── scripts/ │ ├── transform-to-frontmatter.js # Convert to YAML frontmatter -│ └── add-related-metadata.js # Add relationship metadata +│ ├── add-related-metadata.js # Add relationship metadata +│ └── fix-yaml-frontmatter.js # Fix YAML syntax issues ├── src/ │ ├── cli.js # Scraper CLI │ ├── scraper.js # Main scraping logic │ ├── parser.js # S2 page parsing │ └── browser-client.js # Browser MCP client +├── test/ +│ └── yaml-frontmatter.test.js # YAML validation tests +├── ava.config.js # Test configuration ├── SCRAPING.md # Scraping documentation ├── package.json └── README.md @@ -136,9 +172,15 @@ tools/s2-docs-transformer/ If you manually edit markdown files and need to fix frontmatter: ```bash +# Fix YAML syntax issues +pnpm run fix-yaml + # Re-process all docs pnpm run process-all +# Validate YAML frontmatter +pnpm run test + # Regenerate component index cd ../s2-docs-mcp pnpm run scrape index @@ -187,6 +229,15 @@ Enhances frontmatter with relationships: * **Output:** Frontmatter with `related_components` and `parent_category` * **Idempotent:** Safe to run multiple times +### fix-yaml-frontmatter.js + +Fixes YAML syntax issues in frontmatter: + +* **Input:** Files with malformed YAML frontmatter +* **Output:** Files with valid YAML syntax +* **Fixes:** Asterisk lists, escaped underscores, angle bracket URLs, excessive blank lines +* **Idempotent:** Safe to run multiple times + ## Integration Works with: diff --git a/tools/s2-docs-transformer/ava.config.js b/tools/s2-docs-transformer/ava.config.js new file mode 100644 index 00000000..1d8c131a --- /dev/null +++ b/tools/s2-docs-transformer/ava.config.js @@ -0,0 +1,20 @@ +/** + * Copyright 2025 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"], + verbose: true, + nodeArguments: ["--no-warnings"], + environmentVariables: { + NODE_ENV: "test", + }, +}; diff --git a/tools/s2-docs-transformer/moon.yml b/tools/s2-docs-transformer/moon.yml index 00f538e2..c75a593e 100644 --- a/tools/s2-docs-transformer/moon.yml +++ b/tools/s2-docs-transformer/moon.yml @@ -7,6 +7,21 @@ project: language: "javascript" tasks: + test: + command: "pnpm ava test" + platform: node + inputs: + - "test/**/*.test.js" + - "../../docs/s2-docs/**/*.md" + + fix-yaml: + command: "node scripts/fix-yaml-frontmatter.js" + inputs: + - "../../docs/s2-docs/**/*.md" + - "scripts/fix-yaml-frontmatter.js" + outputs: + - "../../docs/s2-docs/**/*.md" + transform: command: "node scripts/transform-to-frontmatter.js" inputs: diff --git a/tools/s2-docs-transformer/package.json b/tools/s2-docs-transformer/package.json index c3918838..6b5aa26a 100644 --- a/tools/s2-docs-transformer/package.json +++ b/tools/s2-docs-transformer/package.json @@ -12,6 +12,8 @@ "list": "node src/cli.js list", "transform": "node scripts/transform-to-frontmatter.js", "add-metadata": "node scripts/add-related-metadata.js", + "fix-yaml": "node scripts/fix-yaml-frontmatter.js", + "test": "ava", "process-all": "npm run transform && npm run add-metadata" }, "dependencies": { diff --git a/tools/s2-docs-transformer/scripts/fix-yaml-frontmatter.js b/tools/s2-docs-transformer/scripts/fix-yaml-frontmatter.js new file mode 100644 index 00000000..9a53697d --- /dev/null +++ b/tools/s2-docs-transformer/scripts/fix-yaml-frontmatter.js @@ -0,0 +1,174 @@ +#!/usr/bin/env node +/** + * Copyright 2025 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. + */ + +/** + * Fix YAML frontmatter issues in S2 documentation markdown files: + * 1. Replace asterisk (*) list items with dash (-) syntax + * 2. Remove escaped underscores (\\_) from field names + * 3. Remove angle brackets from URLs + * 4. Clean up excessive blank lines + */ + +import { readFileSync, writeFileSync, readdirSync } from "fs"; +import { join } from "path"; +import { fileURLToPath } from "url"; +import { dirname } from "path"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); +const DOCS_ROOT = join(__dirname, "..", "..", "..", "docs", "s2-docs"); + +/** + * Get all markdown files in docs/s2-docs recursively + */ +function getAllMarkdownFiles(dir) { + const files = []; + const entries = readdirSync(dir, { withFileTypes: true }); + + for (const entry of entries) { + const fullPath = join(dir, entry.name); + if (entry.isDirectory()) { + files.push(...getAllMarkdownFiles(fullPath)); + } else if (entry.name.endsWith(".md")) { + files.push(fullPath); + } + } + + return files; +} + +/** + * Fix YAML frontmatter issues + */ +function fixFrontmatter(content) { + // Extract frontmatter + const frontmatterMatch = content.match( + /^(---\r?\n)([\s\S]*?)(\r?\n---\r?\n)/, + ); + + if (!frontmatterMatch) { + return { content, changed: false }; + } + + const [fullMatch, openDelim, frontmatter, closeDelim] = frontmatterMatch; + const body = content.slice(fullMatch.length); + + let fixed = frontmatter; + let changed = false; + + // Fix 1: Remove blank line immediately after opening --- + if (fixed.startsWith("\n")) { + fixed = fixed.replace(/^\n+/, ""); + changed = true; + } + + // Fix 2: Replace escaped underscores in field names + // Match patterns like "source\_url:" or "last\_updated:" + const escapedUnderscoreRegex = /^(\w+)\\_(\w+):/gm; + if (escapedUnderscoreRegex.test(fixed)) { + fixed = fixed.replace(escapedUnderscoreRegex, "$1_$2:"); + changed = true; + } + + // Fix 3: Remove angle brackets from URLs + // Match patterns like "" + const angleBracketUrlRegex = /<(https?:\/\/[^>]+)>/g; + if (angleBracketUrlRegex.test(fixed)) { + fixed = fixed.replace(angleBracketUrlRegex, "$1"); + changed = true; + } + + // Fix 4: Convert asterisk list items to dash syntax + // This needs to be careful to preserve indentation + const lines = fixed.split("\n"); + const fixedLines = lines.map((line) => { + // Match lines that start with * (asterisk list items) + // Preserve any leading whitespace + const asteriskMatch = line.match(/^(\s*)\*(\s+.+)$/); + if (asteriskMatch) { + changed = true; + return `${asteriskMatch[1]}-${asteriskMatch[2]}`; + } + return line; + }); + fixed = fixedLines.join("\n"); + + // Fix 5: Clean up excessive blank lines (more than one consecutive blank line) + if (/\n\n\n+/.test(fixed)) { + fixed = fixed.replace(/\n\n\n+/g, "\n\n"); + changed = true; + } + + // Fix 6: Remove blank line before closing --- + if (fixed.endsWith("\n\n")) { + fixed = fixed.replace(/\n\n$/, "\n"); + changed = true; + } + + if (!changed) { + return { content, changed: false }; + } + + // Reconstruct the file + const newContent = openDelim + fixed + closeDelim + body; + return { content: newContent, changed: true }; +} + +/** + * Main function + */ +function main() { + const files = getAllMarkdownFiles(DOCS_ROOT); + console.log(`Checking ${files.length} markdown files...`); + + let fixedCount = 0; + let errorCount = 0; + const fixedFiles = []; + + for (const filePath of files) { + // Skip README.md and INDEX.md files + if (filePath.endsWith("README.md") || filePath.endsWith("INDEX.md")) { + continue; + } + + try { + const content = readFileSync(filePath, "utf-8"); + const { content: newContent, changed } = fixFrontmatter(content); + + if (changed) { + writeFileSync(filePath, newContent, "utf-8"); + fixedFiles.push(filePath); + fixedCount++; + } + } catch (error) { + console.error(`Error processing ${filePath}:`, error.message); + errorCount++; + } + } + + console.log("\nResults:"); + console.log(` Fixed: ${fixedCount} files`); + console.log(` Errors: ${errorCount} files`); + console.log(` Total processed: ${files.length} files`); + + if (fixedFiles.length > 0) { + console.log("\nFixed files:"); + for (const file of fixedFiles) { + console.log(` - ${file}`); + } + } + + process.exit(errorCount > 0 ? 1 : 0); +} + +main(); diff --git a/tools/s2-docs-transformer/test/yaml-frontmatter.test.js b/tools/s2-docs-transformer/test/yaml-frontmatter.test.js new file mode 100644 index 00000000..5c48cd25 --- /dev/null +++ b/tools/s2-docs-transformer/test/yaml-frontmatter.test.js @@ -0,0 +1,231 @@ +/** + * Copyright 2025 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 { readFileSync, readdirSync, statSync } from "fs"; +import { join, dirname } from "path"; +import { fileURLToPath } from "url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); +const DOCS_ROOT = join(__dirname, "..", "..", "..", "docs", "s2-docs"); + +/** + * Get all markdown files in docs/s2-docs recursively + */ +function getAllMarkdownFiles(dir) { + const files = []; + const entries = readdirSync(dir, { withFileTypes: true }); + + for (const entry of entries) { + const fullPath = join(dir, entry.name); + if (entry.isDirectory()) { + files.push(...getAllMarkdownFiles(fullPath)); + } else if (entry.name.endsWith(".md")) { + files.push(fullPath); + } + } + + return files; +} + +/** + * Extract frontmatter from markdown content + */ +function extractFrontmatter(content) { + const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---/); + if (!match) { + return null; + } + return match[1]; +} + +/** + * Validate YAML frontmatter for common issues + */ +function validateYamlFrontmatter(frontmatter, filePath) { + const errors = []; + + // Check for asterisk list items (YAML interprets * as alias references) + if (/^\*/m.test(frontmatter)) { + errors.push({ + type: "invalid-list-syntax", + message: "Found asterisk (*) list items. YAML lists should use dash (-)", + lines: frontmatter + .split("\n") + .map((line, idx) => ({ line, num: idx + 1 })) + .filter(({ line }) => /^\*/.test(line)) + .map(({ num }) => num), + }); + } + + // Check for escaped underscores in field names + if (/^\w+\\_\w+:/m.test(frontmatter)) { + errors.push({ + type: "escaped-underscores", + message: "Found escaped underscores (\\_) in field names", + lines: frontmatter + .split("\n") + .map((line, idx) => ({ line, num: idx + 1 })) + .filter(({ line }) => /^\w+\\_\w+:/.test(line)) + .map(({ num }) => num), + }); + } + + // Check for URLs wrapped in angle brackets + if (/]+>/m.test(frontmatter)) { + errors.push({ + type: "angle-bracket-urls", + message: "Found URLs wrapped in angle brackets (<>)", + lines: frontmatter + .split("\n") + .map((line, idx) => ({ line, num: idx + 1 })) + .filter(({ line }) => /]+>/.test(line)) + .map(({ num }) => num), + }); + } + + // Check for excessive blank lines in frontmatter + if (/\n\n\n+/.test(frontmatter)) { + errors.push({ + type: "excessive-blank-lines", + message: "Found excessive blank lines in frontmatter", + }); + } + + // Check for blank line immediately after opening --- + if (/^---\n\n/.test(frontmatter)) { + errors.push({ + type: "blank-line-after-opening", + message: "Found blank line immediately after opening ---", + }); + } + + return errors; +} + +/** + * Test to ensure valid YAML parsing + */ +test("all s2-docs markdown files have valid YAML frontmatter", (t) => { + const files = getAllMarkdownFiles(DOCS_ROOT); + const fileErrors = []; + + for (const filePath of files) { + // Skip README.md and INDEX.md files + if (filePath.endsWith("README.md") || filePath.endsWith("INDEX.md")) { + continue; + } + + const content = readFileSync(filePath, "utf-8"); + const frontmatter = extractFrontmatter(content); + + if (!frontmatter) { + fileErrors.push({ + file: filePath, + errors: [ + { + type: "missing-frontmatter", + message: "No YAML frontmatter found", + }, + ], + }); + continue; + } + + const errors = validateYamlFrontmatter(frontmatter, filePath); + if (errors.length > 0) { + fileErrors.push({ + file: filePath, + errors, + }); + } + } + + if (fileErrors.length > 0) { + console.error("\nYAML Frontmatter Validation Errors:\n"); + for (const { file, errors } of fileErrors) { + console.error(`\n${file}:`); + for (const error of errors) { + console.error(` - ${error.type}: ${error.message}`); + if (error.lines) { + console.error(` Lines: ${error.lines.join(", ")}`); + } + } + } + console.error( + `\nTotal files with errors: ${fileErrors.length}/${files.length}`, + ); + console.error( + "\nRun 'pnpm --filter @adobe/s2-docs-transformer run fix-yaml' to fix these issues automatically.", + ); + } + + t.is( + fileErrors.length, + 0, + `Found ${fileErrors.length} files with YAML frontmatter errors`, + ); +}); + +/** + * Test specific frontmatter structure requirements + */ +test("s2-docs frontmatter has required fields", (t) => { + const files = getAllMarkdownFiles(DOCS_ROOT); + const fileErrors = []; + + for (const filePath of files) { + // Skip README.md and INDEX.md files + if (filePath.endsWith("README.md") || filePath.endsWith("INDEX.md")) { + continue; + } + + const content = readFileSync(filePath, "utf-8"); + const frontmatter = extractFrontmatter(content); + + if (!frontmatter) { + continue; + } + + const requiredFields = ["title", "source_url", "category", "status"]; + const missingFields = []; + + for (const field of requiredFields) { + const regex = new RegExp(`^${field}:`, "m"); + if (!regex.test(frontmatter)) { + missingFields.push(field); + } + } + + if (missingFields.length > 0) { + fileErrors.push({ + file: filePath, + missingFields, + }); + } + } + + if (fileErrors.length > 0) { + console.error("\nMissing Required Fields:\n"); + for (const { file, missingFields } of fileErrors) { + console.error(`\n${file}:`); + console.error(` Missing: ${missingFields.join(", ")}`); + } + } + + t.is( + fileErrors.length, + 0, + `Found ${fileErrors.length} files with missing required fields`, + ); +});