@fluentui/react-theme-provider - npm Package Compare versions

Comparing version 0.1.11 to 0.2.0

CHANGELOG.json

@@ -5,2 +5,17 @@ {
     {
+      "date": "Fri, 12 Jun 2020 18:26:16 GMT",
+      "tag": "@fluentui/react-theme-provider_v0.2.0",
+      "version": "0.2.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Exporting utility to generate inline styles based on tokens.",
+            "author": "[e-mail]",
+            "commit": "7026390333eeeb5bb1765bca68389b3b43312a49",
+            "package": "@fluentui/react-theme-provider"
+          }
+        ]
+      }
+    },
+    {
       "date": "Thu, 21 May 2020 12:34:43 GMT",
@@ -7,0 +22,0 @@ "tag": "@fluentui/react-theme-provider_v0.1.6",

CHANGELOG.md

 # Change Log - @fluentui/react-theme-provider
 
-This log was last generated on Thu, 21 May 2020 12:34:43 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Jun 2020 18:26:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-provider_v0.2.0)
+
+Fri, 12 Jun 2020 18:26:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme-provider_v0.1.6..@fluentui/react-theme-provider_v0.2.0)
+
+### Minor changes
+
+- Exporting utility to generate inline styles based on tokens. ([PR #13416](https://github.com/microsoft/fluentui/pull/13416) by [e-mail])
+
 ## [0.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-provider_v0.1.6)
@@ -8,0 +17,0 @@

dist/react-theme-provider.d.ts

 import * as React from 'react';
 
+export declare type ColorPlateSet = ColorTokens & ColorTokenStates;
+
 /**
- * Merges all themes on top of a blank initial theme and ensures the theme is fully qualified.
+ * A baseline set of color plates.
  */
-export declare const mergeThemes: (...themes: (ThemePrepared | Theme | undefined)[]) => ThemePrepared;
+export declare type ColorTokens = Partial<{
+    background: string;
+    contentColor: string;
+    subTextColor: string;
+    linkColor: string;
+    iconColor: string;
+    borderColor: string;
+    dividerColor: string;
+    focusColor: string;
+    focusInnerColor: string;
+}>;
 
 /**
- * Recursive partial type.
+ * A set of states for each color plate to use.
+ *
+ * Note:
+ *
+ * State names here align to a consistent naming convention:
+ *
+ * The component is _____
+ *
+ * Bad: "hover", Good: "hovered"
+ *
+ * Additional considerations:
+ *
+ * The term "active" in css means that the keyboard or mouse button
+ * which activates the component is pressed down. It is however ambiguous
+ * with a focused state, as the HTML object model refers to the focused
+ * element as the "activeElement". To resolve ambiguity and to be more
+ * compatible with other platforms reusing token names, we have decided to snap
+ * to "pressed".
  */
-export declare type RecursivePartial<T> = {
-    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
-};
+export declare type ColorTokenStates = Partial<{
+    hovered: ColorTokens;
+    pressed: ColorTokens;
+    disabled: ColorTokens;
+    checked: ColorTokens;
+    checkedHovered: ColorTokens;
+    checkedPressed: ColorTokens;
+}>;
 
+export declare type FontTokens = Partial<{
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+}>;
+
 /**
+ * Merges all themes on top of a blank initial theme and ensures the theme is fully qualified.
+ */
+export declare const mergeThemes: (...themes: (Theme | PartialTheme | undefined)[]) => Theme;
+
+/**
  * A partial theme, provided by the customer. The internal `createTheme` helper will fill in the rest.
  */
-export declare interface Theme extends RecursivePartial<ThemePrepared> {
+export declare interface PartialTheme extends RecursivePartial<Theme> {
 }
 
 /**
- * A baseline set of color plates.
+ * Recursive partial type.
  */
-export declare type ThemePlateSet = Partial<{
-    fill: ThemeStateSet;
-    text: ThemeStateSet;
-    subText: ThemeStateSet;
-    link: ThemeStateSet;
-    divider: ThemeStateSet;
-    [key: string]: ThemeStateSet;
-}>;
+export declare type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
+};
 
@@ -36,5 +76,5 @@ /**
  */
-export declare interface ThemePrepared {
+export declare interface Theme {
     tokens: {
-        body: ThemePlateSet;
+        body: ColorPlateSet & TokenSetType;
         [key: string]: TokenSetType;
@@ -57,36 +97,6 @@ };
      */
-    theme?: Theme;
+    theme?: PartialTheme | Theme;
 }
 
 /**
- * A set of states for each color plate to use.
- *
- * Note:
- *
- * State names here align to a consistent naming convention:
- *
- * The component is _____
- *
- * Bad: "hover", Good: "hovered"
- *
- * Additional considerations:
- *
- * The term "active" in css means that the keyboard or mouse button
- * which activates the component is pressed down. It is however ambiguous
- * with a focused state, as the HTML object model refers to the focused
- * element as the "activeElement". To resolve ambiguity and to be more
- * compatible with other platforms reusing token names, we have decided to snap
- * to "pressed".
- */
-export declare type ThemeStateSet = Partial<{
-    default: string;
-    hovered: string;
-    pressed: string;
-    disabled: string;
-    checked: string;
-    checkedHovered: string;
-    checkedPressed: string;
-}> | string;
-
-/**
  * A token set can provide a single string or object, mapping additional sub-parts of a token set.
@@ -98,7 +108,17 @@ */
 
+export declare const tokensToStyleObject: (tokens?: {
+    [key: string]: string | {
+        [key: string]: string | any | undefined;
+    } | undefined;
+} | undefined, prefix?: string | undefined, style?: {
+    [key: string]: string | number | undefined;
+}) => {
+    [key: string]: string | number | undefined;
+};
+
 /**
  * React hook for programatically accessing the theme.
  */
-export declare const useTheme: () => ThemePrepared;
+export declare const useTheme: () => Theme;
 
 export { }

etc/react-theme-provider.api.md

@@ -9,26 +9,49 @@ ## API Report File for "@fluentui/react-theme-provider"
 
+// @public (undocumented)
+export type ColorPlateSet = ColorTokens & ColorTokenStates;
+
 // @public
-export const mergeThemes: (...themes: (ThemePrepared | Theme | undefined)[]) => ThemePrepared;
+export type ColorTokens = Partial<{
+    background: string;
+    contentColor: string;
+    subTextColor: string;
+    linkColor: string;
+    iconColor: string;
+    borderColor: string;
+    dividerColor: string;
+    focusColor: string;
+    focusInnerColor: string;
+}>;
 
 // @public
-export type RecursivePartial<T> = {
-    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
-};
+export type ColorTokenStates = Partial<{
+    hovered: ColorTokens;
+    pressed: ColorTokens;
+    disabled: ColorTokens;
+    checked: ColorTokens;
+    checkedHovered: ColorTokens;
+    checkedPressed: ColorTokens;
+}>;
 
+// @public (undocumented)
+export type FontTokens = Partial<{
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+}>;
+
 // @public
-export interface Theme extends RecursivePartial<ThemePrepared> {
+export const mergeThemes: (...themes: (Theme | PartialTheme | undefined)[]) => Theme;
+
+// @public
+export interface PartialTheme extends RecursivePartial<Theme> {
 }
 
 // @public
-export type ThemePlateSet = Partial<{
-    fill: ThemeStateSet;
-    text: ThemeStateSet;
-    subText: ThemeStateSet;
-    link: ThemeStateSet;
-    divider: ThemeStateSet;
-    [key: string]: ThemeStateSet;
-}>;
+export type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
+};
 
 // @public
-export interface ThemePrepared {
+export interface Theme {
     // (undocumented)
@@ -38,3 +61,3 @@ stylesheets: string[];
     tokens: {
-        body: ThemePlateSet;
+        body: ColorPlateSet & TokenSetType;
         [key: string]: TokenSetType;
@@ -49,17 +72,6 @@ };
 export interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
-    theme?: Theme;
+    theme?: PartialTheme | Theme;
 }
 
 // @public
-export type ThemeStateSet = Partial<{
-    default: string;
-    hovered: string;
-    pressed: string;
-    disabled: string;
-    checked: string;
-    checkedHovered: string;
-    checkedPressed: string;
-}> | string;
-
-// @public
 export type TokenSetType = string | {
@@ -69,4 +81,15 @@ [key: string]: TokenSetType | undefined;
 
+// @public (undocumented)
+export const tokensToStyleObject: (tokens?: {
+    [key: string]: string | {
+        [key: string]: string | any | undefined;
+    } | undefined;
+} | undefined, prefix?: string | undefined, style?: {
+    [key: string]: string | number | undefined;
+}) => {
+    [key: string]: string | number | undefined;
+};
+
 // @public
-export const useTheme: () => ThemePrepared;
+export const useTheme: () => Theme;
 
@@ -73,0 +96,0 @@

lib-amd/createDefaultTheme.d.ts

@@ -1,5 +0,5 @@
-import { ThemePrepared } from './types';
+import { Theme } from './types';
 /**
  * Creates a blank initial theme.
  */
-export declare const createDefaultTheme: () => ThemePrepared;
+export declare const createDefaultTheme: () => Theme;

lib-amd/createDefaultTheme.js

@@ -11,9 +11,7 @@ define(["require", "exports"], function (require, exports) {
             body: {
-                fill: 'white',
-                text: 'black',
-                subText: '#333',
-                link: {
-                    default: 'blue',
-                },
-                divider: '#eee',
+                background: 'white',
+                contentColor: 'black',
+                captionColor: '#333',
+                linkColor: 'blue',
+                dividerColor: '#eee',
             },
@@ -20,0 +18,0 @@ },

lib-amd/index.d.ts

@@ -6,1 +6,2 @@ import './version';
 export * from './mergeThemes';
+export * from './tokensToStyleObject';

lib-amd/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./ThemeProvider", "./useTheme", "./mergeThemes", "./version"], function (require, exports, tslib_1, ThemeProvider_1, useTheme_1, mergeThemes_1) {
+define(["require", "exports", "tslib", "./ThemeProvider", "./useTheme", "./mergeThemes", "./tokensToStyleObject", "./version"], function (require, exports, tslib_1, ThemeProvider_1, useTheme_1, mergeThemes_1, tokensToStyleObject_1) {
     "use strict";
@@ -7,3 +7,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(mergeThemes_1, exports);
+    tslib_1.__exportStar(tokensToStyleObject_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-amd/mergeThemes.d.ts

@@ -1,5 +0,5 @@
-import { Theme, ThemePrepared } from './types';
+import { PartialTheme, Theme } from './types';
 /**
  * Merges all themes on top of a blank initial theme and ensures the theme is fully qualified.
  */
-export declare const mergeThemes: (...themes: (ThemePrepared | Theme | undefined)[]) => ThemePrepared;
+export declare const mergeThemes: (...themes: (Theme | PartialTheme | undefined)[]) => Theme;

lib-amd/ThemeContext.d.ts

 import * as React from 'react';
-import { ThemePrepared } from './types';
-export declare const ThemeContext: React.Context<ThemePrepared>;
+import { Theme } from './types';
+export declare const ThemeContext: React.Context<Theme>;

lib-amd/ThemeProvider.d.ts

 import * as React from 'react';
-import { Theme } from './types';
+import { PartialTheme, Theme } from './types';
 /**
@@ -10,3 +10,3 @@ * Props for the ThemeProvider component.
      */
-    theme?: Theme;
+    theme?: PartialTheme | Theme;
 }
@@ -13,0 +13,0 @@ /**

lib-amd/ThemeProvider.scss.d.ts

@@ -1,1 +0,1 @@
-export declare const root = "root_922b4660";
+export declare const root = "root_27ded02e";

lib-amd/ThemeProvider.scss.js

 define(["require", "exports", "@microsoft/load-themed-styles"], function (require, exports, load_themed_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    load_themed_styles_1.loadStyles([{ "rawString": ".root_922b4660{background:var(--body-fill);color:var(--body-text);font-family:var(--body-fontFamily);font-weight:var(--body-fontWeight);font-size:var(--body-fontSize);line-height:var(--body-fontLineHeight)}.root_922b4660>*{-webkit-box-sizing:border-box;box-sizing:border-box}" }]);
-    exports.root = "root_922b4660";
+    load_themed_styles_1.loadStyles([{ "rawString": ".root_27ded02e{background:var(--body-background);color:var(--body-contentColor);font-family:var(--body-fontFamily);font-weight:var(--body-fontWeight);font-size:var(--body-fontSize);line-height:var(--body-fontLineHeight)}.root_27ded02e>*{-webkit-box-sizing:border-box;box-sizing:border-box}:export{root:root_27ded02e}" }]);
+    exports.root = "root_27ded02e";
 });
 //# sourceMappingURL=ThemeProvider.scss.js.map

lib-amd/ThemeProvider.stories.js

@@ -8,4 +8,4 @@ define(["require", "exports", "react", "./ThemeProvider"], function (require, exports, React, ThemeProvider_1) {
             body: {
-                fill: 'white',
-                text: 'black',
+                background: 'white',
+                contentColor: 'black',
                 fontFamily: 'Segoe UI',
@@ -18,4 +18,4 @@ },
             body: {
-                fill: 'black',
-                text: 'white',
+                background: 'black',
+                contentColor: 'white',
             },
@@ -22,0 +22,0 @@ },

lib-amd/tokensToStyleObject.d.ts

@@ -1,5 +0,6 @@
-import { TokenSetType } from './types';
-export declare const tokensToStyleObject: (tokens: {
-    [key: string]: TokenSetType;
-}, prefix?: string | undefined, style?: {
+export declare const tokensToStyleObject: (tokens?: {
+    [key: string]: string | {
+        [key: string]: string | any | undefined;
+    } | undefined;
+} | undefined, prefix?: string | undefined, style?: {
     [key: string]: string | number | undefined;
@@ -6,0 +7,0 @@ }) => {

lib-amd/types.d.ts

 /**
+ * A baseline set of color plates.
+ */
+export declare type ColorTokens = Partial<{
+    background: string;
+    contentColor: string;
+    subTextColor: string;
+    linkColor: string;
+    iconColor: string;
+    borderColor: string;
+    dividerColor: string;
+    focusColor: string;
+    focusInnerColor: string;
+}>;
+/**
  * A set of states for each color plate to use.
@@ -21,22 +35,16 @@ *
  */
-export declare type ThemeStateSet = Partial<{
-    default: string;
-    hovered: string;
-    pressed: string;
-    disabled: string;
-    checked: string;
-    checkedHovered: string;
-    checkedPressed: string;
-}> | string;
-/**
- * A baseline set of color plates.
- */
-export declare type ThemePlateSet = Partial<{
-    fill: ThemeStateSet;
-    text: ThemeStateSet;
-    subText: ThemeStateSet;
-    link: ThemeStateSet;
-    divider: ThemeStateSet;
-    [key: string]: ThemeStateSet;
+export declare type ColorTokenStates = Partial<{
+    hovered: ColorTokens;
+    pressed: ColorTokens;
+    disabled: ColorTokens;
+    checked: ColorTokens;
+    checkedHovered: ColorTokens;
+    checkedPressed: ColorTokens;
 }>;
+export declare type FontTokens = Partial<{
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+}>;
+export declare type ColorPlateSet = ColorTokens & ColorTokenStates;
 /**
@@ -57,5 +65,5 @@ * A token set can provide a single string or object, mapping additional sub-parts of a token set.
  */
-export interface ThemePrepared {
+export interface Theme {
     tokens: {
-        body: ThemePlateSet;
+        body: ColorPlateSet & TokenSetType;
         [key: string]: TokenSetType;
@@ -68,3 +76,3 @@ };
  */
-export interface Theme extends RecursivePartial<ThemePrepared> {
+export interface PartialTheme extends RecursivePartial<Theme> {
 }

lib-amd/useTheme.d.ts

@@ -1,5 +0,5 @@
-import { ThemePrepared } from './types';
+import { Theme } from './types';
 /**
  * React hook for programatically accessing the theme.
  */
-export declare const useTheme: () => ThemePrepared;
+export declare const useTheme: () => Theme;

lib-amd/version.js

 define(["require", "exports", "@uifabric/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/react-theme-provider', '0.1.11');
+    set_version_1.setVersion('@fluentui/react-theme-provider', '0.2.0');
 });
 //# sourceMappingURL=version.js.map

lib-commonjs/createDefaultTheme.d.ts

@@ -1,5 +0,5 @@
-import { ThemePrepared } from './types';
+import { Theme } from './types';
 /**
  * Creates a blank initial theme.
  */
-export declare const createDefaultTheme: () => ThemePrepared;
+export declare const createDefaultTheme: () => Theme;

lib-commonjs/createDefaultTheme.js

@@ -10,9 +10,7 @@ "use strict";
         body: {
-            fill: 'white',
-            text: 'black',
-            subText: '#333',
-            link: {
-                default: 'blue',
-            },
-            divider: '#eee',
+            background: 'white',
+            contentColor: 'black',
+            captionColor: '#333',
+            linkColor: 'blue',
+            dividerColor: '#eee',
         },
@@ -19,0 +17,0 @@ },

lib-commonjs/index.d.ts

@@ -6,1 +6,2 @@ import './version';
 export * from './mergeThemes';
+export * from './tokensToStyleObject';

lib-commonjs/index.js

@@ -10,2 +10,3 @@ "use strict";
 tslib_1.__exportStar(require("./mergeThemes"), exports);
+tslib_1.__exportStar(require("./tokensToStyleObject"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/mergeThemes.d.ts

@@ -1,5 +0,5 @@
-import { Theme, ThemePrepared } from './types';
+import { PartialTheme, Theme } from './types';
 /**
  * Merges all themes on top of a blank initial theme and ensures the theme is fully qualified.
  */
-export declare const mergeThemes: (...themes: (ThemePrepared | Theme | undefined)[]) => ThemePrepared;
+export declare const mergeThemes: (...themes: (Theme | PartialTheme | undefined)[]) => Theme;

lib-commonjs/ThemeContext.d.ts

 import * as React from 'react';
-import { ThemePrepared } from './types';
-export declare const ThemeContext: React.Context<ThemePrepared>;
+import { Theme } from './types';
+export declare const ThemeContext: React.Context<Theme>;

lib-commonjs/ThemeProvider.d.ts

 import * as React from 'react';
-import { Theme } from './types';
+import { PartialTheme, Theme } from './types';
 /**
@@ -10,3 +10,3 @@ * Props for the ThemeProvider component.
      */
-    theme?: Theme;
+    theme?: PartialTheme | Theme;
 }
@@ -13,0 +13,0 @@ /**

lib-commonjs/ThemeProvider.scss.d.ts

@@ -1,1 +0,1 @@
-export declare const root = "root_922b4660";
+export declare const root = "root_27ded02e";

lib-commonjs/ThemeProvider.scss.js

@@ -5,4 +5,4 @@ "use strict";
 var load_themed_styles_1 = require("@microsoft/load-themed-styles");
-load_themed_styles_1.loadStyles([{ "rawString": ".root_922b4660{background:var(--body-fill);color:var(--body-text);font-family:var(--body-fontFamily);font-weight:var(--body-fontWeight);font-size:var(--body-fontSize);line-height:var(--body-fontLineHeight)}.root_922b4660>*{-webkit-box-sizing:border-box;box-sizing:border-box}" }]);
-exports.root = "root_922b4660";
+load_themed_styles_1.loadStyles([{ "rawString": ".root_27ded02e{background:var(--body-background);color:var(--body-contentColor);font-family:var(--body-fontFamily);font-weight:var(--body-fontWeight);font-size:var(--body-fontSize);line-height:var(--body-fontLineHeight)}.root_27ded02e>*{-webkit-box-sizing:border-box;box-sizing:border-box}:export{root:root_27ded02e}" }]);
+exports.root = "root_27ded02e";
 //# sourceMappingURL=ThemeProvider.scss.js.map

lib-commonjs/ThemeProvider.stories.js

@@ -9,4 +9,4 @@ "use strict";
         body: {
-            fill: 'white',
-            text: 'black',
+            background: 'white',
+            contentColor: 'black',
             fontFamily: 'Segoe UI',
@@ -19,4 +19,4 @@ },
         body: {
-            fill: 'black',
-            text: 'white',
+            background: 'black',
+            contentColor: 'white',
         },
@@ -23,0 +23,0 @@ },

lib-commonjs/tokensToStyleObject.d.ts

@@ -1,5 +0,6 @@
-import { TokenSetType } from './types';
-export declare const tokensToStyleObject: (tokens: {
-    [key: string]: TokenSetType;
-}, prefix?: string | undefined, style?: {
+export declare const tokensToStyleObject: (tokens?: {
+    [key: string]: string | {
+        [key: string]: string | any | undefined;
+    } | undefined;
+} | undefined, prefix?: string | undefined, style?: {
     [key: string]: string | number | undefined;
@@ -6,0 +7,0 @@ }) => {

lib-commonjs/types.d.ts

 /**
+ * A baseline set of color plates.
+ */
+export declare type ColorTokens = Partial<{
+    background: string;
+    contentColor: string;
+    subTextColor: string;
+    linkColor: string;
+    iconColor: string;
+    borderColor: string;
+    dividerColor: string;
+    focusColor: string;
+    focusInnerColor: string;
+}>;
+/**
  * A set of states for each color plate to use.
@@ -21,22 +35,16 @@ *
  */
-export declare type ThemeStateSet = Partial<{
-    default: string;
-    hovered: string;
-    pressed: string;
-    disabled: string;
-    checked: string;
-    checkedHovered: string;
-    checkedPressed: string;
-}> | string;
-/**
- * A baseline set of color plates.
- */
-export declare type ThemePlateSet = Partial<{
-    fill: ThemeStateSet;
-    text: ThemeStateSet;
-    subText: ThemeStateSet;
-    link: ThemeStateSet;
-    divider: ThemeStateSet;
-    [key: string]: ThemeStateSet;
+export declare type ColorTokenStates = Partial<{
+    hovered: ColorTokens;
+    pressed: ColorTokens;
+    disabled: ColorTokens;
+    checked: ColorTokens;
+    checkedHovered: ColorTokens;
+    checkedPressed: ColorTokens;
 }>;
+export declare type FontTokens = Partial<{
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+}>;
+export declare type ColorPlateSet = ColorTokens & ColorTokenStates;
 /**
@@ -57,5 +65,5 @@ * A token set can provide a single string or object, mapping additional sub-parts of a token set.
  */
-export interface ThemePrepared {
+export interface Theme {
     tokens: {
-        body: ThemePlateSet;
+        body: ColorPlateSet & TokenSetType;
         [key: string]: TokenSetType;
@@ -68,3 +76,3 @@ };
  */
-export interface Theme extends RecursivePartial<ThemePrepared> {
+export interface PartialTheme extends RecursivePartial<Theme> {
 }

lib-commonjs/useTheme.d.ts

@@ -1,5 +0,5 @@
-import { ThemePrepared } from './types';
+import { Theme } from './types';
 /**
  * React hook for programatically accessing the theme.
  */
-export declare const useTheme: () => ThemePrepared;
+export declare const useTheme: () => Theme;

lib-commonjs/version.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// @fluentui/react-theme-provider@0.1.11
+// @fluentui/react-theme-provider@0.2.0
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 var set_version_1 = require("@uifabric/set-version");
-set_version_1.setVersion('@fluentui/react-theme-provider', '0.1.11');
+set_version_1.setVersion('@fluentui/react-theme-provider', '0.2.0');
 //# sourceMappingURL=version.js.map

lib/createDefaultTheme.d.ts

@@ -1,5 +0,5 @@
-import { ThemePrepared } from './types';
+import { Theme } from './types';
 /**
  * Creates a blank initial theme.
  */
-export declare const createDefaultTheme: () => ThemePrepared;
+export declare const createDefaultTheme: () => Theme;

lib/createDefaultTheme.js

@@ -8,9 +8,7 @@ /**
         body: {
-            fill: 'white',
-            text: 'black',
-            subText: '#333',
-            link: {
-                default: 'blue',
-            },
-            divider: '#eee',
+            background: 'white',
+            contentColor: 'black',
+            captionColor: '#333',
+            linkColor: 'blue',
+            dividerColor: '#eee',
         },
@@ -17,0 +15,0 @@ },

lib/index.d.ts

@@ -6,1 +6,2 @@ import './version';
 export * from './mergeThemes';
+export * from './tokensToStyleObject';

lib/index.js

@@ -5,2 +5,3 @@ import './version';
 export * from './mergeThemes';
+export * from './tokensToStyleObject';
 //# sourceMappingURL=index.js.map

lib/mergeThemes.d.ts

@@ -1,5 +0,5 @@
-import { Theme, ThemePrepared } from './types';
+import { PartialTheme, Theme } from './types';
 /**
  * Merges all themes on top of a blank initial theme and ensures the theme is fully qualified.
  */
-export declare const mergeThemes: (...themes: (ThemePrepared | Theme | undefined)[]) => ThemePrepared;
+export declare const mergeThemes: (...themes: (Theme | PartialTheme | undefined)[]) => Theme;

lib/ThemeContext.d.ts

 import * as React from 'react';
-import { ThemePrepared } from './types';
-export declare const ThemeContext: React.Context<ThemePrepared>;
+import { Theme } from './types';
+export declare const ThemeContext: React.Context<Theme>;

lib/ThemeProvider.d.ts

 import * as React from 'react';
-import { Theme } from './types';
+import { PartialTheme, Theme } from './types';
 /**
@@ -10,3 +10,3 @@ * Props for the ThemeProvider component.
      */
-    theme?: Theme;
+    theme?: PartialTheme | Theme;
 }
@@ -13,0 +13,0 @@ /**

lib/ThemeProvider.scss.d.ts

@@ -1,1 +0,1 @@
-export declare const root = "root_922b4660";
+export declare const root = "root_27ded02e";

lib/ThemeProvider.scss.js

 /* tslint:disable */
 import { loadStyles } from '@microsoft/load-themed-styles';
-loadStyles([{ "rawString": ".root_922b4660{background:var(--body-fill);color:var(--body-text);font-family:var(--body-fontFamily);font-weight:var(--body-fontWeight);font-size:var(--body-fontSize);line-height:var(--body-fontLineHeight)}.root_922b4660>*{-webkit-box-sizing:border-box;box-sizing:border-box}" }]);
-export var root = "root_922b4660";
+loadStyles([{ "rawString": ".root_27ded02e{background:var(--body-background);color:var(--body-contentColor);font-family:var(--body-fontFamily);font-weight:var(--body-fontWeight);font-size:var(--body-fontSize);line-height:var(--body-fontLineHeight)}.root_27ded02e>*{-webkit-box-sizing:border-box;box-sizing:border-box}:export{root:root_27ded02e}" }]);
+export var root = "root_27ded02e";
 //# sourceMappingURL=ThemeProvider.scss.js.map

lib/ThemeProvider.stories.js

@@ -7,4 +7,4 @@ import * as React from 'react';
         body: {
-            fill: 'white',
-            text: 'black',
+            background: 'white',
+            contentColor: 'black',
             fontFamily: 'Segoe UI',
@@ -17,4 +17,4 @@ },
         body: {
-            fill: 'black',
-            text: 'white',
+            background: 'black',
+            contentColor: 'white',
         },
@@ -21,0 +21,0 @@ },

lib/tokensToStyleObject.d.ts

@@ -1,5 +0,6 @@
-import { TokenSetType } from './types';
-export declare const tokensToStyleObject: (tokens: {
-    [key: string]: TokenSetType;
-}, prefix?: string | undefined, style?: {
+export declare const tokensToStyleObject: (tokens?: {
+    [key: string]: string | {
+        [key: string]: string | any | undefined;
+    } | undefined;
+} | undefined, prefix?: string | undefined, style?: {
     [key: string]: string | number | undefined;
@@ -6,0 +7,0 @@ }) => {

lib/types.d.ts

 /**
+ * A baseline set of color plates.
+ */
+export declare type ColorTokens = Partial<{
+    background: string;
+    contentColor: string;
+    subTextColor: string;
+    linkColor: string;
+    iconColor: string;
+    borderColor: string;
+    dividerColor: string;
+    focusColor: string;
+    focusInnerColor: string;
+}>;
+/**
  * A set of states for each color plate to use.
@@ -21,22 +35,16 @@ *
  */
-export declare type ThemeStateSet = Partial<{
-    default: string;
-    hovered: string;
-    pressed: string;
-    disabled: string;
-    checked: string;
-    checkedHovered: string;
-    checkedPressed: string;
-}> | string;
-/**
- * A baseline set of color plates.
- */
-export declare type ThemePlateSet = Partial<{
-    fill: ThemeStateSet;
-    text: ThemeStateSet;
-    subText: ThemeStateSet;
-    link: ThemeStateSet;
-    divider: ThemeStateSet;
-    [key: string]: ThemeStateSet;
+export declare type ColorTokenStates = Partial<{
+    hovered: ColorTokens;
+    pressed: ColorTokens;
+    disabled: ColorTokens;
+    checked: ColorTokens;
+    checkedHovered: ColorTokens;
+    checkedPressed: ColorTokens;
 }>;
+export declare type FontTokens = Partial<{
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+}>;
+export declare type ColorPlateSet = ColorTokens & ColorTokenStates;
 /**
@@ -57,5 +65,5 @@ * A token set can provide a single string or object, mapping additional sub-parts of a token set.
  */
-export interface ThemePrepared {
+export interface Theme {
     tokens: {
-        body: ThemePlateSet;
+        body: ColorPlateSet & TokenSetType;
         [key: string]: TokenSetType;
@@ -68,3 +76,3 @@ };
  */
-export interface Theme extends RecursivePartial<ThemePrepared> {
+export interface PartialTheme extends RecursivePartial<Theme> {
 }

lib/useTheme.d.ts

@@ -1,5 +0,5 @@
-import { ThemePrepared } from './types';
+import { Theme } from './types';
 /**
  * React hook for programatically accessing the theme.
  */
-export declare const useTheme: () => ThemePrepared;
+export declare const useTheme: () => Theme;

lib/version.js

@@ -1,5 +0,5 @@
-// @fluentui/react-theme-provider@0.1.11
+// @fluentui/react-theme-provider@0.2.0
 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
 import { setVersion } from '@uifabric/set-version';
-setVersion('@fluentui/react-theme-provider', '0.1.11');
+setVersion('@fluentui/react-theme-provider', '0.2.0');
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@fluentui/react-theme-provider",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "Fluent UI React theme provider component, hook, and theme related utilities.",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

92786

increased by4.89%

Lines of code

1108

increased by5.62%

No dependency changes