Skip to content

Fluent-next: extract css variables of components level #34888

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 17 commits into
base: feature/26_2_new_fluent_theme_with_design_tokens
Choose a base branch
from
Open

Fluent-next: extract css variables of components level #34888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8f1c469
Design System: New Fluent theme (dxdsfluent) powered by design tokens
EugeniyKiyashko Jul 27, 2026
9932cf0
Design system: fix inconsistencies after design review and add etalon…
EugeniyKiyashko Jul 31, 2026
33541b8
Design System: use current screenshots as etalons of dxdsfluent (#34585)
pharret31 Jul 31, 2026
3e870fa
Design System: fix tests
pharret31 Jul 31, 2026
dbb6909
Design System: naming convention standart
EugeniyKiyashko Aug 5, 2026
dec5bfa
Design system: get rid of use ds tokens of component's level
EugeniyKiyashko Aug 5, 2026
eef2228
Design system: update etalons after package bump to 262.6.0
EugeniyKiyashko Aug 6, 2026
f2a28ce
Design System: Rename theme from dxdsfluent to fluent-next (#34677)
dmlvr Aug 6, 2026
ce81748
Design System: finish the fluent-next naming migration and rename bas…
EugeniyKiyashko Aug 12, 2026
a799901
Fluent design tokens pipeline (#34701)
Raushen Aug 12, 2026
d16e650
Design system: change highlight color after designer review (#34744)
EugeniyKiyashko Aug 12, 2026
2b85f14
Design System: New Fluent theme (dxdsfluent) powered by design tokens…
dmlvr Aug 18, 2026
f13b27b
Design System: apply the clear-styles cleanup to fluent-next
EugeniyKiyashko Aug 18, 2026
98e91bc
Design System: restore scss design-token deps in the lockfile
EugeniyKiyashko Aug 18, 2026
32f5610
Design System: drop the release-branch CI push triggers
EugeniyKiyashko Aug 18, 2026
3e93edd
Fluent-next: delivery artifacts to distribution and support accents (…
Raushen Aug 24, 2026
eea20b8
Fluent-next: extract css variables of components level
EugeniyKiyashko Aug 14, 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-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
Loading
Loading