Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Specification
  • Tools
  • Accordion

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    accordion-bottom-to-text-compact-extra-large scale-set - desktop: 8px
    mobile: 10px
    Yes Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary Replaced by base-padding-vertical-extra-large
    accordion-bottom-to-text-compact-large scale-set - desktop: 8px
    mobile: 9px
    Yes Use semantic token base-padding-vertical-large instead. Major refactor necessary Replaced by base-padding-vertical-large
    accordion-bottom-to-text-compact-medium scale-set - desktop: 5px
    mobile: 8px
    Yes Use semantic token base-padding-vertical-medium instead. Major refactor necessary Replaced by base-padding-vertical-medium
    accordion-bottom-to-text-compact-small scale-set - desktop: 2px
    mobile: 4px
    Yes Use semantic token base-padding-vertical-small instead. Major refactor necessary Replaced by base-padding-vertical-small
    accordion-bottom-to-text-extra-large scale-set - desktop: 12px
    mobile: 15px
    Yes Use semantic token base-padding-vertical-2x-large instead. Major refactor necessary Replaced by base-padding-vertical-2x-large
    accordion-bottom-to-text-large scale-set - desktop: 11px
    mobile: 14px
    Yes Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary Replaced by base-padding-vertical-extra-large
    accordion-bottom-to-text-medium scale-set - desktop: 9px
    mobile: 13px
    Yes Use semantic token base-padding-vertical-large instead. Major refactor necessary Replaced by base-padding-vertical-large
    accordion-bottom-to-text-regular-extra-large alias {accordion-bottom-to-text-extra-large} desktop: 12px
    mobile: 15px
    Yes - -
    accordion-bottom-to-text-regular-large alias {accordion-bottom-to-text-large} desktop: 11px
    mobile: 14px
    Yes - -
    accordion-bottom-to-text-regular-medium alias {accordion-bottom-to-text-medium} desktop: 9px
    mobile: 13px
    Yes - -
    accordion-bottom-to-text-regular-small alias {accordion-bottom-to-text-small} desktop: 7px
    mobile: 9px
    Yes - -
    accordion-bottom-to-text-small scale-set - desktop: 7px
    mobile: 9px
    Yes Use semantic token base-padding-vertical-medium instead. Major refactor necessary Replaced by base-padding-vertical-medium
    accordion-bottom-to-text-spacious-extra-large scale-set - desktop: 16px
    mobile: 21px
    Yes Use semantic token base-padding-vertical-3x-large instead. Major refactor necessary Replaced by base-padding-vertical-3x-large
    accordion-bottom-to-text-spacious-large scale-set - desktop: 16px
    mobile: 19px
    Yes Use semantic token base-padding-vertical-2x-large instead. Major refactor necessary Replaced by base-padding-vertical-2x-large
    accordion-bottom-to-text-spacious-medium scale-set - desktop: 13px
    mobile: 18px
    Yes Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary Replaced by base-padding-vertical-extra-large
    accordion-bottom-to-text-spacious-small scale-set - desktop: 11px
    mobile: 15px
    Yes Use semantic token base-padding-vertical-large instead. Major refactor necessary Replaced by base-padding-vertical-large
    accordion-content-area-bottom-to-content scale-set - desktop: 16px
    mobile: 20px
    Yes Use semantic token container-padding-medium instead. Major refactor necessary Replaced by container-padding-medium
    accordion-content-area-edge-to-content-extra-large scale-set - desktop: 15px
    mobile: 19px
    Yes Use semantic token container-padding-medium instead. Major refactor necessary Replaced by container-padding-medium
    accordion-content-area-edge-to-content-large scale-set - desktop: 12px
    mobile: 15px
    Yes Use semantic token container-padding-small instead. Major refactor necessary Replaced by container-padding-small
    accordion-content-area-edge-to-content-medium scale-set - desktop: 9px
    mobile: 11px
    Yes Use semantic token container-padding-extra-small instead. Major refactor necessary Replaced by container-padding-extra-small
    accordion-content-area-edge-to-content-small scale-set - desktop: 8px
    mobile: 10px
    Yes Use semantic token container-padding-extra-small instead. Major refactor necessary Replaced by container-padding-extra-small
    accordion-content-area-top-to-content scale-set - desktop: 8px
    mobile: 10px
    Yes Zero values are removed without token replacements; hardcode a zero-pixel value in implementation. -
    accordion-disclosure-indicator-to-text dimension 0px 0px Yes - -
    accordion-disclosure-indicator-to-text-extra-large scale-set - desktop: 17px
    mobile: 22px
    Yes 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 Replaced by base-gap-2x-large
    accordion-disclosure-indicator-to-text-large scale-set - desktop: 14px
    mobile: 17px
    Yes Use semantic token base-gap-extra-large instead. Major refactor necessary Replaced by base-gap-extra-large
    accordion-disclosure-indicator-to-text-medium scale-set - desktop: 11px
    mobile: 13px
    Yes Use semantic token base-gap-large instead. Major refactor necessary Replaced by base-gap-large
    accordion-disclosure-indicator-to-text-small scale-set - desktop: 7px
    mobile: 9px
    Yes Use semantic token base-gap-medium instead. Major refactor necessary Replaced by base-gap-medium
    accordion-edge-to-content-area-extra-large dimension 17px 17px Yes Use semantic token container-padding-medium instead. Duplicate token use case. Major refactor necessary Replaced by container-padding-medium
    accordion-edge-to-content-area-large dimension 14px 14px Yes Use semantic token container-padding-small instead. Duplicate token use case. Major refactor necessary Replaced by container-padding-small
    accordion-edge-to-content-area-medium dimension 11px 11px Yes Use semantic token container-padding-extra-small instead. Duplicate token use case. Major refactor necessary Replaced by container-padding-extra-small
    accordion-edge-to-content-area-small dimension 7px 7px Yes Use semantic token container-padding-extra-small instead. Duplicate token use case. Major refactor necessary Replaced by container-padding-extra-small
    accordion-edge-to-disclosure-indicator dimension 0px 0px Yes - -
    accordion-edge-to-text dimension 0px 0px Yes Zero values are removed without token replacements; hardcode a zero-pixel value in implementation. -
    accordion-focus-indicator-gap dimension 2px 2px Yes Use semantic token focus-ring-gap instead. Replaced by focus-ring-gap
    accordion-item-to-divider dimension 0px 0px Yes Zero values are removed without token replacements; hardcode a zero-pixel value in implementation. -
    accordion-minimum-width scale-set - desktop: 200px
    mobile: 250px
    No - -
    accordion-small-top-to-text-spacious scale-set - desktop: 9px
    mobile: 12px
    Yes Introduced as an error. Use accordion-top-to-text-spacious-small instead Replaced by accordion-top-to-text-spacious-small
    accordion-top-to-text-compact-extra-large scale-set - desktop: 8px
    mobile: 11px
    Yes Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary Replaced by base-padding-vertical-extra-large
    accordion-top-to-text-compact-large scale-set - desktop: 8px
    mobile: 14px
    Yes Use semantic token base-padding-vertical-large instead. Major refactor necessary Replaced by base-padding-vertical-large
    accordion-top-to-text-compact-medium dimension 5px 5px Yes Use semantic token base-padding-vertical-medium instead. Major refactor necessary Replaced by base-padding-vertical-medium
    accordion-top-to-text-compact-small scale-set - desktop: 3px
    mobile: 4px
    Yes Use semantic token base-padding-vertical-small instead. Major refactor necessary Replaced by base-padding-vertical-small
    accordion-top-to-text-extra-large scale-set - desktop: 13px
    mobile: 17px
    Yes Use semantic token base-padding-vertical-2x-large instead. Major refactor necessary Replaced by base-padding-vertical-2x-large
    accordion-top-to-text-large scale-set - desktop: 12px
    mobile: 16px
    Yes Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary Replaced by base-padding-vertical-extra-large
    accordion-top-to-text-medium scale-set - desktop: 9px
    mobile: 10px
    Yes Use semantic token base-padding-vertical-large instead. Major refactor necessary Replaced by base-padding-vertical-large
    accordion-top-to-text-regular-extra-large alias {accordion-top-to-text-extra-large} desktop: 13px
    mobile: 17px
    Yes - -
    accordion-top-to-text-regular-large alias {accordion-top-to-text-large} desktop: 12px
    mobile: 16px
    Yes - -
    accordion-top-to-text-regular-medium alias {accordion-top-to-text-medium} desktop: 9px
    mobile: 10px
    Yes - -
    accordion-top-to-text-regular-small alias {accordion-top-to-text-small} desktop: 7px
    mobile: 10px
    Yes - -
    accordion-top-to-text-small scale-set - desktop: 7px
    mobile: 10px
    Yes Use semantic token base-padding-vertical-medium instead. Major refactor necessary Replaced by base-padding-vertical-medium
    accordion-top-to-text-spacious-extra-large scale-set - desktop: 17px
    mobile: 21px
    Yes Use semantic token base-padding-vertical-3x-large instead. Major refactor necessary Replaced by base-padding-vertical-3x-large
    accordion-top-to-text-spacious-large scale-set - desktop: 16px
    mobile: 19px
    Yes Use semantic token base-padding-vertical-2x-large instead. Major refactor necessary Replaced by base-padding-vertical-2x-large
    accordion-top-to-text-spacious-medium scale-set - desktop: 13px
    mobile: 15px
    Yes Use semantic token base-padding-vertical-extra-large instead. Major refactor necessary Replaced by base-padding-vertical-extra-large
    accordion-top-to-text-spacious-small scale-set - desktop: 11px
    mobile: 15px
    Yes Use semantic token base-padding-vertical-large instead. Major refactor necessary Replaced by base-padding-vertical-large