- Introduction
- Color token
Color token
Colors
Background
| Name | Description |
|---|---|
bg | The default background color of your product. |
bg-inverse | Use for high contrast page or component backgrounds. |
bg-surface | |
bg-neutral | Background color of neutral elements, such as default buttons. |
bg-neutral-hover | Background color of neutral elements on hover. |
bg-neutral-active | Background color of neutral elements when active (on press). |
bg-neutral-disabled | Background color of neutral elements when disabled. |
bg-brand | Background color of main actions, like primary buttons. |
bg-brand-hover | Background color of main actions on hover. |
bg-brand-active | Background color of main actions when active (on press). |
bg-brand-disabled | Background color of main actions when disabled. |
bg-success | Background color indicating success. |
bg-success-hover | Background color indicating success on hover. |
bg-success-active | Background color indicating success when active (on press). |
bg-success-disabled | Background color indicating success when disabled. |
bg-success-muted | Muted background color indicating subdued success. |
bg-success-muted-hover | Muted background color indicating subdued success on hover. |
bg-success-muted-active | Muted background color indicating subdued success when active (on press). |
bg-success-muted-disabled | Muted background color indicating subdued success when disabled. |
bg-critical | Background color indicating critical. |
bg-critical-hover | Background color indicating critical on hover. |
bg-critical-active | Background color indicating critical when active (on press). |
bg-critical-disabled | Background color indicating critical when disabled. |
bg-critical-muted | Muted background color indicating subdued critical. |
bg-critical-muted-hover | Muted background color indicating subdued critical on hover. |
bg-critical-muted-active | Muted background color indicating subdued critical when active (on press). |
bg-critical-muted-disabled | Muted background color indicating subdued critical when disabled. |
bg-warning | Background color indicating warning. |
bg-warning-hover | Background color indicating warning on hover. |
bg-warning-active | Background color indicating warning when active (on press). |
bg-warning-disabled | Background color indicating warning when disabled. |
bg-warning-muted | Muted background color indicating subdued warning. |
bg-warning-muted-hover | Muted background color indicating subdued warning on hover. |
bg-warning-muted-active | Muted background color indicating subdued warning when active (on press). |
bg-warning-muted-disabled | Muted background color indicating subdued warning when disabled. |
bg-info | Background color indicating info. |
bg-info-hover | Background color indicating info on hover. |
bg-info-active | Background color indicating info when active (on press). |
bg-info-disabled | Background color indicating info when disabled. |
bg-info-muted | Muted background color indicating subdued info. |
bg-info-muted-hover | Muted background color indicating subdued info on hover. |
bg-info-muted-active | Muted background color indicating subdued info when active (on press). |
bg-info-muted-disabled | Muted background color indicating subdued info when disabled. |
Foreground
| Name | Description |
|---|---|
fg | The default text color. |
fg-secondary | Text color with a secondary level of prominence. |
fg-inverse | Text color on inverse background. |
fg-link | Text color for links. |
fg-link-hover | Text color for links on hover. |
fg-link-active | Text color for links when active (on press). |
fg-link-visited | Text color for visited links. |
fg-link-visited | Text color for visited links. |
fg-onNeutral | Text color for text on neutral background. |
fg-onNeutral-hover | Text color for text on neutral background on hover. |
fg-onNeutral-active | Text color for text on neutral background when active (on press). |
fg-onNeutral-disabled | Text color for text on neutral background when disabled. |
fg-onBrand | Text color for text on brand background. |
fg-onBrand-hover | Text color for text on brand background on hover. |
fg-onBrand-active | Text color for text on brand background when active (on press). |
fg-onBrand-disabled | Text color for text on brand background when disabled. |
fg-onSuccess | Text color for text on success background. |
fg-onSuccess-hover | Text color for text on success background on hover. |
fg-onSuccess-active | Text color for text on success background when active (on press). |
fg-onSuccess-disabled | Text color for text on success background when disabled. |
fg-onMutedSuccess | Text color for text on muted success background. |
fg-onMutedSuccess-hover | Text color for text on muted success background on hover. |
fg-onMutedSuccess-active | Text color for text on muted success background when active (on press). |
fg-onMutedSuccess-disabled | Text color for text on muted success background when disabled. |
fg-onCritical | Text color for text on critical background. |
fg-onCritical-hover | Text color for text on critical background on hover. |
fg-onCritical-active | Text color for text on critical background when active (on press). |
fg-onCritical-disabled | Text color for text on critical background when disabled. |
fg-onMutedCritical | Text color for text on muted critical background. |
fg-onMutedCritical-hover | Text color for text on muted critical background on hover. |
fg-onMutedCritical-active | Text color for text on muted critical background when active (on press). |
fg-onMutedCritical-disabled | Text color for text on muted critical background when disabled. |
fg-onWarning | Text color for text on warning background. |
fg-onWarning-hover | Text color for text on warning background on hover. |
fg-onWarning-active | Text color for text on warning background when active (on press). |
fg-onWarning-disabled | Text color for text on warning background when disabled. |
fg-onMutedWarning | Text color for text on muted warning background. |
fg-onMutedWarning-hover | Text color for text on muted warning background on hover. |
fg-onMutedWarning-active | Text color for text on muted warning background when active (on press). |
fg-onMutedWarning-disabled | Text color for text on muted warning background when disabled. |
fg-onSuccess | Text color for text on success background. |
fg-onSuccess-hover | Text color for text on success background on hover. |
fg-onSuccess-active | Text color for text on success background when active (on press). |
fg-onSuccess-disabled | Text color for text on success background when disabled. |
fg-onMutedSuccess | Text color for text on muted success background. |
fg-onMutedSuccess-hover | Text color for text on muted success background on hover. |
fg-onMutedSuccess-active | Text color for text on muted success background when active (on press). |
fg-onMutedSuccess-disabled | Text color for text on muted success background when disabled. |
Border
| Name | Description |
|---|---|
border | The default color for borders. |
border-hover | The hover color for borders. |
border-active | The active color for borders. |
border-disabled | The disabled color for borders. |
border-secondary | The color for hr elements or any visual dividers. |
border-focus | The focus ring for any interactive element in a focused state. |
border-inverse | Use for borders on an inverse background, such as borders on the global search. |