matcha-theme 18.0.27 → 18.0.28

package/abstracts/_elevation.scss

@@ -0,0 +1,102 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Elevations Mixins
+//
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://material.io/design/environment/elevation.html
+// Examples:
+//
+//
+// .matcha-foo {
+//   @include $elevation(2);
+//
+//   &:active {
+//     @include $elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
+// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
+// space completely obscured by an object relative to its light source), one for penumbra (the
+// space partially obscured by an object), and one for ambient (the space which contains the object
+// itself). For a further explanation of these terms and their meanings, see
+// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
+
+// Maps for the different shadow sets and their values within each z-space. These values were
+// created by taking a few reference shadow sets created by Google's Designers and interpolating
+// all of the values between them.
+//
+// -----------------------------------------------------------------------------------------------------
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $elevation-color, $opacity: $elevation-opacity) {
+    @if type-of($zValue) !=number or not unitless($zValue) {
+        @error '$zValue must be a unitless number';
+    }
+
+    @if $zValue < 0 or $zValue >24 {
+        @error '$zValue must be between 0 and 24';
+    }
+
+    box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
+    #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
+    #{map-get(_get-ambient-map($color, $opacity), $zValue)};
+}
+
+@mixin _theme-elevation($zValue, $theme, $opacity: $elevation-opacity) {
+    $foreground: map-get($theme, foreground);
+    $elevation-color: map-get($foreground, elevation);
+    $elevation-color-or-default: if($elevation-color ==null, $elevation-color, $elevation-color);
+
+    @include elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin overridable-elevation($zValue, $color: $elevation-color, $opacity: $elevation-opacity) {
+    &:not([class*="#{$_elevation-prefix}"]) {
+        @include elevation($zValue, $color, $opacity);
+    }
+}
+
+@mixin _theme-overridable-elevation($zValue, $theme, $opacity: $elevation-opacity) {
+    $foreground: map-get($theme, foreground);
+    $elevation-color: map-get($foreground, elevation);
+    $elevation-color-or-default: if($elevation-color ==null, $elevation-color, $elevation-color);
+
+    @include overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin elevation-transition($duration: $elevation-transition-duration,
+    $easing: $elevation-transition-timing-function) {
+    // Returns a string that can be used as the value for a transition property for elevation.
+    // Calling this function directly is useful in situations where a component needs to transition
+    // more than one property.
+    //
+    // .foo {
+    //   transition: elevation-transition-property-value(), opacity 100ms ease;
+    // }
+    transition: elevation-transition-property-value($duration, $easing);
+}
+
+// Css class generator for shadows
+// $_elevation-prefix: "matcha-elevation-z";
+@mixin elevation-theme($theme) {
+    @for $zValue from 0 through 24 {
+        .#{$_elevation-prefix}#{$zValue} {
+            @include _theme-elevation($zValue, $theme);
+        }
+    }
+}

package/abstracts/_functions.scss

@@ -0,0 +1,424 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Theme functions
+// --------------------------------------------------------------------------------------------------------------------
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+// @param $color-map
+// @param $hue
+@function map-contrast($palette, $hue) {
+    @return map-get(map-get($palette, contrast), $hue);
+}
+
+// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
+// of the Material Design hues.
+// @param $color-map
+// @param $primary
+// @param $lighter
+@function palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
+    $result: map_merge(
+        $base-palette,
+        (
+            default: map-get($base-palette, $default),
+            lighter: map-get($base-palette, $lighter),
+            darker: map-get($base-palette, $darker),
+            default-contrast: map-contrast($base-palette, $default),
+            lighter-contrast: map-contrast($base-palette, $lighter),
+            darker-contrast: map-contrast($base-palette, $darker)
+        )
+    );
+
+    // For each hue in the palette, add a "-contrast" color to the map.
+    @each $hue, $color in $base-palette {
+        $result: map_merge(
+            $result,
+            (
+                "#{$hue}-contrast": map-contrast($base-palette, $hue)
+            )
+        );
+    }
+
+    @return $result;
+}
+
+@function getBaseColorsPalettes() {
+    // base colors
+    $palettes: (
+        red: $red,
+        pink: $pink,
+        purple: $purple,
+        deep-purple: $deep-purple,
+        indigo: $indigo,
+        blue: $blue,
+        light-blue: $light-blue,
+        cyan: $cyan,
+        teal: $teal,
+        green: $green,
+        light-green: $light-green,
+        lime: $lime,
+        yellow: $yellow,
+        amber: $amber,
+        orange: $orange,
+        deep-orange: $deep-orange,
+        brown: $brown,
+        grey: $grey,
+        blue-grey: $blue-grey
+    );
+    @return $palettes;
+}
+
+@function getAllPalettes($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
+    // base colors
+    $palettes: (
+        red: $red,
+        pink: $pink,
+        purple: $purple,
+        deep-purple: $deep-purple,
+        indigo: $indigo,
+        blue: $blue,
+        light-blue: $light-blue,
+        cyan: $cyan,
+        teal: $teal,
+        green: $green,
+        light-green: $light-green,
+        lime: $lime,
+        yellow: $yellow,
+        amber: $amber,
+        orange: $orange,
+        deep-orange: $deep-orange,
+        brown: $brown,
+        grey: $grey,
+        blue-grey: $blue-grey,
+        primary: $primary,
+        accent: $accent,
+        warn: $warn
+    );
+    @return $palettes;
+}
+
+// Gets a color from a theme palette (the output of mat-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of mat-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function map-color($palette, $hue: default, $opacity: null) {
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if type-of($hue) ==number and $hue >=0 and $hue <=1 {
+        @return map-color($palette, default, $hue);
+    }
+
+    $color: map-get($palette, $hue);
+
+    @if (type-of($color) !=color) {
+        // If the $color resolved to something different from a color (e.g. a CSS variable),
+        // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
+        // throw an error or output something invalid.
+        @return $color;
+    }
+
+    @return rgba($color, if($opacity ==null, opacity($color), $opacity));
+}
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function light-theme($primary, $accent, $warn) {
+    @return (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+        is-dark: false,
+        foreground: $light-theme-foreground-palette,
+        background: $light-theme-background-palette
+    );
+}
+
+// Creates a container object for a dark theme to be given to individual component theme mixins.
+@function dark-theme($primary, $accent, $warn) {
+    @return (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+        is-dark: true,
+        foreground: $dark-theme-foreground-palette,
+        background: $dark-theme-background-palette
+    );
+}
+
+// Creates a container object for a custom light theme to be given to individual component theme mixins.
+@function light-custom-theme($primary, $accent, $warn, $custom-light-fg, $custom-light-bg) {
+    @return (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+        is-dark: false,
+        foreground: $custom-light-fg,
+        background: $custom-light-bg
+    );
+}
+
+// Creates a container object for a custom dark theme to be given to individual component theme mixins.
+@function dark-custom-theme($primary, $accent, $warn, $custom-dark-fg, $custom-dark-bg) {
+    @return (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+        is-dark: true,
+        foreground: $custom-dark-fg,
+        background: $custom-dark-bg
+    );
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Typography functions
+// --------------------------------------------------------------------------------------------------------------------
+// Represents a typography level from the Material design spec.
+@function matcha-typography-level(
+    $font-size,
+    $line-height: $font-size,
+    $font-weight: 400,
+    $font-family: null,
+    $letter-spacing: null
+) {
+    @return (
+        font-size: $font-size,
+        line-height: $line-height,
+        font-weight: $font-weight,
+        font-family: $font-family,
+        letter-spacing: $letter-spacing
+    );
+}
+
+// Represents a collection of typography levels.
+// Defaults come from https://material.io/guidelines/style/typography.html
+// Note: The spec doesn't mention letter spacing. The values here come from
+// eyeballing it until it looked exactly like the spec examples.
+@function matcha-typography-config(
+    $font-family: 'CircularStd, "Helvetica Neue", "Arial", sans-serif, "angular";',
+    $display-4: matcha-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+    $display-3: matcha-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+    $display-2: matcha-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+    $display-1: matcha-typography-level(34px, 40px, 400),
+    $headline: matcha-typography-level(24px, 32px, 400),
+    $title: matcha-typography-level(20px, 32px, 700),
+    $subheading-2: matcha-typography-level(16px, 28px, 900),
+    $subheading-1: matcha-typography-level(15px, 24px, 900),
+    $body-2: matcha-typography-level(14px, 24px, 500),
+    $body-1: matcha-typography-level(14px, 20px, 400),
+    $caption: matcha-typography-level(12px, 20px, 500),
+    $button: matcha-typography-level(14px, 14px, 500),
+    $input: matcha-typography-level(inherit, 1.125, 400)
+) {
+    // Line-height must be unit-less fraction of the font-size.
+    // Declare an initial map with all of the levels.
+    $config: (
+        display-4: $display-4,
+        display-3: $display-3,
+        display-2: $display-2,
+        display-1: $display-1,
+        headline: $headline,
+        title: $title,
+        subheading-2: $subheading-2,
+        subheading-1: $subheading-1,
+        body-2: $body-2,
+        body-1: $body-1,
+        caption: $caption,
+        button: $button,
+        input: $input
+    );
+
+    // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+    // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+    @each $key, $level in $config {
+        @if map-get($level, font-family) ==null {
+            $new-level: map-merge(
+                $level,
+                (
+                    font-family: $font-family
+                )
+            );
+            $config: map-merge(
+                $config,
+                (
+                    $key: $new-level
+                )
+            );
+        }
+    }
+
+    // Add the base font family to the config.
+    @return map-merge(
+        $config,
+        (
+            font-family: $font-family
+        )
+    );
+}
+
+// Utility for fetching a nested value from a typography config.
+@function _matcha-get-type-value($config, $level, $name) {
+    @return map-get(map-get($config, $level), $name);
+}
+
+// Gets the font size for a level inside a typography config.
+@function matcha-font-size($config, $level) {
+    @return _matcha-get-type-value($config, $level, font-size);
+}
+
+// Gets the line height for a level inside a typography config.
+@function matcha-line-height($config, $level) {
+    @return _matcha-get-type-value($config, $level, line-height);
+}
+
+// Gets the font weight for a level inside a typography config.
+@function matcha-font-weight($config, $level) {
+    @return _matcha-get-type-value($config, $level, font-weight);
+}
+
+// Gets the letter spacing for a level inside a typography config.
+@function matcha-letter-spacing($config, $level) {
+    @return _matcha-get-type-value($config, $level, letter-spacing);
+}
+
+// Gets the font-family from a typography config and removes the quotes around it.
+@function matcha-font-family($config, $level: null) {
+    $font-family: map-get($config, font-family);
+
+    @if $level !=null {
+        $font-family: _matcha-get-type-value($config, $level, font-family);
+    }
+
+    // Guard against unquoting non-string values, because it's deprecated.
+    @return if(type-of($font-family) ==string, unquote($font-family), $font-family);
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Elevation functions
+// --------------------------------------------------------------------------------------------------------------------
+// A collection of functions that can be used to apply elevation to a material
+
+@function _get-umbra-map($color, $opacity) {
+    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
+
+    @return (
+        0: "0px 0px 0px 0px #{$shadow-color}",
+        1: "0px 2px 2px 0px #{$shadow-color}",
+        2: "0px 3px 2px -2px #{$shadow-color}",
+        3: "0px 3px 3px -2px #{$shadow-color}",
+        4: "0px 2px 4px -1px #{$shadow-color}",
+        5: "0px 3px 5px -1px #{$shadow-color}",
+        6: "0px 3px 5px -1px #{$shadow-color}",
+        7: "0px 4px 5px -2px #{$shadow-color}",
+        8: "0px 5px 5px -3px #{$shadow-color}",
+        9: "0px 5px 6px -3px #{$shadow-color}",
+        10: "0px 6px 6px -3px #{$shadow-color}",
+        11: "0px 6px 7px -4px #{$shadow-color}",
+        12: "0px 7px 8px -4px #{$shadow-color}",
+        13: "0px 7px 8px -4px #{$shadow-color}",
+        14: "0px 7px 9px -4px #{$shadow-color}",
+        15: "0px 8px 9px -5px #{$shadow-color}",
+        16: "0px 8px 10px -5px #{$shadow-color}",
+        17: "0px 8px 11px -5px #{$shadow-color}",
+        18: "0px 9px 11px -5px #{$shadow-color}",
+        19: "0px 9px 12px -6px #{$shadow-color}",
+        20: "0px 10px 13px -6px #{$shadow-color}",
+        21: "0px 10px 13px -6px #{$shadow-color}",
+        22: "0px 10px 14px -6px #{$shadow-color}",
+        23: "0px 11px 14px -7px #{$shadow-color}",
+        24: "0px 11px 15px -7px #{$shadow-color}"
+    );
+}
+
+@function _get-penumbra-map($color, $opacity) {
+    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
+
+    @return (
+        0: "0px 0px 0px 0px #{$shadow-color}",
+        1: "0px 2px 2px 0px #{$shadow-color}",
+        2: "0px 2px 3px 0px #{$shadow-color}",
+        3: "0px 3px 4px 0px #{$shadow-color}",
+        4: "0px 4px 5px 0px #{$shadow-color}",
+        5: "0px 5px 8px 0px #{$shadow-color}",
+        6: "0px 6px 10px 0px #{$shadow-color}",
+        7: "0px 7px 10px 1px #{$shadow-color}",
+        8: "0px 8px 10px 1px #{$shadow-color}",
+        9: "0px 9px 12px 1px #{$shadow-color}",
+        10: "0px 10px 14px 1px #{$shadow-color}",
+        11: "0px 11px 15px 1px #{$shadow-color}",
+        12: "0px 12px 17px 2px #{$shadow-color}",
+        13: "0px 13px 19px 2px #{$shadow-color}",
+        14: "0px 14px 21px 2px #{$shadow-color}",
+        15: "0px 15px 22px 2px #{$shadow-color}",
+        16: "0px 16px 24px 2px #{$shadow-color}",
+        17: "0px 17px 26px 2px #{$shadow-color}",
+        18: "0px 18px 28px 2px #{$shadow-color}",
+        19: "0px 19px 29px 2px #{$shadow-color}",
+        20: "0px 20px 31px 3px #{$shadow-color}",
+        21: "0px 21px 33px 3px #{$shadow-color}",
+        22: "0px 22px 35px 3px #{$shadow-color}",
+        23: "0px 23px 36px 3px #{$shadow-color}",
+        24: "0px 24px 38px 3px #{$shadow-color}"
+    );
+}
+
+@function _get-ambient-map($color, $opacity) {
+    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
+
+    @return (
+        0: "0px 0px 0px 0px #{$shadow-color}",
+        1: "0px 2px 2px 0px #{$shadow-color}",
+        2: "0px 1px 5px 0px #{$shadow-color}",
+        3: "0px 1px 8px 0px #{$shadow-color}",
+        4: "0px 1px 10px 0px #{$shadow-color}",
+        5: "0px 1px 14px 0px #{$shadow-color}",
+        6: "0px 1px 18px 0px #{$shadow-color}",
+        7: "0px 2px 16px 1px #{$shadow-color}",
+        8: "0px 3px 14px 2px #{$shadow-color}",
+        9: "0px 3px 16px 2px #{$shadow-color}",
+        10: "0px 4px 18px 3px #{$shadow-color}",
+        11: "0px 4px 20px 3px #{$shadow-color}",
+        12: "0px 5px 22px 4px #{$shadow-color}",
+        13: "0px 5px 24px 4px #{$shadow-color}",
+        14: "0px 5px 26px 4px #{$shadow-color}",
+        15: "0px 6px 28px 5px #{$shadow-color}",
+        16: "0px 6px 30px 5px #{$shadow-color}",
+        17: "0px 6px 32px 5px #{$shadow-color}",
+        18: "0px 7px 34px 6px #{$shadow-color}",
+        19: "0px 7px 36px 6px #{$shadow-color}",
+        20: "0px 8px 38px 7px #{$shadow-color}",
+        21: "0px 8px 40px 7px #{$shadow-color}",
+        22: "0px 8px 42px 7px #{$shadow-color}",
+        23: "0px 9px 44px 8px #{$shadow-color}",
+        24: "0px 9px 46px 8px #{$shadow-color}"
+    );
+}
+
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: elevation-transition-property-value(), opacity 100ms ease;
+// }
+@function elevation-transition-property-value(
+    $duration: $elevation-transition-duration,
+    $easing: $elevation-transition-timing-function
+) {
+    @return box-shadow #{$duration} #{$easing};
+}
+
+// Define the variable for the base size (usually 16 pixels = 1 rem).
+$base-font-size: 16px;
+
+// Function to convert pixels to rem.
+@function px-to-rem($value-in-px) {
+    @if $value-in-px != 0 {
+        @return calc($value-in-px / $base-font-size) * 1rem;
+    } @else {
+        @return $value-in-px;
+    }
+}

package/abstracts/_grid.scss

@@ -0,0 +1,163 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Display grids generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints) {
+    @each $sizeLabel, $value in $grid-sizes {
+        .row-#{$sizeLabel} {
+            display: flex;
+            flex-direction: column;
+        }
+
+        @media only screen and (min-width: #{$value}) {
+            @for $i from 1 through $grid-length {
+                .row > .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
+                    $calculated-flex-basis: calc($i / $grid-length) * 100%;
+                    flex-basis: $calculated-flex-basis;
+                }
+
+                .row > .#{$grid-prefix}-offset-#{$sizeLabel}-#{$i} {
+                    $calculated-margin-left: calc($i / $grid-length) * 100%;
+                    margin-left: $calculated-margin-left;
+                }
+            }
+
+            .row-#{$sizeLabel} {
+                flex-direction: row;
+            }
+        }
+    }
+
+    [class^="grid-"] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    @for $i from 0 through 12 {
+        $size: $i * 4;
+        .gap-#{$size} {
+            column-gap: #{$size}px;
+            row-gap: #{$size}px;
+        }
+        @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+            @include media-breakpoint($materialBreakpoint) {
+                $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+                .gap#{$infix}-#{$size} {
+                    column-gap: #{$size}px;
+                    row-gap: #{$size}px;
+                }
+            }
+        }
+    }
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+
+            @for $i from 1 through $grid-length {
+                .grid#{$infix}-#{$i} {
+                    @include _grid-prop($i);
+                }
+
+                .colspan#{$infix}-#{$i} {
+                    grid-column-end: span #{$i};
+                }
+
+                .rowspan#{$infix}-#{$i} {
+                    grid-row-end: span #{$i};
+                }
+            }
+        }
+    }
+}
+
+
+
+@mixin _grid-prop($i) {
+    display: grid;
+    grid-template-columns: repeat($i, minmax(0, 1fr));
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Display flex generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin display-flex($grid-prefix, $grid-length, $grid-sizes) {
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+
+        > div[class*="#{$grid-prefix}-"] {
+            box-sizing: border-box;
+        }
+
+        > div:not([class*="#{$grid-prefix}-"]) {
+            flex: 1;
+        }
+
+        @for $i from 1 through $grid-length {
+            .#{$grid-prefix}-#{$i} {
+                $calculated-flex-basis: calc($i / $grid-length) * 100%;
+                flex-basis: $calculated-flex-basis;
+            }
+
+            .#{$grid-prefix}-offset-#{$i} {
+                $calculated-margin-left: calc($i / $grid-length) * 100%;
+                margin-left: $calculated-margin-left;
+            }
+
+            @each $sizeLabel, $value in $grid-sizes {
+                [class*="#{$grid-prefix}-offset-#{$sizeLabel}-"] {
+                    margin-left: 0;
+                }
+
+                .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
+                    flex-basis: 100%;
+                }
+            }
+        }
+
+        @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
+            > div[class*="#{$grid-prefix}-"].#{$classLabel} {
+                align-self: $cssValue;
+            }
+        }
+
+        @each $classLabel,
+            $cssValue
+                in (
+                    align-start flex-start,
+                    align-center center,
+                    align-end flex-end,
+                    space-around space-around,
+                    space-between space-between
+                )
+        {
+            &.#{$classLabel} {
+                justify-content: $cssValue;
+            }
+        }
+    }
+}
+
+@include display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints);
+@include display-flex($grid-prefix, $grid-length, $grid-sizes);
+
+// -------------------------------------------------------------------------------------------------------------------
+// Dynamic gaps
+// -------------------------------------------------------------------------------------------------------------------
+.gap-inside {
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    row-gap: 16px;
+}
+.gap-outside {
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    row-gap: 16px;
+}
+@media screen and (min-width: 600px) {
+    .gap-outside {
+        -moz-column-gap: 24px;
+        column-gap: 24px;
+        row-gap: 24px;
+    }
+}