$colours: "gray-hs" var(--gray-hs), "gray" var(--gray), "gray-0" var(--gray-0),
  "gray-100" var(--gray-100), "gray-200" var(--gray-200),
  "gray-300" var(--gray-300), "gray-400" var(--gray-400),
  "gray-800" var(--gray-800), "primary" var(--blue),
  "primary-0" var(--primary-0), "primary-100" var(--primary-100),
  "primary-200" var(--primary-200), "primary-250" var(--primary-250),
  "primary-300" var(--primary-300), "primary-400" var(--primary-400),
  "primary-600" var(--primary-600), "primary-800" var(--primary-800),
  "secondary" var(--green), "secondary-0" var(--secondary-0),
  "secondary-100" var(--secondary-100), "secondary-200" var(--secondary-200),
  "secondary-400" var(--secondary-400), "tertiary" var(--orange),
  "tertiary-0" var(--tertiary-0), "tertiary-100" var(--tertiary-100),
  "tertiary-400" var(--tertiary-400), "red" var(--red), "red-0" var(--red-0),
  "red-100" var(--red-100), "red-400" var(--red-400), "info" var(--blue),
  "success" var(--secondary-200), "warning" var(--tertiary-400),
  "error" var(--red-400), "white" var(--white), "black" var(--black); // colors
@each $i in $colours {
  .sb-bg-color-#{nth($i, 1)} {
    background: nth($i, 2) !important;
  }
  .sb-color-#{nth($i, 1)} {
    color: nth($i, 2) !important;
  }
}

// bg colors
.sb-bg-white {
    background: $white !important;
}
//to clean
.color-3, .sb-text-gray-800 {
    color: $gray-800; 
}
.sb-bg-color-black {
    background-color: $black;
}
.sb-color-black {
  color: $black;
}