Fluent-next: move onto design tokens 262.15.0

Author: pharret31

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

@@ -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),
 });

packages/devextreme-scss/package.json

@@ -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",

packages/devextreme-scss/scss/widgets/fluent-next/badge/_colors.scss

@@ -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;

packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss

@@ -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/scss/widgets/fluent-next/checkBox/_colors.scss

@@ -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/scss/widgets/fluent-next/scrollable/_colors.scss

@@ -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;

packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss

@@ -7,8 +7,8 @@ $slider-accent-bg-hovered: ds.$color-bg-primary-hovered !default;
 $slider-accent-content-focused: ds.$color-bg-primary-active !default;
 
 $slider-invalid-bg: ds.$color-border-danger !default;
-$slider-invalid-bg-hovered: ds.$color-border-danger-hovered !default;
-$slider-invalid-content-focused: ds.$color-border-danger-hovered !default;
+$slider-invalid-bg-hovered: ds.$color-border-danger !default;
+$slider-invalid-content-focused: ds.$color-border-danger !default;
 
 $slider-bg-disabled: ds.$color-content-disabled !default;
 $slider-bar-bg-disabled: ds.$color-bg-disabled !default;

packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss

@@ -4,23 +4,27 @@ $switch-on-border: ds.$color-bg-primary-shared !default;
 $switch-on-border-hovered: ds.$color-bg-primary-shared-hovered !default;
 $switch-on-border-focused: ds.$color-bg-primary-active !default;
 
-$switch-bg: ds.$color-bg-none !default;
+$switch-bg: ds.$color-none !default;
 
 $switch-handle-off-bg: ds.$color-content-subtle !default;
 
 $switch-on-bg: ds.$color-bg-primary-shared !default;
 
 $switch-handle-on-bg: ds.$color-content-inverted !default;
 $switch-on-bg-disabled: ds.$color-bg-disabled !default;
-$switch-handle-bg-disabled: ds.$color-content-subtle-disabled !default;
-$switch-border-disabled: ds.$color-border-contrast-disabled !default;
+
+/* The handle and the border of a disabled switch were painted by two different tokens that held
+the same colour; 262.15.0 dropped both, and this is the nearest role left — identical in dark,
+one step lighter in light. Keeping one token for both preserves the equality. */
+$switch-handle-bg-disabled: ds.$color-border-disabled !default;
+$switch-border-disabled: ds.$color-border-disabled !default;
 $switch-off-border: ds.$color-border-contrast !default;
 $switch-off-border-hovered: ds.$color-border-contrast-hovered !default;
 $switch-off-border-active: ds.$color-border-contrast-active !default;
 
 $switch-invalid-border: ds.$color-border-danger !default;
-$switch-invalid-border-hovered: ds.$color-border-danger-hovered !default;
-$switch-invalid-border-focused: ds.$color-border-danger-hovered !default;
+$switch-invalid-border-hovered: ds.$color-border-danger !default;
+$switch-invalid-border-focused: ds.$color-border-danger !default;
 
 // Subtle ring around the ON handle; no switch shadow role — relative-color bridge over the handle token (see DIVERGENCES.md)
 $switch-handle-on-shadow: rgb(from #{ds.$color-content-inverted} r g b / 0.1) !default;

packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_colors.scss

@@ -11,6 +11,6 @@ $tag-box-tag-remove-button-content: ds.$color-content-subtle !default;
 $tag-box-tag-border-focused: ds.$color-border-primary !default;
 $tag-box-select-all-line: ds.$color-border !default;
 $tag-box-tag-content-disabled: ds.$color-content-disabled !default;
-$tag-box-tag-bg-disabled: ds.$color-bg-canvas-disabled !default;
+$tag-box-tag-bg-disabled: ds.$color-bg-disabled !default;
 
 $tag-box-border-disabled: ds.$color-border-disabled !default;

packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss

@@ -15,13 +15,13 @@ $text-editor-border-hovered: ds.$color-border-hovered !default;
 $text-editor-border-focused: ds.$color-border-active !default;
 
 $text-editor-line: ds.$color-content-subtle !default;
-$text-editor-line-hovered: ds.$color-content-subtle-hovered !default;
-$text-editor-line-focused: ds.$color-content-subtle-hovered !default;
+$text-editor-line-hovered: ds.$color-content !default;
+$text-editor-line-focused: ds.$color-content !default;
 
 $text-editor-indicator: ds.$color-content-primary !default;
 
 $text-editor-clear-button-icon: ds.$color-content-subtle !default;
-$text-editor-invalid-border-focused: ds.$color-border-danger-hovered !default;
+$text-editor-invalid-border-focused: ds.$color-border-danger !default;
 $text-editor-invalid-border: ds.$color-border-danger-shared !default;
 $text-editor-border-disabled: ds.$color-border-disabled !default;
 $text-editor-content-disabled: ds.$color-content-disabled !default;