Step 2.5: fix PivotGrid, DataGrid, Gantt demos

EugeniyKiyashko · EugeniyKiyashko · commit cd154d9d275d · 2026-01-30T11:36:30.000+04:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -3,7 +3,6 @@
 }
 
 #pivotgrid-demo .desc-container a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
@@ -91,6 +91,14 @@ const getIgnoredRules = (testName) => {
     'FileManager-Overview': ['aria-command-name', 'empty-table-header', 'label'],
     'FileManager-UICustomization': ['aria-command-name', 'empty-table-header', 'label'],
 
+    'PivotGrid-SummaryDisplayModes': ['aria-allowed-attr'],
+    'PivotGrid-StatePersistence': ['aria-allowed-attr'],
+    'PivotGrid-StandaloneFieldChooser': ['aria-allowed-attr'],
+    'PivotGrid-FieldPanel': ['aria-allowed-attr'],
+    'PivotGrid-ExcelJsHeaderAndFooter': ['aria-allowed-attr'],
+
+    'Scheduler-Templates': ['image-alt'],
+
     'Gantt-Appearance': ['aria-toggle-field-name'],
     'Gantt-ExportToPDF': ['aria-toggle-field-name'],
     'Gantt-StripLines': ['aria-required-parent', 'aria-valid-attr-value'],
diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss
@@ -175,7 +175,6 @@ $scrollview-pulldown-path: null !default;
 }
 
 @if $mode == "dark" {
-
   @if $color == "blue" {
     $base-accent: #90CAF9 !default;
     $base-success: #A5D6A7 !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss
@@ -18,7 +18,6 @@
 .dx-context-menu {
   .dx-menu-item {
     font-size: $material-context-menu-font-size;
-    // color: $base-text-color;
 
     .dx-menu-item-content {
       display: flex;
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
@@ -8,32 +8,37 @@
 $gantt-collapsable-row-bg: null !default;
 $gantt-icon-color: $datagrid-columnchooser-item-color !default;
 $gantt-parent-task-background-color: null !default;
-$gantt-tPrg-background-color: null !default;
+$gantt-task-progress-background-color: null !default;
 $gantt-task-color: null !default;
+$gantt-task-background-color: null !default;
 
 @if $color == "lime" {
   $gantt-parent-task-background-color: #f44336 !default;
-  $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
   $gantt-task-color: #fff;
+  $gantt-task-background-color: #999;
 }
 
 @if $color == "blue" {
   $gantt-parent-task-background-color: $base-success !default;
   $gantt-task-color: $base-inverted-text-color !default;
 
   @if $mode == "light" {
-    $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default;
+    $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+    $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%) !default;
   }
 
   @if $mode == "dark" {
-    $gantt-tPrg-background-color: rgba(255, 255, 255, 0.2) !default;
+    $gantt-task-progress-background-color: rgba(255, 255, 255, 0.32) !default;
+    $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%) !default;
   }
 }
 
 @if $color == "orange" or $color == "purple" or $color == "teal" {
   $gantt-parent-task-background-color: #8bc34a !default;
-  $gantt-tPrg-background-color: rgba(0, 0, 0, 0.2) !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
   $gantt-task-color: #fff;
+  $gantt-task-background-color: #999;
 }
 
 @if $mode == "light" {
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
@@ -90,7 +90,7 @@ $gantt-successor-background-color: white;
 
       .dx-gantt-tPrg {
         border-radius: $base-border-radius;
-        background-color: $gantt-tPrg-background-color;
+        background-color: $gantt-task-progress-background-color;
       }
 
       &.dx-gantt-smallTask {
@@ -112,7 +112,7 @@ $gantt-successor-background-color: white;
         border-bottom-left-radius: 0;
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
-          background-color: $gantt-tPrg-background-color;
+          background-color: $gantt-task-progress-background-color;
         }
 
         &:not(.dx-gantt-smallTask)::before,
@@ -134,8 +134,8 @@ $gantt-successor-background-color: white;
         }
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
-          border-left-color: $gantt-tPrg-background-color;
-          border-top-color: $gantt-tPrg-background-color;
+          border-left-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &::after,
@@ -146,8 +146,8 @@ $gantt-successor-background-color: white;
         }
 
         &.dx-gantt-cmpl::after {
-          border-right-color: $gantt-tPrg-background-color;
-          border-top-color: $gantt-tPrg-background-color;
+          border-right-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &.dx-gantt-cmpl .dx-gantt-tPrg::after {
@@ -171,7 +171,7 @@ $gantt-successor-background-color: white;
     height: $gantt-task-height;
     line-height: $gantt-task-height;
     color: $gantt-task-color;
-    background-color: #999;
+    background-color: $gantt-task-background-color;
     border-radius: $base-border-radius;
     margin-left: 21px;
     padding-left: 4px;
diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss
@@ -320,7 +320,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
 
   .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
     padding: math.div($material-list-item-vertical-padding, 2) + 1px $item-horizontal-padding math.div($material-list-item-vertical-padding, 2);
-    color: color.change($list-normal-color, $alpha: 0.54);
+    color: color.change($list-normal-color, $alpha: 0.6);
     font-size: 12px;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss
@@ -32,7 +32,7 @@ $pivotgrid-grandtotalcolor: $base-hover-bg !default;
 * $name 40. Field area text color
 * $type color
 */
-$pivotgrid-field-area-text-color: color.change(color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl), $alpha: 0.3) !default;
+$pivotgrid-field-area-text-color: $base-label-color !default;
 $pivotgrid-accent-color: $base-accent !default;
 $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
 $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss
@@ -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: $base-icon-color !default;
 $tagbox-tag-button-remove-color: $base-icon-color !default;
 $tagbox-tag-focused-bg: null !default;
 $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $mode == "light" {
   $tagbox-tag-bg: rgba(0, 0, 0, 0.08) !default;
   $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: -15%, $space: hsl) !default;
-  // $tagbox-tag-button-remove-color: $tagbox-tag-bg !default;
   $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
   $tagbox-tag-bg: rgba(255, 255, 255, 0.08) !default;
   $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: 15%, $space: hsl) !default;
-  // $tagbox-tag-button-remove-color: color.adjust($base-bg, $lightness: 22%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !default;
 }
-
-// $tagbox-tag-disabled-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default;
-
diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss
@@ -56,16 +56,6 @@
       }
     }
   }
