@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/documenteditor/document-editor-container/bds-dark.scss CHANGED
@@ -1537,13 +1537,13 @@ $de-hlt-clr-height-bigger: 24px;
1537
1537
  }
1538
1538
  .e-btn-toggle {
1539
1539
  @if $skin-name=='fluent2' {
1540
- background-color: var(--color-sf-secondary-bg-color);
1540
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1541
1541
  }
1542
1542
  @else{
1543
1543
  background-color: $de-toggle-bg-color !important;
1544
1544
  }
1545
1545
  @if $skin-name =='fluent2' {
1546
- background-color: $de-items-pressed;
1546
+ color: var(--color-sf-toolbar-icon-color) !important;
1547
1547
  }
1548
1548
  @if $skin-name=='highcontrast' {
1549
1549
  color: $de-title-bar-font-clr !important;
@@ -1555,7 +1555,12 @@ $de-hlt-clr-height-bigger: 24px;
1555
1555
  outline-offset: 0;
1556
1556
  box-shadow: $de-toggle-btn-border !important;
1557
1557
  #{if(&, '&', '*')}:hover {
1558
- background-color: $de-toggle-bg-color !important;
1558
+ @if $skin-name=='fluent2' {
1559
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1560
+ }
1561
+ @else {
1562
+ background-color: $de-toggle-bg-color !important;
1563
+ }
1559
1564
  @if $skin-name=='fabric' {
1560
1565
  border-color: $de-toggle-bg-color !important;
1561
1566
  }
@@ -1572,6 +1577,14 @@ $de-hlt-clr-height-bigger: 24px;
1572
1577
  color: $de-title-bar-font-clr !important;
1573
1578
  }
1574
1579
  }
1580
+ @if $skin-name=='fluent2' {
1581
+ .e-btn-toggle .e-tbar-btn-text {
1582
+ color: var(--color-sf-toolbar-icon-color) !important;
1583
+ }
1584
+ .e-btn-toggle>span {
1585
+ color: var(--color-sf-toolbar-icon-color) !important;
1586
+ }
1587
+ }
1575
1588
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1576
1589
  .e-de-ctnr-group-btn-top>button:first-child {
1577
1590
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/bds.scss CHANGED
@@ -1537,13 +1537,13 @@ $de-hlt-clr-height-bigger: 24px;
1537
1537
  }
1538
1538
  .e-btn-toggle {
1539
1539
  @if $skin-name=='fluent2' {
1540
- background-color: var(--color-sf-secondary-bg-color);
1540
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1541
1541
  }
1542
1542
  @else{
1543
1543
  background-color: $de-toggle-bg-color !important;
1544
1544
  }
1545
1545
  @if $skin-name =='fluent2' {
1546
- background-color: $de-items-pressed;
1546
+ color: var(--color-sf-toolbar-icon-color) !important;
1547
1547
  }
1548
1548
  @if $skin-name=='highcontrast' {
1549
1549
  color: $de-title-bar-font-clr !important;
@@ -1555,7 +1555,12 @@ $de-hlt-clr-height-bigger: 24px;
1555
1555
  outline-offset: 0;
1556
1556
  box-shadow: $de-toggle-btn-border !important;
1557
1557
  #{if(&, '&', '*')}:hover {
1558
- background-color: $de-toggle-bg-color !important;
1558
+ @if $skin-name=='fluent2' {
1559
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1560
+ }
1561
+ @else {
1562
+ background-color: $de-toggle-bg-color !important;
1563
+ }
1559
1564
  @if $skin-name=='fabric' {
1560
1565
  border-color: $de-toggle-bg-color !important;
1561
1566
  }
@@ -1572,6 +1577,14 @@ $de-hlt-clr-height-bigger: 24px;
1572
1577
  color: $de-title-bar-font-clr !important;
1573
1578
  }
1574
1579
  }
1580
+ @if $skin-name=='fluent2' {
1581
+ .e-btn-toggle .e-tbar-btn-text {
1582
+ color: var(--color-sf-toolbar-icon-color) !important;
1583
+ }
1584
+ .e-btn-toggle>span {
1585
+ color: var(--color-sf-toolbar-icon-color) !important;
1586
+ }
1587
+ }
1575
1588
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1576
1589
  .e-de-ctnr-group-btn-top>button:first-child {
1577
1590
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/bootstrap-dark.scss CHANGED
@@ -1521,13 +1521,13 @@ $de-prop-btn-icon-clr: #ccc;
1521
1521
  }
