devextreme-themebuilder 23.2.2-beta → 23.2.3

package/data/scss/widgets/fluent/pivotGrid/_index.scss

@@ -123,10 +123,6 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
   .dx-area-description-cell {
     .dx-pivotgrid-toolbar {
       padding-left: 8px;
-
-      .dx-button {
-        @include dx-button-flat-color-styling($base-text-color, $base-text-color, $base-text-color, color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.3));
-      }
     }
   }
 
@@ -137,15 +133,6 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
     }
   }
 
-  .dx-column-header,
-  .dx-filter-header {
-    .dx-pivotgrid-toolbar {
-      .dx-button {
-        @include dx-button-flat-color-styling($base-text-color, $base-text-color, $base-text-color, color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.3));
-      }
-    }
-  }
-
   .dx-expand-icon-container {
     margin: 0;
 

package/data/scss/widgets/fluent/progressBar/_colors.scss

@@ -21,11 +21,11 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p
 $progressbar-label-color: $base-text-color !default;
 
 @if $mode == "light" {
-  $progressbar-bg: darken($base-bg, 9.80) !default;
+  $progressbar-bg: darken($base-typography-bg, 7.84) !default;
 }
 
 @if $mode == "dark" {
-  $progressbar-bg: lighten($base-bg, 3.92) !default;
+  $progressbar-bg: lighten($base-typography-bg, 7.84) !default;
 }
 $never-used: collector((
 "$progressbar-bg": $progressbar-bg,

package/data/scss/widgets/fluent/radioButton/_index.scss

@@ -10,15 +10,11 @@
 
 // adduse
 
-$fluent-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-
 @include dx-radiobutton-icon-mixin(
   $fluent-radiobutton-size,
   $fluent-radiobutton-border-width,
   $fluent-radiobutton-dot-size,
   true,
-  $fluent-radiobutton-ripple-size,
-  $fluent-radiobutton-ripple-transition,
 );
 @include dx-radiobutton-states-mixin(
   $radiogroup-bg,
@@ -33,10 +29,14 @@ $fluent-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
   $radiobutton-invalid-color-focused,
   1,
   true,
-  $radiobutton-focused-ripple-bg,
-  $radiobutton-invalid-focused-ripple-bg,
 );
 
+.dx-radiobutton-icon {
+  &::after {
+    content: none;
+  }
+}
+
 .dx-radio-value-container {
   padding-inline-end: $fluent-radio-value-container-padding;
 }
@@ -140,9 +140,9 @@ $fluent-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .dx-state-disabled {
-  color: $base-foreground-disabled;
-  
   .dx-radiobutton {
+    color: $base-foreground-disabled;
+
     .dx-radiobutton-icon {
       border-color: $base-foreground-disabled;
     }

package/data/scss/widgets/fluent/radioButton/_sizes.scss

@@ -2,23 +2,16 @@
 
 // adduse
 
-$fluent-radiobutton-size: null !default;
-$fluent-radiobutton-dot-size: null !default;
-$fluent-radiobutton-ripple-size: null !default;
+$fluent-radiobutton-size: 16px !default;
+$fluent-radiobutton-dot-size: 10px !default;
 
 $fluent-radiobutton-border-width: 1px !default;
 $fluent-radio-value-container-padding: null !default;
 
 @if $size == "default" {
   $fluent-radio-value-container-padding: 12px !default;
-  $fluent-radiobutton-size: 16px !default;
-  $fluent-radiobutton-dot-size: 10px !default;
-  $fluent-radiobutton-ripple-size: 0 !default;
 }
 
 @else if $size == "compact" {
   $fluent-radio-value-container-padding: 8px !default;
-  $fluent-radiobutton-size: 16px !default;
-  $fluent-radiobutton-dot-size: 10px !default;
-  $fluent-radiobutton-ripple-size: 0 !default;
 }

package/data/scss/widgets/fluent/radioGroup/_colors.scss

@@ -21,5 +21,3 @@ $radiobutton-invalid-color-focused: $base-invalid-color-selected !default;
 $radiogroup-readonly-border-color: $radiogroup-border-color !default;
 
 $radiobutton-focused-bg: color.change($base-text-color, $alpha: 0.1) !default;
-$radiobutton-focused-ripple-bg: color.change($radiogroup-accent-color, $alpha: 0.1) !default;
-$radiobutton-invalid-focused-ripple-bg: color.change($base-invalid-color, $alpha: 0.1) !default;

package/data/scss/widgets/fluent/scheduler/_colors.scss

@@ -60,10 +60,17 @@ $agenda-appointment-text-color: $base-text-color !default;
 $header-panel-cell-date: null !default;
 
 @if $mode == "light" {
-  $scheduler-appointment-base-color: lighten($base-accent, 48%) !default;
   $scheduler-appointment-text-color: #000 !default;
   $scheduler-panel-text-color: #707070;
   $header-panel-cell-date: #424242;
+  
+  @if $color == "blue"{
+    $scheduler-appointment-base-color: lighten($base-accent, 48%) !default;
+  }
+  
+  @if $color == "saas" {
+    $scheduler-appointment-base-color: lighten($base-accent, 30%) !default;
+  } 
 }
 
 @if $mode == "dark" {

package/data/scss/widgets/fluent/scheduler/_index.scss

@@ -150,6 +150,18 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   padding: $fluent-scheduler-appointment-content-padding;
 }
 
+.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: $fluent-scheduler-recurring-appointment-content-padding;
+}
+
+.dx-rtl .dx-scheduler-appointment-content {
+  padding: $fluent-scheduler-appointment-content-padding-rtl;
+}
+
+.dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: $fluent-scheduler-recurring-appointment-content-padding-rtl;
+}
+
 .dx-scheduler-appointment-title {
   font-size: 12px;
 }
@@ -158,6 +170,14 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   font-size: 10px;
 }
 
+.dx-rtl .dx-scheduler-work-space-day {
+  .dx-scheduler-all-day-appointment {
+    .dx-scheduler-appointment-content {
+      padding: $fluent-scheduler-appointment-content-padding-rtl;
+    }
+  }
+}
+
 .dx-scheduler-work-space-week,
 .dx-scheduler-work-space-work-week,
 .dx-scheduler-work-space-day {
@@ -304,6 +324,16 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   }
 }
 
+.dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-appointment-content {
+    padding: 4px 12px 0 8px;
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: 4px 12px 0 20px;
+  }
+}
+
 .dx-scheduler-work-space.dx-scheduler-work-space-month {
   .dx-scheduler-header-panel-cell-date:last-child {
     color: $header-panel-cell-date;
@@ -316,6 +346,10 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     font-size: $fluent-scheduler-appointment-month-text-size;
   }
 
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: 4px 20px 0 12px;
+  }
+
   .dx-scheduler-date-table-first-of-month {
     border-left: $scheduler-first-of-month-border;
     border-top: $scheduler-first-of-month-border;
@@ -652,6 +686,18 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     width: 6px;
     height: 100%;
     background-color: $base-accent;
+  }
+}
+
+.dx-rtl.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) {
+  .dx-scheduler-appointment-strip {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+}
+
+.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color):not(.dx-rtl) {
+  .dx-scheduler-appointment-strip {
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
   }

package/data/scss/widgets/fluent/scheduler/_sizes.scss

@@ -13,6 +13,9 @@ $fluent-scheduler-appointment-tooltip-title-font-size: null !default;
 $fluent-scheduler-appointment-tooltip-date-font-size: null !default;
 $fluent-scheduler-workspace-month-cell-left-offset: null !default;
 $fluent-scheduler-appointment-content-padding: null !default;
+$fluent-scheduler-recurring-appointment-content-padding: null !default;
+$fluent-scheduler-appointment-content-padding-rtl: null !default;
+$fluent-scheduler-recurring-appointment-content-padding-rtl: null !default;
 $fluent-scheduler-dropdown-appointment-margin-top: null !default;
 $fluent-scheduler-dropdown-button-height: null !default;
 $fluent-scheduler-dropdown-button-padding: null !default;
@@ -72,6 +75,9 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-workspace-month-cell-left-offset: 8px !default;
 
   $fluent-scheduler-appointment-content-padding: 6px 8px 6px 12px !default;
+  $fluent-scheduler-recurring-appointment-content-padding: 6px 20px 6px 12px !default;
+  $fluent-scheduler-appointment-content-padding-rtl: 6px 12px 6px 8px !default;
+  $fluent-scheduler-recurring-appointment-content-padding-rtl: 6px 12px 6px 20px !default;
   $fluent-scheduler-dropdown-appointment-margin-top: 7px !default;
   $fluent-scheduler-dropdown-button-height: 22px !default;
   $fluent-scheduler-dropdown-button-padding: 4px !default;
@@ -101,6 +107,9 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-workspace-month-cell-left-offset: 4px !default;
 
   $fluent-scheduler-appointment-content-padding: 4px 6px 4px 8px !default;
+  $fluent-scheduler-recurring-appointment-content-padding: 4px 16px 4px 8px !default;
+  $fluent-scheduler-appointment-content-padding-rtl: 4px 8px 4px 6px !default;
+  $fluent-scheduler-recurring-appointment-content-padding-rtl: 4px 8px 4px 16px !default;
   $fluent-scheduler-dropdown-appointment-margin-top: 3px !default;
   $fluent-scheduler-dropdown-button-height: 18px !default;
   $fluent-scheduler-dropdown-button-padding: 2px !default;

package/data/scss/widgets/fluent/scrollable/_colors.scss

@@ -6,7 +6,7 @@ $scrollable-scroll-bg: getCustomVar(("$scrollable-scroll-bg")) !default;
 
 // adduse
 
-$scrollable-bg: $base-bg !default;
+$scrollable-bg: $base-element-bg !default;
 $scrollable-scroll-bg: null !default;
 $scrollable-scrollbar-bg: transparent !default;
 

package/data/scss/widgets/fluent/selectBox/_colors.scss

@@ -5,7 +5,7 @@ $selectbox-list-bg: getCustomVar(("$selectbox-list-bg")) !default;
 @use "../colors" as *;
 
 // adduse
-$selectbox-list-bg: $base-bg !default;
+$selectbox-list-bg: $base-element-bg !default;
 $never-used: collector((
 "$selectbox-list-bg": $selectbox-list-bg,
 ));

package/data/scss/widgets/fluent/slider/_colors.scss

@@ -8,7 +8,7 @@ $fluent-slider-tooltip-color: getCustomVar(("$fluent-slider-tooltip-color")) !de
 @use "../color" as extcolor;
 
 // adduse
-$fluent-slider-bar-bg: $base-neutral-foreground3 !default;
+$fluent-slider-bar-bg: $base-border-color-accessible !default;
 $slider-accent-color: $base-accent !default;
 $slider-accent-color-hover: $base-accent-hover !default;
 $slider-accent-color-focused: $base-accent-active !default;
@@ -19,8 +19,7 @@ $slider-invalid-color-focused: $base-invalid-color-selected !default;
 
 $fluent-slider-disabled-bg: $base-foreground-disabled !default;
 $fluent-slider-bar-disabled-bg: $base-background-disabled !default;
-$fluent-slider-tooltip-bg: $base-accent !default;
-$fluent-slider-tooltip-color: $base-inverted-text-color !default;
+$fluent-slider-tooltip-color: $base-text-color !default;
 $never-used: collector((
 "$fluent-slider-bar-bg": $fluent-slider-bar-bg,
 "$slider-accent-color": $slider-accent-color,

package/data/scss/widgets/fluent/slider/_index.scss

@@ -47,7 +47,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
   border-width: 1px;
   border-style: solid;
   border-color: $base-border-color;
-  background-color: $base-bg;
+  background-color: $base-element-bg;
 
   &::after {
     position: absolute;
@@ -58,7 +58,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
     border-radius: $fluent-slider-radius;
     border-width: 3px;
     border-style: solid;
-    border-color: $base-bg;
+    border-color: $base-element-bg;
   }
 
   &.dx-state-hover {
@@ -79,6 +79,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
     .dx-overlay-content {
       .dx-popup-content {
         line-height: normal;
+        color: $fluent-slider-tooltip-color;
 
         .dx-slider-tooltip-position-top & {
           padding-top: 6px;
@@ -172,11 +173,3 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
     background: $fluent-slider-disabled-bg;
   }
 }
-
-.dx-rtl {
-  &.dx-state-disabled {
-    .dx-overlay-content {
-      margin-left: -13px;
-    }
-  }
-}

package/data/scss/widgets/fluent/slider/_sizes.scss

@@ -9,19 +9,19 @@ $fluent-slider-top-tooltip-margin: null !default;
 
 $fluent-slider-height: 28px !default; // for fieldset height
 $fluent-slider-radius: 50% !default;
-$fluent-slider-track-height: null !default; // 2px !default;
+$fluent-slider-track-height: null !default;
 $fluent-slider-track-border-radius: 2px !default;
 $fluent-slider-handle-active-border-width: 2px !default;
 $fluent-slider-handle-height: null !default;
-$fluent-slider-handle-inner-size: null !default; // 12px !default;
+$fluent-slider-handle-inner-size: null !default;
 $fluent-slider-handle-inner-border-width: 1px !default;
 $fluent-slider-handle-inner-disabled-size: 2px !default;
 
 @if $size == "default" {
   $fluent-slider-track-height: 4px !default;
   $fluent-slider-handle-height: 18px !default;
-  $fluent-slider-handle-size: 20px !default; // 32px !default;
-  $fluent-slider-handle-inner-size: 18px !default; // 12px !default;
+  $fluent-slider-handle-size: 20px !default;
+  $fluent-slider-handle-inner-size: 18px !default;
   $fluent-slider-wrapper-height: 32px !default;
   $fluent-slider-tooltip-width: 34px !default;
   $fluent-slider-top-tooltip-margin: -5px !default;
@@ -30,8 +30,8 @@ $fluent-slider-handle-inner-disabled-size: 2px !default;
 @else if $size == "compact" {
   $fluent-slider-track-height: 2px !default;
   $fluent-slider-handle-height: 14px !default;
-  $fluent-slider-handle-size: 16px !default; // 26px !default;
-  $fluent-slider-handle-inner-size: 14px !default; // 12px !default;
+  $fluent-slider-handle-size: 16px !default;
+  $fluent-slider-handle-inner-size: 14px !default;
   $fluent-slider-wrapper-height: 26px !default;
   $fluent-slider-tooltip-width: 28px !default;
   $fluent-slider-top-tooltip-margin: -2px !default;

package/data/scss/widgets/fluent/switch/_colors.scss

@@ -15,7 +15,7 @@ $switch-accent-color-focused: $base-accent-active !default;
 $switch-bg: transparent !default;
 $switch-handle-off-bg: $base-border-color-accessible !default;
 $switch-on-bg: $base-accent !default;
-$switch-handle-on-bg: $base-bg !default;
+$switch-handle-on-bg: $base-element-bg !default;
 $switch-handle-border-radius: 50% !default;
 $switch-hover-bg: transparent !default;
 $switch-on-disabled-bg: $base-background-disabled !default;

package/data/scss/widgets/fluent/tabPanel/_index.scss

@@ -9,7 +9,13 @@
 
 .dx-tabpanel {
   .dx-tabpanel-tab {
+    flex-basis: unset;
     flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .dx-tabs .dx-tabs-scrollable .dx-tab {
+    flex-basis: auto;
   }
 
   .dx-tabs-nav-button {

package/data/scss/widgets/fluent/tabs/layout/tab/_base.scss

@@ -9,6 +9,7 @@
 @use "../../variables/colors" as *;
 @use "../../variables/sizes" as *;
 @use "../../mixins" as *;
+@use "../../../common/sizes" as *;
 
 // adduse
 @use "../../../scrollable";
@@ -20,7 +21,6 @@
 .dx-tab {
   gap: $fluent-tabs-item-gap;
   padding: $fluent-tabs-item-padding;
-  min-width: 0;
   background-color: $tabs-tab-background;
   color: $tabs-tab-color;
 
@@ -35,23 +35,19 @@
       color: $tabs-tab-icon-selected-color;
     }
 
-    .dx-tab-text {
+    .dx-tab-text .dx-tab-text-span {
       visibility: visible;
 
-      &::after {
+      .dx-tab-text-span-pseudo {
         visibility: hidden;
       }
     }
   }
 
-  &.dx-state-focused {
-    background-color: $tabs-focused-tab-bg-color;
-  }
-
   &.dx-state-disabled {
     color: $tabs-tab-disabled-color;
 
-    .dx-tab-text::after {
+    .dx-tab-text .dx-tab-text-span-pseudo {
       color: $tabs-tab-disabled-color;
     }
 
@@ -60,22 +56,28 @@
     }
   }
 
-  &.dx-state-active,
-  &.dx-state-active .dx-inkripple-wave {
+  &.dx-state-active {
     background-color: $tabs-active-tab-bg-color;
   }
 
   .dx-tab-text {
-    position: relative;
     column-gap: $fluent-base-icon-margin;
-    line-height: $fluent-tab-text-line-height;
-    font-weight: $fluent-tab-font-weight-accent;
-    visibility: hidden;
+    row-gap: $fluent-tabs-item-gap;
+    line-height: $fluent-line-height;
+
+    .dx-tab-text-span {
+      position: relative;
+      display: block;
+      font-weight: $fluent-tab-font-weight-accent;
+      visibility: hidden;
+    }
 
-    &::after {
-      content: string.unquote("attr(DATA-DX_TEXT)");
+    .dx-tab-text-span-pseudo {
       position: absolute;
-      width: 100%;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       pointer-events: none;
       color: $tabs-tab-color;
       font-weight: $fluent-tab-font-weight-basic;
@@ -88,14 +90,25 @@
     visibility: visible;
 
     @include dx-icon-sizing($fluent-tabs-icon-size);
+
+    width: 1em;
+    height: 1em;
+    line-height: 1;
   }
 
   .dx-tabs-item-badge {
+    align-self: center;
     min-width: $fluent-badge-min-size;
     min-height: $fluent-badge-min-size;
   }
 }
 
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: $tabs-focused-tab-bg-color;
+  }
+}
+
 .dx-tabs-icon-position-start .dx-tab-text::after {
   text-align: end;
 }
@@ -105,13 +118,11 @@
 }
 
 .dx-tabs-icon-position-top .dx-tab-text::after {
-  bottom: 0;
   text-align: center;
   vertical-align: bottom;
 }
 
 .dx-tabs-icon-position-bottom .dx-tab-text::after {
-  top: 0;
   text-align: center;
   vertical-align: top;
 }

package/data/scss/widgets/fluent/tabs/layout/tabs/_index.scss

@@ -18,10 +18,6 @@
   padding: 0;
   background-color: $tabs-tab-background;
 
-  .dx-inkripple {
-    overflow: hidden;
-  }
-
   .dx-scrollable {
     flex-basis: 100%;
   }

package/data/scss/widgets/fluent/tabs/variables/_colors.scss

@@ -32,11 +32,11 @@ $tabs-tab-icon-selected-color: $base-accent !default;
 $tabs-tab-icon-disabled-color: $base-foreground-disabled !default;
 $tabs-tab-button-disabled-opacity: 0 !default;
 $tabs-hovered-tab-bg-color: transparent !default;
-$tabs-focused-tab-bg-color: $base-bg-hover !default;
-$tabs-tab-bg-color-hover-primary: $base-bg-hover !default;
-$tabs-tab-bg-color-focus-primary: $base-bg-hover !default;
-$tabs-tab-bg-color-active-primary: $base-bg-selected !default;
-$tabs-active-tab-bg-color: $base-bg !default;
+$tabs-focused-tab-bg-color: $base-hover-bg !default;
+$tabs-tab-bg-color-hover-primary: $base-hover-bg !default;
+$tabs-tab-bg-color-focus-primary: $base-hover-bg !default;
+$tabs-tab-bg-color-active-primary: $base-selected-bg !default;
+$tabs-active-tab-bg-color: $base-element-bg !default;
 $tabs-nav-button-bg-color: transparent !default;
 $never-used: collector((
 "$tabs-tab-color": $tabs-tab-color,

package/data/scss/widgets/fluent/tabs/variables/_sizes.scss

@@ -9,11 +9,10 @@ $fluent-tabs-item-padding-top-bottom: null !default;
 $fluent-tabs-item-padding-right-left: null !default;
 $fluent-tab-height: null !default;
 
-$fluent-tab-text-line-height: null !default;
 $fluent-tab-font-weight-basic: 400 !default;
 $fluent-tab-font-weight-accent: 500 !default;
 $fluent-base-icon-margin: null !default;
-$fluent-tabs-icon-size: null !default;
+$fluent-tabs-icon-size: $fluent-base-icon-size !default;
 
 $fluent-tab-nav-button-icon-width: null !default;
 $fluent-tab-nav-button-icon-height: null !default;
@@ -39,8 +38,6 @@ $fluent-badge-min-size: null !default;
   $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
   $fluent-tab-height: auto !default;
   $fluent-base-icon-margin: 8px !default;
-  $fluent-tabs-icon-size: 20px !default;
-  $fluent-tab-text-line-height: 20px !default;
   $fluent-tab-nav-button-icon-width: 20px !default;
   $fluent-tab-nav-button-icon-height: 20px !default;
   $fluent-tab-nav-button-icon-font-size: 20px !default;
@@ -55,8 +52,6 @@ $fluent-badge-min-size: null !default;
   $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
   $fluent-tab-height: auto !default;
   $fluent-base-icon-margin: 8px !default;
-  $fluent-tabs-icon-size: 16px !default;
-  $fluent-tab-text-line-height: 16px !default;
   $fluent-tab-nav-button-icon-width: 16px !default;
   $fluent-tab-nav-button-icon-height: 16px !default;
   $fluent-tab-nav-button-icon-font-size: 16px !default;

package/data/scss/widgets/fluent/tagBox/_colors.scss

@@ -12,7 +12,7 @@ $tagbox-tag-button-remove-bg: getCustomVar(("$tagbox-tag-button-remove-bg")) !de
 // adduse
 $tagbox-tag-color: $base-text-color !default;
 $tagbox-tag-bg: null !default;
-$tagbox-tag-hover-bg: $typography-bg !default;
+$tagbox-tag-hover-bg: $base-typography-bg !default;
 $tagbox-tag-active-color: $base-text-color !default;
 $tagbox-tag-button-remove-bg: $base-icon-color !default;
 $tagbox-tag-border-color-focused: $base-accent-active !default;
@@ -21,11 +21,11 @@ $tagbox-tag-foreground-disabled: $base-foreground-disabled !default;
 $tagbox-tag-disabled: $base-background-disabled !default;
 
 @if $mode == "light" {
-  $switch-bg: darken($base-bg, 5.88) !default;
+  $tagbox-tag-bg: darken($base-hover-bg, 1.96) !default;
 }
 
 @if $mode == "dark" {
-  $switch-bg: darken($base-bg, 12.16) !default;
+  $tagbox-tag-bg: darken($base-element-bg, 12.16) !default;
 }
 $never-used: collector((
 "$tagbox-tag-color": $tagbox-tag-color,