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 | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-avatar-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 | 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-default | value: #000000 original: color-background-wash-dark Alias | value: #000000 original: color-background-wash-dark Alias |
color-background-badge-darkwash-hover | value: #000000 original: color-background-wash-dark Alias | value: #000000 original: color-background-wash-dark Alias |
color-background-badge-error-default | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-badge-error-hover | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-badge-info-default | value: #0074e8 original: color-background-info-base Alias | value: #75bfff original: color-background-info-base Alias |
color-background-badge-info-hover | value: #005fcb original: color-background-info-strong Alias | value: #abdbff original: color-background-info-strong Alias |
color-background-badge-lightwash-default | value: #ffffff original: color-background-wash-light Alias | value: #ffffff original: color-background-wash-light Alias |
color-background-badge-lightwash-hover | value: #ffffff original: color-background-wash-light Alias | value: #ffffff original: color-background-wash-light Alias |
color-background-badge-neutral-default | value: #767676 original: color-background-tertiary-base Alias | value: #cdcdcd original: color-background-tertiary-base Alias |
color-background-badge-neutral-hover | value: #767676 original: color-background-tertiary-base Alias | value: #cdcdcd original: color-background-tertiary-base Alias |
color-background-badge-recommendation-default | value: #812ae7 original: color-background-recommendation-base Alias | value: #b190ff original: color-background-recommendation-base Alias |
color-background-badge-recommendation-hover | value: #812ae7 original: color-background-recommendation-base Alias | value: #b190ff original: color-background-recommendation-base Alias |
color-background-badge-success-default | value: #008753 original: color-background-success-base Alias | value: #6bec8c original: color-background-success-base Alias |
color-background-badge-success-hover | value: #008753 original: color-background-success-base Alias | value: #6bec8c original: color-background-success-base Alias |
color-background-badge-warning-default | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
color-background-badge-warning-hover | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
color-border-badge
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-badge-dark | value: #111111 original: color-black-cosmicore-900 Base | value: #111111 original: color-black-cosmicore-900 Base |
color-border-badge-default | value: #ffffff original: color-white-mochimalist-0 Base | value: #111111 original: color-black-cosmicore-900 Base |
color-border-badge-light | value: #ffffff original: color-white-mochimalist-0 Base | value: #ffffff original: color-white-mochimalist-0 Base |
Box
color-background-box
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-box-brand | value: #e60023 original: color-background-brand Alias | value: #e60023 original: color-background-brand No dark theme |
color-background-box-dark | value: #111111 original: color-background-dark Alias | value: #111111 original: color-background-dark No dark theme |
color-background-box-darkwash | value: #dadada original: #dadada Custom | value: #666666 original: #666 Custom |
color-background-box-default | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
color-background-box-education | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-background-box-elevation-accent | value: #f1f1f1 original: color-background-elevation-accent Alias | value: #191919 original: color-background-elevation-accent Alias |
color-background-box-elevation-floating | value: #000000 original: color-background-elevation-floating Alias | value: #2b2b2b original: color-background-elevation-floating Alias |
color-background-box-elevation-raised | value: #000000 original: color-background-elevation-raised Alias | value: #4a4a4a original: color-background-elevation-raised Alias |
color-background-box-error-base | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-box-error-weak | value: #ffe0e0 original: color-background-error-weak Alias | value: #660000 original: color-background-error-weak Alias |
color-background-box-info-base | value: #0074e8 original: color-background-info-base Alias | value: #75bfff original: color-background-info-base Alias |
color-background-box-info-weak | value: #d7edff original: color-background-info-weak Alias | value: #003c96 original: color-background-info-weak Alias |
color-background-box-inverse | value: #111111 original: color-background-inverse-base Alias | value: #f9f9f9 original: color-background-inverse-base Alias |
color-background-box-light | value: #ffffff original: color-background-light Alias | value: #ffffff original: color-background-light No dark theme |
color-background-box-lightwash | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-box-primary | value: #e60023 original: color-background-primary-base Alias | value: #e60023 original: color-background-primary-base No dark theme |
color-background-box-recommendation-base | value: #812ae7 original: color-background-recommendation-base Alias | value: #b190ff original: color-background-recommendation-base Alias |
color-background-box-recommendation-weak | value: #e9e4ff original: color-background-recommendation-weak Alias | value: #550aa9 original: color-background-recommendation-weak Alias |
color-background-box-secondary | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-box-selected | value: #111111 original: color-background-selected-base Alias | value: #e9e9e9 original: color-background-selected-base Alias |
color-background-box-shopping | value: #0074e8 original: color-background-shopping Alias | value: #75bfff original: color-background-shopping Alias |
color-background-box-success-base | value: #008753 original: color-background-success-base Alias | value: #6bec8c original: color-background-success-base Alias |
color-background-box-success-weak | value: #c3f9c2 original: color-background-success-weak Alias | value: #00422c original: color-background-success-weak Alias |
color-background-box-tertiary | value: #767676 original: color-background-tertiary-base Alias | value: #cdcdcd original: color-background-tertiary-base Alias |
color-background-box-transparent | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-box-transparentdarkgray | 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 | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
color-background-box-warning-weak | 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-dark-active | value: #000000 original: #000000 Custom | value: #000000 original: #000000 Custom |
color-background-button-dark-default | value: #111111 original: color-background-dark Alias | value: #111111 original: color-background-dark Alias |
color-background-button-dark-hover | value: #000000 original: #000000 Custom | value: #000000 original: #000000 Custom |
color-background-button-disabled-default | value: #e9e9e9 original: color-background-secondary-base Alias | value: #2b2b2b original: color-gray-roboflow-700 Base |
color-background-button-elevation-active | value: #000000 original: rgba(0, 0, 0, 0.1) Custom | value: #fafafa original: rgba(250, 250, 250, 0.6) Custom |
color-background-button-elevation-default | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-button-elevation-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-elevation-hover | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-button-gray-active | value: #828282 original: #828282 Custom | value: #9b9b9b original: #9b9b9b Custom |
color-background-button-gray-default | value: #767676 original: color-background-neutral Alias | value: #cdcdcd original: color-background-neutral Alias |
color-background-button-gray-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-gray-hover | value: #878787 original: #878787 Custom | value: #919191 original: #919191 Custom |
color-background-button-light-active | value: #f8f7f2 original: #F8F7F2 Custom | value: #f8f7f2 original: #F8F7F2 Custom |
color-background-button-light-default | value: #ffffff original: color-background-light Alias | value: #ffffff original: color-background-light Alias |
color-background-button-light-hover | value: #f8f7f2 original: #F8F7F2 Custom | value: #f8f7f2 original: #F8F7F2 Custom |
color-background-button-primary-active | value: #a3081a original: #a3081a Custom | value: #b8001b original: #b8001b Custom |
color-background-button-primary-default | value: #e60023 original: color-background-primary-base Alias | value: #e60023 original: color-background-primary-base No dark theme |
color-background-button-primary-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-primary-hover | value: #b60000 original: color-background-primary-strong Alias | value: #b60000 original: color-background-primary-strong No dark theme |
color-background-button-secondary-active | value: #dadada original: #dadada Custom | value: #666666 original: #666 Custom |
color-background-button-secondary-default | value: #e9e9e9 original: color-background-secondary-base Alias | value: #4a4a4a original: color-gray-roboflow-600 Base |
color-background-button-secondary-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-secondary-hover | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-button-selected-default | value: #111111 original: color-background-selected-base Alias | value: #e9e9e9 original: color-background-selected-base Alias |
color-background-button-selected-disabled | value: #111111 original: color-background-selected-base Alias | value: original: |
color-background-button-semitransparentdark-active | value: #1f1f1f original: #1f1f1f Custom | value: #e0e0e0 original: #e0e0e0 Custom |
color-background-button-semitransparentdark-default | value: #333333 original: rgba(51, 51, 51, 0.8) Custom | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom |
color-background-button-semitransparentdark-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-semitransparentdark-hover | value: #121212 original: #121212 Custom | value: #f0f0f0 original: #f0f0f0 Custom |
color-background-button-semitransparentdefault-active | value: #e0e0e0 original: #e0e0e0 Custom | value: #1f1f1f original: #1f1f1f Custom |
color-background-button-semitransparentdefault-default | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom | value: #333333 original: rgba(51, 51, 51, 0.8) Custom |
color-background-button-semitransparentdefault-hover | value: #f0f0f0 original: #f0f0f0 Custom | value: #121212 original: #121212 Custom |
color-background-button-semitransparentwhite-active | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom | value: #1f1f1f original: #1f1f1f Custom |
color-background-button-semitransparentwhite-default | value: #ffffff original: rgba(255, 255, 255, 0.8) Custom | value: #333333 original: rgba(51, 51, 51, 0.8) Custom |
color-background-button-semitransparentwhite-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-semitransparentwhite-hover | value: #f0f0f0 original: #f0f0f0 Custom | value: #121212 original: #121212 Custom |
color-background-button-shopping-active | value: #4a85c9 original: #4a85c9 Custom | value: #4a85c9 original: #4a85c9 Custom |
color-background-button-shopping-default | value: #0074e8 original: color-background-shopping Alias | value: #75bfff original: color-background-shopping Alias |
color-background-button-shopping-hover | value: #4a8ad4 original: #4a8ad4 Custom | value: #4a8ad4 original: #4a8ad4 Custom |
color-background-button-tertiary-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 | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-button-tertiary-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-tertiary-hover | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-button-transparentdarkbackground-active | value: #000000 original: rgba(0, 0, 0, 0.1) Custom | value: #fafafa original: rgba(250, 250, 250, 0.6) Custom |
color-background-button-transparentdarkbackground-default | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent Base |
color-background-button-transparentdarkbackground-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-transparentdarkbackground-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 | value: #e0e0e0 original: #e0e0e0 Custom | value: #1f1f1f original: #1f1f1f Custom |
color-background-button-white-default | value: #ffffff original: color-white-mochimalist-0 Base | value: #030303 original: #030303 Custom |
color-background-button-white-disabled | value: #e9e9e9 original: color-background-secondary-base Alias | value: original: |
color-background-button-white-hover | value: #f0f0f0 original: #f0f0f0 Custom | value: #121212 original: #121212 Custom |
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-button-hover | value: #cdcdcd original: color-border-container Alias | value: original: |
color-border-button-pressed | value: #cdcdcd original: color-border-container Alias | value: original: |
Combobox
color-background-combobox
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-combobox-item-default | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-combobox-item-hover | 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-selected-active | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-datepicker-button-selected-default | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-datepicker-button-selected-hover | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-datepicker-button-unselected-active | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-datepicker-button-unselected-default | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-background-datepicker-button-unselected-hover | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-datepicker-container | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-background-datepicker-range-active | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-datepicker-range-default | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
color-background-datepicker-range-hover | value: #000000 original: rgba(0, 0, 0, 0.06) Custom | value: #fafafa original: rgba(250, 250, 250, 0.5) Custom |
Formfield
color-background-formfield
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-formfield-disabled | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-formfield-primary | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-formfield-selected | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-border-formfield
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-formfield-disabled | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-border-formfield-error-default | value: #cc0000 original: color-border-error Alias | value: #f47171 original: color-border-error Alias |
color-border-formfield-error-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 | Gestalt value: #111111 original: #111 Custom | Gestalt value: #efefef original: #efefef Custom |
color-text-formfield-disabled | Gestalt value: #767676 original: color-gray-roboflow-500 Base | Gestalt value: #ababab original: #ababab Custom |
color-text-formfield-placeholder | 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 | 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 | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-background-popover-primary | value: #ffffff original: color-background-default Alias | value: #2b2b2b original: color-background-elevation-floating Alias |
color-background-popover-secondary | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-border-popover
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-popover-education | value: #0074e8 original: color-background-education Alias | value: #75bfff original: color-background-education Alias |
color-border-popover-primary | value: #ffffff original: #fff Custom | value: #212121 original: #212121 Custom |
color-border-popover-secondary | 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 | value: #0074e8 original: #0074e8 Custom | value: #0074e8 original: #0074e8 No dark theme |
color-border-pulsar-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 | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-segmentedcontrol-tab-selected | 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 | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-switch-default-unselected | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-switch-disabled-selected | value: #767676 original: color-gray-roboflow-500 Base | value: #ababab original: #ababab Custom |
color-background-switch-disabled-unselected | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-switch-hover-selected | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-switch-hover-unselected | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-switch-pressed-selected | value: #111111 original: #111 Custom | value: #efefef original: #efefef Custom |
color-background-switch-pressed-unselected | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-border-switch
CSS token name | Light mode | Dark mode |
|---|---|---|
color-border-switch-default-selected | value: #111111 original: color-background-selected-base Alias | value: original: |
color-border-switch-default-unselected | value: #767676 original: color-border-default Alias | value: original: |
color-border-switch-disabled-selected | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
color-border-switch-disabled-unselected | value: #cdcdcd original: color-border-container Alias | value: #767676 original: color-border-container Alias |
color-border-switch-focus-inner | value: #767676 original: color-border-default Alias | value: #cdcdcd original: color-border-default Alias |
color-border-switch-focus-outer | value: #767676 original: color-border-default Alias | value: original: |
color-border-switch-hover-unselected | value: #767676 original: color-border-default Alias | value: original: |
color-border-switch-pressed-unselected | value: #767676 original: color-border-default Alias | value: original: |
Tabs
color-background-tabs
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-tabs-default-active | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-tabs-default-base | value: #ffffff original: color-background-default Alias | value: #111111 original: color-background-default Alias |
color-background-tabs-default-hover | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tabs-transparent-active | 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 | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-tabs-transparent-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 | value: #a3081a original: #a3081a Custom | value: #b8001b original: #b8001b Custom |
color-background-tag-error-default | value: #cc0000 original: color-background-error-base Alias | value: #f47171 original: color-background-error-base Alias |
color-background-tag-error-hover | value: #ad081b original: #ad081b Custom | value: #cf001f original: #cf001f Custom |
color-background-tag-primary-active | value: #dadada original: #dadada Custom | value: #666666 original: #666 Custom |
color-background-tag-primary-default | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tag-primary-hover | value: #e2e2e2 original: #e2e2e2 Custom | value: #535353 original: #535353 Custom |
color-background-tag-warning-active | value: #943a00 original: color-yellow-caramellow-700 Base | value: #d86800 original: color-yellow-caramellow-450 Base |
color-background-tag-warning-default | value: #bd5b00 original: color-background-warning-base Alias | value: #fdc900 original: color-background-warning-base Alias |
color-background-tag-warning-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 | 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 | value: #ffffff original: #fff Custom | value: #030303 original: #030303 Custom |
color-background-table-row-hover | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-table-row-selected | 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 | 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 | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |
color-background-tableofcontents-item-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 | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-tagdata-primary | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tagdata-secondary | 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 | value: #003c961A original: {color-data-visualization-01}1A Alias | value: #005fcb1A original: {color-data-visualization-01}1A Alias |
color-background-tiledata-02 | value: #11a69c1A original: {color-data-visualization-02}1A Alias | value: #75e4d51A original: {color-data-visualization-02}1A Alias |
color-background-tiledata-03 | value: #924af71A original: {color-data-visualization-03}1A Alias | value: #b190ff1A original: {color-data-visualization-03}1A Alias |
color-background-tiledata-04 | value: #d177111A original: {color-data-visualization-04}1A Alias | value: #fda6001A original: {color-data-visualization-04}1A Alias |
color-background-tiledata-05 | value: #0081fe1A original: {color-data-visualization-05}1A Alias | value: #75bfff1A original: {color-data-visualization-05}1A Alias |
color-background-tiledata-06 | value: #ff53831A original: {color-data-visualization-06}1A Alias | value: #de2c621A original: {color-data-visualization-06}1A Alias |
color-background-tiledata-07 | value: #00ab551A original: {color-data-visualization-07}1A Alias | value: #a4f9ac1A original: {color-data-visualization-07}1A Alias |
color-background-tiledata-08 | value: #4003871A original: {color-data-visualization-08}1A Alias | value: #812ae71A original: {color-data-visualization-08}1A Alias |
color-background-tiledata-09 | value: #f2681f1A original: {color-data-visualization-09}1A Alias | value: #ff5b451A original: {color-data-visualization-09}1A Alias |
color-background-tiledata-10 | value: #0050621A original: {color-data-visualization-10}1A Alias | value: #007a721A original: {color-data-visualization-10}1A Alias |
color-background-tiledata-11 | value: #de2c621A original: {color-data-visualization-11}1A Alias | value: #f765931A original: {color-data-visualization-11}1A Alias |
color-background-tiledata-12 | value: #660e001A original: {color-data-visualization-12}1A Alias | value: #ffc58f1A original: {color-data-visualization-12}1A Alias |
color-background-tiledata-disabled | value: #efefef original: #efefef Custom | value: #404040 original: #404040 Custom |
color-background-tiledata-hover | value: #e9e9e9 original: color-background-secondary-base Alias | value: #767676 original: color-background-secondary-base Alias |
color-background-tiledata-neutral | value: #7676761A original: {color-background-chartgraph-neutral}1A Alias | value: #cdcdcd1A original: {color-background-chartgraph-neutral}1A Alias |
Video
color-background-video
CSS token name | Light mode | Dark mode |
|---|---|---|
color-background-video-container-primary | value: #111111 original: color-background-inverse-base Alias | value: #f9f9f9 original: color-background-inverse-base Alias |
color-background-video-container-secondary | value: #000000 original: color-transparent Base | value: #000000 original: color-transparent No dark theme |