UI Properties

Ellipses icon color

Ellipses icon hover, active and focus color

Breadcrumb item color

Breadcrumb item linked hover, active and focus color

Message body background color

Right icon fill color

Info action icon fill color

Left icon background color for default banner

Left icon fill color for default banner

Wrapper border left color for default banner

Left icon background color for info banner

Left icon fill color for info banner

Wrapper border left color for info banner

Left icon background color for warning banner

Left icon fill color for warning banner

Wrapper border left color for warning banner

Left icon background color for success banner

Left icon fill color for success banner

Wrapper border left color for success banner

Left icon background color for error banner

Left icon fill color for error banner

Wrapper border left color for error banner

Background color for a default cdr-banner

Outline color for a default cdr-banner

Background color for an info cdr-banner

Outline color for an info cdr-banner

Background color for a success cdr-banner

Outline color for a success cdr-banner

Background color for a warning cdr-banner

Outline color for a warning cdr-banner

Background color for an error cdr-banner

Outline color for an error cdr-banner

Primary button's background color

Primary button's box shadow which serves as a border

Primary button's text color

Primary button's fill color

Primary button's text color when hovered or focused

Primary button's fill color when hovered or focused

Primary button's background color when hovered or focused

Primary button's box shadow when hovered or focused

Primary button's text color when active

Primary button's fill color when active

Primary button's background color when active

Primary button's box shadow when active.

Primary button's inset box shadow when active

Primary button's background color when disabled

Primary button's border color when disabled

Primary button's text color when disabled

Primary button's fill color when disabled

Secondary button's background color

Secondary button's box shadow which serves as a border

Secondary button's text color

Secondary button's fill color

Secondary button's text color when hovered or focused

Secondary button's fill color when hovered or focused

Secondary button's background color when hovered or focused

Secondary button's box shadow when hovered or focused

Secondary button's text color when active

Secondary button's fill color when active

Secondary button's background color when active

Secondary button's box shadow when active.

Secondary button's inset box shadow when active

Secondary button's background color when disabled

Secondary button's box shadow color when disabled. The box shadow serves as a border

Secondary button's text color when disabled

Secondary button's fill color when disabled

Dark button's background color

Dark button's box shadow which serves as a border

Dark button's text color

Dark button's fill color

Dark button's text color when hovered or focused

Dark button's fill color when hovered or focused

Dark button's background color when hovered or focused

Dark button's box shadow when hovered or focused

Dark button's text color when active

Dark button's fill color when active

Dark button's background color when active

Dark button's box shadow when active. The box shadow serves as a border.

Dark button's inset box shadow when active. The box shadow serves as a border

Dark button's background color when disabled

Dark button's box shadow color when disabled. The box shadow serves as a border

Dark button's text color when disabled

Dark button's fill color when disabled

Sale button's background color

Sale button's box shadow which serves as a border

Sale button's text color

Sale button's fill color

Sale button's text color when hovered or focused

Sale button's fill color when hovered or focused

Sale button's background color when hovered or focused

Sale button's box shadow when hovered or focused. The box shadow serves as a border

Sale button's text color when active

Sale button's fill color when active

Sale button's background color when active

Sale button's box shadow when active. The box shadow serves as a border.

Sale button's inset box shadow when active. The box shadow serves as a border

Sale button's background color when disabled

Sale button's border color when disabled

Sale button's text color when disabled

Sale button's fill color when disabled

Link variant of cdr-button's text color

Link variant of cdr-button's fill color

Link variant of cdr-button's text color when active or focused

Link variant of cdr-button's text color when hovered

Link variant of cdr-button's outline

Box shadow color of a secondary elevated cdr-button

Box shadow color of a secondary elevated cdr-button when hovered or focused

Box shadow color of a secondary elevated cdr-button when active.

Inset box shadow color of a secondary elevated cdr-button when active

Box shadow color of a primary elevated cdr-button

Box shadow color of a primary elevated cdr-button when hovered or focused

Box shadow color of a primary elevated cdr-button when active.

Inset box shadow color of a primary elevated cdr-button when active

Box shadow color of a dark elevated cdr-button

Box shadow color of a dark elevated cdr-button when hovered or focused

Box shadow color of a dark elevated cdr-button when active.

Inset box shadow color of a dark elevated cdr-button when active

Box shadow color of a sale elevated cdr-button

Box shadow color of a sale elevated cdr-button when hovered or focused

Box shadow color of a sale elevated cdr-button when active.

Inset box shadow color of a sale elevated cdr-button when active

Fill color of an icon-only cdr-button

Fill color of an icon-only cdr-button when hovered

Fill color of an icon-only cdr-button when active or focused

Box shadow of the svg in an icon-only cdr-button when active or focused

Fill color of a disabled icon-only cdr-button

Fill color of a cdr-button with background

Background color of a cdr-button with background

Box shadow color of a cdr-button with background

Fill color of a cdr-button with background during interaction

Background color of a cdr-button with background during interaction

Box shadow color of a cdr-button with background during interaction

Text color of an active cdr-button with background

Fill color of an active cdr-button with background

Background color of an active cdr-button with background

Box shadow color of an active cdr-button with background

Background color of a disabled cdr-button with background

Box shadow color of a disabled cdr-button with background

Fill color of a disabled cdr-button with background

Text color of a cdr-caption

Text color of a cdr-caption

Background color of a cdr-card

Text color of a cdr-card

Link text color of a cdr-card

Link hover text color of a cdr-card

Fill color of the checkbox check icon when checked

Fill color of the checkbox check icon when checked and hovered

Box-shadow color of a checked cdr-checkbox

Background color of a checked cdr-checkbox

Box-shadow color of a hovered cdr-checkbox

Background color of a hovered cdr-checkbox

Box-shadow color of a checked and hovered cdr-checkbox

Background color of a checked and hovered cdr-checkbox

Box-shadow color of a cdr-checkbox when disabled

Background color of a cdr-checkbox when disabled

Background color of a checked cdr-checkbox when disabled

Box-shadow color of a cdr-checkbox when active

Background color of a cdr-checkbox when active

Box-shadow color of a cdr-checkbox when focused

Background color of a cdr-checkbox when focused

Background color of a checked cdr-checkbox when focused

Text color of a cdr-chip

Fill color of a cdr-chip

Background color of a cdr-chip

Box-shadow color of a cdr-chip

Background color of a cdr-chip when disabled

Box-shadow color of a cdr-chip when disabled

Text color of a cdr-chip when disabled

Background color of a cdr-chip on hover

Box-shadow color of a cdr-chip on hover

Background color of a cdr-chip on focus

Box-shadow color of a cdr-chip on focus

Background color of a cdr-chip when active

Box-shadow color of a cdr-chip when active

Background color of a cdr-chip when selected

Box-shadow color of a cdr-chip when selected

Background color of a cdr-chip when selected and hovered

Box-shadow color of a cdr-chip when selected and hovered

Background color of a cdr-chip when selected and focused

Box-shadow color of a cdr-chip when selected and focused

Background color of a cdr-chip when selected and active

Box-shadow color of a cdr-chip when selected and active

Border color of cdr-accordion

Background color of a cdr-accordion header button

Text color of a cdr-accordion header button

Background color of a cdr-accordion header button on focus and hover

Fill color of icons on a cdr-accordion. This is used for the caret which changes orientation when the accordion collapses and expands

Background color of cdr-accordion content

Text color of cdr-accordion content

Box-shadow color of a cdr-form-group error

Background color of a cdr-form-group error

Background color of a cdr-form-group error on hover

Text color of an optional cdr-form-group

Text color of a disabled cdr-form-group

Fill color of an icon

Text color of a cdr-form-error

Fill color of a cdr-form-error

Text color of a standalone label

Text color of a standalone label when disabled

Text color of a standalone label when optional

Text color of a standalone helper label

Background color of the cdr-button label

Background color of the cdr-input label in hover, active, focus, and focus-within states

Box-shadow color of the cdr-input label in hover, active, focus, and focus-within states

Fill color of the cdr-input label in hover, active, focus, and focus-within states

Fill color of the cdr-input SVG when the parent is focused

Fill color of the cdr-input wrapper

Text color of a cdr-input by default

Background color of a cdr-input by default

Box-shadow color of a cdr-input by default

Fill color of an icon in a cdr-input

Box shadow of a focused or active cdr-input

Background color of a disabled cdr-input

Text color of a disabled cdr-input

Box-shadow color of a disabled cdr-input

Background color of a default cdr-input

Background color of a default cdr-input in active or focus state

Background color of a secondary cdr-input

Background color of a secondary cdr-input in active or focus state

Background color of a cdr-input in error state

Box-shadow color of a cdr-input in error state

Text color of a cdr-input's helper text

Text color of a label wrapper

Background color of a label wrapper

Background color of a primary label wrapper when hovered

Background color of a primary label wrapper when it has focus within

Box shadow color of a primary label wrapper when it has focus within

Background color of a primary label wrapper when active

Background color of a secondary label wrapper

Background color of a secondary label wrapper when hovered

Background color of a secondary label wrapper when it has focus within

Background color of a secondary label wrapper when active

Text color of a disabled label wrapper

Background color of a disabled label wrapper

Background color of a form figure

Box shadow color of a form figure

Color of the unordered inline list item prefix

Color of the nested ordered cdr-list item prefix

Color of the unordered cdr-list item prefix

Color of the nested unordered cdr-list item prefix

Color of the link text

Color of the link fill

Color of the link text when active or focused

Color of the link text when hovered

Color of the landing-leads surface layer. Passes to underlying split-surface component

Background color of the modal overlay

Background color of the content wrap

Text color of a cdr-pagination link

Fill color of a cdr-pagination link

Background color of a cdr-pagination link on hover/focus/active

Background color of the keyline for the current cdr-pagination link

Text color of a disabled cdr-pagination link

Fill color of a disabled cdr-pagination link

Text color of a disabled cdr-pagination link on hover/focus/active

Text color of a cdr-quote citation

Text color of cdr-quote content

Border color of a cdr-quote pull container

Background color of cdr-popup content

Border color of cdr-popup content

Box-shadow color of cdr-radio when selected

Background color of cdr-radio when selected

Background color of the inner circle of cdr-radio when selected

Box-shadow color of cdr-radio on hover

Background color of cdr-radio on hover

Box-shadow color of cdr-radio when selected on hover

Background color of cdr-radio when selected on hover

Box-shadow color of cdr-radio when disabled

Background color of cdr-radio when disabled

Background color of the inner circle of cdr-radio when disabled

Background color of the inner circle of cdr-radio when selected and disabled

Box-shadow color of cdr-radio on focus

Background color of cdr-radio on focus

Background color of cdr-radio when selected on focus

Box-shadow color of cdr-radio when active

Background color of cdr-radio when active

Background color of the inner circle of cdr-radio when selected and active

Hover text color of cdr-rating count

Color of the rating text separator

Fill color of a null star

Outline color of a null star

Fill color of a partially filled star

Stroke color of a partially filled star

Fill color of a filled star

Stroke color of a filled star

Fill color of an empty star

Stroke color of an empty star

Skeleton bone background color

Skeleton shimmer gradient part 1

Skeleton shimmer gradient part 2

Skeleton shimmer gradient part 3

Color of the split-surface's surface layer

Color of the cdr-select caret

Color of a disabled cdr-select caret

Background color of cdr-select

Text color of cdr-select

Box-shadow color of cdr-select

Background color of a disabled cdr-select

Text color of a disabled cdr-select

Box-shadow color of a disabled cdr-select

Box-shadow color of a cdr-select when active or focused

