Add appearance-aware Flex theme sources

.changeset/fuzzy-themes-bridge.md

@@ -0,0 +1,10 @@
+---
+"@fluentui-react-native/design": minor
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/default-theme": patch
+"@fluentui-react-native/android-theme": patch
+"@fluentui-react-native/apple-theme": patch
+"@fluentui-react-native/win32-theme": patch
+---
+
+Add appearance-aware Flex theme sources with stable token identity and lazy compatibility bridges for legacy themes.

apps/bundle-size/baseline.json

@@ -15,88 +15,90 @@
     {
       "platform": "macos",
       "scenario": "components-button",
-      "rawBytes": 868023,
-      "gzipBytes": 248334,
-      "moduleCount": 550,
-      "metroModuleCount": 546,
-      "metafileInputCount": 753,
+      "rawBytes": 871797,
+      "gzipBytes": 249494,
+      "moduleCount": 554,
+      "metroModuleCount": 550,
+      "metafileInputCount": 758,
       "workspaceModules": {
         "@fluentui-react-native/components": 10,
-        "@fluentui-react-native/design": 17,
+        "@fluentui-react-native/design": 21,
         "@fluentui-react-native/framework-base": 26
       },
       "workspaceBytes": {
-        "@fluentui-react-native/components": 9480,
-        "@fluentui-react-native/design": 26458,
+        "@fluentui-react-native/components": 9482,
+        "@fluentui-react-native/design": 30207,
         "@fluentui-react-native/framework-base": 11146
       }
     },
     {
       "platform": "macos",
       "scenario": "components-catalog",
-      "rawBytes": 1090635,
-      "gzipBytes": 301676,
-      "moduleCount": 750,
-      "metroModuleCount": 745,
-      "metafileInputCount": 753,
+      "rawBytes": 1094254,
+      "gzipBytes": 302948,
+      "moduleCount": 754,
+      "metroModuleCount": 749,
+      "metafileInputCount": 758,
       "workspaceModules": {
         "@fluentui-react-native/components": 98,
-        "@fluentui-react-native/design": 17,
+        "@fluentui-react-native/design": 21,
         "@fluentui-react-native/framework-base": 26
       },
       "workspaceBytes": {
-        "@fluentui-react-native/components": 122538,
-        "@fluentui-react-native/design": 26642,
+        "@fluentui-react-native/components": 122383,
+        "@fluentui-react-native/design": 30391,
         "@fluentui-react-native/framework-base": 12813
       }
     },
     {
-      "platform": "win32",
-      "scenario": "shell",
-      "rawBytes": 825849,
-      "gzipBytes": 236958,
-      "moduleCount": 497,
-      "metroModuleCount": 495,
-      "metafileInputCount": 497,
-      "workspaceModules": {},
-      "workspaceBytes": {}
+      "platform": "macos",
+      "scenario": "design-theme-state",
+      "rawBytes": 854603,
+      "gzipBytes": 243954,
+      "moduleCount": 541,
+      "metroModuleCount": 535,
+      "metafileInputCount": 542,
+      "workspaceModules": {
+        "@fluentui-react-native/design": 18,
+        "@fluentui-react-native/framework-base": 26
+      },
+      "workspaceBytes": {
+        "@fluentui-react-native/design": 30289,
+        "@fluentui-react-native/framework-base": 3413
+      }
     },
     {
-      "platform": "win32",
-      "scenario": "components-button",
-      "rawBytes": 873381,
-      "gzipBytes": 248809,
-      "moduleCount": 551,
-      "metroModuleCount": 547,
-      "metafileInputCount": 754,
+      "platform": "macos",
+      "scenario": "design-theme-state-legacy-source",
+      "rawBytes": 856701,
+      "gzipBytes": 244382,
+      "moduleCount": 543,
+      "metroModuleCount": 537,
+      "metafileInputCount": 545,
       "workspaceModules": {
-        "@fluentui-react-native/components": 10,
-        "@fluentui-react-native/design": 18,
+        "@fluentui-react-native/design": 20,
         "@fluentui-react-native/framework-base": 26
       },
       "workspaceBytes": {
-        "@fluentui-react-native/components": 9482,
-        "@fluentui-react-native/design": 26495,
-        "@fluentui-react-native/framework-base": 11146
+        "@fluentui-react-native/design": 32361,
+        "@fluentui-react-native/framework-base": 3413
       }
     },
     {
-      "platform": "win32",
-      "scenario": "components-catalog",
-      "rawBytes": 1096000,
-      "gzipBytes": 302161,
-      "moduleCount": 751,
-      "metroModuleCount": 746,
-      "metafileInputCount": 754,
+      "platform": "macos",
+      "scenario": "design-legacy-theme-from-flex",
+      "rawBytes": 923158,
+      "gzipBytes": 257703,
+      "moduleCount": 563,
+      "metroModuleCount": 558,
+      "metafileInputCount": 566,
       "workspaceModules": {
-        "@fluentui-react-native/components": 98,
-        "@fluentui-react-native/design": 18,
+        "@fluentui-react-native/design": 32,
         "@fluentui-react-native/framework-base": 26
       },
       "workspaceBytes": {
-        "@fluentui-react-native/components": 122554,
-        "@fluentui-react-native/design": 26679,
-        "@fluentui-react-native/framework-base": 12813
+        "@fluentui-react-native/design": 61746,
+        "@fluentui-react-native/framework-base": 4291
       }
     },
     {
@@ -113,40 +115,91 @@
     {
       "platform": "windows",
       "scenario": "components-button",
-      "rawBytes": 877232,
-      "gzipBytes": 249752,
-      "moduleCount": 556,
-      "metroModuleCount": 552,
-      "metafileInputCount": 759,
+      "rawBytes": 880864,
+      "gzipBytes": 250891,
+      "moduleCount": 560,
+      "metroModuleCount": 556,
+      "metafileInputCount": 764,
       "workspaceModules": {
         "@fluentui-react-native/components": 10,
-        "@fluentui-react-native/design": 18,
+        "@fluentui-react-native/design": 22,
         "@fluentui-react-native/framework-base": 26
       },
       "workspaceBytes": {
-        "@fluentui-react-native/components": 9478,
-        "@fluentui-react-native/design": 26530,
+        "@fluentui-react-native/components": 9480,
+        "@fluentui-react-native/design": 30142,
         "@fluentui-react-native/framework-base": 11146
       }
     },
     {
       "platform": "windows",
       "scenario": "components-catalog",
-      "rawBytes": 1099607,
-      "gzipBytes": 303049,
-      "moduleCount": 756,
-      "metroModuleCount": 751,
-      "metafileInputCount": 759,
+      "rawBytes": 1103086,
+      "gzipBytes": 304267,
+      "moduleCount": 760,
+      "metroModuleCount": 755,
+      "metafileInputCount": 764,
       "workspaceModules": {
         "@fluentui-react-native/components": 98,
-        "@fluentui-react-native/design": 18,
+        "@fluentui-react-native/design": 22,
         "@fluentui-react-native/framework-base": 26
       },
       "workspaceBytes": {
-        "@fluentui-react-native/components": 122501,
-        "@fluentui-react-native/design": 26714,
+        "@fluentui-react-native/components": 122346,
+        "@fluentui-react-native/design": 30326,
         "@fluentui-react-native/framework-base": 12813
       }
+    },
+    {
+      "platform": "windows",
+      "scenario": "design-theme-state",
+      "rawBytes": 863667,
+      "gzipBytes": 245363,
+      "moduleCount": 547,
+      "metroModuleCount": 541,
+      "metafileInputCount": 548,
+      "workspaceModules": {
+        "@fluentui-react-native/design": 19,
+        "@fluentui-react-native/framework-base": 26
+      },
+      "workspaceBytes": {
+        "@fluentui-react-native/design": 30222,
+        "@fluentui-react-native/framework-base": 3413
+      }
+    },
+    {
+      "platform": "windows",
+      "scenario": "design-theme-state-legacy-source",
+      "rawBytes": 865767,
+      "gzipBytes": 245825,
+      "moduleCount": 549,
+      "metroModuleCount": 543,
+      "metafileInputCount": 551,
+      "workspaceModules": {
+        "@fluentui-react-native/design": 21,
+        "@fluentui-react-native/framework-base": 26
+      },
+      "workspaceBytes": {
+        "@fluentui-react-native/design": 32294,
+        "@fluentui-react-native/framework-base": 3413
+      }
+    },
+    {
+      "platform": "windows",
+      "scenario": "design-legacy-theme-from-flex",
+      "rawBytes": 932037,
+      "gzipBytes": 259016,
+      "moduleCount": 569,
+      "metroModuleCount": 564,
+      "metafileInputCount": 572,
+      "workspaceModules": {
+        "@fluentui-react-native/design": 33,
+        "@fluentui-react-native/framework-base": 26
+      },
+      "workspaceBytes": {
+        "@fluentui-react-native/design": 61490,
+        "@fluentui-react-native/framework-base": 4291
+      }
     }
   ]
 }

