@syncfusion/blazor-themes 26.2.5 → 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 (61) hide show
  1. package/SCSS-Themes/bds-dark.scss +18 -4
  2. package/SCSS-Themes/bds.scss +18 -4
  3. package/SCSS-Themes/bootstrap-dark.scss +18 -4
  4. package/SCSS-Themes/bootstrap.scss +18 -4
  5. package/SCSS-Themes/bootstrap4.scss +18 -4
  6. package/SCSS-Themes/bootstrap5-dark.scss +18 -4
  7. package/SCSS-Themes/bootstrap5.scss +18 -4
  8. package/SCSS-Themes/documenteditor/document-editor/bds-dark.scss +2 -1
  9. package/SCSS-Themes/documenteditor/document-editor/bds.scss +2 -1
  10. package/SCSS-Themes/documenteditor/document-editor/bootstrap-dark.scss +2 -1
  11. package/SCSS-Themes/documenteditor/document-editor/bootstrap.scss +2 -1
  12. package/SCSS-Themes/documenteditor/document-editor/bootstrap4.scss +2 -1
  13. package/SCSS-Themes/documenteditor/document-editor/bootstrap5-dark.scss +2 -1
  14. package/SCSS-Themes/documenteditor/document-editor/bootstrap5.scss +2 -1
  15. package/SCSS-Themes/documenteditor/document-editor/fabric-dark.scss +2 -1
  16. package/SCSS-Themes/documenteditor/document-editor/fabric.scss +2 -1
  17. package/SCSS-Themes/documenteditor/document-editor/fluent-dark.scss +2 -1
  18. package/SCSS-Themes/documenteditor/document-editor/fluent.scss +2 -1
  19. package/SCSS-Themes/documenteditor/document-editor/fluent2-dark.scss +4 -3
  20. package/SCSS-Themes/documenteditor/document-editor/fluent2.scss +4 -3
  21. package/SCSS-Themes/documenteditor/document-editor/highcontrast.scss +2 -1
  22. package/SCSS-Themes/documenteditor/document-editor/material-dark.scss +2 -1
  23. package/SCSS-Themes/documenteditor/document-editor/material.scss +2 -1
  24. package/SCSS-Themes/documenteditor/document-editor/material3-dark.scss +2 -1
  25. package/SCSS-Themes/documenteditor/document-editor/material3.scss +2 -1
  26. package/SCSS-Themes/documenteditor/document-editor/tailwind-dark.scss +2 -1
  27. package/SCSS-Themes/documenteditor/document-editor/tailwind.scss +2 -1
  28. package/SCSS-Themes/documenteditor/document-editor-container/bds-dark.scss +16 -3
  29. package/SCSS-Themes/documenteditor/document-editor-container/bds.scss +16 -3
  30. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap-dark.scss +16 -3
  31. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap.scss +16 -3
  32. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap4.scss +16 -3
  33. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5-dark.scss +16 -3
  34. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5.scss +16 -3
  35. package/SCSS-Themes/documenteditor/document-editor-container/fabric-dark.scss +16 -3
  36. package/SCSS-Themes/documenteditor/document-editor-container/fabric.scss +16 -3
  37. package/SCSS-Themes/documenteditor/document-editor-container/fluent-dark.scss +16 -3
  38. package/SCSS-Themes/documenteditor/document-editor-container/fluent.scss +16 -3
  39. package/SCSS-Themes/documenteditor/document-editor-container/fluent2-dark.scss +16 -3
  40. package/SCSS-Themes/documenteditor/document-editor-container/fluent2.scss +16 -3
  41. package/SCSS-Themes/documenteditor/document-editor-container/highcontrast.scss +16 -3
  42. package/SCSS-Themes/documenteditor/document-editor-container/material-dark.scss +16 -3
  43. package/SCSS-Themes/documenteditor/document-editor-container/material.scss +16 -3
  44. package/SCSS-Themes/documenteditor/document-editor-container/material3-dark.scss +16 -3
  45. package/SCSS-Themes/documenteditor/document-editor-container/material3.scss +16 -3
  46. package/SCSS-Themes/documenteditor/document-editor-container/tailwind-dark.scss +16 -3
  47. package/SCSS-Themes/documenteditor/document-editor-container/tailwind.scss +16 -3
  48. package/SCSS-Themes/fabric-dark.scss +18 -4
  49. package/SCSS-Themes/fabric.scss +18 -4
  50. package/SCSS-Themes/fluent-dark.scss +18 -4
  51. package/SCSS-Themes/fluent.scss +18 -4
  52. package/SCSS-Themes/fluent2-dark.scss +20 -6
  53. package/SCSS-Themes/fluent2.scss +20 -6
  54. package/SCSS-Themes/highcontrast.scss +18 -4
  55. package/SCSS-Themes/material-dark.scss +18 -4
  56. package/SCSS-Themes/material.scss +18 -4
  57. package/SCSS-Themes/material3-dark.scss +18 -4
  58. package/SCSS-Themes/material3.scss +18 -4
  59. package/SCSS-Themes/tailwind-dark.scss +18 -4
  60. package/SCSS-Themes/tailwind.scss +18 -4
  61. package/package.json +1 -1