1522
1522
  .e-btn-toggle {
1523
1523
  @if $skin-name=='fluent2' {
1524
- background-color: var(--color-sf-secondary-bg-color);
1524
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1525
1525
  }
1526
1526
  @else{
1527
1527
  background-color: $de-toggle-bg-color !important;
1528
1528
  }
1529
1529
  @if $skin-name =='fluent2' {
1530
- background-color: $de-items-pressed;
1530
+ color: var(--color-sf-toolbar-icon-color) !important;
1531
1531
  }
1532
1532
  @if $skin-name=='highcontrast' {
1533
1533
  color: $de-title-bar-font-clr !important;
@@ -1539,7 +1539,12 @@ $de-prop-btn-icon-clr: #ccc;
1539
1539
  outline-offset: 0;
1540
1540
  box-shadow: $de-toggle-btn-border !important;
1541
1541
  #{if(&, '&', '*')}:hover {
1542
- background-color: $de-toggle-bg-color !important;
1542
+ @if $skin-name=='fluent2' {
1543
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1544
+ }
1545
+ @else {
1546
+ background-color: $de-toggle-bg-color !important;
1547
+ }
1543
1548
  @if $skin-name=='fabric' {
1544
1549
  border-color: $de-toggle-bg-color !important;
1545
1550
  }
@@ -1556,6 +1561,14 @@ $de-prop-btn-icon-clr: #ccc;
1556
1561
  color: $de-title-bar-font-clr !important;
1557
1562
  }
1558
1563
  }
1564
+ @if $skin-name=='fluent2' {
1565
+ .e-btn-toggle .e-tbar-btn-text {
1566
+ color: var(--color-sf-toolbar-icon-color) !important;
1567
+ }
1568
+ .e-btn-toggle>span {
1569
+ color: var(--color-sf-toolbar-icon-color) !important;
1570
+ }
1571
+ }
1559
1572
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1560
1573
  .e-de-ctnr-group-btn-top>button:first-child {
1561
1574
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/bootstrap.scss CHANGED
@@ -1521,13 +1521,13 @@ $de-prop-btn-icon-clr: #ccc;
1521
1521
  }
1522
1522
  .e-btn-toggle {
1523
1523
  @if $skin-name=='fluent2' {
1524
- background-color: var(--color-sf-secondary-bg-color);
1524
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1525
1525
  }
1526
1526
  @else{
1527
1527
  background-color: $de-toggle-bg-color !important;
1528
1528
  }
1529
1529
  @if $skin-name =='fluent2' {
1530
- background-color: $de-items-pressed;
1530
+ color: var(--color-sf-toolbar-icon-color) !important;
1531
1531
  }
1532
1532
  @if $skin-name=='highcontrast' {
1533
1533
  color: $de-title-bar-font-clr !important;
@@ -1539,7 +1539,12 @@ $de-prop-btn-icon-clr: #ccc;
1539
1539
  outline-offset: 0;
1540
1540
  box-shadow: $de-toggle-btn-border !important;
1541
1541
  #{if(&, '&', '*')}:hover {
1542
- background-color: $de-toggle-bg-color !important;
1542
+ @if $skin-name=='fluent2' {
1543
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1544
+ }
1545
+ @else {
1546
+ background-color: $de-toggle-bg-color !important;
1547
+ }
1543
1548
  @if $skin-name=='fabric' {
1544
1549
  border-color: $de-toggle-bg-color !important;
1545
1550
  }
@@ -1556,6 +1561,14 @@ $de-prop-btn-icon-clr: #ccc;
1556
1561
  color: $de-title-bar-font-clr !important;
1557
1562
  }
1558
1563
  }
