honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3702 from techienickb/main

This commit is contained in:
Hugo Bernier 2023-05-16 15:52:05 -04:00 committed by GitHub
parent c6ec0dfa17 33b9d5f666
commit 243f3c1dfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 33 additions and 59314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/react-fluentui-9/.devcontainer/devcontainer.json
View File

@ -1,7 +1,7 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{ {
"name": "SPFx 1.13.1", "name": "SPFx 1.17.2",
"image": "docker.io/m365pnp/spfx:1.13.1", "image": "docker.io/m365pnp/spfx:1.17.2",
// Set *default* container specific settings.json values on container create. // Set *default* container specific settings.json values on container create.
"settings": {}, "settings": {},
// Add the IDs of extensions you want installed when the container is created. // Add the IDs of extensions you want installed when the container is created.

1
samples/react-fluentui-9/.gitignore vendored
View File

@ -32,3 +32,4 @@ obj
# Styles Generated Code # Styles Generated Code
*.scss.ts *.scss.ts
package-lock.json

6
samples/react-fluentui-9/.yo-rc.json
View File

@ -2,11 +2,11 @@
"@microsoft/generator-sharepoint": { "@microsoft/generator-sharepoint": {
"plusBeta": false, "plusBeta": false,
"isCreatingSolution": true, "isCreatingSolution": true,
"version": "1.16.0", "version": "1.17.2",
"nodeVersion": "16.17.0", "nodeVersion": "16.20.0",
"sdksVersions": { "sdksVersions": {
"@microsoft/microsoft-graph-client": "3.0.2", "@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.4.1" "@microsoft/teams-js": "2.9.1"
}, },
"libraryName": "react-fluentui-9", "libraryName": "react-fluentui-9",
"libraryId": "d955a989-7441-475a-b4eb-ff132968b3c5", "libraryId": "d955a989-7441-475a-b4eb-ff132968b3c5",

9
samples/react-fluentui-9/README.md
View File

@ -1,4 +1,4 @@
http://aka.ms/m365devprogramhttp://aka.ms/m365devprogramhttp://aka.ms/m365devprogramhttp://aka.ms/m365devprogram# Fluent UI 9 Demo # Fluent UI 9 Demo
## Summary ## Summary
@ -14,7 +14,7 @@ This demos the use of the new [Fluent UI version 9](https://github.com/microsoft
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.| | Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. | |Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg) ![SPFx 1.17.2](https://img.shields.io/badge/SPFx-1.17.2-green.svg)
![Node.js v16](https://img.shields.io/badge/Node.js-v16-green.svg) ![Node.js v16](https://img.shields.io/badge/Node.js-v16-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
@ -48,8 +48,9 @@ This demos the use of the new [Fluent UI version 9](https://github.com/microsoft
Version|Date|Comments Version|Date|Comments
-------|----|-------- -------|----|--------
1.0|April 20, 2022|Initial release 1.0|April 20, 2022|Initial release
1.0.1|November 14, 2022|Updated to SPFx 15, latest Fluent UI 9, shim based theme mapping 1.0.1|November 14, 2022|Updated to SPFx 1.15, latest Fluent UI 9, shim based theme mapping
1.0.2|January 18, 2023|Updated SPFx 16.1 1.0.2|January 18, 2023|Updated SPFx 1.16.1
1.0.2|May 15, 2023|Updated SPFx 1.17.2, latest Fluent UI 9
- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9) then unzip it) - Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9) then unzip it)
- From your command-line, change your current directory to the directory containing this sample (`react-fluentui-9`, located under `samples`) - From your command-line, change your current directory to the directory containing this sample (`react-fluentui-9`, located under `samples`)

4
samples/react-fluentui-9/assets/sample.json
View File

@ -10,7 +10,7 @@
"description" "description"
], ],
"creationDateTime": "2022-04-20", "creationDateTime": "2022-04-20",
"updateDateTime": "2023-01-18", "updateDateTime": "2023-05-15",
"products": [ "products": [
"SharePoint" "SharePoint"
], ],
@ -21,7 +21,7 @@
}, },
{ {
"key": "SPFX-VERSION", "key": "SPFX-VERSION",
"value": "1.16.1" "value": "1.17.2"
} }
], ],
"thumbnails": [ "thumbnails": [

2
samples/react-fluentui-9/config/serve.json
View File

@ -2,5 +2,5 @@
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321, "port": 4321,
"https": true, "https": true,
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx" "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
} }

