@syncfusion/ej2-navigations 31.2.12 → 32.1.19

package/styles/toolbar/_layout.scss

@@ -1,8 +1,10 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('toolbar-layout') {
   .e-toolbar {
     border-radius: $tbar-radius;
     display: block;
-    height: $tbar-nrml-size;
+    height: $tbar-nrml-height;
     min-height: $tbar-nrml-size;
     position: relative;
     user-select: none;
@@ -48,15 +50,23 @@
       display: none;
     }
 
+    &.e-overlay {
+      .e-toolbar-item:not(.e-separator):not(.e-spacer) {
+        .e-tbar-btn {
+          pointer-events: none;
+        }
+      }
+    }
+
     .e-toolbar-items {
-      border-radius: $tbar-radius 0 0 $tbar-radius;
+      border-radius: $tbar-radius $tbar-radius-zero $tbar-radius-zero $tbar-radius;
       display: inline-flex;
-      height: 100%;
+      height: $tbar-items-height;
       vertical-align: middle;
       align-items: center;
 
       &.e-toolbar-multirow {
-        margin-bottom: 1px;
+        margin-bottom: $tbar-multirow-items-btm-mrgn-small;
         margin-left: $tbar-multirow-items-mrgn-small;
         margin-right: $tbar-multirow-items-mrgn-small;
         white-space: normal;
@@ -94,7 +104,7 @@
         .e-toolbar-center,
         .e-toolbar-right {
           display: table;
-          height: 100%;
+          height: $tbar-items-height;
           top: 0;
         }
 
@@ -112,7 +122,7 @@
         }
 
         .e-toolbar-center {
-          margin: 0 auto;
+          margin: $tbar-margin-zero $tbar-margin-auto;
         }
       }
 
@@ -147,7 +157,7 @@
 
         .e-toolbar-center .e-toolbar-item,
         .e-toolbar-right .e-toolbar-item {
-          margin: 0;
+          margin: $tbar-margin-zero;
         }
 
         .e-toolbar-right .e-toolbar-item:last-child {
@@ -205,7 +215,7 @@
           margin: $tbar-zero-value;
           min-width: $tbar-btn-icon-nrml-width;
           width: auto;
-          font-size: $tbar-btn-font-size;
+          font-size: $tbar-btn-icon-font-size;
           line-height: $tbar-btn-icon-nrml-line-height;
         }
 
@@ -230,7 +240,7 @@
       }
 
       &:not(.e-separator):not(.e-spacer) {
-        height: inherit;
+        height: $tbar-inherit-height;
         min-width: $tbar-item-nrml-minwidth;
         padding: $tbar-item-nrml-padding;
       }
@@ -276,7 +286,7 @@
       }
 
       input[type = 'checkbox'] {
-        height: auto;
+        height: $tbar-auto-height;
       }
     }
 
