Fluent-next: delivery artifacts to distribution and support accents by Raushen · Pull Request #34767 · DevExpress/DevExtreme

Raushen · 2026-08-13T20:14:24Z

No description provided.

EugeniyKiyashko · 2026-08-17T11:53:28Z

+        "outputDir": "./artifacts/npm/devextreme/scss",
+        "exclude": [
+          "widgets/fluent-next/**",
+          "_design-system/**",


[HIGH] This exclude keeps the token-derived sources out of devextreme/devextreme-internal, but the same sources still ship through a second channel: themebuilder's generate-metadata walks the whole devextreme-scss/scss tree into src/data/scss, and its only filter is filePath.includes('fluent-next') - _design-system/** doesn't match it.

all:build: devextreme-themebuilder-26.2.0.tgz contains 19 data/scss/_design-system/** files (all 11 palettes, semantic tiers, and variables

The fluent-next bundles are only saved by the name-substring accident, so the collector filter needs extending - ideally sharing one exclude list with this target. Related hygiene: saveScssFiles never cleans the destination, so stale files from earlier checkouts ship too when packing from a dev machine (my local tgz also had 8 leftover widgets/dxdsfluent/ files from before the rename)**

EugeniyKiyashko · 2026-08-17T11:59:16Z

@@ -0,0 +1,25 @@
+/* Set --dx-accent-color to a brand color; load after the theme stylesheet. */
+:root {


[High] [This should be answered first] What task does custom.css close? Is arbitrary brand accent officially in 26.2 scope, or should we ship only the 11 designed palettes for now and keep custom.css for a follow-up?

Now it's unclear why this file is added in DevExtreme-dist.

JFYI: oklch(from var(...)) requires CSS relative color syntax (Chrome/Edge 119+, Safari 16.4+, Firefox 128+). On a browser without RCS this file doesn't fall back to blue - it makes things worse: the :root block overrides the bundle's valid hex values with declarations that are invalid at computed-value time, so every var(--dxds-primary-*) consumer becomes guaranteed-invalid and loses its value entirely (broken fills instead of the default accent). Wrapping the block in @supports (color: oklch(from red l c h)) { ... } keeps non-supporting browsers on the bundle's designed blue. A docs note on minimum browser versions is needed either way.

Rolled back custom accent feature, will discuss later in a separate scope.

EugeniyKiyashko · 2026-08-17T11:59:29Z

+/* Set --dx-accent-color to a brand color; load after the theme stylesheet. */
+:root {
+  --dx-accent-color-source: var(--dx-accent-color, #0f6cbd);
+  --dx-accent-lightness-max: 0.95;


JFYI: With the default blue source, the derived light steps diverge visibly from the designed palette: step 10 comes out at L 0.950 / C 0.040 in OKLCh vs designed #F4F8FC ≈ L 0.977 / C 0.007; step 20 at 0.903/0.052 vs 0.949/0.016 - so the subtle tint surfaces (surface-primary-subdued-*: hover/selected fills) get noticeably darker and ~5× more chromatic than designed. The dark half fits well (ΔL ≤ 0.02). Defaults around --dx-accent-lightness-max: 0.975 and --dx-accent-chroma-min: 0.01 would fit the designed light end much closer. Also, the "Fix comments" commit dropped the header that explained the derivation and its approximation quality (the 0.06 dE note) - now neither the scale rules nor the knobs' meaning are documented anywhere; please restore at least a short version.

Rolled back custom accent feature, will discuss later in a separate scope.

EugeniyKiyashko · 2026-08-17T12:00:05Z

@@ -0,0 +1,25 @@
+/* Set --dx-accent-color to a brand color; load after the theme stylesheet. */
+:root {
+  --dx-accent-color-source: var(--dx-accent-color, #0f6cbd);


JFYI: --dx-accent-color (+ the three tuning knobs) becomes the public API of this feature, but the --dx-* namespace is the evolving component-level tier (declared on component roots), while stable design-system properties live under --dxds-. Is the short name intentional? If yes, let's document it as a deliberate exception; otherwise --dxds-accent- would keep the tier split clean.

Rolled back custom accent feature, will discuss later in a separate scope.

EugeniyKiyashko · 2026-08-17T12:00:57Z

+const GENERATED_ACCENT_PALETTES_DIR = './scss/_design-system/fluent/accents';
+const AUTHORED_ACCENT_STYLES_DIR = './scss/widgets/fluent-next/accents';
+const ACCENT_OUTPUT_DIR_NAME = 'accents';
+const GENERATOR_BANNER_REGEX = /^\s*\/\*[\s\S]*?auto-generated[\s\S]*?\*\/\s*/;


^\s*/*[\s\S]?auto-generated[\s\S]?*/ - the lazy [\s\S]? can cross the end of the first comment: if a file starts with a small unrelated comment and the literal "auto-generated" appears anywhere later in the CSS, everything up to that point gets stripped. Safe for today's inputs, but a footgun. Safer: match only the first comment (/^\s/*[^*](?:*(?!/)[^*])**//) and strip it only if it contains "auto-generated".

EugeniyKiyashko · 2026-08-17T12:01:31Z

+  --dx-accent-lightness-max: 0.95;
+  --dx-accent-lightness-min: 0.15;
+  --dx-accent-chroma-min: 0.04;
+  --dxds-primary-10: oklch(from var(--dx-accent-color-source) calc(l + 9 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 9 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);


JFYI: Watch mode only watches scss/**/.scss, while compileAccentOverrides also compiles widgets/fluent-next/accents/.css - edits to custom.css under watch never trigger a rebuild. Worth widening the pattern to **/*.{scss,css}.

Rolled back custom accent feature, will discuss later in a separate scope.

EugeniyKiyashko · 2026-08-17T12:02:05Z

+      "dependsOn": [
+        {
+          "projects": ["devextreme-scss"],
+          "target": "build:tokens"


The dependency generates _design-system, which this very target then excludes from the copy - I assume it's for input-hash determinism? A short comment would help. Meanwhile scss/bundles/*.scss, which IS shipped (.npmignore un-ignores it), isn't guaranteed by any dependency: a standalone nx run devextreme:build:npm:scss on a fresh clone silently packs without bundles. Pre-existing, but since we're adding dependencies here - worth considering.

Replaced for "target": "build:themes" - now the target build:npm:scss creates bundles.

EugeniyKiyashko · 2026-08-17T12:03:14Z

+  const accentSources = [...palettes, ...(await globAccentSources(authoredDir, '*.css'))];
+  const accentOutputDir = path.join(cssOutputDir, ACCENT_OUTPUT_DIR_NAME);
+
+  for (const source of accentSources) {


Accents deliberately skip postcss/clean-css (minifiers are shaky with relative color syntax) - but nothing in the code says so; a one-line comment would stop someone from "unifying" this later. Separately: each generated palette CSS re-declares all 136 tokens while only the 18 primary steps actually differ across accents - filtering the palette output to primary in createPaletteConfig would shrink each file ~5×. Optional.

We should not apply filtering as source palettes contains all types of tokens. With optimization if the source will change danger-tokens we won't know about it. Palettes should be shrinked on the design-tokens-internal level.
Minification does not work for better readability.

EugeniyKiyashko · 2026-08-17T12:05:40Z

        "scssPackagePath": "../devextreme-scss",
-        "outputDir": "./artifacts/npm/devextreme/scss"
+        "outputDir": "./artifacts/npm/devextreme/scss",
+        "exclude": [


configurations.internal inherits the same exclude, so devextreme-internal also ships without the fluent-next sources. Intended? If internal consumers should keep them, the internal configuration needs exclude: []; if not, fine - just confirming it's a decision, not an accident.

After refactoring we do not use exclude anymore. The source of truth in the file internal-scss-paths.json now.

Raushen requested a review from a team August 13, 2026 20:14

Raushen self-assigned this Aug 13, 2026

Raushen added the 26_2 label Aug 13, 2026

EugeniyKiyashko requested changes Aug 17, 2026

View reviewed changes

EugeniyKiyashko force-pushed the feature/26_2_new_fluent_theme_with_design_tokens branch from e0bd634 to 98e91bc Compare August 18, 2026 12:04

EugeniyKiyashko requested review from a team as code owners August 18, 2026 12:04

Raushen force-pushed the feature/dt_distribution branch from bccd82d to 98d57c1 Compare August 19, 2026 11:51

Raushen added 3 commits August 19, 2026 14:57

Fluent-next: ship accents as CSS, keep the sources out of the package

7af5418

Keep internal sources out of ThemeBuilder, share one exclude list

c3b837f

Wait for the bundles the scss package ships

ff80919

Raushen force-pushed the feature/dt_distribution branch from 98d57c1 to ff80919 Compare August 19, 2026 12:04

Raushen added 2 commits August 19, 2026 15:22

Strip the leading comment only when it is the generator banner

0b1b9cb

Assemble the scss package into a clean destination

6f5873c

		@@ -0,0 +1,25 @@
		/* Set --dx-accent-color to a brand color; load after the theme stylesheet. */
		:root {

Uh oh!

Conversation

Raushen commented Aug 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Raushen Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Raushen Aug 17, 2026 •

edited

Loading