@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

package/styles/ribbon/_material-definition.scss

@@ -37,14 +37,17 @@ $ribbon-overflow-btn-margin: 0 !default;
 $ribbon-overflow-collapse-btn-right: 25px !default;
 $ribbon-overflow-item-padding: 0 !default;
 $ribbon-overflow-wrapper-item-margin: 3px 8px !default;
-$ribbon-overflow-item-btn-height: 18px !default;
+$ribbon-overflow-item-btn-height: 12px !default;
 $ribbon-overflow-item-btn-margin: 0 8px 0 0 !default;
 $ribbon-overflow-btn-height: 32px !default;
 $ribbon-rtl-overflow-item-btn-margin: 0 0 0 8px !default;
 $ribbon-overflow-btn-border-radius: unset !default;
-$ribbon-overflow-header-height: 18px !default;
-$ribbon-overflow-header-padding: 3px 8px !default;
-$ribbon-overflow-header-weight: 600 !default;
+$ribbon-overflow-header-height: 26px !default;
+$ribbon-overflow-header-line-height: 18px !default;
+$ribbon-overflow-header-font-size: 14px !default;
+$ribbon-overflow-header-padding: 6px 0 6px 12px !default;
+$ribbon-rtl-overflow-header-padding: 6px 12px 6px 0 !default;
+$ribbon-overflow-header-weight: 500 !default;
 $ribbon-overflow-dropdown-btn-padding: 0 15px !default;
 $ribbon-overall-overflow-btn-position: 5px !default;
 $ribbon-dropdown-btn-padding: 0 15px !default;
@@ -62,8 +65,13 @@ $ribbon-items-border: none !default;
 $ribbon-items-border-radius: unset !default;
 $ribbon-items-font-weight: 400 !default;
 $ribbon-items-btn-size: 12px !default;
+$ribbon-items-label-size: 14px !default;
+$ribbon-items-btn-icon-size: 12px !default;
+$ribbon-items-caret-icon-size: 12px !default;
 $ribbon-items-btn-padding: 0 !default;
 $ribbon-items-margin: 8px !default;
+$ribbon-checkbox-margin: 10px 0 10px 12px !default;
+$ribbon-rtl-checkbox-margin: 10px 12px 10px 0 !default;
 $ribbon-items-height: 18px !default;
 $ribbon-items-checkbox-size: 12px !default;
 $ribbon-items-checkbox-padding: 0 8px !default;
@@ -119,6 +127,32 @@ $ribbon-group-button-padding: 0 8px 0 0 !default;
 $ribbon-group-button-ddb-border: none !default;
 $ribbon-groupbutton-header-padding: 3px !default;
 $ribbon-items-label: 34px !default;
+$ribbon-combobox-height: 32px !default;
+$ribbon-medium-item-height: 32px !default;
+$ribbon-button-icon-padding: 10px 8px 10px 12px !default;
+$ribbon-rtl-button-icon-padding: 10px 12px 10px 8px !default;
+$ribbon-caret-icon-padding: 0 12px !default;
+$ribbon-rtl-caret-icon-padding: 0 12px !default;
+$ribbon-gallery-items-padding: 15px 22px !default;
+$ribbon-gallery-popup-items-padding: 5px 0 !default;
+$ribbon-gallery-header-padding: 8px 0 4px !default;
+$ribbon-gallery-header-font-weight: 500 !default;
+$ribbon-gallery-header-line-height: 18px !default;
+$ribbon-gallery-header-fontsize: 12px !default;
+$ribbon-gallery-text-size: 14px !default;
+$ribbon-gallery-text-weight: 400 !default;
+$ribbon-gallery-text-line-height: 22px !default;
+$ribbon-gallery-simplified-items-padding: 5px 0 !default;
+$ribbon-gallery-popup-padding: 0 12px 12px !default;
+$ribbon-gallery-icons-size: 20px !default;
+$ribbon-gallery-icons-weight: $ribbon-gallery-text-weight !default;
+$ribbon-gallery-icons-height: 20px !default;
+$ribbon-gallery-items-width: 95px !default;
+$ribbon-gallery-simplified-items-width: 95px !default;
+$ribbon-gallery-popup-items-width: 73px !default;
+$ribbon-gallery-wrapper-height: 72px !default;
+$ribbon-gallery-simplified-wrapper-height: 24px !default;
+$ribbon-gallery-simplified-items-wrapper-height: 20px !default;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -156,11 +190,15 @@ $ribbon-bigger-large-items-btn-size: 16px !default;
 $ribbon-bigger-large-items-btn-height: 24px !default;
 $ribbon-bigger-large-items-btn-gap: 6px !default;
 $ribbon-bigger-items-padding: 2px !default;
