Merge pull request #12622 from beephotography/tech/sass-deprecations

Fix warnings from `dart-sass` for color values with &.#{$name}
foundation · Sep 27, 2024 · 344a897 · 344a897
2 parents 8db0458 + c3a4c3a
commit 344a897
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
@@ -54,7 +54,7 @@ $badge-font-size: 0.6rem !default;
     color: $badge-color;
 
     @each $name, $color in $badge-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         background: $color;
         color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
       }

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
@@ -243,13 +243,13 @@ $buttongroup-radius-on-each: true !default;
 
         @each $name, $color in $button-palette {
           @if($button-fill != $filling) {
-            $individual-selector: ' #{$buttongroup-child-selector}.#{$name}';
-            &.#{$name} #{$buttongroup-child-selector}, &#{$individual-selector} {
+            $individual-selector: ' #{$buttongroup-child-selector}.#{"" + $name}';
+            &.#{"" + $name} #{$buttongroup-child-selector}, &#{$individual-selector} {
               @include button-fill-style($filling, $color, auto, auto);
             }
           }
           @else {
-            &.#{$name} #{$buttongroup-child-selector} {
+            &.#{"" + $name} #{$buttongroup-child-selector} {
               @include button-fill-style($filling, $color, auto, auto);
             }
           }

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -374,7 +374,7 @@ $button-responsive-expanded: false !default;
         @include button-fill-style($filling);
 
         @each $name, $color in $button-palette {
-          &.#{$name} {
+          &.#{"" + $name} {
             @include button-fill-style($filling, $color, auto, auto);
           }
         }
@@ -402,7 +402,7 @@ $button-responsive-expanded: false !default;
         }
 
         @each $name, $color in $button-palette {
-          &.#{$name} {
+          &.#{"" + $name} {
             &::after {
               border-top-color: $color;
             }

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
@@ -94,7 +94,7 @@ $callout-link-tint: 30% !default;
     @include callout;
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         @include callout-style($color);
       }
     }

diff --git a/scss/components/_label.scss b/scss/components/_label.scss
@@ -55,7 +55,7 @@ $label-radius: $global-radius !default;
     color: $label-color;
 
     @each $name, $color in $label-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         background: $color;
         color: color-pick-contrast($color, ($label-color, $label-color-alt));
       }

diff --git a/scss/components/_progress-bar.scss b/scss/components/_progress-bar.scss
@@ -43,7 +43,7 @@
     @include progress-container;
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         .progress-meter {
           background-color: $color;
         }

diff --git a/scss/forms/_progress.scss b/scss/forms/_progress.scss
@@ -68,7 +68,7 @@ $progress-radius: $global-radius !default;
     }
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         // Internet Explorer sets the fill with color
         color: $color;