feat(web-components): relax setTheme() argument type to allow custom tokens (#32087)

Author: marchbox

change/@fluentui-web-components-664a860d-0606-46e5-9e2d-c1d7508e2e62.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(web-components): relax setTheme() argument type to allow custom tokens",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -17,7 +17,6 @@ import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
-import type { Theme } from '@fluentui/tokens';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 // @public
@@ -3541,6 +3540,11 @@ export const TextWeight: {
 // @public
 export type TextWeight = ValuesOf<typeof TextWeight>;
 
+// Warning: (ae-internal-missing-underscore) The name "Theme" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export type Theme = Record<string, string | number>;
+
 // @public
 export class ToggleButton extends Button {
     // (undocumented)

packages/web-components/src/index.ts

@@ -244,7 +244,7 @@ export {
   TextWeight,
 } from './text/index.js';
 export * from './theme/design-tokens.js';
-export { setTheme, setThemeFor } from './theme/index.js';
+export { setTheme, setThemeFor, type Theme } from './theme/index.js';
 export {
   ToggleButton,
   ToggleButtonAppearance,

packages/web-components/src/theme/index.ts

@@ -384,4 +384,4 @@ export {
   shadow28Brand,
   shadow64Brand,
 } from './design-tokens.js';
-export { setTheme, setThemeFor } from './set-theme.js';
+export { setTheme, setThemeFor, type Theme } from './set-theme.js';

packages/web-components/src/theme/set-theme.ts

@@ -1,6 +1,12 @@
-import type { Theme } from '@fluentui/tokens';
 import * as tokens from './design-tokens.js';
 
+/**
+ * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
+ * tokens to be added.
+ * @internal
+ */
+export type Theme = Record<string, string | number>;
+
 const tokenNames = Object.keys(tokens) as (keyof Theme)[];
 
 const SUPPORTS_REGISTER_PROPERTY = 'registerProperty' in CSS;