@syncfusion/blazor-themes 20.3.59 → 20.3.61

package/SCSS-Themes/material.scss

@@ -147,6 +147,9 @@ $appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
 $appbar-bottom-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .16) !default;
 $appbar-top-shadow: 0 -2px 3px rgba(0, 0, 0, .1), 0 -2px 6px rgba(0, 0, 0, .2) !default;
 
+//TreeView
+$tree-node-text-color:#cc1351 !default;
+
 
 
 @if not variable-exists('is-roboto-loaded') {
@@ -24145,8 +24148,8 @@ $sd-active-font-color: $base-font !default;
 
 @include export-module('speed-dial-layout') {
   .e-speeddial-popup {
-    pointer-events: none;
     position: absolute;
+    z-index: 99999;
 
     &.e-speeddial-top {
       top: $sd-offset;
@@ -35567,9 +35570,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;
@@ -43008,7 +43008,7 @@ $dialog-btn-box-shadow: none !default;
 $dialog-bg-color: $grey-white !default;
 $dialog-icon-color: $grey-light-font !default;
 $dialog-active-icon-color: $grey-light-font !default;
-$dialog-close-button-left: 6px !default;
+$dialog-close-button-left: 0 !default;
 $dialog-close-button-right: 8px !default;
 $dialog-header-border: none !default;
 $dialog-border: none !default;
@@ -43070,7 +43070,7 @@ $dialog-bigger-close-icon-margin-left: -5px !default;
 $dialog-bigger-close-icon-margin-right: -5px !default;
 $dialog-bigger-close-button-bottom: 3px !default;
 $dialog-bigger-close-button-height: 36px !default;
-$dialog-bigger-close-button-left: 6px !default;
+$dialog-bigger-close-button-left: 3px !default;
 $dialog-bigger-close-button-width: 36px !default;
 $dialog-btn-border-color: transparent !default;
 $dialog-btn-bg-color: transparent !default;
@@ -53524,7 +53524,7 @@ $treeview-text-color: rgba($grey-light-font, .87) !default;
 $treeview-item-border-color: transparent !default;
 $treeview-item-active-bg: $grey-200 !default;
 $treeview-icon-active-color: rgba($grey-light-font, .54) !default;
-$treeview-text-active-color: $accent !default;
+$treeview-text-active-color: $tree-node-text-color !default;
 $treeview-item-active-border-color: $grey-200 !default;
 $treeview-item-hover-bg: $grey-100 !default;
 $treeview-icon-hover-color: rgba($grey-light-font, .54) !default;
@@ -54676,7 +54676,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;
@@ -56058,7 +56068,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -57316,7 +57326,7 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       position: absolute;
 
       .e-active .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: $ddt-readonly-input-bg-color;
           }
@@ -57324,7 +57334,7 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
       }
 
       .e-checkbox-wrapper {
-        .e-frame:not(.e-check) {
+        .e-frame:not(.e-check):not(.e-stop) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }
@@ -73597,8 +73607,8 @@ $grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
 $grid-rowcell-color: rgba($grid-content-font-color, $grid-conent-font-opacity) !default;
 $grid-reorderarrow-margin-top: -4.5px !default;
 $grid-reorderdownarrow-margin-top: 4.5px !default;
-$grid-reorder-arrow-top-margin: 0 !default;
-$grid-reorder-downarrow-top-margin: 0 !default;
+$grid-reorder-arrow-top-margin: 1px !default;
+$grid-reorder-downarrow-top-margin: -1px !default;
 $grid-sortnumber-font-size: 9px !default;
 $grid-header-text-transform: none !default;
 $grid-bigger-toolbar-icon-size: 18px !default;
@@ -74570,6 +74580,18 @@ $grid-dropitems-count-margin-left: -8px !default;
       }
     }
 
+    & .e-toolbar-items{
+      & .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon),
+      & .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon),
+      & .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+          background: none;
+          box-shadow: none;
+      }
+      & .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+          border: none;
+      }
+  }
+
     .e-res-toolbar {
       border-bottom: 1px solid;
       border-bottom-color: $grid-header-border-color;
@@ -76122,14 +76144,12 @@ $grid-dropitems-count-margin-left: -8px !default;
       font-size: $grid-group-down-arrow-icon-font-size;
       padding: $grid-group-down-arrow-icon-padding;
       text-decoration: none;
-      text-indent: $group-collapse-icon-text-indent;
     }
 
     .e-icon-grightarrow {
       font-size: $grid-group-right-arrow-icon-font-size;
       padding: $grid-group-right-arrow-icon-padding;
       text-decoration: none;
-      text-indent: $group-expand-icon-text-indent;
     }
 
     .e-recordplusexpand {
@@ -77336,7 +77356,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
   .e-gridheader .e-headercontent .e-reorderuparrow {
     @if $grid-skin == 'fluent' or $grid-skin == 'bootstrap5' {
-      margin-top: -9px;
+      margin-top: -2px;
     }
   }
 
@@ -80905,6 +80925,15 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
     }
   }
 
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
   .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
     height: 100%;
     width: 100%;