package/SCSS-Themes/bds-dark.scss CHANGED
@@ -68736,7 +68736,8 @@ $de-column-presets-font-size: $text-6xl !default;
68736
68736
  .e-de-style-paragraph-group-button .e-btn.e-active,
68737
68737
  .e-de-style-font-group-button .e-btn.e-active {
68738
68738
  @if $skin-name =='fluent2' {
68739
- background-color: var(--color-sf-secondary-bg-color);
68739
+ background-color: var(--color-sf-content-bg-color-pressed);
68740
+ color: var(--color-sf-toolbar-icon-color);
68740
68741
  }
68741
68742
  }
68742
68743
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -71203,13 +71204,13 @@ $de-hlt-clr-height-bigger: 24px;
71203
71204
  }
71204
71205
  .e-btn-toggle {
71205
71206
  @if $skin-name=='fluent2' {
71206
- background-color: var(--color-sf-secondary-bg-color);
71207
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
71207
71208
  }
71208
71209
  @else{
71209
71210
  background-color: $de-toggle-bg-color !important;
71210
71211
  }
71211
71212
  @if $skin-name =='fluent2' {
71212
- background-color: $de-items-pressed;
71213
+ color: var(--color-sf-toolbar-icon-color) !important;
71213
71214
  }
71214
71215
  @if $skin-name=='highcontrast' {
71215
71216
  color: $de-title-bar-font-clr !important;
@@ -71221,7 +71222,12 @@ $de-hlt-clr-height-bigger: 24px;
71221
71222
  outline-offset: 0;
71222
71223
  box-shadow: $de-toggle-btn-border !important;
71223
71224
  #{if(&, '&', '*')}:hover {
71224
- background-color: $de-toggle-bg-color !important;
71225
+ @if $skin-name=='fluent2' {
71226
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
71227
+ }
71228
+ @else {
71229
+ background-color: $de-toggle-bg-color !important;
71230
+ }
71225
71231
  @if $skin-name=='fabric' {
71226
71232
  border-color: $de-toggle-bg-color !important;
71227
71233
  }
@@ -71238,6 +71244,14 @@ $de-hlt-clr-height-bigger: 24px;
71238
71244
  color: $de-title-bar-font-clr !important;
71239
71245
  }
71240
71246
  }
71247
+ @if $skin-name=='fluent2' {
71248
+ .e-btn-toggle .e-tbar-btn-text {
71249
+ color: var(--color-sf-toolbar-icon-color) !important;
71250
+ }
71251
+ .e-btn-toggle>span {
71252
+ color: var(--color-sf-toolbar-icon-color) !important;
71253
+ }
71254
+ }
71241
71255
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
71242
71256
  .e-de-ctnr-group-btn-top>button:first-child {
71243
71257
  border-radius: 0;
package/SCSS-Themes/bds.scss CHANGED
@@ -68996,7 +68996,8 @@ $de-column-presets-font-size: $text-6xl !default;
68996
68996
  .e-de-style-paragraph-group-button .e-btn.e-active,
68997
68997
  .e-de-style-font-group-button .e-btn.e-active {
68998
68998
  @if $skin-name =='fluent2' {
68999
- background-color: var(--color-sf-secondary-bg-color);
68999
+ background-color: var(--color-sf-content-bg-color-pressed);
69000
+ color: var(--color-sf-toolbar-icon-color);
69000
69001
  }
69001
69002
  }
69002
69003
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -71463,13 +71464,13 @@ $de-hlt-clr-height-bigger: 24px;
71463
71464
  }
71464
71465
  .e-btn-toggle {
71465
71466
  @if $skin-name=='fluent2' {
71466
- background-color: var(--color-sf-secondary-bg-color);
71467
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
71467
71468
  }
71468
71469
  @else{
71469
71470
  background-color: $de-toggle-bg-color !important;
71470
71471
  }
71471
71472
  @if $skin-name =='fluent2' {
71472
- background-color: $de-items-pressed;
71473
+ color: var(--color-sf-toolbar-icon-color) !important;
71473
71474
  }
71474
71475
  @if $skin-name=='highcontrast' {
71475
71476
  color: $de-title-bar-font-clr !important;
@@ -71481,7 +71482,12 @@ $de-hlt-clr-height-bigger: 24px;
71481
71482
  outline-offset: 0;
71482
71483
  box-shadow: $de-toggle-btn-border !important;
71483
71484
  #{if(&, '&', '*')}:hover {
71484
- background-color: $de-toggle-bg-color !important;
71485
+ @if $skin-name=='fluent2' {
71486
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
71487
+ }
71488
+ @else {
71489
+ background-color: $de-toggle-bg-color !important;
71490
+ }
71485
71491
  @if $skin-name=='fabric' {
71486
71492
  border-color: $de-toggle-bg-color !important;
71487
71493
  }
@@ -71498,6 +71504,14 @@ $de-hlt-clr-height-bigger: 24px;
71498
71504
  color: $de-title-bar-font-clr !important;
71499
71505
  }
71500
71506
  }
