@syncfusion/blazor-themes 20.3.61 → 20.4.38

package/SCSS-Themes/image-editor/image-editor/highcontrast.scss

@@ -21,6 +21,7 @@ $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;
 $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
+$image-editor-contextual-toolbar: $bg-base-0 !default;
 
 @include export-module('image-editor-layout') {
 
@@ -28,7 +29,13 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
     & .e-img-font-style.e-template{
       margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
+
+    & .e-slider-container {
+      margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+      height: 54px !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
+
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
     & .e-toolbar {
@@ -224,6 +231,38 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
     & .e-bottom-toolbar {
       border-top: $image-editor-border;
     }
+
+    & .e-contextual-toolbar-wrapper {
+      width: 100%;
+      z-index: 1;
+
+      & .e-toolbar {
+        height: 130px !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      & .e-toolbar-item {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+
+        & .filterwrapper {
+          border: 2px solid transparent;
+          height: 100px;
+        }
+      }
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-top: 2px solid;
+      }
+
+      & .e-slider-container {
+        margin-left: calc(50% - 137px);
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 }
 
@@ -232,6 +271,17 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
   .e-image-editor {
     background: $image-editor-background;
 
+    & .e-contextual-toolbar-wrapper {
+      background: $image-editor-contextual-toolbar;
+      border-top: $image-editor-border;
+      border-bottom: $image-editor-border;
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-color: $btn-active-bgcolor;
+      }
+    }
+
     & .e-toolbar {
       & .e-toolbar-items {
         & .e-tbar-btn.e-btn {

package/SCSS-Themes/image-editor/image-editor/material-dark.scss

@@ -21,6 +21,7 @@ $image-editor-tbar-height: 40px !default;
 $image-editor-bigger-tbar-height: 48px !default;
 $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
+$image-editor-contextual-toolbar: $grey-900 !default;
 
 @include export-module('image-editor-layout') {
 
@@ -28,7 +29,13 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
     & .e-img-font-style.e-template{
       margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
+
+    & .e-slider-container {
+      margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+      height: 54px !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
+
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
     & .e-toolbar {
@@ -224,6 +231,38 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
     & .e-bottom-toolbar {
       border-top: $image-editor-border;
     }
+
+    & .e-contextual-toolbar-wrapper {
+      width: 100%;
+      z-index: 1;
+
+      & .e-toolbar {
+        height: 130px !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      & .e-toolbar-item {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+
+        & .filterwrapper {
+          border: 2px solid transparent;
+          height: 100px;
+        }
+      }
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-top: 2px solid;
+      }
+
+      & .e-slider-container {
+        margin-left: calc(50% - 137px);
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 }
 
@@ -232,6 +271,17 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
   .e-image-editor {
     background: $image-editor-background;
 
+    & .e-contextual-toolbar-wrapper {
+      background: $image-editor-contextual-toolbar;
+      border-top: $image-editor-border;
+      border-bottom: $image-editor-border;
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-color: $btn-active-bgcolor;
+      }
+    }
+
     & .e-toolbar {
       & .e-toolbar-items {
         & .e-tbar-btn.e-btn {

package/SCSS-Themes/image-editor/image-editor/material.scss

@@ -21,6 +21,7 @@ $image-editor-tbar-height: 40px !default;
 $image-editor-bigger-tbar-height: 48px !default;
 $image-editor-tbar-btn-fontsize: 16px !default;
 $image-editor-bigger-tbar-btn-fontsize: 18px !default;
+$image-editor-contextual-toolbar: $grey-50 !default;
 
 @include export-module('image-editor-layout') {
 
@@ -28,7 +29,13 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
     & .e-img-font-style.e-template{
       margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
+
+    & .e-slider-container {
+      margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+      height: 54px !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
+
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
     & .e-toolbar {
@@ -224,6 +231,38 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
     & .e-bottom-toolbar {
       border-top: $image-editor-border;
     }
+
+    & .e-contextual-toolbar-wrapper {
+      width: 100%;
+      z-index: 1;
+
+      & .e-toolbar {
+        height: 130px !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      & .e-toolbar-item {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+
+        & .filterwrapper {
+          border: 2px solid transparent;
+          height: 100px;
+        }
+      }
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-top: 2px solid;
+      }
+
+      & .e-slider-container {
+        margin-left: calc(50% - 137px);
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 }
 
@@ -232,6 +271,17 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
   .e-image-editor {
     background: $image-editor-background;
 
+    & .e-contextual-toolbar-wrapper {
+      background: $image-editor-contextual-toolbar;
+      border-top: $image-editor-border;
+      border-bottom: $image-editor-border;
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-color: $btn-active-bgcolor;
+      }
+    }
+
     & .e-toolbar {
       & .e-toolbar-items {
         & .e-tbar-btn.e-btn {

package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss

@@ -21,6 +21,7 @@ $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;
 $image-editor-tbar-btn-fontsize: $text-lg !default;
 $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
+$image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 @include export-module('image-editor-layout') {
 
@@ -28,7 +29,13 @@ $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
     & .e-img-font-style.e-template{
       margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
+
+    & .e-slider-container {
+      margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+      height: 54px !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
+
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
     & .e-toolbar {
@@ -224,6 +231,38 @@ $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
     & .e-bottom-toolbar {
       border-top: $image-editor-border;
     }
+
+    & .e-contextual-toolbar-wrapper {
+      width: 100%;
+      z-index: 1;
+
+      & .e-toolbar {
+        height: 130px !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      & .e-toolbar-item {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+
+        & .filterwrapper {
+          border: 2px solid transparent;
+          height: 100px;
+        }
+      }
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-top: 2px solid;
+      }
+
+      & .e-slider-container {
+        margin-left: calc(50% - 137px);
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 }
 
@@ -232,6 +271,17 @@ $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
   .e-image-editor {
     background: $image-editor-background;
 
+    & .e-contextual-toolbar-wrapper {
+      background: $image-editor-contextual-toolbar;
+      border-top: $image-editor-border;
+      border-bottom: $image-editor-border;
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-color: $btn-active-bgcolor;
+      }
+    }
+
     & .e-toolbar {
       & .e-toolbar-items {
         & .e-tbar-btn.e-btn {

package/SCSS-Themes/image-editor/image-editor/tailwind.scss

@@ -21,6 +21,7 @@ $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;
 $image-editor-tbar-btn-fontsize: $text-lg !default;
 $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
+$image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 @include export-module('image-editor-layout') {
 
@@ -28,7 +29,13 @@ $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
     & .e-img-font-style.e-template{
       margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
+
+    & .e-slider-container {
+      margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+      height: 54px !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
+
   .e-bigger .e-image-editor,
   .e-image-editor.e-bigger {
     & .e-toolbar {
@@ -224,6 +231,38 @@ $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
     & .e-bottom-toolbar {
       border-top: $image-editor-border;
     }
+
+    & .e-contextual-toolbar-wrapper {
+      width: 100%;
+      z-index: 1;
+
+      & .e-toolbar {
+        height: 130px !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      & .e-toolbar-item {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+
+        & .filterwrapper {
+          border: 2px solid transparent;
+          height: 100px;
+        }
+      }
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-top: 2px solid;
+      }
+
+      & .e-slider-container {
+        margin-left: calc(50% - 137px);
+        height: 54px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
 }
 
@@ -232,6 +271,17 @@ $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
   .e-image-editor {
     background: $image-editor-background;
 
+    & .e-contextual-toolbar-wrapper {
+      background: $image-editor-contextual-toolbar;
+      border-top: $image-editor-border;
+      border-bottom: $image-editor-border;
+
+      & .e-toolbar-item:hover .filterwrapper,
+      & .e-toolbar-item.e-selected .filterwrapper{
+        border-color: $btn-active-bgcolor;
+      }
+    }
+
     & .e-toolbar {
       & .e-toolbar-items {
         & .e-tbar-btn.e-btn {

package/SCSS-Themes/inputs/color-picker/bootstrap-dark.scss

@@ -1434,7 +1434,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1449,7 +1449,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/bootstrap.scss

@@ -1431,7 +1431,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1446,7 +1446,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/bootstrap4.scss

@@ -1430,7 +1430,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1445,7 +1445,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/bootstrap5-dark.scss

@@ -1436,7 +1436,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1451,7 +1451,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/bootstrap5.scss

@@ -1436,7 +1436,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1451,7 +1451,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/fabric-dark.scss

@@ -1434,7 +1434,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.66% - 4px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1449,7 +1449,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.66% - 4px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/fabric.scss

@@ -1430,7 +1430,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.66% - 4px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1445,7 +1445,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.66% - 4px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/fluent-dark.scss

@@ -1436,7 +1436,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1451,7 +1451,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/fluent.scss

@@ -1436,7 +1436,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1451,7 +1451,7 @@ $cpicker-split-btn-border: 1px solid $border !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/highcontrast.scss

@@ -1430,7 +1430,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.67% - 2.7px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1445,7 +1445,7 @@ $cpicker-blazor-bigger-input-margin: calc(1.67% - 2.7px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/material-dark.scss

@@ -1438,7 +1438,7 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.28px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1453,7 +1453,7 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.28px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/material.scss

@@ -1433,7 +1433,7 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1448,7 +1448,7 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss

@@ -1435,7 +1435,7 @@ $cpicker-handler-tooltip-color: $white !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1450,7 +1450,7 @@ $cpicker-handler-tooltip-color: $white !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }

package/SCSS-Themes/inputs/color-picker/tailwind.scss

@@ -1435,7 +1435,7 @@ $cpicker-handler-tooltip-color: $white !default;
         @if $skin-name == 'bootstrap4' {
           background-color: $cpicker-handler-tooltip-color;
           border-color: $gray-700;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $gray-700;
         }
@@ -1450,7 +1450,7 @@ $cpicker-handler-tooltip-color: $white !default;
       &:active {
         @if $skin-name == 'bootstrap4' {
           background-color: $gray-600;
-          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, .15), .5);
+          $color-rgba: rgba(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
           box-shadow: 0 0 0 .2rem $color-rgba;
           color: $cpicker-handler-tooltip-color;
         }