1564
+ @if $skin-name=='fluent2' {
1565
+ .e-btn-toggle .e-tbar-btn-text {
1566
+ color: var(--color-sf-toolbar-icon-color) !important;
1567
+ }
1568
+ .e-btn-toggle>span {
1569
+ color: var(--color-sf-toolbar-icon-color) !important;
1570
+ }
1571
+ }
1559
1572
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1560
1573
  .e-de-ctnr-group-btn-top>button:first-child {
1561
1574
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/bootstrap4.scss CHANGED
@@ -1537,13 +1537,13 @@ $de-hlt-clr-height-bigger: 25px;
1537
1537
  }
1538
1538
  .e-btn-toggle {
1539
1539
  @if $skin-name=='fluent2' {
1540
- background-color: var(--color-sf-secondary-bg-color);
1540
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1541
1541
  }
1542
1542
  @else{
1543
1543
  background-color: $de-toggle-bg-color !important;
1544
1544
  }
1545
1545
  @if $skin-name =='fluent2' {
1546
- background-color: $de-items-pressed;
1546
+ color: var(--color-sf-toolbar-icon-color) !important;
1547
1547
  }
1548
1548
  @if $skin-name=='highcontrast' {
1549
1549
  color: $de-title-bar-font-clr !important;
@@ -1555,7 +1555,12 @@ $de-hlt-clr-height-bigger: 25px;
1555
1555
  outline-offset: 0;
1556
1556
  box-shadow: $de-toggle-btn-border !important;
1557
1557
  #{if(&, '&', '*')}:hover {
1558
- background-color: $de-toggle-bg-color !important;
1558
+ @if $skin-name=='fluent2' {
1559
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1560
+ }
1561
+ @else {
1562
+ background-color: $de-toggle-bg-color !important;
1563
+ }
1559
1564
  @if $skin-name=='fabric' {
1560
1565
  border-color: $de-toggle-bg-color !important;
1561
1566
  }
@@ -1572,6 +1577,14 @@ $de-hlt-clr-height-bigger: 25px;
1572
1577
  color: $de-title-bar-font-clr !important;
1573
1578
  }
1574
1579
  }
1580
+ @if $skin-name=='fluent2' {
1581
+ .e-btn-toggle .e-tbar-btn-text {
1582
+ color: var(--color-sf-toolbar-icon-color) !important;
1583
+ }
1584
+ .e-btn-toggle>span {
1585
+ color: var(--color-sf-toolbar-icon-color) !important;
1586
+ }
1587
+ }
1575
1588
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1576
1589
  .e-de-ctnr-group-btn-top>button:first-child {
1577
1590
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5-dark.scss CHANGED
@@ -1543,13 +1543,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1543
1543
  }
1544
1544
  .e-btn-toggle {
1545
1545
  @if $skin-name=='fluent2' {
1546
- background-color: var(--color-sf-secondary-bg-color);
1546
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1547
1547
  }
1548
1548
  @else{
1549
1549
  background-color: $de-toggle-bg-color !important;
1550
1550
  }
1551
1551
  @if $skin-name =='fluent2' {
1552
- background-color: $de-items-pressed;
1552
+ color: var(--color-sf-toolbar-icon-color) !important;
1553
1553
  }
1554
1554
  @if $skin-name=='highcontrast' {
1555
1555
  color: $de-title-bar-font-clr !important;
@@ -1561,7 +1561,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1561
1561
  outline-offset: 0;
1562
1562
  box-shadow: $de-toggle-btn-border !important;
1563
1563
  #{if(&, '&', '*')}:hover {
1564
- background-color: $de-toggle-bg-color !important;
1564
+ @if $skin-name=='fluent2' {
1565
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1566
+ }
1567
+ @else {
1568
+ background-color: $de-toggle-bg-color !important;
1569
+ }
1565
1570
  @if $skin-name=='fabric' {
1566
1571
  border-color: $de-toggle-bg-color !important;
1567
1572
  }
@@ -1578,6 +1583,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1578
1583
  color: $de-title-bar-font-clr !important;
1579
1584
  }
1580
1585
  }
1586
+ @if $skin-name=='fluent2' {
1587
+ .e-btn-toggle .e-tbar-btn-text {
1588
+ color: var(--color-sf-toolbar-icon-color) !important;
1589
+ }
1590
+ .e-btn-toggle>span {
1591
+ color: var(--color-sf-toolbar-icon-color) !important;
1592
+ }
1593
+ }
1581
1594
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1582
1595
  .e-de-ctnr-group-btn-top>button:first-child {
1583
1596
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5.scss CHANGED
@@ -1543,13 +1543,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1543
1543
  }
