UI Properties

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 fill color of the cdr-toggle-button's svg

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

Border color of the cdr-toggle-group

Fill color of the cdr-toast close button icon

Default fill 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 fill color of the cdr-toast icon-left

Warning border-left color of the cdr-toast

Success fill color of the cdr-toast icon-left

Success border-left color of the cdr-toast

Error fill color of the cdr-toast icon-left

Error border-left color of the cdr-toast

Default outline color of cdr-toast

Info background color of cdr-toast

Success outline color of cdr-toast

Warning outline color of cdr-toast

Error background color of cdr-toast

Error outline color of cdr-toast

Text color

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

Border of the cdr-switch button

Fill of the cdr-switch x and check icons

Box-shadow of the cdr-switch button on focus

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

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

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

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

Border 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

Color of the split-surface's surface layer

Skeleton bone background color

Skeleton shimmer gradient part 1

Skeleton shimmer gradient part 2

Skeleton shimmer gradient part 3

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

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

Text 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 secondary cdr-select

Background color of a cdr-select error

Box-shadow color of a cdr-select error

Box-shadow color of cdr-radio on hover

Background color of cdr-popup content

Border color of cdr-popup content

Text color of a cdr-pagination link

Fill color of a 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

Background color of the modal overlay

Background color of the content wrap

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 landing-leads surface layer. Passes to underlying split-surface component

Text color of a label wrapper

Background color of a label wrapper

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

Background color of a secondary label wrapper

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

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

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

Text color of a disabled cdr-input

Background color of a default cdr-input

Background color of a secondary cdr-input

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

Fill color of an icon

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

Text color of a cdr-form-error

Fill color of a cdr-form-error

Box-shadow color of a hovered cdr-checkbox

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

Text color of a cdr-chip when disabled

Box-shadow color of a cdr-chip on hover

Box-shadow color of a cdr-chip on focus

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

Text color of a cdr-caption

Text color of a cdr-caption

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 text color when active

Primary button's fill color when active

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

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 box shadow when hovered or focused

Dark button's text color when active

Dark button's fill color when active

Dark button's box shadow when active. 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 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 box shadow when active. The box shadow serves as a border.

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 primary elevated cdr-button

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.

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.

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

Fill color of a disabled icon-only cdr-button

Fill color of a cdr-button with background

Fill color of a cdr-button with background during interaction

Ellipses icon color

Ellipses icon hover, active and focus color

Breadcrumb item color

Breadcrumb item linked hover, active and focus color

Text color of a cdr-quote citation

Text color of cdr-quote content

Border color of a cdr-quote pull container

Message body background color

Right icon fill color

Info action icon fill color

Left icon fill color for default banner

Wrapper border left color for default banner

Left icon fill color for info banner

Wrapper border left color for info banner

Left icon fill color for warning banner

Wrapper border left color for warning banner

Left icon fill color for success banner

Wrapper border left color for success banner

Left icon fill color for error banner

Wrapper border left color for error banner

Outline color for a default cdr-banner

Background color for an info cdr-banner

Outline color for an info cdr-banner

Outline color for a success cdr-banner

Outline color for a warning cdr-banner

Background color for an error cdr-banner

Outline color for an error cdr-banner

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