@syncfusion/ej2-angular-spreadsheet 20.4.38-ngcc → 20.4.38

package/styles/highcontrast.css

@@ -662,6 +662,9 @@
   display: inline-table;
   padding-top: 3px;
 }
+.e-spreadsheet .e-unprotectworksheet-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -678,6 +681,9 @@
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-content .e-unprotectsheetpwd-content .e-input {
   margin-top: 10px;
 }
+.e-spreadsheet .e-reenterpwd-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -1641,19 +1647,6 @@
 .e-spreadsheet .e-sheet-panel.e-rtl .e-frozen-row {
   right: 0;
 }
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-header-cell.e-hide-start {
-  border-left-color: transparent;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-header-cell.e-hide-start::after {
-  border-left: 1px solid #fff;
-  border-right: none;
-  left: 0.5px;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-hide-end.e-header-cell::before {
-  border-left: none;
-  border-right: 1px solid #fff;
-  right: 0.5px;
-}
 .e-spreadsheet .e-sheet-panel .e-frozen-columns .e-selectall-container {
   position: relative;
 }
@@ -1951,6 +1944,9 @@
 .e-spreadsheet .e-find-dlg.e-dialog .e-footer-content {
   text-align: left;
 }
+.e-spreadsheet .e-protectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-protectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 31px;
@@ -1968,6 +1964,9 @@
   line-height: 24px;
   margin-bottom: 4px;
 }
+.e-spreadsheet .e-unprotectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -1984,6 +1983,9 @@
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-content .e-unprotectpwd-content .e-input {
   margin-top: 10px;
 }
+.e-spreadsheet .e-importprotectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-importprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -2093,36 +2095,33 @@
   font-family: "Calibri";
 }
 .e-dropdown-popup.e-font-family ul .e-item:nth-child(7) {
-  font-family: "Comic Sans MS";
-}
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
   font-family: "Din Condensed";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
   font-family: "Georgia";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
   font-family: "Helvetica";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
   font-family: "Helvetica New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
   font-family: "Roboto";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
   font-family: "Tahoma";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
   font-family: "Times New Roman";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(17) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