1544
1544
  .e-btn-toggle {
1545
1545
  @if $skin-name=='fluent2' {
1546
- background-color: var(--color-sf-secondary-bg-color);
1546
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1547
1547
  }
1548
1548
  @else{
1549
1549
  background-color: $de-toggle-bg-color !important;
1550
1550
  }
1551
1551
  @if $skin-name =='fluent2' {
1552
- background-color: $de-items-pressed;
1552
+ color: var(--color-sf-toolbar-icon-color) !important;
1553
1553
  }
1554
1554
  @if $skin-name=='highcontrast' {
1555
1555
  color: $de-title-bar-font-clr !important;
@@ -1561,7 +1561,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1561
1561
  outline-offset: 0;
1562
1562
  box-shadow: $de-toggle-btn-border !important;
1563
1563
  #{if(&, '&', '*')}:hover {
1564
- background-color: $de-toggle-bg-color !important;
1564
+ @if $skin-name=='fluent2' {
1565
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1566
+ }
1567
+ @else {
1568
+ background-color: $de-toggle-bg-color !important;
1569
+ }
1565
1570
  @if $skin-name=='fabric' {
1566
1571
  border-color: $de-toggle-bg-color !important;
1567
1572
  }
@@ -1578,6 +1583,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1578
1583
  color: $de-title-bar-font-clr !important;
1579
1584
  }
1580
1585
  }
1586
+ @if $skin-name=='fluent2' {
1587
+ .e-btn-toggle .e-tbar-btn-text {
1588
+ color: var(--color-sf-toolbar-icon-color) !important;
1589
+ }
1590
+ .e-btn-toggle>span {
1591
+ color: var(--color-sf-toolbar-icon-color) !important;
1592
+ }
1593
+ }
1581
1594
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1582
1595
  .e-de-ctnr-group-btn-top>button:first-child {
1583
1596
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/fabric-dark.scss CHANGED
@@ -1525,13 +1525,13 @@ $de-prop-btn-icon-clr: #ccc;
1525
1525
  }
1526
1526
  .e-btn-toggle {
1527
1527
  @if $skin-name=='fluent2' {
1528
- background-color: var(--color-sf-secondary-bg-color);
1528
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1529
1529
  }
1530
1530
  @else{
1531
1531
  background-color: $de-toggle-bg-color !important;
1532
1532
  }
1533
1533
  @if $skin-name =='fluent2' {
1534
- background-color: $de-items-pressed;
1534
+ color: var(--color-sf-toolbar-icon-color) !important;
1535
1535
  }
1536
1536
  @if $skin-name=='highcontrast' {
1537
1537
  color: $de-title-bar-font-clr !important;
@@ -1543,7 +1543,12 @@ $de-prop-btn-icon-clr: #ccc;
1543
1543
  outline-offset: 0;
1544
1544
  box-shadow: $de-toggle-btn-border !important;
1545
1545
  #{if(&, '&', '*')}:hover {
1546
- background-color: $de-toggle-bg-color !important;
1546
+ @if $skin-name=='fluent2' {
1547
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1548
+ }
1549
+ @else {
1550
+ background-color: $de-toggle-bg-color !important;
1551
+ }
1547
1552
  @if $skin-name=='fabric' {
1548
1553
  border-color: $de-toggle-bg-color !important;
1549
1554
  }
@@ -1560,6 +1565,14 @@ $de-prop-btn-icon-clr: #ccc;
1560
1565
  color: $de-title-bar-font-clr !important;
1561
1566
  }
1562
1567
  }
1568
+ @if $skin-name=='fluent2' {
1569
+ .e-btn-toggle .e-tbar-btn-text {
1570
+ color: var(--color-sf-toolbar-icon-color) !important;
1571
+ }
1572
+ .e-btn-toggle>span {
1573
+ color: var(--color-sf-toolbar-icon-color) !important;
1574
+ }
1575
+ }
1563
1576
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1564
1577
  .e-de-ctnr-group-btn-top>button:first-child {
1565
1578
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/fabric.scss CHANGED
@@ -1523,13 +1523,13 @@ $de-prop-btn-icon-clr: #ccc;
1523
1523
  }
