Color system

Color	Function
.nav-bg	Navigation background
.nav-bg-hover	Navigation hover background
.nav-bg-selected	Navigation selected background
.nav-inactive	Navigation inactive element
.nav-primary	Navigation primary

Primary

Color	Function
Main	Main color used by most components
Light	Alternative light shade
Dark	Alternative dark shade
Contrast	Contrasting color when primary is used as a background color
Contained Hover Background	Fill background color for contained variant components in hover state
Outlined Hover Background	Fill background color for outlined & text variant components in hover state
Outlined Resting Background	Used for outlined variant components in resting state

Secondary

Color	Function
Main	Main color used by most components
Light	Alternative light shade
Dark	Alternative dark shade
Contrast	Contrasting color when primary is used as a background color
Contained Hover Background	Fill background color for contained variant components in hover state
Outlined Hover Background	Fill background color for outlined & text variant components in hover state
Outlined Resting Background	Used for outlined variant components in resting state

Text

Color	Function
Primary	Text primary
Secondary	Text secondary
Disabled	Text disabled

Action

Color	Function
Active	Fill color for components in active state
Hover	Fill background for components in hover state
Selected	Fill background for components in selected state
Disabled	Content color for components in disabled state
Disabled Background	Fill background for components in disabled state
Focus	Fill background for components in focus state

Other

Color	Function
Divider	Divider fill color
Outline Border	Border style for outlined variant components in resting state
Standard Input Line	Border style for standard variant Text Field & Select
Backdrop Overlay	Backdrop overlay style
Snackbar Background	Snackbar background