Skip to content

fix(design-data): refine size token taxonomy - #1503

Open
NateBaldwinDesign wants to merge 33 commits into
mainfrom
SDS-16083-size-token-refinements
Open

NateBaldwinDesign wants to merge 33 commits into
mainfrom
SDS-16083-size-token-refinements

Conversation

@NateBaldwinDesign

@NateBaldwinDesign NateBaldwinDesign commented Sep 25, 2026 •

Copy link
Copy Markdown
Collaborator

Description

Size token refinements from SDS-16083 size phase.

Size token metric Reduction in this PR
Token quantity -66.22%
Average name length -20.74%
Longest token term length -62.50%

Related Issue

SDS-16264

Motivation and Context

See full motivation and context here

How Has This Been Tested?

  • Design audits & explorations
  • [Design] component application
  • [Engineering] component application

This PR is in draft so that we can publish a Snapshot release in order to allow further testing.

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@changeset-bot

changeset-bot Bot commented Sep 25, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 86362ee

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@adobe/spectrum-design-data Minor
@adobe/spectrum-tokens Minor
@adobe/design-data-wasm Patch
@adobe/spectrum-component-api-schemas Patch
@adobe/design-system-registry Patch
@adobe/design-data-agent-mcp Patch
@adobe/design-data-mcp Patch
markdown-generator Patch
@adobe/token-corpus-migrate Patch
@adobe/token-naming-audit Patch
@adobe/token-names Patch
s2-tokens-viewer Patch
@adobe/design-data Patch
@adobe/spectrum-design-data-mcp Patch
component-options-editor Patch
@adobe/design-data-skill Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

Copy link
Copy Markdown
Contributor

🧩 Component Schema Changes Report

No component schema changes detected.

This comment was automatically generated by the component schema diff tool. 🤖

@github-actions

github-actions Bot commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

🎨 Token Changes Report

Tokens Changed (457)

Original Branch: main

