@fluentui/react-theme 0.0.0-nightlye0b8e1fa6920220128.1 → 0.0.0-nightlye1926bfeca20220204.1

package/CHANGELOG.json

@@ -2,15 +2,15 @@
   "name": "@fluentui/react-theme",
   "entries": [
     {
-      "date": "Fri, 28 Jan 2022 04:13:23 GMT",
-      "tag": "@fluentui/react-theme_v0.0.0-nightlye0b8e1fa6920220128.1",
-      "version": "0.0.0-nightlye0b8e1fa6920220128.1",
+      "date": "Fri, 04 Feb 2022 04:13:21 GMT",
+      "tag": "@fluentui/react-theme_v0.0.0-nightlye1926bfeca20220204.1",
+      "version": "0.0.0-nightlye1926bfeca20220204.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-theme",
-            "commit": "90d10ec8c2d159575962c4d3d913317633b44a7a",
+            "commit": "448766390ca759acf60ffccef08e4c3ffe41f4f6",
             "comment": "Release nightly v9"
           },
           {
@@ -43,6 +43,12 @@
             "commit": "1dba2fca2365f1a748505896679ae160a6fec270",
             "comment": "remove mergeThemes API"
           },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-theme",
+            "commit": "1c2a4410205d3c86bc885fb74d6aede75d9bd99d",
+            "comment": "Theme: Adding function to programmatically generate tokens object based on a theme."
+          },
           {
             "author": "bsunderhus@microsoft.com",
             "package": "@fluentui/react-theme",

package/CHANGELOG.md

@@ -1,22 +1,23 @@
 # Change Log - @fluentui/react-theme
 
-This log was last generated on Fri, 28 Jan 2022 04:13:23 GMT and should not be manually modified.
+This log was last generated on Fri, 04 Feb 2022 04:13:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlye0b8e1fa6920220128.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlye0b8e1fa6920220128.1)
+## [0.0.0-nightlye1926bfeca20220204.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlye1926bfeca20220204.1)
 
