fixed sass color deprecations

Author: joeworkman

scss/_global.scss

@@ -221,14 +221,14 @@ $global-color-pick-contrast-tolerance: 0 !default;
 
   // Reset <button> styles created by most browsers
   button {
+    @include disable-mouse-outline;
     padding: 0;
     appearance: none;
     border: 0;
     border-radius: $global-radius;
     background: transparent;
     line-height: 1;
     cursor: $global-button-cursor;
-    @include disable-mouse-outline;
   }
 
   // Prevent text overflow on pre

scss/components/_table.scss

@@ -8,6 +8,8 @@
 /// @group table
 ////
 
+@use "sass:color";
+
 /// Default color for table background.
 /// @type Color
 $table-background: $white  !default;
@@ -30,11 +32,11 @@ $table-hover-scale: 2% !default;
 
 /// Default color of standard rows on hover.
 /// @type List
-$table-row-hover: darken($table-background, $table-hover-scale) !default;
+$table-row-hover: color.adjust($table-background, $lightness: -$table-hover-scale) !default;
 
 /// Default color of striped rows on hover.
 /// @type List
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
+$table-row-stripe-hover: color.adjust($table-background, $lightness: -($table-color-scale + $table-hover-scale)) !default;
 
 /// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
 /// @type Boolean
@@ -54,15 +56,15 @@ $table-head-background: smart-scale($table-background, $table-color-scale * 0.5)
 
 /// Default color of header rows on hover.
 /// @type List
-$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
+$table-head-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale) !default;
 
 /// Default color for footer background.
 /// @type Color
 $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
 
 /// Default color of footer rows on hover.
 /// @type List
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
+$table-foot-row-hover: color.adjust($table-foot-background, $lightness: -$table-hover-scale) !default;
 
 /// Default font color for header.
 /// @type Color

scss/settings/_settings.scss

@@ -60,6 +60,7 @@
 //  55. Top Bar
 //  57. Xy Grid
 
+@use "sass:color";
 @import 'util/util';
 
 // 1. Global
@@ -803,15 +804,15 @@ $table-color-scale: 5%;
 $table-border: 1px solid smart-scale($table-background, $table-color-scale);
 $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-row-hover: color.adjust($table-background, $lightness: -$table-hover-scale);
+$table-row-stripe-hover: color.adjust($table-background, $lightness: -($table-color-scale + $table-hover-scale));
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-head-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-foot-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale);
 $table-head-font-color: $body-font-color;
 $table-foot-font-color: $body-font-color;
 $show-header-for-stacked: false;

scss/util/_color.scss

@@ -2,6 +2,7 @@
 // https://get.foundation
 // Licensed under MIT Open Source
 
+@use "sass:color";
 @import 'math';
 
 $contrast-warnings: true !default;
@@ -25,7 +26,11 @@ $success-color: null !default;
 @function color-luminance($color) {
   // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
   // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-  $rgba: red($color), green($color), blue($color);
+  $red   : round(color.channel($color, "red", $space: rgb));
+  $green : round(color.channel($color, "green", $space: rgb));
+  $blue  : round(color.channel($color, "blue", $space: rgb));
+
+  $rgba: $red, $green, $blue;
   $rgba2: ();
 
   @for $i from 1 through 3 {
@@ -96,7 +101,7 @@ $success-color: null !default;
 ///
 /// @returns {Color} A scaled color.
 @function smart-scale($color, $scale: 5%, $threshold: 40%) {
-  @if lightness($color) > $threshold {
+  @if color.channel($color, "lightness", $space: hsl) > $threshold {
     $scale: -$scale;
   }
   @return scale-color($color, $lightness: $scale);

scss/util/_mixins.scss

@@ -6,6 +6,8 @@
 /// @group functions
 ////
 
+@use "sass:color";
+
 // Patch to fix issue #12080
 $-zf-bp-value: null;
 
@@ -146,12 +148,15 @@ $-zf-bp-value: null;
 ///
 /// @param {Color} $color [$black] - Color to use for the triangle.
 @mixin background-triangle($color: $black) {
-  $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
+  $red   : round(color.channel($color, "red", $space: rgb));
+  $green : round(color.channel($color, "green", $space: rgb));
+  $blue  : round(color.channel($color, "blue", $space: rgb));
+  $rgb   : 'rgb%28#{$red}, #{$green}, #{$blue}%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>');
 
   @media screen and (min-width: 0\0) {
-    @if lightness($color) < 60% {
+    @if color.channel($color, "lightness", $space: hsl) < 60% {
       // White triangle
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
     }