devextreme-themebuilder 23.2.2-beta → 23.2.3

package/data/scss/widgets/base/_tabPanel.scss

@@ -16,6 +16,10 @@
   }
 }
 
+.dx-tabpanel-tab {
+  flex-basis: unset;
+}
+
 .dx-tabpanel-tabs-position-right {
   flex-direction: row-reverse;
   
@@ -36,16 +40,10 @@
   }
 }
 
-.dx-tabpanel-tabs {
+.dx-tabpanel .dx-tabpanel-tabs {
   .dx-tabs {
     height: 100%;
   }
-
-  .dx-tab {
-    flex-basis: unset;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
 }
 
 .dx-tabpanel-container {

package/data/scss/widgets/base/_tabs.scss

@@ -27,9 +27,21 @@
   &.dx-overflow-hidden {
     overflow: hidden;
   }
+
+  &.dx-tabs-vertical .dx-tabs-wrapper .dx-tab-text {
+    white-space: normal;
+  }
+
+  .dx-tab-text-span,
+  .dx-tab-text-span-pseudo {
+    width: 100%;
+
+    @include dx-overflow();
+  }
 }
 
 .dx-tabs-scrollable {
+  width: 100%;
   overflow: hidden;
 
   .dx-tabs-wrapper {
@@ -59,15 +71,25 @@
   .dx-tab {
     flex-basis: unset;
     flex-grow: 1;
-    min-width: 0;
   }
 }
 
+.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+  flex-basis: 100%;
+  min-width: max-content;
+}
+
+.dx-tabs:not(.dx-tabs-scrolling-enabled) {
+  min-width: min-content;
+}
+
 .dx-tab {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
+  flex-basis: 100%;
+  min-width: max-content;
   cursor: pointer;
 
   @include dx-tabs-link();
@@ -90,9 +112,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   -webkit-user-drag: none;
-
-  @include dx-overflow();
 }
 
 .dx-tabs-nav-button {
@@ -113,6 +134,10 @@
   flex-direction: column;
   width: auto;
 
+  .dx-tab {
+    min-width: 0;
+  }
+
   .dx-tabs-wrapper {
     flex-direction: column;
     height: auto;
@@ -137,9 +162,11 @@
 }
 
 .dx-tabs-icon-position-top .dx-tab-text {
+  text-align: center;
   flex-direction: column;
 }
 
 .dx-tabs-icon-position-bottom .dx-tab-text {
+  text-align: center;
   flex-direction: column-reverse;
 }

package/data/scss/widgets/base/dateRangeBox/_index.scss

@@ -13,6 +13,7 @@
       &.dx-editor-outlined {
         border: 0;
         box-shadow: none;
+        background-color: transparent;
 
         &.dx-texteditor-with-label,
         &.dx-texteditor-with-floating-label {
@@ -34,6 +35,7 @@
 
     &.dx-editor-underlined {
       border-bottom: 0;
+      background-color: transparent;
 
       &::before {
         margin-left: 0;

package/data/scss/widgets/base/filterBuilder/_index.scss

@@ -93,8 +93,10 @@ $filterbuilder-menu-icon-color: null !default;
   .dx-treeview-item {
     .dx-icon {
       color: $filterbuilder-menu-icon-color;
-
-      @include dx-icon-sizing(14px);
     }
   }
+
+  .dx-treeview-expander-icon-stub {
+    display: none;
+  }
 }

package/data/scss/widgets/base/list/_index.scss

@@ -27,27 +27,8 @@ $list-searchbox-margin-bottom: 5px;
 }
 
 .dx-list-group-header {
-  &::before {
-    width: 0;
-    height: 0;
-    display: block;
-    float: right;
-    margin-top: 6px;
-    border-style: solid;
-    border-color: transparent;
-    border-width: 5px 5px 0 5px;
-  }
-
   .dx-list-collapsible-groups & {
     cursor: pointer;
-
-    &::before {
-      content: ' ';
-    }
-  }
-
-  .dx-list-group-collapsed &::before {
-    border-width: 0 5px 5px 5px;
   }
 }
 

package/data/scss/widgets/base/lookup/_mixins.scss

@@ -1,24 +1,29 @@
 @use "../icons" as *;
 
 @mixin dx-lookup-arrow(
-  $arrow-icon,
-  $arrow-icon-glyph-rtl,
-  $arrow-width,
-  $arrow-color,
-  $arrow-icon-size,
+  $spin-icon-glyph,
+  $spin-icon-glyph-rtl,
+  $arror-width,
+  $icon-color,
+  $icon-color-active,
+  $icon-size,
 ) {
   .dx-lookup-arrow {
-    @include dx-icon($arrow-icon);
+    @include dx-icon($spin-icon-glyph);
   
     .dx-rtl & {
       &::before {
-        content: $arrow-icon-glyph-rtl;
+        content: $spin-icon-glyph-rtl;
       }
     }
   
-    width: $arrow-width;
-    color: $arrow-color;
+    width: $arror-width;
+    color: $icon-color;
+
+    .dx-dropdowneditor-active & {
+      color: $icon-color-active;
+    }
   
-    @include dx-icon-font-centered-sizing($arrow-icon-size);
+    @include dx-icon-font-centered-sizing($icon-size);
   }
 }

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

@@ -432,16 +432,6 @@ $scheduler-appointment-form-label-padding: 20px;
     }
   }
 
-  .dx-scheduler-appointment-recurrence {
-    .dx-scheduler-appointment-content {
-      padding: $scheduler-appointment-recurrence-content-padding;
-
-      .dx-rtl & {
-        padding: $scheduler-appointment-recurrence-content-padding-rtl;
-      }
-    }
-  }
-
   .dx-scheduler-appointment-content {
     padding: $scheduler-appointment-content-padding;
     cursor: pointer;

package/data/scss/widgets/base/scheduler/appointment/regular/_index.scss

@@ -53,7 +53,7 @@ $reduced-icon-offset: null !default;
           background-color: $appointment-active-color;
           border-radius: 4px;
         }
-        
+
         &.dx-scheduler-appointment-has-resource-color:not(.dx-scheduler-appointment-drag-source)::before {
           @include dx-scheduler-appointment-shadow-color-mixin();
         }
@@ -133,13 +133,11 @@ $reduced-icon-offset: null !default;
     top: 3px;
     right: $reduced-icon-offset;
 
-    @include dx-icon(arrowright);
+    @include dx-icon(arrowback);
 
     .dx-rtl & {
       right: auto;
       left: 3px;
-
-      @include dx-icon(arrowleft);
     }
   }
 

package/data/scss/widgets/base/textEditor/_mixins.scss

@@ -12,7 +12,7 @@
   $label-font-size,
   $label-offset-y,
   $label-height,
-  $base-bg
+  $label-backdrop-bg
 ) {
   .dx-label {
     border-top-width: 0;
@@ -27,7 +27,7 @@
     }
 
     &::before {
-      background-color: $base-bg;
+      background-color: $label-backdrop-bg;
     }
   }
 
@@ -139,7 +139,7 @@
   $label-backdrop-offset-y,
   $label-before-min-width,
   $label-after-min-width,
-  $base-bg,
+  $label-backdrop-bg,
   $texteditor-border,
   $texteditor-border-color,
   $texteditor-border-bottom-color,
@@ -238,6 +238,7 @@
             height: 3px;
             top: -$label-backdrop-offset-y;
             margin-inline-start: -2px;
+            background-color: $label-backdrop-bg;
           }
         }
       }
@@ -248,12 +249,6 @@
       outline: none;
       margin-top: $label-offset-y;
   
-      .dx-label {
-        &::before {
-          background-color: $base-bg;
-        }
-      }
-  
       &.dx-texteditor:not(.dx-daterangebox) {
         border: $texteditor-border;
         box-shadow: none;
@@ -353,7 +348,7 @@
             $texteditor-label-font-size,
             $label-offset-y,
             $label-active-height,
-            $base-bg
+            $label-backdrop-bg
           );
         }
   

package/data/scss/widgets/base/treeView/_index.scss

@@ -58,6 +58,7 @@
   .dx-state-selected {
     > .dx-treeview-item {
       color: $item-selected-color;
+      border-radius: $border-radius;
     }
   }
 

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

@@ -1,23 +1,28 @@
 $base-accent: getCustomVar(("$base-accent")) !default;
 $base-font-family: getCustomVar(("$base-font-family")) !default;
+$base-typography-bg: getCustomVar(("$base-typography-bg")) !default;
 $base-bg: getCustomVar(("$base-bg")) !default;
+$base-hover-bg: getCustomVar(("$base-hover-bg")) !default;
+$base-active-bg: getCustomVar(("$base-active-bg")) !default;
+$base-selected-bg: getCustomVar(("$base-selected-bg")) !default;
 $base-border-color: getCustomVar(("$base-border-color")) !default;
+$base-border-color-accessible: getCustomVar(("$base-border-color-accessible")) !default;
 $base-success: getCustomVar(("$base-success")) !default;
 $base-warning: getCustomVar(("$base-warning")) !default;
 $base-danger: getCustomVar(("$base-danger")) !default;
 $base-text-color: getCustomVar(("$base-text-color")) !default;
+$base-label-color: getCustomVar(("$base-label-color")) !default;
+$base-icon-color: getCustomVar(("$base-icon-color")) !default;
 $base-hover-color: getCustomVar(("$base-hover-color")) !default;
-$base-hover-bg: getCustomVar(("$base-hover-bg")) !default;
 $base-focus-color: getCustomVar(("$base-focus-color")) !default;
 $base-focus-bg: getCustomVar(("$base-focus-bg")) !default;
-$base-label-color: getCustomVar(("$base-label-color")) !default;
-$base-icon-color: getCustomVar(("$base-icon-color")) !default;
 $base-spin-icon-color: getCustomVar(("$base-spin-icon-color")) !default;
 $base-link-color: getCustomVar(("$base-link-color")) !default;
 
 @forward "./variables";
 @use "./variables" as *;
 @use "sass:color";
+
 $color: null !default;
 $mode: null !default;
 
@@ -29,18 +34,11 @@ $base-accent-selected: null !default;
 
 $fluent-color-theme-modificator: null !default;
 $base-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif !default; // stylelint-disable-line value-keyword-case
+$base-typography-bg: null !default;
 $base-bg: null !default;
-$base-bg-hover: null !default;
-$base-bg-active: null !default;
-$base-bg-selected: null !default;
-
-$typography-bg: null !default;
-
-$base-accent-bg: null !default;
-
-$base-neutral-foreground2: null !default;
-$base-neutral-foreground3: null !default;
-$base-neutral-foreground4: null !default;
+$base-hover-bg: null !default;
+$base-active-bg: null !default;
+$base-selected-bg: null !default;
 $base-border-color: null !default;
 $base-border-color-hover: null !default;
 $base-border-color-focused: null !default;
@@ -56,9 +54,6 @@ $base-shadow-color: null !default;
 $base-foreground-disabled: null !default;
 $base-background-disabled: null !default;
 $base-success: null !default;
-$base-success-hover: null !default;
-$base-success-active: null !default;
-$base-success-selected: null !default;
 $base-warning: #fde300 !default;
 $base-danger: null !default;
 $base-danger-hover: null !default;
@@ -66,6 +61,8 @@ $base-danger-active: null !default;
 $base-danger-selected: null !default;
 $base-text-color: null !default;
 $base-inverted-text-color: null !default;
+$base-label-color: null !default;
+$base-icon-color: null !default;
 
 $base-disabled-opacity: 0.38 !default;
 $base-border-color-disabled: null !default;
@@ -77,53 +74,72 @@ $scrollview-pulldown-path: null !default;
   $fluent-color-accent-modificator: "blue" !default;
 }
 
+@if $color == "saas" {
+  $fluent-color-accent-modificator: "saas" !default;
+}
+
 @if $mode == "light" {
   $fluent-color-theme-modificator: "light" !default;
 
-  $base-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
-  $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default; // #115ea3
-  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default; // #0f548c
-  $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default; // #0E4775
+  $base-bg: rgba(255, 255, 255, 1) !default;
+
+  @if $color == "blue" {
+    $base-hover-bg: darken($base-bg, 3.9) !default;
+    $base-typography-bg: rgba(250, 250, 250, 1) !default;
+
+    $base-accent: rgba(15, 108, 189, 1) !default;
+    $base-success: rgba(16, 124, 16, 1) !default;
+    $base-danger: rgba(209, 52, 56, 1) !default;
+    $base-text-color: rgba(36, 36, 36, 1) !default;
+    $base-label-color: lighten($base-text-color, 29.80) !default;
+    $base-icon-color: lighten($base-text-color, 23.92) !default;
+    $base-border-color: rgba(224, 224, 224, 1) !default;
+    $base-border-color-accessible: darken($base-border-color, 49.8) !default;
+    $base-shadow-color: #000 !default;
+  }
+
+  @if $color == "saas" {
+    $base-accent: #5486ff !default;
+    $base-typography-bg: #FAFBFF !default;
+
+    $base-hover-bg: mix(#FFF, $base-accent, 85%) !default;
+
+    $base-success: #19914B !default;
+    $base-danger: #DC2828 !default;
+    $base-text-color: #21293b !default;
+    $base-label-color: lighten($base-text-color, 19) !default;
+    $base-icon-color: lighten($base-text-color, 10) !default;
+    $base-border-color: #e5e8f0 !default;
+    $base-border-color-accessible: darken($base-border-color, 20) !default;
+    $base-shadow-color: #3D4A6C !default;
+  }
+
+  $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default;
+  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default;
+  $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default;
+
+  $base-foreground-disabled: lighten($base-text-color, 60) !default;
+
+  $base-selected-bg: darken($base-hover-bg, 3.92) !default;
+  $base-active-bg: darken($base-hover-bg, 8.24) !default;
+  $base-background-disabled: darken($base-hover-bg, 1.96) !default;
+
+  $base-border-color-hover: darken($base-border-color, 9.8) !default;
+  $base-border-color-focused: darken($base-border-color, 17.65) !default;
+
+  $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default;
+  $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default;
+  $base-border-color-disabled: $base-border-color !default;
+
+  $base-separator-color: $base-border-color !default;
+
+  $base-inverted-bg: darken($base-bg, 100%) !default;
   
-  $base-text-color: rgba(36, 36, 36, 1) !default; // #242424;
-  $base-neutral-foreground2: lighten($base-text-color, 11.76) !default; // #424242;
-  $base-neutral-foreground3: lighten($base-text-color, 23.92) !default; // #616161;
-  $base-neutral-foreground4: lighten($base-text-color, 29.80) !default; // #707070
-  $base-foreground-disabled: lighten($base-text-color, 60) !default; // #bdbdbd
-
-  $base-accent-bg: $base-accent !default; // #0F6CBD
-
-  $base-bg: rgba(255, 255, 255, 1) !default; // #FFFFFF
-  $base-bg-hover: darken($base-bg, 3.9) !default; // #F5F5F5
-  $base-bg-selected: darken($base-bg, 7.8) !default; // #EBEBEB
-  $base-bg-active: darken($base-bg, 12.2) !default; // #E0E0E0
-  $base-background-disabled: darken($base-bg, 5.9) !default; // f0f0f0
-
-  $typography-bg: darken($base-bg, 2) !default; // #FAFAFA
-
-  $base-border-color: rgba(224, 224, 224, 1) !default; // #e0e0e0
-  $base-border-color-hover: darken($base-border-color, 9.8) !default; // #c7c7c7
-  $base-border-color-focused: darken($base-border-color, 17.65) !default; // #b3b3b3
-  $base-border-color-accessible: darken($base-border-color, 49.8) !default; // #616161
-  $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default; // #575757
-  $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default; // #4d4d4d
-  $base-border-color-disabled: $base-border-color !default; // e0e0e0
-
-  $base-separator-color: $base-border-color !default; // #E0E0E0
-
-  $base-inverted-bg: darken($base-bg, 100%) !default; // #EBF3FC
-  $base-shadow-color: $base-inverted-bg !default;
   $base-inverted-text-color: #fff !default;
 
-  $base-danger: rgba(209, 52, 56, 1) !default; // #d13438
-  $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default; // #bc2f32
-  $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default; // #3f1011
-  $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default; // #751D1F
-
-  $base-success: rgba(16, 124, 16, 1) !default; // #107c10
-  $base-success-hover: darken(saturate($base-success, 0.63), 2.75) !default; // #0e700e
-  $base-success-active: darken(desaturate($base-success, 0.95), 19.22) !default; // #052505
-  $base-success-selected: darken(desaturate($base-success, 0.22), 12.16) !default; // #094509
+  $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default;
+  $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default;
+  $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default;
 
   $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
 }
@@ -131,61 +147,64 @@ $scrollview-pulldown-path: null !default;
 @if $mode == "dark" {
   $fluent-color-theme-modificator: "dark" !default;
 
-  $base-accent: rgba(71, 158, 245, 1) !default; // #479EF5
-  $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default; // #62ABF5
-  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default; // #2886DE
-  $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default; // #0f548c
+  @if $color == "blue" {
+    $base-bg: rgba(41, 41, 41, 1) !default;
+    $base-accent: rgba(71, 158, 245, 1) !default;
+    $base-success: #54B054 !default;
+    $base-danger: rgba(227, 125, 128, 1) !default;
+    $base-border-color: rgba(97, 97, 97, 1) !default;
+
+    $base-typography-bg: #1F1F1F !default;
+  }
+
+  @if $color == "saas" {
+    $base-bg: rgba(30, 40, 50, 1) !default;
+    $base-accent: #5492F6 !default;
+    $base-success: #10B230 !default;
+    $base-danger: #F92F2F !default;
+    $base-border-color: #414B5F !default;
   
-  $base-text-color: rgba(255, 255, 255, 1) !default; // #ffffff;
-  $base-neutral-foreground2: darken($base-text-color, 16.08) !default; // #d6d6d6;
-  $base-neutral-foreground3: darken($base-text-color, 32.16) !default; // #adadad;
-  $base-neutral-foreground4: darken($base-text-color, 40.00) !default; // #999999
-  $base-foreground-disabled: darken($base-text-color, 63.9) !default; // #5c5c5c
-
-  $base-accent-bg: darken(desaturate(adjust-hue($base-accent, 358.4), 8.6), 26.7) !default; // #115EA3
-
-  $base-bg: rgba(41, 41, 41, 1) !default; // #292929
-  $base-bg-hover: lighten($base-bg, 7.8) !default; // #3D3D3D
-  $base-bg-selected: lighten($base-bg, 5.9) !default; // #383838
-  $base-bg-active: darken($base-bg, 3.9) !default; // #1F1F1F
-  $base-background-disabled: darken($base-bg, 8.2) !default; // #141414
-
-  $typography-bg: $base-bg-active !default; // #1F1F1F
+    $base-typography-bg: #141E28 !default;
+  }
 
-  $base-border-color: rgba(97, 97, 97, 1) !default; // #616161
-  $base-border-color-hover: lighten($base-border-color, 7.84) !default; // #757575
-  $base-border-color-focused: lighten($base-border-color, 3.92) !default; // #6b6b6b
-  $base-border-color-accessible: lighten($base-border-color, 29.8) !default; // #adadad
-  $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default; // #bdbdbd
-  $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default; // #b3b3b3
-  $base-border-color-disabled: darken($base-border-color, 12.16) !default; // #424242
-
-  $base-separator-color: darken($base-border-color, 5.88) !default; // #525252
+  $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default;
+  $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default;
+  $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default;
+  
+  $base-text-color: rgba(255, 255, 255, 1) !default;
+  $base-label-color: darken($base-text-color, 40.00) !default;
+  $base-icon-color: darken($base-text-color, 32.16) !default;
+  $base-foreground-disabled: darken($base-text-color, 63.9) !default;
+
+  $base-bg: rgba(41, 41, 41, 1) !default;
+  $base-hover-bg: lighten($base-bg, 7.8) !default;
+  $base-selected-bg: lighten($base-bg, 5.9) !default;
+  $base-active-bg: darken($base-bg, 3.9) !default;
+  $base-background-disabled: darken($base-bg, 8.2) !default;
+
+  $base-border-color-hover: lighten($base-border-color, 7.84) !default;
+  $base-border-color-focused: lighten($base-border-color, 3.92) !default;
+  $base-border-color-accessible: lighten($base-border-color, 29.8) !default;
+  $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default;
+  $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default;
+  $base-border-color-disabled: darken($base-border-color, 12.16) !default;
+
+  $base-separator-color: darken($base-border-color, 5.88) !default;
 
   $base-inverted-bg: lighten($base-bg, 100%) !default;
   $base-shadow-color: #000 !default;
   $base-inverted-text-color: #000 !default;
 
-  $base-danger: rgba(227, 125, 128, 1) !default; // #e37d80
-  $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default; // #EA9C9E
-  $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default; // #FDF6F6
-  $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9); // #F1BBBC
-
-  $base-success: #54B054 !default; // #54B054
-  $base-success-hover: lighten(saturate($base-success, 5.4), 22.5) !default; // #9FD89F
-  $base-success-active: lighten(saturate($base-success, 10.6), 45.3) !default; // #F1FAF1
-  $base-success-selected: lighten(saturate($base-success, 5.3), 34.1) !default; // #C9E9C9
+  $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default;
+  $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default;
+  $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9);
 
   $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
 }
 $base-hover-color: $base-text-color !default;
-$typography-color: $base-text-color !default;
-$base-hover-bg: $base-bg-hover !default;
 $base-focus-color: $base-inverted-text-color !default;
-$base-focus-bg: $base-bg-selected !default;
-$base-label-color: $base-neutral-foreground4 !default;
-$base-icon-color: $base-neutral-foreground3 !default;
-$base-spin-icon-color: $base-neutral-foreground3 !default;
+$base-focus-bg: $base-hover-bg !default;
+$base-spin-icon-color: $base-icon-color !default;
 $base-link-color: $base-accent !default;
 $typography-link-color: $base-link-color !default;
 
@@ -198,18 +217,22 @@ $base-invalid-color-selected: $base-danger-selected !default;
 $never-used: collector((
 "$base-accent": $base-accent,
 "$base-font-family": $base-font-family,
+"$base-typography-bg": $base-typography-bg,
 "$base-bg": $base-bg,
+"$base-hover-bg": $base-hover-bg,
+"$base-active-bg": $base-active-bg,
+"$base-selected-bg": $base-selected-bg,
 "$base-border-color": $base-border-color,
+"$base-border-color-accessible": $base-border-color-accessible,
 "$base-success": $base-success,
 "$base-warning": $base-warning,
 "$base-danger": $base-danger,
 "$base-text-color": $base-text-color,
+"$base-label-color": $base-label-color,
+"$base-icon-color": $base-icon-color,
 "$base-hover-color": $base-hover-color,
-"$base-hover-bg": $base-hover-bg,
 "$base-focus-color": $base-focus-color,
 "$base-focus-bg": $base-focus-bg,
-"$base-label-color": $base-label-color,
-"$base-icon-color": $base-icon-color,
 "$base-spin-icon-color": $base-spin-icon-color,
 "$base-link-color": $base-link-color,
 ));