Color
Contents
contentDefault text color
hsl(0 0% 0%)
#000000
--grn-color-content
content2Use to de-emphasized text
hsl(0 0% 0%)
#000000
--grn-color-content2
content3Use to de-emphasized large text
hsl(0 0% 0%)
#000000
--grn-color-content3
disabledContentDisabled action text
hsl(0 0% 0%)
#000000
--grn-color-disabledContent
hsl(0 0% 0%)
#000000
--grn-color-icon
disabledIconDisabled action icon
hsl(0 0% 0%)
#000000
--grn-color-disabledIcon
Backgrounds
backgroundDefault background color
hsl(0 0% 0%)
#000000
--grn-color-background
background2Use to contrast against default background color
hsl(0 0% 0%)
#000000
--grn-color-background2
background3Use to contrast against background2 color
hsl(0 0% 0%)
#000000
--grn-color-background3
disabledBackgroundDisabled action background
hsl(0 0% 0%)
#000000
--grn-color-disabledBackground
floatingBackgroundUse for floating elements like popovers and menus
hsl(0 0% 0%)
#000000
--grn-color-floatingBackground
backdropUse for backdrop elements like modals
hsl(0 0% 0%)
#000000
--grn-color-backdrop
Borders
borderDefault border color
hsl(0 0% 0%)
#000000
--grn-color-border
border2Use for emphasised borders
hsl(0 0% 0%)
#000000
--grn-color-border2
General
warningUse for warning messages
hsl(0 0% 0%)
#000000
--grn-color-warning
dangerUse for danger and error messages
hsl(0 0% 0%)
#000000
--grn-color-danger
successUse for success messages
hsl(0 0% 0%)
#000000
--grn-color-success
selectionUse for selected items
hsl(0 0% 0%)
#000000
--grn-color-selection
Shades
hsl(0 0% 0%)
#000000
--grn-color-shade13
hsl(0 0% 0%)
#000000
--grn-color-shade12
hsl(0 0% 0%)
#000000
--grn-color-shade11
hsl(0 0% 0%)
#000000
--grn-color-shade10
hsl(0 0% 0%)
#000000
--grn-color-shade9
hsl(0 0% 0%)
#000000
--grn-color-shade8
hsl(0 0% 0%)
#000000
--grn-color-shade7
hsl(0 0% 0%)
#000000
--grn-color-shade6
hsl(0 0% 0%)
#000000
--grn-color-shade5
hsl(0 0% 0%)
#000000
--grn-color-shade4
hsl(0 0% 0%)
#000000
--grn-color-shade3
hsl(0 0% 0%)
#000000
--grn-color-shade2
hsl(0 0% 0%)
#000000
--grn-color-shade1
Fades
hsl(0 0% 0%)
#000000
--grn-color-fade10
hsl(0 0% 0%)
#000000
--grn-color-fade9
hsl(0 0% 0%)
#000000
--grn-color-fade8
hsl(0 0% 0%)
#000000
--grn-color-fade7
hsl(0 0% 0%)
#000000
--grn-color-fade6
hsl(0 0% 0%)
#000000
--grn-color-fade5
hsl(0 0% 0%)
#000000
--grn-color-fade4
hsl(0 0% 0%)
#000000
--grn-color-fade3
hsl(0 0% 0%)
#000000
--grn-color-fade2
hsl(0 0% 0%)
#000000
--grn-color-fade1
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.