Merge pull request #1606 from pnp/don-kirkham-wp1

Fixed readme and included #1602

samples/react-themes/.yo-rc.json

@@ -1,8 +1,12 @@
 {
   "@microsoft/generator-sharepoint": {
+    "isCreatingSolution": false,
+    "environment": "spo",
+    "version": "1.11.0",
     "libraryName": "react-themes",
-    "framework": "react",
+    "libraryId": "040f676c-4003-4436-adfb-97da632413c3",
-    "version": "1.0.2",
+    "packageManager": "npm",
-    "libraryId": "46489282-ffa9-4f00-939c-6fff916b182f"
+    "isDomainIsolated": false,
+    "componentType": "webpart"
   }
 }

samples/react-themes/README.md

@@ -13,15 +13,21 @@ extensions:
   - react
   createdDate: 5/1/2017 12:00:00 AM
 ---
-# SharePoint Themes Client Side Web Part
+# SharePoint Themes 
 
 ## Summary
-This web part illustrates how to use SharePoint Theme variables in custom web parts.
+
+The Themes web part illustrates how to use SharePoint Theme variables in custom web parts.
 
 ![SharePoint Themes Client Side Web Part](./assets/themes.png)
 
+The Section Theme web part illustrates how to use theme variant variables to style web parts based on selected site theme and section background colors.
+
+![SharePoint Section Themes Client Side Web Part](./assets/SectionThemes.png)
+
 ## Used SharePoint Framework Version