@@ -3006,15 +3005,6 @@
 .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-prev-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-select-all-cell.e-prev-highlight-right {
   border-left-color: #969696;
 }
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-prev-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-highlight {
-  border-left-color: transparent;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-prev-highlight::after, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-highlight::after {
-  border-left-color: #969696;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-end.e-highlight::before, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-highlight + th.e-header-cell.e-hide-end::before {
-  border-right-color: #969696;
-}
 .e-spreadsheet .e-copy-indicator div.e-top,
 .e-spreadsheet .e-range-indicator div.e-top,
 .e-spreadsheet .e-formularef-indicator div.e-top {

package/styles/material-dark.css

@@ -715,6 +715,9 @@
   display: inline-table;
   padding-top: 3px;
 }
+.e-spreadsheet .e-unprotectworksheet-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -731,6 +734,9 @@
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-content .e-unprotectsheetpwd-content .e-input {
   margin-top: 10px;
 }
+.e-spreadsheet .e-reenterpwd-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -1685,19 +1691,6 @@
 .e-spreadsheet .e-sheet-panel.e-rtl .e-frozen-row {
   right: 0;
 }
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-header-cell.e-hide-start {
-  border-left-color: transparent;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-header-cell.e-hide-start::after {
-  border-left: 1px solid #616161;
-  border-right: none;
-  left: 0.5px;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-hide-end.e-header-cell::before {
-  border-left: none;
-  border-right: 1px solid #616161;
-  right: 0.5px;
-}
 .e-spreadsheet .e-sheet-panel .e-frozen-columns .e-selectall-container {
   position: relative;
 }
@@ -1994,6 +1987,9 @@
 .e-spreadsheet .e-find-dlg.e-dialog .e-footer-content {
   text-align: left;
 }
+.e-spreadsheet .e-protectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-protectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 31px;
@@ -2011,6 +2007,9 @@
   line-height: 24px;
   margin-bottom: 4px;
 }
+.e-spreadsheet .e-unprotectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -2027,6 +2026,9 @@
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-content .e-unprotectpwd-content .e-input {
   margin-top: 10px;
 }
+.e-spreadsheet .e-importprotectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-importprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -2136,36 +2138,33 @@
   font-family: "Calibri";
 }
 .e-dropdown-popup.e-font-family ul .e-item:nth-child(7) {
-  font-family: "Comic Sans MS";
-}
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
   font-family: "Din Condensed";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
   font-family: "Georgia";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
   font-family: "Helvetica";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
   font-family: "Helvetica New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
   font-family: "Roboto";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
   font-family: "Tahoma";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
   font-family: "Times New Roman";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(17) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
@@ -3047,15 +3046,6 @@
 .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-prev-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-select-all-cell.e-prev-highlight-right {
   border-left-color: #757575;
 }
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-prev-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-highlight {
-  border-left-color: transparent;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-prev-highlight::after, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-highlight::after {
-  border-left-color: #757575;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-end.e-highlight::before, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-highlight + th.e-header-cell.e-hide-end::before {
-  border-right-color: #757575;
-}
 .e-spreadsheet .e-copy-indicator div.e-top,
 .e-spreadsheet .e-range-indicator div.e-top,
 .e-spreadsheet .e-formularef-indicator div.e-top {

package/styles/material.css

@@ -743,6 +743,9 @@
   display: inline-table;
   padding-top: 3px;
 }
+.e-spreadsheet .e-unprotectworksheet-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -759,6 +762,9 @@
 .e-spreadsheet .e-unprotectworksheet-dlg.e-dialog .e-dlg-content .e-unprotectsheetpwd-content .e-input {
   margin-top: 10px;
 }
+.e-spreadsheet .e-reenterpwd-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -1724,19 +1730,6 @@
 .e-spreadsheet .e-sheet-panel.e-rtl .e-frozen-row {
   right: 0;
 }
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-header-cell.e-hide-start {
-  border-left-color: transparent;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-header-cell.e-hide-start::after {
-  border-left: 1px solid #e0e0e0;
-  border-right: none;
-  left: 0.5px;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-table th.e-hide-end.e-header-cell::before {
-  border-left: none;
-  border-right: 1px solid #e0e0e0;
-  right: 0.5px;
-}
 .e-spreadsheet .e-sheet-panel .e-frozen-columns .e-selectall-container {
   position: relative;
 }
@@ -2032,6 +2025,9 @@
 .e-spreadsheet .e-find-dlg.e-dialog .e-footer-content {
   text-align: left;
 }
+.e-spreadsheet .e-protectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-protectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 31px;
@@ -2049,6 +2045,9 @@
   line-height: 24px;
   margin-bottom: 4px;
 }
+.e-spreadsheet .e-unprotectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -2065,6 +2064,9 @@
 .e-spreadsheet .e-unprotectworkbook-dlg.e-dialog .e-dlg-content .e-unprotectpwd-content .e-input {
   margin-top: 10px;
 }
+.e-spreadsheet .e-importprotectworkbook-dlg.e-dialog {
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-spreadsheet .e-importprotectworkbook-dlg.e-dialog .e-dlg-header-content .e-dlg-header {
   font-size: 18px;
   line-height: 21px;
@@ -2174,36 +2176,33 @@
   font-family: "Calibri";
 }
 .e-dropdown-popup.e-font-family ul .e-item:nth-child(7) {
-  font-family: "Comic Sans MS";
-}
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(8) {
   font-family: "Courier New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(9) {
   font-family: "Din Condensed";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(10) {
   font-family: "Georgia";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(11) {
   font-family: "Helvetica";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(12) {
   font-family: "Helvetica New";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(13) {
   font-family: "Roboto";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(14) {
   font-family: "Tahoma";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(15) {
   font-family: "Times New Roman";
 }
-.e-dropdown-popup.e-font-family ul .e-item:nth-child(17) {
+.e-dropdown-popup.e-font-family ul .e-item:nth-child(16) {
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
@@ -3075,15 +3074,6 @@
 .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-prev-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-select-all-cell.e-prev-highlight-right {
   border-left-color: #cccccc;
 }
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-prev-highlight, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-highlight {
-  border-left-color: transparent;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-prev-highlight::after, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-start.e-highlight::after {
-  border-left-color: #cccccc;
-}
-.e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-hide-end.e-highlight::before, .e-spreadsheet .e-sheet-panel.e-rtl .e-column-header .e-header-cell.e-highlight + th.e-header-cell.e-hide-end::before {
-  border-right-color: #cccccc;
-}
 .e-spreadsheet .e-copy-indicator div.e-top,
 .e-spreadsheet .e-range-indicator div.e-top,
 .e-spreadsheet .e-formularef-indicator div.e-top {

package/styles/ribbon/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/ribbon/_bootstrap-dark-definition.scss

@@ -0,0 +1,13 @@
+$ribbon-skin: 'bootstrap' !default;
+$ribbon-border-color: $grey-88 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $gray-darker !default;
+$ribbon-header-bg-color: #191919 !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 16.5px 4px 17.5px !default;
+$bigger-drop-icon-margin: 18.5px 5px 19.5px !default;
+$expand-icon-color: $grey-dark-font !default;
+$ribbon-header-height: 45px !default;
+$ribbon-focus-text-color: $grey-dark-font !default;
+$ribbon-focus-bg-color: $grey-44 !default;
+$ribbon-comb-icon-color: $grey-dark-font !default;

package/styles/ribbon/_bootstrap-definition.scss

@@ -0,0 +1,12 @@
+$ribbon-skin: 'bootstrap' !default;
+$ribbon-border-color: #e5e5e5 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $grey-white !default;
+$ribbon-header-bg-color: $grey-f9 !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 16.5px 4px 17.5px !default;
+$bigger-drop-icon-margin: 18.5px 5px 19.5px !default;
+$expand-icon-color: $gray-light !default;
+$ribbon-header-height: 45px !default;
+$ribbon-focus-bg-color: $grey-lighter !default;
+$ribbon-focus-text-color: $brand-primary-darken-25 !default;

package/styles/ribbon/_bootstrap4-definition.scss

@@ -0,0 +1,13 @@
+$ribbon-skin: 'bootstrap4' !default;
+$ribbon-border-color: $gray-300 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-header-bg-color: $gray-100 !default;
+$ribbon-content-bg-color: $white !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 15px 5px !default;
+$ribbon-comb-icon-color:  $gray-700 !default;
+$bigger-drop-icon-margin: 18.5px 5px 19.5px !default;
+$expand-icon-color: $gray-600 !default;
+$ribbon-header-height: 41px !default;
+$ribbon-focus-text-color: darken($primary, 15%) !default;
+$ribbon-focus-bg-color: #eee !default;

package/styles/ribbon/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/ribbon/_bootstrap5-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'bootstrap5' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$ribbon-border-color: $border-light !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $content-bg-color !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
+$separator-border-color: $border-light !default;
+$expand-icon-color: $icon-color !default;
+$ribbon-comb-icon-color:  $icon-color !default;
+$ribbon-focus-text-color: $primary-bg-color-pressed !default;
+$ribbon-focused-wrap-focus-border-color: $icon-color !default;
+$ribbon-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;

package/styles/ribbon/_fabric-dark-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'fabric' !default;
+$border-color: $neutral-quintenary !default;
+$ribbon-border: 1px solid $border-color !default;
+$tab-header-height: 38px !default;
+$bigger-tab-header-height: 48px !default;
+$ribbon-header-bg-color: $neutral-lighter !default;
+$file-menu-wrap-padding: 0 0 0 8px !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: $neutral-light-font !default;
+$expand-icon-color: $neutral-light-font !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $neutral-light-fontalt !default;
+$ribbon-focused-wrap-focus-border-color: $neutral-secondary-alt !default;

package/styles/ribbon/_fabric-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'fabric' !default;
+$border-color: $neutral-light !default;
+$ribbon-border: 1px solid $border-color !default;
+$tab-header-height: 38px !default;
+$bigger-tab-header-height: 48px !default;
+$ribbon-header-bg-color: $neutral-white !default;
+$ribbon-focused-wrap-focus-border-color: $neutral-secondary-alt !default;
+$file-menu-wrap-padding: 0 0 0 8px !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: $neutral-light-font !default;
+$expand-icon-color: $neutral-secondary !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $neutral-light-font !default;

package/styles/ribbon/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/ribbon/_fluent-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'FluentUI' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$ribbon-border-color: $border-light !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $content-bg-color !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
+$ribbon-comb-icon-color:  $icon-color !default;
+$separator-border-color: $border-light !default;
+$ribbon-focus-text-color: $content-text-color !default;
+$expand-icon-color: $icon-color !default;
+$ribbon-focused-wrap-focus-border-color: $icon-color !default;
+$ribbon-focus-bg-color: $content-bg-color-alt2 !default;

package/styles/ribbon/_fusionnew-definition.scss

@@ -0,0 +1,14 @@
+$ribbon-skin: 'bootstrap5' !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 8px 4px !default;
+$bigger-drop-icon-margin: 16px 5px !default;
+$ribbon-border-color: $border-light !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-content-bg-color: $content-bg-color !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
+$ribbon-comb-icon-color:  $icon-color !default;
+$separator-border-color: $border-light !default;
+$ribbon-focus-text-color: $primary-bg-color-pressed !default;
+$expand-icon-color: $icon-color !default;
+$ribbon-focused-wrap-focus-border-color: $icon-color !default;
+$ribbon-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;

package/styles/ribbon/_highcontrast-definition.scss

@@ -0,0 +1,12 @@
+$ribbon-skin: 'highcontrast' !default;
+$ribbon-border-color: $bg-base-100 !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$ribbon-header-bg-color: $bg-base-0 !default;
+$file-menu-wrap-padding: 0 !default;
+$ribbon-focused-wrap-focus-border-color: $hover-border !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$ribbon-comb-icon-color: $content-font !default;
+$expand-icon-color: $content-font !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $content-font !default;

package/styles/ribbon/_highcontrast-light-definition.scss

@@ -0,0 +1,12 @@
+$ribbon-skin: 'highcontrast' !default;
+$ribbon-border-color: transparent !default;
+$ribbon-border: 1px solid $ribbon-border-color !default;
+$file-menu-wrap-padding: 0 !default;
+$drop-icon-margin: 12.5px 4px !default;
+$bigger-drop-icon-margin: 14.5px 5px !default;
+$expand-icon-color: initial !default;
+$ribbon-comb-icon-color: $content-font !default;
+$ribbon-header-bg-color: transparent !default;
+$ribbon-focused-wrap-focus-border-color: $hover-border !default;
+$ribbon-focus-bg-color: initial !default;
+$ribbon-focus-text-color: $content-font !default;