@creativecommons/vocabulary/scss/color.scss

// Brand
$color-tomato: rgb(237, 89, 47);
$color-orange: rgb(251, 119, 41);
$color-gold: rgb(239, 190, 0);
$color-forest-green: rgb(4, 166, 53);
$color-dark-turquoise: rgb(5, 181, 218);
$color-dark-slate-blue: rgb(60, 92, 153);
$color-dark-slate-gray: rgb(51, 51, 51);

// Neutral
$color-dark-gray: rgb(118, 118, 118);
$color-gray: rgb(176, 176, 176);
$color-light-gray: rgb(216, 216, 216);
$color-lighter-gray: rgb(245, 245, 245);

// Binary
$color-black: rgb(0, 0, 0);
$color-white: rgb(255, 255, 255);

// Interaction
$color-brighter-tomato: rgb(255, 105, 51);
$color-brighter-gold: rgb(245, 212, 0);
$color-brighter-forest-green: rgb(0, 184, 80);

// Feedback
$color-dark-success: rgb(4, 166, 53);
$color-light-success: rgb(224, 242, 191);
$color-dark-warning: rgb(242, 171, 32);
$color-light-warning: rgb(250, 236, 188);
$color-dark-error: rgb(200, 59, 30);
$color-light-error: rgb(255, 201, 201);
$color-dark-info: rgb(25, 80, 184);
$color-light-info: rgb(209, 220, 241);

// Classes
$brand-colors: (
  "tomato": $color-tomato,
  "orange": $color-orange,
  "gold": $color-gold,
  "forest-green": $color-forest-green,
  "dark-turquoise": $color-dark-turquoise,
  "dark-slate-blue": $color-dark-slate-blue,
  "dark-slate-gray": $color-dark-slate-gray
);

@mixin color-classes($color-namespace, $brand-color) {
  .has-background-#{$color-namespace} {
    background-color: $brand-color;
  }

  .has-text-#{$color-namespace}, // Bulma convention
  .has-color-#{$color-namespace} {
    color: $brand-color;
  }
}

@each $color-namespace, $brand-color in $brand-colors {
  @include color-classes($color-namespace, $brand-color);
}