@@ -87759,12 +87788,12 @@ $bigger-column-menu-size: 38px !default;
       }
 
       .e-zero-spacing {
-        border-spacing: 0;
+        border-spacing: .25px;
       }
 
       .e-chart-row:first-child .e-chart-row-border {
         //border-width: 0;
-        border-top-color: transparent;
+        border-top: 0;
       }
 
       .e-chart-row {
@@ -88044,6 +88073,7 @@ $bigger-column-menu-size: 38px !default;
 
       .e-task-table {
         overflow: hidden;
+        border-collapse: separate;
       }
 
       .e-left-resize-gripper,
@@ -96646,7 +96676,19 @@ $pv-eye-icon-margin-top: 3px !default;
     height: 30px;
     min-height: 30px;
   }
-  
+  .e-bigger .e-pv-signature-dialog-height .e-pv-clearbtn{
+    float: left;
+    height: 49px;
+    min-height: 49px;
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-cancelbtn{
+    height: 49px;
+    min-height: 49px;
+  }
+  .e-bigger .e-pv-signature-dialog-height .e-pv-createbtn{
+    height: 49px;
+    min-height: 49px;
+  }
   
 
   .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-bold.e-pv-tbar-btn.e-tooltip.textprop-option-active,

package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss

@@ -356,9 +356,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/bootstrap.scss

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/bootstrap4.scss

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/bootstrap5-dark.scss

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/bootstrap5.scss

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/fabric-dark.scss

@@ -356,9 +356,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/fabric.scss

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/fluent-dark.scss

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/fluent.scss

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/highcontrast.scss

@@ -353,9 +353,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/material-dark.scss

@@ -356,9 +356,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/material.scss

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss

@@ -356,9 +356,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/context-menu/tailwind.scss

@@ -356,9 +356,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

package/SCSS-Themes/navigations/menu/bootstrap-dark.scss

@@ -788,7 +788,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/bootstrap.scss

@@ -789,7 +789,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/bootstrap4.scss

@@ -788,7 +788,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/bootstrap5-dark.scss

@@ -791,7 +791,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/bootstrap5.scss

@@ -791,7 +791,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/fabric-dark.scss

@@ -788,7 +788,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/fabric.scss

@@ -788,7 +788,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/fluent-dark.scss

@@ -791,7 +791,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/fluent.scss

@@ -791,7 +791,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/highcontrast.scss

@@ -789,7 +789,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/material-dark.scss

@@ -788,7 +788,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/material.scss

@@ -788,7 +788,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/tailwind-dark.scss

@@ -790,7 +790,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/menu/tailwind.scss

@@ -790,7 +790,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss

@@ -1173,7 +1173,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/bootstrap.scss

@@ -1168,7 +1168,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/bootstrap4.scss

@@ -1196,7 +1196,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss

@@ -1175,7 +1175,17 @@ $treeview-item-active-check-color: $primary !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/bootstrap5.scss

@@ -1175,7 +1175,17 @@ $treeview-item-active-check-color: $primary !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/fabric-dark.scss

@@ -1171,7 +1171,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/fabric.scss

@@ -1167,7 +1167,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;