@syncfusion/ej2-react-splitbuttons 20.2.36 → 20.2.45

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+### DropDownButton
+
+#### New Features
+
+- `#I375776` - Provided the focusout event support to DropDownButton component.
+
+### DropDownButton
+
+#### Bug Fixes
+
+- `#I388868` - Script error occurs while using `beforeOpen` event in DropDownButton issue has been resolved
+
 ## 19.4.40 (2021-12-28)
 
 ### DropDownButton

package/dist/ej2-react-splitbuttons.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-splitbuttons.umd.min.js
-*  version : 20.2.36
+*  version : 20.2.45
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-splitbuttons@*",
-  "_id": "@syncfusion/ej2-react-splitbuttons@20.2.1",
+  "_id": "@syncfusion/ej2-react-splitbuttons@20.2.38",
   "_inBundle": false,
-  "_integrity": "sha512-AG54R3J44SWy9ZaAr8hLYKoWxXf0jSzXzwUr81MMcxHy5Wb+dm2sJux4WTaNFWbCKgVL8UkWsbNfNCdZUjypXg==",
+  "_integrity": "sha512-Wq6TpSYnxL4hlZEetN9BUj24HdHrkkArZPsvsToLQiWIeclfvhuK0w0DWyyR3Opwj5B0742yPUbdwQGwE4FuZg==",
   "_location": "/@syncfusion/ej2-react-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-splitbuttons/-/ej2-react-splitbuttons-20.2.1.tgz",
-  "_shasum": "94f1e0a36e2bdc19c94adce7d53e50c89bec52f5",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-splitbuttons/-/ej2-react-splitbuttons-20.2.38.tgz",
+  "_shasum": "23c35a1063aa717d421f185cbe1e260383c51b8b",
   "_spec": "@syncfusion/ej2-react-splitbuttons@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.36",
