@fluentui/react-theme - npm Package Compare versions

Comparing version 0.0.0-nightly28ceaaa83c20211215.1 to 0.0.0-nightly3082edf34720220208.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Wed, 15 Dec 2021 04:15:58 GMT",
-      "tag": "@fluentui/react-theme_v0.0.0-nightly28ceaaa83c20211215.1",
-      "version": "0.0.0-nightly28ceaaa83c20211215.1",
+      "date": "Tue, 08 Feb 2022 04:14:28 GMT",
+      "tag": "@fluentui/react-theme_v0.0.0-nightly3082edf34720220208.1",
+      "version": "0.0.0-nightly3082edf34720220208.1",
       "comments": {
@@ -14,6 +14,12 @@ "prerelease": [
             "package": "@fluentui/react-theme",
-            "commit": "1fa4d63c9ac215f423947810ede774f59a1ce9f3",
+            "commit": "2995e3262243608331236b8d12b1652c84d313bc",
             "comment": "Release nightly v9"
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "fa3937813e6587d90ab5c43579321004fc37d6e9",
+            "comment": "feat(react-theme): Add colorNeutralForeground1Static token"
+          },
+          {
             "author": "[e-mail]",
@@ -25,2 +31,8 @@ "package": "@fluentui/react-theme",
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "b382d0421440e0854673a7967137d6c667544f91",
+            "comment": "feat: Export tokens as mapping to CSS variables"
+          },
+          {
             "author": "[e-mail]",
@@ -32,2 +44,14 @@ "package": "@fluentui/react-theme",
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "1dba2fca2365f1a748505896679ae160a6fec270",
+            "comment": "remove mergeThemes API"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "1c2a4410205d3c86bc885fb74d6aede75d9bd99d",
+            "comment": "Theme: Adding function to programmatically generate tokens object based on a theme."
+          },
+          {
             "author": "[e-mail]",
@@ -44,2 +68,22 @@ "package": "@fluentui/react-theme",
           }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "636b848aa2323fd5d450e2206a71afad93aaa578",
+            "comment": "chore(react-theme) Add theme tokens bundle size fixture"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          }
         ]
@@ -46,0 +90,0 @@ }

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Wed, 15 Dec 2021 04:15:58 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Feb 2022 04:14:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly28ceaaa83c20211215.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly28ceaaa83c20211215.1)
+## [0.0.0-nightly3082edf34720220208.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly3082edf34720220208.1)
 