-Fri, 28 Jan 2022 04:13:23 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v0.0.0-nightlye0b8e1fa6920220128.1)
+Fri, 04 Feb 2022 04:13:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v0.0.0-nightlye1926bfeca20220204.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/90d10ec8c2d159575962c4d3d913317633b44a7a) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/448766390ca759acf60ffccef08e4c3ffe41f4f6) by email not defined)
 - feat(react-theme): Add colorNeutralForeground1Static token ([PR #21385](https://github.com/microsoft/fluentui/pull/21385) by miroslav.stastny@microsoft.com)
 - updating brand colors ([PR #20140](https://github.com/microsoft/fluentui/pull/20140) by andmarti@microsoft.com)
 - feat: Export tokens as mapping to CSS variables ([PR #21026](https://github.com/microsoft/fluentui/pull/21026) by Humberto.Morimoto@microsoft.com)
 - Extend brand ramp from 13 to 16 tokens ([PR #20884](https://github.com/microsoft/fluentui/pull/20884) by miroslav.stastny@microsoft.com)
 - remove mergeThemes API ([PR #21278](https://github.com/microsoft/fluentui/pull/21278) by martinhochel@microsoft.com)
+- Theme: Adding function to programmatically generate tokens object based on a theme. ([PR #21548](https://github.com/microsoft/fluentui/pull/21548) by Humberto.Morimoto@microsoft.com)
 - Remove `themeToCSSVariables` function ([PR #20828](https://github.com/microsoft/fluentui/pull/20828) by bsunderhus@microsoft.com)
 - feat(react-theme) Add border1 color token for shared colors ([PR #20963](https://github.com/microsoft/fluentui/pull/20963) by miroslav.stastny@microsoft.com)
 

package/dist/react-theme.d.ts

@@ -337,6 +337,16 @@ export declare const teamsLightTheme: Theme;
 
 export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
 
+/**
+ * Programmatically generates a tokens to css variables mapping object from the keys in a theme.
+ * This helps with ease of use as a user of a custom theme does not have to manually construct this object, but it could
+ * affect tree-shaking since bundlers do not know the shape of the output.
+ *
+ * @param theme - Theme from which to get the keys to generate the tokens to css variables mapping object
+ * @returns Tokens to css variables mapping object corresponding to the passed theme
+ */
+export declare function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;
+
 export declare const tokens: Record<keyof Theme, string>;
 
 export declare const webDarkTheme: Theme;

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './themes/index';
 export * from './utils/index';
+export { themeToTokensObject } from './themeToTokensObject';
 export { tokens } from './tokens';
 export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, } from './types';

package/lib/index.js

@@ -1,4 +1,5 @@
 export * from './themes/index';
 export * from './utils/index';
+export { themeToTokensObject } from './themeToTokensObject';
 export { tokens } from './tokens';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/lib/themeToTokensObject.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from './types';
+/**
+ * Programmatically generates a tokens to css variables mapping object from the keys in a theme.
+ * This helps with ease of use as a user of a custom theme does not have to manually construct this object, but it could
+ * affect tree-shaking since bundlers do not know the shape of the output.
+ *
+ * @param theme - Theme from which to get the keys to generate the tokens to css variables mapping object
+ * @returns Tokens to css variables mapping object corresponding to the passed theme
+ */
+export declare function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;

package/lib/themeToTokensObject.js

@@ -0,0 +1,19 @@
+/**
+ * Programmatically generates a tokens to css variables mapping object from the keys in a theme.
+ * This helps with ease of use as a user of a custom theme does not have to manually construct this object, but it could
+ * affect tree-shaking since bundlers do not know the shape of the output.
+ *
+ * @param theme - Theme from which to get the keys to generate the tokens to css variables mapping object
+ * @returns Tokens to css variables mapping object corresponding to the passed theme
+ */
+export function themeToTokensObject(theme) {
+  const tokens = {};
+  const keys = Object.keys(theme);
+
+  for (const key of keys) {
+    tokens[key] = `var(--${key})`;
+  }
+
+  return tokens;
+}
+//# sourceMappingURL=themeToTokensObject.js.map

package/lib/themeToTokensObject.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/themeToTokensObject.ts"],"names":[],"mappings":"AAEA;;;;;;;AAOG;AACH,OAAM,SAAU,mBAAV,CAAoD,KAApD,EAAiE;AACrE,QAAM,MAAM,GAAG,EAAf;AACA,QAAM,IAAI,GAAG,MAAM,CAAC,IAAP,CAAY,KAAZ,CAAb;;AACA,OAAK,MAAM,GAAX,IAAkB,IAAlB,EAAwB;AACtB,IAAA,MAAM,CAAC,GAAD,CAAN,GAAc,SAAS,GAAG,GAA1B;AACD;;AACD,SAAO,MAAP;AACD","sourceRoot":""}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './themes/index';
 export * from './utils/index';
+export { themeToTokensObject } from './themeToTokensObject';
 export { tokens } from './tokens';
 export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, } from './types';

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokens = void 0;
+exports.tokens = exports.themeToTokensObject = void 0;
 
 const tslib_1 = /*#__PURE__*/require("tslib");
 
@@ -11,6 +11,15 @@ tslib_1.__exportStar(require("./themes/index"), exports);
 
 tslib_1.__exportStar(require("./utils/index"), exports);
 
+var themeToTokensObject_1 = /*#__PURE__*/require("./themeToTokensObject");
+
+Object.defineProperty(exports, "themeToTokensObject", {
+  enumerable: true,
+  get: function () {
+    return themeToTokensObject_1.themeToTokensObject;
+  }
+});
+
 var tokens_1 = /*#__PURE__*/require("./tokens");
 
 Object.defineProperty(exports, "tokens", {

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AAEA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA","sourceRoot":""}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AAEA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;;AACT,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA","sourceRoot":""}

package/lib-commonjs/themeToTokensObject.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from './types';
+/**
+ * Programmatically generates a tokens to css variables mapping object from the keys in a theme.
+ * This helps with ease of use as a user of a custom theme does not have to manually construct this object, but it could
+ * affect tree-shaking since bundlers do not know the shape of the output.
+ *
+ * @param theme - Theme from which to get the keys to generate the tokens to css variables mapping object
+ * @returns Tokens to css variables mapping object corresponding to the passed theme
+ */
+export declare function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;

package/lib-commonjs/themeToTokensObject.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeToTokensObject = void 0;
+/**
+ * Programmatically generates a tokens to css variables mapping object from the keys in a theme.
+ * This helps with ease of use as a user of a custom theme does not have to manually construct this object, but it could
+ * affect tree-shaking since bundlers do not know the shape of the output.
+ *
+ * @param theme - Theme from which to get the keys to generate the tokens to css variables mapping object
+ * @returns Tokens to css variables mapping object corresponding to the passed theme
+ */
+
+function themeToTokensObject(theme) {
+  const tokens = {};
+  const keys = Object.keys(theme);
+
+  for (const key of keys) {
+    tokens[key] = `var(--${key})`;
+  }
+
+  return tokens;
+}
+
+exports.themeToTokensObject = themeToTokensObject;
+//# sourceMappingURL=themeToTokensObject.js.map

package/lib-commonjs/themeToTokensObject.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/themeToTokensObject.ts"],"names":[],"mappings":";;;;;;AAEA;;;;;;;AAOG;;AACH,SAAgB,mBAAhB,CAA0D,KAA1D,EAAuE;AACrE,QAAM,MAAM,GAAG,EAAf;AACA,QAAM,IAAI,GAAG,MAAM,CAAC,IAAP,CAAY,KAAZ,CAAb;;AACA,OAAK,MAAM,GAAX,IAAkB,IAAlB,EAAwB;AACtB,IAAA,MAAM,CAAC,GAAD,CAAN,GAAc,SAAS,GAAG,GAA1B;AACD;;AACD,SAAO,MAAP;AACD;;AAPD,OAAA,CAAA,mBAAA,GAAA,mBAAA","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-theme",
-  "version": "0.0.0-nightlye0b8e1fa6920220128.1",
+  "version": "0.0.0-nightlye1926bfeca20220204.1",
   "description": "Fluent UI themes",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",