RFC SDS-15500 layout tokens

[NateBaldwinDesign]

Description

This PR is to enable a snapshot release for testing of new Layout semantic tokens as defined in SDS-15500 and the Layout token refinement RFC

Related Issue

• SDS-15500
• Layout token refinement RFC

Motivation and Context

See the Layout token refinement RFC for detail.

How Has This Been Tested?

• Ran local validation script
• All other testing has been done outside of this specific PR

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]

⚠️ No Changeset found

Latest commit: 86795d1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[GarthDB]

Run report for 86795d1d

Total time: 48.9s | Comparison time: 45s | Estimated loss: 3.9s (7.9% slower)

	Action	Time	Status	Info
⬛️	SetupProto(0.51.4)	0.1ms	Skipped
🟩	SyncWorkspace	7.1ms	Passed
🟩	SyncProject(componentSchemas)	0.4ms	Passed
🟩	SyncProject(tokens)	0.5ms	Passed
🟩	SyncProject(design-system-registry)	0.3ms	Passed
🟩	SyncProject(viewer)	0.4ms	Passed
⬛️	SetupToolchain(node:20.17.0)	1.4s	Skipped
🟩	InstallWorkspaceDeps(node:20.17.0)	11s	Passed
🟩	RunTask(tokens:buildManifest)	285ms	Passed
🟩	RunTask(design-system-registry:validate)	301ms	Passed
🟩	RunTask(design-system-registry:test)	1.2s	Passed
🟩	RunTask(tokens:buildTokens)	33.6s	Passed
🟩	RunTask(tokens:build)	13.2ms	Passed
🟩	RunTask(viewer:prepare)	56.6ms	Passed
🟩	RunTask(viewer:export)	48.9ms	Passed
🟩	RunTask(tokens:test)	2.9s	Passed

Touched files

packages/design-system-registry/registry/token-terminology.json
packages/tokens/src/layout-component.json
packages/tokens/src/layout.json
tools/add-layout-tokens/add-tokens.js
tools/deprecate-layout-tokens/deprecate-tokens.js

[github-actions]

🎨 Token Changes Report

Tokens Changed (645)

Original Branch: main
New Branch: SDS-15500-layout-tokens

Newly Deprecated (542)