71507
+ @if $skin-name=='fluent2' {
71508
+ .e-btn-toggle .e-tbar-btn-text {
71509
+ color: var(--color-sf-toolbar-icon-color) !important;
71510
+ }
71511
+ .e-btn-toggle>span {
71512
+ color: var(--color-sf-toolbar-icon-color) !important;
71513
+ }
71514
+ }
71501
71515
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
71502
71516
  .e-de-ctnr-group-btn-top>button:first-child {
71503
71517
  border-radius: 0;
package/SCSS-Themes/bootstrap-dark.scss CHANGED
@@ -67446,7 +67446,8 @@ $de-column-presets-font-size: 60px !default;
67446
67446
  .e-de-style-paragraph-group-button .e-btn.e-active,
67447
67447
  .e-de-style-font-group-button .e-btn.e-active {
67448
67448
  @if $skin-name =='fluent2' {
67449
- background-color: var(--color-sf-secondary-bg-color);
67449
+ background-color: var(--color-sf-content-bg-color-pressed);
67450
+ color: var(--color-sf-toolbar-icon-color);
67450
67451
  }
67451
67452
  }
67452
67453
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -69856,13 +69857,13 @@ $de-prop-btn-icon-clr: #ccc;
69856
69857
  }
69857
69858
  .e-btn-toggle {
69858
69859
  @if $skin-name=='fluent2' {
69859
- background-color: var(--color-sf-secondary-bg-color);
69860
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
69860
69861
  }
69861
69862
  @else{
69862
69863
  background-color: $de-toggle-bg-color !important;
69863
69864
  }
69864
69865
  @if $skin-name =='fluent2' {
69865
- background-color: $de-items-pressed;
69866
+ color: var(--color-sf-toolbar-icon-color) !important;
69866
69867
  }
69867
69868
  @if $skin-name=='highcontrast' {
69868
69869
  color: $de-title-bar-font-clr !important;
@@ -69874,7 +69875,12 @@ $de-prop-btn-icon-clr: #ccc;
69874
69875
  outline-offset: 0;
69875
69876
  box-shadow: $de-toggle-btn-border !important;
69876
69877
  #{if(&, '&', '*')}:hover {
69877
- background-color: $de-toggle-bg-color !important;
69878
+ @if $skin-name=='fluent2' {
69879
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
69880
+ }
69881
+ @else {
69882
+ background-color: $de-toggle-bg-color !important;
69883
+ }
69878
69884
  @if $skin-name=='fabric' {
69879
69885
  border-color: $de-toggle-bg-color !important;
69880
69886
  }
@@ -69891,6 +69897,14 @@ $de-prop-btn-icon-clr: #ccc;
69891
69897
  color: $de-title-bar-font-clr !important;
69892
69898
  }
69893
69899
  }
69900
+ @if $skin-name=='fluent2' {
69901
+ .e-btn-toggle .e-tbar-btn-text {
69902
+ color: var(--color-sf-toolbar-icon-color) !important;
69903
+ }
69904
+ .e-btn-toggle>span {
69905
+ color: var(--color-sf-toolbar-icon-color) !important;
69906
+ }
69907
+ }
69894
69908
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
69895
69909
  .e-de-ctnr-group-btn-top>button:first-child {
69896
69910
  border-radius: 0;
package/SCSS-Themes/bootstrap.scss CHANGED
@@ -67191,7 +67191,8 @@ $de-column-presets-font-size: 60px !default;
67191
67191
  .e-de-style-paragraph-group-button .e-btn.e-active,
67192
67192
  .e-de-style-font-group-button .e-btn.e-active {
67193
67193
  @if $skin-name =='fluent2' {
67194
- background-color: var(--color-sf-secondary-bg-color);
67194
+ background-color: var(--color-sf-content-bg-color-pressed);
67195
+ color: var(--color-sf-toolbar-icon-color);
67195
67196
  }
67196
67197
  }
67197
67198
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -69601,13 +69602,13 @@ $de-prop-btn-icon-clr: #ccc;
69601
69602
  }
