.white {
  color: var(--white);
}

.smoke {
  color: var(--smoke);
}

.light,
.light {
  color: var(--light);
}

.silver {
  color: var(--silver);
}

.dark,
.dark {
  color: var(--dark);
}

.gray,
.grey {
  color: var(--gray);
}

.black {
  color: var(--black);
}

.red {
  color: var(--red);
}

.pink {
  color: var(--pink);
}

.grape {
  color: var(--grape);
}

.violet {
  color: var(--violet);
}

.indigo {
  color: var(--indigo);
}

.blue {
  color: var(--blue);
}

.cyan {
  color: var(--cyan);
}

.teal {
  color: var(--teal);
}

.green {
  color: var(--green);
}

.lime {
  color: var(--lime);
}

.yellow {
  color: var(--yellow);
}

.orange {
  color: var(--orange);
}


.primary {
  color: var(--state-primary);
}

.secondary {
  color: var(--state-secondary);
}

.success {
  color: var(--state-success);
}

.info {
  color: var(--state-info);
}

.warning {
  color: var(--state-warning);
}

.danger {
  color: var(--state-danger);
}

.disabled {
  color: var(--state-disabled);
}

.transparent {
  color: transparent;
}

.bgWhite {
  background-color: var(--white);
}

.bgSmoke {
  background-color: var(--smoke);
}

.bgLight,
.bgLight {
  background-color: var(--light);
}

.bgSilver {
  background-color: var(--silver);
}

.bgDark,
.bgDark {
  background-color: var(--dark);
}

.bgGray,
.bgGrey {
  background-color: var(--gray);
}

.bgBlack {
  background-color: var(--black);
}

.bgRed {
  background-color: var(--red);
}

.bgPink {
  background-color: var(--pink);
}

.bgGrape {
  background-color: var(--grape);
}

.bgViolet {
  background-color: var(--violet);
}

.bgIndigo {
  background-color: var(--indigo);
}

.bgBlue {
  background-color: var(--blue);
}

.bgCyan {
  background-color: var(--cyan);
}

.bgTeal {
  background-color: var(--teal);
}

.bgGreen {
  background-color: var(--green);
}

.bgLime {
  background-color: var(--lime);
}

.bgYellow {
  background-color: var(--yellow);
}

.bgOrange {
  background-color: var(--orange);
}

.bgPrimary {
  background-color: var(--state-primary);
}

.bgSecondary {
  background-color: var(--state-secondary);
}

.bgSuccess {
  background-color: var(--state-success);
}

.bgInfo {
  background-color: var(--state-info);
}

.bgWarning {
  background-color: var(--state-warning);
}

.bgDanger {
  background-color: var(--state-danger);
}

.bgDisabled {
  background-color: var(--state-disabled);
}

.bgTransparent {
  background-color: transparent;
}

.bordWhite {
  border-color: var(--white);
}

.bordSmoke {
  border-color: var(--smoke);
}

.bordLight,
.bordLight {
  border-color: var(--light);
}

.bordSilver {
  border-color: var(--silver);
}

.bordDark,
.bordDark {
  border-color: var(--dark);
}

.bordGray,
.bordGrey {
  border-color: var(--gray);
}

.bordBlack {
  border-color: var(--black);
}

.bordRed {
  border-color: var(--red);
}

.bordPink {
  border-color: var(--pink);
}

.bordGrape {
  border-color: var(--grape);
}

.bordViolet {
  border-color: var(--violet);
}

.bordIndigo {
  border-color: var(--indigo);
}

.bordBlue {
  border-color: var(--blue);
}

.bordCyan {
  border-color: var(--cyan);
}

.bordTeal {
  border-color: var(--teal);
}

.bordGreen {
  border-color: var(--green);
}

.bordLime {
  border-color: var(--lime);
}

.bordYellow {
  border-color: var(--yellow);
}

.bordOrange {
  border-color: var(--orange);
}

.bordPrimary {
  border-color: var(--state-primary);
}

.bordSecondary {
  border-color: var(--state-secondary);
}

.bordSuccess {
  border-color: var(--state-success);
}

.bordInfo {
  border-color: var(--state-info);
}

.bordWarning {
  border-color: var(--state-warning);
}

.bordDanger {
  border-color: var(--state-danger);
}

.bordDisabled {
  border-color: var(--state-disabled);
}

.bordTransparent {
  border-color: transparent;
}