From 06012bc89b825d398b0f15e9f8968a815aa5bee8 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 12 Jan 2026 16:24:26 +0400 Subject: [PATCH 01/17] 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 02/17] 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 03/17] 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 04/17] 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, From fd7a8ad5b8f46f489d9e7688ed3722367f53f56b Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 26 Jan 2026 21:01:24 +0400 Subject: [PATCH 05/17] Step 1.2: update base variables in Dark mode --- .../scss/widgets/material/_colors.scss | 41 +++++++++++++++---- .../scss/widgets/material/button/_colors.scss | 24 +++++------ 2 files changed, 46 insertions(+), 19 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 6fb80fd1ba2e..e011d2047eee 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: #2E7D32 !default; +$base-success: null !default; /** * $name 60. Warning color * $type color */ -$base-warning: #EE6002 !default; +$base-warning: null !default; /** * $name 70. Danger color * $type color */ -$base-danger: #C62828 !default; +$base-danger: null !default; /** * $name 80. Hover state text color @@ -104,35 +104,43 @@ $base-inverted-icon-color: null !default; $base-disabled-opacity: 0.38 !default; $base-disabled-color: null !default; $base-dropdown-shadow-color: null !default; -$base-invalid-color: $base-danger !default; -$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default; $scrollview-pulldown-path: null !default; @if $color == "blue" { $material-color-accent-modificator: "blue" !default; - $base-accent: #1564C0 !default; } @if $color == "lime" { $material-color-accent-modificator: "lime" !default; $base-accent: #cddc39 !default; + $base-success: #8bc34a !default; + $base-warning: #ffc107 !default; + $base-danger: #f44336 !default; } @if $color == "orange" { $material-color-accent-modificator: "orange" !default; $base-accent: #ff5722 !default; - $base-danger: #e91e63 !default; + $base-success: #8bc34a !default; + $base-warning: #ffc107 !default; + $base-danger: #f44336 !default; } @if $color == "purple" { $material-color-accent-modificator: "purple" !default; $base-accent: #9c27b0 !default; + $base-success: #8bc34a !default; + $base-warning: #ffc107 !default; + $base-danger: #f44336 !default; } @if $color == "teal" { $material-color-accent-modificator: "teal" !default; $base-accent: #009688 !default; + $base-success: #8bc34a !default; + $base-warning: #ffc107 !default; + $base-danger: #f44336 !default; } /** @@ -143,6 +151,14 @@ $base-link-color: $base-accent !default; @if $mode == "light" { $material-color-theme-modificator: "light" !default; + + @if $color == "blue" { + $base-accent: #1564C0 !default; + $base-success: #2E7D32 !default; + $base-warning: #EE6002 !default; + $base-danger: #C62828 !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; @@ -165,6 +181,14 @@ $base-link-color: $base-accent !default; } @if $mode == "dark" { + + @if $color == "blue" { + $base-accent: #90CAF9 !default; + $base-success: #A5D6A7 !default; + $base-warning: #FFCC80 !default; + $base-danger: #EF9A9A !default; + } + $material-color-theme-modificator: "dark" !default; $base-text-color: #fff !default; $base-label-color: rgba(255, 255, 255, 0.6) !default; @@ -187,6 +211,9 @@ $base-link-color: $base-accent !default; $scrollview-pulldown-path: data-uri('images/widgets/material/color-schemes/dark/pulldown.png') !default; } +$base-invalid-color: $base-danger !default; +$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default; + $typography-bg: $base-bg !default; $typography-color: $base-text-color !default; $typography-link-color: $base-link-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss index 9fe2352ff147..16dbe6f244e9 100644 --- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss @@ -277,18 +277,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: -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-default-hover-bg: color.adjust($button-default-bg, $lightness: -9.22%, $space: hsl) !default; + $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -22.75%, $space: hsl) !default; + $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -26.28%, $space: hsl) !default; + $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -15.69%, $space: hsl) !default; + $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -9.81%, $space: hsl) !default; + $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -19.02%, $space: hsl) !default; + $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -21.77%, $space: hsl) !default; + $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -14.51%, $space: hsl) !default; + $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -10.19%, $space: hsl) !default; + $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -17.64%, $space: hsl) !default; + $button-success-active-bg: color.adjust($button-success-bg, $lightness: -29.60%, $space: hsl) !default; + $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -25.88%, $space: hsl) !default; } $button-hover-shadow-color: $button-shadow-color !default; From 6aabbcce740b6f00fa0cb3fbb1afccfb17ab9941 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 29 Jan 2026 12:39:52 +0400 Subject: [PATCH 06/17] Step 2.2: fix scheduler and datagrid error row cases --- .../helpers/accessibility/test.ts | 6 +++++- .../scss/widgets/material/_colors.scss | 12 ++++++------ .../scss/widgets/material/gridBase/_colors.scss | 2 +- .../scss/widgets/material/scheduler/_colors.scss | 9 +++++---- .../scss/widgets/material/scheduler/_index.scss | 4 ++++ 5 files changed, 21 insertions(+), 12 deletions(-) diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts index 31c27c096207..b5cec667bd41 100644 --- a/e2e/testcafe-devextreme/helpers/accessibility/test.ts +++ b/e2e/testcafe-devextreme/helpers/accessibility/test.ts @@ -47,7 +47,11 @@ export const testAccessibility = ( test(`${component}: test with axe #${index}`, async (t) => { const currentA11yCheckConfig = { ...a11yCheckConfig } as A11yCheckOptions; - if (component === 'dxTagBox' && (optionConfiguration as any).disabled) { + if ((component === 'dxTagBox' || component === 'dxFileUploader' || component === 'dxDateRangeBox') && (optionConfiguration as any).disabled === true) { + if (currentA11yCheckConfig.runOnly === 'color-contrast') { + return; + } + currentA11yCheckConfig.rules = { ...currentA11yCheckConfig.rules, 'color-contrast': { enabled: false }, diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index e011d2047eee..953022b35dfc 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -143,12 +143,6 @@ $scrollview-pulldown-path: null !default; $base-danger: #f44336 !default; } -/** -* $name 30. Link color -* $type color -*/ -$base-link-color: $base-accent !default; - @if $mode == "light" { $material-color-theme-modificator: "light" !default; @@ -211,6 +205,12 @@ $base-link-color: $base-accent !default; $scrollview-pulldown-path: data-uri('images/widgets/material/color-schemes/dark/pulldown.png') !default; } +/** +* $name 30. Link color +* $type color +*/ +$base-link-color: $base-accent !default; + $base-invalid-color: $base-danger !default; $base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss index 270beb644d98..cd77186d6fb0 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss @@ -131,7 +131,7 @@ $datagrid-row-error-color: null !default; * $name 120. Error row background color * $type color */ -$datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default; +$datagrid-row-error-bg: $base-invalid-color !default; $datagrid-link-color: $base-link-color !default; /** diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss index 65561b9d343e..404f8b130a75 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss @@ -52,7 +52,7 @@ $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12 */ $scheduler-first-month-border-color: $base-border-color !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-panel-text-color: color.change($base-text-color, $alpha: 0.6) !default; $scheduler-workspace-background-color: $base-bg !default; $scheduler-workspace-accent-color: $base-accent !default; @@ -65,14 +65,15 @@ $scheduler-time-indicator-color: #eb5757 !default; $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; $scheduler-form-icon-color: $base-icon-color !default; $scheduler-popup-title-bg: $scheduler-workspace-background-color !default; -$scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default; -$scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default; +$scheduler-workspace-month-text-color: $base-text-color !default; +$scheduler-workspace-other-month-text-color: color.change($base-text-color, $alpha: 0.6) !default; +$scheduler-dropdown-appointment-date-color: $base-text-color !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: color.change($base-text-color, $alpha: 0.87) !default; $scheduler-header-bg: $base-bg !default; $scheduler-alldaypanel-bg: $base-element-bg !default; -$scheduler-other-month-cell-opacity: 0.5 !default; +$scheduler-other-month-cell-opacity: 1 !default; $scheduler-fill-focused-appointment: false !default; $scheduler-is-shadow-color-for-focused-state: true !default; $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss index 827807e37dee..073b4638f901 100644 --- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss @@ -376,6 +376,10 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-work-space.dx-scheduler-work-space-month { + .dx-scheduler-date-table-other-month { + color: $scheduler-workspace-other-month-text-color; + } + .dx-scheduler-appointment-content { padding-top: 3px; font-size: $material-scheduler-appointment-month-text-size; From 9849e1016f965b78e265cb3a30152be4b6d02221 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 29 Jan 2026 19:21:13 +0400 Subject: [PATCH 07/17] Step 2.3: fix color-contrast issues in PivotGrid, TimeView, checkbox disabled state, gantt --- .../Angular/app/app.component.ts | 2 +- .../ExcelJSCellCustomization/React/App.tsx | 2 +- .../ExcelJSCellCustomization/ReactJs/App.js | 2 +- .../PivotGrid/ExcelJSCellCustomization/Vue/App.vue | 2 +- .../ExcelJSCellCustomization/jQuery/index.js | 2 +- .../Sortable/Kanban/Angular/app/app.component.css | 2 +- apps/demos/Demos/Sortable/Kanban/React/styles.css | 2 +- .../demos/Demos/Sortable/Kanban/ReactJs/styles.css | 2 +- apps/demos/Demos/Sortable/Kanban/Vue/App.vue | 2 +- apps/demos/Demos/Sortable/Kanban/jQuery/styles.css | 2 +- .../Tabs/Selection/Angular/app/app.component.css | 2 +- apps/demos/Demos/Tabs/Selection/React/styles.css | 2 +- apps/demos/Demos/Tabs/Selection/ReactJs/styles.css | 2 +- apps/demos/Demos/Tabs/Selection/Vue/App.vue | 2 +- apps/demos/Demos/Tabs/Selection/jQuery/styles.css | 2 +- .../tests/accessibility/actionSheet.ts | 7 ------- .../tests/accessibility/cardView/columnSortable.ts | 3 ++- .../tests/accessibility/cardView/sortable.ts | 3 ++- .../tests/accessibility/dataGrid/common.ts | 10 ++++++++-- .../tests/accessibility/popover.ts | 7 ------- .../tests/accessibility/popup.ts | 8 -------- .../tests/accessibility/progressBar.ts | 6 ------ .../tests/accessibility/tabPanel.ts | 7 ------- .../tests/accessibility/tabs.ts | 7 ------- .../scss/widgets/material/checkBox/_index.scss | 12 ++++++++++-- .../scss/widgets/material/gantt/_colors.scss | 2 +- .../scss/widgets/material/gantt/_index.scss | 10 +++++----- .../scss/widgets/material/pivotGrid/_colors.scss | 2 +- .../scss/widgets/material/timeView/_colors.scss | 14 +++++++------- 29 files changed, 51 insertions(+), 77 deletions(-) diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts index 2c8d8e867ab1..47ba64acb11d 100644 --- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts +++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts @@ -132,7 +132,7 @@ export class AppComponent { return (value > 50000) ? { font: '006100', fill: 'C6EFCE', bold: false } - : { font: '9C6500', fill: 'FFEB9C', bold: false }; + : { font: '6E4600', fill: 'FFEB9C', bold: false }; } } diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx index 7ad96ab1faae..c90f7e9f2330 100644 --- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx +++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx @@ -81,7 +81,7 @@ const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance => if (value > 50000) { return { font: '006100', fill: 'C6EFCE' }; } - return { font: '9C6500', fill: 'FFEB9C' }; + return { font: '6E4600', fill: 'FFEB9C' }; }; const onExporting = (e: PivotGridTypes.ExportingEvent) => { diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js index 1753aa24a620..a3e83c562ca2 100644 --- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js +++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js @@ -66,7 +66,7 @@ const getConditionalAppearance = (cell) => { if (value > 50000) { return { font: '006100', fill: 'C6EFCE' }; } - return { font: '9C6500', fill: 'FFEB9C' }; + return { font: '6E4600', fill: 'FFEB9C' }; }; const onExporting = (e) => { const workbook = new Workbook(); diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue index 5014b4f58a08..6caef9083e14 100644 --- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue +++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue @@ -125,7 +125,7 @@ function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppea if (value > 50000) { return { font: '006100', fill: 'C6EFCE' }; } - return { font: '9C6500', fill: 'FFEB9C' }; + return { font: '6E4600', fill: 'FFEB9C' }; } diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js index 971751e54992..592fa448744f 100644 --- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js +++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js @@ -110,6 +110,6 @@ $(() => { if (cell.value > 50000) { return { font: '006100', fill: 'C6EFCE' }; } - return { font: '9C6500', fill: 'FFEB9C' }; + return { font: '6E4600', fill: 'FFEB9C' }; } }); diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css index 8aa0fffe599f..6a50599389a3 100644 --- a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css +++ b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css @@ -46,7 +46,7 @@ } .card-assignee { - opacity: 0.6; + color: var(--dx-color-icon); } .card-priority { diff --git a/apps/demos/Demos/Sortable/Kanban/React/styles.css b/apps/demos/Demos/Sortable/Kanban/React/styles.css index fb043c1e2a1d..1b69778ed9e7 100644 --- a/apps/demos/Demos/Sortable/Kanban/React/styles.css +++ b/apps/demos/Demos/Sortable/Kanban/React/styles.css @@ -46,7 +46,7 @@ } .card-assignee { - opacity: 0.6; + color: var(--dx-color-icon); } .card-priority { diff --git a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css index fb043c1e2a1d..1b69778ed9e7 100644 --- a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css +++ b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css @@ -46,7 +46,7 @@ } .card-assignee { - opacity: 0.6; + color: var(--dx-color-icon); } .card-priority { diff --git a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue index 0d74d9b6e95b..ec6d5be55d9e 100644 --- a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue +++ b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue @@ -127,7 +127,7 @@ function getPriorityClass(task: Task) { } .card-assignee { - opacity: 0.6; + color: var(--dx-color-icon); } .card-priority { diff --git a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css index fb043c1e2a1d..1b69778ed9e7 100644 --- a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css +++ b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css @@ -46,7 +46,7 @@ } .card-assignee { - opacity: 0.6; + color: var(--dx-color-icon); } .card-priority { diff --git a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css index 9fa0c9d81add..993e40a0b55e 100644 --- a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css +++ b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css @@ -45,7 +45,7 @@ ::ng-deep .demo-info { padding-left: 8px; - opacity: 0.6; + color: var(--dx-color-icon); } ::ng-deep .icon-container { diff --git a/apps/demos/Demos/Tabs/Selection/React/styles.css b/apps/demos/Demos/Tabs/Selection/React/styles.css index 7ce9bfe2ab2f..1005bb88b147 100644 --- a/apps/demos/Demos/Tabs/Selection/React/styles.css +++ b/apps/demos/Demos/Tabs/Selection/React/styles.css @@ -45,7 +45,7 @@ .demo-info { padding-left: 8px; - opacity: 0.6; + color: var(--dx-color-icon); } .icon-container { diff --git a/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css b/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css index 7ce9bfe2ab2f..1005bb88b147 100644 --- a/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css +++ b/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css @@ -45,7 +45,7 @@ .demo-info { padding-left: 8px; - opacity: 0.6; + color: var(--dx-color-icon); } .icon-container { diff --git a/apps/demos/Demos/Tabs/Selection/Vue/App.vue b/apps/demos/Demos/Tabs/Selection/Vue/App.vue index 4b51597d92bc..0cbff0d86444 100644 --- a/apps/demos/Demos/Tabs/Selection/Vue/App.vue +++ b/apps/demos/Demos/Tabs/Selection/Vue/App.vue @@ -114,7 +114,7 @@ const selectedItemId = ref(employees[0].id); .demo-info { padding-left: 8px; - opacity: 0.6; + color: var(--dx-color-icon); } .icon-container { diff --git a/apps/demos/Demos/Tabs/Selection/jQuery/styles.css b/apps/demos/Demos/Tabs/Selection/jQuery/styles.css index 7ce9bfe2ab2f..1005bb88b147 100644 --- a/apps/demos/Demos/Tabs/Selection/jQuery/styles.css +++ b/apps/demos/Demos/Tabs/Selection/jQuery/styles.css @@ -45,7 +45,7 @@ .demo-info { padding-left: 8px; - opacity: 0.6; + color: var(--dx-color-icon); } .icon-container { diff --git a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts index b83d4d726ea3..4c06e53028e1 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts @@ -2,7 +2,6 @@ import { Properties } from 'devextreme/ui/action_sheet.d'; import url from '../../helpers/getPageUrl'; import { testAccessibility, Configuration } from '../../helpers/accessibility/test'; import { Options } from '../../helpers/generateOptionMatrix'; -import { isMaterial, isMaterialBased } from '../../helpers/themeUtils'; fixture.disablePageReloads`Accessibility` .page(url(__dirname, '../container.html')); @@ -22,14 +21,8 @@ const options: Options = { showCancelButton: [true, false], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - rules: { 'color-contrast': { enabled: true } }, -} : {}; - const configuration: Configuration = { component: 'dxActionSheet', - a11yCheckConfig, options, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts index fbb2d2267771..9ad8e8741ffe 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts @@ -16,7 +16,8 @@ test('headerPanel dragging column when it has sorting and headerFilter', async ( await triggerDragStart(columnElement); const a11yCheckConfig = { - rules: { 'color-contrast': { enabled: true } }, + // False positive: contrast rules do not apply to disabled elements + rules: { 'color-contrast': { enabled: false } }, }; await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR); }).before(async () => createWidget('dxCardView', { diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts index 3ca4bf4fc9af..1895e778ba65 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts @@ -16,7 +16,8 @@ const DRAG_MOVE_Y_COEFFICIENT = 1; const a11yCheckConfig = { rules: { - 'color-contrast': { enabled: true }, + // False positive: contrast rules do not apply to disabled elements + 'color-contrast': { enabled: false }, // NOTE: Draggable template is outside the role="main" landmark region: { enabled: false }, }, diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts index 8fe8f7ba6244..bc719d80694e 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts @@ -5,7 +5,7 @@ import { a11yCheck } from '../../../helpers/accessibility/utils'; import url from '../../../helpers/getPageUrl'; import { createWidget } from '../../../helpers/createWidget'; import { getData } from '../../dataGrid/helpers/generateDataSourceData'; -import { isMaterialBased } from '../../../helpers/themeUtils'; +import { isFluent, isMaterialBased } from '../../../helpers/themeUtils'; fixture.disablePageReloads`DataGrid - Common` .page(url(__dirname, '../../container.html')); @@ -884,7 +884,13 @@ test('Error row', async (t) => { .expect(dataGrid.getErrorRow().exists) .ok(); - await a11yCheck(t); + const A11yCheckOptions = { + rules: { + 'color-contrast': { enabled: !isFluent() }, + }, + }; + + await a11yCheck(t, A11yCheckOptions); }).before(async () => createWidget('dxDataGrid', { dataSource: getData(10, 5), keyExpr: 'field_0', diff --git a/e2e/testcafe-devextreme/tests/accessibility/popover.ts b/e2e/testcafe-devextreme/tests/accessibility/popover.ts index 875ae51d4580..bd5f24f5c997 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/popover.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/popover.ts @@ -2,7 +2,6 @@ import { Properties } from 'devextreme/ui/popover.d'; import url from '../../helpers/getPageUrl'; import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test'; import { Options } from '../../helpers/generateOptionMatrix'; -import { isMaterial, isMaterialBased } from '../../helpers/themeUtils'; fixture.disablePageReloads`Accessibility` .page(url(__dirname, '../container.html')); @@ -29,14 +28,8 @@ const options: Options = { ], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - rules: { 'color-contrast': { enabled: true } }, -} : {}; - const configuration: Configuration = { component: 'dxPopover', - a11yCheckConfig, options, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/popup.ts b/e2e/testcafe-devextreme/tests/accessibility/popup.ts index be02db1b6ff3..d7497a27c69d 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/popup.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/popup.ts @@ -2,7 +2,6 @@ import { ToolbarItem, Properties } from 'devextreme/ui/popup.d'; import url from '../../helpers/getPageUrl'; import { testAccessibility, Configuration } from '../../helpers/accessibility/test'; import { Options } from '../../helpers/generateOptionMatrix'; -import { isMaterial, isMaterialBased } from '../../helpers/themeUtils'; fixture.disablePageReloads`Accessibility` .page(url(__dirname, '../container.html')); @@ -31,14 +30,8 @@ const options: Options = { height: [280], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - rules: { 'color-contrast': { enabled: true } }, -} : {}; - const visibleConfiguration: Configuration = { component: 'dxPopup', - a11yCheckConfig, options: { ...options, visible: [true], @@ -54,7 +47,6 @@ testAccessibility(visibleConfiguration); const invisibleConfiguration: Configuration = { component: 'dxPopup', - a11yCheckConfig, options: { ...options, visible: [false], diff --git a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts index bf4c3dbb39eb..017a736a68dc 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts @@ -15,14 +15,8 @@ const options: Options = { elementAttr: [{ 'aria-label': 'Progress Bar' }], }; -const a11yCheckConfig = { - // NOTE: color-contrast issues - rules: { 'color-contrast': { enabled: true } }, -}; - const configuration: Configuration = { component: 'dxProgressBar', - a11yCheckConfig, options, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts index 2e0e7e6f535c..7f57de8d8d36 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts @@ -2,7 +2,6 @@ import { Item, Properties } from 'devextreme/ui/tab_panel.d'; import url from '../../helpers/getPageUrl'; import { testAccessibility, Configuration } from '../../helpers/accessibility/test'; import { Options } from '../../helpers/generateOptionMatrix'; -import { isMaterial, isMaterialBased } from '../../helpers/themeUtils'; fixture.disablePageReloads`Accessibility` .page(url(__dirname, '../container.html')); @@ -28,14 +27,8 @@ const options: Options = { // stylingMode: ['primary', 'secondary'], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - rules: { 'color-contrast': { enabled: true } }, -} : {}; - const configuration: Configuration = { component: 'dxTabPanel', - a11yCheckConfig, options, }; diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts index b276927ef758..9000466ab201 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts @@ -2,7 +2,6 @@ import { Item, Properties } from 'devextreme/ui/tabs.d'; import url from '../../helpers/getPageUrl'; import { testAccessibility, Configuration } from '../../helpers/accessibility/test'; import { Options } from '../../helpers/generateOptionMatrix'; -import { isMaterial, isMaterialBased } from '../../helpers/themeUtils'; fixture.disablePageReloads`Accessibility` .page(url(__dirname, '../container.html')); @@ -33,14 +32,8 @@ const created = async (t: TestController): Promise => { await t.pressKey('tab'); }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - rules: { 'color-contrast': { enabled: true } }, -} : {}; - const configuration: Configuration = { component: 'dxTabs', - a11yCheckConfig, options, created, }; diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss index d46841298d93..8775c6a8842a 100644 --- a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss @@ -19,7 +19,15 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); &.dx-state-readonly, &.dx-state-disabled { - border-color: color.change($checkbox-border-color, $alpha: 0.26); + opacity: 1; + + .dx-checkbox-icon { + border-color: $base-disabled-color; + } + + .dx-checkbox-text { + color: $base-disabled-color; + } } &.dx-state-focused, @@ -43,7 +51,7 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); &.dx-state-readonly, &.dx-state-disabled { .dx-checkbox-icon { - background-color: color.change($checkbox-border-color, $alpha: 0.26); + background-color: $base-disabled-color; } } } diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss index c63983f21e0e..c4a13ab09bf6 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss @@ -14,7 +14,7 @@ $gantt-parent-task-background-color: null !default; } @if $color == "blue" or $color == "orange" or $color == "purple" or $color == "teal" { - $gantt-parent-task-background-color: #8bc34a !default; + $gantt-parent-task-background-color: $base-success !default; } @if $mode == "light" { diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss index 460bec186628..ea0667f33be5 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss @@ -112,7 +112,7 @@ $gantt-successor-background-color: white; border-bottom-left-radius: 0; &:not(.dx-gantt-noPrg) .dx-gantt-tPrg { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(0, 0, 0, 0.2); } &:not(.dx-gantt-smallTask)::before, @@ -134,8 +134,8 @@ $gantt-successor-background-color: white; } &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { - border-left-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(255, 255, 255, 0.2); + border-left-color: rgba(0, 0, 0, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); } &::after, @@ -146,8 +146,8 @@ $gantt-successor-background-color: white; } &.dx-gantt-cmpl::after { - border-right-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(255, 255, 255, 0.2); + border-right-color: rgba(0, 0, 0, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); } &.dx-gantt-cmpl .dx-gantt-tPrg::after { diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss index d892b9375755..765415ce1b46 100644 --- a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss @@ -11,7 +11,7 @@ $pivotgrid-border-color: $base-border-color !default; * $name 10. Header text color * $type color */ -$pivotgrid-area-color: color.change($base-text-color, $alpha: 0.54) !default; +$pivotgrid-area-color: $base-text-color !default; $pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default; $pivotgrid-field-area-box-background-color: null !default; $pivotgrid-data-area-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss index 73cd667e46a6..4933c9c47833 100644 --- a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss @@ -3,12 +3,12 @@ @use "../colors" as *; // adduse -$clock-digits-color: null !default; +$clock-digits-color: $base-icon-color !default; -@if $mode == "light" { - $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default; -} +// @if $mode == "light" { +// $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default; +// } -@if $mode == "dark" { - $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default; -} +// @if $mode == "dark" { +// $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default; +// } From e9b8ae6e11974fa5f590cafd6fde727e14e53894 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 29 Jan 2026 20:38:52 +0400 Subject: [PATCH 08/17] skip demos with false positive issues --- .../accessibility-unsupported-components.js | 10 --- apps/demos/testing/common.test.ts | 61 +++++++++++++------ .../utils/visual-tests/matrix-test-helper.ts | 6 +- 3 files changed, 43 insertions(+), 34 deletions(-) delete mode 100644 apps/demos/testing/accessibility-unsupported-components.js diff --git a/apps/demos/testing/accessibility-unsupported-components.js b/apps/demos/testing/accessibility-unsupported-components.js deleted file mode 100644 index b896121bee5f..000000000000 --- a/apps/demos/testing/accessibility-unsupported-components.js +++ /dev/null @@ -1,10 +0,0 @@ -export const accessibilityUnsupportedComponents = [ - // '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 602eb78326db..eb6c51740620 100644 --- a/apps/demos/testing/common.test.ts +++ b/apps/demos/testing/common.test.ts @@ -15,11 +15,12 @@ import { execCode, injectStyle, } from '../utils/visual-tests/matrix-test-helper'; -import { testScreenshot } from '../utils/visual-tests/helpers/theme-utils'; +import { + testScreenshot, + THEME, +} from '../utils/visual-tests/helpers/theme-utils'; import { createMdReport, createTestCafeReport } from '../utils/axe-reporter/reporter'; -import { accessibilityUnsupportedComponents } from './accessibility-unsupported-components'; import { knownWarnings } from './known-warnings'; -import { skipJsErrorsComponents } from './skip-js-errors-components'; import { skippedTests } from './skipped-tests'; import { gitHubIgnored } from '../utils/visual-tests/github-ignored-list'; @@ -30,18 +31,41 @@ const execTestCafeCode = (t, code) => { return testCafeFunction(t); }; -const COMMON_SKIP_RULES = ['color-contrast']; -const getTestSpecificSkipRules = (testName) => { - switch (testName) { - case 'Calendar-MultipleSelection': - return ['empty-table-header']; - case 'Localization-UsingGlobalize': - return ['label']; - case 'DataGrid-EditStateManagement': - return ['aria-required-parent']; - default: - return []; +const getIgnoredRules = (testName) => { + const ignoredRules = []; + + if (process.env.THEME === THEME.material + && [ + // False positive: contrast rules do not apply to disabled tags + 'TagBox-Overview', + ].includes(testName) + ) { + ignoredRules.push('color-contrast'); } + + const specificRules = { + 'Accordion-Overview': ['nested-interactive'], + 'Calendar-MultipleSelection': ['empty-table-header'], + 'Localization-UsingGlobalize': ['label'], + 'DataGrid-EditStateManagement': ['aria-required-parent'], + 'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'], + 'Charts-BarSparklines': ['empty-table-header'], + 'Charts-AreaSparklines': ['empty-table-header'], + 'Charts-SimpleBullets': ['empty-table-header'], + 'Charts-SimpleSparklines': ['empty-table-header'], + 'Charts-WinlossSparklines': ['empty-table-header'], + 'Diagram-Adaptability': ['aria-dialog-name', 'label'], + 'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'], + 'Diagram-Containers': ['aria-dialog-name', 'label'], + 'Diagram-CustomShapesWithIcons': ['aria-dialog-name', 'label'], + 'Diagram-CustomShapesWithTemplates': ['label'], + 'Diagram-CustomShapesWithTemplatesWithEditing': ['label'], + }; + + return [ + ...ignoredRules, + ...(specificRules[testName] || []), + ]; }; const getClientScripts = () => { @@ -102,7 +126,7 @@ Object.values(FRAMEWORKS).forEach((approach) => { let comparisonOptions; if (process.env.DISABLE_DEMO_TEST_SETTINGS !== 'all') { - if (process.env.STRATEGY === 'accessibility' && accessibilityUnsupportedComponents.includes(widgetName)) { + if (process.env.STRATEGY === 'accessibility') { return; } @@ -140,8 +164,7 @@ Object.values(FRAMEWORKS).forEach((approach) => { runTestAtPage( test, - pageURL, - skipJsErrorsComponents.includes(widgetName), + pageURL ) .clientScripts(clientScriptSource)(testName, async (t) => { if (visualTestStyles) { @@ -160,10 +183,10 @@ Object.values(FRAMEWORKS).forEach((approach) => { } if (process.env.STRATEGY === 'accessibility') { - const specificSkipRules = getTestSpecificSkipRules(testName); + const ignoredRules = getIgnoredRules(testName); const options = { rules: {} }; - [/*...COMMON_SKIP_RULES*/, ...specificSkipRules].forEach((ruleName) => { + [...ignoredRules].forEach((ruleName) => { options.rules[ruleName] = { enabled: false }; }); diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.ts b/apps/demos/utils/visual-tests/matrix-test-helper.ts index 97eba88dc89e..325946e5e342 100644 --- a/apps/demos/utils/visual-tests/matrix-test-helper.ts +++ b/apps/demos/utils/visual-tests/matrix-test-helper.ts @@ -274,13 +274,9 @@ export function shouldRunTestExplicitly(demoUrl) { ); } -export function runTestAtPage(test, demoUrl, shouldSkipJsError) { +export function runTestAtPage(test, demoUrl) { let executor = test; - if (shouldSkipJsError) { - test.skipJsErrors(); - } - if (settings.explicitTests) { // eslint-disable-next-line no-only-tests/no-only-tests executor = shouldRunTestExplicitly(demoUrl) ? test.only : executor = test.skip; From 11d0c646221d01a9ab130da85941f2831deb1021 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 29 Jan 2026 20:38:52 +0400 Subject: [PATCH 09/17] skip demos with false positive issues --- .../accessibility-unsupported-components.js | 10 --- apps/demos/testing/common.test.ts | 65 ++++++++++++------- .../utils/visual-tests/matrix-test-helper.ts | 6 +- 3 files changed, 43 insertions(+), 38 deletions(-) delete mode 100644 apps/demos/testing/accessibility-unsupported-components.js diff --git a/apps/demos/testing/accessibility-unsupported-components.js b/apps/demos/testing/accessibility-unsupported-components.js deleted file mode 100644 index b896121bee5f..000000000000 --- a/apps/demos/testing/accessibility-unsupported-components.js +++ /dev/null @@ -1,10 +0,0 @@ -export const accessibilityUnsupportedComponents = [ - // '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 602eb78326db..4eafbd114492 100644 --- a/apps/demos/testing/common.test.ts +++ b/apps/demos/testing/common.test.ts @@ -15,11 +15,12 @@ import { execCode, injectStyle, } from '../utils/visual-tests/matrix-test-helper'; -import { testScreenshot } from '../utils/visual-tests/helpers/theme-utils'; +import { + testScreenshot, + THEME, +} from '../utils/visual-tests/helpers/theme-utils'; import { createMdReport, createTestCafeReport } from '../utils/axe-reporter/reporter'; -import { accessibilityUnsupportedComponents } from './accessibility-unsupported-components'; import { knownWarnings } from './known-warnings'; -import { skipJsErrorsComponents } from './skip-js-errors-components'; import { skippedTests } from './skipped-tests'; import { gitHubIgnored } from '../utils/visual-tests/github-ignored-list'; @@ -30,18 +31,41 @@ const execTestCafeCode = (t, code) => { return testCafeFunction(t); }; -const COMMON_SKIP_RULES = ['color-contrast']; -const getTestSpecificSkipRules = (testName) => { - switch (testName) { - case 'Calendar-MultipleSelection': - return ['empty-table-header']; - case 'Localization-UsingGlobalize': - return ['label']; - case 'DataGrid-EditStateManagement': - return ['aria-required-parent']; - default: - return []; +const getIgnoredRules = (testName) => { + const ignoredRules = []; + + if (process.env.THEME === THEME.material + && [ + // False positive: contrast rules do not apply to disabled tags + 'TagBox-Overview', + ].includes(testName) + ) { + ignoredRules.push('color-contrast'); } + + const specificRules = { + 'Accordion-Overview': ['nested-interactive'], + 'Calendar-MultipleSelection': ['empty-table-header'], + 'Localization-UsingGlobalize': ['label'], + 'DataGrid-EditStateManagement': ['aria-required-parent'], + 'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'], + 'Charts-BarSparklines': ['empty-table-header'], + 'Charts-AreaSparklines': ['empty-table-header'], + 'Charts-SimpleBullets': ['empty-table-header'], + 'Charts-SimpleSparklines': ['empty-table-header'], + 'Charts-WinlossSparklines': ['empty-table-header'], + 'Diagram-Adaptability': ['aria-dialog-name', 'label'], + 'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'], + 'Diagram-Containers': ['aria-dialog-name', 'label'], + 'Diagram-CustomShapesWithIcons': ['aria-dialog-name', 'label'], + 'Diagram-CustomShapesWithTemplates': ['label'], + 'Diagram-CustomShapesWithTemplatesWithEditing': ['label'], + }; + + return [ + ...ignoredRules, + ...(specificRules[testName] || []), + ]; }; const getClientScripts = () => { @@ -102,10 +126,6 @@ Object.values(FRAMEWORKS).forEach((approach) => { let comparisonOptions; if (process.env.DISABLE_DEMO_TEST_SETTINGS !== 'all') { - if (process.env.STRATEGY === 'accessibility' && accessibilityUnsupportedComponents.includes(widgetName)) { - return; - } - const approachLowerCase = approach.toLowerCase(); const mergedTestSettings = (visualTestSettings && { ...visualTestSettings, @@ -134,14 +154,13 @@ Object.values(FRAMEWORKS).forEach((approach) => { return; } - if (shouldSkipDemo(approach, widgetName, demoName, skippedTests)) { + if (shouldSkipDemo(approach, widgetName, demoName, skippedTests) && process.env.STRATEGY !== 'accessibility') { return; } runTestAtPage( test, - pageURL, - skipJsErrorsComponents.includes(widgetName), + pageURL ) .clientScripts(clientScriptSource)(testName, async (t) => { if (visualTestStyles) { @@ -160,10 +179,10 @@ Object.values(FRAMEWORKS).forEach((approach) => { } if (process.env.STRATEGY === 'accessibility') { - const specificSkipRules = getTestSpecificSkipRules(testName); + const ignoredRules = getIgnoredRules(testName); const options = { rules: {} }; - [/*...COMMON_SKIP_RULES*/, ...specificSkipRules].forEach((ruleName) => { + ignoredRules.forEach((ruleName) => { options.rules[ruleName] = { enabled: false }; }); diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.ts b/apps/demos/utils/visual-tests/matrix-test-helper.ts index 97eba88dc89e..325946e5e342 100644 --- a/apps/demos/utils/visual-tests/matrix-test-helper.ts +++ b/apps/demos/utils/visual-tests/matrix-test-helper.ts @@ -274,13 +274,9 @@ export function shouldRunTestExplicitly(demoUrl) { ); } -export function runTestAtPage(test, demoUrl, shouldSkipJsError) { +export function runTestAtPage(test, demoUrl) { let executor = test; - if (shouldSkipJsError) { - test.skipJsErrors(); - } - if (settings.explicitTests) { // eslint-disable-next-line no-only-tests/no-only-tests executor = shouldRunTestExplicitly(demoUrl) ? test.only : executor = test.skip; From f9431e1dc05ccf92aec9165e8eb935870f1b4e39 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 00:58:36 +0400 Subject: [PATCH 10/17] ignore specific rules --- .../Angular/app/app.component.css | 2 +- .../Button/PredefinedTypes/React/styles.css | 2 +- .../Button/PredefinedTypes/ReactJs/styles.css | 2 +- .../Demos/Button/PredefinedTypes/Vue/App.vue | 2 +- .../Button/PredefinedTypes/jQuery/styles.css | 2 +- .../Overview/Angular/app/app.component.css | 2 +- .../DateRangeBox/Overview/React/styles.css | 2 +- .../DateRangeBox/Overview/ReactJs/styles.css | 2 +- .../Demos/DateRangeBox/Overview/Vue/App.vue | 2 +- .../DateRangeBox/Overview/jQuery/styles.css | 2 +- .../Overview/Angular/app/app.component.css | 2 +- .../DropDownButton/Overview/React/styles.css | 2 +- .../Overview/ReactJs/styles.css | 2 +- .../Demos/DropDownButton/Overview/Vue/App.vue | 2 +- .../DropDownButton/Overview/jQuery/styles.css | 2 +- .../Mentions/Angular/app/app.component.css | 2 +- .../HtmlEditor/Mentions/React/styles.css | 2 +- .../HtmlEditor/Mentions/ReactJs/styles.css | 2 +- .../Demos/HtmlEditor/Mentions/Vue/App.vue | 2 +- .../HtmlEditor/Mentions/jQuery/styles.css | 2 +- apps/demos/testing/common.test.ts | 49 ++++++++++++++++--- .../scss/widgets/fluent/_colors.scss | 1 + .../scss/widgets/generic/_colors.scss | 1 + .../scss/widgets/material/_colors.scss | 1 + .../scss/widgets/material/gantt/_colors.scss | 21 +++++++- .../scss/widgets/material/gantt/_index.scss | 16 +++--- 26 files changed, 94 insertions(+), 35 deletions(-) diff --git a/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css b/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css index 0f5f823b29ae..89e8a001c2c6 100644 --- a/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css +++ b/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css @@ -18,7 +18,7 @@ width: 150px; height: 35px; font-size: 130%; - opacity: 0.6; + color: var(--dx-color-icon); text-align: left; padding-left: 15px; } diff --git a/apps/demos/Demos/Button/PredefinedTypes/React/styles.css b/apps/demos/Demos/Button/PredefinedTypes/React/styles.css index dcabc92a90d5..b6312004108d 100644 --- a/apps/demos/Demos/Button/PredefinedTypes/React/styles.css +++ b/apps/demos/Demos/Button/PredefinedTypes/React/styles.css @@ -18,7 +18,7 @@ width: 150px; height: 35px; font-size: 130%; - opacity: 0.6; + color: var(--dx-color-icon); text-align: left; padding-left: 15px; } diff --git a/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css b/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css index dcabc92a90d5..b6312004108d 100644 --- a/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css +++ b/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css @@ -18,7 +18,7 @@ width: 150px; height: 35px; font-size: 130%; - opacity: 0.6; + color: var(--dx-color-icon); text-align: left; padding-left: 15px; } diff --git a/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue b/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue index e597b9ea6e35..72a1d875eda1 100644 --- a/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue +++ b/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue @@ -167,7 +167,7 @@ function onClick(e: DxButtonTypes.ClickEvent) { width: 150px; height: 35px; font-size: 130%; - opacity: 0.6; + color: var(--dx-color-icon); text-align: left; padding-left: 15px; } diff --git a/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css b/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css index 54d9f47faf02..df3c57371533 100644 --- a/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css +++ b/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css @@ -14,7 +14,7 @@ width: 150px; height: 35px; font-size: 130%; - opacity: 0.6; + color: var(--dx-color-icon); text-align: left; padding-left: 15px; } diff --git a/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css index d64567a9cd6e..7458bd60f11d 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css @@ -8,7 +8,7 @@ ::ng-deep .selected-days-wrapper { font-size: 12px; - opacity: 0.5; + color: var(--dx-color-icon); } ::ng-deep .multiline-label { diff --git a/apps/demos/Demos/DateRangeBox/Overview/React/styles.css b/apps/demos/Demos/DateRangeBox/Overview/React/styles.css index 64e44bb025ed..b2ee13470616 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/React/styles.css +++ b/apps/demos/Demos/DateRangeBox/Overview/React/styles.css @@ -8,7 +8,7 @@ .selected-days-wrapper { font-size: 12px; - opacity: 0.5; + color: var(--dx-color-icon); } .multiline-label { diff --git a/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css b/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css index 64e44bb025ed..b2ee13470616 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css @@ -8,7 +8,7 @@ .selected-days-wrapper { font-size: 12px; - opacity: 0.5; + color: var(--dx-color-icon); } .multiline-label { diff --git a/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue b/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue index 2f6a05dc5c57..265f18e66ac2 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue +++ b/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue @@ -114,7 +114,7 @@ function convertRangeToDays([startDate, endDate]: Date[]) { .selected-days-wrapper { font-size: 12px; - opacity: 0.5; + color: var(--dx-color-icon); } .multiline-label { diff --git a/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css b/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css index 64e44bb025ed..b2ee13470616 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css +++ b/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css @@ -8,7 +8,7 @@ .selected-days-wrapper { font-size: 12px; - opacity: 0.5; + color: var(--dx-color-icon); } .multiline-label { diff --git a/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css b/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css index 2f10f1890a20..6b13dd2c42ab 100644 --- a/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css @@ -55,7 +55,7 @@ .button-row { font-size: 12px; line-height: 14px; - opacity: 0.6; + color: var(--dx-color-icon); } ::ng-deep #custom-template .dx-button { diff --git a/apps/demos/Demos/DropDownButton/Overview/React/styles.css b/apps/demos/Demos/DropDownButton/Overview/React/styles.css index 3e3b3f5d6028..f9c818dcfade 100644 --- a/apps/demos/Demos/DropDownButton/Overview/React/styles.css +++ b/apps/demos/Demos/DropDownButton/Overview/React/styles.css @@ -55,7 +55,7 @@ .button-row { font-size: 12px; line-height: 14px; - opacity: 0.6; + color: var(--dx-color-icon); } #custom-template .dx-button { diff --git a/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css b/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css index 3e3b3f5d6028..f9c818dcfade 100644 --- a/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css @@ -55,7 +55,7 @@ .button-row { font-size: 12px; line-height: 14px; - opacity: 0.6; + color: var(--dx-color-icon); } #custom-template .dx-button { diff --git a/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue b/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue index 95707822b308..bf465e269542 100644 --- a/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue +++ b/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue @@ -246,7 +246,7 @@ function onColorClick(clickedColor: string) { .button-row { font-size: 12px; line-height: 14px; - opacity: 0.6; + color: var(--dx-color-icon); } #custom-template .dx-button { diff --git a/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css b/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css index 9789c3168272..eb04b7c24da4 100644 --- a/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css +++ b/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css @@ -59,7 +59,7 @@ .button-row { font-size: 12px; line-height: 14px; - opacity: 0.6; + color: var(--dx-color-icon); } #custom-template .dx-button { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css index 14992efd8ff0..8394711c458b 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css @@ -29,7 +29,7 @@ } ::ng-deep .date { - opacity: 0.5; + color: var(--dx-color-icon); } ::ng-deep .photo { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css index 9bc6500a43e9..f87be5e72cf5 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css @@ -29,7 +29,7 @@ } .date { - opacity: 0.5; + color: var(--dx-color-icon); } .photo { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css index 9bc6500a43e9..f87be5e72cf5 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css @@ -29,7 +29,7 @@ } .date { - opacity: 0.5; + color: var(--dx-color-icon); } .photo { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue index 759adac3806b..0bd1e9b00649 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue +++ b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue @@ -132,7 +132,7 @@ const mentions = ref([{ } .date { - opacity: 0.5; + color: var(--dx-color-icon); } .photo { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css index f37f17c83314..097ffac45c15 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css @@ -29,7 +29,7 @@ } .date { - opacity: 0.5; + color: var(--dx-color-icon); } .photo { diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts index 4eafbd114492..e689b5f95faf 100644 --- a/apps/demos/testing/common.test.ts +++ b/apps/demos/testing/common.test.ts @@ -43,23 +43,60 @@ const getIgnoredRules = (testName) => { ignoredRules.push('color-contrast'); } + if (process.env.THEME === THEME.fluent + && [ + // False positive: contrast rules do not apply to disabled tags + 'TreeList-StatePersistence', + ].includes(testName) + ) { + ignoredRules.push('color-contrast'); + } + const specificRules = { 'Accordion-Overview': ['nested-interactive'], + 'Calendar-MultipleSelection': ['empty-table-header'], - 'Localization-UsingGlobalize': ['label'], - 'DataGrid-EditStateManagement': ['aria-required-parent'], - 'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'], - 'Charts-BarSparklines': ['empty-table-header'], + 'Charts-AreaSparklines': ['empty-table-header'], + 'Charts-BarSparklines': ['empty-table-header'], 'Charts-SimpleBullets': ['empty-table-header'], 'Charts-SimpleSparklines': ['empty-table-header'], 'Charts-WinlossSparklines': ['empty-table-header'], + + 'DataGrid-EditStateManagement': ['aria-required-parent'], + 'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'], + 'Diagram-Adaptability': ['aria-dialog-name', 'label'], 'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'], 'Diagram-Containers': ['aria-dialog-name', 'label'], 'Diagram-CustomShapesWithIcons': ['aria-dialog-name', 'label'], - 'Diagram-CustomShapesWithTemplates': ['label'], - 'Diagram-CustomShapesWithTemplatesWithEditing': ['label'], + 'Diagram-CustomShapesWithTemplatesWithEditing': ['aria-dialog-name', 'label'], + 'Diagram-CustomShapesWithTexts': ['aria-dialog-name', 'label'], + 'Diagram-ImagesInShapes': ['aria-dialog-name', 'label'], + 'Diagram-ItemSelection': ['label'], + 'Diagram-NodesAndEdgesArrays': ['aria-dialog-name', 'label'], + 'Diagram-NodesArrayHierarchicalStructure': ['aria-dialog-name', 'label'], + 'Diagram-NodesArrayPlainStructure': ['aria-dialog-name', 'label'], + 'Diagram-OperationRestrictions': ['aria-dialog-name', 'label'], + 'Diagram-Overview': ['aria-dialog-name', 'label'], + 'Diagram-ReadOnly': ['label'], + 'Diagram-SimpleView': ['label'], + 'Diagram-UICustomization': ['aria-dialog-name', 'label'], + 'Diagram-WebAPIService': ['aria-dialog-name', 'label'], + + 'FileManager-BindingToEF': ['aria-command-name', 'label'], + 'FileManager-BindingToFileSystem': ['aria-command-name', 'empty-table-header', 'label'], + 'FileManager-BindingToHierarchicalStructure': ['aria-command-name', 'empty-table-header', 'label'], + 'FileManager-CustomThumbnails': ['aria-allowed-attr', 'aria-command-name', 'image-alt', 'label'], + 'FileManager-Overview': ['aria-command-name', 'empty-table-header', 'label'], + 'FileManager-UICustomization': ['aria-command-name', 'empty-table-header', 'label'], + + 'Gantt-Appearance': ['aria-toggle-field-name'], + 'Gantt-ExportToPDF': ['aria-toggle-field-name'], + 'Gantt-StripLines': ['aria-required-parent', 'aria-valid-attr-value'], + 'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'], + + 'Localization-UsingGlobalize': ['label'], }; return [ diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss index 8ebea2f73835..77915cdc2568 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss @@ -305,6 +305,7 @@ $base-invalid-color-selected: $base-danger-selected !default; --dx-color-warning: #{$base-warning}; --dx-color-border: #{$base-border-color}; --dx-color-text: #{$base-text-color}; + --dx-color-label: #{$base-label-color}; --dx-color-icon: #{$base-icon-color}; --dx-color-spin-icon: #{$base-spin-icon-color}; --dx-color-link: #{$base-link-color}; diff --git a/packages/devextreme-scss/scss/widgets/generic/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/_colors.scss index ec2543c27f6f..b4939f1eb3d7 100644 --- a/packages/devextreme-scss/scss/widgets/generic/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/_colors.scss @@ -417,6 +417,7 @@ $typography-link-color: $base-link-color !default; --dx-color-warning: #{$base-warning}; --dx-color-border: #{$base-border-color}; --dx-color-text: #{$base-text-color}; + --dx-color-label: #{$base-label-color}; --dx-color-icon: #{$base-icon-color}; --dx-color-spin-icon: #{$base-icon-color}; --dx-color-link: #{$base-link-color}; diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 953022b35dfc..9230d0168483 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -227,6 +227,7 @@ $typography-link-color: $base-link-color !default; --dx-color-warning: #{$base-warning}; --dx-color-border: #{$base-border-color}; --dx-color-text: #{$base-text-color}; + --dx-color-label: #{$base-label-color}; --dx-color-icon: #{$base-icon-color}; --dx-color-spin-icon: #{$base-spin-icon-color}; --dx-color-link: #{$base-link-color}; diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss index c4a13ab09bf6..ccfc13233dd4 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss @@ -8,13 +8,32 @@ $gantt-collapsable-row-bg: null !default; $gantt-icon-color: $datagrid-columnchooser-item-color !default; $gantt-parent-task-background-color: null !default; +$gantt-tPrg-background-color: null !default; +$gantt-task-color: null !default; @if $color == "lime" { $gantt-parent-task-background-color: #f44336 !default; + $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-color: #fff; } -@if $color == "blue" or $color == "orange" or $color == "purple" or $color == "teal" { +@if $color == "blue" { $gantt-parent-task-background-color: $base-success !default; + $gantt-task-color: $base-inverted-text-color !default; + + @if $mode == "light" { + $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default; + } + + @if $mode == "dark" { + $gantt-tPrg-background-color: rgba(255, 255, 255, 0.2) !default; + } +} + +@if $color == "orange" or $color == "purple" or $color == "teal" { + $gantt-parent-task-background-color: #8bc34a !default; + $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-color: #fff; } @if $mode == "light" { diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss index ea0667f33be5..103fed2e41fd 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss @@ -90,7 +90,7 @@ $gantt-successor-background-color: white; .dx-gantt-tPrg { border-radius: $base-border-radius; - background-color: rgba(0, 0, 0, 0.2); + background-color: $gantt-tPrg-background-color; } &.dx-gantt-smallTask { @@ -112,7 +112,7 @@ $gantt-successor-background-color: white; border-bottom-left-radius: 0; &:not(.dx-gantt-noPrg) .dx-gantt-tPrg { - background-color: rgba(0, 0, 0, 0.2); + background-color: $gantt-tPrg-background-color; } &:not(.dx-gantt-smallTask)::before, @@ -134,8 +134,8 @@ $gantt-successor-background-color: white; } &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { - border-left-color: rgba(0, 0, 0, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + border-left-color: $gantt-tPrg-background-color; + border-top-color: $gantt-tPrg-background-color; } &::after, @@ -146,8 +146,8 @@ $gantt-successor-background-color: white; } &.dx-gantt-cmpl::after { - border-right-color: rgba(0, 0, 0, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + border-right-color: $gantt-tPrg-background-color; + border-top-color: $gantt-tPrg-background-color; } &.dx-gantt-cmpl .dx-gantt-tPrg::after { @@ -162,7 +162,7 @@ $gantt-successor-background-color: white; } .dx-gantt-titleIn { - color: #fff; + color: $gantt-task-color; padding: 0 $gantt-task-title-padding-left; } } @@ -170,7 +170,7 @@ $gantt-successor-background-color: white; .dx-gantt-taskRes { height: $gantt-task-height; line-height: $gantt-task-height; - color: #fff; + color: $gantt-task-color; background-color: #999; border-radius: $base-border-radius; margin-left: 21px; From 1a2b2a3538d53474e2aca13b46526e5a2e701c08 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 11:02:41 +0400 Subject: [PATCH 11/17] Step 2.5: fix PivotGrid, DataGrid, Gantt and others demos --- .../Angular/app/priority/priority.component.css | 2 +- .../Demos/CardView/FieldTemplate/React/styles.css | 2 +- .../CardView/FieldTemplate/ReactJs/styles.css | 2 +- .../Demos/CardView/FieldTemplate/Vue/Priority.vue | 2 +- .../CardView/FieldTemplate/jQuery/styles.css | 2 +- .../Overview/Angular/app/app.component.css | 2 +- .../Demos/CardView/Overview/React/styles.css | 2 +- .../Demos/CardView/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/CardView/Overview/Vue/App.vue | 2 +- .../Demos/CardView/Overview/jQuery/styles.css | 2 +- .../ListsOverview/Angular/app/app.component.css | 1 - .../Demos/Common/ListsOverview/React/styles.css | 1 - .../Demos/Common/ListsOverview/ReactJs/styles.css | 1 - .../Demos/Common/ListsOverview/Vue/styles.css | 1 - .../Demos/Common/ListsOverview/jQuery/styles.css | 1 - .../Angular/app/app.component.css | 2 +- .../Common/NavigationOverview/React/styles.css | 2 +- .../Common/NavigationOverview/ReactJs/styles.css | 2 +- .../Common/NavigationOverview/Vue/styles.css | 2 +- .../Common/NavigationOverview/jQuery/styles.css | 2 +- .../DataGrid/Cell/Angular/app/app.component.css | 4 ++-- apps/demos/Demos/DataGrid/Cell/React/styles.css | 4 ++-- apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css | 4 ++-- apps/demos/Demos/DataGrid/Cell/Vue/App.vue | 4 ++-- apps/demos/Demos/DataGrid/Cell/jQuery/styles.css | 4 ++-- .../SignalRService/Angular/app/app.component.css | 4 ++-- .../DataGrid/SignalRService/React/styles.css | 4 ++-- .../DataGrid/SignalRService/ReactJs/styles.css | 4 ++-- .../Demos/DataGrid/SignalRService/Vue/App.vue | 4 ++-- .../DataGrid/SignalRService/jQuery/styles.css | 4 ++-- .../Angular/app/app.component.css | 1 - .../DataGrid/StatePersistence/React/styles.css | 1 - .../DataGrid/StatePersistence/ReactJs/styles.css | 1 - .../Demos/DataGrid/StatePersistence/Vue/App.vue | 1 - .../DataGrid/StatePersistence/jQuery/styles.css | 1 - .../CustomDropzone/Angular/app/app.component.css | 2 +- .../FileUploader/CustomDropzone/React/styles.css | 2 +- .../CustomDropzone/ReactJs/styles.css | 2 +- .../Demos/FileUploader/CustomDropzone/Vue/App.vue | 2 +- .../FileUploader/CustomDropzone/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 1 - .../PivotGrid/StatePersistence/React/styles.css | 1 - .../PivotGrid/StatePersistence/ReactJs/styles.css | 1 - .../Demos/PivotGrid/StatePersistence/Vue/App.vue | 1 - .../PivotGrid/StatePersistence/jQuery/styles.css | 1 - .../Angular/app/status/status.component.css | 2 +- .../Demos/TreeList/AIColumns/React/styles.css | 2 +- .../Demos/TreeList/AIColumns/ReactJs/styles.css | 2 +- .../demos/Demos/TreeList/AIColumns/Vue/Status.vue | 2 +- .../Demos/TreeList/AIColumns/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 1 - .../TreeList/StatePersistence/React/styles.css | 1 - .../TreeList/StatePersistence/ReactJs/styles.css | 1 - .../Demos/TreeList/StatePersistence/Vue/App.vue | 1 - .../TreeList/StatePersistence/jQuery/styles.css | 1 - apps/demos/testing/common.test.ts | 12 ++++++++++++ .../scss/widgets/material/_colors.scss | 5 ++--- .../scss/widgets/material/contextMenu/_index.scss | 1 - .../scss/widgets/material/gantt/_colors.scss | 15 ++++++++++----- .../scss/widgets/material/gantt/_index.scss | 14 +++++++------- .../scss/widgets/material/list/_index.scss | 2 +- .../scss/widgets/material/pivotGrid/_colors.scss | 2 +- .../scss/widgets/material/tagBox/_colors.scss | 11 ----------- .../scss/widgets/material/tagBox/_index.scss | 11 ----------- .../scss/widgets/material/textEditor/_colors.scss | 2 -- .../scss/widgets/material/timeView/_colors.scss | 8 -------- .../scss/widgets/material/tooltip/_colors.scss | 2 -- 67 files changed, 78 insertions(+), 117 deletions(-) diff --git a/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css b/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css index 4cfc7fe3c9d2..34b5d4124b37 100644 --- a/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css +++ b/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css @@ -12,7 +12,7 @@ } .priority--urgent { - color: #f7630c; + color: var(--dx-color-warning); } .priority--high { diff --git a/apps/demos/Demos/CardView/FieldTemplate/React/styles.css b/apps/demos/Demos/CardView/FieldTemplate/React/styles.css index 2ef58d2da101..251952fd3267 100644 --- a/apps/demos/Demos/CardView/FieldTemplate/React/styles.css +++ b/apps/demos/Demos/CardView/FieldTemplate/React/styles.css @@ -26,7 +26,7 @@ } .task__priority--urgent { - color: #f7630c; + color: var(--dx-color-warning); } .task__priority--high { diff --git a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css index 2ef58d2da101..251952fd3267 100644 --- a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css @@ -26,7 +26,7 @@ } .task__priority--urgent { - color: #f7630c; + color: var(--dx-color-warning); } .task__priority--high { diff --git a/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue b/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue index 927e06da0272..7e48ef837204 100644 --- a/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue +++ b/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue @@ -36,7 +36,7 @@ const priorityClassName = computed(() => } .task__priority--urgent { - color: #f7630c; + color: var(--dx-color-warning); } .task__priority--high { diff --git a/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css b/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css index 250c85ee4daa..766e8352cc55 100644 --- a/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css +++ b/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css @@ -22,7 +22,7 @@ } .task__priority--urgent { - color: #f7630c; + color: var(--dx-color-warning); } .task__priority--high { diff --git a/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css b/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css index 1d8a980b5a43..6475d0783ac9 100644 --- a/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css @@ -19,7 +19,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/CardView/Overview/React/styles.css b/apps/demos/Demos/CardView/Overview/React/styles.css index 1d8a980b5a43..6475d0783ac9 100644 --- a/apps/demos/Demos/CardView/Overview/React/styles.css +++ b/apps/demos/Demos/CardView/Overview/React/styles.css @@ -19,7 +19,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/CardView/Overview/ReactJs/styles.css b/apps/demos/Demos/CardView/Overview/ReactJs/styles.css index 1d8a980b5a43..6475d0783ac9 100644 --- a/apps/demos/Demos/CardView/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/Overview/ReactJs/styles.css @@ -19,7 +19,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/CardView/Overview/Vue/App.vue b/apps/demos/Demos/CardView/Overview/Vue/App.vue index 56407709d617..dca62c0e82f1 100644 --- a/apps/demos/Demos/CardView/Overview/Vue/App.vue +++ b/apps/demos/Demos/CardView/Overview/Vue/App.vue @@ -155,7 +155,7 @@ const cardView = ref(); } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/CardView/Overview/jQuery/styles.css b/apps/demos/Demos/CardView/Overview/jQuery/styles.css index 1d8a980b5a43..6475d0783ac9 100644 --- a/apps/demos/Demos/CardView/Overview/jQuery/styles.css +++ b/apps/demos/Demos/CardView/Overview/jQuery/styles.css @@ -19,7 +19,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css index 0a3862702a5e..a4df72053019 100644 --- a/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css +++ b/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css @@ -12,7 +12,6 @@ } ::ng-deep .left .list .dx-list-group-header { - color: #f05b41; font-weight: normal; font-size: 18px; } diff --git a/apps/demos/Demos/Common/ListsOverview/React/styles.css b/apps/demos/Demos/Common/ListsOverview/React/styles.css index 44302a86a405..dbd2927eee6e 100644 --- a/apps/demos/Demos/Common/ListsOverview/React/styles.css +++ b/apps/demos/Demos/Common/ListsOverview/React/styles.css @@ -12,7 +12,6 @@ } .left .list .dx-list-group-header { - color: #f05b41; font-weight: normal; font-size: 18px; } diff --git a/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css index 44302a86a405..dbd2927eee6e 100644 --- a/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css +++ b/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css @@ -12,7 +12,6 @@ } .left .list .dx-list-group-header { - color: #f05b41; font-weight: normal; font-size: 18px; } diff --git a/apps/demos/Demos/Common/ListsOverview/Vue/styles.css b/apps/demos/Demos/Common/ListsOverview/Vue/styles.css index 3d0f3138d962..c8f10302c01a 100644 --- a/apps/demos/Demos/Common/ListsOverview/Vue/styles.css +++ b/apps/demos/Demos/Common/ListsOverview/Vue/styles.css @@ -12,7 +12,6 @@ } .left .list .dx-list-group-header { - color: #f05b41; font-weight: normal; font-size: 18px; } diff --git a/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css b/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css index 44302a86a405..dbd2927eee6e 100644 --- a/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css +++ b/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css @@ -12,7 +12,6 @@ } .left .list .dx-list-group-header { - color: #f05b41; font-weight: normal; font-size: 18px; } diff --git a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css index 593789817cfb..c0a02c60a84d 100644 --- a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css +++ b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css @@ -31,7 +31,7 @@ sup { ::ng-deep .right-content .sub-title { font-size: 120%; - color: rgba(152, 152, 152, 0.8); + color: var(--dx-texteditor-color-label); } ::ng-deep .title-container { diff --git a/apps/demos/Demos/Common/NavigationOverview/React/styles.css b/apps/demos/Demos/Common/NavigationOverview/React/styles.css index 368d99d577fe..711095c5f48f 100644 --- a/apps/demos/Demos/Common/NavigationOverview/React/styles.css +++ b/apps/demos/Demos/Common/NavigationOverview/React/styles.css @@ -31,7 +31,7 @@ sup { .right-content .sub-title { font-size: 120%; - color: rgba(152, 152, 152, 0.8); + color: var(--dx-texteditor-color-label); } .title-container { diff --git a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css index 368d99d577fe..711095c5f48f 100644 --- a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css +++ b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css @@ -31,7 +31,7 @@ sup { .right-content .sub-title { font-size: 120%; - color: rgba(152, 152, 152, 0.8); + color: var(--dx-texteditor-color-label); } .title-container { diff --git a/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css b/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css index 368d99d577fe..711095c5f48f 100644 --- a/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css +++ b/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css @@ -31,7 +31,7 @@ sup { .right-content .sub-title { font-size: 120%; - color: rgba(152, 152, 152, 0.8); + color: var(--dx-texteditor-color-label); } .title-container { diff --git a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css index 9904b5517771..b6cd7448e261 100644 --- a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css +++ b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css @@ -31,7 +31,7 @@ sup { .right-content .sub-title { font-size: 120%; - color: rgba(152, 152, 152, 0.8); + color: var(--dx-texteditor-color-label); } .title-container { diff --git a/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css index d86718fb7898..50bb63833175 100644 --- a/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css +++ b/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css @@ -17,7 +17,7 @@ } ::ng-deep #gridContainer .inc .diff { - color: #2ab71b; + color: var(--dx-color-success); } ::ng-deep #gridContainer .inc .diff::before { @@ -29,7 +29,7 @@ } ::ng-deep #gridContainer .dec .diff { - color: #f00; + color: var(--dx-color-danger); } ::ng-deep #gridContainer .inc .diff::after, diff --git a/apps/demos/Demos/DataGrid/Cell/React/styles.css b/apps/demos/Demos/DataGrid/Cell/React/styles.css index 597b09a5a98e..9bb55d414ad6 100644 --- a/apps/demos/Demos/DataGrid/Cell/React/styles.css +++ b/apps/demos/Demos/DataGrid/Cell/React/styles.css @@ -17,7 +17,7 @@ } #gridContainer .inc .diff { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .inc .diff::before { @@ -29,7 +29,7 @@ } #gridContainer .dec .diff { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .diff::after, diff --git a/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css b/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css index 597b09a5a98e..9bb55d414ad6 100644 --- a/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css +++ b/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css @@ -17,7 +17,7 @@ } #gridContainer .inc .diff { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .inc .diff::before { @@ -29,7 +29,7 @@ } #gridContainer .dec .diff { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .diff::after, diff --git a/apps/demos/Demos/DataGrid/Cell/Vue/App.vue b/apps/demos/Demos/DataGrid/Cell/Vue/App.vue index fae12cd46804..0f3bad962866 100644 --- a/apps/demos/Demos/DataGrid/Cell/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/Cell/Vue/App.vue @@ -80,7 +80,7 @@ import { weekData } from './data.ts'; } #gridContainer .inc .diff { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .inc .diff::before { @@ -92,7 +92,7 @@ import { weekData } from './data.ts'; } #gridContainer .dec .diff { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .diff::after, diff --git a/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css b/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css index 597b09a5a98e..9bb55d414ad6 100644 --- a/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css @@ -17,7 +17,7 @@ } #gridContainer .inc .diff { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .inc .diff::before { @@ -29,7 +29,7 @@ } #gridContainer .dec .diff { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .diff::after, diff --git a/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css index cbeb1df3a6aa..c86c3a23b4d3 100644 --- a/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css +++ b/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css @@ -9,11 +9,11 @@ } ::ng-deep #gridContainer .inc { - color: #2ab71b; + color: var(--dx-color-success); } ::ng-deep #gridContainer .dec { - color: #f00; + color: var(--dx-color-danger); } ::ng-deep #gridContainer .inc .arrow, diff --git a/apps/demos/Demos/DataGrid/SignalRService/React/styles.css b/apps/demos/Demos/DataGrid/SignalRService/React/styles.css index 5e4c8033d2a4..202e736c2c04 100644 --- a/apps/demos/Demos/DataGrid/SignalRService/React/styles.css +++ b/apps/demos/Demos/DataGrid/SignalRService/React/styles.css @@ -9,11 +9,11 @@ } #gridContainer .inc { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .dec { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .arrow, diff --git a/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css b/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css index 5e4c8033d2a4..202e736c2c04 100644 --- a/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css +++ b/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css @@ -9,11 +9,11 @@ } #gridContainer .inc { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .dec { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .arrow, diff --git a/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue b/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue index 27dead54a563..bba9af062ec0 100644 --- a/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue @@ -105,11 +105,11 @@ onMounted(() => { } #gridContainer .inc { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .dec { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .arrow, diff --git a/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css b/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css index 5e4c8033d2a4..202e736c2c04 100644 --- a/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css @@ -9,11 +9,11 @@ } #gridContainer .inc { - color: #2ab71b; + color: var(--dx-color-success); } #gridContainer .dec { - color: #f00; + color: var(--dx-color-danger); } #gridContainer .inc .arrow, diff --git a/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css index b4d41a153231..9179e54d6dbf 100644 --- a/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css +++ b/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css @@ -4,7 +4,6 @@ } ::ng-deep #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css b/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css index 483238239f5c..960190593bf2 100644 --- a/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css +++ b/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css @@ -4,7 +4,6 @@ } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css b/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css index 483238239f5c..960190593bf2 100644 --- a/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css +++ b/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css @@ -4,7 +4,6 @@ } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue b/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue index a27ce2e5b789..abe1af6c11ba 100644 --- a/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue @@ -80,7 +80,6 @@ const onStateResetClick = () => { } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css b/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css index 483238239f5c..960190593bf2 100644 --- a/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css @@ -4,7 +4,6 @@ } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css index 7844f189f6b8..e3852ba6b2a5 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css @@ -30,7 +30,7 @@ ::ng-deep #dropzone-text > span { font-weight: 100; - opacity: 0.5; + color: var(--dx-texteditor-color-label); } ::ng-deep #upload-progress { diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css index aaaaacfd22e8..1b75bf82b507 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css @@ -30,7 +30,7 @@ #dropzone-text > span { font-weight: 100; - opacity: 0.5; + color: var(--dx-texteditor-color-label); } #upload-progress { diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css index aaaaacfd22e8..1b75bf82b507 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css @@ -30,7 +30,7 @@ #dropzone-text > span { font-weight: 100; - opacity: 0.5; + color: var(--dx-texteditor-color-label); } #upload-progress { diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue index 568d0ecb79fc..7d63c74b7d91 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue +++ b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue @@ -137,7 +137,7 @@ function onUploadStarted() { #dropzone-text > span { font-weight: 100; - opacity: 0.5; + color: var(--dx-texteditor-color-label); } #upload-progress { diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css index aaaaacfd22e8..1b75bf82b507 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css @@ -30,7 +30,7 @@ #dropzone-text > span { font-weight: 100; - opacity: 0.5; + color: var(--dx-texteditor-color-label); } #upload-progress { diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css index f81c8145082c..bd845db3b652 100644 --- a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css +++ b/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css @@ -3,7 +3,6 @@ } ::ng-deep #pivotgrid-demo .desc-container a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css b/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css index d0868e2c8faf..b9b617e9a5c4 100644 --- a/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css +++ b/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css @@ -3,7 +3,6 @@ } #pivotgrid-demo .desc-container a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css index d0868e2c8faf..b9b617e9a5c4 100644 --- a/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css +++ b/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css @@ -3,7 +3,6 @@ } #pivotgrid-demo .desc-container a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue b/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue index 3a8676c6c805..a090c3bc82e1 100644 --- a/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue +++ b/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue @@ -132,7 +132,6 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) { } #pivotgrid-demo .desc-container a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css b/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css index d0868e2c8faf..b9b617e9a5c4 100644 --- a/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css +++ b/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css @@ -3,7 +3,6 @@ } #pivotgrid-demo .desc-container a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css b/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css index c983b2ec1d39..0679031a6849 100644 --- a/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css +++ b/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css @@ -8,7 +8,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/TreeList/AIColumns/React/styles.css b/apps/demos/Demos/TreeList/AIColumns/React/styles.css index 6e95d25dba6d..543af359354a 100644 --- a/apps/demos/Demos/TreeList/AIColumns/React/styles.css +++ b/apps/demos/Demos/TreeList/AIColumns/React/styles.css @@ -54,7 +54,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css index 6e95d25dba6d..543af359354a 100644 --- a/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css +++ b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css @@ -54,7 +54,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue b/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue index 62ea938d86ef..7ad94171947c 100644 --- a/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue +++ b/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue @@ -22,7 +22,7 @@ defineProps<{ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css index 7f15c9e03c64..2a71f2993d3f 100644 --- a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css +++ b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css @@ -54,7 +54,7 @@ } .status--commission { - color: #f7630c; + color: var(--dx-color-warning); } .status--terminated { diff --git a/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css b/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css index 50568648f16b..e6d258843795 100644 --- a/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css @@ -4,7 +4,6 @@ } ::ng-deep #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/TreeList/StatePersistence/React/styles.css b/apps/demos/Demos/TreeList/StatePersistence/React/styles.css index 72ef92cdee35..f05f469b038e 100644 --- a/apps/demos/Demos/TreeList/StatePersistence/React/styles.css +++ b/apps/demos/Demos/TreeList/StatePersistence/React/styles.css @@ -4,7 +4,6 @@ } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css b/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css index 72ef92cdee35..f05f469b038e 100644 --- a/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css +++ b/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css @@ -4,7 +4,6 @@ } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue b/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue index 5f6695b6df88..910db31a3cde 100644 --- a/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue +++ b/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue @@ -72,7 +72,6 @@ function onStateResetClick() { } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css b/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css index 72ef92cdee35..f05f469b038e 100644 --- a/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css +++ b/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css @@ -4,7 +4,6 @@ } #descContainer a { - color: #f05b41; text-decoration: underline; cursor: pointer; } diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts index e689b5f95faf..52ad9de9c449 100644 --- a/apps/demos/testing/common.test.ts +++ b/apps/demos/testing/common.test.ts @@ -37,7 +37,10 @@ const getIgnoredRules = (testName) => { if (process.env.THEME === THEME.material && [ // False positive: contrast rules do not apply to disabled tags + 'Accordion-Overview', 'TagBox-Overview', + // False positive:contrast rules do not apply to custom orange color + 'CardView-FieldTemplate', ].includes(testName) ) { ignoredRules.push('color-contrast'); @@ -70,6 +73,7 @@ const getIgnoredRules = (testName) => { 'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'], 'Diagram-Containers': ['aria-dialog-name', 'label'], 'Diagram-CustomShapesWithIcons': ['aria-dialog-name', 'label'], + 'Diagram-CustomShapesWithTemplates': ['label'], 'Diagram-CustomShapesWithTemplatesWithEditing': ['aria-dialog-name', 'label'], 'Diagram-CustomShapesWithTexts': ['aria-dialog-name', 'label'], 'Diagram-ImagesInShapes': ['aria-dialog-name', 'label'], @@ -91,6 +95,14 @@ const getIgnoredRules = (testName) => { 'FileManager-Overview': ['aria-command-name', 'empty-table-header', 'label'], 'FileManager-UICustomization': ['aria-command-name', 'empty-table-header', 'label'], + 'PivotGrid-SummaryDisplayModes': ['aria-allowed-attr'], + 'PivotGrid-StatePersistence': ['aria-allowed-attr'], + 'PivotGrid-StandaloneFieldChooser': ['aria-allowed-attr'], + 'PivotGrid-FieldPanel': ['aria-allowed-attr'], + 'PivotGrid-ExcelJsHeaderAndFooter': ['aria-allowed-attr'], + + 'Scheduler-Templates': ['image-alt'], + 'Gantt-Appearance': ['aria-toggle-field-name'], 'Gantt-ExportToPDF': ['aria-toggle-field-name'], 'Gantt-StripLines': ['aria-required-parent', 'aria-valid-attr-value'], diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 9230d0168483..9763aa3c67bb 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -149,7 +149,7 @@ $scrollview-pulldown-path: null !default; @if $color == "blue" { $base-accent: #1564C0 !default; $base-success: #2E7D32 !default; - $base-warning: #EE6002 !default; + $base-warning: #D84003 !default; $base-danger: #C62828 !default; } @@ -175,11 +175,10 @@ $scrollview-pulldown-path: null !default; } @if $mode == "dark" { - @if $color == "blue" { $base-accent: #90CAF9 !default; $base-success: #A5D6A7 !default; - $base-warning: #FFCC80 !default; + $base-warning: #ffaa8c !default; $base-danger: #EF9A9A !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss index 536a030c960b..e8328cf3319d 100644 --- a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss @@ -18,7 +18,6 @@ .dx-context-menu { .dx-menu-item { font-size: $material-context-menu-font-size; - // color: $base-text-color; .dx-menu-item-content { display: flex; diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss index ccfc13233dd4..b98902aa6d51 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss @@ -8,13 +8,15 @@ $gantt-collapsable-row-bg: null !default; $gantt-icon-color: $datagrid-columnchooser-item-color !default; $gantt-parent-task-background-color: null !default; -$gantt-tPrg-background-color: null !default; +$gantt-task-progress-background-color: null !default; $gantt-task-color: null !default; +$gantt-task-background-color: null !default; @if $color == "lime" { $gantt-parent-task-background-color: #f44336 !default; - $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; $gantt-task-color: #fff; + $gantt-task-background-color: #999; } @if $color == "blue" { @@ -22,18 +24,21 @@ $gantt-task-color: null !default; $gantt-task-color: $base-inverted-text-color !default; @if $mode == "light" { - $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%) !default; } @if $mode == "dark" { - $gantt-tPrg-background-color: rgba(255, 255, 255, 0.2) !default; + $gantt-task-progress-background-color: rgba(255, 255, 255, 0.32) !default; + $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%) !default; } } @if $color == "orange" or $color == "purple" or $color == "teal" { $gantt-parent-task-background-color: #8bc34a !default; - $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; $gantt-task-color: #fff; + $gantt-task-background-color: #999; } @if $mode == "light" { diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss index 103fed2e41fd..9eae8abe7119 100644 --- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss @@ -90,7 +90,7 @@ $gantt-successor-background-color: white; .dx-gantt-tPrg { border-radius: $base-border-radius; - background-color: $gantt-tPrg-background-color; + background-color: $gantt-task-progress-background-color; } &.dx-gantt-smallTask { @@ -112,7 +112,7 @@ $gantt-successor-background-color: white; border-bottom-left-radius: 0; &:not(.dx-gantt-noPrg) .dx-gantt-tPrg { - background-color: $gantt-tPrg-background-color; + background-color: $gantt-task-progress-background-color; } &:not(.dx-gantt-smallTask)::before, @@ -134,8 +134,8 @@ $gantt-successor-background-color: white; } &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { - border-left-color: $gantt-tPrg-background-color; - border-top-color: $gantt-tPrg-background-color; + border-left-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-background-color; } &::after, @@ -146,8 +146,8 @@ $gantt-successor-background-color: white; } &.dx-gantt-cmpl::after { - border-right-color: $gantt-tPrg-background-color; - border-top-color: $gantt-tPrg-background-color; + border-right-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-background-color; } &.dx-gantt-cmpl .dx-gantt-tPrg::after { @@ -171,7 +171,7 @@ $gantt-successor-background-color: white; height: $gantt-task-height; line-height: $gantt-task-height; color: $gantt-task-color; - background-color: #999; + background-color: $gantt-task-background-color; border-radius: $base-border-radius; margin-left: 21px; padding-left: 4px; diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss index f8a43b0e9424..85daf28b9327 100644 --- a/packages/devextreme-scss/scss/widgets/material/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/list/_index.scss @@ -320,7 +320,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors padding: math.div($material-list-item-vertical-padding, 2) + 1px $item-horizontal-padding math.div($material-list-item-vertical-padding, 2); - color: color.change($list-normal-color, $alpha: 0.54); + color: color.change($list-normal-color, $alpha: 0.6); font-size: 12px; } diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss index 765415ce1b46..6eef92e6c34c 100644 --- a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss @@ -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(color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl), $alpha: 0.3) !default; +$pivotgrid-field-area-text-color: $base-label-color !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/material/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss index f891093b6d2a..67f3c5b08ac5 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss @@ -23,12 +23,6 @@ $tagbox-tag-hover-bg: null !default; * $type color */ $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: $base-icon-color !default; $tagbox-tag-focused-bg: null !default; $tagbox-select-all-border-color: $base-border-color !default; @@ -36,16 +30,11 @@ $tagbox-select-all-border-color: $base-border-color !default; @if $mode == "light" { $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-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default; } @if $mode == "dark" { $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-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !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 e86a5190e5bf..479ccbe20a65 100644 --- a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss @@ -56,16 +56,6 @@ } } } - - // &.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 +98,6 @@ 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; 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 4458a5e1dbf7..3d6d420a8cf1 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -65,13 +65,11 @@ $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-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; } diff --git a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss index 4933c9c47833..a071b2b2cca9 100644 --- a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss @@ -4,11 +4,3 @@ // adduse $clock-digits-color: $base-icon-color !default; - -// @if $mode == "light" { -// $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default; -// } - -// @if $mode == "dark" { -// $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default; -// } diff --git a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss index 86792c6c2074..57847acc0685 100644 --- a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss @@ -20,12 +20,10 @@ $tooltip-bg: null !default; $tooltip-border-radius: $base-border-radius !default; @if $mode == "light" { - // $tooltip-color: $base-inverted-text-color !default; $tooltip-bg: color.adjust($base-bg, $lightness: -60%) !default; } @if $mode == "dark" { - // $tooltip-color: $base-inverted-text-color !default; $tooltip-bg: color.adjust($base-bg, $lightness: 60%) !default; } From 8216396fca437a8726dc03067a74159a5b04fb6c Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 14:14:28 +0400 Subject: [PATCH 12/17] Step 3: run dark theme testing --- .github/workflows/demos_visual_tests.yml | 6 +++++- .github/workflows/testcafe_tests.yml | 4 +++- e2e/testcafe-devextreme/tests/container-ai-integration.html | 6 ++++-- e2e/testcafe-devextreme/tests/container-extended.html | 6 ++++-- e2e/testcafe-devextreme/tests/container.html | 6 ++++-- 5 files changed, 20 insertions(+), 8 deletions(-) diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/demos_visual_tests.yml index 8c3cea1d6108..f4b33c31231e 100644 --- a/.github/workflows/demos_visual_tests.yml +++ b/.github/workflows/demos_visual_tests.yml @@ -596,7 +596,7 @@ jobs: fail-fast: false matrix: STRATEGY: [screenshots, accessibility] - THEME: ['material.blue.light', 'fluent.blue.light'] + THEME: ['material.blue.light', 'fluent.blue.light', 'material.blue.dark', 'fluent.blue.dark'] CONSTEL: [jquery(1/3), jquery(2/3), jquery(3/3), jquery] exclude: - STRATEGY: accessibility @@ -607,6 +607,10 @@ jobs: CONSTEL: jquery(3/3) - STRATEGY: screenshots CONSTEL: jquery + - STRATEGY: screenshots + THEME: 'material.blue.dark' + - STRATEGY: screenshots + THEME: 'fluent.blue.dark' env: ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report" diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml index fc0620f2878f..7efebb166eae 100644 --- a/.github/workflows/testcafe_tests.yml +++ b/.github/workflows/testcafe_tests.yml @@ -95,7 +95,9 @@ jobs: matrix: ARGS: [ { componentFolder: "accessibility", name: "accessibility" }, - { componentFolder: "accessibility - material", name: "accessibility", theme: 'material.blue.light' }, + { componentFolder: "accessibility", name: "accessibility - fluent.dark", theme: 'fluent.blue.dark' }, + { componentFolder: "accessibility", name: "accessibility - material.light", theme: 'material.blue.light' }, + { componentFolder: "accessibility", name: "accessibility - material.dark", theme: 'material.blue.dark' }, { componentFolder: "common", name: "common" }, { name: "generic", theme: 'generic.light' }, diff --git a/e2e/testcafe-devextreme/tests/container-ai-integration.html b/e2e/testcafe-devextreme/tests/container-ai-integration.html index aa112a3ad9fb..cb93af59852b 100644 --- a/e2e/testcafe-devextreme/tests/container-ai-integration.html +++ b/e2e/testcafe-devextreme/tests/container-ai-integration.html @@ -3,11 +3,13 @@ TestCafe Tests Container - + + - + + diff --git a/e2e/testcafe-devextreme/tests/container-extended.html b/e2e/testcafe-devextreme/tests/container-extended.html index 1d1d25f4b6da..7c93db5ca247 100644 --- a/e2e/testcafe-devextreme/tests/container-extended.html +++ b/e2e/testcafe-devextreme/tests/container-extended.html @@ -3,11 +3,13 @@ TestCafe Tests Container - + + - + + diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html index 8e82c15a4804..17f9cfe7213e 100644 --- a/e2e/testcafe-devextreme/tests/container.html +++ b/e2e/testcafe-devextreme/tests/container.html @@ -4,10 +4,12 @@ TestCafe Tests Container + - + - + + From 0c652a7a7242dd8276cdaa31c5da33c33d2f4467 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 14:56:14 +0400 Subject: [PATCH 13/17] rename workflow --- .../workflows/{demos_visual_tests.yml => visual_tests_demos.yml} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/workflows/{demos_visual_tests.yml => visual_tests_demos.yml} (100%) diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/visual_tests_demos.yml similarity index 100% rename from .github/workflows/demos_visual_tests.yml rename to .github/workflows/visual_tests_demos.yml From d56397cfcc5fdf86104fcc073c3b837f465a0358 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 15:15:56 +0400 Subject: [PATCH 14/17] change dataTheme --- .../{visual_tests_demos.yml => testcafe_demos_tests.yml} | 4 ++-- e2e/testcafe-devextreme/tests/container-ai-integration.html | 4 ++-- e2e/testcafe-devextreme/tests/container-extended.html | 4 ++-- e2e/testcafe-devextreme/tests/container.html | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) rename .github/workflows/{visual_tests_demos.yml => testcafe_demos_tests.yml} (99%) diff --git a/.github/workflows/visual_tests_demos.yml b/.github/workflows/testcafe_demos_tests.yml similarity index 99% rename from .github/workflows/visual_tests_demos.yml rename to .github/workflows/testcafe_demos_tests.yml index f4b33c31231e..11f8215a885f 100644 --- a/.github/workflows/visual_tests_demos.yml +++ b/.github/workflows/testcafe_demos_tests.yml @@ -14,7 +14,7 @@ on: env: NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }} - NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }} + NX_SKIP_NX_CACHE: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} BUILD_TEST_INTERNAL_PACKAGE: true RUN_TESTS: true @@ -89,7 +89,7 @@ jobs: - name: Determine framework tests scope id: determine run: | - if [ "${{ github.event_name }}" != "pull_request" ] || [ "${{ contains(github.event.pull_request.labels.*.name, 'force all tests') }}" = "true" ]; then + if [ "${{ github.event_name }}" != "pull_request" ] || [ "${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'force all tests') }}" = "true" ]; then echo "Framework tests scope: all demos" echo "framework-tests-scope=all" >> $GITHUB_OUTPUT elif [ "${{ needs.get-changes.outputs.has-changed-demos }}" = "true" ]; then diff --git a/e2e/testcafe-devextreme/tests/container-ai-integration.html b/e2e/testcafe-devextreme/tests/container-ai-integration.html index cb93af59852b..f02b899c362c 100644 --- a/e2e/testcafe-devextreme/tests/container-ai-integration.html +++ b/e2e/testcafe-devextreme/tests/container-ai-integration.html @@ -4,12 +4,12 @@ TestCafe Tests Container - + - + diff --git a/e2e/testcafe-devextreme/tests/container-extended.html b/e2e/testcafe-devextreme/tests/container-extended.html index 7c93db5ca247..00ac27d41752 100644 --- a/e2e/testcafe-devextreme/tests/container-extended.html +++ b/e2e/testcafe-devextreme/tests/container-extended.html @@ -4,12 +4,12 @@ TestCafe Tests Container - + - + diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html index 17f9cfe7213e..21744e6fe26d 100644 --- a/e2e/testcafe-devextreme/tests/container.html +++ b/e2e/testcafe-devextreme/tests/container.html @@ -4,12 +4,12 @@ TestCafe Tests Container - + - + From a0f164e437efb05d1260223d227349ca45fd808d Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 15:45:13 +0400 Subject: [PATCH 15/17] fix: trigger workflow From a2e9ad2481993dd4f0eb39b472547512e2d2fdba Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 15:47:14 +0400 Subject: [PATCH 16/17] fix: trigger workflow --- .../{testcafe_demos_tests.yml => visual_demos_tests.yml} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename .github/workflows/{testcafe_demos_tests.yml => visual_demos_tests.yml} (99%) diff --git a/.github/workflows/testcafe_demos_tests.yml b/.github/workflows/visual_demos_tests.yml similarity index 99% rename from .github/workflows/testcafe_demos_tests.yml rename to .github/workflows/visual_demos_tests.yml index 11f8215a885f..f71abdaeac68 100644 --- a/.github/workflows/testcafe_demos_tests.yml +++ b/.github/workflows/visual_demos_tests.yml @@ -14,7 +14,7 @@ on: env: NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }} - NX_SKIP_NX_CACHE: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} + NX_SKIP_NX_CACHE: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'skip-cache') }} BUILD_TEST_INTERNAL_PACKAGE: true RUN_TESTS: true From d71cf117fa26ae528bdbf5501551263811629bec Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 30 Jan 2026 20:07:32 +0400 Subject: [PATCH 17/17] Step 3.1: fix base bg color in dark theme --- packages/devextreme-scss/scss/widgets/material/_colors.scss | 2 +- .../scss/widgets/material/textEditor/_colors.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 9763aa3c67bb..fa6f043b52f4 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -188,7 +188,7 @@ $scrollview-pulldown-path: null !default; $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !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-bg: #292929 !default; $base-border-color: #515159 !default; $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default; $base-element-bg: $base-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss index 3d6d420a8cf1..b28b742ff526 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -65,12 +65,12 @@ $texteditor-label-transition: @if $mode == "light" { $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default; - $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: 76%, $space: hsl) !default; + $texteditor-button-clear-icon-color-bg: rgba(0, 0, 0, 0.6) !default; } @if $mode == "dark" { $texteditor-disabled-color: rgba(255, 255, 255, 0.6) !default; - $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: -34%, $space: hsl) !default; + $texteditor-button-clear-icon-color-bg: rgba(255, 255, 255, 0.12) !default; } :root {