Text color of cdr-select prompt

Text color of a disabled cdr-select prompt

Background color of a primary cdr-select

Background color of a primary cdr-select when active or focused

Background color of a secondary cdr-select

Background color of a secondary cdr-select when active or focused

Background color of a cdr-select error

Box-shadow color of a cdr-select error

Border of the cdr-switch button

Background color of the cdr-switch button

Fill of the cdr-switch x and check icons

Box-shadow of the cdr-switch button on focus

Background color of the cdr-switch button on focus

Fill of the cdr-switch x and check icons on focus

Background color of the cdr-switch handle before on focus

Border of the cdr-switch button on hover when not in focus

Background color of the cdr-switch button on hover when not in focus

Fill of the cdr-switch x and check icons on hover when not in focus

Border of the cdr-switch handle on hover when not in focus

Background color of the cdr-switch button when it is checked

Fill of the cdr-switch x and check icons when it is checked

Box-shadow of the cdr-switch button when it is checked and in focus

Background color of the cdr-switch button when it is checked and in focus

Border of the cdr-switch handle when it is checked and in focus

Background color of the cdr-switch handle when it is checked and in focus

Fill of the cdr-switch x and check icons when it is checked and in focus

Background color of the cdr-switch handle when it is checked

Border of the cdr-switch button when it is checked and on hover but not in focus

Background color of the cdr-switch button when it is checked and on hover but not in focus

Fill of the cdr-switch x and check icons when it is checked and on hover but not in focus

Border of the cdr-switch handle when it is checked and on hover but not in focus

Border color of the cdr-switch handle

Background color of the cdr-switch handle

Color of the cdr-table base text

Background color of the table rows

Background color of the table header

Text color of the table cells

Default border color of the table

Head border color of the table

Background color of all odd rows in the table

Background color of odd rows in the table header

Background color of the odd rows in striped tables

Background color of odd rows in the table body and footer

Background color of table cells on hover

Keyline color of the cdr-tabs header container

Text color in a tab

Text color of an active tab

Text color of a tab on active, focus, or hover

Text color of a disabled tab

Background color of the cdr-tabs keyline

Border color of the cdr-tabs with no-border modifier

Text color

Border color of the cdr-toggle-group

Default background color of the cdr-toggle-group

Fill color of the cdr-toast close button icon

Default background color of the cdr-toast icon-left

Default fill color of the cdr-toast icon-left

Info background color of the cdr-toast icon-left

Info fill color of the cdr-toast icon-left

Info border-left color of the cdr-toast

Warning background color of the cdr-toast icon-left

Warning fill color of the cdr-toast icon-left

Warning border-left color of the cdr-toast

Success background color of the cdr-toast icon-left

Success fill color of the cdr-toast icon-left

Success border-left color of the cdr-toast

Error background color of the cdr-toast icon-left

Error fill color of the cdr-toast icon-left

Error border-left color of the cdr-toast

Default background color of cdr-toast

Default outline color of cdr-toast

Info background color of cdr-toast

Success background color of cdr-toast

Success outline color of cdr-toast

Warning background color of cdr-toast

Warning outline color of cdr-toast

Error background color of cdr-toast

Error outline color of cdr-toast

Background color of the cdr-popup

Text color of the cdr-popup

Border color of the cdr-popup

Border color of the cdr-popup arrow

Background color of the cdr-popup arrow

Default text color of the cdr-toggle-button

Default background color of the cdr-toggle-button

Focus border color of the cdr-toggle-button

Focus background color of the cdr-toggle-button

Default fill color of the cdr-toggle-button's svg

Selected background color of the cdr-toggle-button at rest

Selected border color of the cdr-toggle-button at rest

Selected fill color of the cdr-toggle-button's svg at rest

Selected border color of the cdr-toggle-button on focus

Selected background color of the cdr-toggle-button on hover

Background color of the cdr-toggle-button on hover

Hover border color of the cdr-toggle-button on focus