@syncfusion/blazor-themes 22.2.7 → 22.2.9

package/SCSS-Themes/gantt/gantt/highcontrast.scss

@@ -1201,7 +1201,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/gantt/gantt/material-dark.scss

@@ -1202,7 +1202,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/gantt/gantt/material.scss

@@ -1202,7 +1202,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/gantt/gantt/material3-dark.scss

@@ -1206,7 +1206,7 @@ $gantt-split-container-line-border-color: rgba($outline);
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/gantt/gantt/material3.scss

@@ -1206,7 +1206,7 @@ $gantt-split-container-line-border-color: rgba($outline);
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/gantt/gantt/tailwind-dark.scss

@@ -1206,7 +1206,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/gantt/gantt/tailwind.scss

@@ -1206,7 +1206,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/highcontrast.scss

@@ -28278,8 +28278,10 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),
@@ -28374,8 +28376,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 {
@@ -28717,7 +28723,7 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }
@@ -63861,6 +63867,7 @@ $de-para-dlg-rtl-btn-font-size: 12px !default;
 $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-svg-border-stroke: $content-font !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -63877,6 +63884,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;
@@ -68646,7 +68661,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' {
@@ -90881,7 +90898,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/material-dark.scss

@@ -28725,8 +28725,10 @@ $cbox-border-style: solid !default;
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),
@@ -28821,8 +28823,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 {
@@ -29164,7 +29170,7 @@ $cbox-border-style: solid !default;
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }
@@ -65156,6 +65162,7 @@ $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-para-dlg-spacing-div-mrgn-left: 40px;
+$de-svg-border-stroke: $grey-dark-font !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -65172,6 +65179,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;
@@ -69935,7 +69950,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' {
@@ -92198,7 +92215,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,
@@ -108367,7 +108384,7 @@ $pivotgrid-cell-border-color: rgba($grey-light-font, .12) !default;
 $pivotgrid-default-border-color: $grey-700 !default;
 $pivotgrid-border-type: $border-type !default;
 $pivotgrid-border-size: 1px !default;
-$pivotgrid-table-background-color: $grey-white !default;
+$pivotgrid-table-background-color: $grey-900 !default;
 $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;

package/SCSS-Themes/material.scss

@@ -28522,8 +28522,10 @@ $cbox-border-style: solid !default;
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),
@@ -28618,8 +28620,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 {
@@ -28961,7 +28967,7 @@ $cbox-border-style: solid !default;
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }
@@ -64883,6 +64889,7 @@ $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-para-dlg-spacing-div-mrgn-left: 40px;
+$de-svg-border-stroke: rgba($grey-light-font, .87) !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -64899,6 +64906,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;
@@ -69661,7 +69676,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' {
@@ -91910,7 +91927,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,
@@ -108078,7 +108095,7 @@ $pivotgrid-cell-border-color: rgba($grey-light-font, .12) !default;
 $pivotgrid-default-border-color: $grey-300 !default;
 $pivotgrid-border-type: $border-type !default;
 $pivotgrid-border-size: 1px !default;
-$pivotgrid-table-background-color: $grey-white !default;
+$pivotgrid-table-background-color: $grey-100 !default;
 $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;

package/SCSS-Themes/material3-dark.scss

@@ -28914,8 +28914,10 @@ $cbox-border-style: solid !default;
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),
@@ -29010,8 +29012,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 {
@@ -29353,7 +29359,7 @@ $cbox-border-style: solid !default;
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }
@@ -65204,6 +65210,7 @@ $de-para-dlg-rtl-btn-width: 100px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 20px !default;
 $de-para-dlg-spacing-div-mrgn-left: 40px !default;
+$de-svg-border-stroke: rgba($content-text-color) !default;
 
 // Color variable
 $de-background: $content-bg-color-alt1 !default;
@@ -65308,6 +65315,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;
@@ -70140,7 +70155,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' {
@@ -92493,7 +92510,7 @@ $gantt-split-container-line-border-color: rgba($outline);
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/material3.scss

@@ -28996,8 +28996,10 @@ $cbox-border-style: solid !default;
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),
@@ -29092,8 +29094,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 {
@@ -29435,7 +29441,7 @@ $cbox-border-style: solid !default;
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }
@@ -65286,6 +65292,7 @@ $de-para-dlg-rtl-btn-width: 100px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-right: 24px !default;
 $de-de-rtl-btn-div-e-de-rtl-margin-left: 20px !default;
 $de-para-dlg-spacing-div-mrgn-left: 40px !default;
+$de-svg-border-stroke: rgba($content-text-color) !default;
 
 // Color variable
 $de-background: $content-bg-color-alt1 !default;
@@ -65390,6 +65397,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;
@@ -70222,7 +70237,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' {
@@ -92575,7 +92592,7 @@ $gantt-split-container-line-border-color: rgba($outline);
         pointer-events: none;
         position: absolute;
         top: 50%;
-        width: 99%;
+        width: 99.5%;
       }
 
       .e-gantt-child-taskbar-inner-div,

package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss

@@ -58,7 +58,7 @@ $pivotgrid-cell-border-color: $neutral-light !default;
 $pivotgrid-default-border-color: $neutral-light !default;
 $pivotgrid-border-type: $border-type !default;
 $pivotgrid-border-size: $border-size !default;
-$pivotgrid-table-background-color: $neutral-white !default;
+$pivotgrid-table-background-color: $neutral-lighter-alt !default;
 $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;

package/SCSS-Themes/pivotview/pivotview/fabric.scss

@@ -58,7 +58,7 @@ $pivotgrid-cell-border-color: rgba($neutral-black, .12) !default;
 $pivotgrid-default-border-color: $neutral-quintenaryalt !default;
 $pivotgrid-border-type: $border-type !default;
 $pivotgrid-border-size: $border-size !default;
-$pivotgrid-table-background-color: $neutral-white !default;
+$pivotgrid-table-background-color: $neutral-lighter !default;
 $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;

package/SCSS-Themes/pivotview/pivotview/material-dark.scss

@@ -58,7 +58,7 @@ $pivotgrid-cell-border-color: rgba($grey-light-font, .12) !default;
 $pivotgrid-default-border-color: $grey-700 !default;
 $pivotgrid-border-type: $border-type !default;
 $pivotgrid-border-size: 1px !default;
-$pivotgrid-table-background-color: $grey-white !default;
+$pivotgrid-table-background-color: $grey-900 !default;
 $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;

package/SCSS-Themes/pivotview/pivotview/material.scss

@@ -58,7 +58,7 @@ $pivotgrid-cell-border-color: rgba($grey-light-font, .12) !default;
 $pivotgrid-default-border-color: $grey-300 !default;
 $pivotgrid-border-type: $border-type !default;
 $pivotgrid-border-size: 1px !default;
-$pivotgrid-table-background-color: $grey-white !default;
+$pivotgrid-table-background-color: $grey-100 !default;
 $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;

package/SCSS-Themes/tailwind-dark.scss

@@ -28529,8 +28529,10 @@ $cbox-border-style: solid !default;
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),
@@ -28625,8 +28627,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 {
@@ -28968,7 +28974,7 @@ $cbox-border-style: solid !default;
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }
@@ -64034,6 +64040,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;
 
 // Table properties
 $de-row-height-bottom-margin: 0;
@@ -64134,6 +64141,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;
@@ -68959,7 +68974,9 @@ $de-hlt-clr-height-bigger: 24px;
   .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' {
@@ -91261,7 +91278,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,