1524
1524
  .e-btn-toggle {
1525
1525
  @if $skin-name=='fluent2' {
1526
- background-color: var(--color-sf-secondary-bg-color);
1526
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1527
1527
  }
1528
1528
  @else{
1529
1529
  background-color: $de-toggle-bg-color !important;
1530
1530
  }
1531
1531
  @if $skin-name =='fluent2' {
1532
- background-color: $de-items-pressed;
1532
+ color: var(--color-sf-toolbar-icon-color) !important;
1533
1533
  }
1534
1534
  @if $skin-name=='highcontrast' {
1535
1535
  color: $de-title-bar-font-clr !important;
@@ -1541,7 +1541,12 @@ $de-prop-btn-icon-clr: #ccc;
1541
1541
  outline-offset: 0;
1542
1542
  box-shadow: $de-toggle-btn-border !important;
1543
1543
  #{if(&, '&', '*')}:hover {
1544
- background-color: $de-toggle-bg-color !important;
1544
+ @if $skin-name=='fluent2' {
1545
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1546
+ }
1547
+ @else {
1548
+ background-color: $de-toggle-bg-color !important;
1549
+ }
1545
1550
  @if $skin-name=='fabric' {
1546
1551
  border-color: $de-toggle-bg-color !important;
1547
1552
  }
@@ -1558,6 +1563,14 @@ $de-prop-btn-icon-clr: #ccc;
1558
1563
  color: $de-title-bar-font-clr !important;
1559
1564
  }
1560
1565
  }
1566
+ @if $skin-name=='fluent2' {
1567
+ .e-btn-toggle .e-tbar-btn-text {
1568
+ color: var(--color-sf-toolbar-icon-color) !important;
1569
+ }
1570
+ .e-btn-toggle>span {
1571
+ color: var(--color-sf-toolbar-icon-color) !important;
1572
+ }
1573
+ }
1561
1574
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1562
1575
  .e-de-ctnr-group-btn-top>button:first-child {
1563
1576
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/fluent-dark.scss CHANGED
@@ -1544,13 +1544,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1544
1544
  }
1545
1545
  .e-btn-toggle {
1546
1546
  @if $skin-name=='fluent2' {
1547
- background-color: var(--color-sf-secondary-bg-color);
1547
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1548
1548
  }
1549
1549
  @else{
1550
1550
  background-color: $de-toggle-bg-color !important;
1551
1551
  }
1552
1552
  @if $skin-name =='fluent2' {
1553
- background-color: $de-items-pressed;
1553
+ color: var(--color-sf-toolbar-icon-color) !important;
1554
1554
  }
1555
1555
  @if $skin-name=='highcontrast' {
1556
1556
  color: $de-title-bar-font-clr !important;
@@ -1562,7 +1562,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1562
1562
  outline-offset: 0;
1563
1563
  box-shadow: $de-toggle-btn-border !important;
1564
1564
  #{if(&, '&', '*')}:hover {
1565
- background-color: $de-toggle-bg-color !important;
1565
+ @if $skin-name=='fluent2' {
1566
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1567
+ }
1568
+ @else {
1569
+ background-color: $de-toggle-bg-color !important;
1570
+ }
1566
1571
  @if $skin-name=='fabric' {
1567
1572
  border-color: $de-toggle-bg-color !important;
1568
1573
  }
@@ -1579,6 +1584,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1579
1584
  color: $de-title-bar-font-clr !important;
1580
1585
  }
1581
1586
  }
1587
+ @if $skin-name=='fluent2' {
1588
+ .e-btn-toggle .e-tbar-btn-text {
1589
+ color: var(--color-sf-toolbar-icon-color) !important;
1590
+ }
1591
+ .e-btn-toggle>span {
1592
+ color: var(--color-sf-toolbar-icon-color) !important;
1593
+ }
1594
+ }
1582
1595
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1583
1596
  .e-de-ctnr-group-btn-top>button:first-child {
1584
1597
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/fluent.scss CHANGED
@@ -1544,13 +1544,13 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1544
1544
  }
