G
Tokens
TypographySpacingColorRadiusShadowMotion
Icons
Icon set
Components
AutocompleteAutocomplete2BadgeButtonCheckboxDropdownIconIconButtonIconToggleLinkModalNavPaginationPopoverProgressRadioSelectSliderSpinnerSwitchTabTextTextareaTextButtonTextInputTextToggleToastTooltip
Layouts
ArrangeBoxFlexStack
Foundational
FieldMenuTextboxVariables
Utilities
CardHooksStyle utilities
Patterns
CardsModals
Guides
ResponsiveTheming
Showcase
CompositionsLayoutsLayout examplesTests

Color

Contents

Aa
contentDefault text color
--grn-color-content
Aa
content2Use to de-emphasized text
--grn-color-content2
Aa
content3Use to de-emphasized large text
--grn-color-content3
Aa
disabledContentDisabled action text
--grn-color-disabledContent

Icons

iconDefault icon color
--grn-color-icon
iconDanger
--grn-color-iconDanger
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

overlayUse it for contrast on any background, e.g., hover states
--grn-color-overlay
overlay2Stronger overlay for extra contrast, e.g., active states
--grn-color-overlay2
overlayDanger
--grn-color-overlayDanger
overlayDanger2
--grn-color-overlayDanger2

Statuses

Aa
contentWarning
--grn-color-contentWarning
backgroundWarning
--grn-color-backgroundWarning
Aa
onBackgroundWarning
--grn-color-onBackgroundWarning
backgroundWarningSubtle
--grn-color-backgroundWarningSubtle
Aa
onBackgroundWarningSubtle
--grn-color-onBackgroundWarningSubtle
Aa
contentDanger
--grn-color-contentDanger
backgroundDanger
--grn-color-backgroundDanger
Aa
onBackgroundDanger
--grn-color-onBackgroundDanger
backgroundDangerSubtle
--grn-color-backgroundDangerSubtle
Aa
onBackgroundDangerSubtle
--grn-color-onBackgroundDangerSubtle
Aa
contentSuccess
--grn-color-contentSuccess
backgroundSuccess
--grn-color-backgroundSuccess
Aa
onBackgroundSuccess
--grn-color-onBackgroundSuccess
backgroundSuccessSubtle
--grn-color-backgroundSuccessSubtle
Aa
onBackgroundSuccessSubtle
--grn-color-onBackgroundSuccessSubtle
Aa
contentInfo
--grn-color-contentInfo
backgroundInfo
--grn-color-backgroundInfo
Aa
onBackgroundInfo
--grn-color-onBackgroundInfo
backgroundInfoSubtle
--grn-color-backgroundInfoSubtle
Aa
onBackgroundInfoSubtle
--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.