@fluentui/react-theme 9.0.0-alpha.9 → 9.0.0-beta.4

package/lib-commonjs/utils/createDarkTheme.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDarkTheme = void 0;
+
+const dark_1 = /*#__PURE__*/require("../alias/dark");
+
+const index_1 = /*#__PURE__*/require("../global/index");
+
+const shadows_1 = /*#__PURE__*/require("./shadows");
+
+const createDarkTheme = brand => {
+  const colorTokens = dark_1.generateColorTokens(brand);
+  return { ...index_1.borderRadius,
+    ...index_1.fontSizes,
+    ...index_1.lineHeights,
+    ...index_1.fontFamilies,
+    ...index_1.fontWeights,
+    ...index_1.strokeWidths,
+    ...colorTokens,
+    ...dark_1.colorPaletteTokens,
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
+  };
+};
+
+exports.createDarkTheme = createDarkTheme;
+//# sourceMappingURL=createDarkTheme.js.map

package/lib-commonjs/utils/createDarkTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/createDarkTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,eAAe,GAAoC,KAAK,IAAG;AACtE,QAAM,WAAW,GAAG,MAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,MAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}

package/lib-commonjs/utils/createHighContrastTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../types';
+export declare const createHighContrastTheme: () => Theme;

package/lib-commonjs/utils/createHighContrastTheme.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHighContrastTheme = void 0;
+
+const highContrast_1 = /*#__PURE__*/require("../alias/highContrast");
+
+const index_1 = /*#__PURE__*/require("../global/index");
+
+const shadows_1 = /*#__PURE__*/require("./shadows");
+
+const createHighContrastTheme = () => {
+  const colorTokens = highContrast_1.generateColorTokens();
+  return { ...index_1.borderRadius,
+    ...index_1.fontSizes,
+    ...index_1.lineHeights,
+    ...index_1.fontFamilies,
+    ...index_1.fontWeights,
+    ...index_1.strokeWidths,
+    ...colorTokens,
+    ...highContrast_1.colorPaletteTokens,
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
+  };
+};
+
+exports.createHighContrastTheme = createHighContrastTheme;
+//# sourceMappingURL=createHighContrastTheme.js.map

package/lib-commonjs/utils/createHighContrastTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/createHighContrastTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,cAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAG,MAAY;AACjD,QAAM,WAAW,GAAG,cAAA,CAAA,mBAAA,EAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,cAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}

package/lib-commonjs/utils/createLightTheme.d.ts

@@ -0,0 +1,2 @@
+import type { BrandVariants, Theme } from '../types';
+export declare const createLightTheme: (brand: BrandVariants) => Theme;

package/lib-commonjs/utils/createLightTheme.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLightTheme = void 0;
+
+const light_1 = /*#__PURE__*/require("../alias/light");
+
+const index_1 = /*#__PURE__*/require("../global/index");
+
+const shadows_1 = /*#__PURE__*/require("./shadows");
+
+const createLightTheme = brand => {
+  const colorTokens = light_1.generateColorTokens(brand);
+  return { ...index_1.borderRadius,
+    ...index_1.fontSizes,
+    ...index_1.lineHeights,
+    ...index_1.fontFamilies,
+    ...index_1.fontWeights,
+    ...index_1.strokeWidths,
+    ...colorTokens,
+    ...light_1.colorPaletteTokens,
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
+  };
+};
+
+exports.createLightTheme = createLightTheme;
+//# sourceMappingURL=createLightTheme.js.map

package/lib-commonjs/utils/createLightTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/createLightTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,gBAAgB,GAAoC,KAAK,IAAG;AACvE,QAAM,WAAW,GAAG,OAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,OAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}

package/lib-commonjs/utils/createTeamsDarkTheme.d.ts

@@ -0,0 +1,2 @@
+import type { BrandVariants, Theme } from '../types';
+export declare const createTeamsDarkTheme: (brand: BrandVariants) => Theme;

