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

    Tree view

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    tree-view-bottom-to-label scale-set - desktop: 12px
    mobile: 16px    		 Yes Use semantic token base-padding-vertical-medium instead. Faulty measurement. Combination of two measurements Correcting to text to inner element spacing. Refactor needed Replaced by base-padding-vertical-medium
    tree-view-disclosure-indicator-height scale-set - desktop: 32px
    mobile: 40px    		 No - -
    tree-view-disclosure-indicator-width scale-set - desktop: 34px
    mobile: 42px    		 No - -
    tree-view-drag-handle-icon-to-checkbox scale-set - desktop: 8px
    mobile: 10px    		 Yes Use semantic token list-item-gap-medium instead. Replaced by list-item-gap-medium
    tree-view-edge-to-checkbox 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
    tree-view-edge-to-drag-handle-icon scale-set - desktop: 4px
    mobile: 5px    		 Yes Use semantic token list-item-padding-horizontal instead. Replaced by list-item-padding-horizontal
    tree-view-end-edge-to-action-area scale-set - desktop: 6px
    mobile: 7px    		 Yes Use semantic token list-item-padding-horizontal instead. Replaced by list-item-padding-horizontal
    tree-view-header-to-item dimension -1px -1px Yes Should be zero. Zero values are removed without token replacements; hardcode a zero-pixel value in implementation. -
    tree-view-item-to-header scale-set - desktop: 24px
    mobile: 30px    		 Yes Use semantic token list-gap-regular instead. This gap is not used in design; the header gap is equal to all other list item gaps. Refactor may be necessary Replaced by gap-regular
    tree-view-item-to-item alias {tree-view-item-to-item-default} -1px Yes This token has been deprecated, use tree-view-item-to-item-default instead. Replaced by tree-view-item-to-item-default
    tree-view-item-to-item-default dimension -1px -1px Yes Should be zero; no token -
    tree-view-item-to-item-detached dimension 2px 2px Yes Use semantic token list-item-gap-small instead. Replaced by list-item-gap-small
    tree-view-label-to-action-area scale-set - desktop: 6px
    mobile: 8px    		 Yes Use semantic token list-item-gap-medium instead. Replaced by list-item-gap-medium
    tree-view-level-increment scale-set - desktop: 16px
    mobile: 20px    		 Yes Use semantic token list-indent-medium instead. Replaced by list-indent-medium
    tree-view-minimum-height scale-set - desktop: 40px
    mobile: 50px    		 No - -
    tree-view-minimum-top-to-context-area scale-set - desktop: 8px
    mobile: 10px    		 Yes Use semantic token base-padding-vertical-medium instead. Replaced by base-padding-vertical-medium
    tree-view-minimum-width scale-set - desktop: 160px
    mobile: 200px    		 No - -
    tree-view-row-background-hover alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    tree-view-selected-row-background-color-emphasized alias {informative-background-color-default} light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)     		No - -
    tree-view-selected-row-background-default alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    tree-view-selected-row-background-hover alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    tree-view-selected-row-background-opacity-emphasized opacity 0.1 0.1 No - -
    tree-view-selected-row-background-opacity-emphasized-hover opacity 0.15 0.15 No - -
    tree-view-top-to-action-button scale-set - desktop: 4px
    mobile: 5px    		 Yes Use semantic token list-item-padding-vertical-regular instead. Replaced by list-item-padding-vertical-regular
    tree-view-top-to-checkbox scale-set - desktop: 4px
    mobile: 5px    		 Yes Use semantic token list-item-padding-vertical-regular instead. Replaced by list-item-padding-vertical-regular
    tree-view-top-to-disclosure-indicator scale-set - desktop: 15px
    mobile: 19px    		 Yes Use semantic token list-item-padding-vertical-regular instead. Design spec's show different value/measurement than token value Replaced by list-item-padding-vertical-regular
    tree-view-top-to-drag-handle-icon scale-set - desktop: 15px
    mobile: 19px    		 Yes Use semantic token base-padding-vertical-medium instead. Drag handle will need to be in a frame with height equal to workflow-icon-size-[size] Replaced by base-padding-vertical-medium
    tree-view-top-to-label scale-set - desktop: 10px
    mobile: 13px    		 Yes Use semantic token base-padding-vertical-medium instead. Replaced by base-padding-vertical-medium