Update theme instances to contain components (scopedSettings) (#15482)

* update theme instances to support being passed to ThemeProvider

* Change files

* update mds

* fix nit

change/@uifabric-azure-themes-2020-10-12-13-37-09-xgao-theme-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update Theme instances to contain components/scopedSettings.",
+  "packageName": "@uifabric/azure-themes",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-12T20:37:00.499Z"
+}

change/@uifabric-mdl2-theme-2020-10-12-13-37-09-xgao-theme-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update Theme instances to contain components/scopedSettings",
+  "packageName": "@uifabric/mdl2-theme",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-12T20:37:07.538Z"
+}

change/@uifabric-theme-samples-2020-10-12-13-37-09-xgao-theme-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update Theme instances to contain components/scopedSettings",
+  "packageName": "@uifabric/theme-samples",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-12T20:37:09.681Z"
+}

packages/azure-themes/README.md

@@ -6,17 +6,34 @@
 The Azure themes require the following import statements:
 
 ```js
-import { Fabric, Customizer } from '@fluentui/react';
-import { AzureCustomizationsLight, AzureCustomizationsDark } from '@uifabric/azure-themes';
+import {
+  AzureThemeDark,
+  AzureThemeLight,
+  AzureCustomizationsLight,
+  AzureCustomizationsDark,
+} from '@uifabric/azure-themes';
 ```
 
-The theme may subsequently be set to either the Azure or Azure-Dark themes
+The theme may subsequently be set to either the Azure or Azure-Dark themes.
+
+In case of applying theme using `Customizer`:
 
 ```jsx
-  const customizations = AzureCustomizationsDark // or alternatively AzureCustomizationsLight
+  import { Customizer } from '@fluentui/react';
+  const customizations = AzureCustomizationsDark; // or alternatively AzureCustomizationsLight
+
   <Customizer {...customizations}>
-    <Fabric>
-        <div>{child component}</div>
-    </Fabric>
+    <div>{child component}</div>
   </Customizer>
 ```
+
+In case of applying theme using `ThemeProvider`:
+
+```jsx
+  import { ThemeProvider } from '@fluentui/react-theme-provider';
+  const theme = AzureThemeDark; // or alternatively AzureThemeLight
+
+  <ThemeProvider theme={theme}>
+    <div>{child component}</div>
+  </ThemeProvider>
+```

packages/azure-themes/package.json

@@ -30,6 +30,7 @@
     "react": "16.8.6"
   },
   "dependencies": {
+    "@fluentui/theme": "^1.4.0",
     "@uifabric/merge-styles": "^7.19.1",
     "@uifabric/set-version": "^7.0.23",
     "office-ui-fabric-react": "^7.146.1",

packages/azure-themes/src/AzureCustomizations.ts

@@ -3,32 +3,36 @@ import { AzureThemeDark } from './azure/AzureThemeDark';
 import { AzureThemeLight } from './azure/AzureThemeLight';
 import { AzureThemeHighContrastLight } from './azure/AzureThemeHighContrastLight';
 import { AzureThemeHighContrastDark } from './azure/AzureThemeHighContrastDark';
-import { AzureStyleSettings } from './azure/AzureStyleSettings';
+
+const { components: darkScopedSettings, ...darkThemeSettings } = AzureThemeDark;
+const { components: lightScopedSettings, ...lightThemeSettings } = AzureThemeLight;
+const { components: hcLightScopedSettings, ...hcLightThemeSettings } = AzureThemeHighContrastLight;
+const { components: hcDarkScopedSettings, ...hcDarkThemeSettings } = AzureThemeHighContrastDark;
 
 export const AzureCustomizationsDark: ICustomizations = {
   settings: {
-    theme: { ...AzureThemeDark },
+    theme: darkThemeSettings,
   },
-  scopedSettings: { ...AzureStyleSettings(AzureThemeDark) },
+  scopedSettings: { ...darkScopedSettings },
 };
 
 export const AzureCustomizationsLight: ICustomizations = {
   settings: {
-    theme: { ...AzureThemeLight },
+    theme: lightThemeSettings,
   },
-  scopedSettings: { ...AzureStyleSettings(AzureThemeLight) },
+  scopedSettings: { ...lightScopedSettings },
 };
 
 export const AzureCustomizationsHighContrastLight: ICustomizations = {
   settings: {
-    theme: { ...AzureThemeHighContrastLight },
+    theme: hcLightThemeSettings,
   },
-  scopedSettings: { ...AzureStyleSettings(AzureThemeHighContrastLight) },
+  scopedSettings: { ...hcLightScopedSettings },
 };
 
 export const AzureCustomizationsHighContrastDark: ICustomizations = {
   settings: {
-    theme: { ...AzureThemeHighContrastDark },
+    theme: hcDarkThemeSettings,
   },
-  scopedSettings: { ...AzureStyleSettings(AzureThemeHighContrastDark) },
+  scopedSettings: { ...hcDarkScopedSettings },
 };

packages/azure-themes/src/azure/AzureThemeDark.ts

@@ -1,8 +1,9 @@
-import { createTheme, ITheme } from 'office-ui-fabric-react';
+import { createTheme, Theme } from '@fluentui/theme';
 import { CommonSemanticColors, DarkSemanticColors } from './AzureColors';
 import { IExtendedSemanticColors } from './IExtendedSemanticColors';
 import { FontSizes } from './AzureType';
 import * as StyleConstants from './Constants';
+import { AzureStyleSettings } from './AzureStyleSettings';
 
 const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   bodyBackground: DarkSemanticColors.background,
@@ -125,7 +126,7 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   linkBorderStyle: 'dashed',
 };
 
