Merge pull request #3702 from techienickb/main
This commit is contained in:
Hugo Bernier
GitHub
commit
243f3c1dfa
|
|
@ -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
|
||||
{
|
||||
"name": "SPFx 1.13.1",
|
||||
"image": "docker.io/m365pnp/spfx:1.13.1",
|
||||
"name": "SPFx 1.17.2",
|
||||
"image": "docker.io/m365pnp/spfx:1.17.2",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
|
|
|
|||
|
|
@ -32,3 +32,4 @@ obj
|
|||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
package-lock.json
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
"@microsoft/generator-sharepoint": {
|
||||
"plusBeta": false,
|
||||
"isCreatingSolution": true,
|
||||
"version": "1.16.0",
|
||||
"nodeVersion": "16.17.0",
|
||||
"version": "1.17.2",
|
||||
"nodeVersion": "16.20.0",
|
||||
"sdksVersions": {
|
||||
"@microsoft/microsoft-graph-client": "3.0.2",
|
||||
"@microsoft/teams-js": "2.4.1"
|
||||
"@microsoft/teams-js": "2.9.1"
|
||||
},
|
||||
"libraryName": "react-fluentui-9",
|
||||
"libraryId": "d955a989-7441-475a-b4eb-ff132968b3c5",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
@ -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.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,8 +48,9 @@ This demos the use of the new [Fluent UI version 9](https://github.com/microsoft
|
|||
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
|
||||
1.0.2|January 18, 2023|Updated SPFx 16.1
|
||||
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 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)
|
||||
- From your command-line, change your current directory to the directory containing this sample (`react-fluentui-9`, located under `samples`)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"description"
|
||||
],
|
||||
"creationDateTime": "2022-04-20",
|
||||
"updateDateTime": "2023-01-18",
|
||||
"updateDateTime": "2023-05-15",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.16.1"
|
||||
"value": "1.17.2"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -12,27 +12,30 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react-components": "^9.10.1",
|
||||
"@microsoft/sp-core-library": "1.16.1",
|
||||
"@microsoft/sp-lodash-subset": "1.16.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.16.1",
|
||||
"@microsoft/sp-property-pane": "1.16.1",
|
||||
"@microsoft/sp-webpart-base": "1.16.1",
|
||||
"@fluentui/react-components": "^9.20.0",
|
||||
"@fluentui/react-migration-v8-v9": "^9.2.11",
|
||||
"@microsoft/sp-component-base": "1.17.2",
|
||||
"@microsoft/sp-core-library": "1.17.2",
|
||||
"@microsoft/sp-lodash-subset": "1.17.2",
|
||||
"@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-dom": "17.0.1",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/eslint-config-spfx": "1.16.1",
|
||||
"@microsoft/eslint-plugin-spfx": "1.16.1",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@microsoft/sp-build-web": "1.16.1",
|
||||
"@microsoft/sp-module-interfaces": "1.16.1",
|
||||
"@microsoft/eslint-config-spfx": "1.17.2",
|
||||
"@microsoft/eslint-plugin-spfx": "1.17.2",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.5.0",
|
||||
"@microsoft/sp-build-web": "1.17.2",
|
||||
"@microsoft/sp-module-interfaces": "1.17.2",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"ajv": "^6.12.5",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2",
|
||||
"typescript": "4.5.5"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
|||
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';
|
||||
import { createV9Theme } from "@fluentui/react-migration-v8-v9";
|
||||
|
||||
export enum AppMode {
|
||||
SharePoint, SharePointLocal, Teams, TeamsLocal, Office, OfficeLocal, Outlook, OutlookLocal
|
||||
|
|
@ -65,7 +65,7 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
|
|||
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 (this._appMode === AppMode.SharePoint || this._appMode === AppMode.SharePointLocal) {
|
||||
this._theme = createv9Theme(currentTheme, webLightTheme);
|
||||
this._theme = createV9Theme(currentTheme as undefined, webLightTheme);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@ 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, 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 { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
|
||||
import { ArrowReplyRegular, ShareRegular, DocumentText24Regular } from '@fluentui/react-icons';
|
||||
import { ResponseType } from "@microsoft/microsoft-graph-clientv1";
|
||||
import { AppMode } from '../FluentUi9DemoWebPart';
|
||||
|
|
@ -12,7 +11,7 @@ import { AppMode } from '../FluentUi9DemoWebPart';
|
|||
const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
|
||||
|
||||
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 [me, setMe] = React.useState<string | undefined>();
|
||||
const outlineId = useId('input-outline');
|
||||
|
|
@ -49,7 +48,7 @@ export default function FluentUi9Demo(props: IFluentUi9DemoProps): React.ReactEl
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<section className={`${styles.fluentUi9Demo} ${hasTeamsContext ? styles.teams : ''}`}>
|
||||
<section>
|
||||
<div className={styles.welcome}>
|
||||
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
|
||||
<h2>Well done, {escape(userDisplayName)}!</h2>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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)
|
||||
};
|
||||
};
|
||||
|
|
@ -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