@syncfusion/ej2-navigations 19.3.53 → 19.4.38

package/styles/toolbar/_layout.scss

@@ -128,10 +128,6 @@
       .e-tbar-btn-text {
         line-height: $tbar-btn-txt-line-height;
 
-        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-          line-height: inherit;
-        }
-
         @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
           font-size: 16px;
         }
@@ -278,9 +274,14 @@
             &.e-tbtn-txt {
 
               .e-icons.e-btn-icon {
-                padding: $tbar-zero-value;
-             }
-          }
+                @if $tbar-skin == 'bootstrap5' {
+                  padding-bottom: $tbar-big-pop-padding-bottom;
+                }
+                @else {
+                  padding: $tbar-zero-value;
+                }
+              }
+            }
           }
         }
 
@@ -295,28 +296,10 @@
           @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
             line-height: 34px;
 
-            &:focus {
-              padding: 0 6px;
-
-              @if $tbar-skin == 'bootstrap4' {
-                padding: 0 4.5px;
-              }
-            }
-
-            &:hover {
-              padding: 0 6px;
-
-              @if $tbar-skin == 'bootstrap4' {
-                padding: 0 4.5px;
-              }
-            }
-
+            &:focus,
+            &:hover,
             &:active {
-              padding: 0 6px;
-
-              @if $tbar-skin == 'bootstrap4' {
-                padding: 0 4.5px;
-              }
+              padding: $tbar-btn-bgr-focus-padding;
             }
           }
 
@@ -412,14 +395,8 @@
             padding: $tbar-btn-bgr-padding;
 
             @if $tbar-skin == 'bootstrap' {
-              &:focus {
-                padding: 0 6px;
-              }
-
-              &:hover {
-                padding: 0 6px;
-              }
-
+              &:hover,
+              &:focus,
               &:active {
                 padding: 0 6px;
               }
@@ -662,18 +639,11 @@
             line-height: $tbar-btn-nrml-line-height;
 
             @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-              &:focus {
-                padding: 0 1.5px;
-              }
-
-              &:hover {
-                padding: 0 1.5px;
-              }
-
+              &:hover,
+              &:focus,
               &:active {
                 padding: 0 1.5px;
               }
-
             }
 
           }
@@ -855,17 +825,9 @@
         align-content: center;
         align-items: center;
         display: flex;
-        height: auto;
+        height: $tbar-item-height;
         justify-content: center;
 
-        @if $tbar-skin == 'material' {
-          height: 36px;
-        }
-
-        @if $tbar-skin == 'tailwind'or $tbar-skin == 'bootstrap5' {
-          height: 38px;
-        }
-
         > * {
           height: 100%;
           min-width: 100%;
@@ -1286,9 +1248,14 @@
             &.e-tbtn-txt {
 
               .e-icons.e-btn-icon {
-                padding: $tbar-zero-value;
-             }
-          }
+                @if $tbar-skin == 'bootstrap5' {
+                  padding-bottom: $tbar-pop-padding-bottom;
+                }
+                @else {
+                  padding: $tbar-zero-value;
+                }
+              }
+            }
           }
         }
 
@@ -1306,14 +1273,8 @@
           @if $tbar-skin == 'bootstrap' {
             line-height: 27px;
 
-            &:focus {
-              padding: 0 1.5px;
-            }
-
-            &:hover {
-              padding: 0 1.5px;
-            }
-
+            &:hover,
+            &:focus,
             &:active {
               padding: 0 1.5px;
             }
@@ -1328,13 +1289,7 @@
             }
           }
 
