G
Tokens
TypographySpacingColorRadiusShadowMotion
Icons
Icon set
Components
AutocompleteAutocomplete2BadgeButtonCheckboxDropdownGhostInputIconIconButtonIconToggleLinkModalNavPaginationPopoverProgressRadioSelectSliderSpinnerSwitchTabTextTextareaTextButtonTextInputTextToggleToastTooltip
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

overlayFor 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
contentWarningWarning text on regular backgrounds
--grn-color-contentWarning
backgroundWarningFill for warning containers
--grn-color-backgroundWarning
Aa
onBackgroundWarningText on backgroundWarning color
--grn-color-onBackgroundWarning
backgroundWarningSubtleLight fill for warning containers
--grn-color-backgroundWarningSubtle
Aa
onBackgroundWarningSubtleText on backgroundWarningSubtle color
--grn-color-onBackgroundWarningSubtle
Aa
contentDangerDanger text on regular backgrounds
--grn-color-contentDanger
backgroundDangerFill for Danger containers
--grn-color-backgroundDanger
Aa
onBackgroundDangerText on backgroundDanger color
--grn-color-onBackgroundDanger
backgroundDangerSubtleLight fill for danger containers
--grn-color-backgroundDangerSubtle
Aa
onBackgroundDangerSubtleText on backgroundDangerSubtle color
--grn-color-onBackgroundDangerSubtle
Aa
contentSuccessSuccess text on regular backgrounds
--grn-color-contentSuccess
backgroundSuccessFill for Success containers
--grn-color-backgroundSuccess
Aa
onBackgroundSuccessText on backgroundSuccess color
--grn-color-onBackgroundSuccess
backgroundSuccessSubtleLight fill for success containers
--grn-color-backgroundSuccessSubtle
Aa
onBackgroundSuccessSubtleText on backgroundSuccessSubtle color
--grn-color-onBackgroundSuccessSubtle
Aa
contentInfoInfo text on regular backgrounds
--grn-color-contentInfo
backgroundInfoFill for Info containers
--grn-color-backgroundInfo
Aa
onBackgroundInfoText on backgroundInfo color
--grn-color-onBackgroundInfo
backgroundInfoSubtleLight fill for info containers
--grn-color-backgroundInfoSubtle
Aa
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