Newly Deprecated (278)
  • user-card-minimum-height-extra-large: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-large: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-medium: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-small: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-title-below-extra-large: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-title-below-large: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-title-below-medium: Consolidated into the shared container-minimum-height-* scale.
  • user-card-minimum-height-title-below-small: Consolidated into the shared container-minimum-height-* scale.
  • triple-calendar-popover-minimum-height: Fixed regardless of panel count; component-specific formula, not foundational.
  • triple-calendar-popover-minimum-width: Scales linearly by panel count; component-specific formula, not foundational.
  • tree-view-disclosure-indicator-height: This is a UI icon + padding determined by the semantic layout values.
  • tree-view-disclosure-indicator-width: This is a UI icon + padding determined by the semantic layout values.
  • tree-view-minimum-height: Consolidated into the shared list-item-minimum-height-* scale.
  • tree-view-minimum-width: Consolidated into the shared list-item-minimum-width-* scale.
  • tooltip-maximum-width: Consolidated into the shared container-maximum-width-* scale.
  • toast-height: Content + padding derived; matches banner-height exactly.
  • toast-maximum-width: Consolidated into the shared banner-maximum-width token.
  • time-field-minimum-width: Fixed input pattern (mm/dd/yyyy or hh:mm) is component-specific by nature; platform-specific token, not foundational.
  • thumbnail-opacity-checkerboard-square-size: Consolidated into the shared opacity-checkerboard-square-size-* scale.
  • thumbnail-size-100: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-1000: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-200: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-300: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-400: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-50: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-500: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-600: Deprecate and replace with visual-size-500 or visual-size-600.
  • thumbnail-size-700: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-75: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • thumbnail-size-800: Deprecate and replace with visual-size-600 or -700. if 52px is needed exactly, implementations can override.
  • thumbnail-size-900: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • text-area-minimum-height: Consolidated into the shared field-minimum-height-* scale.
  • text-area-minimum-width: Consolidated into the shared field-minimum-width-* scale.
  • takeover-dialog-height: Full-screen behavior (100% of viewport), not a fixed size; not appropriate for a foundational token.
  • takeover-dialog-width: Full-screen behavior (100% of viewport), not a fixed size; not appropriate for a foundational token.
  • tag-maximum-width-multiplier: Outlier value with no equivalent on the aspect-ratio scale; platforms can define their own token if still needed.
  • tag-minimum-width-large: Formula specific to tag's padding-plus-character-allowance; doesn't generalize, platform-specific token instead.
  • tag-minimum-width-medium: Formula specific to tag's padding-plus-character-allowance; doesn't generalize, platform-specific token instead.
  • tag-minimum-width-small: Formula specific to tag's padding-plus-character-allowance; doesn't generalize, platform-specific token instead.
  • tag-field-default-width-large: Consolidated into the shared field-width-* scale.
  • tag-field-default-width-medium: Consolidated into the shared field-width-* scale.
  • tag-field-default-width-small: Consolidated into the shared field-width-* scale.
  • tag-field-minimum-height-large: Consolidated into the shared field-minimum-height-* scale.
  • tag-field-minimum-height-medium: Consolidated into the shared field-minimum-height-* scale.
  • tag-field-minimum-height-small: Consolidated into the shared field-minimum-height-* scale.
  • tag-field-minimum-width: Consolidated into the shared field-minimum-width-* scale.
  • tab-item-compact-height-extra-large: Density affects padding, not height; height token no longer needed.
  • tab-item-compact-height-large: Density affects padding, not height; height token no longer needed.
  • tab-item-compact-height-medium: Density affects padding, not height; height token no longer needed.
  • tab-item-compact-height-small: Density affects padding, not height; height token no longer needed.
  • tab-item-height-extra-large: Consolidated into the shared base-height-* scale.
  • tab-item-height-large: Consolidated into the shared base-height-* scale.
  • tab-item-height-medium: Consolidated into the shared base-height-* scale.
  • tab-item-height-small: Consolidated into the shared base-height-* scale.
  • table-row-height-extra-large: Consolidated into the shared list-item-height-* scale.
  • table-row-height-extra-large-compact: Density affects padding, not height; height token no longer needed.
  • table-row-height-extra-large-spacious: Density affects padding, not height; height token no longer needed.
  • table-row-height-large: Consolidated into the shared list-item-height-* scale.
  • table-row-height-large-compact: Density affects padding, not height; height token no longer needed.
  • table-row-height-large-spacious: Density affects padding, not height; height token no longer needed.
  • table-row-height-medium: Consolidated into the shared list-item-height-* scale.
  • table-row-height-medium-compact: Density affects padding, not height; height token no longer needed.
  • table-row-height-medium-spacious: Density affects padding, not height; height token no longer needed.
  • table-row-height-small: Consolidated into the shared list-item-height-* scale.
  • table-row-height-small-compact: Density affects padding, not height; height token no longer needed.
  • table-row-height-small-spacious: Density affects padding, not height; height token no longer needed.
  • table-section-header-row-height-extra-large: Consolidated into the shared list-item-height-* scale, one step down.
  • table-section-header-row-height-large: Consolidated into the shared list-item-height-* scale, one step down.
  • table-section-header-row-height-medium: Consolidated into the shared list-item-height-* scale, one step down.
  • table-section-header-row-height-small: Consolidated into the shared list-item-height-* scale, one step down.
  • switch-control-height-extra-large: Consolidated into the shared control-size-* scale.
  • switch-control-height-large: Consolidated into the shared control-size-* scale.
  • switch-control-height-medium: Consolidated into the shared control-size-* scale.
  • switch-control-height-small: Consolidated into the shared control-size-* scale.
  • switch-control-width-extra-large: Formula-derived from control-size-* (handle × 2 + gap + border); platform-specific, not a fixed constant.
  • switch-control-width-large: Formula-derived from control-size-* (handle × 2 + gap + border); platform-specific, not a fixed constant.
  • switch-control-width-medium: Formula-derived from control-size-* (handle × 2 + gap + border); platform-specific, not a fixed constant.
  • switch-control-width-small: Formula-derived from control-size-* (handle × 2 + gap + border); platform-specific, not a fixed constant.
  • swatch-size-extra-small: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • swatch-size-large: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • swatch-size-medium: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • swatch-size-small: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • steplist-step-default-height-extra-large: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-height-large: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-height-medium: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-height-small: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-width-extra-large: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-width-large: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-width-medium: Component-specific value; not appropriate for a foundational token.
  • steplist-step-default-width-small: Component-specific value; not appropriate for a foundational token.
  • steplist-step-to-track-size-extra-large: Component-specific value; not appropriate for a foundational token.
  • steplist-step-to-track-size-large: Component-specific value; not appropriate for a foundational token.
  • steplist-step-to-track-size-medium: Component-specific value; not appropriate for a foundational token.
  • steplist-step-to-track-size-small: Component-specific value; not appropriate for a foundational token.
  • steplist-track-thickness-medium: Consolidated into the shared thickness-size-* scale.
  • status-light-dot-size-extra-large: Status light dot’s will be updated to match the UI icon size. These status dots are not provided via the UI Icon library, but their size & usage are aligned.
  • status-light-dot-size-large: Status light dot’s will be updated to match the UI icon size. These status dots are not provided via the UI Icon library, but their size & usage are aligned.
  • status-light-dot-size-medium: Status light dot’s will be updated to match the UI icon size. These status dots are not provided via the UI Icon library, but their size & usage are aligned.
  • status-light-dot-size-small: Status light dot’s will be updated to match the UI icon size. These status dots are not provided via the UI Icon library, but their size & usage are aligned.
  • standard-panel-maximum-width: Consolidated into the shared container-maximum-width-* scale.
  • standard-panel-minimum-width: Consolidated into the shared container-maximum-width-* scale.
  • standard-panel-width: Manually adjusted per t-shirt size, bounded by separate min/max tokens; not appropriate for a foundational token.
  • standard-dialog-maximum-width-large: Consolidated into the shared container-maximum-width-* scale.
  • standard-dialog-maximum-width-medium: Consolidated into the shared container-maximum-width-* scale.
  • standard-dialog-maximum-width-small: Consolidated into the shared container-maximum-width-* scale.
  • standard-dialog-minimum-width: Consolidated into the shared container-maximum-width-* scale.
  • stack-item-header-minimum-width: Value is bound by the container it sits inside; not an independent measurement, so no token needed.
  • slider-handle-extra-large: The slider handles could and should appear similar to other controls in the system. They seem too large in context next to Checkbox or Radio or Switch.
  • slider-handle-height-precision-extra-large: Consolidated into the shared control-size-* scale.
  • slider-handle-height-precision-large: Consolidated into the shared control-size-* scale.
  • slider-handle-height-precision-medium: Consolidated into the shared control-size-* scale.
  • slider-handle-height-precision-small: Consolidated into the shared control-size-* scale.
  • slider-handle-large: The slider handles could and should appear similar to other controls in the system. They seem too large in context next to Checkbox or Radio or Switch.
  • slider-handle-medium: The slider handles could and should appear similar to other controls in the system. They seem too large in context next to Checkbox or Radio or Switch.
  • slider-handle-precision-width: Consolidated into the shared thickness-* scale.
  • slider-handle-small: The slider handles could and should appear similar to other controls in the system. They seem too large in context next to Checkbox or Radio or Switch.
  • single-calendar-popover-minimum-height: Fixed regardless of panel count; component-specific formula, not foundational.
  • single-calendar-popover-minimum-width: Scales linearly by panel count; component-specific formula, not foundational.
  • side-navigation-indicator-height: This token was originally hard coded as 18px, but seemingly aligns with workflow icon & visual-size of the side nav item.
  • side-navigation-indicator-thickness: Consolidated into the shared thickness-* scale.
  • side-navigation-minimum-width: Consolidated into the shared list-item-minimum-width-* scale.
  • side-navigation-width: Consolidated into the shared list-width token; only current consumer, no size suffix needed.
  • select-box-horizontal-minimum-height: Consolidated into the shared container-minimum-height-* scale.
  • select-box-horizontal-minimum-width: Consolidated into the shared container-minimum-width-* scale.
  • select-box-horizontal-width: Consolidated into the shared container-width-* scale.
  • select-box-vertical-height: Consolidated into the shared container-height-* scale.
  • segmented-control-item-height: Consolidated into the shared base-height-* scale.
  • segmented-control-item-maximum-width: Consolidated into the shared base-maximum-width-* scale.
  • rating-height-medium: Consolidated into the shared base-height-* scale.
  • rating-height-small: Consolidated into the shared base-height-* scale.
  • rating-width-medium: Depends on icon count, not a fixed per-size value; compute at render time, no token needed.
  • rating-width-small: Depends on icon count, not a fixed per-size value; compute at render time, no token needed.
  • radio-button-control-size-extra-large: Consolidated into the shared control-size-* scale.
  • radio-button-control-size-large: Consolidated into the shared control-size-* scale.
  • radio-button-control-size-medium: Consolidated into the shared control-size-* scale.
  • radio-button-control-size-small: Consolidated into the shared control-size-* scale.
  • progress-circle-size-large: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • progress-circle-size-medium: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • progress-circle-size-small: remapped to visual sizing for visual elements (avatar, thumbnails, etc)
  • progress-bar-maximum-width: Governed by container + padding, not a fixed value; bar-width scale doesn't extend this far, no token needed.
  • progress-bar-minimum-width: Consolidated into the shared bar-minimum-width-* scale.
  • progress-bar-thickness-extra-large: Consolidated into the shared thickness-* scale.
  • progress-bar-thickness-large: Consolidated into the shared thickness-* scale.
  • progress-bar-thickness-medium: Consolidated into the shared thickness-* scale.
  • progress-bar-thickness-small: Consolidated into the shared thickness-* scale.
  • meter-maximum-width: Governed by container + padding, not a fixed value; bar-width scale doesn't extend this far, no token needed.
  • meter-minimum-width: Consolidated into the shared bar-minimum-width-* scale.
  • meter-thickness-extra-large: Consolidated into the shared thickness-* scale.
  • meter-thickness-large: Consolidated into the shared thickness-* scale.
  • meter-thickness-medium: Consolidated into the shared thickness-* scale.
  • meter-thickness-small: Consolidated into the shared thickness-* scale.
  • meter-width: Consolidated into the shared bar-width-* scale.
  • menu-item-section-divider-height: Derived from a divider plus padding; no fixed height token needed.
  • list-view-minimum-height: Consolidated into the shared list-item-* scale.
  • list-view-minimum-width: Consolidated into the shared list-item-* scale.
  • component-height-100: Consolidated into the shared base-height-* scale.
  • component-height-200: Consolidated into the shared base-height-* scale.
  • component-height-300: Consolidated into the shared base-height-* scale.
  • component-height-400: Consolidated into the shared base-height-* scale.
  • component-height-50: Consolidated into the shared base-height-* scale.
  • component-height-500: Consolidated into the shared base-height-* scale.
  • component-height-75: Consolidated into the shared base-height-* scale.
  • side-focus-indicator: Consolidated into the shared thickness-* scale.
  • strikethrough-day-thickness
  • tab-selection-indicator-thickness
  • in-line-alert-minimum-width: Consolidated into the shared banner-* scale.
  • in-field-progress-circle-size-100: Consolidated into the shared workflow-icon-* scale.
  • in-field-progress-circle-size-200: Consolidated into the shared workflow-icon-* scale.
  • in-field-progress-circle-size-300: Consolidated into the shared workflow-icon-* scale.
  • in-field-progress-circle-size-75: Consolidated into the shared workflow-icon-* scale.
  • in-field-button-width-stacked-extra-large: Derivable from spacing tokens plus icon size; no dedicated width scale needed.
  • in-field-button-width-stacked-large: Derivable from spacing tokens plus icon size; no dedicated width scale needed.
  • in-field-button-width-stacked-medium: Derivable from spacing tokens plus icon size; no dedicated width scale needed.
  • in-field-button-width-stacked-small: Derivable from spacing tokens plus icon size; no dedicated width scale needed.
  • illustrated-message-horizontal-maximum-width: Consolidated into the shared container-maximum-width-* scale.
  • illustrated-message-vertical-maximum-width: Consolidated into the shared container-maximum-width-* scale.
  • field-default-width-extra-large: Consolidated into the shared field-width-* scale.
  • field-default-width-large: Consolidated into the shared field-width-* scale.
  • field-default-width-medium: Consolidated into the shared field-width-* scale.
  • field-default-width-small: Consolidated into the shared field-width-* scale.
  • drop-zone-width: Consolidated into the shared container-width-* scale.
  • double-calendar-popover-minimum-height: Fixed regardless of panel count; component-specific formula, not foundational.
  • double-calendar-popover-minimum-width: Fixed regardless of panel count; component-specific formula, not foundational.
  • divider-horizontal-minimum-width: Consolidated into the shared bar-minimum-width-* scale.
  • divider-thickness-large: Consolidated into the shared thickness-* scale.
  • divider-thickness-medium: Consolidated into the shared thickness-* scale.
  • divider-thickness-small: Consolidated into the shared thickness-* scale.
  • divider-vertical-minimum-height: Consolidated into the shared bar-minimum-width-* scale.
  • date-picker-minimum-width: Fixed input pattern (mm/dd/yyyy) is component-specific; platform-specific token, not foundational.
  • date-field-minimum-width: Fixed input pattern (mm/dd/yyyy) is component-specific; platform-specific token, not foundational.
  • contextual-help-minimum-width: Consolidated into the shared container-minimum-width-* scale.
  • color-wheel-minimum-width: Referenced primitive size-1200 (144px); component-specific to Color wheel, not a container concept.
  • color-wheel-width: Referenced primitive size-1300 (192px); component-specific to Color wheel, not a container concept.
  • color-slider-length: Consolidated into the shared bar-width-* scale.
  • color-slider-minimum-length: Referenced primitive size-900 directly, no change.
  • color-loupe-height: Referenced primitive size-800 (64px); component-specific to Color loupe, not a shared category.
  • color-loupe-width: Referenced primitive size-700 (48px); component-specific to Color loupe, not a shared category.
  • color-handle-size: Referenced primitive size-300 (base); component-specific to Color handle, not a control-size concept.
  • color-handle-size-key-focus: Referenced primitive size-500 (key-focus); component-specific to Color handle, not a control-size concept.
  • color-control-track-width: Referenced primitive size-400 (24px); component-specific to the Color track, not a shared category.
  • color-area-height: Referenced primitive size-1300 (192px); component-specific to Color area, not a container concept.
  • color-area-minimum-height: Referenced primitive size-800 (64px); component-specific to Color area, not a container concept.
  • color-area-minimum-width: Referenced primitive size-800 (64px); component-specific to Color area, not a container concept.
  • color-area-width: Referenced primitive size-1300 (192px); component-specific to Color area, not a container concept.
  • collection-card-minimum-height-extra-large: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-extra-small: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-hero-extra-large: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-hero-extra-small: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-hero-large: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-hero-medium: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-hero-small: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-large: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-medium: Consolidated into the shared container-minimum-height-* scale.
  • collection-card-minimum-height-small: Consolidated into the shared container-minimum-height-* scale.
  • coach-mark-maximum-width: Consolidated into the shared container-maximum-width-* scale.
  • coach-mark-minimum-width: Consolidated into the shared container-minimum-width-* scale; grow-only floor, no independent minimum below the default.
  • coach-mark-width: Consolidated into the shared container-minimum-width-* scale; renders at this size by default and grows to the maximum, no smaller floor of its own.
  • checkbox-control-size-extra-large: Consolidated into the shared control-size-* scale.
  • checkbox-control-size-large: Consolidated into the shared control-size-* scale.
  • checkbox-control-size-medium: Consolidated into the shared control-size-* scale.
  • checkbox-control-size-small: Consolidated into the shared control-size-* scale.
  • card-default-width-extra-large: Consolidated into the shared container-width-* scale.
  • card-default-width-extra-small: Consolidated into the shared container-width-* scale.
  • card-default-width-large: Consolidated into the shared container-width-* scale.
  • card-default-width-medium: Consolidated into the shared container-width-* scale.
  • card-default-width-small: Consolidated into the shared container-width-* scale.
  • card-maximum-width-extra-large: Consolidated into the shared container-maximum-width-* scale.
  • card-maximum-width-extra-small: Consolidated into the shared container-maximum-width-* scale.
  • card-maximum-width-large: Consolidated into the shared container-maximum-width-* scale.
  • card-maximum-width-medium: Consolidated into the shared container-maximum-width-* scale.
  • card-maximum-width-small: Consolidated into the shared container-maximum-width-* scale.
  • card-minimum-height-extra-large: Consolidated into the shared container-minimum-height-* scale.
  • card-minimum-height-extra-small: Consolidated into the shared container-minimum-height-* scale.
  • card-minimum-height-large: Consolidated into the shared container-minimum-height-* scale.
  • card-minimum-height-medium: Consolidated into the shared container-minimum-height-* scale.
  • card-minimum-height-small: Consolidated into the shared container-minimum-height-* scale.
  • card-minimum-width-default: Duplicate of card-minimum-width-extra-small; not in any S2 spec, no replacement needed.
  • card-minimum-width-extra-large: Consolidated into the shared container-minimum-width-* scale.
  • card-minimum-width-extra-small: Consolidated into the shared container-minimum-width-* scale.
  • card-minimum-width-large: Consolidated into the shared container-minimum-width-* scale.
  • card-minimum-width-medium: Consolidated into the shared container-minimum-width-* scale.
  • card-minimum-width-small: Consolidated into the shared container-minimum-width-* scale.
  • card-preview-minimum-height: Not found in any S2 token specs, no replacement needed.
  • breadcrumbs-height-multiline: Fully derived from content + gap; not an independent value, no token needed.
  • bar-panel-maximum-width: Not resizable; value is just content + padding + density, no token needed.
  • bar-panel-minimum-width: Not resizable; value is just content + padding + density, no token needed.
  • bar-panel-width: Not resizable; value is just content + padding + density, no token needed.
  • avatar-size-100: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-1000: remapped from -1000 to -800
  • avatar-size-1100: Deprecate and replace with visual-size-800 or -900. if 72px is needed exactly, implementations can override.
  • avatar-size-1200: remapped from -1200 to -900
  • avatar-size-1300: Deprecate and replace with visual-size-900 or -1000. if 88px is needed exactly, implementations can override.
  • avatar-size-1400: remapped from -1400 to -1000
  • avatar-size-1500: Deprecate and replace with visual-size-1000. if 104px is needed exactly, implementations can override.
  • avatar-size-200: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-300: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-400: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-50: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-500: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-600: Deprecate and replace with visual-size-500 or -600. if 44px is needed exactly, implementations can override.
  • avatar-size-700: remapped from -700 to -600
  • avatar-size-75: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-size-800: Deprecate and replace with visual-size-600 or -700. if 52px is needed exactly, implementations can override.
  • avatar-size-900: remapped from -900 to -700
  • avatar-group-size-100: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-group-size-200: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-group-size-300: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-group-size-400: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-group-size-50: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-group-size-500: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • avatar-group-size-75: avatars, thumbnails, swatches, progress circles, illustrations all "visual-size"
  • alert-dialog-maximum-width: Consolidated into the shared container-maximum-width-* scale.
  • alert-dialog-minimum-width: Consolidated into the shared container-maximum-width-* scale.
  • alert-banner-minimum-height: Use the shared banner-minimum-height token.
  • alert-banner-width: Consolidated into the shared banner-width-* scale.
  • action-bar-height: Content + padding derived; matches banner-height exactly, no change.
  • action-bar-minimum-width: Consolidated into the shared banner-minimum-width-* scale.
  • accordion-minimum-width: Consolidated into the shared list-item-minimum-width-* scale.