-$ribbon-bigger-items-btn-size: 14px !default;
+$ribbon-bigger-items-btn-size: 16px !default;
+$ribbon-bigger-items-label-size: 16px !default;
 $ribbon-bigger-items-height: 22px !default;
 $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: 20px !default;
+$ribbon-bigger-items-btn-icon-size: 16px !default;
 $ribbon-bigger-items-margin: 8px !default;
+$ribbon-bigger-checkbox-margin: 12px 0 12px 16px !default;
+$ribbon-bigger-rtl-checkbox-margin: 12px 16px 12px 0 !default;
 $ribbon-bigger-items-checkbox-size: 16px !default;
 $ribbon-bigger-items-checkbox-padding: 0 8px !default;
 $ribbon-bigger-input-group-height: 36px !default;
@@ -177,6 +215,7 @@ $ribbon-bigger-dropdown-btn-size: 16px !default;
 $ribbon-bigger-dropdown-btn-line-height: 16px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 5px !default;
 $ribbon-bigger-dropdown-caret-btn-size: 16px !default;
+$ribbon-bigger-dropdown-caret-icon-size: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-height: 16px !default;
 $ribbon-bigger-caret-dropdown-btn-padding: 0 18px !default;
 $ribbon-bigger-color-picker-height: 20px !default;
@@ -199,7 +238,22 @@ $ribbon-bigger-group-button-icon-padding: 0 !default;
 $ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
 $ribbon-bigger-group-button-ddb-padding: 8px 12px 12px !default;
 $ribbon-bigger-group-button-padding: 0 8px 0 0 !default;
-$ribbon-bigger-items-label: 38px !default;
+$ribbon-bigger-items-label: 44px !default;
+$ribbon-bigger-gallery-popup-padding: 0 16px 16px !default;
+$ribbon-bigger-gallery-header-fontsize: 16px !default;
+$ribbon-bigger-gallery-header-line-height: 24px !default;
+$ribbon-bigger-gallery-header-padding: 12px 0 8px !default;
+$ribbon-bigger-overflow-header-line-height: 22px !default;
+$ribbon-bigger-overflow-header-height: 36px !default;
+$ribbon-bigger-combobox-height: 40px !default;
+$ribbon-bigger-medium-item-height: 40px !default;
+$ribbon-bigger-overflow-header-font-size: 16px !default;
+$ribbon-bigger-overflow-header-padding: 10px 0 10px 16px !default;
+$ribbon-bigger-rtl-overflow-header-padding: 10px 16px 10px 0 !default;
+$ribbon-bigger-button-icon-padding: 12px 12px 12px 16px !default;
+$ribbon-bigger-rtl-button-icon-padding: 12px 16px 12px 12px !default;
+$ribbon-bigger-caret-icon-padding: 0 12px !default;
+$ribbon-bigger-rtl-caret-icon-padding: 0 12px !default;
 
 $ribbon-header-bg-color: $grey-50 !default;
 $ribbon-border-color: $grey-300 !default;
@@ -276,6 +330,7 @@ $ribbon-group-button-text-hover-color: rgba($grey-black, .84) !default;
 $ribbon-group-button-active-background: rgba($grey-black, .16) !default;
 $ribbon-group-button-text-active-color: rgba($grey-black, .84) !default;
 $ribbon-group-button-selected-background: rgba($grey-black, .16) !default;