-Wed, 15 Dec 2021 04:15:58 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v0.0.0-nightly28ceaaa83c20211215.1)
+Tue, 08 Feb 2022 04:14:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v0.0.0-nightly3082edf34720220208.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/1fa4d63c9ac215f423947810ede774f59a1ce9f3) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/2995e3262243608331236b8d12b1652c84d313bc) by email not defined)
+- feat(react-theme): Add colorNeutralForeground1Static token ([PR #21385](https://github.com/microsoft/fluentui/pull/21385) by [e-mail])
 - updating brand colors ([PR #20140](https://github.com/microsoft/fluentui/pull/20140) by [e-mail])
+- feat: Export tokens as mapping to CSS variables ([PR #21026](https://github.com/microsoft/fluentui/pull/21026) by [e-mail])
 - Extend brand ramp from 13 to 16 tokens ([PR #20884](https://github.com/microsoft/fluentui/pull/20884) by [e-mail])
+- remove mergeThemes API ([PR #21278](https://github.com/microsoft/fluentui/pull/21278) by [e-mail])
+- Theme: Adding function to programmatically generate tokens object based on a theme. ([PR #21548](https://github.com/microsoft/fluentui/pull/21548) by [e-mail])
 - Remove `themeToCSSVariables` function ([PR #20828](https://github.com/microsoft/fluentui/pull/20828) by [e-mail])
@@ -18,0 +22,0 @@ - feat(react-theme) Add border1 color token for shared colors ([PR #20963](https://github.com/microsoft/fluentui/pull/20963) by [e-mail])

dist/react-theme.d.ts

@@ -148,2 +148,3 @@ export declare type BorderRadiusTokens = {
     colorBrandForeground2: string;
+    colorNeutralForeground1Static: string;
     colorNeutralForegroundInverted: string;
@@ -302,4 +303,2 @@ colorNeutralForegroundInvertedHover: string;
 
-export declare function mergeThemes(a: Theme | undefined, b: PartialTheme | Theme | undefined): Theme;
-
 export declare type PartialTheme = Partial<Theme>;
@@ -343,2 +342,14 @@
 
+/**
+ * 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;
@@ -345,0 +356,0 @@

lib-commonjs/alias/dark.js

@@ -41,2 +41,3 @@ "use strict";
   colorBrandForeground2: brand[110],
+  colorNeutralForeground1Static: colors_1.grey[14],
   colorNeutralForegroundInverted: colors_1.white,
@@ -97,4 +98,4 @@ colorNeutralForegroundInvertedHover: colors_1.white,
   colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
-  colorNeutralStencil1: colors_1.grey[20],
-  colorNeutralStencil2: colors_1.grey[34],
+  colorNeutralStencil1: colors_1.grey[34],
+  colorNeutralStencil2: colors_1.grey[20],
   colorBrandBackground: brand[70],
@@ -101,0 +102,0 @@ colorBrandBackgroundHover: brand[80],

lib-commonjs/alias/highContrast.js

@@ -41,2 +41,3 @@ "use strict";
   colorBrandForeground2: colors_1.hcButtonText,
+  colorNeutralForeground1Static: colors_1.hcCanvas,
   colorNeutralForegroundInverted: colors_1.hcCanvasText,
@@ -97,4 +98,4 @@ colorNeutralForegroundInvertedHover: colors_1.hcHighlightText,
   colorNeutralBackgroundInvertedDisabled: colors_1.hcCanvas,
-  colorNeutralStencil1: colors_1.grey[8],
-  colorNeutralStencil2: colors_1.grey[52],
+  colorNeutralStencil1: colors_1.hcCanvasText,
+  colorNeutralStencil2: colors_1.hcCanvasText,
   colorBrandBackground: colors_1.hcButtonFace,
@@ -101,0 +102,0 @@ colorBrandBackgroundHover: colors_1.hcHighlight,

lib-commonjs/alias/light.js

@@ -41,2 +41,3 @@ "use strict";
   colorBrandForeground2: brand[70],
+  colorNeutralForeground1Static: colors_1.grey[14],
   colorNeutralForegroundInverted: colors_1.white,
@@ -79,3 +80,3 @@ colorNeutralForegroundInvertedHover: colors_1.white,
   colorNeutralBackground6: colors_1.grey[90],
-  colorNeutralBackgroundInverted: colors_1.grey[20],
+  colorNeutralBackgroundInverted: colors_1.grey[38],
   colorSubtleBackground: 'transparent',
@@ -82,0 +83,0 @@ colorSubtleBackgroundHover: colors_1.grey[96],

lib-commonjs/alias/teamsDark.js

@@ -41,2 +41,3 @@ "use strict";
   colorBrandForeground2: brand[110],
+  colorNeutralForeground1Static: colors_1.grey[14],
   colorNeutralForegroundInverted: colors_1.white,
@@ -97,4 +98,4 @@ colorNeutralForegroundInvertedHover: colors_1.white,
   colorNeutralBackgroundInvertedDisabled: colors_1.whiteAlpha[10],
-  colorNeutralStencil1: colors_1.grey[20],
-  colorNeutralStencil2: colors_1.grey[34],
+  colorNeutralStencil1: colors_1.grey[34],
+  colorNeutralStencil2: colors_1.grey[20],
   colorBrandBackground: brand[70],
@@ -101,0 +102,0 @@ colorBrandBackgroundHover: brand[80],

lib-commonjs/index.d.ts

 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';

lib-commonjs/index.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.tokens = exports.themeToTokensObject = void 0;
 
@@ -13,2 +14,20 @@ const tslib_1 = /*#__PURE__*/require("tslib");
 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", {
+  enumerable: true,
+  get: function () {
+    return tokens_1.tokens;
+  }
+});
 //# sourceMappingURL=index.js.map

lib-commonjs/types.d.ts

@@ -35,2 +35,3 @@ /**
     colorBrandForeground2: string;
+    colorNeutralForeground1Static: string;
     colorNeutralForegroundInverted: string;
@@ -37,0 +38,0 @@ colorNeutralForegroundInvertedHover: string;

lib-commonjs/utils/index.d.ts

@@ -5,2 +5,1 @@ export * from './createLightTheme';
 export * from './createHighContrastTheme';
-export { mergeThemes } from './mergeThemes';

lib-commonjs/utils/index.js

@@ -6,3 +6,2 @@ "use strict";
 });
-exports.mergeThemes = void 0;
 
@@ -18,11 +17,2 @@ const tslib_1 = /*#__PURE__*/require("tslib");
 tslib_1.__exportStar(require("./createHighContrastTheme"), exports);
-
-var mergeThemes_1 = /*#__PURE__*/require("./mergeThemes");
-
-Object.defineProperty(exports, "mergeThemes", {
-  enumerable: true,
-  get: function () {
-    return mergeThemes_1.mergeThemes;
-  }
-});
 //# sourceMappingURL=index.js.map

lib/alias/dark.js

@@ -33,2 +33,3 @@ import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors';
   colorBrandForeground2: brand[110],
+  colorNeutralForeground1Static: grey[14],
   colorNeutralForegroundInverted: white,
@@ -89,4 +90,4 @@ colorNeutralForegroundInvertedHover: white,
   colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
-  colorNeutralStencil1: grey[20],
-  colorNeutralStencil2: grey[34],
+  colorNeutralStencil1: grey[34],
+  colorNeutralStencil2: grey[20],
   colorBrandBackground: brand[70],
@@ -93,0 +94,0 @@ colorBrandBackgroundHover: brand[80],

lib/alias/highContrast.js

@@ -1,2 +0,2 @@
-import { grey, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink, sharedColors, white, black } from '../global/colors';
+import { hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink, sharedColors, white, black } from '../global/colors';
 export const generateColorTokens = () => ({
@@ -33,2 +33,3 @@ colorNeutralForeground1: hcCanvasText,
   colorBrandForeground2: hcButtonText,
+  colorNeutralForeground1Static: hcCanvas,
   colorNeutralForegroundInverted: hcCanvasText,
@@ -89,4 +90,4 @@ colorNeutralForegroundInvertedHover: hcHighlightText,
   colorNeutralBackgroundInvertedDisabled: hcCanvas,
-  colorNeutralStencil1: grey[8],
-  colorNeutralStencil2: grey[52],
+  colorNeutralStencil1: hcCanvasText,
+  colorNeutralStencil2: hcCanvasText,
   colorBrandBackground: hcButtonFace,
@@ -93,0 +94,0 @@ colorBrandBackgroundHover: hcHighlight,

lib/alias/light.js

@@ -33,2 +33,3 @@ import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors';
   colorBrandForeground2: brand[70],
+  colorNeutralForeground1Static: grey[14],
   colorNeutralForegroundInverted: white,
@@ -71,3 +72,3 @@ colorNeutralForegroundInvertedHover: white,
   colorNeutralBackground6: grey[90],
-  colorNeutralBackgroundInverted: grey[20],
+  colorNeutralBackgroundInverted: grey[38],
   colorSubtleBackground: 'transparent',
@@ -74,0 +75,0 @@ colorSubtleBackgroundHover: grey[96],

lib/alias/teamsDark.js

@@ -33,2 +33,3 @@ import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors';
   colorBrandForeground2: brand[110],
+  colorNeutralForeground1Static: grey[14],
   colorNeutralForegroundInverted: white,
@@ -89,4 +90,4 @@ colorNeutralForegroundInvertedHover: white,
   colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
-  colorNeutralStencil1: grey[20],
-  colorNeutralStencil2: grey[34],
+  colorNeutralStencil1: grey[34],
+  colorNeutralStencil2: grey[20],
   colorBrandBackground: brand[70],
@@ -93,0 +94,0 @@ colorBrandBackgroundHover: brand[80],

lib/index.d.ts

 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';

lib/index.js

 export * from './themes/index';
 export * from './utils/index';
+export { themeToTokensObject } from './themeToTokensObject';
+export { tokens } from './tokens';
 //# sourceMappingURL=index.js.map

lib/types.d.ts

@@ -35,2 +35,3 @@ /**
     colorBrandForeground2: string;
+    colorNeutralForeground1Static: string;
     colorNeutralForegroundInverted: string;
@@ -37,0 +38,0 @@ colorNeutralForegroundInvertedHover: string;

lib/utils/index.d.ts

@@ -5,2 +5,1 @@ export * from './createLightTheme';
 export * from './createHighContrastTheme';
-export { mergeThemes } from './mergeThemes';

lib/utils/index.js

@@ -5,3 +5,2 @@ export * from './createLightTheme';
 export * from './createHighContrastTheme';
-export { mergeThemes } from './mergeThemes';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "0.0.0-nightly28ceaaa83c20211215.1",
+  "version": "0.0.0-nightly3082edf34720220208.1",
   "description": "Fluent UI themes",
@@ -22,4 +22,4 @@ "main": "lib-commonjs/index.js",
     "start": "yarn storybook",
-    "storybook": "start-storybook",
-    "test": "jest",
+    "storybook": "node ../../scripts/storybook/runner",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
@@ -26,0 +26,0 @@ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-theme/src && yarn docs",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

517428

increased by37.12%

Number of package files

181

increased by3.43%

Lines of code

7234

increased by25.7%

No dependency changes