@fluentui/web-components 3.0.0-beta.52 → 3.0.0-beta.53

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 02 Aug 2024 04:07:46 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 04:08:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.53](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.53)
+
+Mon, 05 Aug 2024 04:08:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.52..@fluentui/web-components_v3.0.0-beta.53)
+
+### Changes
+
+- fix(web-components): detach design tokens from existing themes ([PR #32130](https://github.com/microsoft/fluentui/pull/32130) by machi@microsoft.com)
+
 ## [3.0.0-beta.52](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.52)
 
-Fri, 02 Aug 2024 04:07:46 GMT 
+Fri, 02 Aug 2024 04:07:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.51..@fluentui/web-components_v3.0.0-beta.52)
 
 ### Changes

package/dist/dts/theme/set-theme.d.ts

@@ -5,8 +5,18 @@
  */
 export type Theme = Record<string, string | number>;
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme - Flat object of theme token values.
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
  * @internal
  */
 export declare const setTheme: (theme: Theme) => void;

package/dist/esm/theme/set-theme.js

@@ -1,12 +1,20 @@
-import * as tokens from './design-tokens.js';
-const tokenNames = Object.keys(tokens);
 const SUPPORTS_REGISTER_PROPERTY = 'registerProperty' in CSS;
 const SUPPORTS_ADOPTED_STYLE_SHEETS = 'adoptedStyleSheets' in document;
 const themeStyleSheet = new CSSStyleSheet();
 const themeStyleTextMap = new Map();
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme - Flat object of theme token values.
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
  * @internal
  */
 export const setTheme = (theme) => {
@@ -20,18 +28,23 @@ export const setTheme = (theme) => {
     }
     if (!themeStyleTextMap.has(theme)) {
         const tokenDeclarations = [];
-        for (const t of tokenNames) {
+        for (const [tokenName, tokenValue] of Object.entries(theme)) {
+            if (typeof tokenValue !== 'string' && Number.isNaN(tokenValue)) {
+                throw new Error(`"${tokenName}" must be a string or a number.`);
+            }
+            const name = `--${tokenName}`;
+            const initialValue = tokenValue.toString();
             if (SUPPORTS_REGISTER_PROPERTY) {
                 try {
                     CSS.registerProperty({
-                        name: `--${t}`,
+                        name,
+                        initialValue,
                         inherits: true,
-                        initialValue: theme[t],
                     });
                 }
                 catch { }
             }
-            tokenDeclarations.push(`--${t}: ${theme[t]};`);
+            tokenDeclarations.push(`${name}:${initialValue};`);
         }
         themeStyleTextMap.set(theme, `html{${tokenDeclarations.join('')}}`);
     }
@@ -46,8 +59,8 @@ export const setTheme = (theme) => {
  * @internal
  */
 export const setThemeFor = (element, theme) => {
-    for (const t of tokenNames) {
-        element.style.setProperty(`--${t}`, theme[t]);
+    for (const [tokenName, tokenValue] of Object.entries(theme)) {
+        element.style.setProperty(`--${tokenName}`, tokenValue.toString());
     }
 };
 //# sourceMappingURL=set-theme.js.map

package/dist/esm/theme/set-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAS7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D,MAAM,0BAA0B,GAAG,kBAAkB,IAAI,GAAG,CAAC;AAC7D,MAAM,6BAA6B,GAAG,oBAAoB,IAAI,QAAQ,CAAC;AACvE,MAAM,eAAe,GAAG,IAAI,aAAa,EAAE,CAAC;AAC5C,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,4EAA4E;IAC5E,yEAAyE;IACzE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,CAAC,6BAA6B,EAAE;QAClC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACjC,MAAM,iBAAiB,GAAa,EAAE,CAAC;QAEvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;YAC1B,IAAI,0BAA0B,EAAE;gBAC9B,IAAI;oBACF,GAAG,CAAC,gBAAgB,CAAC;wBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;wBACd,QAAQ,EAAE,IAAI;wBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;qBACjC,CAAC,CAAC;iBACJ;gBAAC,MAAM,GAAE;aACX;YACD,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAW,GAAG,CAAC,CAAC;SAC1D;QAED,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACrE;IAED,8CAA8C;IAC9C,eAAe,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,CAAC;IAE3D,gEAAgE;IAChE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QAC1D,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACnD;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
+{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AAOA,MAAM,0BAA0B,GAAG,kBAAkB,IAAI,GAAG,CAAC;AAC7D,MAAM,6BAA6B,GAAG,oBAAoB,IAAI,QAAQ,CAAC;AACvE,MAAM,eAAe,GAAG,IAAI,aAAa,EAAE,CAAC;AAC5C,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,4EAA4E;IAC5E,yEAAyE;IACzE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,CAAC,6BAA6B,EAAE;QAClC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACjC,MAAM,iBAAiB,GAAa,EAAE,CAAC;QAEvC,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC3D,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;gBAC9D,MAAM,IAAI,KAAK,CAAC,IAAI,SAAS,iCAAiC,CAAC,CAAC;aACjE;YAED,MAAM,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;YAC3C,IAAI,0BAA0B,EAAE;gBAC9B,IAAI;oBACF,GAAG,CAAC,gBAAgB,CAAC;wBACnB,IAAI;wBACJ,YAAY;wBACZ,QAAQ,EAAE,IAAI;qBACf,CAAC,CAAC;iBACJ;gBAAC,MAAM,GAAE;aACX;YACD,iBAAiB,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,YAAY,GAAG,CAAC,CAAC;SACpD;QAED,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACrE;IAED,8CAA8C;IAC9C,eAAe,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,CAAC;IAE3D,gEAAgE;IAChE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QAC1D,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACnD;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC3D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpE;AACH,CAAC,CAAC"}

package/dist/web-components.d.ts

@@ -7519,8 +7519,18 @@ export declare const roleForMenuItem: {
 };
 
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme - Flat object of theme token values.
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
  * @internal
  */
 export declare const setTheme: (theme: Theme) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.52",
+  "version": "3.0.0-beta.53",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"