@@ -295,7 +305,7 @@
           .e-toolbar-left,
           .e-toolbar-center,
           .e-toolbar-right {
-            height: auto;
+            height: $tbar-auto-height;
           }
 
           .e-toolbar-left {
@@ -314,24 +324,24 @@
         &:not(.e-tbar-pos) .e-toolbar-item {
 
           &:first-child {
-            margin-left: 0;
+            margin-left: $tbar-margin-zero;
           }
 
           &:last-child {
-            margin-right: 0;
+            margin-right: $tbar-margin-zero;
           }
         }
 
         .e-toolbar-item {
           display: flex;
-          height: auto;
+          height: $tbar-auto-height;
 
           &:not(.e-separator) {
             min-width: 33px;
           }
 
           &.e-separator {
-            height: auto;
+            height: $tbar-auto-height;
             margin: $tbar-separator-vertical-nrml-mrgn;
             min-height: auto;
           }
@@ -340,7 +350,7 @@
 
       .e-hor-nav {
         bottom: 0;
-        height: auto;
+        height: $tbar-auto-height;
         left: 0;
         min-height: 40px;
         min-width: 50px;
@@ -365,10 +375,10 @@
 
     .e-hor-nav {
       align-items: center;
-      border-radius: 0 $tbar-radius $tbar-radius 0;
+      border-radius: $tbar-radius-zero $tbar-radius $tbar-radius $tbar-radius-zero;
       cursor: pointer;
       display: flex;
-      height: 100%;
+      height: $tbar-items-height;
       min-height: $tbar-nrml-items-size;
       overflow: hidden;
       position: absolute;
@@ -455,7 +465,7 @@
         }
 
         > * {
-          height: 100%;
+          height: $tbar-items-height;
           min-width: 100%;
           text-overflow: ellipsis;
         }
@@ -483,21 +493,21 @@
       overflow: visible;
 
       &.e-tbar-extended {
-        border-bottom: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-bottom: $tbar-border-zero;
+        border-bottom-left-radius: $tbar-radius-zero;
+        border-bottom-right-radius: $tbar-radius-zero;
       }
 
       .e-toolbar-extended {
-        border-top: 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+        border-top: $tbar-border-zero;
+        border-top-left-radius: $tbar-radius-zero;
+        border-top-right-radius: $tbar-radius-zero;
         min-height: $tbar-nrml-size;
-        padding-bottom: 0;
+        padding-bottom: $tbar-padding-zero;
         padding-left: $tbar-item-nrml-mrgn;
         padding-right: $tbar-item-nrml-mrgn;
-        padding-top: 0;
-        margin-left: -1px;
+        padding-top: $tbar-padding-zero;
+        margin-left: $tbar-extended-left-mrgn;
         box-shadow: $tbar-box-shadow;
         display: inline;
         white-space: normal;
@@ -582,12 +592,12 @@
               padding: $tbar-btn-nrml-padding;
 
               .e-icons.e-btn-icon {
-                font-size: 14px;
+                font-size: $tbar-popup-btn-icon-font-size;
               }
             }
 
             &:not(.e-separator) {
-              height: auto;
+              height: $tbar-auto-height;
             }
 
             &:not(.e-overlay) > * {
@@ -671,7 +681,7 @@
 
         .e-toolbar-center .e-toolbar-item,
         .e-toolbar-right .e-toolbar-item {
-          margin: 0;
+          margin: $tbar-margin-zero;
         }
 
         .e-toolbar-right .e-toolbar-item:last-child {
@@ -699,7 +709,7 @@
           .e-toolbar-item {
 
             &:first-child {
-              margin-left: 0;
+              margin-left: $tbar-margin-zero;
               margin-right: $tbar-item-nrml-mrgn;
             }
 
@@ -711,7 +721,7 @@
 
         &:not(.e-tbar-pos) {
           .e-toolbar-item:first-child {
-            margin-left: 0;
+            margin-left: $tbar-margin-zero;
           }
         }
 
@@ -720,14 +730,14 @@
           > .e-toolbar-item:last-child {
 
             &:last-child {
-              margin-right: 0;
+              margin-right: $tbar-margin-zero;
             }
           }
           
           > .e-toolbar-right .e-toolbar-item {
 
             &:last-child {
-              margin-right: 0;
+              margin-right: $tbar-margin-zero;
               margin-left: $tbar-item-nrml-mrgn;
             }
 
@@ -741,7 +751,7 @@
       .e-hor-nav {
         left: $tbar-zero-value;
         right: auto;
-        border-radius: $tbar-radius 0 0 $tbar-radius;
+        border-radius: $tbar-radius $tbar-radius-zero $tbar-radius-zero $tbar-radius;
       }
     }
 
@@ -751,11 +761,11 @@
 
         .e-toolbar-center .e-toolbar-item,
         .e-toolbar-right .e-toolbar-item {
-          margin: 0;
+          margin: $tbar-margin-zero;
         }
 
         .e-toolbar-right .e-toolbar-item:last-child {
-          margin: 0;
+          margin: $tbar-margin-zero;
           margin-left: $tbar-item-nrml-mrgn;
         }
       }
@@ -770,10 +780,10 @@
 
       .e-toolbar-extended {
         padding-right: $tbar-item-nrml-mrgn;
-        margin-left: 0;
+        margin-left: $tbar-margin-zero;
 
         .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
-          padding-left: 0;
+          padding-left: $tbar-padding-zero;
         }
       }
     }

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
 
 $tbar-skin: 'material' !default;
 $tbar-zero-value: 0 !default;
@@ -60,7 +62,9 @@ $tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $grey-700 !default;
 $tbar-active-bg: rgba($grey-white, .22) !default;
 $tbar-nrml-size: 42px !default;
+$tbar-nrml-height: 42px !default;
 $tbar-bgr-size: 56px !default;
+$tbar-bgr-height: 56px !default;
 $tbar-nrml-items-size: 42px !default;
 $tbar-bgr-items-size: 56px !default;
 $tbar-nrml-item-size: 42px !default;
@@ -115,6 +119,7 @@ $tbar-border-type: solid !default;
 $tbar-box-shadow: none !default;
 $tbar-separator-size: .5px !default;
 $tbar-btn-font-size: 14px !default;
+$tbar-btn-icon-font-size: 14px !default;
 $tbar-btn-txt-font-size: $tbar-btn-font-size !default;
 $tbar-hover-bg: rgba($grey-white, .1) !default;
 $tbar-hover-border-color: rgba($grey-white, .1) !default;
@@ -201,6 +206,17 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
 $tbar-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
 $tbar-ribble-animation-shadow-frame: 0 0 0 0 $tbar-ribble-animation-border-frame !default;
 $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: 0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 
 @mixin tbar-btn-animation {
   background-color: transparent;

package/styles/toolbar/_material-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 
 $tbar-skin: 'material' !default;
 $tbar-pop-icon-bgr-padding: 0;
@@ -40,7 +42,9 @@ $tbar-border-nav-type: solid !default;
 $tbar-btn-box-shadow: none !default;
 $tbar-active-bg: $grey-400 !default;
 $tbar-nrml-size: 42px !default;
+$tbar-nrml-height: 42px !default;
 $tbar-bgr-size: 56px !default;
+$tbar-bgr-height: 56px !default;
 $tbar-nrml-items-size: 42px !default;
 $tbar-bgr-items-size: 56px !default;
 $tbar-nrml-item-size: 42px !default;
@@ -104,6 +108,7 @@ $tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
 $tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
 $tbar-item-pop-bg-color: transparent !default;
 $tbar-btn-font-size: 14px !default;
+$tbar-btn-icon-font-size: 14px !default;
 $tbar-btn-txt-font-size: $tbar-btn-font-size !default;
 $tbar-hover-bg: rgba($grey-black, .12) !default;
 $tbar-hover-border-color: rgba($grey-black, .12) !default;
@@ -189,6 +194,17 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
 $tbar-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
 $tbar-ribble-animation-shadow-frame: 0 0 0 0 $tbar-ribble-animation-border-frame !default;
 $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: 0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 
 @mixin tbar-btn-animation {
   background-color: transparent;

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

@@ -1 +1,216 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+
+/* stylelint-disable */
+$tbar-skin: 'material3' !default;
+$tbar-icons-bgr-font-size: $text-2xl;
+$tbar-btn-font-size: $text-lg !default;
+$tbar-btn-icon-font-size: $text-lg !default;
+$tbar-btn-txt-font-size: $text-sm !default;
+$tbar-pop-box-shadow: $shadow-md;
+$tbar-btn-box-shadow: none !default;
+$tbar-box-shadow: none !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-pressed-box-shadow: none !default;
+$tbar-item-bgr-padding: 8px 4px 8px 4px !default;
+$tbar-item-nrml-padding: 8px 4px 8px 4px !default;
+$tbar-btn-nrml-padding: 0 7px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-bgr-focus-padding: 0 8px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px !default;
+$tbar-rtl-btn-icn-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-bgr-padding: 4px !default;
+$tbar-btn-icn-right-bgr-padding: 4px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-right-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-right-bgr-padding: 4px !default;
+$btn-txt-nrml-padding: 4px !default;
+$btn-txt-bgr-padding: 4px !default;
+$btn-rtl-txt-nrml-padding: 4px !default;
+$btn-rtl-txt-bgr-padding: 4px !default;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$tbar-pop-btn-bgr-padding: 8px 16px !default;
+$tbar-pop-btn-nrml-padding: 5px 12px !default;
+$tbar-pop-icon-bgr-padding: 0 8px 0 0 !default;
+$tbar-pop-icon-nrml-padding: 0 8px 0 0 !default;
+$tbar-pop-btn-txt-nrml-pad: 0 0 0 8px !default;
+$tbar-pop-btn-txt-bgr-pad: 0 0 0 8px !default;
+$tbar-popup-padding: 0 !default;
+$tbar-btn-nrml-minheight: 32px !default;
+$tbar-btn-nrml-line-height: 22px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-btn-bgr-minheight: 40px !default;
+$tbar-btn-bgr-line-height: 24px !default;
+$tbar-btn-icon-bgr-line-height: 24px !default;
+$tbar-btn-nrml-minwidth: 32px !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-btn-bgr-minwidth: 40px !default;
+$tbar-nrml-size: 48px !default;
+$tbar-nrml-height: 48px !default;
+$tbar-bgr-size: 56px !default;
+$tbar-bgr-height: 56px !default;
+$tbar-nrml-items-size: 48px !default;
+$tbar-bgr-items-size: 56px !default;
+$tbar-nrml-item-size: 32px !default;
+$tbar-item-height: 32px !default;
+$tbar-item-nrml-minwidth: 32px !default;
+$tbar-bgr-item-size: 40px !default;
+$tbar-btn-icon-nrml-width: 18px !default;
+$tbar-btn-icon-nrml-height: 18px !default;
+$tbar-right-item-line-height: 24px !default;
+$tbar-btn-icon-bgr-width: 24px !default;
+$tbar-nav-nrml-width: 40px !default;
+$tbar-nav-bgr-width: 46px !default;
+$tbar-btn-pop-nrml-minheight: 32px !default;
+$tbar-btn-pop-bgr-minheight: 40px !default;
+$tbar-radius: $radius-0;
+$tbar-pop-radius: $radius-4;
+$tbar-zero-value: 0 !default;
+$tbar-separator-nrml-height: 20px !default;
+$tbar-separator-bgr-height: 24px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !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-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 12px !default;
+$tbar-multirow-items-mrgn-bigger: 12px !default;
+$tbar-multirow-items-mrgn-small: 8px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 0 !default;
+$tbar-btn-nrml-mrgn: 0 !default;
+$tbar-separator-vertical-nrml-mrgn: 8px 4px 8px 4px !default;
+$tbar-separator-bgr-mrgn: 8px 4px 8px 4px !default;
+$tbar-separator-vertical-bgr-mrgn: 8px 4px 8px 4px !default;
+$tbar-separator-nrml-mrgn: 8px 4px 8px 4px !default;
+$border-size: 1px;
+$border-type: solid;
+$tbar-border-radius: $radius-1 !default;
+$tbar-border-nav-type: solid !default;
+$tbar-border-size: 0;
+$tbar-separator-border-type: $border-type;
+$tbar-hover-border-color: rgba($border-light);
+$tbar-pressed-border: rgba($border-light);
+$tbar-separator-border: rgba($border-light) !default;
+$tbar-default-border: rgba($border-light) !default;
+$tbar-hover-border-color: rgba($border-light) !default;
+$tbar-focus-border-color: rgba($border-light) !default;
+$tbar-press-border-color: rgba($border-light) !default;
+$tbar-border-nav-type: rgba($border-light) !default;
+$tbar-border-nav-active-type: rgba($border-light) !default;
+$tbar-btn-border: none !default;
+$tbar-item-pop-bg-color: $transparent !default;
+$tbar-popup-border-width: 0 0 0 $border-size !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-border-type: $border-type !default;
+$tbar-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $tbar-default-border !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-btn-border-radius: $radius-4 !default;
+$tbar-default-bg: $content-bg-color-alt2 !default;
+$tbar-items-default-bg: $transparent !default;
+$tbar-default-font: rgba($icon-color) !default;
+$tbar-active-bg: rgba($content-bg-color-selected) !default;
+$tbar-active-icon-color: rgba($primary-darker) !default;
+$tbar-tab-highlight-color: $content-bg-color-focus !default;
+$tbar-press-bg: $content-bg-color-pressed !default;
+$tbar-btn-press-bg: $content-bg-color-pressed !default;
+$tbar-hover-bg: $content-bg-color-hover !default;
+$tbar-hover-font: rgba($icon-color) !default;
+$tbar-default-icon-color: rgba($icon-color) !default;
+$tbar-pressed-bg: $content-bg-color-pressed !default;
+$tbar-pressed-font: rgba($icon-color) !default;
+$tbar-select-font: rgba($primary-darker) !default;
+$tbar-default-icon-overlay: rgba($icon-color) !default;
+$tbar-focus-bg: $content-bg-color-focus !default;
+$tbar-press-font: rgba($primary-darker) !default;
+$tbar-default-font-overlay: rgba($icon-color) !default;
+$tbar-active-font-color: rgba($primary-darker) !default;
+$tbar-pop-bg: $flyout-bg-color !default;
+$tbar-bgr-btn-text-font-size: $text-sm !default;
+$tbar-bgr-btn-icon-font-size: $text-xl !default;
+$tbar-bgr-btn-focus-padding: 0 8px !default;
+$tbar-nrml-btn-border-radius: $radius-4 !default;
+$tbar-nrml-btn-focus-padding: 0 7px !default;
+$tbar-nrml-btn-focus-outline: 0 !default;
+$tbar-btn-icons-focus-color: rgba($icon-color) !default;
+$tbar-btn-text-focus-color: rgba($icon-color) !default;
+$tbar-btn-focus-border-color: rgba($icon-color) !default;
+$tbar-btn-hover-border-size: $tbar-border-size !default;
+$tbar-btn-hover-active-icons-color: rgba($primary-darker) !default;
+$tbar-btn-hover-active-text-color: rgba($primary-darker) !default;
+$tbar-btn-overlay-opacity: .38 !default;
+$tbar-btn-active-bg: $tbar-active-bg !default;
+$tbar-btn-active-icons-color: rgba($primary-darker) !default;
+$tbar-btn-active-text-color: rgba($primary-darker) !default;
+$tbar-btn-text-color: rgba($icon-color) !default;
+$tbar-btn-pressed-text-color: rgba($primary-darker) !default;
+$tbar-btn-pressed-focus-box-shadow: $secondary-shadow-focus !default;
+$tbar-btn-pressed-bg: $secondary-bg-color-pressed !default;
+$tbar-flat-btn-active-box-shadow: none !default;
+$tbar-ext-btn-focus-padding: 0 7px !default;
+$tbar-ext-btn-icon-padding: 0 !default;
+$tbar-ext-btn-icon-font-size: $text-lg !default;
+$tbar-ext-btn-focus-box-shadow: $shadow-focus-ring1 !default;
+$tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
+$tbar-ext-btn-border: none !default;
+$tbar-popup-icon-font-size: $text-sm !default;
+$tbar-popup-text-btn-icon-padding: 4px 4px 5px 4px !default;
+$tbar-popup-bgr-text-btn-icon-padding: 4px 6px 3px 6px !default;
+$tbar-popup-btn-border: none !default;
+$tbar-popup-btn-border-radius: $radius-4 !default;
+$tbar-popup-bgr-height: 40px !default;
+$tbar-popup-bgr-btn-icon-font-size: $text-base !default;
+$tbar-popup-bgr-btn-text-font-size: $text-base !default;
+$tbar-popup-nav-active-border-bottom-right-radius: $radius-0 !default;
+$tbar-popup-nav-active-bg: $tbar-default-bg !default;
+$tbar-popup-nav-active-icons-color: $tbar-default-icon-color !default;
+$tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-hover-color: $tbar-active-icon-color !default;
+$tbar-popup-nav-hover-icons-color: rgba($icon-color) !default;
+$tbar-popup-nav-hover-border-color: $tbar-default-border !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
+$tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
+$tbar-popup-nav-hover-active-border-size: 0 !default;
+$tbar-popup-nav-focus-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-focus-color: rgba($primary-text-color) !default;
+$tbar-popup-nav-focus-border-color: rgba($border-light) !default;
+$tbar-popup-nav-focus-border-size: 0 0 0 1px !default;
+$tbar-popup-btn-bg: transparent !default;
+$tbar-popup-btn-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-btn-hover-box-shadow: none !default;
+$tbar-popup-btn-active-bg: transparent !default;
+$tbar-popup-btn-active-box-shadow: none !default;
+$tbar-popup-btn-focus-bg: $content-bg-color-focus !default;
+$tbar-popup-btn-focus-box-shadow: none !default;
+$tbar-popup-nav-pressed-icons-active-color: $tbar-active-font-color !default;
+$tbar-popup-btn-focus-outline: 0 !default;
+$tbar-popup-nav-pressed-border-color: $tbar-pressed-bg !default;
+$tbar-popup-nav-pressed-border-size: 0 !default;
+$tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
+$tbar-popup-nav-pressed-focus-border-size: 0 !default;
+$tbar-popup-btn-hover-border-size: 0 !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: $radius-0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}

package/styles/toolbar/_material3-definition.scss

@@ -1,7 +1,11 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
+
 /* stylelint-disable */
 $tbar-skin: 'material3' !default;
 $tbar-icons-bgr-font-size: $text-2xl;
 $tbar-btn-font-size: $text-lg !default;
+$tbar-btn-icon-font-size: $text-lg !default;
 $tbar-btn-txt-font-size: $text-sm !default;
 $tbar-pop-box-shadow: $shadow-md;
 $tbar-btn-box-shadow: none !default;
@@ -44,7 +48,9 @@ $tbar-btn-nrml-minwidth: 32px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 40px !default;
 $tbar-nrml-size: 48px !default;
+$tbar-nrml-height: 48px !default;
 $tbar-bgr-size: 56px !default;
+$tbar-bgr-height: 56px !default;
 $tbar-nrml-items-size: 48px !default;
 $tbar-bgr-items-size: 56px !default;
 $tbar-nrml-item-size: 32px !default;
@@ -59,8 +65,8 @@ $tbar-nav-nrml-width: 40px !default;
 $tbar-nav-bgr-width: 46px !default;
 $tbar-btn-pop-nrml-minheight: 32px !default;
 $tbar-btn-pop-bgr-minheight: 40px !default;
-$tbar-radius: 0;
-$tbar-pop-radius: 4px;
+$tbar-radius: $radius-0;
+$tbar-pop-radius: $radius-4;
 $tbar-zero-value: 0 !default;
 $tbar-separator-nrml-height: 20px !default;
 $tbar-separator-bgr-height: 24px !default;
@@ -82,7 +88,7 @@ $tbar-separator-vertical-bgr-mrgn: 8px 4px 8px 4px !default;
 $tbar-separator-nrml-mrgn: 8px 4px 8px 4px !default;
 $border-size: 1px;
 $border-type: solid;
-$tbar-border-radius: 1px !default;
+$tbar-border-radius: $radius-1 !default;
 $tbar-border-nav-type: solid !default;
 $tbar-border-size: 0;
 $tbar-separator-border-type: $border-type;
@@ -105,7 +111,7 @@ $tbar-border-type: $border-type !default;
 $tbar-nav-press-border: 0 !default;
 $tbar-nav-hover-border: 1px solid $tbar-default-border !default;
 $tbar-nav-focus-border: 0 !default;
-$tbar-btn-border-radius: 4px !default;
+$tbar-btn-border-radius: $radius-4 !default;
 $tbar-default-bg: $content-bg-color-alt2 !default;
 $tbar-items-default-bg: $transparent !default;
 $tbar-default-font: rgba($icon-color) !default;
@@ -129,7 +135,7 @@ $tbar-pop-bg: $flyout-bg-color !default;
 $tbar-bgr-btn-text-font-size: $text-sm !default;
 $tbar-bgr-btn-icon-font-size: $text-xl !default;
 $tbar-bgr-btn-focus-padding: 0 8px !default;
-$tbar-nrml-btn-border-radius: 4px !default;
+$tbar-nrml-btn-border-radius: $radius-4 !default;
 $tbar-nrml-btn-focus-padding: 0 7px !default;
 $tbar-nrml-btn-focus-outline: 0 !default;
 $tbar-btn-icons-focus-color: rgba($icon-color) !default;
@@ -157,11 +163,11 @@ $tbar-popup-icon-font-size: $text-sm !default;
 $tbar-popup-text-btn-icon-padding: 4px 4px 5px 4px !default;
 $tbar-popup-bgr-text-btn-icon-padding: 4px 6px 3px 6px !default;
 $tbar-popup-btn-border: none !default;
-$tbar-popup-btn-border-radius: 4px !default;
+$tbar-popup-btn-border-radius: $radius-4 !default;
 $tbar-popup-bgr-height: 40px !default;
 $tbar-popup-bgr-btn-icon-font-size: $text-base !default;
 $tbar-popup-bgr-btn-text-font-size: $text-base !default;
-$tbar-popup-nav-active-border-bottom-right-radius: 0 !default;
+$tbar-popup-nav-active-border-bottom-right-radius: $radius-0 !default;
 $tbar-popup-nav-active-bg: $tbar-default-bg !default;
 $tbar-popup-nav-active-icons-color: $tbar-default-icon-color !default;
 $tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
@@ -189,7 +195,18 @@ $tbar-popup-nav-pressed-border-color: $tbar-pressed-bg !default;
 $tbar-popup-nav-pressed-border-size: 0 !default;
 $tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
 $tbar-popup-nav-pressed-focus-border-size: 0 !default;
-$tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-popup-btn-hover-border-size: 0 !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: $radius-0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 @mixin tbar-btn-animation {
   content: '';
 }