Skip to content

Design System: New Fluent theme (dxdsfluent) powered by design tokens #34509

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 24 commits into
base: main
Choose a base branch
from
Draft

Design System: New Fluent theme (dxdsfluent) powered by design tokens #34509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b3c4281
Design System: New Fluent theme (dxdsfluent) powered by design tokens
EugeniyKiyashko Jul 27, 2026
33e1343
Design system: fix inconsistencies after design review and add etalon…
EugeniyKiyashko Jul 31, 2026
73ab2ae
Design System: use current screenshots as etalons of dxdsfluent (#34585)
pharret31 Jul 31, 2026
f94d1aa
Design System: fix tests
pharret31 Jul 31, 2026
3173a10
Design System: naming convention standart
EugeniyKiyashko Aug 5, 2026
e863464
Design system: get rid of use ds tokens of component's level
EugeniyKiyashko Aug 5, 2026
77d6518
Design system: update etalons after package bump to 262.6.0
EugeniyKiyashko Aug 6, 2026
c86aad4
Design System: Rename theme from dxdsfluent to fluent-next (#34677)
dmlvr Aug 6, 2026
63a44ce
Design System: finish the fluent-next naming migration and rename bas…
EugeniyKiyashko Aug 12, 2026
2d905e8
Fluent design tokens pipeline (#34701)
Raushen Aug 12, 2026
219fc50
Design system: change highlight color after designer review (#34744)
EugeniyKiyashko Aug 12, 2026
0753c8e
Design System: New Fluent theme (dxdsfluent) powered by design tokens…
dmlvr Aug 18, 2026
97f204f
Design System: apply the clear-styles cleanup to fluent-next
EugeniyKiyashko Aug 18, 2026
1e32162
Design System: restore scss design-token deps in the lockfile
EugeniyKiyashko Aug 18, 2026
ec4fe0b
Design System: drop the release-branch CI push triggers
EugeniyKiyashko Aug 18, 2026
463e0df
Fluent-next: delivery artifacts to distribution and support accents (…
Raushen Aug 24, 2026
71cf4c8
Fluent-next: sync the theme with the fluent fixes that landed after t…
EugeniyKiyashko Aug 25, 2026
07fad6c
Design System: move fluent-next onto design tokens 262.10.1 (#34916)
EugeniyKiyashko Aug 26, 2026
a8a362e
Fluent-next: extract css variables of components level (#34888)
EugeniyKiyashko Aug 26, 2026
1a21478
Fluent-next: reduce runtime calc() with direct token steps and tier-p…
EugeniyKiyashko Aug 27, 2026
b48aa8f
Fluent-next: unify focus rings on one role and restore their contrast…
EugeniyKiyashko Aug 27, 2026
ecad54d
Fluent-next: gate the compiled bundles against runtime calc() growth …
EugeniyKiyashko Aug 27, 2026
d8b6e83
Fluent-next: fix demo and remove unused variable (#34947)
EugeniyKiyashko Aug 27, 2026
59c1caa
Fluent next: add px markers (#34950)
EugeniyKiyashko Aug 27, 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
  •  
  •  
  •  
The diff you're trying to view is too large. We only load the first 3000 changed files.
8 changes: 8 additions & 0 deletions .github/renovate.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,14 @@
"matchPackageNames": [
"*"
]
},
{
"matchPackageNames": [
"@devexpress/design-tokens-internal"
],
"automerge": false,
"dependencyDashboardApproval": true,
"minimumReleaseAge": null
}
],
"lockFileMaintenance": {
Expand Down
11 changes: 10 additions & 1 deletion .github/workflows/testcafe_tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ jobs:
style_dependent_matrix=$(cat <<'JSON'
[
{ "componentFolder": "accessibility", "name": "accessibility - fluent.dark", "theme": "fluent.blue.dark", "concurrency": 6 },
{ "componentFolder": "accessibility", "name": "accessibility - fluent-next.dark", "theme": "fluent-next.blue.dark", "concurrency": 6 },
{ "componentFolder": "accessibility", "name": "accessibility - material.light", "theme": "material.blue.light", "concurrency": 6 },
{ "componentFolder": "accessibility", "name": "accessibility - material.dark", "theme": "material.blue.dark", "concurrency": 6 }
]
Expand All @@ -259,7 +260,15 @@ jobs:
--argjson baseEnd "$base_matrix_end" \
--argjson styleDependent "$style_dependent_matrix" \
--arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \
'{ include: ($baseStart + (if $stylesChanged == "true" then $styleDependent else [] end) + $baseEnd) }')
'{ include: (
$baseStart
+ (if $stylesChanged == "true" then $styleDependent else [] end)
+ $baseEnd
+ (($baseStart + $baseEnd) | map(
select(.theme == null)
| . + { name: (.name + " - fluent-next"), theme: "fluent-next.blue.light" }
))
) }')

echo "matrix=$matrix" >> $GITHUB_OUTPUT

Expand Down
31 changes: 26 additions & 5 deletions .github/workflows/visual-tests-demos.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,24 @@ jobs:
runs-on: ubuntu-latest
outputs:
should-run: ${{ steps.check.outputs.should-run }}
styles-changed: ${{ steps.changes.outputs.styles }}
steps:
- uses: actions/checkout@v6
- name: Check RUN_TESTS flag
id: check
run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT

- uses: dorny/paths-filter@v4
id: changes
with:
filters: |
styles:
- 'packages/devextreme-scss/scss/**'
- 'packages/devextreme-scss/icons/**'
- 'packages/devextreme-scss/images/**'
- 'packages/devextreme-scss/fonts/**'
- 'packages/devextreme/js/**/themes/**'

get-changes:
runs-on: ubuntu-latest
needs: check-should-run
Expand Down Expand Up @@ -120,25 +133,33 @@ jobs:
{ "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(1/3)" },
{ "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(2/3)" },
{ "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(3/3)" },
{ "STRATEGY": "screenshots", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery(1/3)" },
{ "STRATEGY": "screenshots", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery(2/3)" },
{ "STRATEGY": "screenshots", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery(3/3)" },
{ "STRATEGY": "accessibility", "THEME": "material.blue.light", "CONSTEL": "jquery" },
{ "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" }
{ "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" },
{ "STRATEGY": "accessibility", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery" }
]
JSON
)

dark_accessibility_matrix=$(cat <<'JSON'
[
{ "STRATEGY": "accessibility", "THEME": "material.blue.dark", "CONSTEL": "jquery" },
{ "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" }
{ "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" },
{ "STRATEGY": "accessibility", "THEME": "fluent-next.blue.dark", "CONSTEL": "jquery" }
]
JSON
)

# Dark accessibility (color-contrast) runs when framework tests are in scope
# OR when styles changed — mirroring the style_dependent_matrix gate in testcafe_tests.yml.
matrix=$(jq -c -n \
--argjson base "$base_matrix" \
--argjson darkAccessibility "$dark_accessibility_matrix" \
--arg frameworkTestsScope "${{ needs.determine-framework-tests-scope.outputs.framework-tests-scope }}" \
'{ include: ($base + (if $frameworkTestsScope != "none" then $darkAccessibility else [] end)) }')
--arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \
'{ include: ($base + (if $frameworkTestsScope != "none" or $stylesChanged == "true" then $darkAccessibility else [] end)) }')

echo "matrix=$matrix" >> $GITHUB_OUTPUT

Expand Down Expand Up @@ -860,7 +881,7 @@ jobs:
angular(9/10),
angular(10/10),
]
THEME: ['fluent.blue.light']
THEME: ['fluent.blue.light', 'fluent-next.blue.light']

runs-on: devextreme-shr2
name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
Expand Down Expand Up @@ -989,7 +1010,7 @@ jobs:
fail-fast: false
matrix:
CONSTEL: [react, vue, angular]
THEME: ['fluent.blue.light']
THEME: ['fluent.blue.light', 'fluent-next.blue.light']

runs-on: devextreme-shr2
name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
Expand Down
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-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border, 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-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border, 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-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border, 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-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border, 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-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
}

.demo-dark {
background: rgba(148, 215, 199, 0.5);
background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
}

.demo-dark.header {
background: rgba(243, 158, 108, 0.5);
background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
}

.demo-dark.footer {
background: rgba(123, 155, 207, 0.5);
background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
}

.small {
height: 50px;
border: 1px solid lightgray;
border: 1px solid var(--dxds-color-border, 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-subtle, #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-subtle, #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-subtle, #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-subtle, #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-subtle, #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
Loading
Loading