package/lib-commonjs/utils/createTeamsDarkTheme.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTeamsDarkTheme = void 0;
+
+const teamsDark_1 = /*#__PURE__*/require("../alias/teamsDark");
+
+const index_1 = /*#__PURE__*/require("../global/index");
+
+const shadows_1 = /*#__PURE__*/require("./shadows");
+
+const createTeamsDarkTheme = brand => {
+  const colorTokens = teamsDark_1.generateColorTokens(brand);
+  return { ...index_1.borderRadius,
+    ...index_1.fontSizes,
+    ...index_1.lineHeights,
+    ...index_1.fontFamilies,
+    ...index_1.fontWeights,
+    ...index_1.strokeWidths,
+    ...colorTokens,
+    ...teamsDark_1.colorPaletteTokens,
+    ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
+    ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
+  };
+};
+
+exports.createTeamsDarkTheme = createTeamsDarkTheme;
+//# sourceMappingURL=createTeamsDarkTheme.js.map

package/lib-commonjs/utils/createTeamsDarkTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/createTeamsDarkTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,oBAAoB,GAAoC,KAAK,IAAG;AAC3E,QAAM,WAAW,GAAG,WAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,WAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}

package/lib-commonjs/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './createLightTheme';
+export * from './createDarkTheme';
+export * from './createTeamsDarkTheme';
+export * from './createHighContrastTheme';
+export { mergeThemes } from './mergeThemes';
+export * from './themeToCSSVariables';

