A list of sass variables, mixins, extends, and global settings for codepens.

hsq-settings.scss

$gray-1:  hsl(30, 4%, 8%);
$gray-2:  hsl(30, 4%, 16%);
$gray-3:  hsl(30, 4%, 25%);
$gray-4:  hsl(30, 4%, 33%);
$gray-5:  hsl(30, 4%, 41%);
$gray-6:  hsl(30, 4%, 50%);
$gray-7:  hsl(30, 4%, 58%);
$gray-8:  hsl(30, 4%, 66%);
$gray-9:  hsl(30, 4%, 75%);
$gray-10: hsl(30, 4%, 83%);
$gray-11: hsl(30, 4%, 91%);
$gray-12: hsl(30, 4%, 96);

// sooo many color values!
$green:      hsl(150, 55%, 50%);//hsl(172, 60%, 40%);
$orange:     hsl(25, 95%, 60%);//hsl(27, 85%, 55%);
$red:        hsl(355, 60%, 55%);//hsl(3, 65%, 60%); // cool red
$blue:       hsl(200, 90%, 55%);//hsl(186, 80%, 59%);
$blue-deep:  adjust-color($blue, $hue: -5deg, $saturation: 30%, $lightness: -20%);
$blue-light: adjust-color($blue, $hue: -1deg, $saturation: 0%, $lightness: 30%);
$yellow:     hsl(48, 97%, 75%);
$purple:     hsl(275, 73%, 55%);
$gray-base:  hsl(30, 5%, 0%);
$color-highlight: adjust-color($yellow, $hue: 4, $lightness: 25%, $saturation: 20%); //for "highlight marker" colors

$white       : #fff;
$black       : #000;


$gray-pale: $gray-12;//hsl(25, 10%, 90%);//hsl(30, 4%, 92%); //light, slightly tan
  $gray-light: $gray-pale; // just a name, I seem to forget so just a backup =)
$gray-mid: $gray-5;//#b6ad9e;//adjust-color($gray-pale, $lightness: -20%, $saturation: 10%);
  $gray-med: $gray-mid;
  $gray-medium: $gray-mid;
$gray-dark: $gray-10;//adjust-color($gray-mid, $lightness: -30%, $saturation: -3%);
$gray-cool-dark: $gray-2;//hsl(226, 7%, 31%);
$black-faded: $gray-1;//hsl(0, 0%, 18%);

$primary-color:         $blue; // blue-green
$primary-color-light:   adjust-color($primary-color, $lightness: 20%, $saturation: 50%); //
$primary-color-dark:    $blue-deep;//adjust-color($primary-color, $lightness: -30%, $saturation: 10%); // darker blue
$secondary-color:       $gray-7;
$secondary-color-dark:  $gray-10; //adjust-color($secondary-color, $lightness: -10%, $saturation: 10%);
$secondary-color-light: $gray-12; //adjust-color($secondary-color, $hue: 10%, $lightness: 20%, $saturation: 20%);
//$yellow:                hsl(48, 97%, 75%);
$tertiary-color:        $red;
$tertiary-color-dark:   adjust-color($tertiary-color, $lightness: -20%, $saturation: -10%);
$tertiary-color-light:  adjust-color($tertiary-color, $lightness: 0%, $saturation: 30%);
$alert-color:           $red;
$success-color:         $green;//adjust-color($green, $hue: -5deg, $lightness: -10%, $saturation: 90%);
$success-color-light:   adjust-color($success-color, $lightness: 20%, $saturation: 50%);
$warning-color:         adjust-color($orange, $lightness: 5%, $saturation: -5%); // orangy
$info-color: $blue-light;

// custom color variables

$trans: rgba(0, 0, 0, 0); // transparent aluminum!
$page-color: #fff; // content body
$pad: 1rem;

$color-list-primaries: (
  green: $green,
  orange: $orange,
  red: $red,
  blue: $blue,
  blue-deep: adjust-color($blue, $hue: -5deg, $saturation: -20%, $lightness: -30%),
  yellow: $yellow,
  purple: $purple,
  white: #fff
);
$color-list-defaults: (
  default: $blue,
  primary: $blue,
  secondary: $blue-deep,
  tertiary: $gray-4,
  info: $gray-7,
  success: $green,
  warning: $orange,
  alert: $red
);

@function black($opacity) {
  @return rgba(0,0,0,$opacity);
}

@function white($opacity) {
  @return rgba(255,255,255,$opacity);
}

@mixin shadow($offset, $blur, $opacity) {
  box-shadow: $offset $offset $blur black($opacity);
}

@mixin label-color($color, $luma){
  @if lightness($color) >= $luma {
    color: $black;
    &:hover {
      color: $black;
    }
  }
  @else {
    color: $white;
  }
}
$gray-list: (
  gray-1 $gray-1, gray-2 $gray-2, gray-3 $gray-3, gray-4 $gray-4, gray-5 $gray-5, gray-6 $gray-6, gray-7 $gray-7, gray-8 $gray-8, gray-9 $gray-9, gray-10 $gray-10, gray-11 $gray-11, gray-12 $gray-12
);
%faded {
  opacity: 0.6;
}
@mixin shadow($offset, $blur, $opacity) {
  box-shadow: $offset $offset $blur black($opacity);
}

@each $name, $color in $color-list-primaries {
  .color-#{$name}{
    @include label-color($color, 60%);
    background: $color;
  }
}
/* active state */ // this stuff is normally managed in foundation settings
@each $state, $color in $color-list-defaults {
  .#{$state}.active{
    @include label-color($color, 60%);
    background: adjust-color($color, $lightness: -20%);
  }
  .button.#{$state}{
    @include label-color($color, 60%);
    background: $color;
    &:hover{
      background: adjust-color($color, $lightness: -15%);
    }
  }
}
@each $name, $color in $gray-list {
  .#{$name}{
    @include label-color($color, 60%);
    background: $color;
  }
}

.nopad {
  padding: 0 !important;
}
body, h1, h2, h3, h4, h5, h6, p, li, ol, .label, dl, dt, blockquote, cite, a, button, .button{
  font-family: 'Lato', sans-serif;
  color: inherit;
}
section.group{
  margin-bottom: $pad * 4;
}
code, .username, .docs, .error {
  font-family: 'Source Code Pro', monospaced;
}
.dark {
  background: $gray-8;
  @include label-color($gray-4, 60%);
}
.light {
  background: $gray-10;
}