+$ribbon-group-button-border-color: $grey-700 !default;
 $ribbon-group-button-dropdown-popup-border-color: unset !default;
 $ribbon-group-button-dropdown-popup-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .23), 0 10px 20px 0 rgba(0, 0, 0, .19) !default;
 $ribbon-popup-common-bg-color: $content-bg-color !default;
@@ -283,3 +338,23 @@ $ribbon-popup-common-border-radius: unset !default;
 $ribbon-popup-common-border-color: unset !default;
 $ribbon-popup-common-box-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
 $ribbon-filemenu-popup-border-radius: unset !default;
+$ribbon-contextual-tab-color: $ribbon-active-tab-indicator-color !default;
+$ribbon-contextual-tab-background: $ribbon-header-bg-color !default;
+$ribbon-keytip-background-color: $grey-black !default;
+$ribbon-keytip-color: $grey-white !default;
+$ribbon-gallery-popup-background-color: $grey-white !default;
+$ribbon-gallery-item-background-color: $grey-white !default;
+$ribbon-gallery-hover-background-color: $grey-200 !default;
+$ribbon-gallery-item-selected-color: $grey-200 !default;
+$ribbon-gallery-button-selected-color: $ribbon-gallery-item-selected-color !default;
+$ribbon-gallery-item-disabled-color: $grey-white !default;
+$ribbon-gallery-item-focus-border-color: $grey-400 !default;
+$ribbon-gallery-item-border-color: $grey-200 !default;
+$ribbon-gallery-header-color: $ribbon-text-color !default;
+$ribbon-gallery-item-text-color: $ribbon-text-color !default;
+$ribbon-gallery-item-disabled-text-color: rgba($grey-light-font, .38) !default;
+$ribbon-gallery-icons-color: rgba($grey-light-font, .54) !default;
+$ribbon-gallery-item-disabled-icons-color: rgba($grey-light-font, .38) !default;
+$ribbon-gallery-item-selected-text-color: $ribbon-text-color !default;
+$ribbon-gallery-item-selected-icons-color: rgba($grey-light-font, .54) !default;
+$ribbon-gallery-popup-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1px rgba($grey-black, .14), 0 3px 14px 2px rgba($grey-black, .12) !default;

package/styles/ribbon/_material3-definition.scss

@@ -37,13 +37,16 @@ $ribbon-overflow-btn-margin: 0 !default;
 $ribbon-overflow-collapse-btn-right: 25px !default;
 $ribbon-overflow-item-padding: 0 !default;
 $ribbon-overflow-wrapper-item-margin: 3px 4px !default;
-$ribbon-overflow-item-btn-height: 18px !default;
+$ribbon-overflow-item-btn-height: $text-xl !default;
 $ribbon-overflow-item-btn-margin: 0 8px 0 0 !default;
 $ribbon-overflow-btn-height: 24px !default;
 $ribbon-rtl-overflow-item-btn-margin: 0 0 0 8px !default;
 $ribbon-overflow-btn-border-radius: 4px !default;
-$ribbon-overflow-header-height: 18px !default;
-$ribbon-overflow-header-padding: 3px 8px !default;
+$ribbon-overflow-header-height: 26px !default;
+$ribbon-overflow-header-line-height: 18px !default;
+$ribbon-overflow-header-font-size: 14px !default;
+$ribbon-overflow-header-padding: 6px 0 6px 12px !default;
+$ribbon-rtl-overflow-header-padding: 6px 12px 6px 0 !default;
 $ribbon-overflow-header-weight: 500 !default;
 $ribbon-overflow-dropdown-btn-padding: 0 5px !default;
 $ribbon-overall-overflow-btn-position: 4px !default;
@@ -62,8 +65,13 @@ $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
 $ribbon-items-btn-size: $text-xs !default;
+$ribbon-items-label-size: $text-sm !default;
+$ribbon-items-btn-icon-size: $text-base !default;
+$ribbon-items-caret-icon-size: $text-sm !default;
 $ribbon-items-btn-padding: 0 !default;
 $ribbon-items-margin: 4px !default;
