npm - @syncfusion/blazor-themes - Versions diffs - 26.2.4 → 26.2.7 - Mend

@syncfusion/blazor-themes 26.2.4 → 26.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/SCSS-Themes/bootstrap5.scss CHANGED Viewed

@@ -54895,8 +54895,8 @@ $treeview-item-active-check-color: $primary !default;
     .e-list-item {
-      div.e-icons.e-icon-expandable::before,
-      div.e-icons.e-icon-collapsible::before {
+      div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
+      div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
         content: '\e75c';
       }
     }
@@ -67584,7 +67584,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 {
@@ -70057,13 +70058,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;
@@ -70075,7 +70076,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;
             }
@@ -70092,6 +70098,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;
@@ -124663,17 +124677,20 @@ $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 4px !default;
 $ribbon-large-items-btn-gap: 5px !default;
+$ribbon-large-items-min-width-height: 24px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: 400 !default;
 $ribbon-items-btn-size: $text-xs !default;
 $ribbon-items-label-size: $text-sm !default;
 $ribbon-items-btn-icon-size: $text-base !default;
+$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
 $ribbon-items-caret-icon-size: $text-base !default;
 $ribbon-items-margin: 5px !default;
 $ribbon-checkbox-margin: 7px 0 7px 12px !default;
 $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
 $ribbon-items-height: 18px !default;
+$ribbon-items-min-width-height: 16px !default;
 $ribbon-items-checkbox-size: $text-xs !default;
 $ribbon-items-checkbox-padding: 0 5px !default;
 $ribbon-input-group-height: 26px !default;
@@ -124808,6 +124825,8 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 18px !default;
+$ribbon-bigger-large-items-min-width-height: 32px !default;
+$ribbon-bigger-items-min-width-height: 20px;
 $ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -124816,6 +124835,7 @@ $ribbon-bigger-items-height: 18px !default;
 $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: $text-xl !default;
 $ribbon-bigger-items-btn-icon-size: $text-xl !default;
+$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
 $ribbon-bigger-items-margin: 7px !default;
 $ribbon-bigger-checkbox-margin: 7px 0 7px 16px !default;
 $ribbon-bigger-rtl-checkbox-margin: 7px 16px 7px 0 !default;
@@ -125034,6 +125054,14 @@ $ribbon-items-focus-box-shadow: none !default;
   line-height: $line-height;
 }
+@mixin ribbon-items-icon-images($items-size) {
+  min-height: $items-size;
+  min-width: $items-size;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
 @mixin ribbon-font-props($font-size, $line-height) {
   font-size: $font-size;
   line-height: $line-height;
@@ -125702,6 +125730,7 @@ $ribbon-items-focus-box-shadow: none !default;
           }
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
             font-size: $ribbon-large-items-icon-size;
             font-weight: $ribbon-items-font-weight;
             padding: $ribbon-large-items-icon-padding;
@@ -125820,6 +125849,9 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props(16px, 16px);
             margin: $ribbon-items-margin;
+            &:not(.e-caret) {
+              @include ribbon-items-icon-images($ribbon-items-min-width-height);
+            }
           }
         }
@@ -125961,6 +125993,13 @@ $ribbon-items-focus-box-shadow: none !default;
         width: 100%;
         height: $ribbon-medium-item-height;
+        .e-btn .e-btn-icon {
+          &:not(.e-caret) {
+            min-width: $ribbon-overflow-items-min-width-height;
+            min-height: $ribbon-overflow-items-min-width-height;
+          }
+        }
         .e-btn .e-btn-icon.e-icon-left {
           margin: 0;
         }
@@ -125999,7 +126038,7 @@ $ribbon-items-focus-box-shadow: none !default;
       &.e-ribbon-medium-item {
         .e-btn .e-btn-icon.e-icon-left {
-          padding: $ribbon-button-icon-padding;
+          margin: $ribbon-button-icon-padding;
         }
         &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126038,7 +126077,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-rtl-button-icon-padding;
+            margin: $ribbon-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126490,6 +126529,7 @@ $ribbon-items-focus-box-shadow: none !default;
           max-width: $ribbon-bigger-large-items-max-width;
           .e-btn-icon:not(.e-caret) {
+            @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
@@ -126520,6 +126560,10 @@ $ribbon-items-focus-box-shadow: none !default;
           .e-btn-icon {
             @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
             margin: $ribbon-bigger-items-margin;
+            &:not(.e-caret) {
+              min-width: $ribbon-bigger-items-min-width-height;
+              min-height: $ribbon-bigger-items-min-width-height;
+            }
           }
         }
@@ -126576,6 +126620,10 @@ $ribbon-items-focus-box-shadow: none !default;
         }
         .e-btn .e-btn-icon {
           font-size: $ribbon-bigger-items-btn-icon-size;
+          &:not(.e-caret) {
+            min-width: $ribbon-bigger-overflow-items-min-width-height;
+            min-height: $ribbon-bigger-overflow-items-min-width-height;
+          }
           &.e-icon-left {
             margin: 0;
           }
@@ -126612,7 +126660,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-button-icon-padding;
+            margin: $ribbon-bigger-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126648,7 +126696,7 @@ $ribbon-items-focus-box-shadow: none !default;
         &.e-ribbon-medium-item {
           .e-btn .e-btn-icon.e-icon-left {
-            padding: $ribbon-bigger-rtl-button-icon-padding;
+            margin: $ribbon-bigger-rtl-button-icon-padding;
           }
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {

package/SCSS-Themes/documenteditor/document-editor/bds-dark.scss CHANGED Viewed

@@ -4335,7 +4335,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 {

package/SCSS-Themes/documenteditor/document-editor/bds.scss CHANGED Viewed

@@ -4335,7 +4335,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 {

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

@@ -4327,7 +4327,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 {

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

@@ -4326,7 +4326,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 {

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

@@ -4339,7 +4339,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 {

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

@@ -4336,7 +4336,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 {

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

@@ -4336,7 +4336,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 {

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

@@ -4329,7 +4329,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 {

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

@@ -4328,7 +4328,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 {

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

@@ -4336,7 +4336,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 {

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

@@ -4336,7 +4336,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 {

package/SCSS-Themes/documenteditor/document-editor/fluent2-dark.scss CHANGED Viewed

@@ -456,7 +456,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;
@@ -547,7 +547,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;
@@ -4341,7 +4341,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 {

package/SCSS-Themes/documenteditor/document-editor/fluent2.scss CHANGED Viewed

@@ -456,7 +456,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;
@@ -547,7 +547,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;
@@ -4341,7 +4341,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 {

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

@@ -4328,7 +4328,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 {

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

@@ -4345,7 +4345,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 {

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

@@ -4345,7 +4345,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 {

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

@@ -4336,7 +4336,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 {

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

@@ -4336,7 +4336,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 {

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

@@ -4335,7 +4335,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 {

package/SCSS-Themes/documenteditor/document-editor/tailwind.scss CHANGED Viewed

@@ -4335,7 +4335,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 {

package/SCSS-Themes/documenteditor/document-editor-container/bds-dark.scss CHANGED Viewed

@@ -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/bds.scss CHANGED Viewed

@@ -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/bootstrap-dark.scss CHANGED Viewed

@@ -1521,13 +1521,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;
@@ -1539,7 +1539,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;
             }
@@ -1556,6 +1561,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/bootstrap.scss CHANGED Viewed

@@ -1521,13 +1521,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;
@@ -1539,7 +1539,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;
             }
@@ -1556,6 +1561,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;