Fix dart sass 2 migration

_vendor/sassy-lists/stylesheets/functions/_purge.scss

@@ -13,19 +13,22 @@
 ///
 /// @return {List}
 ///
+@use "../helpers/true" as is_true;
+@use "to-list";
+@use "sass:list";
 
 @function sl-purge($list) {
   $_: sl-missing-dependencies('sl-is-true', 'sl-to-list');
 
   $result: ();
 
   @each $item in $list {
-    @if sl-is-true($item) {
-      $result: append($result, $item, list-separator($list));
+    @if is_true.sl-is-true($item) {
+      $result: list.append($result, $item, list.separator($list));
     }
   }
 
-  @return sl-to-list($result);
+  @return to-list.sl-to-list($result);
 }
 
 ///

_vendor/sassy-lists/stylesheets/functions/_remove.scss

@@ -15,10 +15,11 @@
 /// @return {List}
 ///
 
+@use "replace";
 @function sl-remove($list, $value) {
   $_: sl-missing-dependencies('sl-replace');
 
-  @return sl-replace($list, $value, null);
+  @return replace.sl-replace($list, $value, null);
 }
 
 ///

_vendor/sassy-lists/stylesheets/functions/_replace.scss

@@ -21,26 +21,30 @@
 /// 
 /// @return {List}
 ///
-
+@use "../helpers/true" as is_true;
+@use "purge";
+@use "to-list";
+@use "sass:list";
+
 @function sl-replace($list, $old, $value) {
   $_: sl-missing-dependencies('sl-is-true', 'sl-purge', 'sl-to-list');
 
   $running: true;
 
   @while $running {
-    $index: index($list, $old);
+    $index: list.index($list, $old);
 
     @if not $index {
       $running: false;
     }
 
     @else {
-      $list: set-nth($list, $index, $value);
+      $list: list.set-nth($list, $index, $value);
     }
 
   }
 
-  $list: if(sl-is-true($value), $list, sl-purge($list));
+  $list: if(is_true.sl-is-true($value), $list, purge.sl-purge($list));
 
-  @return sl-to-list($list);
+  @return to-list.sl-to-list($list);
 }

_vendor/sassy-lists/stylesheets/functions/_to-list.scss

@@ -12,9 +12,10 @@
 /// 
 /// @return {List}
 ///
+@use "sass:list";
 
-@function sl-to-list($value, $separator: list-separator($value)) {
-  @return join((), $value, $separator);
+@function sl-to-list($value, $separator: list.separator($value)) {
+  @return list.join((), $value, $separator);
 }
 
 ///

scss/components/_flex-video.scss

@@ -1 +1 @@
-@import 'responsive-embed';
+@use 'responsive-embed';

scss/grid/_classes.scss

@@ -107,14 +107,14 @@
   }
 
   @include mixins.zf-each-breakpoint {
-    @for $i from 1 through row.$grid-column-count {
+    @for $i from 1 through grid.$grid-column-count {
       // Column width
       .#{mixins.$zf-size}-#{$i} {
         @include column.grid-column-size($i);
       }
 
       // Source ordering
-      @if $i < row.$grid-column-count {
+      @if $i < grid.$grid-column-count {
         @if $push {
           .#{mixins.$zf-size}-#{$push}-#{$i} {
             @include column.grid-col-pos($i);

scss/grid/_column.scss

@@ -24,15 +24,15 @@
 ///
 /// @returns {Number} A calculated percentage value.
 @function grid-column($columns) {
-  @return math2.fraction-to-percentage($columns, $denominator: row.$grid-column-count);
+  @return math2.fraction-to-percentage($columns, $denominator: grid.$grid-column-count);
 }
 
 /// Creates a grid column.
 ///
 /// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
 /// @param {Mixed} $gutters [$grid-column-gutter] - Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values.
 @mixin grid-column(
-  $columns: row.$grid-column-count,
+  $columns: grid.$grid-column-count,
   $gutters: grid.$grid-column-gutter
 ) {
   float: global.$global-left;
@@ -64,15 +64,15 @@
 /// Shorthand for `grid-column()`.
 /// @alias grid-column
 @function grid-col(
-  $columns: row.$grid-column-count
+  $columns: grid.$grid-column-count
 ) {
   @return grid-column($columns);
 }
 
 /// Shorthand for `grid-column()`.
 /// @alias grid-column
 @mixin grid-col(
-  $columns: row.$grid-column-count,
+  $columns: grid.$grid-column-count,
   $gutters: grid.$grid-column-gutter
 ) {
   @include grid-column($columns, $gutters);
@@ -112,7 +112,7 @@
 
   // Push/pull
   @else if meta.type-of($position) == 'number' {
-    $offset: math.percentage(math2.divide($position, row.$grid-column-count));
+    $offset: math.percentage(math2.divide($position, grid.$grid-column-count));
 
     position: relative;
     #{global.$global-left}: $offset;
@@ -183,15 +183,15 @@
 ///
 /// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`.
 @mixin grid-column-size(
-  $columns: row.$grid-column-count
+  $columns: grid.$grid-column-count
 ) {
-  width: column.grid-column($columns);
+  width: grid-column($columns);
 }
 
 /// Shorthand for `grid-column-size()`.
 /// @alias grid-column-size
 @mixin grid-col-size(
-  $columns: row.$grid-column-count
+  $columns: grid.$grid-column-count
 ) {
   @include grid-column-size($columns);
 }

scss/grid/_flex-grid.scss

@@ -97,7 +97,9 @@
   // fixes recent Chrome version not limiting child width
   // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome
   @if $columns == expand {
-    min-width: 0;
+    & {
+      min-width: 0;
+    }
   }
 }
 
@@ -198,7 +200,7 @@
   }
 
   @include mixins.zf-each-breakpoint {
-    @for $i from 1 through row.$grid-column-count {
+    @for $i from 1 through grid.$grid-column-count {
       // Sizing (percentage)
       .#{mixins.$zf-size}-#{$i} {
         flex: flex-grid-column($i);

scss/settings/_settings.scss

@@ -60,13 +60,13 @@
 //  55. Top Bar
 //  57. Xy Grid
 
-@import 'util/util';
+@use 'util/util' as util;
 
 // 1. Global
 // ---------
 
 $global-font-size: 100%;
-$global-width: rem-calc(1200);
+$global-width: util.rem-calc(1200);
 $global-lineheight: 1.5;
 $foundation-palette: (
   "primary": #1779ba,
@@ -101,7 +101,7 @@ $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 $print-hrefs: true;
 
-@include add-foundation-colors;
+@include util.add-foundation-colors;
 
 // 2. Breakpoints
 // --------------
@@ -173,12 +173,12 @@ $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
 $enable-code-inline: true;
 $anchor-color: $primary-color;
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-color-hover: util.scale-color($anchor-color, $lightness: -14%);
 $anchor-text-decoration: none;
 $anchor-text-decoration-hover: none;
 $hr-width: $global-width;
 $hr-border: 1px solid $medium-gray;
-$hr-margin: rem-calc(20) auto;
+$hr-margin: util.rem-calc(20) auto;
 $list-lineheight: $paragraph-lineheight;
 $list-margin-bottom: $paragraph-margin-bottom;
 $list-style-type: disc;
@@ -189,13 +189,13 @@ $defnlist-margin-bottom: 1rem;
 $defnlist-term-weight: $global-weight-bold;
 $defnlist-term-margin-bottom: 0.3rem;
 $blockquote-color: $dark-gray;
-$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-padding: util.rem-calc(9 20 0 19);
 $blockquote-border: 1px solid $medium-gray;
 $enable-cite-block: true;
 $keystroke-font: $font-family-monospace;
 $keystroke-color: $black;
 $keystroke-background: $light-gray;
-$keystroke-padding: rem-calc(2 4 0);
+$keystroke-padding: util.rem-calc(2 4 0);
 $keystroke-radius: $global-radius;
 $abbr-underline: 1px dotted $black;
 
@@ -211,14 +211,14 @@ $subheader-margin-top: 0.2rem;
 $subheader-margin-bottom: 0.5rem;
 $stat-font-size: 2.5rem;
 $cite-color: $dark-gray;
-$cite-font-size: rem-calc(13);
+$cite-font-size: util.rem-calc(13);
 $cite-pseudo-content: '\2014 \0020';
 $code-color: $black;
 $code-font-family: $font-family-monospace;
 $code-font-weight: $global-weight-normal;
 $code-background: $light-gray;
 $code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
+$code-padding: util.rem-calc(2 5 1);
 $code-block-padding: 1rem;
 $code-block-margin-bottom: 1.5rem;
 

scss/util/_breakpoint.scss

@@ -42,15 +42,15 @@ $breakpoints-hidpi: (
 /// @type Keyword
 $print-breakpoint: large !default;
 
-$-zf-zero-breakpoint: small !default;
+$zf-zero-breakpoint: small !default;
 
-$-zf-breakpoints-keys: value.map-to-list($breakpoints, 'keys');
+$zf-breakpoints-keys: value.map-to-list($breakpoints, 'keys');
 
 @if list.nth(map.values($breakpoints), 1) != 0 {
   @error 'The first key in the $breakpoints map must have a value of "0".';
 }
 @else {
-  $-zf-zero-breakpoint: list.nth(map.keys($breakpoints), 1);
+  $zf-zero-breakpoint: list.nth(map.keys($breakpoints), 1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -161,8 +161,8 @@ $breakpoint-classes: (small medium large) !default;
   @for $i from 1 through list.length($values) {
     $value: list.nth($values, $i);
     $str: breakpoint($value);
-    $bp: list.index($-zf-breakpoints-keys, list.nth($value, 1));
-    $pbp: list.index($-zf-breakpoints-keys, $print-breakpoint);
+    $bp: list.index($zf-breakpoints-keys, list.nth($value, 1));
+    $pbp: list.index($zf-breakpoints-keys, $print-breakpoint);
     // Direction of media query (up, down, or only)
     $dir: if(list.length($value) > 1, list.nth($value, 2), up);
 
@@ -277,7 +277,7 @@ $breakpoint-classes: (small medium large) !default;
   $list: ();
   $found-key: false;
 
-  @each $name in $-zf-breakpoints-keys {
+  @each $name in $zf-breakpoints-keys {
     @if ($name == $key) {
       $found-key: true;
     }

scss/util/_math.scss

@@ -86,7 +86,7 @@
   @if meta.type-of($fraction) == 'number' {
     // "50%"
     @if math.unit($fraction) == '%' {
-      @return (unit.strip-unit($fraction), 100);
+      @return (divide($fraction, $fraction * 0 + 1), 100);
     }
     @else if (math.unit($fraction) == '') {
       // "0.5"

scss/util/_mixins.scss

@@ -17,7 +17,8 @@
 ////
 
 // Patch to fix issue #12080
-$-zf-bp-value: null;
+$zf-bp-value: null;
+$zf-size: null;
 
 /// Creates an inner box-shadow for only one side
 ///
@@ -27,7 +28,7 @@ $-zf-bp-value: null;
 @mixin inner-side-shadow(
   $side: bottom,
   $size: 20px,
-  $color: rgba(global.$black, 0.25)
+  $color: rgba(variables.$black, 0.25)
 ) {
 
   $helper: math.round($size * 0.65);
@@ -89,8 +90,8 @@ $-zf-bp-value: null;
 /// @param {Number} $weight [2px] - Height of individual bars in the icon.
 /// @param {Number} $bars [3] - Number of bars in the icon.
 @mixin hamburger(
-  $color: global.$black,
-  $color-hover: global.$dark-gray,
+  $color: variables.$black,
+  $color-hover: variables.$dark-gray,
   $width: 20px,
   $height: 16px,
   $weight: 2px,
@@ -155,7 +156,7 @@ $-zf-bp-value: null;
 /// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
 ///
 /// @param {Color} $color [$black] - Color to use for the triangle.
-@mixin background-triangle($color: global.$black) {
+@mixin background-triangle($color: variables.$black) {
   $rgb: 'rgb%28#{math.round(color.red($color))}, #{math.round(color.green($color))}, #{math.round(color.blue($color))}%29';
 
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
@@ -328,8 +329,8 @@ $-zf-bp-value: null;
   // Iterate on breakpoint(s)
   @each $bp in $-list {
     $old-zf-size: null;
-    $old-zf-size: breakpoint.$zf-size;
-    breakpoint.$zf-size: $bp;
+    $old-zf-size: $zf-size;
+    $zf-size: $bp !global;
 
     @if ($media-queries == true or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {
       @include breakpoint.breakpoint($bp) {
@@ -340,14 +341,14 @@ $-zf-bp-value: null;
       @content;
     }
 
-    breakpoint.$zf-size: $old-zf-size;
+    $zf-size: $old-zf-size !global;
   }
 }
 
-/// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter:
-/// - For a single value, `$-zf-bp-value` is this value.
-/// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
-/// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
+/// Generate the `@content` passed to the mixin with a value `$zf-bp-value` related to a breakpoint, depending on the `$name` parameter:
+/// - For a single value, `$zf-bp-value` is this value.
+/// - For a breakpoint name, `$zf-bp-value` is the corresponding breakpoint value in `$map`.
+/// - For "auto", `$zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
 /// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
 /// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
 @mixin zf-breakpoint-value(
@@ -374,7 +375,7 @@ $-zf-bp-value: null;
     }
 
     // breakpoint value
-    $-zf-bp-value: $name !global;
+    $zf-bp-value: $name !global;
     @content;
   }
 }