69602
69603
  .e-btn-toggle {
69603
69604
  @if $skin-name=='fluent2' {
69604
- background-color: var(--color-sf-secondary-bg-color);
69605
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
69605
69606
  }
69606
69607
  @else{
69607
69608
  background-color: $de-toggle-bg-color !important;
69608
69609
  }
69609
69610
  @if $skin-name =='fluent2' {
69610
- background-color: $de-items-pressed;
69611
+ color: var(--color-sf-toolbar-icon-color) !important;
69611
69612
  }
69612
69613
  @if $skin-name=='highcontrast' {
69613
69614
  color: $de-title-bar-font-clr !important;
@@ -69619,7 +69620,12 @@ $de-prop-btn-icon-clr: #ccc;
69619
69620
  outline-offset: 0;
69620
69621
  box-shadow: $de-toggle-btn-border !important;
69621
69622
  #{if(&, '&', '*')}:hover {
69622
- background-color: $de-toggle-bg-color !important;
69623
+ @if $skin-name=='fluent2' {
69624
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
69625
+ }
69626
+ @else {
69627
+ background-color: $de-toggle-bg-color !important;
69628
+ }
69623
69629
  @if $skin-name=='fabric' {
69624
69630
  border-color: $de-toggle-bg-color !important;
69625
69631
  }
@@ -69636,6 +69642,14 @@ $de-prop-btn-icon-clr: #ccc;
69636
69642
  color: $de-title-bar-font-clr !important;
69637
69643
  }
69638
69644
  }
69645
+ @if $skin-name=='fluent2' {
69646
+ .e-btn-toggle .e-tbar-btn-text {
69647
+ color: var(--color-sf-toolbar-icon-color) !important;
69648
+ }
69649
+ .e-btn-toggle>span {
69650
+ color: var(--color-sf-toolbar-icon-color) !important;
69651
+ }
69652
+ }
69639
69653
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
69640
69654
  .e-de-ctnr-group-btn-top>button:first-child {
69641
69655
  border-radius: 0;
package/SCSS-Themes/bootstrap4.scss CHANGED
@@ -67331,7 +67331,8 @@ $de-column-presets-font-size: 60px !default;
67331
67331
  .e-de-style-paragraph-group-button .e-btn.e-active,
67332
67332
  .e-de-style-font-group-button .e-btn.e-active {
67333
67333
  @if $skin-name =='fluent2' {
67334
- background-color: var(--color-sf-secondary-bg-color);
67334
+ background-color: var(--color-sf-content-bg-color-pressed);
67335
+ color: var(--color-sf-toolbar-icon-color);
67335
67336
  }
67336
67337
  }
67337
67338
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -69754,13 +69755,13 @@ $de-hlt-clr-height-bigger: 25px;
69754
69755
  }
69755
69756
  .e-btn-toggle {
69756
69757
  @if $skin-name=='fluent2' {
69757
- background-color: var(--color-sf-secondary-bg-color);
69758
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
69758
69759
  }
69759
69760
  @else{
69760
69761
  background-color: $de-toggle-bg-color !important;
69761
69762
  }
69762
69763
  @if $skin-name =='fluent2' {
69763
- background-color: $de-items-pressed;
69764
+ color: var(--color-sf-toolbar-icon-color) !important;
69764
69765
  }
69765
69766
  @if $skin-name=='highcontrast' {
69766
69767
  color: $de-title-bar-font-clr !important;
@@ -69772,7 +69773,12 @@ $de-hlt-clr-height-bigger: 25px;
69772
69773
  outline-offset: 0;
69773
69774
  box-shadow: $de-toggle-btn-border !important;
69774
69775
  #{if(&, '&', '*')}:hover {
69775
- background-color: $de-toggle-bg-color !important;
69776
+ @if $skin-name=='fluent2' {
69777
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
69778
+ }
69779
+ @else {
69780
+ background-color: $de-toggle-bg-color !important;
69781
+ }
69776
69782
  @if $skin-name=='fabric' {
69777
69783
  border-color: $de-toggle-bg-color !important;
69778
69784
  }
@@ -69789,6 +69795,14 @@ $de-hlt-clr-height-bigger: 25px;
69789
69795
  color: $de-title-bar-font-clr !important;
69790
69796
  }
69791
69797
  }
69798
+ @if $skin-name=='fluent2' {
69799
+ .e-btn-toggle .e-tbar-btn-text {
69800
+ color: var(--color-sf-toolbar-icon-color) !important;
69801
+ }
69802
+ .e-btn-toggle>span {
69803
+ color: var(--color-sf-toolbar-icon-color) !important;
69804
+ }
69805
+ }
69792
69806
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
69793
69807
  .e-de-ctnr-group-btn-top>button:first-child {
69794
69808
  border-radius: 0;
package/SCSS-Themes/bootstrap5-dark.scss CHANGED
@@ -67585,7 +67585,8 @@ $de-column-presets-font-size: $text-6xl !default;
67585
67585
  .e-de-style-paragraph-group-button .e-btn.e-active,
67586
67586
  .e-de-style-font-group-button .e-btn.e-active {
67587
67587
  @if $skin-name =='fluent2' {
67588
- background-color: var(--color-sf-secondary-bg-color);
67588
+ background-color: var(--color-sf-content-bg-color-pressed);
67589
+ color: var(--color-sf-toolbar-icon-color);
67589
67590
  }
67590
67591
  }
67591
67592
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -70058,13 +70059,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
70058
70059
  }
