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

    Select box

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    select-box-edge-to-checkbox dimension 8px 8px Yes Use semantic token container-padding-extra-small instead. Replaced by container-padding-extra-small
    select-box-horizontal-end-to-content scale-set - desktop: 32px
    mobile: 40px    		 Yes Use semantic token container-gap-2x-large instead. Replaced by container-gap-2x-large
    select-box-horizontal-illustration-to-label scale-set - desktop: 10px
    mobile: 12px    		 Yes Use semantic token container-gap-small instead. Replaced by container-gap-small
    select-box-horizontal-label-to-description scale-set - desktop: 2px
    mobile: 3px    		 Yes Use semantic token text-gap-large instead. Replaced by text-gap-large
    select-box-horizontal-minimum-height scale-set - desktop: 80px
    mobile: 100px    		 No - -
    select-box-horizontal-minimum-width scale-set - desktop: 188px
    mobile: 220px    		 No - -
    select-box-horizontal-start-to-content scale-set - desktop: 24px
    mobile: 30px    		 Yes Use semantic token container-padding-extra-large instead. Replaced by container-padding-extra-large
    select-box-horizontal-top-to-content scale-set - desktop: 16px
    mobile: 20px    		 Yes Use semantic token container-padding-medium instead. Replaced by container-padding-medium
    select-box-horizontal-width scale-set - desktop: 368px
    mobile: 460px    		 No - -
    select-box-selected-border-color alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)     		No - -
    select-box-top-to-checkbox scale-set - desktop: 4px
    mobile: 5px    		 Yes 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 Replaced by container-padding-small
    select-box-vertical-edge-to-content scale-set - desktop: 24px
    mobile: 30px    		 Yes Use semantic token container-padding-extra-large instead. Replaced by container-padding-extra-large
    select-box-vertical-height scale-set - desktop: 170px
    mobile: 212px    		 No - -
    select-box-vertical-illustration-to-label scale-set - desktop: 8px
    mobile: 10px    		 Yes Use semantic token container-gap-extra-small instead. Replaced by container-gap-extra-small