Color
Contents
contentDefault text color --grn-color-content
content2Use to de-emphasized text --grn-color-content2
content3Use to de-emphasized large text --grn-color-content3
disabledContentDisabled action text --grn-color-disabledContent
Icons
disabledIconDisabled action icon --grn-color-disabledIcon
Backgrounds
backgroundDefault background color --grn-color-background
background2Use to contrast against default background color --grn-color-background2
background3Use to contrast against background2 color --grn-color-background3
disabledBackgroundDisabled action background --grn-color-disabledBackground
floatingBackgroundUse for floating elements like popovers and menus --grn-color-floatingBackground
backdropUse for backdrop elements like modals --grn-color-backdrop
Borders
borderDefault border color --grn-color-border
border2Use for emphasised borders --grn-color-border2
Overlays
overlayFor contrast on any background, e.g., hover states --grn-color-overlay
overlay2Stronger overlay for extra contrast, e.g., active states --grn-color-overlay2
--grn-color-overlayDanger
--grn-color-overlayDanger2
Statuses
contentWarningWarning text on regular backgrounds --grn-color-contentWarning
backgroundWarningFill for warning containers --grn-color-backgroundWarning
onBackgroundWarningText on backgroundWarning color --grn-color-onBackgroundWarning
backgroundWarningSubtleLight fill for warning containers --grn-color-backgroundWarningSubtle
onBackgroundWarningSubtleText on backgroundWarningSubtle color --grn-color-onBackgroundWarningSubtle
contentDangerDanger text on regular backgrounds --grn-color-contentDanger
backgroundDangerFill for Danger containers --grn-color-backgroundDanger
onBackgroundDangerText on backgroundDanger color --grn-color-onBackgroundDanger
backgroundDangerSubtleLight fill for danger containers --grn-color-backgroundDangerSubtle
onBackgroundDangerSubtleText on backgroundDangerSubtle color --grn-color-onBackgroundDangerSubtle
contentSuccessSuccess text on regular backgrounds --grn-color-contentSuccess
backgroundSuccessFill for Success containers --grn-color-backgroundSuccess
onBackgroundSuccessText on backgroundSuccess color --grn-color-onBackgroundSuccess
backgroundSuccessSubtleLight fill for success containers --grn-color-backgroundSuccessSubtle
onBackgroundSuccessSubtleText on backgroundSuccessSubtle color --grn-color-onBackgroundSuccessSubtle
contentInfoInfo text on regular backgrounds --grn-color-contentInfo
backgroundInfoFill for Info containers --grn-color-backgroundInfo
onBackgroundInfoText on backgroundInfo color --grn-color-onBackgroundInfo
backgroundInfoSubtleLight fill for info containers --grn-color-backgroundInfoSubtle
onBackgroundInfoSubtleText on backgroundInfoSubtle color --grn-color-onBackgroundInfoSubtle
Others
selectionUse for selected items --grn-color-selection
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