70059
70060
  .e-btn-toggle {
70060
70061
  @if $skin-name=='fluent2' {
70061
- background-color: var(--color-sf-secondary-bg-color);
70062
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
70062
70063
  }
70063
70064
  @else{
70064
70065
  background-color: $de-toggle-bg-color !important;
70065
70066
  }
70066
70067
  @if $skin-name =='fluent2' {
70067
- background-color: $de-items-pressed;
70068
+ color: var(--color-sf-toolbar-icon-color) !important;
70068
70069
  }
70069
70070
  @if $skin-name=='highcontrast' {
70070
70071
  color: $de-title-bar-font-clr !important;
@@ -70076,7 +70077,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
70076
70077
  outline-offset: 0;
70077
70078
  box-shadow: $de-toggle-btn-border !important;
70078
70079
  #{if(&, '&', '*')}:hover {
70079
- background-color: $de-toggle-bg-color !important;
70080
+ @if $skin-name=='fluent2' {
70081
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
70082
+ }
70083
+ @else {
70084
+ background-color: $de-toggle-bg-color !important;
70085
+ }
70080
70086
  @if $skin-name=='fabric' {
70081
70087
  border-color: $de-toggle-bg-color !important;
70082
70088
  }
@@ -70093,6 +70099,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
70093
70099
  color: $de-title-bar-font-clr !important;
70094
70100
  }
70095
70101
  }
70102
+ @if $skin-name=='fluent2' {
70103
+ .e-btn-toggle .e-tbar-btn-text {
70104
+ color: var(--color-sf-toolbar-icon-color) !important;
70105
+ }
70106
+ .e-btn-toggle>span {
70107
+ color: var(--color-sf-toolbar-icon-color) !important;
70108
+ }
70109
+ }
70096
70110
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
70097
70111
  .e-de-ctnr-group-btn-top>button:first-child {
70098
70112
  border-radius: 0;
package/SCSS-Themes/bootstrap5.scss CHANGED
@@ -67584,7 +67584,8 @@ $de-column-presets-font-size: $text-6xl !default;
67584
67584
  .e-de-style-paragraph-group-button .e-btn.e-active,
67585
67585
  .e-de-style-font-group-button .e-btn.e-active {
67586
67586
  @if $skin-name =='fluent2' {
67587
- background-color: var(--color-sf-secondary-bg-color);
67587
+ background-color: var(--color-sf-content-bg-color-pressed);
67588
+ color: var(--color-sf-toolbar-icon-color);
67588
67589
  }
67589
67590
  }
67590
67591
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
@@ -70057,13 +70058,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
70057
70058
  }
70058
70059
  .e-btn-toggle {
70059
70060
  @if $skin-name=='fluent2' {
70060
- background-color: var(--color-sf-secondary-bg-color);
70061
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
70061
70062
  }
70062
70063
  @else{
70063
70064
  background-color: $de-toggle-bg-color !important;
70064
70065
  }
70065
70066
  @if $skin-name =='fluent2' {
70066
- background-color: $de-items-pressed;
70067
+ color: var(--color-sf-toolbar-icon-color) !important;
70067
70068
  }
70068
70069
  @if $skin-name=='highcontrast' {
70069
70070
  color: $de-title-bar-font-clr !important;
@@ -70075,7 +70076,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
70075
70076
  outline-offset: 0;
70076
70077
  box-shadow: $de-toggle-btn-border !important;
70077
70078
  #{if(&, '&', '*')}:hover {
70078
- background-color: $de-toggle-bg-color !important;
70079
+ @if $skin-name=='fluent2' {
70080
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
70081
+ }
70082
+ @else {
70083
+ background-color: $de-toggle-bg-color !important;
70084
+ }
70079
70085
  @if $skin-name=='fabric' {
70080
70086
  border-color: $de-toggle-bg-color !important;
70081
70087
  }
@@ -70092,6 +70098,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
70092
70098
  color: $de-title-bar-font-clr !important;
70093
70099
  }
70094
70100
  }
