npm - @syncfusion/blazor-themes - Versions diffs - 20.3.61 → 20.4.38 - Mend

@syncfusion/blazor-themes 20.3.61 → 20.4.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

package/SCSS-Themes/buttons/button/bootstrap5-dark.scss CHANGED Viewed

@@ -977,7 +977,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   outline: $btn-focus-outline;
   outline-offset: $btn-focus-outline-offset;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
@@ -997,7 +997,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
     outline-offset: $btn-active-outline-offset;
   }
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-active-bgcolor, 50%), $btn-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-active-bgcolor, 50%), $btn-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1011,7 +1011,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   color: $btn-primary-focus-color;
   outline: $btn-primary-outline;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1033,7 +1033,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
     outline: $btn-active-outline;
   }
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-primary-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-primary-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1053,7 +1053,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
 @mixin outline-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-outline-focus-bgcolor, 50%), $btn-outline-default-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-outline-focus-bgcolor, 50%), $btn-outline-default-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
@@ -1068,7 +1068,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1083,7 +1083,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
 @mixin outline-primary-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-outline-primary-focus-bgcolor, 50%), $btn-outline-primary-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-outline-primary-focus-bgcolor, 50%), $btn-outline-primary-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1098,7 +1098,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-primary-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'bootstrap5') {
@@ -1116,7 +1116,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
 @mixin outline-success-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1131,7 +1131,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-success-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1146,7 +1146,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
 @mixin outline-info-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-hover-bgcolor, 50%), $btn-info-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-hover-bgcolor, 50%), $btn-info-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1161,7 +1161,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-info-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'bootstrap5') {
@@ -1179,7 +1179,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
 @mixin outline-warning-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-hover-bgcolor, 50%), $btn-warning-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-hover-bgcolor, 50%), $btn-warning-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1194,7 +1194,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-warning-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1209,7 +1209,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
 @mixin outline-danger-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-hover-bgcolor, 50%), $btn-danger-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-hover-bgcolor, 50%), $btn-danger-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1224,7 +1224,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-danger-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1319,7 +1319,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   border-color: $btn-success-focus-border-color;
   color: $btn-success-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1338,7 +1338,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   border-color: $btn-success-active-border-color;
   color: $btn-success-active-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1351,7 +1351,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   border-color: $btn-info-focus-border-color;
   color: $btn-info-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-focus-bgcolor, 50%), $btn-info-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-focus-bgcolor, 50%), $btn-info-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1375,7 +1375,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
     border-color: $btn-info-active-border-color;
   }
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1388,7 +1388,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   border-color: $btn-warning-focus-border-color;
   color: $btn-warning-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-focus-bgcolor, 50%), $btn-warning-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-focus-bgcolor, 50%), $btn-warning-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1412,7 +1412,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   }
   color: $btn-warning-active-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1425,7 +1425,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   border-color: $btn-danger-focus-border-color;
   color: $btn-danger-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-focus-bgcolor, 50%), $btn-danger-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-focus-bgcolor, 50%), $btn-danger-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1449,7 +1449,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
   }
   color: $btn-danger-active-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1812,7 +1812,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
           background-color: $btn-primary-active-bgcolor;
           border-color: $btn-primary-active-border-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if $skin-name != 'bootstrap5' {
@@ -1992,7 +1992,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
           background-color: $btn-danger-active-bgcolor;
           border-color: $btn-danger-active-border-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if $skin-name != 'bootstrap5' {
@@ -2028,7 +2028,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
           border-color: $btn-flat-focus-border-color;
           color: $btn-flat-focus-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-flat-focus-bgcolor, 50%), $btn-flat-focus-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-flat-focus-bgcolor, 50%), $btn-flat-focus-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
@@ -2051,7 +2051,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
           border-color: $btn-flat-active-border-color;
           color: $btn-flat-active-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-flat-active-bgcolor, 50%), $btn-flat-active-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-flat-active-bgcolor, 50%), $btn-flat-active-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if $skin-name != 'bootstrap5' {
@@ -2086,7 +2086,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-primary-focus-border-color;
             color: $btn-flat-primary-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-primary-focus-bgcolor, 50%), $btn-flat-primary-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-primary-focus-bgcolor, 50%), $btn-flat-primary-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2109,7 +2109,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-primary-active-border-color;
             color: $btn-flat-primary-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-primary-active-bgcolor, 50%), $btn-flat-primary-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-primary-active-bgcolor, 50%), $btn-flat-primary-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
           }
@@ -2143,7 +2143,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-success-focus-border-color;
             color: $btn-flat-success-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-success-focus-bgcolor, 50%), $btn-flat-success-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-success-focus-bgcolor, 50%), $btn-flat-success-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2169,7 +2169,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-success-active-border-color;
             color: $btn-flat-success-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-success-active-bgcolor, 50%), $btn-flat-success-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-success-active-bgcolor, 50%), $btn-flat-success-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {
@@ -2205,7 +2205,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-info-focus-border-color;
             color: $btn-flat-info-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-info-focus-bgcolor, 50%), $btn-flat-info-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-info-focus-bgcolor, 50%), $btn-flat-info-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2231,7 +2231,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-info-active-border-color;
             color: $btn-flat-info-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-info-active-bgcolor, 50%), $btn-flat-info-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-info-active-bgcolor, 50%), $btn-flat-info-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {
@@ -2267,7 +2267,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-warning-focus-border-color;
             color: $btn-flat-warning-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-warning-focus-bgcolor, 50%), $btn-flat-warning-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-warning-focus-bgcolor, 50%), $btn-flat-warning-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2293,7 +2293,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-warning-active-border-color;
             color: $btn-flat-warning-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-warning-active-bgcolor, 50%), $btn-flat-warning-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-warning-active-bgcolor, 50%), $btn-flat-warning-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {
@@ -2329,7 +2329,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-danger-focus-border-color;
             color: $btn-flat-danger-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-danger-focus-bgcolor, 50%), $btn-flat-danger-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-danger-focus-bgcolor, 50%), $btn-flat-danger-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2355,7 +2355,7 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             border-color: $btn-flat-danger-active-border-color;
             color: $btn-flat-danger-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-danger-active-bgcolor, 50%), $btn-flat-danger-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-danger-active-bgcolor, 50%), $btn-flat-danger-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {