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

Color

Contents

content
Default text color
hsl(0 0% 0%)
#000000
--grn-color-content
content2
Use to de-emphasized text
hsl(0 0% 0%)
#000000
--grn-color-content2
content3
Use to de-emphasized large text
hsl(0 0% 0%)
#000000
--grn-color-content3
disabledContent
Disabled action text
hsl(0 0% 0%)
#000000
--grn-color-disabledContent
icon
Default icon color
hsl(0 0% 0%)
#000000
--grn-color-icon
disabledIcon
Disabled action icon
hsl(0 0% 0%)
#000000
--grn-color-disabledIcon

Backgrounds

background
Default background color
hsl(0 0% 0%)
#000000
--grn-color-background
background2
Use to contrast against default background color
hsl(0 0% 0%)
#000000
--grn-color-background2
background3
Use to contrast against background2 color
hsl(0 0% 0%)
#000000
--grn-color-background3
disabledBackground
Disabled action background
hsl(0 0% 0%)
#000000
--grn-color-disabledBackground
floatingBackground
Use for floating elements like popovers and menus
hsl(0 0% 0%)
#000000
--grn-color-floatingBackground
backdrop
Use for backdrop elements like modals
hsl(0 0% 0%)
#000000
--grn-color-backdrop
overlay
Use it for contrast on any background, e.g., hover states
hsl(0 0% 0%)
#000000
--grn-color-overlay
overlay2
Stronger overlay for extra contrast, e.g., active states
hsl(0 0% 0%)
#000000
--grn-color-overlay2

Borders

border
Default border color
hsl(0 0% 0%)
#000000
--grn-color-border
border2
Use for emphasised borders
hsl(0 0% 0%)
#000000
--grn-color-border2

General

warning
Use for warning messages
hsl(0 0% 0%)
#000000
--grn-color-warning
danger
Use for danger and error messages
hsl(0 0% 0%)
#000000
--grn-color-danger
success
Use for success messages
hsl(0 0% 0%)
#000000
--grn-color-success
selection
Use for selected items
hsl(0 0% 0%)
#000000
--grn-color-selection

Shades

shade13
hsl(0 0% 0%)
#000000
--grn-color-shade13
shade12
hsl(0 0% 0%)
#000000
--grn-color-shade12
shade11
hsl(0 0% 0%)
#000000
--grn-color-shade11
shade10
hsl(0 0% 0%)
#000000
--grn-color-shade10
shade9
hsl(0 0% 0%)
#000000
--grn-color-shade9
shade8
hsl(0 0% 0%)
#000000
--grn-color-shade8
shade7
hsl(0 0% 0%)
#000000
--grn-color-shade7
shade6
hsl(0 0% 0%)
#000000
--grn-color-shade6
shade5
hsl(0 0% 0%)
#000000
--grn-color-shade5
shade4
hsl(0 0% 0%)
#000000
--grn-color-shade4
shade3
hsl(0 0% 0%)
#000000
--grn-color-shade3
shade2
hsl(0 0% 0%)
#000000
--grn-color-shade2
shade1
hsl(0 0% 0%)
#000000
--grn-color-shade1

Fades

fade10
hsl(0 0% 0%)
#000000
--grn-color-fade10
fade9
hsl(0 0% 0%)
#000000
--grn-color-fade9
fade8
hsl(0 0% 0%)
#000000
--grn-color-fade8
fade7
hsl(0 0% 0%)
#000000
--grn-color-fade7
fade6
hsl(0 0% 0%)
#000000
--grn-color-fade6
fade5
hsl(0 0% 0%)
#000000
--grn-color-fade5
fade4
hsl(0 0% 0%)
#000000
--grn-color-fade4
fade3
hsl(0 0% 0%)
#000000
--grn-color-fade3
fade2
hsl(0 0% 0%)
#000000
--grn-color-fade2
fade1
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.