npm - devextreme-themebuilder - Versions diffs - 25.2.7 → 26.1.2-beta - Mend

devextreme-themebuilder 25.2.7 → 26.1.2-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (266) hide show

package/data/scss/widgets/generic/cardView/_colors.scss CHANGED Viewed

@@ -55,6 +55,7 @@ $cardview-generic-card__content__field-value--highlighted-bg-color: getCustomVar
 $cardview-generic-card__content__field-value--highlighted-text-color: getCustomVar(("$cardview-generic-card__content__field-value--highlighted-text-color")) !default;
 $cardview-generic-card__content__field-value--highlighted-box-shadow-color: getCustomVar(("$cardview-generic-card__content__field-value--highlighted-box-shadow-color")) !default;
+@use 'sass:color';
 @use '../colors' as *;
 @use '../../base/cardView/variables' as *;
 @use '../../base/cardView/header_panel/variables' as *;
@@ -67,7 +68,6 @@ $cardview-generic-card__content__field-value--highlighted-box-shadow-color: getC
 @use '../../base/cardView/content_view/no_data/variables' as *;
 @use '../../base/cardView/column_chooser/variables' as *;
 @use '../../base/cardView/filter_panel/variables' as *;
-@use "sass:color";
 // adduse
@@ -194,14 +194,14 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card-divider-color: $cardview-generic-card-border-color !default;
   $cardview-generic-card-text-color: $cardview-generic-common-text-color !default;
   $cardview-generic-card__cover-bg-color: #FFF !default;
-  $cardview-generic-card__cover--noimage-bg-color: darken($base-bg, 7.84) !default;
-  $cardview-generic-card__cover--noimage__icon-color: lighten($cardview-generic-common-text-color, 38.43) !default;
+  $cardview-generic-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
+  $cardview-generic-card__cover--noimage__icon-color: color.adjust($cardview-generic-common-text-color, $lightness: 38.43%, $space: hsl) !default;
   $cardview-generic-card--focused-outline-color: $base-accent !default;
   // Card - selected
-  $cardview-generic-card--selected-bg-color: lighten(desaturate(adjust-hue($base-accent, 2), 6.41), 48.63) !default;
-  $cardview-generic-card--selected-border-color: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
+  $cardview-generic-card--selected-bg-color: color.adjust($base-accent, $hue: 2deg, $saturation: -6.41%, $space: hsl, $lightness: 48.63%) !default;
+  $cardview-generic-card--selected-border-color: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default;
   $cardview-generic-card--selected-divider-color: $cardview-generic-card--selected-border-color !default;
   $cardview-generic-card--selected-text-color: $cardview-generic-card-text-color !default;
   $cardview-generic-card--selected__cover-bg-color: $cardview-generic-card__cover-bg-color !default;
@@ -209,7 +209,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card--selected__cover--noimage__icon-color: $cardview-generic-card__cover--noimage__icon-color !default;
   // Header panel item - default state
-  $cardview-generic-header-panel__item-bg-color: darken($base-bg, 3.92) !default;
+  $cardview-generic-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
   $cardview-generic-header-panel__item-border-color: $base-border-color !default;
   $cardview-generic-header-panel__item-text-color: $cardview-generic-common-text-color !default;
   $cardview-generic-header-panel__item__icon-color: $cardview-generic-common-text-color !default;
@@ -219,8 +219,8 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-header-panel__item--focused-outline-color: $base-accent !default;
   // Header panel item - hovered
-  $cardview-generic-header-panel__item--hovered-bg-color: darken($cardview-generic-header-panel__item-bg-color, 3.92)  !default;
-  $cardview-generic-header-panel__item--hovered-border-color: darken($cardview-generic-header-panel__item-border-color, 10.59) !default;
+  $cardview-generic-header-panel__item--hovered-bg-color: color.adjust($cardview-generic-header-panel__item-bg-color, $lightness: -3.92%, $space: hsl)  !default;
+  $cardview-generic-header-panel__item--hovered-border-color: color.adjust($cardview-generic-header-panel__item-border-color, $lightness: -10.59%, $space: hsl) !default;
   $cardview-generic-header-panel__item--hovered-text-color: $cardview-generic-header-panel__item-text-color !default;
   $cardview-generic-header-panel__item--hovered__icon-color: $cardview-generic-header-panel__item__icon-color !default;
   $cardview-generic-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-generic-header-panel__item__header-filter-icon--selected-color !default;
