From 7c5ee282ff52fa6ceec793035738e9368c474286 Mon Sep 17 00:00:00 2001 From: Andrei Vorobev Date: Tue, 7 Jul 2026 10:04:11 +0300 Subject: [PATCH 1/2] SCSS: use adjust if not achromatic helper for all color.adjust --- .../scss/widgets/fluent/_colors.scss | 11 ++++---- .../scss/widgets/fluent/badge/_colors.scss | 2 +- .../scss/widgets/fluent/button/_colors.scss | 21 ++++++++-------- .../scss/widgets/fluent/calendar/_colors.scss | 3 ++- .../scss/widgets/fluent/cardView/_colors.scss | 15 +++++------ .../scss/widgets/fluent/chat/_colors.scss | 5 ++-- .../scss/widgets/fluent/gridBase/_colors.scss | 5 ++-- .../scss/widgets/fluent/informer/_colors.scss | 3 ++- .../widgets/fluent/loadIndicator/_colors.scss | 17 +++++++------ .../widgets/fluent/scheduler/_colors.scss | 2 +- .../widgets/generic/cardView/_colors.scss | 13 +++++----- .../widgets/generic/informer/_colors.scss | 25 ++++++++++--------- .../generic/loadIndicator/_colors.scss | 17 +++++++------ .../widgets/material/cardView/_colors.scss | 3 ++- .../widgets/material/informer/_colors.scss | 4 +-- .../material/loadIndicator/_colors.scss | 9 ++++--- 16 files changed, 84 insertions(+), 71 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss index 8ebea2f73835..7635e6596312 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss @@ -1,6 +1,7 @@ @forward "./variables"; @use "./variables" as *; @use "sass:color"; +@use "./color" as extcolor; $color: null !default; $mode: null !default; @@ -169,7 +170,7 @@ $scrollview-pulldown-path: null !default; } $base-accent-hover: color.adjust($base-accent, $saturation: -4.18%, $space: hsl, $lightness: -4.71%) !default; - $base-accent-active: color.adjust($base-accent, $hue: -1deg, $saturation: -4.65%, $space: hsl, $lightness: -9.61%) !default; + $base-accent-active: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: -4.65%, $lightness: -9.61%) !default; $base-accent-selected: color.adjust($base-accent-active, $saturation: -2.02%, $space: hsl, $lightness: -4.71%) !default; $base-foreground-disabled: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; @@ -222,8 +223,8 @@ $scrollview-pulldown-path: null !default; } $base-accent-hover: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default; - $base-accent-active: color.adjust($base-accent, $hue: -1deg, $saturation: -16.30%, $space: hsl, $lightness: -10.59%) !default; - $base-accent-selected: color.adjust($base-accent, $hue: -3deg, $saturation: -9.05%, $space: hsl, $lightness: -31.57%) !default; + $base-accent-active: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: -16.30%, $lightness: -10.59%) !default; + $base-accent-selected: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -9.05%, $lightness: -31.57%) !default; $base-text-color: rgba(255, 255, 255, 1) !default; $base-label-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; @@ -249,8 +250,8 @@ $scrollview-pulldown-path: null !default; $base-inverted-text-color: #000 !default; $base-danger-hover: color.adjust($base-danger, $saturation: 0.44%, $space: hsl, $lightness: 7.45%) !default; - $base-danger-active: color.adjust($base-danger, $hue: 1.8deg, $saturation: -0.9%, $space: hsl, $lightness: 28.8%) !default; - $base-danger-selected: color.adjust($base-danger, $hue: 0.7deg, $saturation: 1.3%, $space: hsl, $lightness: 14.9%); + $base-danger-active: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.8deg, $saturation: -0.9%, $lightness: 28.8%) !default; + $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%); $scrollview-pulldown-path: data-uri('images/widgets/fluent/color-schemes/dark/pulldown.png') !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss index 5a8711129a46..098a56f46b9d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss @@ -25,6 +25,6 @@ $badge-background-color-disabled: $base-background-disabled !default; } @if $mode == "dark" { - $badge-bg: color.adjust($base-accent, $hue: 358.4deg, $saturation: -8.6%, $space: hsl, $lightness: -26.7%) !default; + $badge-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; $badge-color: $base-text-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss index bc6cb0111a04..10cc4afc0ba2 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss @@ -1,6 +1,7 @@ @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; +@use "../color" as extcolor; // adduse @@ -233,7 +234,7 @@ $button-success-outlined-selected-bg: null !default; $button-accent-foreground-color: null !default; @if $mode == "light" { - $button-accent-foreground-color: color.adjust($base-accent, $hue: -2deg, $saturation: -9.10%, $space: hsl, $lightness: -23.53%) !default; + $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default; $button-default-hover-bg: $base-accent-hover !default; $button-default-focused-bg: $base-accent-hover !default; @@ -246,14 +247,14 @@ $button-accent-foreground-color: null !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: 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-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; + $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 10.40%, $lightness: -5.49%) !default; + $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !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-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default; $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !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-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default; + $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !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; @@ -297,7 +298,7 @@ $button-accent-foreground-color: null !default; } @if $mode == "dark" { - $button-accent-foreground-color: color.adjust($base-accent, $hue: 0.9deg, $saturation: -2.2%, $space: hsl, $lightness: 22.4%) !default; + $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default; $button-default-hover-bg: $base-accent-hover !default; $button-default-focused-bg: $base-accent-hover !default; @@ -309,10 +310,10 @@ $button-accent-foreground-color: null !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: color.adjust($base-accent, $hue: 356.3deg, $saturation: -14.7%, $space: hsl, $lightness: -49.4%) !default; + $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $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: color.adjust($base-accent, $hue: -4deg, $saturation: -12.33%, $space: hsl, $lightness: -41.18%) !default; + $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default; $button-danger-outlined-color-hover: $base-danger-active !default; $button-danger-outlined-color-active: $base-danger-active !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss index 0f8e6c468678..b0986f1b8d56 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss @@ -2,6 +2,7 @@ @use "../sizes" as *; @use "../colors" as *; @use "../button/colors" as *; +@use "../color" as extcolor; // adduse @@ -55,7 +56,7 @@ $calendar-week-number-border-radius: 0 !default; } @if $mode == "dark" { - $calendar-hover-bg: color.adjust($base-accent, $hue: 358.4deg, $saturation: -8.6%, $space: hsl, $lightness: -26.7%) !default; + $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $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: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss index f2343e379b7c..0c7d36023717 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use '../colors' as *; +@use '../color' as extcolor; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @use '../../base/cardView/header_panel/item/variables' as *; @@ -423,8 +424,8 @@ $cardview-fluent-columnchooser--empty__message-color: null !default; $cardview-fluent-card--focused-outline-color: $base-accent !default; // Card - selected - $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-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; + $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $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; @@ -462,11 +463,11 @@ $cardview-fluent-columnchooser--empty__message-color: null !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: color.adjust($base-danger, $hue: -4deg, $saturation: 22.80%, $space: hsl, $lightness: -9.61%) !default; + $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $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: color.adjust($base-accent, $hue: 4deg, $saturation: -11.38%, $space: hsl, $lightness: 55.49%) !default; + $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $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; @@ -511,8 +512,8 @@ $cardview-fluent-columnchooser--empty__message-color: null !default; $cardview-fluent-card--focused-outline-color: $base-accent !default; // Card - selected - $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-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; + $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $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; @@ -554,7 +555,7 @@ $cardview-fluent-columnchooser--empty__message-color: null !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: color.adjust($base-accent, $hue: -4deg, $saturation: -14.69%, $space: hsl, $lightness: -49.41%) !default; + $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $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; diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss index bbfb29fb2f23..f6e7b3ab9b10 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss @@ -3,6 +3,7 @@ @use "../colors" as *; @use "../textEditor/colors" as *; @use "../button/colors" as *; +@use "../color" as extcolor; // adduse @@ -151,7 +152,7 @@ $chat-suggestions-box-shadow: null !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: color.adjust($base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%, $space: hsl) !default; + $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; } @@ -163,7 +164,7 @@ $chat-suggestions-box-shadow: null !default; @if $mode == "dark" { $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-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !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; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss index 4df97a23adb5..7544425c631d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss @@ -2,6 +2,7 @@ @use "../sizes" as *; @use "../colors" as *; @use "../button/colors" as *; +@use "../color" as extcolor; // adduse @@ -166,12 +167,12 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; @if $mode == "light" { @if $color == "blue"{ - $datagrid-row-focused-bg: color.adjust($base-accent, $hue: 3deg, $saturation: -0.98%, $space: hsl, $lightness: 50.00%) !default; + $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: -0.98%, $lightness: 50.00%) !default; $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; } @if $color == "saas" { - $datagrid-row-focused-bg: color.adjust($base-accent, $hue: -1deg, $space: hsl, $lightness: 26.47%) !default; + $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default; $datagrid-filter-row-background-color: $base-typography-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss index 265d04dbf028..5037e8368958 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss @@ -1,5 +1,6 @@ @use "../colors" as *; @use "sass:color"; +@use "../color" as extcolor; // adduse @@ -9,7 +10,7 @@ $informer-info-color: $base-text-color !default; $informer-info-background-color: null !default; @if $mode == "light" { - $informer-error-background-color: color.adjust($base-danger, $hue: -358deg, $saturation: 0.58%, $space: hsl, $lightness: 46.67%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%); $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); } diff --git a/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss index 5a35ba0d4dee..4e84470ef9e4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss @@ -1,6 +1,7 @@ @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; +@use "../color" as extcolor; // adduse @@ -21,23 +22,23 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $mode == "light" { @if $color == "blue" { - $load-indicator-inner-segment-border-color: color.adjust($load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $space: hsl, $lightness: 44.3%) !default; + $load-indicator-inner-segment-border-color: extcolor.adjust-if-not-achromatic($color: $load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $lightness: 44.3%) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; - $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 2deg, $saturation: 2.73%, $space: hsl, $lightness: 27.25%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: 5.61%, $space: hsl, $lightness: 38.43%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: 2.73%, $lightness: 27.25%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 5.61%, $lightness: 38.43%) !default; } @if $color == "saas" { $load-indicator-inner-segment-border-color: color.mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; - $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $hue: -15deg, $saturation: -14.71%, $space: hsl, $lightness: -26.47%) !default; - $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: -12deg, $saturation: -11.98%, $space: hsl, $lightness: 0.78%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: -12deg, $saturation: -9.09%, $space: hsl, $lightness: 11.96%) !default; + $load-indicator-animation-sparkle-bg-color1: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -15deg, $saturation: -14.71%, $lightness: -26.47%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -11.98%, $lightness: 0.78%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -9.09%, $lightness: 11.96%) !default; } } @if $mode == "dark" { $load-indicator-inner-segment-border-color: $base-accent-selected !default; $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default; - $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: -2deg, $saturation: -4.40%, $space: hsl, $lightness: -21.96%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: -2deg, $saturation: -8.58%, $space: hsl, $lightness: -26.67%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -4.40%, $lightness: -21.96%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -8.58%, $lightness: -26.67%) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss index 965f42ee75bf..18a739590733 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss @@ -120,7 +120,7 @@ $header-panel-cell-date: null !default; @if $color == "saas" { $scheduler-cell-active-bg: color.adjust($base-bg, $lightness: 4.31%, $space: hsl) !default; - $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $hue: -7deg, $saturation: -65.00%, $space: hsl, $lightness: -41.18%) !default; + $scheduler-workspace-focused-cell-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -7deg, $saturation: -65.00%, $lightness: -41.18%) !default; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss index 47f8748fb053..f0b00cf81fad 100644 --- a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use '../colors' as *; +@use '../color' as extcolor; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @use '../../base/cardView/header_panel/item/variables' as *; @@ -423,8 +424,8 @@ $cardview-generic-columnchooser--empty__message-color: null !default; $cardview-generic-card--focused-outline-color: $base-accent !default; // Card - selected - $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-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.41%, $lightness: 48.63%) !default; + $cardview-generic-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $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; @@ -466,7 +467,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: color.adjust($base-accent, $hue: 2deg, $saturation: -6.41%, $space: hsl, $lightness: 48.63%) !default; + $cardview-generic-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.41%, $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; @@ -511,8 +512,8 @@ $cardview-generic-columnchooser--empty__message-color: null !default; $cardview-generic-card--focused-outline-color: $base-accent !default; // Card - selected - $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-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -60.34%, $lightness: -29.41%) !default; + $cardview-generic-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $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; @@ -554,7 +555,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: color.adjust($base-accent, $hue: 1deg, $saturation: -60.34%, $space: hsl, $lightness: -29.41%) !default; + $cardview-generic-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -60.34%, $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; diff --git a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss index d53b881cc30b..4734c2bb7e8c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss @@ -1,5 +1,6 @@ @use "../colors" as *; @use "sass:color"; +@use "../color" as extcolor; // adduse @@ -9,14 +10,14 @@ $informer-info-color: null !default; $informer-info-background-color: null !default; @if $color == "carmine" { - $informer-error-color: color.adjust($base-danger, $hue: -351deg, $saturation: -26.91%, $space: hsl, $lightness: -5.49%); - $informer-error-background-color: color.adjust($base-danger, $hue: -347deg, $saturation: -26.69%, $space: hsl, $lightness: 33.14%); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -26.91%, $lightness: -5.49%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -347deg, $saturation: -26.69%, $lightness: 33.14%); $informer-info-color: $base-text-color; $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); } @if $color == "contrast" { - $informer-error-color: color.adjust($base-danger, $hue: 2deg, $saturation: -16.93%, $space: hsl, $lightness: -6.08%); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 2deg, $saturation: -16.93%, $lightness: -6.08%); $informer-error-background-color: rgba(212, 63, 58, 0.1); $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl); $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl);; @@ -30,7 +31,7 @@ $informer-info-background-color: null !default; } @if $color == "darkmoon" { - $informer-error-color: color.adjust($base-danger, $hue: -342deg, $saturation: -28.85%, $space: hsl, $lightness: -6.67%); + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -342deg, $saturation: -28.85%, $lightness: -6.67%); $informer-error-background-color: rgba(212, 63, 58, 0.1); $informer-info-color: color.adjust($base-text-color, $lightness: -12.94%, $space: hsl); $informer-info-background-color: color.adjust($base-text-color, $lightness: -68.63%, $space: hsl); @@ -39,27 +40,27 @@ $informer-info-background-color: null !default; @if $color == "darkviolet" { $informer-error-color: $base-danger; $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: color.adjust($base-text-color, $hue: -210deg, $saturation: -11.11%, $space: hsl, $lightness: -9.41%); - $informer-info-background-color: color.adjust($base-text-color, $hue: -210deg, $saturation: -11.11%, $space: hsl, $lightness: -65.10%); + $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -9.41%); + $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -210deg, $saturation: -11.11%, $lightness: -65.10%); } @if $color == "greenmist" { - $informer-error-color: color.adjust($base-danger, $hue: -351deg, $saturation: -27.05%, $space: hsl, $lightness: -4.90%); - $informer-error-background-color: color.adjust($base-danger, $hue: -348deg, $saturation: -26.83%, $space: hsl, $lightness: 33.73%); - $informer-info-color: color.adjust($base-text-color, $hue: -191deg, $saturation: -32.77%, $space: hsl, $lightness: -3.33%); - $informer-info-background-color: color.adjust($base-text-color, $hue: -191deg, $saturation: -32.77%, $space: hsl, $lightness: 68.82%) + $informer-error-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -351deg, $saturation: -27.05%, $lightness: -4.90%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -348deg, $saturation: -26.83%, $lightness: 33.73%); + $informer-info-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: -3.33%); + $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -191deg, $saturation: -32.77%, $lightness: 68.82%) } @if $color == "light" { $informer-error-color: $base-danger; - $informer-error-background-color: color.adjust($base-danger, $hue: 4deg, $saturation: 0.22%, $space: hsl, $lightness: 38.63%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%); $informer-info-color: $base-text-color; $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); } @if $color == "softblue" { $informer-error-color: $base-danger; - $informer-error-background-color: color.adjust($base-danger, $hue: 4deg, $saturation: 0.22%, $space: hsl, $lightness: 38.63%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 4deg, $saturation: 0.22%, $lightness: 38.63%); $informer-info-color: $base-text-color; $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); } diff --git a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss index 7a3cdbddfe96..c65fd5ac6be5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss @@ -1,6 +1,7 @@ @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; +@use "../color" as extcolor; // adduse @@ -19,7 +20,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } @if $color == "contrast" { @@ -27,7 +28,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: $base-shadow-color !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @if $color == "dark" { @@ -35,7 +36,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @if $color == "darkmoon" { @@ -43,7 +44,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @if $color == "darkviolet" { @@ -51,7 +52,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -25.83%, $space: hsl, $lightness: -19.61%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 1deg, $saturation: -44.18%, $space: hsl, $lightness: -11.76%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 1deg, $saturation: -44.18%, $lightness: -11.76%) !default; } @if $color == "greenmist" { @@ -59,7 +60,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } @if $color == "light" { @@ -67,7 +68,7 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } @if $color == "softblue" { @@ -75,6 +76,6 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $saturation: -8.58%, $space: hsl, $lightness: 27.06%) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 2deg, $saturation: -6.88%, $space: hsl, $lightness: 33.14%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -6.88%, $lightness: 33.14%) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss index 54b196a239a2..890114209486 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss @@ -1,5 +1,6 @@ @use 'sass:color'; @use '../colors' as *; +@use '../color' as extcolor; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @use '../../base/cardView/header_panel/item/variables' as *; @@ -462,7 +463,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-header-panel__item--dragged-border-color: $cardview-material-header-panel__item--dragged-bg-color !default; $cardview-material-header-panel__item--dragged-text-color: $cardview-material-header-panel__item-text-color !default; $cardview-material-header-panel__item--dragged__allowance-icon-color: $cardview-material-common-text-color !default; - $cardview-material-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $hue: -4deg, $saturation: 22.8%, $space: hsl, $lightness: -9.61%) !default; + $cardview-material-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.8%, $lightness: -9.61%) !default; $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss index fd5a68ebb9fe..b9289088eea5 100644 --- a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss @@ -10,11 +10,11 @@ $informer-info-color: $base-text-color !default; $informer-info-background-color: null !default; @if $mode == "light" { - $informer-error-background-color: color.adjust($base-danger, $hue: 1deg, $saturation: -24.92%, $space: hsl, $lightness: 38.24%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -24.92%, $lightness: 38.24%); $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: -240deg, $saturation: -100.00%, $lightness: 48.63%); } @if $mode == "dark" { - $informer-error-background-color: color.adjust($base-danger, $hue: 1deg, $saturation: -41.80%, $space: hsl, $lightness: -53.92%); + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1deg, $saturation: -41.80%, $lightness: -53.92%); $informer-info-background-color: extcolor.adjust-if-not-achromatic($color: $base-text-color, $hue: 240deg, $saturation: 6.04%, $lightness: -70.78%); } diff --git a/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss index 2480de0632b3..a8e0da3c2727 100644 --- a/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss @@ -1,6 +1,7 @@ @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; +@use "../color" as extcolor; // adduse @@ -15,12 +16,12 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $mode == "light" { $load-indicator-animation-sparkle-bg-color1: $base-accent !default; - $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 4deg, $saturation: -6.73%, $lightness: 25.88%, $space: hsl,) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 4deg, $saturation: -6.87%, $lightness: 34.71%, $space: hsl,) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -6.73%, $lightness: 25.88%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -6.87%, $lightness: 34.71%) !default; } @else if $mode == "dark" { $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $lightness: 19.22%, $space: hsl) !default; - $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 2deg, $saturation: -58.44%, $lightness: 1.18%, $space: hsl) !default; - $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: -64.56%, $lightness: -7.45%, $space: hsl) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: -58.44%, $lightness: 1.18%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: -64.56%, $lightness: -7.45%) !default; } From 87b549f462045a4e6c0b0154e97315e963d0c783 Mon Sep 17 00:00:00 2001 From: Andrei Vorobev Date: Tue, 7 Jul 2026 13:44:15 +0300 Subject: [PATCH 2/2] SCSS: remove unused imports in scss files --- packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss | 1 - .../devextreme-scss/scss/widgets/material/informer/_colors.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss index 098a56f46b9d..5c86f7a03ff9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/badge/_colors.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../colors" as *; @use "../color" as extcolor; diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss index b9289088eea5..e1065f4d4f14 100644 --- a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss @@ -1,6 +1,5 @@ @use "../colors" as *; @use "../color" as extcolor; -@use "sass:color"; // adduse