@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

package/styles/ribbon/_layout.scss

@@ -252,6 +252,25 @@
 
     &.e-ribbon-simplified-mode {
 
+      .e-ribbon-item .e-ribbon-gallery-wrapper {
+        height: $ribbon-gallery-simplified-wrapper-height;
+        .e-ribbon-gallery-container {
+          .e-ribbon-gallery-item {
+            padding: $ribbon-gallery-simplified-items-padding;
+            width: $ribbon-gallery-simplified-items-width;
+            margin: 2px;
+            max-height: $ribbon-gallery-simplified-items-wrapper-height;
+            &.e-disabled {
+              pointer-events: none;
+            }
+  
+            .e-ribbon-gallery-text {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+
       .e-ribbon-tab .e-hscroll-bar {
         overflow-y: hidden;
       }
@@ -599,6 +618,22 @@
       padding: 1px;
       vertical-align: middle;
 
+      .e-ribbon-gallery-wrapper {
+        height: $ribbon-gallery-wrapper-height;
+        display: flex;
+        .e-ribbon-gallery-container {
+          .e-ribbon-gallery-item {
+            max-height: $ribbon-gallery-wrapper-height;
+          }
+        }
+      }
+
+      .e-ribbon-gallery-button {
+        padding: 0;
+        border-width: 0 0 0 1px;
+        border-radius: 0 4px 4px 0;
+      }
+
       &.e-hidden {
         display: none;
       }
@@ -678,6 +713,13 @@
       min-height: 33%;
       padding: $ribbon-items-padding;
 
+      &:has(.e-ribbon-gallery-container) {
+        padding: 0;
+        border-style: solid;
+        border-width: 1px;
+        border-radius: 4px;
+      }
+
       .e-btn-group {
         box-shadow: none;
       }
@@ -848,12 +890,39 @@
   }
 
   .e-ribbon-group-overflow-ddb {
+    &.e-dropdown-popup:has(.e-ribbon-overflow-target) {
+      min-width: 190px;
+    }
     .e-ribbon-of-tab:not(.e-ribbon-active) {
       display: none;
     }
 
     .e-ribbon-overflow-target {
 
+      .e-ribbon-item:has(.e-ribbon-gallery-container) {
+        border: 0;
+      }
+      
+      .e-ribbon-item:has(.e-input-group) {
+        margin: 5px 0;
+      }
+
+      .e-ribbon-gallery-dropdown.e-btn {
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        .e-btn-icon {
+          margin: 0;
+        }
+      }
+      .e-ribbon-gallery-wrapper.e-hidden,
+      .e-ribbon-gallery-container.e-hidden,
+      .e-ribbon-gallery-button.e-hidden {
+        display: none;
+      }
+
       &.e-hidden,
       &.e-hide-group {
         display: none;
@@ -875,30 +944,51 @@
       }
 
       .e-ribbon-item {
-
+        .e-dropdown-btn .e-caret {
+          font-size: $ribbon-items-caret-icon-size;
+        }
+        .e-input-group {
+          height: $ribbon-combobox-height;
+        }
         .e-ribbon-combobox-label,
         .e-ribbon-colorpicker-label {
           white-space: nowrap;
           display: flex;
           align-items: center;
           font-weight: $ribbon-items-font-weight;
-          font-size: $ribbon-items-btn-size;
+          font-size: $ribbon-items-label-size;
+        }
+
+        &:has(.e-colorpicker-wrapper) {
+          align-items: center;
         }
 
         & > .e-input-group,
         .e-ribbon-template {
           margin: $ribbon-overflow-wrapper-item-margin;
         }
+        .e-btn {
+          .e-btn-icon {
+            font-size: $ribbon-items-btn-icon-size;
+          }
+        }
       }
 
       .e-ribbon-item > .e-checkbox-wrapper {
-        margin: $ribbon-items-margin;
+        margin: $ribbon-checkbox-margin;
         padding: 0;
       }
 
       .e-ribbon-item.e-ribbon-medium-item {
         padding: $ribbon-overflow-item-padding;
         width: 100%;
+        height: $ribbon-medium-item-height;
+
+        .e-btn {
+          .e-btn-icon.e-icon-left {
+            margin: 0;
+          }
+        }
 
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
@@ -919,8 +1009,10 @@
 
       .e-ribbon-overflow-header {
         padding: $ribbon-overflow-header-padding;
+        font-size: $ribbon-overflow-header-font-size;
         font-weight: $ribbon-overflow-header-weight;
-        line-height: $ribbon-overflow-header-height;
+        line-height: $ribbon-overflow-header-line-height;
+        height: $ribbon-overflow-header-height;
       }
     }
   }
@@ -933,11 +1025,23 @@
         margin-left: $ribbon-items-label;
       }
 
+      &.e-ribbon-medium-item {
+        .e-btn {
+          .e-btn-icon.e-icon-left {
+            padding: $ribbon-button-icon-padding;
+          }
+        }
+      }
+
+      &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
+        margin-left: $ribbon-items-label;
+      }
+
       >.e-split-btn-wrapper,
       >.e-dropdown-btn {
         .e-icons.e-caret {
           transform: rotate(-90deg);
-          padding: $ribbon-items-margin;
+          padding: $ribbon-caret-icon-padding;
           margin: 0 0 0 auto;
         }
       }
@@ -945,20 +1049,40 @@
   }
 
   .e-rtl.e-ribbon-group-overflow-ddb {
-    .e-ribbon-overflow-target .e-ribbon-item {
-
-      .e-ribbon-combobox-label,
-      .e-ribbon-colorpicker-label {
-        margin-right: $ribbon-items-label;
+    .e-ribbon-overflow-target {
+      .e-ribbon-overflow-header {
+        padding: $ribbon-rtl-overflow-header-padding;
       }
+      .e-ribbon-item {
 
-      >.e-split-btn-wrapper,
-      >.e-dropdown-btn {
-        .e-icons.e-caret {
-          transform: rotate(90deg);
-          padding: $ribbon-items-margin;
-          margin: 0 auto 0 0;
+        .e-ribbon-combobox-label,
+        .e-ribbon-colorpicker-label {
+          margin-right: $ribbon-items-label;
         }
+        
+        &.e-ribbon-medium-item {
+          .e-btn {
+            .e-btn-icon.e-icon-left {
+              padding: $ribbon-rtl-button-icon-padding;
+            }
+          }
+        }
+
+        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
+          margin-right: $ribbon-items-label;
+        }
+  
+        >.e-split-btn-wrapper,
+        >.e-dropdown-btn {
+          .e-icons.e-caret {
+            transform: rotate(90deg);
+            padding: $ribbon-rtl-caret-icon-padding;
+            margin: 0 auto 0 0;
+          }
+        }
+      }
+      .e-ribbon-item > .e-checkbox-wrapper {
+        margin: $ribbon-rtl-checkbox-margin;
       }
     }
   }
@@ -975,7 +1099,7 @@
     .e-ribbon-groupbutton-header {
       padding-bottom: $ribbon-groupbutton-header-padding;
       font-weight: $ribbon-overflow-header-weight;
-      line-height: $ribbon-overflow-header-height;
+      line-height: $ribbon-overflow-header-line-height;
       white-space: nowrap;
     }
 
@@ -986,6 +1110,20 @@
         align-items: center;
         justify-content: flex-start;
       }
+      &:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button {
+        &:first-of-type {
+          border-top-right-radius: 4px;
+          border-top-left-radius: 4px;
+          border-bottom-right-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        &:last-of-type {
+          border-top-right-radius: 0;
+          border-top-left-radius: 0;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+      }
     }
     
     .e-btn-group {
@@ -1006,7 +1144,7 @@
         padding: 0;
         font-weight: $ribbon-items-font-weight;
         font-size: $ribbon-items-btn-size;
-        border: none;
+        border: 1px solid $ribbon-group-button-border-color;
         text-transform: none;
 
         &:not(.e-icon-btn) {
@@ -1022,6 +1160,99 @@
     }
   }
 
+  .e-ribbon-gallery-popup.e-popup,
+  .e-ribbon-gallery-dropdown.e-popup {
+    border-radius: 4px;
+    padding: $ribbon-gallery-popup-padding;
+    overflow: auto;
+    .e-ribbon-gallery-header {
+      padding: $ribbon-gallery-header-padding;
+      font-size: $ribbon-gallery-header-fontsize;
+      font-weight: $ribbon-gallery-header-font-weight;
+      line-height: $ribbon-gallery-header-line-height;
+    }
+    .e-ribbon-gallery-container .e-ribbon-gallery-item {
+      margin: 4px;
+      height: 54px;
+      width: $ribbon-gallery-popup-items-width;
+    }
+  }
+
+  .e-ribbon-item {
+    .e-ribbon-gallery-container {
+      .e-ribbon-gallery-item {
+        width: $ribbon-gallery-items-width;
+      }
+    }
+  }
+
+  .e-ribbon-gallery-popup.e-popup,
+  .e-ribbon-gallery-dropdown.e-popup,
+  .e-ribbon-group-overflow,
+  .e-ribbon-item {
+    .e-ribbon-gallery-container {
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-content: space-around;
+      .e-ribbon-gallery-item {
+        display: inherit;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        list-style-type: none;
+        padding: $ribbon-gallery-popup-items-padding;
+        flex-direction: column;
+        cursor: pointer;
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 4px;
+
+        &.e-disabled {
+          pointer-events: none;
+        }
+
+        &.e-hidden {
+          display: none;
+        }
+
+        .e-ribbon-gallery-text {
+          font-size: $ribbon-gallery-text-size;
+          font-weight: $ribbon-gallery-text-weight;
+          line-height: $ribbon-gallery-text-line-height;
+          width: inherit;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .e-ribbon-gallery-icons {
+          font-size: $ribbon-gallery-icons-size;
+          font-weight: $ribbon-gallery-icons-weight;
+          line-height: $ribbon-gallery-icons-height;
+          padding: 3px;
+          background-size: cover;
+        }
+        &:hover,
+        &.e-ribbon-gallery-selected {
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  .e-ribbon-keytip {
+    min-width: 20px;
+    height: 20px;
+    line-height: 18px;
+    font-size: 14px;
+
+    &.e-popup-open {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .e-ribbon-menu {
     display: block;
 
@@ -1349,10 +1580,36 @@
   .e-bigger.e-ribbon-group-overflow-ddb {
     .e-ribbon-overflow-target {
 
+      .e-ribbon-overflow-header {
+        line-height: $ribbon-bigger-overflow-header-line-height;
+        height: $ribbon-bigger-overflow-header-height;
+        font-size: $ribbon-bigger-overflow-header-font-size;
+      }
+
       .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;
+            &.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-btn-size;
+          font-size: $ribbon-bigger-items-label-size;
         }
 
         & > .e-input-group,
@@ -1362,42 +1619,79 @@
       }
 
       .e-ribbon-item > .e-checkbox-wrapper {
-        margin: $ribbon-bigger-items-margin;
+        margin: $ribbon-bigger-checkbox-margin;
         padding: 0;
       }
     }
 
     &:not(.e-rtl) {
-      .e-ribbon-overflow-target .e-ribbon-item {
-
-        .e-ribbon-combobox-label,
-        .e-ribbon-colorpicker-label {
-          margin-left: $ribbon-bigger-items-label;
+      .e-ribbon-overflow-target {
+        .e-ribbon-overflow-header {
+          padding: $ribbon-bigger-overflow-header-padding;
         }
+        .e-ribbon-item {
 
-        >.e-split-btn-wrapper,
-        >.e-dropdown-btn {
-          .e-icons.e-caret {
-            padding: $ribbon-bigger-items-margin;
+          .e-ribbon-combobox-label,
+          .e-ribbon-colorpicker-label {
+            margin-left: $ribbon-bigger-items-label;
+          }
+  
+          &.e-ribbon-medium-item {
+            .e-btn {
+              .e-btn-icon.e-icon-left {
+                padding: $ribbon-bigger-button-icon-padding;
+              }
+            }
+          }
+  
+          &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
+            margin-left: $ribbon-bigger-items-label;
+          }
+  
+          >.e-split-btn-wrapper,
+          >.e-dropdown-btn {
+            .e-icons.e-caret {
+              padding: $ribbon-bigger-caret-icon-padding;
+            }
           }
         }
       }
     }
 
     &.e-rtl {
-      .e-ribbon-overflow-target .e-ribbon-item {
-
-        .e-ribbon-combobox-label,
-        .e-ribbon-colorpicker-label {
-          margin-right: $ribbon-bigger-items-label;
+      .e-ribbon-overflow-target {
+        .e-ribbon-overflow-header {
+          padding: $ribbon-bigger-rtl-overflow-header-padding;
         }
+        .e-ribbon-item {
 
-        >.e-split-btn-wrapper,
-        >.e-dropdown-btn {
-          .e-icons.e-caret {
-            padding: $ribbon-bigger-items-margin;
+          .e-ribbon-combobox-label,
+          .e-ribbon-colorpicker-label {
+            margin-right: $ribbon-bigger-items-label;
+          }
+  
+          &.e-ribbon-medium-item {
+            .e-btn {
+              .e-btn-icon.e-icon-left {
+                padding: $ribbon-bigger-rtl-button-icon-padding;
+              }
+            }
+          }
+  
+          &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
+            margin-right: $ribbon-bigger-items-label;
+          }
+  
+          >.e-split-btn-wrapper,
+          >.e-dropdown-btn {
+            .e-icons.e-caret {
+              padding: $ribbon-bigger-rtl-caret-icon-padding;
+            }
           }
         }
+        .e-ribbon-item > .e-checkbox-wrapper {
+          margin: $ribbon-bigger-rtl-checkbox-margin;
+        }
       }
     }
   }
@@ -1478,4 +1772,16 @@
       }
     }
   }
+
+  .e-bigger.e-ribbon-gallery-popup.e-popup,
+  .e-bigger .e-ribbon-gallery-popup.e-popup,
+  .e-bigger.e-ribbon-gallery-dropdown.e-popup,
+  .e-bigger .e-ribbon-gallery-dropdown.e-popup {
+    padding: $ribbon-bigger-gallery-popup-padding;
+    .e-ribbon-gallery-header {
+      padding-bottom: $ribbon-bigger-gallery-header-padding;
+      font-size: $ribbon-bigger-gallery-header-fontsize;
+      line-height: $ribbon-bigger-gallery-header-line-height;
+    }
+  }
 }

package/styles/ribbon/_material-dark-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: 7px 8px !default;
-$ribbon-overflow-item-btn-height: 22px !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: 22px !default;
-$ribbon-overflow-header-padding: 7px 8px !default;
-$ribbon-overflow-header-weight: 400 !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: 14px !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: 7px !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: 34px !default;
+$ribbon-gallery-simplified-items-wrapper-height: 30px !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: 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-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: 14px !default;
+$ribbon-bigger-gallery-header-line-height: 22px !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 8px 16px !default;
+$ribbon-bigger-rtl-overflow-header-padding: 10px 16px 8px 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-900 !default;
 $ribbon-border-color: $grey-600 !default;
@@ -276,6 +330,7 @@ $ribbon-group-button-text-hover-color: rgba($grey-white, 1) !default;
 $ribbon-group-button-active-background: rgba($grey-white, .16) !default;
 $ribbon-group-button-text-active-color: rgba($grey-white, 1) !default;
 $ribbon-group-button-selected-background: rgba($grey-white, .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 3px 8px 0 rgba($grey-black, .26) !default;
 $ribbon-popup-common-bg-color: $grey-900 !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 6px 6px 0 rgba($grey-black, .23), 0 10px 20px 0 rgba($grey-black, .19) !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: $primary-font !default;
+$ribbon-keytip-color: $primary-50-font !default;
+$ribbon-gallery-popup-background-color: $grey-800 !default;
+$ribbon-gallery-item-background-color: $grey-800 !default;
+$ribbon-gallery-hover-background-color: $grey-700 !default;
+$ribbon-gallery-item-selected-color: $grey-600 !default;
+$ribbon-gallery-button-selected-color: $ribbon-gallery-item-selected-color !default;
+$ribbon-gallery-item-disabled-color: $grey-800 !default;
+$ribbon-gallery-item-focus-border-color: $grey-700 !default;
+$ribbon-gallery-item-border-color: $grey-700 !default;
+$ribbon-gallery-header-color: rgba($grey-dark-font, .6) !default;
+$ribbon-gallery-item-text-color: $ribbon-text-color !default;
+$ribbon-gallery-item-disabled-text-color: rgba($grey-dark-font, .38) !default;
+$ribbon-gallery-icons-color: rgba($grey-dark-font, .6) !default;
+$ribbon-gallery-item-disabled-icons-color: rgba($grey-dark-font, .38) !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: 0 3px 8px 0 rgba($grey-black, .26) !default;