Merge branch 'develop' into dependabot/npm_and_yarn/docs/semver-5.7.2

Gruntfile.js

@@ -1,5 +1,5 @@
 // const Fiber = require('fibers');
-const sass = require('dart-sass');
+const sass = require('sass');
 
 module.exports = function(grunt) {
 

docs/docs/guides/browsers.mdx

@@ -23,9 +23,6 @@ Browsers not listed may still work well, and it should be noted that this is not
     <tr>
         <td rowSpan="5">Windows</td>
     </tr>
-    <tr>
-        <td>Internet Explorer 11</td>
-    </tr>
     <tr>
         <td>Edge (latest versions)</td>
     </tr>

docs/src/css/custom.scss

@@ -27,6 +27,10 @@ $fa-css-prefix: 'icon';
 @import '/static/fonts/fontawesome-pro/scss/brands';
 @import '/static/fonts/fontawesome-pro/scss/v4-shims';
 
+@import '../../../stylesheets/palette.base';
+@import '../../../stylesheets/config.theme';
+@import '../../../stylesheets/vars.palette-base';
+
 // $font-path: '/static/fonts/';
 @font-face {
   font-family: 'proxima_novalight';
@@ -60,7 +64,6 @@ $fa-css-prefix: 'icon';
   font-style: normal;
 }
 
-
 .d-example,
 .d-example-inline,
 .d-guidelines {
@@ -91,8 +94,6 @@ $fa-css-prefix: 'icon';
     @import '../../../stylesheets/function.color';
 
     // Base colour palette
-    @import '../../../stylesheets/palette.base';
-    @import '../../../stylesheets/config.theme';
     @import '../../../stylesheets/deprecated.styles';
 
     // Structure
@@ -176,25 +177,44 @@ $fa-css-prefix: 'icon';
     @import '../../../stylesheets/utility.utilities';
     @import '../../../stylesheets/utility.grid';
 
+    .swatch__chip {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        display: inline-block;
+        height: 20px;
+        margin-right: 5px;
+        vertical-align: middle;
+        width: 20px;
+    }
+
     .swatch {
         @each $name, $palette in $colors {
             @each $variant, $value in $palette {
                 @if $variant != 'alt' {
                     &--#{'' + $name}-#{$variant} .swatch__chip {
                         background-color: color($name, $variant);
-                        border: 1px solid #ccc;
-                        border-radius: 5px;
-                        display: inline-block;
-                        height: 20px;
-                        margin-right: 5px;
                         color: pick_best_color(color($name, $variant), (#fff, #000));
-                        vertical-align: middle;
-                        width: 20px;
                     }
                 }
             }
         }
     }
+
+    .swatch--bg-surface-0 .swatch__chip {
+        background-color: var(--color-bg-surface-0);
+    }
+
+    .swatch--bg-surface-1 .swatch__chip {
+        background-color: var(--color-bg-surface-1);
+    }
+
+    .swatch--bg-surface-2 .swatch__chip {
+        background-color: var(--color-bg-surface-2);
+    }
+
+    .swatch--bg-surface-3 .swatch__chip {
+        background-color: var(--color-bg-surface-3);
+    }
 }
 
 :root{