Gray10Theme
One of the default light themes available in Carbon.
This theme uses Gray 10 as the global background color and is layered first with components using White backgrounds.
The second layer uses Gray 10 and the third layer used White.
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 dangerPrimary. Active color for dangerSecondary.
Hover color for dangerPrimary. Hover color for dangerSecondary.
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.
Color tokens for the Chat component.
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.
Active color for links on backgroundInverse backgrounds.
Hover color for links on backgroundInverse backgrounds.
Color for visited links on backgroundInverse backgrounds.
Primary links.
Hover color for linkPrimary.
Secondary link color for lower contrast backgrounds.
Color for visited links.
Color tokens for the Notification component.
Skeleton color for containers.
Skeleton color for text and UI elements.
Major caution status.
Minor caution status.
Undefined status.
Error. Invalid state.
Error in high contrast moments.
Information.
Information in high contrast moments.
Success. On.
Success in high contrast moments.
Warning.
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.