-export const AzureThemeDark: ITheme = createTheme({
+export const AzureThemeDark: Theme = createTheme({
   fonts: {
     medium: {
       fontFamily: StyleConstants.fontFamily,
@@ -148,3 +149,5 @@ export const AzureThemeDark: ITheme = createTheme({
   },
   semanticColors: darkExtendedSemanticColors,
 });
+
+AzureThemeDark.components = AzureStyleSettings(AzureThemeDark);

packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts

@@ -1,8 +1,9 @@
-import { createTheme, ITheme } from 'office-ui-fabric-react';
+import { createTheme, Theme } from '@fluentui/theme';
 import { CommonSemanticColors, HighContrastDarkSemanticColors } from './AzureColors';
 import { IExtendedSemanticColors } from './IExtendedSemanticColors';
 import { FontSizes } from './AzureType';
 import * as StyleConstants from './Constants';
+import { AzureStyleSettings } from './AzureStyleSettings';
 
 const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   bodyBackground: HighContrastDarkSemanticColors.background,
@@ -125,7 +126,7 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
   linkBorderStyle: 'dashed',
 };
 
-export const AzureThemeHighContrastDark: ITheme = createTheme({
+export const AzureThemeHighContrastDark: Theme = createTheme({
   fonts: {
     medium: {
       fontFamily: StyleConstants.fontFamily,
@@ -148,3 +149,5 @@ export const AzureThemeHighContrastDark: ITheme = createTheme({
   },
   semanticColors: highContrastDarkExtendedSemanticColors,
 });
+
+AzureThemeHighContrastDark.components = AzureStyleSettings(AzureThemeHighContrastDark);

packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts

@@ -1,8 +1,9 @@
-import { createTheme, ITheme } from 'office-ui-fabric-react';
+import { createTheme, Theme } from '@fluentui/theme';
 import { CommonSemanticColors, HighContrastLightSemanticColors } from './AzureColors';
 import { IExtendedSemanticColors } from './IExtendedSemanticColors';
 import { FontSizes } from './AzureType';
 import * as StyleConstants from './Constants';
+import { AzureStyleSettings } from './AzureStyleSettings';
 
 const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   bodyBackground: HighContrastLightSemanticColors.background,
@@ -126,7 +127,7 @@ const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors>
   linkBorderStyle: 'dashed',
 };
 
-export const AzureThemeHighContrastLight: ITheme = createTheme({
+export const AzureThemeHighContrastLight: Theme = createTheme({
   fonts: {
     medium: {
       fontFamily: StyleConstants.fontFamily,
@@ -149,3 +150,5 @@ export const AzureThemeHighContrastLight: ITheme = createTheme({
   },
   semanticColors: highContrastLightExtendedSemanticColors,
 });
+
+AzureThemeHighContrastLight.components = AzureStyleSettings(AzureThemeHighContrastLight);

packages/azure-themes/src/azure/AzureThemeLight.ts

@@ -1,8 +1,9 @@
-import { createTheme, ITheme } from 'office-ui-fabric-react';
+import { createTheme, Theme } from '@fluentui/theme';
 import { CommonSemanticColors, LightSemanticColors } from './AzureColors';
 import { IExtendedSemanticColors } from './IExtendedSemanticColors';
 import { FontSizes } from './AzureType';
 import * as StyleConstants from './Constants';
+import { AzureStyleSettings } from './AzureStyleSettings';
 
 const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   bodyBackground: LightSemanticColors.background,
@@ -125,7 +126,7 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   linkBorderStyle: 'dashed',
 };
 
-export const AzureThemeLight: ITheme = createTheme({
+export const AzureThemeLight: Theme = createTheme({
   fonts: {
     medium: {
       fontFamily: StyleConstants.fontFamily,
@@ -148,3 +149,5 @@ export const AzureThemeLight: ITheme = createTheme({
   },
   semanticColors: lightExtendedSemanticColors,
 });
+
+AzureThemeLight.components = AzureStyleSettings(AzureThemeLight);

packages/mdl2-theme/README.md

@@ -8,5 +8,25 @@ This package contains MDL2 coloring, theming and styling for use with Fluent UI
 To import MDL2 theme:
 
 ```js
-import { MDL2Customizations } from '@uifabric/mdl2-theme';
+import { MDL2Theme, MDL2Customizations } from '@uifabric/mdl2-theme';
+```
+
+In case of applying theme using `Customizer`:
+
+```jsx
+  import { Customizer } from '@fluentui/react';
+
+  <Customizer {...MDL2Customizations}>
+    <div>{child component}</div>
+  </Customizer>
+```
+
+In case of applying theme using `ThemeProvider`:
+
+```jsx
+  import { ThemeProvider } from '@fluentui/react-theme-provider';
+
+  <ThemeProvider theme={MDL2Theme}>
+    <div>{child component}</div>
+  </ThemeProvider>
 ```

packages/mdl2-theme/package.json

@@ -26,6 +26,7 @@
     "@uifabric/build": "^7.0.0"
   },
   "dependencies": {
+    "@fluentui/theme": "^1.4.0",
     "@uifabric/set-version": "^7.0.23",
     "@uifabric/styling": "^7.16.11",
     "@uifabric/variants": "^7.2.24",

packages/mdl2-theme/src/MDL2Customizations.ts

@@ -1,13 +1,14 @@
 import { MDL2Theme } from './mdl2/MDL2Theme';
-import { MDL2Styles } from './mdl2/MDL2Styles';
 import { ICustomizations } from 'office-ui-fabric-react';
 import { addVariants } from '@uifabric/variants';
 
+const { components: scopedSettings, ...theme } = MDL2Theme;
+
 export const MDL2Customizations: ICustomizations = {
   settings: {
-    theme: { ...MDL2Theme },
+    theme,
   },
-  scopedSettings: { ...MDL2Styles },
+  scopedSettings: { ...scopedSettings },
 };
 
 addVariants(MDL2Customizations.settings.theme);

packages/mdl2-theme/src/mdl2/MDL2Theme.ts

@@ -1,7 +1,8 @@
-import { createTheme, ITheme, FontWeights } from '@uifabric/styling';
+import { createTheme, Theme, FontWeights } from '@fluentui/theme';
+import { MDL2Styles } from './MDL2Styles';
 import { FontSizes } from './MDL2Type';
 
-export const MDL2Theme: ITheme = createTheme({
+export const MDL2Theme: Theme = createTheme({
   palette: {
     neutralDark: '#212121',
     neutralPrimary: '#333333',
@@ -79,6 +80,7 @@ export const MDL2Theme: ITheme = createTheme({
       fontWeight: FontWeights.light,
     },
   },
+  components: MDL2Styles,
 });
 
 export default MDL2Theme;

packages/mdl2-theme/src/mdl2/styles/Label.styles.ts

@@ -1,4 +1,4 @@
-import { FontWeights } from '@uifabric/styling';
+import { FontWeights } from '@fluentui/theme';
 
 export const LabelStyles = {
   root: {

packages/theme-samples/package.json

@@ -26,6 +26,7 @@
     "@uifabric/build": "^7.0.0"
   },
   "dependencies": {
+    "@fluentui/theme": "^1.4.0",
     "@uifabric/set-version": "^7.0.23",
     "@uifabric/variants": "^7.2.24",
     "office-ui-fabric-react": "^7.146.1",