-          @if $tbar-skin == 'highcontrast' {
-            &:focus {
-              outline: none;
-            }
-          }
-
-          @if $tbar-skin == 'fabric' {
+          @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' {
             &:focus {
               outline: none;
             }

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

@@ -48,7 +48,10 @@ $tbar-default-icon-overlay: rgba($grey-dark-font, .3) !default;
 $tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
 $tbar-popup-border-width: 0 0 0 $border-size !default;
 $tbar-default-bg: $grey-900 !default;
+$tbar-items-default-bg: $tbar-default-bg !default;
+$tbar-pop-bg: $tbar-default-bg !default;
 $tbar-press-bg: $grey-700 !default;
+$tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $grey-700 !default;
 $tbar-active-bg: rgba($grey-white, .22) !default;
 
@@ -101,6 +104,8 @@ $tbar-btn-icon-nrml-line-height: 25px !default;
 $tbar-left-item-line-height: 35px !default;
 $tbar-right-item-line-height: 24px !default;
 $tbar-btn-bgr-padding: $tbar-zero-value 6px  !default;
+$tbar-btn-bgr-focus-padding: 0 6px !default;
+$tbar-item-height: auto !default;
 $tbar-btn-nrml-padding: $tbar-zero-value 1.5px  !default;
 $tbar-pop-btn-bgr-padding: $tbar-zero-value 16px !default;
 $tbar-pop-btn-nrml-padding: $tbar-zero-value 16px !default;
@@ -132,7 +137,8 @@ $tbar-pressed-bg: $tbar-hover-bg !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pressed-font: $tbar-hover-font !default;
 $tbar-select-font: $tbar-hover-font !default;
-
+$tbar-hover-font-color: $tbar-hover-font !default;
+$tbar-btn-active-font-color: $tbar-press-font !default;
 
 $tbar-default-icon-overlay: rgba($grey-dark-font, .26) !default;
 $tbar-default-font-overlay: rgba($grey-dark-font, .38) !default;

package/styles/toolbar/_material-definition.scss

@@ -17,8 +17,11 @@ $tbar-separator-border-type: $border-type;
 $tbar-pop-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .21);
 
 $tbar-default-bg: $grey-50 !default;
+$tbar-items-default-bg: $tbar-default-bg !default;
+$tbar-pop-bg: $tbar-default-bg !default;
 $tbar-press-bg: $grey-400 !default;
 $tbar-press-border-color: $tbar-press-bg !default;
+$tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-zero-value: 0 !default;
 $tbar-btn-bgr-minwidth: 0 !default;
 $tbar-btn-nrml-minwidth: 0 !default;
@@ -34,6 +37,7 @@ $tbar-bgr-size: 56px !default;
 $tbar-nrml-items-size: 42px !default;
 $tbar-bgr-items-size: 56px !default;
 $tbar-nrml-item-size: 42px !default;
+$tbar-item-height: 36px !default;
 $tbar-bgr-item-size: 48px !default;
 $tbar-item-nrml-minwidth: 34px !default;
 $tbar-btn-pop-nrml-minheight: 24px !default;
@@ -82,6 +86,7 @@ $tbar-btn-icon-nrml-line-height: 25px !default;
 $tbar-left-item-line-height: 35px !default;
 $tbar-right-item-line-height: 24px !default;
 $tbar-btn-bgr-padding: $tbar-zero-value 6px  !default;
+$tbar-btn-bgr-focus-padding: 0 6px !default;
 $tbar-btn-nrml-padding: $tbar-zero-value 1.5px  !default;
 $tbar-pop-btn-bgr-padding: $tbar-zero-value 16px !default;
 $tbar-pop-btn-nrml-padding: $tbar-zero-value 16px !default;
@@ -121,7 +126,8 @@ $tbar-pressed-bg: $tbar-hover-bg !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pressed-font: $tbar-hover-font !default;
 $tbar-select-font: $tbar-hover-font !default;
-
+$tbar-hover-font-color: $tbar-hover-font !default;
+$tbar-btn-active-font-color: $tbar-press-font !default;
 
 $tbar-default-icon-overlay: rgba($grey-light-font, .26) !default;
 $tbar-default-font-overlay: rgba($grey-light-font, .38) !default;

package/styles/toolbar/_tailwind-definition.scss

