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
Avatar
color-background-avatar
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-avatar-placeholder Avatar component placeholder background color. | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-avatar-wash Avatar dark overlay wash. | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-icon-avatar
CSS token name | Light mode | Dark mode |
|---|---|---|
color-icon-avatar-default Avatar default text color. | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
Badge
color-background-badge
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-badge-darkwash Box component infoBase background color | value: #000000 original: color-background-wash-dark Alias | value: #000000 original: color-background-wash-dark No dark theme |
color-background-badge-error Box component infoBase background color | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-badge-info-default Box component infoBase background color | value: #0074e8 original: color-background-info-base Alias | value: #75bfff original: color-background-info-base Alias |
color-background-badge-info-hover Box component infoBase background color | value: #005fcb original: color-background-info-strong Alias | value: #abdbff original: color-background-info-strong Alias |
color-background-badge-lightwash Box component infoBase background color | value: #ffffff original: color-background-wash-light Alias | value: #ffffff original: color-background-wash-light No dark theme |
color-background-badge-neutral Box component infoBase background color | value: #767676 original: color-background-tertiary-base Alias | value: #cdcdcd original: color-background-tertiary-base Alias |
color-background-badge-recommendation Box component infoBase background color | value: #812ae7 original: color-background-recommendation-base Alias | value: #b190ff original: color-background-recommendation-base Alias |
color-background-badge-success Box component infoBase background color | value: #008753 original: color-background-success-base Alias | value: #6bec8c original: color-background-success-base Alias |
color-background-badge-warning Box component infoBase background color | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
Box
color-background-box
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-box-brand Box component brand background color | value: #e60023 original: color-background-brand Alias | value: #e60023 original: color-background-brand No dark theme |
color-background-box-dark Box component dark background color | value: #111111 original: color-background-dark Alias | value: #111111 original: color-background-dark No dark theme |
color-background-box-darkwash Box component dark wash background color. | value: #dadada original: #dadada Custom | value: #666666 original: #666 Custom |
color-background-box-default Box component default background color | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
color-background-box-education Box component education background color | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-background-box-elevation-accent Box component elevation accent background color | value: #f1f1f1 original: color-background-elevation-accent Alias | value: #191919 original: color-background-elevation-accent Alias |
color-background-box-elevation-floating Box component elevation floating background color | value: #000000 original: color-background-elevation-floating Alias | value: #2b2b2b original: color-background-elevation-floating Alias |
color-background-box-elevation-raised Box component elevation raised background color | value: #000000 original: color-background-elevation-raised Alias | value: #4a4a4a original: color-background-elevation-raised Alias |
color-background-box-error-base Box component error base background color | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-box-error-weak Box component error weak background color | value: #ffe0e0 original: color-background-error-weak Alias | value: #660000 original: color-background-error-weak Alias |
color-background-box-info-base Box component info base background color | value: #0074e8 original: color-background-info-base Alias | value: #75bfff original: color-background-info-base Alias |
color-background-box-info-weak Box component info weak background color | value: #d7edff original: color-background-info-weak Alias | value: #003c96 original: color-background-info-weak Alias |
color-background-box-inverse Box component inverse background color | value: #111111 original: color-background-inverse-base Alias | value: #f9f9f9 original: color-background-inverse-base Alias |
color-background-box-light Box component light background color | value: #ffffff original: color-background-light Alias | value: #ffffff original: color-background-light No dark theme |
color-background-box-lightwash Box component light wash background color. | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-box-primary Box component primary background color | value: #e60023 original: color-background-primary-base Alias | value: #e60023 original: color-background-primary-base No dark theme |
color-background-box-recommendation-base Box component recommendation base background color | value: #812ae7 original: color-background-recommendation-base Alias | value: #b190ff original: color-background-recommendation-base Alias |
color-background-box-recommendation-weak Box component recommendation weak background color | value: #e9e4ff original: color-background-recommendation-weak Alias | value: #550aa9 original: color-background-recommendation-weak Alias |
color-background-box-secondary Box component secondary background color | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-box-selected Box component selected background color | value: #111111 original: color-background-selected-base Alias | value: #e9e9e9 original: color-background-selected-base Alias |
color-background-box-shopping Box component shopping background color | value: #0074e8 original: color-background-shopping Alias | value: #75bfff original: color-background-shopping Alias |
color-background-box-success-base Box component success base background color | value: #008753 original: color-background-success-base Alias | value: #6bec8c original: color-background-success-base Alias |
color-background-box-success-weak Box component success weak background color | value: #c3f9c2 original: color-background-success-weak Alias | value: #00422c original: color-background-success-weak Alias |
color-background-box-tertiary Box component tertiary background color | value: #767676 original: color-background-tertiary-base Alias | value: #cdcdcd original: color-background-tertiary-base Alias |
color-background-box-transparent Box component transparent background color. | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-box-transparentdarkgray Box component light transparent dark gray background color. | value: #333333 original: rgba(51, 51, 51, 0.8) Custom | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom |
color-background-box-warning-base Box component warning base background color | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
color-background-box-warning-weak Box component warning weak background color | value: #ffe4c1 original: color-background-warning-weak Alias | value: #7c2d00 original: color-background-warning-weak Alias |
Button
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-button-disabled-default Disabled button background color. | value: #e9e9e9 original: color-background-secondary-base Alias | value: #4a4a4a original: color-gray-roboflow-600 Base |
color-background-button-gray-active Button gray background color for images with background on active. | value: #828282 original: #828282 Custom | value: #9b9b9b original: #9b9b9b Custom |
color-background-button-gray-default Button gray background color for images with background | value: #767676 original: color-background-neutral Alias | value: #cdcdcd original: color-background-neutral Alias |
color-background-button-gray-hover Button gray background color for images with background on hover. | value: #878787 original: #878787 Custom | value: #919191 original: #919191 Custom |
color-background-button-primary-active Primary button background color on active | value: #a3081a original: #a3081a Custom | value: #b8001b original: #b8001b Custom |
color-background-button-primary-default Primary button background color | value: #e60023 original: color-background-primary-base Alias | value: #e60023 original: color-background-primary-base No dark theme |
color-background-button-primary-hover Primary button background color on hover | value: #b60000 original: color-background-primary-strong Alias | value: #b60000 original: color-background-primary-strong No dark theme |
color-background-button-secondary-active Secondary button background color on active. | value: #dadada original: #dadada Custom | value: #666666 original: #666 Custom |
color-background-button-secondary-default Secondary button background color. | value: #e9e9e9 original: color-background-secondary-base Alias | value: #4a4a4a original: color-gray-roboflow-600 Base |
color-background-button-secondary-hover Secondary button background color on hover. | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-button-selected-default Disabled button background color. | value: #111111 original: color-background-selected-base Alias | value: #e9e9e9 original: color-background-selected-base Alias |
color-background-button-semitransparentdark-active Button semi-transparent dark background color for images with background on active. | value: #1f1f1f original: #1f1f1f Custom | value: #e0e0e0 original: #e0e0e0 Custom |
color-background-button-semitransparentdark-default Button semi-transparent dark background color for images with background | value: #333333 original: rgba(51, 51, 51, 0.8) Custom | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom |
color-background-button-semitransparentdark-hover Button semi-transparent dark background color for images with background on hover. | value: #121212 original: #121212 Custom | value: #f0f0f0 original: #f0f0f0 Custom |
color-background-button-semitransparentwhite-active Button semi-transparent white background color for images with background on active. | value: #e0e0e0 original: #e0e0e0 Custom | value: #1f1f1f original: #1f1f1f Custom |
color-background-button-semitransparentwhite-default Button semi-transparent white background color for images with background | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom | value: #333333 original: rgba(51, 51, 51, 0.8) Custom |
color-background-button-semitransparentwhite-hover Button semi-transparent white background color for images with background on hover. | value: #f0f0f0 original: #f0f0f0 Custom | value: #121212 original: #121212 Custom |
color-background-button-shopping-active Button background color for shopping on active. | value: #4a85c9 original: #4a85c9 Custom | value: #4a85c9 original: #4a85c9 Custom |
color-background-button-shopping-default Button background color for shopping | value: #0074e8 original: color-background-shopping Alias | value: #75bfff original: color-background-shopping Alias |
color-background-button-shopping-hover Button background color for shopping on hover. | value: #4a8ad4 original: #4a8ad4 Custom | value: #4a8ad4 original: #4a8ad4 Custom |
color-background-button-tertiary-active Tertiary button background color on active. | value: #000000 original: rgba(0, 0, 0, 0.1) Custom | value: #fafafa original: rgba(250, 250, 250, 0.6) Custom |
color-background-button-tertiary-default Tertiary button background color. | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-button-tertiary-hover Tertiary button background color on hover. | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-button-white-active Button white background color for images with background on active. | value: #e0e0e0 original: #e0e0e0 Custom | value: #1f1f1f original: #1f1f1f Custom |
color-background-button-white-default Button white background color for images with background | value: #ffffff original: color-white-mochimalist-0 Base | value: #030303 original: #030303 Custom |
color-background-button-white-hover Button white background color for images with background on hover. | value: #f0f0f0 original: #f0f0f0 Custom | value: #121212 original: #121212 Custom |
Combobox
color-background-combobox
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-combobox-item-default ComboBox item background color | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-combobox-item-hover ComboBox item on hover background color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
Datepicker
color-background-datepicker
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-datepicker-button-default DatePicker date selectors background color. | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-background-datepicker-button-hover DatePicker date selectors background color on hover. | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-datepicker-button-selected DatePicker date selectors selected background color. | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-datepicker-container DatePicker component background color. | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
Formfield
color-background-formfield
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-formfield-disabled Formfield disabled background color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-formfield-primary Formfield default background color | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-formfield-selected Formfield selected background color | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-border-formfield
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-formfield-disabled Formfield disabled border color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-border-formfield-error-default Error formfield border color. | value: #cc0000 original: color-border-error Alias | value: #f47171 original: color-border-error Alias |
color-border-formfield-error-hover Error formfield border color on hover. | value: #ad081b original: #ad081b Custom | value: #cf001f original: #cf001f Custom |
color-text-formfield
CSS token name | Light mode | Dark mode |
|---|---|---|
color-text-formfield-default Formfield default text color. | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
color-text-formfield-disabled Formfield disabled text color. | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
color-text-formfield-placeholder Formfield placeholder text color. | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
Mask
color-background-mask
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-mask-wash Mask component wash. | value: #000000 original: rgba(0, 0, 0, 0.04) Custom | value: #000000 original: rgba(0, 0, 0, 0.04) No dark theme |
Overlay
Popover
color-background-popover
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-popover-education Popover component secondary background color. | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-background-popover-primary Popover component primary background color. | value: #ffffff original: color-background-default Alias | value: #2b2b2b original: color-background-elevation-floating Alias |
color-background-popover-secondary Popover component secondary background color. | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-border-popover
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-popover-education Popover component secondary border color. | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-border-popover-primary Popover component primary border color. | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-border-popover-secondary Popover component secondary border color. | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
Pulsar
color-border-pulsar
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-pulsar-default Pulsar component default border color. | value: #0074e8 original: #0074e8 Custom | value: #0074e8 original: #0074e8 No dark theme |
color-border-pulsar-hover Pulsar component border color on hover. | value: #dce9fa original: #dce9fa Custom | value: #dce9fa original: #dce9fa No dark theme |
Segmentedcontrol
color-background-segmentedcontrol
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-segmentedcontrol-container SegmentedControl container background color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-segmentedcontrol-tab-selected SegmentedControl selected tab background color | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
Switch
color-background-switch
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-switch-default-selected Switch enabled selected background color | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-switch-default-unselected Switch enabled unselected background color | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-switch-disabled-selected Switch disabled selected background color | value: #767676 original: color-gray-roboflow-500 Base | value: #ababab original: #ababab Custom |
color-background-switch-disabled-unselected Switch disabled unselected background color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
Tabs
color-background-tabs
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-tabs-default-active Tabs component default background color on press. | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-tabs-default-base Tabs component default background color. | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
color-background-tabs-default-hover Tabs component default background color on hover. | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tabs-transparent-active Tabs component transparent background color on press. | value: #000000 original: rgba(0, 0, 0, 0.1) Custom | value: #000000 original: rgba(0, 0, 0, 0.1) No dark theme |
color-background-tabs-transparent-base Tabs component transparent background color. | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-tabs-transparent-hover Tabs component transparent background color on hover. | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #000000 original: rgba(0, 0, 0, 0.06) No dark theme |
Tag
color-background-tag
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-tag-error-active Error tag's close button background color on active. | value: #a3081a original: #a3081a Custom | value: #b8001b original: #b8001b Custom |
color-background-tag-error-default Error tag background color. | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-tag-error-hover Error tag's close button background color on hover. | value: #ad081b original: #ad081b Custom | value: #cf001f original: #cf001f Custom |
color-background-tag-primary-active Primary tag's close button background color on active | value: #dadada original: #dadada Custom | value: #666666 original: #666 Custom |
color-background-tag-primary-default Primary tag background color | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tag-primary-hover Primary tag's close button background color on hover | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-tag-warning-active Warning tag's close button background color on active. | value: #943a00 original: color-yellow-caramellow-700 Base | value: #d86800 original: color-yellow-caramellow-450 Base |
color-background-tag-warning-default Warning tag background color. | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
color-background-tag-warning-hover Warning tag's close button background color on hover. | value: #aa4900 original: color-yellow-caramellow-600 Base | value: #e18d00 original: color-yellow-caramellow-400 Base |
color-border-tag
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-tag-disabled Tag component disabled border color. | value: #767676 original: color-gray-roboflow-500 Base | value: #ababab original: #ababab Custom |
Table
color-background-table
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-table-footer Table footer background color | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-table-row-hover Table row selected color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-table-row-selected Table row selected color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-border-table
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-table-row-selected Tag component disabled border color. | value: #111111 original: color-black-cosmicore-900 Base | value: #ffffff original: color-white-mochimalist-0 Base |
Tableofcontents
color-background-tableofcontents
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-tableofcontents-item-default Table of contents item default background color | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-tableofcontents-item-hover Table of contents item background color on hover | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
Tagdata
color-background-tagdata
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-tagdata-disabled TagData disabled background color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-tagdata-primary TagData primary background color | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tagdata-secondary TagData secondary background color | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
Tiledata
color-background-tiledata
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-tiledata-01 TileData background color 01 | value: #003c961A original: {color-data-visualization-01}1A Alias | value: #005fcb1A original: {color-data-visualization-01}1A Alias |
color-background-tiledata-02 TileData background color 02 | value: #11a69c1A original: {color-data-visualization-02}1A Alias | value: #75e4d51A original: {color-data-visualization-02}1A Alias |
color-background-tiledata-03 TileData background color 03 | value: #924af71A original: {color-data-visualization-03}1A Alias | value: #b190ff1A original: {color-data-visualization-03}1A Alias |
color-background-tiledata-04 TileData background color 04 | value: #d177111A original: {color-data-visualization-04}1A Alias | value: #fda6001A original: {color-data-visualization-04}1A Alias |
color-background-tiledata-05 TileData background color 05 | value: #0081fe1A original: {color-data-visualization-05}1A Alias | value: #75bfff1A original: {color-data-visualization-05}1A Alias |
color-background-tiledata-06 TileData background color 06 | value: #ff53831A original: {color-data-visualization-06}1A Alias | value: #de2c621A original: {color-data-visualization-06}1A Alias |
color-background-tiledata-07 TileData background color 07 | value: #00ab551A original: {color-data-visualization-07}1A Alias | value: #a4f9ac1A original: {color-data-visualization-07}1A Alias |
color-background-tiledata-08 TileData background color 08 | value: #4003871A original: {color-data-visualization-08}1A Alias | value: #812ae71A original: {color-data-visualization-08}1A Alias |
color-background-tiledata-09 TileData background color 09 | value: #f2681f1A original: {color-data-visualization-09}1A Alias | value: #ff5b451A original: {color-data-visualization-09}1A Alias |
color-background-tiledata-10 TileData background color 10 | value: #0050621A original: {color-data-visualization-10}1A Alias | value: #007a721A original: {color-data-visualization-10}1A Alias |
color-background-tiledata-11 TileData background color 11 | value: #de2c621A original: {color-data-visualization-11}1A Alias | value: #f765931A original: {color-data-visualization-11}1A Alias |
color-background-tiledata-12 TileData background color 12 | value: #660e001A original: {color-data-visualization-12}1A Alias | value: #ffc58f1A original: {color-data-visualization-12}1A Alias |
color-background-tiledata-disabled TileData disabled background color | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-tiledata-hover TileData default background color on hover | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
Video
color-background-video
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-video-container-primary Video background primary dark color | value: #111111 original: color-background-inverse-base Alias | value: #f9f9f9 original: color-background-inverse-base Alias |
color-background-video-container-secondary Video background secondary transparent color | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |