structure

== config/_typography.scss

$font-size: (
  regular: 1rem,
  large: 1.5rem
);

$font-weight: (
  regular: 400,
  bold: 700
);

== config/_colors.scss

$brand-color: (
  jade: #44afbb,
  purple: #8938a7,
  darkpurple: #483a66,
  red: #ef721f,
  onyx: #323234,
  primary: map-get($brand-color, jade),
  secondary: map-get($brand-color, purple),
  tertiary: map-get($brand-color, darkpurple),
  contrast: #fff
);

$shadow-color: transparentize(map-get($brand-color, onyx), .75);

== config/_sizes.scss

$border-radius: 4px;

$gutter: (
  m: 25px,
  s: map-get($gutter, m) / 2,
  xs: map-get($gutter, m) / 3,
  xxs: map-get($gutter, m) / 4,
  l: map-get($gutter, m) * 2,
  xl: map-get($gutter, m) * 3,
  xxl: map-get($gutter, m) * 4
);

$box-shadow: (
  s: 0 1px 2px $shadow-color,
  m: 0 2px 4px $shadow-color,
  l: 0 4px 8px $shadow-color,
  xl: 0 8px 16px $shadow-color,
  xxl: 0 16px 32px $shadow-color
);

== components/_buttons.scss

$button-color: (
  primary-text: map-get($brand-color, contrast),
  primary-background: map-get($brand-color, primary),
  primary-border: map-get($brand-color, primary),
  secondary-text: map-get($brand-color, contrast),
  secondary-background: map-get($brand-color, secondary),
  secondary-border: map-get($brand-color, secondary)
  (...)
);

$button-border-radius: $border-radius;

$button-spacing: (
  regular: map-get($gutter, s) map-get($gutter, m)
  large: map-get($gutter, m) map-get($gutter, l)
);

$button-font-size: (
  regular: map-get($font-size, regular),
  large: map-get($font-size, large)
);

// Everything that's global and not overrideable for buttons
%button {
  line-height: 1.0;
  cursor: pointer;
  text-decoration: none;
  font-weight: map-get($font-weight, bold);
  text-align: center;
  border: 1px solid transparent;
  white-space: nowrap;
  display: inline-block;
  background-repeat: no-repeat;
  text-shadow: none;
  border-radius: $corners;
  box-shadow: map-get($box-shadow, m);
}

// Mixin for building buttons
@mixin button(
  $color: map-get($button-color, primary-text),
  $background-color: map-get($button-color, primary-background),
  $border-color: map-get($button-color, primary-border),
  $size: regular) {
  
  @extend %button;
  border-color: $border-color;
  background-color: $background-color;
  color: $color;
  padding: map-get($button-spacing, $size);
  font-size: map-get($button-font-size, $size);
}

.button--primary { 
  @include button();
}

.button--secondary {
  @include button(
    map-get($button-color, secondary-text),
    map-get($button-color, secondary-background),
    map-get($button-color, secondary-border));
}

.button--secondary-l {
  @include button(
    map-get($button-color, secondary-text),
    map-get($button-color, secondary-background),
    map-get($button-color, secondary-border),
    large);
}