.color--green { --component-color: var(--success-green); }
.color--red { --component-color: var(--error-red); }
.color--orange { --component-color: var(--warning-orange); }
.color--blue { --component-color: var(--info-blue); }
.color--cyan { --component-color: var(--color-1); }
.color--pink { --component-color: var(--color-2); }
.color--grey { --component-color: var(--gray); }
.color--black { --component-color: black; }
.color--dark { --component-color: var(--dark); }
.color--white { --component-color: white; }
.is-primary { --component-color: var(--color-1); }
.is-secondary { --component-color: var(--gray); }
.is-success { --component-color: var(--success-green); }
.is-error { --component-color: var(--error-red); }
.is-warning { --component-color: var(--warning-orange); }
.is-info { --component-color: var(--info-blue); }