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/fluent/button/_colors.scss CHANGED Viewed

@@ -112,48 +112,48 @@ $button-success-outlined-selected-bg: null !default;
 $button-accent-foreground-color: null !default;
 @if $mode == "light" {
-  $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default;
+  $button-accent-foreground-color: color.adjust($base-accent, $hue: -2deg, $saturation: -9.10%, $space: hsl, $lightness: -23.53%) !default;
   $button-default-hover-bg: $base-accent-hover !default;
   $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: $base-accent-active !default;
   $button-default-selected-bg: $base-accent-selected !default;
-  $button-success-hover-bg: darken(saturate($base-success, 0.63), 2.75) !default;
+  $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default;
   $button-success-focused-bg: $button-success-hover-bg !default;
-  $button-success-active-bg: darken(desaturate($base-success, 0.95), 19.22) !default;
-  $button-success-selected-bg: darken(desaturate($base-success, 0.22), 12.16) !default;
+  $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default;
+  $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default;
   @if $color == "blue" {
-    $button-default-outlined-hover-bg: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
-    $button-default-outlined-selected-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 10.40), 5.49) !default;
-    $button-default-outlined-active-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 17.00), 17.06) !default;
+    $button-default-outlined-hover-bg: color.adjust($base-accent, $hue: 3.8deg, $saturation: -11.4%, $space: hsl, $lightness: 55.5%) !default;
+    $button-default-outlined-selected-bg: color.adjust($button-default-outlined-hover-bg, $hue: -1deg, $saturation: 10.40%, $space: hsl, $lightness: -5.49%) !default;
+    $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $space: hsl, $lightness: -17.06%) !default;
-    $button-danger-outlined-hover-bg: lighten(saturate(adjust-hue($base-danger, 1.5), 0.6), 46.7) !default;
+    $button-danger-outlined-hover-bg: color.adjust($base-danger, $hue: 1.5deg, $saturation: 0.6%, $space: hsl, $lightness: 46.7%) !default;
     $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
-    $button-danger-outlined-active-bg: darken(saturate(adjust-hue($button-danger-outlined-hover-bg, 358.9), 2.2), 13.9) !default;
-    $button-danger-outlined-selected-bg: lighten(desaturate(adjust-hue($button-danger-outlined-active-bg, 359.1), 0.6), 7.1) !default;
+    $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $space: hsl, $lightness: -13.9%) !default;
+    $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $space: hsl, $lightness: 7.1%) !default;
-    $button-success-outlined-hover-bg: lighten(desaturate($base-success, 29.8), 68.8) !default;
+    $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default;
     $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
-    $button-success-outlined-active-bg: lighten(desaturate($base-success, 34.9), 46.1) !default;
-    $button-success-outlined-selected-bg: lighten(desaturate($base-success, 35), 57.6) !default;
+    $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default;
+    $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default;
   }
   @if $color == "saas" {
-    $button-default-outlined-hover-bg: mix($base-bg, $base-accent, 90%) !default;
-    $button-default-outlined-selected-bg: darken($button-default-outlined-hover-bg, 4) !default;
-    $button-default-outlined-active-bg: darken($button-default-outlined-hover-bg, 4) !default;
+    $button-default-outlined-hover-bg: color.mix($base-bg, $base-accent, 90%) !default;
+    $button-default-outlined-selected-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
+    $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
-    $button-danger-outlined-hover-bg: mix($base-bg, $base-danger, 90%) !default;
+    $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default;
     $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
-    $button-danger-outlined-active-bg: darken($button-danger-outlined-hover-bg, 4) !default;
-    $button-danger-outlined-selected-bg: darken($button-danger-outlined-hover-bg, 4) !default;
+    $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
+    $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
-    $button-success-outlined-hover-bg: mix($base-bg, $base-success, 90%) !default;
+    $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default;
     $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
-    $button-success-outlined-active-bg: darken($button-success-outlined-hover-bg, 4) !default;
-    $button-success-outlined-selected-bg: darken($button-success-outlined-hover-bg, 4) !default;
+    $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
+    $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default;
   }
   $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
@@ -162,8 +162,8 @@ $button-accent-foreground-color: null !default;
   $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-selected !default;