+$ribbon-checkbox-margin: 8px 0 8px 12px !default;
+$ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
 $ribbon-items-height: 15px !default;
 $ribbon-items-checkbox-size: $text-xs !default;
 $ribbon-items-checkbox-padding: 0 4px !default;
@@ -118,7 +126,33 @@ $ribbon-group-button-ddb-border-radius: 4px !default;
 $ribbon-group-button-padding: 0 5px 0 0 !default;
 $ribbon-group-button-ddb-border: none !default;
 $ribbon-groupbutton-header-padding: 3px !default;
-$ribbon-items-label: 26px !default;
+$ribbon-items-label: 36px !default;
+$ribbon-combobox-height: 32px !default;
+$ribbon-medium-item-height: 32px !default;
+$ribbon-button-icon-padding: 8px 8px 8px 12px !default;
+$ribbon-rtl-button-icon-padding: 8px 12px 8px 8px !default;
+$ribbon-caret-icon-padding: 0 12px !default;
+$ribbon-rtl-caret-icon-padding: 0 12px !default;
+$ribbon-gallery-items-padding: 15px 22px !default;
+$ribbon-gallery-popup-items-padding: 5px 0 !default;
+$ribbon-gallery-header-padding: 8px 0 !default;
+$ribbon-gallery-header-font-weight: 500 !default;
+$ribbon-gallery-header-line-height: 18px !default;
+$ribbon-gallery-header-fontsize: 12px !default;
+$ribbon-gallery-text-size: 14px !default;
+$ribbon-gallery-text-weight: 400 !default;
+$ribbon-gallery-text-line-height: 20px !default;
+$ribbon-gallery-simplified-items-padding: 5px 0 !default;
+$ribbon-gallery-popup-padding: 0 12px 12px !default;
+$ribbon-gallery-icons-size: 20px !default;
+$ribbon-gallery-icons-weight: $ribbon-gallery-text-weight !default;
+$ribbon-gallery-icons-height: 20px !default;
+$ribbon-gallery-items-width: 95px !default;
+$ribbon-gallery-simplified-items-width: 78px !default;
+$ribbon-gallery-popup-items-width: 73px !default;
+$ribbon-gallery-wrapper-height: 80px !default;
+$ribbon-gallery-simplified-wrapper-height: 30px !default;
+$ribbon-gallery-simplified-items-wrapper-height: 26px !default;
 
 $ribbon-bigger-content-height: 120px !default;
 $ribbon-bigger-group-overflow-content-height: 120px !default;
@@ -157,10 +191,14 @@ $ribbon-bigger-large-items-btn-height: 18px !default;
 $ribbon-bigger-large-items-btn-gap: 9px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
+$ribbon-bigger-items-label-size: $text-base !default;
 $ribbon-bigger-items-height: 18px !default;
 $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: $text-xl !default;
+$ribbon-bigger-items-btn-icon-size: $text-xl !default;
 $ribbon-bigger-items-margin: 8px !default;
+$ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
+$ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
 $ribbon-bigger-items-checkbox-size: $text-sm !default;
 $ribbon-bigger-items-checkbox-padding: 0 8px !default;
 $ribbon-bigger-input-group-height: 36px !default;
@@ -177,6 +215,7 @@ $ribbon-bigger-dropdown-btn-size: $text-xs !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 2px 4px !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-xs !default;
+$ribbon-bigger-dropdown-caret-icon-size: $text-base !default;
 $ribbon-bigger-dropdown-caret-btn-height: 12px !default;
 $ribbon-bigger-caret-dropdown-btn-padding: 0 6px !default;
 $ribbon-bigger-color-picker-height: 20px !default;
@@ -199,7 +238,22 @@ $ribbon-bigger-group-button-icon-padding: 0 !default;
 $ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
 $ribbon-bigger-group-button-ddb-padding: 12px !default;
 $ribbon-bigger-group-button-padding: 0 8px 0 0 !default;