@@ -1,143 +1,149 @@
-$tbar-skin: 'tailwind' !default;
-$border-size: 0;
-$border-type: solid;
-$tbar-icons-bgr-font-size: $text-xl;
-$tbar-separator-bgr-mrgn: 8px 4px;
-$tbar-separator-vertical-bgr-mrgn: 5px 10px;
-$tbar-radius: 0;
-$tbar-separator-nrml-mrgn: 7px 3px;
-$tbar-pop-radius: 4px;
-$tbar-separator-vertical-nrml-mrgn: 3px 7px;
-$tbar-border-size: $border-size;
-$tbar-separator-border-type: $border-type;
-$tbar-pop-box-shadow: $shadow-lg;
-$tbar-hover-border-color: $icon-color;
-$tbar-pressed-border: $tbar-hover-border-color;
-$tbar-btn-bgr-line-height: 24px !default;
-$tbar-zero-value: 0 !default;
-$tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-weight: $font-weight-normal !default;
-$tbar-border-radius: 4px !default;
-$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
-$tbar-border-nav-type: solid !default;
-$tbar-btn-box-shadow: none !default;
-
-$tbar-default-bg: $content-bg-color-alt2 !default;
-$tbar-default-font: $content-text-color !default;
-$tbar-active-bg: $content-bg-color-alt3 !default;
-$tbar-active-icon-color: $icon-color !default;
-$tbar-btn-family: $font-family !default;
-$tbar-press-bg: $content-bg-color-alt2 !default;
-$tbar-press-border-color: $border-light !default;
-$tbar-hover-bg:  $content-bg-color-alt3 !default;
-$tbar-hover-font: $content-text-color-alt2 !default;
-$tbar-default-icon-color: $icon-color !default;
-$tbar-pressed-bg: $content-bg-color-alt2 !default;
-$tbar-pressed-font: $content-text-color-alt2 !default;
-$tbar-select-font: $content-text-color-alt2 !default;
-$tbar-default-font-overlay: $content-text-color-alt2 !default;
-$tbar-default-icon-overlay: $content-text-color-alt2 !default;
-$tbar-separator-border: $border-light !default;
-$tbar-default-border: $border-light !default;
-$tbar-hover-border-color: $icon-color !default;
-$tbar-focus-border-color: $tbar-hover-border-color !default;
-$tbar-focus-bg: $tbar-hover-bg !default;
-$tbar-press-font: $content-text-color-alt2 !default;
-
-$tbar-active-font-color: $tbar-press-font !default;
-$tbar-border-nav-type: $border-light !default;
-$tbar-border-nav-active-type: $border-light !default;
-$tbar-btn-border: none !default;
-
-$tbar-box-shadow: none !default;
-$tbar-border-type: $border-type !default;
-$tbar-separator-size: 1px !default;
-$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
-$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
-$tbar-popup-border-width: 0 0 0 1px !default;
-$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
-$tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
-$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
-$tbar-nrml-size: 38px !default;
-$tbar-bgr-size: 48px !default;
-$tbar-nrml-items-size: 38px !default;
-$tbar-bgr-items-size: 48px !default;
-$tbar-nrml-item-size: 38px !default;
-$tbar-item-nrml-minwidth: 28px !default;
-$tbar-bgr-item-size: 49px !default;
-$tbar-btn-font-size: $text-lg !default;
-$tbar-btn-txt-font-size: $text-sm !default;
-$tbar-popup-btn-bg-color: transparent !default;
-
-$tbar-item-bgr-padding: 5px 6px !default;
-$tbar-item-nrml-padding: 4px !default;
-$tbar-btn-nrml-padding: 0 4px !default;
-$tbar-btn-bgr-padding: 0 8px !default;
-$tbar-btn-icn-nrml-padding: 4px !default;
-$tbar-btn-icn-bgr-padding: 4px 6px !default;
-$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
-$tbar-btn-icn-right-nrml-padding: 4px !default;
-$btn-txt-nrml-padding: 4px !default;
-$btn-txt-bgr-padding: 4px !default;
-
-$tbar-pop-bg: $flyout-bg-color;
-$tbar-item-pop-nrml-padding: 0 !default;
-$tbar-item-pop-bgr-padding: 0 !default;
-$tbar-pop-btn-bgr-padding: 8px 18px !default;
-$tbar-pop-btn-nrml-padding: 6px 12px !default;
-$tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
-$tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
-$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
-$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
-
-$tbar-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
-$tbar-nav-focus-border: 0 !default;
-$tbar-nav-pressed-box-shadow: none !default;
-$tbar-btn-border-radius: 0 !default;
-$tbar-btn-pressed-box-shadow: none !default;
-$tbar-btn-bgr-mrgn: 0 !default;
-$tbar-btn-nrml-mrgn: 0 !default;
-$tbar-v-btn-bgr-mrgn: 0 !default;
-$tbar-v-btn-nrml-mrgn: 0 !default;
-$tbar-popup-padding: 0 !default;
-$tbar-btn-nrml-minheight: 30px !default;
-$tbar-btn-bgr-minheight: 38px !default;
-$tbar-btn-nrml-minwidth: 30px !default;
-$tbar-btn-bgr-minwidth: 38px !default;
-$tbar-btn-bgr-height: calc(100% - 11px) !default;
-$tbar-btn-nrml-height: calc(100% - 10px) !default;
-$tbar-separator-nrml-height: 24px !default;
-$tbar-separator-bgr-height: 30px !default;
-$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
-$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
-$tbar-btn-icon-nrml-width: 12px !default;
-$tbar-btn-icon-nrml-height: 16px !default;
-$tbar-btn-icon-nrml-line-height: 16px !default;
-$tbar-left-item-line-height: 35px !default;
-$tbar-right-item-line-height: 24px !default;
-$tbar-btn-icon-bgr-width: 13px !default;
-$tbar-btn-icon-bgr-height: 18px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
-$tbar-btn-txt-line-height: inherit !default;
-$tbar-nav-nrml-width: 28px !default;
-$tbar-nav-bgr-width: 36px !default;
-$tbar-item-nrml-mrgn: 8px !default;
-$tbar-item-bgr-mrgn: 10px !default;
-$tbar-btn-pop-nrml-minheight: 38px !default;
-$tbar-btn-pop-bgr-minheight: 48px !default;
-$tbar-multirow-items-mrgn-bigger: 12.5px !default;
-$tbar-multirow-items-mrgn-small: 10px !default;
-$tbar-multirow-item-top-btm-mrgn-bigger: 1.5px 0 !default;
-$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
-$tbar-multirow-item-mrgn: 0 !default;
-$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
-$tbar-item-nrml-padding-small: 1px 0 !default;
-
-@mixin tbar-btn-animation {
-  content: '';
-}
-
-@mixin tbar-btn-animation-after {
-  content: '';
-}
+$tbar-skin: 'tailwind' !default;
+$border-size: 0;
+$border-type: solid;
+$tbar-icons-bgr-font-size: $text-xl;
+$tbar-separator-bgr-mrgn: 8px 4px;
+$tbar-separator-vertical-bgr-mrgn: 5px 10px;
+$tbar-radius: 0;
+$tbar-separator-nrml-mrgn: 7px 3px;
+$tbar-pop-radius: 4px;
+$tbar-separator-vertical-nrml-mrgn: 3px 7px;
+$tbar-border-size: $border-size;
+$tbar-separator-border-type: $border-type;
+$tbar-pop-box-shadow: $shadow-lg;
+$tbar-hover-border-color: $icon-color;
+$tbar-pressed-border: $tbar-hover-border-color;
+$tbar-btn-bgr-line-height: 24px !default;
+$tbar-zero-value: 0 !default;
+$tbar-btn-nrml-line-height: 22px !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-border-radius: 4px !default;
+$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$tbar-border-nav-type: solid !default;
+$tbar-btn-box-shadow: none !default;
+
+$tbar-default-bg: $content-bg-color-alt2 !default;
+$tbar-items-default-bg: $tbar-default-bg !default;
+$tbar-default-font: $content-text-color !default;
+$tbar-btn-active-font-color: $tbar-default-font !default;
+$tbar-active-bg: $content-bg-color-alt3 !default;
+$tbar-active-icon-color: $icon-color !default;
+$tbar-btn-family: $font-family !default;
+$tbar-press-bg: $content-bg-color-alt2 !default;
+$tbar-btn-press-bg: $tbar-press-bg !default;
+$tbar-press-border-color: $border-light !default;
+$tbar-hover-bg:  $content-bg-color-alt3 !default;
+$tbar-hover-font: $content-text-color-alt2 !default;
+$tbar-hover-font-color: $tbar-default-font !default;
+$tbar-default-icon-color: $icon-color !default;
+$tbar-pressed-bg: $content-bg-color-alt2 !default;
+$tbar-pressed-font: $content-text-color-alt2 !default;
+$tbar-select-font: $content-text-color-alt2 !default;
+$tbar-default-font-overlay: $content-text-color-alt2 !default;
+$tbar-default-icon-overlay: $content-text-color-alt2 !default;
+$tbar-separator-border: $border-light !default;
+$tbar-default-border: $border-light !default;
+$tbar-hover-border-color: $icon-color !default;
+$tbar-focus-border-color: $tbar-hover-border-color !default;
+$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-press-font: $content-text-color-alt2 !default;
+
+$tbar-active-font-color: $tbar-press-font !default;
+$tbar-border-nav-type: $border-light !default;
+$tbar-border-nav-active-type: $border-light !default;
+$tbar-btn-border: none !default;
+
+$tbar-box-shadow: none !default;
+$tbar-border-type: $border-type !default;
+$tbar-separator-size: 1px !default;
+$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
+$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
+$tbar-popup-border-width: 0 0 0 1px !default;
+$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
+$tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
+$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
+$tbar-nrml-size: 38px !default;
+$tbar-bgr-size: 48px !default;
+$tbar-nrml-items-size: 38px !default;
+$tbar-bgr-items-size: 48px !default;
+$tbar-nrml-item-size: 38px !default;
+$tbar-item-height: 38px !default;
+$tbar-item-nrml-minwidth: 28px !default;
+$tbar-bgr-item-size: 49px !default;
+$tbar-btn-font-size: $text-lg !default;
+$tbar-btn-txt-font-size: $text-sm !default;
+$tbar-popup-btn-bg-color: transparent !default;
+
+$tbar-item-bgr-padding: 5px 6px !default;
+$tbar-item-nrml-padding: 4px !default;
+$tbar-btn-nrml-padding: 0 4px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-bgr-focus-padding: 0 6px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$btn-txt-nrml-padding: 4px !default;
+$btn-txt-bgr-padding: 4px !default;
+
+$tbar-pop-bg: $tbar-default-bg !default;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$tbar-pop-btn-bgr-padding: 8px 18px !default;
+$tbar-pop-btn-nrml-padding: 6px 12px !default;
+$tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
+$tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
+$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
+$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
+
+$tbar-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 0 !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-border-radius: 0 !default;
+$tbar-btn-pressed-box-shadow: none !default;
+$tbar-btn-bgr-mrgn: 0 !default;
+$tbar-btn-nrml-mrgn: 0 !default;
+$tbar-v-btn-bgr-mrgn: 0 !default;
+$tbar-v-btn-nrml-mrgn: 0 !default;
+$tbar-popup-padding: 0 !default;
+$tbar-btn-nrml-minheight: 30px !default;
+$tbar-btn-bgr-minheight: 38px !default;
+$tbar-btn-nrml-minwidth: 30px !default;
+$tbar-btn-bgr-minwidth: 38px !default;
+$tbar-btn-bgr-height: calc(100% - 11px) !default;
+$tbar-btn-nrml-height: calc(100% - 10px) !default;
+$tbar-separator-nrml-height: 24px !default;
+$tbar-separator-bgr-height: 30px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
+$tbar-btn-icon-nrml-width: 12px !default;
+$tbar-btn-icon-nrml-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-left-item-line-height: 35px !default;
+$tbar-right-item-line-height: 24px !default;
+$tbar-btn-icon-bgr-width: 13px !default;
+$tbar-btn-icon-bgr-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-txt-line-height: inherit !default;
+$tbar-nav-nrml-width: 28px !default;
+$tbar-nav-bgr-width: 36px !default;
+$tbar-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 10px !default;
+$tbar-btn-pop-nrml-minheight: 38px !default;
+$tbar-btn-pop-bgr-minheight: 48px !default;
+$tbar-multirow-items-mrgn-bigger: 12.5px !default;
+$tbar-multirow-items-mrgn-small: 10px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 1.5px 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
+$tbar-multirow-item-mrgn: 0 !default;
+$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
+$tbar-item-nrml-padding-small: 1px 0 !default;
+
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}