-  $button-success-outlined-color-hover: darken(desaturate($base-success, 0.22), 12.16) !default;
-  $button-success-outlined-color-active: darken(desaturate($base-success, 0.95), 19.22) !default;
+  $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default;
+  $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default;
   $button-success-outlined-selected-color: $button-success-outlined-color-hover;
   $button-default-color: $base-inverted-text-color !default;
@@ -176,40 +176,40 @@ $button-accent-foreground-color: null !default;
 }
 @if $mode == "dark" {
-  $button-accent-foreground-color: lighten(desaturate(adjust-hue($base-accent, 0.9), 2.2), 22.4) !default;
+  $button-accent-foreground-color: color.adjust($base-accent, $hue: 0.9deg, $saturation: -2.2%, $space: hsl, $lightness: 22.4%) !default;
   $button-default-hover-bg: $base-accent-hover !default;
   $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: $button-accent-foreground-color !default;
-  $button-default-selected-bg: lighten(desaturate($button-default-active-bg, 6.4), 5.3) !default;
+  $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default;
-  $button-success-hover-bg: lighten(saturate($base-success, 5.4), 22.5) !default;
+  $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default;
   $button-success-focused-bg: $button-success-hover-bg !default;
-  $button-success-active-bg: lighten(saturate($base-success, 10.6), 45.3) !default;
-  $button-success-selected-bg: lighten(saturate($base-success, 5.3), 34.1) !default;
+  $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default;
+  $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default;
-  $button-default-outlined-hover-bg: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default;
+  $button-default-outlined-hover-bg: color.adjust($base-accent, $hue: 356.3deg, $saturation: -14.7%, $space: hsl, $lightness: -49.4%) !default;
   $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
   $button-default-outlined-active-bg: $base-accent-selected !default;
-  $button-default-outlined-selected-bg: darken(desaturate(adjust-hue($base-accent, -4), 12.33), 41.18) !default;
+  $button-default-outlined-selected-bg: color.adjust($base-accent, $hue: -4deg, $saturation: -12.33%, $space: hsl, $lightness: -41.18%) !default;
   $button-danger-outlined-color-hover: $base-danger-active !default;
   $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-active !default;
-  $button-danger-outlined-hover-bg: darken(desaturate($base-danger, 5.1), 53.5) !default;
+  $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default;
   $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
-  $button-danger-outlined-active-bg: darken(desaturate($base-danger, 4.6), 22.9) !default;
-  $button-danger-outlined-selected-bg: darken(desaturate($base-danger, 4.3), 40.4) !default;
+  $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default;
+  $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default;
-  $button-success-outlined-color-hover: lighten(saturate($base-success, 10.6), 45.3) !default;
+  $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default;
   $button-success-outlined-color-active: $button-success-outlined-color-hover !default;
   $button-success-outlined-selected-color: $button-success-outlined-color-hover !default;
-  $button-success-outlined-hover-bg: darken(saturate($base-success, 39.4), 42.7) !default;
+  $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default;
   $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
-  $button-success-outlined-active-bg: darken(saturate($base-success, 39), 33.1) !default;
-  $button-success-outlined-selected-bg: darken(saturate($base-success, 40.1), 35.7) !default;
+  $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default;
+  $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default;
   $button-default-color: $base-typography-bg !default;
   $button-default-selected-color: $base-typography-bg !default;

package/data/scss/widgets/fluent/calendar/_colors.scss CHANGED Viewed

@@ -33,18 +33,18 @@ $calendar-week-number-border-radius: 0 !default;
   $calendar-hover-bg: $button-default-outlined-selected-bg !default;
   $calendar-cell-hover-border-color: $calendar-hover-bg !default;
   $calendar-cell-active-bg: $button-default-outlined-active-bg !default;
-  $calendar-cell-other-color: lighten($calendar-color, 23.92) !default;
-  $calendar-week-number-cell-color: lighten($calendar-color, 23.92) !default;
+  $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default;
+  $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default;
   $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default;
   $calendar-week-number-cell-bg: $base-background-disabled !default;
 }
 @if $mode == "dark" {
-  $calendar-hover-bg: darken(desaturate(adjust-hue($base-accent, 358.4), 8.6), 26.7) !default;
+  $calendar-hover-bg: color.adjust($base-accent, $hue: 358.4deg, $saturation: -8.6%, $space: hsl, $lightness: -26.7%) !default;
   $calendar-cell-hover-border-color: $calendar-hover-bg !default;
   $calendar-cell-active-bg: $base-accent-selected !default;
-  $calendar-cell-other-color: darken($calendar-color, 32.16) !default;
-  $calendar-week-number-cell-color: darken($calendar-color, 32.16) !default;
+  $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default;
+  $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default;
   $calendar-cell-contoured-border-color: $base-accent-active !default;
   $calendar-week-number-cell-bg: $base-hover-bg !default;
 }

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

