feat(web-components): relax setTheme() argument type to allow custom …

…tokens (#32087)
microsoft · Jul 23, 2024 · 273f6aa · 273f6aa
1 parent e55fceb
commit 273f6aa
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 4 deletions.
diff --git a/change/@fluentui-web-components-664a860d-0606-46e5-9e2d-c1d7508e2e62.json b/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"
+}
diff --git a/packages/web-components/docs/api-report.md b/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)

diff --git a/packages/web-components/src/index.ts b/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,

diff --git a/packages/web-components/src/theme/index.ts b/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';
diff --git a/packages/web-components/src/theme/set-theme.ts b/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;