Gray100Theme
One of the default dark themes available in Carbon. This theme uses Grey 100 as the global background color.
Properties
Default page background; UI shell base color.
Active color for background.
Feature background color.
Hover color for background; Hover color for transparent backgrounds.
High contrast backgrounds; High contrast elements.
Hover color for backgroundInverse.
Selected color for background.
Hover color for backgroundSelected.
Disabled border color (excluding border-subtles).
3:1 AA contrast; Selected borders; Active borders.
High contrast border; 4.5:1 AA non-text contrast.
Medium contrast border; Border-bottom paired with field01; 3:1 AA non-text contrast.
Medium contrast border; Border-bottom paired with field02; 3:1 AA non-text contrast.
Medium contrast border; Border-bottom paired with field03; 3:1 AA non-text contrast.
Subtle borders paired with $background.
Subtle borders paired with layer01.
Subtle borders paired with layer02.
Subtle borders paired with layer03.
Selected color for borderSubtle01.
Selected color for borderSubtle02.
Selected color for borderSubtle03.
Operable tile indicator paired with layer01.
Operable tile indicator paired with layer02.
Operable tile indicator paired with layer03.
Active color for buttonDangerPrimary; Active color for buttonDangerSecondary.
Hover color for buttonDangerPrimary; Hover color for buttonDangerSecondary.
Primary danger button color; 3:1 AA non-text contrast.
Tertiary danger button color; Ghost danger button color; 4.5:1 AA text contrast.
Disabled color for button elements.
Primary button color.
Active color for buttonPrimary.
Hover color for buttonPrimary.
Secondary button color.
Active color for buttonSecondary.
Hover color for buttonSecondary.
Fluid button separator; 3:1 AA non-text contrast.
Tertiary button color; 4.5:1 AA text contrast.
Active color for buttonTertiary.
Hover color for buttonTertiary.
Default input fields; Fields on background.
Hover color for field01.
Hover color for field02.
Hover color for field03.
Contrast border paired with focus.
Focus on high contrast moments.
Disabled icon color.
Icons that indicate operability.
Inverse icon color.
Icons on interactive colors; Icons on non-layer colors.
Disabled color for iconOnColor.
Primary icons.
Secondary icons.
3:1 AA contrast; Selected elements; Active elements; Accent icons.
Container color on background; Secondary page background.
Tertiary background paired with layer01.
Tertiary background paired with layer02.
Tertiary background paired with layer03.
Active color for layerAccent01.
Active color for layerAccent02.
Active color for layerAccent03.
Hover color for layerAccent01.
Hover color for layerAccent02.
Hover color for layerAccent03.
Active color for layer01.
Active color for layer02.
Active color for layer03.
Hover color for layer01.
Hover color for layer02.
Hover color for layer03.
Selected color for layer01.
Selected color for layer02.
Selected color for layer03.
Disabled color for selected layers.
Hover color for layerSelected01.
Hover color for layerSelected02.
Hover color for layerSelected03.
High contrast elements; 4.5:1 AA element contrast.
Links on backgroundInverse backgrounds.
Primary links.
Hover color for linkPrimary.
Secondary link color for lower contrast backgrounds.
Color for visited links.
Skeleton color for containers.
Skeleton color for text and UI elements.
Error; Invalid state.
Error in high contrast moments.
Information.
Information in high contrast moments.
Success; On.
Success in high contrast moments.
Warning; Caution.
Warning in high contrast moments.
Disabled text color.
Tertiary text; Help text.
Inverse text color.
Text on interactive colors; Text on button colors.
Disabled color for textOnColor.
Placeholder text.
Primary text; Body copy; Headers; Hover text color for textSecondary.
Secondary text; Input labels.