@@ -55,6 +55,7 @@ $cardview-fluent-card__content__field-value--highlighted-bg-color: getCustomVar(
 $cardview-fluent-card__content__field-value--highlighted-text-color: getCustomVar(("$cardview-fluent-card__content__field-value--highlighted-text-color")) !default;
 $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: getCustomVar(("$cardview-fluent-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 *;
@@ -193,14 +194,14 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
   $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-card__cover-bg-color: #FFF !default;
-  $cardview-fluent-card__cover--noimage-bg-color: darken($base-bg, 12.16) !default;
-  $cardview-fluent-card__cover--noimage__icon-color: lighten($cardview-fluent-common-text-color, 23.92) !default;
+  $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default;
+  $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default;
   $cardview-fluent-card--focused-outline-color: $base-accent !default;
   // Card - selected
-  $cardview-fluent-card--selected-bg-color: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default;
-  $cardview-fluent-card--selected-border-color: lighten(saturate(adjust-hue($base-accent, 3), 2.21), 44.31) !default;
+  $cardview-fluent-card--selected-bg-color: color.adjust($base-accent, $hue: 4deg, $saturation: -11.38%, $space: hsl, $lightness: 55.49%) !default;
+  $cardview-fluent-card--selected-border-color: color.adjust($base-accent, $hue: 3deg, $saturation: 2.21%, $space: hsl, $lightness: 44.31%) !default;
   $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
   $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
   $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
@@ -208,7 +209,7 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
   // Header panel item - default state
-  $cardview-fluent-header-panel__item-bg-color: darken($base-bg, 5.88) !default;
+  $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default;
   $cardview-fluent-header-panel__item-border-color: $base-border-color !default;
   $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
@@ -218,8 +219,8 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default;
   // Header panel item - hovered
-  $cardview-fluent-header-panel__item--hovered-bg-color: darken($cardview-fluent-header-panel__item-bg-color, 1.96)  !default;
-  $cardview-fluent-header-panel__item--hovered-border-color: darken($cardview-fluent-header-panel__item-border-color, 13.73) !default;
+  $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl)  !default;
+  $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: -13.73%, $space: hsl) !default;
   $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default;
   $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default;
   $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default;
@@ -228,21 +229,21 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   // Header panel item - disabled
   $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
   $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
-  $cardview-fluent-header-panel__item--disabled-text-color: lighten($cardview-fluent-header-panel__item-text-color, 60.00) !default;
-  $cardview-fluent-header-panel__item--disabled__icon-color: lighten($cardview-fluent-header-panel__item__icon-color, 60.00) !default;
-  $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: lighten(desaturate($cardview-fluent-header-panel__item__header-filter-icon--selected-color, 34.10), 27.06) !default;
-  $cardview-fluent-header-panel__item--disabled__sort-index-text-color: lighten($cardview-fluent-header-panel__item__sort-index-text-color, 60.00) !default;
+  $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default;
+  $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default;
+  $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default;
+  $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default;
   // Header panel item - dragged
   $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
   $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
   $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
   $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: darken(saturate(adjust-hue($base-danger, -4), 22.80), 9.61) !default;
+  $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $hue: -4deg, $saturation: 22.80%, $space: hsl, $lightness: -9.61%) !default;
   $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
   // Header panel Drop-zone
-  $cardview-fluent-header-panel__dropzone-bg-color: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default;
+  $cardview-fluent-header-panel__dropzone-bg-color: color.adjust($base-accent, $hue: 4deg, $saturation: -11.38%, $space: hsl, $lightness: 55.49%) !default;
   $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default;
   $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default;
   $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default;
@@ -255,9 +256,9 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   // Empty view
   $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
-  $cardview-fluent-nodata-view-text-color: lighten($cardview-fluent-common-text-color, 23.92) !default;
+  $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default;
   $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default;