-$ribbon-bigger-items-label: 38px !default;
+$ribbon-bigger-items-label: 48px !default;
+$ribbon-bigger-gallery-popup-padding: 0 16px 16px !default;
+$ribbon-bigger-gallery-header-fontsize: 14px !default;
+$ribbon-bigger-gallery-header-line-height: 20px !default;
+$ribbon-bigger-gallery-header-padding: 12px 0 8px !default;
+$ribbon-bigger-overflow-header-line-height: 20px !default;
+$ribbon-bigger-overflow-header-height: 36px !default;
+$ribbon-bigger-combobox-height: 40px !default;
+$ribbon-bigger-medium-item-height: 40px !default;
+$ribbon-bigger-overflow-header-font-size: 16px !default;
+$ribbon-bigger-overflow-header-padding: 10px 0 10px 16px !default;
+$ribbon-bigger-rtl-overflow-header-padding: 10px 16px 10px 0 !default;
+$ribbon-bigger-button-icon-padding: 10px 12px 10px 16px !default;
+$ribbon-bigger-rtl-button-icon-padding: 10px 16px 10px 12px !default;
+$ribbon-bigger-caret-icon-padding: 0 12px !default;
+$ribbon-bigger-rtl-caret-icon-padding: 0 12px !default;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;
@@ -277,8 +331,29 @@ $ribbon-group-button-text-hover-color: $content-text-color-hover !default;
 $ribbon-group-button-active-background: rgba($content-bg-color-selected) !default;
 $ribbon-group-button-text-active-color: $content-text-color-selected !default;
 $ribbon-group-button-selected-background: rgba($content-bg-color-selected) !default;
+$ribbon-group-button-border-color: rgba($secondary-outline-border) !default;
 $ribbon-popup-common-bg-color: $flyout-bg-color !default;
 $ribbon-popup-common-border-radius: 4px !default;
 $ribbon-popup-common-border-color: $border-light !default;
 $ribbon-popup-common-box-shadow: $shadow-md !default;
 $ribbon-filemenu-popup-border-radius: 4px !default;
+$ribbon-contextual-tab-color: $ribbon-active-tab-indicator-color !default;
+$ribbon-contextual-tab-background: rgba($content-bg-color-selected) !default;
+$ribbon-keytip-background-color: rgba($tooltip-bg-color) !default;
+$ribbon-keytip-color: rgba($tooltip-text-color) !default;
+$ribbon-gallery-popup-background-color: rgba($content-bg-color) !default;
+$ribbon-gallery-item-background-color: $transparent !default;
+$ribbon-gallery-item-selected-color: rgba($content-bg-color-selected) !default;
+$ribbon-gallery-button-selected-color: $ribbon-gallery-item-selected-color !default;
+$ribbon-gallery-hover-background-color: $content-bg-color-hover !default;
+$ribbon-gallery-item-disabled-color: $transparent !default;
+$ribbon-gallery-item-focus-border-color: rgba($border-focus) !default;
+$ribbon-gallery-item-border-color: rgba($border-light) !default;
+$ribbon-gallery-header-color: rgba($content-text-color-alt1) !default;
+$ribbon-gallery-item-text-color: rgba($content-text-color) !default;
+$ribbon-gallery-item-disabled-text-color: $content-text-color-disabled !default;
+$ribbon-gallery-icons-color: $ribbon-items-icon-color !default;
+$ribbon-gallery-item-disabled-icons-color: $content-text-color-disabled !default;
+$ribbon-gallery-item-selected-text-color: rgba($content-text-color) !default;
+$ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
+$ribbon-gallery-popup-box-shadow: $shadow-sm !default;

package/styles/ribbon/_tailwind-definition.scss

@@ -42,9 +42,12 @@ $ribbon-overflow-item-btn-margin: 0 8px 0 0 !default;
 $ribbon-overflow-btn-height: 26px !default;
 $ribbon-rtl-overflow-item-btn-margin: 0 0 0 8px !default;
 $ribbon-overflow-btn-border-radius: 4px !default;