Newly "Un-deprecated" (4)
  • field-width-extra-large
  • field-width-large
  • field-width-medium
  • field-width-small
Added (149)
  • aspect-ratio-100
  • aspect-ratio-200
  • aspect-ratio-300
  • aspect-ratio-400
  • aspect-ratio-500
  • aspect-ratio-600
  • aspect-ratio-700
  • aspect-ratio-800
  • banner-height
  • banner-maximum-width
  • banner-minimum-height
  • banner-minimum-width-large
  • banner-minimum-width-medium
  • banner-width
  • base-height-2x-large
  • base-height-3x-large
  • base-height-extra-large
  • base-height-extra-small
  • base-height-large
  • base-height-medium
  • base-height-small
  • base-maximum-width
  • container-height
  • container-maximum-width-2x-large
  • container-maximum-width-2x-small
  • container-maximum-width-3x-large
  • container-maximum-width-extra-large
  • container-maximum-width-extra-small
  • container-maximum-width-large
  • container-maximum-width-medium
  • container-maximum-width-small
  • container-minimum-height-2x-large
  • container-minimum-height-2x-small
  • container-minimum-height-3x-large
  • container-minimum-height-3x-small
  • container-minimum-height-extra-large
  • container-minimum-height-extra-small
  • container-minimum-height-large
  • container-minimum-height-medium
  • container-minimum-height-small
  • container-minimum-width-2x-large
  • container-minimum-width-3x-large
  • container-minimum-width-extra-large
  • container-minimum-width-extra-small
  • container-minimum-width-large
  • container-minimum-width-medium
  • container-minimum-width-small
  • container-width-2x-large
  • container-width-3x-large
  • container-width-extra-large
  • container-width-extra-small
  • container-width-large
  • container-width-medium
  • container-width-small
  • list-width
  • size-100
  • size-1000
  • size-1100
  • size-1200
  • size-1300
  • size-1400
  • size-1500
  • size-1600
  • size-1700
  • size-1800
  • size-1900
  • size-200
  • size-2000
  • size-25
  • size-300
  • size-350
  • size-400
  • size-450
  • size-50
  • size-500
  • size-550
  • size-600
  • size-700
  • size-75
  • size-750
  • size-800
  • size-85
  • size-900
  • bar-minimum-width-2x-small
  • bar-minimum-width-extra-large
  • bar-minimum-width-extra-small
  • bar-minimum-width-large
  • bar-minimum-width-medium
  • bar-minimum-width-small
  • bar-thickness-2x-large
  • bar-thickness-2x-small
  • bar-thickness-3x-large
  • bar-thickness-extra-large
  • bar-thickness-extra-small
  • bar-thickness-large
  • bar-thickness-medium
  • bar-thickness-small
  • bar-width-extra-large
  • bar-width-large
  • bar-width-medium
  • bar-width-small
  • base-visual-size-2x-large
  • base-visual-size-2x-small
  • base-visual-size-3x-large
  • base-visual-size-3x-small
  • base-visual-size-extra-large
  • base-visual-size-extra-small
  • base-visual-size-large
  • base-visual-size-medium
  • base-visual-size-small
  • control-size-extra-large
  • control-size-extra-small
  • control-size-large
  • control-size-medium
  • control-size-small
  • field-minimum-height-extra-large
  • field-minimum-height-large
  • field-minimum-height-medium
  • field-minimum-height-small
  • field-minimum-width-extra-large
  • field-minimum-width-large
  • field-minimum-width-medium
  • field-minimum-width-small
  • field-width-2x-large
  • field-width-3x-large
  • list-item-height-extra-large
  • list-item-height-extra-small
  • list-item-height-large
  • list-item-height-medium
  • list-item-height-small
  • list-item-minimum-height
  • list-item-minimum-width-medium
  • list-item-minimum-width-small
  • list-item-width-extra-large
  • list-item-width-large
  • list-item-width-medium
  • list-item-width-small
  • visual-size-100
  • visual-size-1000
  • visual-size-200
  • visual-size-300
  • visual-size-400
  • visual-size-50
  • visual-size-500
  • visual-size-600
  • visual-size-700
  • visual-size-75
  • visual-size-800
  • visual-size-900

Updated (26)

