Upgrade to Susy 3 and replace grid mixins with new span and gutter functions

Most of Susy's mixins have been deprecated, `@include container()`, `@include full()`, `@include span()`, `@include prefix()`, `@include suffix()`, `@include gallery()`, etc.

Fixes #1114

docs/_sass/minimal-mistakes/vendor/susy/plugins/_svg-grid.scss

@@ -0,0 +1,5 @@
+// SVG Grid Background
+// ===================
+
+@import 'svg-grid/prefix';
+@import 'svg-grid/svg-unprefix';

docs/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss

@@ -0,0 +1,7 @@
+// Prefixed SVG Plugin
+// ===================
+
+@import 'svg-settings';
+@import 'svg-utilities';
+@import 'svg-grid-math';
+@import 'svg-api';

docs/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss

@@ -0,0 +1,114 @@
+/// Plugin: SVG Grid Image
+/// ======================
+/// @group plugin_svg-grid
+/// @see susy-svg-grid
+
+
+
+/// ## Overview
+/// If you want to generate svg-backgrounds
+/// for help visualizing and debugging your grids,
+/// import the SVG Grid Plugin.
+///
+/// The plugin adds `svg-grid-colors` setting
+/// to your global defaults,
+/// which you can override in `$susy`.
+/// It also provides you with a new function,
+/// `susy-svg-grid()`,
+/// which will return inline svg for use in
+/// backgrounds or generated content.
+///
+/// This function come with an unprefixed alias by default,
+/// using the `svg-grid` import.
+/// If you only only want prefixed versions of the API,
+/// import the `svg-grid/prefix` partial instead.
+///
+/// @group plugin_svg-grid
+///
+/// @example scss - importing the plugin
+///   // The full path to import Susy will depend on your setup…
+///
+///   // unprefixed
+///   @import 'plugins/svg-grid';
+///
+///   // prefixed
+///   @import 'plugins/svg-grid/prefix';
+///
+/// @example scss - generating background grids
+///   .grid {
+///     background: susy-svg-grid() no-repeat scroll;
+///   }
+
+
+
+// SVG Grid
+// --------
+/// Return inline svg-data in  to display the grid.
+///
+/// @group plugin_svg-grid
+///
+/// @param {Map | List} $grid [$susy] -
+///   Map or shorthand defining the current grid
+/// @param {Color | List | null} $colors [null] -
+///   Column color, or list of colors for column-gradient,
+///   used to override the global `svg-grid-colors` setting
+/// @param {Length | null} $offset [null] -
+///   Manually override the default grid-image offset,
+///   to account for grid edges
+///
+/// @return {String} -
+///   CSS inline-data SVG string, in `url(<svg>)` format,
+///   for use in image or content properties
+/// @example scss
+///   .grid {
+///     background: susy-svg-grid() no-repeat scroll;
+///   }
+@function susy-svg-grid(
+  $grid: $susy,
+  $colors: null,
+  $offset: null
+) {
+  // Grid parsing & normalizing
+  $grid: susy-compile($grid, $context-only: true);
+
+  // Color and gradient handling
+  $gradient: '';
+
+  @if (not $colors) {
+    $colors: susy-get('svg-grid-colors');
+  }
+
+  @if length($colors) > 1 {
+    $gradient: _susy-svg-gradient($colors);
+    $colors: 'url(%23susy-svg-gradient)';
+  } @else {
+    $colors: _susy-svg-color($colors);
+  }
+
+  // Get a default image-width
+  $span: (
+    'span': map-get($grid, 'columns'),
+    'spread': map-get($grid, 'container-spread'),
+  );
+  $span: map-merge($grid, $span);
+  $image-width: su-call('su-span', $span);
+  $image-width: if((type-of($image-width) == 'number'), $image-width, 100%);
+
+  // SVG construction
+  $columns: map-get($grid, 'columns');
+  $offset: $offset or _susy-svg-offset($grid);
+
+  $attrs: 'fill="#{$colors}" width="#{$image-width}"';
+  $svg: 'data:image/svg+xml,';
+  $svg: $svg + '%3Csvg xmlns="http://www.w3.org/2000/svg" #{$attrs} %3E';
+  $svg: $svg + $gradient;
+
+  @for $column from 1 through length($columns) {
+    $width: susy-span(1 narrow at $column, $grid);
+    $x: _susy-svg-column-position($column, $grid);
+
+    $svg: $svg + _susy-svg-rect($x, $width, $offset);
+  }
+
+  @return url('#{$svg}%3C/svg%3E');
+}

docs/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss

@@ -0,0 +1,67 @@
+// SVG Grid Math
+// =============
+
+
+
+// SVG Column Position
+// -------------------
+/// Determine the proper horizontal position
+/// for a column rectangle
+///
+/// @access private
+///
+/// @param {Integer} $column -
+///   1-indexed column location on the grid
+/// @param {Map} $grid -
+///   Normalized settings map representing the current grid
+///
+/// @return {Length} -
+///   Horizontal position of svg column rectangle,
+///   as distance from the grid edge
+@function _susy-svg-column-position(
+  $column,
+  $grid
+) {
+  $x: $column - 1;
+
+  @if ($x > 0) {
+    $x: susy-span(first $x wide, $grid);
+  }
+
+  @return $x;
+}
+
+
+
+// SVG Offset
+// ----------
+/// Determine if a grid image needs to be offset,
+/// to account for edge gutters.
+///
+/// @access private
+///
+/// @param {Map} $grid -
+///   Normalized settings map representing the current grid
+///
+/// @return {Length | null} -
+///   Expected distance from container edge to first column,
+///   based on spread values and gutter-widths
+@function _susy-svg-offset(
+  $grid
+) {
+  $columns: su-valid-columns(map-get($grid, 'columns'));
+  $gutters: su-valid-gutters(map-get($grid, 'gutters'));
+  $container: su-valid-spread(map-get($grid, 'container-spread')) + 1;
+
+  @if ($container == 0) {
+    @return null;
+  }
+
+  $gutter: su-call('su-gutter', $grid);
+
+  @if (type-of($gutter) == 'string') {
+    @return 'calc(#{$container} * #{$gutter} / 2)';
+  }
+
+  @return $container * $gutter / 2;
+}

docs/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss

@@ -0,0 +1,14 @@
+// SVG Settings
+// ============
+
+
+// Susy SVG Defaults
+// =================
+/// This plugin adds the `svg-grid-colors` property
+/// and default value to `$_susy-defaults` —
+/// you can override that value in `$susy`
+/// or any other grid settings map.
+/// @group plugin_svg-grid
+$_susy-defaults: map-merge((
+    'svg-grid-colors': hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 75%, 0.5),
+  ), $_susy-defaults);

docs/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss

@@ -0,0 +1,18 @@
+// Unprefix Susy SVG Grid
+// ======================
+
+
+
+// SVG Grid
+// --------
+/// Un-prefixed alias for `susy-svg-grid`
+///
+/// @group plugin_svg-grid
+/// @alias susy-svg-grid
+@function svg-grid(
+  $grid: $susy,
+  $colors: susy-get('svg-grid-colors'),
+  $offset: null
+) {
+  @return susy-svg-grid($grid, $colors, $offset);
+}

docs/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss

@@ -0,0 +1,133 @@
+// SVG Utilities
+// =============
+
+
+
+// SVG Validate Units
+// ------------------
+/// Make sure a length is supported in svg
+///
+/// @access private
+///
+/// @param {Length} $length -
+///   The length to validate
+/// @param {String} $name [null] -
+///   Optional name of length origin,
+///   for error reporting
+///
+/// @return {Length} -
+///   An svg-validated length, or comparable valid length
+@function _susy-svg-validate-units(
+  $length,
+  $name: null
+) {
+  $_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
+  $string: type-of($length) == 'string';
+
+  @if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
+    @return $length;
+  }
+
+  @return _susy-error(
+    '`#{unit($length)}` #{$name} units are not supported in SVG',
+    '_susy-svg-validate-units');
+}
+
+
+
+// SVG Rect
+// --------
+/// Build a single svg rectangle
+///
+/// @access private
+///
+/// @param {Length} $x -
+///   Horizontal position for the rectangle
+/// @param {Length} $width -
+///   Width of the rectangle
+/// @param {Length} $offset [null] -
+///   Offset the rectangle, to account for edge gutters
+///
+/// @return {String} -
+///   Escaped string representing one svg rectangle
+@function _susy-svg-rect(
+  $x,
+  $width,
+  $offset: null
+) {
+  $x: _susy-svg-validate-units($x);
+  $width: _susy-svg-validate-units($width);
+  $offset: if($offset == 0, null, $offset);
+
+  @if (type-of($offset) == 'number') and (type-of($x) == 'number') {
+    @if comparable($x, $offset) {
+      $x: $x + $offset;
+    } @else {
+      $x: 'calc(#{$x} + #{$offset})';
+    }
+  } @else if $offset and ($x != 0) {
+    $x: 'calc(#{$x} + #{$offset})';
+  } @else if $offset {
+    $x: $offset;
+  }
+
+  @return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
+}
+
+
+
+// SVG Color
+// ---------
+/// Stringify colors, and escape hex symbol
+///
+/// @access private
+///
+/// @param {Color} $color -
+///   Color to stringify and escape
+///
+/// @return {String} -
+///   Escaped string value of color
+@function _susy-svg-color(
+  $color
+) {
+  $color: inspect($color); // convert to string
+
+  @if (str-index($color, '#') == 1) {
+    $color: '%23' + str-slice($color, 2);
+  }
+
+  @return $color;
+}
+
+
+
+// SVG Gradient
+// ------------
+/// Create a multi-color svg gradient
+///
+/// @access private
+///
+/// @param {List} $colors -
+///   List of colors to be equally spaced from `0%` to `100%`
+///   in each column rectangle
+///
+/// @return {String} -
+///   Escaped string representing one svg gradient
+///   (`id="susy-svg-gradient"`)
+@function _susy-svg-gradient(
+  $colors
+) {
+  $gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
+  $gradient: '#{$gradient} id="susy-svg-gradient"';
+  $gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';
+
+  @for $i from 1 through length($colors) {
+    $color: _susy-svg-color(nth($colors, $i));
+    $offset: percentage(($i - 1) / (length($colors) - 1));
+    $stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';
+
+    $gradient: $gradient + $stop;
+  }
+
+  @return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
+}