Color

Colors tokens provided by @hashicorp/mktg-global-styles:

https://github.com/hashicorp/mktg-global-styles/blob/main/custom-properties/color.css

Brand/Products

Colors associated with HashiCorp's brand and products.

brand

var(--brand)

var(--brand-secondary)

var(--brand-logomark)

var(--brand-accent)

var(--brand-link)

var(--brand-link-on-dark)

var(--brand-gradient)

boundary

var(--boundary)

var(--boundary-secondary)

var(--boundary-logomark)

var(--boundary-accent)

var(--boundary-link)

var(--boundary-link-on-dark)

var(--boundary-gradient)

consul

var(--consul)

var(--consul-secondary)

var(--consul-logomark)

var(--consul-accent)

var(--consul-link)

var(--consul-link-on-dark)

var(--consul-gradient)

nomad

var(--nomad)

var(--nomad-secondary)

var(--nomad-logomark)

var(--nomad-accent)

var(--nomad-link)

var(--nomad-link-on-dark)

var(--nomad-gradient)

packer

var(--packer)

var(--packer-secondary)

var(--packer-logomark)

var(--packer-accent)

var(--packer-link)

var(--packer-link-on-dark)

var(--packer-gradient)

terraform

var(--terraform)

var(--terraform-secondary)

var(--terraform-logomark)

var(--terraform-accent)

var(--terraform-link)

var(--terraform-link-on-dark)

var(--terraform-gradient)

vagrant

var(--vagrant)

var(--vagrant-secondary)

var(--vagrant-logomark)

var(--vagrant-accent)

var(--vagrant-link)

var(--vagrant-link-on-dark)

var(--vagrant-gradient)

vault

var(--vault)

var(--vault-secondary)

var(--vault-logomark)

var(--vault-accent)

var(--vault-link)

var(--vault-link-on-dark)

var(--vault-gradient)

waypoint

var(--waypoint)

var(--waypoint-secondary)

var(--waypoint-logomark)

var(--waypoint-accent)

var(--waypoint-link)

var(--waypoint-link-on-dark)

var(--waypoint-gradient)

Grays

var(--white)

var(--black)

var(--gray-6)

var(--gray-5)

var(--gray-4)

var(--gray-3)

var(--gray-2)

var(--gray-1)

Feedback

info

var(--info-l2)

var(--info-l1)

var(--info)

var(--info-d1)

warning

var(--warning-l2)

var(--warning-l1)

var(--warning)

var(--warning-d1)

danger

var(--danger-l2)

var(--danger-l1)

var(--danger)

var(--danger-d1)

success

var(--success-l2)

var(--success-l1)

var(--success)

var(--success-d1)

Code

Please note: code- colour tokens are not generally in use, code syntax coloration has been (mostly) localized to the @hashicorp/react-code-block package. We have a pending task to finish cleaning these up.

var(--code-dark)

var(--code-light)

var(--code-light-transparent)

var(--code-comments)

var(--code-strings)

var(--code-numbers)

var(--code-operators)

var(--code-properties)

var(--code-control)