Updated Fluent UI 9 demo to SPFx 15
This commit is contained in:
Nick Brown
parent
921d68331b
commit
d2ae396176
|
|
@ -2,7 +2,7 @@
|
|||
"@microsoft/generator-sharepoint": {
|
||||
"plusBeta": false,
|
||||
"isCreatingSolution": true,
|
||||
"version": "1.14.0",
|
||||
"version": "1.15.2",
|
||||
"libraryName": "react-fluentui-9",
|
||||
"libraryId": "d955a989-7441-475a-b4eb-ff132968b3c5",
|
||||
"environment": "spo",
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ This demos the use of the new [Fluent UI version 9](https://github.com/microsoft
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
|
@ -45,6 +45,7 @@ react-fluentui-9 | [Nick Brown](https://github.com/techienickb) ([@techienickb](
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
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
|
||||
|
||||
- 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`)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"name": "react-fluentui-9-client-side-solution",
|
||||
"title": "SPFX + Fluent UI 9 Demo",
|
||||
"id": "d955a989-7441-475a-b4eb-ff132968b3c5",
|
||||
"version": "1.0.0.0",
|
||||
"version": "1.0.1.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
"websiteUrl": "https://nbdev.uk",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": "Undefined-1.14.0"
|
||||
"mpnId": "Undefined-1.15.2"
|
||||
},
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
"title": "react-fluentui-9 Feature",
|
||||
"description": "Demos the use of Fluent UI 9 in SPFX",
|
||||
"id": "233521d9-d6d8-41ed-a43d-d30bb942c370",
|
||||
"version": "1.0.0.0"
|
||||
"version": "1.0.1.0"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,4 +13,7 @@ build.rig.getTasks = function () {
|
|||
return result;
|
||||
};
|
||||
|
||||
// add this line:
|
||||
// build.lintCmd.enabled = false;
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -9,25 +9,30 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react-components": "^9.0.0-rc.7",
|
||||
"@microsoft/sp-core-library": "1.14.0",
|
||||
"@microsoft/sp-lodash-subset": "1.14.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.14.0",
|
||||
"@microsoft/sp-property-pane": "1.14.0",
|
||||
"@microsoft/sp-webpart-base": "1.14.0",
|
||||
"office-ui-fabric-react": "7.174.1",
|
||||
"@fluentui/react-components": "^9.7.0",
|
||||
"@microsoft/sp-core-library": "1.15.2",
|
||||
"@microsoft/sp-lodash-subset": "1.15.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.15.2",
|
||||
"@microsoft/sp-property-pane": "1.15.2",
|
||||
"@microsoft/sp-webpart-base": "1.15.2",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1"
|
||||
"react-dom": "16.13.1",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/eslint-config-spfx": "1.15.2",
|
||||
"@microsoft/eslint-plugin-spfx": "1.15.2",
|
||||
"@microsoft/microsoft-graph-types": "^2.24.0",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@microsoft/sp-build-web": "1.15.2",
|
||||
"@microsoft/sp-module-interfaces": "1.15.2",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/react": "16.9.51",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@microsoft/sp-build-web": "1.14.0",
|
||||
"@microsoft/sp-tslint-rules": "1.14.0",
|
||||
"@microsoft/sp-module-interfaces": "1.14.0",
|
||||
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
|
||||
"gulp": "~4.0.2",
|
||||
"ajv": "~5.2.2",
|
||||
"@types/webpack-env": "1.13.1"
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"ajv": "^6.12.5",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"gulp": "4.0.2",
|
||||
"typescript": "4.5.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import * as strings from 'FluentUi9DemoWebPartStrings';
|
|||
import FluentUi9Demo from './components/FluentUi9Demo';
|
||||
import { IFluentUi9DemoProps } from './components/IFluentUi9DemoProps';
|
||||
import { FluentProvider, FluentProviderProps, teamsDarkTheme, teamsLightTheme, webLightTheme, webDarkTheme, Theme } from '@fluentui/react-components';
|
||||
import { createv9Theme } from './shims/v9ThemeShim';
|
||||
|
||||
export enum AppMode {
|
||||
SharePoint, SharePointLocal, Teams, TeamsLocal
|
||||
|
|
@ -64,27 +65,7 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
|
|||
|
||||
//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) {
|
||||
this._theme = {...webLightTheme,
|
||||
colorBrandBackground: currentTheme.palette.themePrimary,
|
||||
colorBrandBackgroundHover: currentTheme.palette.themeDark,
|
||||
colorBrandBackgroundPressed: currentTheme.palette.themeDarker,
|
||||
colorCompoundBrandForeground1: currentTheme.palette.themePrimary,
|
||||
colorCompoundBrandForeground1Hover: currentTheme.palette.themeDark,
|
||||
colorCompoundBrandForeground1Pressed: currentTheme.palette.themeDarker,
|
||||
colorNeutralForeground2BrandHover: currentTheme.palette.themeSecondary,
|
||||
colorNeutralForeground2BrandPressed: currentTheme.palette.themeDarkAlt,
|
||||
colorNeutralForeground2BrandSelected: currentTheme.palette.themeDarkAlt,
|
||||
colorBrandForeground1: currentTheme.palette.themeSecondary,
|
||||
colorBrandStroke1: currentTheme.palette.themePrimary,
|
||||
colorBrandStroke2: currentTheme.palette.themeSecondary,
|
||||
colorCompoundBrandStroke: currentTheme.palette.themePrimary,
|
||||
colorCompoundBrandStrokeHover: currentTheme.palette.themeSecondary,
|
||||
colorCompoundBrandStrokePressed: currentTheme.palette.themeDarkAlt,
|
||||
colorCompoundBrandBackground: currentTheme.palette.themePrimary,
|
||||
colorCompoundBrandBackgroundHover: currentTheme.palette.themeDark,
|
||||
colorCompoundBrandBackgroundPressed: currentTheme.palette.themeDarker,
|
||||
|
||||
};
|
||||
this._theme = createv9Theme(currentTheme, webLightTheme);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,11 +76,4 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
|
|||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,9 +2,10 @@ import * as React from 'react';
|
|||
import styles from './FluentUi9Demo.module.scss';
|
||||
import { IFluentUi9DemoProps } from './IFluentUi9DemoProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import { Button, Link, Text, Caption, Body, Avatar, useId, ToggleButton, Slider, Menu, MenuTrigger, MenuButtonProps, MenuPopover, MenuList, MenuItem, SplitButton, Divider } from '@fluentui/react-components';
|
||||
import { Card, Tab, TabList, CardHeader, CardPreview, CardFooter, Label, Input, Checkbox, RadioGroup, Radio, Switch } from '@fluentui/react-components/unstable';
|
||||
import { Button, Link, Text, Tab, TabList, Avatar, useId, ToggleButton, Slider, Menu, MenuTrigger, MenuButtonProps, MenuPopover, MenuList, MenuItem, SplitButton, Divider, Label, Input, Checkbox, RadioGroup, Radio, Switch, Body1, Caption1 } from '@fluentui/react-components';
|
||||
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
|
||||
import { ArrowReplyRegular, ShareRegular, DocumentText24Regular } from '@fluentui/react-icons';
|
||||
import { ResponseType } from "@microsoft/microsoft-graph-clientV3";
|
||||
|
||||
export default function FluentUi9Demo(props: IFluentUi9DemoProps) {
|
||||
const { isDarkTheme, environmentMessage, hasTeamsContext, userDisplayName } = props;
|
||||
|
|
@ -14,10 +15,10 @@ export default function FluentUi9Demo(props: IFluentUi9DemoProps) {
|
|||
const underlineId = useId('input-underline');
|
||||
|
||||
React.useEffect(() => {
|
||||
props.context.msGraphClientFactory.getClient().then(async (client) => {
|
||||
props.context.msGraphClientFactory.getClient("3").then(async (client) => {
|
||||
await client
|
||||
.api('/me/photo/$value')
|
||||
.responseType("blob")
|
||||
.responseType(ResponseType.BLOB)
|
||||
.get()
|
||||
.then((blob: Blob) : Promise<any> => {
|
||||
return new Promise(resolve => {
|
||||
|
|
@ -150,11 +151,11 @@ export default function FluentUi9Demo(props: IFluentUi9DemoProps) {
|
|||
<CardHeader
|
||||
image={<Avatar name={userDisplayName} image={me ? {src: me } : null} />}
|
||||
header={
|
||||
<Body>
|
||||
<Body1>
|
||||
<b>{userDisplayName}</b> mentioned
|
||||
</Body>
|
||||
</Body1>
|
||||
}
|
||||
description={<Caption>5h ago · About us - Overview</Caption>}
|
||||
description={<Caption1>5h ago · About us - Overview</Caption1>}
|
||||
/>
|
||||
|
||||
<CardPreview logo={<DocumentText24Regular />}>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,171 @@
|
|||
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)',
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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)
|
||||
};
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"noImplicitAny": true,
|
||||
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue