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

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    menu-item-background-color-default color-set - light: rgb(233, 233, 233)
    dark: rgb(50, 50, 50)
    wireframe: rgb(228, 234, 249)
    No - -
    menu-item-background-color-disabled color-set - light: rgb(233, 233, 233)
    dark: rgb(50, 50, 50)
    wireframe: rgb(228, 234, 249)
    No - -
    menu-item-background-color-down color-set - light: rgb(233, 233, 233)
    dark: rgb(50, 50, 50)
    wireframe: rgb(228, 234, 249)
    No - -
    menu-item-background-color-hover color-set - light: rgb(233, 233, 233)
    dark: rgb(50, 50, 50)
    wireframe: rgb(228, 234, 249)
    No - -
    menu-item-background-color-keyboard-focus color-set - light: rgb(233, 233, 233)
    dark: rgb(50, 50, 50)
    wireframe: rgb(228, 234, 249)
    No - -
    menu-item-background-opacity opacity 0 0 No - -
    menu-item-edge-to-content-not-selected-extra-large scale-set - desktop: 45px
    mobile: 54px
    Yes 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 scale-set - desktop: 38px
    mobile: 47px
    Yes 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 scale-set - desktop: 32px
    mobile: 42px
    Yes 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-small scale-set - desktop: 28px
    mobile: 24px
    Yes This use case should not be a single token but either calculated or structurally determined. Refactor may be required. -
    menu-item-label-to-description alias {menu-item-label-to-description-medium} 1px Yes - -
    menu-item-label-to-description-extra-large dimension 2px 2px Yes Use semantic token text-gap-extra-large instead. Replaced by text-gap-extra-large
    menu-item-label-to-description-large dimension 2px 2px Yes Use semantic token text-gap-large instead. Replaced by text-gap-large
    menu-item-label-to-description-medium dimension 1px 1px Yes Use semantic token text-gap-medium instead. Replaced by text-gap-medium
    menu-item-label-to-description-small dimension 1px 1px Yes Use semantic token text-gap-small instead. Replaced by text-gap-small
    menu-item-section-divider-height dimension 12px 12px No - -
    menu-item-top-to-disclosure-icon-extra-large scale-set - desktop: 17px
    mobile: 22px
    Yes 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 Replaced by base-padding-vertical-extra-large
    menu-item-top-to-disclosure-icon-large scale-set - desktop: 14px
    mobile: 17px
    Yes Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large Replaced by base-padding-vertical-large
    menu-item-top-to-disclosure-icon-medium scale-set - desktop: 11px
    mobile: 13px
    Yes Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium Replaced by base-padding-vertical-medium
    menu-item-top-to-disclosure-icon-small scale-set - desktop: 7px
    mobile: 9px
    Yes Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small Replaced by base-padding-vertical-small
    menu-item-top-to-selected-icon-extra-large scale-set - desktop: 17px
    mobile: 22px
    Yes 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 Replaced by base-padding-vertical-extra-large
    menu-item-top-to-selected-icon-large scale-set - desktop: 14px
    mobile: 17px
    Yes Use semantic token base-padding-vertical-large instead. UI icons must be in a frame that has height equal to workflow-icon-size-large Replaced by base-padding-vertical-large
    menu-item-top-to-selected-icon-medium scale-set - desktop: 11px
    mobile: 13px
    Yes Use semantic token base-padding-vertical-medium instead. UI icons must be in a frame that has height equal to workflow-icon-size-medium Replaced by base-padding-vertical-medium
    menu-item-top-to-selected-icon-small scale-set - desktop: 7px
    mobile: 9px
    Yes Use semantic token base-padding-vertical-small instead. UI icons must be in a frame that has height equal to workflow-icon-size-small Replaced by base-padding-vertical-small
    menu-item-top-to-thumbnail-extra-large scale-set - desktop: 11px
    mobile: 13px
    Yes Use semantic token base-padding-vertical-extra-large instead. Unify with all top component paddings Replaced by base-padding-vertical-extra-large
    menu-item-top-to-thumbnail-large scale-set - desktop: 10px
    mobile: 12px
    Yes Use semantic token base-padding-vertical-large instead. Unify with all top component paddings Replaced by base-padding-vertical-large
    menu-item-top-to-thumbnail-medium scale-set - desktop: 9px
    mobile: 11px
    Yes Use semantic token base-padding-vertical-medium instead. Unify with all top component paddings Replaced by base-padding-vertical-medium
    menu-item-top-to-thumbnail-small scale-set - desktop: 8px
    mobile: 10px
    Yes Use semantic token base-padding-vertical-small instead. Unify with all top component paddings Replaced by base-padding-vertical-small
    menu-section-header-to-description-extra-large dimension 2px 2px Yes Use semantic token text-gap-extra-large instead. Replaced by text-gap-extra-large
    menu-section-header-to-description-large dimension 2px 2px Yes Use semantic token text-gap-large instead. Replaced by text-gap-large
    menu-section-header-to-description-medium dimension 1px 1px Yes Use semantic token text-gap-medium instead. Replaced by text-gap-medium
    menu-section-header-to-description-small dimension 1px 1px Yes Use semantic token text-gap-small instead. Replaced by text-gap-small