-
-  // &.dx-state-disabled {
-  //   .dx-tag-content {
-  //     background-color: $base-bg;
-
-  //     // .dx-tag-remove-button::before {
-  //     //   color: $tagbox-tag-disabled-bg;
-  //     // }
-  //   }
-  // }
 }
 
 .dx-tagbox-single-line {
@@ -108,7 +98,6 @@
     width: $material-tagbox-remove-button-icon-size;
     height: $material-tagbox-remove-button-icon-size;
     color: $tagbox-tag-button-remove-color;
-    // background-color: $tagbox-tag-button-remove-bg;
     border-radius: 50%;
     transform: none;
   }
diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
@@ -65,13 +65,11 @@ $texteditor-label-transition:
 
 @if $mode == "light" {
   $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default;
-  // $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 46%, $space: hsl) !default;
   $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: 76%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
   $texteditor-disabled-color: rgba(255, 255, 255, 0.6) !default;
-  // $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -76%, $space: hsl) !default;
   $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: -34%, $space: hsl) !default;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss
@@ -4,11 +4,3 @@
 
 // adduse
 $clock-digits-color: $base-icon-color !default;
-
-// @if $mode == "light" {
-//   $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default;
-// }
-
-// @if $mode == "dark" {
-//   $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default;
-// }
diff --git a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss
@@ -20,12 +20,10 @@ $tooltip-bg: null !default;
 $tooltip-border-radius: $base-border-radius !default;
 
 @if $mode == "light" {
-  // $tooltip-color: $base-inverted-text-color !default;
   $tooltip-bg: color.adjust($base-bg, $lightness: -60%) !default;
 }
 
 @if $mode == "dark" {
-  // $tooltip-color: $base-inverted-text-color !default;
   $tooltip-bg: color.adjust($base-bg, $lightness: 60%) !default;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`::ng-deep #descContainer a {`
`7`		`- color: #f05b41;`
`8`	`7`	`text-decoration: underline;`
`9`	`8`	`cursor: pointer;`
`10`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`#descContainer a {`
`7`		`- color: #f05b41;`
`8`	`7`	`text-decoration: underline;`
`9`	`8`	`cursor: pointer;`
`10`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,6 @@ const onStateResetClick = () => {`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`#descContainer a {`
`83`		`- color: #f05b41;`
`84`	`83`	`text-decoration: underline;`
`85`	`84`	`cursor: pointer;`
`86`	`85`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,6 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`::ng-deep #pivotgrid-demo .desc-container a {`
`6`		`- color: #f05b41;`
`7`	`6`	`text-decoration: underline;`
`8`	`7`	`cursor: pointer;`
`9`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,6 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`#pivotgrid-demo .desc-container a {`
`6`		`- color: #f05b41;`
`7`	`6`	`text-decoration: underline;`
`8`	`7`	`cursor: pointer;`
`9`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,6 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {`
`132`	`132`	`}`
`133`	`133`
`134`	`134`	`#pivotgrid-demo .desc-container a {`
`135`		`- color: #f05b41;`
`136`	`135`	`text-decoration: underline;`
`137`	`136`	`cursor: pointer;`
`138`	`137`	`}`