Added Properties (14)
  • text-field-minimum-width-multiplier
    • renamed: aspect-ratio-300
  • swatch-rectangle-width-multiplier
    • renamed: aspect-ratio-500
  • search-field-minimum-width-multiplier
    • renamed: aspect-ratio-800
  • picker-minimum-width-multiplier
    • renamed: aspect-ratio-500
  • number-field-minimum-width-multiplier
    • renamed: aspect-ratio-100
  • number-field-with-stepper-minimum-width-extra-large
    • renamed: aspect-ratio-800
  • number-field-with-stepper-minimum-width-large
    • renamed: aspect-ratio-800
  • number-field-with-stepper-minimum-width-medium
    • renamed: aspect-ratio-800
  • number-field-with-stepper-minimum-width-small
    • renamed: aspect-ratio-800
  • gripper-icon-size-100
    • deprecated_comment: Use bar-thickness-small instead.
    • renamed: bar-thickness-small
  • combo-box-minimum-width-multiplier
    • renamed: aspect-ratio-700
  • coach-mark-media-height
    • renamed: aspect-ratio-200
  • coach-mark-media-minimum-height
    • renamed: aspect-ratio-400
  • button-minimum-width-multiplier
    • renamed: aspect-ratio-600
Updated Properties (12)
  • tooltip-tip-height
    • desktop.value: 5px -> 4px
    • mobile.value: 6px -> 4px
  • tooltip-tip-width
    • desktop.value: 10px -> 8px
    • mobile.value: 12px -> 8px
  • table-row-height-extra-large-regular
    • desktop.value: {table-row-height-extra-large} -> {list-item-height-extra-large}
    • mobile.value: {table-row-height-extra-large} -> {list-item-height-extra-large}
  • table-row-height-large-regular
    • desktop.value: {table-row-height-large} -> {list-item-height-large}
    • mobile.value: {table-row-height-large} -> {list-item-height-large}
  • table-row-height-medium-regular
    • desktop.value: {table-row-height-medium} -> {list-item-height-medium}
    • mobile.value: {table-row-height-medium} -> {list-item-height-medium}
  • table-row-height-small-regular
    • desktop.value: {table-row-height-small} -> {list-item-height-small}
    • mobile.value: {table-row-height-small} -> {list-item-height-small}
  • meter-default-width
    • value: {meter-width} -> {bar-width-large}
  • illustrated-message-maximum-width
    • value: {illustrated-message-vertical-maximum-width} -> {container-maximum-width-large}
  • field-width-extra-large
    • schema: alias.json -> dimension.json
    • value: {field-default-width-extra-large} -> 288px
    • uuid: a903b595-ffe8-43ae-af9b-7b6577191dc5 -> 4c09da43-93d3-46ed-8302-dc685d099097
  • field-width-large
    • schema: alias.json -> dimension.json
    • value: {field-default-width-large} -> 240px
    • uuid: cc43e053-1255-403f-aaf5-2182f5438592 -> 0fb38ac8-dbfb-442a-b142-3435102fe879
  • field-width-medium
    • schema: alias.json -> dimension.json
    • value: {field-default-width-medium} -> 192px
    • uuid: 935927d3-b25e-468a-999a-938643901e50 -> 7f0d2bf8-2dda-4413-893e-1b1003e9c77d
  • field-width-small
    • schema: alias.json -> dimension.json
    • value: {field-default-width-small} -> 144px
    • uuid: d316d676-b4cf-4d16-b89c-63ef1d969861 -> 188453d2-7e27-414d-b5a2-680653844526

This comment was automatically generated by the token diff tool. 🤖

@github-actions

github-actions Bot commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

Run report for 86362ee7

Total time: 8m 55s | Comparison time: 24m 31s | Estimated savings: 15m 35s (63.6% faster)

Action Time Status Info
⬛️ SetupProto(0.57.4) 0ms Skipped
🟩 SyncWorkspace 9.8ms Passed
🟩 SyncProject(sdk) 0.4ms Passed
🟩 SyncProject(design-data-spec) 0.9ms Passed
🟩 SyncProject(root) 0.6ms Passed
🟩 SyncProject(tokens) 0.5ms Passed
🟩 SyncProject(sdk-wasm) 0.7ms Passed
🟩 SyncProject(design-data) 0.7ms Passed
🟩 SyncProject(design-data-mcp) 0.7ms Passed
🟩 SyncProject(component-schemas) 1.2ms Passed
⬛️ SetupToolchain(node:20.17.0) 408.1ms Skipped
⬛️ SetupToolchain(rust:1.88.0) 472.6ms Skipped
🟩 SetupEnvironment(rust, sdk) 86.4ms Passed
⬛️ InstallDependencies(rust, sdk) 2.5ms Skipped
⬛️ SetupToolchain(pnpm:10.17.1) 256.4ms Skipped
⬛️ SetupToolchain(javascript) 0ms Skipped
🟩 SetupEnvironment(javascript) 0.8ms Passed
⬛️ InstallDependencies(javascript) 0.1ms Skipped
⬛️ SetupEnvironment(javascript, sdk) 0.9ms Skipped
🟩 RunTask(sdk:fmt-check) 1.7s Passed
And 28 more...
Expanded report
Action Time Status Info
🟩 RunTask(component-schemas:test) 2.4s Passed
🟩 RunTask(design-data:validate-registry) 238ms Passed
🟩 RunTask(design-data:validate-visuals) 470.9ms Passed
🟩 InstallDependencies(javascript, sdk) 5.5s Passed
🟩 RunTask(sdk:codegen-check) 80.1ms Passed
🟩 RunTask(tokens:buildTokens) 1m 3s Passed
🟩 RunTask(sdk:lint) 1m 6s Passed
🟩 RunTask(sdk-wasm:cache-build) 1m 47s Passed
🟩 RunTask(sdk:test-doc) 3m 7s Passed SLOW
🟩 RunTask(sdk:build) 2m 28s Passed SLOW
🟩 RunTask(tokens:validateDesignData) 3s Passed
🟩 RunTask(design-data:validate-dataset) 7.9s Passed
🟩 RunTask(design-data:roundtrip-verify) 1.5s Passed
🟩 RunTask(design-data:legacy-output) 967.5ms Passed
🟥 RunTask(figma-spec-plugin:test) 33.1s Failed
🟥 RunTask(root:test-platform-recipes-e2e) 1m 20s Failed
🟩 RunTask(tokens:verifyDesignDataSnapshot) 1.8s Passed
🟩 RunTask(tokens:verifyLegacyRoundtrip) 2.6s Passed
🟩 RunTask(tokens:verifyLegacyOutput) 1.9s Passed
🟩 RunTask(design-data:validate) 19.7s Passed
🟩 RunTask(tokens:test) 10.7s Passed
🟩 RunTask(markdown-generator:generate) 2.6s Passed
🟥 RunTask(root:validate-platform-recipes) 2m 26s Failed SLOW
🟩 RunTask(sdk-wasm:build) 5m 6s Passed SLOW
🟩 RunTask(design-data-mcp:stage) 2.1s Passed
🟩 RunTask(design-data-mcp:test) 21.8s Passed
🟩 RunTask(design-data-mcp-eval:test) 34.2s Passed
🟩 RunTask(sdk:test) 7m 48s Passed SLOW
Changed files
.changeset/fix-menu-relationship-json.md
.changeset/full-buckets-lead.md
.changeset/gripper-icon-replacement.md
.changeset/propagate-size-tokens-to-legacy.md
.changeset/reconcile-field-width-legacy-keys.md
.changeset/refine-size-token-taxonomy.md
.changeset/repoint-size-relationships.md
.changeset/resync-layout-legacy-output.md
.changeset/synchronize-size-token-legacy-output.md
.changeset/visual-size-value-references.md
docs/proposals/015-single-visual-engine.md
packages/design-data/registry/anatomy-terms.json
packages/design-data/relationships/accordion.json
packages/design-data/relationships/action-bar.json
packages/design-data/relationships/action-button.json
packages/design-data/relationships/alert-banner.json
packages/design-data/relationships/alert-dialog.json
packages/design-data/relationships/avatar-group.json
packages/design-data/relationships/avatar.json
packages/design-data/relationships/badge.json
packages/design-data/relationships/bar-panel.json
packages/design-data/relationships/breadcrumbs.json
packages/design-data/relationships/button.json
packages/design-data/relationships/card.json
packages/design-data/relationships/cards.json
packages/design-data/relationships/checkbox.json
packages/design-data/relationships/close-button.json
packages/design-data/relationships/coach-mark.json
packages/design-data/relationships/collection-card.json
packages/design-data/relationships/color-area.json
packages/design-data/relationships/color-control.json
packages/design-data/relationships/color-handle.json
packages/design-data/relationships/color-loupe.json
packages/design-data/relationships/color-slider.json
packages/design-data/relationships/color-wheel.json
packages/design-data/relationships/combo-box.json
packages/design-data/relationships/contextual-help.json
packages/design-data/relationships/date-field.json
packages/design-data/relationships/date-picker.json
packages/design-data/relationships/divider.json
packages/design-data/relationships/double-calendar.json
packages/design-data/relationships/drop-zone.json
packages/design-data/relationships/field-label.json
packages/design-data/relationships/field.json
packages/design-data/relationships/help-text.json
packages/design-data/relationships/illustrated-message.json
packages/design-data/relationships/in-field-button.json
packages/design-data/relationships/in-field-progress-circle.json
packages/design-data/relationships/in-line-alert.json
packages/design-data/relationships/list-view.json
packages/design-data/relationships/menu.json
packages/design-data/relationships/meter.json
packages/design-data/relationships/number-field.json
packages/design-data/relationships/picker.json
packages/design-data/relationships/progress-bar.json
packages/design-data/relationships/progress-circle.json
packages/design-data/relationships/radio-button.json
packages/design-data/relationships/rating.json
packages/design-data/relationships/search-field.json
packages/design-data/relationships/segmented-control.json
packages/design-data/relationships/select-box.json
packages/design-data/relationships/side-navigation.json
packages/design-data/relationships/single-calendar.json
packages/design-data/relationships/slider.json
packages/design-data/relationships/stack-item.json
packages/design-data/relationships/standard-dialog.json
packages/design-data/relationships/standard-panel.json
packages/design-data/relationships/status-light.json
packages/design-data/relationships/steplist.json
packages/design-data/relationships/swatch.json
packages/design-data/relationships/switch.json
packages/design-data/relationships/table.json
packages/design-data/relationships/tabs.json
packages/design-data/relationships/tag-field.json
packages/design-data/relationships/tag.json
packages/design-data/relationships/takeover-dialog.json
packages/design-data/relationships/text-area.json
packages/design-data/relationships/text-field.json
packages/design-data/relationships/thumbnail.json
packages/design-data/relationships/time-field.json
packages/design-data/relationships/toast.json
packages/design-data/relationships/tooltip.json
packages/design-data/relationships/tree-view.json
packages/design-data/relationships/triple-calendar.json
packages/design-data/relationships/user-card.json
packages/design-data/tokens/layout-component.tokens.json
packages/design-data/tokens/layout.tokens.json
packages/tokens/src/accordion.json
packages/tokens/src/action-bar.json
packages/tokens/src/alert-banner.json
packages/tokens/src/alert-dialog.json
packages/tokens/src/avatar-group.json
packages/tokens/src/avatar.json
packages/tokens/src/bar-panel.json
packages/tokens/src/breadcrumbs.json
packages/tokens/src/button.json
packages/tokens/src/card.json
packages/tokens/src/checkbox.json
packages/tokens/src/coach-mark.json
packages/tokens/src/collection-card.json
packages/tokens/src/color-area.json
packages/tokens/src/color-control.json
packages/tokens/src/color-handle.json
packages/tokens/src/color-loupe.json
packages/tokens/src/color-slider.json
packages/tokens/src/color-wheel.json
packages/tokens/src/combo-box.json
packages/tokens/src/contextual-help.json
packages/tokens/src/date-field.json
packages/tokens/src/date-picker.json
packages/tokens/src/divider.json
packages/tokens/src/double-calendar.json
packages/tokens/src/drop-zone.json
packages/tokens/src/field.json
packages/tokens/src/illustrated-message.json
packages/tokens/src/in-field-button.json
packages/tokens/src/in-field-progress-circle.json
packages/tokens/src/in-line-alert.json
packages/tokens/src/layout-component.json
packages/tokens/src/layout.json
packages/tokens/src/list-view.json
packages/tokens/src/menu.json
packages/tokens/src/meter.json
packages/tokens/src/number-field.json
packages/tokens/src/picker.json
packages/tokens/src/progress-bar.json
packages/tokens/src/progress-circle.json
packages/tokens/src/radio-button.json
packages/tokens/src/rating.json
packages/tokens/src/search-field.json
packages/tokens/src/segmented-control.json
packages/tokens/src/select-box.json
packages/tokens/src/side-navigation.json
packages/tokens/src/single-calendar.json
packages/tokens/src/slider.json
packages/tokens/src/stack-item.json
packages/tokens/src/standard-dialog.json
packages/tokens/src/standard-panel.json
packages/tokens/src/status-light.json
packages/tokens/src/steplist.json
packages/tokens/src/swatch.json
packages/tokens/src/switch.json
packages/tokens/src/table.json
packages/tokens/src/tabs.json
packages/tokens/src/tag-field.json
packages/tokens/src/tag.json
packages/tokens/src/takeover-dialog.json
packages/tokens/src/text-area.json
packages/tokens/src/text-field.json
packages/tokens/src/thumbnail.json
packages/tokens/src/time-field.json
packages/tokens/src/toast.json
packages/tokens/src/tooltip.json
packages/tokens/src/tree-view.json
packages/tokens/src/triple-calendar.json
packages/tokens/src/user-card.json
packages/tokens/test/checkSetsUnique.js
packages/tokens/test/sizeRefinements.test.js
sdk/cli/tests/cli_platform.rs
sdk/cli/tests/cli_render_batch.rs
sdk/cli/tests/cli_spec_sheet.rs
sdk/core/src/registry_data.rs
sdk/core/src/visual.rs
sdk/core/tests/fixtures/recipe-lint-baseline.json
sdk/core/tests/fixtures/recipe-snapshots.json
sdk/core/tests/fixtures/visual-golden/accordion/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/accordion/default.svg
sdk/core/tests/fixtures/visual-golden/accordion/direct-actions.svg
sdk/core/tests/fixtures/visual-golden/accordion/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/action-button/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/action-button/default.svg
sdk/core/tests/fixtures/visual-golden/action-button/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/badge/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/badge/default.svg
sdk/core/tests/fixtures/visual-golden/badge/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/badge/wrapped-label-icon-narrow.svg
sdk/core/tests/fixtures/visual-golden/badge/wrapped-label-narrow.svg
sdk/core/tests/fixtures/visual-golden/button/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/button/default.svg
sdk/core/tests/fixtures/visual-golden/button/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/checkbox/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/checkbox/default.svg
sdk/core/tests/fixtures/visual-golden/checkbox/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/checkbox/wrapped-label-narrow.svg
sdk/core/tests/fixtures/visual-golden/radio-button/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/radio-button/default.svg
sdk/core/tests/fixtures/visual-golden/radio-button/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/radio-button/wrapped-label-narrow.svg
sdk/core/tests/fixtures/visual-golden/switch/all-on-dark-mobile.svg
sdk/core/tests/fixtures/visual-golden/switch/default.svg
sdk/core/tests/fixtures/visual-golden/switch/first-values-wireframe.svg
sdk/core/tests/fixtures/visual-golden/switch/wrapped-label-narrow.svg
tools/design-data-mcp/src/cli.js
tools/token-mapping-analyzer/test/apply.test.js

Regenerate packages/tokens/src from the cascade source in
packages/design-data to include this PR's size token taxonomy work,
and fix three cascade data bugs surfaced by the regeneration:

- relationships/field.json: remove the deprecated field-width-* aliases
  that duplicated the legacyKey now owned by the new layout-component
  size tokens (confirmed with Nate Baldwin over Slack that the legacy
  names are reused intentionally, not an accidental collision).
- tokens/layout-component.tokens.json, tokens/layout.tokens.json: move
  82 non-component-scoped tokens (banner-*, base-height-*, container-*,
  size-*, thickness-size-*) out of layout-component into layout, where
  shared/foundation tokens belong.
- relationships, tokens: add the missing lifecycle deprecation to 149
  scale-set sibling entries (mobile variants) left inconsistent with
  their already-deprecated desktop counterpart.

packages/tokens/src now regenerates cleanly: 2650 tokens across 91
files, all tokens:test checks passing.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@GarthDB

GarthDB commented Sep 29, 2026 •

Copy link
Copy Markdown
Member

Snapshot release published

A @adobe/spectrum-tokens snapshot reflecting this PR's size token taxonomy work is now on npm, published from a disposable snapshot-size-token-taxonomy branch cut off this PR's head (this PR itself was never touched by the release workflow — versions and changesets here are unchanged).

npm i @adobe/spectrum-tokens@size-token-taxonomy

Current resolved version: 0.0.0-size-token-taxonomy-20260929225107. Since it's a 0.0.0-* snapshot version, it can't be reached via a semver range — pin the tag or exact version explicitly. Re-run the dispatch and this comment's install line will move to a newer timestamp if this PR gains more commits and needs a refreshed snapshot.

What's in it

packages/tokens/src was stale relative to this PR's cascade changes in packages/design-data (the legacy-output generator wasn't picking up 63 files / +159 tokens because of a CI gap — filed as spectrum-design-data-cgoa). Regenerating it and running the token test suite surfaced three real cascade data bugs, now fixed on this branch:

  • A legacyKey collision between the old field-width-* deprecated aliases and this PR's new layout-component size tokens, which also intentionally reuse those names — resolved per Nate's confirmation in Slack by removing the old duplicate aliases.
  • 82 shared/foundation tokens (banner-*, base-height-*, container-*, size-*, thickness-size-*) that had landed in layout-component.tokens.json (meant for genuine per-component tokens) instead of layout.tokens.json.
  • 149 scale-set sibling tokens (mobile-scale rows) that were missing the lifecycle.deprecatedIn block already present on their deprecated desktop-scale counterpart.

Also fixed the snapshot-release workflow itself along the way (it was using a stale NPM_TOKEN and an OIDC-incompatible npm shim) — that fix is up separately in #1518 since it affects every snapshot release, not just this one.

cc @NateBaldwinDesign for visibility since this touches the field-width naming decision from Slack.

GarthDB and others added 13 commits September 29, 2026 17:04
… fixes