-  $cardview-fluent-nodata-view__icon-bg-color: darken($base-bg, 9.80) !default;
+  $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default;
   // Search highlight
   $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default;
@@ -265,7 +266,7 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
   // Column chooser
-  $cardview-fluent-columnchooser--empty__message-color: lighten($cardview-fluent-common-text-color, 26%) !default;
+  $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 @if $mode == "dark" {
@@ -281,14 +282,14 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
   $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-card__cover-bg-color: #FFF !default;
-  $cardview-fluent-card__cover--noimage-bg-color: darken($base-bg, 5.88) !default;
-  $cardview-fluent-card__cover--noimage__icon-color: darken($base-text-color, 32.16) !default;
+  $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default;
+  $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default;
   $cardview-fluent-card--focused-outline-color: $base-accent !default;
   // Card - selected
-  $cardview-fluent-card--selected-bg-color: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default;
-  $cardview-fluent-card--selected-border-color: darken(desaturate(adjust-hue($base-accent, -3), 11.06), 36.27) !default;
+  $cardview-fluent-card--selected-bg-color: color.adjust($base-accent, $hue: -4deg, $saturation: -14.69%, $space: hsl, $lightness: -49.41%) !default;
+  $cardview-fluent-card--selected-border-color: color.adjust($base-accent, $hue: -3deg, $saturation: -11.06%, $space: hsl, $lightness: -36.27%) !default;
   $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
   $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
   $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
@@ -296,7 +297,7 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
   // Header panel item - default state
-  $cardview-fluent-header-panel__item-bg-color: darken($base-bg, 12.16) !default;
+  $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default;
   $cardview-fluent-header-panel__item-border-color: $base-border-color !default;
   $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
@@ -306,8 +307,8 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default;
   // Header panel item - hovered
-  $cardview-fluent-header-panel__item--hovered-bg-color: lighten($cardview-fluent-header-panel__item-bg-color, 18.04)  !default;
-  $cardview-fluent-header-panel__item--hovered-border-color: lighten($cardview-fluent-header-panel__item-border-color, 11.76) !default;
+  $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl)  !default;
+  $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: 11.76%, $space: hsl) !default;
   $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-common-text-color !default;
   $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $base-accent !default;
@@ -316,21 +317,21 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   // Header panel item - disabled
   $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
   $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
-  $cardview-fluent-header-panel__item--disabled-text-color: darken($cardview-fluent-header-panel__item-text-color, 56.08) !default;
-  $cardview-fluent-header-panel__item--disabled__icon-color: darken($cardview-fluent-header-panel__item__icon-color, 56.08) !default;
-  $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: darken(desaturate($cardview-fluent-header-panel__item__header-filter-icon--selected-color, 6.72), 18.04) !default;
-  $cardview-fluent-header-panel__item--disabled__sort-index-text-color: darken($cardview-fluent-header-panel__item__sort-index-text-color, 56.08) !default;
+  $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default;
+  $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default;
+  $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default;
+  $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default;
   // Header panel item - dragged
   $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
   $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
   $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
   $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
-  $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: darken(desaturate($base-danger, 0.27), 7.45) !default;
+  $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default;
   $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default;
   // Header panel Drop-zone
-  $cardview-fluent-header-panel__dropzone-bg-color: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default;
+  $cardview-fluent-header-panel__dropzone-bg-color: color.adjust($base-accent, $hue: -4deg, $saturation: -14.69%, $space: hsl, $lightness: -49.41%) !default;
   $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default;
   $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default;
   $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default;
@@ -343,17 +344,17 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
   // Empty view
   $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
-  $cardview-fluent-nodata-view-text-color: darken($cardview-fluent-common-text-color, 32.16) !default;
-  $cardview-fluent-nodata-view__icon-color: darken($cardview-fluent-common-text-color, 32.16) !default;
-  $cardview-fluent-nodata-view__icon-bg-color: lighten($base-bg, 3.92) !default;
+  $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default;
+  $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default;
+  $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default;
   // Search highlight
   $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default;
-  $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default;
+  $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default;
   $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
   // Column chooser
-  $cardview-fluent-columnchooser--empty__message-color: lighten($cardview-fluent-common-text-color, 26%) !default;
+  $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default;
 }
 $cardview-bg-color: $cardview-fluent-common-bg-color !default;

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

