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

Updated to latest fluentui 9 components 

moved to @fluentui/react-migration-v8-v9 for v9 shim
This commit is contained in:
Nick Brown 2023-05-15 20:52:36 +01:00
parent 863b7dad30
commit 4b66488ed6
9 changed files with 25 additions and 1284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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"
} }

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

@ -12,31 +12,32 @@
"test": "gulp test" "test": "gulp test"
}, },
"dependencies": { "dependencies": {
"tslib": "2.3.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"@fluentui/react-components": "^9.20.0", "@fluentui/react-components": "^9.20.0",
"@microsoft/sp-core-library": "1.17.2", "@fluentui/react-migration-v8-v9": "^9.2.11",
"@microsoft/sp-component-base": "1.17.2", "@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-property-pane": "1.17.2",
"@microsoft/sp-webpart-base": "1.17.2", "@microsoft/sp-webpart-base": "1.17.2",
"@microsoft/sp-lodash-subset": "1.17.2", "react": "17.0.1",
"@microsoft/sp-office-ui-fabric-core": "1.17.2" "react-dom": "17.0.1",
"tslib": "2.3.1"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/rush-stack-compiler-4.5": "0.5.0",
"@rushstack/eslint-config": "2.5.1",
"@microsoft/eslint-plugin-spfx": "1.17.2",
"@microsoft/eslint-config-spfx": "1.17.2", "@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-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", "@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5", "ajv": "^6.12.5",
"eslint": "8.7.0", "eslint": "8.7.0",
"gulp": "4.0.2",
"typescript": "4.5.5",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"eslint-plugin-react-hooks": "4.3.0", "eslint-plugin-react-hooks": "4.3.0",
"@microsoft/sp-module-interfaces": "1.17.2" "gulp": "4.0.2",
"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)
};
};