Skip to content

Fluent-next: ship both colour modes in every bundle, selectable by class #35011

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

Open
EugeniyKiyashko wants to merge 39 commits into
base: feature/26_2_new_fluent_theme_with_design_tokens
Choose a base branch
from
+37,249 −2,735
Open

Fluent-next: ship both colour modes in every bundle, selectable by class #35011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
f0ce6e2
Design System: New Fluent theme (dxdsfluent) powered by design tokens
EugeniyKiyashko Jul 27, 2026
7b8e94c
Design system: fix inconsistencies after design review and add etalon…
EugeniyKiyashko Jul 31, 2026
1168848
Design System: use current screenshots as etalons of dxdsfluent (#34585)
pharret31 Jul 31, 2026
b6e10c0
Design System: fix tests
pharret31 Jul 31, 2026
dbc424d
Design System: naming convention standart
EugeniyKiyashko Aug 5, 2026
83f6876
Design system: get rid of use ds tokens of component's level
EugeniyKiyashko Aug 5, 2026
2d9cdff
Design system: update etalons after package bump to 262.6.0
EugeniyKiyashko Aug 6, 2026
7324fee
Design System: Rename theme from dxdsfluent to fluent-next (#34677)
dmlvr Aug 6, 2026
59eb031
Design System: finish the fluent-next naming migration and rename bas…
EugeniyKiyashko Aug 12, 2026
bd810c2
Fluent design tokens pipeline (#34701)
Raushen Aug 12, 2026
7ce788b
Design system: change highlight color after designer review (#34744)
EugeniyKiyashko Aug 12, 2026
5540c71
Design System: New Fluent theme (dxdsfluent) powered by design tokens…
dmlvr Aug 18, 2026
8821fcb
Design System: apply the clear-styles cleanup to fluent-next
EugeniyKiyashko Aug 18, 2026
9b1029b
Design System: restore scss design-token deps in the lockfile
EugeniyKiyashko Aug 18, 2026
f8c7a58
Design System: drop the release-branch CI push triggers
EugeniyKiyashko Aug 18, 2026
3143bde
Fluent-next: delivery artifacts to distribution and support accents (…
Raushen Aug 24, 2026
20aca52
Fluent-next: sync the theme with the fluent fixes that landed after t…
EugeniyKiyashko Aug 25, 2026
8c6f8fd
Design System: move fluent-next onto design tokens 262.10.1 (#34916)
EugeniyKiyashko Aug 26, 2026
f94f228
Fluent-next: extract css variables of components level (#34888)
EugeniyKiyashko Aug 26, 2026
9eea484
Fluent-next: reduce runtime calc() with direct token steps and tier-p…
EugeniyKiyashko Aug 27, 2026
ad67ad1
Fluent-next: unify focus rings on one role and restore their contrast…
EugeniyKiyashko Aug 27, 2026
2663e96
Fluent-next: gate the compiled bundles against runtime calc() growth …
EugeniyKiyashko Aug 27, 2026
ed5a2a7
Fluent-next: fix demo and remove unused variable (#34947)
EugeniyKiyashko Aug 27, 2026
2220605
Fluent next: add px markers (#34950)
EugeniyKiyashko Aug 27, 2026
0477125
Fluent-next: symplify aliases (#34976)
EugeniyKiyashko Aug 28, 2026
5345b3d
Fluent-next: extend the component tier to every component that owns v…
EugeniyKiyashko Aug 31, 2026
088be6b
Fluent-next: publish the type scale into the system tier (#34983)
EugeniyKiyashko Aug 31, 2026
b463289
Fluent-next: move onto design tokens 262.15.0
pharret31 Aug 31, 2026
fc3a46e
Fluent-next: change colors in Viz palettes (#34981)
Raushen Sep 1, 2026
4b75f5c
Update demo with new palette (#34984)
Raushen Sep 1, 2026
c003516
Point the Scheduler demo at a colour role that still exists
EugeniyKiyashko Sep 1, 2026
c135ac1
Ship both colour modes in every fluent-next bundle, selectable by class
EugeniyKiyashko Sep 2, 2026
74d13a6
Let the system tier follow the theme mode class, and the diagram icon…
EugeniyKiyashko Sep 2, 2026
210a52b
Drop two colour-scheme branches that picked the same image either way
EugeniyKiyashko Sep 2, 2026
a0eec27
Follow the mode class wherever a value depends on the mode
EugeniyKiyashko Sep 2, 2026
ef96b29
Gate the mode invariant against the built bundles
EugeniyKiyashko Sep 2, 2026
286ce26
Give the overlay container the mode its owner resolved to
EugeniyKiyashko Sep 2, 2026
dbc3caf
Make "inverted" mean the nearest enclosing mode
EugeniyKiyashko Sep 3, 2026
31f03a8
Scope only what the mode actually decides
EugeniyKiyashko Sep 3, 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-slim
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: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || '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: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || '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