diff --git a/apps/demos/.stylelintrc.json b/apps/demos/.stylelintrc.json index 9eac240fe3f1..2657945bb3e9 100644 --- a/apps/demos/.stylelintrc.json +++ b/apps/demos/.stylelintrc.json @@ -16,6 +16,7 @@ "shorthand-property-no-redundant-values": [ true, { "severity": "warning" }], "declaration-block-no-redundant-longhand-properties": [ true, { "severity": "warning" }], "media-feature-range-notation": null, - "selector-not-notation": null + "selector-not-notation": null, + "color-function-alias-notation": null } } diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css index 52d782bd257c..e7f60c2f7bfb 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css @@ -1,3 +1,4 @@ +/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */ @-moz-document url-prefix() { .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { position: relative; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css index c88932fa0839..b41719168617 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css @@ -1,3 +1,4 @@ +/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */ @-moz-document url-prefix() { .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { position: relative; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css index c88932fa0839..b41719168617 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css @@ -1,3 +1,4 @@ +/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */ @-moz-document url-prefix() { .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { position: relative; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css index c88932fa0839..b41719168617 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css +++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css @@ -1,3 +1,4 @@ +/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */ @-moz-document url-prefix() { .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { position: relative; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css index c88932fa0839..b41719168617 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css @@ -1,3 +1,4 @@ +/* stylelint-disable-next-line at-rule-no-vendor-prefix, at-rule-prelude-no-invalid */ @-moz-document url-prefix() { .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { position: relative; diff --git a/apps/demos/package.json b/apps/demos/package.json index d8aab3f5353b..d11d1cf6da2e 100644 --- a/apps/demos/package.json +++ b/apps/demos/package.json @@ -145,9 +145,9 @@ "rollup": "4.22.4", "serve-index": "1.9.1", "serve-static": "1.16.2", - "stylelint": "16.5.0", - "stylelint-config-recommended-vue": "1.5.0", - "stylelint-config-standard": "35.0.0", + "stylelint": "16.22.0", + "stylelint-config-recommended-vue": "1.6.1", + "stylelint-config-standard": "38.0.0", "systemjs-builder": "0.16.15", "testcafe": "3.7.2", "testcafe-reporter-spec-time": "4.0.0", diff --git a/e2e/bundlers/project.json b/e2e/bundlers/project.json index 1fee62fd8fd2..ffcd83008dd2 100644 --- a/e2e/bundlers/project.json +++ b/e2e/bundlers/project.json @@ -47,13 +47,21 @@ }, "dependsOn": ["build"] }, + "build-parcel-watcher": { + "executor": "nx:run-commands", + "options": { + "cwd": "{projectRoot}", + "command": "cross-env npm_config_build_from_source=true pnpm rebuild --recursive @parcel/watcher" + }, + "dependsOn": ["build"] + }, "test--parcel": { "executor": "nx:run-commands", "options": { "cwd": "{projectRoot}", "command": "parcel build ./entry/modules_esm.js --no-cache --dist-dir ./dist/dist_parsel" }, - "dependsOn": ["build"] + "dependsOn": ["build-parcel-watcher"] }, "test--browserify-cjs": { "executor": "nx:run-commands", @@ -72,4 +80,4 @@ "dependsOn": ["build"] } } -} \ No newline at end of file +} diff --git a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx index 3ef75cd5300b..ff769adb1da3 100644 --- a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx @@ -10,7 +10,7 @@ jest.useFakeTimers(); const NestedComponent = function NestedComponent(props: any) { return ( - + > elementDescriptor={{ OptionName: 'option', ExpectedChildren: { @@ -26,7 +26,7 @@ NestedComponent.componentType = 'option'; const NestedComponentWithPredfeinedProps = function NestedComponentWithPredfeinedProps(props: any) { return ( - + > elementDescriptor={{ OptionName: 'option', PredefinedProps: { @@ -1152,7 +1152,7 @@ describe('nested sub-option', () => { it('is pulled according to expectations', () => { const NestedComponentWithExpectations = function NestedComponentWithExpectations(props: any) { return ( - + > elementDescriptor={{ OptionName: 'option', ExpectedChildren: { diff --git a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx index 8c2b2e2b4526..e4eca777a6e5 100644 --- a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx @@ -32,7 +32,7 @@ interface IControlledComponentProps { complexOption?: Record; } -const ControlledComponent = memo(function ControlledComponent(props: IControlledComponentProps & React.PropsWithChildren) { +const ControlledComponent = memo(function ControlledComponent(props: IControlledComponentProps & React.PropsWithChildren) { return ( ; value?: number; onValueChange?: (value: number) => void; - } & React.PropsWithChildren> + } & React.PropsWithChildren> elementDescriptor={{ OptionName: 'nestedOption', DefaultsProps: { @@ -73,7 +73,7 @@ const CollectionNestedComponent = function CollectionNestedComponent(props: any) void; - } & React.PropsWithChildren> + } & React.PropsWithChildren> elementDescriptor={{ OptionName: 'items', IsCollectionItem: true, diff --git a/packages/devextreme-react/src/core/__tests__/template.test.tsx b/packages/devextreme-react/src/core/__tests__/template.test.tsx index f1a552d2488a..3c3e1e76ebd0 100644 --- a/packages/devextreme-react/src/core/__tests__/template.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/template.test.tsx @@ -637,7 +637,7 @@ describe('component/render in nested options', () => { item?: any; itemRender?: any; itemComponent?: any; - } & React.PropsWithChildren> + } & React.PropsWithChildren> elementDescriptor={{ OptionName: 'option', TemplateProps: [{ @@ -662,7 +662,7 @@ describe('component/render in nested options', () => { item?: any; itemRender?: any; itemComponent?: any; - } & React.PropsWithChildren> + } & React.PropsWithChildren> elementDescriptor={{ OptionName: 'leafOption', TemplateProps: [{ @@ -684,7 +684,7 @@ describe('component/render in nested options', () => { template?: any; render?: any; component?: any; - } & React.PropsWithChildren> + } & React.PropsWithChildren> elementDescriptor={{ OptionName: 'collection', IsCollectionItem: true, diff --git a/packages/devextreme-scss/build/gulp-data-uri.js b/packages/devextreme-scss/build/gulp-data-uri.js index 7e5019a52763..699d1a4d51c2 100644 --- a/packages/devextreme-scss/build/gulp-data-uri.js +++ b/packages/devextreme-scss/build/gulp-data-uri.js @@ -30,9 +30,11 @@ const handler = (_, svgEncoding, fileName) => { }; const sassFunction = (args) => { - const hasEncoding = args.getLength() === 2; - const encoding = hasEncoding ? args.getValue(0).getValue() : null; - const url = hasEncoding ? args.getValue(1).getValue() : args.getValue(0).getValue(); + const getTextFromSass = (sassValue) => sassValue.assertString().text; + const argList = args[0].asList; + const hasEncoding = argList.size === 2; + const encoding = hasEncoding ? getTextFromSass(argList.get(0)) : null; + const url = getTextFromSass(argList.get(hasEncoding ? 1 : 0)); return new sass.SassString(handler(null, encoding, url), { quotes: false }); }; diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json index 790c42582d8e..666336de56b6 100644 --- a/packages/devextreme-scss/package.json +++ b/packages/devextreme-scss/package.json @@ -9,10 +9,10 @@ "gulp-cache": "1.1.3", "gulp-plumber": "1.2.1", "gulp-replace": "0.6.1", - "gulp-sass": "5.1.0", + "gulp-sass": "6.0.1", "gulp-shell": "0.8.0", "minimist": "1.2.8", - "sass-embedded": "1.59.2", + "sass-embedded": "1.97.1", "stylelint": "15.11.0", "stylelint-config-standard-scss": "9.0.0", "stylelint-scss": "6.10.0", diff --git a/packages/devextreme-scss/scss/widgets/base/_gridBase.scss b/packages/devextreme-scss/scss/widgets/base/_gridBase.scss index f7ffd2dd94cb..f7611e450b53 100644 --- a/packages/devextreme-scss/scss/widgets/base/_gridBase.scss +++ b/packages/devextreme-scss/scss/widgets/base/_gridBase.scss @@ -1,3 +1,4 @@ +@use 'sass:math'; @use "./mixins" as *; // adduse @@ -662,7 +663,7 @@ .dx-sort-indicator, .dx-header-filter-indicator { - max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin)}); &.dx-text-content-alignment-left { margin-right: $grid-text-content-margin; @@ -673,31 +674,31 @@ } &.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)}); } } .dx-sort-indicator.dx-header-filter-indicator { - max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)}); } .dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)}); } .dx-sort-indicator.dx-sort-index-indicator { - max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)}); &.dx-header-filter-indicator { - max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)}); } &.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)}); } &.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right { - max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)}); + max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)}); } } } diff --git a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss index 3ecf6654e631..bb4d980eca6a 100644 --- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss +++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss @@ -1,4 +1,6 @@ +@use "sass:list"; @use "sass:math"; +@use "sass:selector"; // adduse @@ -52,7 +54,7 @@ $transparent-border: 1px solid transparent; counter-increment: list-#{$counter}; &::before { - content: counter(list-#{$counter}, nth($list-style, ($counter % 3) + 1)) ". "; + content: counter(list-#{$counter}, list.nth($list-style, ($counter % 3) + 1)) ". "; } } @@ -242,7 +244,7 @@ $transparent-border: 1px solid transparent; counter-increment: list-0; &::before { - content: counter(list-0, nth($list-style, 1)) ". "; + content: counter(list-0, list.nth($list-style, 1)) ". "; } } @@ -430,7 +432,7 @@ $transparent-border: 1px solid transparent; height: $resize-handle-size; border-radius: 0; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { width: $touch-resize-handle-size; height: $touch-resize-handle-size; } @@ -440,7 +442,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-corner-bottom-right { right: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { right: -$half-touch-resize-handle-size; } } @@ -449,7 +451,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-corner-bottom-left { left: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { left: -$half-touch-resize-handle-size; } } @@ -458,7 +460,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-corner-top-left { top: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { top: -$half-touch-resize-handle-size; } } @@ -467,7 +469,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-corner-bottom-left { bottom: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { bottom: -$half-touch-resize-handle-size; } } @@ -483,7 +485,7 @@ $transparent-border: 1px solid transparent; height: $resize-handle-size; border: 1px solid white; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { width: $touch-resize-handle-size; height: $touch-resize-handle-size; } @@ -495,7 +497,7 @@ $transparent-border: 1px solid transparent; &::after { top: calc(50% - #{$half-resize-handle-size}); - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { top: calc(50% - #{$half-touch-resize-handle-size}); } } @@ -506,7 +508,7 @@ $transparent-border: 1px solid transparent; &::after { left: calc(50% - #{$half-resize-handle-size}); - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { left: calc(50% - #{$half-touch-resize-handle-size}); } } @@ -515,7 +517,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-right::after { right: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { right: -$half-touch-resize-handle-size; } } @@ -523,7 +525,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-left::after { left: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { left: -$half-touch-resize-handle-size; } } @@ -531,7 +533,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-top::after { top: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { top: -$half-touch-resize-handle-size; } } @@ -539,7 +541,7 @@ $transparent-border: 1px solid transparent; .dx-resizable-handle-bottom::after { bottom: -$half-resize-handle-size; - @at-root #{selector-append(".dx-touch-device", &)} { + @at-root #{selector.append(".dx-touch-device", &)} { bottom: -$half-touch-resize-handle-size; } } diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss index 3eb4a7250d7b..fe8c1762da05 100644 --- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss +++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:map"; +@use "sass:selector"; .dx-icon-plus, .dx-icon-overflow, @@ -194,7 +195,7 @@ @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) { $icon-paddings-dirty: $container-size - $icon-size; $icon-paddings: $icon-paddings-dirty - $borders-size; - $icon-padding: floor(math.div($icon-paddings, 2)); + $icon-padding: math.floor(math.div($icon-paddings, 2)); // Geometry width: $container-size; @@ -229,7 +230,7 @@ } @if $position == relative { - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { &::before { left: 0; diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss index 4bd82640b447..973668a3c676 100644 --- a/packages/devextreme-scss/scss/widgets/base/_popup.scss +++ b/packages/devextreme-scss/scss/widgets/base/_popup.scss @@ -1,3 +1,4 @@ +@use "sass:selector"; @use "./mixins" as *; // adduse @@ -56,7 +57,7 @@ display: flex; flex-wrap: wrap; - @at-root #{selector-append(".dx-overlay-wrapper .dx-overlay-content", &)} { + @at-root #{selector.append(".dx-overlay-wrapper .dx-overlay-content", &)} { > .dx-popup-title, > .dx-popup-bottom { width: 100%; diff --git a/packages/devextreme-scss/scss/widgets/base/_sortable.scss b/packages/devextreme-scss/scss/widgets/base/_sortable.scss index a38e9bdf9739..b91847df15b5 100644 --- a/packages/devextreme-scss/scss/widgets/base/_sortable.scss +++ b/packages/devextreme-scss/scss/widgets/base/_sortable.scss @@ -38,7 +38,8 @@ $base-accent: null !default; position: absolute; top: 0; left: 0; - border: 1px solid $base-accent; + border: 1px solid; + border-color: $base-accent; box-sizing: border-box; z-index: $max-integer; } diff --git a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss index 3af910d27315..54d89276659b 100644 --- a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss +++ b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:color"; .dx-fa-button .dx-overlay-content { border-radius: 50%; @@ -38,7 +39,7 @@ box-shadow: $speed-dial-action-shadow; &.dx-state-hover { - background-color: darken($button-default-bg, 10%); + background-color: color.adjust($button-default-bg, $lightness: -10%, $space: hsl); .dx-fa-button-icon { background-color: transparent; @@ -46,7 +47,7 @@ } &.dx-state-active { - background-color: darken($button-default-bg, 15%); + background-color: color.adjust($button-default-bg, $lightness: -15%, $space: hsl); .dx-fa-button-icon { background-color: transparent; diff --git a/packages/devextreme-scss/scss/widgets/base/_tagBox.scss b/packages/devextreme-scss/scss/widgets/base/_tagBox.scss index 514bf5b95446..3fe010e647ba 100644 --- a/packages/devextreme-scss/scss/widgets/base/_tagBox.scss +++ b/packages/devextreme-scss/scss/widgets/base/_tagBox.scss @@ -1,4 +1,5 @@ @use "./mixins" as *; +@use "sass:selector"; // adduse @@ -57,7 +58,7 @@ } } - @at-root #{selector-append(".dx-texteditor-container", &)} { + @at-root #{selector.append(".dx-texteditor-container", &)} { white-space: normal; } } diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss index fe62d9f03cf6..3e6de72eca09 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss @@ -152,7 +152,8 @@ &.dx-calendar-today { span { - border: 2px solid $base-accent; + border: 2px solid; + border-color: $base-accent; } } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss index ff130701f338..563b3ab898a3 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss @@ -7,7 +7,8 @@ width: 100%; min-width: var(--dx-cardview-card-min-width, $cardview-card-min-width); max-width: var(--dx-cardview-card-max-width); - border: $cardview-card-border-width solid $cardview-card-border-color; + border: $cardview-card-border-width solid; + border-color: $cardview-card-border-color; border-radius: $cardview-card-border-radius; background-color: $cardview-card-bg-color; color: $cardview-card-text-color; @@ -18,7 +19,8 @@ } &:focus-visible { - outline: 2px $cardview-card--focused-outline-color solid; + outline: 2px solid; + outline-color: $cardview-card--focused-outline-color; outline-offset: -2px; } } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss index 5c30bdeaca04..05b6fb655da2 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss @@ -7,7 +7,8 @@ grid-template-columns: auto 1fr; row-gap: $cardview-card__content-row-gap; width: 100%; - border-top: $cardview-card-border-width solid $cardview-card-divider-color; + border-top: $cardview-card-border-width solid; + border-top-color: $cardview-card-divider-color; // NOTE: Override default fonts only in "material-compact" font-size: $cardview-card__content-font-size; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss index 57c1f89375b6..f9f0c5054905 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss @@ -5,7 +5,8 @@ overflow: hidden; display: flex; justify-content: center; - border-top: $cardview-card-border-width solid $cardview-card-divider-color; + border-top: $cardview-card-border-width solid; + border-top-color: $cardview-card-divider-color; max-height: var(--dx-cardview-card-cover-max-height); aspect-ratio: var(--dx-cardview-card-cover-ratio); width: 100%; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss index 898e137fe294..5b1d0f6efec9 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss @@ -98,7 +98,8 @@ $sortable-side-offset: 6px; } .dx-cardview-header-item-sort-indicator { - border: $cardview-header-item__sort-indicator__border-size solid $cardview-header-item__sort-indicator__border-color; + border: $cardview-header-item__sort-indicator__border-size solid; + border-color: $cardview-header-item__sort-indicator__border-color; border-radius: $cardview-header-item__sort-indicator__border-radius; } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss index 8786e116a91e..07bf739f8387 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss @@ -52,7 +52,8 @@ } &:focus-visible { - outline: 2px $cardview-header-panel__item--focused-outline-color solid; + outline: 2px solid; + outline-color: $cardview-header-panel__item--focused-outline-color; outline-offset: -2px; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/_mixins.scss index fea74f854bce..b5fb3f0c2b12 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/_mixins.scss @@ -1,11 +1,11 @@ -@import 'layout/chat/mixins'; -@import 'layout/chat-avatar/mixins'; -@import 'layout/chat-fileview/mixins'; -@import 'layout/chat-alertlist/mixins'; -@import 'layout/chat-messagebox/mixins'; -@import 'layout/chat-messagebox-editing-preview/mixins'; -@import 'layout/chat-messagebubble/mixins'; -@import 'layout/chat-messagegroup/mixins'; -@import 'layout/chat-messagelist/mixins'; -@import 'layout/chat-typingindicator/mixins'; -@import 'layout/chat-confirmationpopup/mixins'; +@forward 'layout/chat/mixins'; +@forward 'layout/chat-avatar/mixins'; +@forward 'layout/chat-fileview/mixins'; +@forward 'layout/chat-alertlist/mixins'; +@forward 'layout/chat-messagebox/mixins'; +@forward 'layout/chat-messagebox-editing-preview/mixins'; +@forward 'layout/chat-messagebubble/mixins'; +@forward 'layout/chat-messagegroup/mixins'; +@forward 'layout/chat-messagelist/mixins'; +@forward 'layout/chat-typingindicator/mixins'; +@forward 'layout/chat-confirmationpopup/mixins'; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss index 0421cb60216e..bc3fc147187e 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss @@ -5,7 +5,8 @@ ) { .dx-chat { background-color: $background-color; - border: 1px solid $border-color; + border: 1px solid; + border-color: $border-color; border-radius: $border-radius; } } diff --git a/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss index 3c21f632e573..3c01a4e7d145 100644 --- a/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss @@ -5,12 +5,14 @@ } .dx-colorview-hue-scale-handle { - border: 1px solid $handle-border-color; + border: 1px solid; + border-color: $handle-border-color; box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color; } .dx-colorview-alpha-channel-handle { - border: 1px solid $handle-border-color; + border: 1px solid; + border-color: $handle-border-color; box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss index cc7f680e587b..380d6ef31f63 100644 --- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss @@ -22,24 +22,31 @@ $datagrid-text-stub-background-image-path: null !default; > .dx-datagrid-rowsview, > .dx-datagrid-total-footer { border-left: $datagrid-border; + border-left-color: $datagrid-border-color; border-right: $datagrid-border; + border-right-color: $datagrid-border-color; } > .dx-datagrid-rowsview, > .dx-datagrid-total-footer { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } > .dx-datagrid-headers, > .dx-datagrid-filter-panel { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; } > .dx-datagrid-filter-panel { border-top-width: 0; border-left: $datagrid-border; + border-left-color: $datagrid-border-color; border-right: $datagrid-border; + border-right-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } } @@ -97,7 +104,8 @@ $datagrid-text-stub-background-image-path: null !default; &.dx-state-focused .dx-datagrid-group-panel { .dx-group-panel-item:focus, .dx-header-filter:focus { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; outline-offset: -2px; } @@ -116,7 +124,8 @@ $datagrid-text-stub-background-image-path: null !default; &.dx-state-focused .dx-header-row { td:focus, td .dx-header-filter:focus { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; outline-offset: 2px; } @@ -157,8 +166,10 @@ $datagrid-text-stub-background-image-path: null !default; .dx-datagrid-rowsview .dx-header-row, .dx-datagrid-headers .dx-row { td.dx-pointer-events-none { - border-left: 2px solid $datagrid-border-color; - border-right: 2px solid $datagrid-border-color; + border-left: 2px solid; + border-left-color: $datagrid-border-color; + border-right: 2px solid; + border-right-color: $datagrid-border-color; &.dx-first-cell { border-left: none; @@ -172,7 +183,8 @@ $datagrid-text-stub-background-image-path: null !default; .dx-datagrid-rowsview.dx-state-focused .dx-data-row { & > td.dx-command-edit > a.dx-link:focus { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; outline-offset: 2px; } @@ -285,11 +297,13 @@ $datagrid-text-stub-background-image-path: null !default; .dx-header-multi-row.dx-datagrid-sticky-columns .dx-column-lines > td:first-child { border-left: $datagrid-border; + border-left-color: $datagrid-border-color; } .dx-datagrid-filter-panel { color: $datagrid-base-color; border-top: $datagrid-border; + border-top-color: $datagrid-border-color; .dx-icon-filter, .dx-datagrid-filter-panel-text, @@ -301,7 +315,8 @@ $datagrid-text-stub-background-image-path: null !default; .dx-icon-filter:focus, .dx-datagrid-filter-panel-text:focus, .dx-datagrid-filter-panel-clear-filter:focus { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; outline-offset: 3px; } } @@ -338,8 +353,10 @@ $datagrid-text-stub-background-image-path: null !default; .dx-datagrid-rowsview .dx-header-row, .dx-datagrid-headers .dx-row { td.dx-pointer-events-none { - border-left: 2px solid $datagrid-border-color; - border-right: 2px solid $datagrid-border-color; + border-left: 2px solid; + border-left-color: $datagrid-border-color; + border-right: 2px solid; + border-right-color: $datagrid-border-color; &.dx-first-cell { border-right: none; @@ -367,6 +384,7 @@ $datagrid-text-stub-background-image-path: null !default; &:first-child { border-right: none; border-left: $datagrid-border; + border-left-color: $datagrid-border-color; } &:last-child { @@ -382,6 +400,7 @@ $datagrid-text-stub-background-image-path: null !default; &:not(.dx-datagrid-group-footer) > td { border-right: $datagrid-border; + border-right-color: $datagrid-border-color; &:first-child { border-right: none; @@ -395,7 +414,8 @@ $datagrid-text-stub-background-image-path: null !default; border-right: none; &.dx-datagrid-sticky-column-border-left { - border-left: 2px solid $datagrid-border-color; + border-left: 2px solid; + border-left-color: $datagrid-border-color; } } } @@ -406,6 +426,7 @@ $datagrid-text-stub-background-image-path: null !default; .dx-column-lines > td:first-child { border-left: none; border-right: $datagrid-border; + border-right-color: $datagrid-border-color; } } @@ -423,11 +444,13 @@ $datagrid-text-stub-background-image-path: null !default; .dx-datagrid-sticky-columns .dx-datagrid-table { .dx-row { td.dx-datagrid-sticky-column-border-right { - border-right: 2px solid $datagrid-border-color; + border-right: 2px solid; + border-right-color: $datagrid-border-color; } td.dx-datagrid-sticky-column-border-left { - border-left: 2px solid $datagrid-border-color; + border-left: 2px solid; + border-left-color: $datagrid-border-color; } } } @@ -453,11 +476,13 @@ $datagrid-text-stub-background-image-path: null !default; } &:focus-within { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; outline-offset: -2px; } } .dx-command-ai-header-button .dx-button.dx-state-focused { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; } diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss index 07d9d2466b1e..9db3d9b59fd4 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss @@ -1,3 +1,4 @@ +@use "sass:selector"; @use "../mixins" as *; @use "./mixins" as *; @use "../textEditor/mixins" as *; @@ -76,7 +77,7 @@ white-space: nowrap; } - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { float: left; } diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss index b48a8b8b2bf9..e4fd10602984 100644 --- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss @@ -23,11 +23,11 @@ $pivotgrid-button-top-padding: null !default; @use "../icon_fonts" as *; @use "./common"; -$pivotgrid-drag-header-border: 1px solid $pivotgrid-drag-header-border-color; +$pivotgrid-drag-header-border: 1px solid; $pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; $pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; $pivotgrid-border-width: 1px; -$pivotgrid-border: $pivotgrid-border-width solid $pivotgrid-border-color; +$pivotgrid-border: $pivotgrid-border-width solid; $pivotgrid-icon-size: 14px; $pivotgrid-common-field-padding: 2px; $pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding; @@ -99,6 +99,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-field.dx-area-box { box-shadow: $pivotgrid-drag-header-first-shadow, $pivotgrid-drag-header-second-shadow; border: $pivotgrid-drag-header-border; + border-color: $pivotgrid-drag-header-border-color; } } @@ -106,6 +107,7 @@ $pivotgrid-expand-icon-text-offset: 0; background-color: $pivotgrid-area-background; margin-bottom: 4px; border: $pivotgrid-border; + border-color: $pivotgrid-border-color; padding: $pivotgrid-common-top-bottom-padding $pivotgrid-common-left-right-padding; } @@ -194,6 +196,7 @@ $pivotgrid-expand-icon-text-offset: 0; &.dx-row-lines { .dx-pivotgrid-area td { border-top: $pivotgrid-border; + border-top-color: $pivotgrid-border-color; } .dx-pivotgrid-area-data tr:first-child > td { @@ -209,6 +212,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-row-cell, .dx-area-description-cell { border-right: $pivotgrid-border; + border-right-color: $pivotgrid-border-color; } .dx-area-description-cell { @@ -231,6 +235,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-description-cell, .dx-area-column-cell { border-bottom: $pivotgrid-border; + border-bottom-color: $pivotgrid-border-color; } .dx-pivotgrid-area { @@ -316,6 +321,7 @@ $pivotgrid-expand-icon-text-offset: 0; color: $pivotgrid-data-area-color; white-space: nowrap; border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; } td:first-child { @@ -334,6 +340,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-pivotgrid-vertical-headers { .dx-expand-border { border-top: $pivotgrid-border; + border-top-color: $pivotgrid-border-color; } .dx-last-cell { @@ -345,6 +352,7 @@ $pivotgrid-expand-icon-text-offset: 0; // max-width: 150px; min-width: 50px; border-right: $pivotgrid-border; + border-right-color: $pivotgrid-border-color; } tr:first-child td { @@ -362,7 +370,9 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-pivotgrid-area-data { .dx-row-total { border-top: $pivotgrid-border; + border-top-color: $pivotgrid-border-color; border-bottom: $pivotgrid-border; + border-bottom-color: $pivotgrid-border-color; } } @@ -381,6 +391,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-pivotgrid-horizontal-headers { &.dx-vertical-scroll { border-right: $pivotgrid-border; + border-right-color: $pivotgrid-border-color; } td { @@ -393,6 +404,7 @@ $pivotgrid-expand-icon-text-offset: 0; // B234718 border: $pivotgrid-border; + border-color: $pivotgrid-border-color; } td:first-child { @@ -429,6 +441,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-description-cell, .dx-area-row-cell { border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; } .dx-filter-header, @@ -436,10 +449,12 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-column-header, .dx-area-data-cell { border-right: $pivotgrid-border; + border-right-color: $pivotgrid-border-color; } .dx-filter-header { border-top: $pivotgrid-border; + border-top-color: $pivotgrid-border-color; td { display: inline-block; @@ -449,6 +464,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-data-cell, .dx-area-row-cell { border-bottom: $pivotgrid-border; + border-bottom-color: $pivotgrid-border-color; } } @@ -505,6 +521,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-fields { margin-top: 3px; border: $pivotgrid-border; + border-color: $pivotgrid-border-color; display: flex; flex-direction: column; height: 0; @@ -598,6 +615,7 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-area-row-cell, .dx-area-description-cell { border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; border-right: 0; } @@ -611,11 +629,13 @@ $pivotgrid-expand-icon-text-offset: 0; tbody td { border-left: 0; border-right: $pivotgrid-border; + border-right-color: $pivotgrid-border-color; } } .dx-pivotgrid-area-data tbody td:first-child { border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; border-right: 0; } @@ -623,6 +643,7 @@ $pivotgrid-expand-icon-text-offset: 0; td { border-right: 0; border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; } .dx-last-cell { @@ -635,6 +656,7 @@ $pivotgrid-expand-icon-text-offset: 0; &.dx-vertical-scroll { border-right: 0; border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; } &.dx-pivotgrid-area { @@ -643,6 +665,7 @@ $pivotgrid-expand-icon-text-offset: 0; td:first-child { border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; border-right: 0; } } @@ -678,12 +701,14 @@ $pivotgrid-expand-icon-text-offset: 0; .dx-data-header, .dx-area-row-cell { border-right: $pivotgrid-border; + border-right-color: $pivotgrid-border-color; } .dx-area-column-cell, .dx-column-header, .dx-area-data-cell { border-left: $pivotgrid-border; + border-left-color: $pivotgrid-border-color; } .dx-column-header { diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss index e059edd6384e..f9b961f6ee2a 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss @@ -74,9 +74,9 @@ $scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-a $scheduler-grouped-appointment-month-text-size: 12px; -$scheduler-base-border: 1px solid $scheduler-base-border-color; +$scheduler-base-border: 1px solid; $scheduler-transparent-top-border: 1px solid transparent; -$scheduler-accent-border: 1px solid $scheduler-accent-border-color; +$scheduler-accent-border: 1px solid; $scheduler-reduced-icon-offset: 5px; $scheduler-recurrence-icon-offset: 20px; @@ -165,7 +165,7 @@ $scheduler-appointment-form-label-padding: 20px; } .dx-scheduler-header { - @include header-base($scheduler-base-border); + @include header-base($scheduler-base-border, $scheduler-base-border-color); } .dx-scheduler-view-switcher-dropdown-button-content { diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss index cfbe661115ab..f58cba3e9c35 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss @@ -2,8 +2,10 @@ $arrow-down: "\f016"; @mixin header-base( $border, + $border-color, ) { border: $border; + border-color: $border-color; margin-bottom: -1px; position: relative; z-index: 1; diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss index 199ed95f0d99..af44f6164aae 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss @@ -49,6 +49,7 @@ $scheduler-month-date-text-padding: 6px; @use "./day" with ( $scheduler-base-border: $scheduler-base-border, + $scheduler-base-border-color: $scheduler-base-border-color, ); @use "./month" with ( $scheduler-base-border: $scheduler-base-border, @@ -64,6 +65,7 @@ $scheduler-month-date-text-padding: 6px; $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height, $scheduler-accent-border: $scheduler-accent-border, $scheduler-base-border: $scheduler-base-border, + $scheduler-base-border-color: $scheduler-base-border-color, $scheduler-accent-border-color: $scheduler-accent-border-color, ); @use "./agenda" with ( @@ -139,6 +141,7 @@ $scheduler-month-date-text-padding: 6px; &.dx-scheduler-work-space-odd-cells { .dx-scheduler-date-table-row:nth-child(odd) .dx-scheduler-date-table-cell { border-top: $scheduler-accent-border; + border-top-color: $scheduler-accent-border-color; } .dx-scheduler-date-table-row:first-child .dx-scheduler-date-table-cell { @@ -155,6 +158,7 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-work-space { border: $scheduler-base-border; + border-color: $scheduler-base-border-color; background-color: $scheduler-workspace-background-color; position: relative; display: flex; @@ -169,6 +173,7 @@ $scheduler-month-date-text-padding: 6px; &.dx-scheduler-timeline-month:not(.dx-scheduler-agenda) { .dx-scheduler-all-day-title { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } .dx-scheduler-date-table-cell { @@ -179,16 +184,19 @@ $scheduler-month-date-text-padding: 6px; &.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) { .dx-scheduler-all-day-panel td { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) { .dx-scheduler-header-panel { - border-bottom: 2px solid $scheduler-base-border-color; + border-bottom: 2px solid; + border-bottom-color: $scheduler-base-border-color; } .dx-scheduler-header-panel-empty-cell { - border-bottom: 2px solid $scheduler-base-border-color; + border-bottom: 2px solid; + border-bottom-color: $scheduler-base-border-color; } &.dx-scheduler-work-space-vertical-grouped.dx-scheduler-work-space-both-scrollbar { @@ -205,6 +213,7 @@ $scheduler-month-date-text-padding: 6px; &.dx-scheduler-work-space-month:not(.dx-scheduler-work-space-vertical-grouped) { .dx-scheduler-header-panel { border-bottom: $scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; } } } @@ -221,8 +230,10 @@ $scheduler-month-date-text-padding: 6px; align-items: flex-end; flex-shrink: 0; width: 0; - border-bottom: 1px solid $scheduler-base-border-color; - border-right: 1px solid $scheduler-base-border-color; + border-bottom: 1px solid; + border-bottom-color: $scheduler-base-border-color; + border-right: 1px solid; + border-right-color: $scheduler-base-border-color; } .dx-scheduler-header-tables-container { @@ -260,6 +271,7 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-date-table-cell { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; height: $scheduler-workspace-date-table-cell-height; } @@ -300,6 +312,7 @@ $scheduler-month-date-text-padding: 6px; &:last-child .dx-scheduler-group-header { border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; } .dx-scheduler-group-header { @@ -316,6 +329,7 @@ $scheduler-month-date-text-padding: 6px; text-overflow: ellipsis; border: none; border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } } @@ -335,7 +349,9 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-date-table-cell, .dx-scheduler-all-day-table-cell { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; &:first-child { border-left: none; @@ -345,6 +361,7 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-date-table-cell, .dx-scheduler-header-panel-cell { border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; } .dx-scheduler-work-space-week, @@ -352,6 +369,7 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-work-space-day.dx-scheduler-work-space-count { .dx-scheduler-all-day-title { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } @@ -404,9 +422,11 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-all-day-table-cell { &:nth-child(7n) { border-right: $scheduler-accent-border; + border-right-color: $scheduler-accent-border-color; .dx-rtl & { border-left: $scheduler-accent-border; + border-left-color: $scheduler-accent-border-color; } } } @@ -418,10 +438,13 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-all-day-table-cell { &:nth-child(5n) { border-right: $scheduler-accent-border; + border-right-color: $scheduler-accent-border-color; .dx-rtl & { border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; border-left: $scheduler-accent-border; + border-left-color: $scheduler-accent-border-color; } } } @@ -472,6 +495,7 @@ $scheduler-month-date-text-padding: 6px; text-align: center; font-weight: normal; border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; &:first-child { border-left: 1px solid transparent; @@ -485,7 +509,8 @@ $scheduler-month-date-text-padding: 6px; position: relative; .dx-scheduler-all-day-table-cell { - border-bottom: 2px solid $scheduler-base-border-color; + border-bottom: 2px solid; + border-bottom-color: $scheduler-base-border-color; } } @@ -498,7 +523,8 @@ $scheduler-month-date-text-padding: 6px; height: $scheduler-all-day-table-cell-height; position: relative; text-align: center; - border-bottom: 2px solid $scheduler-base-border-color; + border-bottom: 2px solid; + border-bottom-color: $scheduler-base-border-color; @include user-select(none); @@ -540,6 +566,7 @@ $scheduler-month-date-text-padding: 6px; border-collapse: collapse; font-size: $scheduler-workspace-info-font-size; border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; .dx-scheduler-small & { width: $scheduler-left-column-width * $scheduler-small-size-factor; @@ -700,6 +727,7 @@ $scheduler-month-date-text-padding: 6px; height: 100%; min-height: 100px; border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; border-spacing: 0; @include flex-container(column, nowrap); @@ -727,6 +755,7 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-time-panel-cell { &.dx-scheduler-first-group-cell { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; > div { margin-top: 0; @@ -741,7 +770,8 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-date-table-cell { &.dx-scheduler-last-group-cell { - border-bottom: 2px solid $scheduler-base-border-color; + border-bottom: 2px solid; + border-bottom-color: $scheduler-base-border-color; } } @@ -749,13 +779,15 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-sidebar-scrollable, .dx-scheduler-date-table-scrollable { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } } .dx-rtl { .dx-scheduler-header-panel-empty-cell { - border-left: 1px solid $scheduler-base-border-color; + border-left: 1px solid; + border-left-color: $scheduler-base-border-color; border-right: none; } @@ -769,6 +801,7 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-group-row:last-child .dx-scheduler-group-header { border-right: none; border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; } } @@ -800,12 +833,14 @@ $scheduler-month-date-text-padding: 6px; .dx-scheduler-work-space-week .dx-scheduler-all-day-table-cell, .dx-scheduler-work-space-work-week .dx-scheduler-all-day-table-cell { border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; border-left: none; } &.dx-scheduler-work-space-both-scrollbar { .dx-scheduler-time-panel { border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } @@ -815,6 +850,7 @@ $scheduler-month-date-text-padding: 6px; &:first-child { border-right: none; border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; } } } @@ -844,11 +880,13 @@ $scheduler-month-date-text-padding: 6px; &:first-child { border-right: none; border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; } } .dx-scheduler-time-panel { border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss index 08a0c57b8b3e..4d1205c67e90 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss @@ -1,4 +1,5 @@ $scheduler-base-border: null !default; +$scheduler-base-border-color: null !default; .dx-scheduler-work-space-day { &:not(.dx-scheduler-work-space-count) { @@ -64,6 +65,7 @@ $scheduler-base-border: null !default; .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; } } } @@ -71,6 +73,7 @@ $scheduler-base-border: null !default; &.dx-scheduler-work-space-vertical-grouped { .dx-scheduler-all-day-table-cell { border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } @@ -79,7 +82,9 @@ $scheduler-base-border: null !default; .dx-scheduler-all-day-table-cell, .dx-scheduler-header-panel-cell { border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; &:first-child { border-left: none; @@ -104,6 +109,7 @@ $scheduler-base-border: null !default; .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } } @@ -116,6 +122,7 @@ $scheduler-base-border: null !default; .dx-scheduler-header-panel-cell { &:first-child { border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } } diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss index 077e01eba89e..d5226a597875 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss @@ -3,6 +3,7 @@ $scheduler-workspace-date-table-cell-height: null !default; $scheduler-accent-border: null !default; $scheduler-base-border: null !default; +$scheduler-base-border-color: null !default; $scheduler-accent-border-color: null !default; $scheduler-timeline-min-height: 100px; @@ -175,10 +176,12 @@ $scheduler-timeline-min-height: 100px; .dx-scheduler-header-panel { border-bottom: $scheduler-accent-border; + border-bottom-color: $scheduler-accent-border-color; } .dx-scheduler-header-panel-empty-cell { - border-bottom: 1px solid $scheduler-accent-border-color; + border-bottom: 1px solid; + border-bottom-color: $scheduler-accent-border-color; } } @@ -194,15 +197,18 @@ $scheduler-timeline-min-height: 100px; .dx-scheduler-group-row .dx-scheduler-group-header { border: none; border-top: $scheduler-base-border; + border-top-color: $scheduler-base-border-color; } &.dx-scheduler-work-space-group-by-date { .dx-scheduler-group-row .dx-scheduler-group-header { border-right: $scheduler-base-border; + border-right-color: $scheduler-base-border-color; } .dx-scheduler-group-row .dx-scheduler-last-group-cell { border-right: $scheduler-accent-border; + border-right-color: $scheduler-accent-border-color; } } @@ -219,6 +225,7 @@ $scheduler-timeline-min-height: 100px; .dx-scheduler-date-table-cell { &:first-child { border-left: $scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } } diff --git a/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss index e2a7c86c80cc..e87d4cb3cc96 100644 --- a/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss @@ -1,3 +1,4 @@ +@use "sass:selector"; @use "./mixins" as *; // adduse @@ -200,13 +201,13 @@ .dx-scrollable-container { direction: ltr; - @at-root #{selector-append(".dx-scrollable-native", &)} { + @at-root #{selector.append(".dx-scrollable-native", &)} { direction: rtl; } } .dx-scrollable-content { - @at-root #{selector-append(".dx-scrollable-native", &)} { + @at-root #{selector.append(".dx-scrollable-native", &)} { float: right; } } diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/stepper/_mixins.scss index 189d3b4e0895..0def2503f22e 100644 --- a/packages/devextreme-scss/scss/widgets/base/stepper/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/stepper/_mixins.scss @@ -1,3 +1,3 @@ -@import 'layout/stepper/mixins'; -@import 'layout/connector/mixins'; -@import 'layout/step/mixins'; +@forward 'layout/stepper/mixins'; +@forward 'layout/connector/mixins'; +@forward 'layout/step/mixins'; diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss index c56ea3f99033..b78cb262e897 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss @@ -32,24 +32,31 @@ $treelist-row-error-color: $datagrid-row-error-color; > .dx-treelist-rowsview, > .dx-treelist-total-footer { border-left: $treelist-border; + border-left-color: $treelist-border-color; border-right: $treelist-border; + border-right-color: $treelist-border-color; } > .dx-treelist-rowsview, > .dx-treelist-total-footer { border-bottom: $treelist-border; + border-bottom-color: $treelist-border-color; } > .dx-treelist-headers, > .dx-treelist-filter-panel { border-top: $treelist-border; + border-top-color: $treelist-border-color; } > .dx-treelist-filter-panel { border-top-width: 0; border-left: $treelist-border; + border-left-color: $treelist-border-color; border-right: $treelist-border; + border-right-color: $treelist-border-color; border-bottom: $treelist-border; + border-bottom-color: $treelist-border-color; } } @@ -102,6 +109,7 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-header-multi-row.dx-treelist-sticky-columns .dx-column-lines > td:first-child { border-left: $treelist-border; + border-left-color: $treelist-border-color; } .dx-treelist-container { @@ -144,7 +152,8 @@ $treelist-row-error-color: $datagrid-row-error-color; &.dx-state-focused .dx-header-row { td:focus, td .dx-header-filter:focus { - outline: 2px solid $treelist-focused-border-color; + outline: 2px solid; + outline-color: $treelist-focused-border-color; } td:focus { @@ -188,8 +197,10 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-datagrid-rowsview .dx-header-row, .dx-treelist-headers .dx-row { td.dx-pointer-events-none { - border-left: 2px solid $treelist-border-color; - border-right: 2px solid $treelist-border-color; + border-left: 2px solid; + border-left-color: $treelist-border-color; + border-right: 2px solid; + border-right-color: $treelist-border-color; &.dx-first-cell { border-left: none; @@ -203,7 +214,8 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-treelist-rowsview.dx-state-focused .dx-data-row { & > td.dx-command-edit > a.dx-link:focus { - outline: 2px solid $datagrid-focused-border-color; + outline: 2px solid; + outline-color: $datagrid-focused-border-color; outline-offset: 2px; } @@ -256,6 +268,7 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-treelist-filter-panel { color: $treelist-base-color; border-top: $treelist-border; + border-top-color: $treelist-border-color; .dx-icon-filter, .dx-treelist-filter-panel-text, @@ -267,7 +280,8 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-icon-filter:focus, .dx-treelist-filter-panel-text:focus, .dx-treelist-filter-panel-clear-filter:focus { - outline: 2px solid $treelist-focused-border-color; + outline: 2px solid; + outline-color: $treelist-focused-border-color; } } } @@ -307,6 +321,7 @@ $treelist-row-error-color: $datagrid-row-error-color; &:first-child { border-right: none; border-left: $treelist-border; + border-left-color: $treelist-border-color; } &:last-child { @@ -318,6 +333,7 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-column-lines > td { border-left: none; border-right: $treelist-border; + border-right-color: $treelist-border-color; &:first-child { border-right: none; @@ -330,7 +346,8 @@ $treelist-row-error-color: $datagrid-row-error-color; border-right: none; &.dx-treelist-sticky-column-border-left { - border-left: 2px solid $treelist-border-color; + border-left: 2px solid; + border-left-color: $treelist-border-color; } } } @@ -341,6 +358,7 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-column-lines > td:first-child { border-left: none; border-right: $treelist-border; + border-right-color: $treelist-border-color; } } @@ -351,8 +369,10 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-datagrid-rowsview .dx-header-row, .dx-treelist-headers .dx-row { td.dx-pointer-events-none { - border-left: 2px solid $treelist-border-color; - border-right: 2px solid $treelist-border-color; + border-left: 2px solid; + border-left-color: $treelist-border-color; + border-right: 2px solid; + border-right-color: $treelist-border-color; &.dx-first-cell { border-right: none; @@ -389,11 +409,13 @@ $treelist-row-error-color: $datagrid-row-error-color; .dx-treelist .dx-treelist-sticky-columns .dx-treelist-table .dx-row { td.dx-treelist-sticky-column-border-right { - border-right: 2px solid $treelist-border-color; + border-right: 2px solid; + border-right-color: $treelist-border-color; } td.dx-treelist-sticky-column-border-left { - border-left: 2px solid $treelist-border-color; + border-left: 2px solid; + border-left-color: $treelist-border-color; } } @@ -412,5 +434,6 @@ $treelist-row-error-color: $datagrid-row-error-color; } .dx-command-ai-header-button .dx-button.dx-state-focused { - outline: 2px solid $treelist-focused-border-color; + outline: 2px solid; + outline-color: $treelist-focused-border-color; } diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss index c672f0736caf..afe510b4489c 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss @@ -82,11 +82,12 @@ } .dx-treeview-with-search > .dx-scrollable { - height: calc(100% - #{round($search-editor-height + $searchbox-margin-bottom)}); + height: calc(100% - #{math.round($search-editor-height + $searchbox-margin-bottom)}); } .dx-treeview-select-all-item { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid; + border-bottom-color: $border-color; padding: $select-all-item-padding; .dx-checkbox-container { @@ -105,7 +106,8 @@ } .dx-treeview-border-visible { - border: 1px solid $border-color; + border: 1px solid; + border-color: $border-color; .dx-treeview-select-all-item { padding-inline-start: $select-all-item-border-visible-padding; diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss index d7bf01e1523d..8ebea2f73835 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss @@ -138,17 +138,17 @@ $scrollview-pulldown-path: null !default; $base-bg: rgba(255, 255, 255, 1) !default; @if $color == "blue" { - $base-hover-bg: darken($base-bg, 3.9) !default; + $base-hover-bg: color.adjust($base-bg, $lightness: -3.9%, $space: hsl) !default; $base-typography-bg: rgba(250, 250, 250, 1) !default; $base-accent: rgba(15, 108, 189, 1) !default; $base-success: rgba(16, 124, 16, 1) !default; $base-danger: rgba(209, 52, 56, 1) !default; $base-text-color: rgba(36, 36, 36, 1) !default; - $base-label-color: lighten($base-text-color, 29.80) !default; - $base-icon-color: lighten($base-text-color, 23.92) !default; + $base-label-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; + $base-icon-color: color.adjust($base-text-color, $lightness: 23.92%, $space: hsl) !default; $base-border-color: rgba(224, 224, 224, 1) !default; - $base-border-color-accessible: darken($base-border-color, 49.8) !default; + $base-border-color-accessible: color.adjust($base-border-color, $lightness: -49.8%, $space: hsl) !default; $base-shadow-color: #000 !default; } @@ -156,44 +156,44 @@ $scrollview-pulldown-path: null !default; $base-accent: #5486ff !default; $base-typography-bg: #FAFBFF !default; - $base-hover-bg: mix(#FFF, $base-accent, 85%) !default; + $base-hover-bg: color.mix(#FFF, $base-accent, 85%) !default; $base-success: #19914B !default; $base-danger: #DC2828 !default; $base-text-color: #21293b !default; - $base-label-color: lighten($base-text-color, 19) !default; - $base-icon-color: lighten($base-text-color, 10) !default; + $base-label-color: color.adjust($base-text-color, $lightness: 19%, $space: hsl) !default; + $base-icon-color: color.adjust($base-text-color, $lightness: 10%, $space: hsl) !default; $base-border-color: #e5e8f0 !default; - $base-border-color-accessible: darken($base-border-color, 20) !default; + $base-border-color-accessible: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $base-shadow-color: #3D4A6C !default; } - $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default; - $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default; - $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default; + $base-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-selected: color.adjust($base-accent-active, $saturation: -2.02%, $space: hsl, $lightness: -4.71%) !default; - $base-foreground-disabled: lighten($base-text-color, 60) !default; + $base-foreground-disabled: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; - $base-selected-bg: darken($base-hover-bg, 3.92) !default; - $base-active-bg: darken($base-hover-bg, 8.24) !default; - $base-background-disabled: darken($base-hover-bg, 1.96) !default; + $base-selected-bg: color.adjust($base-hover-bg, $lightness: -3.92%, $space: hsl) !default; + $base-active-bg: color.adjust($base-hover-bg, $lightness: -8.24%, $space: hsl) !default; + $base-background-disabled: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default; - $base-border-color-hover: darken($base-border-color, 9.8) !default; - $base-border-color-focused: darken($base-border-color, 17.65) !default; + $base-border-color-hover: color.adjust($base-border-color, $lightness: -9.8%, $space: hsl) !default; + $base-border-color-focused: color.adjust($base-border-color, $lightness: -17.65%, $space: hsl) !default; - $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default; - $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default; + $base-border-color-accessible-hover: color.adjust($base-border-color-accessible, $lightness: -3.92%, $space: hsl) !default; + $base-border-color-accessible-focused: color.adjust($base-border-color-accessible-hover, $lightness: -3.92%, $space: hsl) !default; $base-border-color-disabled: $base-border-color !default; $base-separator-color: $base-border-color !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-inverted-text-color: #fff !default; - $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default; - $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default; - $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default; + $base-danger-hover: color.adjust($base-danger, $saturation: -3.05%, $space: hsl, $lightness: -5.10%) !default; + $base-danger-active: color.adjust($base-danger, $saturation: -3.56%, $space: hsl, $lightness: -35.69%) !default; + $base-danger-selected: color.adjust($base-danger, $saturation: -2.78%, $space: hsl, $lightness: -22.55%) !default; $scrollview-pulldown-path: data-uri('images/widgets/fluent/color-schemes/light/pulldown.png') !default; } @@ -221,36 +221,36 @@ $scrollview-pulldown-path: null !default; $base-typography-bg: #141E28 !default; } - $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default; - $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default; - $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default; + $base-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-text-color: rgba(255, 255, 255, 1) !default; - $base-label-color: darken($base-text-color, 40.00) !default; - $base-icon-color: darken($base-text-color, 32.16) !default; - $base-foreground-disabled: darken($base-text-color, 63.9) !default; + $base-label-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; + $base-icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default; + $base-foreground-disabled: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; $base-bg: rgba(41, 41, 41, 1) !default; - $base-hover-bg: lighten($base-bg, 7.8) !default; - $base-selected-bg: lighten($base-bg, 5.9) !default; - $base-active-bg: darken($base-bg, 3.9) !default; - $base-background-disabled: darken($base-bg, 8.2) !default; - - $base-border-color-hover: lighten($base-border-color, 7.84) !default; - $base-border-color-focused: lighten($base-border-color, 3.92) !default; - $base-border-color-accessible: lighten($base-border-color, 29.8) !default; - $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default; - $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default; - $base-border-color-disabled: darken($base-border-color, 12.16) !default; - $base-separator-color: darken($base-border-color, 5.88) !default; - - $base-inverted-bg: lighten($base-bg, 100%) !default; + $base-hover-bg: color.adjust($base-bg, $lightness: 7.8%, $space: hsl) !default; + $base-selected-bg: color.adjust($base-bg, $lightness: 5.9%, $space: hsl) !default; + $base-active-bg: color.adjust($base-bg, $lightness: -3.9%, $space: hsl) !default; + $base-background-disabled: color.adjust($base-bg, $lightness: -8.2%, $space: hsl) !default; + + $base-border-color-hover: color.adjust($base-border-color, $lightness: 7.84%, $space: hsl) !default; + $base-border-color-focused: color.adjust($base-border-color, $lightness: 3.92%, $space: hsl) !default; + $base-border-color-accessible: color.adjust($base-border-color, $lightness: 29.8%, $space: hsl) !default; + $base-border-color-accessible-hover: color.adjust($base-border-color-accessible, $lightness: 6.27%, $space: hsl) !default; + $base-border-color-accessible-focused: color.adjust($base-border-color-accessible-hover, $lightness: 3.92%, $space: hsl) !default; + $base-border-color-disabled: color.adjust($base-border-color, $lightness: -12.16%, $space: hsl) !default; + $base-separator-color: color.adjust($base-border-color, $lightness: -5.88%, $space: hsl) !default; + + $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $base-shadow-color: #000 !default; $base-inverted-text-color: #000 !default; - $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default; - $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default; - $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9); + $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%); $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 3a47968c58dd..5a8711129a46 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: darken(desaturate(adjust-hue($base-accent, 358.4), 8.6), 26.7) !default; + $badge-bg: color.adjust($base-accent, $hue: 358.4deg, $saturation: -8.6%, $space: hsl, $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 5171b988e528..bc6cb0111a04 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss @@ -233,48 +233,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; @@ -283,8 +283,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; @@ -297,40 +297,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; diff --git a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss index 829bf3ac200b..0f8e6c468678 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/calendar/_colors.scss @@ -48,18 +48,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; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss index 9ac051af772b..d3811b906fec 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use '../colors' as *; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @@ -416,14 +417,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; @@ -431,7 +432,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; @@ -441,8 +442,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; @@ -451,21 +452,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; @@ -478,9 +479,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; @@ -488,7 +489,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" { @@ -504,14 +505,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; @@ -519,7 +520,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; @@ -529,8 +530,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; @@ -539,21 +540,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; @@ -566,9 +567,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: 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; @@ -576,7 +577,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; } $cardview-bg-color: $cardview-fluent-common-bg-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss index 2d82f974d1de..1de5ff46cf48 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss @@ -130,48 +130,48 @@ $chat-file-container-box-shadow: null !default; $chat-file-secondary-color: 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; @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; diff --git a/packages/devextreme-scss/scss/widgets/fluent/color.scss b/packages/devextreme-scss/scss/widgets/fluent/color.scss index 635f0dd492d9..c68bdf88940c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/color.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/color.scss @@ -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; +} diff --git a/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss index d8a80bb49733..f6f8526a41ed 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_colors.scss @@ -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; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_index.scss index 54d027d83190..4c72553219a9 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/dataGrid/_index.scss @@ -130,10 +130,12 @@ .dx-row.dx-datagrid-group-footer { &.dx-column-lines { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } & > td { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; background-color: $datagrid-summary-bg; border-left-width: 0; border-right-width: 0; @@ -143,6 +145,7 @@ .dx-datagrid-sticky-columns { .dx-row.dx-datagrid-group-footer > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-row.dx-row-lines, .dx-row.dx-group-row, .dx-datagrid-group-footer, .dx-edit-row { diff --git a/packages/devextreme-scss/scss/widgets/fluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/diagram/_colors.scss index 4476c80ab90c..54536ba04aab 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/diagram/_colors.scss @@ -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; diff --git a/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss index b2338d8e0212..0aae29b41745 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/diagram/_index.scss @@ -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; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/fieldset/_index.scss index 1892d5b058dc..260d5d323a57 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fieldset/_index.scss @@ -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) { diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss index 5d1fe4a4971c..5f5632bca69f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_colors.scss @@ -5,7 +5,7 @@ // adduse $filemanager-border-color: $base-border-color !default; -$filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; +$filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $filemanager-editor-active-bg: color.change($base-text-color, $alpha: 0.1) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-breadcrumbs-item-focus-bg: $base-border-color !default; @@ -23,12 +23,12 @@ $filemanager-progressbox-shadow-color: null !default; @if $mode == "light" { - $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $mode == "dark" { - $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_index.scss index fdfed1bbd0a8..8e1ce8b4c1db 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileManager/_index.scss @@ -96,7 +96,8 @@ } .dx-filemanager-fileuploader-dropzone-placeholder { - border: 2px solid $base-accent; + border: 2px solid; + border-color: $base-accent; } .dx-filemanager-container { @@ -145,7 +146,8 @@ } &.dx-state-focused { - border: $filemanager-file-item-focused-border 1px solid; + border: 1px solid; + border-color: $filemanager-file-item-focused-border; } &.dx-item-selected.dx-state-focused { diff --git a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss index 729b2869a9ca..4c703762a455 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss @@ -63,7 +63,8 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors padding: $fluent-fileuploader-vertical-padding * 2 $fluent-fileuploader-vertical-padding + 2px; - border: $fluent-fileuploader-file-wrapper-border-size dashed $fileuploader-border-color; + border: $fluent-fileuploader-file-wrapper-border-size dashed; + border-color: $fileuploader-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/form/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/form/_index.scss index 08a9b850340b..7de005954a02 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/form/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/form/_index.scss @@ -17,7 +17,8 @@ .dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors & > .dx-form-group-content { - border-top: 1px solid $form-group-border-color; + border-top: 1px solid; + border-top-color: $form-group-border-color; padding-bottom: $fluent-form-group-content-bottom-padding; padding-top: $fluent-form-group-caption-top-padding; margin-top: $fluent-form-group-caption-bottom-margin; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gallery/_index.scss index afc4d0ad4479..d32e3180e335 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gallery/_index.scss @@ -86,7 +86,8 @@ .dx-gallery-indicator-item { border-radius: 50%; box-sizing: border-box; - border: 1px solid $gallery-indicator-item-border-color; + border: 1px solid; + border-color: $gallery-indicator-item-border-color; pointer-events: auto; margin: 5px - math.div($fluent-gallery-indicator-size, 2) 6px; width: $fluent-gallery-indicator-size; @@ -99,7 +100,8 @@ width: $fluent-gallery-indicator-selected-size; height: $fluent-gallery-indicator-selected-size; background: $gallery-indicator-item-selected-bg; - border: 2px solid $gallery-indicator-selected-border-color; + border: 2px solid; + border-color: $gallery-indicator-selected-border-color; margin: 5px - math.div($fluent-gallery-indicator-selected-size, 2) 6px; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss index 0ff46bd1d45a..9872e017ef59 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss @@ -14,10 +14,10 @@ $gantt-parent-task-background-color: null !default; } @if $mode == "light" { - $gantt-collapsable-row-bg: darken($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default; } @if $mode == "dark" { - $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss index d9338e475509..2971e05550a3 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss @@ -15,11 +15,13 @@ $gantt-successor-background-color: white; .dx-gantt { - border: 1px solid $base-border-color; + border: 1px solid; + border-color: $base-border-color; .dx-gantt-toolbar-wrapper { padding: 5px; - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; .dx-gantt-toolbar-separator { border-left-color: $base-border-color; @@ -59,15 +61,18 @@ $gantt-successor-background-color: white; .dx-gantt-tsac, .dx-gantt-tsa { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; } .dx-gantt-hb { - border-top: 1px solid $base-border-color; + border-top: 1px solid; + border-top-color: $base-border-color; } .dx-gantt-vb { - border-left: 1px solid $base-border-color; + border-left: 1px solid; + border-left-color: $base-border-color; } .dx-gantt-taskWrapper { @@ -189,17 +194,19 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-frame { height: 100%; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); border-radius: $base-border-radius; .dx-gantt-task-edit-progress { - border-color: transparent transparent darken($base-accent, 10%) transparent; + border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; &::before { width: 12px; height: 6px; bottom: -14px; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); } } @@ -222,7 +229,8 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { background: $gantt-successor-background-color; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); width: $gantt-dependency-successor-size; height: $gantt-dependency-successor-size; margin: auto; @@ -257,16 +265,20 @@ $gantt-successor-background-color: white; } .dx-gantt-arrow { - border: 5px solid $base-text-color; + border: 5px solid; + border-color: $base-text-color; } .dx-gantt-tm { - border-left: 1px dashed $base-accent; + border-left: 1px dashed; + border-left-color: $base-accent; } .dx-gantt-ti { - border-left: 1px dashed $base-accent; - border-right: 1px dashed $base-accent; + border-left: 1px dashed; + border-left-color: $base-accent; + border-right: 1px dashed; + border-right-color: $base-accent; background-color: color.change($base-accent, $alpha: 0.15); } diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss index 9fa6f65826e1..e3379b7131ea 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss @@ -98,7 +98,7 @@ $datagrid-group-row-color: null !default; * $type color */ $datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default; -$datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default; +$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; /** * $name 105. Highlighted text color @@ -123,14 +123,14 @@ $datagrid-row-error-color: null !default; * $name 120. Error row background color * $type color */ -$datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; +$datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; $datagrid-link-color: $base-link-color !default; /** * $name 75. Focused cell border color * $type color */ -$datagrid-focused-border-color: mix($base-bg, $base-accent, 20%) !default; +$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default; /** * $name 80. Editor background color @@ -153,7 +153,7 @@ $datagrid-row-alternation-bg: null !default; * $type color */ $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; -$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default; +$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-filter-row-background-color: null !default; @@ -167,48 +167,48 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; @if $mode == "light" { @if $color == "blue"{ - $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default; - $datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default; + $datagrid-row-focused-bg: color.adjust($base-accent, $hue: 3deg, $saturation: -0.98%, $space: hsl, $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: lighten(adjust-hue($base-accent, -1), 26.47) !default; + $datagrid-row-focused-bg: color.adjust($base-accent, $hue: -1deg, $space: hsl, $lightness: 26.47%) !default; $datagrid-filter-row-background-color: $base-typography-bg !default; } $datagrid-columnchooser-item-color: $datagrid-base-color !default; $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; - $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $header-filter-color: $datagrid-columnchooser-item-color !default; $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default; $datagrid-row-error-color: $base-inverted-text-color !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; - $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 4%) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/fluent/color-schemes/light/grid/text-stub.png') !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: lighten($base-text-color, 60) !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; } @if $mode == "dark" { $datagrid-row-focused-bg: #0c3b5e !default; - $datagrid-filter-row-background-color: lighten($datagrid-base-background-color, 2%) !default; + $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default; $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; - $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 12%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; $header-filter-color: $datagrid-columnchooser-item-color !default; $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default; $datagrid-row-error-color: rgba(255, 255, 255, 1) !default; - $datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default; - $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default; + $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/fluent/color-schemes/dark/grid/text-stub.png') !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: darken($base-text-color, 63.9) !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; } -$datagrid-border: 1px solid $datagrid-border-color !default; +$datagrid-border: 1px solid !default; :root { --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg}; diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss index 2884fa8b5017..12bf0c59f4ab 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -31,11 +32,11 @@ $fluent-grid-base-row-border: 1px solid transparent; $fluent-grid-base-border-color: $datagrid-border-color; $fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; $fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; -$fluent-grid-base-header-cell-vertical-padding: round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); +$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); $fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding; -$fluent-grid-base-cell-vertical-padding: round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); +$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); $fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; $grid-masterdetail-padding: 16px; $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height; @@ -240,8 +241,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } // T838734 - border-top: 1px solid $datagrid-row-alternation-bg; - border-bottom: 1px solid $datagrid-row-alternation-bg; + border-top: 1px solid; + border-top-color: $datagrid-row-alternation-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-alternation-bg; } .dx-link { @@ -250,11 +253,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-row-lines > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-column-lines > td { border-left: $datagrid-border; + border-left-color: $datagrid-border-color; border-right: $datagrid-border; + border-right-color: $datagrid-border-color; } .dx-error-row { @@ -589,7 +595,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-popup-title { background-color: transparent; - border-bottom: 1px solid $popup-title-border-color; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; .dx-toolbar-label { font-size: $fluent-m-font-size; @@ -686,6 +693,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig right: 0; pointer-events: none; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-#{$widget-name}-table { @@ -696,6 +704,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-row { > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; line-height: $fluent-grid-base-header-line-height; font-weight: $datagrid-columnchooser-font-weight; font-size: $fluent-grid-base-header-cell-font-size; @@ -737,7 +746,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-row { &.dx-header-row { > td { - border-right: 1px solid $fluent-grid-base-border-color; + border-right: 1px solid; + border-right-color: $fluent-grid-base-border-color; } } } @@ -749,7 +759,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-row { &.dx-header-row { > td { - border-left: 1px solid $fluent-grid-base-border-color; + border-left: 1px solid; + border-left-color: $fluent-grid-base-border-color; &:first-child { border-left: none; @@ -858,6 +869,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-#{$widget-name}-header-panel { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; padding: $fluent-grid-base-header-panel-padding; .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon { @@ -922,7 +934,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } .dx-#{$widget-name}-rowsview { - border-top: 1px solid $fluent-grid-base-border-color; + border-top: 1px solid; + border-top-color: $fluent-grid-base-border-color; .dx-#{$widget-name}-headers + &, &.dx-#{$widget-name}-after-headers { @@ -940,11 +953,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig &.dx-edit-row:first-child > td { border-top-width: 0; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } &.dx-edit-row > td { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } } @@ -956,7 +972,9 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig > .dx-#{$widget-name}-group-space, .dx-master-detail-cell:not(.dx-row-lines) { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } } @@ -999,12 +1017,15 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } .dx-row-removed.dx-row-lines > td { - border-top: 1px solid $datagrid-cell-removed-border-color; - border-bottom: 1px solid $datagrid-cell-removed-border-color; + border-top: 1px solid; + border-top-color: $datagrid-cell-removed-border-color; + border-bottom: 1px solid; + border-bottom-color: $datagrid-cell-removed-border-color; } .dx-row-removed:not(.dx-row-lines) > td { - border-top: 1px solid $datagrid-hover-bg; + border-top: 1px solid; + border-top-color: $datagrid-hover-bg; } .dx-adaptive-detail-row { @@ -1062,7 +1083,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig &:not(.dx-row-lines) { & > td, & > tr:first-child > td { - border-bottom: 1px solid $datagrid-row-focused-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-focused-bg; } } @@ -1103,8 +1125,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } &:not(.dx-row-lines) > td { - border-bottom: 1px solid $datagrid-selection-bg; - border-top: 1px solid $datagrid-selection-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; } &.dx-row-lines > td { @@ -1126,7 +1150,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig padding: $fluent-grid-base-cell-padding; padding-right: $fluent-texteditor-invalid-badge-size; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { padding-left: $fluent-texteditor-invalid-badge-size; padding-right: $fluent-grid-base-cell-horizontal-padding; @@ -1140,7 +1164,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig right: $fluent-invalid-badge-size; background-color: transparent; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { left: $fluent-invalid-badge-size; } @@ -1200,6 +1224,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-#{$widget-name}-bottom-load-panel { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; background-color: $datagrid-base-background-color; } @@ -1209,7 +1234,9 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-#{$widget-name}-total-footer { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; border-top: $datagrid-border; + border-top-color: $datagrid-border-color; > .dx-#{$widget-name}-content { padding: 0; @@ -1281,14 +1308,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-selection.dx-row:hover { & > td, & > tr > td { + border-right-color: $datagrid-row-selected-border-color; + &:not(.dx-focused) { &.dx-#{$widget-name}-group-space { border-left-color: $datagrid-selection-bg; } } - border-right-color: $datagrid-row-selected-border-color; - &.dx-pointer-events-none { border-left-color: $datagrid-row-selected-border-color; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_index.scss index 145fe07f40d6..10c60a1a897c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_index.scss @@ -58,7 +58,8 @@ &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: 2px solid $texteditor-indicator-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-indicator-border-color; transform: scale(1); transition-property: transform; transition-duration: 0.2s; @@ -116,7 +117,8 @@ &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: 2px solid $texteditor-invalid-focused-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; } } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss index 45f029180819..265d04dbf028 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss @@ -9,11 +9,11 @@ $informer-info-color: $base-text-color !default; $informer-info-background-color: null !default; @if $mode == "light" { - $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67); - $informer-info-background-color: lighten($base-text-color, 74.90); + $informer-error-background-color: color.adjust($base-danger, $hue: -358deg, $saturation: 0.58%, $space: hsl, $lightness: 46.67%); + $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); } @if $mode == "dark" { - $informer-error-background-color: darken(desaturate($base-danger, 5.06), 53.53); - $informer-info-background-color: darken($base-text-color, 76.08); + $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%); + $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl); } diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_colors.scss index dae06f391c6c..6966ae38f168 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/list/_colors.scss @@ -58,11 +58,11 @@ $list-icon-color: $base-icon-color !default; $base-select-all-separator-color: $base-separator-color !default; @if $mode == "light" { - $list-normal-color: lighten($base-text-color, 11.76) !default; + $list-normal-color: color.adjust($base-text-color, $lightness: 11.76%, $space: hsl) !default; } @if $mode == "dark" { - $list-normal-color: darken($base-text-color, 16.08) !default; + $list-normal-color: color.adjust($base-text-color, $lightness: -16.08%, $space: hsl) !default; } /** diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss index df9dfc005aa5..5e06b6480b2b 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss @@ -18,8 +18,8 @@ $fluent-list-item-border-width: 1px; $fluent-list-border-width: 1px; -$fluent-list-border: $fluent-list-border-width solid $list-border-color; -$fluent-list-item-border: $fluent-list-item-border-width solid $list-border-color; +$fluent-list-border: $fluent-list-border-width solid; +$fluent-list-item-border: $fluent-list-item-border-width solid; .dx-state-disabled { &.dx-list { @@ -246,6 +246,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo &:not(:last-child) { padding-bottom: $fluent-list-vertical-padding; border-bottom: $fluent-list-item-border; + border-bottom-color: $list-border-color; } } @@ -365,7 +366,8 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo &.dx-state-hover { color: $list-item-ghost-color; background: $list-item-ghost-bg; - border: 1px solid $list-item-ghost-border-color; + border: 1px solid; + border-color: $list-item-ghost-border-color; } } } @@ -400,6 +402,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo .dx-list-border-visible { border: $fluent-list-border; + border-color: $list-border-color; } .dx-list-item-before-bag { @@ -506,7 +509,8 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo .dx-list-context-menucontent { background-color: $list-holdmenu-bg; - border: 1px solid $list-holdmenu-border-color; + border: 1px solid; + border-color: $list-holdmenu-border-color; border-radius: $base-border-radius; box-shadow: $list-holdmenu-shadow-color 0 2px 7.2px 0; diff --git a/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss index c0a95be43de5..5a35ba0d4dee 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/loadIndicator/_colors.scss @@ -21,23 +21,23 @@ $load-indicator-animation-sparkle-bg-color3: null !default; @if $mode == "light" { @if $color == "blue" { - $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($load-indicator-segment-bg-color, 2.9), 2.2), 44.3) !default; + $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-animation-sparkle-bg-color1: $base-accent !default; - $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 2), 2.73), 27.25) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, 3), 5.61), 38.43) !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; } @if $color == "saas" { - $load-indicator-inner-segment-border-color: mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; - $load-indicator-animation-sparkle-bg-color1: darken(desaturate(adjust-hue($base-accent, -15), 14.71), 26.47) !default; - $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, -12), 11.98), 0.78) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -12), 9.09), 11.96) !default; + $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; } } @if $mode == "dark" { $load-indicator-inner-segment-border-color: $base-accent-selected !default; - $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 1.67), 5.29) !default; - $load-indicator-animation-sparkle-bg-color2: darken(desaturate(adjust-hue($base-accent, -2), 4.40), 21.96) !default; - $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, -2), 8.58), 26.67) !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; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss index 48fc9addd38c..7196c391ae63 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss @@ -27,9 +27,9 @@ $menu-item-link-color: $base-link-color !default; $menu-item-focused-selected-bg: null !default; @if $mode == "light" { - $menu-item-focused-selected-bg: darken($base-bg, 9.8) !default; + $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: -9.8%, $space: hsl) !default; } @if $mode == "dark" { - $menu-item-focused-selected-bg: lighten($base-bg, 18.04) !default; + $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/menu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/menu/_index.scss index 0ecb4c8f3407..f1321a4c70cc 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/menu/_index.scss @@ -80,7 +80,8 @@ background-color: $menu-popup-bg; .dx-treeview { - border: 1px solid $menu-popup-border-color; + border: 1px solid; + border-color: $menu-popup-border-color; border-radius: $base-border-radius; &, @@ -102,6 +103,7 @@ } .dx-treeview-node-container:first-child > .dx-treeview-node { - border-bottom: 1px solid $menu-popup-border-color; + border-bottom: 1px solid; + border-bottom-color: $menu-popup-border-color } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss index a4bc9d11c119..ff166d8db034 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss @@ -33,7 +33,7 @@ $pivotgrid-grandtotalcolor: null !default; * $name 40. Field area text color * $type color */ -$pivotgrid-field-area-text-color: color.change(darken($pivotgrid-area-color, 26.2%), $alpha: 0.3) !default; +$pivotgrid-field-area-text-color: color.change(color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl), $alpha: 0.3) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; @@ -44,7 +44,7 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; @if $mode == "light" { @if $color == "blue"{ $pivotgrid-grandtotalcolor: $base-hover-bg !default; - $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default; + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; } @if $color == "saas" { @@ -54,5 +54,5 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; } @if $mode == "dark" { - $pivotgrid-field-area-box-background-color: darken($base-bg, 12.16) !default; + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss index 0bb559809a27..1293464c8c69 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_index.scss @@ -46,7 +46,8 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; &.dx-drag { .dx-area-field.dx-area-box { background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9); - border: 1px solid $base-border-color-disabled; + border: 1px solid; + border-color: $base-border-color-disabled; box-shadow: $fluent-pivotgrid-drag-header-shadow; } } @@ -55,7 +56,8 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; color: $pivotgrid-field-area-box-text-color; background-color: $pivotgrid-field-area-box-background-color; border-radius: $area-field-border-radius; - border: 1px solid $base-border-color-disabled; + border: 1px solid; + border-color: $base-border-color-disabled; font-size: $fluent-pivotgrid-headers-font-size; font-weight: $pivotgrid-field-area-box-font-weight; line-height: 20px; diff --git a/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss index af585acb0812..6f33bfad8564 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/popup/_index.scss @@ -36,7 +36,8 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size; .dx-popup-title { position: relative; min-height: 28px; - border-bottom: 1px solid $popup-title-border-color; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; background: $popup-title-bg; color: $popup-title-color; diff --git a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss index d3d0cae0f3ee..336b7d3b3de7 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/progressBar/_colors.scss @@ -32,9 +32,9 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p $progressbar-label-color: $base-text-color !default; @if $mode == "light" { - $progressbar-bg: darken($base-typography-bg, 7.84) !default; + $progressbar-bg: color.adjust($base-typography-bg, $lightness: -7.84%, $space: hsl) !default; } @if $mode == "dark" { - $progressbar-bg: lighten($base-typography-bg, 7.84) !default; + $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss index d8661ed51d53..d582b27f392a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss @@ -13,7 +13,7 @@ $scheduler-base-border-color: $base-border-color !default; $scheduler-cell-active-bg: null !default; $scheduler-cell-hover-bg: null !default; -$scheduler-group-separator-border-color: darken($base-border-color, 13%) !default; +$scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -13%, $space: hsl) !default; /** * $name 20. Hour separator color @@ -52,7 +52,7 @@ $scheduler-workspace-focused-cell-color: null !default; * $type color */ $scheduler-first-month-border-color: $base-border-color !default; -$scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; +$scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; $scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.54) !default; $scheduler-workspace-background-color: $base-bg !default; $scheduler-workspace-accent-color: $base-accent !default; @@ -95,36 +95,36 @@ $header-panel-cell-date: null !default; $header-panel-cell-date: #424242; @if $color == "blue"{ - $scheduler-appointment-base-color: lighten($base-accent, 48%) !default; + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 48%, $space: hsl) !default; $scheduler-cell-hover-bg: $base-hover-bg !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default; } @if $color == "saas" { - $scheduler-appointment-base-color: lighten($base-accent, 30%) !default; - $scheduler-cell-hover-bg: lighten($base-hover-bg, 4.10) !default; - $scheduler-cell-active-bg: darken(saturate(adjust-hue($base-bg, 222), 100.00), 2.00) !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 32.53) !default; + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 30%, $space: hsl) !default; + $scheduler-cell-hover-bg: color.adjust($base-hover-bg, $lightness: 4.10%, $space: hsl) !default; + $scheduler-cell-active-bg: extcolor.adjust-if-not-achromatic($color: $base-bg, $hue: 222deg, $saturation: 100%, $lightness: -2%) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 32.53%, $space: hsl) !default; } } @if $mode == "dark" { $scheduler-workspace-month-text-color: #999; - $scheduler-appointment-base-color: darken($base-accent, 48%) !default; + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default; $scheduler-appointment-text-color: #fff !default; $scheduler-panel-text-color: #999; $header-panel-cell-date: #adadad; $scheduler-cell-hover-bg: $base-hover-bg !default; @if $color == "blue"{ - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default; } @if $color == "saas" { - $scheduler-cell-active-bg: lighten($base-bg, 4.31) !default; - $scheduler-workspace-focused-cell-color: darken(desaturate(adjust-hue($base-accent, -7), 65.00), 41.18) !default; + $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; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss index 27996ab2002a..029eee887dd5 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss @@ -60,7 +60,7 @@ $fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-ta $fluent-scheduler-month-date-text-size: 14px; -$scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color; +$scheduler-first-of-month-border: 1px solid; $fluent-scheduler-agenda-time-panel-cell-padding: 8px; @@ -127,6 +127,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; height: $fluent-scheduler-all-day-table-cell-height; font-size: $fluent-scheduler-all-day-title-font-size; border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; text-align: right; padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; @@ -331,6 +332,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; &.dx-scheduler-header-panel-week-cell { border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; flex-flow: column; justify-content: flex-end; } @@ -403,6 +405,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; } } } @@ -435,7 +438,9 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-date-table-first-of-month { border-left: $scheduler-first-of-month-border; + border-left-color: $scheduler-first-month-border-color; border-top: $scheduler-first-of-month-border; + border-top-color: $scheduler-first-month-border-color; } .dx-scheduler-header-panel { @@ -576,7 +581,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-group-header { font-size: $fluent-scheduler-group-header-font-size; text-align: left; - border-bottom: 1px solid $scheduler-base-border-color; + border-bottom: 1px solid; + border-bottom-color: $scheduler-base-border-color; .dx-scheduler-group-header-content { padding-left: $fluent-scheduler-header-panel-margin; @@ -617,6 +623,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-all-day-table-cell { border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; } } @@ -634,6 +641,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; &.dx-scheduler-work-space-grouped { .dx-scheduler-all-day-title { border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; } &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) { @@ -778,15 +786,18 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th, .dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell { - border-right: 1px solid $scheduler-group-separator-border-color; + border-right: 1px solid; + border-right-color: $scheduler-group-separator-border-color; &:last-child { border-right: none; } .dx-rtl & { - border-left: 1px solid $scheduler-group-separator-border-color; + border-left: 1px solid; + border-left-color: $scheduler-group-separator-border-color; border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; &:last-child { border-left: none; @@ -802,21 +813,19 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-rtl .dx-scheduler-timeline & { border-left: $fluent-scheduler-appointment-transparent-left-border; border-right: $fluent-scheduler-appointment-transparent-right-border; + box-shadow: none; + border-radius: 4px; &.dx-state-focused { color: $scheduler-appointment-focus-color; } - box-shadow: none; - &.dx-state-active, &.dx-resizable-resizing, &.dx-state-hover, &.dx-state-hover.dx-resizable { box-shadow: none; } - - border-radius: 4px; } } @@ -832,6 +841,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; &.dx-scheduler-work-space-month { .dx-scheduler-date-table-scrollable { border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } } @@ -968,6 +978,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-left: baseScheduler.$scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } } @@ -987,7 +998,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-list-item { margin-bottom: 0; margin-top: 0; - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; &:last-of-type { border-bottom-left-radius: $tooltip-border-radius; diff --git a/packages/devextreme-scss/scss/widgets/fluent/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/scrollable/_colors.scss index d8816031eb3e..f690f47a9d06 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/scrollable/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/scrollable/_colors.scss @@ -14,10 +14,10 @@ $scrollable-scroll-bg: null !default; $scrollable-scrollbar-bg: transparent !default; @if $mode == "light" { - $scrollable-scroll-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.7) !default; + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; } @if $mode == "dark" { - $scrollable-scroll-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.7) !default; + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/tabPanel/_index.scss index f9cd24781626..31bfdffe7e83 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabPanel/_index.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -26,9 +27,10 @@ .dx-tabpanel-tabs-position-top { > .dx-tabpanel-tabs { .dx-tabs { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-bottom: none; } } @@ -38,9 +40,10 @@ .dx-tabpanel-tabs-position-bottom { > .dx-tabpanel-tabs { .dx-tabs { - border-top: 1px solid $base-border-color; + border-top: 1px solid; + border-top-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-top: none; } } @@ -50,9 +53,10 @@ .dx-tabpanel-tabs-position-left { > .dx-tabpanel-tabs { .dx-tabs { - border-right: 1px solid $base-border-color; + border-right: 1px solid; + border-right-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-right: none; } } @@ -62,9 +66,10 @@ .dx-tabpanel-tabs-position-right { > .dx-tabpanel-tabs { .dx-tabs { - border-left: 1px solid $base-border-color; + border-left: 1px solid; + border-left-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-left: none; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss index 1124f6fe5f4d..4aef73e1ce3a 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tabs/layout/tab/_base.scss @@ -14,8 +14,8 @@ // adduse @use "../../../scrollable"; @use "../../../badge"; -@import "styling-mode/primary"; -@import "styling-mode/secondary"; +@use "styling-mode/primary" as *; +@use "styling-mode/secondary" as *; .dx-tab { diff --git a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_colors.scss index da71d425c748..532cea56befe 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_colors.scss @@ -36,9 +36,9 @@ $tagbox-tag-foreground-disabled: $base-foreground-disabled !default; $tagbox-tag-disabled: $base-background-disabled !default; @if $mode == "light" { - $tagbox-tag-bg: darken($base-hover-bg, 1.96) !default; + $tagbox-tag-bg: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default; } @if $mode == "dark" { - $tagbox-tag-bg: darken($base-element-bg, 12.16) !default; + $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss index 5a4f74c71f20..b4c7f569023d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tagBox/_index.scss @@ -174,7 +174,8 @@ .dx-tagbox-popup-wrapper { .dx-list-select-all { - border-bottom: 1px solid $tagbox-select-all-border-color; + border-bottom: 1px solid; + border-bottom-color: $tagbox-select-all-border-color; padding-bottom: $fluent-tagbox-select-all-padding-bottom; margin-bottom: $fluent-tagbox-select-all-margin-bottom; diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss index 738a801a7c0f..9b1c0e6ee6f6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_colors.scss @@ -94,9 +94,9 @@ $texteditor-label-transition: @if $mode == "light" { @if $color == "blue" { $texteditor-color: $base-text-color !default; - $texteditor-placeholder-color: lighten($base-text-color, 29.80) !default; + $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: darken($base-element-bg, 3.9) !default; + $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default; } @if $color == "saas" { @@ -106,17 +106,17 @@ $texteditor-label-transition: $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; } - $texteditor-border-color-hover: darken($texteditor-border-color, 9.8) !default; - $texteditor-border-color-focused: darken($texteditor-border-color, 17.65) !default; - $texteditor-border-bottom-color-hover: darken($texteditor-border-bottom-color, 3.92) !default; - $texteditor-border-bottom-color-focused: darken($texteditor-border-bottom-color-hover, 3.92) !default; + $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default; + $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default; + $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default; + $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default; } @if $mode == "dark" { @if $color == "blue" { $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: darken($base-element-bg, 8.2) !default; + $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default; } @if $color == "saas" { @@ -125,11 +125,11 @@ $texteditor-label-transition: } $texteditor-color: $base-text-color !default; - $texteditor-placeholder-color: darken($base-text-color, 40.00) !default; - $texteditor-border-color-hover: lighten($texteditor-border-color, 7.84) !default; - $texteditor-border-color-focused: lighten($texteditor-border-color, 3.92) !default; - $texteditor-border-bottom-color-hover: lighten($texteditor-border-bottom-color, 6.27) !default; - $texteditor-border-bottom-color-focused: lighten($texteditor-border-bottom-color-hover, 3.92) !default; + $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; + $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default; + $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default; + $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default; + $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default; } /** diff --git a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss index 3311a492ec27..3ce252791d4e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/textEditor/_index.scss @@ -452,7 +452,8 @@ $fluent-editor-border-width: 1px; &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: 2px solid $texteditor-invalid-focused-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/fluent/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/tileView/_colors.scss index 4b1c30c58a2f..1ac51ec80923 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tileView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tileView/_colors.scss @@ -13,5 +13,5 @@ $tileview-bg: $base-element-bg !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; -$tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default; +$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/tileView/_index.scss index 82a9635b1159..e59c21678b65 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/tileView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/tileView/_index.scss @@ -11,7 +11,8 @@ .dx-tile { color: $tileview-color; background-color: $tileview-bg; - border: 1px solid $tileview-border-color; + border: 1px solid; + border-color: $tileview-border-color; text-align: left; &.dx-state-focused, diff --git a/packages/devextreme-scss/scss/widgets/fluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/toolbar/_index.scss index 402dc3fd2e07..bb487960ea0d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/toolbar/_index.scss @@ -45,7 +45,8 @@ } .dx-toolbar-menu-section { - border-bottom: 1px solid $toolbar-separator-color; + border-bottom: 1px solid; + border-bottom-color: $toolbar-separator-color; .dx-list-item-content, .dx-toolbar-item-auto-hide { diff --git a/packages/devextreme-scss/scss/widgets/generic/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/_colors.scss index 025ebc4e5408..ec2543c27f6f 100644 --- a/packages/devextreme-scss/scss/widgets/generic/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/_colors.scss @@ -148,7 +148,7 @@ $base-grid-selectedrow-border-color: null !default; $base-border-color: #dee1e3 !default; $base-border-radius: 2px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-shadow-color: $base-inverted-bg !default; $base-success: #5cb85c !default; @@ -157,7 +157,7 @@ $base-grid-selectedrow-border-color: null !default; $base-hover-color: $base-text-color !default; $base-hover-bg: color.change($base-accent, $alpha: 0.12) !default; $base-select-color: $base-text-color !default; - $base-select-bg: lighten($base-accent, 21%) !default; + $base-select-bg: color.adjust($base-accent, $lightness: 21%, $space: hsl) !default; $base-inverted-text-color: #fff !default; $base-focus-color: $base-inverted-text-color !default; $base-focus-bg: $base-accent !default; @@ -209,7 +209,7 @@ $base-grid-selectedrow-border-color: null !default; $base-icon-color: $base-text-color !default; $base-border-radius: 4px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: lighten($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-shadow-color: #000 !default; $base-success: #5cb85c !default; @@ -241,7 +241,7 @@ $base-grid-selectedrow-border-color: null !default; $base-border-color: #596980 !default; $base-border-radius: 2px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-success: #59d8a4 !default; $base-warning: #f0ad4e !default; @@ -254,10 +254,10 @@ $base-grid-selectedrow-border-color: null !default; $base-inverted-text-color: #2a2a2a !default; $base-focus-color: $base-inverted-text-color !default; $base-focus-bg: $base-accent !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-shadow-color: $base-inverted-bg !default; $base-inverted-icon-color: $base-inverted-text-color !default; - $base-dropdown-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.175) !default; + $base-dropdown-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.175) !default; $base-invalid-color: $base-danger !default; $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default; $screen-text-color: extcolor.screen($base-bg, #686868) !default; @@ -277,7 +277,7 @@ $base-grid-selectedrow-border-color: null !default; $base-border-color: #343840 !default; $base-border-radius: 1px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: lighten($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-shadow-color: #000 !default; $base-success: #5cb85c !default; @@ -310,10 +310,10 @@ $base-grid-selectedrow-border-color: null !default; $base-accent: #3cbab2 !default; $base-text-color: #28484f !default; $base-bg: #f5f5f5 !default; - $base-border-color: darken($base-bg, 9%) !default; + $base-border-color: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default; $base-border-radius: 2px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-shadow-color: $base-inverted-bg !default; $base-success: #72d63c !default; @@ -345,7 +345,7 @@ $base-grid-selectedrow-border-color: null !default; $base-border-color: #ddd !default; $base-border-radius: 4px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-success: #5cb85c !default; $base-warning: #f0ad4e !default; @@ -377,7 +377,7 @@ $base-grid-selectedrow-border-color: null !default; $base-border-color: #e8eaeb !default; $base-border-radius: 2px !default; $base-border-radius-exsmall: $base-border-radius - 2px !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-success: #5cb85c !default; $base-warning: #f0ad4e !default; @@ -390,7 +390,7 @@ $base-grid-selectedrow-border-color: null !default; $base-inverted-text-color: #fff !default; $base-focus-color: $base-inverted-text-color !default; $base-focus-bg: $base-accent !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-shadow-color: $base-inverted-bg !default; $base-inverted-icon-color: $base-inverted-text-color !default; $base-webwidget-hover-background: #edf0f2 !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss index bc8003862f40..bfcfe2484d0a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/_sizes.scss @@ -46,7 +46,7 @@ $generic-base-inline-horizontal-padding: null !default; $generic-base-inline-widget-vertical-padding: $generic-base-inline-widget-height - $generic-base-inline-block-height !default; -$generic-base-inline-widget-top-padding: floor(math.div($generic-base-inline-widget-vertical-padding, 2)) !default; +$generic-base-inline-widget-top-padding: math.floor(math.div($generic-base-inline-widget-vertical-padding, 2)) !default; $generic-base-inline-widget-bottom-padding: $generic-base-inline-widget-vertical-padding - $generic-base-inline-widget-top-padding !default; @@ -69,7 +69,7 @@ $generic-base-inline-borderedwidget-bottom-padding: $generic-base-inline-widget-bottom-padding - $generic-base-border-width !default; -$generic-treeview-search-editor-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width; +$generic-treeview-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width; :root { --dx-component-height: #{$generic-base-inline-widget-height}; diff --git a/packages/devextreme-scss/scss/widgets/generic/accordion/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/accordion/_colors.scss index d83811d1e9a8..1ef680fa6f9f 100644 --- a/packages/devextreme-scss/scss/widgets/generic/accordion/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/accordion/_colors.scss @@ -69,7 +69,7 @@ $accordion-item-hover-bg: null !default; $accordion-title-color: $accordion-color !default; $accordion-item-focused-border-color: $base-focus-bg !default; $accordion-title-active-color: $accordion-color !default; - $accordion-title-active-bg: color.change(lighten($accordion-background-color, 62.5%), $alpha: 0.2) !default; + $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $accordion-item-hover-bg: $base-hover-bg !default; } @@ -77,7 +77,7 @@ $accordion-item-hover-bg: null !default; $accordion-title-color: $accordion-color !default; $accordion-item-focused-border-color: $base-accent !default; $accordion-title-active-color: $base-accent !default; - $accordion-title-active-bg: color.change(lighten($accordion-background-color, 62.5%), $alpha: 0.2) !default; + $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $accordion-item-hover-bg: $base-hover-bg !default; } @@ -85,7 +85,7 @@ $accordion-item-hover-bg: null !default; $accordion-title-color: $base-header-color !default; $accordion-item-focused-border-color: $base-accent !default; $accordion-title-active-color: $base-accent-highlight-color !default; - $accordion-title-active-bg: color.change(lighten($accordion-background-color, 62.5%), $alpha: 0.2) !default; + $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $accordion-item-hover-bg: $base-hover-bg !default; } @@ -93,7 +93,7 @@ $accordion-item-hover-bg: null !default; $accordion-title-color: $base-accent !default; $accordion-item-focused-border-color: $base-focus-bg !default; $accordion-title-active-color: $accordion-color !default; - $accordion-title-active-bg: color.change(darken($accordion-background-color, 9%), $alpha: 0.4) !default; + $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: -9%, $space: hsl), $alpha: 0.4) !default; $accordion-item-hover-bg: $base-hover-bg !default; } @@ -101,7 +101,7 @@ $accordion-item-hover-bg: null !default; $accordion-title-color: $accordion-color !default; $accordion-item-focused-border-color: $base-focus-bg !default; $accordion-title-active-color: $accordion-color !default; - $accordion-title-active-bg: color.change(darken($accordion-background-color, 62.5%), $alpha: 0.2) !default; + $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $accordion-item-hover-bg: $base-hover-bg !default; } @@ -109,7 +109,7 @@ $accordion-item-hover-bg: null !default; $accordion-title-color: $accordion-color !default; $accordion-item-focused-border-color: $base-accent !default; $accordion-title-active-color: $accordion-color !default; - $accordion-title-active-bg: color.change(darken($accordion-background-color, 62.5%), $alpha: 0.2) !default; + $accordion-title-active-bg: color.change(color.adjust($accordion-background-color, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $accordion-item-hover-bg: $base-hover-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/generic/accordion/_index.scss index ebdb2d128245..fab264b689ff 100644 --- a/packages/devextreme-scss/scss/widgets/generic/accordion/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/accordion/_index.scss @@ -20,7 +20,8 @@ border-top-color: $accordion-item-border-color; &:last-child { - border-bottom: 1px solid $accordion-item-border-color; + border-bottom: 1px solid; + border-bottom-color: $accordion-item-border-color; } &.dx-state-active:not(.dx-accordion-item-opened) { diff --git a/packages/devextreme-scss/scss/widgets/generic/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/badge/_colors.scss index 25f0cf5c491b..2c77048c9b34 100644 --- a/packages/devextreme-scss/scss/widgets/generic/badge/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/badge/_colors.scss @@ -31,7 +31,7 @@ $badge-bg: null !default; } @if $color == "darkmoon" { - $badge-bg: lighten($base-accent, 25%) !default; + $badge-bg: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default; } @if $color == "darkviolet" { diff --git a/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss index 42c77fb93172..fbd6829f7b4b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss @@ -213,12 +213,12 @@ $button-success-text-bg-selected: null !default; @if $color == "carmine" { $button-normal-bg: $base-element-bg !default; - $button-normal-border-color: darken($base-border-color, 17%) !default; - $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default; + $button-normal-border-color: color.adjust($base-border-color, $lightness: -17%, $space: hsl) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: -4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: -24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: -17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -230,26 +230,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default; - $button-default-contained-bg-active: darken($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: -9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: -12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: -23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: -17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: -9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: -12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: -23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: -17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -258,11 +258,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default; - $button-success-contained-bg-active: darken($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: -9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: -12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: -23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: -17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; @@ -337,11 +337,11 @@ $button-success-text-bg-selected: null !default; @if $color == "dark" { $button-normal-bg: $base-element-bg !default; $button-normal-border-color: $base-border-color !default; - $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: lighten($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: lighten($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: lighten($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: lighten($button-normal-bg, 17%) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: 4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: 24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: 17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -353,26 +353,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default; - $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: 9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: 12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: 23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: 17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: lighten($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: 9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: 12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: 23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: 17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -381,11 +381,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default; - $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: lighten($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: 9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: 12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: 23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: 17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; @@ -398,12 +398,12 @@ $button-success-text-bg-selected: null !default; @if $color == "darkmoon" { $button-normal-bg: $base-element-bg !default; - $button-normal-border-color: lighten($base-border-color, 13%) !default; - $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: lighten($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: lighten($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: lighten($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: lighten($button-normal-bg, 17%) !default; + $button-normal-border-color: color.adjust($base-border-color, $lightness: 13%, $space: hsl) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: 4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: 24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: 17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -415,26 +415,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default; - $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: 9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: 12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: 23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: 17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: lighten($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: 9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: 12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: 23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: 17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -443,11 +443,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default; - $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: lighten($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: 9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: 12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: 23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: 17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; @@ -461,11 +461,11 @@ $button-success-text-bg-selected: null !default; @if $color == "darkviolet" { $button-normal-bg: #303038 !default; $button-normal-border-color: $base-hover-bg !default; - $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: lighten($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: lighten($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: lighten($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: lighten($button-normal-bg, 17%) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: 4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: 24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: 17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -477,26 +477,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default; - $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: 9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: 12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: 23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: 17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: lighten($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: 9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: 12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: 23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: 17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -505,11 +505,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default; - $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: lighten($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: 9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: 12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: 23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: 17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; @@ -522,12 +522,12 @@ $button-success-text-bg-selected: null !default; @if $color == "greenmist" { $button-normal-bg: $base-element-bg !default; - $button-normal-border-color: lighten($base-label-color, 16.5%) !default; - $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default; + $button-normal-border-color: color.adjust($base-label-color, $lightness: 16.5%, $space: hsl) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: -4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: -24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: -17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -539,26 +539,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default; - $button-default-contained-bg-active: darken($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: -9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: -12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: -23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: -17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: -9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: -12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: -23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: -17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -567,11 +567,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default; - $button-success-contained-bg-active: darken($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: -9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: -12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: -23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: -17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; @@ -585,11 +585,11 @@ $button-success-text-bg-selected: null !default; @if $color == "light" { $button-normal-bg: $base-element-bg !default; $button-normal-border-color: $base-border-color !default; - $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: -4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: -24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: -17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -601,26 +601,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default; - $button-default-contained-bg-active: darken($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: -9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: -12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: -23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: -17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: -9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: -12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: -23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: -17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -629,11 +629,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default; - $button-success-contained-bg-active: darken($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: -9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: -12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: -23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: -17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; @@ -646,12 +646,12 @@ $button-success-text-bg-selected: null !default; @if $color == "softblue" { $button-normal-bg: $base-element-bg !default; - $button-normal-border-color: darken($base-border-color, 11%) !default; - $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default; - $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default; - $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default; - $button-normal-contained-bg-active: darken($button-normal-bg, 24%) !default; - $button-normal-contained-bg-selected: darken($button-normal-bg, 17%) !default; + $button-normal-border-color: color.adjust($base-border-color, $lightness: -11%, $space: hsl) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default; + $button-normal-contained-bg-hover: color.adjust($button-normal-bg, $lightness: -4%, $space: hsl) !default; + $button-normal-contained-bg-focused: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default; + $button-normal-contained-bg-active: color.adjust($button-normal-bg, $lightness: -24%, $space: hsl) !default; + $button-normal-contained-bg-selected: color.adjust($button-normal-bg, $lightness: -17%, $space: hsl) !default; $button-normal-outlined-bg: color.change($button-normal-bg-inverted, $alpha: 0) !default; $button-normal-outlined-bg-hover: color.change($button-normal-outlined-bg, $alpha: 0.04) !default; $button-normal-outlined-bg-focused: color.change($button-normal-outlined-bg, $alpha: 0.08) !default; @@ -663,26 +663,26 @@ $button-success-text-bg-selected: null !default; $button-normal-text-bg-active: color.change($button-normal-text-bg, $alpha: 0.24) !default; $button-normal-text-bg-selected: color.change($button-normal-text-bg, $alpha: 0.17) !default; $button-default-bg: $base-accent !default; - $button-default-border-color: darken($button-default-bg, 5%) !default; - $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default; - $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default; - $button-default-contained-bg-active: darken($button-default-bg, 23%) !default; - $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default; - $button-default-outlined-color: darken($button-default-bg, 5%) !default; + $button-default-border-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; + $button-default-contained-bg-hover: color.adjust($button-default-bg, $lightness: -9%, $space: hsl) !default; + $button-default-contained-bg-focused: color.adjust($button-default-bg, $lightness: -12%, $space: hsl) !default; + $button-default-contained-bg-active: color.adjust($button-default-bg, $lightness: -23%, $space: hsl) !default; + $button-default-contained-bg-selected: color.adjust($button-default-bg, $lightness: -17%, $space: hsl) !default; + $button-default-outlined-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default; $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default; $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-default-text-color: darken($button-default-bg, 5%) !default; + $button-default-text-color: color.adjust($button-default-bg, $lightness: -5%, $space: hsl) !default; $button-default-text-bg-hover: $button-default-outlined-bg-hover !default; $button-default-text-bg-focused: $button-default-outlined-bg-focused !default; $button-default-text-bg-active: $button-default-outlined-bg-active !default; $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default; - $button-danger-border-color: darken($button-danger-bg, 5%) !default; - $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default; - $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default; - $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default; - $button-danger-contained-bg-selected: darken($button-danger-bg, 17%) !default; + $button-danger-border-color: color.adjust($button-danger-bg, $lightness: -5%, $space: hsl) !default; + $button-danger-contained-bg-hover: color.adjust($button-danger-bg, $lightness: -9%, $space: hsl) !default; + $button-danger-contained-bg-focused: color.adjust($button-danger-bg, $lightness: -12%, $space: hsl) !default; + $button-danger-contained-bg-active: color.adjust($button-danger-bg, $lightness: -23%, $space: hsl) !default; + $button-danger-contained-bg-selected: color.adjust($button-danger-bg, $lightness: -17%, $space: hsl) !default; $button-danger-outlined-bg-hover: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-focused: color.change($button-danger-border-color, $alpha: 0.1) !default; $button-danger-outlined-bg-active: color.change($button-danger-border-color, $alpha: 0.4) !default; @@ -691,11 +691,11 @@ $button-success-text-bg-selected: null !default; $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default; $button-danger-text-bg-active: $button-danger-outlined-bg-active !default; $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default; - $button-success-border-color: darken($button-success-bg, 5%) !default; - $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default; - $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default; - $button-success-contained-bg-active: darken($button-success-bg, 23%) !default; - $button-success-contained-bg-selected: darken($button-success-bg, 17%) !default; + $button-success-border-color: color.adjust($button-success-bg, $lightness: -5%, $space: hsl) !default; + $button-success-contained-bg-hover: color.adjust($button-success-bg, $lightness: -9%, $space: hsl) !default; + $button-success-contained-bg-focused: color.adjust($button-success-bg, $lightness: -12%, $space: hsl) !default; + $button-success-contained-bg-active: color.adjust($button-success-bg, $lightness: -23%, $space: hsl) !default; + $button-success-contained-bg-selected: color.adjust($button-success-bg, $lightness: -17%, $space: hsl) !default; $button-success-outlined-bg-hover: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-focused: color.change($button-success-border-color, $alpha: 0.1) !default; $button-success-outlined-bg-active: color.change($button-success-border-color, $alpha: 0.4) !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/calendar/_colors.scss index 19483b868051..c83aba422125 100644 --- a/packages/devextreme-scss/scss/widgets/generic/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/calendar/_colors.scss @@ -54,7 +54,7 @@ $calendar-cell-contoured-border-radius: $base-border-radius !default; $calendar-invalid-focused-border-color: $base-invalid-color !default; $calendar-invalid-faded-border-color: $base-invalid-faded-border-color !default; $calendar-week-number-cell-color: color.change($calendar-color, $alpha: 0.56) !default; -$calendar-week-number-cell-bg: color.change(darken($base-bg, 12%), $alpha: 0.5) !default; +$calendar-week-number-cell-bg: color.change(color.adjust($base-bg, $lightness: -12%, $space: hsl), $alpha: 0.5) !default; $calendar-cell-hover-border-color: color.change($base-accent, $alpha: 0.6) !default; $calendar-navigator-text-color: $button-normal-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/card/_index.scss b/packages/devextreme-scss/scss/widgets/generic/card/_index.scss index 64212f49fd5d..00e506a2c74f 100644 --- a/packages/devextreme-scss/scss/widgets/generic/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/card/_index.scss @@ -8,7 +8,8 @@ // adduse .dx-card { - border: 1px solid $base-border-color; + border: 1px solid; + border-color: $base-border-color; border-radius: $base-border-radius; background-color: $base-bg; } diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss index e77928824acd..47f8748fb053 100644 --- a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use '../colors' as *; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @@ -10,7 +11,6 @@ @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 @@ -417,14 +417,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; @@ -432,7 +432,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; @@ -442,8 +442,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; @@ -452,10 +452,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; @@ -466,7 +466,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; @@ -481,7 +481,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; @@ -489,7 +489,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" { @@ -505,14 +505,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; @@ -520,7 +520,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; @@ -530,20 +530,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; @@ -554,7 +554,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; @@ -569,7 +569,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; @@ -577,7 +577,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" { @@ -624,10 +624,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; @@ -661,7 +661,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; diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss index 1fc95aa847d8..6a6f51cb5d23 100644 --- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss @@ -133,20 +133,20 @@ $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-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-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-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-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; } @@ -155,20 +155,20 @@ $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-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-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-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-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; } @@ -177,20 +177,20 @@ $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-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; } @@ -221,20 +221,20 @@ $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-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; } @@ -243,20 +243,20 @@ $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-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-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-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-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; } @@ -265,20 +265,20 @@ $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-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; } @@ -287,20 +287,20 @@ $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-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; } diff --git a/packages/devextreme-scss/scss/widgets/generic/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/checkBox/_colors.scss index 5bbae2eb08f8..1d7be8af3fff 100644 --- a/packages/devextreme-scss/scss/widgets/generic/checkBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/checkBox/_colors.scss @@ -44,9 +44,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" { @@ -56,7 +56,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" { @@ -64,9 +64,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" { @@ -74,9 +74,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" { @@ -85,8 +85,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" { @@ -94,9 +94,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" { @@ -104,9 +104,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" { @@ -114,9 +114,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; diff --git a/packages/devextreme-scss/scss/widgets/generic/color.scss b/packages/devextreme-scss/scss/widgets/generic/color.scss index 635f0dd492d9..c68bdf88940c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/color.scss +++ b/packages/devextreme-scss/scss/widgets/generic/color.scss @@ -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; +} diff --git a/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss index 187ff7644d0b..43d3d0f27de3 100644 --- a/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/contextMenu/_index.scss @@ -13,7 +13,7 @@ @use "../menuBase" as *; // need as private -$generic-menu-popup-border: 1px solid $menu-popup-border-color; +$generic-menu-popup-border: 1px solid; .dx-context-menu { color: $menu-color; @@ -21,6 +21,7 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color; .dx-submenu { background-color: $menu-popup-bg; border: $generic-menu-popup-border; + border-color: $menu-popup-border-color; box-shadow: 0 2px 2px $menu-container-shadow-color; } diff --git a/packages/devextreme-scss/scss/widgets/generic/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dataGrid/_index.scss index 265d7c4d5269..fb64dbba87f3 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dataGrid/_index.scss @@ -45,6 +45,7 @@ color: $datagrid-columnchooser-item-color; font-weight: $datagrid-columnchooser-font-weight; border: $datagrid-border; + border-color: $datagrid-border-color; padding: $generic-datagrid-cell-padding; } @@ -127,10 +128,12 @@ .dx-row.dx-datagrid-group-footer { &.dx-column-lines { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } & > td { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; background-color: $datagrid-summary-bg; border-left-width: 0; border-right-width: 0; @@ -140,6 +143,7 @@ .dx-datagrid-sticky-columns { .dx-row.dx-datagrid-group-footer > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-row.dx-row-lines, .dx-row.dx-group-row, .dx-datagrid-group-footer, .dx-edit-row { diff --git a/packages/devextreme-scss/scss/widgets/generic/dateBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/dateBox/_colors.scss index b12f3e85a15a..a351cc15bc23 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dateBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dateBox/_colors.scss @@ -8,7 +8,7 @@ $timeview-bg: null !default; @if $color == "carmine" { - $timeview-bg: darken($base-bg, 2.7%) !default; + $timeview-bg: color.adjust($base-bg, $lightness: -2.7%, $space: hsl) !default; } @if $color == "contrast" { @@ -16,11 +16,11 @@ $timeview-bg: null !default; } @if $color == "dark" { - $timeview-bg: lighten($base-bg, 2.5%) !default; + $timeview-bg: color.adjust($base-bg, $lightness: 2.5%, $space: hsl) !default; } @if $color == "darkmoon" { - $timeview-bg: darken($base-bg, 2%) !default; + $timeview-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; } @if $color == "darkviolet" { @@ -28,13 +28,13 @@ $timeview-bg: null !default; } @if $color == "greenmist" { - $timeview-bg: darken($base-bg, 1%) !default; + $timeview-bg: color.adjust($base-bg, $lightness: -1%, $space: hsl) !default; } @if $color == "light" { - $timeview-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.2) !default; + $timeview-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default; } @if $color == "softblue" { - $timeview-bg: color.change(darken($base-bg, 4%), $alpha: 0.7) !default; + $timeview-bg: color.change(color.adjust($base-bg, $lightness: -4%, $space: hsl), $alpha: 0.7) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss index 886d1490034c..bca258efd6f9 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dateView/_index.scss @@ -119,14 +119,16 @@ $generic-dateview-roller-padding: math.div($generic-dateview-roller-height - $ge &::before { top: -$generic-dateview-roller-padding; - border-bottom: 1px solid $dateview-border-color; + border-bottom: 1px solid; + border-bottom-color: $dateview-border-color; @include gradient-linear($dateview-shadow-up); } &::after { top: $generic-dateview-roller-item-height; - border-top: 1px solid $dateview-border-color; + border-top: 1px solid; + border-top-color: $dateview-border-color; @include gradient-linear($dateview-shadow-down); } diff --git a/packages/devextreme-scss/scss/widgets/generic/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/diagram/_colors.scss index bcee41111298..06b8bfa1eee4 100644 --- a/packages/devextreme-scss/scss/widgets/generic/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/diagram/_colors.scss @@ -19,10 +19,10 @@ $diagram-toolbox-shape-text-opacity: null !default; @if $color == "carmine" { - $diagram-normal-format-active-bg: darken($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: darken($base-accent, 10%) !default; - $diagram-danger-format-active-bg: darken($base-danger, 10%) !default; - $diagram-success-format-active-bg: darken($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $diagram-image-icon-base-color: $base-icon-color !default; $diagram-image-icon-accent-color: $loadindicator-bg !default; $diagram-toolbox-shape-text-opacity: 0.25 !default; @@ -39,60 +39,60 @@ $diagram-toolbox-shape-text-opacity: null !default; } @if $color == "dark" { - $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: darken($base-accent, 10%) !default; - $diagram-danger-format-active-bg: darken($base-danger, 10%) !default; - $diagram-success-format-active-bg: darken($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $diagram-image-icon-base-color: color.change($base-bg, $alpha: 0.5) !default; $diagram-image-icon-accent-color: color.change($base-bg, $alpha: 0.5) !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } @if $color == "darkmoon" { - $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: lighten($base-accent, 10%) !default; - $diagram-danger-format-active-bg: lighten($base-danger, 10%) !default; - $diagram-success-format-active-bg: lighten($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $diagram-image-icon-base-color: $base-bg !default; $diagram-image-icon-accent-color: $loadindicator-bg !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } @if $color == "darkviolet" { - $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: lighten($base-accent, 10%) !default; - $diagram-danger-format-active-bg: lighten($base-danger, 10%) !default; - $diagram-success-format-active-bg: lighten($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $diagram-image-icon-base-color: color.change($base-bg, $alpha: 0.5) !default; $diagram-image-icon-accent-color: $loadindicator-bg !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } @if $color == "greenmist" { - $diagram-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: lighten($base-accent, 10%) !default; - $diagram-danger-format-active-bg: lighten($base-danger, 10%) !default; - $diagram-success-format-active-bg: lighten($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $diagram-image-icon-base-color: $base-icon-color !default; $diagram-image-icon-accent-color: $loadindicator-bg !default; $diagram-toolbox-shape-text-opacity: 0.25 !default; } @if $color == "light" { - $diagram-normal-format-active-bg: darken($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: darken($base-accent, 10%) !default; - $diagram-danger-format-active-bg: darken($base-danger, 10%) !default; - $diagram-success-format-active-bg: darken($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $diagram-image-icon-base-color: $loadindicator-bg !default; $diagram-image-icon-accent-color: $loadindicator-bg !default; $diagram-toolbox-shape-text-opacity: 0.25 !default; } @if $color == "softblue" { - $diagram-normal-format-active-bg: darken($base-element-bg, 10%) !default; - $diagram-default-format-active-bg: darken($base-accent, 10%) !default; - $diagram-danger-format-active-bg: darken($base-danger, 10%) !default; - $diagram-success-format-active-bg: darken($base-success, 10%) !default; + $diagram-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; + $diagram-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $diagram-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $diagram-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; $diagram-image-icon-base-color: $base-icon-color !default; $diagram-image-icon-accent-color: $loadindicator-bg !default; $diagram-toolbox-shape-text-opacity: 0.25 !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss index afa1caa4f309..9d4f6e72fe26 100644 --- a/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/diagram/_index.scss @@ -27,7 +27,7 @@ $diagram-toolbox-title-size: 12px; // 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, @@ -131,7 +131,8 @@ $diagram-toolbox-title-size: 12px; // 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;; } &.dx-diagram-fullscreen { @@ -145,7 +146,8 @@ $diagram-toolbox-title-size: 12px; } .dx-diagram-floating-toolbar-container { - border: 1px solid $overlay-border-color; + border: 1px solid; + border-color: $overlay-border-color; background: $overlay-content-bg; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175); border-radius: $popup-border-radius; @@ -213,7 +215,8 @@ $diagram-toolbox-title-size: 12px; } .dx-diagram-toolbox-input-container { - border-bottom: 1px solid $accordion-item-border-color; + border-bottom: 1px solid; + border-bottom-color: $accordion-item-border-color; } .dx-diagram-toolbox-input { @@ -258,7 +261,8 @@ $diagram-toolbox-title-size: 12px; padding-top: $diagram-toolbox-mobile-padding; .dx-diagram-toolbox-input-container { - border-top: 1px solid $accordion-item-border-color; + border-top: 1px solid; + border-top-color: $accordion-item-border-color; } } } diff --git a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_colors.scss index 516d87cafae8..42ccda06774b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_colors.scss @@ -44,9 +44,9 @@ $dropdowneditor-icon-active-color: null !default; $dropdowneditor-icon-border-radius: $base-border-radius - 1px !default; @if $color == "carmine" { - $dropdowneditor-button-hover-bg: darken($base-bg, 4%) !default; // #fff => #f5f6f7 + $dropdowneditor-button-hover-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; // #fff => #f5f6f7 $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } @@ -58,44 +58,44 @@ $dropdowneditor-icon-border-radius: $base-border-radius - 1px !default; } @if $color == "dark" { - $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default; + $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } @if $color == "darkmoon" { - $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default; + $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } @if $color == "darkviolet" { - $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default; + $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } @if $color == "greenmist" { - $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default; + $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } @if $color == "light" { - $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default; + $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } @if $color == "softblue" { - $dropdowneditor-button-hover-bg: darken($button-normal-bg, 10%) !default; + $dropdowneditor-button-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; $dropdowneditor-button-hover-border-color: transparent !default; - $dropdowneditor-button-active-bg: darken($button-normal-bg, 30%) !default; + $dropdowneditor-button-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $dropdowneditor-icon-active-color: $base-icon-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss index d36e64bbf988..ab8429db47d2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/dropDownEditor/_index.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -117,7 +118,7 @@ $generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $gener background-color: $dropdowneditor-button-hover-bg; border-color: $dropdowneditor-button-hover-border-color; - @at-root #{selector-append(".dx-editor-filled", &)} { + @at-root #{selector.append(".dx-editor-filled", &)} { background-color: $dropdowneditor-filled-button-hover-bg; } } @@ -132,7 +133,7 @@ $generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $gener color: $dropdowneditor-icon-active-color; opacity: 1; - @at-root #{selector-append(".dx-editor-filled", &)}, + @at-root #{selector.append(".dx-editor-filled", &)}, .dx-editor-filled & { background-color: $dropdowneditor-filled-button-active-bg; } @@ -160,15 +161,15 @@ $generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $gener &.dx-editor-filled { .dx-dropdowneditor-icon { - @at-root #{selector-append(".dx-state-hover", &)} { + @at-root #{selector.append(".dx-state-hover", &)} { background-color: $dropdowneditor-filled-button-invalid-hover-bg; } - @at-root #{selector-append(".dx-dropdowneditor-active", &)} { + @at-root #{selector.append(".dx-dropdowneditor-active", &)} { background-color: $dropdowneditor-filled-button-invalid-active-bg; } - @at-root #{selector-append(".dx-state-active", &)} { + @at-root #{selector.append(".dx-state-active", &)} { background-color: $dropdowneditor-filled-button-invalid-active-bg; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss index 5d1eba210f1f..9080dace5d55 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fieldset/_index.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -102,7 +103,7 @@ $generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding 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) { diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss index 9248fa51ed62..7bf81566fae0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_colors.scss @@ -24,8 +24,8 @@ $filemanager-progressbox-shadow-color: null !default; @if $color == "carmine" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-accent !default; @@ -34,7 +34,7 @@ $filemanager-progressbox-shadow-color: null !default; } @if $color == "contrast" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-bg: $base-text-color !default; $filemanager-dirs-tree-item-focus-color: $base-bg !default; $filemanager-file-item-hover-bg: $base-hover-color !default; @@ -44,8 +44,8 @@ $filemanager-progressbox-shadow-color: null !default; } @if $color == "dark" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-focus-bg !default; @@ -54,18 +54,18 @@ $filemanager-progressbox-shadow-color: null !default; } @if $color == "darkmoon" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-accent !default; $filemanager-item-focused-color: $base-inverted-text-color !default; - $filemanager-progressbox-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default; + $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default; } @if $color == "darkviolet" { - $filemanager-file-toolbar-bg: lighten($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-focus-bg !default; @@ -74,8 +74,8 @@ $filemanager-progressbox-shadow-color: null !default; } @if $color == "greenmist" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-accent !default; @@ -84,8 +84,8 @@ $filemanager-progressbox-shadow-color: null !default; } @if $color == "light" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-focus-bg !default; @@ -94,8 +94,8 @@ $filemanager-progressbox-shadow-color: null !default; } @if $color == "softblue" { - $filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; - $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default; + $filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-file-item-hover-bg: $base-hover-bg !default; $filemanager-file-item-focused-bg: $base-focus-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fileManager/_index.scss index 25c9c64e1ba0..1fde52c9e146 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileManager/_index.scss @@ -99,7 +99,8 @@ } .dx-filemanager-fileuploader-dropzone-placeholder { - border: 2px solid $base-accent; + border: 2px solid; + border-color: $base-accent; } .dx-filemanager-container { @@ -148,7 +149,8 @@ } &.dx-state-focused { - border: $filemanager-file-item-focused-border 1px solid; + border: 1px solid; + border-color: $filemanager-file-item-focused-border; } &.dx-item-selected.dx-state-focused { diff --git a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_colors.scss index c17a425c2112..6c753669d43d 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_colors.scss @@ -24,7 +24,7 @@ $fileuploader-falename-status-color: null !default; $fileuploader-border-color: $base-border-color !default; @if $color == "carmine" { - $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default; } @if $color == "contrast" { @@ -32,25 +32,25 @@ $fileuploader-border-color: $base-border-color !default; } @if $color == "dark" { - $fileuploader-falename-status-color: darken($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: -40%, $space: hsl) !default; } @if $color == "darkmoon" { - $fileuploader-falename-status-color: darken($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: -40%, $space: hsl) !default; } @if $color == "darkviolet" { - $fileuploader-falename-status-color: darken($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: -40%, $space: hsl) !default; } @if $color == "greenmist" { - $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default; } @if $color == "light" { - $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default; } @if $color == "softblue" { - $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default; + $fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss index 7b660c0709ba..5cac4e5eab9a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/fileUploader/_index.scss @@ -62,7 +62,8 @@ $generic-fileuploader-file-wrapper-border-size: 3px; .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors padding: $generic-fileuploader-vertical-padding * 2 $generic-fileuploader-vertical-padding + 2px; - border: $generic-fileuploader-file-wrapper-border-size dashed $fileuploader-border-color; + border: $generic-fileuploader-file-wrapper-border-size dashed; + border-color: $fileuploader-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/form/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/form/_colors.scss index 3195c5a7266e..921f9cbd74d0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/form/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/form/_colors.scss @@ -20,49 +20,49 @@ $form-field-mark-color: null !default; @if $color == "carmine" { $form-group-border-color: #edc1b9 !default; - $form-field-required-color: darken($base-danger, 10%) !default; - $form-field-mark-color: lighten($base-text-color, 55%) !default; + $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $form-field-mark-color: color.adjust($base-text-color, $lightness: 55%, $space: hsl) !default; } @if $color == "contrast" { $form-group-border-color: $base-border-color !default; - $form-field-required-color: saturate(darken($base-text-color, 40.8%), 80%) !default; + $form-field-required-color: color.adjust($base-text-color, $saturation: -40.8%, $lightness: 80%, $space: hsl) !default; $form-field-mark-color: $base-accent !default; } @if $color == "dark" { $form-group-border-color: $base-border-color !default; - $form-field-required-color: saturate(darken($form-field-item-color, 39.2%), 80%) !default; - $form-field-mark-color: darken($form-field-item-color, 48.5%) !default; + $form-field-required-color: color.adjust($form-field-item-color, $saturation: -39.2%, $lightness: 80%, $space: hsl) !default; + $form-field-mark-color: color.adjust($form-field-item-color, $lightness: -48.5%, $space: hsl) !default; } @if $color == "darkmoon" { $form-group-border-color: $base-icon-color !default; $form-field-required-color: $base-danger !default; - $form-field-mark-color: darken($base-text-color, 44%) !default; + $form-field-mark-color: color.adjust($base-text-color, $lightness: -44%, $space: hsl) !default; } @if $color == "darkviolet" { $form-group-border-color: $base-selected-border !default; - $form-field-required-color: darken($base-danger, 10%) !default; - $form-field-mark-color: darken($form-field-item-color, 48.5%) !default; + $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $form-field-mark-color: color.adjust($form-field-item-color, $lightness: -48.5%, $space: hsl) !default; } @if $color == "greenmist" { - $form-group-border-color: lighten($base-text-color, 38.5%) !default; - $form-field-required-color: darken($base-danger, 10%) !default; - $form-field-mark-color: lighten($base-text-color, 40%) !default; + $form-group-border-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; + $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $form-field-mark-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } @if $color == "light" { $form-group-border-color: $base-border-color !default; - $form-field-required-color: darken($base-danger, 10%) !default; - $form-field-mark-color: lighten($base-text-color, 48.5%) !default; + $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $form-field-mark-color: color.adjust($base-text-color, $lightness: 48.5%, $space: hsl) !default; } @if $color == "softblue" { - $form-group-border-color: darken($base-border-color, 7%) !default; // #e8eaeb => #d3d9de - $form-field-required-color: darken($base-danger, 10%) !default; - $form-field-mark-color: lighten($base-text-color, 55%) !default; + $form-group-border-color: color.adjust($base-border-color, $lightness: -7%, $space: hsl) !default; // #e8eaeb => #d3d9de + $form-field-required-color: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $form-field-mark-color: color.adjust($base-text-color, $lightness: 55%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/form/_index.scss b/packages/devextreme-scss/scss/widgets/generic/form/_index.scss index 7bc0c48e3a9d..a4c2d52366b5 100644 --- a/packages/devextreme-scss/scss/widgets/generic/form/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/form/_index.scss @@ -33,7 +33,8 @@ .dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors & > .dx-form-group-content { - border-top: 1px solid $form-group-border-color; + border-top: 1px solid; + border-top-color: $form-group-border-color; padding-bottom: $generic-form-group-content-padding-bottom; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/gallery/_colors.scss index 2c866ed2312f..fc410a2cf617 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gallery/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gallery/_colors.scss @@ -47,7 +47,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "carmine" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: darken($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; @@ -69,7 +69,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "dark" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: lighten($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: 15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; @@ -80,7 +80,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "darkmoon" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: lighten($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: 15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; @@ -91,7 +91,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "darkviolet" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: lighten($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: 15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; @@ -102,7 +102,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "greenmist" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: darken($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; @@ -113,7 +113,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "light" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: darken($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; @@ -124,7 +124,7 @@ $gallery-navbutton-border-radius: $base-border-radius - 4px !default; @if $color == "softblue" { $gallery-indicator-item-selected-bg: $base-accent !default; - $gallery-indicator-focused-bg: darken($base-accent, 15%) !default; + $gallery-indicator-focused-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $gallery-indicator-item-border-color: $base-accent !default; $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; $gallery-navbutton-degradation-bg: $gallery-indicator-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gallery/_index.scss index 91ae1aaeb61b..6ec92348fad0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gallery/_index.scss @@ -84,7 +84,8 @@ .dx-gallery-indicator-item { border-radius: 50%; box-sizing: border-box; - border: 1px solid $gallery-indicator-item-border-color; + border: 1px solid; + border-color: $gallery-indicator-item-border-color; pointer-events: auto; margin: 5px - math.div($generic-gallery-indicator-size, 2) 6px; width: $generic-gallery-indicator-size; @@ -97,7 +98,8 @@ width: $generic-gallery-indicator-selected-size; height: $generic-gallery-indicator-selected-size; background: $gallery-indicator-item-selected-bg; - border: 2px solid $gallery-indicator-selected-border-color; + border: 2px solid; + border-color: $gallery-indicator-selected-border-color; margin: 5px - math.div($generic-gallery-indicator-selected-size, 2) 6px; } diff --git a/packages/devextreme-scss/scss/widgets/generic/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/gantt/_colors.scss index 1613f8691e02..3ea2fa5eda64 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gantt/_colors.scss @@ -14,15 +14,15 @@ $gantt-icon-color: null !default; @if $color == "carmine" { - $gantt-collapsable-row-bg: darken($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default; $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.25) !default; $gantt-parent-task-bg: $base-success !default; - $gantt-icon-color: lighten($base-text-color, 20%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: 20%, $space: hsl) !default; } @if $color == "contrast" { - $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default; $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.3) !default; $gantt-parent-task-bg: $base-success !default; $gantt-icon-color: $base-text-color !default; @@ -30,49 +30,49 @@ $gantt-icon-color: null !default; @if $color == "dark" { - $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default; $gantt-selection-bg: $datagrid-selection-bg !default; $gantt-parent-task-bg: $base-success !default; - $gantt-icon-color: darken($base-text-color, 20%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: -20%, $space: hsl) !default; } @if $color == "darkmoon" { - $gantt-collapsable-row-bg: lighten($base-bg, 4%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 4%, $space: hsl) !default; $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.3) !default; $gantt-parent-task-bg: $base-danger !default; - $gantt-icon-color: darken($base-text-color, 20%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: -20%, $space: hsl) !default; } @if $color == "darkviolet" { - $gantt-collapsable-row-bg: lighten($base-bg, 4%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 4%, $space: hsl) !default; $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.3) !default; $gantt-parent-task-bg: $base-success !default; - $gantt-icon-color: darken($base-text-color, 20%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: -20%, $space: hsl) !default; } @if $color == "greenmist" { - $gantt-collapsable-row-bg: darken($base-bg, 4%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; $gantt-selection-bg: color.change($datagrid-selection-bg, $alpha: 0.25) !default; $gantt-parent-task-bg: $base-success !default; - $gantt-icon-color: lighten($base-text-color, 15%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: 15%, $space: hsl) !default; } @if $color == "light" { - $gantt-collapsable-row-bg: darken($base-bg, 4%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; $gantt-selection-bg: $datagrid-selection-bg !default; $gantt-parent-task-bg: $base-success !default; - $gantt-icon-color: lighten($base-text-color, 20%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: 20%, $space: hsl) !default; } @if $color == "softblue" { - $gantt-collapsable-row-bg: darken($base-bg, 4%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; $gantt-selection-bg: $datagrid-selection-bg !default; $gantt-parent-task-bg: $base-success !default; - $gantt-icon-color: lighten($base-text-color, 20%) !default; + $gantt-icon-color: color.adjust($base-text-color, $lightness: 20%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss index 17abda3102b0..75fe87573d87 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gantt/_index.scss @@ -15,11 +15,13 @@ $gantt-successor-background-color: white; .dx-gantt { - border: 1px solid $base-border-color; + border: 1px solid; + border-color: $base-border-color; .dx-gantt-toolbar-wrapper { padding: 5px; - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; .dx-gantt-toolbar-separator { border-left-color: $base-border-color; @@ -103,15 +105,18 @@ $gantt-successor-background-color: white; .dx-gantt-tsac, .dx-gantt-tsa { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; } .dx-gantt-hb { - border-top: 1px solid $base-border-color; + border-top: 1px solid; + border-top-color: $base-border-color; } .dx-gantt-vb { - border-left: 1px solid $base-border-color; + border-left: 1px solid; + border-left-color: $base-border-color; } .dx-gantt-taskWrapper { @@ -233,17 +238,19 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-frame { height: 100%; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); border-radius: $base-border-radius; .dx-gantt-task-edit-progress { - border-color: transparent transparent darken($base-accent, 10%) transparent; + border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; &::before { width: 12px; height: 6px; bottom: -14px; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); } } @@ -266,7 +273,8 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { background: $gantt-successor-background-color; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); width: $gantt-dependency-successor-size; height: $gantt-dependency-successor-size; margin: auto; @@ -290,8 +298,10 @@ $gantt-successor-background-color: white; .dx-gantt-sel { background-color: $gantt-selection-bg; - border-top: 1px solid $datagrid-selection-bg; - border-bottom: 1px solid $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; } .dx-gantt-tac-hb .dx-gantt-sel { @@ -307,16 +317,20 @@ $gantt-successor-background-color: white; } .dx-gantt-arrow { - border: 5px solid $base-text-color; + border: 5px solid; + border-color: $base-text-color; } .dx-gantt-tm { - border-left: 1px dashed $base-accent; + border-left: 1px dashed; + border-left-color: $base-accent; } .dx-gantt-ti { - border-left: 1px dashed $base-accent; - border-right: 1px dashed $base-accent; + border-left: 1px dashed; + border-left-color: $base-accent; + border-right: 1px dashed; + border-right-color: $base-accent; background-color: color.change($base-accent, $alpha: 0.15); } diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss index 67f41d890b50..05ef35777b31 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss @@ -22,7 +22,7 @@ $datagrid-base-background-color: $base-bg !default; * $type color */ $datagrid-border-color: $base-border-color !default; -$datagrid-border: 1px solid $datagrid-border-color !default; +$datagrid-border: 1px solid !default; /** * $name 20. Header text color @@ -205,7 +205,7 @@ $datagrid-draggable-column-text-color: null !default; @if $color == "carmine" { $datagrid-columnchooser-item-color: $base-label-color !default; - $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.7) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -213,29 +213,29 @@ $datagrid-draggable-column-text-color: null !default; $header-filter-color: $datagrid-columnchooser-item-color !default; $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default; $datagrid-selection-bg: $base-accent !default; - $datagrid-row-selected-border-color: lighten($base-accent, 9%) !default; - $datagrid-row-selected-color: lighten($datagrid-base-color, 100%) !default; + $datagrid-row-selected-border-color: color.adjust($base-accent, $lightness: 9%, $space: hsl) !default; + $datagrid-row-selected-color: color.adjust($datagrid-base-color, $lightness: 100%, $space: hsl) !default; $datagrid-row-focused-color: $base-inverted-text-color !default; - $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default; - $datagrid-hover-bg: darken($base-bg, 2%) !default; + $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default; + $datagrid-hover-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; $datagrid-nodata-color: $base-label-color !default; $datagrid-group-row-color: $base-label-color !default; - $datagrid-group-row-bg: darken($base-bg, 2%) !default; - $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default; - $datagrid-spin-icon-color: lighten($base-icon-color, 3%) !default; + $datagrid-group-row-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + $datagrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 3%, $space: hsl) !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-inverted-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, darken($base-accent, 15%), 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -15%, $space: hsl), 20%) !default; $datagrid-editor-bg: $datagrid-base-background-color !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-element-bg !default; - $datagrid-row-alternation-bg: darken($base-bg, 2%) !default; + $datagrid-row-alternation-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: $base-label-color !default; - $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/carmine/grid/text-stub.png') !default; @@ -279,7 +279,7 @@ $datagrid-draggable-column-text-color: null !default; $datagrid-summary-color: $base-text-color !default; $datagrid-columnchooser-message-color: $base-text-color !default; $datagrid-summary-bg: $base-bg !default; - $datagrid-column-separator-bg: darken($datagrid-base-background-color, 13.5%) !default; + $datagrid-column-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -13.5%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/contrast/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $base-accent !default; $datagrid-row-removed-bg: $base-accent !default; @@ -288,8 +288,8 @@ $datagrid-draggable-column-text-color: null !default; } @if $color == "dark" { - $datagrid-columnchooser-item-color: darken($datagrid-base-color, 26%) !default; - $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 6.5%) !default; + $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: -26%, $space: hsl) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -300,38 +300,38 @@ $datagrid-draggable-column-text-color: null !default; $datagrid-row-selected-border-color: $datagrid-border-color !default; $datagrid-row-selected-color: $datagrid-base-color !default; $datagrid-row-focused-color: $base-text-color !default; - $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default; - $datagrid-hover-bg: lighten($datagrid-base-background-color, 4%) !default; + $datagrid-row-focused-bg: color.mix($base-accent, $base-bg, 20%) !default; + $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; $datagrid-nodata-color: $datagrid-base-color !default; - $datagrid-group-row-color: lighten($datagrid-base-color, 6.7%) !default; - $datagrid-group-row-bg: lighten($datagrid-base-background-color, 3%) !default; - $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default; - $datagrid-spin-icon-color: darken($base-icon-color, 38.5%) !default; + $datagrid-group-row-color: color.adjust($datagrid-base-color, $lightness: 6.7%, $space: hsl) !default; + $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: 3%, $space: hsl) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; + $datagrid-spin-icon-color: color.adjust($base-icon-color, $lightness: -38.5%, $space: hsl) !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default; $datagrid-editor-bg: $datagrid-base-background-color !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-element-bg !default; - $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; - $datagrid-columnchooser-message-color: darken($datagrid-base-color, 26%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: -26%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/dark/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; - $datagrid-row-removed-bg: darken($datagrid-border-color, 6.67) !default; + $datagrid-row-removed-bg: color.adjust($datagrid-border-color, $lightness: -6.67%, $space: hsl) !default; $datagrid-cell-removed-text-color: color.change($base-text-color, $alpha: 0.7) !default; - $datagrid-draggable-column-text-color: darken($base-text-color, 40%) !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; } @if $color == "darkmoon" { $datagrid-columnchooser-item-color: $screen-text-color !default; - $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 6.5%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -342,38 +342,38 @@ $datagrid-draggable-column-text-color: null !default; $datagrid-row-selected-border-color: $base-grid-selected-border-color !default; $datagrid-row-selected-color: $base-bg !default; $datagrid-row-focused-color: $base-inverted-text-color !default; - $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default; - $datagrid-hover-bg: darken($base-bg, 2%) !default; + $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default; + $datagrid-hover-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; $datagrid-nodata-color: $base-icon-color !default; $datagrid-group-row-color: $base-text-color !default; - $datagrid-group-row-bg: lighten($base-bg, 3%) !default; - $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default; + $datagrid-group-row-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; $datagrid-spin-icon-color: $base-icon-color !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-inverted-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, darken($base-accent, 20%), 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -20%, $space: hsl), 20%) !default; $datagrid-editor-bg: $datagrid-base-background-color !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-element-bg !default; - $datagrid-row-alternation-bg: darken($base-bg, 2%) !default; + $datagrid-row-alternation-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; - $datagrid-columnchooser-message-color: darken($datagrid-base-color, 40%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: -40%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/darkmoon/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-border-color !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: darken($base-label-color, 17%) !default; + $datagrid-draggable-column-text-color: color.adjust($base-label-color, $lightness: -17%, $space: hsl) !default; } @if $color == "darkviolet" { - $datagrid-columnchooser-item-color: darken($datagrid-base-color, 38.5%) !default; - $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 6.5%) !default; + $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: -38.5%, $space: hsl) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent-highlight-color, $alpha: 0.8) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -384,38 +384,38 @@ $datagrid-draggable-column-text-color: null !default; $datagrid-row-selected-border-color: $base-selected-border !default; $datagrid-row-selected-color: $datagrid-base-color !default; $datagrid-row-focused-color: $base-inverted-text-color !default; - $datagrid-row-focused-bg: mix($base-bg, $base-accent, 15%) !default; + $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 15%) !default; $datagrid-hover-bg: $base-row-alternation-background !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; - $datagrid-nodata-color: darken($datagrid-base-color, 40%) !default; + $datagrid-nodata-color: color.adjust($datagrid-base-color, $lightness: -40%, $space: hsl) !default; $datagrid-group-row-color: $base-header-color !default; - $datagrid-group-row-bg: lighten($datagrid-base-background-color, 3%) !default; - $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default; + $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: 3%, $space: hsl) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; $datagrid-spin-icon-color: $base-header-color !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-inverted-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default; $datagrid-editor-bg: $datagrid-base-background-color !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-element-bg !default; $datagrid-row-alternation-bg: $base-row-alternation-background !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; - $datagrid-columnchooser-message-color: darken($datagrid-base-color, 40%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: -40%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/darkviolet/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-border-color !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: darken($base-text-color, 40%) !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; } @if $color == "greenmist" { - $datagrid-columnchooser-item-color: lighten($datagrid-base-color, 38.5%) !default; - $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default; + $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: 38.5%, $space: hsl) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -423,41 +423,41 @@ $datagrid-draggable-column-text-color: null !default; $header-filter-color: $datagrid-columnchooser-item-color !default; $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default; $datagrid-selection-bg: $base-link-color !default; - $datagrid-row-selected-border-color: lighten($base-accent, 14%) !default; - $datagrid-row-selected-color: lighten($base-text-color, 100%) !default; + $datagrid-row-selected-border-color: color.adjust($base-accent, $lightness: 14%, $space: hsl) !default; + $datagrid-row-selected-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default; $datagrid-row-focused-color: $base-inverted-text-color !default; - $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default; - $datagrid-hover-bg: darken($base-bg, 3%) !default; + $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default; + $datagrid-hover-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; - $datagrid-nodata-color: lighten($datagrid-base-color, 40%) !default; - $datagrid-group-row-color: lighten($datagrid-base-color, 38.5%) !default; + $datagrid-nodata-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default; + $datagrid-group-row-color: color.adjust($datagrid-base-color, $lightness: 38.5%, $space: hsl) !default; $datagrid-group-row-bg: $base-bg !default; - $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; $datagrid-spin-icon-color: $base-icon-color !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-inverted-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, darken($base-focus-bg, 15%), 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, color.adjust($base-focus-bg, $lightness: -15%, $space: hsl), 20%) !default; $datagrid-editor-bg: $base-bg !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-bg !default; - $datagrid-row-alternation-bg: darken($base-bg, 3%) !default; + $datagrid-row-alternation-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: $base-label-color !default; - $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/greenmist/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-border-color !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: lighten($base-label-color, 16%) !default; + $datagrid-draggable-column-text-color: color.adjust($base-label-color, $lightness: 16%, $space: hsl) !default; } @if $color == "light" { - $datagrid-columnchooser-item-color: lighten($datagrid-base-color, 26%) !default; - $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default; + $datagrid-columnchooser-item-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -468,38 +468,38 @@ $datagrid-draggable-column-text-color: null !default; $datagrid-row-selected-border-color: $datagrid-border-color !default; $datagrid-row-selected-color: $datagrid-base-color !default; $datagrid-row-focused-color: $base-text-color !default; - $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default; - $datagrid-hover-bg: darken($datagrid-base-background-color, 4%) !default; + $datagrid-row-focused-bg: color.mix($base-accent, $base-bg, 20%) !default; + $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; $datagrid-nodata-color: $datagrid-base-color !default; - $datagrid-group-row-color: darken($datagrid-base-color, 6.7%) !default; - $datagrid-group-row-bg: darken($datagrid-base-background-color, 3%) !default; - $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default; - $datagrid-spin-icon-color: lighten($base-icon-color, 38.5%) !default; + $datagrid-group-row-color: color.adjust($datagrid-base-color, $lightness: -6.7%, $space: hsl) !default; + $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: -3%, $space: hsl) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + $datagrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 38.5%, $space: hsl) !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-inverted-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default; $datagrid-editor-bg: $datagrid-base-background-color !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-element-bg !default; - $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 4%) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; - $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/light/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; - $datagrid-row-removed-bg: lighten($datagrid-border-color, 6.67) !default; + $datagrid-row-removed-bg: color.adjust($datagrid-border-color, $lightness: 6.67%, $space: hsl) !default; $datagrid-cell-removed-text-color: color.change($base-text-color, $alpha: 0.7) !default; - $datagrid-draggable-column-text-color: lighten($base-text-color, 40%) !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } @if $color == "softblue" { $datagrid-columnchooser-item-color: $base-icon-color !default; - $datagrid-block-separator-bg: darken($datagrid-base-background-color, 6.5%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -6.5%, $space: hsl) !default; $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; @@ -510,33 +510,33 @@ $datagrid-draggable-column-text-color: null !default; $datagrid-row-selected-border-color: $base-grid-selectedrow-border-color !default; $datagrid-row-selected-color: $datagrid-base-color !default; $datagrid-row-focused-color: $base-inverted-text-color !default; - $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default; - $datagrid-hover-bg: darken($datagrid-base-background-color, 2%) !default; + $datagrid-row-focused-bg: color.mix($base-bg, $base-accent, 20%) !default; + $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default; $datagrid-nodata-color: $base-icon-color !default; $datagrid-group-row-color: $base-icon-color !default; - $datagrid-group-row-bg: darken($datagrid-base-background-color, 2%) !default; - $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default; + $datagrid-group-row-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + $datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; $datagrid-spin-icon-color: $base-icon-color !default; $datagrid-search-bg: $base-accent !default; $datagrid-row-error-color: $base-inverted-text-color !default; - $datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; - $datagrid-focused-border-color: mix($base-bg, $base-focus-bg, 20%) !default; + $datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; + $datagrid-focused-border-color: color.mix($base-bg, $base-focus-bg, 20%) !default; $datagrid-editor-bg: $datagrid-base-background-color !default; $datagrid-drop-highlight-bg: $base-accent !default; $datagrid-columnchooser-bg: $base-element-bg !default; - $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 2%) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; $datagrid-summary-color: $base-icon-color !default; - $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default; + $datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 40%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/softblue/grid/text-stub.png') !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-border-color !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: lighten($base-text-color, 40%) !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss index 92c3e70f1ffd..c0e690f753b2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -26,14 +27,14 @@ $generic-grid-base-border-hidden: 1px solid transparent; $generic-grid-base-row-border: 1px solid transparent; $generic-grid-base-border-color: $datagrid-border-color; -$generic-grid-base-drag-header-border: 1px solid $datagrid-drag-header-border-color; +$generic-grid-base-drag-header-border: 1px solid; $generic-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; $generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; $generic-grid-base-checkbox-icon-size: 16px; $generic-grid-base-checkbox-indeterminate-icon-size: 6px; $grid-masterdetail-padding: 20px; $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height; -$generic-grid-base-cell-input-height: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding; +$generic-grid-base-cell-input-height: math.round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding; @mixin dx-set-checkbox-border-color-as-background() { @if $generic-color-postfix == ".contrast" { @@ -155,8 +156,10 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic } // T838734 - border-top: 1px solid $datagrid-row-alternation-bg; - border-bottom: 1px solid $datagrid-row-alternation-bg; + border-top: 1px solid; + border-top-color: $datagrid-row-alternation-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-alternation-bg; } .dx-link { @@ -165,11 +168,14 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-row-lines > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-column-lines > td { border-left: $datagrid-border; + border-left-color: $datagrid-border-color; border-right: $datagrid-border; + border-right-color: $datagrid-border-color; } .dx-error-row { @@ -274,7 +280,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-placeholder::before { padding-left: $generic-texteditor-icon-container-size; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { padding-right: $generic-texteditor-icon-container-size; } @@ -395,6 +401,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic color: $datagrid-columnchooser-item-color; font-weight: $datagrid-columnchooser-font-weight; border: $datagrid-border; + border-color: $datagrid-border-color; padding: $generic-grid-base-cell-padding; box-shadow: 0 1px 3px -1px $datagrid-columnchooser-shadow-color; } @@ -408,6 +415,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic font-weight: $datagrid-columnchooser-font-weight; padding: $generic-grid-base-cell-padding; border: $generic-grid-base-drag-header-border; + border-color: $datagrid-drag-header-border-color; background-color: $datagrid-header-drag-bg; } @@ -420,7 +428,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic } .dx-#{$widget-name}-focus-overlay { - border: 2px solid $datagrid-focused-border-color; + border: 2px solid; + border-color: $datagrid-focused-border-color; } .dx-#{$widget-name}-table { @@ -498,6 +507,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic right: 0; pointer-events: none; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-#{$widget-name}-table { @@ -507,6 +517,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-row > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } } } @@ -524,7 +535,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic color: $datagrid-menu-icon-color; &::after { - border: 2px solid $datagrid-focused-border-color; + border: 2px solid; + border-color: $datagrid-focused-border-color; } &.dx-menu-item-expanded { @@ -569,6 +581,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-#{$widget-name}-filter-range-overlay { .dx-overlay-content { border: $datagrid-border; + border-color: $datagrid-border-color; overflow: inherit; box-shadow: 2px 2px 3px $datagrid-overlay-content-shadow-color; @@ -589,7 +602,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic } &.dx-state-focused::after { - border: 2px solid $datagrid-focused-border-color; + border: 2px solid; + border-color: $datagrid-focused-border-color; } } } @@ -633,6 +647,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-#{$widget-name}-header-panel { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; .dx-toolbar { margin-bottom: $generic-grid-base-header-panel-margin-bottom; @@ -681,6 +696,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-#{$widget-name}-headers + &, &.dx-#{$widget-name}-after-headers { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; } .dx-row { @@ -694,11 +710,14 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic &.dx-edit-row:first-child > td { border-top-width: 0; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } &.dx-edit-row > td { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } &.dx-#{$widget-name}-edit-form { @@ -714,7 +733,9 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic > .dx-#{$widget-name}-group-space, .dx-master-detail-cell:not(.dx-row-lines) { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-texteditor-input { @@ -734,7 +755,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic &.dx-cell-modified, &.dx-#{$widget-name}-invalid { &::after { - border: 1px solid $datagrid-row-invalid-faded-border-color; + border: 1px solid; + border-color: $datagrid-row-invalid-faded-border-color; } } @@ -742,7 +764,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic &.dx-cell-modified, &.dx-#{$widget-name}-invalid { &::after { - border: 1px solid $datagrid-row-invalid-border-color; + border: 1px solid; + border-color: $datagrid-row-invalid-border-color; } } } @@ -766,8 +789,10 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-row-removed > td { background-color: $datagrid-row-removed-bg; - border-top: 1px solid $datagrid-cell-removed-border-color; - border-bottom: 1px solid $datagrid-cell-removed-border-color; + border-top: 1px solid; + border-top-color: $datagrid-cell-removed-border-color; + border-bottom: 1px solid; + border-bottom-color: $datagrid-cell-removed-border-color; color: $datagrid-cell-removed-text-color; } @@ -786,7 +811,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic } .dx-#{$widget-name}-invalid { - border: 1px solid $datagrid-row-invalid-faded-border-color; + border: 1px solid; + border-color: $datagrid-row-invalid-faded-border-color; &.dx-adaptive-item-text { padding-top: $generic-grid-base-adaptive-text-padding - 1px; @@ -798,7 +824,8 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-item-modified { border-radius: $base-border-radius; - border: 2px solid $datagrid-cell-modified-border-color; + border: 2px solid; + border-color: $datagrid-cell-modified-border-color; &.dx-adaptive-item-text { padding-top: $generic-grid-base-adaptive-text-padding - 2px; @@ -836,14 +863,17 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic & > td, & > tr:last-child > td { - border-bottom: 1px solid $datagrid-focused-border-color; + border-bottom: 1px solid; + border-bottom-color: $datagrid-focused-border-color; } &:not(.dx-row-lines) { & > td, & > tr:first-child > td { - border-top: 1px solid $datagrid-row-focused-bg; - border-bottom: 1px solid $datagrid-row-focused-bg; + border-top: 1px solid; + border-top-color: $datagrid-row-focused-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-focused-bg; } } } @@ -887,16 +917,20 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic &:not(.dx-row-lines) { & > td { - border-bottom: 1px solid $datagrid-selection-bg; - border-top: 1px solid $datagrid-selection-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; } & > tr:first-child > td { - border-top: 1px solid $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; } & > tr:last-child > td { - border-bottom: 1px solid $datagrid-selection-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; } } @@ -930,7 +964,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic padding: $generic-grid-base-cell-padding; padding-right: $generic-texteditor-invalid-badge-size; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { padding-left: $generic-texteditor-invalid-badge-size; padding-right: $generic-grid-base-cell-padding; @@ -978,6 +1012,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-#{$widget-name}-bottom-load-panel { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; background-color: $datagrid-base-background-color; } @@ -987,6 +1022,7 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-#{$widget-name}-total-footer { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; } .dx-#{$widget-name}-revert-tooltip { @@ -1001,9 +1037,9 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic @include dx-button-styling-variant( $button-danger-bg, $button-danger-border-color, $button-danger-color, - darken($button-danger-bg, 10%), - darken($button-danger-bg, 15%), - darken($button-danger-bg, 20%), + color.adjust($button-danger-bg, $lightness: -10%, $space: hsl), + color.adjust($button-danger-bg, $lightness: -15%, $space: hsl), + color.adjust($button-danger-bg, $lightness: -20%, $space: hsl), $button-danger-color, $button-danger-color ); @@ -1118,14 +1154,14 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic .dx-selection.dx-row:hover { & > td, & > tr > td { + border-right-color: $datagrid-row-selected-border-color; + &:not(.dx-focused) { &.dx-#{$widget-name}-group-space { border-left-color: $datagrid-selection-bg; } } - border-right-color: $datagrid-row-selected-border-color; - &.dx-pointer-events-none { border-left-color: $datagrid-row-selected-border-color; } diff --git a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss index 752ae3c544b5..8f3fb711bb84 100644 --- a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_colors.scss @@ -27,11 +27,11 @@ $htmleditor-cells-separator-bg: color.change($base-accent, $alpha: 0.5) !default @if $color == "carmine" { - $htmleditor-normal-format-active-bg: darken($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: darken($base-success, 10%) !default; - $htmleditor-mention-bg: darken($base-bg, 9%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @@ -45,56 +45,56 @@ $htmleditor-cells-separator-bg: color.change($base-accent, $alpha: 0.5) !default } @if $color == "dark" { - $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: darken($base-success, 10%) !default; - $htmleditor-mention-bg: lighten($base-bg, 13.5%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "darkmoon" { - $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: lighten($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: lighten($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: lighten($base-success, 10%) !default; - $htmleditor-mention-bg: lighten($base-bg, 13.5%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "darkviolet" { - $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: lighten($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: lighten($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: lighten($base-success, 10%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $htmleditor-mention-bg: $base-select-bg !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "greenmist" { - $htmleditor-normal-format-active-bg: lighten($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: lighten($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: lighten($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: lighten($base-success, 10%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: 10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: 10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: 10%, $space: hsl) !default; $htmleditor-mention-bg: $base-accent !default; - $htmleditor-mention-color: lighten($base-text-color, 100%) !default; + $htmleditor-mention-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default; } @if $color == "light" { - $htmleditor-normal-format-active-bg: darken($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: darken($base-success, 10%) !default; - $htmleditor-mention-bg: darken($base-bg, 13.5%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } @if $color == "softblue" { - $htmleditor-normal-format-active-bg: darken($base-element-bg, 10%) !default; - $htmleditor-default-format-active-bg: darken($base-accent, 10%) !default; - $htmleditor-danger-format-active-bg: darken($base-danger, 10%) !default; - $htmleditor-success-format-active-bg: darken($base-success, 10%) !default; - $htmleditor-mention-bg: darken($base-bg, 13.5%) !default; + $htmleditor-normal-format-active-bg: color.adjust($base-element-bg, $lightness: -10%, $space: hsl) !default; + $htmleditor-default-format-active-bg: color.adjust($base-accent, $lightness: -10%, $space: hsl) !default; + $htmleditor-danger-format-active-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; + $htmleditor-success-format-active-bg: color.adjust($base-success, $lightness: -10%, $space: hsl) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $htmleditor-mention-color: $base-text-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_index.scss index d96c34bb681d..7f68fff758cd 100644 --- a/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/htmlEditor/_index.scss @@ -23,7 +23,8 @@ position: relative; &:first-child { - border-bottom: 1px solid $htmleditor-toolbar-border-color; + border-bottom: 1px solid; + border-bottom-color: $htmleditor-toolbar-border-color; } } @@ -251,7 +252,8 @@ .dx-fileuploader-input-wrapper { padding: $generic-html-editor-add-image-dialog-fileuploader-padding; - border: $generic-fileuploader-file-wrapper-border-size dashed $base-border-color; + border: $generic-fileuploader-file-wrapper-border-size dashed; + border-color: $base-border-color; .dx-fileuploader-input-label { border-width: 0; diff --git a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss index c3a88222c327..d53b881cc30b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss @@ -9,57 +9,57 @@ $informer-info-color: null !default; $informer-info-background-color: null !default; @if $color == "carmine" { - $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 26.91), 5.49); - $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -347), 26.69), 33.14); + $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-info-color: $base-text-color; - $informer-info-background-color: lighten($base-text-color, 72.16); + $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); } @if $color == "contrast" { - $informer-error-color: darken(desaturate(adjust-hue($base-danger, 2), 16.93), 6.08); + $informer-error-color: color.adjust($base-danger, $hue: 2deg, $saturation: -16.93%, $space: hsl, $lightness: -6.08%); $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: darken($base-text-color, 12.94); - $informer-info-background-color: darken($base-text-color, 68.63);; + $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);; } @if $color == "dark" { $informer-error-color: $base-danger; $informer-error-background-color: rgba(212, 63, 58, 0.1); $informer-info-color: $base-text-color; - $informer-info-background-color: darken($base-text-color, 55.69) + $informer-info-background-color: color.adjust($base-text-color, $lightness: -55.69%, $space: hsl) } @if $color == "darkmoon" { - $informer-error-color: darken(desaturate(adjust-hue($base-danger, -342), 28.85), 6.67); + $informer-error-color: color.adjust($base-danger, $hue: -342deg, $saturation: -28.85%, $space: hsl, $lightness: -6.67%); $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: darken($base-text-color, 12.94); - $informer-info-background-color: darken($base-text-color, 68.63); + $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); } @if $color == "darkviolet" { $informer-error-color: $base-danger; $informer-error-background-color: rgba(212, 63, 58, 0.1); - $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 9.41); - $informer-info-background-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 65.10); + $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%); } @if $color == "greenmist" { - $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 27.05), 4.90); - $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -348), 26.83), 33.73); - $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -191), 32.77), 3.33); - $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -191), 32.77), 68.82) + $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%) } @if $color == "light" { $informer-error-color: $base-danger; - $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63); + $informer-error-background-color: color.adjust($base-danger, $hue: 4deg, $saturation: 0.22%, $space: hsl, $lightness: 38.63%); $informer-info-color: $base-text-color; - $informer-info-background-color: lighten($base-text-color, 72.16); + $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: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63); + $informer-error-background-color: color.adjust($base-danger, $hue: 4deg, $saturation: 0.22%, $space: hsl, $lightness: 38.63%); $informer-info-color: $base-text-color; - $informer-info-background-color: lighten($base-text-color, 72.16); + $informer-info-background-color: color.adjust($base-text-color, $lightness: 72.16%, $space: hsl); } diff --git a/packages/devextreme-scss/scss/widgets/generic/list/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/list/_colors.scss index 3e0c9a1f583a..0ebf895e87a4 100644 --- a/packages/devextreme-scss/scss/widgets/generic/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/list/_colors.scss @@ -84,7 +84,7 @@ $list-item-chevron-icon-color: $base-icon-color !default; @if $color == "carmine" { $list-group-color: $base-header-color !default; - $list-group-header-bg: darken($base-bg, 2%) !default; + $list-group-header-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default; // #f05b41 => #ffb5a8 $list-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default; @@ -97,9 +97,9 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: $base-accent !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: lighten($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } @@ -121,14 +121,14 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-holdmenu-shadow-color: $base-shadow-color !default; $list-item-ghost-color: $base-text-color !default; $list-item-ghost-border-color: $base-border-color !default; - $list-group-header-border-bottom: 1px solid $list-border-color !default; + $list-group-header-border-bottom: 1px solid !default; $list-group-header-default-padding-top: 10px !default; $list-group-header-compact-padding-top: 5px !default; } @if $color == "dark" { $list-group-color: $list-normal-color !default; - $list-group-header-bg: color.change(lighten($base-bg, 6.5%), $alpha: 0.05) !default; + $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: 6.5%, $space: hsl), $alpha: 0.05) !default; $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: $base-select-bg !default; $list-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default; @@ -141,16 +141,16 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: $base-accent !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: darken($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } @if $color == "darkmoon" { $list-group-color: $list-normal-color !default; - $list-group-header-bg: color.change(darken($base-bg, 37%), $alpha: 0) !default; + $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: -37%, $space: hsl), $alpha: 0) !default; $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: $base-select-bg !default; $list-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default; @@ -163,16 +163,16 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: $base-accent !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: darken($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } @if $color == "darkviolet" { $list-group-color: $base-header-color !default; - $list-group-header-bg: color.change(lighten($base-bg, 6.5%), $alpha: 0.05) !default; + $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: 6.5%, $space: hsl), $alpha: 0.05) !default; $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default; $list-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default; @@ -185,16 +185,16 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: #b88fff !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: darken($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } @if $color == "greenmist" { $list-group-color: $base-accent !default; - $list-group-header-bg: color.change(darken($base-bg, 6.5%), $alpha: 0.05) !default; + $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: -6.5%, $space: hsl), $alpha: 0.05) !default; $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: $base-select-bg !default; $list-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default; @@ -207,16 +207,16 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: $base-accent !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: lighten($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } @if $color == "light" { $list-group-color: $list-normal-color !default; - $list-group-header-bg: color.change(darken($base-bg, 6.5%), $alpha: 0.05) !default; + $list-group-header-bg: color.change(color.adjust($base-bg, $lightness: -6.5%, $space: hsl), $alpha: 0.05) !default; $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: $base-select-bg !default; $list-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default; @@ -229,16 +229,16 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: $base-accent !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: lighten($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } @if $color == "softblue" { $list-group-color: $base-icon-color !default; - $list-group-header-bg: darken($base-bg, 2%) !default; // #fff => #fafbfc + $list-group-header-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; // #fff => #fafbfc $list-item-hover-bg: $base-hover-bg !default; $list-item-selected-bg: $base-select-bg !default; $list-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default; @@ -251,9 +251,9 @@ $list-item-chevron-icon-color: $base-icon-color !default; $list-item-active-bg: $base-accent !default; $list-holdmenu-border-color: $list-border-color !default; $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $list-item-ghost-color: lighten($base-text-color, 38.5%) !default; + $list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; - $list-group-header-border-bottom: 2px solid $list-border-color !default; + $list-group-header-border-bottom: 2px solid !default; $list-group-header-default-padding-top: 20px !default; $list-group-header-compact-padding-top: 10px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss index 5f09ae266826..023035e1fba7 100644 --- a/packages/devextreme-scss/scss/widgets/generic/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/list/_index.scss @@ -15,9 +15,9 @@ // adduse @use "../badge"; -$generic-list-border: $generic-list-border-width solid $list-border-color; -$generic-list-item-border: $generic-list-item-border-width solid $list-border-color; -$generic-list-search-editor-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width; +$generic-list-border: $generic-list-border-width solid; +$generic-list-item-border: $generic-list-item-border-width solid; +$generic-list-search-editor-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width; .dx-list-item-chevron { @include dx-icon(chevronnext); @@ -136,7 +136,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b border: none; &.dx-list-with-search .dx-scrollable-wrapper { - height: calc(100% - #{round($generic-list-search-editor-height + $generic-list-searchbox-margin-bottom)}); + height: calc(100% - #{math.round($generic-list-search-editor-height + $generic-list-searchbox-margin-bottom)}); } &.dx-list-select-decorator-enabled { @@ -152,7 +152,8 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b &.dx-state-focused { .dx-radiobutton-icon, .dx-checkbox-icon { - border: 1px solid $checkbox-border-color-focused; + border: 1px solid; + border-color: $checkbox-border-color-focused; } } } @@ -173,7 +174,9 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b font-weight: bold; padding: $generic-list-group-header-vertical-padding $item-horizontal-padding $generic-list-item-vertical-padding $item-horizontal-padding; border-top: $generic-list-item-border; + border-top-color: $list-border-color; border-bottom: $list-group-header-border-bottom; + border-bottom-color: $list-border-color; background: $list-group-header-bg; color: $list-group-color; display: flex; @@ -229,8 +232,10 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b &.dx-state-hover { color: $list-item-ghost-color; background: $list-item-ghost-bg; - border-top: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5); - border-bottom: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5); + border-top: 1px solid; + border-top-color: color.change($list-item-ghost-border-color, $alpha: 0.5); + border-bottom: 1px solid; + border-bottom-color: color.change($list-item-ghost-border-color, $alpha: 0.5); box-shadow: 0 0 1px color.change($list-item-ghost-shadow-color, $alpha: 0.1), 0 1px 3px color.change($list-item-ghost-shadow-color, $alpha: 0.2); } } @@ -240,6 +245,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b .dx-list-item, .dx-list .dx-empty-message { border-top: $generic-list-item-border; + border-top-color: $list-border-color; color: $list-normal-color; .dx-list-item-separator-hidden & { @@ -265,9 +271,11 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b .dx-list-border-visible { border: $generic-list-border; + border-color: $list-border-color; .dx-list-select-all { border-bottom: $generic-list-border; + border-bottom-color: $list-border-color; } } @@ -317,6 +325,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b .dx-list-select-all { padding: $generic-list-item-vertical-padding - 1px 0 $generic-list-item-vertical-padding - 2px; border-bottom: $generic-list-item-border; + border-bottom-color: $list-border-color; } .dx-list-select-all-checkbox { @@ -375,7 +384,8 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b .dx-list-context-menucontent { background-color: $list-holdmenu-bg; - border: 1px solid $list-holdmenu-border-color; + border: 1px solid; + border-color: $list-holdmenu-border-color; border-radius: 0; box-shadow: 0 3px 10px $list-holdmenu-shadow-color; } diff --git a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss index 98e159706eef..7a3cdbddfe96 100644 --- a/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/loadIndicator/_colors.scss @@ -18,63 +18,63 @@ $load-indicator-animation-sparkle-bg-color3: null !default; $loadindicator-bg: $base-accent !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: lighten(desaturate($base-accent, 8.58), 27.06) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !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; } @if $color == "contrast" { $loadindicator-bg: $base-inverted-bg !default; $loadindicator-segment-shadow-color: $base-shadow-color !default; $load-indicator-animation-sparkle-bg-color1: $base-accent !default; - $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default; - $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !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; } @if $color == "dark" { - $loadindicator-bg: darken($base-text-color, 17.5%) !default; + $loadindicator-bg: color.adjust($base-text-color, $lightness: -17.5%, $space: hsl) !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: darken(desaturate($base-accent, 25.83), 19.61) !default; - $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !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; } @if $color == "darkmoon" { $loadindicator-bg: $base-accent !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: darken(desaturate($base-accent, 25.83), 19.61) !default; - $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !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; } @if $color == "darkviolet" { $loadindicator-bg: $base-accent-highlight-color !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: darken(desaturate($base-accent, 25.83), 19.61) !default; - $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !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; } @if $color == "greenmist" { - $loadindicator-bg: lighten($base-text-color, 17.5%) !default; + $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !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: lighten(desaturate($base-accent, 8.58), 27.06) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !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; } @if $color == "light" { - $loadindicator-bg: lighten($base-text-color, 17.5%) !default; + $loadindicator-bg: color.adjust($base-text-color, $lightness: 17.5%, $space: hsl) !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: lighten(desaturate($base-accent, 8.58), 27.06) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !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; } @if $color == "softblue" { $loadindicator-bg: $base-accent !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: lighten(desaturate($base-accent, 8.58), 27.06) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !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; } diff --git a/packages/devextreme-scss/scss/widgets/generic/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/generic/loadPanel/_index.scss index 30710e925a35..5c1ea84a7c41 100644 --- a/packages/devextreme-scss/scss/widgets/generic/loadPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/loadPanel/_index.scss @@ -10,7 +10,8 @@ .dx-loadpanel-content { - border: 1px solid $loadpanel-border-color; + border: 1px solid; + border-color: $loadpanel-border-color; background: $loadpanel-content-bg; border-radius: $loadpanel-content-border-radius; box-shadow: 0 6px 12px $loadpanel-content-shadow-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/menu/_colors.scss index bf58aa3d5dd5..c2f4820d2ebc 100644 --- a/packages/devextreme-scss/scss/widgets/generic/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/menu/_colors.scss @@ -58,7 +58,7 @@ $menu-container-shadow-color: null !default; $menu-item-focused-bg: $base-focus-bg !default; $menu-item-hovered-color: $menu-color !default; $menu-item-expanded-color: $menu-color !default; - $menu-item-selected-bg: lighten($base-accent, 21%) !default; // #f05b41 => #ffb5a8 + $menu-item-selected-bg: color.adjust($base-accent, $lightness: 21%, $space: hsl) !default; // #f05b41 => #ffb5a8 $menu-item-selected-color: $base-text-color !default; $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default; $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.15) !default; @@ -81,7 +81,7 @@ $menu-container-shadow-color: null !default; $menu-item-hover-bg: $base-hover-bg !default; $menu-item-hovered-color: $menu-color !default; $menu-item-expanded-color: $menu-color !default; - $menu-item-selected-bg: lighten($base-bg, 10%) !default; + $menu-item-selected-bg: color.adjust($base-bg, $lightness: 10%, $space: hsl) !default; $menu-item-selected-color: $base-text-color !default; $menu-item-focused-bg: $base-focus-bg !default; $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default; @@ -93,7 +93,7 @@ $menu-container-shadow-color: null !default; $menu-item-hover-bg: $base-hover-bg !default; $menu-item-hovered-color: $base-hover-color !default; $menu-item-expanded-color: $menu-color !default; - $menu-item-selected-bg: lighten($base-bg, 10%) !default; + $menu-item-selected-bg: color.adjust($base-bg, $lightness: 10%, $space: hsl) !default; $menu-item-selected-color: $base-text-color !default; $menu-item-focused-bg: $base-focus-bg !default; $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default; @@ -113,11 +113,11 @@ $menu-container-shadow-color: null !default; } @if $color == "greenmist" { - $menu-popup-bg: lighten($base-bg, 100%) !default; + $menu-popup-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $menu-item-hover-bg: $base-hover-bg !default; $menu-item-hovered-color: $menu-color !default; $menu-item-expanded-color: $menu-color !default; - $menu-item-selected-bg: darken($base-bg, 10%) !default; + $menu-item-selected-bg: color.adjust($base-bg, $lightness: -10%, $space: hsl) !default; $menu-item-selected-color: $base-text-color !default; $menu-item-focused-bg: $base-focus-bg !default; $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default; @@ -130,7 +130,7 @@ $menu-container-shadow-color: null !default; $menu-item-focused-bg: $base-focus-bg !default; $menu-item-hovered-color: $menu-color !default; $menu-item-expanded-color: $menu-color !default; - $menu-item-selected-bg: darken($base-bg, 10%) !default; + $menu-item-selected-bg: color.adjust($base-bg, $lightness: -10%, $space: hsl) !default; $menu-item-selected-color: $base-text-color !default; $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default; $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.15) !default; @@ -141,7 +141,7 @@ $menu-container-shadow-color: null !default; $menu-item-hover-bg: $base-hover-bg !default; $menu-item-hovered-color: $menu-color !default; $menu-item-expanded-color: $menu-color !default; - $menu-item-selected-bg: darken($base-bg, 10%) !default; + $menu-item-selected-bg: color.adjust($base-bg, $lightness: -10%, $space: hsl) !default; $menu-item-selected-color: $base-text-color !default; $menu-item-focused-bg: $base-focus-bg !default; $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss b/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss index fd7c60cecb4c..ee233c2dbe48 100644 --- a/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/menu/_index.scss @@ -14,6 +14,7 @@ .dx-context-menu-container-border { background-color: transparent; border: $generic-menu-popup-border; + border-color: $menu-popup-border-color; box-shadow: 0 1px 1px $menu-container-shadow-color; } @@ -85,7 +86,8 @@ background-color: $menu-popup-bg; .dx-treeview { - border: 1px solid $menu-popup-border-color; + border: 1px solid; + border-color: $menu-popup-border-color; border-radius: $base-border-radius; &, @@ -111,6 +113,7 @@ } .dx-treeview-node-container:first-child > .dx-treeview-node { - border-bottom: 1px solid $menu-popup-border-color; + border-bottom: 1px solid; + border-bottom-color: $menu-popup-border-color } } diff --git a/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss index 2ea268d929ea..c3abfedcd85a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/menuBase/_index.scss @@ -15,7 +15,7 @@ $generic-menu-item-padding-increased: $generic-menu-item-padding-base + 2px; $generic-menu-item-padding-reduced: $generic-menu-item-padding-base - 2px; $generic-menu-arrow-image-size: 7px; -$generic-menu-popup-border: 1px solid $menu-popup-border-color; +$generic-menu-popup-border: 1px solid; .dx-menu-item { diff --git a/packages/devextreme-scss/scss/widgets/generic/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/numberBox/_colors.scss index 59c17234f365..8085962f7476 100644 --- a/packages/devextreme-scss/scss/widgets/generic/numberBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/numberBox/_colors.scss @@ -29,10 +29,10 @@ $numberbox-spin-icon-color: $base-icon-color !default; @if $color == "carmine" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } @if $color == "contrast" { @@ -43,43 +43,43 @@ $numberbox-spin-icon-color: $base-icon-color !default; } @if $color == "dark" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } @if $color == "darkmoon" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } @if $color == "darkviolet" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } @if $color == "greenmist" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } @if $color == "light" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } @if $color == "softblue" { - $numberbox-spin-active-bg: darken($button-normal-bg, 30%) !default; + $numberbox-spin-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; $numberbox-spin-active-color: $base-text-color !default; $numberbox-spin-hover-border-color: transparent !default; - $numberbox-spin-hover-bg: darken($button-normal-bg, 10%) !default; + $numberbox-spin-hover-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/overlay/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/overlay/_colors.scss index 88fe95dbef99..b58c9e515a40 100644 --- a/packages/devextreme-scss/scss/widgets/generic/overlay/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/overlay/_colors.scss @@ -41,7 +41,7 @@ $overlay-content-border-radius: $base-border-radius + 2px !default; } @if $color == "darkmoon" { - $overlay-content-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default; + $overlay-content-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default; $overlay-shader-bg: color.change($base-bg, $alpha: 0.8) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss index 43ed2535c5d0..d2b99bdfec84 100644 --- a/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/pagination/_colors.scss @@ -20,10 +20,10 @@ $pagination-page-border-radius: $base-border-radius - 1px !default; $pagination-outline-color: null !default; @if $color == "carmine" { - $pagination-page-selected-color: lighten($base-text-color, 100%) !default; + $pagination-page-selected-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default; $pagination-page-selected-bg: $base-accent !default; $pagination-page-selected-border-color: transparent !default; - $pagination-outline-color: mix($base-bg, darken($base-accent, 15%), 20%) !default; + $pagination-outline-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -15%, $space: hsl), 20%) !default; } @if $color == "contrast" { @@ -35,42 +35,42 @@ $pagination-outline-color: null !default; @if $color == "dark" { $pagination-page-selected-color: $base-text-color !default; - $pagination-page-selected-bg: lighten($base-bg, 17%) !default; + $pagination-page-selected-bg: color.adjust($base-bg, $lightness: 17%, $space: hsl) !default; $pagination-page-selected-border-color: transparent !default; - $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; + $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default; } @if $color == "darkmoon" { $pagination-page-selected-color: $base-bg !default; $pagination-page-selected-bg: $base-accent !default; $pagination-page-selected-border-color: transparent !default; - $pagination-outline-color: mix($base-bg, darken($base-accent, 20%), 20%) !default; + $pagination-outline-color: color.mix($base-bg, color.adjust($base-accent, $lightness: -20%, $space: hsl), 20%) !default; } @if $color == "darkviolet" { - $pagination-page-selected-bg: lighten($base-bg, 17%) !default; + $pagination-page-selected-bg: color.adjust($base-bg, $lightness: 17%, $space: hsl) !default; $pagination-page-selected-border-color: transparent !default; $pagination-page-selected-color: $base-text-color !default; - $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; + $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default; } @if $color == "greenmist" { $pagination-page-selected-bg: $base-link-color !default; $pagination-page-selected-border-color: transparent !default; - $pagination-page-selected-color: lighten($base-text-color, 100%) !default; - $pagination-outline-color: mix($base-bg, darken($base-focus-bg, 15%), 20%) !default; + $pagination-page-selected-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default; + $pagination-outline-color: color.mix($base-bg, color.adjust($base-focus-bg, $lightness: -15%, $space: hsl), 20%) !default; } @if $color == "light" { $pagination-page-selected-color: $base-text-color !default; - $pagination-page-selected-bg: darken($base-bg, 17%) !default; + $pagination-page-selected-bg: color.adjust($base-bg, $lightness: -17%, $space: hsl) !default; $pagination-page-selected-border-color: transparent !default; - $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; + $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default; } @if $color == "softblue" { $pagination-page-selected-color: $base-text-color !default; $pagination-page-selected-bg: $base-border-color !default; $pagination-page-selected-border-color: transparent !default; - $pagination-outline-color: mix($base-bg, $base-focus-bg, 20%) !default; + $pagination-outline-color: color.mix($base-bg, $base-focus-bg, 20%) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss index a1d3edfcf57c..3f56d9618b37 100644 --- a/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/pagination/_index.scss @@ -13,7 +13,8 @@ .dx-pagination { padding-top: $generic-pagination-paddings; padding-bottom: $generic-pagination-paddings; - border-top: 1px solid $base-border-color; + border-top: 1px solid; + border-top-color: $base-border-color; .dx-page, .dx-page-size, @@ -25,7 +26,8 @@ .dx-page:focus, .dx-page-size:focus, .dx-navigate-button:focus { - outline: 2px solid $pagination-outline-color; + outline: 2px solid; + outline-color: $pagination-outline-color; outline-offset: -2px; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_colors.scss index 4cb930cd0d66..e2f35c3f2409 100644 --- a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_colors.scss @@ -45,15 +45,15 @@ $pivotgrid-spin-icon-color: null !default; @if $color == "carmine" { $pivotgrid-area-color: $base-header-color !default; - $pivotgrid-totalcolor: darken($pivotgrid-area-background, 2.7%) !default; - $pivotgrid-grandtotalcolor: darken($pivotgrid-area-background, 4%) !default; - $pivotgrid-field-area-text-color: darken($pivotgrid-area-color, 26.2%) !default; + $pivotgrid-totalcolor: color.adjust($pivotgrid-area-background, $lightness: -2.7%, $space: hsl) !default; + $pivotgrid-grandtotalcolor: color.adjust($pivotgrid-area-background, $lightness: -4%, $space: hsl) !default; + $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $pivotgrid-position-indicator-color: gray !default; - $pivotgrid-spin-icon-color: lighten($base-icon-color, 3%) !default; + $pivotgrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 3%, $space: hsl) !default; } @if $color == "contrast" { @@ -70,23 +70,23 @@ $pivotgrid-spin-icon-color: null !default; } @if $color == "dark" { - $pivotgrid-area-color: darken($base-text-color, 30%) !default; - $pivotgrid-totalcolor: lighten($pivotgrid-area-background, 2.5%) !default; + $pivotgrid-area-color: color.adjust($base-text-color, $lightness: -30%, $space: hsl) !default; + $pivotgrid-totalcolor: color.adjust($pivotgrid-area-background, $lightness: 2.5%, $space: hsl) !default; $pivotgrid-grandtotalcolor: $base-hover-bg !default; - $pivotgrid-field-area-text-color: lighten($pivotgrid-area-color, 26.2%) !default; + $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: 26.2%, $space: hsl) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $pivotgrid-position-indicator-color: gray !default; - $pivotgrid-spin-icon-color: darken($base-icon-color, 38%) !default; + $pivotgrid-spin-icon-color: color.adjust($base-icon-color, $lightness: -38%, $space: hsl) !default; } @if $color == "darkmoon" { $pivotgrid-area-color: $screen-text-color !default; - $pivotgrid-totalcolor: darken($base-bg, 2%) !default; // #465672 => #40506b + $pivotgrid-totalcolor: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; // #465672 => #40506b $pivotgrid-grandtotalcolor: $base-hover-bg !default; - $pivotgrid-field-area-text-color: lighten($pivotgrid-area-color, 26.2%) !default; + $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: 26.2%, $space: hsl) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; @@ -96,10 +96,10 @@ $pivotgrid-spin-icon-color: null !default; } @if $color == "darkviolet" { - $pivotgrid-area-color: darken($base-text-color, 30%) !default; + $pivotgrid-area-color: color.adjust($base-text-color, $lightness: -30%, $space: hsl) !default; $pivotgrid-totalcolor: #1f1f2b !default; $pivotgrid-grandtotalcolor: color.change($base-accent-highlight-color, $alpha: 0.15) !default; - $pivotgrid-field-area-text-color: lighten($pivotgrid-area-color, 26.2%) !default; + $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: 26.2%, $space: hsl) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; @@ -109,9 +109,9 @@ $pivotgrid-spin-icon-color: null !default; } @if $color == "greenmist" { - $pivotgrid-area-color: lighten($base-text-color, 38.5%) !default; - $pivotgrid-totalcolor: darken($base-bg, 1%) !default; // #f5f5f5 => #f0f2f2 - $pivotgrid-grandtotalcolor: lighten($base-label-color, 40.6%) !default; // #728e94 => #e8eded + $pivotgrid-area-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; + $pivotgrid-totalcolor: color.adjust($base-bg, $lightness: -1%, $space: hsl) !default; // #f5f5f5 => #f0f2f2 + $pivotgrid-grandtotalcolor: color.adjust($base-label-color, $lightness: 40.6%, $space: hsl) !default; // #728e94 => #e8eded $pivotgrid-field-area-text-color: $base-text-color !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; @@ -122,23 +122,23 @@ $pivotgrid-spin-icon-color: null !default; } @if $color == "light" { - $pivotgrid-area-color: lighten($base-text-color, 38.5%) !default; - $pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 13.3%), $alpha: 0.2) !default; - $pivotgrid-grandtotalcolor: darken($base-bg, 4%) !default; - $pivotgrid-field-area-text-color: darken($pivotgrid-area-color, 26.2%) !default; + $pivotgrid-area-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; + $pivotgrid-totalcolor: color.change(color.adjust($pivotgrid-area-background, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default; + $pivotgrid-grandtotalcolor: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; + $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $pivotgrid-position-indicator-color: gray !default; - $pivotgrid-spin-icon-color: lighten($base-icon-color, 38.5%) !default; + $pivotgrid-spin-icon-color: color.adjust($base-icon-color, $lightness: 38.5%, $space: hsl) !default; } @if $color == "softblue" { $pivotgrid-area-color: $base-icon-color !default; - $pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 4%), $alpha: 0.7) !default; // #fff => #f5f5f5 - $pivotgrid-grandtotalcolor: darken($base-bg, 4%) !default; // #fff => #f5f5f5 - $pivotgrid-field-area-text-color: darken($pivotgrid-area-color, 26.2%) !default; + $pivotgrid-totalcolor: color.change(color.adjust($pivotgrid-area-background, $lightness: -4%, $space: hsl), $alpha: 0.7) !default; // #fff => #f5f5f5 + $pivotgrid-grandtotalcolor: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; // #fff => #f5f5f5 + $pivotgrid-field-area-text-color: color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/popover/_index.scss b/packages/devextreme-scss/scss/widgets/generic/popover/_index.scss index 209eeb233511..95770abbb870 100644 --- a/packages/devextreme-scss/scss/widgets/generic/popover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/popover/_index.scss @@ -27,5 +27,6 @@ } .dx-popover-arrow::after { - border: 1px solid $texteditor-border-color; + border: 1px solid; + border-color: $texteditor-border-color; } diff --git a/packages/devextreme-scss/scss/widgets/generic/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/popup/_colors.scss index 79089900da3c..ab4c24c74736 100644 --- a/packages/devextreme-scss/scss/widgets/generic/popup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/popup/_colors.scss @@ -36,7 +36,7 @@ $popup-border-radius: $overlay-content-border-radius !default; } @if $color == "greenmist" { - $popup-title-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default; + $popup-title-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default; } @if $color == "light" { diff --git a/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss b/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss index 060daab8e705..11657b839391 100644 --- a/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/popup/_index.scss @@ -21,7 +21,8 @@ $generic-popup-toolbar-label-font-size: $generic-m-font-size; .dx-popup-wrapper { & > .dx-overlay-content { - border: 1px solid $overlay-border-color; + border: 1px solid; + border-color: $overlay-border-color; background: $overlay-content-bg; box-shadow: 0 6px 12px $overlay-content-shadow-color; border-radius: $popup-border-radius; @@ -33,7 +34,8 @@ $generic-popup-toolbar-label-font-size: $generic-m-font-size; .dx-state-focused { &.dx-overlay-content { - border: 1px solid $base-accent; + border: 1px solid; + border-color: $base-accent; } } } @@ -41,7 +43,8 @@ $generic-popup-toolbar-label-font-size: $generic-m-font-size; .dx-popup-title { position: relative; min-height: 28px; - border-bottom: 1px solid $popup-title-border-color; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; background: $popup-title-bg; color: $popup-title-color; diff --git a/packages/devextreme-scss/scss/widgets/generic/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/progressBar/_colors.scss index 113cac770a7f..39397790a857 100644 --- a/packages/devextreme-scss/scss/widgets/generic/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/progressBar/_colors.scss @@ -22,7 +22,7 @@ $progressbar-range-disabled-bg: color.change($base-accent, $alpha: 0.6) !default $progressbar-range-indeterminate-color: $base-accent !default; @if $color == "carmine" { - $progressbar-bg: darken($base-bg, 13.5%) !default; + $progressbar-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $progressbar-border-color: $base-border-color !default; } @@ -32,7 +32,7 @@ $progressbar-range-indeterminate-color: $base-accent !default; } @if $color == "dark" { - $progressbar-bg: lighten($base-bg, 13.5%) !default; + $progressbar-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; $progressbar-border-color: $base-border-color !default; } @@ -42,22 +42,22 @@ $progressbar-range-indeterminate-color: $base-accent !default; } @if $color == "darkviolet" { - $progressbar-bg: lighten($base-bg, 13.5%) !default; + $progressbar-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; $progressbar-border-color: $base-border-color !default; } @if $color == "greenmist" { - $progressbar-bg: darken($base-bg, 9%) !default; + $progressbar-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default; $progressbar-border-color: $base-border-color !default; } @if $color == "light" { - $progressbar-bg: darken($base-bg, 13.5%) !default; + $progressbar-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $progressbar-border-color: $base-border-color !default; } @if $color == "softblue" { - $progressbar-bg: darken($base-bg, 13.5%) !default; + $progressbar-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; $progressbar-border-color: $base-border-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss index 6b85b95ac913..54b363282ec0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/progressBar/_index.scss @@ -13,11 +13,12 @@ $generic-bar-height: 6px; $generic-background-width: 90%; $generic-progressbar-border-radius: 2px; $generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; -$generic-progress-bar-border: 1px solid $progressbar-border-color; +$generic-progress-bar-border: 1px solid; .dx-progressbar-container { height: $generic-bar-height; border: $generic-progress-bar-border; + border-color: $progressbar-border-color; background-color: $progressbar-bg; border-radius: $generic-progressbar-border-radius; } @@ -32,7 +33,8 @@ $generic-progress-bar-border: 1px solid $progressbar-border-color; .dx-progressbar-range { position: relative; - border: 1px solid $progressbar-range-border-color; + border: 1px solid; + border-color: $progressbar-range-border-color; background-color: $progressbar-range-bg; margin-top: -1px; box-sizing: content-box; @@ -45,6 +47,7 @@ $generic-progress-bar-border: 1px solid $progressbar-border-color; background-color: $progressbar-bg; background-size: $generic-background-width 5px; border: $generic-progress-bar-border; + border-color: $progressbar-border-color; border-radius: $generic-progressbar-border-radius; animation: dx-loader 2s linear infinite; diff --git a/packages/devextreme-scss/scss/widgets/generic/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/radioGroup/_colors.scss index f84036e6e223..38b325987794 100644 --- a/packages/devextreme-scss/scss/widgets/generic/radioGroup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/radioGroup/_colors.scss @@ -27,10 +27,10 @@ $radiogroup-readonly-border-color: null !default; @if $color == "carmine" { $radiogroup-checked-bg: $base-accent !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default; + $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default; } @if $color == "contrast" { @@ -39,60 +39,60 @@ $radiogroup-readonly-border-color: null !default; $radiobutton-active-bg: $base-inverted-bg !default; $radiogroup-hover-border-color: $base-border-color !default; $radiobutton-focused-border-color: $base-focus-color !default; - $radiogroup-readonly-border-color: darken($radiogroup-border-color, 50%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -50%, $space: hsl) !default; } @if $color == "dark" { $radiogroup-checked-bg: $base-accent !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default; + $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: darken($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -9%, $space: hsl) !default; } @if $color == "darkmoon" { $radiogroup-checked-bg: $base-accent !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default; + $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: darken($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -9%, $space: hsl) !default; } @if $color == "darkviolet" { $radiogroup-checked-bg: $base-accent-highlight-color !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default; + $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: darken($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: -9%, $space: hsl) !default; } @if $color == "greenmist" { $radiogroup-checked-bg: $base-accent !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default; + $radiobutton-active-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default; } @if $color == "light" { $radiogroup-checked-bg: $base-accent !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default; + $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default; } @if $color == "softblue" { $radiogroup-checked-bg: $base-accent !default; $radiogroup-bg: $base-element-bg !default; - $radiobutton-active-bg: color.change(darken($radiogroup-bg, 62.5%), $alpha: 0.2) !default; + $radiobutton-active-bg: color.change(color.adjust($radiogroup-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $radiogroup-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $radiobutton-focused-border-color: $base-focus-bg !default; - $radiogroup-readonly-border-color: lighten($radiogroup-border-color, 9%) !default; + $radiogroup-readonly-border-color: color.adjust($radiogroup-border-color, $lightness: 9%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss index d7ef75b0f469..9a50494cc11c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_colors.scss @@ -101,26 +101,26 @@ $agenda-appointment-text-color: null !default; @if $color == "carmine" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-cell-hover-bg: $base-hover-bg !default; - $scheduler-group-separator-border-color: darken($base-border-color, 20%) !default; - $scheduler-accent-border-color: darken($base-border-color, 10%) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; + $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: -10%, $space: hsl) !default; $scheduler-appointment-text-color: $base-inverted-text-color !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-accent !default; $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $scheduler-first-month-border-color: darken($base-border-color, 20%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default; $scheduler-panel-text-color: $base-header-color !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-light !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; - $scheduler-header-bg: darken($base-bg, 4%) !default; + $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; $scheduler-alldaypanel-bg: $base-element-bg !default; $scheduler-tab-selected-bg: $base-bg !default; $scheduler-tab-selected-before-bg: $scheduler-tab-selected-bg !default; @@ -151,7 +151,7 @@ $agenda-appointment-text-color: null !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-appointment-focus-color: extcolor.difference(#fff, $base-text-color) !default; $scheduler-appointment-start-color: $base-inverted-bg !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 5%) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 5%, $space: hsl) !default; $scheduler-panel-text-color: $base-text-color !default; $scheduler-dropdown-appointment-date-color: $base-text-color !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; @@ -178,22 +178,22 @@ $agenda-appointment-text-color: null !default; @if $color == "dark" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-cell-hover-bg: $base-hover-bg !default; - $scheduler-group-separator-border-color: lighten($base-border-color, 20%) !default; - $scheduler-accent-border-color: lighten($base-border-color, 9.8%) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; + $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: 9.8%, $space: hsl) !default; $scheduler-appointment-text-color: $base-inverted-text-color !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-accent !default; $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $scheduler-first-month-border-color: lighten($base-border-color, 20%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default; $scheduler-panel-text-color: $base-text-color !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-dark !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; @@ -217,24 +217,24 @@ $agenda-appointment-text-color: null !default; @if $color == "darkmoon" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; - $scheduler-cell-hover-bg: lighten($base-bg, 4%) !default; - $scheduler-group-separator-border-color: lighten($base-border-color, 20%) !default; - $scheduler-accent-border-color: lighten($base-border-color, 9.8%) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; + $scheduler-cell-hover-bg: color.adjust($base-bg, $lightness: 4%, $space: hsl) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; + $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: 9.8%, $space: hsl) !default; $scheduler-appointment-text-color: #fff !default; $scheduler-appointment-base-color: #2cc9b4 !default; - $scheduler-appointment-start-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default; - $scheduler-first-month-border-color: lighten($base-border-color, 20%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; + $scheduler-appointment-start-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; $scheduler-appointment-base-color: #2cc9b4 !default; $scheduler-appointment-text-color: #fff !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.2) !default; $scheduler-panel-text-color: $base-text-color !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: #fff !default; $scheduler-workspace-month-text-color: $month-text-color-dark !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; @@ -258,22 +258,22 @@ $agenda-appointment-text-color: null !default; @if $color == "darkviolet" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-cell-hover-bg: $base-hover-bg !default; - $scheduler-group-separator-border-color: lighten($base-border-color, 20%) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; $scheduler-accent-border-color: #414152 !default; $scheduler-appointment-text-color: $base-icon-color !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-select-bg !default; $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $scheduler-first-month-border-color: lighten($base-border-color, 20%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; - $scheduler-workspace-focused-cell-color: darken($base-select-bg, 12%) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-select-bg, $lightness: -12%, $space: hsl) !default; $scheduler-panel-text-color: $base-header-color !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: $base-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-dark !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; @@ -297,22 +297,22 @@ $agenda-appointment-text-color: null !default; @if $color == "greenmist" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; - $scheduler-cell-hover-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default; - $scheduler-group-separator-border-color: darken($base-border-color, 20%) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; + $scheduler-cell-hover-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $scheduler-accent-border-color: #b5c9c8 !default; $scheduler-appointment-text-color: $base-inverted-text-color !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-accent !default; $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $scheduler-first-month-border-color: darken($base-border-color, 20%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default; - $scheduler-panel-text-color: lighten($base-text-color, 38.5%) !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default; + $scheduler-panel-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; - $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-workspace-month-text-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-time-panel-background-color: $scheduler-workspace-background-color !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; @@ -337,23 +337,23 @@ $agenda-appointment-text-color: null !default; @if $color == "light" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-cell-hover-bg: $base-hover-bg !default; - $scheduler-group-separator-border-color: darken($base-border-color, 20%) !default; - $scheduler-accent-border-color: darken($base-border-color, 10%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; - $scheduler-header-bg: darken($base-bg, 4%) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; + $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: -10%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; + $scheduler-header-bg: color.adjust($base-bg, $lightness: -4%, $space: hsl) !default; $scheduler-appointment-text-color: $base-inverted-text-color !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-accent !default; $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $scheduler-first-month-border-color: darken($base-border-color, 20%) !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 45%) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 45%, $space: hsl) !default; $scheduler-panel-text-color: $base-text-color !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-light !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; @@ -376,22 +376,22 @@ $agenda-appointment-text-color: null !default; @if $color == "softblue" { $scheduler-base-border-color: color.change($base-border-color, $alpha: 0.6) !default; - $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-cell-hover-bg: $base-webwidget-hover-background !default; - $scheduler-group-separator-border-color: darken($base-border-color, 20%) !default; - $scheduler-accent-border-color: darken($base-border-color, 10%) !default; - $scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; + $scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; + $scheduler-accent-border-color: color.adjust($base-border-color, $lightness: -10%, $space: hsl) !default; + $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; $scheduler-appointment-text-color: $base-inverted-text-color !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-accent !default; $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $scheduler-workspace-focused-cell-color: lighten($base-accent, 25%) !default; - $scheduler-first-month-border-color: darken($base-border-color, 20%) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 25%, $space: hsl) !default; + $scheduler-first-month-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $scheduler-panel-text-color: $base-text-color !default; - $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default; + $scheduler-time-indicator-color: color.adjust($scheduler-current-time-cell-color, $lightness: 15%, $space: hsl) !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-workspace-month-text-color: $month-text-color-light !default; - $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default; + $scheduler-dropdown-appointment-date-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; $scheduler-group-header-color: $scheduler-panel-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss index 617537fb9631..b204799a3646 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss @@ -64,7 +64,7 @@ $generic-scheduler-current-time-cell-border-size: 2px; $generic-scheduler-month-date-text-size: $generic-h5-font-size; -$scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color; +$scheduler-first-of-month-border: 1px solid; $generic-scheduler-agenda-time-cell-padding: 10px; $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-cell-padding 0 0 10px; @@ -142,7 +142,9 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c .dx-scheduler-date-table-first-of-month { border-left: $scheduler-first-of-month-border; + border-left-color: $scheduler-first-month-border-color; border-top: $scheduler-first-of-month-border; + border-top-color: $scheduler-first-month-border-color; } .dx-scheduler-date-table-scrollable .dx-scrollable-content { @@ -164,6 +166,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c .dx-scheduler-group-row { &:not(:first-child) { border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; .dx-scheduler-group-header { color: $scheduler-panel-text-color; @@ -190,6 +193,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c &.dx-scheduler-work-space-grouped { .dx-scheduler-all-day-title { border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; } &.dx-scheduler-agenda { @@ -236,7 +240,8 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c } .dx-popup-bottom { - border-top: 1px solid $scheduler-appointment-form-separator-color; + border-top: 1px solid; + border-top-color: $scheduler-appointment-form-separator-color; } .dx-toolbar-after { @@ -339,15 +344,18 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c .dx-scheduler-work-space-grouped .dx-scheduler-group-row th, .dx-scheduler-work-space.dx-scheduler-work-space-grouped .dx-scheduler-last-group-cell { - border-right: 1px solid $scheduler-group-separator-border-color; + border-right: 1px solid; + border-right-color: $scheduler-group-separator-border-color; &:last-child { border-right: none; } .dx-rtl & { - border-left: 1px solid $scheduler-group-separator-border-color; + border-left: 1px solid; + border-left-color: $scheduler-group-separator-border-color; border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; &:last-child { border-left: none; @@ -360,28 +368,35 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c .dx-scheduler-group-row th, .dx-scheduler-last-group-cell { border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; border-left: baseScheduler.$scheduler-base-border; + border-left-color: $scheduler-base-border-color; } } .dx-scheduler-work-space-grouped.dx-scheduler-work-space-group-by-date { .dx-scheduler-group-row th { border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; border-left: baseScheduler.$scheduler-base-border; + border-left-color: $scheduler-base-border-color; } .dx-scheduler-header-panel-cell, .dx-scheduler-group-header.dx-scheduler-last-group-cell, .dx-scheduler-date-table-cell.dx-scheduler-last-group-cell { - border-right: 1px solid $scheduler-group-separator-border-color; + border-right: 1px solid; + border-right-color: $scheduler-group-separator-border-color; &:last-child { border-right: none; } .dx-rtl & { - border-left: 1px solid $scheduler-group-separator-border-color; + border-left: 1px solid; + border-left-color: $scheduler-group-separator-border-color; border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; &:last-child { border-left: none; diff --git a/packages/devextreme-scss/scss/widgets/generic/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/scrollable/_colors.scss index 5c7b7fa48e68..39cfec661a61 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scrollable/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scrollable/_colors.scss @@ -21,10 +21,10 @@ $scrollable-scrollbar-bg: null !default; $scrollable-scrollbar-active-bg: null !default; @if $color == "carmine" { - $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default; - $scrollable-scroll-active-bg: darken($base-accent, 15%) !default; + $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default; + $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; - $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default; + $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.2) !default; } @if $color == "contrast" { @@ -35,44 +35,44 @@ $scrollable-scrollbar-active-bg: null !default; } @if $color == "dark" { - $scrollable-scroll-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.7) !default; - $scrollable-scroll-active-bg: lighten($scrollable-bg, 25%) !default; + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; + $scrollable-scroll-active-bg: color.adjust($scrollable-bg, $lightness: 25%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; - $scrollable-scrollbar-active-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.2) !default; + $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.2) !default; } @if $color == "darkmoon" { - $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default; - $scrollable-scroll-active-bg: darken($base-accent, 15%) !default; + $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default; + $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; - $scrollable-scrollbar-active-bg: color.change(lighten($base-bg, 25%), $alpha: 0.2) !default; + $scrollable-scrollbar-active-bg: color.change(color.adjust($base-bg, $lightness: 25%, $space: hsl), $alpha: 0.2) !default; } @if $color == "darkviolet" { - $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default; - $scrollable-scroll-active-bg: darken($base-accent, 15%) !default; + $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default; + $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; $scrollable-scrollbar-active-bg: color.change(#4d4d68, $alpha: 0.5) !default; } @if $color == "greenmist" { - $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default; - $scrollable-scroll-active-bg: darken($base-accent, 15%) !default; + $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default; + $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; - $scrollable-scrollbar-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.7) !default; + $scrollable-scrollbar-active-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.7) !default; } @if $color == "light" { - $scrollable-scroll-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.7) !default; - $scrollable-scroll-active-bg: darken($scrollable-bg, 25%) !default; + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; + $scrollable-scroll-active-bg: color.adjust($scrollable-bg, $lightness: -25%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; - $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default; + $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.2) !default; } @if $color == "softblue" { - $scrollable-scroll-bg: color.change(darken($base-accent, 15%), $alpha: 0.8) !default; - $scrollable-scroll-active-bg: darken($base-accent, 15%) !default; + $scrollable-scroll-bg: color.change(color.adjust($base-accent, $lightness: -15%, $space: hsl), $alpha: 0.8) !default; + $scrollable-scroll-active-bg: color.adjust($base-accent, $lightness: -15%, $space: hsl) !default; $scrollable-scrollbar-bg: transparent !default; - $scrollable-scrollbar-active-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.2) !default; + $scrollable-scrollbar-active-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.2) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss index 671a39112cad..bd0f3e643e2c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/slider/_colors.scss @@ -28,10 +28,10 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; @if $color == "carmine" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } @if $color == "contrast" { @@ -40,60 +40,60 @@ $slider-handle-border-radius: $base-border-radius - 1px !default; $slider-handle-active-bg: $base-inverted-bg !default; $slider-handle-hover-bg: $slider-range-bg !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @if $color == "dark" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: lighten($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: lighten($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @if $color == "darkmoon" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: lighten($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: lighten($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @if $color == "darkviolet" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: lighten($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: lighten($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: 17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: 10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: lighten($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: 10%, $space: hsl) !default; } @if $color == "greenmist" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } @if $color == "light" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } @if $color == "softblue" { $slider-handle-bg: $base-accent !default; $slider-handle-border-color: $base-bg !default; - $slider-handle-active-bg: darken($slider-handle-bg, 17%) !default; - $slider-handle-hover-bg: darken($slider-handle-bg, 10%) !default; + $slider-handle-active-bg: color.adjust($slider-handle-bg, $lightness: -17%, $space: hsl) !default; + $slider-handle-hover-bg: color.adjust($slider-handle-bg, $lightness: -10%, $space: hsl) !default; $slider-handle-focused-bg: $slider-handle-hover-bg !default; - $slider-invalid-handle-accent-bg: darken($base-danger, 10%) !default; + $slider-invalid-handle-accent-bg: color.adjust($base-danger, $lightness: -10%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss b/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss index d3b9ffab87f1..b64fb085cd26 100644 --- a/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/slider/_index.scss @@ -19,21 +19,24 @@ $generic-slider-radius: 2px; .dx-state-active { &.dx-slider-handle { - border: 1px solid $slider-handle-border-color; + border: 1px solid; + border-color: $slider-handle-border-color; background: $slider-handle-active-bg; } } .dx-state-focused { &.dx-slider-handle:not(.dx-state-active) { - border: 1px solid $slider-handle-border-color; + border: 1px solid; + border-color: $slider-handle-border-color; background: $slider-handle-focused-bg; } } .dx-state-hover { &.dx-slider-handle:not(.dx-state-active) { - border: 1px solid $slider-handle-border-color; + border: 1px solid; + border-color: $slider-handle-border-color; background: $slider-handle-hover-bg; } } @@ -56,7 +59,8 @@ $generic-slider-radius: 2px; box-sizing: content-box; &.dx-slider-range-visible { - border: 1px solid $slider-range-border-color; + border: 1px solid; + border-color: $slider-range-border-color; background: $slider-range-bg; border-radius: $generic-slider-radius; } @@ -80,7 +84,8 @@ $generic-slider-radius: 2px; margin-inline-end: math.div(-$generic-slider-width, 2); width: $generic-slider-width; height: $generic-slider-height; - border: 1px solid $slider-handle-border-color; + border: 1px solid; + border-color: $slider-handle-border-color; background-color: $slider-handle-bg; border-radius: $slider-handle-border-radius; box-sizing: content-box; diff --git a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_colors.scss index d41f0fc29391..3435ecd61c57 100644 --- a/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/speedDialAction/_colors.scss @@ -17,8 +17,8 @@ $speed-dial-action-shading-color: null !default; @if $color == "carmine" { $speed-dial-action-bg: $base-bg !default; - $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default; - $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } @@ -32,49 +32,49 @@ $speed-dial-action-shading-color: null !default; } @if $color == "dark" { - $speed-dial-action-bg: lighten($base-bg, 3%) !default; - $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 9%) !default; - $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 26%) !default; + $speed-dial-action-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 9%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 26%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } @if $color == "darkmoon" { - $speed-dial-action-bg: lighten($base-bg, 3%) !default; - $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 9%) !default; - $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 26%) !default; + $speed-dial-action-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 9%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 26%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } @if $color == "darkviolet" { - $speed-dial-action-bg: lighten($base-bg, 3%) !default; - $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 9%) !default; - $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 26%) !default; + $speed-dial-action-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 9%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 26%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } @if $color == "greenmist" { $speed-dial-action-bg: $base-bg !default; - $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default; - $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } @if $color == "light" { $speed-dial-action-bg: $base-bg !default; - $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default; - $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } @if $color == "softblue" { $speed-dial-action-bg: $base-bg !default; - $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default; - $speed-dial-action-active-bg: darken($speed-dial-action-bg, 24%) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -24%, $space: hsl) !default; $speed-dial-action-color: $base-text-color !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/splitterBar/_colors.scss index 2d61fd4fbd69..638d03cc5dbe 100644 --- a/packages/devextreme-scss/scss/widgets/generic/splitterBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/splitterBar/_colors.scss @@ -14,7 +14,7 @@ $splitter-bg: null !default; } @if $color == "contrast" { - $splitter-bg: darken($base-bg, 13.5%) !default; + $splitter-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; } @if $color == "dark" { diff --git a/packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss index a3ecb8fea7b9..4adc6846109e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss @@ -79,99 +79,99 @@ $stepper-connector-bg: $base-border-color !default; $stepper-connector-value-bg: $base-text-color !default; @if $color == "carmine" { - $stepper-step-base-bg: darken($base-bg, 13.33%) !default; - $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default; } @if $color == "contrast" { - $stepper-step-base-bg: lighten($base-bg, 13.73%) !default; - $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default; $stepper-step-accent-bg: $base-default !default; $stepper-step-accent-hover-bg: $base-inverted-bg !default; $stepper-step-danger-hover-bg: $base-inverted-bg !default; - $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default; } @if $color == 'dark' { - $stepper-step-base-bg: lighten($base-bg, 13.73%) !default; - $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 9%, $space: hsl) !default; - $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default; } @if $color == "darkmoon" { - $stepper-step-base-bg: lighten($base-bg, 13.73%) !default; - $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 9%, $space: hsl) !default; - $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default; } @if $color == "darkviolet" { - $stepper-step-base-bg: lighten($base-bg, 13.73%) !default; - $stepper-step-base-hover-bg: lighten($base-bg, 17.65%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: 13.73%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: 17.65%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 9%, $space: hsl) !default; - $stepper-step-disabled-bg: lighten($base-bg, 5.49%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: 5.49%, $space: hsl) !default; } @if $color == "greenmist" { - $stepper-step-base-bg: darken($base-bg, 13.33%) !default; - $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default; } @if $color == 'light' { - $stepper-step-base-bg: darken($base-bg, 13.33%) !default; - $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default; } @if $color == "softblue" { - $stepper-step-base-bg: darken($base-bg, 13.33%) !default; - $stepper-step-base-hover-bg: darken($base-bg, 16.86%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: -13.33%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -16.86%, $space: hsl) !default; $stepper-step-accent-bg: $base-accent !default; - $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 9%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 9%) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -9%, $space: hsl) !default; - $stepper-step-disabled-bg: darken($base-bg, 6.67%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -6.67%, $space: hsl) !default; } /** diff --git a/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss index 68d4450ebc51..b12d0313ac48 100644 --- a/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/switch/_colors.scss @@ -44,16 +44,16 @@ $switch-border-radius: null !default; @if $color == "carmine" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(darken($switch-bg, 62.5%), $alpha: 0.2) !default; + $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: lighten($base-text-color, 40%) !default; - $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: lighten($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -69,7 +69,7 @@ $switch-border-radius: null !default; $switch-active-border-color: $base-border-color !default; $switch-off-color: $base-text-color !default; $switch-handle-off-bg: $base-inverted-bg !default; - $switch-readonly-border-color: darken($switch-border-color, 50%) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -50%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius - 2px !default; } @@ -77,15 +77,15 @@ $switch-border-radius: null !default; @if $color == "dark" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: lighten($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: 17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(lighten($switch-bg, 62.5%), $alpha: 0.2) !default; + $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: darken($base-text-color, 40%) !default; - $switch-handle-off-bg: darken($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: darken($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -93,15 +93,15 @@ $switch-border-radius: null !default; @if $color == "darkmoon" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: lighten($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: 17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(lighten($switch-bg, 62.5%), $alpha: 0.2) !default; + $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: darken($base-text-color, 40%) !default; - $switch-handle-off-bg: darken($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: darken($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -109,15 +109,15 @@ $switch-border-radius: null !default; @if $color == "darkviolet" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: lighten($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: 17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(lighten($switch-bg, 62.5%), $alpha: 0.2) !default; + $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: darken($base-text-color, 40%) !default; - $switch-handle-off-bg: darken($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: darken($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: -40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: -15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: -9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -125,15 +125,15 @@ $switch-border-radius: null !default; @if $color == "greenmist" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default; + $switch-container-active-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.4) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: lighten($base-text-color, 40%) !default; - $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: lighten($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -141,15 +141,15 @@ $switch-border-radius: null !default; @if $color == "light" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(darken($switch-bg, 62.5%), $alpha: 0.2) !default; + $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: lighten($base-text-color, 40%) !default; - $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: lighten($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } @@ -157,15 +157,15 @@ $switch-border-radius: null !default; @if $color == "softblue" { $switch-bg: $base-element-bg !default; $switch-handle-bg: $base-accent !default; - $switch-handle-active-bg: darken($switch-handle-bg, 17%) !default; + $switch-handle-active-bg: color.adjust($switch-handle-bg, $lightness: -17%, $space: hsl) !default; $switch-hover-border-color: $base-accent !default; $switch-focused-border-color: $base-focus-bg !default; - $switch-container-active-bg: color.change(darken($switch-bg, 62.5%), $alpha: 0.2) !default; + $switch-container-active-bg: color.change(color.adjust($switch-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $switch-hover-bg: transparent !default; $switch-active-border-color: $base-accent !default; - $switch-off-color: lighten($base-text-color, 40%) !default; - $switch-handle-off-bg: lighten($switch-handle-bg, 15%) !default; - $switch-readonly-border-color: lighten($switch-border-color, 9%) !default; + $switch-off-color: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($switch-handle-bg, $lightness: 15%, $space: hsl) !default; + $switch-readonly-border-color: color.adjust($switch-border-color, $lightness: 9%, $space: hsl) !default; $switch-container-readonly-bg: $switch-bg !default; $switch-border-radius: $base-border-radius-exsmall !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss b/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss index ea755ff1989b..d2ec81e739fa 100644 --- a/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/switch/_index.scss @@ -67,7 +67,8 @@ $generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weig margin: 0 (-$generic-switch-container-adjustment) 0 0; padding: 0 $generic-switch-handle-offset; height: $generic-switch-height; - border: $generic-switch-border-weight solid $switch-border-color; + border: $generic-switch-border-weight solid; + border-color: $switch-border-color; background: $switch-bg; border-radius: $switch-border-radius; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss index afb1fe8bb49b..954be3728cb9 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss @@ -33,5 +33,6 @@ .dx-multiview-wrapper { border: $generic-tabs-border; + border-color: $tabs-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss index 98bc0670676b..9468f90cf3ab 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss @@ -16,13 +16,16 @@ > .dx-tabpanel-tabs { .dx-tabs-wrapper { border-block-start: $generic-tabs-border; + border-block-start-color: $tabs-border-color; border-block-end: $generic-tabs-border; + border-block-end-color: $tabs-border-color; @include dx-tabs-border-mixin( none, $generic-tabs-border, none, $generic-tabs-border, + $tabs-border-color, ); } @@ -32,6 +35,7 @@ $generic-tabs-border-width solid, none, $generic-tabs-border-width solid, + null, ); &::after { diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss index 69efcfe6d1af..52039b590e2b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss @@ -16,7 +16,9 @@ > .dx-tabpanel-tabs { .dx-tabs-wrapper { border-inline-start: $generic-tabs-border; + border-inline-start-color: $tabs-border-color; border-inline-end: $generic-tabs-border; + border-inline-end-color: $tabs-border-color; } .dx-tabs-scrollable { @@ -25,6 +27,7 @@ none, $generic-tabs-border-width solid, none, + null, ); &::after { diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss index 76335f86a846..0cd636b27265 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss @@ -16,7 +16,9 @@ > .dx-tabpanel-tabs { .dx-tabs-wrapper { border-inline-start: $generic-tabs-border; + border-inline-start-color: $tabs-border-color; border-inline-end: $generic-tabs-border; + border-inline-end-color: $tabs-border-color; } .dx-tabs-scrollable { @@ -25,6 +27,7 @@ none, $generic-tabs-border-width solid, none, + null, ); &::after { diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss index cc1a9328b9df..782b61d56c1c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss @@ -16,13 +16,16 @@ > .dx-tabpanel-tabs { .dx-tabs-wrapper { border-block-start: $generic-tabs-border; + border-block-start-color: $tabs-border-color; border-block-end: $generic-tabs-border; + border-block-end-color: $tabs-border-color; @include dx-tabs-border-mixin( none, $generic-tabs-border, none, $generic-tabs-border, + $tabs-border-color, ); } @@ -32,6 +35,7 @@ $generic-tabs-border-width solid, none, $generic-tabs-border-width solid, + null, ); &::after { diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss index 7f6e13fd8ff1..3cbe6952645e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss @@ -20,10 +20,12 @@ null, null, null, + null, ); margin-block-start: -$generic-tabs-border-width; border-block-start: $generic-tabpanel-tab-border-selected-bottom; + border-block-start-color: $tabs-tab-selected-bg; } } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss index 64baaecef440..f35f3b39ebbf 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss @@ -20,10 +20,12 @@ $generic-tabpanel-tab-border-transparent, null, null, + null, ); margin-inline-end: -$generic-tabs-border-width; border-inline-end: $generic-tabpanel-tab-border-selected-bottom; + border-inline-end-color: $tabs-tab-selected-bg; } } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss index b1d3050e720d..c2784191ad58 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss @@ -20,10 +20,12 @@ null, null, $generic-tabpanel-tab-border-transparent, + null, ); margin-inline-start: -$generic-tabs-border-width; border-inline-start: $generic-tabpanel-tab-border-selected-bottom; + border-inline-start-color: $tabs-tab-selected-bg; } } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss index c01356347e1a..0f42bad6d6f7 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss @@ -20,10 +20,12 @@ null, $generic-tabpanel-tab-border-transparent, null, + null, ); margin-bottom: -$generic-tabs-border-width; border-block-end: $generic-tabpanel-tab-border-selected-bottom; + border-block-end-color: $tabs-tab-selected-bg; } } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss index 64a7c82b7c84..ebf486a16f63 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss @@ -18,7 +18,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "carmine" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; @@ -28,17 +28,17 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "contrast" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; } @if $color == "dark" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; @@ -48,7 +48,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "darkmoon" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; @@ -58,7 +58,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "darkviolet" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; @@ -68,7 +68,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "greenmist" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; @@ -78,7 +78,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "light" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; @@ -88,7 +88,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "softblue" { $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; - $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; + $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabpanel-tab-border-focused-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/navigation-button/_vertical.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/navigation-button/_vertical.scss index 1aebcfae2090..ff423e86b661 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/navigation-button/_vertical.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/navigation-button/_vertical.scss @@ -17,12 +17,14 @@ border-color: $tabs-border-color; &.dx-tabs-nav-button-left { - border-right: $generic-tabs-border-width solid $tabs-border-color; + border-right: $generic-tabs-border-width solid; + border-right-color: $tabs-border-color; border-bottom: none; } &.dx-tabs-nav-button-right { - border-left: $generic-tabs-border-width solid $tabs-border-color; + border-left: $generic-tabs-border-width solid; + border-left-color: $tabs-border-color; border-top: none; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss index ff00a711e8da..6bf4b677f488 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_base.scss @@ -31,6 +31,7 @@ $generic-tabs-border-hover-right, $generic-tabs-border-hover-bottom, $generic-tabs-border-hover-left, + $tabs-tab-hover-border-color-horizontal, ); } @@ -43,6 +44,7 @@ $generic-tabs-border-selected-right, $generic-tabs-border-selected-bottom, $generic-tabs-border-selected-left, + $tabs-border-color, ); .dx-tab-text { @@ -63,6 +65,7 @@ $generic-tabs-border-active-right, $generic-tabs-border-active-bottom, $generic-tabs-border-active-left, + $tabs-tab-active-border-color, ); .dx-tab-text { @@ -116,6 +119,7 @@ $generic-tabs-border-focused-right, $generic-tabs-border-focused-bottom, $generic-tabs-border-focused-left, + $tabs-focused-border-color, ); } @@ -125,6 +129,7 @@ $generic-tabs-border-focused-disabled-right, $generic-tabs-border-focused-disabled-bottom, $generic-tabs-border-focused-disabled-left, + $tabs-focused-disabled-border-color, ); } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_vertical.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_vertical.scss index 7b6c3a65cef0..b55094cdf843 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_vertical.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tab/_vertical.scss @@ -26,6 +26,7 @@ $generic-tabs-vertical-border-hover-right, $generic-tabs-vertical-border-hover-bottom, $generic-tabs-vertical-border-hover-left, + $tabs-tab-hover-border-color-horizontal, ); } @@ -35,6 +36,7 @@ $generic-tabs-vertical-border-selected-right, $generic-tabs-vertical-border-selected-bottom, $generic-tabs-vertical-border-selected-left, + $tabs-border-color, ); } @@ -44,6 +46,7 @@ $generic-tabs-vertical-border-active-right, $generic-tabs-vertical-border-active-bottom, $generic-tabs-vertical-border-active-left, + $tabs-tab-active-border-color, ); } @@ -53,6 +56,7 @@ $generic-tabs-vertical-border-focused-disabled-right, $generic-tabs-vertical-border-focused-disabled-bottom, $generic-tabs-vertical-border-focused-disabled-left, + $tabs-focused-disabled-border-color, ); } } @@ -65,12 +69,14 @@ $generic-tabs-vertical-border-focused-right, $generic-tabs-vertical-border-focused-bottom, $generic-tabs-vertical-border-focused-left, + $tabs-focused-border-color, ); } &.dx-focused-disabled-next-tab { &::after { border-inline-end: $generic-tabs-border; + border-inline-end-color: $tabs-border-color; border-block-end: none; } } @@ -78,6 +84,7 @@ &.dx-focused-disabled-prev-tab { &::after { border-inline-start: $generic-tabs-border; + border-inline-start-color: $tabs-border-color; border-block-start: none; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss index 9869a45a188f..de66321dd985 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_base.scss @@ -26,6 +26,7 @@ $generic-tabs-border, $generic-tabs-border, $generic-tabs-border, + $tabs-border-color, ); .dx-scrollable-content { @@ -51,13 +52,16 @@ $generic-tabs-border, $generic-tabs-border, $generic-tabs-border, + $tabs-border-color, ); } .dx-tabs-nav-buttons { .dx-tabs-wrapper { border-block-start: $generic-tabs-border; + border-block-start-color: $tabs-border-color; border-block-end: $generic-tabs-border; + border-block-end-color: $tabs-border-color; &::after { border: none; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_vertical.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_vertical.scss index d1a4cb6a1cd9..857bf24cc896 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_vertical.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/layout/tabs/_vertical.scss @@ -15,7 +15,9 @@ .dx-tabs-vertical { .dx-tabs-wrapper { border-inline-start: $generic-tabs-border; + border-inline-start-color: $tabs-border-color; border-inline-end: $generic-tabs-border; + border-inline-end-color: $tabs-border-color; border-block-start: none; border-block-end: none; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss index 5a0561e9a4eb..282139759b6c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/mixins/_index.scss @@ -34,11 +34,16 @@ $border-inline-end, $border-block-end, $border-inline-start, + $border-color, ) { &::after { border-block-start: $border-block-start; + border-block-start-color: $border-color; border-inline-end: $border-inline-end; + border-inline-end-color: $border-color; border-block-end: $border-block-end; + border-block-end-color: $border-color; border-inline-start: $border-inline-start; + border-inline-start-color: $border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss index 8901b6733351..83f047266736 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/_colors.scss @@ -58,17 +58,17 @@ $tabs-tab-hover-border-color-vertical: null !default; @if $color == "carmine" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: darken($base-bg, 2%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: -2%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $tabs-tab-color !default; $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-hover-bg !default; - $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; - $tabs-tab-active-border-color: color.change(darken($base-border-color, 2.55)) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; + $tabs-tab-active-border-color: color.change(color.adjust($base-border-color, $lightness: -2.55%, $space: hsl)) !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; - $tabs-tab-hover-border-color-vertical: color.change(lighten($base-accent, 33.92)) !default; + $tabs-tab-hover-border-color-vertical: color.change(color.adjust($base-accent, $lightness: 33.92%, $space: hsl)) !default; } @if $color == "contrast" { @@ -79,7 +79,7 @@ $tabs-tab-hover-border-color-vertical: null !default; $tabs-tab-icon-color: $base-icon-color !default; $tabs-tab-icon-selected-color: $base-inverted-text-color !default; $tabs-focused-border-color: $base-focus-color !default; - $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-active-bg: $base-inverted-bg !default; $tabs-tab-active-border-color: $base-border-color !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; @@ -88,29 +88,29 @@ $tabs-tab-hover-border-color-vertical: null !default; @if $color == "dark" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: lighten($base-bg, 3%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $tabs-tab-color !default; $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: lighten($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-element-bg !default; - $tabs-tab-active-bg: color.change(lighten($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; - $tabs-tab-active-border-color: color.change(lighten($tabs-tab-bg, 12.55)) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; + $tabs-tab-active-border-color: color.change(color.adjust($tabs-tab-bg, $lightness: 12.55%, $space: hsl)) !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "darkmoon" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: darken($base-bg, 3%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $tabs-tab-color !default; $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: lighten($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-element-bg !default; - $tabs-tab-active-bg: color.change(lighten($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tabs-tab-active-border-color: transparent !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; @@ -118,60 +118,60 @@ $tabs-tab-hover-border-color-vertical: null !default; @if $color == "darkviolet" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: lighten($base-bg, 3%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: 3%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $tabs-tab-color !default; $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: lighten($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: 20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-hover-bg !default; - $tabs-tab-active-bg: color.change(lighten($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; - $tabs-tab-active-border-color: color.change(lighten($base-bg, 15.49)) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; + $tabs-tab-active-border-color: color.change(color.adjust($base-bg, $lightness: 15.49%, $space: hsl)) !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; - $tabs-tab-hover-border-color-vertical: color.change(lighten($tabs-tab-bg, 16.86)) !default; + $tabs-tab-hover-border-color-vertical: color.change(color.adjust($tabs-tab-bg, $lightness: 16.86%, $space: hsl)) !default; } @if $color == "greenmist" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: darken($base-bg, 3%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $tabs-tab-color !default; $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-element-bg !default; - $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; - $tabs-tab-active-border-color: darken($tabs-tab-bg, 12.16) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; + $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "light" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: darken($base-bg, 3%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $tabs-tab-color !default; $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-element-bg !default; - $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; - $tabs-tab-active-border-color: darken($tabs-tab-bg, 12.16) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; + $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } @if $color == "softblue" { $tabs-tab-selected-color: $base-text-color !default; - $tabs-tab-bg: darken($base-bg, 3%) !default; + $tabs-tab-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $tabs-tab-selected-bg: $base-bg !default; $tabs-tab-icon-color: $base-icon-color !default; $tabs-tab-icon-selected-color: $tabs-tab-icon-color !default; $tabs-focused-border-color: $base-focus-bg !default; - $tabs-focused-disabled-border-color: darken($base-border-color, 20%) !default; + $tabs-focused-disabled-border-color: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default; $tabs-tab-hover-bg: $base-element-bg !default; - $tabs-tab-active-bg: color.change(darken($tabs-tab-bg, 62.5%), $alpha: 0.2) !default; - $tabs-tab-active-border-color: darken($tabs-tab-bg, 12.16) !default; + $tabs-tab-active-bg: color.change(color.adjust($tabs-tab-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; + $tabs-tab-active-border-color: color.adjust($tabs-tab-bg, $lightness: -12.16%, $space: hsl) !default; $tabs-tab-hover-border-color-horizontal: $base-border-color !default; $tabs-tab-hover-border-color-vertical: $tabs-tab-hover-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss index cb13290df297..0b3f89a82e02 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss @@ -9,7 +9,7 @@ // adduse -$generic-tabs-border: $generic-tabs-border-width solid $tabs-border-color !default; +$generic-tabs-border: $generic-tabs-border-width solid !default; $generic-tabs-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabs-border-hover-top: null !default; @@ -38,217 +38,217 @@ $generic-tabs-border-active-left: null !default; $generic-tabs-border-active-right: null !default; @if $color == "carmine" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "contrast" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "dark" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "darkmoon" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "darkviolet" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "greenmist" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "light" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "softblue" { - $generic-tabs-border-hover-top: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; + $generic-tabs-border-hover-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-hover-bottom: $generic-tabs-border-width solid !default; $generic-tabs-border-hover-left: none !default; $generic-tabs-border-hover-right: none !default; - $generic-tabs-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-border-active-right: $generic-tabs-border-width solid !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss index 77c5933d3131..cf98a21a89d9 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-vertical.scss @@ -38,215 +38,215 @@ $generic-tabs-vertical-border-active-right: null !default; @if $color == "carmine" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "contrast" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "dark" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "darkmoon" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "darkviolet" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "greenmist" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "light" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } @if $color == "softblue" { $generic-tabs-vertical-border-hover-top: none !default; $generic-tabs-vertical-border-hover-bottom: none !default; - $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid $tabs-tab-hover-border-color-horizontal !default; - - $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid $tabs-border-color !default; - $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid $tabs-border-color !default; - - $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid $tabs-focused-border-color !default; - $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid $tabs-focused-border-color !default; - - $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid $tabs-focused-disabled-border-color !default; - - $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; - $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid $tabs-tab-active-border-color !default; + $generic-tabs-vertical-border-hover-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-hover-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-selected-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-selected-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-focused-disabled-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-focused-disabled-right: $generic-tabs-border-width solid !default; + + $generic-tabs-vertical-border-active-top: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-bottom: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-left: $generic-tabs-border-width solid !default; + $generic-tabs-vertical-border-active-right: $generic-tabs-border-width solid !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_index.scss index 7d5bf2992bd3..5b3498616838 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_index.scss @@ -1,2 +1,2 @@ -@import "borders-horizontal"; -@import "borders-vertical"; +@forward "borders-horizontal"; +@forward "borders-vertical"; diff --git a/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss index d1cac3b60277..26734e960e4f 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tagBox/_colors.scss @@ -31,10 +31,10 @@ $tagbox-select-all-border-color: $base-border-color !default; @if $color == "carmine" { $tagbox-tag-color: $base-text-color !default; - $tagbox-tag-bg: darken($base-bg, 9%) !default; // #fff => #e6e9eb + $tagbox-tag-bg: color.adjust($base-bg, $lightness: -9%, $space: hsl) !default; // #fff => #e6e9eb $tagbox-tag-button-remove-bg: #9ea4a8 !default; - $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @@ -43,7 +43,7 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-bg: extcolor.difference(#fff, $base-bg) !default; $tagbox-tag-color: $base-inverted-text-color !default; $tagbox-tag-button-remove-bg: $base-inverted-text-color !default; - $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; $tagbox-tag-focused-bg: $base-focus-color !default; $tagbox-tag-focused-color: $base-text-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; @@ -51,20 +51,20 @@ $tagbox-select-all-border-color: $base-border-color !default; @if $color == "dark" { $tagbox-tag-color: $base-text-color !default; - $tagbox-tag-bg: lighten($base-bg, 13.5%) !default; - $tagbox-tag-button-remove-bg: lighten($tagbox-tag-bg, 20%) !default; - $tagbox-tag-button-remove-active-bg: darken($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7.3%) !default; + $tagbox-tag-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; + $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: 20%, $space: hsl) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "darkmoon" { $tagbox-tag-color: $base-text-color !default; - $tagbox-tag-bg: lighten($base-bg, 13.5%) !default; - $tagbox-tag-button-remove-bg: lighten($tagbox-tag-bg, 20%) !default; - $tagbox-tag-button-remove-active-bg: darken($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7.3%) !default; + $tagbox-tag-bg: color.adjust($base-bg, $lightness: 13.5%, $space: hsl) !default; + $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: 20%, $space: hsl) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @@ -73,38 +73,38 @@ $tagbox-select-all-border-color: $base-border-color !default; $tagbox-tag-color: $base-text-color !default; $tagbox-tag-bg: $base-select-bg !default; $tagbox-tag-button-remove-bg: $base-row-alternation-background !default; - $tagbox-tag-button-remove-active-bg: darken($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7.3%) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: -20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7.3%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "greenmist" { - $tagbox-tag-color: lighten($base-text-color, 100%) !default; + $tagbox-tag-color: color.adjust($base-text-color, $lightness: 100%, $space: hsl) !default; $tagbox-tag-bg: $base-accent !default; $tagbox-tag-button-remove-bg: extcolor.difference($base-accent, #383838) !default; // #3cbab2 => #14827b - $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "light" { $tagbox-tag-color: $base-text-color !default; - $tagbox-tag-bg: darken($base-bg, 13.5%) !default; - $tagbox-tag-button-remove-bg: darken($tagbox-tag-bg, 20%) !default; - $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default; + $tagbox-tag-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; + $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: -20%, $space: hsl) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } @if $color == "softblue" { $tagbox-tag-color: $base-text-color !default; - $tagbox-tag-bg: darken($base-bg, 13.5%) !default; - $tagbox-tag-button-remove-bg: darken($tagbox-tag-bg, 20%) !default; - $tagbox-tag-button-remove-active-bg: lighten($tagbox-tag-button-remove-bg, 20%) !default; - $tagbox-tag-focused-bg: darken($tagbox-tag-bg, 7%) !default; + $tagbox-tag-bg: color.adjust($base-bg, $lightness: -13.5%, $space: hsl) !default; + $tagbox-tag-button-remove-bg: color.adjust($tagbox-tag-bg, $lightness: -20%, $space: hsl) !default; + $tagbox-tag-button-remove-active-bg: color.adjust($tagbox-tag-button-remove-bg, $lightness: 20%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($tagbox-tag-bg, $lightness: -7%, $space: hsl) !default; $tagbox-tag-focused-color: $tagbox-tag-color !default; $tagbox-tag-focused-button-remove-bg: $tagbox-tag-button-remove-bg !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss index 5a6bfd68fe7c..335d880ab5e2 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tagBox/_index.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -15,7 +16,7 @@ padding-left: 0; margin-left: $generic-tagbox-input-margin-left; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { padding-right: 0; padding-left: 0; @@ -161,7 +162,8 @@ .dx-tagbox-popup-wrapper { .dx-list-select-all { - border-bottom: 1px solid $tagbox-select-all-border-color; + border-bottom: 1px solid; + border-bottom-color: $tagbox-select-all-border-color; padding-bottom: $generic-tagbox-select-all-padding-bottom; margin-bottom: $generic-tagbox-select-all-margin-bottom; } diff --git a/packages/devextreme-scss/scss/widgets/generic/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/textBox/_colors.scss index a5f96d746f0d..2c711e1cea6e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textBox/_colors.scss @@ -12,7 +12,7 @@ $textbox-search-icon-color: null !default; @if $color == "carmine" { - $textbox-search-icon-color: lighten($base-icon-color, 3%) !default; + $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: 3%, $space: hsl) !default; } @if $color == "contrast" { @@ -20,7 +20,7 @@ $textbox-search-icon-color: null !default; } @if $color == "dark" { - $textbox-search-icon-color: darken($base-icon-color, 40%) !default; + $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: -40%, $space: hsl) !default; } @if $color == "darkmoon" { @@ -28,7 +28,7 @@ $textbox-search-icon-color: null !default; } @if $color == "darkviolet" { - $textbox-search-icon-color: darken($base-icon-color, 40%) !default; + $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: -40%, $space: hsl) !default; } @if $color == "greenmist" { @@ -36,7 +36,7 @@ $textbox-search-icon-color: null !default; } @if $color == "light" { - $textbox-search-icon-color: lighten($base-icon-color, 40%) !default; + $textbox-search-icon-color: color.adjust($base-icon-color, $lightness: 40%, $space: hsl) !default; } @if $color == "softblue" { diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss index e9ba30b175ee..2ca7e77f12d7 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_colors.scss @@ -78,11 +78,11 @@ $texteditor-label-transition: } @if $color == "dark" { - $texteditor-placeholder-color: darken($texteditor-color, 40%) !default; + $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: -40%, $space: hsl) !default; $texteditor-bg: $base-element-bg !default; $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $texteditor-focused-border-color: $base-focus-bg !default; - $texteditor-button-clear-icon-color: darken($texteditor-color, 40%) !default; + $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -40%, $space: hsl) !default; $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.2) !default; } @@ -90,14 +90,14 @@ $texteditor-label-transition: $texteditor-bg: $base-element-bg !default; $texteditor-focused-border-color: $base-focus-bg !default; $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $texteditor-placeholder-color: darken($base-label-color, 17%) !default; // #c1c7c9 => #919ea3 + $texteditor-placeholder-color: color.adjust($base-label-color, $lightness: -17%, $space: hsl) !default; // #c1c7c9 => #919ea3 $texteditor-button-clear-icon-color: $base-icon-color !default; $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.2) !default; } @if $color == "darkviolet" { $texteditor-bg: $base-element-bg !default; - $texteditor-placeholder-color: darken($texteditor-color, 40%) !default; + $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: -40%, $space: hsl) !default; $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $texteditor-focused-border-color: $base-focus-bg !default; $texteditor-button-clear-icon-color: $base-icon-color !default; @@ -105,7 +105,7 @@ $texteditor-label-transition: } @if $color == "greenmist" { - $texteditor-placeholder-color: lighten($base-label-color, 16%) !default; // #728e94 => #a1b1b5 + $texteditor-placeholder-color: color.adjust($base-label-color, $lightness: 16%, $space: hsl) !default; // #728e94 => #a1b1b5 $texteditor-bg: $base-element-bg !default; $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $texteditor-focused-border-color: $base-focus-bg !default; @@ -114,16 +114,16 @@ $texteditor-label-transition: } @if $color == "light" { - $texteditor-placeholder-color: lighten($texteditor-color, 40%) !default; + $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: 40%, $space: hsl) !default; $texteditor-bg: $base-element-bg !default; $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $texteditor-focused-border-color: $base-focus-bg !default; - $texteditor-button-clear-icon-color: lighten($texteditor-color, 40%) !default; + $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 40%, $space: hsl) !default; $texteditor-filled-invalid-background: color.change($texteditor-invalid-faded-border-color, $alpha: 0.1) !default; } @if $color == "softblue" { - $texteditor-placeholder-color: lighten($texteditor-color, 40%) !default; + $texteditor-placeholder-color: color.adjust($texteditor-color, $lightness: 40%, $space: hsl) !default; $texteditor-bg: $base-element-bg !default; $texteditor-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; $texteditor-focused-border-color: $base-focus-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss index c7d001c3195f..358781e1b8dc 100644 --- a/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/textEditor/_index.scss @@ -21,7 +21,7 @@ $generic-texteditor-input-padding: $generic-base-inline-borderedwidget-horizontal-padding $generic-base-inline-borderedwidget-bottom-padding; -$generic-texteditor-input-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding; +$generic-texteditor-input-height: math.round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding; $generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size; $generic-texteditor-icon-size: $generic-base-icon-size; @@ -69,7 +69,8 @@ $generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $gener &.dx-editor-underlined { background: $texteditor-underlined-bg; - border-bottom: $generic-texteditor-border-width solid $texteditor-border-color; + border-bottom: $generic-texteditor-border-width solid; + border-bottom-color: $texteditor-border-color; border-radius: 0; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tileView/_colors.scss index 5e975e191b52..758ab64128c8 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tileView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tileView/_colors.scss @@ -22,7 +22,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } @@ -40,7 +40,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(lighten($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } @@ -49,7 +49,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(lighten($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } @@ -58,7 +58,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(lighten($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: 62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } @@ -67,7 +67,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } @@ -76,7 +76,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } @@ -85,7 +85,7 @@ $tileview-active-color: null !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; - $tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default; + $tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tileView/_index.scss index 82a9635b1159..e59c21678b65 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tileView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tileView/_index.scss @@ -11,7 +11,8 @@ .dx-tile { color: $tileview-color; background-color: $tileview-bg; - border: 1px solid $tileview-border-color; + border: 1px solid; + border-color: $tileview-border-color; text-align: left; &.dx-state-focused, diff --git a/packages/devextreme-scss/scss/widgets/generic/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/timeView/_colors.scss index 72ee51ab6dd1..6ed4cf1e3201 100644 --- a/packages/devextreme-scss/scss/widgets/generic/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/timeView/_colors.scss @@ -17,7 +17,7 @@ $clock-bg-color: null !default; } @if $color == "dark" { - $clock-digits-color: darken($base-text-color, 38.5%) !default; + $clock-digits-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default; } @if $color == "darkmoon" { @@ -25,15 +25,15 @@ $clock-bg-color: null !default; } @if $color == "darkviolet" { - $clock-digits-color: darken($base-text-color, 38.5%) !default; + $clock-digits-color: color.adjust($base-text-color, $lightness: -38.5%, $space: hsl) !default; } @if $color == "greenmist" { - $clock-digits-color: lighten($base-text-color, 38.5%) !default; + $clock-digits-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; } @if $color == "light" { - $clock-digits-color: lighten($base-text-color, 38.5%) !default; + $clock-digits-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; } @if $color == "softblue" { diff --git a/packages/devextreme-scss/scss/widgets/generic/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/generic/toolbar/_index.scss index 64ba8249983b..4c0e7824965e 100644 --- a/packages/devextreme-scss/scss/widgets/generic/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/toolbar/_index.scss @@ -43,7 +43,8 @@ } .dx-toolbar-menu-section { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; .dx-list-item-content, .dx-toolbar-item-auto-hide { diff --git a/packages/devextreme-scss/scss/widgets/generic/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/tooltip/_colors.scss index e17cab2a0ec3..f713affaaf2a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tooltip/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tooltip/_colors.scss @@ -30,7 +30,7 @@ $tooltip-border-radius: $base-border-radius !default; $tooltip-color: $base-text-color !default; $tooltip-bg: $base-bg !default; $tooltip-border-color: $overlay-border-color !default; - $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default; + $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default; } @if $color == "contrast" { @@ -49,7 +49,7 @@ $tooltip-border-radius: $base-border-radius !default; @if $color == "darkmoon" { $tooltip-color: $base-text-color !default; - $tooltip-bg: lighten($base-bg, 14%) !default; // #465672 => #62789e + $tooltip-bg: color.adjust($base-bg, $lightness: 14%, $space: hsl) !default; // #465672 => #62789e $tooltip-border-color: $overlay-border-color !default; $tooltip-shadow-color: $overlay-content-shadow-color !default; } @@ -63,21 +63,21 @@ $tooltip-border-radius: $base-border-radius !default; @if $color == "greenmist" { $tooltip-color: $base-text-color !default; - $tooltip-bg: lighten($base-bg, 100%) !default; + $tooltip-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $tooltip-border-color: $overlay-border-color !default; - $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default; + $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default; } @if $color == "light" { $tooltip-color: $base-text-color !default; $tooltip-bg: $base-bg !default; $tooltip-border-color: $overlay-border-color !default; - $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default; + $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default; } @if $color == "softblue" { $tooltip-color: $base-text-color !default; $tooltip-bg: $base-bg !default; $tooltip-border-color: $overlay-border-color !default; - $tooltip-shadow-color: color.change(darken($tooltip-bg, 100%), $alpha: 0.1) !default; + $tooltip-shadow-color: color.change(color.adjust($tooltip-bg, $lightness: -100%, $space: hsl), $alpha: 0.1) !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/generic/tooltip/_index.scss index 52fd1cadf141..2fcb4d3b72bf 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tooltip/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tooltip/_index.scss @@ -10,7 +10,8 @@ .dx-tooltip-wrapper { .dx-overlay-content { - border: 1px solid $tooltip-border-color; + border: 1px solid; + border-color: $tooltip-border-color; background-color: $tooltip-bg; color: $tooltip-color; box-shadow: 0 2px 4px $tooltip-shadow-color; @@ -19,7 +20,8 @@ &.dx-popover-wrapper .dx-popover-arrow { &::after { - border: 1px solid $tooltip-border-color; + border: 1px solid; + border-color: $tooltip-border-color; background: $tooltip-bg; } } diff --git a/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss index 93b4a0f4a630..e28f245a9e9b 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeList/_colors.scss @@ -12,7 +12,7 @@ $treelist-selection-spin-icon-color: null !default; @if $color == "carmine" { $treelist-spin-icon-color: $base-icon-color !default; - $treelist-selection-spin-icon-color: lighten($base-icon-color, 100%) !default; + $treelist-selection-spin-icon-color: color.adjust($base-icon-color, $lightness: 100%, $space: hsl) !default; } @if $color == "contrast" { @@ -37,7 +37,7 @@ $treelist-selection-spin-icon-color: null !default; @if $color == "greenmist" { $treelist-spin-icon-color: $base-icon-color !default; - $treelist-selection-spin-icon-color: lighten($treelist-spin-icon-color, 100%) !default; + $treelist-selection-spin-icon-color: color.adjust($treelist-spin-icon-color, $lightness: 100%, $space: hsl) !default; } @if $color == "light" { diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss index 9646a024cf4f..1973ce45a8c4 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss @@ -105,7 +105,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-color: $base-text-color !default; $treeview-focused-bg: $base-focus-bg !default; $treeview-focus-color: $base-focus-color !default; - $treeview-hover-bg: color.change(darken($base-bg, 9%), $alpha: 0.2) !default; + $treeview-hover-bg: color.change(color.adjust($base-bg, $lightness: -9%, $space: hsl), $alpha: 0.2) !default; $treeview-item-hover-color: $base-hover-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss index 8a8c57709b1f..b2f0624e0bf9 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss @@ -52,7 +52,8 @@ .dx-treeview-item-with-checkbox { &.dx-state-focused { >.dx-treeview-item .dx-checkbox .dx-checkbox-icon { - border: 1px solid $checkbox-border-color-focused; + border: 1px solid; + border-color: $checkbox-border-color-focused; } } } diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 032ed8d41b79..d6f74d3f8731 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -150,7 +150,7 @@ $base-link-color: $base-accent !default; $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default; $base-bg: #fff !default; $base-border-color: #e0e0e0 !default; - $base-inverted-bg: darken($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-shadow-color: $base-inverted-bg !default; $base-hover-color: $base-text-color !default; @@ -173,7 +173,7 @@ $base-link-color: $base-accent !default; $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default; $base-bg: #363640 !default; $base-border-color: #515159 !default; - $base-inverted-bg: lighten($base-bg, 100%) !default; + $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $base-element-bg: $base-bg !default; $base-shadow-color: #000 !default; $base-hover-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/accordion/_colors.scss b/packages/devextreme-scss/scss/widgets/material/accordion/_colors.scss index 0c593865c745..ab9381f617c8 100644 --- a/packages/devextreme-scss/scss/widgets/material/accordion/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/accordion/_colors.scss @@ -35,7 +35,7 @@ $accordion-title-active-color: $accordion-color !default; $accordion-title-active-bg: $base-hover-bg !default; $accordion-item-hover-bg: $base-hover-bg !default; $accordion-item-bg: $accordion-background-color !default; -$accordion-title-hover-border-color: darken($base-border-color, 6%) !default; +$accordion-title-hover-border-color: color.adjust($base-border-color, $lightness: -6%, $space: hsl) !default; @if $mode == "light" { $accordion-item-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/material/accordion/_index.scss index 1a1dcd5ae4dc..91a42f634abc 100644 --- a/packages/devextreme-scss/scss/widgets/material/accordion/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/accordion/_index.scss @@ -20,7 +20,8 @@ box-shadow: $accordion-item-shadow; transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1); will-change: margin, height; - border-top: 1px solid $accordion-item-border-color; + border-top: 1px solid; + border-top-color: $accordion-item-border-color; &:first-child { border-top: none; diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss index bc97a100b57e..e4648cc856e8 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss @@ -247,45 +247,45 @@ $button-success-text-selected-color: $button-success-bg !default; @if $mode == "light" { $button-disabled-background: rgba(0, 0, 0, 0.1) !default; $button-shadow-color: rgba(0, 0, 0, 0.24) !default; - $button-normal-hover-bg: darken($button-normal-bg, 8%) !default; - $button-normal-focused-bg: darken($button-normal-bg, 8%) !default; - $button-normal-active-bg: darken($button-normal-bg, 30%) !default; - $button-normal-selected-bg: darken($button-normal-bg, 18%) !default; - $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default; - $button-default-hover-bg: darken($button-default-bg, 8.5%) !default; - $button-default-focused-bg: darken($button-default-bg, 8.5%) !default; - $button-default-active-bg: darken($button-default-bg, 19.5%) !default; - $button-default-selected-bg: darken($button-default-bg, 19.5%) !default; - $button-danger-hover-bg: darken($button-danger-bg, 8.5%) !default; - $button-danger-focused-bg: darken($button-danger-bg, 8.5%) !default; - $button-danger-active-bg: darken($button-danger-bg, 19.5%) !default; - $button-danger-selected-bg: darken($button-danger-bg, 19.5%) !default; - $button-success-hover-bg: darken($button-success-bg, 8.5%) !default; - $button-success-focused-bg: darken($button-success-bg, 8.5%) !default; - $button-success-active-bg: darken($button-success-bg, 19.5%) !default; - $button-success-selected-bg: darken($button-success-bg, 19.5%) !default; + $button-normal-hover-bg: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default; + $button-normal-focused-bg: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default; + $button-normal-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default; + $button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: -18%, $space: hsl) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default; + $button-default-hover-bg: color.adjust($button-default-bg, $lightness: -8.5%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -8.5%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-bg, $lightness: -19.5%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-bg, $lightness: -19.5%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -8.5%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -8.5%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -19.5%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -19.5%, $space: hsl) !default; + $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -8.5%, $space: hsl) !default; + $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -8.5%, $space: hsl) !default; + $button-success-active-bg: color.adjust($button-success-bg, $lightness: -19.5%, $space: hsl) !default; + $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -19.5%, $space: hsl) !default; } @if $mode == "dark" { $button-disabled-background: rgba(255, 255, 255, 0.1) !default; $button-shadow-color: rgba(0, 0, 0, 0.4) !default; - $button-normal-hover-bg: lighten($button-normal-bg, 8%) !default; - $button-normal-focused-bg: lighten($button-normal-bg, 8%) !default; - $button-normal-active-bg: lighten($button-normal-bg, 30%) !default; - $button-normal-selected-bg: lighten($button-normal-bg, 18%) !default; - $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default; - $button-default-hover-bg: lighten($button-default-bg, 8.5%) !default; - $button-default-focused-bg: lighten($button-default-bg, 8.5%) !default; - $button-default-active-bg: lighten($button-default-focused-bg, 19.5%) !default; - $button-default-selected-bg: lighten($button-default-focused-bg, 19.5%) !default; - $button-danger-hover-bg: lighten($button-danger-bg, 8.5%) !default; - $button-danger-focused-bg: lighten($button-danger-bg, 8.5%) !default; - $button-danger-active-bg: lighten($button-danger-bg, 19.5%) !default; - $button-danger-selected-bg: lighten($button-danger-bg, 19.5%) !default; - $button-success-hover-bg: lighten($button-success-bg, 8.5%) !default; - $button-success-focused-bg: lighten($button-success-bg, 8.5%) !default; - $button-success-active-bg: lighten($button-success-bg, 19.5%) !default; - $button-success-selected-bg: lighten($button-success-bg, 19.5%) !default; + $button-normal-hover-bg: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default; + $button-normal-focused-bg: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default; + $button-normal-active-bg: color.adjust($button-normal-bg, $lightness: 30%, $space: hsl) !default; + $button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: 18%, $space: hsl) !default; + $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default; + $button-default-hover-bg: color.adjust($button-default-bg, $lightness: 8.5%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 8.5%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: 19.5%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: 19.5%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 8.5%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 8.5%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 19.5%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 19.5%, $space: hsl) !default; + $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 8.5%, $space: hsl) !default; + $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 8.5%, $space: hsl) !default; + $button-success-active-bg: color.adjust($button-success-bg, $lightness: 19.5%, $space: hsl) !default; + $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 19.5%, $space: hsl) !default; } $button-disabled-text-color: $button-disabled-background !default; diff --git a/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss index 1fff8568e414..49a488bd7e5d 100644 --- a/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss @@ -42,4 +42,4 @@ $calendar-cell-contoured-border-color: color.change($base-accent, $alpha: 0.5) ! $calendar-invalid-focused-border-color: $base-invalid-color !default; $calendar-invalid-faded-border-color: $base-invalid-faded-border-color !default; $calendar-week-number-cell-color: color.change($calendar-color, $alpha: 0.56) !default; -$calendar-week-number-cell-bg: color.change(darken($base-bg, 12%), $alpha: 0.4) !default; +$calendar-week-number-cell-bg: color.change(color.adjust($base-bg, $lightness: -12%, $space: hsl), $alpha: 0.4) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss index 9088d2376bbe..e5fbc98e7bad 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use '../colors' as *; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @@ -10,7 +11,6 @@ @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 @@ -417,7 +417,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-card-divider-color: $cardview-material-card-border-color !default; $cardview-material-card-text-color: $cardview-material-common-text-color !default; $cardview-material-card__cover-bg-color: #FFF !default; - $cardview-material-card__cover--noimage-bg-color: darken($base-bg, 7.84) !default; + $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default; $cardview-material-card--focused-outline-color: $base-accent !default; @@ -432,7 +432,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default; // Header panel item - default state - $cardview-material-header-panel__item-bg-color: darken($base-bg, 7.84) !default; + $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default; $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default; $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default; @@ -442,7 +442,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-header-panel__item--focused-outline-color: $base-accent !default; // Header panel item - hovered - $cardview-material-header-panel__item--hovered-bg-color: darken($cardview-material-header-panel__item-bg-color, 4.31) !default; + $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $lightness: -4.31%, $space: hsl) !default; $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default; $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default; $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default; @@ -462,11 +462,11 @@ $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: darken(saturate(adjust-hue($base-danger, -4), 22.8), 9.61) !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-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone - $cardview-material-header-panel__dropzone-bg-color: mix($base-accent, $base-bg, 8%) !default; + $cardview-material-header-panel__dropzone-bg-color: color.mix($base-accent, $base-bg, 8%) !default; $cardview-material-header-panel__dropzone-border-color: $base-accent !default; $cardview-material-header-panel__dropzone-text-color: $base-accent !default; $cardview-material-header-panel__dropzone__icon-color: $base-accent !default; @@ -481,7 +481,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default; $cardview-material-nodata-view-text-color: $base-label-color !default; $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default; - $cardview-material-nodata-view__icon-bg-color: darken($base-bg, 7.84) !default; + $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; // Search highlight $cardview-material-card__content__field-value--highlighted-bg-color: $base-warning !default; @@ -489,7 +489,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; // Column chooser - $cardview-material-columnchooser--empty__message-color: lighten($cardview-material-common-text-color, 26%) !default; + $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default; } @if $mode == 'dark' { @@ -505,14 +505,14 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-card-divider-color: $cardview-material-card-border-color !default; $cardview-material-card-text-color: $cardview-material-common-text-color !default; $cardview-material-card__cover-bg-color: #FFF !default; - $cardview-material-card__cover--noimage-bg-color: lighten(desaturate($base-bg, 0.3), 8.04) !default; + $cardview-material-card__cover--noimage-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default; $cardview-material-card__cover--noimage__icon-color: color.change($cardview-material-common-text-color, $alpha: 0.38) !default; $cardview-material-card--focused-outline-color: $base-accent !default; // Card - selected - $cardview-material-card--selected-bg-color: color.change(lighten($base-accent, 19.22), $alpha: 0.08) !default; - $cardview-material-card--selected-border-color: color.change(lighten($base-accent, 19.22), $alpha: 0.32) !default; + $cardview-material-card--selected-bg-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.08) !default; + $cardview-material-card--selected-border-color: color.change(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $alpha: 0.32) !default; $cardview-material-card--selected-divider-color: $cardview-material-card--selected-border-color !default; $cardview-material-card--selected-text-color: $cardview-material-card-text-color !default; $cardview-material-card--selected__cover-bg-color: $cardview-material-card__cover-bg-color !default; @@ -520,7 +520,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-card--selected__cover--noimage__icon-color: $cardview-material-card__cover--noimage__icon-color !default; // Header panel item - default - $cardview-material-header-panel__item-bg-color: lighten(desaturate($base-bg, 0.3), 8.04) !default; + $cardview-material-header-panel__item-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default; $cardview-material-header-panel__item-border-color: $cardview-material-header-panel__item-bg-color !default; $cardview-material-header-panel__item-text-color: $cardview-material-common-text-color !default; $cardview-material-header-panel__item__icon-color: $cardview-material-common-text-color !default; @@ -530,7 +530,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-header-panel__item--focused-outline-color: $base-accent !default; // Header panel item - hovered - $cardview-material-header-panel__item--hovered-bg-color: lighten(desaturate($cardview-material-header-panel__item-bg-color, 3.47), 2.16) !default; + $cardview-material-header-panel__item--hovered-bg-color: color.adjust($cardview-material-header-panel__item-bg-color, $saturation: -3.47%, $space: hsl, $lightness: 2.16%) !default; $cardview-material-header-panel__item--hovered-border-color: $cardview-material-header-panel__item--hovered-bg-color !default; $cardview-material-header-panel__item--hovered-text-color: $cardview-material-header-panel__item-text-color !default; $cardview-material-header-panel__item--hovered__icon-color: $cardview-material-header-panel__item__icon-color !default; @@ -550,11 +550,11 @@ $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: darken(desaturate($base-danger, 0.27), 7.45) !default; + $cardview-material-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; $cardview-material-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; // Header panel Drop-zone - $cardview-material-header-panel__dropzone-bg-color: mix(lighten($base-accent, 19.22), $base-bg, 8%) !default; + $cardview-material-header-panel__dropzone-bg-color: color.mix(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), $base-bg, 8%) !default; $cardview-material-header-panel__dropzone-border-color: $base-accent !default; $cardview-material-header-panel__dropzone-text-color: $base-accent !default; $cardview-material-header-panel__dropzone__icon-color: $base-accent !default; @@ -569,7 +569,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-nodata-view-bg-color: $cardview-material-common-bg-color !default; $cardview-material-nodata-view-text-color: $base-label-color !default; $cardview-material-nodata-view__icon-color: $cardview-material-nodata-view-text-color !default; - $cardview-material-nodata-view__icon-bg-color: lighten(desaturate($base-bg, 0.3), 8.04) !default; + $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default; // Search highlight $cardview-material-card__content__field-value--highlighted-bg-color: $base-warning !default; @@ -577,7 +577,7 @@ $cardview-material-columnchooser--empty__message-color: null !default; $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; // Column chooser - $cardview-material-columnchooser--empty__message-color: lighten($cardview-material-common-text-color, 26%) !default; + $cardview-material-columnchooser--empty__message-color: color.adjust($cardview-material-common-text-color, $lightness: 26%, $space: hsl) !default; } $cardview-bg-color: $cardview-material-common-bg-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss index 6608cd987992..019f9cf1d893 100644 --- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss @@ -140,7 +140,7 @@ $chat-file-secondary-color: $base-icon-color !default; } @else if $mode == "dark" { - $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default; + $chat-bubble-background-color-primary: rgba(color.adjust($base-accent, $lightness: 19.22%, $space: hsl), 0.08) !default; $chat-file-container-box-shadow: 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.4) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_colors.scss index d6a6599d4101..9c1a2550378d 100644 --- a/packages/devextreme-scss/scss/widgets/material/checkBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/checkBox/_colors.scss @@ -8,5 +8,5 @@ $checkbox-border-color: color.change($base-text-color, $alpha: 0.54) !default; $checkbox-checked-color: $base-element-bg !default; $checkbox-indeterminate-bg: $base-accent !default; $checkbox-bg: $base-accent !default; -$checkbox-hover-border-color: darken($base-accent, 12%) !default; +$checkbox-hover-border-color: color.adjust($base-accent, $lightness: -12%, $space: hsl) !default; $checkbox-invalid-focused-border-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/color.scss b/packages/devextreme-scss/scss/widgets/material/color.scss index 635f0dd492d9..c68bdf88940c 100644 --- a/packages/devextreme-scss/scss/widgets/material/color.scss +++ b/packages/devextreme-scss/scss/widgets/material/color.scss @@ -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; +} diff --git a/packages/devextreme-scss/scss/widgets/material/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/material/dataGrid/_index.scss index 2f3ac5640a1f..4366b1e0ab37 100644 --- a/packages/devextreme-scss/scss/widgets/material/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/dataGrid/_index.scss @@ -127,10 +127,12 @@ .dx-row.dx-datagrid-group-footer { &.dx-column-lines { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } & > td { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; background-color: $datagrid-summary-bg; border-left-width: 0; border-right-width: 0; @@ -140,6 +142,7 @@ .dx-datagrid-sticky-columns { .dx-row.dx-datagrid-group-footer > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-row.dx-row-lines, .dx-row.dx-group-row, .dx-datagrid-group-footer, .dx-edit-row { diff --git a/packages/devextreme-scss/scss/widgets/material/dateBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/dateBox/_colors.scss index 1ca122b437fb..26b66fb86c5c 100644 --- a/packages/devextreme-scss/scss/widgets/material/dateBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/dateBox/_colors.scss @@ -3,4 +3,4 @@ @use "../colors" as *; // adduse -$timeview-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.2) !default; +$timeview-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/material/diagram/_colors.scss index 4476c80ab90c..54536ba04aab 100644 --- a/packages/devextreme-scss/scss/widgets/material/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/diagram/_colors.scss @@ -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; diff --git a/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss index 21c834d22310..66b6eb16c672 100644 --- a/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/diagram/_index.scss @@ -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; } @@ -233,7 +234,8 @@ $diagram-toolbox-title-size: 18px; } .dx-diagram-toolbox-input-container { - border-bottom: 1px solid $accordion-item-border-color; + border-bottom: 1px solid; + border-bottom-color: $accordion-item-border-color; } .dx-diagram-toolbox-input { @@ -286,7 +288,8 @@ $diagram-toolbox-title-size: 18px; padding-top: $diagram-toolbox-mobile-padding; .dx-diagram-toolbox-input-container { - border-top: 1px solid $accordion-item-border-color; + border-top: 1px solid; + border-top-color: $accordion-item-border-color; } } } @@ -299,7 +302,8 @@ $diagram-toolbox-title-size: 18px; .dx-accordion-item { border-left: none; border-right: none; - border-bottom: 1px solid $accordion-item-border-color; + border-bottom: 1px solid; + border-bottom-color: $accordion-item-border-color; border-top: none; box-shadow: none; } diff --git a/packages/devextreme-scss/scss/widgets/material/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/material/fieldset/_index.scss index e47282daa6ab..3c9db3ceaa69 100644 --- a/packages/devextreme-scss/scss/widgets/material/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/fieldset/_index.scss @@ -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) { diff --git a/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss index 44c38bc32255..1230d18b8fe7 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileManager/_colors.scss @@ -5,7 +5,7 @@ // adduse $filemanager-border-color: $base-border-color !default; -$filemanager-file-toolbar-bg: darken($base-bg, 3%) !default; +$filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; $filemanager-editor-active-bg: color.change($base-text-color, $alpha: 0.1) !default; $filemanager-dirs-tree-item-focus-color: $base-text-color !default; $filemanager-breadcrumbs-item-focus-bg: $base-border-color !default; @@ -23,12 +23,12 @@ $filemanager-progressbox-shadow-color: null !default; @if $mode == "light" { - $filemanager-dirs-tree-item-focus-bg: darken($base-bg, 8%) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; } @if $mode == "dark" { - $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default; - $filemanager-progressbox-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default; + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; + $filemanager-progressbox-shadow-color: color.change(color.adjust($base-shadow-color, $lightness: -100%, $space: hsl), $alpha: 0.3) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/material/fileManager/_index.scss index 5e3a018b2f47..21a3930027e6 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileManager/_index.scss @@ -96,7 +96,8 @@ } .dx-filemanager-fileuploader-dropzone-placeholder { - border: 2px solid $base-accent; + border: 2px solid; + border-color: $base-accent; } .dx-filemanager-container { @@ -145,7 +146,8 @@ } &.dx-state-focused { - border: $filemanager-file-item-focused-border 1px solid; + border: 1px solid; + border-color: $filemanager-file-item-focused-border; } &.dx-item-selected.dx-state-focused { diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss index c4731276a1ff..fd0b584243d0 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss @@ -15,7 +15,7 @@ $fileuploader-file-icon-color: $base-icon-color !default; * $name 20. File status text color * $type color */ -$fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default; +$fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default; /** * $name 30. Drag-and-drop border color diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss index faacfc6a86a0..4de6fd37e24a 100644 --- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_index.scss @@ -62,7 +62,8 @@ $material-fileuploader-file-wrapper-border-size: 3px; .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors padding: $material-fileuploader-vertical-padding * 2 $material-fileuploader-vertical-padding + 2px; - border: $material-fileuploader-file-wrapper-border-size dashed $fileuploader-border-color; + border: $material-fileuploader-file-wrapper-border-size dashed; + border-color: $fileuploader-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/material/form/_index.scss b/packages/devextreme-scss/scss/widgets/material/form/_index.scss index 7d298463bbce..b54848edd0a7 100644 --- a/packages/devextreme-scss/scss/widgets/material/form/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/form/_index.scss @@ -18,7 +18,8 @@ .dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors & > .dx-form-group-content { - border-top: 1px solid $form-group-border-color; + border-top: 1px solid; + border-top-color: $form-group-border-color; padding-bottom: $material-form-group-content-padding-bottom; padding-top: $material-form-group-caption-bottom-padding; margin-top: $material-form-group-caption-bottom-margin; diff --git a/packages/devextreme-scss/scss/widgets/material/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/material/gallery/_index.scss index f5dd0458bf72..3ca248682ce6 100644 --- a/packages/devextreme-scss/scss/widgets/material/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gallery/_index.scss @@ -86,7 +86,8 @@ .dx-gallery-indicator-item { border-radius: 50%; box-sizing: border-box; - border: 1px solid $gallery-indicator-item-border-color; + border: 1px solid; + border-color: $gallery-indicator-item-border-color; pointer-events: auto; margin: 5px - math.div($material-gallery-indicator-size, 2) 6px; width: $material-gallery-indicator-size; @@ -99,7 +100,8 @@ width: $material-gallery-indicator-selected-size; height: $material-gallery-indicator-selected-size; background: $gallery-indicator-item-selected-bg; - border: 2px solid $gallery-indicator-selected-border-color; + border: 2px solid; + border-color: $gallery-indicator-selected-border-color; margin: 5px - math.div($material-gallery-indicator-selected-size, 2) 6px; } diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss index 883be5996e61..c63983f21e0e 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss @@ -18,10 +18,10 @@ $gantt-parent-task-background-color: null !default; } @if $mode == "light" { - $gantt-collapsable-row-bg: darken($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default; } @if $mode == "dark" { - $gantt-collapsable-row-bg: lighten($base-bg, 5%) !default; + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss index 6433a70d293c..460bec186628 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss @@ -15,11 +15,13 @@ $gantt-successor-background-color: white; .dx-gantt { - border: 1px solid $base-border-color; + border: 1px solid; + border-color: $base-border-color; .dx-gantt-toolbar-wrapper { padding: 5px; - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; .dx-gantt-toolbar-separator { border-left-color: $base-border-color; @@ -59,15 +61,18 @@ $gantt-successor-background-color: white; .dx-gantt-tsac, .dx-gantt-tsa { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; } .dx-gantt-hb { - border-top: 1px solid $base-border-color; + border-top: 1px solid; + border-top-color: $base-border-color; } .dx-gantt-vb { - border-left: 1px solid $base-border-color; + border-left: 1px solid; + border-left-color: $base-border-color; } .dx-gantt-taskWrapper { @@ -189,17 +194,19 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-frame { height: 100%; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); border-radius: $base-border-radius; .dx-gantt-task-edit-progress { - border-color: transparent transparent darken($base-accent, 10%) transparent; + border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; &::before { width: 12px; height: 6px; bottom: -14px; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); } } @@ -222,7 +229,8 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { background: $gantt-successor-background-color; - border: 1px solid darken($base-accent, 10%); + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); width: $gantt-dependency-successor-size; height: $gantt-dependency-successor-size; margin: auto; @@ -257,16 +265,20 @@ $gantt-successor-background-color: white; } .dx-gantt-arrow { - border: 5px solid $base-text-color; + border: 5px solid; + border-color: $base-text-color; } .dx-gantt-tm { - border-left: 1px dashed $base-accent; + border-left: 1px dashed; + border-left-color: $base-accent; } .dx-gantt-ti { - border-left: 1px dashed $base-accent; - border-right: 1px dashed $base-accent; + border-left: 1px dashed; + border-left-color: $base-accent; + border-right: 1px dashed; + border-right-color: $base-accent; background-color: color.change($base-accent, $alpha: 0.15); } diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss index 0a9bb4f37ad5..270beb644d98 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss @@ -13,7 +13,7 @@ $datagrid-base-color: $base-text-color !default; */ $datagrid-base-background-color: $base-bg !default; $datagrid-border-color: $base-border-color !default; -$datagrid-border: 1px solid $datagrid-border-color !default; +$datagrid-border: 1px solid !default; /** * $name 20. Header text color @@ -45,7 +45,7 @@ $header-filter-color-empty: null !default; * $name 51. Selected row background color * $type color */ -$datagrid-selection-bg: mix($base-accent, $base-bg, 10%) !default; +$datagrid-selection-bg: color.mix($base-accent, $base-bg, 10%) !default; /** * $name 52. Selected row border color @@ -69,7 +69,7 @@ $datagrid-row-focused-color: $base-text-color !default; * $name 70. Focused row background color * $type color */ -$datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default; +$datagrid-row-focused-bg: color.mix($base-accent, $base-bg, 20%) !default; $datagrid-hover-bg: null !default; $datagrid-row-hovered-color: $base-hover-color !default; @@ -106,14 +106,14 @@ $datagrid-group-row-color: color.change($datagrid-base-color, $alpha: 0.54) !def * $type color */ $datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default; -$datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default; +$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; /** * $name 105. Highlighted text color * $type color */ $datagrid-search-color: $base-inverted-text-color !default; -$datagrid-chevron-icon-color: lighten($base-spin-icon-color, 38.5%) !default; +$datagrid-chevron-icon-color: color.adjust($base-spin-icon-color, $lightness: 38.5%, $space: hsl) !default; /** * $name 110. Highlighted text background color @@ -131,14 +131,14 @@ $datagrid-row-error-color: null !default; * $name 120. Error row background color * $type color */ -$datagrid-row-error-bg: mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; +$datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; $datagrid-link-color: $base-link-color !default; /** * $name 75. Focused cell border color * $type color */ -$datagrid-focused-border-color: mix($base-bg, $base-accent, 20%) !default; +$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default; /** * $name 80. Editor background color @@ -161,10 +161,10 @@ $datagrid-row-alternation-bg: null !default; * $type color */ $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; -$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default; +$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; -$datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default; +$datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; $datagrid-active-header-filter-icon-color: $base-accent !default; $datagrid-text-stub-background-image-path: null !default; $datagrid-filter-panel-color: $base-accent !default; @@ -175,30 +175,30 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; @if $mode == "light" { $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default; - $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; $header-filter-color: $datagrid-columnchooser-item-color !default; $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default; $datagrid-row-error-color: $base-inverted-text-color !default; $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; - $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 4%) !default; - $datagrid-hover-bg: darken($datagrid-base-background-color, 4%) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; + $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/material/color-schemes/light/grid/text-stub.png') !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; } @if $mode == "dark" { $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.72) !default; - $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 12%) !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; $header-filter-color: $datagrid-columnchooser-item-color !default; $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default; $datagrid-row-error-color: rgba(255, 255, 255, 1) !default; - $datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default; - $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default; - $datagrid-hover-bg: lighten($datagrid-base-background-color, 4%) !default; + $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; + $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/material/color-schemes/dark/grid/text-stub.png') !default; $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss index 758c3dd47f0a..69495d7b86e1 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -31,11 +32,11 @@ $material-grid-base-row-border: 1px solid transparent; $material-grid-base-border-color: $datagrid-border-color; $material-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; $material-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; -$material-grid-base-header-cell-vertical-padding: round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2)); +$material-grid-base-header-cell-vertical-padding: math.round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2)); $material-grid-base-command-select-column-width: $material-grid-base-checkbox-size + 2 * $material-grid-base-cell-horizontal-padding; -$material-grid-base-cell-vertical-padding: round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2)); +$material-grid-base-cell-vertical-padding: math.round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2)); $material-grid-base-cell-padding: $material-grid-base-cell-vertical-padding $material-grid-base-cell-horizontal-padding; $grid-masterdetail-padding: 16px; $material-grid-base-group-panel-message-line-height: $material-button-text-line-height; @@ -226,8 +227,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- } // T838734 - border-top: 1px solid $datagrid-row-alternation-bg; - border-bottom: 1px solid $datagrid-row-alternation-bg; + border-top: 1px solid; + border-top-color: $datagrid-row-alternation-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-alternation-bg; } .dx-link { @@ -236,11 +239,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-row-lines > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-column-lines > td { border-left: $datagrid-border; + border-left-color: $datagrid-border-color; border-right: $datagrid-border; + border-right-color: $datagrid-border-color; } .dx-error-row { @@ -569,7 +575,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-popup-title { background-color: transparent; - border-bottom: 1px solid $popup-title-border-color; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; .dx-toolbar-label { font-size: $material-m-font-size; @@ -656,6 +663,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- right: 0; pointer-events: none; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } .dx-#{$widget-name}-table { @@ -666,6 +674,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-row { > td { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; line-height: $material-grid-base-header-line-height; font-weight: $datagrid-columnchooser-font-weight; font-size: $material-grid-base-header-cell-font-size; @@ -712,7 +721,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-row { &.dx-header-row { > td { - border-right: 1px solid $material-grid-base-border-color; + border-right: 1px solid; + border-right-color: $material-grid-base-border-color; } } } @@ -724,7 +734,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-row { &.dx-header-row { > td { - border-left: 1px solid $material-grid-base-border-color; + border-left: 1px solid; + border-left-color: $material-grid-base-border-color; &:first-child { border-left: none; @@ -833,6 +844,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-#{$widget-name}-header-panel { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; padding: $material-grid-base-header-panel-padding; .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon { @@ -897,7 +909,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- } .dx-#{$widget-name}-rowsview { - border-top: 1px solid $material-grid-base-border-color; + border-top: 1px solid; + border-top-color: $material-grid-base-border-color; .dx-#{$widget-name}-headers + &, &.dx-#{$widget-name}-after-headers { @@ -915,11 +928,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- &.dx-edit-row:first-child > td { border-top-width: 0; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } &.dx-edit-row > td { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } } @@ -931,7 +947,9 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- > .dx-#{$widget-name}-group-space, .dx-master-detail-cell:not(.dx-row-lines) { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; } } @@ -970,8 +988,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-row-removed > td { background-color: $datagrid-row-removed-bg; - border-top: 1px solid $datagrid-cell-removed-border-color; - border-bottom: 1px solid $datagrid-cell-removed-border-color; + border-top: 1px solid; + border-top-color: $datagrid-cell-removed-border-color; + border-bottom: 1px solid; + border-bottom-color: $datagrid-cell-removed-border-color; color: $datagrid-cell-removed-text-color; } @@ -1034,8 +1054,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- &:not(.dx-row-lines) { & > td, & > tr:first-child > td { - border-top: 1px solid $datagrid-focused-border-color; - border-bottom: 1px solid $datagrid-focused-border-color; + border-top: 1px solid; + border-bottom: 1px solid; + border-top-color: $datagrid-focused-border-color; + border-bottom-color: $datagrid-focused-border-color; } } } @@ -1077,8 +1099,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- } &:not(.dx-row-lines) > td { - border-bottom: 1px solid $datagrid-selection-bg; - border-top: 1px solid $datagrid-selection-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; } &.dx-row-lines > td { @@ -1100,7 +1124,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- padding: $material-grid-base-cell-padding; padding-right: $material-texteditor-invalid-badge-size; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { padding-left: $material-texteditor-invalid-badge-size; padding-right: $material-grid-base-cell-horizontal-padding; @@ -1114,7 +1138,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- right: $material-invalid-badge-size; background-color: transparent; - @at-root #{selector-append(".dx-rtl", &)}, + @at-root #{selector.append(".dx-rtl", &)}, .dx-rtl & { left: $material-invalid-badge-size; } @@ -1182,6 +1206,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-#{$widget-name}-bottom-load-panel { border-top: $datagrid-border; + border-top-color: $datagrid-border-color; background-color: $datagrid-base-background-color; } @@ -1191,7 +1216,9 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-#{$widget-name}-total-footer { border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; border-top: $datagrid-border; + border-top-color: $datagrid-border-color; > .dx-#{$widget-name}-content { padding: 0; @@ -1261,14 +1288,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-selection.dx-row:hover { & > td, & > tr > td { + border-right-color: $datagrid-row-selected-border-color; + &:not(.dx-focused) { &.dx-#{$widget-name}-group-space { border-left-color: $datagrid-selection-bg; } } - border-right-color: $datagrid-row-selected-border-color; - &.dx-pointer-events-none { border-left-color: $datagrid-row-selected-border-color; } @@ -1284,7 +1311,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- .dx-header-filter-menu { .dx-popup-content { padding: 12px 8px 0 8px; - border-bottom: 1px solid $material-grid-base-border-color; + border-bottom: 1px solid; + border-bottom-color: $material-grid-base-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_colors.scss index 787fcd0fd06c..78a44487c67d 100644 --- a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_colors.scss @@ -18,9 +18,9 @@ $htmleditor-table-border-color: $base-border-color !default; @if $mode == "light" { - $htmleditor-mention-bg: darken($base-bg, 12%) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default; } @if $mode == "dark" { - $htmleditor-mention-bg: lighten($base-bg, 12%) !default; + $htmleditor-mention-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_index.scss index a278d6588185..690914352545 100644 --- a/packages/devextreme-scss/scss/widgets/material/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/htmlEditor/_index.scss @@ -27,7 +27,8 @@ position: relative; &:first-child { - border-bottom: 1px solid $texteditor-border-color; + border-bottom: 1px solid; + border-bottom-color: $texteditor-border-color; } } @@ -50,7 +51,8 @@ } &.dx-invalid { - border: 1px solid $htmleditor-invalid-faded-border-color; + border: 1px solid; + border-color: $htmleditor-invalid-faded-border-color; &.dx-state-focused { border-color: $htmleditor-invalid-border-color; @@ -107,7 +109,8 @@ background-color: $texteditor-hover-bg; &:not(.dx-invalid) { - border-bottom: 1px solid $texteditor-hover-border-color; + border-bottom: 1px solid; + border-bottom-color: $texteditor-hover-border-color; } } @@ -127,7 +130,8 @@ } &.dx-state-hover:not(.dx-state-focused) { - border-bottom: 2px solid $texteditor-hover-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-hover-border-color; } &.dx-state-disabled, @@ -169,7 +173,8 @@ &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: 2px solid $texteditor-focused-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-focused-border-color; transform: scale(1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1); } @@ -303,7 +308,8 @@ .dx-fileuploader-input-wrapper { padding: $material-html-editor-add-image-dialog-fileuploader-padding; - border: 3px dashed $base-border-color; + border: 3px dashed; + border-color: $base-border-color; .dx-fileuploader-input-label { border-width: 0; diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss index 49fd52f24388..fd5a68ebb9fe 100644 --- a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss @@ -1,4 +1,5 @@ @use "../colors" as *; +@use "../color" as extcolor; @use "sass:color"; // adduse @@ -9,11 +10,11 @@ $informer-info-color: $base-text-color !default; $informer-info-background-color: null !default; @if $mode == "light" { - $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, 1), 24.92), 38.24); - $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -240), 100.00), 48.63); + $informer-error-background-color: color.adjust($base-danger, $hue: 1deg, $saturation: -24.92%, $space: hsl, $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: darken(desaturate(adjust-hue($base-danger, 1), 41.80), 53.92); - $informer-info-background-color: darken(saturate(adjust-hue($base-text-color, 240), 6.04), 70.78); + $informer-error-background-color: color.adjust($base-danger, $hue: 1deg, $saturation: -41.80%, $space: hsl, $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/list/_colors.scss b/packages/devextreme-scss/scss/widgets/material/list/_colors.scss index a0f7f65006ee..756f5f8280fb 100644 --- a/packages/devextreme-scss/scss/widgets/material/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/list/_colors.scss @@ -65,7 +65,7 @@ $list-menu-button-default-bg: $button-default-bg !default; $list-menu-button-delete-bg: $base-danger !default; $list-button-delete-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; $list-item-ghost-bg: $base-bg !default; -$list-item-ghost-color: lighten($base-text-color, 38.5%) !default; +$list-item-ghost-color: color.adjust($base-text-color, $lightness: 38.5%, $space: hsl) !default; $list-item-ghost-border-color: $base-accent !default; $list-item-ghost-shadow-color: $base-shadow-color !default; $list-icon-color: $base-icon-color !default; @@ -75,13 +75,13 @@ $list-item-chevron-icon-color: $base-spin-icon-color !default; $list-item-selected-bg: color.change(#000, $alpha: 0.12) !default; $list-item-selected-hover-bg: color.change(#000, $alpha: 0.14) !default; $list-item-focused-selected-bg: color.change(#000, $alpha: 0.18) !default; - $list-item-active-bg: darken($base-bg, 20%) !default; + $list-item-active-bg: color.adjust($base-bg, $lightness: -20%, $space: hsl) !default; } @if $mode == "dark" { $list-item-selected-bg: color.change(#6e6e80, $alpha: 0.5) !default; $list-item-selected-hover-bg: color.change(#6e6e80, $alpha: 0.35) !default; $list-item-focused-selected-bg: color.change(#6e6e80, $alpha: 0.4) !default; - $list-item-active-bg: lighten($base-bg, 20%) !default; + $list-item-active-bg: color.adjust($base-bg, $lightness: 20%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss index e635d94c8092..f8a43b0e9424 100644 --- a/packages/devextreme-scss/scss/widgets/material/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/list/_index.scss @@ -17,8 +17,8 @@ $material-list-item-border-width: 1px; $material-list-border-width: 1px; -$material-list-border: $material-list-border-width solid $list-border-color; -$material-list-item-border: $material-list-item-border-width solid $list-border-color; +$material-list-border: $material-list-border-width solid; +$material-list-item-border: $material-list-item-border-width solid; $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding - 2px; .dx-list-item-chevron { @@ -178,6 +178,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding &:not(:last-child) { padding-bottom: $material-list-vertical-padding; border-bottom: $material-list-item-border; + border-bottom-color: $list-border-color; } } @@ -292,8 +293,10 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding &.dx-state-hover { color: $list-item-ghost-color; background: $list-item-ghost-bg; - border-top: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5); - border-bottom: 1px solid color.change($list-item-ghost-border-color, $alpha: 0.5); + border-top: 1px solid; + border-top-color: color.change($list-item-ghost-border-color, $alpha: 0.5); + border-bottom: 1px solid; + border-bottom-color: color.change($list-item-ghost-border-color, $alpha: 0.5); box-shadow: 0 0 1px color.change($list-item-ghost-shadow-color, $alpha: 0.1), 0 1px 3px color.change($list-item-ghost-shadow-color, $alpha: 0.2); } } @@ -342,6 +345,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding .dx-list-border-visible { border: $material-list-border; + border-color: $list-border-color; } .dx-list-item-before-bag { @@ -450,7 +454,8 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding @include dx-icon(trash); color: $base-inverted-text-color; - border: 1px solid $list-button-delete-shadow-color; + border: 1px solid; + border-color: $list-button-delete-shadow-color; border-right-color: transparent; background-color: $list-menu-button-delete-bg; font-size: $material-base-icon-size; @@ -494,7 +499,8 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding .dx-list-context-menucontent { background-color: $list-holdmenu-bg; - border: 1px solid $list-holdmenu-border-color; + border: 1px solid; + border-color: $list-holdmenu-border-color; border-radius: 0; box-shadow: 0 3px 10px $list-holdmenu-shadow-color; } diff --git a/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss index 987f9a8c7f7d..38a079202f40 100644 --- a/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss @@ -15,12 +15,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: lighten(desaturate(adjust-hue($base-accent, 4), 6.73), 25.88) !default; - $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 4), 6.87), 34.71) !default; + $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 4deg, $saturation: -6.73%, $space: hsl, $lightness: 25.88%) !default; + $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 4deg, $saturation: -6.87%, $space: hsl, $lightness: 34.71%) !default; } @else if $mode == "dark" { - $load-indicator-animation-sparkle-bg-color1: lighten($base-accent, 19.22) !default; - $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, 2), 58.44), 1.18) !default; - $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 3), 64.56), 7.45) !default; + $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%, $space: hsl, $lightness: 1.18%) !default; + $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: -64.56%, $space: hsl, $lightness: -7.45%) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/material/loadPanel/_index.scss index 662097063da0..038ca7b6cf9f 100644 --- a/packages/devextreme-scss/scss/widgets/material/loadPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/loadPanel/_index.scss @@ -10,7 +10,8 @@ .dx-loadpanel-content { - border: 1px solid $loadpanel-border-color; + border: 1px solid; + border-color: $loadpanel-border-color; background: $loadpanel-content-bg; padding: 13px; border-radius: 50%; diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss index 2122cf0f63b4..48abaf352310 100644 --- a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss @@ -11,7 +11,7 @@ $menu-item-hover-bg: $base-hover-bg !default; * $name 10. Text color * $type color */ -$menu-color: lighten($base-text-color, 46%) !default; +$menu-color: color.adjust($base-text-color, $lightness: 46%, $space: hsl) !default; $menu-item-expanded-color: $menu-color !default; @@ -28,13 +28,13 @@ $menu-item-focused-selected-bg: null !default; $menu-container-shadow-color: null !default; @if $mode == "light" { - $menu-item-selected-bg: lighten($base-text-color, 88%) !default; + $menu-item-selected-bg: color.adjust($base-text-color, $lightness: 88%, $space: hsl) !default; $menu-item-focused-selected-bg: color.change(#000, $alpha: 0.14) !default; $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; } @if $mode == "dark" { - $menu-item-selected-bg: lighten($base-bg, 8%) !default; + $menu-item-selected-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; $menu-item-focused-selected-bg: color.change(#fff, $alpha: 0.14) !default; $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_index.scss b/packages/devextreme-scss/scss/widgets/material/menu/_index.scss index 9eb88fa7aa67..74dbf81fdb1c 100644 --- a/packages/devextreme-scss/scss/widgets/material/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/menu/_index.scss @@ -83,7 +83,8 @@ $material-menu-font-size: $material-base-font-size; background-color: $menu-popup-bg; .dx-treeview { - border: 1px solid $menu-popup-border-color; + border: 1px solid; + border-color: $menu-popup-border-color; border-radius: $base-border-radius; &, @@ -109,6 +110,7 @@ $material-menu-font-size: $material-base-font-size; } .dx-treeview-node-container:first-child > .dx-treeview-node { - border-bottom: 1px solid $menu-popup-border-color; + border-bottom: 1px solid; + border-bottom-color: $menu-popup-border-color } } diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss index 60aa28e4caac..d892b9375755 100644 --- a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss @@ -20,7 +20,7 @@ $pivotgrid-data-area-color: $base-text-color !default; * $name 20. Total background color * $type color */ -$pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 13.3%), $alpha: 0.2) !default; +$pivotgrid-totalcolor: color.change(color.adjust($pivotgrid-area-background, $lightness: -13.3%, $space: hsl), $alpha: 0.2) !default; /** * $name 30. Grand total background color @@ -32,7 +32,7 @@ $pivotgrid-grandtotalcolor: $base-hover-bg !default; * $name 40. Field area text color * $type color */ -$pivotgrid-field-area-text-color: color.change(darken($pivotgrid-area-color, 26.2%), $alpha: 0.3) !default; +$pivotgrid-field-area-text-color: color.change(color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl), $alpha: 0.3) !default; $pivotgrid-accent-color: $base-accent !default; $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; @@ -41,9 +41,9 @@ $pivotgrid-position-indicator-color: gray !default; $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; @if $mode == "light" { - $pivotgrid-field-area-box-background-color: darken($base-bg, 12%) !default; + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default; } @if $mode == "dark" { - $pivotgrid-field-area-box-background-color: lighten($base-bg, 12%) !default; + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/popup/_index.scss b/packages/devextreme-scss/scss/widgets/material/popup/_index.scss index 326ca6302c73..9cec3c3b089e 100644 --- a/packages/devextreme-scss/scss/widgets/material/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/popup/_index.scss @@ -35,7 +35,8 @@ $material-popup-toolbar-label-font-size: $material-m-font-size; .dx-popup-title { position: relative; min-height: 28px; - border-bottom: 1px solid $popup-title-border-color; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; background: $popup-title-bg; color: $popup-title-color; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss index d44b6de9de96..65561b9d343e 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss @@ -10,9 +10,9 @@ * $type color */ $scheduler-base-border-color: $base-border-color !default; -$scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default; +$scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; $scheduler-cell-hover-bg: $base-hover-bg !default; -$scheduler-group-separator-border-color: darken($base-border-color, 13%) !default; +$scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -13%, $space: hsl) !default; /** * $name 20. Hour separator color @@ -51,7 +51,7 @@ $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12 * $type color */ $scheduler-first-month-border-color: $base-border-color !default; -$scheduler-droppable-cell-background-color: darken($base-element-bg, 5%) !default; +$scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; $scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.54) !default; $scheduler-workspace-background-color: $base-bg !default; $scheduler-workspace-accent-color: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss index 954acbbfb214..827807e37dee 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss @@ -62,7 +62,7 @@ $material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-wor $material-scheduler-month-date-text-size: 14px; -$scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color; +$scheduler-first-of-month-border: 1px solid; $material-scheduler-agenda-time-panel-cell-padding: 8px; @@ -115,6 +115,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; height: $material-scheduler-all-day-table-cell-height; font-size: $material-scheduler-all-day-title-font-size; border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; .dx-scheduler-small & { font-size: $material-scheduler-all-day-title-font-size * 0.8; @@ -312,6 +313,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; &.dx-scheduler-header-panel-week-cell { border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; flex-flow: column; justify-content: flex-end; } @@ -368,6 +370,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; } } } @@ -380,7 +383,9 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-date-table-first-of-month { border-left: $scheduler-first-of-month-border; + border-left-color: $scheduler-first-month-border-color; border-top: $scheduler-first-of-month-border; + border-top-color: $scheduler-first-month-border-color; } .dx-scheduler-header-panel { @@ -519,7 +524,8 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; font-size: $material-scheduler-group-header-font-size; color: $scheduler-group-header-color; text-align: left; - border-bottom: 1px solid $scheduler-base-border-color; + border-bottom: 1px solid; + border-bottom-color: $scheduler-base-border-color; .dx-scheduler-group-header-content { padding-left: $material-scheduler-header-panel-margin; @@ -560,6 +566,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-all-day-table-cell { border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; } } @@ -574,6 +581,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; &.dx-scheduler-work-space-grouped { .dx-scheduler-all-day-title { border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; } &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) { @@ -756,15 +764,18 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th, .dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell { - border-right: 1px solid $scheduler-group-separator-border-color; + border-right: 1px solid; + border-right-color: $scheduler-group-separator-border-color; &:last-child { border-right: none; } .dx-rtl & { - border-left: 1px solid $scheduler-group-separator-border-color; + border-left: 1px solid; + border-left-color: $scheduler-group-separator-border-color; border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; &:last-child { border-left: none; @@ -780,21 +791,19 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-rtl .dx-scheduler-timeline & { border-left: $material-scheduler-appointment-transparent-left-border; border-right: $material-scheduler-appointment-transparent-right-border; + box-shadow: none; + border-radius: 2px; &.dx-state-focused { color: $scheduler-appointment-focus-color; } - box-shadow: none; - &.dx-state-active, &.dx-resizable-resizing, &.dx-state-hover, &.dx-state-hover.dx-resizable { box-shadow: none; } - - border-radius: 2px; } } @@ -814,6 +823,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; &.dx-scheduler-work-space-month { .dx-scheduler-date-table-scrollable { border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; } } } @@ -918,6 +928,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-time-panel, .dx-scheduler-header-panel-empty-cell { border-left: baseScheduler.$scheduler-base-border; + border-left-color: $scheduler-base-border-color; border-right: none; } } @@ -937,7 +948,8 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; .dx-list-item { margin-bottom: 0; margin-top: 0; - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; &:last-of-type { border-bottom-left-radius: $tooltip-border-radius; diff --git a/packages/devextreme-scss/scss/widgets/material/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/material/scrollable/_colors.scss index 5d40a0c60216..e723b17110db 100644 --- a/packages/devextreme-scss/scss/widgets/material/scrollable/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/scrollable/_colors.scss @@ -14,10 +14,10 @@ $scrollable-scroll-bg: null !default; $scrollable-scrollbar-bg: transparent !default; @if $mode == "light" { - $scrollable-scroll-bg: color.change(darken($scrollable-bg, 25%), $alpha: 0.7) !default; + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; } @if $mode == "dark" { - $scrollable-scroll-bg: color.change(lighten($scrollable-bg, 25%), $alpha: 0.7) !default; + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss index 475b588270d6..e38d2ff37e2d 100644 --- a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss @@ -147,7 +147,8 @@ $material-slider-handle-inner-disabled-size: 2px; margin-top: -5px; margin-right: -5px; border-radius: 50%; - border: 2px solid $base-bg; + border: 2px solid; + border-color: $base-bg; &::after { margin-top: math.div(-$material-slider-handle-inner-disabled-size, 2) - $material-slider-handle-inner-border-width - 2px; diff --git a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_colors.scss index 546c7af59985..9e120fdee980 100644 --- a/packages/devextreme-scss/scss/widgets/material/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/speedDialAction/_colors.scss @@ -17,13 +17,13 @@ $speed-dial-action-shading-color: $overlay-shader-bg !default; @if $mode == "light" { $speed-dial-action-bg: $base-bg !default; - $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default; - $speed-dial-action-active-bg: darken($speed-dial-action-bg, 36%) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: -8%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: -36%, $space: hsl) !default; } @if $mode == "dark" { $speed-dial-action-bg: color.change($base-bg, $alpha: 1) !default; - $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 8%) !default; - $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 36%) !default; + $speed-dial-action-hover-bg: color.adjust($speed-dial-action-bg, $lightness: 8%, $space: hsl) !default; + $speed-dial-action-active-bg: color.adjust($speed-dial-action-bg, $lightness: 36%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss index d9ac10e94176..57a20c651653 100644 --- a/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss @@ -79,23 +79,23 @@ $stepper-connector-bg: $base-border-color !default; $stepper-connector-value-bg: $base-label-color !default; @if $mode == 'light' { - $stepper-step-base-bg: darken($base-bg, 38%) !default; - $stepper-step-base-hover-bg: darken($base-bg, 42%) !default; + $stepper-step-base-bg: color.adjust($base-bg, $lightness: -38%, $space: hsl) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $lightness: -42%, $space: hsl) !default; - $stepper-step-accent-hover-bg: darken($stepper-step-accent-bg, 8.5%) !default; - $stepper-step-danger-hover-bg: darken($stepper-step-danger-bg, 8.5%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: -8.5%, $space: hsl) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: -8.5%, $space: hsl) !default; - $stepper-step-disabled-bg: darken($base-bg, 12%) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default; } @if $mode == 'dark' { - $stepper-step-base-bg: lighten(desaturate($base-bg, 5.59), 29.22%) !default; - $stepper-step-base-hover-bg: lighten(desaturate($base-bg, 5.84), 32.16) !default; + $stepper-step-base-bg: color.adjust($base-bg, $saturation: -5.59%, $space: hsl, $lightness: 29.22%) !default; + $stepper-step-base-hover-bg: color.adjust($base-bg, $saturation: -5.84%, $space: hsl, $lightness: 32.16%) !default; - $stepper-step-accent-hover-bg: lighten($stepper-step-accent-bg, 8.5%) !default; - $stepper-step-danger-hover-bg: lighten($stepper-step-danger-bg, 8.5%) !default; + $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 8.5%, $space: hsl) !default; + $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 8.5%, $space: hsl) !default; - $stepper-step-disabled-bg: lighten(desaturate($base-bg, 3.02), 9.22) !default; + $stepper-step-disabled-bg: color.adjust($base-bg, $saturation: -3.02%, $space: hsl, $lightness: 9.22%) !default; } /** diff --git a/packages/devextreme-scss/scss/widgets/material/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/material/switch/_colors.scss index 533c85a55f6a..be9eef348bbc 100644 --- a/packages/devextreme-scss/scss/widgets/material/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/switch/_colors.scss @@ -33,14 +33,14 @@ $switch-invalid-handle-bg: $base-invalid-color !default; $switch-invalid-container-bg: color.change($base-invalid-color, $alpha: 0.5) !default; @if $mode == "light" { - $switch-bg: darken($base-element-bg, 38%) !default; - $switch-handle-off-bg: darken($base-element-bg, 2%) !default; - $switch-handle-disabled-bg: darken($base-element-bg, 26%) !default; + $switch-bg: color.adjust($base-element-bg, $lightness: -38%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($base-element-bg, $lightness: -2%, $space: hsl) !default; + $switch-handle-disabled-bg: color.adjust($base-element-bg, $lightness: -26%, $space: hsl) !default; } @if $mode == "dark" { - $switch-bg: lighten($base-element-bg, 38%) !default; - $switch-handle-off-bg: lighten($base-element-bg, 18.5%) !default; - $switch-handle-disabled-bg: lighten($base-element-bg, 26%) !default; + $switch-bg: color.adjust($base-element-bg, $lightness: 38%, $space: hsl) !default; + $switch-handle-off-bg: color.adjust($base-element-bg, $lightness: 18.5%, $space: hsl) !default; + $switch-handle-disabled-bg: color.adjust($base-element-bg, $lightness: 26%, $space: hsl) !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/material/tabPanel/_index.scss index 3b1b617f624d..8acfa298ac9b 100644 --- a/packages/devextreme-scss/scss/widgets/material/tabPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/tabPanel/_index.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "sass:selector"; @use "colors" as *; @use "../colors" as *; @use "sizes" as *; @@ -29,9 +30,10 @@ .dx-tabpanel-tabs-position-top { > .dx-tabpanel-tabs { .dx-tabs { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-bottom: none; } } @@ -41,9 +43,10 @@ .dx-tabpanel-tabs-position-bottom { > .dx-tabpanel-tabs { .dx-tabs { - border-top: 1px solid $base-border-color; + border-top: 1px solid; + border-top-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-top: none; } } @@ -53,9 +56,10 @@ .dx-tabpanel-tabs-position-left { > .dx-tabpanel-tabs { .dx-tabs { - border-right: 1px solid $base-border-color; + border-right: 1px solid; + border-right-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-right: none; } } @@ -65,9 +69,10 @@ .dx-tabpanel-tabs-position-right { > .dx-tabpanel-tabs { .dx-tabs { - border-left: 1px solid $base-border-color; + border-left: 1px solid; + border-left-color: $base-border-color; - @at-root #{selector-append(".dx-empty-collection", &)} { + @at-root #{selector.append(".dx-empty-collection", &)} { border-left: none; } } diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/_base.scss index 9e2cd41b5e60..e24ff404e132 100644 --- a/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/_base.scss +++ b/packages/devextreme-scss/scss/widgets/material/tabs/layout/tab/_base.scss @@ -12,8 +12,8 @@ // adduse @use "../../../scrollable"; @use "../../../badge"; -@import "styling-mode/primary"; -@import "styling-mode/secondary"; +@use "styling-mode/primary" as *; +@use "styling-mode/secondary" as *; .dx-tab { diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss index 9e88771d6477..4cb276546f55 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss @@ -34,17 +34,17 @@ $tagbox-tag-focused-bg: null !default; $tagbox-select-all-border-color: $base-border-color !default; @if $mode == "light" { - $tagbox-tag-bg: darken($base-bg, 12%) !default; - $tagbox-tag-hover-bg: darken($base-bg, 15%) !default; + $tagbox-tag-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default; + $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: -15%, $space: hsl) !default; $tagbox-tag-button-remove-color: $tagbox-tag-bg !default; - $tagbox-tag-focused-bg: darken($base-bg, 32%) !default; + $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default; } @if $mode == "dark" { - $tagbox-tag-bg: lighten($base-bg, 12%) !default; - $tagbox-tag-hover-bg: lighten($base-bg, 15%) !default; - $tagbox-tag-button-remove-color: lighten($base-bg, 22%) !default; - $tagbox-tag-focused-bg: lighten($base-bg, 32%) !default; + $tagbox-tag-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default; + $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: 15%, $space: hsl) !default; + $tagbox-tag-button-remove-color: color.adjust($base-bg, $lightness: 22%, $space: hsl) !default; + $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !default; } $tagbox-tag-disabled-bg: $tagbox-tag-focused-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss index 99e733107d61..dc6e02164f43 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss @@ -153,7 +153,8 @@ .dx-tagbox-popup-wrapper { .dx-list-select-all { - border-bottom: 1px solid $tagbox-select-all-border-color; + border-bottom: 1px solid; + border-bottom-color: $tagbox-select-all-border-color; padding-bottom: $material-tagbox-select-all-padding-bottom; margin-bottom: $material-tagbox-select-all-margin-bottom; diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss index 01e52ca51c43..2c001732a6c1 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -64,13 +64,13 @@ $texteditor-label-transition: top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; @if $mode == "light" { - $texteditor-button-clear-icon-color: lighten($texteditor-color, 46%) !default; - $texteditor-button-clear-icon-color-bg: lighten($texteditor-color, 76%) !default; + $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 46%, $space: hsl) !default; + $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: 76%, $space: hsl) !default; } @if $mode == "dark" { - $texteditor-button-clear-icon-color: darken($texteditor-color, 76%) !default; - $texteditor-button-clear-icon-color-bg: darken($texteditor-color, 34%) !default; + $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -76%, $space: hsl) !default; + $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: -34%, $space: hsl) !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss index 6c1e3a6ff5f8..fdeb2aee308b 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_index.scss @@ -153,7 +153,8 @@ $material-editor-custom-button-margin: 5px; background-color: $texteditor-focused-bg; &::before { - border-bottom: 2px solid $texteditor-focused-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-focused-border-color; transform: scale(1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1); } @@ -175,7 +176,8 @@ $material-editor-custom-button-margin: 5px; background-color: $texteditor-bg; &::after { - border-bottom: 1px solid $texteditor-border-color; + border-bottom: 1px solid; + border-bottom-color: $texteditor-border-color; } &.dx-state-hover { @@ -201,12 +203,14 @@ $material-editor-custom-button-margin: 5px; background-color: transparent; &::after { - border-bottom: 1px solid $texteditor-border-color; + border-bottom: 1px solid; + border-bottom-color: $texteditor-border-color; } &.dx-state-hover { &::after { - border-bottom: 2px solid $texteditor-hover-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-hover-border-color; } } @@ -314,7 +318,8 @@ $material-editor-custom-button-margin: 5px; &.dx-state-focused, &.dx-state-active { &::before { - border-bottom: 2px solid $texteditor-invalid-focused-border-color; + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; } } diff --git a/packages/devextreme-scss/scss/widgets/material/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tileView/_colors.scss index 4b1c30c58a2f..1ac51ec80923 100644 --- a/packages/devextreme-scss/scss/widgets/material/tileView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tileView/_colors.scss @@ -13,5 +13,5 @@ $tileview-bg: $base-element-bg !default; $tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; $tileview-hover-bg: $base-element-bg !default; $tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; -$tileview-active-bg: color.change(darken($tileview-bg, 62.5%), $alpha: 0.2) !default; +$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; $tileview-active-color: $tileview-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/material/tileView/_index.scss index 82a9635b1159..e59c21678b65 100644 --- a/packages/devextreme-scss/scss/widgets/material/tileView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/tileView/_index.scss @@ -11,7 +11,8 @@ .dx-tile { color: $tileview-color; background-color: $tileview-bg; - border: 1px solid $tileview-border-color; + border: 1px solid; + border-color: $tileview-border-color; text-align: left; &.dx-state-focused, diff --git a/packages/devextreme-scss/scss/widgets/material/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/material/toolbar/_index.scss index e114303699fd..c9c230ab741e 100644 --- a/packages/devextreme-scss/scss/widgets/material/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/toolbar/_index.scss @@ -45,7 +45,8 @@ } .dx-toolbar-menu-section { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; .dx-list-item-content, .dx-toolbar-item-auto-hide { diff --git a/packages/devextreme-themebuilder/package.json b/packages/devextreme-themebuilder/package.json index 64e1af76ff01..96fe881350d8 100644 --- a/packages/devextreme-themebuilder/package.json +++ b/packages/devextreme-themebuilder/package.json @@ -27,7 +27,7 @@ "autoprefixer": "^10.4.21", "clean-css": "^5.3.0", "postcss": "^8.2.6", - "sass-embedded": "1.66.0" + "sass-embedded": "1.97.1" }, "devDependencies": { "@types/clean-css": "4.2.11", @@ -46,7 +46,7 @@ "express": "4.22.0", "filing-cabinet": "4.1.6", "fs-extra": "11.2.0", - "immutable": "4.3.5", + "immutable": "5.1.3", "precinct": "11.0.5", "sinon": "18.0.1", "ts-jest": "29.1.2", diff --git a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts index 298e5da81175..b2da1ae117ba 100644 --- a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts +++ b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts @@ -43,7 +43,9 @@ export default class BootstrapExtractor { static async sassRender(input: string): Promise { return new Promise((resolve, reject) => { - sass.compileStringAsync(input) + sass.compileStringAsync(input, { + silenceDeprecations: ['color-functions', 'global-builtin', 'import'], + }) .then((data) => resolve(data.css.toString())) .catch((error: sass.Exception) => reject(error.message)); }); diff --git a/packages/devextreme-themebuilder/src/modules/parse-value.ts b/packages/devextreme-themebuilder/src/modules/parse-value.ts index a3d746852ab0..2e6f13798fde 100644 --- a/packages/devextreme-themebuilder/src/modules/parse-value.ts +++ b/packages/devextreme-themebuilder/src/modules/parse-value.ts @@ -8,9 +8,9 @@ export const color = (value: sass.SassColor): string => { return 'transparent'; } - const hexRed = getHex(value.red); - const hexGreen = getHex(value.green); - const hexBlue = getHex(value.blue); + const hexRed = getHex(value.channel('red')); + const hexGreen = getHex(value.channel('green')); + const hexBlue = getHex(value.channel('blue')); const hexAlpha = alpha === 255 ? '' : getHex(alpha); return `#${hexRed}${hexGreen}${hexBlue}${hexAlpha}`; @@ -59,7 +59,6 @@ export const parseString = (str: string): sass.Value => { }); // eslint-disable-next-line @typescript-eslint/no-unused-vars } catch (e) { - // debugger; return new sass.SassString(str); } diff --git a/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.material.blue.light.scss b/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.material.blue.light.scss index 29f7b50bf45e..935b86dac1f2 100644 --- a/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.material.blue.light.scss +++ b/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.material.blue.light.scss @@ -1,2 +1,2 @@ -@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700); -@import url(https://fonts.googleapis.com/earlyaccess/notokufiarabic.css); +@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'; +@import 'https://fonts.googleapis.com/earlyaccess/notokufiarabic.css'; diff --git a/packages/devextreme-themebuilder/tests/modules/compiler.test.ts b/packages/devextreme-themebuilder/tests/modules/compiler.test.ts index f3a0bd30f063..58127c076c48 100644 --- a/packages/devextreme-themebuilder/tests/modules/compiler.test.ts +++ b/packages/devextreme-themebuilder/tests/modules/compiler.test.ts @@ -97,8 +97,8 @@ describe('compile', () => { return compiler.compile('dx.error.scss', [], { }).then( () => expect(false).toBe(true), (error) => { - expect(error.code).toBe('ERR_INVALID_URL'); - expect(`${error.message}: ${error.input}`).toBe('Invalid URL: dx.error.scss'); + expect(error.sassMessage.startsWith('Cannot open file:')).toBe(true); + expect(error.span.url.href.endsWith('dx.error.scss')).toBe(true); }, ); }); diff --git a/packages/devextreme/build/gulp/gulp-data-uri.js b/packages/devextreme/build/gulp/gulp-data-uri.js index b4eb15c45a43..e02817352e62 100644 --- a/packages/devextreme/build/gulp/gulp-data-uri.js +++ b/packages/devextreme/build/gulp/gulp-data-uri.js @@ -28,9 +28,11 @@ const handler = (_, svgEncoding, fileName) => { }; const sassFunction = (args) => { - const hasEncoding = args.getLength() === 2; - const encoding = hasEncoding ? args.getValue(0).getValue() : null; - const url = hasEncoding ? args.getValue(1).getValue() : args.getValue(0).getValue(); + const getTextFromSass = (sassValue) => sassValue.assertString().text; + const argList = args[0].asList; + const hasEncoding = argList.size === 2; + const encoding = hasEncoding ? getTextFromSass(argList.get(0)) : null; + const url = getTextFromSass(argList.get(hasEncoding ? 1 : 0)); return new sass.SassString(handler(null, encoding, url), { quotes: false }); }; diff --git a/packages/devextreme/package.json b/packages/devextreme/package.json index 5d6dce69d726..2d560b116bf4 100644 --- a/packages/devextreme/package.json +++ b/packages/devextreme/package.json @@ -156,7 +156,7 @@ "gulp-remote-src": "0.4.4", "gulp-rename": "1.4.0", "gulp-replace": "0.6.1", - "gulp-sass": "5.1.0", + "gulp-sass": "6.0.1", "gulp-shell": "0.8.0", "gulp-tap": "1.0.1", "gulp-template": "5.0.0", @@ -188,7 +188,7 @@ "react-dom": "16.14.0", "react-test-renderer": "16.14.0", "recast": "0.23.4", - "sass-embedded": "1.59.2", + "sass-embedded": "1.97.1", "shelljs": "0.8.5", "sinon": "18.0.1", "staged-git-files": "1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1991ba6f8756..6b4edf3bf4bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -294,7 +294,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: catalog:angular - version: 19.2.19(7fceqlrxdanjssdrtbjwkc4wva) + version: 19.2.19(gtl3aev2yma7jbd7lnhd35hlfy) '@angular/cli': specifier: catalog:angular version: 19.2.19(@types/node@20.11.17)(chokidar@4.0.1) @@ -318,7 +318,7 @@ importers: dependencies: '@angular-devkit/build-angular': specifier: ~21.0.0 - version: 21.0.3(ad3l2nr3wyxqfhne3nt7auae6i) + version: 21.0.3(v3syyrk4tzvqoyn65m5ic5nofy) '@angular/animations': specifier: ~21.0.0 version: 21.0.5(@angular/core@21.0.5(@angular/compiler@21.0.5)(rxjs@7.8.1)(zone.js@0.15.1)) @@ -714,14 +714,14 @@ importers: specifier: 1.16.2 version: 1.16.2 stylelint: - specifier: 16.5.0 - version: 16.5.0(typescript@5.9.3) + specifier: 16.22.0 + version: 16.22.0(typescript@5.9.3) stylelint-config-recommended-vue: - specifier: 1.5.0 - version: 1.5.0(postcss-html@1.7.0)(stylelint@16.5.0(typescript@5.9.3)) + specifier: 1.6.1 + version: 1.6.1(postcss-html@1.7.0)(stylelint@16.22.0(typescript@5.9.3)) stylelint-config-standard: - specifier: 35.0.0 - version: 35.0.0(stylelint@16.5.0(typescript@5.9.3)) + specifier: 38.0.0 + version: 38.0.0(stylelint@16.22.0(typescript@5.9.3)) systemjs-builder: specifier: 0.16.15 version: 0.16.15 @@ -804,7 +804,7 @@ importers: devDependencies: '@storybook/addon-docs': specifier: 10.1.9 - version: 10.1.9(@types/react@18.0.0)(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0)) + version: 10.1.9(@types/react@18.0.0)(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0)) '@storybook/addon-links': specifier: 10.1.9 version: 10.1.9(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)) @@ -813,7 +813,7 @@ importers: version: 4.0.2(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0)) '@storybook/react-webpack5': specifier: 10.1.9 - version: 10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + version: 10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) '@types/react': specifier: 18.0.0 version: 18.0.0 @@ -940,7 +940,7 @@ importers: version: 9.18.0(jiti@2.6.1) eslint-config-devextreme: specifier: 1.1.6 - version: 1.1.6(c32mtc2anpmz63ol32pzeficca) + version: 1.1.6(6zxkuktm4jm4jcgvizeazxbkz4) eslint-plugin-i18n: specifier: 'catalog:' version: 2.4.0 @@ -973,7 +973,7 @@ importers: version: 4.22.4 vite: specifier: 5.4.21 - version: 5.4.21(@types/node@20.14.5)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1) + version: 5.4.21(@types/node@20.14.5)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1) webpack: specifier: 5.94.0 version: 5.94.0(@swc/core@1.15.3)(webpack-cli@4.10.0) @@ -1009,7 +1009,7 @@ importers: version: 9.18.0(jiti@2.6.1) eslint-config-devextreme: specifier: 1.1.6 - version: 1.1.6(n47ybutmk4tn7tylmstnjfx4ie) + version: 1.1.6(yhza7jtxffxi7plvkgulnpvjry) eslint-migration-utils: specifier: workspace:* version: link:../../packages/eslint-migration-utils @@ -1081,7 +1081,7 @@ importers: version: 9.18.0(jiti@2.6.1) eslint-config-devextreme: specifier: 1.1.6 - version: 1.1.6(aoohjc26cxezdvu4hxhevsauy4) + version: 1.1.6(cr6nusfj3tc6sbt2qbhl46czcu) eslint-migration-utils: specifier: workspace:* version: link:../../packages/eslint-migration-utils @@ -1217,10 +1217,10 @@ importers: devDependencies: '@analogjs/vite-plugin-angular': specifier: 1.15.1 - version: 1.15.1(@angular-devkit/build-angular@19.2.19(wlcomhkl5cxc242lccdsfkfzdi))(@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.66.0)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1)) + version: 1.15.1(@angular-devkit/build-angular@19.2.19(qgkkovkjxfgnxlmiiublhb5ary))(@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.97.1)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1)) '@angular-devkit/build-angular': specifier: catalog:angular - version: 19.2.19(wlcomhkl5cxc242lccdsfkfzdi) + version: 19.2.19(qgkkovkjxfgnxlmiiublhb5ary) '@angular/cli': specifier: catalog:angular version: 19.2.19(@types/node@20.14.5)(chokidar@4.0.1) @@ -1241,10 +1241,10 @@ importers: version: 19.1.3(@types/react@19.1.2) '@vitejs/plugin-react': specifier: 4.4.1 - version: 4.4.1(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + version: 4.4.1(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) '@vitejs/plugin-vue': specifier: 5.2.3 - version: 5.2.3(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.13(typescript@5.8.3)) + version: 5.2.3(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.13(typescript@5.8.3)) eslint: specifier: 9.39.1 version: 9.39.1(jiti@2.6.1) @@ -1283,7 +1283,7 @@ importers: version: 5.8.3 vite: specifier: 6.4.1 - version: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1) + version: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1) packages/devextreme: dependencies: @@ -1458,7 +1458,7 @@ importers: version: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-devextreme: specifier: 1.1.6 - version: 1.1.6(h6r4fe5temnwnzuk6cbunnj7oq) + version: 1.1.6(xhzmkch4hvasl4omgcltflkv5i) eslint-migration-utils: specifier: workspace:* version: link:../eslint-migration-utils @@ -1589,8 +1589,8 @@ importers: specifier: 0.6.1 version: 0.6.1 gulp-sass: - specifier: 5.1.0 - version: 5.1.0 + specifier: 6.0.1 + version: 6.0.1 gulp-shell: specifier: 0.8.0 version: 0.8.0 @@ -1685,8 +1685,8 @@ importers: specifier: 0.23.4 version: 0.23.4 sass-embedded: - specifier: 1.59.2 - version: 1.59.2 + specifier: 1.97.1 + version: 1.97.1 shelljs: specifier: 0.8.5 version: 0.8.5 @@ -1847,7 +1847,7 @@ importers: version: 9.18.0(jiti@2.6.1) eslint-config-devextreme: specifier: 1.1.5 - version: 1.1.5(raex3yd3nxg6jj62hosm72ieie) + version: 1.1.5(ktiezjignnyr4gpzrklqlohkhy) eslint-migration-utils: specifier: workspace:* version: link:../eslint-migration-utils @@ -1975,7 +1975,7 @@ importers: version: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-devextreme: specifier: 1.1.6 - version: 1.1.6(ct6jntwxfthnvrea6gjzmrvbze) + version: 1.1.6(xfwpv6vyuyfitchwyjhp2bibri) eslint-plugin-import: specifier: 'catalog:' version: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)) @@ -2020,8 +2020,8 @@ importers: specifier: 0.6.1 version: 0.6.1 gulp-sass: - specifier: 5.1.0 - version: 5.1.0 + specifier: 6.0.1 + version: 6.0.1 gulp-shell: specifier: 0.8.0 version: 0.8.0 @@ -2029,8 +2029,8 @@ importers: specifier: 1.2.8 version: 1.2.8 sass-embedded: - specifier: 1.59.2 - version: 1.59.2 + specifier: 1.97.1 + version: 1.97.1 stylelint: specifier: 15.11.0 version: 15.11.0(typescript@5.9.3) @@ -2062,8 +2062,8 @@ importers: specifier: ^8.2.6 version: 8.4.38 sass-embedded: - specifier: 1.66.0 - version: 1.66.0 + specifier: 1.97.1 + version: 1.97.1 devDependencies: '@types/clean-css': specifier: 4.2.11 @@ -2097,7 +2097,7 @@ importers: version: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-devextreme: specifier: 1.1.5 - version: 1.1.5(uxj2ndy35bxtdvjlkhkfsme5c4) + version: 1.1.5(xdj4xipx46p2yg7qbwclg5a2mi) eslint-plugin-import: specifier: 'catalog:' version: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)) @@ -2114,8 +2114,8 @@ importers: specifier: 11.2.0 version: 11.2.0 immutable: - specifier: 4.3.5 - version: 4.3.5 + specifier: 5.1.3 + version: 5.1.3 precinct: specifier: 11.0.5 version: 11.0.5 @@ -2170,7 +2170,7 @@ importers: version: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-devextreme: specifier: 1.1.5 - version: 1.1.5(ct6jntwxfthnvrea6gjzmrvbze) + version: 1.1.5(xfwpv6vyuyfitchwyjhp2bibri) eslint-plugin-i18n: specifier: 'catalog:' version: 2.4.0 @@ -3615,8 +3615,14 @@ packages: '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} - '@bufbuild/protobuf@1.10.0': - resolution: {integrity: sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==} + '@bufbuild/protobuf@2.10.2': + resolution: {integrity: sha512-uFsRXwIGyu+r6AMdz+XijIIZJYpoWeYzILt5yZ2d3mCjQrWUTVpVD9WL/jZAbvp+Ed04rOhrsk7FiTcEDseB5A==} + + '@cacheable/memory@2.0.7': + resolution: {integrity: sha512-RbxnxAMf89Tp1dLhXMS7ceft/PGsDl1Ip7T20z5nZ+pwIAsQ1p2izPjVG69oCLv/jfQ7HDPHTWK0c9rcAWXN3A==} + + '@cacheable/utils@2.3.3': + resolution: {integrity: sha512-JsXDL70gQ+1Vc2W/KUFfkAJzgb4puKwwKehNLuB+HrNKWf91O736kGfxn4KujXCCSuh6mRRL4XEB0PkAFjWS0A==} '@colors/colors@1.5.0': resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} @@ -3636,10 +3642,20 @@ packages: peerDependencies: '@csstools/css-tokenizer': ^2.4.1 + '@csstools/css-parser-algorithms@3.0.5': + resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-tokenizer': ^3.0.4 + '@csstools/css-tokenizer@2.4.1': resolution: {integrity: sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==} engines: {node: ^14 || ^16 || >=18} + '@csstools/css-tokenizer@3.0.4': + resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} + engines: {node: '>=18'} + '@csstools/media-query-list-parser@2.1.13': resolution: {integrity: sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==} engines: {node: ^14 || ^16 || >=18} @@ -3647,12 +3663,25 @@ packages: '@csstools/css-parser-algorithms': ^2.7.1 '@csstools/css-tokenizer': ^2.4.1 + '@csstools/media-query-list-parser@4.0.3': + resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + '@csstools/selector-specificity@3.1.1': resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==} engines: {node: ^14 || ^16 || >=18} peerDependencies: postcss-selector-parser: ^6.0.13 + '@csstools/selector-specificity@5.0.0': + resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 + '@dabh/diagnostics@2.0.3': resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==} @@ -4782,6 +4811,15 @@ packages: peerDependencies: tslib: '2' + '@keyv/bigmap@1.3.0': + resolution: {integrity: sha512-KT01GjzV6AQD5+IYrcpoYLkCu1Jod3nau1Z7EsEuViO3TZGRacSbO9MfHmbJ1WaOXFtWLxPVj169cn2WNKPkIg==} + engines: {node: '>= 18'} + peerDependencies: + keyv: ^5.5.4 + + '@keyv/serialize@1.1.1': + resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==} + '@leichtgewicht/ip-codec@2.0.5': resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==} @@ -8388,6 +8426,9 @@ packages: cache-swap@0.3.0: resolution: {integrity: sha512-rwePCa4iVqXHrEEmQEoLR3Kea4aCTCf7JfX+mJA4Fd61Vb738TItRRv1v++emp9wfnRUKbXpIYfRJY4ThWK09g==} + cacheable@2.3.1: + resolution: {integrity: sha512-yr+FSHWn1ZUou5LkULX/S+jhfgfnLbuKQjE40tyEd4fxGZVMbBL5ifno0J0OauykS8UiCSgHi+DV/YD+rjFxFg==} + cached-path-relative@1.1.0: resolution: {integrity: sha512-WF0LihfemtesFcJgO7xfOoOcnWzY/QHR4qeDqV44jPU3HTI54+LnfXK3SA27AVVGCdZFgjjFFaqUA9Jx7dMJZA==} @@ -8776,6 +8817,9 @@ packages: colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} + colorjs.io@0.5.2: + resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==} + colorspace@1.1.4: resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==} @@ -10702,6 +10746,9 @@ packages: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} + file-entry-cache@10.1.4: + resolution: {integrity: sha512-5XRUFc0WTtUbjfGzEwXc42tiGxQHBmtbUG1h9L2apu4SulCGN3Hqm//9D6FAolf8MYNL7f/YlJl9vy08pj5JuA==} + file-entry-cache@6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -10814,6 +10861,9 @@ packages: resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} engines: {node: '>=16'} + flat-cache@6.1.19: + resolution: {integrity: sha512-l/K33newPTZMTGAnnzaiqSl6NnH7Namh8jBNjrgjprWxGmZUuxx/sJNIRaijOh3n7q7ESbhNZC+pvVZMFdeU4A==} + flat@5.0.2: resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==} hasBin: true @@ -10821,6 +10871,9 @@ packages: flatted@3.3.2: resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==} + flatted@3.3.3: + resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==} + flush-write-stream@1.1.1: resolution: {integrity: sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==} @@ -11362,8 +11415,8 @@ packages: resolution: {integrity: sha512-SVSF7ikuWKhpAW4l4wapAqPPSToJoiNKsbDoUnRrSgwZHH7lH8pbPeQj1aOVYQrbZKhfSVBxVW+Py7vtulRktw==} engines: {node: '>=10'} - gulp-sass@5.1.0: - resolution: {integrity: sha512-7VT0uaF+VZCmkNBglfe1b34bxn/AfcssquLKVDYnCDJ3xNBaW7cUuI3p3BQmoKcoKFrs9jdzUxyb+u+NGfL4OQ==} + gulp-sass@6.0.1: + resolution: {integrity: sha512-4wonidxB8lGPHvahelpGavUBJAuERSl+OIVxPCyQthK4lSJhZ/u3/qjFcyAtnMIXDl6fXTn34H4BXsN7gt54kQ==} engines: {node: '>=12'} gulp-shell@0.8.0: @@ -11489,6 +11542,10 @@ packages: hash.js@1.1.7: resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==} + hashery@1.4.0: + resolution: {integrity: sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ==} + engines: {node: '>=20'} + hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} @@ -11559,6 +11616,9 @@ packages: resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==} engines: {node: '>=0.10.0'} + hookified@1.15.0: + resolution: {integrity: sha512-51w+ZZGt7Zw5q7rM3nC4t3aLn/xvKDETsXqMczndvwyVQhAHfUmUuFBRFcos8Iyebtk7OAE9dL26wFNzZVVOkw==} + hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} @@ -11836,11 +11896,8 @@ packages: immediate@3.0.6: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} - immutable@4.3.5: - resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==} - - immutable@5.0.3: - resolution: {integrity: sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==} + immutable@5.1.3: + resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==} import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} @@ -12883,6 +12940,9 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + keyv@5.5.5: + resolution: {integrity: sha512-FA5LmZVF1VziNc0bIdCSA1IoSVnDCqE8HJIZZv2/W8YmoAM50+tnUgJR/gQZwEeIMleuIOnRnHA/UaZRNeV4iQ==} + kind-of@1.1.0: resolution: {integrity: sha512-aUH6ElPnMGon2/YkxRIigV32MOpTVcoXQ1Oo8aYn40s+sJ3j+0gFZsT8HKDcxNy7Fi9zuquWtGaGAahOdv5p/g==} engines: {node: '>=0.10.0'} @@ -12917,12 +12977,12 @@ packages: known-css-properties@0.29.0: resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==} - known-css-properties@0.30.0: - resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==} - known-css-properties@0.35.0: resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==} + known-css-properties@0.37.0: + resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==} + kuler@2.0.0: resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==} @@ -14861,6 +14921,10 @@ packages: resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==} engines: {node: '>=4'} + postcss-selector-parser@7.1.1: + resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} + engines: {node: '>=4'} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -15039,6 +15103,10 @@ packages: (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) + qified@0.5.3: + resolution: {integrity: sha512-kXuQdQTB6oN3KhI6V4acnBSZx8D2I4xzZvn9+wFLLFCoBNQY/sFnCW6c43OL7pOQ2HvGV4lnWIXNmgfp7cTWhQ==} + engines: {node: '>=20'} + qjobs@1.2.0: resolution: {integrity: sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==} engines: {node: '>=0.9'} @@ -15694,118 +15762,115 @@ packages: sanitize-filename@1.6.3: resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==} - sass-embedded-darwin-arm64@1.59.2: - resolution: {integrity: sha512-9IBQPSXEOmOnd5GLwPtqOZ7GgWz8JRueFBRiF67Lg6IFSH1JQPSuLhvt7Bt5EixxauBiaZFPLWXP6kIcpERZrw==} + sass-embedded-all-unknown@1.97.1: + resolution: {integrity: sha512-0au5gUNibfob7W/g+ycBx74O22CL8vwHiZdEDY6J0uzMkHPiSJk//h0iRf5AUnMArFHJjFd3urIiQIaoRKYa1Q==} + cpu: ['!arm', '!arm64', '!riscv64', '!x64'] + + sass-embedded-android-arm64@1.97.1: + resolution: {integrity: sha512-h62DmOiS2Jn87s8+8GhJcMerJnTKa1IsIa9iIKjLiqbAvBDKCGUs027RugZkM+Zx7I+vhPq86PUXBYZ9EkRxdw==} engines: {node: '>=14.0.0'} cpu: [arm64] - os: [darwin] + os: [android] - sass-embedded-darwin-arm64@1.66.0: - resolution: {integrity: sha512-Vuo4+yPbYcrm6CRuugOzw1gQjKqIQ66rEQqwM5w4Mu0hfe+tSRJUndfycGfmoSDJwnHgDdL+8shmP5OoYNQHJw==} + sass-embedded-android-arm@1.97.1: + resolution: {integrity: sha512-B5dlv4utJ+yC8ZpBeWTHwSZPVKRlqA8pcaD0FAzeNm/DelIFgQUQtt0UwgYoAI6wDIiie5uSVpMK9l2DaCbiBQ==} engines: {node: '>=14.0.0'} - cpu: [arm64] - os: [darwin] - hasBin: true + cpu: [arm] + os: [android] + + sass-embedded-android-riscv64@1.97.1: + resolution: {integrity: sha512-tGup88vgaXPnUHEgDMujrt5rfYadvkiVjRb/45FJTx2hQFoGVbmUXz5XqUFjIIbEjQ3kAJqp86A2jy11s43UiQ==} + engines: {node: '>=14.0.0'} + cpu: [riscv64] + os: [android] - sass-embedded-darwin-x64@1.59.2: - resolution: {integrity: sha512-I+iD+So9LVsLAPK6G005WMq4X8ZZ2F7wIDxa6NqQXk6YcDIyHPpR+NMVoXVd9zlqgRsv2xr6UqUItJCUSYoYTQ==} + sass-embedded-android-x64@1.97.1: + resolution: {integrity: sha512-CAzKjjzu90LZduye2O9+UGX1oScMyF5/RVOa5CxACKALeIS+3XL3LVdV47kwKPoBv5B1aFUvGLscY0CR7jBAbg==} engines: {node: '>=14.0.0'} cpu: [x64] + os: [android] + + sass-embedded-darwin-arm64@1.97.1: + resolution: {integrity: sha512-tyDzspzh5PbqdAFGtVKUXuf0up6Lff3c1U8J7+4Y7jW6AWRBnq95vTzIIxfnNifGCTI2fW5e7GAZpYygKpNwcw==} + engines: {node: '>=14.0.0'} + cpu: [arm64] os: [darwin] - sass-embedded-darwin-x64@1.66.0: - resolution: {integrity: sha512-aBuhUlrI5TkmGY9q8jae3LOUqIdi1OvtCR9/cdywsAhcXtwYQnM/CodFx/ULp4dcNZGybaJ/Im76SjSNNwIORw==} + sass-embedded-darwin-x64@1.97.1: + resolution: {integrity: sha512-FMrRuSPI2ICt2M2SYaLbiG4yxn86D6ae+XtrRdrrBMhWprAcB7Iyu67bgRzZkipMZNIKKeTR7EUvJHgZzi5ixQ==} engines: {node: '>=14.0.0'} cpu: [x64] os: [darwin] - hasBin: true - sass-embedded-linux-arm64@1.59.2: - resolution: {integrity: sha512-4SQnKGjKvBa+2vpNgX0aw5rmRpZ4jh+7sB8tYT81INz2BTWP4akbiRYq37Ux6CBt7xU5VCLE+XLO8PxJ4+LdJQ==} + sass-embedded-linux-arm64@1.97.1: + resolution: {integrity: sha512-im80gfDWRivw9Su3r3YaZmJaCATcJgu3CsCSLodPk1b1R2+X/E12zEQayvrl05EGT9PDwTtuiqKgS4ND4xjwVg==} engines: {node: '>=14.0.0'} cpu: [arm64] os: [linux] - sass-embedded-linux-arm64@1.66.0: - resolution: {integrity: sha512-fLxVYSIV84VvdIyzYOk1od1VSH1uUkX6aRcvZ0SiyZfQE2fQ9I98D6TIWMTcJOUQPmNhtmxUcWDHpAFiAhCMPA==} + sass-embedded-linux-arm@1.97.1: + resolution: {integrity: sha512-48VxaTUApLyx1NXFdZhKqI/7FYLmz8Ju3Ki2V/p+mhn5raHgAiYeFgn8O1WGxTOh+hBb9y3FdSR5a8MNTbmKMQ==} engines: {node: '>=14.0.0'} - cpu: [arm64] + cpu: [arm] os: [linux] - hasBin: true - sass-embedded-linux-arm@1.59.2: - resolution: {integrity: sha512-yA2tyWLicVo3Hm7V633co9Ha+NQBqGjDcm/F260v0i8juZgYfDwOH4KR6JLbBlki0C+Joc0nggY474urc2qUWA==} + sass-embedded-linux-musl-arm64@1.97.1: + resolution: {integrity: sha512-kD35WSD9o0279Ptwid3Jnbovo1FYnuG2mayYk9z4ZI4mweXEK6vTu+tlvCE/MdF/zFKSj11qaxaH+uzXe2cO5A==} engines: {node: '>=14.0.0'} - cpu: [arm] + cpu: [arm64] os: [linux] - sass-embedded-linux-arm@1.66.0: - resolution: {integrity: sha512-kzI1w1KfcDeu5860wXv5FWAeB+ZqpzcfQUOy/x/LydY0hUN1sh55H2yOQcTaXllu9DjjA9XKD0bTlFVB68qxmg==} + sass-embedded-linux-musl-arm@1.97.1: + resolution: {integrity: sha512-FUFs466t3PVViVOKY/60JgLLtl61Pf7OW+g5BeEfuqVcSvYUECVHeiYHtX1fT78PEVa0h9tHpM6XpWti+7WYFA==} engines: {node: '>=14.0.0'} cpu: [arm] os: [linux] - hasBin: true - sass-embedded-linux-ia32@1.59.2: - resolution: {integrity: sha512-VkPGOQYxnmYK5VL9P+eKiMtJqc/23vNECw0zFFxqzNrz2/xd1dgCT4egKVO2cSsT/Q95PkrEV1eTx3gSB27ZuQ==} + sass-embedded-linux-musl-riscv64@1.97.1: + resolution: {integrity: sha512-ZgpYps5YHuhA2+KiLkPukRbS5298QObgUhPll/gm5i0LOZleKCwrFELpVPcbhsSBuxqji2uaag5OL+n3JRBVVg==} engines: {node: '>=14.0.0'} - cpu: [ia32] + cpu: [riscv64] os: [linux] - sass-embedded-linux-ia32@1.66.0: - resolution: {integrity: sha512-luMe3tUfhnbQhDGB4n1ZBQb235kt2uxFEWQYtx/OOZZOulUN5amgXPv4aAVLWm/37Wwb4jMNW1Mhf5Jm6DY9kQ==} + sass-embedded-linux-musl-x64@1.97.1: + resolution: {integrity: sha512-wcAigOyyvZ6o1zVypWV7QLZqpOEVnlBqJr9MbpnRIm74qFTSbAEmShoh8yMXBymzuVSmEbThxAwW01/TLf62tA==} engines: {node: '>=14.0.0'} - cpu: [ia32] + cpu: [x64] os: [linux] - hasBin: true - sass-embedded-linux-x64@1.59.2: - resolution: {integrity: sha512-RhJHOuEuJB0UqN7CXSU9pe9uyyyRe3XxJSV1LrTS7INxEQ7KWCY/37NAzYuUkSdptlpSLj7aOA1pfXabQoozxw==} + sass-embedded-linux-riscv64@1.97.1: + resolution: {integrity: sha512-9j1qE1ZrLMuGb+LUmBzw93Z4TNfqlRkkxjPVZy6u5vIggeSfvGbte7eRoYBNWX6SFew/yBCL90KXIirWFSGrlQ==} engines: {node: '>=14.0.0'} - cpu: [x64] + cpu: [riscv64] os: [linux] - sass-embedded-linux-x64@1.66.0: - resolution: {integrity: sha512-tUL2Ro+b26JYAchEJfYtwmEcSJiGamWzg7C35BCS9g1T80oWIw8mJXGddaDZmSbK6wyu1CIsU/p+AUC8QCf7SQ==} + sass-embedded-linux-x64@1.97.1: + resolution: {integrity: sha512-7nrLFYMH/UgvEgXR5JxQJ6y9N4IJmnFnYoDxN0nw0jUp+CQWQL4EJ4RqAKTGelneueRbccvt2sEyPK+X0KJ9Jg==} engines: {node: '>=14.0.0'} cpu: [x64] os: [linux] - hasBin: true - sass-embedded-win32-ia32@1.59.2: - resolution: {integrity: sha512-LbG4VA+3eQApLfpkTt6qDxklT9xkqLIVrVhAfl6Bjbbv8LUbSyIuLNU7+x0VY++v+z3hTHgEmWMa4GYDhFHorw==} - engines: {node: '>=14.0.0'} - cpu: [ia32] - os: [win32] + sass-embedded-unknown-all@1.97.1: + resolution: {integrity: sha512-oPSeKc7vS2dx3ZJHiUhHKcyqNq0GWzAiR8zMVpPd/kVMl5ZfVyw+5HTCxxWDBGkX02lNpou27JkeBPCaneYGAQ==} + os: ['!android', '!darwin', '!linux', '!win32'] - sass-embedded-win32-ia32@1.66.0: - resolution: {integrity: sha512-t2/rgXTZa/zyRdkvrT3R4u8IpGHdzoel8tNGxqmZBt2xccjkNl+xwIHbBXohAMAFEy9S923FLDedrE3mNjWxZw==} + sass-embedded-win32-arm64@1.97.1: + resolution: {integrity: sha512-L5j7J6CbZgHGwcfVedMVpM3z5MYeighcyZE8GF2DVmjWzZI3JtPKNY11wNTD/P9o1Uql10YPOKhGH0iWIXOT7Q==} engines: {node: '>=14.0.0'} - cpu: [ia32] + cpu: [arm64] os: [win32] - hasBin: true - sass-embedded-win32-x64@1.59.2: - resolution: {integrity: sha512-4yKEV51wRggoOq/Z2BBxImdU7jPaHcyYOCVFFh69pf7d3BXGh8+y4qrEwwl087pFE1d+x/KIO24jAvghUSq2CA==} + sass-embedded-win32-x64@1.97.1: + resolution: {integrity: sha512-rfaZAKXU8cW3E7gvdafyD6YtgbEcsDeT99OEiHXRT0UGFuXT8qCOjpAwIKaOA3XXr2d8S42xx6cXcaZ1a+1fgw==} engines: {node: '>=14.0.0'} cpu: [x64] os: [win32] - sass-embedded-win32-x64@1.66.0: - resolution: {integrity: sha512-0NHGU8jWplhJy/v/pvznZrDSF6PEAZYOuo0wI3zn3oM/ORi4a34aB5g2m78MSRXfF42T7RUfIiAdwXPsLHg0+w==} - engines: {node: '>=14.0.0'} - cpu: [x64] - os: [win32] + sass-embedded@1.97.1: + resolution: {integrity: sha512-wH3CbOThHYGX0bUyqFf7laLKyhVWIFc2lHynitkqMIUCtX2ixH9mQh0bN7+hkUu5BFt/SXvEMjFbkEbBMpQiSQ==} + engines: {node: '>=16.0.0'} hasBin: true - sass-embedded@1.59.2: - resolution: {integrity: sha512-lZd1lxfVhHyTrnFCkuYn/65SgM6ysbnidIxTX6ZmYjb82Ied4DC0zvkheFh5wn5K76XzV2SSL18BgYShAXGCbQ==} - engines: {node: '>=14.0.0'} - - sass-embedded@1.66.0: - resolution: {integrity: sha512-7PqQW3bNIGadntvPsBy3gwjAVdPf9iG+WmdoN3VcWXLbYtHn/Tl5YqRRhqfTxW2ue9xw1QIlEsxYAQ71zKgfHQ==} - engines: {node: '>=14.0.0'} - sass-loader@16.0.5: resolution: {integrity: sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==} engines: {node: '>= 18.12.0'} @@ -15842,6 +15907,11 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + sass@1.97.1: + resolution: {integrity: sha512-uf6HoO8fy6ClsrShvMgaKUn14f2EHQLQRtpsZZLeU/Mv0Q1K5P0+x2uvH6Cub39TVVbWNSrraUhDAoFph6vh0A==} + engines: {node: '>=14.0.0'} + hasBin: true + sax@1.4.1: resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==} @@ -16446,10 +16516,6 @@ packages: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} - strip-ansi@7.1.0: - resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} - engines: {node: '>=12'} - strip-ansi@7.1.2: resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==} engines: {node: '>=12'} @@ -16546,8 +16612,8 @@ packages: postcss: optional: true - stylelint-config-recommended-vue@1.5.0: - resolution: {integrity: sha512-65TAK/clUqkNtkZLcuytoxU0URQYlml+30Nhop7sRkCZ/mtWdXt7T+spPSB3KMKlb+82aEVJ4OrcstyDBdbosg==} + stylelint-config-recommended-vue@1.6.1: + resolution: {integrity: sha512-lLW7hTIMBiTfjenGuDq2kyHA6fBWd/+Df7MO4/AWOxiFeXP9clbpKgg27kHfwA3H7UNMGC7aeP3mNlZB5LMmEQ==} engines: {node: ^12 || >=14} peerDependencies: postcss-html: ^1.0.0 @@ -16564,6 +16630,12 @@ packages: peerDependencies: stylelint: ^16.1.0 + stylelint-config-recommended@16.0.0: + resolution: {integrity: sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.16.0 + stylelint-config-standard-scss@9.0.0: resolution: {integrity: sha512-yPKpJsrZn4ybuQZx/DkEHuCjw7pJginErE/47dFhCnrvD48IJ4UYec8tSiCuJWMA3HRjbIa3nh5ZeSauDGuVAg==} peerDependencies: @@ -16578,11 +16650,11 @@ packages: peerDependencies: stylelint: ^15.5.0 - stylelint-config-standard@35.0.0: - resolution: {integrity: sha512-JyQrNZk2BZwVKFauGGxW2U6RuhIfQ4XoHHo+rBzMHcAkLnwI/knpszwXjzxiMgSfcxbZBckM7Vq4LHoANTR85g==} + stylelint-config-standard@38.0.0: + resolution: {integrity: sha512-uj3JIX+dpFseqd/DJx8Gy3PcRAJhlEZ2IrlFOc4LUxBX/PNMEQ198x7LCOE2Q5oT9Vw8nyc4CIL78xSqPr6iag==} engines: {node: '>=18.12.0'} peerDependencies: - stylelint: ^16.0.0 + stylelint: ^16.18.0 stylelint-scss@4.7.0: resolution: {integrity: sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==} @@ -16600,8 +16672,8 @@ packages: engines: {node: ^14.13.1 || >=16.0.0} hasBin: true - stylelint@16.5.0: - resolution: {integrity: sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==} + stylelint@16.22.0: + resolution: {integrity: sha512-SVEMTdjKNV4ollUrIY9ordZ36zHv2/PHzPjfPMau370MlL2VYXeLgSNMMiEbLGRO8RmD2R8/BVUeF2DfnfkC0w==} engines: {node: '>=18.12.0'} hasBin: true @@ -16633,6 +16705,10 @@ packages: resolution: {integrity: sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==} engines: {node: '>=14.18'} + supports-hyperlinks@3.2.0: + resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==} + engines: {node: '>=14.18'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -16660,6 +16736,14 @@ packages: symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} + sync-child-process@1.0.2: + resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==} + engines: {node: '>=16.0.0'} + + sync-message-port@1.1.3: + resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==} + engines: {node: '>=16.0.0'} + syntax-error@1.4.0: resolution: {integrity: sha512-YPPlu67mdnHGTup2A8ff7BC2Pjq0e0Yp/IyTFN03zWO0RcK07uLcbi7C2KpGR2FvWbaB0+bfE27a+sBKebSo7w==} @@ -16688,6 +16772,10 @@ packages: resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==} engines: {node: '>=10.0.0'} + table@6.9.0: + resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} + engines: {node: '>=10.0.0'} + tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -18490,13 +18578,13 @@ snapshots: '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 - '@analogjs/vite-plugin-angular@1.15.1(@angular-devkit/build-angular@19.2.19(wlcomhkl5cxc242lccdsfkfzdi))(@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.66.0)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1))': + '@analogjs/vite-plugin-angular@1.15.1(@angular-devkit/build-angular@19.2.19(qgkkovkjxfgnxlmiiublhb5ary))(@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.97.1)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1))': dependencies: ts-morph: 21.0.1 vfile: 6.0.3 optionalDependencies: - '@angular-devkit/build-angular': 19.2.19(wlcomhkl5cxc242lccdsfkfzdi) - '@angular/build': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.66.0)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1) + '@angular-devkit/build-angular': 19.2.19(qgkkovkjxfgnxlmiiublhb5ary) + '@angular/build': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.97.1)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1) '@angular-devkit/architect@0.1902.19(chokidar@4.0.1)': dependencies: @@ -18512,13 +18600,13 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@19.2.19(7fceqlrxdanjssdrtbjwkc4wva)': + '@angular-devkit/build-angular@19.2.19(gtl3aev2yma7jbd7lnhd35hlfy)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.19(chokidar@4.0.1) '@angular-devkit/build-webpack': 0.1902.19(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)))(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) '@angular-devkit/core': 19.2.19(chokidar@4.0.1) - '@angular/build': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2))(@types/node@20.11.17)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(tslib@2.6.3)(typescript@5.5.4))(postcss@8.5.2)(terser@5.39.0)(typescript@5.5.4)(yaml@2.8.1) + '@angular/build': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2))(@types/node@20.11.17)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(tslib@2.6.3)(typescript@5.5.4))(postcss@8.5.2)(sass-embedded@1.97.1)(terser@5.39.0)(typescript@5.5.4)(yaml@2.8.1) '@angular/compiler-cli': 19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4) '@babel/core': 7.26.10 '@babel/generator': 7.26.10 @@ -18531,7 +18619,7 @@ snapshots: '@babel/runtime': 7.26.10 '@discoveryjs/json-ext': 0.6.3 '@ngtools/webpack': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(typescript@5.5.4)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) - '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1)) + '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.20(postcss@8.5.2) babel-loader: 9.2.1(@babel/core@7.26.10)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) @@ -18558,7 +18646,7 @@ snapshots: resolve-url-loader: 5.0.0 rxjs: 7.8.1 sass: 1.85.0 - sass-loader: 16.0.5(sass-embedded@1.66.0)(sass@1.85.0)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) + sass-loader: 16.0.5(sass-embedded@1.97.1)(sass@1.85.0)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) semver: 7.7.1 source-map-loader: 5.0.0(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) source-map-support: 0.5.21 @@ -18601,13 +18689,13 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@19.2.19(wlcomhkl5cxc242lccdsfkfzdi)': + '@angular-devkit/build-angular@19.2.19(qgkkovkjxfgnxlmiiublhb5ary)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.19(chokidar@4.0.1) '@angular-devkit/build-webpack': 0.1902.19(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)))(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) '@angular-devkit/core': 19.2.19(chokidar@4.0.1) - '@angular/build': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.66.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.1) + '@angular/build': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.97.1)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.1) '@angular/compiler-cli': 19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3) '@babel/core': 7.26.10 '@babel/generator': 7.26.10 @@ -18620,7 +18708,7 @@ snapshots: '@babel/runtime': 7.26.10 '@discoveryjs/json-ext': 0.6.3 '@ngtools/webpack': 19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(typescript@5.8.3)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) - '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.20(postcss@8.5.2) babel-loader: 9.2.1(@babel/core@7.26.10)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) @@ -18647,7 +18735,7 @@ snapshots: resolve-url-loader: 5.0.0 rxjs: 7.8.1 sass: 1.85.0 - sass-loader: 16.0.5(sass-embedded@1.66.0)(sass@1.85.0)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) + sass-loader: 16.0.5(sass-embedded@1.97.1)(sass@1.85.0)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) semver: 7.7.1 source-map-loader: 5.0.0(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)) source-map-support: 0.5.21 @@ -18690,13 +18778,13 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@21.0.3(ad3l2nr3wyxqfhne3nt7auae6i)': + '@angular-devkit/build-angular@21.0.3(v3syyrk4tzvqoyn65m5ic5nofy)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.2100.3(chokidar@4.0.1) '@angular-devkit/build-webpack': 0.2100.3(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)))(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)) '@angular-devkit/core': 21.0.3(chokidar@4.0.1) - '@angular/build': 21.0.3(cibbbnsh2fjx6deel2p5obhtaq) + '@angular/build': 21.0.3(dzn5lhgwlyouhf2o7m6j3zbpqe) '@angular/compiler-cli': 21.0.5(@angular/compiler@21.0.5)(typescript@5.9.3) '@babel/core': 7.28.4 '@babel/generator': 7.28.3 @@ -18734,7 +18822,7 @@ snapshots: resolve-url-loader: 5.0.0 rxjs: 7.8.2 sass: 1.93.2 - sass-loader: 16.0.5(sass@1.93.2)(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)) + sass-loader: 16.0.5(sass-embedded@1.97.1)(sass@1.93.2)(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)) semver: 7.7.3 source-map-loader: 5.0.0(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)) source-map-support: 0.5.21 @@ -18862,7 +18950,7 @@ snapshots: '@angular/core': 21.0.5(@angular/compiler@21.0.5)(rxjs@7.8.1)(zone.js@0.15.1) tslib: 2.6.3 - '@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2))(@types/node@20.11.17)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(tslib@2.6.3)(typescript@5.5.4))(postcss@8.5.2)(terser@5.39.0)(typescript@5.5.4)(yaml@2.8.1)': + '@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2))(@types/node@20.11.17)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.5.4))(tslib@2.6.3)(typescript@5.5.4))(postcss@8.5.2)(sass-embedded@1.97.1)(terser@5.39.0)(typescript@5.5.4)(yaml@2.8.1)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.19(chokidar@4.0.1) @@ -18873,7 +18961,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.7 '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.10) '@inquirer/confirm': 5.1.6(@types/node@20.11.17) - '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1)) + '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1)) beasties: 0.3.2 browserslist: 4.28.0 esbuild: 0.25.4 @@ -18891,7 +18979,7 @@ snapshots: semver: 7.7.1 source-map-support: 0.5.21 typescript: 5.5.4 - vite: 6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1) watchpack: 2.4.2 optionalDependencies: '@angular/platform-server': 19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@19.2.17(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2) @@ -18913,7 +19001,7 @@ snapshots: - tsx - yaml - '@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.66.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.1)': + '@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.97.1)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.1)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.19(chokidar@4.0.1) @@ -18924,7 +19012,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.7 '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.10) '@inquirer/confirm': 5.1.6(@types/node@20.14.5) - '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) beasties: 0.3.2 browserslist: 4.28.0 esbuild: 0.25.4 @@ -18942,7 +19030,7 @@ snapshots: semver: 7.7.1 source-map-support: 0.5.21 typescript: 5.8.3 - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1) watchpack: 2.4.2 optionalDependencies: '@angular/platform-server': 19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1) @@ -18964,7 +19052,7 @@ snapshots: - tsx - yaml - '@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.66.0)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1)': + '@angular/build@19.2.19(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(@angular/compiler@19.2.17)(@angular/platform-server@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@types/node@20.14.5)(chokidar@4.0.1)(jiti@2.6.1)(karma@6.4.4)(less@4.4.2)(lightningcss@1.30.2)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.17(@angular/compiler@19.2.17)(typescript@5.8.3))(tslib@2.6.3)(typescript@5.8.3))(postcss@8.5.6)(sass-embedded@1.97.1)(terser@5.44.1)(typescript@5.8.3)(yaml@2.8.1)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.19(chokidar@4.0.1) @@ -18975,7 +19063,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.7 '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.10) '@inquirer/confirm': 5.1.6(@types/node@20.14.5) - '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) beasties: 0.3.2 browserslist: 4.28.0 esbuild: 0.25.4 @@ -18993,7 +19081,7 @@ snapshots: semver: 7.7.1 source-map-support: 0.5.21 typescript: 5.8.3 - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.85.0)(terser@5.44.1)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.44.1)(yaml@2.8.1) watchpack: 2.4.2 optionalDependencies: '@angular/platform-server': 19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/compiler@19.2.17)(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.2.17(@angular/common@19.2.17(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.2.17(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1) @@ -19016,7 +19104,7 @@ snapshots: - yaml optional: true - '@angular/build@21.0.3(cibbbnsh2fjx6deel2p5obhtaq)': + '@angular/build@21.0.3(dzn5lhgwlyouhf2o7m6j3zbpqe)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.2100.3(chokidar@4.0.1) @@ -19026,7 +19114,7 @@ snapshots: '@babel/helper-annotate-as-pure': 7.27.3 '@babel/helper-split-export-declaration': 7.24.7 '@inquirer/confirm': 5.1.19(@types/node@20.12.8) - '@vitejs/plugin-basic-ssl': 2.1.0(vite@7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)) + '@vitejs/plugin-basic-ssl': 2.1.0(vite@7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)) beasties: 0.3.5 browserslist: 4.28.0 esbuild: 0.26.0 @@ -19047,7 +19135,7 @@ snapshots: tslib: 2.8.1 typescript: 5.9.3 undici: 7.16.0 - vite: 7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1) + vite: 7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1) watchpack: 2.4.4 optionalDependencies: '@angular/core': 21.0.5(@angular/compiler@21.0.5)(rxjs@7.8.1)(zone.js@0.15.1) @@ -21624,7 +21712,19 @@ snapshots: '@bcoe/v8-coverage@0.2.3': {} - '@bufbuild/protobuf@1.10.0': {} + '@bufbuild/protobuf@2.10.2': {} + + '@cacheable/memory@2.0.7': + dependencies: + '@cacheable/utils': 2.3.3 + '@keyv/bigmap': 1.3.0(keyv@5.5.5) + hookified: 1.15.0 + keyv: 5.5.5 + + '@cacheable/utils@2.3.3': + dependencies: + hashery: 1.4.0 + keyv: 5.5.5 '@colors/colors@1.5.0': {} @@ -21638,17 +21738,32 @@ snapshots: dependencies: '@csstools/css-tokenizer': 2.4.1 + '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-tokenizer': 3.0.4 + '@csstools/css-tokenizer@2.4.1': {} + '@csstools/css-tokenizer@3.0.4': {} + '@csstools/media-query-list-parser@2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)': dependencies: '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1) '@csstools/css-tokenizer': 2.4.1 + '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.2)': dependencies: postcss-selector-parser: 6.1.2 + '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.1)': + dependencies: + postcss-selector-parser: 7.1.1 + '@dabh/diagnostics@2.0.3': dependencies: colorspace: 1.1.4 @@ -23099,6 +23214,14 @@ snapshots: '@jsonjoy.com/codegen': 1.0.0(tslib@2.6.3) tslib: 2.6.3 + '@keyv/bigmap@1.3.0(keyv@5.5.5)': + dependencies: + hashery: 1.4.0 + hookified: 1.15.0 + keyv: 5.5.5 + + '@keyv/serialize@1.1.1': {} + '@leichtgewicht/ip-codec@2.0.5': {} '@lezer/common@1.2.3': {} @@ -24782,10 +24905,10 @@ snapshots: '@standard-schema/spec@1.0.0': {} - '@storybook/addon-docs@10.1.9(@types/react@18.0.0)(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0))': + '@storybook/addon-docs@10.1.9(@types/react@18.0.0)(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0))': dependencies: '@mdx-js/react': 3.1.1(@types/react@18.0.0)(react@18.0.0) - '@storybook/csf-plugin': 10.1.9(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0)) + '@storybook/csf-plugin': 10.1.9(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0)) '@storybook/icons': 2.0.1(react-dom@18.0.0(react@18.0.0))(react@18.0.0) '@storybook/react-dom-shim': 10.1.9(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)) react: 18.0.0 @@ -24815,10 +24938,10 @@ snapshots: - '@swc/helpers' - webpack - '@storybook/builder-webpack5@10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))': + '@storybook/builder-webpack5@10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))': dependencies: '@storybook/core-webpack': 10.1.9(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)) - '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) case-sensitive-paths-webpack-plugin: 2.4.0 cjs-module-lexer: 1.4.1 css-loader: 7.1.2(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0)) @@ -24850,14 +24973,14 @@ snapshots: storybook: 10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) ts-dedent: 2.2.0 - '@storybook/csf-plugin@10.1.9(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0))': + '@storybook/csf-plugin@10.1.9(esbuild@0.26.0)(rollup@4.53.3)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))(webpack@5.103.0(@swc/core@1.15.3)(esbuild@0.26.0))': dependencies: storybook: 10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) unplugin: 2.3.11 optionalDependencies: esbuild: 0.26.0 rollup: 4.53.3 - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1) webpack: 5.103.0(@swc/core@1.15.3)(esbuild@0.26.0) '@storybook/global@5.0.0': {} @@ -24910,9 +25033,9 @@ snapshots: react-dom: 18.0.0(react@18.0.0) storybook: 10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) - '@storybook/react-webpack5@10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))': + '@storybook/react-webpack5@10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))': dependencies: - '@storybook/builder-webpack5': 10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1)) + '@storybook/builder-webpack5': 10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3)(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1)) '@storybook/preset-react-webpack': 10.1.9(@swc/core@1.15.3)(esbuild@0.26.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3) '@storybook/react': 10.1.9(react-dom@18.0.0(react@18.0.0))(react@18.0.0)(storybook@10.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@18.0.0(react@18.0.0))(react@18.0.0))(typescript@5.9.3) react: 18.0.0 @@ -26085,32 +26208,32 @@ snapshots: '@typescript-eslint/types': 8.25.0 eslint-visitor-keys: 4.2.1 - '@vitejs/plugin-basic-ssl@1.2.0(vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1))': + '@vitejs/plugin-basic-ssl@1.2.0(vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1))': dependencies: - vite: 6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1) - '@vitejs/plugin-basic-ssl@1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))': + '@vitejs/plugin-basic-ssl@1.2.0(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))': dependencies: - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1) - '@vitejs/plugin-basic-ssl@2.1.0(vite@7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))': + '@vitejs/plugin-basic-ssl@2.1.0(vite@7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))': dependencies: - vite: 7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1) + vite: 7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1) - '@vitejs/plugin-react@4.4.1(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))': + '@vitejs/plugin-react@4.4.1(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))': dependencies: '@babel/core': 7.28.5 '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.28.5) '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.28.5) '@types/babel__core': 7.20.5 react-refresh: 0.17.0 - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1) transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue@5.2.3(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.13(typescript@5.8.3))': + '@vitejs/plugin-vue@5.2.3(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.13(typescript@5.8.3))': dependencies: - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1) vue: 3.5.13(typescript@5.8.3) '@vitest/expect@3.2.4': @@ -26121,13 +26244,13 @@ snapshots: chai: 5.3.3 tinyrainbow: 2.0.0 - '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1))': + '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1))': dependencies: '@vitest/spy': 3.2.4 estree-walker: 3.0.3 magic-string: 0.30.19 optionalDependencies: - vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1) + vite: 6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1) '@vitest/pretty-format@3.2.4': dependencies: @@ -27933,6 +28056,14 @@ snapshots: object-assign: 4.1.1 rimraf: 2.7.1 + cacheable@2.3.1: + dependencies: + '@cacheable/memory': 2.0.7 + '@cacheable/utils': 2.3.3 + hookified: 1.15.0 + keyv: 5.5.5 + qified: 0.5.3 + cached-path-relative@1.1.0: {} call-bind-apply-helpers@1.0.2: @@ -28389,6 +28520,8 @@ snapshots: colorette@2.0.20: {} + colorjs.io@0.5.2: {} + colorspace@1.1.4: dependencies: color: 3.2.1 @@ -30254,87 +30387,87 @@ snapshots: eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - eslint-config-devextreme@1.1.5(ct6jntwxfthnvrea6gjzmrvbze): + eslint-config-devextreme@1.1.5(ktiezjignnyr4gpzrklqlohkhy): dependencies: - '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5) + '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4) eslint: 9.18.0(jiti@2.6.1) - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) - eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.14.5)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.12.8)(typescript@5.9.3)))(typescript@4.9.5) + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) + eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1)) + eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.11.17)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.12.8)(typescript@5.9.3)))(typescript@5.5.4) eslint-plugin-jest-formatting: 3.1.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-jsx-a11y: 6.8.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@4.9.5) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@4.9.5)) + stylelint: 16.22.0(typescript@5.5.4) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@5.5.4)) - eslint-config-devextreme@1.1.5(raex3yd3nxg6jj62hosm72ieie): + eslint-config-devextreme@1.1.5(xdj4xipx46p2yg7qbwclg5a2mi): dependencies: - '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4) + '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5) eslint: 9.18.0(jiti@2.6.1) - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) - eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.11.17)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.12.8)(typescript@5.9.3)))(typescript@5.5.4) + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) + eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)) + eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.11.17)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.11.17)(typescript@4.9.5)))(typescript@4.9.5) eslint-plugin-jest-formatting: 3.1.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-jsx-a11y: 6.8.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@5.5.4) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@5.5.4)) + stylelint: 16.22.0(typescript@4.9.5) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@4.9.5)) - eslint-config-devextreme@1.1.5(uxj2ndy35bxtdvjlkhkfsme5c4): + eslint-config-devextreme@1.1.5(xfwpv6vyuyfitchwyjhp2bibri): dependencies: '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5) eslint: 9.18.0(jiti@2.6.1) eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.11.17)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.11.17)(typescript@4.9.5)))(typescript@4.9.5) + eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.14.5)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.12.8)(typescript@5.9.3)))(typescript@4.9.5) eslint-plugin-jest-formatting: 3.1.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-jsx-a11y: 6.8.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@4.9.5) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@4.9.5)) + stylelint: 16.22.0(typescript@4.9.5) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@4.9.5)) - eslint-config-devextreme@1.1.6(aoohjc26cxezdvu4hxhevsauy4): + eslint-config-devextreme@1.1.6(6zxkuktm4jm4jcgvizeazxbkz4): dependencies: '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3) eslint: 9.18.0(jiti@2.6.1) eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.14.5)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.14.5)(typescript@5.9.3)))(typescript@5.9.3) + eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.14.5)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.12.8)(typescript@5.9.3)))(typescript@5.9.3) eslint-plugin-jest-formatting: 3.1.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-jsx-a11y: 6.8.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@5.9.3) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@5.9.3)) + stylelint: 16.22.0(typescript@5.9.3) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@5.9.3)) - eslint-config-devextreme@1.1.6(c32mtc2anpmz63ol32pzeficca): + eslint-config-devextreme@1.1.6(cr6nusfj3tc6sbt2qbhl46czcu): dependencies: '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3) eslint: 9.18.0(jiti@2.6.1) eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-config-airbnb-typescript: 18.0.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1)))(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1)) - eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.14.5)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.12.8)(typescript@5.9.3)))(typescript@5.9.3) + eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.18.0(jiti@2.6.1))(jest@29.7.0(@types/node@20.14.5)(babel-plugin-macros@3.1.0)(node-notifier@9.0.1)(ts-node@10.9.2(@swc/core@1.15.3)(@types/node@20.14.5)(typescript@5.9.3)))(typescript@5.9.3) eslint-plugin-jest-formatting: 3.1.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-jsx-a11y: 6.8.0(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@5.9.3) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@5.9.3)) + stylelint: 16.22.0(typescript@5.9.3) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@5.9.3)) - eslint-config-devextreme@1.1.6(ct6jntwxfthnvrea6gjzmrvbze): + eslint-config-devextreme@1.1.6(xfwpv6vyuyfitchwyjhp2bibri): dependencies: '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5) eslint: 9.18.0(jiti@2.6.1) @@ -30347,10 +30480,10 @@ snapshots: eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@4.9.5) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@4.9.5)) + stylelint: 16.22.0(typescript@4.9.5) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@4.9.5)) - eslint-config-devextreme@1.1.6(h6r4fe5temnwnzuk6cbunnj7oq): + eslint-config-devextreme@1.1.6(xhzmkch4hvasl4omgcltflkv5i): dependencies: '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5))(eslint@9.18.0(jiti@2.6.1))(typescript@4.9.5) eslint: 9.18.0(jiti@2.6.1) @@ -30364,9 +30497,9 @@ snapshots: eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) stylelint: 15.11.0(typescript@4.9.5) - stylelint-config-standard: 35.0.0(stylelint@15.11.0(typescript@4.9.5)) + stylelint-config-standard: 38.0.0(stylelint@15.11.0(typescript@4.9.5)) - eslint-config-devextreme@1.1.6(n47ybutmk4tn7tylmstnjfx4ie): + eslint-config-devextreme@1.1.6(yhza7jtxffxi7plvkgulnpvjry): dependencies: '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.23.0(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4))(eslint@9.18.0(jiti@2.6.1))(typescript@5.5.4) eslint: 9.18.0(jiti@2.6.1) @@ -30379,8 +30512,8 @@ snapshots: eslint-plugin-qunit: 8.1.2(eslint@9.18.0(jiti@2.6.1)) eslint-plugin-rulesdir: 0.2.2 eslint-plugin-spellcheck: 0.0.20(eslint@9.18.0(jiti@2.6.1)) - stylelint: 16.5.0(typescript@5.5.4) - stylelint-config-standard: 35.0.0(stylelint@16.5.0(typescript@5.5.4)) + stylelint: 16.22.0(typescript@5.5.4) + stylelint-config-standard: 38.0.0(stylelint@16.22.0(typescript@5.5.4)) eslint-import-resolver-node@0.3.9: dependencies: @@ -31329,6 +31462,10 @@ snapshots: dependencies: escape-string-regexp: 1.0.5 + file-entry-cache@10.1.4: + dependencies: + flat-cache: 6.1.19 + file-entry-cache@6.0.1: dependencies: flat-cache: 3.2.0 @@ -31492,10 +31629,18 @@ snapshots: flatted: 3.3.2 keyv: 4.5.4 + flat-cache@6.1.19: + dependencies: + cacheable: 2.3.1 + flatted: 3.3.3 + hookified: 1.15.0 + flat@5.0.2: {} flatted@3.3.2: {} + flatted@3.3.3: {} + flush-write-stream@1.1.1: dependencies: inherits: 2.0.4 @@ -32227,7 +32372,7 @@ snapshots: replacestream: 4.0.3 yargs-parser: 21.1.1 - gulp-sass@5.1.0: + gulp-sass@6.0.1: dependencies: lodash.clonedeep: 4.5.0 picocolors: 1.1.1 @@ -32385,6 +32530,10 @@ snapshots: inherits: 2.0.4 minimalistic-assert: 1.0.1 + hashery@1.4.0: + dependencies: + hookified: 1.15.0 + hasown@2.0.2: dependencies: function-bind: 1.1.2 @@ -32529,6 +32678,8 @@ snapshots: dependencies: parse-passwd: 1.0.0 + hookified@1.15.0: {} + hosted-git-info@2.8.9: {} hosted-git-info@4.1.0: @@ -32892,9 +33043,7 @@ snapshots: immediate@3.0.6: {} - immutable@4.3.5: {} - - immutable@5.0.3: {} + immutable@5.1.3: {} import-fresh@3.3.0: dependencies: @@ -34605,6 +34754,10 @@ snapshots: dependencies: json-buffer: 3.0.1 + keyv@5.5.5: + dependencies: + '@keyv/serialize': 1.1.1 + kind-of@1.1.0: {} kind-of@3.2.2: @@ -34627,10 +34780,10 @@ snapshots: known-css-properties@0.29.0: {} - known-css-properties@0.30.0: {} - known-css-properties@0.35.0: {} + known-css-properties@0.37.0: {} + kuler@2.0.0: {} labeled-stream-splicer@2.0.2: @@ -37006,9 +37159,9 @@ snapshots: dependencies: postcss: 8.4.38 - postcss-safe-parser@7.0.1(postcss@8.4.38): + postcss-safe-parser@7.0.1(postcss@8.5.6): dependencies: - postcss: 8.4.38 + postcss: 8.5.6 postcss-scss@4.0.9(postcss@8.5.6): dependencies: @@ -37024,6 +37177,11 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-selector-parser@7.1.1: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-value-parser@4.2.0: {} postcss-values-parser@6.0.2(postcss@8.4.38): @@ -37254,6 +37412,10 @@ snapshots: q@1.0.1: {} + qified@0.5.3: + dependencies: + hookified: 1.15.0 + qjobs@1.2.0: {} qrcode-terminal@0.10.0: {} @@ -38121,102 +38283,108 @@ snapshots: dependencies: truncate-utf8-bytes: 1.0.2 - sass-embedded-darwin-arm64@1.59.2: + sass-embedded-all-unknown@1.97.1: + dependencies: + sass: 1.97.1 optional: true - sass-embedded-darwin-arm64@1.66.0: + sass-embedded-android-arm64@1.97.1: optional: true - sass-embedded-darwin-x64@1.59.2: + sass-embedded-android-arm@1.97.1: optional: true - sass-embedded-darwin-x64@1.66.0: + sass-embedded-android-riscv64@1.97.1: optional: true - sass-embedded-linux-arm64@1.59.2: + sass-embedded-android-x64@1.97.1: optional: true - sass-embedded-linux-arm64@1.66.0: + sass-embedded-darwin-arm64@1.97.1: optional: true - sass-embedded-linux-arm@1.59.2: + sass-embedded-darwin-x64@1.97.1: optional: true - sass-embedded-linux-arm@1.66.0: + sass-embedded-linux-arm64@1.97.1: optional: true - sass-embedded-linux-ia32@1.59.2: + sass-embedded-linux-arm@1.97.1: optional: true - sass-embedded-linux-ia32@1.66.0: + sass-embedded-linux-musl-arm64@1.97.1: optional: true - sass-embedded-linux-x64@1.59.2: + sass-embedded-linux-musl-arm@1.97.1: optional: true - sass-embedded-linux-x64@1.66.0: + sass-embedded-linux-musl-riscv64@1.97.1: optional: true - sass-embedded-win32-ia32@1.59.2: + sass-embedded-linux-musl-x64@1.97.1: optional: true - sass-embedded-win32-ia32@1.66.0: + sass-embedded-linux-riscv64@1.97.1: optional: true - sass-embedded-win32-x64@1.59.2: + sass-embedded-linux-x64@1.97.1: optional: true - sass-embedded-win32-x64@1.66.0: + sass-embedded-unknown-all@1.97.1: + dependencies: + sass: 1.97.1 optional: true - sass-embedded@1.59.2: - dependencies: - '@bufbuild/protobuf': 1.10.0 - buffer-builder: 0.2.0 - immutable: 4.3.5 - rxjs: 7.8.1 - supports-color: 8.1.1 - optionalDependencies: - sass-embedded-darwin-arm64: 1.59.2 - sass-embedded-darwin-x64: 1.59.2 - sass-embedded-linux-arm: 1.59.2 - sass-embedded-linux-arm64: 1.59.2 - sass-embedded-linux-ia32: 1.59.2 - sass-embedded-linux-x64: 1.59.2 - sass-embedded-win32-ia32: 1.59.2 - sass-embedded-win32-x64: 1.59.2 + sass-embedded-win32-arm64@1.97.1: + optional: true - sass-embedded@1.66.0: + sass-embedded-win32-x64@1.97.1: + optional: true + + sass-embedded@1.97.1: dependencies: - '@bufbuild/protobuf': 1.10.0 + '@bufbuild/protobuf': 2.10.2 buffer-builder: 0.2.0 - immutable: 4.3.5 + colorjs.io: 0.5.2 + immutable: 5.1.3 rxjs: 7.8.2 supports-color: 8.1.1 + sync-child-process: 1.0.2 varint: 6.0.0 optionalDependencies: - sass-embedded-darwin-arm64: 1.66.0 - sass-embedded-darwin-x64: 1.66.0 - sass-embedded-linux-arm: 1.66.0 - sass-embedded-linux-arm64: 1.66.0 - sass-embedded-linux-ia32: 1.66.0 - sass-embedded-linux-x64: 1.66.0 - sass-embedded-win32-ia32: 1.66.0 - sass-embedded-win32-x64: 1.66.0 - - sass-loader@16.0.5(sass-embedded@1.66.0)(sass@1.85.0)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)): + sass-embedded-all-unknown: 1.97.1 + sass-embedded-android-arm: 1.97.1 + sass-embedded-android-arm64: 1.97.1 + sass-embedded-android-riscv64: 1.97.1 + sass-embedded-android-x64: 1.97.1 + sass-embedded-darwin-arm64: 1.97.1 + sass-embedded-darwin-x64: 1.97.1 + sass-embedded-linux-arm: 1.97.1 + sass-embedded-linux-arm64: 1.97.1 + sass-embedded-linux-musl-arm: 1.97.1 + sass-embedded-linux-musl-arm64: 1.97.1 + sass-embedded-linux-musl-riscv64: 1.97.1 + sass-embedded-linux-musl-x64: 1.97.1 + sass-embedded-linux-riscv64: 1.97.1 + sass-embedded-linux-x64: 1.97.1 + sass-embedded-unknown-all: 1.97.1 + sass-embedded-win32-arm64: 1.97.1 + sass-embedded-win32-x64: 1.97.1 + + sass-loader@16.0.5(sass-embedded@1.97.1)(sass@1.85.0)(webpack@5.98.0(@swc/core@1.15.3)(esbuild@0.25.4)): dependencies: neo-async: 2.6.2 optionalDependencies: sass: 1.85.0 - sass-embedded: 1.66.0 + sass-embedded: 1.97.1 webpack: 5.98.0(@swc/core@1.15.3)(esbuild@0.25.4) - sass-loader@16.0.5(sass@1.93.2)(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)): + sass-loader@16.0.5(sass-embedded@1.97.1)(sass@1.93.2)(webpack@5.102.1(@swc/core@1.15.3)(esbuild@0.26.0)): dependencies: neo-async: 2.6.2 optionalDependencies: sass: 1.93.2 + sass-embedded: 1.97.1 webpack: 5.102.1(@swc/core@1.15.3)(esbuild@0.25.0) sass-lookup@5.0.1: @@ -38226,7 +38394,7 @@ snapshots: sass@1.85.0: dependencies: chokidar: 4.0.1 - immutable: 5.0.3 + immutable: 5.1.3 source-map-js: 1.2.1 optionalDependencies: '@parcel/watcher': 2.5.0 @@ -38234,10 +38402,19 @@ snapshots: sass@1.93.2: dependencies: chokidar: 4.0.1 - immutable: 5.0.3 + immutable: 5.1.3 + source-map-js: 1.2.1 + optionalDependencies: + '@parcel/watcher': 2.5.0 + + sass@1.97.1: + dependencies: + chokidar: 4.0.1 + immutable: 5.1.3 source-map-js: 1.2.1 optionalDependencies: '@parcel/watcher': 2.5.0 + optional: true sax@1.4.1: optional: true @@ -39068,10 +39245,6 @@ snapshots: dependencies: ansi-regex: 5.0.1 - strip-ansi@7.1.0: - dependencies: - ansi-regex: 6.1.0 - strip-ansi@7.1.2: dependencies: ansi-regex: 6.1.0 @@ -39143,10 +39316,10 @@ snapshots: dependencies: inline-style-parser: 0.2.4 - stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.5.0(typescript@5.9.3)): + stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.22.0(typescript@5.9.3)): dependencies: postcss-html: 1.7.0 - stylelint: 16.5.0(typescript@5.9.3) + stylelint: 16.22.0(typescript@5.9.3) stylelint-config-recommended-scss@11.0.0(postcss@8.5.6)(stylelint@15.11.0(typescript@5.9.3)): dependencies: @@ -39157,33 +39330,37 @@ snapshots: optionalDependencies: postcss: 8.5.6 - stylelint-config-recommended-vue@1.5.0(postcss-html@1.7.0)(stylelint@16.5.0(typescript@5.9.3)): + stylelint-config-recommended-vue@1.6.1(postcss-html@1.7.0)(stylelint@16.22.0(typescript@5.9.3)): dependencies: postcss-html: 1.7.0 - semver: 7.6.3 - stylelint: 16.5.0(typescript@5.9.3) - stylelint-config-html: 1.1.0(postcss-html@1.7.0)(stylelint@16.5.0(typescript@5.9.3)) - stylelint-config-recommended: 14.0.1(stylelint@16.5.0(typescript@5.9.3)) + semver: 7.7.3 + stylelint: 16.22.0(typescript@5.9.3) + stylelint-config-html: 1.1.0(postcss-html@1.7.0)(stylelint@16.22.0(typescript@5.9.3)) + stylelint-config-recommended: 14.0.1(stylelint@16.22.0(typescript@5.9.3)) stylelint-config-recommended@12.0.0(stylelint@15.11.0(typescript@5.9.3)): dependencies: stylelint: 15.11.0(typescript@5.9.3) - stylelint-config-recommended@14.0.1(stylelint@15.11.0(typescript@4.9.5)): + stylelint-config-recommended@14.0.1(stylelint@16.22.0(typescript@5.9.3)): + dependencies: + stylelint: 16.22.0(typescript@5.9.3) + + stylelint-config-recommended@16.0.0(stylelint@15.11.0(typescript@4.9.5)): dependencies: stylelint: 15.11.0(typescript@4.9.5) - stylelint-config-recommended@14.0.1(stylelint@16.5.0(typescript@4.9.5)): + stylelint-config-recommended@16.0.0(stylelint@16.22.0(typescript@4.9.5)): dependencies: - stylelint: 16.5.0(typescript@4.9.5) + stylelint: 16.22.0(typescript@4.9.5) - stylelint-config-recommended@14.0.1(stylelint@16.5.0(typescript@5.5.4)): + stylelint-config-recommended@16.0.0(stylelint@16.22.0(typescript@5.5.4)): dependencies: - stylelint: 16.5.0(typescript@5.5.4) + stylelint: 16.22.0(typescript@5.5.4) - stylelint-config-recommended@14.0.1(stylelint@16.5.0(typescript@5.9.3)): + stylelint-config-recommended@16.0.0(stylelint@16.22.0(typescript@5.9.3)): dependencies: - stylelint: 16.5.0(typescript@5.9.3) + stylelint: 16.22.0(typescript@5.9.3) stylelint-config-standard-scss@9.0.0(postcss@8.5.6)(stylelint@15.11.0(typescript@5.9.3)): dependencies: @@ -39198,25 +39375,25 @@ snapshots: stylelint: 15.11.0(typescript@5.9.3) stylelint-config-recommended: 12.0.0(stylelint@15.11.0(typescript@5.9.3)) - stylelint-config-standard@35.0.0(stylelint@15.11.0(typescript@4.9.5)): + stylelint-config-standard@38.0.0(stylelint@15.11.0(typescript@4.9.5)): dependencies: stylelint: 15.11.0(typescript@4.9.5) - stylelint-config-recommended: 14.0.1(stylelint@15.11.0(typescript@4.9.5)) + stylelint-config-recommended: 16.0.0(stylelint@15.11.0(typescript@4.9.5)) - stylelint-config-standard@35.0.0(stylelint@16.5.0(typescript@4.9.5)): + stylelint-config-standard@38.0.0(stylelint@16.22.0(typescript@4.9.5)): dependencies: - stylelint: 16.5.0(typescript@4.9.5) - stylelint-config-recommended: 14.0.1(stylelint@16.5.0(typescript@4.9.5)) + stylelint: 16.22.0(typescript@4.9.5) + stylelint-config-recommended: 16.0.0(stylelint@16.22.0(typescript@4.9.5)) - stylelint-config-standard@35.0.0(stylelint@16.5.0(typescript@5.5.4)): + stylelint-config-standard@38.0.0(stylelint@16.22.0(typescript@5.5.4)): dependencies: - stylelint: 16.5.0(typescript@5.5.4) - stylelint-config-recommended: 14.0.1(stylelint@16.5.0(typescript@5.5.4)) + stylelint: 16.22.0(typescript@5.5.4) + stylelint-config-recommended: 16.0.0(stylelint@16.22.0(typescript@5.5.4)) - stylelint-config-standard@35.0.0(stylelint@16.5.0(typescript@5.9.3)): + stylelint-config-standard@38.0.0(stylelint@16.22.0(typescript@5.9.3)): dependencies: - stylelint: 16.5.0(typescript@5.9.3) - stylelint-config-recommended: 14.0.1(stylelint@16.5.0(typescript@5.9.3)) + stylelint: 16.22.0(typescript@5.9.3) + stylelint-config-recommended: 16.0.0(stylelint@16.22.0(typescript@5.9.3)) stylelint-scss@4.7.0(stylelint@15.11.0(typescript@5.9.3)): dependencies: @@ -39330,136 +39507,133 @@ snapshots: - supports-color - typescript - stylelint@16.5.0(typescript@4.9.5): + stylelint@16.22.0(typescript@4.9.5): dependencies: - '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1) - '@csstools/css-tokenizer': 2.4.1 - '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1) - '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.2) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) '@dual-bundle/import-meta-resolve': 4.1.0 balanced-match: 2.0.0 colord: 2.9.3 cosmiconfig: 9.0.0(typescript@4.9.5) css-functions-list: 3.2.3 - css-tree: 2.3.1 - debug: 4.3.7 - fast-glob: 3.3.2 + css-tree: 3.1.0 + debug: 4.4.3 + fast-glob: 3.3.3 fastest-levenshtein: 1.0.16 - file-entry-cache: 8.0.0 + file-entry-cache: 10.1.4 global-modules: 2.0.0 globby: 11.1.0 globjoin: 0.1.4 html-tags: 3.3.1 - ignore: 5.3.1 + ignore: 7.0.5 imurmurhash: 0.1.4 is-plain-object: 5.0.0 - known-css-properties: 0.30.0 + known-css-properties: 0.37.0 mathml-tag-names: 2.1.3 meow: 13.2.0 micromatch: 4.0.8 normalize-path: 3.0.0 picocolors: 1.1.1 - postcss: 8.4.38 + postcss: 8.5.6 postcss-resolve-nested-selector: 0.1.6 - postcss-safe-parser: 7.0.1(postcss@8.4.38) - postcss-selector-parser: 6.1.2 + postcss-safe-parser: 7.0.1(postcss@8.5.6) + postcss-selector-parser: 7.1.1 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 string-width: 4.2.3 - strip-ansi: 7.1.0 - supports-hyperlinks: 3.1.0 + supports-hyperlinks: 3.2.0 svg-tags: 1.0.0 - table: 6.8.2 + table: 6.9.0 write-file-atomic: 5.0.1 transitivePeerDependencies: - supports-color - typescript - stylelint@16.5.0(typescript@5.5.4): + stylelint@16.22.0(typescript@5.5.4): dependencies: - '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1) - '@csstools/css-tokenizer': 2.4.1 - '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1) - '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.2) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) '@dual-bundle/import-meta-resolve': 4.1.0 balanced-match: 2.0.0 colord: 2.9.3 cosmiconfig: 9.0.0(typescript@5.5.4) css-functions-list: 3.2.3 - css-tree: 2.3.1 - debug: 4.3.7 - fast-glob: 3.3.2 + css-tree: 3.1.0 + debug: 4.4.3 + fast-glob: 3.3.3 fastest-levenshtein: 1.0.16 - file-entry-cache: 8.0.0 + file-entry-cache: 10.1.4 global-modules: 2.0.0 globby: 11.1.0 globjoin: 0.1.4 html-tags: 3.3.1 - ignore: 5.3.1 + ignore: 7.0.5 imurmurhash: 0.1.4 is-plain-object: 5.0.0 - known-css-properties: 0.30.0 + known-css-properties: 0.37.0 mathml-tag-names: 2.1.3 meow: 13.2.0 micromatch: 4.0.8 normalize-path: 3.0.0 picocolors: 1.1.1 - postcss: 8.4.38 + postcss: 8.5.6 postcss-resolve-nested-selector: 0.1.6 - postcss-safe-parser: 7.0.1(postcss@8.4.38) - postcss-selector-parser: 6.1.2 + postcss-safe-parser: 7.0.1(postcss@8.5.6) + postcss-selector-parser: 7.1.1 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 string-width: 4.2.3 - strip-ansi: 7.1.0 - supports-hyperlinks: 3.1.0 + supports-hyperlinks: 3.2.0 svg-tags: 1.0.0 - table: 6.8.2 + table: 6.9.0 write-file-atomic: 5.0.1 transitivePeerDependencies: - supports-color - typescript - stylelint@16.5.0(typescript@5.9.3): + stylelint@16.22.0(typescript@5.9.3): dependencies: - '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1) - '@csstools/css-tokenizer': 2.4.1 - '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1) - '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.2) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1) '@dual-bundle/import-meta-resolve': 4.1.0 balanced-match: 2.0.0 colord: 2.9.3 cosmiconfig: 9.0.0(typescript@5.9.3) css-functions-list: 3.2.3 - css-tree: 2.3.1 - debug: 4.3.7 - fast-glob: 3.3.2 + css-tree: 3.1.0 + debug: 4.4.3 + fast-glob: 3.3.3 fastest-levenshtein: 1.0.16 - file-entry-cache: 8.0.0 + file-entry-cache: 10.1.4 global-modules: 2.0.0 globby: 11.1.0 globjoin: 0.1.4 html-tags: 3.3.1 - ignore: 5.3.1 + ignore: 7.0.5 imurmurhash: 0.1.4 is-plain-object: 5.0.0 - known-css-properties: 0.30.0 + known-css-properties: 0.37.0 mathml-tag-names: 2.1.3 meow: 13.2.0 micromatch: 4.0.8 normalize-path: 3.0.0 picocolors: 1.1.1 - postcss: 8.4.38 + postcss: 8.5.6 postcss-resolve-nested-selector: 0.1.6 - postcss-safe-parser: 7.0.1(postcss@8.4.38) - postcss-selector-parser: 6.1.2 + postcss-safe-parser: 7.0.1(postcss@8.5.6) + postcss-selector-parser: 7.1.1 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 string-width: 4.2.3 - strip-ansi: 7.1.0 - supports-hyperlinks: 3.1.0 + supports-hyperlinks: 3.2.0 svg-tags: 1.0.0 - table: 6.8.2 + table: 6.9.0 write-file-atomic: 5.0.1 transitivePeerDependencies: - supports-color @@ -39492,6 +39666,11 @@ snapshots: has-flag: 4.0.0 supports-color: 7.2.0 + supports-hyperlinks@3.2.0: + dependencies: + has-flag: 4.0.0 + supports-color: 7.2.0 + supports-preserve-symlinks-flag@1.0.0: {} sver-compat@1.5.0: @@ -39513,6 +39692,12 @@ snapshots: symbol-tree@3.2.4: {} + sync-child-process@1.0.2: + dependencies: + sync-message-port: 1.1.3 + + sync-message-port@1.1.3: {} + syntax-error@1.4.0: dependencies: acorn-node: 1.8.2 @@ -39563,6 +39748,14 @@ snapshots: string-width: 4.2.3 strip-ansi: 6.0.1 + table@6.9.0: + dependencies: + ajv: 8.17.1 + lodash.truncate: 4.4.2 + slice-ansi: 4.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + tapable@2.2.1: {} tapable@2.3.0: {} @@ -41082,7 +41275,7 @@ snapshots: replace-ext: 2.0.0 teex: 1.0.1 - vite@5.4.21(@types/node@20.14.5)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1): + vite@5.4.21(@types/node@20.14.5)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1): dependencies: esbuild: 0.21.5 postcss: 8.5.6 @@ -41092,11 +41285,11 @@ snapshots: fsevents: 2.3.3 less: 4.4.2 lightningcss: 1.30.2 - sass: 1.93.2 - sass-embedded: 1.66.0 + sass: 1.97.1 + sass-embedded: 1.97.1 terser: 5.44.1 - vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1): + vite@6.4.1(@types/node@20.11.17)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1): dependencies: esbuild: 0.25.0 fdir: 6.5.0(picomatch@4.0.3) @@ -41111,10 +41304,11 @@ snapshots: less: 4.2.2 lightningcss: 1.30.2 sass: 1.85.0 + sass-embedded: 1.97.1 terser: 5.39.0 yaml: 2.8.1 - vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1): + vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.2.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.39.0)(yaml@2.8.1): dependencies: esbuild: 0.25.0 fdir: 6.5.0(picomatch@4.0.3) @@ -41129,11 +41323,11 @@ snapshots: less: 4.2.2 lightningcss: 1.30.2 sass: 1.85.0 - sass-embedded: 1.66.0 + sass-embedded: 1.97.1 terser: 5.39.0 yaml: 2.8.1 - vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.85.0)(terser@5.44.1)(yaml@2.8.1): + vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.85.0)(terser@5.44.1)(yaml@2.8.1): dependencies: esbuild: 0.25.0 fdir: 6.5.0(picomatch@4.0.3) @@ -41148,12 +41342,12 @@ snapshots: less: 4.4.2 lightningcss: 1.30.2 sass: 1.85.0 - sass-embedded: 1.66.0 + sass-embedded: 1.97.1 terser: 5.44.1 yaml: 2.8.1 optional: true - vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.66.0)(sass@1.93.2)(terser@5.44.1)(yaml@2.8.1): + vite@6.4.1(@types/node@20.14.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.1): dependencies: esbuild: 0.25.0 fdir: 6.5.0(picomatch@4.0.3) @@ -41167,12 +41361,12 @@ snapshots: jiti: 2.6.1 less: 4.4.2 lightningcss: 1.30.2 - sass: 1.93.2 - sass-embedded: 1.66.0 + sass: 1.97.1 + sass-embedded: 1.97.1 terser: 5.44.1 yaml: 2.8.1 - vite@7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1): + vite@7.2.2(@types/node@20.12.8)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.97.1)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1): dependencies: esbuild: 0.25.0 fdir: 6.5.0(picomatch@4.0.3) @@ -41187,6 +41381,7 @@ snapshots: less: 4.4.2 lightningcss: 1.30.2 sass: 1.93.2 + sass-embedded: 1.97.1 terser: 5.44.0 yaml: 2.8.1