Header
Color variables to use inplace of hardcoded values
$primary-0.c-primary-0.bg-primary-0.bc-primary-0$primary-100.c-primary-100.bg-primary-100.bc-primary-100$primary-200.c-primary-200.bg-primary-200.bc-primary-200$primary-300.c-primary-300.bg-primary-300.bc-primary-300$primary-400.c-primary-400.bg-primary-400.bc-primary-400$primary-500.c-primary-500.bg-primary-500.bc-primary-500$primary-600.c-primary-600.bg-primary-600.bc-primary-600$primary-700.c-primary-700.bg-primary-700.bc-primary-700$primary-800.c-primary-800.bg-primary-800.bc-primary-800$primary-900.c-primary-900.bg-primary-900.bc-primary-900$secondary-0.c-secondary-0.bg-secondary-0.bc-secondary-0$secondary-100.c-secondary-100.bg-secondary-100.bc-secondary-100$secondary-200.c-secondary-200.bg-secondary-200.bc-secondary-200$secondary-300.c-secondary-300.bg-secondary-300.bc-secondary-300$secondary-400.c-secondary-400.bg-secondary-400.bc-secondary-400$secondary-500.c-secondary-500.bg-secondary-500.bc-secondary-500$secondary-600.c-secondary-600.bg-secondary-600.bc-secondary-600$secondary-700.c-secondary-700.bg-secondary-700.bc-secondary-700$secondary-800.c-secondary-800.bg-secondary-800.bc-secondary-800$secondary-900.c-secondary-900.bg-secondary-900.bc-secondary-900$tertiary-0.c-tertiary-0.bg-tertiary-0.bc-tertiary-0$tertiary-100.c-tertiary-100.bg-tertiary-100.bc-tertiary-100$tertiary-200.c-tertiary-200.bg-tertiary-200.bc-tertiary-200$tertiary-300.c-tertiary-300.bg-tertiary-300.bc-tertiary-300$tertiary-400.c-tertiary-400.bg-tertiary-400.bc-tertiary-400$tertiary-500.c-tertiary-500.bg-tertiary-500.bc-tertiary-500$tertiary-600.c-tertiary-600.bg-tertiary-600.bc-tertiary-600$tertiary-700.c-tertiary-700.bg-tertiary-700.bc-tertiary-700$tertiary-800.c-tertiary-800.bg-tertiary-800.bc-tertiary-800$tertiary-900.c-tertiary-900.bg-tertiary-900.bc-tertiary-900$success-0.c-success-0.bg-success-0.bc-success-0$success-100.c-success-100.bg-success-100.bc-success-100$success-200.c-success-200.bg-success-200.bc-success-200$success-300.c-success-300.bg-success-300.bc-success-300$success-400.c-success-400.bg-success-400.bc-success-400$success-500.c-success-500.bg-success-500.bc-success-500$success-600.c-success-600.bg-success-600.bc-success-600$success-700.c-success-700.bg-success-700.bc-success-700$success-800.c-success-800.bg-success-800.bc-success-800$success-900.c-success-900.bg-success-900.bc-success-900$warning-0.c-warning-0.bg-warning-0.bc-warning-0$warning-100.c-warning-100.bg-warning-100.bc-warning-100$warning-200.c-warning-200.bg-warning-200.bc-warning-200$warning-300.c-warning-300.bg-warning-300.bc-warning-300$warning-400.c-warning-400.bg-warning-400.bc-warning-400$warning-500.c-warning-500.bg-warning-500.bc-warning-500$warning-600.c-warning-600.bg-warning-600.bc-warning-600$warning-700.c-warning-700.bg-warning-700.bc-warning-700$warning-800.c-warning-800.bg-warning-800.bc-warning-800$warning-900.c-warning-900.bg-warning-900.bc-warning-900$error-0.c-error-0.bg-error-0.bc-error-0$error-100.c-error-100.bg-error-100.bc-error-100$error-200.c-error-200.bg-error-200.bc-error-200$error-300.c-error-300.bg-error-300.bc-error-300$error-400.c-error-400.bg-error-400.bc-error-400$error-500.c-error-500.bg-error-500.bc-error-500$error-600.c-error-600.bg-error-600.bc-error-600$error-700.c-error-700.bg-error-700.bc-error-700$error-800.c-error-800.bg-error-800.bc-error-800$error-900.c-error-900.bg-error-900.bc-error-900$neutral-0.c-neutral-0.bg-neutral-0.bc-neutral-0$neutral-100.c-neutral-100.bg-neutral-100.bc-neutral-100$neutral-200.c-neutral-200.bg-neutral-200.bc-neutral-200$neutral-300.c-neutral-300.bg-neutral-300.bc-neutral-300$neutral-400.c-neutral-400.bg-neutral-400.bc-neutral-400$neutral-500.c-neutral-500.bg-neutral-500.bc-neutral-500$neutral-600.c-neutral-600.bg-neutral-600.bc-neutral-600$neutral-700.c-neutral-700.bg-neutral-700.bc-neutral-700$neutral-800.c-neutral-800.bg-neutral-800.bc-neutral-800$neutral-900.c-neutral-900.bg-neutral-900.bc-neutral-900Text colour classes take on the syntax of .c-{palette}-{shade}.
The quick brown fox jumped over the lazy dog
<p class="c-secondary-500">...</p>Similar to text colours, background classes take on the syntax of .bg-{palette}-{shade}.
<button class="bg-primary-500">...</button>Border colours also take take on the syntax of .bc-{palette}-{shade}.
<button class="bc-primary-500">...</button>All color classes support a hover: modifier. The syntax is .hover:bg-{palette}-{shade}.
The quick brown fox jumped over the lazy dog
<p className="c-secondary-500 hover:c-primary-500">...</p>
<button className="bg-primary-500 hover:bg-primary-600">...</button>
<button className="bc-primary-500 hover:bc-primary-800">...</button>