-![drop](https://img.shields.io/badge/drop-ga-green.svg)
+
+![SPFx 1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
 
 ## Applies to
 
@@ -29,7 +35,9 @@ This web part illustrates how to use SharePoint Theme variables in custom web pa
 
 Solution|Author(s)
 --------|---------
-react-themes | Alex Terentiev ([Sharepointalist Inc.](http://www.sharepointalist.com), [AJIXuMuK](https://github.com/AJIXuMuK)), Artur Kukharevich ([akukharevich](https://github.com/akukharevich))
+react-themes | Alex Terentiev ([Sharepointalist Inc.](http://www.sharepointalist.com)[AJIXuMuK](https://github.com/AJIXuMuK))
+react-themes | Artur Kukharevich ([akukharevich](https://github.com/akukharevich))
+react-themes | Don Kirkham ([@DonKirkham](https://twitter.com/DonKirkham))
 
 ## Version history
 
@@ -37,14 +45,18 @@ Version|Date|Comments
 -------|----|--------
 1.0|April 27, 2017|Initial release
 1.1|May 8, 2017| themePrimary variable example added
+1.2|Nov 6, 2020| Upgrade to 1.11.0 (Don Kirkham)
+1.3|Nov 16, 2020| Section awareness web part added (Don Kirkham)
 
 ## Disclaimer
+
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
 ## Features
-This project contains Client-Side Web Part built on the SharePoint Framework illustrating how to use SharePoint themes variables to style custom web parts
 
-## Building the code
+This project contains two client-side web parts built on the SharePoint Framework illustrating multiple techniques showing how to use SharePoint themes variables and variant variables to style custom web parts
+
+## Path to Awesomeness
 
 ```bash
 git clone the repo
@@ -53,10 +65,4 @@ npm i -g gulp
 gulp
 ```
 
-This package produces the following:
-
-* lib/* - intermediate-stage commonjs build artifacts
-* dist/* - the bundled script, along with other resources
-* deploy/* - all resources which should be uploaded to a CDN.
-
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-themes" />

samples/react-themes/config/config.json

@@ -1,13 +1,28 @@
 {
-  "entries": [
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "themes-web-part": {
+      "components": [
         {
-      "entry": "./lib/webparts/themes/ThemesWebPart.js",
+          "entrypoint": "./lib/webparts/themes/ThemesWebPart.js",
-      "manifest": "./src/webparts/themes/ThemesWebPart.manifest.json",
+          "manifest": "./src/webparts/themes/ThemesWebPart.manifest.json"
-      "outputPath": "./dist/themes.bundle.js"
         }
-  ],
+      ]
+    },
+    "section-theme-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/sectionTheme/SectionThemeWebPart.js",
+          "manifest": "./src/webparts/sectionTheme/SectionThemeWebPart.manifest.json"
+        }
+      ]
+    }
+  },
   "externals": {},
   "localizedResources": {
-    "themesStrings": "webparts/themes/loc/{locale}.js"
+    "ThemesStrings": "./src/webparts/themes/loc/{locale}.js",
+    "SectionThemeWebPartStrings": "lib/webparts/sectionTheme/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
   }
 }

samples/react-themes/config/copy-assets.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
   "deployCdnPath": "temp/deploy"
 }

samples/react-themes/config/deploy-azure-storage.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
   "workingDir": "./temp/deploy/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "react-themes",

samples/react-themes/config/package-solution.json

@@ -1,8 +1,18 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "react-themes-client-side-solution",
     "id": "46489282-ffa9-4f00-939c-6fff916b182f",
-    "version": "1.0.0.0"
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": ""
+    }
   },
   "paths": {
     "zippedPackage": "solution/react-themes.sppkg"

samples/react-themes/config/serve.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "initialPage": "https://localhost:5432/workbench",
   "https": true,

samples/react-themes/config/tslint.json

@@ -1,45 +0,0 @@
-{
-  // Display errors as warnings
-  "displayAsWarning": true,
-  // The TSLint task may have been configured with several custom lint rules
-  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
-  // project). If true, this flag will deactivate any of these rules.
-  "removeExistingRules": true,
-  // When true, the TSLint task is configured with some default TSLint "rules.":
-  "useDefaultConfigAsBase": false,
-  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
-  // which are active, other than the list of rules below.
-  "lintConfig": {
-    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
-    "rules": {
-      "class-name": false,
-      "export-name": false,
-      "forin": false,
-      "label-position": false,
-      "member-access": true,
-      "no-arg": false,
-      "no-console": false,
-      "no-construct": false,
-      "no-duplicate-case": true,
-      "no-duplicate-variable": true,
-      "no-eval": false,
-      "no-function-expression": true,
-      "no-internal-module": true,
-      "no-shadowed-variable": true,
-      "no-switch-case-fall-through": true,
-      "no-unnecessary-semicolons": true,
-      "no-unused-expression": true,
-      "no-unused-imports": true,
-      "no-use-before-declare": true,
-      "no-with-statement": true,
-      "semicolon": true,
-      "trailing-comma": false,
-      "typedef": false,
-      "typedef-whitespace": false,
-      "use-named-parameter": true,
-      "valid-typeof": true,
-      "variable-name": false,
-      "whitespace": false
-    }
-  }
-}

samples/react-themes/config/write-manifests.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
   "cdnBasePath": "<!-- PATH TO CDN -->"
 }

samples/react-themes/gulpfile.js

@@ -1,6 +1,9 @@
 'use strict';
 
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 
-build.initialize(gulp);
+build.addSuppression(
+  `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
+);
+
+build.initialize(require("gulp"));

samples/react-themes/package.json

@@ -6,25 +6,30 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "1.11.0",
-    "@microsoft/sp-core-library": "~1.0.0",
+    "@microsoft/sp-lodash-subset": "1.11.0",
-    "@microsoft/sp-webpart-base": "~1.0.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
-    "@types/react": "0.14.46",
+    "@microsoft/sp-property-pane": "1.11.0",
-    "@types/react-addons-shallow-compare": "0.14.17",
+    "@microsoft/sp-webpart-base": "1.11.0",
-    "@types/react-addons-test-utils": "0.14.15",
+    "@pnp/spfx-controls-react": "^2.1.0",
-    "@types/react-addons-update": "0.14.14",
+    "@uifabric/utilities": "^7.33.2",
-    "@types/react-dom": "0.14.18",
+    "react": "16.8.5",
-    "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "react-dom": "16.8.5"
-    "react": "15.4.2",
-    "react-dom": "15.4.2"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.0.1",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-module-interfaces": "~1.0.0",
+    "@microsoft/sp-build-web": "1.11.0",
-    "@microsoft/sp-webpart-workbench": "~1.0.0",
+    "@microsoft/sp-module-interfaces": "1.11.0",
-    "gulp": "~3.9.1",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
-    "@types/chai": ">=3.4.34 <3.6.0",
+    "@microsoft/sp-tslint-rules": "1.11.0",
-    "@types/mocha": ">=2.2.33 <2.6.0"
+    "@types/es6-promise": "0.0.33",
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
+    "@types/webpack-env": "1.13.1",
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
   },
   "scripts": {
     "build": "gulp bundle",

samples/react-themes/src/index.ts

@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler

samples/react-themes/src/webparts/sectionTheme/SectionThemeWebPart.manifest.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "a62d3ca8-e38c-444b-b236-72ecd538d244",
+  "alias": "SectionThemeWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart"],
+  "supportsThemeVariants": true,
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "Section Theme" },
+    "description": { "default": "Webpart updates styles based on section style" },
+    "officeFabricIconFontName": "BackgroundColor",
+    "properties": {
+      "description": "SectionTheme"
+    }
+  }]
+}

samples/react-themes/src/webparts/sectionTheme/SectionThemeWebPart.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-property-pane';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+import * as strings from 'SectionThemeWebPartStrings';
+import SectionTheme from './components/SectionTheme';
+import { ISectionThemeProps } from './components/ISectionThemeProps';
+
+import {
+  ThemeProvider,
+  ThemeChangedEventArgs,
+  IReadonlyTheme,
+  ISemanticColors
+} from '@microsoft/sp-component-base';
+
+export interface ISectionThemeWebPartProps {
+  description: string;
+}
+
+export default class SectionThemeWebPart extends BaseClientSideWebPart<ISectionThemeWebPartProps> {
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+
+  protected onInit(): Promise<void> {
+    // Consume the ThemeProvider service
+    this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
+    // If it exists, get the theme variant
+    this._themeVariant = this._themeProvider.tryGetTheme();
+    this.setCSSVariables(this._themeVariant.semanticColors);
+    // Register a handler to be notified if the theme variant changes
+    this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
+    return super.onInit();
+  }
+  
+  private setCSSVariables(theming: any) {
+    if (!theming) { return null; }
+    let themingKeys = Object.keys(theming);
+    if (themingKeys !== null) {
+      themingKeys.forEach(key => {
+        this.domElement.style.setProperty(`--${key}`, theming[key]);
+      });
+    }
+  }
+
+  private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
+    this._themeVariant = args.theme;
+    this.setCSSVariables(this._themeVariant.semanticColors);
+    this.render();
+  }
+
+  public render(): void {
+    const element: React.ReactElement<ISectionThemeProps> = React.createElement(
+      SectionTheme,
+      {
+        themeVariant: this._themeVariant
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('description', {
+                  label: strings.DescriptionFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}

samples/react-themes/src/webparts/sectionTheme/components/ISectionThemeProps.ts

@@ -0,0 +1,5 @@
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+export interface ISectionThemeProps {
+  themeVariant: IReadonlyTheme | undefined;
+}

samples/react-themes/src/webparts/sectionTheme/components/SectionTheme.module.scss

@@ -0,0 +1,101 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+.sectionTheme {
+  .container {
+    max-width: 700px;
+    margin: 0px auto;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+    background-color: var(--primaryButtonBackground);
+    color: var(--primaryButtonText);
+  }
+
+  .row {
+    @include ms-Grid-row;
+    padding: 20px;
+  }
+
+  .column {
+    @include ms-Grid-col;
+    @include ms-sm11;
+    @include ms-xlPush1;
+    @include ms-lg10;
+    @include ms-xl8;
+    @include ms-xlPush2;
+    @include ms-lgPush1;
+  }
+
+  .title {
+    @include ms-font-xl;
+    font-weight: bold;;
+  }
+
+  .subTitle {
+    @include ms-font-l;
+    line-height: 1em;
+    margin-bottom: 10px;
+    margin-left: 5%;
+  }
+  .details {
+    @include ms-sm12;
+    height: 400px;
+    overflow-y: scroll;
+  }
+
+  .itemKey {
+    @include ms-sm6;
+    float: left;
+    text-align: right;
+  }
+
+  .itemValue {
+    text-align: left;
+    margin-left: 10px;
+    float: left;
+  }
+
+  .colorBlock {
+    width: 500px;
+    border: 1px solid;
+    border-color: var(--inputBorder);
+    color: transparent;
+    margin-right: 5px;
+  }
+
+  .description {
+    @include ms-font-l;
+  }
+
+  .button {
+    // Our button
+    text-decoration: none;
+    height: 32px;
+
+    // Primary Button
+    min-width: 80px;
+    background-color: $ms-color-themePrimary;
+    border-color: $ms-color-themePrimary;
+
+    // Basic Button
+    outline: transparent;
+    position: relative;
+    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: $ms-font-size-m;
+    font-weight: $ms-font-weight-regular;
+    border-width: 0;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 16px;
+
+    .label {
+      font-weight: $ms-font-weight-semibold;
+      font-size: $ms-font-size-m;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 4px;
+      vertical-align: top;
+      display: inline-block;
+    }
+  }
+}

samples/react-themes/src/webparts/sectionTheme/components/SectionTheme.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import styles from './SectionTheme.module.scss';
+import { ISectionThemeProps } from './ISectionThemeProps';
+import { ISemanticColors } from '@microsoft/sp-component-base';
+
+export default class SectionTheme extends React.Component<ISectionThemeProps, {}> {
+  //private _styles: object[];
+  private getSemanticValues(theming: any): { key: string, value: string }[] {
+    if (!theming) { return null; }
+    let _styles: { key: string, value: string }[] = [];
+    let themingKeys = Object.keys(theming);
+    if (themingKeys !== null) {
+      themingKeys.forEach((item) => {
+        _styles.push({ key: item, value: theming[item] });
+      });
+    }
+    return _styles.sort((a, b) => a.key.localeCompare(b.key));
+  }
+
+  public render(): React.ReactElement<ISectionThemeProps> {
+    const semanticColors : ISemanticColors = this.props.themeVariant.semanticColors;
+    return (
+      <div className={styles.sectionTheme} data-load-themed-styles="true" >
+        <div className={styles.container} >
+          <div className={styles.row}>
+            <div className={styles.column}>
+              <p className={styles.title}>Change site theme and section background color</p>
+              <p className={styles.subTitle}>Current theme variant (section values)</p>
+              <div className={styles.details}>
+                {
+                  this.getSemanticValues(semanticColors).map((item) => (
+                    <div style={{ lineHeight: "2em" }}>
+                      <div className={styles.itemKey} >{item.key}:</div>
+                      <div className={styles.itemValue}>
+                        <span className={styles.colorBlock} style={{ background: item.value }}>______</span>
+                        {item.value}
+                      </div>
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

samples/react-themes/src/webparts/sectionTheme/loc/en-us.js

@@ -0,0 +1,7 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field"
+  }
+});

samples/react-themes/src/webparts/sectionTheme/loc/mystrings.d.ts

@@ -0,0 +1,10 @@
+declare interface ISectionThemeWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+}
+
+declare module 'SectionThemeWebPartStrings' {
+  const strings: ISectionThemeWebPartStrings;
+  export = strings;
+}

samples/react-themes/src/webparts/themes/ThemesWebPart.manifest.json

@@ -1,20 +1,30 @@
 {
-  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
-
   "id": "bb2ff581-2b46-4bfd-bfd0-ac1607c96ddb",
   "alias": "ThemesWebPart",
   "componentType": "WebPart",
-  "version": "0.0.1",
+  "version": "*",
   "manifestVersion": 2,
-
+    "requiresCustomScript": false,
-  "preconfiguredEntries": [{
+    "supportedHosts": [
-    "groupId": "bb2ff581-2b46-4bfd-bfd0-ac1607c96ddb",
+      "SharePointWebPart"
-    "group": { "default": "Under Development" },
+    ],
-    "title": { "default": "Themes" },
+    "preconfiguredEntries": [
-    "description": { "default": "Example of using SharePoint Themes" },
+    {
-    "officeFabricIconFontName": "Page",
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": {
+      "default": "Other"
+    },
+    "title": {
+        "default": "Themes"
+      },
+      "description": {
+        "default": "Example of using SharePoint Themes"
+      },
+      "officeFabricIconFontName": "BucketColor",
       "properties": {
         "description": "Themes"
       }
-  }]
+    }
+  ]
 }

samples/react-themes/src/webparts/themes/ThemesWebPart.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
 import {
-  BaseClientSideWebPart,
   IPropertyPaneConfiguration,
   PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
+} from '@microsoft/sp-property-pane';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
 
-import * as strings from 'themesStrings';
+import * as strings from 'ThemesStrings';
 import Themes from './components/Themes';
 import { IThemesProps } from './components/IThemesProps';
 import { IThemesWebPartProps } from './IThemesWebPartProps';

samples/react-themes/src/webparts/themes/components/Themes.module.scss

@@ -9,5 +9,6 @@ $themePrimary: "[theme:themePrimary, default: #0078d7]";
 
   .themePrimary {
     background: $themePrimary;
+    background: "[theme:themePrimary, default: #0078d7]";
   }
 }

samples/react-themes/src/webparts/themes/components/Themes.tsx

@@ -10,7 +10,7 @@ interface Window {
 
 declare var window: Window;
 
-export default class Themes extends React.Component<IThemesProps, void> {
+export default class Themes extends React.Component<IThemesProps> {
 
   public render(): React.ReactElement<IThemesProps> {
     let _columns = [
@@ -37,7 +37,7 @@ export default class Themes extends React.Component<IThemesProps, void> {
     return (
       <div className={styles.main}>
         <p>{'This web part shows usage of SharePoint Themes.'}</p>
-        <p>{'Background color of paragraphs is set to "primaryBackgroud", variables list backogrud color is set to "themePrimary", font color is set to "primaryText"'}</p>
+        <p>{'Background color of paragraphs is set to "primaryBackgroud", variables list background color is set to "themePrimary", font color is set to "primaryText"'}</p>
         <p>{'Full list of available theme variables is available in windows.__themeState__.theme property and listed below'}</p>
         <p>{'You can use theme variables in your .scss files like $yourVariable:"[theme:primaryBackground, default:#0273eb]"'}</p>
         <p>{'Change the theme (Site Settings -> Change the look) and see what\'s happenning'}</p>

samples/react-themes/src/webparts/themes/loc/mystrings.d.ts

@@ -4,7 +4,7 @@ declare interface IThemesStrings {
   DescriptionFieldLabel: string;
 }
 
-declare module 'themesStrings' {
+declare module 'ThemesStrings' {
   const strings: IThemesStrings;
   export = strings;
 }

samples/react-themes/tsconfig.json

@@ -1,15 +1,39 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
-    "module": "commonjs",
+    "module": "esnext",
+    "moduleResolution": "node",
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
     "types": [
       "es6-promise",
-      "es6-collections",
       "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
   ]
 }
-}

samples/react-themes/tslint.json

@@ -1,3 +1,30 @@
 {
-    "rulesDirectory": "./config"
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "rules": {
+    "class-name": false,
+    "export-name": false,
+    "forin": false,
+    "label-position": false,
+    "member-access": true,
+    "no-arg": false,
+    "no-console": false,
+    "no-construct": false,
+    "no-duplicate-variable": true,
+    "no-eval": false,
+    "no-function-expression": true,
+    "no-internal-module": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-unnecessary-semicolons": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
 }