Fluent-next: move onto design tokens 262.15.0

Author: pharret31

apps/demos/testing/widgets/stepper/etalons/Form Integration-First step form filled (fluent-next.blue.light).png

@@ -122,6 +122,51 @@ StyleDictionary.registerPreprocessor({
   },
 });
 
+/*
+ * WORKAROUND for a bug in @devexpress/design-tokens-internal, present since 262.13.0: that release
+ * dropped `color.shadow-none` from semantic/colors/*, but semantic/box-shadow/{fluent,material}.json
+ * still reference it from every layer of `box-shadow.none`, so Style Dictionary fails the whole build
+ * on three unresolvable references. The value the token carried up to 262.12.0 is substituted here,
+ * which keeps the output identical to that release: `box-shadow.none` is all-zero geometry in a fully
+ * transparent colour.
+ *
+ * Remove this once the package defines the token again or stops referencing it. The other two
+ * preprocessors above patch the same class of export defect.
+ */
+const REMOVED_REFERENCES = new Map([
+  ['color.shadow-none', 'rgba(0,0,0,0)'],
+]);
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/substitute-removed-references',
+  preprocessor: (tokens) => {
+    const visit = (node) => {
+      if (typeof node !== 'object' || node === null) {
+        return;
+      }
+
+      Object.entries(node).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+          REMOVED_REFERENCES.forEach((replacement, refPath) => {
+            if (value.includes(`{${refPath}}`) && !hasTokenAtPath(tokens, refPath)) {
+              console.warn(`[design-tokens] Substituting removed reference {${refPath}} -> ${replacement}`);
+              node[key] = value.replaceAll(`{${refPath}}`, replacement);
+            }
+          });
+
+          return;
+        }
+
+        visit(value);
+      });
+    };
+
+    visit(tokens);
+
+    return tokens;
+  },
+});
+
 const dirname = import.meta.dirname || path.dirname(url.fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 const tokensDir = path.dirname(require.resolve('@devexpress/design-tokens-internal/package.json'));
@@ -230,7 +275,12 @@ const createConfig = (name, files, platformFiles) => ({
   theme: THEME_NAME,
   name,
   source: files.map((src) => path.resolve(tokensDir, `tokens/${src}.json`)),
-  preprocessors: ['dx/fix-dangling-size-references', 'dx/fix-composite-shadow-references', 'tokens-studio'],
+  preprocessors: [
+    'dx/fix-dangling-size-references',
+    'dx/fix-composite-shadow-references',
+    'dx/substitute-removed-references',
+    'tokens-studio',
+  ],
   expand: customExpand,
   platforms: getPlatformSettings(platformFiles),
 });

e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/Invalid-message-word-wrapping (fluent-next.blue.light).png

@@ -4,7 +4,7 @@
   "author": "Developer Express Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
   "devDependencies": {
-    "@devexpress/design-tokens-internal": "262.10.1",
+    "@devexpress/design-tokens-internal": "262.15.0",
     "@stylistic/stylelint-plugin": "3.1.3",
     "autoprefixer": "10.5.0",
     "clean-css": "5.3.3",

e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox after opening (fluent-next.blue.light).png

@@ -4,5 +4,5 @@ $badge-content: ds.$color-content-static-dark !default;
 
 $badge-bg: ds.$color-bg-primary !default;
 
-$badge-content-disabled: ds.$color-content-subtle-disabled !default;
-$badge-bg-disabled: ds.$color-bg-canvas-disabled !default;
+$badge-content-disabled: ds.$color-content-disabled !default;
+$badge-bg-disabled: ds.$color-bg-disabled !default;

e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-next.blue.light).png

@@ -12,6 +12,6 @@ $calendar-cell-bg-selected: ds.$color-bg-primary !default;
 $calendar-cell-content-selected: ds.$color-content-static-dark !default;
 $calendar-cell-bg-active: ds.$color-bg-primary-subtler-active !default;
 $calendar-invalid-border: ds.$color-border-danger !default;
-$calendar-invalid-border-focused: ds.$color-border-danger-hovered !default;
+$calendar-invalid-border-focused: ds.$color-border-danger !default;
 $calendar-week-number-cell-content: ds.$color-content-subtle !default;
 $calendar-week-number-cell-bg: ds.$color-bg-canvas !default;

packages/devextreme-scss/build/tokens/build-tokens.mjs

@@ -22,5 +22,5 @@ $check-box-invalid-mark-bg: ds.$color-content-danger-shared !default;
 $check-box-invalid-mark-bg-hovered: ds.$color-content-danger-shared-hovered !default;
 $check-box-invalid-mark-bg-focused: ds.$color-content-danger-shared-active !default;
 
-$check-box-border-disabled: ds.$color-border-contrast-disabled !default;
+$check-box-border-disabled: ds.$color-border-disabled !default;
 $check-box-icon-bg-disabled: ds.$color-content-disabled !default;

packages/devextreme-scss/package.json

@@ -3,4 +3,4 @@
 $scrollable-bg: ds.$color-bg !default;
 
 $scrollable-scroll-bg: ds.$color-content-subtle !default;
-$scrollable-scrollbar-bg: ds.$color-bg-none !default;
+$scrollable-scrollbar-bg: ds.$color-none !default;