responsive-type-presets.scss

// For use in conjunction with breakpoint mixin: https://gist.github.com/tylerpaige/63dc3cf5fdb8e8a98175e6c5c883e0d3

// Configure a list of typestyle presets, first by supplying a base style
// and optionally by creating additional rules for specific breakpoints.
// NOTE: Root font size is generally 16px
// NOTE: the `responsive-type-preset` mixin applies the base styles, but the `type-preset` mixin does not.
//       for this reason, you may want your individual breakpoint-scoped styles to be a bit verbose.
$type-sizes: (
  "metadata": (
    base: (
      font-size: 0.6rem,
      line-height: 1.3,
      font-family: $favorit-mono
    ),
    md: (
      font-size: 0.8rem,
      line-height: 1.3125,
      font-family: $favorit-mono
    )
  ),
  flashline: (
    base: (
      font-size: 0.6rem,
      line-height: 1.3,
      font-family: $favorit
    ),
    md: (
      font-size: 0.8rem,
      line-height: 1.3125,
      font-family: $favorit
    )
  ),
  "h4-ul": (
    base: (
      font-size: 0.7rem,
      line-height: 1.803,
      font-family: $favorit-extended
    ),
    md: (
      font-size: 0.9rem,
      line-height: 1.803,
      font-family: $favorit-extended
    )
  ),
  "h3-ul": (
    base: (
      font-size: 0.8rem,
      line-height: 1.25,
      font-family: $favorit-extended
    ),
    md: (
      font-size: 1.2rem,
      line-height: 1.25,
      font-family: $favorit-extended
    )
  ),
  body: (
    base: (
      font-size: 0.8rem,
      line-height: 1.1875,
      font-family: $favorit,
      font-weight: normal
    ),
    md: (
      font-size: 0.9rem,
      line-height: 1.25,
      font-family: $favorit,
      font-weight: normal
    )
  ),
  "body--large": (
    base: (
      font-size: 0.8rem,
      line-height: 1.1875,
      font-family: $favorit,
      font-weight: normal
    ),
    md: (
      font-size: 1.2rem,
      line-height: 1.208,
      font-family: $favorit,
      font-weight: normal
    )
  ),
  h4: (
    base: (
      font-size: 0.8rem,
      line-height: 1.1,
      font-family: $favorit-extended,
      font-weight: normal
    ),
    md: (
      font-size: 1.2rem,
      line-height: 1.1,
      font-family: $favorit-extended,
      font-weight: normal
    )
  ),
  h3: (
    base: (
      font-size: 1.2rem,
      line-height: 1.1,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    md: (
      font-size: 1.8rem,
      line-height: 1.1,
      font-family: $favorit-expanded,
      font-weight: normal
    )
  ),
  h2: (
    base: (
      font-size: 1.5rem,
      line-height: 1.2,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    md: (
      font-size: 2.4rem,
      line-height: 1.2,
      font-family: $favorit-expanded,
      font-weight: normal
    )
  ),
  h1: (
    base: (
      font-size: 1.8rem,
      line-height: 1.2,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    md: (
      font-size: 3.6rem,
      line-height: 1.2,
      font-family: $favorit-expanded,
      font-weight: normal
    )
  ),
  jumbo: (
    base: (
      font-size: 2rem,
      line-height: 1.2,
      text-transform: uppercase,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    sm: (
      font-size: 4rem,
      line-height: 1.2,
      text-transform: uppercase,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    md: (
      font-size: 5rem,
      line-height: 1.2,
      text-transform: uppercase,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    lg: (
      font-size: 7rem,
      line-height: 1.2,
      text-transform: uppercase,
      font-family: $favorit-expanded,
      font-weight: normal
    ),
    xl: (
      font-size: 9rem,
      line-height: 1.2,
      text-transform: uppercase,
      font-family: $favorit-expanded,
      font-weight: normal
    )
  )
);

/*
Returns the value of a property for a given preset and breakpoint.
example:

  line-height: type-preset-property(jumbo, desktop, line-height) + 3;

@param  {string}  $preset-name [The name of the preset (e.g. jumbo, 'h1', 'metadata')]
@param  {string}  $breakpoint  [The name of the breakpoint (which the direct child of the preset)]
@param  {string}  $property    [The property for which to return a value]
*/
@function type-preset-property($preset-name, $breakpoint, $property) {
  @if not map-has-key($type-sizes, $preset-name) {
    @warn "No typestyles for '#{$preset-name}'. Available options: #{map-keys($type-sizes)}";
    @return "";
  }
  $preset: map-get($type-sizes, $preset-name);

  @if not map-has-key($preset, $breakpoint) {
    @warn "No typestyles for '#{$preset-name}' for the specified scope '#{$breakpoint}'. Available options: #{map-keys($type-sizes)}";
  }
  $breakpoint-preset: map-get($preset, $breakpoint);

  @if not map-has-key($breakpoint-preset, $property) {
    @warn "No '#{$property}' found in typestyle preset #{$preset-name} > #{$breakpoint}";
    @return "";
  }
  $value: map-get($breakpoint-preset, $property);

  @return $value;
}

/*
Applies all the properties and values defined for a type preset for a single breakpoint.

@param  {string}  $preset-name [The name of the preset (e.g. jumbo, 'h1', 'metadata')]
@param  {string}  $breakpoint  [The name of the breakpoint (which the direct child of the preset)]
*/
@mixin type-preset($preset-name, $breakpoint: "base") {
  $presetExists: map-has-key($type-sizes, $preset-name);
  $breakpointExists: $presetExists and
    map-has-key(map-get($type-sizes, $preset-name), $breakpoint);

  @if $presetExists and $breakpointExists {
    $preset: map-get($type-sizes, $preset-name);
    $breakpoint-preset: map-get($preset, $breakpoint);
    @each $property, $value in $breakpoint-preset {
      #{$property}: $value;
    }
  } @else if not $presetExists {
    @warn "No typestyles for '#{$preset-name}'. Available options: #{map-keys($type-sizes)}";
  } @else {
    @warn "No typestyles for '#{$preset-name}' for the specified scope '#{$breakpoint}'. Available options: #{map-keys(map-get($type-sizes, $preset-name))}";
  }
}

/*
Applies all the properties and values defined for a type preset for all breakpoints:
first by applying the base styles, then by applying breakpoint-scoped styles using the `breakpoint` mixin

@param  {string}  $preset-name  [The name of the preset (e.g. jumbo, 'h1', 'metadata')]
*/
@mixin responsive-type-preset($preset-name) {
  $preset-exists: map-has-key($type-sizes, $preset-name);
  @if $preset-exists {
    $breakpoints-in-preset: map-keys(map-get($type-sizes, $preset-name));

    @include type-preset($preset-name);

    @each $breakpoint in $breakpoints-in-preset {
      @if $breakpoint != "base" {
        @include breakpoint($breakpoint) {
          @include type-preset($preset-name, $breakpoint);
        }
      }
    }
  } @else {
    @warn "No typestyles for '#{$preset-name}'. Available options: #{map-keys($type-sizes)}";
  }
}