Component tokens
Component tokens are under development. We do not recommend their direct consumption as they will be subject to change and documented as minor/patch releases
Box
color-background-box
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-background-box-default Box component default background color | #ffffff | #111111 | |
$color-background-box-info-base Box component info base background color | #0074e8 | #75bfff | |
$color-background-box-info-weak Box component info weak background color | #d7edff | #003c96 | |
$color-background-box-error-base Box component error base background color | #cc0000 | #f47171 | |
$color-background-box-error-weak Box component error weak background color | #ffe0e0 | #660000 | |
$color-background-box-warning-base Box component warning base background color | #bd5b00 | #fdc900 | |
$color-background-box-warning-weak Box component warning weak background color | #ffe4c1 | #7c2d00 | |
$color-background-box-success-base Box component success base background color | #008753 | #6bec8c | |
$color-background-box-success-weak Box component success weak background color | #c3f9c2 | #00422c | |
$color-background-box-recommendation-base Box component recommendation base background color | #812ae7 | #b190ff | |
$color-background-box-recommendation-weak Box component recommendation weak background color | #e9e4ff | #550aa9 | |
$color-background-box-shopping Box component shopping background color | #0074e8 | #75bfff | |
$color-background-box-primary Box component primary background color | #e60023 | -- | |
$color-background-box-secondary Box component secondary background color | #e9e9e9 | #767676 | |
$color-background-box-tertiary Box component tertiary background color | #767676 | #cdcdcd | |
$color-background-box-selected Box component selected background color | #111111 | #e9e9e9 | |
$color-background-box-inverse Box component inverse background color | #111111 | #f9f9f9 | |
$color-background-box-brand Box component brand background color | #e60023 | -- | |
$color-background-box-education Box component education background color | #0074e8 | #75bfff | |
$color-background-box-elevation-accent Box component elevation accent background color | #f1f1f1 | #191919 | |
$color-background-box-elevation-floating Box component elevation floating background color | #000000 | #2b2b2b | |
$color-background-box-elevation-raised Box component elevation raised background color | #000000 | #4a4a4a | |
$color-background-box-lightwash Box component light wash background color. | #e2e2e2 | #535353 | |
$color-background-box-darkwash Box component dark wash background color. | #dadada | #666 | |
$color-background-box-transparentdarkgray Box component light transparent dark gray background color. | #333333 | rgba(255, 255, 255, 0.8) | |
$color-background-box-dark Box component dark background color | #111111 | -- | |
$color-background-box-light Box component light background color | #ffffff | -- | |
$color-background-box-transparent Box component transparent background color. | #000000 | -- |
Tag
color-background-tag
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-background-tag-primary-default Primary tag background color | #e9e9e9 | #767676 | |
$color-background-tag-primary-hover Primary tag's close button background color on hover | #e2e2e2 | #535353 | |
$color-background-tag-primary-active Primary tag's close button background color on active | #dadada | #666 | |
$color-background-tag-error-default Error tag background color. | #cc0000 | #f47171 | |
$color-background-tag-error-hover Error tag's close button background color on hover. | #ad081b | #cf001f | |
$color-background-tag-error-active Error tag's close button background color on active. | #a3081a | #b8001b | |
$color-background-tag-warning-default Warning tag background color. | #bd5b00 | #fdc900 | |
$color-background-tag-warning-hover Warning tag's close button background color on hover. | #aa4900 | #e18d00 | |
$color-background-tag-warning-active Warning tag's close button background color on active. | #943a00 | #d86800 |
Button
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-background-button-primary-default Primary button background color | #e60023 | -- | |
$color-background-button-primary-hover Primary button background color on hover | #b60000 | -- | |
$color-background-button-primary-active Primary button background color on active | #a3081a | #b8001b | |
$color-background-button-secondary-default Secondary button background color. | #e9e9e9 | #4a4a4a | |
$color-background-button-secondary-hover Secondary button background color on hover. | #e2e2e2 | #535353 | |
$color-background-button-secondary-active Secondary button background color on active. | #dadada | #666 | |
$color-background-button-tertiary-default Tertiary button background color. | #000000 | -- | |
$color-background-button-tertiary-hover Tertiary button background color on hover. | #000000 | rgba(250, 250, 250, 0.5) | |
$color-background-button-tertiary-active Tertiary button background color on active. | #000000 | rgba(250, 250, 250, 0.6) | |
$color-background-button-shopping-default Button background color for shopping | #0074e8 | #75bfff | |
$color-background-button-shopping-hover Button background color for shopping on hover. | #4a8ad4 | #4a8ad4 | |
$color-background-button-shopping-active Button background color for shopping on active. | #4a85c9 | #4a85c9 | |
$color-background-button-white-default Button white background color for images with background | #ffffff | #030303 | |
$color-background-button-white-hover Button white background color for images with background on hover. | #f0f0f0 | #121212 | |
$color-background-button-white-active Button white background color for images with background on active. | #e0e0e0 | #1f1f1f | |
$color-background-button-gray-default Button gray background color for images with background | #767676 | #cdcdcd | |
$color-background-button-gray-hover Button gray background color for images with background on hover. | #878787 | #919191 | |
$color-background-button-gray-active Button gray background color for images with background on active. | #828282 | #9b9b9b | |
$color-background-button-semitransparentwhite-default Button semi-transparent white background color for images with background | #ffffff | rgba(51, 51, 51, 0.8) | |
$color-background-button-semitransparentwhite-hover Button semi-transparent white background color for images with background on hover. | #f0f0f0 | #121212 | |
$color-background-button-semitransparentwhite-active Button semi-transparent white background color for images with background on active. | #e0e0e0 | #1f1f1f | |
$color-background-button-semitransparentdark-default Button semi-transparent dark background color for images with background | #333333 | rgba(255, 255, 255, 0.8) | |
$color-background-button-semitransparentdark-hover Button semi-transparent dark background color for images with background on hover. | #121212 | #f0f0f0 | |
$color-background-button-semitransparentdark-active Button semi-transparent dark background color for images with background on active. | #1f1f1f | #e0e0e0 | |
$color-background-button-disabled-default Disabled button background color. | #e9e9e9 | #4a4a4a | |
$color-background-button-selected-default Disabled button background color. | #111111 | #e9e9e9 |
Overlay
color-background-overlay
CSS token name | Value | Dark mode value | Example |
|---|---|---|---|
$color-background-overlay Overlay component background color. | #ffffff | #2b2b2b |