@syncfusion/ej2-ribbon 28.2.3 → 29.1.33

package/styles/ribbon/_layout.scss

@@ -88,6 +88,11 @@
   
       .e-ribbon-skeleton {
         border-radius: 4px;
+
+        @if ($skin-name == 'highcontrast-light' or $skin-name == 'highcontrast') {
+          border-radius: 0;
+          border: 1px solid;
+        }
       }
   
       .e-ribbon-overlay {
@@ -146,6 +151,7 @@
         height: $ribbon-help-template-height;
         padding-right: $ribbon-help-template-padding;
         border-bottom: $ribbon-help-template-border;
+        z-index: 1;
       }
 
       .e-tab-header {
@@ -508,6 +514,11 @@
         padding-left: 30px;
       }
     }
+    .e-ribbon-content-height {
+      .e-ribbon-collection {
+        max-height: $ribbon-group-content-height;
+      }
+    }
   }
 
   .e-ribbon-backstage-popup {
@@ -552,6 +563,16 @@
         &:focus:hover {
           @include ribbon-backstage-border($ribbon-backstage-btn-focus-border);
         }
+        @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+          @include ribbon-backstage-border(2px);
+        }
+        &:focus,
+        &:hover,
+        &:focus:hover {
+          @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+            @include ribbon-backstage-border(2px);
+          }
+        }
       }
 
       .e-ribbon-backstage-menu {
@@ -583,7 +604,17 @@
             &.e-selected:focus {
               @include ribbon-backstage-border($ribbon-backstage-menu-hover-border);
             }
-
+            @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+              @include ribbon-backstage-border(2px);
+            }
+            &:focus,
+            &.e-selected,
+            &:hover,
+            &.e-selected:focus {
+              @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+                @include ribbon-backstage-border(2px);
+              }
+            }
             .e-menu-icon {
               @include ribbon-font-props($ribbon-backstage-menu-icon-font-size, $ribbon-backstage-menu-icon-line-height);
               @include ribbon-items-icon-images($ribbon-backstage-menu-icon-font-size);
@@ -630,7 +661,6 @@
       input.e-input {
         @include ribbon-font-styles($ribbon-input-size, $ribbon-input-weight, $ribbon-input-height);
         @include ribbon-items-height(auto, auto);
-        padding: $ribbon-input-padding;
       }
 
       &.e-control-wrapper {
@@ -744,17 +774,18 @@
       &.e-hidden {
         display: none;
       }
+      &:not(:has(.e-ribbon-template)) {
+        .e-btn {
+          border: $ribbon-items-border;
+          border-radius: $ribbon-items-border-radius;
+          font-weight: $ribbon-items-font-weight;
+          font-size: $ribbon-items-btn-size;
+          text-transform: none;
+          box-shadow: none;
 
-      .e-btn {
-        border: $ribbon-items-border;
-        border-radius: $ribbon-items-border-radius;
-        font-weight: $ribbon-items-font-weight;
-        font-size: $ribbon-items-btn-size;
-        text-transform: none;
-        box-shadow: none;
-
-        &:focus {
-          outline: none;
+          &:focus {
+            outline: none;
+          }
         }
       }
 
@@ -763,7 +794,7 @@
         border: $ribbon-items-border;
       }
 
-      &.e-ribbon-large-item {
+      &.e-ribbon-large-item:not(:has(.e-ribbon-template)) {
         .e-btn {
           @include ribbon-items-height(100%, inherit);
           @include ribbon-display(flex, column);
@@ -816,7 +847,7 @@
       padding: $ribbon-group-overflow-padding;
     }
 
-    .e-ribbon-item {
+    .e-ribbon-item:not(:has(.e-ribbon-template)) {
       min-height: 33%;
       padding: $ribbon-items-padding;
 
@@ -842,6 +873,7 @@
 
         .e-label {
           font-size: $ribbon-items-checkbox-size;
+          font-weight: $ribbon-text-font-weight;
         }
       }
 
@@ -959,12 +991,17 @@
       }
     }
 
-    &:not(.e-rtl) .e-ribbon-item {
+    &:not(.e-rtl) .e-ribbon-item:not(:has(.e-ribbon-template)) {
       @include ribbon-item-padding($ribbon-items-btn-padding, 0 2px 0 0);
     }
 
-    &.e-rtl .e-ribbon-item {
+    &.e-rtl .e-ribbon-item:not(:has(.e-ribbon-template)) {
       @include ribbon-item-padding($ribbon-items-btn-rtl-padding, 0 0 0 2px);
+
+      .e-ribbon-gallery-button {
+        border-width: 0 1px 0 0;
+        border-radius: 4px 0 0 4px;
+      }
     }
   }
 
@@ -984,7 +1021,7 @@
         border: 0;
       }
       @if ($skin-name == 'fluent2') {
-        .e-ribbon-item.e-ribbon-medium-item .e-dropdown-btn.e-btn {
+        .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-ribbon-template)) .e-dropdown-btn.e-btn {
           padding: 0;
         }
       }
@@ -1042,7 +1079,7 @@
         .e-ribbon-template {
           margin: $ribbon-overflow-wrapper-item-margin;
         }
-        .e-btn .e-btn-icon {
+        &:not(:has(.e-ribbon-template)) .e-btn .e-btn-icon {
           font-size: $ribbon-items-btn-icon-size;
         }
       }
@@ -1056,32 +1093,33 @@
         padding: $ribbon-overflow-item-padding;
         width: 100%;
         height: $ribbon-medium-item-height;
-
-        .e-btn .e-btn-icon {
-          &:not(.e-caret) {
-            min-width: $ribbon-overflow-items-min-width-height;
-            min-height: $ribbon-overflow-items-min-width-height;
+        &:not(:has(.e-ribbon-template)) {
+          .e-btn .e-btn-icon {
+            &:not(.e-caret) {
+              min-width: $ribbon-overflow-items-min-width-height;
+              min-height: $ribbon-overflow-items-min-width-height;
+            }
           }
-        }
 
-        .e-btn .e-btn-icon.e-icon-left {
-          margin: 0;
-        }
+          .e-btn .e-btn-icon.e-icon-left {
+            margin: 0;
+          }
 
-        > .e-split-btn-wrapper .e-btn,
-        > .e-btn {
-          line-height: $ribbon-overflow-item-btn-height;
-          overflow: hidden;
-        }
+          > .e-split-btn-wrapper .e-btn,
+          > .e-btn {
+            line-height: $ribbon-overflow-item-btn-height;
+            overflow: hidden;
+          }
 
-        >.e-split-btn-wrapper {
-          width: inherit;
-        }
+          >.e-split-btn-wrapper {
+            width: inherit;
+          }
 
-        >.e-split-btn-wrapper .e-split-btn,
-        >.e-btn {
-          width: 100%;
-          justify-content: flex-start;
+          >.e-split-btn-wrapper .e-split-btn,
+          >.e-btn {
+            width: 100%;
+            justify-content: flex-start;
+          }
         }
       }
 
@@ -1094,7 +1132,7 @@
   }
 
   .e-ribbon-group-overflow-ddb:not(.e-rtl) {
-    .e-ribbon-overflow-target .e-ribbon-item {
+    .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-template)) {
       @if ($skin-name == 'fluent2') {
         &.e-ribbon-medium-item .e-btn {
           &:not(.e-icon-btn, .e-dropdown-btn) {
@@ -1142,7 +1180,7 @@
       .e-ribbon-overflow-header {
         padding: $ribbon-rtl-overflow-header-padding;
       }
-      .e-ribbon-item {
+      .e-ribbon-item:not(:has(.e-ribbon-template)) {
         @if ($skin-name == 'fluent2') {
           &.e-ribbon-medium-item .e-btn {
             &:not(.e-icon-btn, .e-dropdown-btn) {
@@ -1182,7 +1220,7 @@
           }
         }
       }
-      .e-ribbon-item > .e-checkbox-wrapper {
+      .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
         margin: $ribbon-rtl-checkbox-margin;
       }
     }
@@ -1360,23 +1398,27 @@
   .e-ribbon-menu {
     display: block;
 
-    &.e-menu-wrapper ul.e-vertical,
-    &.e-menu-wrapper ul.e-ul {
-      &.e-menu {
-        border: $ribbon-menu-border;
-        border-radius: $ribbon-menu-border-radius;
-      }
-
-      .e-menu-item {
-        border-radius: unset;
-
-        .e-menu-icon {
-          @include ribbon-items-icon-images($ribbon-file-menu-min-width-height);
-          width: auto;
+    &.e-menu-wrapper,
+    &.e-menu-container {
+      ul.e-vertical,
+      ul.e-ul {
+        &.e-menu {
+          padding: $filemenu-popup-padding;
+          border: $ribbon-menu-border;
+          border-radius: $ribbon-menu-border-radius;
         }
-
-        &.e-blankicon {
-          padding-left: $ribbon-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+  
+        .e-menu-item {
+          border-radius: unset;
+          font-weight: $ribbon-text-font-weight;
+          .e-menu-icon {
+            @include ribbon-items-icon-images($ribbon-file-menu-min-width-height);
+            width: auto;
+          }
+  
+          &.e-blankicon {
+            padding-left: $ribbon-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+          }
         }
       }
     }

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

@@ -37,7 +37,7 @@ $ribbon-overflow-btn-padding: 0 !default;
 $ribbon-overflow-btn-margin: 0 !default;
 $ribbon-overflow-collapse-btn-right: 25px !default;
 $ribbon-overflow-item-padding: 0 !default;
-$ribbon-overflow-wrapper-item-margin: 7px 8px !default;
+$ribbon-overflow-wrapper-item-margin: 3px 8px !default;
 $ribbon-overflow-item-btn-height: 12px !default;
 $ribbon-overflow-btn-height: 32px !default;
 $ribbon-overflow-btn-border-radius: unset !default;
@@ -199,7 +199,7 @@ $ribbon-bigger-overflow-btn-icon-padding: 8px !default;
 $ribbon-bigger-overflow-collapse-btn-right: 28px !default;
 $ribbon-bigger-overall-overflow-btn-height: 36px !default;
 $ribbon-bigger-overall-overflow-btn-position: 8px !default;
-$ribbon-bigger-overflow-wrapper-item-margin: 7px 8px !default;
+$ribbon-bigger-overflow-wrapper-item-margin: 3px 8px !default;
 $ribbon-bigger-group-header-padding: 11px 11px 4px !default;
 $ribbon-bigger-group-header-height: 18px !default;
 $ribbon-bigger-group-header-font-size: 12px !default;
@@ -290,7 +290,12 @@ $ribbon-bigger-keytip-font-size: 14px !default;
 $ribbon-bigger-keytip-line-height: 18px !default;
 $ribbon-bigger-keytip-height: 20px !default;
 $ribbon-bigger-keytip-min-width: 20px !default;
+$ribbon-text-font-weight: 400 !default;
+$filemenu-popup-padding: 0 !default;
+$filemenu-popup-bigger-padding: 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: 0 .6px 1.8px 0 rgba(0, 0, 0, .1), 0 3.2px 7.2px 0 rgba(0, 0, 0, .13) !default;
 $ribbon-header-bg-color: $grey-900 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: $grey-600 !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
-$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(117, 117, 117) 28%, rgba(255, 255, 255, 0) 42%) !default;
-$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $grey-700 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $grey-800 !default;

package/styles/ribbon/_material-definition.scss

@@ -290,7 +290,12 @@ $ribbon-bigger-keytip-font-size: 14px !default;
 $ribbon-bigger-keytip-line-height: 18px !default;
 $ribbon-bigger-keytip-height: 20px !default;
 $ribbon-bigger-keytip-min-width: 20px !default;
+$ribbon-text-font-weight: 400 !default;
+$filemenu-popup-padding: 0 !default;
+$filemenu-popup-bigger-padding: 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: 0 .6px 1.8px 0 rgba(0, 0, 0, .1), 0 3.2px 7.2px 0 rgba(0, 0, 0, .13) !default;
 $ribbon-header-bg-color: $grey-50 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: $grey-300 !default;
@@ -406,5 +411,5 @@ $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;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
-$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(189, 189, 189) 28%, rgba(255, 255, 255, 0) 42%) !default;
-$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $grey-300 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $grey-200 !default;

package/styles/ribbon/_material3-definition.scss

@@ -290,7 +290,12 @@ $ribbon-bigger-keytip-font-size: 14px !default;
 $ribbon-bigger-keytip-line-height: 18px !default;
 $ribbon-bigger-keytip-height: 20px !default;
 $ribbon-bigger-keytip-min-width: 20px !default;
+$ribbon-text-font-weight: 400 !default;
+$filemenu-popup-padding: 4px 0 !default;
+$filemenu-popup-bigger-padding: 4px 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: $shadow-md !default;
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: unset !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: $shadow-sm !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
-$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 33%, rgba($primary-container, .5) 51%, rgba(255, 255, 255, 0) 70%) !default;
-$ribbon-skeleton-bg-color: rgba($surface) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba($white, .3) 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $content-bg-color-alt3 !default;

package/styles/ribbon/_tailwind-definition.scss

@@ -290,7 +290,12 @@ $ribbon-bigger-keytip-font-size: 14px !default;
 $ribbon-bigger-keytip-line-height: 18px !default;
 $ribbon-bigger-keytip-height: 20px !default;
 $ribbon-bigger-keytip-min-width: 20px !default;
+$ribbon-text-font-weight: 400 !default;
+$filemenu-popup-padding: 4px 0 !default;
+$filemenu-popup-bigger-padding: 4px 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: $shadow-lg !default;
 $ribbon-header-bg-color: $content-bg-color-alt2 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: unset !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: $shadow-md !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
-$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 39%, $content-bg-color-alt1 53%, rgba(255, 255, 255, 0) 67%) !default;
-$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba($white, .3) 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $content-bg-color-alt3 !default;

package/styles/ribbon/_tailwind3-definition.scss

@@ -289,7 +289,12 @@ $ribbon-bigger-keytip-font-size: 16px !default;
 $ribbon-bigger-keytip-line-height: 24px !default;
 $ribbon-bigger-keytip-height: 24px !default;
 $ribbon-bigger-keytip-min-width: 24px !default;
+$ribbon-text-font-weight: 400 !default;
+$filemenu-popup-padding: 4px 0 !default;
+$filemenu-popup-bigger-padding: 6px 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: $shadow-lg !default;
 $ribbon-header-bg-color: $content-bg-color-alt1 !default;
 $ribbon-tab-background-color: $content-bg-color-alt1 !default;
 $ribbon-border-color: unset !default;
@@ -330,14 +335,14 @@ $ribbon-menu-items-background-color: $transparent !default;
 $ribbon-hscroll-border-color: $border !default;
 $ribbon-hscroll-color: $icon-color !default;
 $ribbon-hscroll-background-color: $content-bg-color-alt1 !default;
-$ribbon-hscroll-hover-border-color: $content-bg-color-focus !default;
-$ribbon-hscroll-hover-background-color: $secondary-bg-color-pressed !default;
+$ribbon-hscroll-hover-border-color: $ribbon-hscroll-border-color !default;
+$ribbon-hscroll-hover-background-color: $content-bg-color-pressed !default;
 $ribbon-hscroll-hover-color: $icon-color !default;
-$ribbon-hscroll-active-border-color: $content-bg-color-focus !default;
-$ribbon-hscroll-active-background-color: $secondary-bg-color-pressed !default;
+$ribbon-hscroll-active-border-color: $ribbon-hscroll-border-color !default;
+$ribbon-hscroll-active-background-color: $content-bg-color-pressed !default;
 $ribbon-hscroll-active-color: $icon-color !default;
-$ribbon-hscroll-focus-border-color: $content-bg-color-focus !default;
-$ribbon-hscroll-focus-background-color: $secondary-bg-color-focus !default;
+$ribbon-hscroll-focus-border-color: $ribbon-hscroll-border-color !default;
+$ribbon-hscroll-focus-background-color: $content-bg-color-pressed !default;
 $ribbon-hscroll-focus-color: $icon-color !default;
 $ribbon-tooltip-background-color: $tooltip-bg-color !default;
 $ribbon-tooltip-text-color: $tooltip-text-color !default;
@@ -405,5 +410,5 @@ $ribbon-gallery-item-selected-icons-color: $icon-color !default;
 $ribbon-gallery-popup-box-shadow: $shadow-md !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
-$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, $content-bg-color-alt2 53%, rgba(255, 255, 255, 0) 67%) !default;
-$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba($white, .25) 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $content-bg-color-alt3 !default;

package/styles/ribbon/_theme.scss

@@ -37,10 +37,18 @@
         .e-ribbon-skeleton {
           &.e-skeleton.e-skeleton-text {
             background-color: $ribbon-skeleton-bg-color;
+
+            @if ($skin-name == 'highcontrast-light' or $skin-name == 'highcontrast') {
+              border-color: $bg-base-100;
+            }
           }
 
           &.e-skeleton.e-shimmer-wave::after {
             background-image: $ribbon-skeleton-wave-color;
+
+            @if ($theme-name == 'fluent2-highcontrast') {
+              background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $content-bg-color-alt6 50%, rgba(255, 255, 255, 0) 70%);
+            }
           }
         }
       }
@@ -213,7 +221,7 @@
           }
 
           &.e-selected,
-          &:hover {
+          &.e-focused {
             @include ribbon-colors($ribbon-backstage-menu-active-bg-color, $ribbon-backstage-menu-items-active-color, $ribbon-backstage-menu-active-border-color);
 
             .e-menu-icon {
@@ -281,39 +289,45 @@
     .e-ribbon-item,
     .e-ribbon-group-overflow,
     &.e-ribbon-overflow {
-      .e-btn:not(.e-ribbon-file-menu),
-      .e-btn-group .e-btn.e-ribbon-group-button,
-      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
-      .e-ribbon-group-of-btn {
-        @include ribbon-colors($ribbon-items-background-color, $ribbon-text-color, transparent);
-        @include ribbon-button-icon-color($ribbon-items-icon-color);
+      &:not(:has(.e-ribbon-template)) {
+        .e-btn:not(.e-ribbon-file-menu),
+        .e-btn-group .e-btn.e-ribbon-group-button,
+        .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
+        .e-ribbon-group-of-btn {
+          @include ribbon-colors($ribbon-items-background-color, $ribbon-text-color, transparent);
+          @include ribbon-button-icon-color($ribbon-items-icon-color);
 
-        &:hover {
-          @include ribbon-colors($ribbon-items-hover-background-color, $ribbon-items-text-hover-color, $ribbon-items-hover-border-color);
-          @include ribbon-button-icon-color($ribbon-items-hover-color);
-        }
+          &:hover {
+            @include ribbon-colors($ribbon-items-hover-background-color, $ribbon-items-text-hover-color, $ribbon-items-hover-border-color);
+            @include ribbon-button-icon-color($ribbon-items-hover-color);
+          }
 
-        &.e-active {
-          background: $ribbon-items-active-background-color;
-          color: $ribbon-items-text-active-color;
-          @include ribbon-button-icon-color($ribbon-items-active-color);
-        }
+          &.e-active {
+            background: $ribbon-items-active-background-color;
+            color: $ribbon-items-text-active-color;
+            @include ribbon-button-icon-color($ribbon-items-active-color);
+          }
 
-        &:active {
-          background: $ribbon-items-pressed-background-color;
-          color: $ribbon-items-text-active-color;
-          @include ribbon-button-icon-color($ribbon-items-active-color);
-        }
+          &:active {
+            background: $ribbon-items-pressed-background-color;
+            color: $ribbon-items-text-active-color;
+            @include ribbon-button-icon-color($ribbon-items-active-color);
+          }
 
-        &:focus-visible {
-          @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-text-focus-color, $ribbon-items-focus-border-color);
-          @include ribbon-button-icon-color($ribbon-items-focus-color);
-          box-shadow: $ribbon-items-focus-box-shadow;
-        }
+          &:focus-visible {
+            @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-text-focus-color, $ribbon-items-focus-border-color);
+            @include ribbon-button-icon-color($ribbon-items-focus-color);
+            & {
+              box-shadow: $ribbon-items-focus-box-shadow;
+            }
+          }
 
-        &:disabled {
-          @include ribbon-button-icon-color($ribbon-items-disabled-color);
-          color: $ribbon-items-disabled-color;
+          &:disabled {
+            @include ribbon-button-icon-color($ribbon-items-disabled-color);
+            & {
+              color: $ribbon-items-disabled-color;
+            }
+          }
         }
       }
     }
@@ -385,10 +399,12 @@
       box-shadow: $ribbon-popup-common-box-shadow;
       border-color: $ribbon-popup-common-border-color;
 
-      .e-btn:not(.e-ribbon-file-menu),
+      .e-ribbon-item:not(:has(.e-ribbon-template)) .e-btn:not(.e-ribbon-file-menu),
       .e-btn-group .e-btn.e-ribbon-group-button,
       .e-ribbon-group-of-btn {
-        background: transparent;
+        &:not(:hover, :active, :focus-visible, :disabled, .e-active) {
+          background: transparent;
+        }
       }
     }
   }
@@ -473,7 +489,9 @@
       &.e-icon-btn:active,
       &:active {
         @include ribbon-button-icon-color($ribbon-group-button-icon-active-color);
-        background: $ribbon-group-button-pressed-background;
+        & {
+          background: $ribbon-group-button-pressed-background;
+        }
       }
     }
   }
@@ -497,6 +515,10 @@
     color: $ribbon-keytip-color;
   }
 
+  .e-ribbon-group-overflow-ddb.e-dropdown-popup {
+    box-shadow: $ribbon-grp-overflow-popup-box-shadow;
+    border: 1px solid $ribbon-grp-overflow-border-color;
+  }
   .e-ribbon-menu {
     &.e-menu-wrapper,
     &.e-menu-container {
@@ -505,27 +527,62 @@
       }
     }
 
-    &.e-menu-wrapper ul.e-vertical,
-    &.e-menu-wrapper ul.e-ul {
-      &.e-menu {
-        border-color: $ribbon-menu-border-color;
-        background: $ribbon-menu-items-background-color;
+    &.e-menu-wrapper,
+    &.e-menu-container {
+      ul.e-vertical,
+      ul.e-ul {
+        &.e-menu {
+          border-color: $ribbon-menu-border-color;
+          background: $ribbon-menu-items-background-color;
+        }
+  
+        .e-menu-item {
+          color: $ribbon-text-color;
+  
+          .e-menu-icon,
+          .e-caret {
+            color: $ribbon-menu-items-icon-color;
+          }
+  
+          &.e-focused {
+            background: $ribbon-menu-hover-background-color;
+            color: $ribbon-menu-items-color;
+            @if ($skin-name == 'fluent2') {
+              .e-menu-icon {
+                color: $ribbon-menu-items-color;
+              }
+            }
+          }
+        }
       }
-
-      .e-menu-item {
-        color: $ribbon-text-color;
-
-        .e-menu-icon,
-        .e-caret {
-          color: $ribbon-menu-items-icon-color;
+    }
+  }
+  .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper {
+    .e-btn {
+      @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+        @include ribbon-colors($ribbon-backstage-btn-bg-color, $ribbon-backstage-btn-color, transparent);
+      }
+      &:hover {
+        @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+          @include ribbon-colors($ribbon-backstage-btn-hover-bg-color, $ribbon-backstage-btn-hover-color, transparent);
         }
-
-        &.e-focused {
-          background: $ribbon-menu-hover-background-color;
-          color: $ribbon-menu-items-color;
-          @if ($skin-name == 'fluent2') {
-            .e-menu-icon {
-              color: $ribbon-menu-items-color;
+      }
+    }
+    .e-ribbon-backstage-menu {
+      &.e-menu-wrapper ul.e-vertical,
+      &.e-menu-wrapper ul.e-ul {
+        .e-menu-item {
+          @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+            @include ribbon-colors($ribbon-backstage-btn-bg-color, $ribbon-backstage-btn-color, transparent);
+          }
+          &.e-focused {
+            @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+              @include ribbon-colors($ribbon-backstage-menu-active-bg-color, $ribbon-backstage-menu-items-active-color, transparent);
+            }
+          }
+          &.e-separator {
+            @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
+              background: $ribbon-backstage-separator-color;
             }
           }
         }