From c3a4c3a53247a33fbfe8f516e11610c160343107 Mon Sep 17 00:00:00 2001
From: Andy Bee <andy@bee-photography.de>
Date: Wed, 20 Mar 2024 20:52:46 +0100
Subject: [PATCH] fix deprecations

---
 scss/components/_badge.scss        | 2 +-
 scss/components/_button-group.scss | 6 +++---
 scss/components/_button.scss       | 4 ++--
 scss/components/_callout.scss      | 2 +-
 scss/components/_label.scss        | 2 +-
 scss/components/_progress-bar.scss | 2 +-
 scss/forms/_progress.scss          | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
index f3b69a469..0323e64a8 100644
--- 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
index 4734408a1..eef6cc4ec 100644
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -242,13 +242,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
index 8e7a231b0..4d98fbae7 100644
--- 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
index c8472c04a..43f02670b 100644
--- 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
index 3ec8eed13..460fcb774 100644
--- 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
index b2b891307..9d952b0c8 100644
--- 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
index 396d0f16f..c0ea63f5c 100644
--- 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;
 
-- 
2.47.2