@syncfusion/ej2-splitbuttons 28.1.41 → 29.1.33

package/styles/progress-button/_theme.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @include export-module('progress-button-theme') {
 
   /*! Progress Button Theme */
@@ -34,7 +36,7 @@
 
         .e-path-circle {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
+            stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
@@ -50,10 +52,10 @@
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap'{
-              stroke: fade-out($btn-flat-primary-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-primary-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -78,7 +80,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -100,7 +102,7 @@
 
         .e-path-circle {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
+            stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
@@ -116,11 +118,11 @@
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else {
               @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-                stroke: fade-out($btn-flat-success-color, $progress-btn-circle-opacity);
+                stroke: color.adjust($btn-flat-success-color, $alpha: -$progress-btn-circle-opacity);
               }
             }
           }
@@ -146,7 +148,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -168,10 +170,10 @@
 
         .e-path-circle {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
+            stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
           }
           @if $skin-name == 'fluent2' {
-            stroke: fade-out(#242424, $progress-btn-circle-opacity);
+            stroke: color.adjust(#242424, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
@@ -187,10 +189,10 @@
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-info-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-info-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -215,7 +217,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -237,7 +239,7 @@
 
         .e-path-circle {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
+            stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
@@ -253,7 +255,7 @@
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else {
               stroke: $btn-flat-warning-color;
@@ -281,7 +283,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -303,7 +305,7 @@
 
         .e-path-circle {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
+            stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
@@ -319,10 +321,10 @@
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-flat-danger-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-flat-danger-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -347,7 +349,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -367,7 +369,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-primary-bgcolor, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -384,7 +386,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-success-bgcolor, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-success-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
           .e-path-arc {
@@ -400,7 +402,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-info-bgcolor, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -417,7 +419,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-warning-bgcolor, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-warning-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -434,7 +436,7 @@
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: fade-out($btn-danger-bgcolor, $progress-btn-circle-opacity);
+              stroke: color.adjust($btn-danger-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -452,7 +454,7 @@
 
         .e-path-circle {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
+            stroke: color.adjust($btn-link-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
@@ -487,7 +489,7 @@
     &.e-primary {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($progress-btn-flat-primary-progress-color, .8);
+          background: color.adjust($progress-btn-flat-primary-progress-color, $alpha: -.8);
         }
       }
     }
@@ -495,7 +497,7 @@
     &.e-success {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($progress-btn-flat-success-progress-color, .8);
+          background: color.adjust($progress-btn-flat-success-progress-color, $alpha: -.8);
         }
       }
     }
@@ -503,7 +505,7 @@
     &.e-info {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($progress-btn-flat-info-progress-color, .8);
+          background: color.adjust($progress-btn-flat-info-progress-color, $alpha: -.8);
         }
       }
     }
@@ -511,7 +513,7 @@
     &.e-warning {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($progress-btn-flat-warning-progress-color, .8);
+          background: color.adjust($progress-btn-flat-warning-progress-color, $alpha: -.8);
         }
       }
     }
@@ -519,7 +521,7 @@
     &.e-danger {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($progress-btn-flat-danger-progress-color, .8);
+          background: color.adjust($progress-btn-flat-danger-progress-color, $alpha: -.8);
         }
       }
     }
@@ -529,7 +531,7 @@
     &.e-primary {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($btn-primary-bgcolor, .8);
+          background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -537,7 +539,7 @@
     &.e-success {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($btn-success-bgcolor, .8);
+          background: color.adjust($btn-success-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -545,7 +547,7 @@
     &.e-info {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($btn-info-bgcolor, .8);
+          background: color.adjust($btn-info-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -553,7 +555,7 @@
     &.e-warning {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($btn-warning-bgcolor, .8);
+          background: color.adjust($btn-warning-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -561,7 +563,7 @@
     &.e-danger {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: fade-out($btn-danger-bgcolor, .8);
+          background: color.adjust($btn-danger-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -607,7 +609,7 @@
       &.e-primary {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: fade-out($btn-primary-bgcolor, .8);
+            background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -615,7 +617,7 @@
       &.e-success {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: fade-out($btn-success-bgcolor, .8);
+            background: color.adjust($btn-success-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -623,7 +625,7 @@
       &.e-info {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: fade-out($btn-info-bgcolor, .8);
+            background: color.adjust($btn-info-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -631,7 +633,7 @@
       &.e-warning {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: fade-out($btn-warning-bgcolor, .8);
+            background: color.adjust($btn-warning-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -639,7 +641,7 @@
       &.e-danger {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: fade-out($btn-danger-bgcolor, .8);
+            background: color.adjust($btn-danger-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -690,7 +692,7 @@
   }
 
   .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle {
-    stroke: fade-out(#242424, $progress-btn-circle-opacity) !important; /* stylelint-disable-line declaration-no-important */
+    stroke: color.adjust(#242424, $alpha: -$progress-btn-circle-opacity) !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle {

package/styles/progress-button/bootstrap5-dark.css

@@ -354,8 +354,8 @@
   stroke: #fff;
 }
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
-  fill: #408cfd;
-  stroke: #408cfd;
+  fill: rgb(63.5819672131, 140.3073770492, 253.4180327869);
+  stroke: rgb(63.5819672131, 140.3073770492, 253.4180327869);
 }
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
@@ -368,11 +368,11 @@
   stroke: #fff;
 }
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
-  fill: #2ed889;
-  stroke: #2ed889;
+  fill: rgb(45.75, 216.25, 137.2);
+  stroke: rgb(45.75, 216.25, 137.2);
 }
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #2ed889;
+  stroke: rgb(45.75, 216.25, 137.2);
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: #000;
@@ -396,14 +396,14 @@
   stroke: #000;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
-  fill: #ffce3a;
-  stroke: #ffce3a;
+  fill: rgb(255, 205.75, 58);
+  stroke: rgb(255, 205.75, 58);
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: #ffce3a;
+  stroke: rgb(255, 205.75, 58);
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #ffce3a;
+  stroke: rgb(255, 205.75, 58);
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: #fff;
@@ -413,11 +413,11 @@
   stroke: #fff;
 }
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
-  fill: #eb8c95;
-  stroke: #eb8c95;
+  fill: rgb(235.0632911392, 139.9367088608, 149.0506329114);
+  stroke: rgb(235.0632911392, 139.9367088608, 149.0506329114);
 }
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #eb8c95;
+  stroke: rgb(235.0632911392, 139.9367088608, 149.0506329114);
 }
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg {
   fill: #0d6efd;
@@ -477,8 +477,8 @@
 }
 
 .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
-  fill: #868e96;
-  stroke: #868e96;
+  fill: rgb(133.7553648069, 142.4849785408, 150.2446351931);
+  stroke: rgb(133.7553648069, 142.4849785408, 150.2446351931);
 }
 
 .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
@@ -487,7 +487,7 @@
 }
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #868e96;
+  stroke: rgb(133.7553648069, 142.4849785408, 150.2446351931);
 }
 
 *.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,

package/styles/split-button/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $split-btn-zindex: 2;
 $split-btn-border-radius: 4px;
 $split-btn-focus-border-color: $gray-600;
@@ -8,14 +10,14 @@ $split-btn-seperator-border: 1px solid;
 $split-btn-seperator-border-color: $gray-600;
 $split-btn-seperator-default-border-color: $gray-600;
 $split-btn-seperator-vertical-border-color: $gray-600;
-$split-btn-hover-border-color: darken($gray-600, 10%);
-$split-btn-hover-vertical-border-color: darken($gray-600, 10%);
-$split-btn-active-border-color: darken($gray-600, 12.5%);
-$split-btn-active-vertical-border-color: darken($gray-600, 12.5%);
+$split-btn-hover-border-color: color.adjust($gray-600, $lightness: -10%);
+$split-btn-hover-vertical-border-color: color.adjust($gray-600, $lightness: -10%);
+$split-btn-active-border-color: color.adjust($gray-600, $lightness: -12.5%);
+$split-btn-active-vertical-border-color: color.adjust($gray-600, $lightness: -12.5%);
 $split-btn-disabled-vertical-border-color: rgba($gray-600, .65);
 $split-btn-active-box-shadow: $btn-active-box-shadow;
 $split-btn-disabled-left-border-color: rgba($gray-600, .65);
-$split-btn-hover-left-border-color: darken($gray-600, 10%);
+$split-btn-hover-left-border-color: color.adjust($gray-600, $lightness: -10%);
 $split-btn-focus-left-border-color: $gray-600;
 $split-btn-active-left-border-color: $gray-600;
 $split-btn-sec-btn-margin-left: -1px;

package/styles/split-button/bds.css

@@ -396,7 +396,7 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 16px;
+  font-size: 18px;
   margin-left: 0;
   padding-right: 10px;
   width: auto;

package/styles/split-button/bootstrap-dark.css

@@ -36,7 +36,7 @@
   padding-top: 10px;
 }
 .e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 14px;
+  font-size: 16px;
   margin-left: 0;
   padding-right: 8px;
   width: auto;
@@ -279,7 +279,7 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 16px;
+  font-size: 20px;
   margin-left: 0;
   padding-right: 10px;
   width: auto;

package/styles/split-button/bootstrap.css

@@ -36,7 +36,7 @@
   padding-top: 10px;
 }
 .e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 14px;
+  font-size: 16px;
   margin-left: 0;
   padding-right: 8px;
   width: auto;
@@ -279,7 +279,7 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 16px;
+  font-size: 20px;
   margin-left: 0;
   padding-right: 10px;
   width: auto;

package/styles/split-button/bootstrap4.css

@@ -25,8 +25,8 @@
           box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
-          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -34,7 +34,7 @@
   padding-top: 10px;
 }
 .e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 14px;
+  font-size: 16px;
   margin-left: 0;
   padding-right: 8px;
   width: auto;
@@ -58,8 +58,8 @@
   padding-right: 8px;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
-          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -73,8 +73,8 @@
           box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:active {
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
-          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
 }
 .e-split-btn-wrapper .e-btn:disabled {
   -webkit-box-shadow: none;
@@ -168,7 +168,7 @@
   border-right-color: #6c757d;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  border-right-color: #4e555b;
+  border-right-color: rgb(78.4506437768, 84.9881974249, 90.7993562232);
 }
 .e-split-btn-wrapper .e-split-btn:disabled {
   border-right-color: rgba(108, 117, 125, 0.65);
@@ -177,7 +177,7 @@
   border-color: transparent;
 }
 .e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
-  border-right-color: #545b62;
+  border-right-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled {
   border-right-color: transparent;
@@ -191,8 +191,8 @@
   border-right-color: #6c757d;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn:active {
-  border-left-color: #4e555b;
-  border-right-color: #4e555b;
+  border-left-color: rgb(78.4506437768, 84.9881974249, 90.7993562232);
+  border-right-color: rgb(78.4506437768, 84.9881974249, 90.7993562232);
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn:disabled {
   border-left-color: transparent;
@@ -202,8 +202,8 @@
   border-color: transparent;
 }
 .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active) {
-  border-left-color: #545b62;
-  border-right-color: #545b62;
+  border-left-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+  border-right-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled {
   border-left-color: transparent;
@@ -220,16 +220,16 @@
   border-right-color: #6c757d;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn:active {
-  border-bottom-color: #4e555b;
-  border-right-color: #4e555b;
+  border-bottom-color: rgb(78.4506437768, 84.9881974249, 90.7993562232);
+  border-right-color: rgb(78.4506437768, 84.9881974249, 90.7993562232);
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn:disabled {
   border-bottom-color: transparent;
   border-right-color: rgba(108, 117, 125, 0.65);
 }
 .e-split-btn-wrapper.e-vertical:hover .e-split-btn {
-  border-bottom-color: #545b62;
-  border-right-color: #545b62;
+  border-bottom-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+  border-right-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-split-btn-wrapper.e-vertical:hover .e-split-btn.e-inherit, .e-split-btn-wrapper.e-vertical:hover .e-split-btn.e-inherit:disabled {
   border-color: transparent;
@@ -253,7 +253,7 @@
   border-left-color: rgba(108, 117, 125, 0.65);
 }
 .e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn {
-  border-left-color: #545b62;
+  border-left-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn.e-inherit {
   border-color: transparent;
@@ -271,7 +271,7 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
-  font-size: 16px;
+  font-size: 20px;
   margin-left: 0;
   padding-right: 10px;
   width: auto;