• text-to-visual-50: Use semantic token base-gap-extra-small instead.
• text-to-visual-75: Use semantic token base-gap-small instead.
• text-to-visual-100: Use semantic token base-gap-medium instead.
• text-to-visual-200: Use semantic token base-gap-large instead.
• text-to-visual-300: Use semantic token base-gap-extra-large instead.
• text-to-visual-400: Use semantic token base-gap-2x-large instead.
• text-to-control-50: Use semantic token base-gap-extra-small instead.
• text-to-control-75: Use semantic token base-gap-small instead.
• text-to-control-100: Use semantic token base-gap-medium instead.
• text-to-control-200: Use semantic token base-gap-large instead.
• text-to-control-300: Use semantic token base-gap-extra-large instead.
• visual-to-control-100: Use semantic token base-gap-medium instead.
• label-to-description-0: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• focus-indicator-gap: Use semantic token focus-ring-gap instead.
• component-pill-edge-to-visual-75: Use semantic token base-padding-horizontal-small instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-100: Use semantic token base-padding-horizontal-medium instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-200: Use semantic token base-padding-horizontal-large instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-300: Use semantic token base-padding-horizontal-extra-large instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-only-75: Use semantic token base-padding-vertical-small instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-only-100: Use semantic token accessory-item-padding-medium instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-only-200: Use semantic token accessory-item-padding-large instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-visual-only-300: Use semantic token accessory-item-padding-extra-large instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-text-75: Use semantic token base-padding-horizontal-small instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-text-100: Use semantic token base-padding-horizontal-medium instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-text-200: Use semantic token base-padding-horizontal-large instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-pill-edge-to-text-300: Use semantic token base-padding-horizontal-extra-large instead. Eliminating pill-specific padding to align with Spectrum Future Foundations designs
• component-edge-to-visual-50: Use semantic token base-padding-horizontal-extra-small instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-visual-75: Use semantic token base-padding-horizontal-small instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-visual-100: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-visual-200: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-visual-300: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-visual-only-50: Use semantic token base-padding-vertical-extra-small instead. Using consistent spacing regardless of text or visual
• component-edge-to-visual-only-75: Use semantic token base-padding-vertical-small instead. Using consistent spacing regardless of text or visual
• component-edge-to-visual-only-100: Use semantic token base-padding-vertical-medium instead. Using consistent spacing regardless of text or visual
• component-edge-to-visual-only-200: Use semantic token base-padding-vertical-large instead. Using consistent spacing regardless of text or visual
• component-edge-to-visual-only-300: Use semantic token base-padding-vertical-extra-large instead. Using consistent spacing regardless of text or visual
• component-edge-to-text-50: Use semantic token base-padding-horizontal-extra-small instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-text-75: Use semantic token base-padding-horizontal-small instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-text-100: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-text-200: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• component-edge-to-text-300: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• component-top-to-workflow-icon-50: Use semantic token base-padding-vertical-extra-small instead. Change required for VF upgrade
• component-top-to-workflow-icon-75: Use semantic token base-padding-vertical-small instead. Change required for VF upgrade
• component-top-to-workflow-icon-100: Use semantic token base-padding-vertical-medium instead. Change required for VF upgrade
• component-top-to-workflow-icon-200: Use semantic token base-padding-vertical-large instead. Change required for VF upgrade
• component-top-to-workflow-icon-300: Use semantic token base-padding-vertical-extra-large instead. Change required for VF upgrade
• component-top-to-text-50: Use semantic token base-padding-vertical-extra-small instead. Change required for VF upgrade
• component-top-to-text-75: Use semantic token base-padding-vertical-small instead. Change required for VF upgrade
• component-top-to-text-100: Use semantic token base-padding-vertical-medium instead. Change required for VF upgrade
• component-top-to-text-200: Use semantic token base-padding-vertical-large instead. Change required for VF upgrade
• component-top-to-text-300: Use semantic token base-padding-vertical-extra-large instead. Change required for VF upgrade
• component-bottom-to-text-50: Use semantic token base-padding-vertical-extra-small instead. Change required for VF upgrade
• component-bottom-to-text-75: Use semantic token base-padding-vertical-small instead. Change required for VF upgrade
• component-bottom-to-text-100: Use semantic token base-padding-vertical-medium instead. Change required for VF upgrade
• component-bottom-to-text-200: Use semantic token base-padding-vertical-large instead. Change required for VF upgrade
• component-bottom-to-text-300: Use semantic token base-padding-vertical-extra-large instead. Change required for VF upgrade
• component-to-menu-small: Use semantic token popover-gap instead. Unifying to a single popover-gap value across use cases
• component-to-menu-medium: Use semantic token popover-gap instead. Unifying to a single popover-gap value across use cases
• component-to-menu-large: Use semantic token popover-gap instead. Unifying to a single popover-gap value across use cases
• component-to-menu-extra-large: Use semantic token popover-gap instead. Unifying to a single popover-gap value across use cases
• field-edge-to-visual-quiet: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• field-edge-to-disclosure-icon-75: Use semantic token base-padding-horizontal-small instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-disclosure-icon-100: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-disclosure-icon-200: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-disclosure-icon-300: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-end-edge-to-disclosure-icon-75: Use semantic token base-padding-horizontal-small instead. Updated to follow Spectrum Future Foundations spacing formula
• field-end-edge-to-disclosure-icon-100: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• field-end-edge-to-disclosure-icon-200: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-end-edge-to-disclosure-icon-300: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-top-to-disclosure-icon-75: Use semantic token base-padding-vertical-small instead. Require unified UI icon set.
• field-top-to-disclosure-icon-100: Use semantic token base-padding-vertical-medium instead. Require unified UI icon set.
• field-top-to-disclosure-icon-200: Use semantic token base-padding-vertical-large instead. Require unified UI icon set.
• field-top-to-disclosure-icon-300: Use semantic token base-padding-vertical-extra-large instead. Require unified UI icon set.
• field-top-to-alert-icon-small: Use semantic token base-padding-vertical-small instead.
• field-top-to-alert-icon-medium: Use semantic token base-padding-vertical-medium instead.
• field-top-to-alert-icon-large: Use semantic token base-padding-vertical-large instead.
• field-top-to-alert-icon-extra-large: Use semantic token base-padding-vertical-extra-large instead.
• field-top-to-validation-icon-small: Use semantic token base-padding-vertical-small instead. Require unified UI icon set.
• field-top-to-validation-icon-medium: Use semantic token base-padding-vertical-medium instead. Require unified UI icon set.
• field-top-to-validation-icon-large: Use semantic token base-padding-vertical-large instead. Require unified UI icon set.
• field-top-to-validation-icon-extra-large: Use semantic token base-padding-vertical-extra-large instead. Require unified UI icon set.
• field-top-to-progress-circle-small: Use semantic token base-padding-vertical-small instead. Change progress circle to equal size as workflow icon, that way we can reuse tokens
• field-top-to-progress-circle-medium: Use semantic token base-padding-vertical-medium instead. Change progress circle to equal size as workflow icon, that way we can reuse tokens
• field-top-to-progress-circle-large: Use semantic token base-padding-vertical-large instead. Change progress circle to equal size as workflow icon, that way we can reuse tokens
• field-top-to-progress-circle-extra-large: Use semantic token base-padding-vertical-extra-large instead. Change progress circle to equal size as workflow icon, that way we can reuse tokens
• field-edge-to-alert-icon-small: Use semantic token base-padding-horizontal-small instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-alert-icon-medium: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-alert-icon-large: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-alert-icon-extra-large: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-validation-icon-small: Use semantic token base-padding-horizontal-small instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-validation-icon-medium: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-validation-icon-large: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-edge-to-validation-icon-extra-large: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-text-to-alert-icon-small: Use semantic token base-padding-horizontal-small instead.
• field-text-to-alert-icon-medium: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• field-text-to-alert-icon-large: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-text-to-alert-icon-extra-large: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-text-to-validation-icon-small: Use semantic token base-padding-horizontal-small instead.
• field-text-to-validation-icon-medium: Use semantic token base-padding-horizontal-medium instead. Updated to follow Spectrum Future Foundations spacing formula
• field-text-to-validation-icon-large: Use semantic token base-padding-horizontal-large instead. Updated to follow Spectrum Future Foundations spacing formula
• field-text-to-validation-icon-extra-large: Use semantic token base-padding-horizontal-extra-large instead. Updated to follow Spectrum Future Foundations spacing formula
• side-label-character-count-to-field: Use semantic token base-padding-horizontal-medium instead.
• side-label-character-count-top-margin-small: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• side-label-character-count-top-margin-medium: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• side-label-character-count-top-margin-large: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• side-label-character-count-top-margin-extra-large: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• disclosure-indicator-top-to-disclosure-icon-small: NO USAGE FOUND / Not in design specs, files, or findable by Spectrum Fluffyjaws AI. Recommend to deprecate.
• disclosure-indicator-top-to-disclosure-icon-medium: NO USAGE FOUND / Not in design specs, files, or findable by Spectrum Fluffyjaws AI. Recommend to deprecate.
• disclosure-indicator-top-to-disclosure-icon-large: NO USAGE FOUND / Not in design specs, files, or findable by Spectrum Fluffyjaws AI. Recommend to deprecate.
• disclosure-indicator-top-to-disclosure-icon-extra-large: NO USAGE FOUND / Not in design specs, files, or findable by Spectrum Fluffyjaws AI. Recommend to deprecate.
• text-underline-gap: Use semantic token text-gap-medium instead.
• navigational-indicator-top-to-back-icon-small: Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small
• navigational-indicator-top-to-back-icon-medium: Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium
• navigational-indicator-top-to-back-icon-large: Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large
• navigational-indicator-top-to-back-icon-extra-large: Use semantic token base-padding-vertical-extra-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-extra-large
• window-to-edge: Use semantic token container-padding-3x-large instead.
• field-top-to-disclosure-icon-compact-small: Use semantic token base-padding-vertical-small instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-small: Use semantic token base-padding-vertical-small instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-spacious-small: Use semantic token base-padding-vertical-small instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-compact-medium: Use semantic token base-padding-vertical-medium instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work
• field-top-to-disclosure-icon-medium: Use semantic token base-padding-vertical-medium instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-spacious-medium: Use semantic token base-padding-vertical-medium instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-compact-large: Use semantic token base-padding-vertical-large instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work
• field-top-to-disclosure-icon-large: Use semantic token base-padding-vertical-large instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-spacious-large: Use semantic token base-padding-vertical-large instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-compact-extra-large: Use semantic token base-padding-vertical-extra-large instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work
• field-top-to-disclosure-icon-extra-large: Use semantic token base-padding-vertical-extra-large instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• field-top-to-disclosure-icon-spacious-extra-large: Use semantic token base-padding-vertical-extra-large instead. UI icon will need to be in a frame with height equal to workflow-icon-[size] for this value to work. Accordion density addressed differently; refactor required.
• component-padding-vertical-50: Use semantic token base-padding-vertical-extra-small instead. Updated to follow Spectrum Future Foundations spacing formula
• component-padding-vertical-75: Use semantic token base-padding-vertical-small instead. Updated to follow Spectrum Future Foundations spacing formula
• component-padding-vertical-100: Use semantic token base-padding-vertical-medium instead.
• component-padding-vertical-200: Use semantic token base-padding-vertical-large instead.
• component-padding-vertical-300: Use semantic token base-padding-vertical-extra-large instead.
• checkbox-top-to-control-small: Use semantic token base-padding-vertical-small instead. Requires other design enhancements to this component
• checkbox-top-to-control-medium: Use semantic token base-padding-vertical-medium instead. Requires other design enhancements to this component
• checkbox-top-to-control-large: Use semantic token base-padding-vertical-large instead. Requires other design enhancements to this component
• checkbox-top-to-control-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires other design enhancements to this component
• switch-top-to-control-small: Use semantic token base-padding-vertical-small instead. Requires switch control to be placed in frame of height workflow-icon-small
• switch-top-to-control-medium: Use semantic token base-padding-vertical-medium instead. Requires switch control to be placed in frame of height workflow-icon-medium
• switch-top-to-control-large: Use semantic token base-padding-vertical-large instead. Requires switch control to be placed in frame of height workflow-icon-large
• switch-top-to-control-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires switch control to be placed in frame of height workflow-icon-extra-large
• radio-button-top-to-control-small: Use semantic token base-padding-vertical-small instead. Controls must be in a frame that has height equal to workflow-icon-size-small
• radio-button-top-to-control-medium: Use semantic token base-padding-vertical-medium instead. Controls must be in a frame that has height equal to workflow-icon-size-medium
• radio-button-top-to-control-large: Use semantic token base-padding-vertical-large instead. Controls must be in a frame that has height equal to workflow-icon-size-large
• radio-button-top-to-control-extra-large: Use semantic token base-padding-vertical-extra-large instead. Controls must be in a frame that has height equal to workflow-icon-size-extra-large
• field-label-text-to-asterisk-small: Use semantic token base-gap-small instead.
• field-label-text-to-asterisk-medium: Use semantic token base-gap-medium instead.
• field-label-text-to-asterisk-large: Use semantic token base-gap-large instead.
• field-label-text-to-asterisk-extra-large: Use semantic token base-gap-extra-large instead.
• field-label-top-to-asterisk-small: Use semantic token base-padding-vertical-small instead. Requires UI icon to be placed in frame of height workflow-icon-[size], or calculate this token + ( (workflow-icon-[size] - ui-icon-[size]) / 2 )
• field-label-top-to-asterisk-medium: Use semantic token base-padding-vertical-medium instead. Requires UI icon to be placed in frame of height workflow-icon-[size], or calculate this token + ( (workflow-icon-[size] - ui-icon-[size]) / 2 )
• field-label-top-to-asterisk-large: Use semantic token base-padding-vertical-large instead. Requires UI icon to be placed in frame of height workflow-icon-[size], or calculate this token + ( (workflow-icon-[size] - ui-icon-[size]) / 2 )
• field-label-top-to-asterisk-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires UI icon to be placed in frame of height workflow-icon-[size], or calculate this token + ( (workflow-icon-[size] - ui-icon-[size]) / 2 )
• field-label-top-margin-small: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• field-label-top-margin-medium: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• field-label-top-margin-large: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• field-label-top-margin-extra-large: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• field-label-to-component: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• help-text-to-component: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• status-light-top-to-dot-small: Use semantic token base-padding-vertical-small instead. Requires Dot to be placed in frame of height workflow-icon-small
• status-light-top-to-dot-medium: Use semantic token base-padding-vertical-medium instead. Requires Dot to be placed in frame of height workflow-icon-medium
• status-light-top-to-dot-large: Use semantic token base-padding-vertical-large instead. Requires Dot to be placed in frame of height workflow-icon-large
• status-light-top-to-dot-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires Dot to be placed in frame of height workflow-icon-extra-large
• action-button-edge-to-hold-icon-extra-small: Use semantic token accessory-gap-affixed-extra-small instead.
• action-button-edge-to-hold-icon-small: Use semantic token accessory-gap-affixed-small instead.
• action-button-edge-to-hold-icon-medium: Use semantic token accessory-gap-affixed-medium instead.
• action-button-edge-to-hold-icon-large: Use semantic token accessory-gap-affixed-large instead.
• action-button-edge-to-hold-icon-extra-large: Use semantic token accessory-gap-affixed-extra-large instead.
• toast-top-to-workflow-icon: Use semantic token banner-padding-vertical instead. Refactor may be needed
• toast-top-to-text: Use semantic token banner-padding-vertical instead. Refactor may be needed
• toast-bottom-to-text: Use semantic token banner-padding-vertical instead. Refactor may be needed
• action-bar-top-to-item-counter: Use semantic token banner-padding-vertical instead.
• tag-top-to-avatar-small: Use semantic token base-padding-vertical-small instead.
• tag-top-to-avatar-medium: Use semantic token base-padding-vertical-medium instead.
• tag-top-to-avatar-large: Use semantic token base-padding-vertical-large instead.
• tag-top-to-cross-icon-small: Use semantic token base-padding-horizontal-small instead. Edge cases should be ok for edge usage. In principle, it's still padding. In reality, it's vertical not horizontal. But that may be ok
• tag-top-to-cross-icon-medium: Use semantic token base-padding-horizontal-medium instead. Edge cases should be ok for edge usage. In principle, it's still padding. In reality, it's vertical not horizontal. But that may be ok
• tag-top-to-cross-icon-large: Use semantic token base-padding-horizontal-large instead. Edge cases should be ok for edge usage. In principle, it's still padding. In reality, it's vertical not horizontal. But that may be ok
• popover-edge-to-content-area: Use semantic token popover-padding instead.
• menu-item-edge-to-content-not-selected-small: This use case should not be a single token but either calculated or structurally determined. Refactor may be required.
• menu-item-edge-to-content-not-selected-medium: This use case should not be a single token but either calculated or structurally determined. Refactor may be required.
• menu-item-edge-to-content-not-selected-large: This use case should not be a single token but either calculated or structurally determined. Refactor may be required.
• menu-item-edge-to-content-not-selected-extra-large: This use case should not be a single token but either calculated or structurally determined. Refactor may be required.
• menu-item-top-to-disclosure-icon-small: Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small
• menu-item-top-to-disclosure-icon-medium: Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium
• menu-item-top-to-disclosure-icon-large: Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large
• menu-item-top-to-disclosure-icon-extra-large: Use semantic token base-padding-vertical-extra-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-extra-large
• menu-item-top-to-selected-icon-small: Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small
• menu-item-top-to-selected-icon-medium: Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium
• menu-item-top-to-selected-icon-large: Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large
• menu-item-top-to-selected-icon-extra-large: Use semantic token base-padding-vertical-extra-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-extra-large
• slider-control-to-field-label-small: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-medium: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-large: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-extra-large: Refactor required; remove padding from label, no negative margins
• picker-visual-to-disclosure-icon-small: Use semantic token base-gap-small instead.
• picker-visual-to-disclosure-icon-medium: Use semantic token base-gap-medium instead.
• picker-visual-to-disclosure-icon-large: Use semantic token base-gap-large instead.
• picker-visual-to-disclosure-icon-extra-large: Use semantic token base-gap-extra-large instead.
• picker-end-edge-to-disclosure-icon-quiet: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• breadcrumbs-top-to-text-multiline: Use semantic token base-padding-vertical-small instead.
• breadcrumbs-bottom-to-text-multiline: Use semantic token base-padding-vertical-large instead.
• breadcrumbs-end-edge-to-text: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• breadcrumbs-top-text-to-bottom-text: Use semantic token text-gap-medium instead. Difference is due to other values changing, but expected. Requires some refactor.
• breadcrumbs-top-to-truncated-menu: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• breadcrumbs-start-edge-to-truncated-menu: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• breadcrumbs-truncated-menu-to-bottom-text: Use semantic token base-padding-vertical-extra-small instead.
• alert-banner-top-to-workflow-icon: Use semantic token banner-padding-vertical instead. Need to evaluate how token is used in implementation; refactor may be necessary.
• alert-banner-top-to-text: Use semantic token banner-padding-vertical instead. Need to evaluate how token is used in implementation; refactor may be necessary.
• alert-banner-bottom-to-text: Use semantic token banner-padding-vertical instead. Need to evaluate how token is used in implementation; refactor may be necessary.
• drop-zone-border-dash-length: Use semantic token drop-target-dash-length instead.
• drop-zone-border-dash-gap: Use semantic token drop-target-dash-gap instead.
• coach-mark-edge-to-content: Use semantic token container-padding-extra-large instead.
• coach-mark-pagination-text-to-bottom-edge: Use semantic token container-padding-extra-large instead. Refactor may be required
• accordion-top-to-text-compact-small: Use semantic token base-padding-vertical-small instead. Major refactor necessary
• accordion-top-to-text-compact-medium: Use semantic token base-padding-vertical-medium instead. Major refactor necessary
• accordion-top-to-text-spacious-medium: Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary
• accordion-top-to-text-compact-large: Use semantic token base-padding-vertical-large instead. Major refactor necessary
• accordion-top-to-text-spacious-large: Use semantic token base-padding-vertical-2x-large instead. Major refactor necessary
• accordion-top-to-text-compact-extra-large: Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary
• accordion-top-to-text-spacious-extra-large: Use semantic token base-padding-vertical-3x-large instead. Major refactor necessary
• accordion-bottom-to-text-compact-small: Use semantic token base-padding-vertical-small instead. Major refactor necessary
• accordion-bottom-to-text-spacious-small: Use semantic token base-padding-vertical-large instead. Major refactor necessary
• accordion-bottom-to-text-compact-medium: Use semantic token base-padding-vertical-medium instead. Major refactor necessary
• accordion-bottom-to-text-spacious-medium: Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary
• accordion-bottom-to-text-compact-large: Use semantic token base-padding-vertical-large instead. Major refactor necessary
• accordion-bottom-to-text-spacious-large: Use semantic token base-padding-vertical-2x-large instead. Major refactor necessary
• accordion-bottom-to-text-compact-extra-large: Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary
• accordion-bottom-to-text-spacious-extra-large: Use semantic token base-padding-vertical-3x-large instead. Major refactor necessary
• accordion-edge-to-text: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• accordion-focus-indicator-gap: Use semantic token focus-ring-gap instead.
• accordion-content-area-top-to-content: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• accordion-content-area-bottom-to-content: Use semantic token container-padding-medium instead. Major refactor necessary
• table-column-header-row-top-to-text-small: Use semantic token base-padding-vertical-small instead.
• table-column-header-row-top-to-text-medium: Use semantic token base-padding-vertical-medium instead.
• table-column-header-row-top-to-text-large: Use semantic token base-padding-vertical-large instead.
• table-column-header-row-top-to-text-extra-large: Use semantic token base-padding-vertical-extra-large instead.
• table-column-header-row-bottom-to-text-small: Use semantic token base-padding-vertical-small instead.
• table-column-header-row-bottom-to-text-medium: Use semantic token base-padding-vertical-medium instead.
• table-column-header-row-bottom-to-text-large: Use semantic token base-padding-vertical-large instead.
• table-column-header-row-bottom-to-text-extra-large: Use semantic token base-padding-vertical-extra-large instead.
• table-row-top-to-text-small-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-top-to-text-medium-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-top-to-text-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-top-to-text-extra-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-bottom-to-text-small-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-bottom-to-text-medium-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-bottom-to-text-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-bottom-to-text-extra-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-top-to-text-small: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-top-to-text-medium: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-top-to-text-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-top-to-text-extra-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-bottom-to-text-small: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-bottom-to-text-medium: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-bottom-to-text-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-bottom-to-text-extra-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-top-to-text-small-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-top-to-text-medium-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-top-to-text-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-top-to-text-extra-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-bottom-to-text-small-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-bottom-to-text-medium-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-bottom-to-text-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-bottom-to-text-extra-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-edge-to-content: Use semantic token table-item-padding-spacious instead.
• table-checkbox-to-text: Use semantic token table-item-padding-regular instead. Erroneous measurement. It includes the padding of a text cell. Needs to be removed or changed
• table-header-row-checkbox-to-top-small: Use semantic token base-padding-vertical-small instead. Controls must be in a frame that has height equal to workflow-icon-size-small
• table-header-row-checkbox-to-top-medium: Use semantic token base-padding-vertical-medium instead. Controls must be in a frame that has height equal to workflow-icon-size-medium
• table-header-row-checkbox-to-top-large: Use semantic token base-padding-vertical-large instead. Controls must be in a frame that has height equal to workflow-icon-size-large
• table-header-row-checkbox-to-top-extra-large: Use semantic token base-padding-vertical-extra-large instead. Controls must be in a frame that has height equal to workflow-icon-size-extra-large
• table-row-checkbox-to-top-small-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-checkbox-to-top-small: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-checkbox-to-top-small-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-checkbox-to-top-medium-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-checkbox-to-top-medium: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-checkbox-to-top-medium-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-checkbox-to-top-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-checkbox-to-top-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-checkbox-to-top-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-row-checkbox-to-top-extra-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-row-checkbox-to-top-extra-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-row-checkbox-to-top-extra-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-small-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-medium-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-extra-large-compact: Use semantic token table-item-padding-compact instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-small: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-medium: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-extra-large: Use semantic token table-item-padding-regular instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-small-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-medium-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• table-thumbnail-to-top-minimum-extra-large-spacious: Use semantic token table-item-padding-spacious instead. Refactor may be necessary
• tab-item-to-tab-item-horizontal-small: Use semantic token tab-gap-horizontal-small instead.
• tab-item-to-tab-item-horizontal-medium: Use semantic token tab-gap-horizontal-medium instead. Requires acknowledgement of internal button structure
• tab-item-to-tab-item-horizontal-large: Use semantic token tab-gap-horizontal-large instead.
• tab-item-to-tab-item-horizontal-extra-large: Use semantic token tab-gap-horizontal-extra-large instead.
• tab-item-to-tab-item-vertical-small: Use semantic token list-gap-regular instead.
• tab-item-to-tab-item-vertical-medium: Use semantic token list-gap-regular instead.
• tab-item-to-tab-item-vertical-large: Use semantic token list-gap-regular instead.
• tab-item-to-tab-item-vertical-extra-large: Use semantic token list-gap-regular instead.
• tab-item-start-to-edge-quiet: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• tab-item-start-to-edge-small: Use semantic token base-padding-horizontal-small instead. Not present in design; obscure and difficult to find in implementations
• tab-item-start-to-edge-medium: Use semantic token base-padding-horizontal-medium instead. Not present in design; obscure and difficult to find in implementations
• tab-item-start-to-edge-large: Use semantic token base-padding-horizontal-large instead. Not present in design; obscure and difficult to find in implementations
• tab-item-start-to-edge-extra-large: Use semantic token base-padding-horizontal-extra-large instead. Not present in design; obscure and difficult to find in implementations
• tab-item-top-to-text-small: Use semantic token base-padding-vertical-small instead.
• tab-item-bottom-to-text-small: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-text-medium: Use semantic token base-padding-vertical-medium instead. Requires acknowledgement of internal button structure
• tab-item-bottom-to-text-medium: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-text-large: Use semantic token base-padding-vertical-large instead.
• tab-item-bottom-to-text-large: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-text-extra-large: Use semantic token base-padding-vertical-extra-large instead.
• tab-item-bottom-to-text-extra-large: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-text-compact-small: Use semantic token base-padding-vertical-small instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-bottom-to-text-compact-small: Use semantic token base-padding-vertical-small instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-text-compact-medium: Use semantic token base-padding-vertical-medium instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-bottom-to-text-compact-medium: Use semantic token base-padding-vertical-medium instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-text-compact-large: Use semantic token base-padding-vertical-large instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-bottom-to-text-compact-large: Use semantic token base-padding-vertical-large instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-text-compact-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-bottom-to-text-compact-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-workflow-icon-small: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-workflow-icon-medium: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-workflow-icon-large: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-workflow-icon-extra-large: Use semantic token list-item-padding-vertical-spacious instead. Requires refactor: this token + base-padding-vertical will get desired value
• tab-item-top-to-workflow-icon-compact-small: Use semantic token base-padding-vertical-small instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-workflow-icon-compact-medium: Use semantic token base-padding-vertical-medium instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-workflow-icon-compact-large: Use semantic token base-padding-vertical-large instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-top-to-workflow-icon-compact-extra-large: Use semantic token base-padding-vertical-extra-large instead. Requires acknowledgement of internal button structure - Density does not affect this value; onlly the tab item vertical padding
• tab-item-focus-indicator-gap-small: Use semantic token focus-ring-gap instead. Requires refactor;
• tab-item-focus-indicator-gap-medium: Use semantic token focus-ring-gap instead. Requires refactor;
• tab-item-focus-indicator-gap-large: Use semantic token focus-ring-gap instead. Requires refactor;
• tab-item-focus-indicator-gap-extra-large: Use semantic token focus-ring-gap instead. Requires refactor;
• side-navigation-second-level-edge-to-text: Use semantic token list-indent-large instead.
• side-navigation-third-level-edge-to-text: Use semantic token list-indent-large instead.
• side-navigation-with-icon-second-level-edge-to-text: Use semantic token list-indent-medium instead.
• side-navigation-with-icon-third-level-edge-to-text: Use semantic token list-indent-medium instead.
• side-navigation-item-to-item: Use semantic token list-gap-regular instead.
• side-navigation-item-to-header: Use semantic token container-gap-extra-large instead.
• side-navigation-bottom-to-text: Use semantic token base-padding-vertical-medium instead. Clean VF update will correct this
• tray-top-to-content-area: Use semantic token list-item-padding-vertical-regular instead.
• in-field-button-stacked-inner-edge-to-fill: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• in-field-button-edge-to-disclosure-icon-stacked-small: Use semantic token accessory-item-padding-small instead. Requires refactor; prior value is this token + accessory-gap-[size]
• in-field-button-edge-to-disclosure-icon-stacked-medium: Use semantic token accessory-item-padding-medium instead. Requires refactor; prior value is this token + accessory-gap-[size]
• in-field-button-edge-to-disclosure-icon-stacked-large: Use semantic token accessory-item-padding-large instead. Requires refactor; prior value is this token + accessory-gap-[size]
• in-field-button-edge-to-disclosure-icon-stacked-extra-large: Use semantic token accessory-item-padding-extra-large instead. Requires refactor; prior value is this token + accessory-gap-[size]
• in-field-button-outer-edge-to-disclosure-icon-stacked-small: Use semantic token accessory-item-padding-small instead. Not present in S2 specs. May require refactor
• in-field-button-outer-edge-to-disclosure-icon-stacked-medium: Use semantic token accessory-item-padding-medium instead. Not present in S2 specs. May require refactor
• in-field-button-outer-edge-to-disclosure-icon-stacked-large: Use semantic token accessory-item-padding-large instead. Not present in S2 specs. May require refactor
• in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: Use semantic token accessory-item-padding-extra-large instead. Not present in S2 specs. May require refactor
• in-field-button-inner-edge-to-disclosure-icon-stacked-small: Use semantic token accessory-item-padding-small instead. Not present in S2 specs. May require refactor
• in-field-button-inner-edge-to-disclosure-icon-stacked-medium: Use semantic token accessory-item-padding-medium instead. Not present in S2 specs. May require refactor
• in-field-button-inner-edge-to-disclosure-icon-stacked-large: Use semantic token accessory-item-padding-large instead. Not present in S2 specs. May require refactor
• in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: Use semantic token accessory-item-padding-extra-large instead. Not present in S2 specs. May require refactor
• side-navigation-header-to-item: Use semantic token base-padding-vertical-medium instead. Clean VF update will correct this
• tag-label-to-clear-icon-small: Use semantic token base-padding-horizontal-small instead.
• tag-label-to-clear-icon-medium: Use semantic token base-padding-horizontal-medium instead.
• tag-label-to-clear-icon-large: Use semantic token base-padding-horizontal-large instead.
• tag-edge-to-clear-icon-small: Use semantic token base-gap-small instead.
• tag-edge-to-clear-icon-medium: Use semantic token base-gap-medium instead.
• tag-edge-to-clear-icon-large: Use semantic token base-gap-large instead.
• alert-banner-top-to-alert-icon: Use semantic token banner-padding-vertical instead. Need to evaluate how token is used in implementation; refactor may be necessary.
• accordion-top-to-text-spacious-small: Use semantic token base-padding-vertical-large instead. Major refactor necessary
• combo-box-visual-to-field-button: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• in-field-button-edge-to-fill-small: Use semantic token accessory-gap-small instead.
• in-field-button-edge-to-fill-medium: Use semantic token accessory-gap-medium instead.
• in-field-button-edge-to-fill-large: Use semantic token accessory-gap-large instead.
• in-field-button-edge-to-fill-extra-large: Use semantic token accessory-gap-extra-large instead.
• in-field-progress-circle-edge-to-fill: Single pixel value for a specific component: not a token
• status-light-text-to-visual-75: Use semantic token base-gap-small instead.
• status-light-text-to-visual-100: Use semantic token base-gap-medium instead.
• status-light-text-to-visual-200: Use semantic token base-gap-large instead.
• status-light-text-to-visual-300: Use semantic token base-gap-extra-large instead.
• menu-item-label-to-description-small: Use semantic token text-gap-small instead.
• menu-item-label-to-description-medium: Use semantic token text-gap-medium instead.
• menu-item-label-to-description-large: Use semantic token text-gap-large instead.
• menu-item-label-to-description-extra-large: Use semantic token text-gap-extra-large instead.
• menu-section-header-to-description-small: Use semantic token text-gap-small instead.
• menu-section-header-to-description-medium: Use semantic token text-gap-medium instead.
• menu-section-header-to-description-large: Use semantic token text-gap-large instead.
• menu-section-header-to-description-extra-large: Use semantic token text-gap-extra-large instead.
• menu-item-top-to-thumbnail-small: Use semantic token base-padding-vertical-small instead. Unify with all top component paddings
• menu-item-top-to-thumbnail-medium: Use semantic token base-padding-vertical-medium instead. Unify with all top component paddings
• menu-item-top-to-thumbnail-large: Use semantic token base-padding-vertical-large instead. Unify with all top component paddings
• menu-item-top-to-thumbnail-extra-large: Use semantic token base-padding-vertical-extra-large instead. Unify with all top component paddings
• breadcrumbs-separator-to-bottom-text-multiline: Use semantic token base-gap-3x-large instead.
• breadcrumbs-start-edge-to-text-large: Use semantic token base-gap-2x-large instead.
• breadcrumbs-start-edge-to-text-medium: Use semantic token base-gap-medium instead.
• breadcrumbs-start-edge-to-text-multiline: Use semantic token base-gap-extra-small instead.
• breadcrumbs-top-to-separator-large: Use semantic token base-padding-vertical-2x-large instead. Require unified UI icon set.
• breadcrumbs-top-to-separator-medium: Use semantic token base-padding-vertical-large instead. Require unified UI icon set.
• breadcrumbs-top-to-separator-multiline: Use semantic token base-padding-vertical-medium instead. Require unified UI icon set.
• breadcrumbs-truncated-menu-to-separator: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• breadcrumbs-text-to-separator-large: Use semantic token base-gap-2x-large instead.
• breadcrumbs-text-to-separator-medium: Use semantic token base-gap-medium instead.
• breadcrumbs-text-to-separator-multiline: Use semantic token base-gap-extra-small instead.
• coach-indicator-collapsed-gap: Use semantic token focus-ring-gap instead.
• coach-indicator-expanded-gap: Use semantic token base-gap-medium instead.
• accordion-content-area-edge-to-content-small: Use semantic token container-padding-extra-small instead. Major refactor necessary
• accordion-content-area-edge-to-content-medium: Use semantic token container-padding-extra-small instead. Major refactor necessary
• accordion-content-area-edge-to-content-large: Use semantic token container-padding-small instead. Major refactor necessary
• accordion-content-area-edge-to-content-extra-large: Use semantic token container-padding-medium instead. Major refactor necessary
• accordion-disclosure-indicator-to-text-small: Use semantic token base-gap-medium instead. Major refactor necessary
• accordion-disclosure-indicator-to-text-medium: Use semantic token base-gap-large instead. Major refactor necessary
• accordion-disclosure-indicator-to-text-large: Use semantic token base-gap-extra-large instead. Major refactor necessary
• accordion-disclosure-indicator-to-text-extra-large: Use semantic token base-gap-2x-large instead. These gap vales don't match with what's in the Figma component. Recommending design update anyhow
• accordion-item-to-divider: Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• action-bar-top-to-content-area: Use semantic token banner-padding-vertical instead.
• action-bar-bottom-to-content-area: Use semantic token banner-padding-vertical instead.
• action-bar-edge-to-content-area: Use semantic token banner-padding-horizontal-compact instead.
• action-bar-close-button-to-counter: Use semantic token group-gap-extra-small instead.
• swatch-group-spacing-spacious: Use semantic token container-gap-2x-small instead. NOTE: All other swatch gaps need to use these semantics too
• avatar-to-avatar-50: Use semantic token base-gap-extra-small instead. Implementations could negate value eg calc(-1 * token-name)
• avatar-to-avatar-75: Use semantic token base-gap-small instead. Implementations could negate value eg calc(-1 * token-name)
• avatar-to-avatar-100: Use semantic token base-gap-medium instead. Implementations could negate value eg calc(-1 * token-name)
• avatar-to-avatar-200: Use semantic token base-gap-large instead. Implementations could negate value eg calc(-1 * token-name)
• avatar-to-avatar-300: Use semantic token base-gap-extra-large instead. Implementations could negate value eg calc(-1 * token-name)
• avatar-to-avatar-400: Use semantic token base-gap-2x-large instead. Implementations could negate value eg calc(-1 * token-name)
• avatar-to-avatar-500: Use semantic token base-gap-3x-large instead. Implementations could negate value eg calc(-1 * token-name)
• standard-panel-top-to-close-button-compact: Use semantic token base-padding-vertical-large instead. RECOMMEND ALTERNATIVE MEASUREMENT (negative offset) so a single token can be reused across all densities
• standard-panel-top-to-close-button-regular: Use semantic token base-padding-vertical-large instead. RECOMMEND ALTERNATIVE MEASUREMENT (negative offset) so a single token can be reused across all densities
• standard-panel-top-to-close-button-spacious: Use semantic token base-padding-vertical-large instead. RECOMMEND ALTERNATIVE MEASUREMENT (negative offset) so a single token can be reused across all densities
• standard-panel-edge-to-close-button-compact: Use semantic token base-padding-vertical-large instead. RECOMMEND ALTERNATIVE MEASUREMENT (negative offset) so a single token can be reused across all densities
• standard-panel-edge-to-close-button-regular: Use semantic token base-padding-vertical-large instead. RECOMMEND ALTERNATIVE MEASUREMENT (negative offset) so a single token can be reused across all densities
• standard-panel-edge-to-close-button-spacious: Use semantic token base-padding-vertical-large instead. RECOMMEND ALTERNATIVE MEASUREMENT (negative offset) so a single token can be reused across all densities
• bar-panel-spacing-extra-spacious: Use semantic token container-padding-extra-large instead.
• rating-top-to-content-area-small: Use semantic token base-padding-vertical-small instead.
• rating-bottom-to-content-area-small: Use semantic token base-padding-vertical-small instead.
• rating-edge-to-content-area-small: Use semantic token base-padding-vertical-small instead.
• rating-top-to-content-area-medium: Use semantic token base-padding-vertical-medium instead.
• rating-bottom-to-content-area-medium: Use semantic token base-padding-vertical-medium instead.
• rating-edge-to-content-area-medium: Use semantic token base-padding-vertical-medium instead.
• select-box-edge-to-checkbox: Use semantic token container-padding-extra-small instead.
• select-box-horizontal-end-to-content: Use semantic token container-gap-2x-large instead.
• select-box-horizontal-illustration-to-label: Use semantic token container-gap-small instead.
• select-box-horizontal-label-to-description: Use semantic token text-gap-large instead.
• select-box-horizontal-start-to-content: Use semantic token container-padding-extra-large instead.
• select-box-horizontal-top-to-content: Use semantic token container-padding-medium instead.
• select-box-top-to-checkbox: Use semantic token container-padding-small instead. Should actually be 12 when checkbox component's vertical padding removed as it should be in this scenario
• select-box-vertical-edge-to-content: Use semantic token container-padding-extra-large instead.
• select-box-vertical-illustration-to-label: Use semantic token container-gap-extra-small instead.
• slider-control-to-field-label-editable-small: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-editable-medium: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-editable-large: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-editable-extra-large: Refactor required; remove padding from label, no negative margins
• slider-control-to-field-label-side-small: Use semantic token container-gap-small instead.
• slider-control-to-field-label-side-medium: Use semantic token container-gap-medium instead.
• slider-control-to-field-label-side-large: Use semantic token container-gap-large instead.
• slider-control-to-field-label-side-extra-large: Use semantic token container-gap-extra-large instead.
• slider-control-to-text-field-small: Use semantic token container-gap-small instead.
• slider-control-to-text-field-medium: Use semantic token container-gap-medium instead.
• slider-control-to-text-field-large: Use semantic token container-gap-large instead.
• slider-control-to-text-field-extra-large: Use semantic token container-gap-extra-large instead.
• in-field-stepper-to-end-small: Use semantic token accessory-gap-small instead. Refactoring required
• in-field-stepper-to-end-medium: Use semantic token accessory-gap-medium instead. Refactoring required
• in-field-stepper-to-end-large: Use semantic token accessory-gap-large instead. Refactoring required
• in-field-stepper-to-end-extra-large: Use semantic token accessory-gap-extra-large instead. Refactoring required
• number-field-visual-to-in-field-stepper-small: Use semantic token base-padding-horizontal-small instead.
• number-field-visual-to-in-field-stepper-medium: Use semantic token base-padding-horizontal-medium instead.
• number-field-visual-to-in-field-stepper-large: Use semantic token base-padding-horizontal-large instead.
• number-field-visual-to-in-field-stepper-extra-large: Use semantic token base-padding-horizontal-extra-large instead.
• tree-view-bottom-to-label: Use semantic token base-padding-vertical-medium instead. Faulty measurement. Combination of two measurements Correcting to text to inner element spacing. Refactor needed
• tree-view-drag-handle-to-checkbox: Use semantic token list-item-gap-medium instead.
• tree-view-edge-to-checkbox: Use semantic token list-item-padding-horizontal instead. Refactor or combine list-item-padding-horizontal with base-padding-horizontal-medium
• tree-view-edge-to-drag-handle: Use semantic token list-item-padding-horizontal instead.
• tree-view-end-edge-to-action-area: Use semantic token list-item-padding-horizontal instead.
• tree-view-header-to-item: Should be zero. Zero values are removed without token replacements; hardcode a zero-pixel value in implementation.
• tree-view-item-to-header: Use semantic token list-gap-regular instead. This gap is not used in design; the header gap is equal to all other list item gaps. Refactor may be necessary
• tree-view-item-to-item-default: Should be zero; no token
• tree-view-item-to-item-detached: Use semantic token list-item-gap-small instead.
• tree-view-label-to-action-area: Use semantic token list-item-gap-medium instead.
• tree-view-level-increment: Use semantic token list-indent-medium instead.
• tree-view-minimum-top-to-context-area: Use semantic token base-padding-vertical-medium instead.
• tree-view-top-to-action-button: Use semantic token list-item-padding-vertical-regular instead.
• tree-view-top-to-checkbox: Use semantic token list-item-padding-vertical-regular instead.
• tree-view-top-to-disclosure-indicator: Use semantic token list-item-padding-vertical-regular instead. Design spec's show different value/measurement than token value
• tree-view-top-to-drag-handle: Use semantic...[Comment body truncated]