Theme

abstract class Theme

Themes are used to modify existing components to fit a specific visual style. By using Carbon’s tokens, developers can easily customize all of their components by changing a set of universal variables, eliminating the need to modify individual components.

Themes serve as an organizational framework for color in Carbon, with each theme based on a specific primary background color. And they actually get their names from their background color.

See Themes guidelines for more information.

Inheritors

Constructors

Link copied to clipboard
constructor()

Properties

Link copied to clipboard
abstract val aiColors: AiColors

Color tokens for the Ai component.

Link copied to clipboard
abstract val background: Color

Default page background. UI Shell base color.

Link copied to clipboard
abstract val backgroundActive: Color

Active color for background.

Link copied to clipboard
abstract val backgroundBrand: Color

Feature background color.

Link copied to clipboard
abstract val backgroundHover: Color

Hover color for background. Hover color for transparent backgrounds.

Link copied to clipboard
abstract val backgroundInverse: Color

High contrast backgrounds. High contrast elements.

Link copied to clipboard

Hover color for backgroundInverse.

Link copied to clipboard

Selected color for background.

Link copied to clipboard

Hover color for backgroundSelected.

Link copied to clipboard
abstract val borderDisabled: Color

Disabled border color (excluding border-subtles).

Link copied to clipboard
abstract val borderInteractive: Color

3:1 AA contrast. Selected borders. Active borders.

Link copied to clipboard
abstract val borderInverse: Color

High contrast border. 4.5:1 AA non-text contrast.

Link copied to clipboard
abstract val borderStrong01: Color

Medium contrast border. Border-bottom paired with field01. 3:1 AA non-text contrast.

Link copied to clipboard
abstract val borderStrong02: Color

Medium contrast border. Border-bottom paired with field02. 3:1 AA non-text contrast.

Link copied to clipboard
abstract val borderStrong03: Color

Medium contrast border. Border-bottom paired with field03. 3:1 AA non-text contrast.

Link copied to clipboard
abstract val borderSubtle00: Color

Subtle borders paired with background.

Link copied to clipboard
abstract val borderSubtle01: Color

Subtle borders paired with layer01.

Link copied to clipboard
abstract val borderSubtle02: Color

Subtle borders paired with layer02.

Link copied to clipboard
abstract val borderSubtle03: Color

Subtle borders paired with layer03.

Link copied to clipboard

Selected color for borderSubtle01.

Link copied to clipboard

Selected color for borderSubtle02.

Link copied to clipboard

Selected color for borderSubtle03.

Link copied to clipboard
abstract val borderTile01: Color

Operable tile indicator paired with layer01.

Link copied to clipboard
abstract val borderTile02: Color

Operable tile indicator paired with layer02.

Link copied to clipboard
abstract val borderTile03: Color

Operable tile indicator paired with layer03.

Link copied to clipboard

Active color for dangerPrimary. Active color for dangerSecondary.

Link copied to clipboard
abstract val buttonDangerHover: Color

Hover color for dangerPrimary. Hover color for dangerSecondary.

Link copied to clipboard

Primary danger button color. 3:1 AA non-text contrast.

Link copied to clipboard

Tertiary danger button color. Ghost danger button color. 4.5:1 AA text contrast.

Link copied to clipboard
abstract val buttonDisabled: Color

Disabled color for button elements.

Link copied to clipboard
abstract val buttonPrimary: Color

Primary button color.

Link copied to clipboard

Active color for buttonPrimary.

Link copied to clipboard

Hover color for buttonPrimary.

Link copied to clipboard
abstract val buttonSecondary: Color

Secondary button color.

Link copied to clipboard

Active color for buttonSecondary.

Link copied to clipboard

Hover color for buttonSecondary.

Link copied to clipboard
abstract val buttonSeparator: Color

Fluid button separator. 3:1 AA non-text contrast.

Link copied to clipboard
abstract val buttonTertiary: Color

Tertiary button color. 4.5:1 AA text contrast.

Link copied to clipboard

Active color for buttonTertiary.

Link copied to clipboard

Hover color for buttonTertiary.

Link copied to clipboard
abstract val chatColors: ChatColors

Color tokens for the Chat component.

Link copied to clipboard
abstract val field01: Color

Default input fields. Fields on background.

Link copied to clipboard
abstract val field02: Color

Secondary input fields. Fields on layer01.

Link copied to clipboard
abstract val field03: Color

Tertiary input fields. Fields on layer02.

Link copied to clipboard
abstract val fieldHover01: Color

Hover color for field01.

Link copied to clipboard
abstract val fieldHover02: Color

Hover color for field02.

Link copied to clipboard
abstract val fieldHover03: Color

Hover color for field03.

Link copied to clipboard
abstract val focus: Color

Focus border. Focus underline.

Link copied to clipboard
abstract val focusInset: Color

Contrast border paired with focus.

Link copied to clipboard
abstract val focusInverse: Color

Focus on high contrast moments.

Link copied to clipboard
abstract val highlight: Color

Highlight color.

Link copied to clipboard
abstract val iconDisabled: Color

Disabled icon color.

Link copied to clipboard
abstract val iconInteractive: Color

Icons that indicate operability.

Link copied to clipboard
abstract val iconInverse: Color

Inverse icon color.

