@mixin make-color-classes($name, $palette) {
  .text-#{$name}-lighter { color: map_get($palette, 'lighter'); }
  .text-#{$name}-light { color: map_get($palette, 'light'); }
  .text-#{$name} { color: map_get($palette, 'default'); }
  .text-#{$name}-dark { color: map_get($palette, 'dark'); }
  .text-#{$name}-darker { color: map_get($palette, 'darker'); }

  .bg-#{$name}-lighter { background-color: map_get($palette, 'lighter'); }
  .bg-#{$name}-light { background-color: map_get($palette, 'light'); }
  .bg-#{$name} { background-color: map_get($palette, 'default'); }
  .bg-#{$name}-dark { background-color: map_get($palette, 'dark'); }
  .bg-#{$name}-darker { background-color: map_get($palette, 'darker'); }
}

@mixin textColor($color, $variant) {
  color: map_get($color, $variant);
}

@mixin bgColor($color, $variant) {
  background-color: map_get($color, $variant);
}

@mixin borderColor($color, $variant) {
  border-color: map_get($color, $variant);
}