Skip to content

Components & Demos: test color-contrast rule #32162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
EugeniyKiyashko wants to merge 21 commits into
base: 26_1
Choose a base branch
from
+474 −417
Draft

Components & Demos: test color-contrast rule #32162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
06012bc
Demos: test color-contrast rule
EugeniyKiyashko Jan 12, 2026
f9dd903
Step1: update base colors
EugeniyKiyashko Jan 22, 2026
6fd1ff8
Step 2: update base colors again. Fix button.disabled, slider, menu, …
EugeniyKiyashko Jan 23, 2026
9099a51
skip disabled check for TagBox
EugeniyKiyashko Jan 26, 2026
fd7a8ad
Step 1.2: update base variables in Dark mode
EugeniyKiyashko Jan 26, 2026
6aabbcc
Step 2.2: fix scheduler and datagrid error row cases
EugeniyKiyashko Jan 29, 2026
9849e10
Step 2.3: fix color-contrast issues in PivotGrid, TimeView, checkbox …
EugeniyKiyashko Jan 29, 2026
e9b8ae6
skip demos with false positive issues
EugeniyKiyashko Jan 29, 2026
11d0c64
skip demos with false positive issues
EugeniyKiyashko Jan 29, 2026
d9eb13e
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Jan 29, 2026
ed2ac3e
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Jan 29, 2026
f9431e1
ignore specific rules
EugeniyKiyashko Jan 29, 2026
1a2b2a3
Step 2.5: fix PivotGrid, DataGrid, Gantt and others demos
EugeniyKiyashko Jan 30, 2026
8216396
Step 3: run dark theme testing
EugeniyKiyashko Jan 30, 2026
d7a105c
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Jan 30, 2026
0c652a7
rename workflow
EugeniyKiyashko Jan 30, 2026
776975a
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Jan 30, 2026
d56397c
change dataTheme
EugeniyKiyashko Jan 30, 2026
a0f164e
fix: trigger workflow
EugeniyKiyashko Jan 30, 2026
a2e9ad2
fix: trigger workflow
EugeniyKiyashko Jan 30, 2026
0cdfff1
Step 3.1: fix base bg color in dark theme
EugeniyKiyashko Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/workflows/testcafe_tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,9 @@ jobs:
matrix:
ARGS: [
{ componentFolder: "accessibility", name: "accessibility" },
{ componentFolder: "accessibility", name: "accessibility - fluent.dark", theme: 'fluent.blue.dark' },
{ componentFolder: "accessibility", name: "accessibility - material.light", theme: 'material.blue.light' },
{ componentFolder: "accessibility", name: "accessibility - material.dark", theme: 'material.blue.dark' },
{ componentFolder: "common", name: "common" },

{ name: "generic", theme: 'generic.light' },
Expand Down
10 changes: 7 additions & 3 deletions .github/workflows/demos_visual_tests.yml → .github/workflows/visual_demos_tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ on:

env:
NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
NX_SKIP_NX_CACHE: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'skip-cache') }}
BUILD_TEST_INTERNAL_PACKAGE: true
RUN_TESTS: true

Expand Down Expand Up @@ -89,7 +89,7 @@ jobs:
- name: Determine framework tests scope
id: determine
run: |
if [ "${{ github.event_name }}" != "pull_request" ] || [ "${{ contains(github.event.pull_request.labels.*.name, 'force all tests') }}" = "true" ]; then
if [ "${{ github.event_name }}" != "pull_request" ] || [ "${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'force all tests') }}" = "true" ]; then
echo "Framework tests scope: all demos"
echo "framework-tests-scope=all" >> $GITHUB_OUTPUT
elif [ "${{ needs.get-changes.outputs.has-changed-demos }}" = "true" ]; then
Expand Down Expand Up @@ -596,7 +596,7 @@ jobs:
fail-fast: false
matrix:
STRATEGY: [screenshots, accessibility]
THEME: ['material.blue.light', 'fluent.blue.light']
THEME: ['material.blue.light', 'fluent.blue.light', 'material.blue.dark', 'fluent.blue.dark']
CONSTEL: [jquery(1/3), jquery(2/3), jquery(3/3), jquery]
exclude:
- STRATEGY: accessibility
Expand All @@ -607,6 +607,10 @@ jobs:
CONSTEL: jquery(3/3)
- STRATEGY: screenshots
CONSTEL: jquery
- STRATEGY: screenshots
THEME: 'material.blue.dark'
- STRATEGY: screenshots
THEME: 'fluent.blue.dark'
env:
ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"

Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

.priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const priorityClassName = computed(() =>
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const cardView = ref<DxCardView>();
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
1 change: 0 additions & 1 deletion apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

::ng-deep .left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down
1 change: 0 additions & 1 deletion apps/demos/Demos/Common/ListsOverview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down
1 change: 0 additions & 1 deletion apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down
1 change: 0 additions & 1 deletion apps/demos/Demos/Common/ListsOverview/Vue/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down
1 change: 0 additions & 1 deletion apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

::ng-deep .right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

::ng-deep .title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/Vue/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@ function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuIt
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
</style>
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,6 @@ function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuIt
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
</style>
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}

::ng-deep #gridContainer .inc .diff {
color: #2ab71b;
color: var(--dx-color-success);
}

::ng-deep #gridContainer .inc .diff::before {
Expand All @@ -29,7 +29,7 @@
}

::ng-deep #gridContainer .dec .diff {
color: #f00;
color: var(--dx-color-danger);
}

::ng-deep #gridContainer .inc .diff::after,
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/Cell/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}

#gridContainer .inc .diff {
color: #2ab71b;
color: var(--dx-color-success);
}

#gridContainer .inc .diff::before {
Expand All @@ -29,7 +29,7 @@
}

#gridContainer .dec .diff {
color: #f00;
color: var(--dx-color-danger);
}

#gridContainer .inc .diff::after,
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}

#gridContainer .inc .diff {
color: #2ab71b;
color: var(--dx-color-success);
}

#gridContainer .inc .diff::before {
Expand All @@ -29,7 +29,7 @@
}

#gridContainer .dec .diff {
color: #f00;
color: var(--dx-color-danger);
}

#gridContainer .inc .diff::after,
Expand Down
Loading
Loading