@syncfusion/blazor-themes 26.2.5 → 26.2.7

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

@@ -1525,13 +1525,13 @@ $de-prop-btn-icon-clr: #ccc;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -1543,7 +1543,12 @@ $de-prop-btn-icon-clr: #ccc;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -1560,6 +1565,14 @@ $de-prop-btn-icon-clr: #ccc;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

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

@@ -1524,13 +1524,13 @@ $de-prop-btn-icon-clr: #ccc;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -1542,7 +1542,12 @@ $de-prop-btn-icon-clr: #ccc;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -1559,6 +1564,14 @@ $de-prop-btn-icon-clr: #ccc;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

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

@@ -1547,13 +1547,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -1565,7 +1565,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -1582,6 +1587,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

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

@@ -1547,13 +1547,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -1565,7 +1565,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -1582,6 +1587,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/documenteditor/document-editor-container/tailwind-dark.scss

@@ -1537,13 +1537,13 @@ $de-hlt-clr-height-bigger: 24px;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -1555,7 +1555,12 @@ $de-hlt-clr-height-bigger: 24px;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -1572,6 +1577,14 @@ $de-hlt-clr-height-bigger: 24px;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/documenteditor/document-editor-container/tailwind.scss

@@ -1537,13 +1537,13 @@ $de-hlt-clr-height-bigger: 24px;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -1555,7 +1555,12 @@ $de-hlt-clr-height-bigger: 24px;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -1572,6 +1577,14 @@ $de-hlt-clr-height-bigger: 24px;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/fabric-dark.scss

@@ -67324,7 +67324,8 @@ $de-column-presets-font-size: 60px !default;
         .e-de-style-paragraph-group-button .e-btn.e-active,
         .e-de-style-font-group-button .e-btn.e-active {
             @if $skin-name =='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed);
+            color: var(--color-sf-toolbar-icon-color);
             }
         }
         .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -69738,13 +69739,13 @@ $de-prop-btn-icon-clr: #ccc;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -69756,7 +69757,12 @@ $de-prop-btn-icon-clr: #ccc;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -69773,6 +69779,14 @@ $de-prop-btn-icon-clr: #ccc;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/fabric.scss

@@ -67095,7 +67095,8 @@ $de-column-presets-font-size: 60px !default;
         .e-de-style-paragraph-group-button .e-btn.e-active,
         .e-de-style-font-group-button .e-btn.e-active {
             @if $skin-name =='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed);
+            color: var(--color-sf-toolbar-icon-color);
             }
         }
         .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -69507,13 +69508,13 @@ $de-prop-btn-icon-clr: #ccc;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -69525,7 +69526,12 @@ $de-prop-btn-icon-clr: #ccc;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -69542,6 +69548,14 @@ $de-prop-btn-icon-clr: #ccc;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/fluent-dark.scss

@@ -67721,7 +67721,8 @@ $de-column-presets-font-size: $text-6xl !default;
         .e-de-style-paragraph-group-button .e-btn.e-active,
         .e-de-style-font-group-button .e-btn.e-active {
             @if $skin-name =='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed);
+            color: var(--color-sf-toolbar-icon-color);
             }
         }
         .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -70196,13 +70197,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -70214,7 +70215,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -70231,6 +70237,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/fluent.scss

@@ -67721,7 +67721,8 @@ $de-column-presets-font-size: $text-6xl !default;
         .e-de-style-paragraph-group-button .e-btn.e-active,
         .e-de-style-font-group-button .e-btn.e-active {
             @if $skin-name =='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed);
+            color: var(--color-sf-toolbar-icon-color);
             }
         }
         .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -70196,13 +70197,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -70214,7 +70215,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -70231,6 +70237,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/fluent2-dark.scss

@@ -66031,7 +66031,7 @@ $de-ff-radio-scnd-div-mrgn-btm: 0;
 $de-fnt-dlg-header-effects-mrgn-btm: 0;
 $de-para-dlg-cs-check-box-mrgn-btm: 0;
 $de-bullet-numbered-dlg-width: 300px;
-$de-bullet-numbered-dlg-height: auto;
+$de-bullet-numbered-dlg-height: 173px;
 $de-tbl-indent-lb-fnt-size: $text-xs;
 $de-font-clr-div-mrgn-top: 12px;
 $de-para-dlg-cs-check-box-mrgn-top: 12px;