apps/bundle-size/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@fluentui-react-native/components": "workspace:*",
+    "@fluentui-react-native/design": "workspace:*",
     "@office-iss/react-native-win32": "^0.81.0",
     "@types/react": "~19.1.4",
     "react": "19.1.4",

apps/bundle-size/scenarios.json

@@ -1,5 +1,5 @@
 {
-  "platforms": ["macos", "win32", "windows"],
+  "platforms": ["macos", "windows"],
   "scenarios": [
     {
       "name": "shell"
@@ -13,6 +13,32 @@
       "name": "components-catalog",
       "module": "@fluentui-react-native/components",
       "namespace": true
+    },
+    {
+      "name": "design-theme-state",
+      "module": "@fluentui-react-native/design",
+      "exports": ["FlexThemeReference", "ThemeProvider", "useThemeState"],
+      "forbiddenInputPatterns": ["/theming/compat/", "/tokens/legacy/"]
+    },
+    {
+      "name": "design-theme-state-legacy-source",
+      "imports": [
+        {
+          "module": "@fluentui-react-native/design",
+          "exports": ["ThemeProvider", "useThemeState"]
+        },
+        {
+          "module": "@fluentui-react-native/design/theming/legacy-source",
+          "exports": ["ThemeReference"]
+        }
+      ],
+      "forbiddenInputPatterns": ["/theming/compat/", "/tokens/legacy/"]
+    },
+    {
+      "name": "design-legacy-theme-from-flex",
+      "module": "@fluentui-react-native/design/theming",
+      "exports": ["FlexThemeReference", "ThemeProvider", "useTheme"],
+      "requiredInputPatterns": ["/theming/compat/themeFromFlexTokens.", "/tokens/legacy/"]
     }
   ]
 }

