@syncfusion/ej2-angular-spreadsheet 20.4.54 → 21.1.35

package/styles/spreadsheet/material.css

@@ -330,7 +330,7 @@
 }
 .e-chart-menu .e-ul .e-menu-item .e-menu-icon,
 .e-chart-type-menu .e-ul .e-menu-item .e-menu-icon {
-  font-size: 30px;
+  font-size: 32px;
   margin-right: 10px;
 }
 .e-chart-menu .e-ul .e-menu-item .e-bar,
@@ -769,7 +769,7 @@
   padding-top: 7px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-content .e-reenterpwd-content .e-header {
-  font-size: 14px;
+  font-size: 18px;
   line-height: 16px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-content .e-reenterpwd-content .e-input {
@@ -832,7 +832,7 @@
   height: 300px;
 }
 .e-spreadsheet .e-protect-content {
-  font-size: 13px;
+  font-size: 14px;
   height: 37px;
   padding-top: 20px;
   width: 100%;
@@ -1576,7 +1576,7 @@
   font-size: 16px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-icon, .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-type-icon {
-  font-size: 30px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
   margin-right: 5px;
   padding: 0 5px;
   width: 30px;
@@ -1919,7 +1919,7 @@
 .e-spreadsheet .e-datavalidation-dlg .e-footer-content .e-clearall-btn {
   float: left;
 }
-.e-spreadsheet .e-validationerror-dlg .e-dlg-content {
+.e-spreadsheet .e-validation-error-dlg .e-dlg-content {
   font-size: 14px;
   line-height: 28px;
 }
@@ -1955,11 +1955,6 @@
   text-align: center;
   width: 136px;
 }
-.e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-tab-header .e-toolbar-item .e-tab-text,
-.e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-tab-header .e-toolbar-item .e-tab-text {
-  font-size: 13px;
-  line-height: 15px;
-}
 .e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-content,
 .e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-content {
   padding-top: 24px;
@@ -2124,7 +2119,7 @@
   max-width: initial;
 }
 .e-dropdown-popup.e-numformat-ddb ul .e-numformat-preview-text {
-  font-size: 13px;
+  font-size: 12px;
   max-width: 200px;
   overflow: hidden;
   text-align: right;
@@ -2207,17 +2202,17 @@
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
 }
 .e-dropdown-popup.e-borders-ddb .e-menu-wrapper {
   border: 0;
 }
 .e-dropdown-popup.e-borders-ddb .e-menu-wrapper ul .e-menu-item .e-menu-icon {
-  font-size: 16px;
+  font-size: 14px;
 }
 .e-dropdown-popup.e-popup.e-aggregate-list ul {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .e-menu-wrapper.e-file-menu ul .e-menu-item div {
@@ -2226,7 +2221,7 @@
   width: 100%;
 }
 .e-menu-wrapper.e-file-menu ul .e-menu-item div .e-extension {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
   opacity: 0.7;
   padding-left: 10px;
@@ -2569,7 +2564,7 @@
   margin-top: 0;
 }
 .e-spreadsheet:not(.e-mobile-view) .e-aggregate-list {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
 }
 .e-spreadsheet:not(.e-mobile-view) .e-ribbon {
@@ -2734,7 +2729,7 @@
 }
 .e-bigger .e-spreadsheet .e-find-dlg .e-footer-content .e-btn,
 .e-bigger.e-spreadsheet .e-find-dlg .e-footer-content .e-btn {
-  font-size: 11px;
+  font-size: 12px;
   margin-top: 6px;
 }
 .e-bigger .e-spreadsheet .e-findtool-dlg,
@@ -3912,7 +3907,7 @@
   background-color: #eee;
 }
 
-.e-ribbon .e-content .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
+.e-spreadsheet .e-ribbon .e-content .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
   color: rgba(0, 0, 0, 0.54);
 }
 

package/styles/spreadsheet/material.scss

@@ -1,5 +1,5 @@
 @import 'ej2-base/styles/material-definition.scss';
-@import '../ribbon/material-definition.scss';
+@import '../spreadsheet-ribbon/material-definition.scss';
 @import 'ej2-buttons/styles/button/material-definition.scss';
 @import 'ej2-buttons/styles/check-box/material-definition.scss';
 @import 'ej2-buttons/styles/radio-button/material-definition.scss';

package/styles/spreadsheet/tailwind-dark.css

@@ -283,7 +283,7 @@
 }
 .e-chart-menu .e-ul .e-menu-item .e-menu-icon,
 .e-chart-type-menu .e-ul .e-menu-item .e-menu-icon {
-  font-size: 30px;
+  font-size: 32px;
   margin-right: 10px;
 }
 .e-chart-menu .e-ul .e-menu-item .e-bar,
@@ -683,7 +683,7 @@
 }
 .e-spreadsheet .e-protect-dlg.e-dialog {
   height: 470px;
-  width: 287px;
+  width: 289px;
 }
 .e-spreadsheet .e-protect-dlg.e-dialog .e-sheet-password-content .e-header {
   font-size: 14px;
@@ -730,7 +730,7 @@
   padding-top: 7px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-content .e-reenterpwd-content .e-header {
-  font-size: 14px;
+  font-size: 18px;
   line-height: 16px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-content .e-reenterpwd-content .e-input {
@@ -795,7 +795,7 @@
   height: 300px;
 }
 .e-spreadsheet .e-protect-content {
-  font-size: 13px;
+  font-size: 14px;
   height: 37px;
   padding-top: 20px;
   width: 100%;
@@ -880,7 +880,7 @@
   text-align: center;
   transition: transform 300ms ease;
   width: 18px;
-  font-size: 10px;
+  font-size: 18px;
   font-size: 18px;
   line-height: 25px;
 }
@@ -1535,7 +1535,7 @@
   font-size: 16px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-icon, .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-type-icon {
-  font-size: 30px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
   margin-right: 5px;
   padding: 0 5px;
   width: 30px;
@@ -1892,7 +1892,7 @@
 .e-spreadsheet .e-datavalidation-dlg .e-footer-content .e-clearall-btn {
   float: left;
 }
-.e-spreadsheet .e-validationerror-dlg .e-dlg-content {
+.e-spreadsheet .e-validation-error-dlg .e-dlg-content {
   font-size: 14px;
   line-height: 28px;
 }
@@ -1928,11 +1928,6 @@
   text-align: center;
   width: 136px;
 }
-.e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-tab-header .e-toolbar-item .e-tab-text,
-.e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-tab-header .e-toolbar-item .e-tab-text {
-  font-size: 13px;
-  line-height: 15px;
-}
 .e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-content,
 .e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-content {
   padding-top: 24px;
@@ -2100,7 +2095,7 @@
   max-width: initial;
 }
 .e-dropdown-popup.e-numformat-ddb ul .e-numformat-preview-text {
-  font-size: 13px;
+  font-size: 12px;
   max-width: 200px;
   overflow: hidden;
   text-align: right;
@@ -2183,17 +2178,17 @@
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
 }
 .e-dropdown-popup.e-borders-ddb .e-menu-wrapper {
   border: 0;
 }
 .e-dropdown-popup.e-borders-ddb .e-menu-wrapper ul .e-menu-item .e-menu-icon {
-  font-size: 16px;
+  font-size: 14px;
 }
 .e-dropdown-popup.e-popup.e-aggregate-list ul {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .e-menu-wrapper.e-file-menu ul .e-menu-item div {
@@ -2202,7 +2197,7 @@
   width: 100%;
 }
 .e-menu-wrapper.e-file-menu ul .e-menu-item div .e-extension {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
   opacity: 0.7;
   padding-left: 12px;
@@ -2471,9 +2466,8 @@
 }
 .e-spreadsheet-function-dlg.e-dialog .e-dlg-content .e-category-content {
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 700;
   margin-bottom: 0;
-  font-weight: 600;
   padding: 10px 0;
 }
 .e-spreadsheet-function-dlg.e-dialog .e-dlg-content .e-formula-description {
@@ -2550,7 +2544,7 @@
   margin-top: 0;
 }
 .e-spreadsheet:not(.e-mobile-view) .e-aggregate-list {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
 }
 .e-spreadsheet:not(.e-mobile-view) .e-ribbon {
@@ -2692,7 +2686,7 @@
 }
 .e-bigger .e-spreadsheet:not(.e-mobile-view) .e-formula-bar-panel .e-formula-bar,
 .e-bigger.e-spreadsheet:not(.e-mobile-view) .e-formula-bar-panel .e-formula-bar {
-  font-size: 15px;
+  font-size: 16px;
   height: 29px;
   line-height: 29px;
 }
@@ -2725,12 +2719,12 @@
 .e-bigger .e-spreadsheet .e-filter-icon,
 .e-bigger.e-spreadsheet .e-filter-icon {
   margin-bottom: 12px;
-  font-size: 21px;
+  font-size: 22px;
   margin-top: -3px;
 }
 .e-bigger .e-spreadsheet .e-find-dlg .e-footer-content .e-btn,
 .e-bigger.e-spreadsheet .e-find-dlg .e-footer-content .e-btn {
-  font-size: 11px;
+  font-size: 12px;
   margin-top: 6px;
 }
 .e-bigger .e-spreadsheet .e-findtool-dlg,
@@ -4139,7 +4133,7 @@
   background-color: #4b5563;
 }
 
-.e-ribbon .e-content .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
+.e-spreadsheet .e-ribbon .e-content .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
   color: #d1d5db;
 }
 

package/styles/spreadsheet/tailwind.css

@@ -283,7 +283,7 @@
 }
 .e-chart-menu .e-ul .e-menu-item .e-menu-icon,
 .e-chart-type-menu .e-ul .e-menu-item .e-menu-icon {
-  font-size: 30px;
+  font-size: 32px;
   margin-right: 10px;
 }
 .e-chart-menu .e-ul .e-menu-item .e-bar,
@@ -683,7 +683,7 @@
 }
 .e-spreadsheet .e-protect-dlg.e-dialog {
   height: 470px;
-  width: 287px;
+  width: 289px;
 }
 .e-spreadsheet .e-protect-dlg.e-dialog .e-sheet-password-content .e-header {
   font-size: 14px;
@@ -730,7 +730,7 @@
   padding-top: 7px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-content .e-reenterpwd-content .e-header {
-  font-size: 14px;
+  font-size: 18px;
   line-height: 16px;
 }
 .e-spreadsheet .e-reenterpwd-dlg.e-dialog .e-dlg-content .e-reenterpwd-content .e-input {
@@ -795,7 +795,7 @@
   height: 300px;
 }
 .e-spreadsheet .e-protect-content {
-  font-size: 13px;
+  font-size: 14px;
   height: 37px;
   padding-top: 20px;
   width: 100%;
@@ -880,7 +880,7 @@
   text-align: center;
   transition: transform 300ms ease;
   width: 18px;
-  font-size: 10px;
+  font-size: 18px;
   font-size: 18px;
   line-height: 25px;
 }
@@ -1535,7 +1535,7 @@
   font-size: 16px;
 }
 .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-icon, .e-spreadsheet .e-ribbon .e-toolbar .e-toolbar-item .e-btn .e-chart-type-icon {
-  font-size: 30px !important; /* stylelint-disable-line declaration-no-important */
+  font-size: 32px !important; /* stylelint-disable-line declaration-no-important */
   margin-right: 5px;
   padding: 0 5px;
   width: 30px;
@@ -1892,7 +1892,7 @@
 .e-spreadsheet .e-datavalidation-dlg .e-footer-content .e-clearall-btn {
   float: left;
 }
-.e-spreadsheet .e-validationerror-dlg .e-dlg-content {
+.e-spreadsheet .e-validation-error-dlg .e-dlg-content {
   font-size: 14px;
   line-height: 28px;
 }
@@ -1928,11 +1928,6 @@
   text-align: center;
   width: 136px;
 }
-.e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-tab-header .e-toolbar-item .e-tab-text,
-.e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-tab-header .e-toolbar-item .e-tab-text {
-  font-size: 13px;
-  line-height: 15px;
-}
 .e-spreadsheet .e-hyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-content,
 .e-spreadsheet .e-edithyperlink-dlg.e-dialog .e-dlg-content .e-link-dialog .e-content {
   padding-top: 24px;
@@ -2100,7 +2095,7 @@
   max-width: initial;
 }
 .e-dropdown-popup.e-numformat-ddb ul .e-numformat-preview-text {
-  font-size: 13px;
+  font-size: 12px;
   max-width: 200px;
   overflow: hidden;
   text-align: right;
@@ -2183,17 +2178,17 @@
   font-family: "Verdana";
 }
 .e-dropdown-popup.e-aggregate-list {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
 }
 .e-dropdown-popup.e-borders-ddb .e-menu-wrapper {
   border: 0;
 }
 .e-dropdown-popup.e-borders-ddb .e-menu-wrapper ul .e-menu-item .e-menu-icon {
-  font-size: 16px;
+  font-size: 14px;
 }
 .e-dropdown-popup.e-popup.e-aggregate-list ul {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .e-menu-wrapper.e-file-menu ul .e-menu-item div {
@@ -2202,7 +2197,7 @@
   width: 100%;
 }
 .e-menu-wrapper.e-file-menu ul .e-menu-item div .e-extension {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
   opacity: 0.7;
   padding-left: 12px;
@@ -2471,9 +2466,8 @@
 }
 .e-spreadsheet-function-dlg.e-dialog .e-dlg-content .e-category-content {
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 700;
   margin-bottom: 0;
-  font-weight: 600;
   padding: 10px 0;
 }
 .e-spreadsheet-function-dlg.e-dialog .e-dlg-content .e-formula-description {
@@ -2550,7 +2544,7 @@
   margin-top: 0;
 }
 .e-spreadsheet:not(.e-mobile-view) .e-aggregate-list {
-  font-size: 13px;
+  font-size: 14px;
   margin-left: auto;
 }
 .e-spreadsheet:not(.e-mobile-view) .e-ribbon {
@@ -2692,7 +2686,7 @@
 }
 .e-bigger .e-spreadsheet:not(.e-mobile-view) .e-formula-bar-panel .e-formula-bar,
 .e-bigger.e-spreadsheet:not(.e-mobile-view) .e-formula-bar-panel .e-formula-bar {
-  font-size: 15px;
+  font-size: 16px;
   height: 29px;
   line-height: 29px;
 }
@@ -2725,12 +2719,12 @@
 .e-bigger .e-spreadsheet .e-filter-icon,
 .e-bigger.e-spreadsheet .e-filter-icon {
   margin-bottom: 12px;
-  font-size: 21px;
+  font-size: 22px;
   margin-top: -3px;
 }
 .e-bigger .e-spreadsheet .e-find-dlg .e-footer-content .e-btn,
 .e-bigger.e-spreadsheet .e-find-dlg .e-footer-content .e-btn {
-  font-size: 11px;
+  font-size: 12px;
   margin-top: 6px;
 }
 .e-bigger .e-spreadsheet .e-findtool-dlg,
@@ -3929,7 +3923,7 @@
   background-color: #e5e7eb;
 }
 
-.e-ribbon .e-content .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
+.e-spreadsheet .e-ribbon .e-content .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay .e-icons {
   color: #6b7280;
 }
 

package/styles/spreadsheet/tailwind.scss

@@ -1,5 +1,5 @@
 @import 'ej2-base/styles/tailwind-definition.scss';
-@import '../ribbon/tailwind-definition.scss';
+@import '../spreadsheet-ribbon/tailwind-definition.scss';
 @import 'ej2-buttons/styles/button/tailwind-definition.scss';
 @import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
 @import 'ej2-buttons/styles/radio-button/tailwind-definition.scss';

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

@@ -0,0 +1,15 @@
+$spreadsheet-ribbon-skin: 'bootstrap' !default;
+$spreadsheet-ribbon-border-color: $grey-88 !default;
+$spreadsheet-ribbon-border: 1px solid $spreadsheet-ribbon-border-color !default;
+$spreadsheet-ribbon-content-bg-color: $gray-darker !default;
+$spreadsheet-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;
+$spreadsheet-ribbon-header-height: 45px !default;
+$spreadsheet-ribbon-focus-text-color: $grey-dark-font !default;
+$spreadsheet-ribbon-focus-bg-color: $grey-44 !default;
+$spreadsheet-ribbon-comb-icon-color: $grey-dark-font !default;
+$spreadsheet-ribbon-drop-icon-font-size: 10px !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: 12px !default;

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

@@ -0,0 +1,14 @@
+$spreadsheet-ribbon-skin: 'bootstrap' !default;
+$spreadsheet-ribbon-border-color: #e5e5e5 !default;
+$spreadsheet-ribbon-border: 1px solid $spreadsheet-ribbon-border-color !default;
+$spreadsheet-ribbon-content-bg-color: $grey-white !default;
+$spreadsheet-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;
+$spreadsheet-ribbon-header-height: 45px !default;
+$spreadsheet-ribbon-focus-bg-color: $grey-lighter !default;
+$spreadsheet-ribbon-focus-text-color: $brand-primary-darken-25 !default;
+$spreadsheet-ribbon-drop-icon-font-size: 10px !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: 12px !default;

package/styles/spreadsheet-ribbon/_bootstrap4-definition.scss

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

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

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

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

@@ -0,0 +1,18 @@
+$spreadsheet-ribbon-skin: 'fabric' !default;
+$border-color: $neutral-quintenary !default;
+$spreadsheet-ribbon-border: 1px solid $border-color !default;
+$tab-header-height: 38px !default;
+$bigger-tab-header-height: 48px !default;
+$spreadsheet-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;
+$spreadsheet-ribbon-comb-icon-color: $neutral-light-font !default;
+$expand-icon-color: $neutral-light-font !default;
+$spreadsheet-ribbon-focus-bg-color: initial !default;
+$spreadsheet-ribbon-focus-text-color: $neutral-light-fontalt !default;
+$spreadsheet-ribbon-focused-wrap-focus-border-color: $neutral-secondary-alt !default;
+$spreadsheet-ribbon-drop-icon-font-size: 10px !default;
+$tab-file-menu-font-size: 14px !default;
+$bigger-tab-file-menu-font-size: 15px !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: 12px !default;

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

@@ -0,0 +1,18 @@
+$spreadsheet-ribbon-skin: 'fabric' !default;
+$border-color: $neutral-light !default;
+$spreadsheet-ribbon-border: 1px solid $border-color !default;
+$tab-header-height: 38px !default;
+$bigger-tab-header-height: 48px !default;
+$spreadsheet-ribbon-header-bg-color: $neutral-white !default;
+$spreadsheet-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;
+$spreadsheet-ribbon-comb-icon-color: $neutral-light-font !default;
+$expand-icon-color: $neutral-secondary !default;
+$spreadsheet-ribbon-focus-bg-color: initial !default;
+$spreadsheet-ribbon-focus-text-color: $neutral-light-font !default;
+$spreadsheet-ribbon-drop-icon-font-size: 10px !default;
+$tab-file-menu-font-size: 14px !default;
+$bigger-tab-file-menu-font-size: 15px !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: 12px !default;

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

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

package/styles/spreadsheet-ribbon/_fusionnew-definition.scss

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

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

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

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

@@ -0,0 +1,14 @@
+$spreadsheet-ribbon-skin: 'highcontrast' !default;
+$spreadsheet-ribbon-border-color: transparent !default;
+$spreadsheet-ribbon-border: 1px solid $spreadsheet-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;
+$spreadsheet-ribbon-comb-icon-color: $content-font !default;
+$spreadsheet-ribbon-header-bg-color: transparent !default;
+$spreadsheet-ribbon-focused-wrap-focus-border-color: $hover-border !default;
+$spreadsheet-ribbon-focus-bg-color: initial !default;
+$spreadsheet-ribbon-focus-text-color: $content-font !default;
+$spreadsheet-ribbon-drop-icon-font-size: 10px !default;
+$bigger-spreadsheet-ribbon-drop-icon-font-size: 12px !default;