CI's check-data-bump rule requires a pending changeset bumping
@adobe/design-data-wasm whenever packages/design-data/tokens/*.tokens.json
changes. The reconcile-field-width-legacy-keys changeset touched
layout-component.tokens.json and layout.tokens.json but only bumped
@adobe/spectrum-design-data; add the design-data-wasm patch bump so the
embedded wasm dataset snapshot picks up these fixes too.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Erroneously added in the original PR. Removed since 'bar-thickness-*' cover their intended purpose
Removed multiple size definitions for indicators from layout-component.tokens.json as they were not intended to be introduced in original PR
Removed deprecated lifecycle and rationale fields from visual size tokens. Design decided not to deprecate
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Attach file and source locations to relationship JSON parse errors.
Cover diagnostic behavior with regression tests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Regenerate legacy output and remove dangling replacement pointers.
Include canonical design data in the legacy parity task cache inputs.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@GarthDB

GarthDB commented Oct 1, 2026 •

Copy link
Copy Markdown
Member

Spectrum tokens snapshot published

A refreshed @adobe/spectrum-tokens snapshot of this PR's size token taxonomy work is now on npm:

npm i @adobe/spectrum-tokens@size-token-taxonomy

The size-token-taxonomy tag resolves to 0.0.0-size-token-taxonomy-20260930224730. Pin the tag or exact version explicitly; ordinary stable semver ranges won't select this prerelease.

What's in it

This snapshot includes the token changes through f53020c8:

  • The size token taxonomy refinements, including the field-width legacy-key reconciliation with the new layout-component size tokens.
  • Regenerated legacy token output, so packages/tokens/src reflects the canonical size-token changes.
  • The follow-up synchronization and CI validation fixes that check canonical-to-legacy token parity.

The snapshot was published from the disposable snapshot-size-token-taxonomy branch. This PR's versions and pending changesets are unchanged.

The tag can move to a newer snapshot after a refresh. To keep testing this exact build, install @adobe/spectrum-tokens@0.0.0-size-token-taxonomy-20260930224730.

@GarthDB

GarthDB commented Oct 1, 2026

Copy link
Copy Markdown
Member

Size taxonomy variables are now in the Figma POC

The variables have been written to S2 / Web (Size variables POC).

They correspond to @adobe/spectrum-tokens@0.0.0-size-token-taxonomy-20260930224730, not a newer PR head or the movable dist-tag.

Same canonical source

I regenerated packages/tokens/src from packages/design-data/tokens in an isolated worktree at d10631a1. The worktree stayed clean, and all 91 generated JSON files match the published npm tarball byte-for-byte. The tarball's SHA-512 integrity also matches npm's metadata. npm's provenance names f53020c804e76e2753000e49fa9e2cb7fcf743c0 as the release source.

The Figma exporter currently consumes that generated legacy projection. packages/design-data remains the source of truth; this was not an independently edited copy of the tokens.

What landed

Result Count
Variables created 951
Existing variables updated 1,607
Mode values written 3,498
Alias-valued entries 419
Variables deleted 0
Unrelated variables changed 0

Post-write readback confirmed every emitted variable's name, collection, type, WEB code syntax, and mode values, including alias targets. Numeric comparisons used an absolute tolerance of 0.000001; the largest readback difference was 0.000000029685450542160652.

Examples: field-width-small/medium/large/extra-large are 144/192/240/288px; bar-thickness-* is present with the new scale.

Deliberate POC boundaries

  • Desktop only, as requested for this Web POC. No Mobile mode was added; 771 Mobile values were intentionally omitted.
  • Deprecated tokens retained, with no renaming or pruning. All 282 newly deprecated keys in the token report are present in this snapshot and represented in the Figma file.
  • 162 existing Figma-only variables retained in the two managed collections: 104 in .Color theme, 58 in .Platform scale. Other collections were untouched. These are coverage gaps, not an automatic deletion list.
  • The exporter skipped 77 tokens: 58 composites, 11 unresolved aliases, 1 unsupported schema, and 7 unparseable values. Full lists follow.
  • This updates variables inside the POC file. It does not perform Figma's separate library Publish action or change collection visibility; the two target collections were hiddenFromPublishing in the baseline.

Verification

  • moon run sdk:build - passed.
  • moon run design-data:legacy-output tokens:verifyLegacyOutput design-data:roundtrip-verify - passed; regeneration left the worktree clean.
  • design-data figma audit --snapshot <baseline> --token-dir <snapshot>/packages/tokens/src --format json - passed.
  • design-data figma diff --snapshot <baseline> --format json - completed from the isolated snapshot worktree. This is supplementary diagnostic output, not the publish acceptance check.
  • design-data figma export <snapshot>/packages/tokens/src --file-key 6VgZUC8QxFDxsHWD0Jdjfj --dry-run - passed, with the Desktop-only omissions and skips above.
  • design-data figma export <snapshot>/packages/tokens/src --file-key 6VgZUC8QxFDxsHWD0Jdjfj - succeeded; post-write readback matched the reviewed payload.

No token data, versions, changesets, or concurrent local monorepo changes were edited.

Skipped composites (58)
  • gradient-stop-1-avatar
  • gradient-stop-2-avatar
  • gradient-stop-3-avatar
  • body-margin-multiplier
  • button-minimum-width-multiplier
  • drop-shadow-dragged
  • drop-shadow-elevated
  • drop-shadow-emphasized
  • drop-shadow-emphasized-hover
  • combo-box-minimum-width-multiplier
  • combo-box-quiet-minimum-width-multiplier
  • detail-margin-bottom-multiplier
  • detail-margin-top-multiplier
  • detail-sans-serif-text-transform
  • detail-serif-text-transform
  • heading-margin-bottom-multiplier
  • heading-margin-top-multiplier
  • component-size-width-ratio-down
  • corner-radius-1000
  • gradient-stop-1-genai
  • gradient-stop-1-premium
  • gradient-stop-2-genai
  • gradient-stop-2-premium
  • gradient-stop-3-genai
  • gradient-stop-3-premium
  • vertical-align-items
  • number-field-minimum-width-multiplier
  • picker-minimum-width-multiplier
  • search-field-minimum-width-multiplier
  • swatch-rectangle-width-multiplier
  • tag-maximum-width-multiplier
  • tag-minimum-width-multiplier
  • text-field-minimum-width-multiplier
  • time-field-minimum-width
  • title-margin-bottom-multiplier
  • title-margin-top-multiplier
  • cjk-line-height-100
  • cjk-line-height-200
  • component-l-bold
  • component-l-medium
  • component-l-regular
  • component-m-bold
  • component-m-medium
  • component-m-regular
  • component-s-bold
  • component-s-medium
  • component-s-regular
  • component-xl-bold
  • component-xl-medium
  • component-xl-regular
  • component-xs-bold
  • component-xs-medium
  • component-xs-regular
  • line-height-100
  • line-height-200
  • text-align-center
  • text-align-end
  • text-align-start
Unresolved aliases (11)
  • body-cjk-line-height
  • body-line-height
  • code-cjk-line-height
  • code-line-height
  • detail-cjk-line-height
  • detail-line-height
  • heading-cjk-line-height
  • heading-line-height
  • corner-radius-full
  • title-cjk-line-height
  • title-line-height
Unsupported schema (1)
  • strikethrough-day-orientation
Unparseable values (7)
  • android-elevation
  • black-font-weight
  • bold-font-weight
  • extra-bold-font-weight
  • light-font-weight
  • medium-font-weight
  • regular-font-weight
Retained Figma-only variables in .Color theme (104)
  • colorTheme/prompt-field-container-background-default
  • colorTheme/prompt-field-container-background-dropzone
  • colorTheme/prompt-field-container-background-focus
  • colorTheme/prompt-field-container-background-gradient-generating-stop-1
  • colorTheme/prompt-field-container-background-gradient-generating-stop-2
  • colorTheme/prompt-field-container-background-gradient-generating-stop-3
  • colorTheme/prompt-field-container-background-gradient-generating-stop-4
  • colorTheme/prompt-field-container-background-gradient-idle-stop-1
  • colorTheme/prompt-field-container-background-gradient-idle-stop-2
  • colorTheme/prompt-field-container-background-gradient-idle-stop-3
  • colorTheme/prompt-field-container-background-gradient-idle-stop-4
  • colorTheme/prompt-field-container-border-default
  • colorTheme/prompt-field-container-hue-gradient-generating-stop-1
  • colorTheme/prompt-field-container-hue-gradient-generating-stop-2
  • colorTheme/prompt-field-container-hue-gradient-generating-stop-3
  • colorTheme/prompt-field-inner-shadow-generating
  • colorTheme/prompt-field-outer-container-gradient-default-stop-1
  • colorTheme/prompt-field-outer-container-gradient-default-stop-2
  • colorTheme/prompt-field-outer-container-gradient-focus-stop-1
  • colorTheme/prompt-field-outer-container-gradient-focus-stop-2
  • colorTheme/prompt-field-outer-container-gradient-hue-stop-1
  • colorTheme/prompt-field-outer-container-gradient-hue-stop-2
  • colorTheme/prompt-field-outer-container-gradient-hue-stop-3
  • colorTheme/prompt-field-outer-container-gradient-shadow-generating-stop-1
  • colorTheme/prompt-field-outer-container-gradient-shadow-generating-stop-2
  • colorTheme/prompt-field-outer-container-gradient-shadow-generating-stop-3
  • colorTheme/prompt-field-outline-glow-gradient-generating-stop-1
  • colorTheme/prompt-field-outline-glow-gradient-generating-stop-2
  • colorTheme/prompt-field-outline-glow-gradient-generating-stop-3
  • colorTheme/promptfield-outer-container-drop-shadow-color-default
  • colorTheme/promptfield-outer-container-drop-shadow-color-focus
  • colorTheme/promptfield-outer-container-drop-shadow-color-subtle
  • colorTheme/transparent-neutral-0
  • colorTheme/transparent-neutral-100
  • colorTheme/transparent-neutral-1000
  • colorTheme/transparent-neutral-125
  • colorTheme/transparent-neutral-150
  • colorTheme/transparent-neutral-200
  • colorTheme/transparent-neutral-300
  • colorTheme/transparent-neutral-350
  • colorTheme/transparent-neutral-400
  • colorTheme/transparent-neutral-50
  • colorTheme/transparent-neutral-500
  • colorTheme/transparent-neutral-600
  • colorTheme/transparent-neutral-700
  • colorTheme/transparent-neutral-75
  • colorTheme/transparent-neutral-750
  • colorTheme/transparent-neutral-800
  • colorTheme/transparent-neutral-900
  • colorTheme/transparent-neutral-950
  • colorTheme/transparent-neutral-inverse-0
  • colorTheme/transparent-neutral-inverse-100
  • colorTheme/transparent-neutral-inverse-1000
  • colorTheme/transparent-neutral-inverse-125
  • colorTheme/transparent-neutral-inverse-150
  • colorTheme/transparent-neutral-inverse-200
  • colorTheme/transparent-neutral-inverse-300
  • colorTheme/transparent-neutral-inverse-350
  • colorTheme/transparent-neutral-inverse-400
  • colorTheme/transparent-neutral-inverse-50
  • colorTheme/transparent-neutral-inverse-500
  • colorTheme/transparent-neutral-inverse-600
  • colorTheme/transparent-neutral-inverse-700
  • colorTheme/transparent-neutral-inverse-75
  • colorTheme/transparent-neutral-inverse-750
  • colorTheme/transparent-neutral-inverse-800
  • colorTheme/transparent-neutral-inverse-900
  • colorTheme/transparent-neutral-inverse-950
  • colorTheme/transparent-static-black-0
  • colorTheme/transparent-static-black-100
  • colorTheme/transparent-static-black-1000
  • colorTheme/transparent-static-black-125
  • colorTheme/transparent-static-black-150
  • colorTheme/transparent-static-black-200
  • colorTheme/transparent-static-black-300
  • colorTheme/transparent-static-black-350
  • colorTheme/transparent-static-black-400
  • colorTheme/transparent-static-black-50
  • colorTheme/transparent-static-black-500
  • colorTheme/transparent-static-black-600
  • colorTheme/transparent-static-black-700
  • colorTheme/transparent-static-black-75
  • colorTheme/transparent-static-black-750
  • colorTheme/transparent-static-black-800
  • colorTheme/transparent-static-black-900
  • colorTheme/transparent-static-black-950
  • colorTheme/transparent-static-white-0
  • colorTheme/transparent-static-white-100
  • colorTheme/transparent-static-white-1000
  • colorTheme/transparent-static-white-125
  • colorTheme/transparent-static-white-150
  • colorTheme/transparent-static-white-200
  • colorTheme/transparent-static-white-300
  • colorTheme/transparent-static-white-350
  • colorTheme/transparent-static-white-400
  • colorTheme/transparent-static-white-50
  • colorTheme/transparent-static-white-500
  • colorTheme/transparent-static-white-600
  • colorTheme/transparent-static-white-700
  • colorTheme/transparent-static-white-75
  • colorTheme/transparent-static-white-750
  • colorTheme/transparent-static-white-800
  • colorTheme/transparent-static-white-900
  • colorTheme/transparent-static-white-950
Retained Figma-only variables in .Platform scale (58)
  • platformScale/android-elevation
  • platformScale/banner-gap-horizontal
  • platformScale/banner-gap-vertical
  • platformScale/banner-padding-horizontal
  • platformScale/banner-padding-vertical
  • platformScale/black-font-weight
  • platformScale/body-cjk-line-height
  • platformScale/body-line-height
  • platformScale/body-margin-multiplier
  • platformScale/bold-font-weight
  • platformScale/button-minimum-width-multiplier
  • platformScale/cjk-line-height-100
  • platformScale/cjk-line-height-200
  • platformScale/code-cjk-line-height
  • platformScale/code-line-height
  • platformScale/combo-box-minimum-width-multiplier
  • platformScale/component-size-width-ratio-down
  • platformScale/corner-radius-1000
  • platformScale/corner-radius-full
  • platformScale/detail-cjk-line-height
  • platformScale/detail-line-height
  • platformScale/detail-margin-bottom-multiplier
  • platformScale/detail-margin-top-multiplier
  • platformScale/extra-bold-font-weight
  • platformScale/form-item-gap-extra-large-spacious
  • platformScale/form-item-gap-large-spacious
  • platformScale/form-item-gap-medium-spacious
  • platformScale/form-item-gap-small-spacious
  • platformScale/gradient-stop-1-avatar
  • platformScale/gradient-stop-1-genai
  • platformScale/gradient-stop-1-premium
  • platformScale/gradient-stop-2-avatar
  • platformScale/gradient-stop-2-genai
  • platformScale/gradient-stop-2-premium
  • platformScale/gradient-stop-3-avatar
  • platformScale/gradient-stop-3-genai
  • platformScale/gradient-stop-3-premium
  • platformScale/heading-cjk-line-height
  • platformScale/heading-line-height
  • platformScale/heading-margin-bottom-multiplier
  • platformScale/heading-margin-top-multiplier
  • platformScale/light-font-weight
  • platformScale/line-height-100
  • platformScale/line-height-200
  • platformScale/list-gap-regular
  • platformScale/medium-font-weight
  • platformScale/number-field-minimum-width-multiplier
  • platformScale/picker-minimum-width-multiplier
  • platformScale/regular-font-weight
  • platformScale/search-field-minimum-width-multiplier
  • platformScale/swatch-rectangle-width-multiplier
  • platformScale/tag-maximum-width-multiplier
  • platformScale/text-field-minimum-width-multiplier
  • platformScale/time-field-minimum-width
  • platformScale/title-cjk-line-height
  • platformScale/title-line-height
  • platformScale/title-margin-bottom-multiplier
  • platformScale/title-margin-top-multiplier
Newly deprecated keys retained in the POC (282)
  • user-card-minimum-height-extra-large
  • user-card-minimum-height-large
  • user-card-minimum-height-medium
  • user-card-minimum-height-small
  • user-card-minimum-height-title-below-extra-large
  • user-card-minimum-height-title-below-large
  • user-card-minimum-height-title-below-medium
  • user-card-minimum-height-title-below-small
  • triple-calendar-popover-minimum-height
  • triple-calendar-popover-minimum-width
  • tree-view-disclosure-indicator-height
  • tree-view-disclosure-indicator-width
  • tree-view-minimum-height
  • tree-view-minimum-width
  • tooltip-maximum-width
  • tooltip-tip-height
  • tooltip-tip-width
  • toast-height
  • toast-maximum-width
  • time-field-minimum-width
  • thumbnail-opacity-checkerboard-square-size
  • thumbnail-size-100
  • thumbnail-size-1000
  • thumbnail-size-200
  • thumbnail-size-300
  • thumbnail-size-400
  • thumbnail-size-50
  • thumbnail-size-500
  • thumbnail-size-600
  • thumbnail-size-700
  • thumbnail-size-75
  • thumbnail-size-800
  • thumbnail-size-900
  • text-area-minimum-height
  • text-area-minimum-width
  • takeover-dialog-height
  • takeover-dialog-width
  • tag-maximum-width-multiplier
  • tag-minimum-width-large
  • tag-minimum-width-medium
  • tag-minimum-width-small
  • tag-field-default-width-large
  • tag-field-default-width-medium
  • tag-field-default-width-small
  • tag-field-minimum-height-large
  • tag-field-minimum-height-medium
  • tag-field-minimum-height-small
  • tag-field-minimum-width
  • tab-item-compact-height-extra-large
  • tab-item-compact-height-large
  • tab-item-compact-height-medium
  • tab-item-compact-height-small
  • tab-item-height-extra-large
  • tab-item-height-large
  • tab-item-height-medium
  • tab-item-height-small
  • table-row-height-extra-large
  • table-row-height-extra-large-compact
  • table-row-height-extra-large-spacious
  • table-row-height-large
  • table-row-height-large-compact
  • table-row-height-large-spacious
  • table-row-height-medium
  • table-row-height-medium-compact
  • table-row-height-medium-spacious
  • table-row-height-small
  • table-row-height-small-compact
  • table-row-height-small-spacious
  • table-section-header-row-height-extra-large
  • table-section-header-row-height-large
  • table-section-header-row-height-medium
  • table-section-header-row-height-small
  • switch-control-height-extra-large
  • switch-control-height-large
  • switch-control-height-medium
  • switch-control-height-small
  • switch-control-width-extra-large
  • switch-control-width-large
  • switch-control-width-medium
  • switch-control-width-small
  • swatch-size-extra-small
  • swatch-size-large
  • swatch-size-medium
  • swatch-size-small
  • steplist-step-default-height-extra-large
  • steplist-step-default-height-large
  • steplist-step-default-height-medium
  • steplist-step-default-height-small
  • steplist-step-default-width-extra-large
  • steplist-step-default-width-large
  • steplist-step-default-width-medium
  • steplist-step-default-width-small
  • steplist-step-to-track-size-extra-large
  • steplist-step-to-track-size-large
  • steplist-step-to-track-size-medium
  • steplist-step-to-track-size-small
  • steplist-track-thickness-medium
  • status-light-dot-size-extra-large
  • status-light-dot-size-large
  • status-light-dot-size-medium
  • status-light-dot-size-small
  • standard-panel-maximum-width
  • standard-panel-minimum-width
  • standard-panel-width
  • standard-dialog-maximum-width-large
  • standard-dialog-maximum-width-medium
  • standard-dialog-maximum-width-small
  • standard-dialog-minimum-width
  • stack-item-header-minimum-width
  • slider-handle-extra-large
  • slider-handle-height-precision-extra-large
  • slider-handle-height-precision-large
  • slider-handle-height-precision-medium
  • slider-handle-height-precision-small
  • slider-handle-large
  • slider-handle-medium
  • slider-handle-precision-width
  • slider-handle-small
  • slider-track-height-large
  • slider-track-height-medium
  • single-calendar-popover-minimum-height
  • single-calendar-popover-minimum-width
  • side-navigation-indicator-height
  • side-navigation-indicator-thickness
  • side-navigation-minimum-width
  • side-navigation-width
  • select-box-horizontal-minimum-height
  • select-box-horizontal-minimum-width
  • select-box-horizontal-width
  • select-box-vertical-height
  • segmented-control-item-height
  • segmented-control-item-maximum-width
  • rating-height-medium
  • rating-height-small
  • rating-width-medium
  • rating-width-small
  • radio-button-control-size-extra-large
  • radio-button-control-size-large
  • radio-button-control-size-medium
  • radio-button-control-size-small
  • progress-circle-size-large
  • progress-circle-size-medium
  • progress-circle-size-small
  • progress-bar-maximum-width
  • progress-bar-minimum-width
  • progress-bar-thickness-extra-large
  • progress-bar-thickness-large
  • progress-bar-thickness-medium
  • progress-bar-thickness-small
  • meter-maximum-width
  • meter-minimum-width
  • meter-thickness-extra-large
  • meter-thickness-large
  • meter-thickness-medium
  • meter-thickness-small
  • meter-width
  • menu-item-section-divider-height
  • list-view-minimum-height
  • list-view-minimum-width
  • component-height-100
  • component-height-200
  • component-height-300
  • component-height-400
  • component-height-50
  • component-height-500
  • component-height-75
  • side-focus-indicator
  • strikethrough-day-thickness
  • tab-selection-indicator-thickness
  • in-line-alert-minimum-width
  • in-field-progress-circle-size-100
  • in-field-progress-circle-size-200
  • in-field-progress-circle-size-300
  • in-field-progress-circle-size-75
  • in-field-button-width-stacked-extra-large
  • in-field-button-width-stacked-large
  • in-field-button-width-stacked-medium
  • in-field-button-width-stacked-small
  • illustrated-message-horizontal-maximum-width
  • illustrated-message-vertical-maximum-width
  • field-default-width-extra-large
  • field-default-width-large
  • field-default-width-medium
  • field-default-width-small
  • drop-zone-width
  • double-calendar-popover-minimum-height
  • double-calendar-popover-minimum-width
  • divider-horizontal-minimum-width
  • divider-thickness-large
  • divider-thickness-medium
  • divider-thickness-small
  • divider-vertical-minimum-height
  • date-picker-minimum-width
  • date-field-minimum-width
  • contextual-help-minimum-width
  • color-wheel-minimum-width
  • color-wheel-width
  • color-slider-length
  • color-slider-minimum-length
  • color-loupe-height
  • color-loupe-width
  • color-handle-size
  • color-handle-size-key-focus
  • color-control-track-width
  • color-area-height
  • color-area-minimum-height
  • color-area-minimum-width
  • color-area-width
  • collection-card-minimum-height-extra-large
  • collection-card-minimum-height-extra-small
  • collection-card-minimum-height-hero-extra-large
  • collection-card-minimum-height-hero-extra-small
  • collection-card-minimum-height-hero-large
  • collection-card-minimum-height-hero-medium
  • collection-card-minimum-height-hero-small
  • collection-card-minimum-height-large
  • collection-card-minimum-height-medium
  • collection-card-minimum-height-small
  • coach-mark-maximum-width
  • coach-mark-minimum-width
  • coach-mark-width
  • checkbox-control-size-extra-large
  • checkbox-control-size-large
  • checkbox-control-size-medium
  • checkbox-control-size-small
  • card-default-width-extra-large
  • card-default-width-extra-small
  • card-default-width-large
  • card-default-width-medium
  • card-default-width-small
  • card-maximum-width-extra-large
  • card-maximum-width-extra-small
  • card-maximum-width-large
  • card-maximum-width-medium
  • card-maximum-width-small
  • card-minimum-height-extra-large
  • card-minimum-height-extra-small
  • card-minimum-height-large
  • card-minimum-height-medium
  • card-minimum-height-small
  • card-minimum-width-default
  • card-minimum-width-extra-large
  • card-minimum-width-extra-small
  • card-minimum-width-large
  • card-minimum-width-medium
  • card-minimum-width-small
  • card-preview-minimum-height
  • breadcrumbs-height-multiline
  • bar-panel-maximum-width
  • bar-panel-minimum-width
  • bar-panel-width
  • avatar-size-100
  • avatar-size-1000
  • avatar-size-1100
  • avatar-size-1200
  • avatar-size-1300
  • avatar-size-1400
  • avatar-size-1500
  • avatar-size-200
  • avatar-size-300
  • avatar-size-400
  • avatar-size-50
  • avatar-size-500
  • avatar-size-600
  • avatar-size-700
  • avatar-size-75
  • avatar-size-800
  • avatar-size-900
  • avatar-group-size-100
  • avatar-group-size-200
  • avatar-group-size-300
  • avatar-group-size-400
  • avatar-group-size-50
  • avatar-group-size-500
  • avatar-group-size-75
  • alert-dialog-maximum-width
  • alert-dialog-minimum-width
  • alert-banner-minimum-height
  • alert-banner-width
  • action-bar-height
  • action-bar-minimum-width
  • accordion-minimum-width

Nate Baldwin and others added 2 commits October 13, 2026 14:52
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Resolve moon.yml and layout.json conflicts; use alias.json $schema for
visual-size tokens that reference size-scale tokens.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@GarthDB

GarthDB commented Oct 13, 2026

Copy link
Copy Markdown
Member

Snapshot refresh + Figma POC republish

npm snapshot (dist-tag size-token-taxonomy): 0.0.0-size-token-taxonomy-20261013224620

Figma POC: https://www.figma.com/design/6VgZUC8QxFDxsHWD0Jdjfj/ (exported with --redirect-deprecated)

  • 4 CREATE (banner-height, banner-minimum-height, banner-width, container-maximum-width-2x-small), 2602 UPDATE, 0 deletes
  • 3554 mode values (1813 aliases); 751 deprecated tokens redirected to their replacements
  • Readback verified: max numeric error 4.8e-8 (tolerance 1e-6); 1559 unrelated variables unchanged
  • Desktop-only as before (mobile values dropped); 34 composite tokens and android-elevation skipped
  • The Figma library "Publish" action has not been performed.

test and others added 2 commits October 13, 2026 16:56
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Nate Baldwin and others added 4 commits October 22, 2026 11:49
…p sets

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@GarthDB

GarthDB commented Oct 27, 2026

Copy link
Copy Markdown
Member

Snapshot release and Figma POC update

Built from b82dce0d (CI green: Node, Rust, Lint Changesets).

npm snapshot (dist-tag size-token-taxonomy):

  • @adobe/spectrum-tokens@0.0.0-size-token-taxonomy-20261027185923
  • @adobe/spectrum-design-data@0.0.0-size-token-taxonomy-20261027185923

CI fixes in this update

  • Regenerated packages/tokens/src/layout.json and side-navigation.json. The legacy output was stale after the design-request corrections, which failed verifyLegacyOutput and verifyLegacyRoundtrip.
  • tokens:test "Sets should have unique values" now exempts tooltip-tip-height and tooltip-tip-width. Those sets are intentionally 4px/4px and 8px/8px.

Figma variables (S2 - Web - Size variables POC), exported from packages/design-data at b82dce0d:

  • 8 variables created (aspect-ratio-100 to -800) and 2678 updated. 2686 variables, 3698 mode values (1163 aliased).
  • Readback verified: all written values and alias targets match. 1487 unrelated variables are unchanged and nothing was deleted. Max numeric error 5.5e-8.
  • Deprecated tokens kept their literal values (no --redirect-deprecated). Desktop-only modes preserved.
  • Skipped: 34 composite tokens and android-elevation (unsupported dp unit).
  • The Figma library Publish action has not been performed.

@NateBaldwinDesign
NateBaldwinDesign marked this pull request as ready for review November 10, 2026 17:28
@NateBaldwinDesign

Copy link
Copy Markdown
Collaborator Author

@GarthDB FYI the RFC for this work has been approved so from a design side we're ready to merge.

The conflict that exists with button is about a size token (component-specific) that we want to replace with an alias and deprecate. It's not clear to me looking at the diff where or how to maintain that deprecation with all the new data that's been added to that component relationship json.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants