devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/generic/textEditor/_colors.scss

@@ -51,11 +51,11 @@ $texteditor-label-transition:
 }
 
 @if $color == "dark" {
-  $texteditor-placeholder-color: darken($texteditor-color, 40%) !default;
+  $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: -40%, $space: hsl) !default;
   $texteditor-bg: $base-element-bg !default;
   $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $texteditor-focused-border-color: $base-focus-bg !default;
-  $texteditor-button-clear-icon-color: darken($texteditor-color, 40%) !default;
+  $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -40%, $space: hsl) !default;
   $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.2) !default;
 }
 
@@ -63,14 +63,14 @@ $texteditor-label-transition:
   $texteditor-bg: $base-element-bg !default;
   $texteditor-focused-border-color: $base-focus-bg !default;
   $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $texteditor-placeholder-color: darken($base-label-color, 17%) !default; // #c1c7c9 => #919ea3
+  $texteditor-placeholder-color: color.adjust($base-label-color, $lightness: -17%, $space: hsl) !default; // #c1c7c9 => #919ea3
   $texteditor-button-clear-icon-color: $base-icon-color !default;
   $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.2) !default;
 }
 
 @if $color == "darkviolet" {
   $texteditor-bg: $base-element-bg !default;
-  $texteditor-placeholder-color: darken($texteditor-color, 40%) !default;
+  $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: -40%, $space: hsl) !default;
   $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $texteditor-focused-border-color: $base-focus-bg !default;
   $texteditor-button-clear-icon-color: $base-icon-color !default;
@@ -78,7 +78,7 @@ $texteditor-label-transition:
 }
 
 @if $color == "greenmist" {
-  $texteditor-placeholder-color: lighten($base-label-color, 16%) !default; // #728e94 => #a1b1b5
+  $texteditor-placeholder-color: color.adjust($base-label-color, $lightness: 16%, $space: hsl) !default; // #728e94 => #a1b1b5
   $texteditor-bg: $base-element-bg !default;
   $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $texteditor-focused-border-color: $base-focus-bg !default;
@@ -87,16 +87,16 @@ $texteditor-label-transition:
 }
 
 @if $color == "light" {
-  $texteditor-placeholder-color: lighten($texteditor-color, 40%) !default;
+  $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: 40%, $space: hsl) !default;
   $texteditor-bg: $base-element-bg !default;
   $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $texteditor-focused-border-color: $base-focus-bg !default;
-  $texteditor-button-clear-icon-color: lighten($texteditor-color, 40%) !default;
+  $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 40%, $space: hsl) !default;
   $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.1) !default;
 }
 
 @if $color == "softblue" {
-  $texteditor-placeholder-color: lighten($texteditor-color, 40%) !default;
+  $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: 40%, $space: hsl) !default;
   $texteditor-bg: $base-element-bg !default;
   $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
   $texteditor-focused-border-color: $base-focus-bg !default;

package/data/scss/widgets/generic/textEditor/_index.scss

@@ -21,7 +21,7 @@ $generic-texteditor-input-padding:
   $generic-base-inline-borderedwidget-horizontal-padding
   $generic-base-inline-borderedwidget-bottom-padding;
 
-$generic-texteditor-input-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding;
+$generic-texteditor-input-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding;
 
 $generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size;
 $generic-texteditor-icon-size: $generic-base-icon-size;
@@ -69,7 +69,8 @@ $generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $gener
 
   &.dx-editor-underlined {
     background: $texteditor-underlined-bg;
-    border-bottom: $generic-texteditor-border-width solid $texteditor-border-color;
+    border-bottom: $generic-texteditor-border-width solid;
+    border-bottom-color: $texteditor-border-color;
     border-radius: 0;
   }
 

package/data/scss/widgets/generic/tileView/_colors.scss

@@ -19,7 +19,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 
@@ -37,7 +37,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(lighten($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 
@@ -46,7 +46,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(lighten($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 
@@ -55,7 +55,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(lighten($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 
@@ -64,7 +64,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 
@@ -73,7 +73,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 
@@ -82,7 +82,7 @@ $tileview-active-color: null !default;
   $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default;
   $tileview-hover-bg: $base-element-bg !default;
   $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default;
-  $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default;
+  $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
   $tileview-active-color: $tileview-color !default;
 }
 

package/data/scss/widgets/generic/tileView/_index.scss

@@ -11,7 +11,8 @@
 .dx-tile {
   color: $tileview-color;
   background-color: $tileview-bg;
-  border: 1px solid $tileview-border-color;
+  border: 1px solid;
+  border-color: $tileview-border-color;
   text-align: left;
 
   &.dx-state-focused,

package/data/scss/widgets/generic/timeView/_colors.scss

@@ -17,7 +17,7 @@ $clock-bg-color: null !default;
 }
 
 @if $color == "dark" {
-  $clock-digits-color: darken($base-text-color, 38.5%) !default;
+  $clock-digits-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
@@ -25,15 +25,15 @@ $clock-bg-color: null !default;
 }
 
 @if $color == "darkviolet" {
-  $clock-digits-color: darken($base-text-color, 38.5%) !default;
+  $clock-digits-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
-  $clock-digits-color: lighten($base-text-color, 38.5%) !default;
+  $clock-digits-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
 }
 
 @if $color == "light" {
-  $clock-digits-color: lighten($base-text-color, 38.5%) !default;
+  $clock-digits-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {

package/data/scss/widgets/generic/toolbar/_index.scss

@@ -43,7 +43,8 @@
 }
 
 .dx-toolbar-menu-section {
-  border-bottom: 1px solid $base-border-color;
+  border-bottom: 1px solid;
+  border-bottom-color: $base-border-color;
 
   .dx-list-item-content,
   .dx-toolbar-item-auto-hide {

package/data/scss/widgets/generic/tooltip/_colors.scss

@@ -19,7 +19,7 @@ $tooltip-border-radius: $base-border-radius !default;
   $tooltip-color: $base-text-color !default;
   $tooltip-bg: $base-bg !default;
   $tooltip-border-color: $overlay-border-color !default;
-  $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default;
+  $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default;
 }
 
 @if $color == "contrast" {
@@ -38,7 +38,7 @@ $tooltip-border-radius: $base-border-radius !default;
 
 @if $color == "darkmoon" {
   $tooltip-color: $base-text-color !default;
-  $tooltip-bg: lighten($base-bg, 14%) !default; // #465672 => #62789e
+  $tooltip-bg: color.adjust($base-bg, $lightness: 14%, $space: hsl) !default; // #465672 => #62789e
   $tooltip-border-color: $overlay-border-color !default;
   $tooltip-shadow-color: $overlay-content-shadow-color !default;
 }
@@ -52,23 +52,23 @@ $tooltip-border-radius: $base-border-radius !default;
 
 @if $color == "greenmist" {
   $tooltip-color: $base-text-color !default;
-  $tooltip-bg: lighten($base-bg, 100%) !default;
+  $tooltip-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $tooltip-border-color: $overlay-border-color !default;
-  $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default;
+  $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default;
 }
 
 @if $color == "light" {
   $tooltip-color: $base-text-color !default;
   $tooltip-bg: $base-bg !default;
   $tooltip-border-color: $overlay-border-color !default;
-  $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default;
+  $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default;
 }
 
 @if $color == "softblue" {
   $tooltip-color: $base-text-color !default;
   $tooltip-bg: $base-bg !default;
   $tooltip-border-color: $overlay-border-color !default;
-  $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default;
+  $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default;
 }
 $never-used: collector((
 "$tooltip-color": $tooltip-color,

package/data/scss/widgets/generic/tooltip/_index.scss

@@ -10,7 +10,8 @@
 
 .dx-tooltip-wrapper {
   .dx-overlay-content {
-    border: 1px solid $tooltip-border-color;
+    border: 1px solid;
+    border-color: $tooltip-border-color;
     background-color: $tooltip-bg;
     color: $tooltip-color;
     box-shadow: 0 2px 4px $tooltip-shadow-color;
@@ -19,7 +20,8 @@
 
   &.dx-popover-wrapper .dx-popover-arrow {
     &::after {
-      border: 1px solid $tooltip-border-color;
+      border: 1px solid;
+      border-color: $tooltip-border-color;
       background: $tooltip-bg;
     }
   }

package/data/scss/widgets/generic/treeList/_colors.scss

@@ -12,7 +12,7 @@ $treelist-selection-spin-icon-color: null !default;
 
 @if $color == "carmine" {
   $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
-  $treelist-selection-spin-icon-color: lighten($datagrid-spin-icon-color, 100%) !default;
+  $treelist-selection-spin-icon-color: color.adjust($datagrid-spin-icon-color, $lightness: 100%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -21,7 +21,7 @@ $treelist-selection-spin-icon-color: null !default;
 }
 
 @if $color == "dark" {
-  $treelist-spin-icon-color: $datagrid-spin-icon-color!default;
+  $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $treelist-spin-icon-color !default;
 }
 
@@ -37,7 +37,7 @@ $treelist-selection-spin-icon-color: null !default;
 
 @if $color == "greenmist" {
   $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
-  $treelist-selection-spin-icon-color: lighten($treelist-spin-icon-color, 100%) !default;
+  $treelist-selection-spin-icon-color: color.adjust($treelist-spin-icon-color, $lightness: 100%, $space: hsl) !default;
 }
 
 @if $color == "light" {
@@ -49,3 +49,4 @@ $treelist-selection-spin-icon-color: null !default;
   $treelist-spin-icon-color: $datagrid-spin-icon-color !default;
   $treelist-selection-spin-icon-color: $base-icon-color !default;
 }
+

package/data/scss/widgets/generic/treeView/_colors.scss

@@ -19,6 +19,7 @@ $treeview-border-color: $base-border-color !default;
 $treeview-item-selected-color: null !default;
 $treeview-item-selected-bg: null !default;
 $treeview-item-selected-hover-bg: null !default;
+$treeview-item-content-disabled: null !default;
 $treeview-spin-icon-color: null !default;
 
 $generic-treeview-focused-row-load-indicator-color: #fff;
@@ -33,6 +34,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default;
   $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default;
   $treeview-spin-icon-color: $base-header-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "contrast" {
@@ -44,6 +46,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: $base-inverted-bg !default;
   $treeview-item-selected-hover-bg: $base-inverted-bg !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: -48.24%, $space: hsl) !default;
 }
 
 @if $color == "dark" {
@@ -56,6 +59,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#fff, $alpha: 0.12) !default;
   $treeview-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.change($base-text-color, $lightness: 51.8%, $space: hsl) !default;
 }
 
 @if $color == "darkmoon" {
@@ -68,6 +72,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#748fbc, $alpha: 0.42) !default;
   $treeview-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: -48.24%, $space: hsl) !default;
 }
 
 @if $color == "darkviolet" {
@@ -80,18 +85,20 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default;
   $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default;
   $treeview-spin-icon-color: $base-header-color !default;
+  $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 51.76%, $space: hsl) !default;
 }
 
 @if $color == "greenmist" {
   $treeview-color: $base-text-color !default;
   $treeview-focused-bg: $base-focus-bg !default;
   $treeview-focus-color: $base-focus-color !default;
-  $treeview-hover-bg: color.change(darken($base-bg, 9%), $alpha: 0.2) !default;
+  $treeview-hover-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.2) !default;
   $treeview-item-hover-color: $base-hover-color !default;
   $treeview-item-selected-color: $treeview-color !default;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
   $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 60%, $space: hsl) !default;
 }
 
 @if $color == "light" {
@@ -104,6 +111,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
   $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
 
 @if $color == "softblue" {
@@ -116,8 +124,8 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
   $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default;
 }
-
 $never-used: collector((
 "$treeview-focused-bg": $treeview-focused-bg,
 "$treeview-hover-bg": $treeview-hover-bg,

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

@@ -52,7 +52,8 @@
 .dx-treeview-item-with-checkbox {
   &.dx-state-focused {
     >.dx-treeview-item .dx-checkbox .dx-checkbox-icon {
-      border: 1px solid $checkbox-border-color-focused;
+      border: 1px solid;
+      border-color: $checkbox-border-color-focused;
     }
   }
 }
@@ -80,3 +81,7 @@
     }
   }
 }
+
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}

package/data/scss/widgets/material/_colors.scss

@@ -34,9 +34,9 @@ $base-border-color: null !default;
 $base-inverted-bg: null !default;
 $base-element-bg: null !default;
 $base-shadow-color: null !default;
-$base-success: #8bc34a !default;
-$base-warning: #ffc107 !default;
-$base-danger: #f44336 !default;
+$base-success: null !default;
+$base-warning: null !default;
+$base-danger: null !default;
 $base-hover-color: null !default;
 $base-hover-bg: null !default;
 $base-inverted-text-color: null !default;
@@ -46,48 +46,63 @@ $base-inverted-icon-color: null !default;
 $base-disabled-opacity: 0.38 !default;
 $base-disabled-color: null !default;
 $base-dropdown-shadow-color: null !default;
-$base-invalid-color: $base-danger !default;
-$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
 $scrollview-pulldown-path: null !default;
 
 
 @if $color == "blue" {
   $material-color-accent-modificator: "blue" !default;
-  $base-accent: #03a9f4 !default;
 }
 
 @if $color == "lime" {
   $material-color-accent-modificator: "lime" !default;
   $base-accent: #cddc39 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
 @if $color == "orange" {
   $material-color-accent-modificator: "orange" !default;
   $base-accent: #ff5722 !default;
-  $base-danger: #e91e63 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
 @if $color == "purple" {
   $material-color-accent-modificator: "purple" !default;
   $base-accent: #9c27b0 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
 @if $color == "teal" {
   $material-color-accent-modificator: "teal" !default;
   $base-accent: #009688 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
-$base-link-color: $base-accent !default;
 
 @if $mode == "light" {
   $material-color-theme-modificator: "light" !default;
+
+  @if $color == "blue" {
+    $base-accent: #1564C0 !default;
+    $base-success: #2E7D32 !default;
+    $base-warning: #ffc107 !default;
+    $base-danger: #C62828 !default;
+  }
+
   $base-text-color: rgba(0, 0, 0, 0.87) !default;
   $base-label-color: rgba(0, 0, 0, 0.6) !default;
   $base-disabled-color: rgba(0, 0, 0, $base-disabled-opacity) !default;
-  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
+  $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
   $base-bg: #fff !default;
   $base-border-color: #e0e0e0 !default;
-  $base-inverted-bg: darken($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: $base-inverted-bg !default;
   $base-hover-color: $base-text-color !default;
@@ -102,27 +117,38 @@ $base-link-color: $base-accent !default;
 }
 
 @if $mode == "dark" {
+  @if $color == "blue" {
+    $base-accent: #90CAF9 !default;
+    $base-success: #A5D6A7 !default;
+    $base-warning: #FFAB91 !default;
+    $base-danger: #EF9A9A !default;
+  }
+
   $material-color-theme-modificator: "dark" !default;
   $base-text-color: #fff !default;
   $base-label-color: rgba(255, 255, 255, 0.6) !default;
   $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !default;
-  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-bg: #363640 !default;
+  $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+  $base-bg: #292929 !default;
   $base-border-color: #515159 !default;
-  $base-inverted-bg: lighten($base-bg, 100%) !default;
+  $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: #000 !default;
   $base-hover-color: $base-text-color !default;
-  $base-hover-bg: color.change(#fff, $alpha: 0.05) !default;
+  $base-hover-bg: color.change(#fff, $alpha: 0.04) !default;
   $base-inverted-text-color: rgba(0, 0, 0, 0.87) !default;
   $base-focus-color: $base-inverted-text-color !default;
-  $base-focus-bg: color.change(#fff, $alpha: 0.05) !default;
+  $base-focus-bg: color.change(#fff, $alpha: 0.04) !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
 
   $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
 }
+$base-link-color: $base-accent !default;
+
+$base-invalid-color: $base-danger !default;
+$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
 
 $typography-bg: $base-bg !default;
 $typography-color: $base-text-color !default;

package/data/scss/widgets/material/accordion/_colors.scss

@@ -20,7 +20,7 @@ $accordion-title-active-color: $accordion-color !default;
 $accordion-title-active-bg: $base-hover-bg !default;
 $accordion-item-hover-bg: $base-hover-bg !default;
 $accordion-item-bg: $accordion-background-color !default;
-$accordion-title-hover-border-color: darken($base-border-color, 6%) !default;
+$accordion-title-hover-border-color: color.adjust($base-border-color, $lightness: -6%, $space: hsl) !default;
 
 @if $mode == "light" {
   $accordion-item-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20) !default;

package/data/scss/widgets/material/accordion/_index.scss

@@ -20,7 +20,8 @@
   box-shadow: $accordion-item-shadow;
   transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
   will-change: margin, height;
-  border-top: 1px solid $accordion-item-border-color;
+  border-top: 1px solid;
+  border-top-color: $accordion-item-border-color;
 
   &:first-child {
     border-top: none;