| swatch-border-color |
{gray-1000} |
dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) |
No |
- |
- |
| swatch-border-opacity |
0.42 |
0.42 |
No |
- |
- |
| swatch-disabled-icon-border-color |
{black} |
rgb(0, 0, 0) |
No |
- |
- |
| swatch-disabled-icon-border-opacity |
0.42 |
0.42 |
No |
- |
- |
| thumbnail-border-color |
{gray-800} |
light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) |
No |
- |
- |
| thumbnail-border-opacity |
0.1 |
0.1 |
No |
- |
- |
| thumbnail-opacity-disabled |
{opacity-disabled} |
0.3 |
No |
- |
- |
| opacity-checkerboard-square-light |
{white} |
rgb(255, 255, 255) |
No |
- |
- |
| opacity-checkerboard-square-dark |
- |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| avatar-opacity-disabled |
{opacity-disabled} |
0.3 |
No |
- |
- |
| color-area-border-color |
{gray-1000} |
dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) |
No |
- |
- |
| color-area-border-opacity |
0.1 |
0.1 |
No |
- |
- |
| color-slider-border-color |
{gray-1000} |
dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) |
No |
- |
- |
| color-slider-border-opacity |
0.1 |
0.1 |
No |
- |
- |
| color-loupe-drop-shadow-color |
{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 |
{drop-shadow-elevated-y} |
2px |
Yes |
- |
- |
| color-loupe-drop-shadow-blur |
{drop-shadow-elevated-blur} |
8px |
Yes |
- |
- |
| color-loupe-inner-border |
{transparent-black-200} |
rgba(0, 0, 0, 0.12) |
No |
- |
- |
| color-loupe-outer-border |
{white} |
rgb(255, 255, 255) |
No |
- |
- |
| card-selection-background-color |
- |
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 |
0.95 |
0.95 |
No |
- |
- |
| drop-zone-background-color |
{accent-visual-color} |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| drop-zone-background-color-opacity |
0.1 |
0.1 |
No |
- |
- |
| drop-zone-background-color-opacity-filled |
0.3 |
0.3 |
No |
- |
- |
| coach-mark-pagination-color |
{gray-600} |
light: rgb(113, 113, 113); dark: rgb(138, 138, 138); wireframe: rgb(72, 110, 194) |
No |
- |
- |
| color-handle-inner-border-color |
{black} |
rgb(0, 0, 0) |
No |
- |
- |
| color-handle-inner-border-opacity |
0.42 |
0.42 |
No |
- |
- |
| color-handle-outer-border-color |
{black} |
rgb(0, 0, 0) |
No |
- |
- |
| color-handle-outer-border-opacity |
{color-handle-inner-border-opacity} |
0.42 |
No |
- |
- |
| color-handle-drop-shadow-color |
{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 |
{transparent-black-300} |
rgba(0, 0, 0, 0.15) |
No |
- |
- |
| floating-action-button-shadow-color |
{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 |
{gray-900} |
light: rgb(19, 19, 19); dark: rgb(242, 242, 242); wireframe: rgb(10, 19, 39) |
No |
- |
- |
| table-row-hover-opacity |
0.07 |
0.07 |
No |
- |
- |
| table-selected-row-background-color |
{informative-background-color-default} |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| table-selected-row-background-opacity |
0.1 |
0.1 |
No |
- |
- |
| table-selected-row-background-color-non-emphasized |
{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 |
0.1 |
0.1 |
No |
- |
- |
| table-row-down-opacity |
0.1 |
0.1 |
No |
- |
- |
| table-selected-row-background-opacity-hover |
0.15 |
0.15 |
No |
- |
- |
| table-selected-row-background-opacity-non-emphasized-hover |
0.15 |
0.15 |
No |
- |
- |
| menu-item-background-color-default |
- |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| menu-item-background-color-hover |
- |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| menu-item-background-color-down |
- |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| menu-item-background-color-keyboard-focus |
- |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| menu-item-background-color-disabled |
- |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| popover-border-color |
- |
light: rgba(255, 255, 255, 0); dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| popover-border-opacity |
- |
light: 0; dark: 1.0; wireframe: 0 |
No |
- |
- |
| coach-indicator-color |
{blue-800} |
light: rgb(75, 117, 255); dark: rgb(64, 105, 253); wireframe: rgb(93, 127, 201) |
No |
- |
- |
| swatch-group-border-color |
{gray-1000} |
dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) |
No |
- |
- |
| avatar-border-color |
{gray-25} |
dark: rgb(17, 17, 17); light: rgb(255, 255, 255); wireframe: rgb(254, 254, 255) |
No |
- |
- |
| standard-panel-gripper-color-drag |
{gray-800} |
light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) |
No |
- |
- |
| standard-panel-gripper-color |
{gray-500} |
light: rgb(143, 143, 143); dark: rgb(109, 109, 109); wireframe: rgb(108, 142, 217) |
No |
- |
- |
| bar-panel-gripper-color |
{gray-200} |
light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) |
No |
- |
- |
| bar-panel-gripper-color-drag |
{gray-800} |
light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) |
No |
- |
- |
| select-box-selected-border-color |
{gray-800} |
light: rgb(41, 41, 41); dark: rgb(219, 219, 219); wireframe: rgb(25, 46, 93) |
No |
- |
- |
| tree-view-row-background-hover |
{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 |
{informative-background-color-default} |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
| tree-view-selected-row-background-default |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| tree-view-selected-row-background-hover |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| color-wheel-border-color |
{gray-1000} |
dark: rgb(255, 255, 255); light: rgb(0, 0, 0); wireframe: rgb(0, 0, 0) |
No |
- |
- |
| color-wheel-border-opacity |
0.1 |
0.1 |
No |
- |
- |
| action-bar-border-color |
- |
light: rgba(255, 255, 255, 0); dark: [object Object]; wireframe: rgba(255, 255, 255, 0) |
No |
- |
- |
| card-background-well-color |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| card-background-loading-color |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| stack-item-background-color-hover |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| stack-item-background-color-down |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| stack-item-background-color-key-focus |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| stack-item-selected-background-color-default |
{gray-100} |
light: rgb(233, 233, 233); dark: rgb(44, 44, 44); wireframe: rgb(228, 234, 249) |
No |
- |
- |
| stack-item-selected-background-color-hover |
{gray-200} |
light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) |
No |
- |
- |
| stack-item-selected-background-color-down |
{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 |
{gray-200} |
light: rgb(225, 225, 225); dark: rgb(50, 50, 50); wireframe: rgb(214, 224, 246) |
No |
- |
- |
| stack-item-selected-background-color-emphasized |
{accent-background-color-default} |
light: [object Object]; dark: [object Object]; wireframe: [object Object] |
No |
- |
- |
