From 06012bc89b825d398b0f15e9f8968a815aa5bee8 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 12 Jan 2026 16:24:26 +0400 Subject: [PATCH 1/4] Demos: test color-contrast rule --- .github/workflows/testcafe_tests.yml | 1 + .../accessibility-unsupported-components.js | 16 ++++++++-------- apps/demos/testing/common.test.ts | 2 +- .../helpers/accessibility/utils.ts | 2 +- .../tests/accessibility/accordion.ts | 2 +- .../tests/accessibility/actionSheet.ts | 3 +-- .../tests/accessibility/autocomplete.ts | 2 +- .../tests/accessibility/button.ts | 2 +- .../tests/accessibility/buttonGroup.ts | 2 +- .../tests/accessibility/calendar.ts | 2 +- .../accessibility/cardView/columnChooser.ts | 2 +- .../accessibility/cardView/columnSortable.ts | 4 ++-- .../tests/accessibility/cardView/filterPanel.ts | 2 +- .../tests/accessibility/cardView/headerPanel.ts | 2 +- .../tests/accessibility/cardView/sortable.ts | 2 +- .../tests/accessibility/chat.ts | 2 +- .../tests/accessibility/checkBox.ts | 2 +- .../tests/accessibility/colorBox.ts | 2 +- .../tests/accessibility/contextMenu.ts | 2 +- .../tests/accessibility/dataGrid/common.ts | 4 ++-- .../tests/accessibility/dateBox.ts | 2 +- .../tests/accessibility/dateRangeBox.ts | 2 +- .../tests/accessibility/drawer.ts | 2 +- .../tests/accessibility/dropDownBox.ts | 2 +- .../tests/accessibility/dropDownButton.ts | 2 +- .../tests/accessibility/fileUploader.ts | 2 +- .../tests/accessibility/filterBuilder.ts | 2 +- .../tests/accessibility/floatingActionButton.ts | 2 +- .../tests/accessibility/form.ts | 2 +- .../tests/accessibility/gallery.ts | 2 +- .../tests/accessibility/htmlEditor.ts | 2 +- .../tests/accessibility/list.ts | 2 +- .../tests/accessibility/loadIndicator.ts | 2 +- .../tests/accessibility/loadPanel.ts | 2 +- .../tests/accessibility/lookup.ts | 2 +- .../tests/accessibility/menu.ts | 2 +- .../tests/accessibility/multiView.ts | 2 +- .../tests/accessibility/numberBox.ts | 2 +- .../tests/accessibility/pagination.ts | 2 +- .../tests/accessibility/popover.ts | 3 +-- .../tests/accessibility/popup.ts | 3 +-- .../tests/accessibility/progressBar.ts | 2 +- .../tests/accessibility/radioGroup.ts | 2 +- .../tests/accessibility/rangeSlider.ts | 2 +- .../tests/accessibility/scheduler/axe_options.ts | 2 +- .../tests/accessibility/scheduler/legacyPopup.ts | 2 +- .../tests/accessibility/selectBox.ts | 2 +- .../tests/accessibility/slider.ts | 2 +- .../tests/accessibility/switch.ts | 2 +- .../tests/accessibility/tabPanel.ts | 3 +-- .../tests/accessibility/tabs.ts | 3 +-- .../tests/accessibility/tagBox.ts | 2 +- .../tests/accessibility/textArea.ts | 2 +- .../tests/accessibility/textBox.ts | 2 +- .../tests/accessibility/toast.ts | 2 +- .../tests/accessibility/toolbar.ts | 2 +- .../tests/accessibility/tooltip.ts | 2 +- .../tests/accessibility/validationSummary.ts | 2 +- 58 files changed, 67 insertions(+), 71 deletions(-) diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml index 9a96b37eded1..fc0620f2878f 100644 --- a/.github/workflows/testcafe_tests.yml +++ b/.github/workflows/testcafe_tests.yml @@ -95,6 +95,7 @@ jobs: matrix: ARGS: [ { componentFolder: "accessibility", name: "accessibility" }, + { componentFolder: "accessibility - material", name: "accessibility", theme: 'material.blue.light' }, { componentFolder: "common", name: "common" }, { name: "generic", theme: 'generic.light' }, diff --git a/apps/demos/testing/accessibility-unsupported-components.js b/apps/demos/testing/accessibility-unsupported-components.js index afb918a223bc..b896121bee5f 100644 --- a/apps/demos/testing/accessibility-unsupported-components.js +++ b/apps/demos/testing/accessibility-unsupported-components.js @@ -1,10 +1,10 @@ export const accessibilityUnsupportedComponents = [ - 'Accordion', - 'Charts', - 'Diagram', - 'FileManager', - 'Gantt', - 'Map', - 'Scheduler', - 'PivotGrid', + // 'Accordion', + // 'Charts', + // 'Diagram', + // 'FileManager', + // 'Gantt', + // 'Map', + // 'Scheduler', + // 'PivotGrid', ]; diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts index c99df5fa2510..602eb78326db 100644 --- a/apps/demos/testing/common.test.ts +++ b/apps/demos/testing/common.test.ts @@ -163,7 +163,7 @@ Object.values(FRAMEWORKS).forEach((approach) => { const specificSkipRules = getTestSpecificSkipRules(testName); const options = { rules: {} }; - [...COMMON_SKIP_RULES, ...specificSkipRules].forEach((ruleName) => { + [/*...COMMON_SKIP_RULES*/, ...specificSkipRules].forEach((ruleName) => { options.rules[ruleName] = { enabled: false }; }); diff --git a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts index b813b4e27343..aff11c4539fe 100644 --- a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts +++ b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts @@ -8,7 +8,7 @@ export interface A11yCheckOptions extends RunOptions { const defaultOptions = { rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/accordion.ts b/e2e/testcafe-devextreme/tests/accessibility/accordion.ts index c1311d78d016..1bce3b86aff1 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/accordion.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/accordion.ts @@ -35,7 +35,7 @@ const created = async (t: TestController, optionConfiguration): Promise => const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts index ff8a1743caf9..b83d4d726ea3 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts @@ -24,8 +24,7 @@ const options: Options = { const a11yCheckConfig = isMaterialBased() ? { // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, + rules: { 'color-contrast': { enabled: true } }, } : {}; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts b/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts index c15e8a80003c..1fa1acaeac0a 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts @@ -28,7 +28,7 @@ const buttonsOptions: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/button.ts b/e2e/testcafe-devextreme/tests/accessibility/button.ts index 88e97d728f9a..be196fb1ed05 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/button.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/button.ts @@ -36,7 +36,7 @@ const created = async (t: TestController, optionConfiguration): Promise => const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, // NOTE: false positive in isMaterialBased 'nested-interactive': { enabled: !isMaterialBased() }, }, diff --git a/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts index 0ca1bd095df1..47497fa32fb0 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts @@ -27,7 +27,7 @@ const optionsWithSimpleItems: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/calendar.ts b/e2e/testcafe-devextreme/tests/accessibility/calendar.ts index 622661b3404a..12b9e13c36be 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/calendar.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/calendar.ts @@ -18,7 +18,7 @@ const options: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, // NOTE: empty-table-header issues 'empty-table-header': { enabled: false }, }, diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts index 30e97be9be06..dd008ea2a0c7 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts @@ -41,7 +41,7 @@ test('column chooser in \'dragAndDrop\' mode', async (t) => { await cardView.apiShowColumnChooser(); const a11yCheckConfig = { - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR); }).before(async () => createWidget('dxCardView', { diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts index bd3c171c340c..fbb2d2267771 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts @@ -16,7 +16,7 @@ test('headerPanel dragging column when it has sorting and headerFilter', async ( await triggerDragStart(columnElement); const a11yCheckConfig = { - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR); }).before(async () => createWidget('dxCardView', { @@ -47,7 +47,7 @@ test('dropzone appear in headerPanel when drag from columnChooser a column', asy await t.wait(500); // wait for dropzone animation to finish const a11yCheckConfig = { - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR); }).before(async () => createWidget('dxCardView', { diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts index ae8378d826e8..bb5fe94d55bf 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts @@ -15,7 +15,7 @@ test('FilterPanel and FilterBuilderPopup', async (t) => { await t.click(cardView.getFilterPanel().getIconFilter().element); const a11yCheckConfig = { - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR); }).before(async () => { diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts index 4752c3acdb13..6b87b68d0b22 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts @@ -9,7 +9,7 @@ fixture.disablePageReloads`CardView - HeaderPanel` const CARD_VIEW_SELECTOR = '#container'; const HEADER_PANEL_SELECTOR = `${CARD_VIEW_SELECTOR} .dx-cardview-headers`; const a11yCheckConfig = { - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; test('Default render', async (t) => { diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts index b714e4744441..3ca4bf4fc9af 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts @@ -16,7 +16,7 @@ const DRAG_MOVE_Y_COEFFICIENT = 1; const a11yCheckConfig = { rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, // NOTE: Draggable template is outside the role="main" landmark region: { enabled: false }, }, diff --git a/e2e/testcafe-devextreme/tests/accessibility/chat.ts b/e2e/testcafe-devextreme/tests/accessibility/chat.ts index 2e8272555794..617221937362 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/chat.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/chat.ts @@ -43,7 +43,7 @@ const created = async (t: TestController): Promise => { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts b/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts index 4431d2100ebf..346d38a751b3 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts @@ -14,7 +14,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const availabilityConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts b/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts index 2f5b76457932..bc253971a93b 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts @@ -23,7 +23,7 @@ const buttonsOptions: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts b/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts index 00fe9713362f..a63e86a11a72 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts @@ -31,7 +31,7 @@ const created = async (t: TestController): Promise => { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts index 0e630c7c0f04..8fe8f7ba6244 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts @@ -289,7 +289,7 @@ test('Filter panel - popup with filter builder', async (t) => { ...a11yCheckConfig, runOnly: '', rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }); }).before(async () => createWidget('dxDataGrid', { @@ -341,7 +341,7 @@ test('Search panel - highlight', async (t) => { ...a11yCheckConfig, runOnly: '', rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }, DATA_GRID_SELECTOR); }).before(async () => createWidget('dxDataGrid', { diff --git a/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts b/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts index 503934397e15..4da9306621df 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts @@ -51,7 +51,7 @@ const created = async (t: TestController, optionConfiguration): Promise => const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts b/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts index edc87098ec73..a4189735206f 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts @@ -29,7 +29,7 @@ const commonOptions: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/drawer.ts b/e2e/testcafe-devextreme/tests/accessibility/drawer.ts index e9665cd9a8cd..c5f48014172b 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/drawer.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/drawer.ts @@ -19,7 +19,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts b/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts index 4b2cdf2ee092..b0d3802325fa 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts @@ -24,7 +24,7 @@ const buttonsOptions: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const deferredConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts b/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts index c76a940dc20e..08a003939f38 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts @@ -21,7 +21,7 @@ const options: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts b/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts index 6589640ca21a..aac207a742a4 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts @@ -27,7 +27,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const availabilityConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts b/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts index 1a269d419357..16e439b4ac4e 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts @@ -95,7 +95,7 @@ elements.forEach(({ { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }, '#parentContainer', diff --git a/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts b/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts index 9fe613f9a65f..ed0621734632 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts @@ -13,7 +13,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/form.ts b/e2e/testcafe-devextreme/tests/accessibility/form.ts index c4e8ab7b143f..777f647f0e64 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/form.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/form.ts @@ -39,7 +39,7 @@ const requiredFieldsOptions: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/gallery.ts b/e2e/testcafe-devextreme/tests/accessibility/gallery.ts index f09cf5c43579..e9709f3a4282 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/gallery.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/gallery.ts @@ -32,7 +32,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts b/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts index 2eeeb3c5d303..36e19dfca739 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts @@ -34,7 +34,7 @@ const created = async (t: TestController): Promise => { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/list.ts b/e2e/testcafe-devextreme/tests/accessibility/list.ts index 10552707ffcf..31262f4b63a9 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/list.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/list.ts @@ -71,7 +71,7 @@ const optionsWithSimpleItems: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts b/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts index 83a2cd685ea3..66cd16aae0f5 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts @@ -13,7 +13,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts index 020e7fc541b3..dda5654de371 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts @@ -16,7 +16,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/lookup.ts b/e2e/testcafe-devextreme/tests/accessibility/lookup.ts index 20d579a5ec6d..1054b8436bd5 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/lookup.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/lookup.ts @@ -19,7 +19,7 @@ const options: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/menu.ts b/e2e/testcafe-devextreme/tests/accessibility/menu.ts index c3e8e4025c78..45e308ae413b 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/menu.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/menu.ts @@ -64,7 +64,7 @@ const created = async (t: TestController, optionConfiguration): Promise => const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/multiView.ts b/e2e/testcafe-devextreme/tests/accessibility/multiView.ts index 8b464adad72d..b2294de7fd39 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/multiView.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/multiView.ts @@ -18,7 +18,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts b/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts index 4f529e2f2d3a..7062d681775c 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts @@ -20,7 +20,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/pagination.ts b/e2e/testcafe-devextreme/tests/accessibility/pagination.ts index 08276bc727e4..798834de0491 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/pagination.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/pagination.ts @@ -16,7 +16,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/popover.ts b/e2e/testcafe-devextreme/tests/accessibility/popover.ts index 7c7c88ee3da5..875ae51d4580 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/popover.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/popover.ts @@ -31,8 +31,7 @@ const options: Options = { const a11yCheckConfig = isMaterialBased() ? { // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, + rules: { 'color-contrast': { enabled: true } }, } : {}; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/popup.ts b/e2e/testcafe-devextreme/tests/accessibility/popup.ts index ed4aeaef7de8..be02db1b6ff3 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/popup.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/popup.ts @@ -33,8 +33,7 @@ const options: Options = { const a11yCheckConfig = isMaterialBased() ? { // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, + rules: { 'color-contrast': { enabled: true } }, } : {}; const visibleConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts index af3010386f7b..bf4c3dbb39eb 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts @@ -17,7 +17,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts index 8c0b4f595082..ef75ea81ec89 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts @@ -17,7 +17,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts b/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts index bfa8445afbf8..d039cb60ce27 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts @@ -36,7 +36,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts index 5489ea69e9b9..b98142b13b89 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts @@ -1,5 +1,5 @@ export const checkOptions = { rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts index aea79d7a4639..76df6c23acce 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts @@ -8,7 +8,7 @@ fixture.disablePageReloads`Scheduler - Popup` const checkOptions = { rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts b/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts index 90c191f2f3ab..3fd06977b60c 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts @@ -33,7 +33,7 @@ const buttonsOptions: Options = { const a11yCheckConfig = { rules: { // NOTE: color-contrast issues - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/slider.ts b/e2e/testcafe-devextreme/tests/accessibility/slider.ts index 0f49ace32244..bb64b2936c27 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/slider.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/slider.ts @@ -33,7 +33,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const availabilityConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/switch.ts b/e2e/testcafe-devextreme/tests/accessibility/switch.ts index 6ec58bd4745c..8f4a78783adb 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/switch.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/switch.ts @@ -16,7 +16,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues rules: { - 'color-contrast': { enabled: false }, + 'color-contrast': { enabled: true }, }, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts index e6927533a9ca..2e0e7e6f535c 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts @@ -30,8 +30,7 @@ const options: Options = { const a11yCheckConfig = isMaterialBased() ? { // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, + rules: { 'color-contrast': { enabled: true } }, } : {}; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts index 657b7be6a425..b276927ef758 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts @@ -35,8 +35,7 @@ const created = async (t: TestController): Promise => { const a11yCheckConfig = isMaterialBased() ? { // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, + rules: { 'color-contrast': { enabled: true } }, } : {}; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts b/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts index 46825e9e3a76..942c85ba3d6e 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts @@ -57,7 +57,7 @@ const buttonsCreated = async (t: TestController): Promise => { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/textArea.ts b/e2e/testcafe-devextreme/tests/accessibility/textArea.ts index bdd3004d0c7a..fbbbd366769f 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/textArea.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/textArea.ts @@ -18,7 +18,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const availabilityConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/textBox.ts b/e2e/testcafe-devextreme/tests/accessibility/textBox.ts index 6aaf9b67677a..ca77f033c59f 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/textBox.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/textBox.ts @@ -18,7 +18,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const availabilityConfiguration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/toast.ts b/e2e/testcafe-devextreme/tests/accessibility/toast.ts index 61f7f3782c70..839615133f07 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/toast.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/toast.ts @@ -14,7 +14,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts b/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts index a7818b52f20f..f8b65e8be5f7 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts @@ -39,7 +39,7 @@ const created = async (t: TestController, optionConfiguration): Promise => const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts b/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts index 04feb0029cc0..72f2d1d1c20a 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts @@ -16,7 +16,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { diff --git a/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts b/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts index 1ead2cf57c14..d92d8c73aafb 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts @@ -12,7 +12,7 @@ const options: Options = { const a11yCheckConfig = { // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: false } }, + rules: { 'color-contrast': { enabled: true } }, }; const configuration: Configuration = { From f9dd90302b7ca8707bf3916b331aca1ce56c26a2 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 22 Jan 2026 14:51:13 +0400 Subject: [PATCH 2/4] Step1: update base colors --- .../utils/visual-tests/testcafe-runner.ts | 2 +- e2e/testcafe-devextreme/runner.ts | 2 +- .../scss/widgets/material/_colors.scss | 12 +-- .../scss/widgets/material/button/_colors.scss | 84 +++++++++---------- .../scss/widgets/material/tagBox/_colors.scss | 4 +- .../widgets/material/textEditor/_colors.scss | 4 +- 6 files changed, 55 insertions(+), 53 deletions(-) diff --git a/apps/demos/utils/visual-tests/testcafe-runner.ts b/apps/demos/utils/visual-tests/testcafe-runner.ts index b16313c49448..76c6d30b97aa 100644 --- a/apps/demos/utils/visual-tests/testcafe-runner.ts +++ b/apps/demos/utils/visual-tests/testcafe-runner.ts @@ -1,7 +1,7 @@ import createTestCafe, { ClientFunction } from 'testcafe'; import fs from 'fs'; -const LAUNCH_RETRY_ATTEMPTS = 3; +const LAUNCH_RETRY_ATTEMPTS = 1; const LAUNCH_RETRY_TIMEOUT = 10000; const wait = async ( diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts index a738c017c205..1d07d6c3bae6 100644 --- a/e2e/testcafe-devextreme/runner.ts +++ b/e2e/testcafe-devextreme/runner.ts @@ -12,7 +12,7 @@ import { } from './helpers/testPageUtils'; import { getCurrentTheme } from './helpers/themeUtils'; -const LAUNCH_RETRY_ATTEMPTS = 3; +const LAUNCH_RETRY_ATTEMPTS = 1; const LAUNCH_RETRY_TIMEOUT = 10000; const FAILED_TESTS_RETRY_ATTEMPTS = 2; diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index d6f74d3f8731..9ca74d5f20ae 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -62,19 +62,19 @@ $base-shadow-color: null !default; * $name 50. Success color * $type color */ -$base-success: #8bc34a !default; +$base-success: #006600 !default; /** * $name 60. Warning color * $type color */ -$base-warning: #ffc107 !default; +$base-warning: #E54304 !default; /** * $name 70. Danger color * $type color */ -$base-danger: #f44336 !default; +$base-danger: #C40011 !default; /** * $name 80. Hover state text color @@ -111,7 +111,7 @@ $scrollview-pulldown-path: null !default; @if $color == "blue" { $material-color-accent-modificator: "blue" !default; - $base-accent: #03a9f4 !default; + $base-accent: #1F3DFF !default; } @if $color == "lime" { @@ -154,10 +154,10 @@ $base-link-color: $base-accent !default; $base-element-bg: $base-bg !default; $base-shadow-color: $base-inverted-bg !default; $base-hover-color: $base-text-color !default; - $base-hover-bg: color.change(#000, $alpha: 0.04) !default; + $base-hover-bg: color.change(#fff, $alpha: 0.08) !default; $base-inverted-text-color: #fff !default; $base-focus-color: $base-inverted-text-color !default; - $base-focus-bg: color.change(#000, $alpha: 0.04) !default; + $base-focus-bg: color.change(#fff, $alpha: 0.08) !default; $base-inverted-icon-color: $base-inverted-text-color !default; $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss index e4648cc856e8..2009947ccd98 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss @@ -98,9 +98,9 @@ $button-default-selected-bg: null !default; $button-default-icon-color: $button-default-color !default; $button-default-outlined-bg: transparent !default; $button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default; -$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default; -$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.36) !default; -$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default; +$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default; +$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.18) !default; +$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default; /** * $name 11. Text color (outlined) @@ -116,9 +116,9 @@ $button-default-outlined-border-color: $button-default-bg !default; $button-default-outlined-selected-color: $button-default-bg !default; $button-default-text-bg: transparent !default; $button-default-text-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default; -$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default; -$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.36) !default; -$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default; +$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default; +$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.18) !default; +$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default; /** * $name 11. Text color (text) @@ -176,16 +176,16 @@ $button-danger-selected-bg: null !default; $button-danger-icon-color: $button-danger-color !default; $button-danger-outlined-bg: transparent !default; $button-danger-outlined-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default; -$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default; -$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default; -$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default; +$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default; +$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default; +$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default; $button-danger-outlined-selected-color: $button-danger-bg !default; $button-danger-text-bg: transparent !default; $button-danger-text-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default; -$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default; -$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default; -$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default; +$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default; +$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default; +$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default; $button-danger-text-selected-color: $button-danger-bg !default; /** @@ -232,16 +232,16 @@ $button-success-selected-bg: null !default; $button-success-icon-color: $button-success-color !default; $button-success-outlined-bg: transparent !default; $button-success-outlined-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default; -$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default; -$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.36) !default; -$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default; +$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default; +$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.18) !default; +$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default; $button-success-outlined-selected-color: $button-success-bg !default; $button-success-text-bg: transparent !default; $button-success-text-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default; -$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default; -$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.36) !default; -$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default; +$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default; +$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.18) !default; +$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default; $button-success-text-selected-color: $button-success-bg !default; @if $mode == "light" { @@ -252,18 +252,18 @@ $button-success-text-selected-color: $button-success-bg !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; + $button-default-hover-bg: color.adjust($button-default-bg, $lightness: 3.53%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 7.84%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-bg, $lightness: 7.06%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-bg, $lightness: 6.27%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 3.53%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 7.84%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 7.06%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 6.27%, $space: hsl) !default; + $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 3.53%, $space: hsl) !default; + $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 7.84%, $space: hsl) !default; + $button-success-active-bg: color.adjust($button-success-bg, $lightness: 7.06%, $space: hsl) !default; + $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 6.27%, $space: hsl) !default; } @if $mode == "dark" { @@ -274,18 +274,18 @@ $button-success-text-selected-color: $button-success-bg !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-default-hover-bg: color.adjust($button-default-bg, $lightness: -3.53%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -7.84%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -7.06%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -6.27%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -3.53%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -7.84%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -7.06%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -6.27%, $space: hsl) !default; + $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -3.53%, $space: hsl) !default; + $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -7.84%, $space: hsl) !default; + $button-success-active-bg: color.adjust($button-success-bg, $lightness: -7.06%, $space: hsl) !default; + $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -6.27%, $space: hsl) !default; } $button-disabled-text-color: $button-disabled-background !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss index 4cb276546f55..8988582a9871 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss @@ -9,7 +9,7 @@ * $name 10. Tag text color * $type color */ -$tagbox-tag-color: color.change($base-text-color, $alpha: 0.6) !default; +$tagbox-tag-color: $base-text-color !default; /** * $name 20. Tag background color @@ -28,7 +28,7 @@ $tagbox-tag-active-color: $base-text-color !default; * $name 40. Tag close button color * $type color */ -$tagbox-tag-button-remove-bg: rgba(0, 0, 0, 0.36) !default; +$tagbox-tag-button-remove-bg: $base-icon-color !default; $tagbox-tag-button-remove-color: null !default; $tagbox-tag-focused-bg: null !default; $tagbox-select-all-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss index 2c001732a6c1..d366eb350fb2 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -56,7 +56,7 @@ $texteditor-button-clear-icon-color: null !default; $texteditor-button-clear-icon-color-bg: null !default; $texteditor-invalid-focused-border-color: $base-invalid-color !default; $texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !default; -$texteditor-disabled-color: $base-disabled-color !default; +$texteditor-disabled-color: null !default; $texteditor-input-border-radius: $base-border-radius !default; $texteditor-label-transition: font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, @@ -64,11 +64,13 @@ $texteditor-label-transition: top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; @if $mode == "light" { + $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !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-disabled-color: rgba(255, 255, 255, 0.6) !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; } From 6fd1ff835420eb29fdd3bd585636a29c30386360 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 23 Jan 2026 20:46:42 +0400 Subject: [PATCH 3/4] Step 2: update base colors again. Fix button.disabled, slider, menu, tabs, contextmenu, editors known issues --- e2e/testcafe-devextreme/runner.ts | 4 +- .../scss/widgets/material/_colors.scss | 16 +++---- .../scss/widgets/material/button/_colors.scss | 48 ++++++++++--------- .../widgets/material/calendar/_colors.scss | 4 +- .../widgets/material/contextMenu/_index.scss | 2 +- .../material/dropDownButton/_index.scss | 6 +++ .../material/fileUploader/_colors.scss | 2 +- .../scss/widgets/material/menu/_colors.scss | 2 +- .../widgets/material/menuBase/_colors.scss | 1 + .../widgets/material/menuBase/_index.scss | 2 +- .../scss/widgets/material/slider/_colors.scss | 10 +--- .../scss/widgets/material/slider/_index.scss | 1 - .../material/tabs/variables/_colors.scss | 18 ++++--- .../scss/widgets/material/tagBox/_colors.scss | 22 ++++----- .../scss/widgets/material/tagBox/_index.scss | 20 ++++---- .../widgets/material/textEditor/_colors.scss | 6 +-- .../widgets/material/tooltip/_colors.scss | 10 ++-- 17 files changed, 89 insertions(+), 85 deletions(-) diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts index 1d07d6c3bae6..445f6a3aca3b 100644 --- a/e2e/testcafe-devextreme/runner.ts +++ b/e2e/testcafe-devextreme/runner.ts @@ -12,9 +12,9 @@ import { } from './helpers/testPageUtils'; import { getCurrentTheme } from './helpers/themeUtils'; -const LAUNCH_RETRY_ATTEMPTS = 1; +const LAUNCH_RETRY_ATTEMPTS = 3; const LAUNCH_RETRY_TIMEOUT = 10000; -const FAILED_TESTS_RETRY_ATTEMPTS = 2; +const FAILED_TESTS_RETRY_ATTEMPTS = 1; const wait = async ( timeout: number, diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 9ca74d5f20ae..6fb80fd1ba2e 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -62,19 +62,19 @@ $base-shadow-color: null !default; * $name 50. Success color * $type color */ -$base-success: #006600 !default; +$base-success: #2E7D32 !default; /** * $name 60. Warning color * $type color */ -$base-warning: #E54304 !default; +$base-warning: #EE6002 !default; /** * $name 70. Danger color * $type color */ -$base-danger: #C40011 !default; +$base-danger: #C62828 !default; /** * $name 80. Hover state text color @@ -111,7 +111,7 @@ $scrollview-pulldown-path: null !default; @if $color == "blue" { $material-color-accent-modificator: "blue" !default; - $base-accent: #1F3DFF !default; + $base-accent: #1564C0 !default; } @if $color == "lime" { @@ -146,8 +146,8 @@ $base-link-color: $base-accent !default; $base-text-color: rgba(0, 0, 0, 0.87) !default; $base-label-color: rgba(0, 0, 0, 0.6) !default; $base-disabled-color: rgba(0, 0, 0, $base-disabled-opacity) !default; - $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default; - $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default; + $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default; + $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default; $base-bg: #fff !default; $base-border-color: #e0e0e0 !default; $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default; @@ -169,8 +169,8 @@ $base-link-color: $base-accent !default; $base-text-color: #fff !default; $base-label-color: rgba(255, 255, 255, 0.6) !default; $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !default; - $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default; - $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default; + $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default; + $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default; $base-bg: #363640 !default; $base-border-color: #515159 !default; $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss index 2009947ccd98..9fe2352ff147 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss @@ -6,6 +6,7 @@ $button-border-radius: $base-border-radius !default; $button-disabled-background: null !default; +$button-disabled-text-color: null !default; $button-disabled-icon-opacity: 0.6 !default; $button-shadow-color: null !default; @@ -245,50 +246,51 @@ $button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.12) $button-success-text-selected-color: $button-success-bg !default; @if $mode == "light" { - $button-disabled-background: rgba(0, 0, 0, 0.1) !default; + $button-disabled-background: rgba(0, 0, 0, 0.12) !default; + $button-disabled-text-color: rgba(0, 0, 0, 0.38) !default; $button-shadow-color: rgba(0, 0, 0, 0.24) !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: 3.53%, $space: hsl) !default; - $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 7.84%, $space: hsl) !default; - $button-default-active-bg: color.adjust($button-default-bg, $lightness: 7.06%, $space: hsl) !default; - $button-default-selected-bg: color.adjust($button-default-bg, $lightness: 6.27%, $space: hsl) !default; - $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 3.53%, $space: hsl) !default; - $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 7.84%, $space: hsl) !default; - $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 7.06%, $space: hsl) !default; - $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 6.27%, $space: hsl) !default; - $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 3.53%, $space: hsl) !default; - $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 7.84%, $space: hsl) !default; - $button-success-active-bg: color.adjust($button-success-bg, $lightness: 7.06%, $space: hsl) !default; - $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 6.27%, $space: hsl) !default; + $button-default-hover-bg: color.adjust($button-default-bg, $lightness: 4.12%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 12.6%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-bg, $lightness: 19.61%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-bg, $lightness: 9.02%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 3.92%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 11.37%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 15.88%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 8.62%, $space: hsl) !default; + $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 4.90%, $space: hsl) !default; + $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 14.51%, $space: hsl) !default; + $button-success-active-bg: color.adjust($button-success-bg, $lightness: 22.75%, $space: hsl) !default; + $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 10.9%, $space: hsl) !default; } @if $mode == "dark" { - $button-disabled-background: rgba(255, 255, 255, 0.1) !default; + $button-disabled-background: rgba(255, 255, 255, 0.12) !default; + $button-disabled-text-color: rgba(255, 255, 255, 0.38) !default; $button-shadow-color: rgba(0, 0, 0, 0.4) !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: -3.53%, $space: hsl) !default; - $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -7.84%, $space: hsl) !default; - $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -7.06%, $space: hsl) !default; - $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -6.27%, $space: hsl) !default; - $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -3.53%, $space: hsl) !default; - $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -7.84%, $space: hsl) !default; - $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -7.06%, $space: hsl) !default; - $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -6.27%, $space: hsl) !default; + $button-default-hover-bg: color.adjust($button-default-bg, $lightness: -4.12%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -12.6%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -19.61%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -9.02%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -3.92%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -11.37%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -15.88%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -8.62%, $space: hsl) !default; $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -3.53%, $space: hsl) !default; $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -7.84%, $space: hsl) !default; $button-success-active-bg: color.adjust($button-success-bg, $lightness: -7.06%, $space: hsl) !default; $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -6.27%, $space: hsl) !default; } -$button-disabled-text-color: $button-disabled-background !default; $button-hover-shadow-color: $button-shadow-color !default; $button-focused-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default; $button-active-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss index 49a488bd7e5d..e3766e88e0f1 100644 --- a/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss @@ -23,8 +23,8 @@ $calendar-header-color: $calendar-color !default; * $name 40. Other month text color * $type color */ -$calendar-cell-other-color: color.change($calendar-color, $alpha: 0.38) !default; -$calendar-cell-other-hover-color: color.change($calendar-color, $alpha: 0.38) !default; +$calendar-cell-other-color: $base-label-color !default; +$calendar-cell-other-hover-color: $base-label-color !default; $calendar-bg: $base-bg !default; $calendar-hover-bg: color.change($base-accent, $alpha: 0.24) !default; $calendar-cell-hover-border-color: color.change($base-accent, $alpha: 0.6) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss index d375e0897296..536a030c960b 100644 --- a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss @@ -18,7 +18,7 @@ .dx-context-menu { .dx-menu-item { font-size: $material-context-menu-font-size; - color: $base-text-color; + // color: $base-text-color; .dx-menu-item-content { display: flex; diff --git a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss index ba9a6978b4a7..d62e1de1c1ff 100644 --- a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss @@ -18,6 +18,12 @@ $material-dropdownbutton-action-horizontal-padding, ); +.dx-dropdownbutton { + &.dx-state-disabled { + opacity: 1; + } +} + .dx-dropdownbutton-popup-wrapper { @include dx-dropdownlist-list-appearance(); } diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss index fd0b584243d0..503fe5941d9c 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: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default; +$fileuploader-falename-status-color: $base-label-color !default; /** * $name 30. Drag-and-drop border color diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss index 48abaf352310..3bcd4f5df5f1 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: color.adjust($base-text-color, $lightness: 46%, $space: hsl) !default; +$menu-color: $base-text-color !default; $menu-item-expanded-color: $menu-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss index 89c53a85429e..c408f29332a8 100644 --- a/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss @@ -4,3 +4,4 @@ // adduse +$menu-item-disabled-color: $base-disabled-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss index 1efca1a05e9e..b36c1854fda3 100644 --- a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss @@ -22,7 +22,7 @@ $material-menu-arrow-image-size: 7px; } &.dx-state-disabled { - opacity: 0.5; + color: $menu-item-disabled-color; } &.dx-state-hover { diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss index 8de1f6a9f178..bd9822985bac 100644 --- a/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss @@ -24,12 +24,4 @@ $material-slider-bar-disabled-bg: color.change($base-text-color, $alpha: 0.24) ! * $name 30. Slider tooltip text color * $type color */ -$material-slider-tooltip-color: null !default; - -@if $mode == "light" { - $material-slider-tooltip-color: $base-inverted-text-color !default; -} - -@if $mode == "dark" { - $material-slider-tooltip-color: $base-text-color !default; -} +$material-slider-tooltip-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss index e38d2ff37e2d..2248a3290c24 100644 --- a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss @@ -73,7 +73,6 @@ $material-slider-handle-inner-disabled-size: 2px; .dx-overlay-content { border: 1px solid transparent; - opacity: 0.6; .dx-popup-content { line-height: normal; diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss index f67e0c57bc1a..6bb0cc811c71 100644 --- a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss @@ -10,7 +10,7 @@ $material-tabs-nav-button-background: color.change($button-default-hover-bg, $al * $name 10. Tab text color * $type color */ -$tabs-tab-color: color.change($base-text-color, $alpha: 0.54) !default; +$tabs-tab-color: color.change($base-text-color, $alpha: 0.6) !default; /** * $name 20. Selected tab text color @@ -22,7 +22,7 @@ $tabs-tab-selected-color: $base-accent !default; * $name 30. Disabled tab color * $type color */ -$tabs-tab-disabled-color: color.change($tabs-tab-color, $alpha: 0.32) !default; +$tabs-tab-disabled-color: null !default; /** * $name 40. Selected tab border color @@ -54,11 +54,7 @@ $tabs-tab-icon-color: $tabs-tab-color !default; */ $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default; -/** -* $name 90. Disabled tab icon color -* $type color -*/ -$tabs-tab-icon-disabled-color: color.change($tabs-tab-icon-color, $alpha: 0.32) !default; + $tabs-tab-button-disabled-opacity: 0 !default; /** @@ -80,9 +76,17 @@ $tabs-focused-tab-bg-color: color.change($base-accent, $alpha: 0.12) !default; $tabs-active-tab-bg-color: color.change($base-accent, $alpha: 0.16) !default; @if $mode == "light" { + $tabs-tab-disabled-color: rgba(0, 0, 0, 0.38) !default; $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.13) !default; } @if $mode == "dark" { + $tabs-tab-disabled-color: rgba(255, 255, 255, 0.38) !default; $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.4) !default; } + +/** +* $name 90. Disabled tab icon color +* $type color +*/ +$tabs-tab-icon-disabled-color: $tabs-tab-disabled-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss index 8988582a9871..f891093b6d2a 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss @@ -24,28 +24,28 @@ $tagbox-tag-hover-bg: null !default; */ $tagbox-tag-active-color: $base-text-color !default; -/** -* $name 40. Tag close button color -* $type color -*/ -$tagbox-tag-button-remove-bg: $base-icon-color !default; -$tagbox-tag-button-remove-color: null !default; +// /** +// * $name 40. Tag close button color +// * $type color +// */ +// $tagbox-tag-button-remove-bg: $base-icon-color !default; +$tagbox-tag-button-remove-color: $base-icon-color !default; $tagbox-tag-focused-bg: null !default; $tagbox-select-all-border-color: $base-border-color !default; @if $mode == "light" { - $tagbox-tag-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default; + $tagbox-tag-bg: rgba(0, 0, 0, 0.08) !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-button-remove-color: $tagbox-tag-bg !default; $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default; } @if $mode == "dark" { - $tagbox-tag-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default; + $tagbox-tag-bg: rgba(255, 255, 255, 0.08) !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-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; +// $tagbox-tag-disabled-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss index dc6e02164f43..e86a5190e5bf 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss @@ -57,15 +57,15 @@ } } - &.dx-state-disabled { - .dx-tag-content { - background-color: $tagbox-tag-disabled-bg; - - .dx-tag-remove-button::before { - color: $tagbox-tag-disabled-bg; - } - } - } + // &.dx-state-disabled { + // .dx-tag-content { + // background-color: $base-bg; + + // // .dx-tag-remove-button::before { + // // color: $tagbox-tag-disabled-bg; + // // } + // } + // } } .dx-tagbox-single-line { @@ -108,7 +108,7 @@ width: $material-tagbox-remove-button-icon-size; height: $material-tagbox-remove-button-icon-size; color: $tagbox-tag-button-remove-color; - background-color: $tagbox-tag-button-remove-bg; + // background-color: $tagbox-tag-button-remove-bg; border-radius: 50%; transform: none; } diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss index d366eb350fb2..4458a5e1dbf7 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -52,7 +52,7 @@ $texteditor-focused-border-color: $base-accent !default; * $type color */ $texteditor-hover-bg: color.change($base-text-color, $alpha: 0.07) !default; -$texteditor-button-clear-icon-color: null !default; +$texteditor-button-clear-icon-color: $base-icon-color !default; $texteditor-button-clear-icon-color-bg: null !default; $texteditor-invalid-focused-border-color: $base-invalid-color !default; $texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !default; @@ -65,13 +65,13 @@ $texteditor-label-transition: @if $mode == "light" { $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default; - $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 46%, $space: hsl) !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-disabled-color: rgba(255, 255, 255, 0.6) !default; - $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -76%, $space: hsl) !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; } diff --git a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss index faa21c01e25d..86792c6c2074 100644 --- a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss @@ -10,7 +10,7 @@ * $name 10. Text color * $type color */ -$tooltip-color: null !default; +$tooltip-color: $base-inverted-text-color !default; /** * $name 20. Background color @@ -20,12 +20,12 @@ $tooltip-bg: null !default; $tooltip-border-radius: $base-border-radius !default; @if $mode == "light" { - $tooltip-color: $base-inverted-text-color !default; - $tooltip-bg: #616161 !default; + // $tooltip-color: $base-inverted-text-color !default; + $tooltip-bg: color.adjust($base-bg, $lightness: -60%) !default; } @if $mode == "dark" { - $tooltip-color: $base-text-color !default; - $tooltip-bg: rgba(0, 0, 0, 1) !default; + // $tooltip-color: $base-inverted-text-color !default; + $tooltip-bg: color.adjust($base-bg, $lightness: 60%) !default; } From 9099a51ba0b399cc70e415568e548f88496b4561 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 26 Jan 2026 17:39:14 +0400 Subject: [PATCH 4/4] skip disabled check for TagBox --- e2e/testcafe-devextreme/helpers/accessibility/test.ts | 11 ++++++++++- e2e/testcafe-devextreme/runner.ts | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts index 0a0a278a9516..31c27c096207 100644 --- a/e2e/testcafe-devextreme/helpers/accessibility/test.ts +++ b/e2e/testcafe-devextreme/helpers/accessibility/test.ts @@ -45,7 +45,16 @@ export const testAccessibility = ( optionConfigurations.forEach((optionConfiguration, index) => { test(`${component}: test with axe #${index}`, async (t) => { - await a11yCheck(t, a11yCheckConfig, selector, optionConfiguration); + const currentA11yCheckConfig = { ...a11yCheckConfig } as A11yCheckOptions; + + if (component === 'dxTagBox' && (optionConfiguration as any).disabled) { + currentA11yCheckConfig.rules = { + ...currentA11yCheckConfig.rules, + 'color-contrast': { enabled: false }, + }; + } + + await a11yCheck(t, currentA11yCheckConfig, selector, optionConfiguration); }).before(async (t) => { await createWidget( component, diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts index 445f6a3aca3b..14379ba4ff54 100644 --- a/e2e/testcafe-devextreme/runner.ts +++ b/e2e/testcafe-devextreme/runner.ts @@ -14,7 +14,7 @@ import { getCurrentTheme } from './helpers/themeUtils'; const LAUNCH_RETRY_ATTEMPTS = 3; const LAUNCH_RETRY_TIMEOUT = 10000; -const FAILED_TESTS_RETRY_ATTEMPTS = 1; +const FAILED_TESTS_RETRY_ATTEMPTS = 0; const wait = async ( timeout: number,