1545
1545
  .e-btn-toggle {
1546
1546
  @if $skin-name=='fluent2' {
1547
- background-color: var(--color-sf-secondary-bg-color);
1547
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1548
1548
  }
1549
1549
  @else{
1550
1550
  background-color: $de-toggle-bg-color !important;
1551
1551
  }
1552
1552
  @if $skin-name =='fluent2' {
1553
- background-color: $de-items-pressed;
1553
+ color: var(--color-sf-toolbar-icon-color) !important;
1554
1554
  }
1555
1555
  @if $skin-name=='highcontrast' {
1556
1556
  color: $de-title-bar-font-clr !important;
@@ -1562,7 +1562,12 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1562
1562
  outline-offset: 0;
1563
1563
  box-shadow: $de-toggle-btn-border !important;
1564
1564
  #{if(&, '&', '*')}:hover {
1565
- background-color: $de-toggle-bg-color !important;
1565
+ @if $skin-name=='fluent2' {
1566
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1567
+ }
1568
+ @else {
1569
+ background-color: $de-toggle-bg-color !important;
1570
+ }
1566
1571
  @if $skin-name=='fabric' {
1567
1572
  border-color: $de-toggle-bg-color !important;
1568
1573
  }
@@ -1579,6 +1584,14 @@ $de-hover-bg: $content-bg-color-alt2 !default;
1579
1584
  color: $de-title-bar-font-clr !important;
1580
1585
  }
1581
1586
  }
1587
+ @if $skin-name=='fluent2' {
1588
+ .e-btn-toggle .e-tbar-btn-text {
1589
+ color: var(--color-sf-toolbar-icon-color) !important;
1590
+ }
1591
+ .e-btn-toggle>span {
1592
+ color: var(--color-sf-toolbar-icon-color) !important;
1593
+ }
1594
+ }
1582
1595
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1583
1596
  .e-de-ctnr-group-btn-top>button:first-child {
1584
1597
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/fluent2-dark.scss CHANGED
@@ -1546,13 +1546,13 @@ $de-hlt-clr-height-bigger: 24px;
1546
1546
  }
1547
1547
  .e-btn-toggle {
1548
1548
  @if $skin-name=='fluent2' {
1549
- background-color: var(--color-sf-secondary-bg-color);
1549
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1550
1550
  }
1551
1551
  @else{
1552
1552
  background-color: $de-toggle-bg-color !important;
1553
1553
  }
1554
1554
  @if $skin-name =='fluent2' {
1555
- background-color: $de-items-pressed;
1555
+ color: var(--color-sf-toolbar-icon-color) !important;
1556
1556
  }
1557
1557
  @if $skin-name=='highcontrast' {
1558
1558
  color: $de-title-bar-font-clr !important;
@@ -1564,7 +1564,12 @@ $de-hlt-clr-height-bigger: 24px;
1564
1564
  outline-offset: 0;
1565
1565
  box-shadow: $de-toggle-btn-border !important;
1566
1566
  #{if(&, '&', '*')}:hover {
1567
- background-color: $de-toggle-bg-color !important;
1567
+ @if $skin-name=='fluent2' {
1568
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1569
+ }
1570
+ @else {
1571
+ background-color: $de-toggle-bg-color !important;
1572
+ }
1568
1573
  @if $skin-name=='fabric' {
1569
1574
  border-color: $de-toggle-bg-color !important;
1570
1575
  }
@@ -1581,6 +1586,14 @@ $de-hlt-clr-height-bigger: 24px;
1581
1586
  color: $de-title-bar-font-clr !important;
1582
1587
  }
1583
1588
  }
1589
+ @if $skin-name=='fluent2' {
1590
+ .e-btn-toggle .e-tbar-btn-text {
1591
+ color: var(--color-sf-toolbar-icon-color) !important;
1592
+ }
1593
+ .e-btn-toggle>span {
1594
+ color: var(--color-sf-toolbar-icon-color) !important;
1595
+ }
1596
+ }
1584
1597
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1585
1598
  .e-de-ctnr-group-btn-top>button:first-child {
1586
1599
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/fluent2.scss CHANGED
@@ -1546,13 +1546,13 @@ $de-hlt-clr-height-bigger: 24px;
1546
1546
  }