@@ -55,52 +55,58 @@ $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
 $chat-file-secondary-color: null !default;
+$chat-suggestions-box-shadow: null !default;
 @if $mode == "light" {
-  $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default;
-  $chat-information-author-name-color: darken($base-bg, 56.08) !default;
-  $chat-information-timestamp-color: darken($base-bg, 56.08) !default;
-  $chat-typingindicator-color: darken($base-bg, 56.08) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: darken($base-bg, 56.08) !default;
-  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default;
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
-  $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: 32.16%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
+  $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -5.88%, $space: hsl) !default;
-  $chat-typingindicator-circle-bg-color: darken($base-bg, 29.16) !default;
-  $chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -29.16%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !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;
   $chat-file-secondary-color: $base-icon-color !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;
   @if $color == "blue" {
-    $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
-    $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
+    $chat-bubble-background-color-primary: color.adjust($base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%, $space: hsl) !default;
+    $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default;
   }
   @if $color == "saas" {
-    $chat-bubble-background-color-primary: mix($base-bg, $base-accent, 90%) !default;
+    $chat-bubble-background-color-primary: color.mix($base-bg, $base-accent, 90%) !default;
     $chat-messagelist-empty-icon-background-color: $base-border-color !default;
   }
 }
 @if $mode == "dark" {
-  $chat-bubble-background-color-secondary: lighten($base-bg, 7.84) !default;
-  $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default;
+  $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default;
+  $chat-bubble-background-color-primary: color.adjust($base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%, $space: hsl) !default;
-  $chat-information-author-name-color: lighten($base-bg, 43.92) !default;
-  $chat-information-timestamp-color: lighten($base-bg, 43.92) !default;
-  $chat-typingindicator-color: lighten($base-bg, 43.92) !default;
+  $chat-information-author-name-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default;
+  $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default;
+  $chat-typingindicator-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default;
-  $chat-messagelist-day-header-color: lighten($base-bg, 43.92) !default;
-  $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default;
-  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
-  $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default;
+  $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -25.88%, $space: hsl) !default;
+  $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default;
+  $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: 7.84%, $space: hsl) !default;
-  $chat-typingindicator-circle-bg-color: lighten($base-bg, 33.92) !default;
-  $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
+  $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 33.92%, $space: hsl) !default;
+  $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !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;
   $chat-file-secondary-color: $base-icon-color !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-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;

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

@@ -136,6 +136,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/fluent/chat/_sizes.scss CHANGED Viewed

@@ -4,6 +4,7 @@
 @use "../sizes" as *;
 @use "../typography/sizes" as *;
 @use "../popup/sizes" as *;
+@use "../button/colors" as *;
 // adduse
@@ -36,6 +37,12 @@ $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: $fluent-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: $fluent-xs-font-size !default;
 $chat-message-editing-preview-content-row-gap: null !default;
 $chat-message-editing-preview-content-padding-inline: null !default;
@@ -95,6 +102,8 @@ $chat-bubble-gap: 8px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 6px !default;
+  $chat-suggestions-padding: 20px !default;
   $chat-message-editing-preview-content-padding-inline: 12px !default;
   $chat-message-editing-preview-content-row-gap: 4px !default;
@@ -133,6 +142,8 @@ $chat-bubble-gap: 8px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 5px !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/fluent/color.scss CHANGED Viewed

@@ -4,19 +4,19 @@
 @function difference($minuend, $subtrahend) {
   @return color.adjust(
         $minuend,
-        $red: - (color.red($subtrahend)),
-        $green: - (color.green($subtrahend)),
-        $blue: - (color.blue($subtrahend)));
+        $red: - (color.channel($subtrahend, "red", $space: rgb)),
+        $green: - (color.channel($subtrahend, "green", $space: rgb)),
+        $blue: - (color.channel($subtrahend, "blue", $space: rgb)));
 }
 @function screen($color1, $color2) {
-  $r1: math.div(color.red($color1), 255);
-  $g1: math.div(color.green($color1), 255);
-  $b1: math.div(color.blue($color1), 255);
+  $r1: math.div(color.channel($color1, "red", $space: rgb), 255);
+  $g1: math.div(color.channel($color1, "green", $space: rgb), 255);
+  $b1: math.div(color.channel($color1, "blue", $space: rgb), 255);
-  $r2: math.div(color.red($color2), 255);
-  $g2: math.div(color.green($color2), 255);
-  $b2: math.div(color.blue($color2), 255);
+  $r2: math.div(color.channel($color2, "red", $space: rgb), 255);
+  $g2: math.div(color.channel($color2, "green", $space: rgb), 255);
+  $b2: math.div(color.channel($color2, "blue", $space: rgb), 255);
   @return color.change(
         $color1,
@@ -24,3 +24,13 @@
         $green: ($g1 + $g2 - $g1 * $g2) * 255,
         $blue: ($b1 + $b2 - $b1 * $b2) * 255);
 }
