@syncfusion/blazor-themes 22.2.8 → 22.2.10

package/SCSS-Themes/base/material.scss

@@ -150,7 +150,7 @@ $appbar-top-shadow: 0 -2px 3px rgba(0, 0, 0, .1), 0 -2px 6px rgba(0, 0, 0, .2) !
 
 @if not variable-exists('is-roboto-loaded') {
   //sass-lint:disable no-url-protocols,no-url-domains
-  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500');// stylelint-disable-line no-invalid-position-at-import-rule
+  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');// stylelint-disable-line no-invalid-position-at-import-rule
 }
 
 $is-roboto-loaded: 'true' !default;

package/SCSS-Themes/bootstrap-dark.scss

@@ -28613,8 +28613,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -28739,6 +28743,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -28761,6 +28767,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -63987,6 +63995,7 @@ $de-para-dlg-rtl-btn-font-size: 12px;
 $de-para-dlg-rtl-btn-width: 200px;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
+$de-svg-border-stroke: rgba($grey-dark-font, 1) !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -64003,6 +64012,14 @@ $de-column-presets-font-size: 60px !default;
     display: flex;
   }
 
+  .e-de-svg-border-color {
+    stroke: $de-svg-border-stroke;
+  }
+
+  .e-de-svg-border-fill-color {
+    fill: $de-svg-border-stroke;
+  }
+
   .e-de-container-row {
     display: flex;
     padding-bottom: $de-padding-full;
@@ -68769,7 +68786,9 @@ $de-prop-btn-icon-clr: #ccc;
   .e-de-toolbar {
     height: 100%;
   }
-
+  .e-documenteditorcontainer {
+    display: block;
+  }
   .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
     height: 0;
     @if $skin-name == 'tailwind' {
@@ -91045,7 +91064,7 @@ $gantt-masked-table-background-color: #e1dfdd;
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/bootstrap.scss

@@ -28387,8 +28387,12 @@ $cbox-key-focussed-bgcolor: transparent !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -28513,6 +28517,8 @@ $cbox-key-focussed-bgcolor: transparent !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -28535,6 +28541,8 @@ $cbox-key-focussed-bgcolor: transparent !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -63693,6 +63701,7 @@ $de-para-dlg-rtl-btn-font-size: 12px;
 $de-para-dlg-rtl-btn-width: 200px;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
+$de-svg-border-stroke: rgba($grey-light-font, 1) !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -63709,6 +63718,14 @@ $de-column-presets-font-size: 60px !default;
     display: flex;
   }
 
+  .e-de-svg-border-color {
+    stroke: $de-svg-border-stroke;
+  }
+
+  .e-de-svg-border-fill-color {
+    fill: $de-svg-border-stroke;
+  }
+
   .e-de-container-row {
     display: flex;
     padding-bottom: $de-padding-full;
@@ -68475,7 +68492,9 @@ $de-prop-btn-icon-clr: #ccc;
   .e-de-toolbar {
     height: 100%;
   }
-
+  .e-documenteditorcontainer {
+    display: block;
+  }
   .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
     height: 0;
     @if $skin-name == 'tailwind' {
@@ -90810,7 +90829,7 @@ $gantt-masked-table-background-color: #e1dfdd;
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/bootstrap4.scss

@@ -28356,8 +28356,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -28482,6 +28486,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -28504,6 +28510,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -63868,6 +63876,7 @@ $de-para-dlg-rtl-btn-font-size: 12px;
 $de-para-dlg-rtl-btn-width: 200px;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
+$de-svg-border-stroke: rgba($gray-900, 1) !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -63884,6 +63893,14 @@ $de-column-presets-font-size: 60px !default;
     display: flex;
   }
 
+  .e-de-svg-border-color {
+    stroke: $de-svg-border-stroke;
+  }
+
+  .e-de-svg-border-fill-color {
+    fill: $de-svg-border-stroke;
+  }
+
   .e-de-container-row {
     display: flex;
     padding-bottom: $de-padding-full;
@@ -68651,7 +68668,9 @@ $de-hlt-clr-height-bigger: 25px;
   .e-de-toolbar {
     height: 100%;
   }
-
+  .e-documenteditorcontainer {
+    display: block;
+  }
   .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
     height: 0;
     @if $skin-name == 'tailwind' {
@@ -91127,7 +91146,7 @@ $gantt-masked-table-background-color: #e1dfdd;
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/bootstrap5-dark.scss

@@ -28678,8 +28678,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -28804,6 +28808,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -28826,6 +28832,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -64087,6 +64095,7 @@ $de-para-dlg-rtl-btn-width: 200px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px !default;
 $de-para-dlg-spacing-div-mrgn-left: 40px !default;
+$de-svg-border-stroke: $content-text-color !default;
 
 // Color variable
 $de-background: $content-bg-color-alt1 !default;
@@ -64191,6 +64200,14 @@ $de-column-presets-font-size: $text-6xl !default;
     display: flex;
   }
 
+  .e-de-svg-border-color {
+    stroke: $de-svg-border-stroke;
+  }
+
+  .e-de-svg-border-fill-color {
+    fill: $de-svg-border-stroke;
+  }
+
   .e-de-container-row {
     display: flex;
     padding-bottom: $de-padding-full;
@@ -69022,7 +69039,9 @@ $de-hover-bg: $content-bg-color-alt2 !default;
   .e-de-toolbar {
     height: 100%;
   }
-
+  .e-documenteditorcontainer {
+    display: block;
+  }
   .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
     height: 0;
     @if $skin-name == 'tailwind' {
@@ -91342,7 +91361,7 @@ $gantt-masked-table-background-color: rgb(225,223,221);
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/bootstrap5.scss

@@ -28678,8 +28678,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -28804,6 +28808,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -28826,6 +28832,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -64087,6 +64095,7 @@ $de-para-dlg-rtl-btn-width: 200px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px !default;
 $de-para-dlg-spacing-div-mrgn-left: 40px !default;
+$de-svg-border-stroke: $content-text-color !default;
 
 // Color variable
 $de-background: $content-bg-color-alt1 !default;
@@ -64191,6 +64200,14 @@ $de-column-presets-font-size: $text-6xl !default;
     display: flex;
   }
 
+  .e-de-svg-border-color {
+    stroke: $de-svg-border-stroke;
+  }
+
+  .e-de-svg-border-fill-color {
+    fill: $de-svg-border-stroke;
+  }
+
   .e-de-container-row {
     display: flex;
     padding-bottom: $de-padding-full;
@@ -69022,7 +69039,9 @@ $de-hover-bg: $content-bg-color-alt2 !default;
   .e-de-toolbar {
     height: 100%;
   }
-
+  .e-documenteditorcontainer {
+    display: block;
+  }
   .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
     height: 0;
     @if $skin-name == 'tailwind' {
@@ -91342,7 +91361,7 @@ $gantt-masked-table-background-color: rgb(225,223,221);
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss

@@ -445,8 +445,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -571,6 +575,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -593,6 +599,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/bootstrap.scss

@@ -442,8 +442,12 @@ $cbox-key-focussed-bgcolor: transparent !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -568,6 +572,8 @@ $cbox-key-focussed-bgcolor: transparent !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -590,6 +596,8 @@ $cbox-key-focussed-bgcolor: transparent !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/bootstrap4.scss

@@ -445,8 +445,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -571,6 +575,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -593,6 +599,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss

@@ -445,8 +445,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -571,6 +575,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -593,6 +599,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/bootstrap5.scss

@@ -445,8 +445,12 @@ $cbox-border-style: solid !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -571,6 +575,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -593,6 +599,8 @@ $cbox-border-style: solid !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/fabric-dark.scss

@@ -447,8 +447,12 @@ $cbox-ripple-size: -9px !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -573,6 +577,8 @@ $cbox-ripple-size: -9px !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -595,6 +601,8 @@ $cbox-ripple-size: -9px !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/fabric.scss

@@ -444,8 +444,12 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -570,6 +574,8 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -592,6 +598,8 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/fluent-dark.scss

@@ -449,8 +449,12 @@ $cbox-icon-color: $icon-color !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -575,6 +579,8 @@ $cbox-icon-color: $icon-color !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -597,6 +603,8 @@ $cbox-icon-color: $icon-color !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }

package/SCSS-Themes/buttons/check-box/fluent.scss

@@ -449,8 +449,12 @@ $cbox-icon-color: $icon-color !default;
         margin: 0;
 
         &:hover {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          @if $skin-name != 'FluentUI' {
+            &.e-check {
+              background-color: $cbox-checkmark-hover-bgcolor;
+              border-color: $cbox-checkmark-hover-border-color;
+            }
+          }
           @if $skin-name == 'FluentUI' {
             &:not(.e-check),
             &:not(.e-stop)::before {
@@ -575,6 +579,8 @@ $cbox-icon-color: $icon-color !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }
@@ -597,6 +603,8 @@ $cbox-icon-color: $icon-color !default;
             }
 
             &.e-stop {
+              background-color: $cbox-focussed-checkmark-bgcolor;
+              border-color: $cbox-focussed-checkmark-border-color;
               box-shadow: $cbox-focussed-box-shadow;
               color: $cbox-indeterminate-hover-color;
             }