_background.scss

.bg-page {
  background-color: $shade-gray;
}

.bg-component {
  background-color: $white;
}

@each $id, $color in $brand-palette {
  .bg-#{$id} { background-color: nth($color, 1); }
  .bg-#{$id}-high { background-color: nth($color, 2); }
  .bg-#{id}-low { background-color: nth($color, 3); }
  .bg-#{id}-gradient { background: radial-gradient(farthest-corner at 0% 0%, nth($color, 2), nth($color, 3)); }
}