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

    Color component

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    swatch-border-color alias {gray-1000} dark: rgb(255, 255, 255)
    light: rgb(0, 0, 0)
    wireframe: rgb(0, 0, 0)     		No - -
    swatch-border-opacity opacity 0.42 0.42 No - -
    swatch-disabled-icon-border-color alias {black} rgb(0, 0, 0) No - -
    swatch-disabled-icon-border-opacity opacity 0.42 0.42 No - -
    thumbnail-border-color alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)     		No - -
    thumbnail-border-opacity opacity 0.1 0.1 No - -
    thumbnail-opacity-disabled alias {opacity-disabled} 0.3 No - -
    opacity-checkerboard-square-light alias {white} rgb(255, 255, 255) No - -
    opacity-checkerboard-square-dark color-set - light: rgb(225, 225, 225)
    dark: rgb(219, 219, 219)
    wireframe: rgb(214, 224, 246)     		No - -
    avatar-opacity-disabled alias {opacity-disabled} 0.3 No - -
    color-area-border-color alias {gray-1000} dark: rgb(255, 255, 255)
    light: rgb(0, 0, 0)
    wireframe: rgb(0, 0, 0)     		No - -
    color-area-border-opacity opacity 0.1 0.1 No - -
    color-slider-border-color alias {gray-1000} dark: rgb(255, 255, 255)
    light: rgb(0, 0, 0)
    wireframe: rgb(0, 0, 0)     		No - -
    color-slider-border-opacity opacity 0.1 0.1 No - -
    color-loupe-drop-shadow-color alias {drop-shadow-elevated-color} light: rgba(0, 0, 0, 0.16)
    dark: rgba(0, 0, 0, 0.48)
    wireframe: rgba(0, 0, 0, 0.16)     		Yes Use drop-shadow-elevated-color instead Replaced by drop-shadow-elevated-color
    color-loupe-drop-shadow-y alias {drop-shadow-elevated-y} 2px Yes - -
    color-loupe-drop-shadow-blur alias {drop-shadow-elevated-blur} 8px Yes - -
    color-loupe-inner-border alias {transparent-black-200} rgba(0, 0, 0, 0.12) No - -
    color-loupe-outer-border alias {white} rgb(255, 255, 255) No - -
    card-selection-background-color color-set - light: rgba(255, 255, 255, 0.51)
    dark: rgba(0, 0, 0, 0.56)
    wireframe: rgba(0, 0, 0, 0.56)     		No - -
    card-selection-background-color-opacity opacity 0.95 0.95 No - -
    drop-zone-background-color alias {accent-visual-color} light: rgb(75, 117, 255)
    dark: rgb(86, 129, 255)
    wireframe: rgb(93, 127, 201)     		No - -
    drop-zone-background-color-opacity opacity 0.1 0.1 No - -
    drop-zone-background-color-opacity-filled opacity 0.3 0.3 No - -
    coach-mark-pagination-color alias {gray-600} light: rgb(113, 113, 113)
    dark: rgb(138, 138, 138)
    wireframe: rgb(72, 110, 194)     		No - -
    color-handle-inner-border-color alias {black} rgb(0, 0, 0) No - -
    color-handle-inner-border-opacity opacity 0.42 0.42 No - -
    color-handle-outer-border-color alias {black} rgb(0, 0, 0) No - -
    color-handle-outer-border-opacity alias {color-handle-inner-border-opacity} 0.42 No - -
    color-handle-drop-shadow-color alias {drop-shadow-color} light: rgba(0, 0, 0, 0.12)
    dark: rgba(0, 0, 0, 0.36)
    wireframe: rgba(0, 0, 0, 0.12)     		Yes Express does not need a separate design for Color loupe and Color handle components Replaced by drop-shadow-color
    floating-action-button-drop-shadow-color alias {transparent-black-300} rgba(0, 0, 0, 0.15) No - -
    floating-action-button-shadow-color alias {floating-action-button-drop-shadow-color} rgba(0, 0, 0, 0.15) Yes Use floating-action-button-drop-shadow-color instead Replaced by floating-action-button-drop-shadow-color
    table-row-hover-color alias {gray-900} light: rgb(19, 19, 19)
    dark: rgb(242, 242, 242)
    wireframe: rgb(10, 19, 39)     		No - -
    table-row-hover-opacity opacity 0.07 0.07 No - -
    table-selected-row-background-color alias {informative-background-color-default} light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)     		No - -
    table-selected-row-background-opacity opacity 0.1 0.1 No - -
    table-selected-row-background-color-non-emphasized alias {neutral-background-color-selected-default} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)     		No - -
    table-selected-row-background-opacity-non-emphasized opacity 0.1 0.1 No - -
    table-row-down-opacity opacity 0.1 0.1 No - -
    table-selected-row-background-opacity-hover opacity 0.15 0.15 No - -
    table-selected-row-background-opacity-non-emphasized-hover opacity 0.15 0.15 No - -
    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-hover 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-keyboard-focus 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 - -
    popover-border-color color-set - light: rgba(255, 255, 255, 0)
    dark: rgb(68, 68, 68)
    wireframe: rgb(214, 224, 246)     		No - -
    popover-border-opacity color-set - light: 0
    dark: 1.0
    wireframe: 0    		 No - -
    coach-indicator-color alias {blue-800} light: rgb(75, 117, 255)
    dark: rgb(64, 105, 253)
    wireframe: rgb(93, 127, 201)     		No - -
    swatch-group-border-color alias {gray-1000} dark: rgb(255, 255, 255)
    light: rgb(0, 0, 0)
    wireframe: rgb(0, 0, 0)     		No - -
    avatar-border-color alias {gray-25} dark: rgb(17, 17, 17)
    light: rgb(255, 255, 255)
    wireframe: rgb(254, 254, 255)     		No - -
    standard-panel-gripper-color-drag alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)     		No - -
    standard-panel-gripper-color alias {gray-500} light: rgb(143, 143, 143)
    dark: rgb(109, 109, 109)
    wireframe: rgb(108, 142, 217)     		No - -
    bar-panel-gripper-color alias {gray-200} light: rgb(225, 225, 225)
    dark: rgb(50, 50, 50)
    wireframe: rgb(214, 224, 246)     		No - -
    bar-panel-gripper-color-drag alias {gray-800} light: rgb(41, 41, 41)
    dark: rgb(219, 219, 219)
    wireframe: rgb(25, 46, 93)     		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 - -
    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 - -
    color-wheel-border-color alias {gray-1000} dark: rgb(255, 255, 255)
    light: rgb(0, 0, 0)
    wireframe: rgb(0, 0, 0)     		No - -
    color-wheel-border-opacity opacity 0.1 0.1 No - -
    action-bar-border-color color-set - light: rgba(255, 255, 255, 0)
    dark: rgb(68, 68, 68)
    wireframe: rgba(255, 255, 255, 0)     		No - -
    card-background-well-color alias {gray-100} light: rgb(233, 233, 233)
    dark: rgb(44, 44, 44)
    wireframe: rgb(228, 234, 249)     		No - -
    card-background-loading-color 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-down 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-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-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-down 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-color-emphasized alias {accent-background-color-default} light: rgb(59, 99, 251)
    dark: rgb(64, 105, 253)
    wireframe: rgb(74, 111, 195)     		No - -