Colors SCSS

colors.scss

// The background color
$white: #f1f1f1;

// The text color
$black: #003A40;

// The highlight color
$blue: rgba(0, 0, 255, 1);

// A lighter highlight color
$thumbblue: rgba(38, 38, 255, 1);


// Color combinations. Colors are not used standalone but in pairs
@mixin colors($name) {
  @if ($name == 'white-on-blue') {
    color: $white;
    background-color: $blue;
  }

  @if ($name == 'white-on-thumbblue') {
    color: $white;
    background-color: $thumbblue;
  }

  @if ($name == 'blue-on-white') {
    color: $blue;
    background-color: $white;
  }
}


// Color classes
.white {
  background: #f1f1f1;
};

.black {
  background: #003A40;
};

.blue {
  background: rgba(0, 0, 255, 1);
};

.thumbblue {
  background: rgba(38, 38, 255, 1);
};