1547
1547
  .e-btn-toggle {
1548
1548
  @if $skin-name=='fluent2' {
1549
- background-color: var(--color-sf-secondary-bg-color);
1549
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1550
1550
  }
1551
1551
  @else{
1552
1552
  background-color: $de-toggle-bg-color !important;
1553
1553
  }
1554
1554
  @if $skin-name =='fluent2' {
1555
- background-color: $de-items-pressed;
1555
+ color: var(--color-sf-toolbar-icon-color) !important;
1556
1556
  }
1557
1557
  @if $skin-name=='highcontrast' {
1558
1558
  color: $de-title-bar-font-clr !important;
@@ -1564,7 +1564,12 @@ $de-hlt-clr-height-bigger: 24px;
1564
1564
  outline-offset: 0;
1565
1565
  box-shadow: $de-toggle-btn-border !important;
1566
1566
  #{if(&, '&', '*')}:hover {
1567
- background-color: $de-toggle-bg-color !important;
1567
+ @if $skin-name=='fluent2' {
1568
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1569
+ }
1570
+ @else {
1571
+ background-color: $de-toggle-bg-color !important;
1572
+ }
1568
1573
  @if $skin-name=='fabric' {
1569
1574
  border-color: $de-toggle-bg-color !important;
1570
1575
  }
@@ -1581,6 +1586,14 @@ $de-hlt-clr-height-bigger: 24px;
1581
1586
  color: $de-title-bar-font-clr !important;
1582
1587
  }
1583
1588
  }
1589
+ @if $skin-name=='fluent2' {
1590
+ .e-btn-toggle .e-tbar-btn-text {
1591
+ color: var(--color-sf-toolbar-icon-color) !important;
1592
+ }
1593
+ .e-btn-toggle>span {
1594
+ color: var(--color-sf-toolbar-icon-color) !important;
1595
+ }
1596
+ }
1584
1597
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1585
1598
  .e-de-ctnr-group-btn-top>button:first-child {
1586
1599
  border-radius: 0;
package/SCSS-Themes/documenteditor/document-editor-container/highcontrast.scss CHANGED
@@ -1524,13 +1524,13 @@ $de-prop-btn-icon-clr: #ccc;
1524
1524
  }
1525
1525
  .e-btn-toggle {
1526
1526
  @if $skin-name=='fluent2' {
1527
- background-color: var(--color-sf-secondary-bg-color);
1527
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1528
1528
  }
1529
1529
  @else{
1530
1530
  background-color: $de-toggle-bg-color !important;
1531
1531
  }
1532
1532
  @if $skin-name =='fluent2' {
1533
- background-color: $de-items-pressed;
1533
+ color: var(--color-sf-toolbar-icon-color) !important;
1534
1534
  }
1535
1535
  @if $skin-name=='highcontrast' {
1536
1536
  color: $de-title-bar-font-clr !important;
@@ -1542,7 +1542,12 @@ $de-prop-btn-icon-clr: #ccc;
1542
1542
  outline-offset: 0;
1543
1543
  box-shadow: $de-toggle-btn-border !important;
1544
1544
  #{if(&, '&', '*')}:hover {
1545
- background-color: $de-toggle-bg-color !important;
1545
+ @if $skin-name=='fluent2' {
1546
+ background-color: var(--color-sf-content-bg-color-pressed) !important;
1547
+ }
1548
+ @else {
1549
+ background-color: $de-toggle-bg-color !important;
1550
+ }
1546
1551
  @if $skin-name=='fabric' {
1547
1552
  border-color: $de-toggle-bg-color !important;
1548
1553
  }
@@ -1559,6 +1564,14 @@ $de-prop-btn-icon-clr: #ccc;
1559
1564
  color: $de-title-bar-font-clr !important;
1560
1565
  }
1561
1566
  }
1567
+ @if $skin-name=='fluent2' {
1568
+ .e-btn-toggle .e-tbar-btn-text {
1569
+ color: var(--color-sf-toolbar-icon-color) !important;
1570
+ }
1571
+ .e-btn-toggle>span {
1572
+ color: var(--color-sf-toolbar-icon-color) !important;
1573
+ }
1574
+ }
1562
1575
  @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
1563
1576
  .e-de-ctnr-group-btn-top>button:first-child {
1564
1577
  border-radius: 0;