Color pairing

Combining these variables achieves a recommended result from a cross-theme compatibility, accessibility and brand perspective.

Background	Foreground	Example	Description
`--flix-header-bg-color`	`--flix-header-color`	Header	Branded header
`--flix-button-primary-color`	`--flix-button-label-color`	Button	Branded primary button
`--flix-highlight-color`	`--flix-content-primary-color`	Nav Side	Branded selected state
`--flix-bg-primary-color` `--flix-bg-secondary-color` `--flix-box-bg-color`	`--flix-content-primary-color` `--flix-content-secondary-color` `--flix-heading-font-color` `--flix-link-color`	Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum	Default text
`--flix-bg-primary-color` `--flix-bg-secondary-color` `--flix-box-bg-color`	`--flix-ui-primary-dark-color`	Lorem ipsum	Branded highlighted text
`--flix-bg-primary-color` `--flix-bg-secondary-color` `--flix-box-bg-color`	`--flix-danger-dark-color` `--flix-success-dark-color` `--flix-warning-dark-color`	Lorem ipsum Lorem ipsum Lorem ipsum	State colored text
`--flix-icon-background-color`	`--flix-icon-secondary-color`	Icon Frame	Branded icons

Related Design Tokens