@@ -229,10 +229,10 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   // Header panel item - disabled
   $cardview-generic-header-panel__item--disabled-bg-color: $cardview-generic-common-bg-color !default;
   $cardview-generic-header-panel__item--disabled-border-color: $cardview-generic-header-panel__item-border-color !default;
-  $cardview-generic-header-panel__item--disabled-text-color: lighten($cardview-generic-header-panel__item-text-color, 60.00) !default;
-  $cardview-generic-header-panel__item--disabled__icon-color: lighten($cardview-generic-header-panel__item__icon-color, 60.00) !default;
-  $cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color: lighten(desaturate($cardview-generic-header-panel__item__header-filter-icon--selected-color, 34.10), 27.06) !default;
-  $cardview-generic-header-panel__item--disabled__sort-index-text-color: lighten($cardview-generic-header-panel__item__sort-index-text-color, 60.00) !default;
+  $cardview-generic-header-panel__item--disabled-text-color: color.adjust($cardview-generic-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__icon-color: color.adjust($cardview-generic-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-generic-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default;
+  $cardview-generic-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-generic-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default;
   // Header panel item - dragged
   $cardview-generic-header-panel__item--dragged-bg-color: $cardview-generic-header-panel__item-bg-color !default;
@@ -243,7 +243,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
   // Header panel Drop-zone
-  $cardview-generic-header-panel__dropzone-bg-color: lighten(desaturate(adjust-hue($base-accent, 2), 6.41), 48.63) !default;
+  $cardview-generic-header-panel__dropzone-bg-color: color.adjust($base-accent, $hue: 2deg, $saturation: -6.41%, $space: hsl, $lightness: 48.63%) !default;
   $cardview-generic-header-panel__dropzone-border-color: $base-accent !default;
   $cardview-generic-header-panel__dropzone-text-color: $base-accent !default;
   $cardview-generic-header-panel__dropzone__icon-color: $base-accent !default;
@@ -258,7 +258,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-nodata-view-bg-color: $cardview-generic-common-bg-color !default;
   $cardview-generic-nodata-view-text-color: $base-label-color !default;
   $cardview-generic-nodata-view__icon-color: $cardview-generic-nodata-view-text-color !default;
-  $cardview-generic-nodata-view__icon-bg-color: darken($base-bg, 7.84) !default;
+  $cardview-generic-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   // Search highlight
   $cardview-generic-card__content__field-value--highlighted-bg-color: $base-warning !default;
@@ -266,7 +266,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
   // Column chooser
-  $cardview-generic-columnchooser--empty__message-color: lighten($cardview-generic-common-text-color, 26%) !default;
+  $cardview-generic-columnchooser--empty__message-color: color.adjust($cardview-generic-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 @if $color == "dark" or $color == "darkviolet" or $color == "darkmoon" {
@@ -282,14 +282,14 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card-divider-color: $cardview-generic-card-border-color !default;
   $cardview-generic-card-text-color: $cardview-generic-common-text-color !default;
   $cardview-generic-card__cover-bg-color: #FFF !default;
-  $cardview-generic-card__cover--noimage-bg-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
-  $cardview-generic-card__cover--noimage__icon-color: darken($cardview-generic-common-text-color, 38.04) !default;
+  $cardview-generic-card__cover--noimage-bg-color: color.adjust($base-bg, $saturation: -0.30%, $space: hsl, $lightness: 8.04%) !default;
+  $cardview-generic-card__cover--noimage__icon-color: color.adjust($cardview-generic-common-text-color, $lightness: -38.04%, $space: hsl) !default;
   $cardview-generic-card--focused-outline-color: $base-accent !default;
   // Card - selected
-  $cardview-generic-card--selected-bg-color: darken(desaturate(adjust-hue($base-accent, 1), 60.34), 29.41) !default;
-  $cardview-generic-card--selected-border-color: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
+  $cardview-generic-card--selected-bg-color: color.adjust($base-accent, $hue: 1deg, $saturation: -60.34%, $space: hsl, $lightness: -29.41%) !default;
+  $cardview-generic-card--selected-border-color: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default;
   $cardview-generic-card--selected-divider-color: $cardview-generic-card--selected-border-color !default;
   $cardview-generic-card--selected-text-color: $cardview-generic-card-text-color !default;
   $cardview-generic-card--selected__cover-bg-color: $cardview-generic-card__cover-bg-color !default;
@@ -297,7 +297,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card--selected__cover--noimage__icon-color: $cardview-generic-card__cover--noimage__icon-color !default;
   // Header panel item - default
-  $cardview-generic-header-panel__item-bg-color: lighten($base-bg, 3.92) !default;
+  $cardview-generic-header-panel__item-bg-color: color.adjust($base-bg, $lightness: 3.9%, $space: hsl) !default;
   $cardview-generic-header-panel__item-border-color: $base-border-color !default;
   $cardview-generic-header-panel__item-text-color: $cardview-generic-common-text-color !default;
   $cardview-generic-header-panel__item__icon-color: $cardview-generic-common-text-color !default;
@@ -307,20 +307,20 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-header-panel__item--focused-outline-color: $base-accent !default;
   // Header panel item - hovered
-  $cardview-generic-header-panel__item--hovered-bg-color: lighten($cardview-generic-header-panel__item-bg-color, 3.92)  !default;
-  $cardview-generic-header-panel__item--hovered-border-color: lighten($cardview-generic-header-panel__item-border-color, 10.20) !default;
+  $cardview-generic-header-panel__item--hovered-bg-color: color.adjust($cardview-generic-header-panel__item-bg-color, $lightness: 3.92%, $space: hsl)  !default;
+  $cardview-generic-header-panel__item--hovered-border-color: color.adjust($cardview-generic-header-panel__item-border-color, $lightness: 10.20%, $space: hsl) !default;
   $cardview-generic-header-panel__item--hovered-text-color: $cardview-generic-header-panel__item-text-color !default;
   $cardview-generic-header-panel__item--hovered__icon-color: $cardview-generic-header-panel__item__icon-color !default;
   $cardview-generic-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-generic-header-panel__item__header-filter-icon--selected-color !default;
   $cardview-generic-header-panel__item--hovered__sort-index-text-color: $cardview-generic-header-panel__item__sort-index-text-color !default;
   // Header panel item - disabled
-  $cardview-generic-header-panel__item--disabled-bg-color: darken($cardview-generic-common-bg-color, 8.24) !default;
+  $cardview-generic-header-panel__item--disabled-bg-color: color.adjust($cardview-generic-common-bg-color, $lightness: -8.24%, $space: hsl) !default;
   $cardview-generic-header-panel__item--disabled-border-color: $cardview-generic-header-panel__item-border-color !default;
-  $cardview-generic-header-panel__item--disabled-text-color: darken($cardview-generic-header-panel__item-text-color, 59.22) !default;
-  $cardview-generic-header-panel__item--disabled__icon-color: darken($cardview-generic-header-panel__item__icon-color, 59.22) !default;
-  $cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color: darken(desaturate($cardview-generic-header-panel__item__header-filter-icon--selected-color, 22.79), 17.65) !default;
-  $cardview-generic-header-panel__item--disabled__sort-index-text-color: darken($cardview-generic-header-panel__item__sort-index-text-color, 59.22) !default;
+  $cardview-generic-header-panel__item--disabled-text-color: color.adjust($cardview-generic-header-panel__item-text-color, $lightness: -59.22%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__icon-color: color.adjust($cardview-generic-header-panel__item__icon-color, $lightness: -59.22%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-generic-header-panel__item__header-filter-icon--selected-color, $saturation: -22.79%, $space: hsl, $lightness: -17.65%) !default;
+  $cardview-generic-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-generic-header-panel__item__sort-index-text-color, $lightness: -59.22%, $space: hsl) !default;
   // Header panel item - dragged
   $cardview-generic-header-panel__item--dragged-bg-color: $cardview-generic-header-panel__item-bg-color !default;
@@ -331,7 +331,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
   // Header panel Drop-zone
-  $cardview-generic-header-panel__dropzone-bg-color: darken(desaturate(adjust-hue($base-accent, 1), 60.34), 29.41) !default;
+  $cardview-generic-header-panel__dropzone-bg-color: color.adjust($base-accent, $hue: 1deg, $saturation: -60.34%, $space: hsl, $lightness: -29.41%) !default;
   $cardview-generic-header-panel__dropzone-border-color: $base-accent !default;
   $cardview-generic-header-panel__dropzone-text-color: $base-accent !default;
   $cardview-generic-header-panel__dropzone__icon-color: $base-accent !default;
@@ -346,7 +346,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-nodata-view-bg-color: $cardview-generic-common-bg-color !default;
   $cardview-generic-nodata-view-text-color: $base-label-color !default;
   $cardview-generic-nodata-view__icon-color: $cardview-generic-nodata-view-text-color !default;
-  $cardview-generic-nodata-view__icon-bg-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
+  $cardview-generic-nodata-view__icon-bg-color: color.adjust($base-bg, $saturation: -0.30%, $space: hsl, $lightness: 8.04%) !default;
   // Search highlight
   $cardview-generic-card__content__field-value--highlighted-bg-color: $base-warning !default;
@@ -354,7 +354,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
   // Column chooser
-  $cardview-generic-columnchooser--empty__message-color: lighten($cardview-generic-common-text-color, 26%) !default;
+  $cardview-generic-columnchooser--empty__message-color: color.adjust($cardview-generic-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 @if $color == "contrast" {
@@ -401,10 +401,10 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   // Header panel item - disabled
   $cardview-generic-header-panel__item--disabled-bg-color: $cardview-generic-header-panel__item-bg-color !default;
   $cardview-generic-header-panel__item--disabled-border-color: $cardview-generic-header-panel__item-border-color !default;
-  $cardview-generic-header-panel__item--disabled-text-color: darken($cardview-generic-header-panel__item-text-color, 49.80) !default;
-  $cardview-generic-header-panel__item--disabled__icon-color: darken($cardview-generic-header-panel__item__icon-color, 49.80) !default;
-  $cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color: darken($cardview-generic-header-panel__item__header-filter-icon--selected-color, 20.98) !default;
-  $cardview-generic-header-panel__item--disabled__sort-index-text-color: darken($cardview-generic-header-panel__item__sort-index-text-color, 49.80) !default;
+  $cardview-generic-header-panel__item--disabled-text-color: color.adjust($cardview-generic-header-panel__item-text-color, $lightness: -49.80%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__icon-color: color.adjust($cardview-generic-header-panel__item__icon-color, $lightness: -49.80%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-generic-header-panel__item__header-filter-icon--selected-color, $lightness: -20.98%, $space: hsl) !default;
+  $cardview-generic-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-generic-header-panel__item__sort-index-text-color, $lightness: -49.80%, $space: hsl) !default;
   // Header panel item - dragged
   $cardview-generic-header-panel__item--dragged-bg-color: $cardview-generic-header-panel__item-bg-color !default;
@@ -438,7 +438,7 @@ $cardview-generic-columnchooser--empty__message-color: null !default;
   $cardview-generic-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
   // Column chooser
-  $cardview-generic-columnchooser--empty__message-color: lighten($cardview-generic-common-text-color, 26%) !default;
+  $cardview-generic-columnchooser--empty__message-color: color.adjust($cardview-generic-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 $cardview-bg-color: $cardview-generic-common-bg-color !default;

package/data/scss/widgets/generic/chat/_colors.scss CHANGED Viewed

@@ -55,24 +55,28 @@ $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
 $chat-file-secondary-color: $base-icon-color !default;
+$chat-suggestions-box-shadow: null !default;
 @if $color == "light" {
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: darken($base-bg, 41.57) !default;
-  $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
-  $chat-typingindicator-color: darken($base-bg, 41.57) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: -4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: 46.67%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
+  $chat-messagelist-empty-message-color: color.adjust($base-text-color, $lightness: -6.67%, $space: hsl) !default;
+  $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: 38.43%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
-  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 46.67) !default;
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
-  $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default;
-  $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;
-  $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
-  $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+  $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
@@ -81,20 +85,22 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: lighten($base-bg, 32.55) !default;
-  $chat-information-timestamp-color: lighten($base-bg, 32.55) !default;
-  $chat-typingindicator-color: lighten($base-bg, 32.55) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: 4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -37.25%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default;
+  $chat-messagelist-empty-message-color: color.adjust($base-text-color, $lightness: 12.94%, $space: hsl) !default;
+  $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -38.04%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
-  $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
-  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
-  $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
-  $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 41.07%, $space: hsl) !default;
-  $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
-  $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
+  $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
@@ -103,20 +109,22 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: darken($base-bg, 41.57) !default;
-  $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
-  $chat-typingindicator-color: darken($base-bg, 41.57) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: -4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
-  $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
-  $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;
+  $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
@@ -140,6 +148,8 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
   $chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;
+  $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
@@ -147,20 +157,22 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: lighten($base-bg, 32.55) !default;
-  $chat-information-timestamp-color: lighten($base-bg, 32.55) !default;
-  $chat-typingindicator-color: lighten($base-bg, 32.55) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: 4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
-  $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
-  $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 41.07%, $space: hsl) !default;
+  $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
@@ -169,20 +181,22 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: lighten($base-bg, 32.55) !default;
-  $chat-information-timestamp-color: lighten($base-bg, 32.55) !default;
-  $chat-typingindicator-color: lighten($base-bg, 32.55) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: 4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -37.25%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default;
+  $chat-messagelist-empty-message-color: color.adjust($base-text-color, $lightness: 12.94%, $space: hsl) !default;
+  $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -38.04%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
-  $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
-  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
-  $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
-  $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 32.55%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 41.07%, $space: hsl) !default;
-  $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
-  $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
+  $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
@@ -191,20 +205,22 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: darken($base-bg, 41.57) !default;
-  $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
-  $chat-typingindicator-color: darken($base-bg, 41.57) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: -4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
-  $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
-  $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;
+  $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
@@ -213,20 +229,22 @@ $chat-file-secondary-color: $base-icon-color !default;
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
   $chat-bubble-color-secondary: $base-text-color !default;
-  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
-  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
-  $chat-information-author-name-color: darken($base-bg, 41.57) !default;
-  $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
-  $chat-typingindicator-color: darken($base-bg, 41.57) !default;
+  $chat-bubble-background-color-primary: color.change(color.adjust($base-accent, $lightness: -5%, $space: hsl), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-element-bg, $lightness: -4%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -41.57%, $space: hsl) !default;
   $chat-messagelist-empty-icon-color: $base-icon-color !default;
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
-  $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
-  $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -31.57%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -46.57%, $space: hsl) !default;
+  $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default;
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }

package/data/scss/widgets/generic/chat/_index.scss CHANGED Viewed

@@ -139,6 +139,14 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+@include chat-suggestions(
+  $chat-suggestions-padding,
+  $chat-suggestions-button-border-radius,
+  $chat-suggestions-border-width,
+  $chat-suggestions-button-max-width,
+  $chat-suggestions-gap,
+  $chat-suggestions-box-shadow,
+);
 .dx-chat-file {
   @include dx-base-typography();

package/data/scss/widgets/generic/chat/_sizes.scss CHANGED Viewed

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "../sizes" as *;
 @use "../popup/sizes" as *;
+@use "../button/colors" as *;
 // adduse
@@ -32,11 +33,18 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-information-font-size: 12px !default;
 $chat-information-icon-size: 12px !default;
 $chat-information-edited-gap: 2px !default;
 $chat-alerts-padding-block: null !default;
 $chat-alerts-padding-inline: 8px !default;
 $chat-alerts-row-gap: null !default;
 $chat-alert-padding-block: null !default;
+$chat-suggestions-padding: null !default;
+$chat-suggestions-border-width: $generic-base-border-width !default;
+$chat-suggestions-button-border-radius: $button-border-radius !default;
+$chat-suggestions-button-max-width: 200px !default;
+$chat-suggestions-gap: 12px !default;
 $chat-message-editing-preview-caption-font-size: 12px !default;
 $chat-message-editing-preview-content-row-gap: null !default;
 $chat-message-editing-preview-content-padding-inline: null !default;
@@ -97,6 +105,8 @@ $chat-bubble-gap: 8px !default;
   $chat-alerts-row-gap: 4px !default;
   $chat-alert-padding-block: 9px !default;
+  $chat-suggestions-padding: 20px !default;
   $chat-message-editing-preview-content-padding-inline: 12px !default;
   $chat-message-editing-preview-content-row-gap: 4px !default;
@@ -136,6 +146,8 @@ $chat-bubble-gap: 8px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 6px !default;
+  $chat-suggestions-padding: 16px !default;
   $chat-message-editing-preview-content-padding-inline: 8px !default;
   $chat-message-editing-preview-content-row-gap: 2px !default;

package/data/scss/widgets/generic/checkBox/_colors.scss CHANGED Viewed

@@ -25,9 +25,9 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-indeterminate-bg: $base-accent !default;
   $checkbox-border-color-focused: $base-focus-bg !default;
   $checkbox-bg: $base-element-bg !default;
-  $checkbox-hover-border-color: darken($base-accent, 12%) !default;
-  $checkbox-active-icon-bg: color.change(darken($checkbox-bg, 62.5%), $alpha: 0.2) !default;
-  $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
+  $checkbox-hover-border-color: color.adjust($base-accent, $lightness: -12%, $space: hsl) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($checkbox-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: 9%, $space: hsl) !default;
 }
 @if $color == "contrast" {
@@ -37,7 +37,7 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-bg: $base-bg !default;
   $checkbox-hover-border-color: $base-border-color !default;
   $checkbox-active-icon-bg: $base-inverted-bg !default;
-  $checkbox-readonly-border-color: darken($checkbox-border-color, 50%) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: -50%, $space: hsl) !default;
 }
 @if $color == "dark" {
@@ -45,9 +45,9 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-indeterminate-bg: $base-accent !default;
   $checkbox-border-color-focused: $base-focus-bg !default;
   $checkbox-bg: $base-element-bg !default;
-  $checkbox-hover-border-color: lighten($base-accent, 12%) !default;
-  $checkbox-active-icon-bg: color.change(lighten($checkbox-bg, 62.5%), $alpha: 0.2) !default;
-  $checkbox-readonly-border-color: darken($checkbox-border-color, 9%) !default;
+  $checkbox-hover-border-color: color.adjust($base-accent, $lightness: 12%, $space: hsl) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($checkbox-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: -9%, $space: hsl) !default;
 }
 @if $color == "darkmoon" {
@@ -55,9 +55,9 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-indeterminate-bg: $base-accent !default;
   $checkbox-border-color-focused: $base-focus-bg !default;
   $checkbox-bg: $base-element-bg !default;
-  $checkbox-hover-border-color: lighten($base-accent, 12%) !default;
-  $checkbox-active-icon-bg: color.change(lighten($checkbox-bg, 62.5%), $alpha: 0.2) !default;
-  $checkbox-readonly-border-color: darken($checkbox-border-color, 9%) !default;
+  $checkbox-hover-border-color: color.adjust($base-accent, $lightness: 12%, $space: hsl) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($checkbox-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: -9%, $space: hsl) !default;
 }
 @if $color == "darkviolet" {
@@ -66,8 +66,8 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-border-color-focused: $base-focus-color !default;
   $checkbox-bg: $base-element-bg !default;
   $checkbox-hover-border-color: $base-accent-highlight-color !default;
-  $checkbox-active-icon-bg: color.change(lighten($checkbox-bg, 62.5%), $alpha: 0.2) !default;
-  $checkbox-readonly-border-color: darken($checkbox-border-color, 9%) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($checkbox-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: -9%, $space: hsl) !default;
 }
 @if $color == "greenmist" {
@@ -75,9 +75,9 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-indeterminate-bg: $base-accent !default;
   $checkbox-border-color-focused: $base-focus-bg !default;
   $checkbox-bg: $base-element-bg !default;
-  $checkbox-hover-border-color: darken($base-accent, 12%) !default;
-  $checkbox-active-icon-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
-  $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
+  $checkbox-hover-border-color: color.adjust($base-accent, $lightness: -12%, $space: hsl) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: 9%, $space: hsl) !default;
 }
 @if $color == "light" {
@@ -85,9 +85,9 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-indeterminate-bg: $base-accent !default;
   $checkbox-border-color-focused: $base-focus-bg !default;
   $checkbox-bg: $base-element-bg !default;
-  $checkbox-hover-border-color: darken($base-accent, 12%) !default;
-  $checkbox-active-icon-bg: color.change(darken($checkbox-bg, 62.5%), $alpha: 0.2) !default;
-  $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
+  $checkbox-hover-border-color: color.adjust($base-accent, $lightness: -12%, $space: hsl) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($checkbox-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: 9%, $space: hsl) !default;
 }
 @if $color == "softblue" {
@@ -95,9 +95,9 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-indeterminate-bg: $base-accent !default;
   $checkbox-border-color-focused: $base-focus-bg !default;
   $checkbox-bg: $base-element-bg !default;
-  $checkbox-hover-border-color: darken($base-accent, 12%) !default;
-  $checkbox-active-icon-bg: color.change(darken($checkbox-bg, 62.5%), $alpha: 0.2) !default;
-  $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
+  $checkbox-hover-border-color: color.adjust($base-accent, $lightness: -12%, $space: hsl) !default;
+  $checkbox-active-icon-bg: color.change(color.adjust($checkbox-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default;
+  $checkbox-readonly-border-color: color.adjust($checkbox-border-color, $lightness: 9%, $space: hsl) !default;
 }
 $checkbox-readonly-bg: $checkbox-bg !default;