sass deprecations in docs

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
index 60d837b789b3db34d70308cca3d652f98b9d116c..1fef59446b62009adac84ca1a4925a234c2309fc 100644 (file)
--- a/docs/assets/scss/_accordion-content.scss
+++ b/docs/assets/scss/_accordion-content.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .welcome-accordion {
   margin-top: 3rem;
   margin-bottom: 3rem;
@@ -29,7 +31,7 @@
   }
 
   .accordion-title {
-    color: darken($dark-gray,10%);
+    color: color.adjust($dark-gray, $lightness: -10%);
     font-size: 1.25rem;
     line-height: 1.5;
     padding-left: 0;
@@ -61,7 +63,7 @@
 
   .accordion-title:hover::before {
     color: $black;
-    background-color: lighten($light-gray,8%);
+    background-color: color.adjust($light-gray, $lightness: 8%);
     border: 1px solid $medium-gray;
     transition: all 0.3s ease;
   }

diff --git a/docs/assets/scss/_docs-footer.scss b/docs/assets/scss/_docs-footer.scss
index b36b966eb75a1047bc76384b3582c350c2e624fb..1a6b83bcf065b54b2b8e0b6c345f5511d6277143 100755 (executable)
--- a/docs/assets/scss/_docs-footer.scss
+++ b/docs/assets/scss/_docs-footer.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .footer-nav {
   @include flex-grid-row;
   align-items: center;
@@ -21,7 +23,7 @@
 
     &:hover,
     &:focus {
-      color: darken($white, 10%);
+      color: color.adjust($white, $lightness: -10%);
     }
 
     @include breakpoint(small only) {
@@ -59,7 +61,7 @@
 }
 
 .footer-copyright {
-  color: darken($white, 20%);
+  color: color.adjust($white, $lightness: -20%);
   font-size: 1rem;
   padding-top: 1rem;
 }
@@ -120,7 +122,7 @@
 
     &:hover,
     &:focus {
-      color: darken($white, 0%);
+      color: color.adjust($white, $lightness: 0%);
       transition: color 0.3s ease;
     }
   }
@@ -203,7 +205,7 @@ a.text-link {
   line-height: 1.8;
 
   &.light {
-    color: darken($white, 20%);
+    color: color.adjust($white, $lightness: -20%);
   }
 
   .text-link {
@@ -232,10 +234,10 @@ a.text-link {
   [type='text'],
   [type='email'],
   textarea {
-    background-color: darken($white, 8%);
-    border: 1px solid darken($white, 15%);
+    background-color: color.adjust($white, $lightness: -8%);
+    border: 1px solid color.adjust($white, $lightness: -15%);
     border-radius: 5px;
-    color: darken($foundation-dark, 45%);
+    color: color.adjust($foundation-dark, $lightness: -45%);
     height: 2.55rem;
     padding-left: 1rem;
     transition: background-color 0.3s ease;
@@ -243,7 +245,7 @@ a.text-link {
 
     &:focus,
     &:focus {
-      background-color: darken($foundation-dark, 5%);
+      background-color: color.adjust($foundation-dark, $lightness: -5%);
       box-shadow: none;
       transition: background-color 0.3s ease;
       color: $white;
@@ -252,19 +254,19 @@ a.text-link {
 
   // TODO: add placeholder mixin
   ::-webkit-input-placeholder {
-    color: lighten($foundation-dark, 40%);
+    color: color.adjust($foundation-dark, $lightness: 40%);
   }
 
   ::-moz-placeholder {
-    color: lighten($foundation-dark, 40%);
+    color: color.adjust($foundation-dark, $lightness: 40%);
   }
 
   :-ms-input-placeholder {
-    color: lighten($foundation-dark, 40%);
+    color: color.adjust($foundation-dark, $lightness: 40%);
   }
 
   :-moz-placeholder {
-    color: lighten($foundation-dark, 40%);
+    color: color.adjust($foundation-dark, $lightness: 40%);
   }
 }
 
@@ -279,7 +281,7 @@ a.text-link {
   width: 4rem;
 
   &.lighter {
-    border-bottom: 2px solid lighten($white, 40%);
+    border-bottom: 2px solid color.adjust($white, $lightness: 40%);
   }
 
   @include breakpoint(small only) {
@@ -297,7 +299,7 @@ a.text-link {
   text-transform: uppercase;
 
   &.lighter {
-    color: lighten($white, 40%);
+    color: color.adjust($white, $lightness: 40%);
   }
 
   @include breakpoint(small only) {
@@ -346,7 +348,7 @@ a.text-link {
     background: $primary-color;
 
     &:hover {
-      background: darken($primary-color, 14%);
+      background: color.adjust($primary-color, $lightness: -14%);
     }
   }
 

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 8a9ab24d2ae9862c57acf6cd94f106ec0302b998..b3b77c661639228825c09552afef64e15225df61 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // The CSS for the Foundation docs is stored in an external codebase:
 // https://github.com/foundation/foundation-docs
 //
@@ -124,7 +126,7 @@ $transition-fast: all 0.15s ease-in-out;
 $topbar-bg: #2c3840;
 $global-nav-bg: $topbar-bg;
 $global-nav-border-color: #3B4951;
-$global-nav-hover-color: lighten($global-nav-bg, 10%);
+$global-nav-hover-color: color.adjust($global-nav-bg, $lightness: 10%);
 
 .global-nav {
   background: $global-nav-bg !important;
@@ -145,7 +147,7 @@ $global-nav-hover-color: lighten($global-nav-bg, 10%);
         background: $primary-color;
 
         &:hover {
-          background: darken($primary-color, 10%);
+          background: color.adjust($primary-color, $lightness: -10%);
         }
       }
     }
@@ -229,7 +231,7 @@ $global-nav-hover-color: lighten($global-nav-bg, 10%);
 
   .is-active {
     a {
-      background: darken($global-nav-bg, 20%);
+      background: color.adjust($global-nav-bg, $lightness: -20%);
     }
   }
 

diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss
index f1ca182a29054604c2bf1193dc96467e3e3950b7..1dde8989fb1da4d4d9fe03d37a2406a96de6e992 100644 (file)
--- a/docs/assets/scss/examples/_grid.scss
+++ b/docs/assets/scss/examples/_grid.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Grid
 .row.display {
   background: #eee;
@@ -12,11 +14,11 @@
     &:nth-child(2),
     &.small-centered,
     &.large-centered {
-      background: darken(#eee, 5%);
+      background: color.adjust(#eee, $lightness: -5%);
     }
 
     &.color-end {
-      background: darken(#eee, 10%)
+      background: color.adjust(#eee, $lightness: -10%)
     }
   }
 }
@@ -31,11 +33,11 @@
   margin-right: 0 !important;
 
   .columns {
-    background: darken(#eee, 5%);
+    background: color.adjust(#eee, $lightness: -5%);
     border-left: 1px solid #c6c6c6;
 
     &.color-end {
-      background: darken(#eee, 10%)
+      background: color.adjust(#eee, $lightness: -10%)
     }
   }
 }
@@ -82,7 +84,7 @@
 
   .grid-x,
   .grid-y {
-    background: lighten($primary-color, 50%);
+    background: color.adjust($primary-color, $lightness: 50%);
     font-size: 12px;
     line-height: 2rem;
     margin-bottom: 1.5rem;
@@ -94,7 +96,7 @@
 
   .cell {
     &:nth-child(odd) {
-      background: lighten($primary-color, 30%);
+      background: color.adjust($primary-color, $lightness: 30%);
       color: $black;
     }
     &:nth-child(even) {