apps/bundle-size/scripts/measure.mjs

@@ -41,18 +41,25 @@ function parseArgs(args) {
 
 function createEntry(scenario) {
   const lines = [];
-
-  if (scenario.module) {
-    if (scenario.namespace) {
-      lines.push(`import * as bundleSizeTarget from ${JSON.stringify(scenario.module)};`);
-      lines.push('globalThis.__bundleSizeTarget = bundleSizeTarget;');
-    } else if (scenario.exports?.length) {
-      lines.push(`import { ${scenario.exports.join(', ')} } from ${JSON.stringify(scenario.module)};`);
-      lines.push(`globalThis.__bundleSizeTarget = [${scenario.exports.join(', ')}];`);
+  const targets = [];
+
+  const imports = scenario.imports ?? (scenario.module ? [scenario] : []);
+  for (const [index, moduleImport] of imports.entries()) {
+    if (moduleImport.namespace) {
+      const target = `bundleSizeTarget${index}`;
+      lines.push(`import * as ${target} from ${JSON.stringify(moduleImport.module)};`);
+      targets.push(target);
+    } else if (moduleImport.exports?.length) {
+      const specifiers = moduleImport.exports.map((name) => `${name} as bundleSizeTarget${index}_${name}`);
+      lines.push(`import { ${specifiers.join(', ')} } from ${JSON.stringify(moduleImport.module)};`);
+      targets.push(...moduleImport.exports.map((name) => `bundleSizeTarget${index}_${name}`));
     } else {
-      throw new Error(`Scenario "${scenario.name}" must set "namespace" or "exports"`);
+      throw new Error(`Scenario "${scenario.name}" imports must set "namespace" or "exports"`);
     }
   }
+  if (targets.length) {
+    lines.push(`globalThis.__bundleSizeTarget = [${targets.join(', ')}];`);
+  }
 
   const bootstrapPath = relative(entryRoot, join(workspaceRoot, 'src', 'bootstrap.js')).replaceAll('\\', '/');
   lines.push(`import ${JSON.stringify(bootstrapPath.startsWith('.') ? bootstrapPath : `./${bootstrapPath}`)};`, '');
@@ -158,6 +165,18 @@ function runBundle(platform, scenario, resetCache) {
   const bundle = readFileSync(bundlePath);
   const sourceMap = readJSONFileSync(sourceMapPath);
   const metafile = readJSONFileSync(metafilePath);
+  const inputPaths = Object.keys(metafile.inputs).map((source) => source.replaceAll('\\', '/'));
+  for (const pattern of scenario.forbiddenInputPatterns ?? []) {
+    const match = inputPaths.find((source) => source.includes(pattern));
+    if (match) {
+      throw new Error(`Scenario "${scenario.name}" unexpectedly includes "${match}" (forbidden by "${pattern}")`);
+    }
+  }
+  for (const pattern of scenario.requiredInputPatterns ?? []) {
+    if (!inputPaths.some((source) => source.includes(pattern))) {
+      throw new Error(`Scenario "${scenario.name}" does not include a module matching required pattern "${pattern}"`);
+    }
+  }
   const contributions = getWorkspaceContributions(metafile);
 
   return {