-    "@syncfusion/ej2-react-base": "~20.2.36",
-    "@syncfusion/ej2-splitbuttons": "20.2.36"
+    "@syncfusion/ej2-base": "~20.2.45",
+    "@syncfusion/ej2-react-base": "~20.2.45",
+    "@syncfusion/ej2-splitbuttons": "20.2.45"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup. for React",
@@ -83,6 +83,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.2.36",
+  "version": "20.2.45",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -1771,19 +1771,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 64, 129, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(77, 132, 29, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(3, 120, 213, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(193, 87, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(214, 65, 19, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/bootstrap4.css

@@ -1751,7 +1751,7 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(73, 80, 87, 0.2);
 }
 
 *.e-warning .e-progress {

package/styles/button-group/fluent-dark.css

@@ -261,7 +261,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
   background-color: #006cbf;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
   outline: 1px solid;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
@@ -273,7 +273,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
   background-color: #0a5f0a;
   border-color: #0b6a0b;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -284,7 +284,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
   background-color: #03767a;
   border-color: #038387;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -295,7 +295,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
   background-color: #cf6228;
   border-color: #ca5010;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -306,7 +306,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
   background-color: #bc2f32;
   border-color: #d13438;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -379,7 +379,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
   background-color: #0060aa;
   border-color: #0060aa;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-success,
@@ -390,7 +390,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
   background-color: #095509;
   border-color: #095509;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-info,
@@ -400,7 +400,7 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #359c9f;
-  color: #fff;
+  color: #1b1a19;
   border-color: #359c9f;
   box-shadow: none;
 }
@@ -412,7 +412,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
   background-color: #d57340;
   border-color: #d57340;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-danger,
@@ -423,7 +423,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
   background-color: #a72a2d;
   border-color: #a72a2d;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-outline,
@@ -446,7 +446,7 @@
   background-color: #0060aa;
   border-color: #0078d4;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
 .e-btn-group input:active + label.e-btn.e-outline.e-success,
@@ -457,7 +457,7 @@
   background-color: #095509;
   border-color: #095509;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
 .e-btn-group input:active + label.e-btn.e-outline.e-info,
@@ -468,7 +468,7 @@
   background-color: #359c9f;
   border-color: #359c9f;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
 .e-btn-group input:active + label.e-btn.e-outline.e-warning,
@@ -479,7 +479,7 @@
   background-color: #d57340;
   border-color: #d57340;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
 .e-btn-group input:active + label.e-btn.e-outline.e-danger,
@@ -490,7 +490,7 @@
   background-color: #a72a2d;
   border-color: #a72a2d;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:disabled,
 .e-btn-group input:disabled + label.e-btn,

package/styles/fluent-dark.css

@@ -773,7 +773,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
   background-color: #006cbf;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
   outline: 1px solid;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
@@ -785,7 +785,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
   background-color: #0a5f0a;
   border-color: #0b6a0b;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -796,7 +796,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
   background-color: #03767a;
   border-color: #038387;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -807,7 +807,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
   background-color: #cf6228;
   border-color: #ca5010;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -818,7 +818,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
   background-color: #bc2f32;
   border-color: #d13438;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -891,7 +891,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
   background-color: #0060aa;
   border-color: #0060aa;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-success,
@@ -902,7 +902,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
   background-color: #095509;
   border-color: #095509;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-info,
@@ -912,7 +912,7 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #359c9f;
-  color: #fff;
+  color: #1b1a19;
   border-color: #359c9f;
   box-shadow: none;
 }
@@ -924,7 +924,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
   background-color: #d57340;
   border-color: #d57340;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-danger,
@@ -935,7 +935,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
   background-color: #a72a2d;
   border-color: #a72a2d;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-outline,
@@ -958,7 +958,7 @@
   background-color: #0060aa;
   border-color: #0078d4;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
 .e-btn-group input:active + label.e-btn.e-outline.e-success,
@@ -969,7 +969,7 @@
   background-color: #095509;
   border-color: #095509;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
 .e-btn-group input:active + label.e-btn.e-outline.e-info,
@@ -980,7 +980,7 @@
   background-color: #359c9f;
   border-color: #359c9f;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
 .e-btn-group input:active + label.e-btn.e-outline.e-warning,
@@ -991,7 +991,7 @@
   background-color: #d57340;
   border-color: #d57340;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
 .e-btn-group input:active + label.e-btn.e-outline.e-danger,
@@ -1002,7 +1002,7 @@
   background-color: #a72a2d;
   border-color: #a72a2d;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:disabled,
 .e-btn-group input:disabled + label.e-btn,
@@ -1586,14 +1586,14 @@
   stroke: #fff;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #0078d4;
@@ -1606,14 +1606,14 @@
   stroke: #0078d4;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #0b6a0b;
@@ -1626,14 +1626,14 @@
   stroke: #0b6a0b;
 }
 .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: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #038387;
@@ -1646,14 +1646,14 @@
   stroke: #038387;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #ca5010;
@@ -1666,14 +1666,14 @@
   stroke: #ca5010;
 }
 .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;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #d13438;
@@ -1762,19 +1762,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/highcontrast.css

@@ -1814,11 +1814,11 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {

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

@@ -496,19 +496,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 64, 129, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(77, 132, 29, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(3, 120, 213, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(193, 87, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(214, 65, 19, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/bootstrap4.css

@@ -489,7 +489,7 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(73, 80, 87, 0.2);
 }
 
 *.e-warning .e-progress {

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

@@ -320,14 +320,14 @@
   stroke: #fff;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #0078d4;
@@ -340,14 +340,14 @@
   stroke: #0078d4;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #0b6a0b;
@@ -360,14 +360,14 @@
   stroke: #0b6a0b;
 }
 .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: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #038387;
@@ -380,14 +380,14 @@
   stroke: #038387;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #ca5010;
@@ -400,14 +400,14 @@
   stroke: #ca5010;
 }
 .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;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .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: #d13438;
@@ -496,19 +496,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/highcontrast.css

@@ -488,11 +488,11 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {