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

    Stack item

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    stack-item-action-to-navigation scale-set - desktop: 4px
    mobile: 6px    		 Yes Use semantic token list-item-gap-medium instead. Replaced by list-item-gap-medium
    stack-item-background-color-down alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    stack-item-background-color-hover alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    stack-item-background-color-key-focus alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    stack-item-drag-handle-icon-to-control scale-set - desktop: 8px
    mobile: 10px    		 Yes Use semantic token base-padding-horizontal-uniform-medium instead. Replaced by base-padding-horizontal-uniform-medium
    stack-item-edge-to-control scale-set - desktop: 12px
    mobile: 15px    		 Yes Use semantic token list-item-padding-horizontal instead. Refactor or combine list-item-padding-horizontal with base-padding-horizontal-medium Replaced by list-item-padding-horizontal
    stack-item-edge-to-visual scale-set - desktop: 12px
    mobile: 15px    		 Yes Use semantic token list-item-padding-horizontal instead. Refactor or combine list-item-padding-horizontal with base-padding-horizontal-medium Replaced by list-item-padding-horizontal
    stack-item-header-minimum-width scale-set - desktop: 200px
    mobile: 240px    		 No - -
    stack-item-header-to-item dimension 0px 0px Yes Zero values are removed without token replacements; hardcode a zero-pixel value in implementation. -
    stack-item-item-to-item dimension 0px 0px No - -
    stack-item-minimum-padding-vertical scale-set - desktop: 8px
    mobile: 10px    		 No - -
    stack-item-selected-background-color-default alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    stack-item-selected-background-color-down alias {gray-300} light: rgb(218, 218, 218)
    dark: rgb(57, 57, 57)
    wireframe: rgb(207, 219, 245)     		No - -
    stack-item-selected-background-color-emphasized alias {accent-background-color-default} light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)     		No - -
    stack-item-selected-background-color-hover alias {gray-200} light: rgb(225, 225, 225)
    dark: rgb(50, 50, 50)
    wireframe: rgb(214, 224, 246)     		No - -
    stack-item-selected-background-color-key-focus alias {gray-200} light: rgb(225, 225, 225)
    dark: rgb(50, 50, 50)
    wireframe: rgb(214, 224, 246)     		No - -
    stack-item-selected-background-opacity-emphasized opacity 0.1 0.1 No - -
    stack-item-selected-background-opacity-emphasized-down opacity 0.15 0.15 No - -
    stack-item-selected-background-opacity-emphasized-hover opacity 0.15 0.15 No - -
    stack-item-selected-background-opacity-emphasized-key-focus opacity 0.15 0.15 No - -
    stack-item-selected-background-opacity-highlight opacity 0.1 0.1 No - -
    stack-item-selected-background-opacity-highlight-hover opacity 0.15 0.15 No - -
    stack-item-start-edge-to-content scale-set - desktop: 4px
    mobile: 5px    		 Yes Use semantic token list-item-padding-horizontal instead. Replaced by list-item-padding-horizontal
    stack-item-text-to-control scale-set - desktop: 8px
    mobile: 10px    		 Yes Use semantic token base-gap-medium instead. Replaced by base-gap-medium