Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Specification
  • Tools
  • Side navigation

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    side-navigation-bottom-to-text scale-set - desktop: 8px
    mobile: 10px
    Yes Use semantic token base-padding-vertical-medium instead. Clean VF update will correct this Replaced by base-padding-vertical-medium
    side-navigation-counter-to-disclosure scale-set - desktop: 4px
    mobile: 6px
    Yes Use semantic token list-item-gap-medium instead. Refactor may be needed Replaced by list-item-gap-medium
    side-navigation-edge-to-indicator scale-set - desktop: 4px
    mobile: 6px
    Yes Use semantic token list-item-gap-medium instead. Refactor may be needed Replaced by list-item-gap-medium
    side-navigation-header-to-item scale-set - desktop: 8px
    mobile: 10px
    Yes Use semantic token base-padding-vertical-medium instead. Clean VF update will correct this Replaced by base-padding-vertical-medium
    side-navigation-indicator-height scale-set - desktop: 18px
    mobile: 22px
    No - -
    side-navigation-indicator-thickness dimension 2px 2px No - -
    side-navigation-indicator-to-content scale-set - desktop: 6px
    mobile: 8px
    Yes Use semantic token base-padding-horizontal-uniform-medium instead. If using base padding horizontal, this would be 7 Replaced by base-padding-horizontal-uniform-medium
    side-navigation-item-to-header scale-set - desktop: 24px
    mobile: 30px
    Yes Use semantic token container-gap-extra-large instead. Replaced by container-gap-extra-large
    side-navigation-item-to-item scale-set - desktop: 4px
    mobile: 5px
    Yes Use semantic token list-gap-regular instead. Replaced by gap-regular
    side-navigation-maximum-width scale-set - desktop: 240px
    mobile: 300px
    Yes - -
    side-navigation-minimum-width scale-set - desktop: 144px
    mobile: 180px
    No - -
    side-navigation-second-level-edge-to-indicator scale-set - desktop: 30px
    mobile: 36px
    Yes Use semantic token list-indent-large instead. Refactor may be needed Replaced by list-indent-large
    side-navigation-second-level-edge-to-text scale-set - desktop: 38px
    mobile: 44px
    Yes Use semantic token list-indent-large instead. Replaced by list-indent-large
    side-navigation-second-level-with-icon-edge-to-indicator scale-set - desktop: 20px
    mobile: 26px
    Yes Use semantic token list-indent-medium instead. S2 spec file has this named side-navigation-with-icon-second-level-edge-to-indicator. Refactor may be needed Replaced by list-indent-medium
    side-navigation-second-level-with-icon-edge-to-text scale-set - desktop: 28px
    mobile: 34px
    Yes Use semantic token list-indent-large instead. Refactor may be needed Replaced by list-indent-large
    side-navigation-third-level-edge-to-indicator scale-set - desktop: 56px
    mobile: 62px
    Yes Use semantic token list-indent-large instead. Refactor may be needed Replaced by list-indent-large
    side-navigation-third-level-edge-to-text scale-set - desktop: 64px
    mobile: 70px
    Yes Use semantic token list-indent-large instead. Replaced by list-indent-large
    side-navigation-third-level-with-icon-edge-to-indicator scale-set - desktop: 36px
    mobile: 42px
    Yes Use semantic token list-indent-medium instead. S2 spec file has this named side-navigation-with-icon-third-level-edge-to-indicator. Refactor may be needed Replaced by list-indent-medium
    side-navigation-third-level-with-icon-edge-to-text scale-set - desktop: 44px
    mobile: 50px
    Yes Use semantic token list-indent-large instead. Refactor may be needed Replaced by list-indent-large
    side-navigation-trailing-accessory-area-to-edge scale-set - desktop: 4px
    mobile: 6px
    Yes Use semantic token list-item-padding-vertical-regular instead. Refactor may be needed Replaced by list-item-padding-vertical-regular
    side-navigation-width scale-set - desktop: 192px
    mobile: 240px
    No - -
    side-navigation-with-icon-second-level-edge-to-text scale-set - desktop: 28px
    mobile: 34px
    Yes Use semantic token list-indent-medium instead. Replaced by list-indent-medium
    side-navigation-with-icon-third-level-edge-to-text scale-set - desktop: 44px
    mobile: 50px
    Yes Use semantic token list-indent-medium instead. Replaced by list-indent-medium