-$ribbon-overflow-header-height: 18px !default;
-$ribbon-overflow-header-padding: 3px 5px !default;
-$ribbon-overflow-header-weight: 600 !default;
+$ribbon-overflow-header-height: 28px !default;
+$ribbon-overflow-header-line-height: 18px !default;
+$ribbon-overflow-header-font-size: 14px !default;
+$ribbon-overflow-header-padding: 7px 0 7px 12px !default;
+$ribbon-rtl-overflow-header-padding: 7px 12px 7px 0 !default;
+$ribbon-overflow-header-weight: 500 !default;
 $ribbon-overflow-dropdown-btn-padding: 0 12px !default;
 $ribbon-overall-overflow-btn-position: 3px !default;
 $ribbon-dropdown-btn-padding: 0 12px !default;
@@ -62,8 +65,13 @@ $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
 $ribbon-items-btn-size: $text-xs !default;
+$ribbon-items-label-size: $text-sm !default;
+$ribbon-items-btn-icon-size: $text-lg !default;
+$ribbon-items-caret-icon-size: $text-lg !default;
 $ribbon-items-btn-padding: 0 !default;
 $ribbon-items-margin: 5px !default;
+$ribbon-checkbox-margin: 7px 0 7px 12px !default;
+$ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
 $ribbon-items-height: 18px !default;
 $ribbon-items-checkbox-size: $text-xs !default;
 $ribbon-items-checkbox-padding: 0 5px !default;
@@ -118,7 +126,33 @@ $ribbon-group-button-ddb-border-radius: 4px !default;
 $ribbon-group-button-padding: 0 5px 0 0 !default;
 $ribbon-group-button-ddb-border: 1px solid !default;
 $ribbon-groupbutton-header-padding: 3px !default;
-$ribbon-items-label: 28px !default;
+$ribbon-items-label: 34px !default;
+$ribbon-combobox-height: 30px !default;
+$ribbon-medium-item-height: 32px !default;
+$ribbon-button-icon-padding: 7px 8px 7px 12px !default;
+$ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
+$ribbon-caret-icon-padding: 0 12px !default;
+$ribbon-rtl-caret-icon-padding: 0 12px !default;
+$ribbon-gallery-items-padding: 15px 22px !default;
+$ribbon-gallery-popup-items-padding: 5px 0 !default;
+$ribbon-gallery-header-padding: 8px 0 4px !default;
+$ribbon-gallery-header-font-weight: 500 !default;
+$ribbon-gallery-header-line-height: 22px !default;
+$ribbon-gallery-header-fontsize: 14px !default;
+$ribbon-gallery-text-size: 14px !default;
+$ribbon-gallery-text-weight: 400 !default;
+$ribbon-gallery-text-line-height: 22px !default;
+$ribbon-gallery-simplified-items-padding: 2px 0 !default;
+$ribbon-gallery-popup-padding: 0 12px 12px !default;
+$ribbon-gallery-icons-size: 20px !default;
+$ribbon-gallery-icons-weight: $ribbon-gallery-text-weight !default;
+$ribbon-gallery-icons-height: 20px !default;
+$ribbon-gallery-items-width: 95px !default;
+$ribbon-gallery-simplified-items-width: 95px !default;
+$ribbon-gallery-popup-items-width: 73px !default;
+$ribbon-gallery-wrapper-height: 60px !default;
+$ribbon-gallery-simplified-wrapper-height: 26px !default;
+$ribbon-gallery-simplified-items-wrapper-height: 22px !default;
 
 $ribbon-bigger-content-height: 114px !default;
 $ribbon-bigger-group-overflow-content-height: 114px !default;
@@ -157,10 +191,14 @@ $ribbon-bigger-large-items-btn-height: 125% !default;
 $ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
+$ribbon-bigger-items-label-size: $text-base !default;
 $ribbon-bigger-items-height: 125% !default;
 $ribbon-bigger-items-icon-height: 20px !default;
 $ribbon-bigger-items-icon-size: $text-xl !default;
+$ribbon-bigger-items-btn-icon-size: $text-lg !default;
 $ribbon-bigger-items-margin: 7px !default;
