Merge branch 'next/fluentui' into merge/main-to-next

Author: gavinbarron

packages/mgt-components/src/index.ts

@@ -7,3 +7,4 @@
 
 export * from './components/components';
 export * from './graph/types';
+export * from './styles/theme-manager';

packages/mgt-spfx-utils/package.json

@@ -5,6 +5,10 @@
   "main": "./dist/es6/index.js",
   "types": "./dist/es6/index.d.ts",
   "module": "./dist/es6/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
   "keywords": [
     "microsoft graph",
     "microsoft graph toolkit",
@@ -39,5 +43,8 @@
   "devDependencies": {},
   "resolutions": {
     "react": "16.13.1"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

samples/sp-webpart/package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "@microsoft/mgt-element": "*",
     "@microsoft/mgt-react": "*",
-    "@microsoft/mgt-spfx": "*",
     "@microsoft/mgt-spfx-utils": "*",
     "@microsoft/mgt-sharepoint-provider": "*",
     "@microsoft/sp-core-library": "1.16.1",

stories/components/theme-toggle/themeToggle.js

@@ -57,6 +57,26 @@ body {
   </style>
 `;
 
+export const themingWithoutToggle = () => html`
+  <mgt-login id="login-one"></mgt-login>
+  <mgt-login id="login-two"></mgt-login>
+  <mgt-login id="login-three"></mgt-login>
+
+  <!-- The login components are in the default light theme on a light
+  background. We are setting the component with id "login-two" to the dark
+  theme colors using JavaScript. -->
+
+  <script>
+    import { applyTheme } from '@microsoft/mgt';
+    const loginTwo = document.querySelector("#login-two");
+
+    if(loginTwo){
+      // apply the dark theme on the second login component only.
+      applyTheme('dark', loginTwo)
+    }
+  </script>
+`;
+
 export const localization = () => html`
 <mgt-theme-toggle></mgt-theme-toggle>
   <style>