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/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/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/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/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/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/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/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/accessibility-unsupported-components.js b/apps/demos/testing/accessibility-unsupported-components.js deleted file mode 100644 index afb918a223bc..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 c99df5fa2510..1cb9d1f5a5c5 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,86 @@ 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'); } + + 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'], + + '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-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'], + + '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'], + 'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'], + + 'Localization-UsingGlobalize': ['label'], + }; + + return [ + ...ignoredRules, + ...(specificRules[testName] || []), + ]; }; const getClientScripts = () => { @@ -102,10 +171,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 +199,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 +224,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 b6e92f28fe02..2e4d549f9f4f 100644 --- a/apps/demos/utils/visual-tests/matrix-test-helper.ts +++ b/apps/demos/utils/visual-tests/matrix-test-helper.ts @@ -271,13 +271,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; 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/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts index 0a0a278a9516..b5cec667bd41 100644 --- a/e2e/testcafe-devextreme/helpers/accessibility/test.ts +++ b/e2e/testcafe-devextreme/helpers/accessibility/test.ts @@ -45,7 +45,20 @@ 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' || component === 'dxFileUploader' || component === 'dxDateRangeBox') && (optionConfiguration as any).disabled === true) { + if (currentA11yCheckConfig.runOnly === 'color-contrast') { + return; + } + + 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/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/runner.ts b/e2e/testcafe-devextreme/runner.ts index f0745b919cfa..4f98d4dcca4d 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 = 2; +const FAILED_TESTS_RETRY_ATTEMPTS = 0; const wait = async ( timeout: number, 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..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,15 +21,8 @@ const options: Options = { showCancelButton: [true, false], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, -} : {}; - const configuration: Configuration = { component: 'dxActionSheet', - a11yCheckConfig, options, }; 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..9ad8e8741ffe 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts @@ -16,6 +16,7 @@ test('headerPanel dragging column when it has sorting and headerFilter', async ( await triggerDragStart(columnElement); const a11yCheckConfig = { + // False positive: contrast rules do not apply to disabled elements rules: { 'color-contrast': { enabled: false } }, }; await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR); @@ -47,7 +48,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..1895e778ba65 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts @@ -16,6 +16,7 @@ const DRAG_MOVE_Y_COEFFICIENT = 1; const a11yCheckConfig = { rules: { + // 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/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..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')); @@ -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', { @@ -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/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..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,15 +28,8 @@ const options: Options = { ], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, -} : {}; - 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 ed4aeaef7de8..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,15 +30,8 @@ const options: Options = { height: [280], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, -} : {}; - const visibleConfiguration: Configuration = { component: 'dxPopup', - a11yCheckConfig, options: { ...options, visible: [true], @@ -55,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 af3010386f7b..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: false } }, -}; - const configuration: Configuration = { component: 'dxProgressBar', - a11yCheckConfig, options, }; 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..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,15 +27,8 @@ const options: Options = { // stylingMode: ['primary', 'secondary'], }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, -} : {}; - 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 657b7be6a425..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,15 +32,8 @@ const created = async (t: TestController): Promise => { await t.pressKey('tab'); }; -const a11yCheckConfig = isMaterialBased() ? { - // NOTE: color-contrast issues in Material - runOnly: isMaterial() ? '' : 'color-contrast', - rules: { 'color-contrast': { enabled: !isMaterial() } }, -} : {}; - const configuration: Configuration = { component: 'dxTabs', - a11yCheckConfig, options, created, }; 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 = { 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 d6f74d3f8731..be7268dc0603 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: null !default; /** * $name 60. Warning color * $type color */ -$base-warning: #ffc107 !default; +$base-warning: null !default; /** * $name 70. Danger color * $type color */ -$base-danger: #f44336 !default; +$base-danger: null !default; /** * $name 80. Hover state text color @@ -104,60 +104,70 @@ $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: #03a9f4 !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; } -/** -* $name 30. Link color -* $type color -*/ -$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; - $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; $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; @@ -165,12 +175,19 @@ $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; $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; @@ -187,6 +204,15 @@ $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; + $typography-bg: $base-bg !default; $typography-color: $base-text-color !default; $typography-link-color: $base-link-color !default; @@ -200,6 +226,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/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss index e4648cc856e8..16dbe6f244e9 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; @@ -98,9 +99,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 +117,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 +177,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,63 +233,64 @@ $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" { - $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: -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: 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: 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: -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-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/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/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss index d375e0897296..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/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/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss index c63983f21e0e..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,37 @@ $gantt-collapsable-row-bg: null !default; $gantt-icon-color: $datagrid-columnchooser-item-color !default; $gantt-parent-task-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-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; + $gantt-task-color: #fff; + $gantt-task-background-color: #999; } -@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-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-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-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 460bec186628..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: rgba(0, 0, 0, 0.2); + 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: rgba(255, 255, 255, 0.2); + 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: rgba(255, 255, 255, 0.2); - border-top-color: rgba(255, 255, 255, 0.2); + 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: rgba(255, 255, 255, 0.2); - border-top-color: rgba(255, 255, 255, 0.2); + border-right-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-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,8 +170,8 @@ $gantt-successor-background-color: white; .dx-gantt-taskRes { height: $gantt-task-height; line-height: $gantt-task-height; - color: #fff; - background-color: #999; + color: $gantt-task-color; + 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/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/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/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/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss index d892b9375755..6eef92e6c34c 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; @@ -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/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; 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 4cb276546f55..67f3c5b08ac5 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 @@ -23,29 +23,18 @@ $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: rgba(0, 0, 0, 0.36) !default; -$tagbox-tag-button-remove-color: null !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-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-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !default; } - -$tagbox-tag-disabled-bg: $tagbox-tag-focused-bg !default; - diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss index dc6e02164f43..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: $tagbox-tag-disabled-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 2c001732a6c1..3d6d420a8cf1 100644 --- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss @@ -52,11 +52,11 @@ $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; -$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,12 +64,12 @@ $texteditor-label-transition: top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; @if $mode == "light" { - $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 46%, $space: hsl) !default; + $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; } @if $mode == "dark" { - $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -76%, $space: hsl) !default; + $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; } diff --git a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss index 73cd667e46a6..a071b2b2cca9 100644 --- a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss @@ -3,12 +3,4 @@ @use "../colors" as *; // adduse -$clock-digits-color: null !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; -} +$clock-digits-color: $base-icon-color !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..57847acc0685 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,10 @@ $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-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-bg: color.adjust($base-bg, $lightness: 60%) !default; }