package/lib-commonjs/utils/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeThemes = void 0;
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./createLightTheme"), exports);
+
+tslib_1.__exportStar(require("./createDarkTheme"), exports);
+
+tslib_1.__exportStar(require("./createTeamsDarkTheme"), exports);
+
+tslib_1.__exportStar(require("./createHighContrastTheme"), exports);
+
+var mergeThemes_1 = /*#__PURE__*/require("./mergeThemes");
+
+Object.defineProperty(exports, "mergeThemes", {
+  enumerable: true,
+  get: function () {
+    return mergeThemes_1.mergeThemes;
+  }
+});
+
+tslib_1.__exportStar(require("./themeToCSSVariables"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AAEA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,WAAA;AAAW;AAAX,CAAA;;AACT,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/utils/mergeThemes.d.ts

@@ -1,8 +1,2 @@
-import { PartialTheme, Theme } from '../types';
-/**
- * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged
- * together in the order provided. If an object creates a circular reference, it will assign the
- * original reference.
- */
-export declare function merge<T = {}>(target: Partial<T>, ...args: (Partial<T> | null | undefined | false)[]): T;
-export declare function mergeThemes(a: Theme, b: PartialTheme | Theme): Theme;
+import type { PartialTheme, Theme } from '../types';
+export declare function mergeThemes(a: Theme | undefined, b: PartialTheme | Theme | undefined): Theme;

package/lib-commonjs/utils/mergeThemes.js

@@ -1,56 +1,24 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// TODO
-// We should consider removal merge() function from this file, ideally it should not be required
-// as probably themes will have flat shape
-/**
- * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged
- * together in the order provided. If an object creates a circular reference, it will assign the
- * original reference.
- */
-function merge(target) {
-    var args = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        args[_i - 1] = arguments[_i];
-    }
-    for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
-        var arg = args_1[_a];
-        _merge(target || {}, arg);
-    }
-    return target;
-}
-exports.merge = merge;
-/**
- * The _merge helper iterates through all props on source and assigns them to target.
- * When the value is an object, we will create a deep clone of the object. However if
- * there is a circular reference, the value will not be deep cloned and will persist
- * the reference.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function _merge(target, source, circularReferences) {
-    if (circularReferences === void 0) { circularReferences = []; }
-    circularReferences.push(source);
-    for (var name_1 in source) {
-        if (source.hasOwnProperty(name_1)) {
-            if (name_1 !== '__proto__' && name_1 !== 'constructor' && name_1 !== 'prototype') {
-                var value = source[name_1];
-                if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-                    var isCircularReference = circularReferences.indexOf(value) > -1;
-                    target[name_1] = (isCircularReference
-                        ? value
-                        : _merge(target[name_1] || {}, value, circularReferences));
-                }
-                else {
-                    target[name_1] = value;
-                }
-            }
-        }
-    }
-    circularReferences.pop();
-    return target;
-}
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeThemes = void 0;
+
 function mergeThemes(a, b) {
-    return merge({}, a, b);
+  // Merge impacts perf: we should like to avoid it if it's possible
+  if (a && b) {
+    return { ...a,
+      ...b
+    };
+  }
+
+  if (a) {
+    return a;
+  }
+
+  return b;
 }
+
 exports.mergeThemes = mergeThemes;
 //# sourceMappingURL=mergeThemes.js.map

package/lib-commonjs/utils/mergeThemes.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergeThemes.js","sourceRoot":"../src/","sources":["utils/mergeThemes.ts"],"names":[],"mappings":";;AAEA,OAAO;AACP,gGAAgG;AAChG,0CAA0C;AAE1C;;;;GAIG;AACH,SAAgB,KAAK,CAAS,MAAkB;IAAE,cAAkD;SAAlD,UAAkD,EAAlD,qBAAkD,EAAlD,IAAkD;QAAlD,6BAAkD;;IAClG,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI,EAAE;QAAnB,IAAM,GAAG,aAAA;QACZ,MAAM,CAAC,MAAM,IAAI,EAAE,EAAE,GAAiB,CAAC,CAAC;KACzC;IAED,OAAO,MAAW,CAAC;AACrB,CAAC;AAND,sBAMC;AAED;;;;;GAKG;AACH,8DAA8D;AAC9D,SAAS,MAAM,CAAmB,MAAS,EAAE,MAAS,EAAE,kBAA8B;IAA9B,mCAAA,EAAA,uBAA8B;IACpF,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAEhC,KAAK,IAAM,MAAI,IAAI,MAAM,EAAE;QACzB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAI,CAAC,EAAE;YAC/B,IAAI,MAAI,KAAK,WAAW,IAAI,MAAI,KAAK,aAAa,IAAI,MAAI,KAAK,WAAW,EAAE;gBAC1E,IAAM,KAAK,GAAgC,MAAM,CAAC,MAAI,CAAC,CAAC;gBACxD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACxE,IAAM,mBAAmB,GAAG,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;oBACnE,MAAM,CAAC,MAAI,CAAC,GAAG,CAAC,mBAAmB;wBACjC,CAAC,CAAC,KAAK;wBACP,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAgC,CAAC;iBAC3F;qBAAM;oBACL,MAAM,CAAC,MAAI,CAAC,GAAG,KAAK,CAAC;iBACtB;aACF;SACF;KACF;IAED,kBAAkB,CAAC,GAAG,EAAE,CAAC;IAEzB,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAgB,WAAW,CAAC,CAAQ,EAAE,CAAuB;IAC3D,OAAO,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAU,CAAC;AAClC,CAAC;AAFD,kCAEC","sourcesContent":["import { PartialTheme, Theme } from '../types';\n\n// TODO\n// We should consider removal merge() function from this file, ideally it should not be required\n// as probably themes will have flat shape\n\n/**\n * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged\n * together in the order provided. If an object creates a circular reference, it will assign the\n * original reference.\n */\nexport function merge<T = {}>(target: Partial<T>, ...args: (Partial<T> | null | undefined | false)[]): T {\n  for (const arg of args) {\n    _merge(target || {}, arg as Partial<T>);\n  }\n\n  return target as T;\n}\n\n/**\n * The _merge helper iterates through all props on source and assigns them to target.\n * When the value is an object, we will create a deep clone of the object. However if\n * there is a circular reference, the value will not be deep cloned and will persist\n * the reference.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _merge<T extends Object>(target: T, source: T, circularReferences: any[] = []): T {\n  circularReferences.push(source);\n\n  for (const name in source) {\n    if (source.hasOwnProperty(name)) {\n      if (name !== '__proto__' && name !== 'constructor' && name !== 'prototype') {\n        const value: T[Extract<keyof T, string>] = source[name];\n        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n          const isCircularReference = circularReferences.indexOf(value) > -1;\n          target[name] = (isCircularReference\n            ? value\n            : _merge(target[name] || {}, value, circularReferences)) as T[Extract<keyof T, string>];\n        } else {\n          target[name] = value;\n        }\n      }\n    }\n  }\n\n  circularReferences.pop();\n\n  return target;\n}\n\nexport function mergeThemes(a: Theme, b: PartialTheme | Theme): Theme {\n  return merge({}, a, b) as Theme;\n}\n"]}
+{"version":3,"sources":["../../src/utils/mergeThemes.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,WAAhB,CAA4B,CAA5B,EAAkD,CAAlD,EAAqF;AACnF;AACA,MAAI,CAAC,IAAI,CAAT,EAAY;AACV,WAAO,EAAE,GAAG,CAAL;AAAQ,SAAG;AAAX,KAAP;AACD;;AAED,MAAI,CAAJ,EAAO;AACL,WAAO,CAAP;AACD;;AAED,SAAO,CAAP;AACD;;AAXD,OAAA,CAAA,WAAA,GAAA,WAAA","sourceRoot":""}

package/lib-commonjs/utils/shadows.d.ts

@@ -1,2 +1,3 @@
-import { ShadowLevelTokens } from '../types';
-export declare function createShadowLevelTokens(ambientColor: string, keyColor: string): ShadowLevelTokens;
+import type { ShadowBrandTokens, ShadowTokens } from '../types';
+export declare function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand'): ShadowBrandTokens;
+export declare function createShadowTokens(ambientColor: string, keyColor: string): ShadowTokens;

package/lib-commonjs/utils/shadows.js

@@ -1,14 +1,20 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-function createShadowLevelTokens(ambientColor, keyColor) {
-    return {
-        shadow2: "0 0 2px " + ambientColor + ", 0 1px 2px " + keyColor,
-        shadow4: "0 0 2px " + ambientColor + ", 0 2px 4px " + keyColor,
-        shadow8: "0 0 2px " + ambientColor + ", 0 4px 8px " + keyColor,
-        shadow16: "0 0 2px " + ambientColor + ", 0 6px 16px " + keyColor,
-        shadow28: "0 0 8px " + ambientColor + ", 0 14px 28px " + keyColor,
-        shadow64: "0 0 8px " + ambientColor + ", 0 32px 64px " + keyColor,
-    };
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createShadowTokens = void 0;
+
+function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') {
+  return {
+    [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
+    [`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,
+    [`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,
+    [`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`,
+    [`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,
+    [`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`
+  };
 }
-exports.createShadowLevelTokens = createShadowLevelTokens;
+
+exports.createShadowTokens = createShadowTokens;
 //# sourceMappingURL=shadows.js.map

package/lib-commonjs/utils/shadows.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.js","sourceRoot":"../src/","sources":["utils/shadows.ts"],"names":[],"mappings":";;AAEA,SAAgB,uBAAuB,CAAC,YAAoB,EAAE,QAAgB;IAC5E,OAAO;QACL,OAAO,EAAE,aAAW,YAAY,oBAAe,QAAU;QACzD,OAAO,EAAE,aAAW,YAAY,oBAAe,QAAU;QACzD,OAAO,EAAE,aAAW,YAAY,oBAAe,QAAU;QACzD,QAAQ,EAAE,aAAW,YAAY,qBAAgB,QAAU;QAC3D,QAAQ,EAAE,aAAW,YAAY,sBAAiB,QAAU;QAC5D,QAAQ,EAAE,aAAW,YAAY,sBAAiB,QAAU;KAC7D,CAAC;AACJ,CAAC;AATD,0DASC","sourcesContent":["import { ShadowLevelTokens } from '../types';\n\nexport function createShadowLevelTokens(ambientColor: string, keyColor: string): ShadowLevelTokens {\n  return {\n    shadow2: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,\n    shadow4: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,\n    shadow8: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,\n    shadow16: `0 0 2px ${ambientColor}, 0 6px 16px ${keyColor}`,\n    shadow28: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,\n    shadow64: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`,\n  };\n}\n"]}
+{"version":3,"sources":["../../src/utils/shadows.ts"],"names":[],"mappings":";;;;;;;AAKA,SAAgB,kBAAhB,CAAmC,YAAnC,EAAyD,QAAzD,EAA2E,WAAA,GAA4B,EAAvG,EAAyG;AACvG,SAAO;AACL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EADpE;AAEL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EAFpE;AAGL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EAHpE;AAIL,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,gBAAgB,QAAQ,EAJtE;AAKL,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,iBAAiB,QAAQ,EALvE;AAML,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,iBAAiB,QAAQ;AANvE,GAAP;AAQD;;AATD,OAAA,CAAA,kBAAA,GAAA,kBAAA","sourceRoot":""}

package/lib-commonjs/utils/themeToCSSVariables.d.ts

@@ -1,2 +1,2 @@
-import { Theme } from '../types';
-export declare function themeToCSSVariables(theme: Theme): Record<string, string>;
+import type { Theme } from '../types';
+export declare function themeToCSSVariables(theme: Theme): Record<string, string | number>;

package/lib-commonjs/utils/themeToCSSVariables.js

@@ -1,25 +1,21 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-function flattenThemeToCSSVariables(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-themePart, parentKey, result) {
-    if (parentKey === void 0) { parentKey = ''; }
-    if (result === void 0) { result = {}; }
-    for (var propertyName in themePart) {
-        if (Object.prototype.hasOwnProperty.call(themePart, propertyName)) {
-            var variableName = parentKey ? parentKey + '-' + propertyName : "--" + propertyName;
-            if (typeof themePart[propertyName] === 'object') {
-                flattenThemeToCSSVariables(themePart[propertyName], variableName, result);
-            }
-            else {
-                result[variableName] = themePart[propertyName];
-            }
-        }
-    }
-    return result;
-}
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeToCSSVariables = void 0;
+
 function themeToCSSVariables(theme) {
-    return flattenThemeToCSSVariables(theme);
+  const result = {};
+
+  for (const propertyName in theme) {
+    if (Object.prototype.hasOwnProperty.call(theme, propertyName)) {
+      result[`--${propertyName}`] = theme[propertyName];
+    }
+  }
+
+  return result;
 }
+
 exports.themeToCSSVariables = themeToCSSVariables;
 //# sourceMappingURL=themeToCSSVariables.js.map

package/lib-commonjs/utils/themeToCSSVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeToCSSVariables.js","sourceRoot":"../src/","sources":["utils/themeToCSSVariables.ts"],"names":[],"mappings":";;AAEA,SAAS,0BAA0B;AACjC,8DAA8D;AAC9D,SAA8B,EAC9B,SAAsB,EACtB,MAAmC;IADnC,0BAAA,EAAA,cAAsB;IACtB,uBAAA,EAAA,WAAmC;IAEnC,KAAK,IAAM,YAAY,IAAI,SAAS,EAAE;QACpC,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE;YACjE,IAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,GAAG,YAAY,CAAC,CAAC,CAAC,OAAK,YAAc,CAAC;YAEtF,IAAI,OAAO,SAAS,CAAC,YAAY,CAAC,KAAK,QAAQ,EAAE;gBAC/C,0BAA0B,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;aAC3E;iBAAM;gBACL,MAAM,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;aAChD;SACF;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAgB,mBAAmB,CAAC,KAAY;IAC9C,OAAO,0BAA0B,CAAC,KAAK,CAAC,CAAC;AAC3C,CAAC;AAFD,kDAEC","sourcesContent":["import { Theme } from '../types';\n\nfunction flattenThemeToCSSVariables(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  themePart: Record<string, any>,\n  parentKey: string = '',\n  result: Record<string, string> = {},\n) {\n  for (const propertyName in themePart) {\n    if (Object.prototype.hasOwnProperty.call(themePart, propertyName)) {\n      const variableName = parentKey ? parentKey + '-' + propertyName : `--${propertyName}`;\n\n      if (typeof themePart[propertyName] === 'object') {\n        flattenThemeToCSSVariables(themePart[propertyName], variableName, result);\n      } else {\n        result[variableName] = themePart[propertyName];\n      }\n    }\n  }\n  return result;\n}\n\nexport function themeToCSSVariables(theme: Theme): Record<string, string> {\n  return flattenThemeToCSSVariables(theme);\n}\n"]}
+{"version":3,"sources":["../../src/utils/themeToCSSVariables.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,mBAAhB,CAAoC,KAApC,EAAgD;AAC9C,QAAM,MAAM,GAA2C,EAAvD;;AAEA,OAAK,MAAM,YAAX,IAA2B,KAA3B,EAAkC;AAChC,QAAI,MAAM,CAAC,SAAP,CAAiB,cAAjB,CAAgC,IAAhC,CAAqC,KAArC,EAA4C,YAA5C,CAAJ,EAA+D;AAC7D,MAAA,MAAM,CAAC,KAAK,YAAY,EAAlB,CAAN,GAA8B,KAAK,CAAC,YAAD,CAAnC;AACD;AACF;;AAED,SAAO,MAAP;AACD;;AAVD,OAAA,CAAA,mBAAA,GAAA,mBAAA","sourceRoot":""}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@fluentui/react-theme",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-beta.4",
   "description": "Fluent UI themes",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
@@ -12,17 +13,20 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "storybook": "start-storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-theme/src && yarn docs",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.1.1",
+    "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "^1.0.0",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
@@ -30,7 +34,7 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "tslib": "^1.10.0"
+    "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",
@@ -39,7 +43,6 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "alpha",
     "disallowedChangeTypes": [
       "major",
       "minor",

package/just.config.ts

@@ -1,3 +0,0 @@
-import { preset } from '@fluentui/scripts';
-
-preset();

package/lib/global/utils.d.ts

@@ -1,23 +0,0 @@
-import { BrandVariants } from '../types';
-export declare const createGlobalTheme: (brand: BrandVariants) => {
-    color: {
-        black: string;
-        white: string;
-        hyperlink: string;
-        disabled: string;
-        selected: string;
-    };
-    palette: import("../types").GlobalSharedColors & {
-        brand: BrandVariants;
-        grey: Record<import("../types").Greys, string>;
-    };
-    type: {
-        fontSizes: import("../types").FontSizes;
-        fontWeights: import("../types").FontWeights;
-        fontFamilies: import("../types").FontFamilies;
-        lineHeights: import("../types").FontSizes;
-        alignment: import("../types").TextAlignments;
-    };
-    borderRadius: import("../types").BorderRadius;
-    strokeWidth: import("../types").StrokeWidths;
-};

package/lib/global/utils.js

@@ -1,27 +0,0 @@
-import { __assign } from "tslib";
-import { borderRadius } from './borderRadius';
-import { sharedColors, black, white, hyperlink, selected, disabled, grey } from './colors';
-import { textAlignments, fontFamilies, fontWeights, fontSizes, lineHeights } from './fonts';
-import { strokeWidths } from './strokeWidths';
-export var createGlobalTheme = function (brand) {
-    return {
-        color: {
-            black: black,
-            white: white,
-            hyperlink: hyperlink,
-            selected: selected,
-            disabled: disabled,
-        },
-        palette: __assign(__assign({}, sharedColors), { brand: brand, grey: grey }),
-        type: {
-            alignment: textAlignments,
-            fontFamilies: fontFamilies,
-            fontSizes: fontSizes,
-            fontWeights: fontWeights,
-            lineHeights: lineHeights,
-        },
-        borderRadius: borderRadius,
-        strokeWidth: strokeWidths,
-    };
-};
-//# sourceMappingURL=utils.js.map

package/lib/global/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"../src/","sources":["global/utils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAAoB;IACpD,OAAO;QACL,KAAK,EAAE;YACL,KAAK,OAAA;YACL,KAAK,OAAA;YACL,SAAS,WAAA;YACT,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT;QACD,OAAO,wBACF,YAAY,KACf,KAAK,EAAE,KAAK,EACZ,IAAI,MAAA,GACL;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,cAAc;YACzB,YAAY,EAAE,YAAY;YAC1B,SAAS,EAAE,SAAS;YACpB,WAAW,EAAE,WAAW;YACxB,WAAW,EAAE,WAAW;SACzB;QACD,YAAY,EAAE,YAAY;QAC1B,WAAW,EAAE,YAAY;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { borderRadius } from './borderRadius';\nimport { sharedColors, black, white, hyperlink, selected, disabled, grey } from './colors';\nimport { textAlignments, fontFamilies, fontWeights, fontSizes, lineHeights } from './fonts';\nimport { strokeWidths } from './strokeWidths';\nimport { Theme, BrandVariants } from '../types';\n\nexport const createGlobalTheme = (brand: BrandVariants): Theme['global'] => {\n  return {\n    color: {\n      black,\n      white,\n      hyperlink,\n      selected,\n      disabled,\n    },\n    palette: {\n      ...sharedColors,\n      brand: brand,\n      grey,\n    },\n    type: {\n      alignment: textAlignments,\n      fontFamilies: fontFamilies,\n      fontSizes: fontSizes,\n      fontWeights: fontWeights,\n      lineHeights: lineHeights,\n    },\n    borderRadius: borderRadius,\n    strokeWidth: strokeWidths,\n  };\n};\n"]}

package/lib/themes/teams/globalTheme.d.ts

@@ -1,22 +0,0 @@
-export declare const globalTheme: {
-    color: {
-        black: string;
-        white: string;
-        hyperlink: string;
-        disabled: string;
-        selected: string;
-    };
-    palette: import("../..").GlobalSharedColors & {
-        brand: import("../..").BrandVariants;
-        grey: Record<import("../..").Greys, string>;
-    };
-    type: {
-        fontSizes: import("../..").FontSizes;
-        fontWeights: import("../..").FontWeights;
-        fontFamilies: import("../..").FontFamilies;
-        lineHeights: import("../..").FontSizes;
-        alignment: import("../..").TextAlignments;
-    };
-    borderRadius: import("../..").BorderRadius;
-    strokeWidth: import("../..").StrokeWidths;
-};

package/lib/themes/teams/globalTheme.js

@@ -1,3 +0,0 @@
-import { brandColors, createGlobalTheme } from '../../global/index';
-export var globalTheme = createGlobalTheme(brandColors.teams);
-//# sourceMappingURL=globalTheme.js.map

package/lib/themes/teams/globalTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"globalTheme.js","sourceRoot":"../src/","sources":["themes/teams/globalTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { brandColors, createGlobalTheme } from '../../global/index';\n\nexport const globalTheme = createGlobalTheme(brandColors.teams);\n"]}

package/lib/themes/web/globalTheme.d.ts

@@ -1,22 +0,0 @@
-export declare const globalTheme: {
-    color: {
-        black: string;
-        white: string;
-        hyperlink: string;
-        disabled: string;
-        selected: string;
-    };
-    palette: import("../..").GlobalSharedColors & {
-        brand: import("../..").BrandVariants;
-        grey: Record<import("../..").Greys, string>;
-    };
-    type: {
-        fontSizes: import("../..").FontSizes;
-        fontWeights: import("../..").FontWeights;
-        fontFamilies: import("../..").FontFamilies;
-        lineHeights: import("../..").FontSizes;
-        alignment: import("../..").TextAlignments;
-    };
-    borderRadius: import("../..").BorderRadius;
-    strokeWidth: import("../..").StrokeWidths;
-};

package/lib/themes/web/globalTheme.js

@@ -1,3 +0,0 @@
-import { brandColors, createGlobalTheme } from '../../global/index';
-export var globalTheme = createGlobalTheme(brandColors.web);
-//# sourceMappingURL=globalTheme.js.map

package/lib/themes/web/globalTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"globalTheme.js","sourceRoot":"../src/","sources":["themes/web/globalTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC","sourcesContent":["import { brandColors, createGlobalTheme } from '../../global/index';\n\nexport const globalTheme = createGlobalTheme(brandColors.web);\n"]}

package/lib/utils/dark/colors.d.ts

@@ -1,8 +0,0 @@
-import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
-export declare const subtleColorTokens: BackgroundColorTokens;
-export declare const transparentColorTokens: BackgroundColorTokens;
-export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
-export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
-    [P in keyof NeutralColorTokens]?: string;
-}): NeutralColorTokens;
-export declare const sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;