Base colors

colors.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
 
$include-html-schema-classes: true !default;
 
$tone-darkest:    #131B26 !default;
$tone-darker:     #1D2838 !default;
$tone-dark:       #485466 !default;
$tone-light:      #C0C7D1 !default;
$tone-lighter:    #D5DBE3 !default;
$tone-lightest:   #F0F3F7 !default;
 
$schema-success:  #36B34A !default;
$schema-warning:  #FFB319 !default;
$schema-danger:   #DE2E07 !default;
$schema-info:     #3DB4CC !default;
$schema-brand:    #0081C2 !default;
 
@function light-color($name) {
  @return scale-color($name, $lightness: 80%);
}
 
%background {
  &-darkest  { background-color: $tone-darkest    ;}
  &-darker   { background-color: $tone-darker     ;}
  &-dark     { background-color: $tone-dark       ;}
 
  &-light    { background-color: $tone-light      ;}
  &-lighter  { background-color: $tone-lighter    ;}
  &-lightest { background-color: $tone-lightest   ;}
 
  &-brand    { background-color: $schema-brand    ;}
 
  &-success  { background-color: $schema-success  ;}
  &-warning  { background-color: $schema-warning  ;}
  &-danger   { background-color: $schema-danger   ;}
  &-info     { background-color: $schema-info     ;}
 
  &-success-light  { background-color: light-color($schema-success) ;}
  &-warning-light  { background-color: light-color($schema-warning) ;}
  &-danger-light   { background-color: light-color($schema-danger ) ;}
  &-info-light     { background-color: light-color($schema-info   ) ;}
}
 
@if $include-html-schema-classes {
  .bg {
    &-darkest  { @extend %background-darkest  ;}
    &-darker   { @extend %background-darker   ;}
    &-dark     { @extend %background-dark     ;}
 
    &-light    { @extend %background-light    ;}
    &-lighter  { @extend %background-lighter  ;}
    &-lightest { @extend %background-lightest ;}
 
    &-brand    { @extend %background-brand    ;}
 
    &-success  { @extend %background-success  ;}
    &-warning  { @extend %background-warning  ;}
    &-danger   { @extend %background-danger   ;}
    &-info     { @extend %background-info     ;}
 
    &-success-light { @extend %background-success-light ;}
    &-warning-light { @extend %background-warning-light ;}
    &-danger-light  { @extend %background-danger-light  ;}
    &-info-light    { @extend %background-info-light    ;}
  }
}

more-complex.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
 
$include-html-schema-classes: true !default;
 
$tone-darkest:    #131B26 !default;
$tone-darker:     #1D2838 !default;
$tone-dark:       #485466 !default;
$tone-light:      #C0C7D1 !default;
$tone-lighter:    #D5DBE3 !default;
$tone-lightest:   #F0F3F7 !default;
 
$schema-success:  #36B34A !default;
$schema-warning:  #FFB319 !default;
$schema-danger:   #DE2E07 !default;
$schema-info:     #3DB4CC !default;
$schema-brand:    #0081C2 !default;
 
$tone: (
  darkest:  $tone-darkest,
  darker:   $tone-darker,
  dark:     $tone-dark,
  light:    $tone-light,
  lighter:  $tone-lighter,
  lightest: $tone-lightest,
);
$schema: (
  success:  $schema-success,
  warning:  $schema-warning,
  danger:   $schema-danger,
  info:     $schema-info,
  brand:    $schema-brand,
);
 
@function tone($name) {
  @return map-get($tone,$name);
}
@function schema($name) {
  @return map-get($schema,$name);
}
@function light-color($name) {
  @return scale-color($name, $lightness: 80%);
}
 
%background {
  @each $color in map-keys($tone) {
    &-#{$color}       { background-color: tone($color); }
  }
  @each $color in map-keys($schema) {
    &-#{$color}       { background-color: schema($color); }
    &-#{$color}-light { background-color: light-color(schema($color)); }
  }
}
 
@if $include-html-schema-classes {
  .bg {
    @each $color in map-keys($tone) {
      &-#{$color}       { @extend %background-#{$color}; }
    }
    @each $color in map-keys($schema) {
      &-#{$color}       { @extend %background-#{$color}; }
      &-#{$color}-light { @extend %background-#{$color}-light; }
    }
  }
}