State color tokens

VACDS state color tokens use USWDS tokens. Their intention is to be useful and effective for any project that has states or alerts. Each state token is drawn from a system color token and we only use token-based colors in official components.

---

How to use state color tokens

The state color palette is divided into five high-level role-based color families: info, error, warning, success, emergency, and disabled.

Each color family except emergency and disabled has five possible lightness grades, from lighter to darker, though not every family needs to include a color at each grade. Some grades may be set to false in your project’s theme settings.

Please that if you are already importing the theme colors tokens, you do not need to import state tokens, they are included in the the same file.

Source file location: ./dist/core/tokens/colors

Import as follow in your Sass file @use '@department-of-veterans-affairs/clinical-design-system/dist/core/tokens/colors' as colors

	Token	Value
	'$info-lighter'	#e7f6f8
	'$info-light'	#99deea
	'$info'	#00bde3
	'$info-dark'	#009ec1
	'$info-darker'	#2e6276
	'$error-lighter'	#f4e3db
	'$error-light'	#f39268
	'$error'	#d54309
	'$error-dark'	#b50909
	'$error-darker'	#6f3331
	'$warning-lighter'	#faf3d1
	'$warning-light'	#fee685
	'$warning'	#ffbe2e
	'$warning-dark'	#E5A000
	'$warning-darker'	#936F38
	'$success-lighter'	#ecf3ec
	'$success-light'	#70e17b
	'$success'	#00a91c
	'$success-dark'	#008817
	'$success-darker'	#216e1f
	'$disabled-light'	#e6e6e6
	'$disabled'	#c9c9c9
	'$disabled-dark'	#adadad
	'$emergency'	#9c3d10
	'$emergency-dark'	#332d29
	'$emergency'	#9c3d10
	'$emergency-dark'	#332d29