70101
+ @if $skin-name=='fluent2' {
70102
+ .e-btn-toggle .e-tbar-btn-text {
70103
+ color: var(--color-sf-toolbar-icon-color) !important;
70104
+ }
70105
+ .e-btn-toggle>span {
70106
+ color: var(--color-sf-toolbar-icon-color) !important;
70107
+ }
70108
+ }
70095
70109
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
70096
70110
  .e-de-ctnr-group-btn-top>button:first-child {
70097
70111
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor/bds-dark.scss CHANGED
@@ -4335,7 +4335,8 @@ $de-column-presets-font-size: $text-6xl !default;
4335
4335
  .e-de-style-paragraph-group-button .e-btn.e-active,
4336
4336
  .e-de-style-font-group-button .e-btn.e-active {
4337
4337
  @if $skin-name =='fluent2' {
4338
- background-color: var(--color-sf-secondary-bg-color);
4338
+ background-color: var(--color-sf-content-bg-color-pressed);
4339
+ color: var(--color-sf-toolbar-icon-color);
4339
4340
  }
4340
4341
  }
4341
4342
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/bds.scss CHANGED
@@ -4335,7 +4335,8 @@ $de-column-presets-font-size: $text-6xl !default;
4335
4335
  .e-de-style-paragraph-group-button .e-btn.e-active,
4336
4336
  .e-de-style-font-group-button .e-btn.e-active {
4337
4337
  @if $skin-name =='fluent2' {
4338
- background-color: var(--color-sf-secondary-bg-color);
4338
+ background-color: var(--color-sf-content-bg-color-pressed);
4339
+ color: var(--color-sf-toolbar-icon-color);
4339
4340
  }
4340
4341
  }
4341
4342
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/bootstrap-dark.scss CHANGED
@@ -4327,7 +4327,8 @@ $de-column-presets-font-size: 60px !default;
4327
4327
  .e-de-style-paragraph-group-button .e-btn.e-active,
4328
4328
  .e-de-style-font-group-button .e-btn.e-active {
4329
4329
  @if $skin-name =='fluent2' {
4330
- background-color: var(--color-sf-secondary-bg-color);
4330
+ background-color: var(--color-sf-content-bg-color-pressed);
4331
+ color: var(--color-sf-toolbar-icon-color);
4331
4332
  }
4332
4333
  }
4333
4334
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/bootstrap.scss CHANGED
@@ -4326,7 +4326,8 @@ $de-column-presets-font-size: 60px !default;
4326
4326
  .e-de-style-paragraph-group-button .e-btn.e-active,
4327
4327
  .e-de-style-font-group-button .e-btn.e-active {
4328
4328
  @if $skin-name =='fluent2' {
4329
- background-color: var(--color-sf-secondary-bg-color);
4329
+ background-color: var(--color-sf-content-bg-color-pressed);
4330
+ color: var(--color-sf-toolbar-icon-color);
4330
4331
  }
4331
4332
  }
4332
4333
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/bootstrap4.scss CHANGED
@@ -4339,7 +4339,8 @@ $de-column-presets-font-size: 60px !default;
4339
4339
  .e-de-style-paragraph-group-button .e-btn.e-active,
4340
4340
  .e-de-style-font-group-button .e-btn.e-active {
4341
4341
  @if $skin-name =='fluent2' {
4342
- background-color: var(--color-sf-secondary-bg-color);
4342
+ background-color: var(--color-sf-content-bg-color-pressed);
4343
+ color: var(--color-sf-toolbar-icon-color);
4343
4344
  }
4344
4345
  }
4345
4346
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/bootstrap5-dark.scss CHANGED
@@ -4336,7 +4336,8 @@ $de-column-presets-font-size: $text-6xl !default;
4336
4336
  .e-de-style-paragraph-group-button .e-btn.e-active,
4337
4337
  .e-de-style-font-group-button .e-btn.e-active {
4338
4338
  @if $skin-name =='fluent2' {
4339
- background-color: var(--color-sf-secondary-bg-color);
4339
+ background-color: var(--color-sf-content-bg-color-pressed);
4340
+ color: var(--color-sf-toolbar-icon-color);
4340
4341
  }
4341
4342
  }
4342
4343
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/bootstrap5.scss CHANGED
@@ -4336,7 +4336,8 @@ $de-column-presets-font-size: $text-6xl !default;
4336
4336
  .e-de-style-paragraph-group-button .e-btn.e-active,
4337
4337
  .e-de-style-font-group-button .e-btn.e-active {
4338
4338
  @if $skin-name =='fluent2' {
4339
- background-color: var(--color-sf-secondary-bg-color);
4339
+ background-color: var(--color-sf-content-bg-color-pressed);
4340
+ color: var(--color-sf-toolbar-icon-color);
4340
4341
  }
4341
4342
  }
4342
4343
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/fabric-dark.scss CHANGED
@@ -4329,7 +4329,8 @@ $de-column-presets-font-size: 60px !default;
4329
4329
  .e-de-style-paragraph-group-button .e-btn.e-active,
4330
4330
  .e-de-style-font-group-button .e-btn.e-active {
4331
4331
  @if $skin-name =='fluent2' {
4332
- background-color: var(--color-sf-secondary-bg-color);
4332
+ background-color: var(--color-sf-content-bg-color-pressed);
4333
+ color: var(--color-sf-toolbar-icon-color);
4333
4334
  }
4334
4335
  }
4335
4336
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/fabric.scss CHANGED
@@ -4328,7 +4328,8 @@ $de-column-presets-font-size: 60px !default;
4328
4328
  .e-de-style-paragraph-group-button .e-btn.e-active,
4329
4329
  .e-de-style-font-group-button .e-btn.e-active {
4330
4330
  @if $skin-name =='fluent2' {
4331
- background-color: var(--color-sf-secondary-bg-color);
4331
+ background-color: var(--color-sf-content-bg-color-pressed);
4332
+ color: var(--color-sf-toolbar-icon-color);
4332
4333
  }
4333
4334
  }
4334
4335
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/fluent-dark.scss CHANGED
@@ -4336,7 +4336,8 @@ $de-column-presets-font-size: $text-6xl !default;
4336
4336
  .e-de-style-paragraph-group-button .e-btn.e-active,
4337
4337
  .e-de-style-font-group-button .e-btn.e-active {
4338
4338
  @if $skin-name =='fluent2' {
4339
- background-color: var(--color-sf-secondary-bg-color);
4339
+ background-color: var(--color-sf-content-bg-color-pressed);
4340
+ color: var(--color-sf-toolbar-icon-color);
4340
4341
  }
4341
4342
  }
4342
4343
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/fluent.scss CHANGED
@@ -4336,7 +4336,8 @@ $de-column-presets-font-size: $text-6xl !default;
4336
4336
  .e-de-style-paragraph-group-button .e-btn.e-active,
4337
4337
  .e-de-style-font-group-button .e-btn.e-active {
4338
4338
  @if $skin-name =='fluent2' {
4339
- background-color: var(--color-sf-secondary-bg-color);
4339
+ background-color: var(--color-sf-content-bg-color-pressed);
4340
+ color: var(--color-sf-toolbar-icon-color);
4340
4341
  }
4341
4342
  }
4342
4343
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/fluent2-dark.scss CHANGED
@@ -456,7 +456,7 @@ $de-ff-radio-scnd-div-mrgn-btm: 0;
456
456
  $de-fnt-dlg-header-effects-mrgn-btm: 0;
457
457
  $de-para-dlg-cs-check-box-mrgn-btm: 0;
458
458
  $de-bullet-numbered-dlg-width: 300px;
459
- $de-bullet-numbered-dlg-height: auto;
459
+ $de-bullet-numbered-dlg-height: 173px;
460
460
  $de-tbl-indent-lb-fnt-size: $text-xs;
461
461
  $de-font-clr-div-mrgn-top: 12px;
462
462
  $de-para-dlg-cs-check-box-mrgn-top: 12px;
@@ -547,7 +547,7 @@ $de-checkbox-wrapper-color: $content-text-color !default;
547
547
  $bookmark-listview-border-color: $border !default;
548
548
  $de-style-btn-active-bg-border-color: $border-light !default;
549
549
  $de-style-btn-active-text-color: $content-text-color !default;
550
- $de-style-toggle-btn-color: $border-light !default;
550
+ $de-style-toggle-btn-color: $secondary-bg-color !default;
551
551
  $de-table-align-hover-color: $primary !default;
552
552
  $de-table-tab-hover-color: $de-table-align-hover-color !default;
553
553
  $de-cell-align-hover-color: $de-table-align-hover-color !default;
@@ -4341,7 +4341,8 @@ $de-column-presets-font-size: $text-6xl !default;
4341
4341
  .e-de-style-paragraph-group-button .e-btn.e-active,
4342
4342
  .e-de-style-font-group-button .e-btn.e-active {
4343
4343
  @if $skin-name =='fluent2' {
4344
- background-color: var(--color-sf-secondary-bg-color);
4344
+ background-color: var(--color-sf-content-bg-color-pressed);
4345
+ color: var(--color-sf-toolbar-icon-color);
4345
4346
  }
4346
4347
  }
4347
4348
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/fluent2.scss CHANGED
@@ -456,7 +456,7 @@ $de-ff-radio-scnd-div-mrgn-btm: 0;
456
456
  $de-fnt-dlg-header-effects-mrgn-btm: 0;
457
457
  $de-para-dlg-cs-check-box-mrgn-btm: 0;
458
458
  $de-bullet-numbered-dlg-width: 300px;
459
- $de-bullet-numbered-dlg-height: auto;
459
+ $de-bullet-numbered-dlg-height: 173px;
460
460
  $de-tbl-indent-lb-fnt-size: $text-xs;
461
461
  $de-font-clr-div-mrgn-top: 12px;
462
462
  $de-para-dlg-cs-check-box-mrgn-top: 12px;
@@ -547,7 +547,7 @@ $de-checkbox-wrapper-color: $content-text-color !default;
547
547
  $bookmark-listview-border-color: $border !default;
548
548
  $de-style-btn-active-bg-border-color: $border-light !default;
549
549
  $de-style-btn-active-text-color: $content-text-color !default;
550
- $de-style-toggle-btn-color: $border-light !default;
550
+ $de-style-toggle-btn-color: $secondary-bg-color !default;
551
551
  $de-table-align-hover-color: $primary !default;
552
552
  $de-table-tab-hover-color: $de-table-align-hover-color !default;
553
553
  $de-cell-align-hover-color: $de-table-align-hover-color !default;
@@ -4341,7 +4341,8 @@ $de-column-presets-font-size: $text-6xl !default;
4341
4341
  .e-de-style-paragraph-group-button .e-btn.e-active,
4342
4342
  .e-de-style-font-group-button .e-btn.e-active {
4343
4343
  @if $skin-name =='fluent2' {
4344
- background-color: var(--color-sf-secondary-bg-color);
4344
+ background-color: var(--color-sf-content-bg-color-pressed);
4345
+ color: var(--color-sf-toolbar-icon-color);
4345
4346
  }
4346
4347
  }
4347
4348
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/highcontrast.scss CHANGED
@@ -4328,7 +4328,8 @@ $de-column-presets-font-size: 60px !default;
4328
4328
  .e-de-style-paragraph-group-button .e-btn.e-active,
4329
4329
  .e-de-style-font-group-button .e-btn.e-active {
4330
4330
  @if $skin-name =='fluent2' {
4331
- background-color: var(--color-sf-secondary-bg-color);
4331
+ background-color: var(--color-sf-content-bg-color-pressed);
4332
+ color: var(--color-sf-toolbar-icon-color);
4332
4333
  }
4333
4334
  }
4334
4335
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/material-dark.scss CHANGED
@@ -4345,7 +4345,8 @@ $de-column-presets-font-size: 60px !default;
4345
4345
  .e-de-style-paragraph-group-button .e-btn.e-active,
4346
4346
  .e-de-style-font-group-button .e-btn.e-active {
4347
4347
  @if $skin-name =='fluent2' {
4348
- background-color: var(--color-sf-secondary-bg-color);
4348
+ background-color: var(--color-sf-content-bg-color-pressed);
4349
+ color: var(--color-sf-toolbar-icon-color);
4349
4350
  }
4350
4351
  }
4351
4352
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/material.scss CHANGED
@@ -4345,7 +4345,8 @@ $de-column-presets-font-size: 60px !default;
4345
4345
  .e-de-style-paragraph-group-button .e-btn.e-active,
4346
4346
  .e-de-style-font-group-button .e-btn.e-active {
4347
4347
  @if $skin-name =='fluent2' {
4348
- background-color: var(--color-sf-secondary-bg-color);
4348
+ background-color: var(--color-sf-content-bg-color-pressed);
4349
+ color: var(--color-sf-toolbar-icon-color);
4349
4350
  }
4350
4351
  }
4351
4352
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/material3-dark.scss CHANGED
@@ -4336,7 +4336,8 @@ $de-column-presets-font-size: 60px !default;
4336
4336
  .e-de-style-paragraph-group-button .e-btn.e-active,
4337
4337
  .e-de-style-font-group-button .e-btn.e-active {
4338
4338
  @if $skin-name =='fluent2' {
4339
- background-color: var(--color-sf-secondary-bg-color);
4339
+ background-color: var(--color-sf-content-bg-color-pressed);
4340
+ color: var(--color-sf-toolbar-icon-color);
4340
4341
  }
4341
4342
  }
4342
4343
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/material3.scss CHANGED
@@ -4336,7 +4336,8 @@ $de-column-presets-font-size: 60px !default;
4336
4336
  .e-de-style-paragraph-group-button .e-btn.e-active,
4337
4337
  .e-de-style-font-group-button .e-btn.e-active {
4338
4338
  @if $skin-name =='fluent2' {
4339
- background-color: var(--color-sf-secondary-bg-color);
4339
+ background-color: var(--color-sf-content-bg-color-pressed);
4340
+ color: var(--color-sf-toolbar-icon-color);
4340
4341
  }
4341
4342
  }
4342
4343
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/tailwind-dark.scss CHANGED
@@ -4335,7 +4335,8 @@ $de-column-presets-font-size: $text-6xl !default;
4335
4335
  .e-de-style-paragraph-group-button .e-btn.e-active,
4336
4336
  .e-de-style-font-group-button .e-btn.e-active {
4337
4337
  @if $skin-name =='fluent2' {
4338
- background-color: var(--color-sf-secondary-bg-color);
4338
+ background-color: var(--color-sf-content-bg-color-pressed);
4339
+ color: var(--color-sf-toolbar-icon-color);
4339
4340
  }
4340
4341
  }
4341
4342
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
package/SCSS-Themes/documenteditor/document-editor/tailwind.scss CHANGED
@@ -4335,7 +4335,8 @@ $de-column-presets-font-size: $text-6xl !default;
4335
4335
  .e-de-style-paragraph-group-button .e-btn.e-active,
4336
4336
  .e-de-style-font-group-button .e-btn.e-active {
4337
4337
  @if $skin-name =='fluent2' {
4338
- background-color: var(--color-sf-secondary-bg-color);
4338
+ background-color: var(--color-sf-content-bg-color-pressed);
4339
+ color: var(--color-sf-toolbar-icon-color);
4339
4340
  }
4340
4341
  }
4341
4342
  .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {