Color
Contents
content
var(--grn-color-content)
Default text color
content2
var(--grn-color-content2)
Use to de-emphasized text
content3
var(--grn-color-content3)
Use to de-emphasized large text
disabledContent
var(--grn-color-disabledContent)
Disabled action text
Icons
icon
var(--grn-color-icon)
Default icon color
iconDanger
var(--grn-color-iconDanger)
disabledIcon
var(--grn-color-disabledIcon)
Disabled action icon
Backgrounds
background
var(--grn-color-background)
Default background color
background2
var(--grn-color-background2)
Use to contrast against default background color
background3
var(--grn-color-background3)
Use to contrast against background2 color
disabledBackground
var(--grn-color-disabledBackground)
Disabled action background
floatingBackground
var(--grn-color-floatingBackground)
Use for floating elements like popovers and menus
backdrop
var(--grn-color-backdrop)
Use for backdrop elements like modals
Borders
border
var(--grn-color-border)
Default border color
border2
var(--grn-color-border2)
Use for emphasised borders
Overlays
overlay
var(--grn-color-overlay)
For contrast on any background, e.g., hover states
overlay2
var(--grn-color-overlay2)
Stronger overlay for extra contrast, e.g., active states
overlayDanger
var(--grn-color-overlayDanger)
overlayDanger2
var(--grn-color-overlayDanger2)
Statuses
contentDanger
var(--grn-color-contentDanger)
Danger text on regular backgrounds
backgroundDanger
var(--grn-color-backgroundDanger)
Fill for Danger containers
onBackgroundDanger
var(--grn-color-onBackgroundDanger)
Text on backgroundDanger color
backgroundDangerSubtle
var(--grn-color-backgroundDangerSubtle)
Light fill for danger containers
onBackgroundDangerSubtle
var(--grn-color-onBackgroundDangerSubtle)
Text on backgroundDangerSubtle color
contentWarning
var(--grn-color-contentWarning)
Warning text on regular backgrounds
backgroundWarning
var(--grn-color-backgroundWarning)
Fill for warning containers
onBackgroundWarning
var(--grn-color-onBackgroundWarning)
Text on backgroundWarning color
backgroundWarningSubtle
var(--grn-color-backgroundWarningSubtle)
Light fill for warning containers
onBackgroundWarningSubtle
var(--grn-color-onBackgroundWarningSubtle)
Text on backgroundWarningSubtle color
contentSuccess
var(--grn-color-contentSuccess)
Success text on regular backgrounds
backgroundSuccess
var(--grn-color-backgroundSuccess)
Fill for Success containers
onBackgroundSuccess
var(--grn-color-onBackgroundSuccess)
Text on backgroundSuccess color
backgroundSuccessSubtle
var(--grn-color-backgroundSuccessSubtle)
Light fill for success containers
onBackgroundSuccessSubtle
var(--grn-color-onBackgroundSuccessSubtle)
Text on backgroundSuccessSubtle color
contentInfo
var(--grn-color-contentInfo)
Info text on regular backgrounds
backgroundInfo
var(--grn-color-backgroundInfo)
Fill for Info containers
onBackgroundInfo
var(--grn-color-onBackgroundInfo)
Text on backgroundInfo color
backgroundInfoSubtle
var(--grn-color-backgroundInfoSubtle)
Light fill for info containers
onBackgroundInfoSubtle
var(--grn-color-onBackgroundInfoSubtle)
Text on backgroundInfoSubtle color
Others
selection
var(--grn-color-selection)
Use for selected items
Core colors
The colors above are based of the Core colors.
For example, the danger semantic color is the same as the red core color.
Tests
Color shades test