package/styles/toolbar/_theme.scss

@@ -66,13 +66,18 @@
             background: $tbar-focus-bg;
             border-color: $tbar-focus-border-color;
             border-radius: $tbar-btn-border-radius;
-            color: $tbar-hover-font;
+            color: $tbar-hover-font-color;
 
             @if $tbar-skin == 'bootstrap' {
               border: 1px solid $tbar-focus-border-color;
               margin: 0;
             }
 
+            @if $tbar-skin == 'bootstrap4' {
+              border: 1px solid $tbar-focus-border-color;
+              box-shadow: $tbar-focus-btn-box-shadow;
+            }
+
             @if $tbar-skin == 'bootstrap5' {
               .e-toolbar-item .e-tbar-btn-text,
               .e-icons {
@@ -93,7 +98,7 @@
             background: $tbar-hover-bg;
             border-color: $tbar-hover-border-color;
             border-radius: $tbar-btn-border-radius;
-            color: $tbar-hover-font;
+            color: $tbar-hover-font-color;
 
             @if $tbar-skin == 'bootstrap' {
               border: 1px solid $tbar-hover-border-color;
@@ -132,18 +137,16 @@
           }
 
           &:active {
-            background: $tbar-press-bg;
+            background: $tbar-btn-press-bg;
             border-color: $tbar-press-border-color;
             border-radius: $tbar-btn-border-radius;
             box-shadow: $tbar-btn-pressed-box-shadow;
-            color: $tbar-press-font;
+            color: $tbar-btn-active-font-color;
 
             @if $tbar-skin == 'bootstrap' {
               border-left: 1px solid $tbar-press-border-color;
             }
             @if $tbar-skin == 'highcontrast' {
-              color: $tbar-pressed-font;
-
               .e-icons,
               .e-tbar-btn-text {
                 color: $tbar-pressed-font;
@@ -169,14 +172,10 @@
     }
 
     .e-toolbar-pop {
-      background: $tbar-default-bg;
+      background: $tbar-pop-bg;
       border: $tbar-border-size $tbar-border-type $tbar-default-border;
       box-shadow: $tbar-pop-box-shadow;
 
-      @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-        background: $tbar-pop-bg;
-      }
-
       .e-toolbar-item {
 
         @if $tbar-skin == 'bootstrap4' {
@@ -221,9 +220,7 @@
     }
 
     &.e-extended-toolbar .e-toolbar-pop {
-      @if $tbar-skin == 'bootstrap5' {
-        background: $tbar-default-bg;
-      }
+      background: $tbar-default-bg;
     }
 
     &.e-toolpop {
@@ -256,7 +253,7 @@
     }
 
     .e-tbar-btn {
-      background: $tbar-default-bg;
+      background: $tbar-items-default-bg;
       box-shadow: $tbar-btn-box-shadow;
       color: $tbar-default-font;