+@function adjust-if-not-achromatic($color, $hue, $saturation, $lightness) {
+  $out: color.adjust($color, $saturation: $saturation, $lightness: $lightness, $space: hsl);
+  @if not color.is-powerless($out, "hue", $space: hsl) {
+    $out: color.adjust($out, $hue: $hue, $space: hsl);
+  }
+  @return $out;
+}

package/data/scss/widgets/fluent/dataGrid/_colors.scss CHANGED Viewed

@@ -8,7 +8,7 @@ $fluent-datagrid-grouppanel-item-bg: null !default;
 @if $mode == "light" {
   @if $color == "blue"{
-    $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default;
+    $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default;
   }
   @if $color == "saas" {
@@ -17,5 +17,5 @@ $fluent-datagrid-grouppanel-item-bg: null !default;
 }
 @if $mode == "dark" {
-  $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 12.16) !default;
+  $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default;
 }

package/data/scss/widgets/fluent/dataGrid/_index.scss CHANGED Viewed

@@ -108,6 +108,7 @@
 .dx-row.dx-datagrid-group-footer {
   &.dx-column-lines {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 }

package/data/scss/widgets/fluent/diagram/_colors.scss CHANGED Viewed

@@ -8,10 +8,10 @@
 $diagram-border-color: $base-border-color !default;
 $diagram-toolbar-border-color: $base-border-color !default;
-$diagram-normal-format-active-bg: darken($button-normal-bg, 10%) !default;
-$diagram-default-format-active-bg: darken($button-default-bg, 10%) !default;
-$diagram-danger-format-active-bg: darken($button-danger-bg, 10%) !default;
-$diagram-success-format-active-bg: darken($button-success-bg, 10%) !default;
+$diagram-normal-format-active-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default;
+$diagram-default-format-active-bg: color.adjust($button-default-bg, $lightness: -10%, $space: hsl) !default;
+$diagram-danger-format-active-bg: color.adjust($button-danger-bg, $lightness: -10%, $space: hsl) !default;
+$diagram-success-format-active-bg: color.adjust($button-success-bg, $lightness: -10%, $space: hsl) !default;
 $diagram-image-icon-base-color: null !default;
 $diagram-image-icon-accent-color: null !default;
 $diagram-toolbox-shape-text-opacity: null !default;

package/data/scss/widgets/fluent/diagram/_index.scss CHANGED Viewed

@@ -28,7 +28,7 @@ $diagram-toolbox-title-size: 18px;
   // stylelint-disable selector-class-pattern
   .dxdi-control .dxdi-canvas {
-    background-color: darken($overlay-content-bg, 15%);
+    background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl);
     .selection-mark,
     .item-selection-rect,
@@ -134,7 +134,8 @@ $diagram-toolbox-title-size: 18px;
   // stylelint-enable selector-class-pattern
   .dx-diagram-toolbar-wrapper {
-    border-bottom: 1px solid $diagram-toolbar-border-color;
+    border-bottom: 1px solid;
+    border-bottom-color: $diagram-toolbar-border-color;
   }

package/data/scss/widgets/fluent/fieldset/_index.scss CHANGED Viewed

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:color";
+@use "sass:selector";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
@@ -105,7 +106,7 @@
     margin: $vertical-margin $horizontal-margin;
     padding: 0;
-    @at-root #{selector-append(".dx-rtl", &)},
+    @at-root #{selector.append(".dx-rtl", &)},
     .dx-rtl & {
       .dx-field-value {
         &:not(.dx-widget) {