+$ribbon-bigger-checkbox-margin: 9px 0 9px 16px !default;
+$ribbon-bigger-rtl-checkbox-margin: 9px 16px 9px 0 !default;
 $ribbon-bigger-items-checkbox-size: $text-sm !default;
 $ribbon-bigger-items-checkbox-padding: 0 7px !default;
 $ribbon-bigger-input-group-height: 34px !default;
@@ -177,6 +215,7 @@ $ribbon-bigger-dropdown-btn-size: $text-xs !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 2px !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-sm !default;
+$ribbon-bigger-dropdown-caret-icon-size: $text-lg !default;
 $ribbon-bigger-dropdown-caret-btn-height: 12px !default;
 $ribbon-bigger-caret-dropdown-btn-padding: 0 13px !default;
 $ribbon-bigger-color-picker-height: 20px !default;
@@ -199,7 +238,22 @@ $ribbon-bigger-group-button-icon-padding: 0 !default;
 $ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
 $ribbon-bigger-group-button-ddb-padding: 8px 12px 12px !default;
 $ribbon-bigger-group-button-padding: 0 7px 0 0 !default;
-$ribbon-bigger-items-label: 36px !default;
+$ribbon-bigger-items-label: 46px !default;
+$ribbon-bigger-gallery-popup-padding: 0 16px 16px !default;
+$ribbon-bigger-gallery-header-fontsize: 16px !default;
+$ribbon-bigger-gallery-header-line-height: 24px !default;
+$ribbon-bigger-gallery-header-padding: 12px 0 8px !default;
+$ribbon-bigger-overflow-header-line-height: 20px !default;
+$ribbon-bigger-overflow-header-height: 30px !default;
+$ribbon-bigger-combobox-height: 38px !default;
+$ribbon-bigger-medium-item-height: 36px !default;
+$ribbon-bigger-overflow-header-font-size: 16px !default;
+$ribbon-bigger-overflow-header-padding: 6px 0 6px 16px !default;
+$ribbon-bigger-rtl-overflow-header-padding: 6px 16px 6px 0 !default;
+$ribbon-bigger-button-icon-padding: 9px 12px 9px 16px !default;
+$ribbon-bigger-rtl-button-icon-padding: 9px 16px 9px 12px !default;
+$ribbon-bigger-caret-icon-padding: 0 12px !default;
+$ribbon-bigger-rtl-caret-icon-padding: 0 12px !default;
 
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-border-color: unset !default;
@@ -276,6 +330,7 @@ $ribbon-group-button-text-hover-color: $content-text-color-hover !default;
 $ribbon-group-button-active-background: $content-bg-color-selected !default;
 $ribbon-group-button-text-active-color: $content-text-color-selected !default;
 $ribbon-group-button-selected-background: $content-bg-color-selected !default;
+$ribbon-group-button-border-color: $secondary-border-color !default;
 $ribbon-group-button-dropdown-popup-border-color: $border-light !default;
 $ribbon-group-button-dropdown-popup-box-shadow: none !default;
 $ribbon-popup-common-bg-color: $content-bg-color !default;
@@ -283,3 +338,23 @@ $ribbon-popup-common-border-radius: 4px !default;
 $ribbon-popup-common-border-color: $border-light !default;
 $ribbon-popup-common-box-shadow: $shadow-lg !default;
 $ribbon-filemenu-popup-border-radius: 2px !default;
