@syncfusion/blazor-themes 20.3.50 → 20.3.56

package/SCSS-Themes/buttons/speed-dial/bootstrap4.scss

@@ -451,12 +451,7 @@ $sd-active-font-color: $secondary !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +460,7 @@ $sd-active-font-color: $secondary !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +470,19 @@ $sd-active-font-color: $secondary !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +491,7 @@ $sd-active-font-color: $secondary !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/bootstrap5-dark.scss

@@ -58,12 +58,13 @@ $sd-disabled-font-color: $content-text-color-disabled !default;
 $sd-focus-li-bg: $content-bg-color-focus !default;
 $sd-focus-li-border-color: $border-focus !default;
 $sd-focus-font-color: $content-text-color-focus !default;
+$sd-focus-box-shadow: $secondary-shadow-focus !default;
 
 $sd-hover-li-bg: $content-bg-color-hover !default;
 $sd-hover-li-border-color: $border-hover !default;
 $sd-hover-font-color: $content-text-color-hover !default;
 
-$sd-active-li-bg: $content-text-color-pressed !default;
+$sd-active-li-bg: $content-bg-color-pressed !default;
 $sd-active-li-border-color: $content-bg-color-pressed !default;
 $sd-active-font-color: $content-text-color-focus !default;
 
@@ -451,12 +452,7 @@ $sd-active-font-color: $content-text-color-focus !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +461,7 @@ $sd-active-font-color: $content-text-color-focus !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +471,19 @@ $sd-active-font-color: $content-text-color-focus !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +492,7 @@ $sd-active-font-color: $content-text-color-focus !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/bootstrap5.scss

@@ -58,12 +58,13 @@ $sd-disabled-font-color: $content-text-color-disabled !default;
 $sd-focus-li-bg: $content-bg-color-focus !default;
 $sd-focus-li-border-color: $border-focus !default;
 $sd-focus-font-color: $content-text-color-focus !default;
+$sd-focus-box-shadow: $secondary-shadow-focus !default;
 
 $sd-hover-li-bg: $content-bg-color-hover !default;
 $sd-hover-li-border-color: $border-hover !default;
 $sd-hover-font-color: $content-text-color-hover !default;
 
-$sd-active-li-bg: $content-text-color-pressed !default;
+$sd-active-li-bg: $content-bg-color-pressed !default;
 $sd-active-li-border-color: $content-bg-color-pressed !default;
 $sd-active-font-color: $content-text-color-focus !default;
 
@@ -451,12 +452,7 @@ $sd-active-font-color: $content-text-color-focus !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +461,7 @@ $sd-active-font-color: $content-text-color-focus !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +471,19 @@ $sd-active-font-color: $content-text-color-focus !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +492,7 @@ $sd-active-font-color: $content-text-color-focus !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/fabric-dark.scss

@@ -451,12 +451,7 @@ $sd-active-font-color: $neutral-light-fontalt !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +460,7 @@ $sd-active-font-color: $neutral-light-fontalt !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +470,19 @@ $sd-active-font-color: $neutral-light-fontalt !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +491,7 @@ $sd-active-font-color: $neutral-light-fontalt !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/fabric.scss

@@ -451,12 +451,7 @@ $sd-active-font-color: $neutral-light-fontalt !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +460,7 @@ $sd-active-font-color: $neutral-light-fontalt !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +470,19 @@ $sd-active-font-color: $neutral-light-fontalt !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +491,7 @@ $sd-active-font-color: $neutral-light-fontalt !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/fluent-dark.scss

@@ -58,7 +58,7 @@ $sd-disabled-font-color: $secondary-text-color-disabled !default;
 $sd-focus-li-bg: $secondary-bg-color-focus !default;
 $sd-focus-li-border-color: $secondary-border-color-focus !default;
 $sd-focus-font-color: $secondary-text-color-focus !default;
-$sd-focus-box-shadow: $sd-focus-li-bg $shadow-lg !default;
+$sd-focus-box-shadow: $sd-li-shadow, $shadow-focus-ring1 !default;
 
 $sd-hover-li-bg: $secondary-bg-color-hover !default;
 $sd-hover-li-border-color: $secondary-border-color-hover !default;
@@ -452,12 +452,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -466,11 +461,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -480,27 +471,19 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -509,11 +492,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/fluent.scss

@@ -58,7 +58,7 @@ $sd-disabled-font-color: $secondary-text-color-disabled !default;
 $sd-focus-li-bg: $secondary-bg-color-focus !default;
 $sd-focus-li-border-color: $secondary-border-color-focus !default;
 $sd-focus-font-color: $secondary-text-color-focus !default;
-$sd-focus-box-shadow: $sd-focus-li-bg $shadow-lg !default;
+$sd-focus-box-shadow: $sd-li-shadow, $shadow-focus-ring1 !default;
 
 $sd-hover-li-bg: $secondary-bg-color-hover !default;
 $sd-hover-li-border-color: $secondary-border-color-hover !default;
@@ -452,12 +452,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -466,11 +461,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -480,27 +471,19 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -509,11 +492,7 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/highcontrast.scss

@@ -452,12 +452,7 @@ $sd-active-font-color: $selection-font !default;
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -466,11 +461,7 @@ $sd-active-font-color: $selection-font !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -480,27 +471,19 @@ $sd-active-font-color: $selection-font !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -509,11 +492,7 @@ $sd-active-font-color: $selection-font !default;
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;