@syncfusion/ej2-ribbon 28.2.3 → 29.1.34

package/styles/ribbon/_bds-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: 6px 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !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, transparent 15%, rgb(248, 249, 250) 38%, transparent 60%) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, transparent 20%, $content-bg-color-alt3 50%, transparent 70%) !default;
 $ribbon-skeleton-bg-color: $content-bg-color-alt2 !default;

package/styles/ribbon/_bigger.scss

@@ -64,6 +64,13 @@
           height: $ribbon-bigger-toolbar-items-height;
         }
       }
+
+      &.e-tab {
+        &.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus,
+        .e-tab-header .e-toolbar-item .e-text-wrap {
+          height: auto;
+        }
+      }
     }
 
     &.e-ribbon-collapsible {
@@ -129,6 +136,11 @@
         }
       }
     }
+    .e-ribbon-content-height {
+      .e-ribbon-collection {
+        max-height: $ribbon-bigger-content-height;
+      }
+    }
   }
 
   .e-bigger.e-ribbon.e-rbn,
@@ -143,24 +155,28 @@
     @if ($skin-name == 'fluent2') {
       &:not(.e-rtl) .e-ribbon-medium-item,
       &:not(.e-rtl) .e-ribbon-small-item {
-        .e-btn {
-          &:not(.e-icon-btn, .e-dropdown-btn) {
-            padding: 0 12px 0 1px;
+        &:not(:has(.e-ribbon-template)) {
+          .e-btn {
+            &:not(.e-icon-btn, .e-dropdown-btn) {
+              padding: 0 12px 0 1px;
+            }
+          }
+          .e-dropdown-btn.e-btn {
+            padding: 0 4px 0 1px;
           }
-        }
-        .e-dropdown-btn.e-btn {
-          padding: 0 4px 0 1px;
         }
       }
       &.e-rtl .e-ribbon-medium-item,
       &.e-rtl .e-ribbon-small-item {
-        .e-btn {
-          &:not(.e-icon-btn, .e-dropdown-btn) {
-            padding: 0 1px 0 12px;
+        &:not(:has(.e-ribbon-template)) {
+          .e-btn {
+            &:not(.e-icon-btn, .e-dropdown-btn) {
+              padding: 0 1px 0 12px;
+            }
+          }
+          .e-dropdown-btn.e-btn {
+            padding: 0 1px 0 4px;
           }
-        }
-        .e-dropdown-btn.e-btn {
-          padding: 0 1px 0 4px;
         }
       }
     }
@@ -205,7 +221,6 @@
 
       input.e-input {
         @include ribbon-font-props($ribbon-bigger-input-items-size, $ribbon-bigger-input-items-height);
-        padding: $ribbon-bigger-input-padding;
         height: auto;
       }
 
@@ -234,7 +249,7 @@
     }
 
     .e-ribbon-group-overflow,
-    .e-ribbon-item {
+    .e-ribbon-item:not(:has(.e-ribbon-template)) {
       &.e-ribbon-large-item {
         .e-btn {
           @include ribbon-font-props($ribbon-bigger-large-items-btn-size, $ribbon-bigger-large-items-btn-height);
@@ -317,40 +332,41 @@
       }
 
       .e-ribbon-item {
-        .e-dropdown-btn .e-caret {
-          font-size: $ribbon-bigger-dropdown-caret-icon-size;
-        }
-        .e-input-group {
-          height: $ribbon-bigger-combobox-height;
-        }
         &.e-ribbon-medium-item {
           height: $ribbon-bigger-medium-item-height;
         }
-        .e-btn .e-btn-icon {
-          font-size: $ribbon-bigger-items-btn-icon-size;
-          &:not(.e-caret) {
-            min-width: $ribbon-bigger-overflow-items-min-width-height;
-            min-height: $ribbon-bigger-overflow-items-min-width-height;
+        &:not(:has(.e-ribbon-template)) {
+          .e-dropdown-btn .e-caret {
+            font-size: $ribbon-bigger-dropdown-caret-icon-size;
           }
-          &.e-icon-left {
-            margin: 0;
+          .e-input-group {
+            height: $ribbon-bigger-combobox-height;
+          }
+          .e-btn .e-btn-icon {
+            font-size: $ribbon-bigger-items-btn-icon-size;
+            &:not(.e-caret) {
+              min-width: $ribbon-bigger-overflow-items-min-width-height;
+              min-height: $ribbon-bigger-overflow-items-min-width-height;
+            }
+            &.e-icon-left {
+              margin: 0;
+            }
+          }
+          &:has(.e-colorpicker-wrapper) {
+            align-items: center;
+          }
+          .e-ribbon-combobox-label,
+          .e-ribbon-colorpicker-label {
+            font-size: $ribbon-bigger-items-label-size;
           }
-        }
-        &:has(.e-colorpicker-wrapper) {
-          align-items: center;
-        }
-        .e-ribbon-combobox-label,
-        .e-ribbon-colorpicker-label {
-          font-size: $ribbon-bigger-items-label-size;
-        }
 
-        & > .e-input-group,
-        .e-ribbon-template {
-          margin: $ribbon-bigger-overflow-wrapper-item-margin;
+          & > .e-input-group,
+          .e-ribbon-template {
+            margin: $ribbon-bigger-overflow-wrapper-item-margin;
+          }
         }
       }
-
-      .e-ribbon-item > .e-checkbox-wrapper {
+      .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
         margin: $ribbon-bigger-checkbox-margin;
         padding: 0;
       }
@@ -360,7 +376,7 @@
       .e-ribbon-overflow-header {
         padding: $ribbon-bigger-overflow-header-padding;
       }
-      .e-ribbon-item {
+      .e-ribbon-item:not(:has(.e-ribbon-template)) {
         .e-ribbon-combobox-label,
         .e-ribbon-colorpicker-label {
           margin-left: $ribbon-bigger-items-label;
@@ -372,7 +388,7 @@
           }
           
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
-            &:not(:has(.e-btn-icon.e-icon-left)) {
+            &:not(:has(.e-btn-icon)) {
               padding-left: $ribbon-bigger-items-label;
             }
           }
@@ -396,7 +412,7 @@
       .e-ribbon-overflow-header {
         padding: $ribbon-bigger-rtl-overflow-header-padding;
       }
-      .e-ribbon-item {
+      .e-ribbon-item:not(:has(.e-ribbon-template)) {
         .e-ribbon-combobox-label,
         .e-ribbon-colorpicker-label {
           margin-right: $ribbon-bigger-items-label;
@@ -408,7 +424,7 @@
           }
             
           &:not(:has(.e-colorpicker-wrapper)) .e-btn {
-            &:not(:has(.e-btn-icon.e-icon-left)) {
+            &:not(:has(.e-btn-icon)) {
               padding-right: $ribbon-bigger-items-label;
             }
           }
@@ -426,7 +442,7 @@
           }
         }
       }
-      .e-ribbon-item > .e-checkbox-wrapper {
+      .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
         margin: $ribbon-bigger-rtl-checkbox-margin;
       }
     }
@@ -443,17 +459,24 @@
     }
   }
 
-  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical,
-  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical,
-  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul,
-  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-ul {
-    .e-menu-item {
-      &.e-blankicon {
-        padding-left: $ribbon-bigger-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
-      }
-      .e-menu-icon {
-        min-width: $ribbon-bigger-file-menu-min-width-height;
-        min-height: $ribbon-bigger-file-menu-min-width-height;
+  .e-bigger .e-ribbon-menu,
+  .e-bigger.e-ribbon-menu {
+    &.e-menu-wrapper,
+    &.e-menu-container {
+      ul.e-vertical,
+      ul.e-ul {
+        &.e-menu {
+          padding: $filemenu-popup-bigger-padding;
+        }
+        .e-menu-item {
+          &.e-blankicon {
+            padding-left: $ribbon-bigger-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
+          }
+          .e-menu-icon {
+            min-width: $ribbon-bigger-file-menu-min-width-height;
+            min-height: $ribbon-bigger-file-menu-min-width-height;
+          }
+        }
       }
     }
   }

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $ribbon-border: none !default;
 $ribbon-border-radius: unset !default;
 $ribbon-disabled-opacity: .35 !default;
@@ -290,7 +292,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: $grey-44 !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !default;
 $ribbon-header-bg-color: $gray-darker !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: unset !default;
@@ -317,7 +324,7 @@ $ribbon-collapse-btn-background: $gray-darker !default;
 $ribbon-text-color: $grey-dark-font !default;
 $ribbon-tab-text-color: $ribbon-text-color !default;
 $ribbon-tab-text-focus-color: $grey-dark-font !default;
-$ribbon-tab-text-hover-color: lighten($brand-primary, 10%) !default;
+$ribbon-tab-text-hover-color: color.adjust($brand-primary, $lightness: 10%) !default;
 $ribbon-active-tab-color: $brand-primary-lighten-10 !default;
 $ribbon-active-tab-indicator-color: $brand-primary-lighten-10 !default;
 $ribbon-active-file-menu-color: $brand-primary-font !default;
@@ -406,5 +413,5 @@ $ribbon-gallery-item-selected-icons-color: $brand-primary-font !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !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(80, 80, 80) 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-88 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $gray-dark !default;

package/styles/ribbon/_bootstrap-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: $grey-dd !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !default;
 $ribbon-header-bg-color: $grey-f8 !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: $grey-white !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !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(245, 245, 245) 38%, rgba(255, 255, 255, 0) 60%) !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-dd 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $grey-lighter !default;

package/styles/ribbon/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $ribbon-border: none !default;
 $ribbon-border-radius: unset !default;
 $ribbon-disabled-opacity: .35 !default;
@@ -290,7 +292,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: $gray-300 !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !default;
 $ribbon-header-bg-color: $gray-100 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: unset !default;
@@ -316,8 +323,8 @@ $ribbon-items-disabled-color: $gray-600 !default;
 $ribbon-collapse-btn-background: $gray-100 !default;
 $ribbon-text-color: $gray-900 !default;
 $ribbon-tab-text-color: $ribbon-text-color !default;
-$ribbon-tab-text-focus-color: darken($primary, 15%) !default;
-$ribbon-tab-text-hover-color: darken($primary, 15%) !default;
+$ribbon-tab-text-focus-color: color.adjust($primary, $lightness: -15%) !default;
+$ribbon-tab-text-hover-color: color.adjust($primary, $lightness: -15%) !default;
 $ribbon-active-tab-color: $primary !default;
 $ribbon-active-tab-indicator-color: $primary !default;
 $ribbon-active-file-menu-color: $content-bg !default;
@@ -368,7 +375,7 @@ $ribbon-backstage-close-btn-font-weight: 400 !default;
 $ribbon-group-button-dropdown-popup-background: $white !default;
 $ribbon-group-button-icon-hover-color: $gray-700 !default;
 $ribbon-group-button-icon-active-color: $ribbon-items-active-color !default;
-$ribbon-group-button-hover-background: darken($gray-100, 2%) !default;
+$ribbon-group-button-hover-background: color.adjust($gray-100, $lightness: -2%) !default;
 $ribbon-group-button-text-hover-color: $gray-900 !default;
 $ribbon-group-button-active-background: $gray-600 !default;
 $ribbon-group-button-text-active-color: $gray-100 !default;
@@ -406,5 +413,5 @@ $ribbon-gallery-item-selected-icons-color: $white !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($black, .175) !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%, $gray-500 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%, $gray-300 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $gray-200 !default;

package/styles/ribbon/_bootstrap5-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: $border-light !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !default;
 $ribbon-header-bg-color: $content-bg-color-alt1 !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: $primary-text-color !default;
 $ribbon-gallery-popup-box-shadow: $shadow-lg !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%, $content-bg-color-alt1 38%, rgba(255, 255, 255, 0) 60%) !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-alt2 !default;

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

@@ -199,7 +199,7 @@ $ribbon-bigger-overflow-btn-icon-padding: 10px !default;
 $ribbon-bigger-overflow-collapse-btn-right: 28px !default;
 $ribbon-bigger-overall-overflow-btn-height: 38px !default;
 $ribbon-bigger-overall-overflow-btn-position: 4px !default;
-$ribbon-bigger-overflow-wrapper-item-margin: 12px 24px !default;
+$ribbon-bigger-overflow-wrapper-item-margin: 3px 7px !default;
 $ribbon-bigger-group-header-padding: 8px 11px 4px !default;
 $ribbon-bigger-group-header-height: 18px !default;
 $ribbon-bigger-group-header-font-size: $text-xs !default;
@@ -282,7 +282,7 @@ $ribbon-bigger-rtl-button-icon-padding: 7px 16px 7px 10px !default;
 $ribbon-bigger-caret-icon-padding: 7px 12px !default;
 $ribbon-bigger-rtl-caret-icon-padding: 7px 12px !default;
 $ribbon-bigger-gallery-wrapper-height: 114px !default;
-$ribbon-bigger-gallery-simplified-wrapper-height: 32px !default;
+$ribbon-bigger-gallery-simplified-wrapper-height: 38px !default;
 $ribbon-bigger-gallery-items-wrapper-height: 104px !default;
 $ribbon-bigger-gallery-simplified-items-wrapper-height: 30px !default;
 $ribbon-bigger-gallery-items-wrapper-width: 104px !default;
@@ -290,8 +290,13 @@ $ribbon-bigger-keytip-font-size: 14px !default;
 $ribbon-bigger-keytip-line-height: 22px !default;
 $ribbon-bigger-keytip-height: 30px !default;
 $ribbon-bigger-keytip-min-width: 30px !default;
+$ribbon-text-font-weight: 400 !default;
+$filemenu-popup-padding: 4px 0 !default;
+$filemenu-popup-bigger-padding: 6px 0 !default;
 
-$ribbon-header-bg-color: $content-bg-color !default;
+$ribbon-grp-overflow-border-color: $flyout-border !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !default;
+$ribbon-header-bg-color: $content-bg-color-alt1 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: $flyout-border !default;
 $ribbon-group-border-color: $border-light !default;
@@ -405,5 +410,5 @@ $ribbon-gallery-item-selected-icons-color: $content-text-color-selected !default
 $ribbon-gallery-popup-box-shadow: $shadow-lg !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%, $content-bg-color-alt1 38%, rgba(255, 255, 255, 0) 60%) !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-alt2 !default;

package/styles/ribbon/_fabric-dark-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: unset !default;
 $ribbon-header-bg-color: $neutral-lighter !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: 0 2px 5px 0 rgba($shadow, .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(74, 72, 72) 29%, 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%, $neutral-quintenaryalt 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $neutral-lighter-alt !default;

package/styles/ribbon/_fabric-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: unset !default;
 $ribbon-header-bg-color: $neutral-white !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: $neutral-quintenaryalt !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: 0 0 10px 0 rgba($neutral-black, .2) !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(200, 200, 200) 38%, rgba(255, 255, 255, 0) 60%) !default;
-$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $neutral-light 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $neutral-lighter !default;

package/styles/ribbon/_fluent-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: $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-lg !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) 35%, $content-bg-color 46%, rgba(255, 255, 255, 0) 57%) !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/_fluent2-definition.scss

@@ -96,7 +96,7 @@ $ribbon-tab-text-size: $text-sm !default;
 $ribbon-tab-text-padding: 12px 10px !default;
 $ribbon-tab-text-height: 20px !default;
 $ribbon-tab-text-weight: $font-weight-normal !default;
-$ribbon-active-tab-text-weight: $font-weight-medium !default;
+$ribbon-active-tab-text-weight: $ribbon-tab-text-weight !default;
 $ribbon-nav-arrow-size: $text-sm !default;
 $ribbon-nav-arrow-height: 14px !default;
 $ribbon-hscroll-padding: 0 !default;
@@ -290,7 +290,12 @@ $ribbon-bigger-keytip-font-size: 16px !default;
 $ribbon-bigger-keytip-line-height: 22px !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-alt2 !default;
 $ribbon-border-color: unset !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-wrapper-background-color: $transparent !default;
 $ribbon-gallery-wrapper-item-background-color: $transparent !default;
 $ribbon-gallery-button-icon-color: $icon-color !default;
 $ribbon-gallery-button-selected-icon-color: $icon-color !default;
-$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, $content-bg-color-alt2 38%, rgba(255, 255, 255, 0) 60%) !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: $skeleton-bg-color !default;

package/styles/ribbon/_fusionnew-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: 6px 0 !default;
 
+$ribbon-grp-overflow-border-color: transparent !default;
+$ribbon-grp-overflow-popup-box-shadow: unset !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, transparent 15%, rgb(248, 249, 250) 38%, transparent 60%) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, transparent 20%, $content-bg-color-alt3 50%, transparent 70%) !default;
 $ribbon-skeleton-bg-color: $content-bg-color-alt2 !default;

package/styles/ribbon/_highcontrast-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: unset !default;
 $ribbon-header-bg-color: $bg-base-0 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: $border-default !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-item-selected-icons-color: $selection-font !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !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(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%) !default;
-$ribbon-skeleton-bg-color: rgba(0, 0, 0, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $bg-base-75 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $bg-base-0 !default;

package/styles/ribbon/_highcontrast-light-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: unset !default;
 $ribbon-header-bg-color: $bg-base-0 !default;
 $ribbon-tab-background-color: $ribbon-header-bg-color !default;
 $ribbon-border-color: $border-default !default;
@@ -406,5 +411,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !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(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%) !default;
-$ribbon-skeleton-bg-color: rgba(0, 0, 0, 1) !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $bg-base-75 50%, rgba(255, 255, 255, 0) 70%) !default;
+$ribbon-skeleton-bg-color: $bg-base-0 !default;