Foundations
Colours
Live values for the current theme, contrast and product accent. Change them in the appearance settings and every swatch and ratio updates. Ratios are the WCAG contrast of the sample text against the swatch.
Brand
The only hard-coded colours in Monarch. Every other colour derives from them.
brand.red
brand.blue
brand.green
brand.yellow
brand.violet
Surfaces
--mn-color-bg-canvas
--mn-color-bg-surface
--mn-color-bg-raised
--mn-color-bg-subtle
--mn-color-bg-muted
--mn-color-bg-emphasis
--mn-color-bg-inverse
Text on canvas
--mn-color-text-default
--mn-color-text-muted
--mn-color-text-subtle
--mn-color-text-disabled
--mn-color-text-link
Borders
--mn-color-border-subtle
--mn-color-border-default
--mn-color-border-strong
--mn-color-border-input
Accent
accent The product brand. Never a status.
accent-solid
accent-solid-hover
accent-solid-active
accent-subtle
accent-subtle-hover
accent-strong on canvas
accent-strong
accent-border
Danger
danger Rook Red: errors and destructive actions.
danger-solid
danger-solid-hover
danger-solid-active
danger-subtle
danger-subtle-hover
danger-strong on canvas
danger-strong
danger-border
Success
success Rook Green: completed and healthy.
success-solid
success-solid-hover
success-solid-active
success-subtle
success-subtle-hover
success-strong on canvas
success-strong
success-border
Warning
warning Rook Yellow: needs attention.
warning-solid
warning-solid-hover
warning-solid-active
warning-subtle
warning-subtle-hover
warning-strong on canvas
warning-strong
warning-border
Info
info Rook Blue: neutral information.
info-solid
info-solid-hover
info-solid-active
info-subtle
info-subtle-hover
info-strong on canvas
info-strong
info-border