@syncfusion/blazor-themes 22.2.7 → 22.2.9

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

@@ -351,8 +351,10 @@ $cbox-icon-color: $icon-color !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),
@@ -447,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 {
@@ -790,7 +796,7 @@ $cbox-icon-color: $icon-color !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;
             }

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

@@ -351,8 +351,10 @@ $cbox-icon-color: $icon-color !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),
@@ -447,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 {
@@ -790,7 +796,7 @@ $cbox-icon-color: $icon-color !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;
             }

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

@@ -345,8 +345,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),
@@ -441,8 +443,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 {
@@ -784,7 +790,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;
             }

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

@@ -350,8 +350,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),
@@ -446,8 +448,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 {
@@ -789,7 +795,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;
             }

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

@@ -346,8 +346,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),
@@ -442,8 +444,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 {
@@ -785,7 +791,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;
             }

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

@@ -347,8 +347,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),
@@ -443,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 {
@@ -786,7 +792,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;
             }

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

@@ -347,8 +347,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),
@@ -443,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 {
@@ -786,7 +792,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;
             }

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

@@ -347,8 +347,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),
@@ -443,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 {
@@ -786,7 +792,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;
             }

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

@@ -347,8 +347,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),
@@ -443,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 {
@@ -786,7 +792,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;
             }

package/SCSS-Themes/documenteditor/document-editor/bootstrap-dark.scss

@@ -580,6 +580,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;
@@ -596,6 +597,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;

package/SCSS-Themes/documenteditor/document-editor/bootstrap.scss

@@ -579,6 +579,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;
@@ -595,6 +596,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;

package/SCSS-Themes/documenteditor/document-editor/bootstrap4.scss

@@ -592,6 +592,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;
@@ -608,6 +609,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;

package/SCSS-Themes/documenteditor/document-editor/bootstrap5-dark.scss

@@ -505,6 +505,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;
@@ -609,6 +610,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;

package/SCSS-Themes/documenteditor/document-editor/bootstrap5.scss

@@ -505,6 +505,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;
@@ -609,6 +610,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;

package/SCSS-Themes/documenteditor/document-editor/fabric-dark.scss

@@ -582,6 +582,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: $neutral-light-font !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -598,6 +599,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;

package/SCSS-Themes/documenteditor/document-editor/fabric.scss

@@ -581,6 +581,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: $neutral-light-font !default;
 
 // Table properties
 $de-row-height-bottom-margin: 8px;
@@ -597,6 +598,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;

package/SCSS-Themes/documenteditor/document-editor/fluent-dark.scss

@@ -514,6 +514,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-alt4 !default;
@@ -618,6 +619,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;

package/SCSS-Themes/documenteditor/document-editor/fluent.scss

@@ -514,6 +514,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-alt4 !default;
@@ -618,6 +619,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;

package/SCSS-Themes/documenteditor/document-editor/highcontrast.scss

@@ -581,6 +581,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;
@@ -597,6 +598,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;

package/SCSS-Themes/documenteditor/document-editor/material-dark.scss

@@ -598,6 +598,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;
@@ -614,6 +615,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;

package/SCSS-Themes/documenteditor/document-editor/material.scss

@@ -598,6 +598,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;
@@ -614,6 +615,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;

package/SCSS-Themes/documenteditor/document-editor/material3-dark.scss

@@ -505,6 +505,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;
@@ -609,6 +610,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;

package/SCSS-Themes/documenteditor/document-editor/material3.scss

@@ -505,6 +505,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;
@@ -609,6 +610,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;