57996
samples/react-fluentui-9/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
samples/react-fluentui-9/package.json
View File

@ -12,27 +12,30 @@
"test": "gulp test" "test": "gulp test"
}, },
"dependencies": { "dependencies": {
"@fluentui/react-components": "^9.10.1", "@fluentui/react-components": "^9.20.0",
"@microsoft/sp-core-library": "1.16.1", "@fluentui/react-migration-v8-v9": "^9.2.11",
"@microsoft/sp-lodash-subset": "1.16.1", "@microsoft/sp-component-base": "1.17.2",
"@microsoft/sp-office-ui-fabric-core": "1.16.1", "@microsoft/sp-core-library": "1.17.2",
"@microsoft/sp-property-pane": "1.16.1", "@microsoft/sp-lodash-subset": "1.17.2",
"@microsoft/sp-webpart-base": "1.16.1", "@microsoft/sp-office-ui-fabric-core": "1.17.2",
"@microsoft/sp-property-pane": "1.17.2",
"@microsoft/sp-webpart-base": "1.17.2",
"react": "17.0.1", "react": "17.0.1",
"react-dom": "17.0.1", "react-dom": "17.0.1",
"tslib": "2.3.1" "tslib": "2.3.1"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/eslint-config-spfx": "1.16.1", "@microsoft/eslint-config-spfx": "1.17.2",
"@microsoft/eslint-plugin-spfx": "1.16.1", "@microsoft/eslint-plugin-spfx": "1.17.2",
"@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/rush-stack-compiler-4.5": "0.5.0",
"@microsoft/sp-build-web": "1.16.1", "@microsoft/sp-build-web": "1.17.2",
"@microsoft/sp-module-interfaces": "1.16.1", "@microsoft/sp-module-interfaces": "1.17.2",
"@rushstack/eslint-config": "2.5.1", "@rushstack/eslint-config": "2.5.1",
"@types/react": "17.0.45", "@types/react": "17.0.45",
"@types/react-dom": "17.0.17", "@types/react-dom": "17.0.17",
"@types/webpack-env": "~1.15.2", "@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5", "ajv": "^6.12.5",
"eslint": "8.7.0",
"eslint-plugin-react-hooks": "4.3.0", "eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2", "gulp": "4.0.2",
"typescript": "4.5.5" "typescript": "4.5.5"

4
samples/react-fluentui-9/src/webparts/fluentUi9Demo/FluentUi9DemoWebPart.ts
View File

@ -6,7 +6,7 @@ import { IReadonlyTheme } from '@microsoft/sp-component-base';
import FluentUi9Demo from './components/FluentUi9Demo'; import FluentUi9Demo from './components/FluentUi9Demo';
import { IFluentUi9DemoProps } from './components/IFluentUi9DemoProps'; import { IFluentUi9DemoProps } from './components/IFluentUi9DemoProps';
import { FluentProvider, FluentProviderProps, teamsDarkTheme, teamsLightTheme, webLightTheme, webDarkTheme, Theme } from '@fluentui/react-components'; import { FluentProvider, FluentProviderProps, teamsDarkTheme, teamsLightTheme, webLightTheme, webDarkTheme, Theme } from '@fluentui/react-components';
import { createv9Theme } from './shims/v9ThemeShim'; import { createV9Theme } from "@fluentui/react-migration-v8-v9";
export enum AppMode { export enum AppMode {
SharePoint, SharePointLocal, Teams, TeamsLocal, Office, OfficeLocal, Outlook, OutlookLocal SharePoint, SharePointLocal, Teams, TeamsLocal, Office, OfficeLocal, Outlook, OutlookLocal
@ -65,7 +65,7 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
this._isDarkTheme = !!currentTheme.isInverted; this._isDarkTheme = !!currentTheme.isInverted;
//if the app mode is sharepoint, adjust the fluent ui 9 web light theme to use the sharepoint theme color, teams/dark mode should be fine on default //if the app mode is sharepoint, adjust the fluent ui 9 web light theme to use the sharepoint theme color, teams/dark mode should be fine on default
if (this._appMode === AppMode.SharePoint || this._appMode === AppMode.SharePointLocal) { if (this._appMode === AppMode.SharePoint || this._appMode === AppMode.SharePointLocal) {
this._theme = createv9Theme(currentTheme, webLightTheme); this._theme = createV9Theme(currentTheme as undefined, webLightTheme);
} }
} }

12
samples/react-fluentui-9/src/webparts/fluentUi9Demo/components/FluentUi9Demo.module.scss
View File

@ -1,15 +1,3 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.fluentUi9Demo {
overflow: hidden;
padding: 1em;
color: "[theme:bodyText, default: #323130]";
color: var(--bodyText);
&.teams {
font-family: $ms-font-family-fallbacks;
}
}
.stack { .stack {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

7
samples/react-fluentui-9/src/webparts/fluentUi9Demo/components/FluentUi9Demo.tsx
View File

@ -2,9 +2,8 @@ import * as React from 'react';
import styles from './FluentUi9Demo.module.scss'; import styles from './FluentUi9Demo.module.scss';
import { IFluentUi9DemoProps } from './IFluentUi9DemoProps'; import { IFluentUi9DemoProps } from './IFluentUi9DemoProps';
import { escape } from '@microsoft/sp-lodash-subset'; import { escape } from '@microsoft/sp-lodash-subset';
import { Button, Link, Text, Tab, TabList, Avatar, useId, ToggleButton, Slider, Divider, Label, Input, Checkbox, RadioGroup, Radio, Switch, Body1, Caption1, CompoundButton, Menu, MenuButtonProps, MenuItem, MenuList, MenuPopover, MenuTrigger, SplitButton } from '@fluentui/react-components'; import { Button, Link, Text, Tab, TabList, Avatar, useId, ToggleButton, Slider, Divider, Label, Input, Checkbox, RadioGroup, Radio, Switch, Body1, Caption1, CompoundButton, Menu, MenuButtonProps, MenuItem, MenuList, MenuPopover, MenuTrigger, SplitButton, Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
import { ArrowReplyRegular, ShareRegular, DocumentText24Regular } from '@fluentui/react-icons'; import { ArrowReplyRegular, ShareRegular, DocumentText24Regular } from '@fluentui/react-icons';
import { ResponseType } from "@microsoft/microsoft-graph-clientv1"; import { ResponseType } from "@microsoft/microsoft-graph-clientv1";
import { AppMode } from '../FluentUi9DemoWebPart'; import { AppMode } from '../FluentUi9DemoWebPart';
@ -12,7 +11,7 @@ import { AppMode } from '../FluentUi9DemoWebPart';
const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
export default function FluentUi9Demo(props: IFluentUi9DemoProps): React.ReactElement<IFluentUi9DemoProps> { export default function FluentUi9Demo(props: IFluentUi9DemoProps): React.ReactElement<IFluentUi9DemoProps> {
const { isDarkTheme, hasTeamsContext, userDisplayName, appMode } = props; const { isDarkTheme, userDisplayName, appMode } = props;
const [tab, setTab] = React.useState<string | unknown>("buttons"); const [tab, setTab] = React.useState<string | unknown>("buttons");
const [me, setMe] = React.useState<string | undefined>(); const [me, setMe] = React.useState<string | undefined>();
const outlineId = useId('input-outline'); const outlineId = useId('input-outline');
@ -49,7 +48,7 @@ export default function FluentUi9Demo(props: IFluentUi9DemoProps): React.ReactEl
}, []); }, []);
return ( return (
<section className={`${styles.fluentUi9Demo} ${hasTeamsContext ? styles.teams : ''}`}> <section>
<div className={styles.welcome}> <div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} /> <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Well done, {escape(userDisplayName)}!</h2> <h2>Well done, {escape(userDisplayName)}!</h2>

1075
samples/react-fluentui-9/src/webparts/fluentUi9Demo/shims/themeDuplicates.ts
View File

File diff suppressed because it is too large Load Diff

173
samples/react-fluentui-9/src/webparts/fluentUi9Demo/shims/v9ThemeShim.ts
View File

@ -1,173 +0,0 @@
import { IPalette, ITheme as ThemeV8 } from '@microsoft/sp-component-base';
import { ColorTokens, Theme as ThemeV9, webLightTheme } from '@fluentui/react-components';
import { blackAlpha, whiteAlpha, grey } from './themeDuplicates';
/**
* Creates v9 color tokens from a v8 palette.
* https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
*/
const mapAliasColors = (palette: Partial<IPalette>, inverted: boolean): ColorTokens => {
return {
colorNeutralForeground1: palette.neutralPrimary || webLightTheme.colorNeutralForeground1,
colorNeutralForeground1Hover: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Hover,
colorNeutralForeground1Pressed: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Pressed,
colorNeutralForeground1Selected: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Selected,
colorNeutralForeground2: palette.neutralSecondary || webLightTheme.colorNeutralForeground2,
colorNeutralForeground2Hover: palette.neutralPrimary || webLightTheme.colorNeutralForeground2Hover,
colorNeutralForeground2Pressed: palette.neutralPrimary || webLightTheme.colorNeutralForeground2Pressed,
colorNeutralForeground2Selected: palette.neutralPrimary || webLightTheme.colorNeutralForeground2Selected,
colorNeutralForeground2BrandHover: palette.themePrimary || webLightTheme.colorNeutralForeground2BrandHover,
colorNeutralForeground2BrandPressed: palette.themeDarkAlt || webLightTheme.colorNeutralForeground2BrandPressed,
colorNeutralForeground2BrandSelected: palette.themePrimary || webLightTheme.colorNeutralForeground2BrandSelected,
colorNeutralForeground3: palette.neutralTertiary || webLightTheme.colorNeutralForeground3,
colorNeutralForeground3Hover: palette.neutralSecondary || webLightTheme.colorNeutralForeground3Hover,
colorNeutralForeground3Pressed: palette.neutralSecondary || webLightTheme.colorNeutralForeground3Pressed,
colorNeutralForeground3Selected: palette.neutralSecondary || webLightTheme.colorNeutralForeground3Selected,
colorNeutralForeground3BrandHover: palette.themePrimary || webLightTheme.colorNeutralForeground3BrandHover,
colorNeutralForeground3BrandPressed: palette.themeDarkAlt || webLightTheme.colorNeutralForeground3BrandPressed,
colorNeutralForeground3BrandSelected: palette.themePrimary || webLightTheme.colorNeutralForeground3BrandSelected,
colorNeutralForeground4: palette.neutralQuaternary || webLightTheme.colorNeutralForeground4,
colorNeutralForegroundDisabled: palette.neutralTertiaryAlt || webLightTheme.colorNeutralForegroundDisabled,
colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
colorBrandForegroundLink: palette.themeDarkAlt || webLightTheme.colorBrandForegroundLink,
colorBrandForegroundLinkHover: palette.themeDark || webLightTheme.colorBrandForegroundLinkHover,
colorBrandForegroundLinkPressed: palette.themeDarker || webLightTheme.colorBrandForegroundLinkPressed,
colorBrandForegroundLinkSelected: palette.themeDarkAlt || webLightTheme.colorBrandForegroundLinkSelected,
colorNeutralForeground2Link: palette.neutralSecondary || webLightTheme.colorNeutralForeground2Link,
colorNeutralForeground2LinkHover: palette.neutralPrimary || webLightTheme.colorNeutralForeground2LinkHover,
colorNeutralForeground2LinkPressed: palette.neutralPrimary || webLightTheme.colorNeutralForeground2LinkPressed,
colorNeutralForeground2LinkSelected: palette.neutralPrimary || webLightTheme.colorNeutralForeground2LinkSelected,
colorCompoundBrandForeground1: palette.themePrimary || webLightTheme.colorCompoundBrandForeground1,
colorCompoundBrandForeground1Hover: palette.themeDarkAlt || webLightTheme.colorCompoundBrandForeground1Hover,
colorCompoundBrandForeground1Pressed: palette.themeDark || webLightTheme.colorCompoundBrandForeground1Pressed,
colorBrandForeground1: palette.themePrimary || webLightTheme.colorBrandForeground1,
colorBrandForeground2: palette.themeDarkAlt || webLightTheme.colorBrandForeground2,
colorNeutralForeground1Static: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Static,
colorNeutralForegroundInverted: palette.white || webLightTheme.colorNeutralForegroundInverted,
colorNeutralForegroundInvertedHover: palette.white || webLightTheme.colorNeutralForegroundInvertedHover,
colorNeutralForegroundInvertedPressed: palette.white || webLightTheme.colorNeutralForegroundInvertedPressed,
colorNeutralForegroundInvertedSelected: palette.white || webLightTheme.colorNeutralForegroundInvertedSelected,
colorNeutralForegroundOnBrand: palette.white || webLightTheme.colorNeutralForegroundOnBrand,
colorNeutralForegroundStaticInverted: palette.white || webLightTheme.colorNeutralForegroundStaticInverted,
colorNeutralForegroundInvertedLink: palette.white || webLightTheme.colorNeutralForegroundInvertedLink,
colorNeutralForegroundInvertedLinkHover: palette.white || webLightTheme.colorNeutralForegroundInvertedLinkHover,
colorNeutralForegroundInvertedLinkPressed: palette.white || webLightTheme.colorNeutralForegroundInvertedLinkPressed,
colorNeutralForegroundInvertedLinkSelected: palette.white || webLightTheme.colorNeutralForegroundInvertedLinkSelected,
colorNeutralForegroundInverted2: palette.white || webLightTheme.colorNeutralForegroundInverted2,
colorBrandForegroundInverted: palette.themeSecondary || webLightTheme.colorBrandForegroundInverted,
colorBrandForegroundInvertedHover: palette.themeTertiary || webLightTheme.colorBrandForegroundInvertedHover,
colorBrandForegroundInvertedPressed: palette.themeSecondary || webLightTheme.colorBrandForegroundInvertedPressed,
colorBrandForegroundOnLight: palette.themePrimary || webLightTheme.colorBrandForegroundOnLight,
colorBrandForegroundOnLightHover: palette.themeDarkAlt || webLightTheme.colorBrandForegroundOnLightHover,
colorBrandForegroundOnLightPressed: palette.themeDark || webLightTheme.colorBrandForegroundOnLightPressed,
colorBrandForegroundOnLightSelected: palette.themeDark || webLightTheme.colorBrandForegroundOnLightSelected,
colorNeutralBackground1: palette.white || webLightTheme.colorNeutralBackground1,
colorNeutralBackground1Hover: palette.neutralLighter || webLightTheme.colorNeutralBackground1Hover,
colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralBackground1Pressed,
colorNeutralBackground1Selected: palette.neutralLight || webLightTheme.colorNeutralBackground1Selected,
colorNeutralBackground2: palette.neutralLighterAlt || webLightTheme.colorNeutralBackground2,
colorNeutralBackground2Hover: palette.neutralLighter || webLightTheme.colorNeutralBackground2Hover,
colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralBackground2Pressed,
colorNeutralBackground2Selected: palette.neutralLight || webLightTheme.colorNeutralBackground2Selected,
colorNeutralBackground3: palette.neutralLighter || webLightTheme.colorNeutralBackground3,
colorNeutralBackground3Hover: palette.neutralLight || webLightTheme.colorNeutralBackground3Hover,
colorNeutralBackground3Pressed: palette.neutralQuaternary || webLightTheme.colorNeutralBackground3Pressed,
colorNeutralBackground3Selected: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralBackground3Selected,
colorNeutralBackground4: palette.neutralLighter || webLightTheme.colorNeutralBackground4,
colorNeutralBackground4Hover: palette.neutralLighterAlt || webLightTheme.colorNeutralBackground4Hover,
colorNeutralBackground4Pressed: palette.neutralLighter || webLightTheme.colorNeutralBackground4Pressed,
colorNeutralBackground4Selected: palette.white || webLightTheme.colorNeutralBackground4Selected,
colorNeutralBackground5: palette.neutralLight || webLightTheme.colorNeutralBackground5,
colorNeutralBackground5Hover: palette.neutralLighter || webLightTheme.colorNeutralBackground5Hover,
colorNeutralBackground5Pressed: palette.neutralLighter || webLightTheme.colorNeutralBackground5Pressed,
colorNeutralBackground5Selected: palette.neutralLighterAlt || webLightTheme.colorNeutralBackground5Selected,
colorNeutralBackground6: palette.neutralLight || webLightTheme.colorNeutralBackground6,
colorNeutralBackgroundStatic: grey[20],
colorNeutralBackgroundInverted: palette.neutralSecondary || webLightTheme.colorNeutralBackgroundInverted,
colorSubtleBackground: 'transparent',
colorSubtleBackgroundHover: palette.neutralLighter || webLightTheme.colorSubtleBackgroundHover,
colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt || webLightTheme.colorSubtleBackgroundPressed,
colorSubtleBackgroundSelected: palette.neutralLight || webLightTheme.colorSubtleBackgroundSelected,
colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
colorSubtleBackgroundLightAlphaSelected: 'transparent',
colorSubtleBackgroundInverted: 'transparent',
colorSubtleBackgroundInvertedHover: blackAlpha[10],
colorSubtleBackgroundInvertedPressed: blackAlpha[30],
colorSubtleBackgroundInvertedSelected: blackAlpha[20],
colorTransparentBackground: 'transparent',
colorTransparentBackgroundHover: 'transparent',
colorTransparentBackgroundPressed: 'transparent',
colorTransparentBackgroundSelected: 'transparent',
colorNeutralBackgroundDisabled: palette.neutralLighter || webLightTheme.colorNeutralBackgroundDisabled,
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
colorNeutralStencil1: palette.neutralLight || webLightTheme.colorNeutralStencil1,
colorNeutralStencil2: palette.neutralLighterAlt || webLightTheme.colorNeutralStencil2,
colorBackgroundOverlay: blackAlpha[10],
colorScrollbarOverlay: blackAlpha[50],
colorBrandBackground: palette.themePrimary || webLightTheme.colorBrandBackground,
colorBrandBackgroundHover: palette.themeDarkAlt || webLightTheme.colorBrandBackgroundHover,
colorBrandBackgroundPressed: palette.themeDarker || webLightTheme.colorBrandBackgroundPressed,
colorBrandBackgroundSelected: palette.themeDark || webLightTheme.colorBrandBackgroundSelected,
colorCompoundBrandBackground: palette.themePrimary || webLightTheme.colorCompoundBrandBackground,
colorCompoundBrandBackgroundHover: palette.themeDarkAlt || webLightTheme.colorCompoundBrandBackgroundHover,
colorCompoundBrandBackgroundPressed: palette.themeDark || webLightTheme.colorCompoundBrandBackgroundPressed,
colorBrandBackgroundStatic: palette.themePrimary || webLightTheme.colorBrandBackgroundStatic,
colorBrandBackground2: palette.themeLighterAlt || webLightTheme.colorBrandBackground2,
colorBrandBackgroundInverted: palette.white || webLightTheme.colorBrandBackgroundInverted,
colorBrandBackgroundInvertedHover: palette.themeLighterAlt || webLightTheme.colorBrandBackgroundInvertedHover,
colorBrandBackgroundInvertedPressed: palette.themeLight || webLightTheme.colorBrandBackgroundInvertedPressed,
colorBrandBackgroundInvertedSelected: palette.themeLighter || webLightTheme.colorBrandBackgroundInvertedSelected,
colorNeutralStrokeAccessible: palette.neutralSecondary || webLightTheme.colorNeutralStrokeAccessible,
colorNeutralStrokeAccessibleHover: palette.neutralSecondary || webLightTheme.colorNeutralStrokeAccessibleHover,
colorNeutralStrokeAccessiblePressed: palette.neutralSecondary || webLightTheme.colorNeutralStrokeAccessiblePressed,
colorNeutralStrokeAccessibleSelected: palette.themePrimary || webLightTheme.colorNeutralStrokeAccessibleSelected,
colorNeutralStroke1: palette.neutralQuaternary || webLightTheme.colorNeutralStroke1,
colorNeutralStroke1Hover: palette.neutralTertiaryAlt || webLightTheme.colorNeutralStroke1Hover,
colorNeutralStroke1Pressed: palette.neutralTertiaryAlt || webLightTheme.colorNeutralStroke1Pressed,
colorNeutralStroke1Selected: palette.neutralTertiaryAlt || webLightTheme.colorNeutralStroke1Selected,
colorNeutralStroke2: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralStroke2,
colorNeutralStroke3: palette.neutralLighter || webLightTheme.colorNeutralStroke3,
colorNeutralStrokeOnBrand: palette.white || webLightTheme.colorNeutralStrokeOnBrand,
colorNeutralStrokeOnBrand2: palette.white || webLightTheme.colorNeutralStrokeOnBrand2,
colorNeutralStrokeOnBrand2Hover: palette.white || webLightTheme.colorNeutralStrokeOnBrand2Hover,
colorNeutralStrokeOnBrand2Pressed: palette.white || webLightTheme.colorNeutralStrokeOnBrand2Pressed,
colorNeutralStrokeOnBrand2Selected: palette.white || webLightTheme.colorNeutralStrokeOnBrand2Selected,
colorBrandStroke1: palette.themePrimary || webLightTheme.colorBrandStroke1,
colorBrandStroke2: palette.themeLight || webLightTheme.colorBrandStroke2,
colorCompoundBrandStroke: palette.themePrimary || webLightTheme.colorCompoundBrandStroke,
colorCompoundBrandStrokeHover: palette.themeDarkAlt || webLightTheme.colorCompoundBrandStrokeHover,
colorCompoundBrandStrokePressed: palette.themeDark || webLightTheme.colorCompoundBrandStrokePressed,
colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralStrokeDisabled,
colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
colorTransparentStroke: 'transparent',
colorTransparentStrokeInteractive: 'transparent',
colorTransparentStrokeDisabled: 'transparent',
colorStrokeFocus1: palette.white || webLightTheme.colorStrokeFocus1,
colorStrokeFocus2: palette.black || webLightTheme.colorStrokeFocus2,
colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
colorBrandShadowKey: 'rgba(0,0,0,0.25)',
colorNeutralStencil1Alpha: webLightTheme.colorNeutralStencil1Alpha,
colorNeutralStencil2Alpha: webLightTheme.colorNeutralStencil2Alpha,
};
};
/**
* Creates a v9 theme from a v8 theme.
* You can optional pass a base v9 theme; otherwise webLightTheme is used.
*/
export const createv9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => {
const baseTheme = baseThemeV9 ?? webLightTheme;
return {
...baseTheme,
...mapAliasColors(themeV8.palette, themeV8.isInverted)
};
};

29
samples/react-interactive-map/tslint.json
View File

@ -1,29 +0,0 @@
{
"extends": "./node_modules/@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-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}