Skip to content

Design System: New Fluent theme (dxdsfluent) powered by design tokens, fix hardcoded colors in Widget Gallery #34698

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

Merged
pharret31 merged 25 commits into from
Aug 18, 2026
Merged

Design System: New Fluent theme (dxdsfluent) powered by design tokens, fix hardcoded colors in Widget Gallery #34698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ae3b236
Design System: use design tokens for hardcoded colors in Charts demos…
dmlvr Aug 7, 2026
d06f604
Design System: use design tokens for hardcoded colors in Scheduler de…
dmlvr Aug 7, 2026
f09b5e7
Design System: use design tokens for hardcoded colors in DataGrid dem…
dmlvr Aug 7, 2026
c2c1aff
Design System: use design tokens for hardcoded colors in Gantt demos …
dmlvr Aug 7, 2026
0b3bd4e
Design System: use design tokens for hardcoded colors in TileView dem…
dmlvr Aug 7, 2026
766d600
Design System: use design tokens for hardcoded colors in Common demos…
dmlvr Aug 7, 2026
c10bcec
Design System: use design tokens for hardcoded colors in ResponsiveBo…
dmlvr Aug 7, 2026
78c7778
Design System: use design tokens for hardcoded colors in Diagram and …
dmlvr Aug 7, 2026
f8c2040
Design System: use design tokens for hardcoded colors in Sortable and…
dmlvr Aug 7, 2026
3fd7093
Design System: use design tokens for hardcoded colors in RadioGroup, …
dmlvr Aug 7, 2026
24cb45a
Design System: use design tokens for hardcoded colors in Box, Calenda…
dmlvr Aug 7, 2026
520637a
Design System: use design tokens for hardcoded colors in Chat/Message…
dmlvr Aug 7, 2026
61b4ea1
Design System: use design tokens for hardcoded colors in ButtonGroup,…
dmlvr Aug 7, 2026
f0bad25
fix colors in demos
pharret31 Aug 11, 2026
595aaa6
fixes
pharret31 Aug 11, 2026
4e0b418
fix panels colors
pharret31 Aug 11, 2026
7de7a4d
fix panels colors
pharret31 Aug 11, 2026
5eff33a
move option color-mix to root tokens
pharret31 Aug 12, 2026
1262d76
Design System: replace etalons
pharret31 Aug 13, 2026
fa63e1c
Design System: replace etalons
pharret31 Aug 13, 2026
0c39475
Design System: fix demos
pharret31 Aug 13, 2026
c1543d5
Design System: fix gantt screenshot
pharret31 Aug 13, 2026
4aba10b
Design System: restore tolerance
pharret31 Aug 13, 2026
f493a2e
Design System: exclude selector from testing (divergence)
pharret31 Aug 17, 2026
1df787d
fix frameworks after changes
EugeniyKiyashko Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
right: 0;
width: 340px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.options > .caption {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Accordion/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
right: 0;
width: 340px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.options > .caption {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Accordion/Overview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
right: 0;
width: 340px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.options > .caption {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Accordion/Overview/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const selectedCompanies = computed({
right: 0;
width: 340px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.options > .caption {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Accordion/Overview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
right: 0;
width: 340px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.options > .caption {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
left: 0;
position: absolute;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ActionSheet/Basics/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
left: 0;
position: absolute;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
left: 0;
position: absolute;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ActionSheet/Basics/Vue/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
left: 0;
position: absolute;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
left: 0;
position: absolute;
bottom: 0;
Expand Down
10 changes: 5 additions & 5 deletions apps/demos/Demos/Box/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
}

.demo-light {
background: rgba(245, 229, 166, 0.5);
background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray);
}
10 changes: 5 additions & 5 deletions apps/demos/Demos/Box/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
}

.demo-light {
background: rgba(245, 229, 166, 0.5);
background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray);
}
10 changes: 5 additions & 5 deletions apps/demos/Demos/Box/Overview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
}

.demo-light {
background: rgba(245, 229, 166, 0.5);
background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray);
}
10 changes: 5 additions & 5 deletions apps/demos/Demos/Box/Overview/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,24 +150,24 @@ import { DxBox, DxItem } from 'devextreme-vue/box';
}

.demo-light {
background: rgba(245, 229, 166, 0.5);
background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray);
}

</style>
10 changes: 5 additions & 5 deletions apps/demos/Demos/Box/Overview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@
}

.demo-light {
background: rgba(245, 229, 166, 0.5);
background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ButtonGroup/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,6 @@ function itemClick(e: DxButtonGroupTypes.ItemClickEvent) {
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd);
}
</style>
2 changes: 1 addition & 1 deletion apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
#multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/Calendar/MultipleSelection/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 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Calendar/MultipleSelection/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ function clearValue() {

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
10 changes: 5 additions & 5 deletions apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@
}

::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
color: #3030ff;
color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff);
}

::ng-deep .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
color: #8080ff;
color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
}

::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
color: #ff3030;
color: var(--dxds-color-content-utility-red-default-rest, #ff3030);
}

::ng-deep .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
color: #ff8080;
color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
}

::ng-deep .dx-calendar-week-number-cell .week-number {
Expand All @@ -43,7 +43,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
10 changes: 5 additions & 5 deletions apps/demos/Demos/Calendar/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@
}

.dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
color: #3030ff;
color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff);
}

.dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
color: #8080ff;
color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
}

.dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
color: #ff3030;
color: var(--dxds-color-content-utility-red-default-rest, #ff3030);
}

.dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
color: #ff8080;
color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
}

.dx-calendar-week-number-cell .week-number {
Expand All @@ -43,7 +43,7 @@

.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
background-color: var(--dx-color-options-panel-bg);
}

.option {
Expand Down
Loading
Loading