Link copied to clipboard
abstract val iconOnColor: Color

Icons on interactive colors. Icons on non-layer colors.

Link copied to clipboard

Disabled color for iconOnColor.

Link copied to clipboard
abstract val iconPrimary: Color

Primary icons.

Link copied to clipboard
abstract val iconSecondary: Color

Secondary icons.

Link copied to clipboard
abstract val interactive: Color

3:1 AA contrast. Selected elements. Active elements. Accent icons.

Link copied to clipboard
abstract val layer01: Color

Container color on background. Secondary page background.

Link copied to clipboard
abstract val layer02: Color

Container color on layer01.

Link copied to clipboard
abstract val layer03: Color

Container color on layer02.

Link copied to clipboard
abstract val layerAccent01: Color

Tertiary background paired with layer01.

Link copied to clipboard
abstract val layerAccent02: Color

Tertiary background paired with layer02.

Link copied to clipboard
abstract val layerAccent03: Color

Tertiary background paired with layer03.

Link copied to clipboard

Active color for layerAccent01.

Link copied to clipboard

Active color for layerAccent02.

Link copied to clipboard

Active color for layerAccent03.

Link copied to clipboard

Hover color for layerAccent01.

Link copied to clipboard

Hover color for layerAccent02.

Link copied to clipboard

Hover color for layerAccent03.

Link copied to clipboard
abstract val layerActive01: Color

Active color for layer01.

Link copied to clipboard
abstract val layerActive02: Color

Active color for layer02.

Link copied to clipboard
abstract val layerActive03: Color

Active color for layer03.

Link copied to clipboard
abstract val layerHover01: Color

Hover color for layer01.

Link copied to clipboard
abstract val layerHover02: Color

Hover color for layer02.

Link copied to clipboard
abstract val layerHover03: Color

Hover color for layer03.

Link copied to clipboard
abstract val layerSelected01: Color

Selected color for layer01.

Link copied to clipboard
abstract val layerSelected02: Color

Selected color for layer02.

Link copied to clipboard
abstract val layerSelected03: Color

Selected color for layer03.

Link copied to clipboard

Disabled color for selected layers.

Link copied to clipboard

Hover color for layerSelected01.

Link copied to clipboard

Hover color for layerSelected02.

Link copied to clipboard

Hover color for layerSelected03.

Link copied to clipboard

High contrast elements. 4.5:1 AA element contrast.

Link copied to clipboard
abstract val linkInverse: Color

Links on backgroundInverse backgrounds.

Link copied to clipboard
abstract val linkInverseActive: Color

Active color for links on backgroundInverse backgrounds.

Link copied to clipboard
abstract val linkInverseHover: Color

Hover color for links on backgroundInverse backgrounds.

Link copied to clipboard

Color for visited links on backgroundInverse backgrounds.

Link copied to clipboard
abstract val linkPrimary: Color

Primary links.

Link copied to clipboard
abstract val linkPrimaryHover: Color

Hover color for linkPrimary.

Link copied to clipboard
abstract val linkSecondary: Color

Secondary link color for lower contrast backgrounds.

Link copied to clipboard
abstract val linkVisited: Color

Color for visited links.

Link copied to clipboard

Color tokens for the Notification component.

Link copied to clipboard
abstract val overlay: Color

Background overlay.

Link copied to clipboard

Skeleton color for containers.

Link copied to clipboard
abstract val skeletonElement: Color

Skeleton color for text and UI elements.

Link copied to clipboard

Major caution status.

Link copied to clipboard

Minor caution status.

Link copied to clipboard

Undefined status.

Link copied to clipboard
abstract val supportError: Color

Error. Invalid state.

Link copied to clipboard

Error in high contrast moments.

Link copied to clipboard
abstract val supportInfo: Color

Information.

Link copied to clipboard

Information in high contrast moments.

Link copied to clipboard
abstract val supportSuccess: Color

Success. On.

Link copied to clipboard

Success in high contrast moments.

Link copied to clipboard
abstract val supportWarning: Color

Warning.

Link copied to clipboard

Warning in high contrast moments.

Link copied to clipboard
abstract val tagColors: TagColors

Color tokens for the Tag component.

Link copied to clipboard
abstract val textDisabled: Color

Disabled text color.

Link copied to clipboard
abstract val textError: Color

Error message text.

Link copied to clipboard
abstract val textHelper: Color

Tertiary text. Help text.

Link copied to clipboard
abstract val textInverse: Color

Inverse text color.

Link copied to clipboard
abstract val textOnColor: Color

Text on interactive colors. Text on button colors.

Link copied to clipboard

Disabled color for textOnColor.

Link copied to clipboard
abstract val textPlaceholder: Color

Placeholder text.

Link copied to clipboard
abstract val textPrimary: Color

Primary text. Body copy. Headers. Hover text color for textSecondary.

Link copied to clipboard
abstract val textSecondary: Color

Secondary text. Input labels.

Link copied to clipboard
abstract val toggleOff: Color

Off background. 3:1 AA contrast.

Functions

Link copied to clipboard
fun containerColor(layer: Layer = Layer.Layer00): Color

Returns the container color based on a provided layer.

Link copied to clipboard
open operator override fun equals(other: Any?): Boolean
Link copied to clipboard
open override fun hashCode(): Int