+$ribbon-contextual-tab-color: $ribbon-active-tab-indicator-color !default;
+$ribbon-contextual-tab-background: $transparent !default;
+$ribbon-keytip-background-color: $tooltip-bg-color !default;
+$ribbon-keytip-color: $toooltip-text-color !default;
+$ribbon-gallery-popup-background-color: $flyout-bg-color !default;
+$ribbon-gallery-item-background-color: $transparent !default;
+$ribbon-gallery-hover-background-color: $content-bg-color-hover !default;
+$ribbon-gallery-item-selected-color: $content-bg-color-selected !default;
+$ribbon-gallery-button-selected-color: $ribbon-gallery-item-selected-color !default;
+$ribbon-gallery-item-disabled-color: $transparent !default;
+$ribbon-gallery-item-focus-border-color: $flyout-bg-color !default;
+$ribbon-gallery-item-border-color: $cool-gray-300 !default;
+$ribbon-gallery-header-color: $ribbon-text-color !default;
+$ribbon-gallery-item-text-color: $ribbon-text-color !default;
+$ribbon-gallery-item-disabled-text-color: $content-text-color-disabled !default;
+$ribbon-gallery-icons-color: $ribbon-items-icon-color !default;
+$ribbon-gallery-item-disabled-icons-color: $icon-color-disabled !default;
+$ribbon-gallery-item-selected-text-color: $ribbon-text-color !default;
+$ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
+$ribbon-gallery-popup-box-shadow: $shadow-md !default;

package/styles/ribbon/_theme.scss

@@ -6,6 +6,15 @@
         border-color: $ribbon-border-color;
 
         .e-toolbar-item {
+          &.e-ribbon-contextual-tab {
+            background: $ribbon-contextual-tab-background;
+            .e-tab-wrap {
+              .e-tab-text {
+                color: $ribbon-contextual-tab-color;
+              }
+            }
+          }
+          
           .e-tab-wrap {
             .e-tab-text {
               color: $ribbon-text-color;
@@ -263,6 +272,10 @@
       }
     }
 
+    .e-ribbon-item:has(.e-ribbon-gallery-container) {
+      border-color: $ribbon-gallery-item-border-color;
+    }
+
     .e-ribbon-item,
     .e-ribbon-group-overflow,
     &.e-ribbon-overflow {
@@ -421,6 +434,59 @@
     }
   }
 
+  .e-ribbon-gallery-item {
+    background: $ribbon-gallery-item-background-color;
+    border-color: transparent;
+    &:hover {
+      background: $ribbon-gallery-hover-background-color;
+    }
+    &.e-ribbon-gallery-selected {
+      background: $ribbon-gallery-item-selected-color;
+      .e-ribbon-gallery-text {
+        color: $ribbon-gallery-item-selected-text-color;
+      }
+      .e-ribbon-gallery-icons {
+        color: $ribbon-gallery-item-selected-icons-color;
+      }
+    }
+    &.e-disabled {
+      background: $ribbon-gallery-item-disabled-color;
+      .e-ribbon-gallery-text {
+        color: $ribbon-gallery-item-disabled-text-color;
+      }
+      .e-ribbon-gallery-icons {
+        color: $ribbon-gallery-item-disabled-icons-color;
+      }
+    }
+    &:focus,
+    &:focus-visible {
+      border-color: $ribbon-gallery-item-focus-border-color;
+    }
+    .e-ribbon-gallery-text {
+      color: $ribbon-gallery-item-text-color;
+    }
+    .e-ribbon-gallery-icons {
+      color: $ribbon-gallery-icons-color;
+    }
+  }
+
+  .e-ribbon-gallery-button {
+    border-color: $ribbon-gallery-item-border-color;
+    &.e-gallery-button-active {
+      background: $ribbon-gallery-button-selected-color;
+    }
+  }
+
+  .e-ribbon-gallery-popup.e-popup,
+  .e-dropdown-popup.e-ribbon-gallery-dropdown {
+    background: $ribbon-gallery-popup-background-color;
+    box-shadow: $ribbon-gallery-popup-box-shadow;
+
+    .e-ribbon-gallery-header {
+      color: $ribbon-gallery-header-color;
+    }
+  }
+
   .e-dropdown-popup.e-ribbon-dropdown-group-button {
     .e-btn-icon {
       color: $ribbon-items-icon-color;
@@ -473,6 +539,11 @@
     }
   }
 
+  .e-ribbon-keytip {
+    background-color: $ribbon-keytip-background-color;
+    color: $ribbon-keytip-color;
+  }
+
   .e-ribbon-menu {
 
     &.e-menu-wrapper,