@@ -66122,7 +66122,7 @@ $de-checkbox-wrapper-color: $content-text-color !default;
 $bookmark-listview-border-color: $border !default;
 $de-style-btn-active-bg-border-color: $border-light !default;
 $de-style-btn-active-text-color: $content-text-color !default;
-$de-style-toggle-btn-color: $border-light !default;
+$de-style-toggle-btn-color: $secondary-bg-color !default;
 $de-table-align-hover-color: $primary !default;
 $de-table-tab-hover-color: $de-table-align-hover-color !default;
 $de-cell-align-hover-color: $de-table-align-hover-color !default;
@@ -69916,7 +69916,8 @@ $de-column-presets-font-size: $text-6xl !default;
         .e-de-style-paragraph-group-button .e-btn.e-active,
         .e-de-style-font-group-button .e-btn.e-active {
             @if $skin-name =='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed);
+            color: var(--color-sf-toolbar-icon-color);
             }
         }
         .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -72393,13 +72394,13 @@ $de-hlt-clr-height-bigger: 24px;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -72411,7 +72412,12 @@ $de-hlt-clr-height-bigger: 24px;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -72428,6 +72434,14 @@ $de-hlt-clr-height-bigger: 24px;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;

package/SCSS-Themes/fluent2.scss

@@ -66791,7 +66791,7 @@ $de-ff-radio-scnd-div-mrgn-btm: 0;
 $de-fnt-dlg-header-effects-mrgn-btm: 0;
 $de-para-dlg-cs-check-box-mrgn-btm: 0;
 $de-bullet-numbered-dlg-width: 300px;
-$de-bullet-numbered-dlg-height: auto;
+$de-bullet-numbered-dlg-height: 173px;
 $de-tbl-indent-lb-fnt-size: $text-xs;
 $de-font-clr-div-mrgn-top: 12px;
 $de-para-dlg-cs-check-box-mrgn-top: 12px;
@@ -66882,7 +66882,7 @@ $de-checkbox-wrapper-color: $content-text-color !default;
 $bookmark-listview-border-color: $border !default;
 $de-style-btn-active-bg-border-color: $border-light !default;
 $de-style-btn-active-text-color: $content-text-color !default;
-$de-style-toggle-btn-color: $border-light !default;
+$de-style-toggle-btn-color: $secondary-bg-color !default;
 $de-table-align-hover-color: $primary !default;
 $de-table-tab-hover-color: $de-table-align-hover-color !default;
 $de-cell-align-hover-color: $de-table-align-hover-color !default;
@@ -70676,7 +70676,8 @@ $de-column-presets-font-size: $text-6xl !default;
         .e-de-style-paragraph-group-button .e-btn.e-active,
         .e-de-style-font-group-button .e-btn.e-active {
             @if $skin-name =='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed);
+            color: var(--color-sf-toolbar-icon-color);
             }
         }
         .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -73153,13 +73154,13 @@ $de-hlt-clr-height-bigger: 24px;
     }
     .e-btn-toggle {
         @if $skin-name=='fluent2' {
-            background-color: var(--color-sf-secondary-bg-color);
+            background-color: var(--color-sf-content-bg-color-pressed) !important;
         }
         @else{
             background-color: $de-toggle-bg-color !important;
         }
         @if $skin-name =='fluent2' {
-            background-color: $de-items-pressed;
+            color: var(--color-sf-toolbar-icon-color) !important;
         }
         @if $skin-name=='highcontrast' {
             color: $de-title-bar-font-clr !important;
@@ -73171,7 +73172,12 @@ $de-hlt-clr-height-bigger: 24px;
         outline-offset: 0;
         box-shadow: $de-toggle-btn-border !important;
         #{if(&, '&', '*')}:hover {
-            background-color: $de-toggle-bg-color !important;
+            @if $skin-name=='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed) !important;
+            }
+            @else {
+                background-color: $de-toggle-bg-color !important;
+            }
             @if $skin-name=='fabric' {
                 border-color: $de-toggle-bg-color !important;
             }
@@ -73188,6 +73194,14 @@ $de-hlt-clr-height-bigger: 24px;
             color: $de-title-bar-font-clr !important;
         }
     }
+    @if $skin-name=='fluent2' {
+        .e-btn-toggle .e-tbar-btn-text {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+        .e-btn-toggle>span {
+            color: var(--color-sf-toolbar-icon-color) !important;
+        }
+    }
     @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
         .e-de-ctnr-group-btn-top>button:first-child {
             border-radius: 0;