From 7f287bc4d7b5f953d6facbf6506b147c1e2140ac Mon Sep 17 00:00:00 2001 From: Enrico Gianoglio Date: Mon, 31 Oct 2022 14:50:52 +0100 Subject: [PATCH] feat: v0 Loader style migration from v9 (#25169) * Add new secondary svg loader * Remove the unused style * Generate loader svg based on theme color * Add new svg loader * Encode svg color with encodeURIComponent function * Loader gets rendered as and tags * Removed svg urls * Add stroke color variables and secondary stroke * Change svg heights * Styling the Loader's and * Use defined classname instead of nested selectors * Remove unused interface variables * Add @noflip to fix rtl rotate animation * Set the loader track color of HC theme in black * Set black background to HC secondary example * Renamed variable * Change loader's height when it is inside a button * Add changelog entry * Update changelog entry * Change background color to secondary examples * Function to get the common styles of the circles * Remove unused svg classname * Change loader's height when inside an attachment Co-authored-by: Enrico --- packages/fluentui/CHANGELOG.md | 1 + .../Variations/LoaderExampleSecondary.tsx | 34 +++--- .../src/components/Loader/Loader.tsx | 12 +- .../teams-high-contrast/componentVariables.ts | 1 + .../components/Loader/loaderVariables.ts | 5 + .../Attachment/attachmentActionStyles.ts | 14 +-- .../Attachment/attachmentVariables.ts | 2 +- .../teams/components/Button/buttonStyles.ts | 16 +-- .../components/Button/buttonVariables.ts | 4 +- .../Loader/loaderSecondarySvgDataUrl.ts | 1 - .../teams/components/Loader/loaderStyles.ts | 108 ++++++++++-------- .../components/Loader/loaderSvgDataUrl.ts | 1 - .../components/Loader/loaderVariables.ts | 28 ++--- 13 files changed, 116 insertions(+), 111 deletions(-) create mode 100644 packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Loader/loaderVariables.ts delete mode 100644 packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSecondarySvgDataUrl.ts delete mode 100644 packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSvgDataUrl.ts diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 909ce81745ac12..2e7ceb3cf75977 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908)) - Limit keyboard detection in inputs @jurokapsiar ([#25087](https://github.com/microsoft/fluentui/pull/25087)) - Dropdown Freeform search should be case insensitive @jurokapsiar ([#24879](https://github.com/microsoft/fluentui/pull/24879)) +- Update styles to v0 Loader to match v9 Spinner @GianoglioEnrico ([#25169](https://github.com/microsoft/fluentui/pull/25169)) ### Fixes - Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356)) diff --git a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx index 58404303917d66..7ba07a07bc8754 100644 --- a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx +++ b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx @@ -1,20 +1,24 @@ import { Loader, Flex, Provider } from '@fluentui/react-northstar'; import * as React from 'react'; -const LoaderExampleSecondary: React.FC = () => ( - ( - - - - )} - /> -); +const LoaderExampleSecondary: React.FC = () => { + return ( + { + return ( + + + + ); + }} + /> + ); +}; export default LoaderExampleSecondary; diff --git a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx index c6bd7420fc2ab7..122d7eb8b495ef 100644 --- a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx +++ b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx @@ -26,7 +26,6 @@ import { Text, TextProps } from '../Text/Text'; export interface LoaderSlotClassNames { indicator: string; label: string; - svg: string; } export interface LoaderProps extends UIComponentProps { @@ -67,7 +66,6 @@ export const loaderClassName = 'ui-loader'; export const loaderSlotClassNames: LoaderSlotClassNames = { indicator: `${loaderClassName}__indicator`, label: `${loaderClassName}__label`, - svg: `${loaderClassName}__svg`, }; export type LoaderStylesProps = Pick; @@ -87,7 +85,6 @@ export const Loader = (React.forwardRef((props, ref secondary, label, indicator, - svg, inline, labelPosition, className, @@ -142,9 +139,12 @@ export const Loader = (React.forwardRef((props, ref return () => clearTimeout(delayTimer.current); }, [delay]); - const svgElement = Box.create(svg, { - defaultProps: () => ({ className: loaderSlotClassNames.svg, styles: resolvedStyles.svg }), - }); + const svgElement = ( + + + + + ); const element = visible && ( => ({ + svgTrackColor: siteVariables.colors.black, +}); diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentActionStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentActionStyles.ts index 198067727eddc7..53e9495fe333c6 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentActionStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentActionStyles.ts @@ -94,17 +94,9 @@ export const attachmentActionStyles: ComponentSlotStylesPrepared svg`]: { + width: v.actionLoaderSize, + height: v.actionLoaderSvgHeight, }, ...(p.hasContent && { diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentVariables.ts index 43656d18a3b8bc..cfc766c7e799ea 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -75,7 +75,7 @@ export const attachmentVariables = (siteVariables: any): AttachmentVariables => actionIconSize: pxToRem(16), actionLoaderBorderSize: pxToRem(2), actionLoaderSize: pxToRem(20), - actionLoaderSvgHeight: pxToRem(1220), + actionLoaderSvgHeight: pxToRem(20), actionLoaderSvgAnimationHeight: pxToRem(-1200), actionFocusBorderRadius: siteVariables.borderRadiusMedium, }); diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts index a3fffcab6db735..069f297b4cba4a 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts @@ -295,19 +295,9 @@ export const buttonStyles: ComponentSlotStylesPrepared svg`]: { + width: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize, + height: p.size === 'small' ? v.sizeSmallLoaderSvgHeight : v.loaderSvgHeight, }, ...(p.hasContent && { diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts index 0bcc9e18d63c72..9812d7665e14b4 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts @@ -139,7 +139,7 @@ export const buttonVariables = (siteVars: any): ButtonVariables => ({ loaderBorderSize: pxToRem(2), loaderSize: pxToRem(20), - loaderSvgHeight: pxToRem(1220), + loaderSvgHeight: pxToRem(20), loaderSvgAnimationHeight: pxToRem(-1200), sizeSmallContentFontSize: siteVars.fontSizes.small, @@ -149,6 +149,6 @@ export const buttonVariables = (siteVars: any): ButtonVariables => ({ sizeSmallPadding: `0 ${pxToRem(8)}`, sizeSmallLoaderBorderSize: pxToRem(2), sizeSmallLoaderSize: pxToRem(15), - sizeSmallLoaderSvgHeight: pxToRem(895), + sizeSmallLoaderSvgHeight: pxToRem(15), sizeSmallLoaderSvgAnimationHeight: pxToRem(-880), }); diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSecondarySvgDataUrl.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSecondarySvgDataUrl.ts deleted file mode 100644 index 3df4166ba22e6d..00000000000000 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSecondarySvgDataUrl.ts +++ /dev/null @@ -1 +0,0 @@ -export const loaderSecondarySvgDataUrl = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 4880'%3E%3Cg role='presentation'%3E%3Cpath fill='rgba(255,255,255,1)' d='M67.4 26.4c5.8-2 12.4 3.3 11.4 9.4-.4 6.5-8.8 10-13.8 6-5.6-3.6-4.2-13.5 2.4-15.3zM66.5 113.7c5.7-3.3 13.6 1.8 12.7 8.4 0 6.4-8 10.4-13.2 7-5.6-3.2-5.4-12.5.5-15.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M65.5 200.4c5.7-3.4 13.6 2 12.6 8.5 0 6-7 10.7-12.7 7.7-6.4-3-6-13.2.2-16.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M64.3 286.2c5-2 11.3 2.3 11.2 7.8 0 5.4-4.5 11.7-10.5 11-5.4-.3-9.2-6.3-7.3-11.2 1.2-3.2 3.2-6.5 6.6-7.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M59.4 372.5c5-2.6 11.6 1 12 6.5.8 5-3.4 8.6-7 11.3-4.5 3.2-11.7.2-12.6-5.3-1.4-5.5 3.6-9.7 7.6-12.5z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M54.3 457.4c4-2.2 9.6 0 11.2 4.2 1.7 3.7 0 8.4-3.5 10.5-3.7 2.5-8.2 5.6-12.8 4-4.3-1.6-6.5-6.8-4.8-11 1.5-4.2 6.4-5.4 10-7.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M48.6 540.7c4.4-2 10 1 11 5.7 1 4-1.4 8.4-5.4 9.7-4 1.6-8.5 3-13 2.5-5.6-.8-8.6-8-5.3-12.6 2.7-4.4 8.4-3.5 12.6-5.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M29.4 622.4c3-1.5 6.4 0 9.6 0 3.4.3 7.3-1 10.3 1.3 4.6 3 4.4 10.4-.2 13.3-3.7 2-8.2 1.7-12.4 1.5-3.6-.5-7.8-.7-10.2-4-3.2-3.7-1.6-10.2 3-12z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M20.3 698.3c4-2 7.8 1.3 11.4 2.8 4 2 9.6 1 12.2 5 3.3 4.7-.2 12-6 12.3-7 0-14-2.6-19.7-6.6-4.7-3.4-3.5-11.6 2-13.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M12.3 771.3c3-1.5 7-.6 9 2 3 3.8 6.7 6.7 11 8.3 3.3 1 5.7 4 5.5 7.4.2 4.8-4.8 8.7-9.3 7.4-7.7-2.2-14.5-7.2-19.3-13.6-2.8-3.7-1.2-9.8 3-11.5z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M7.5 841.7c4-2 9.2.3 10.3 4.6 1.7 5.4 5 10 9.7 13 4 2.5 4.6 8.4 1.4 11.6-2.5 2.6-7 3-10 1-7.4-5-13-12.6-15.5-21-1.2-3.6.5-8 4-9.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M6.5 910.8c3-1.6 7.3-.4 9 2.6 1.7 2.2 1 5 1.4 7.6 0 5.6 2.5 11 6 15 2.5 2.5 2.7 6.7.5 9.5-2.4 3.3-7.8 3.8-10.7 1-7.6-7.8-11.5-19-10.6-29.6.2-2.7 1.8-5.2 4.3-6.2z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M9.3 980c3.7-2 9 .3 10 4.4 1 2.4-.2 4.8-1 7-2.4 5.7-2.3 12.4.3 18 1 2.3 2.4 5 1.5 7.6-1 4-5.7 6.2-9.5 4.5-2.6-1-3.8-3.7-5-6-4.4-10-4.3-21.8.4-31.6.6-1.7 1.7-3 3.3-4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M16.3 1051.2c4-2.6 10 1 10 5.8.5 3-2 5.3-4 7.4-5.3 5.7-7 14-5.2 21.6 1 3.5-1 7.4-4.4 8.5-3.4 1.2-7.6-.8-8.7-4.3-4.2-13.8.7-30.2 12.3-39z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M26.4 1125.3c4.5-2.6 10.7 1.5 10 6.7-.4 3.3-3.3 5.2-6 6.3-8.2 3.4-14 11.8-14.2 20.6 0 2.6-.6 5.6-3.2 7-4 2.8-10 0-10.2-5-.8-15.3 9.2-30.3 23.6-35.7z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M35.3 1203.2c3.7-.3 8.6-1.2 11.2 2.3 2.7 3.2 1 8.8-3 10-3.7.8-7.7.3-11.3 1.7-8 2.6-13.8 9.5-15.8 17.5-1 4.7-7.6 6.2-10.8 2.7-2.8-2.7-1.7-7-.4-10 4.5-13 16.6-22.6 30-24.2z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M36.4 1283.3c7-.6 14.2.5 20.3 4 3.8 2.4 3.3 8.7-.8 10.6-3 1.5-6-.2-8.6-1-9.8-3.5-21.6.5-27.3 9-1.5 2.4-3 5.6-6 6-4.6 1-9-4.4-6.8-8.7 5.4-11 17-18.8 29.2-20z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M36.5 1363.5c11.6-1 23.8 3.6 31.3 12.7 2.7 3.6-.3 9.5-4.8 9.4-3.2.3-5-2.6-7.3-4.4-8.4-7.4-22.2-7.6-31-.4-2.3 1.8-4.3 5-7.7 4.7-4.7 0-7.5-6.3-4.4-9.8 6-7 14.8-11.3 24-12.2z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M31.4 1444.6c18-4.8 38.3 6.6 43.3 24.6 1 4-3.5 8-7.4 6.6-3.5-1-4-4.8-5.5-7.5-5.5-10.8-19.6-16-30.8-11.4-3.2 1-6.2 4.3-10 3-3.8-1.4-5-7.2-1.7-9.8 3.5-2.8 7.8-4.4 12-5.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M32.4 1524.6c15-3.4 31.8 4 39.2 17.8 3.5 6.5 5.3 14 4.3 21.5-1 4-6.7 5.5-9.5 2.4-2-2-1.4-5-1.6-7.4-.2-11.6-9.6-22-21-23.7-4.4-.8-8.8 0-13 1-4 1.2-7.7-3.5-6-7.2 1-3 4.6-3.7 7.4-4.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M36.3 1604.4c14-2 28.5 6 35 18.2 6 10.6 6 24.3 0 34.8-2 3.5-7.6 3-9-.6-1.8-3.5 1.4-6.8 2-10.2 3.8-12.4-4-26.7-16.3-30.5-4-1.6-8.3-.8-12.4-1.6-4.6-1.7-4-9 .7-10z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M43.3 1685.3c4-1.2 8.2 1 12 2.5 14.7 6.6 23.3 24.2 19.5 40-1.8 8-6.5 15.7-13.4 20.6-3 2.2-8-.6-7.7-4.4 0-2.3 1.8-3.7 3.3-5 7-6 10-16 7.8-24.7-1.8-8-7.6-15-15.3-18-2.2-.8-4.6-1-6.8-2-3.4-2-3-7.5.6-9z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M50.2 1768c1.4-.8 3.2-.8 4.7 0 13.2 5.7 21.7 20.5 20.3 35-1 15-12.6 28.5-27.3 31.4-3.4.6-6.4-3-5-6.3.6-2.6 3.7-3 6-4 8.2-2.8 14.5-10.4 16.2-19 2-9-1.5-18.8-8.6-24.6-2.2-2-5-3-7.2-4.8-2.2-2-1.7-6 .8-7.5z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M57.4 1852.2c3.7-1.8 6.6 2 9 4.5 11 12 11.7 31.6 1.7 44.5-6.8 9.3-18.5 14.6-30 14-2.4-.3-5.3-.2-7-2.2-1.6-2-1-5.4 1.3-6.8 1.7-1 3.8-.3 5.6-.4 9.8 1 20-4.5 24.7-13.2 4.6-8 4.3-18.7-.8-26.5-1.8-3-4.5-5-6.6-7.4-1.4-2.2-.4-5.4 2-6.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M62.3 1938.3c1.7-1 4.3-1 5.6.8 9 11.5 9.2 28.8.8 40.8-7 10.4-20 16.4-32.6 15-5.7-.7-11.3-2.7-16-6-2.6-1.8-2-6.4 1-7.5 2.2-1 4.2.6 6 1.5 8.6 5 20 4.4 28-1.5 7.7-5.4 12-15 10.8-24.3-.3-4.5-2.3-8.6-4.7-12.4-1.6-2-1-5 1-6.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M66.3 2025.2c2-1.2 4.8-.5 5.7 1.6 5.6 12.8 2.2 28.7-8 38.2-9.4 9.2-24.2 12.2-36.5 7.4-7-2.8-13.5-8-17.3-14.7-1.2-2.6 1-5.8 3.8-5.7 2.5 0 3.7 2.4 5 4 7 9.5 20.5 13 31.2 8.4 12-4.7 19-18.8 15.3-31-.8-2.7-2.3-6.5.8-8.2z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M68.6 2112.7c2-1 5 0 5.4 2.4 2.4 14.5-5.8 30-19.2 36-12.5 6.2-28.7 3.6-38.7-6.2-5.6-5.5-9.4-13-10-21-.4-4 6-5 7.2-1.2 1 5.5 3 11 7 15.3 7 7.8 19 11 28.8 7 10.7-3.6 18.4-14.7 17.7-26-.2-2.2-.6-5.3 2-6.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M8.4 2188.4c2-2 6-.3 6 2.6-.4 2-1 4-1.2 5.8-1 8.8 2.5 18 9.3 23.7 7 6 17.2 8 26 5 10-3 17-12.3 18.4-22.5.3-4 6.7-3.6 7 .3-1 15-13.3 28-28 30.3-13 2.5-27.4-3.6-34.6-15-5.2-7.8-6.8-17.8-4.6-27 .4-1 .6-2.4 1.6-3.2z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M15.3 2257c2-1 4.4 0 5 2.2.3 2-1.3 3.3-2.3 4.8-5.7 7.6-6.8 18.2-3 27 4.3 10 15 16.7 26 16.2 10-.3 19.4-6.6 23.7-15.6 1.2-3.4 6.7-2.2 6.4 1.4-.7 3.4-3 6.3-5 9-9.3 11-26 15-39.3 9.2C13.8 2306 5 2292 6 2278c.7-7.8 3.7-15.7 9.3-21z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M25.6 2329.6c1.8-1.2 4.5.2 4.6 2.5.2 2.7-2.8 3.4-4.6 4.7-12 7-16.6 23.5-10 35.7 5.8 12.2 21.6 18.4 34.2 13.2 3.6-1.2 6.4-3.6 9.5-5.7 2.8-2 6 2.5 3.6 4.7-11.4 11-30.5 12-43 2.4-12.8-9-17.4-27.3-10.5-41.3 3.3-7 9-13 16-16z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M33.2 2407.2c2.3-.4 4.6-.8 7-.6 2.4.5 3 4.2.6 5.4-4 .7-8.3 1-12 2.8-12.6 5.3-19.5 20.5-15.2 33.4 4 13.3 18.8 22 32.3 18.8 2-.6 6-2 6.7 1.3.7 3.7-4 4-6.6 4.6-15.4 3-32.3-6.4-37.4-21.4-5.3-13.8 0-30.6 12-39 3.8-2.6 8-4.4 12.6-5.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M37.4 2486.4c5.5-.4 11.3.4 16.3 3 2 1.6.8 5.3-2 5.4-3.5-.8-7-2.3-10.8-2.2-13-.7-25.2 9-27.8 21.4-3 12 3.4 25 14.4 30.5 3.4 2 7.3 2.3 11 3 2.7 1 2.3 5.6-.6 6-17.3-.3-32-16.3-31.7-33.5-.4-17 14-32.7 31-33.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M33.5 2566.7c10.8-2.2 22.7 1.3 30.5 9.3 1.8 1.6 1 5-1.3 5.6-2.3 1-4-1.5-5.6-2.7-9.6-8.4-25-8-34.6.3-8.6 7-12 19.7-8 30 2.3 6.4 7 11.4 12.7 14.8 3.2 2 .6 7.3-2.8 6-13.8-6.8-21.2-24-17-38.7 3-12.3 13.8-22.3 26.3-24.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M32.4 2646.7c15-3.7 32 4.3 38.3 18.5.8 2.3-1.4 4.8-3.8 4.5-2.2 0-3-2.2-4-3.7-5.6-9.7-17.8-14.8-28.6-12.4-9.8 2-18 10-20.5 19.6-2 7.2-.8 15.2 3.4 21.4 1 1.5 2.4 3.3 1.4 5.2-1 2.4-4.7 2.8-6 .7-9.2-11.7-9.2-29.2-.2-41 4.8-6.4 12-11 19.8-12.8z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M31.4 2726.7c14.6-4 31.3 3 38.5 16.3 1.7 3.3 3.4 7 3.7 10.8-.3 2.8-4 4.3-6 2.6-1.6-1-1.7-3-2.3-4.6-2.5-8.4-9.6-15-18-17.5-8.6-2.6-18.6-.3-25.2 5.8-6.5 6-10 15-8.6 23.5 0 1.8 1 4-.5 5.6-1.5 2.2-5.2 1.8-6.3-.7-5.2-17.5 7-37.5 24.7-41.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M36.4 2805.5c14.7-1.7 29.7 7 35.4 20.6 2 5 3.2 10.4 2.8 15.7-.5 4-6.7 4.5-7.8.7-.6-3.3-.3-6.8-1.5-10-3-10.4-12.7-18.2-23.4-18.8-11.8-1-23.7 6.8-27 18-1 2.2-1 5-3.4 6-2.7 1.2-6-1.4-5.6-4.3 2.6-14.6 15.7-26.5 30.4-27.8z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M33.5 2885.7c14-2.8 29.3 4 36.5 16.3 5 8.4 6.4 19 3.3 28.2-1 3-5.7 3.6-7.5 1-1.5-2.2 0-4.8 0-7 2.3-12-5-24.4-16.3-28.6-9.8-4-22-1.2-29 7-1.5 1.5-2.8 4-5.4 3.8-3.2 0-5.3-4-3.3-6.8 5-7.2 13-12.3 21.8-14z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M32.4 2965.7c15-3.5 31.4 4 38.5 17.4 5.8 10.8 5.6 24.7-1 35.2-1.6 3-6.4 2.6-7.8-.5-1.4-2.3.4-4.7 1.3-7 4.2-8.3 3-19-2.8-26.4-6-8-17-12-27-9.5-3 .6-5.7 2.6-8.8 3.3-4 .4-6.4-5-3.6-7.6 3.2-2.5 7.2-3.8 11-4.8z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M34.4 3045.4c14.2-3.4 29.8 4.8 36.7 17.5 7.7 13.5 5 32-6.5 42.5-2.5 2.2-7 .7-7.6-2.5-1-3.2 2-5.3 3.5-7.6 6-7.6 7-18.6 2.4-27-4.4-8.5-13.5-14.3-23-14-2-.2-4.6.4-6.3-1.2-2.5-2-2-6.3.7-7.8z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M48.2 3126c4.2-.4 8 2.2 11.5 4.2 13 8.3 19 25.5 14.5 40-2.6 8.7-8.6 16.4-16.5 20.7-3.2 2-7.7-1-7.4-4.8 0-2.7 2.5-4 4.5-5.5 7.5-5 11.6-14.7 10.5-23.6-1-9-7.2-17.2-15.7-20.5-1.8-1-4-1.5-4.8-3.6-1.3-2.8.5-6.3 3.4-7z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M58.3 3212.3c3.8-1.7 6.8 1.8 9 4.4 9.5 10.8 11.3 27.5 4.5 40-4.6 8.7-12.8 15.4-22.2 18-3.7 1-7.6-2.8-6.5-6.5 1-3.7 5-4 7.8-5.4 11.3-5 17.4-19.2 13-30.8-1.3-4.5-4.2-8.2-7.5-11.4-2.4-2.5-1.2-7 2-8.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M65.2 3302.3c2.8-1.5 6.5-.2 7.7 2.7 2.6 6 3.6 12.6 3 19-1.7 17.8-18.2 32.7-36 32-4.5 0-6.6-6.3-3.4-9.3 2.6-2.5 6.6-1.5 9.7-2.5 10.8-2.6 19-13 18.7-24.2 0-4-1.2-7.6-2.5-11.3-1-2.4.5-5.3 2.7-6.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M67.4 3394.4c3-2.2 8-.2 8.8 3.6 1.3 15-8.5 30.3-22.6 35.8-7.2 2.8-15.4 3.5-23 1.3-3.8-1.3-4.7-7.2-1.3-9.7 2.8-2.4 6.5-.6 9.7-.6 12 .8 23.8-8.7 25.4-20.7.6-3.3-.3-7.6 3-9.5z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M66.5 3485.7c4.3-1.7 9.2 2.8 7.7 7.2-5 14.3-20 24.2-35.2 23.6-6-.2-12-1.6-17-4.8-3.5-2.5-2.8-8.7 1.3-10.2 3-1.5 6 .6 8.7 1.5 10.6 4.2 23.8-.8 29.2-10.8 1.4-2.4 2.3-5.7 5.3-6.5z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M59.5 3575.7c3.7-1.5 8.3 1.4 8.4 5.4.3 4.4-4 7-6.8 9.2-13.7 10-34.2 8.6-46.3-3.2-3.4-3.2-1.5-9.6 3-10.4 3-1 5.4 1.3 7.6 3 7.4 5.7 18.3 6.3 26.4 1.5 2.8-1.3 4.8-4 7.5-5.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M11.4 3651.2c2.5-1.4 6-1 8 1.4 2 2.5 4 5.3 6.8 7 6.6 5 15.5 5.6 23 2.7 4.7-2.3 10.3 2.6 8.8 7.6-1 4-5.6 5-9 6-15 4-32-2.8-40-16-2-3-.7-7.2 2.4-8.8z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M9.5 3723.6c3.4-1 7 1.2 8 4.6 3 8.3 11 14.7 19.8 15.4 2.4.4 5.3 0 7.2 2 3 2.4 3 7.4 0 10-2.5 2.4-6.4 1.7-9.6 1.3C21 3755 9 3745 4.6 3732c-1.2-3.5 1-7.6 4.8-8.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M6.4 3796.4c3.3-1.6 7.6-.2 9.3 3 1 2.7 1 5.5 2 8.2 2 6 6.3 11 12 13.6 2.5 1.2 5.2 2.8 5.6 5.8 1.2 4.7-3.6 9.4-8.3 8-13.5-4.5-23.5-17.8-24.4-32-.2-2.8 1.5-5.4 3.8-6.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M7.3 3868.4c3.3-1.3 7.3.3 9 3.5 1 1.8.4 4 .4 6-.7 7 2 13.7 6.7 18.6 2.4 2 3.4 5.8 1.8 8.7-1.8 4-7.5 5.2-10.8 2.3C5 3899.4.7 3886 2.8 3874c.4-2.6 2.2-4.7 4.5-5.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M8.5 3941.4c4.6-2.7 11 1.3 10.7 6.7-.7 4-2.7 7.8-2.4 12-.2 4 1.3 7.5 2.5 11 1.2 4-1.6 8.3-5.5 9-3.4.8-7-1-8.3-4.4-4.3-9.3-4.5-20.3-.7-29.8.7-1.8 2-3.5 3.7-4.4z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M12.5 4014.7c4.2-2.2 9.8.6 10.5 5.3 1 5-4 8.3-5 13-2 4.6.7 10.7-3.4 14.6-3.8 4-11.3 1.7-12.4-3.7-1.2-8.7 1.2-17.6 6-25 1-1.6 2.3-3.5 4.3-4.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M17.4 4089.3c4.7-2.6 11.3 1.2 11 6.7.5 5-5 7.3-7.3 11-2.7 3.7-2.6 9.7-7.5 11.4-5.3 2.3-11.6-2.8-10.4-8.4 2.2-8.2 7.3-16 14.4-20.7z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M25.4 4164.6c5.4-1.4 11 4 9.3 9.5-.7 4.2-5 5.6-8 7.7-4 2.3-5.7 7.7-10.7 7.8-6 .8-10.6-6.7-7.3-11.8 4-6 10-10.7 16.7-13z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M30.3 4242.6c4.3-1.7 10 0 11.3 4.8 1.8 4.7-1.7 10-6.6 10.6-5 .8-9 6-14.3 4.2-5.6-1.3-7.6-9-3.6-13 3.8-3.4 8.6-5.2 13.3-6.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M35.4 4321.5c4.2-.4 9.4-1 12.3 2.8 3.6 4.3 1.3 12-4.3 13l-11.4 1.2c-6 .3-10-6.8-7-11.8 1.7-4 6.5-4.7 10.4-5.2z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M39.3 4401.5c4.3-.8 8.7.2 12.7 1.6 5.2 2.3 6.2 10.2 2 13.8-4.4 3.8-10.4 1.2-15.3.4-7.2-2.4-6.6-14 .6-15.7z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M49.3 4483c4-.5 7.7 1.7 11 3.8 4.5 3.5 3.7 11.5-1.6 14-4.6 2.4-9.5-.6-13.4-3-5.3-4.2-2.7-13.8 4-14.7z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M56.3 4567.4c7-1.7 15 6.2 12 13.2-1.6 4.6-7.8 6.7-12 4-2.8-1.6-5.7-4-6.2-7.7-.6-4.2 2.2-8.6 6.3-9.6z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M61.4 4653.5c7-3 14.7 5.6 11.5 12.3-2.3 6-11 7-14.8 2-4.2-4.3-2.7-12.4 3-14.3z'/%3E%3Cpath fill='rgba(255,255,255,1)' d='M64.5 4740.3c5.7-3 13.2 2.2 12.4 8.6-.3 6.3-8.4 10.2-13.6 6.5-5.5-3.4-5-12.7 1-15.2zM67.3 4826.3c6.2-2.4 13 4 11.3 10.3-1 6-9.3 9-14 4.8-5.2-4-3.7-13.4 2.7-15z'/%3E%3C/g%3E%3C/svg%3E")`; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderStyles.ts index c238e16107e6e7..aea60697371e25 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderStyles.ts @@ -11,6 +11,13 @@ const rootFlexDirections: ObjectOf = { start: 'row-reverse', end: 'row', }; +const getCircleStyles = (): ICSSInJSStyle => ({ + cx: '50%', + cy: '50%', + r: '45%', + fill: 'none', + strokeWidth: '8px', +}); export const loaderStyles: ComponentSlotStylesPrepared = { root: ({ props: p }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ @@ -25,57 +32,64 @@ export const loaderStyles: ComponentSlotStylesPrepared): ICSSInJSStyle => ({ height: v.containerHeights[p.size], width: v.containerWidths[p.size], - overflow: 'hidden', }), - svg: ({ props: p, theme: t, variables: v }: ComponentStyleFunctionParam) => { - const outerAnimation: ICSSInJSStyle = { - animationName: { - to: { - opacity: 1, - }, + svg: ({ + props: p, + variables: v, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + animation: '3s linear infinite', + animationName: { + '0%': { + transform: 'rotate(0deg) /* @noflip */', }, - animationDelay: '1.5s', - animationDirection: 'normal', - animationDuration: '.3s', - animationFillMode: 'both', - animationIterationCount: '1', - animationPlayState: 'running', - animationTimingFunction: 'ease-out', - display: 'block', - overflow: 'hidden', - position: 'relative', - }; - const svgAnimation: ICSSInJSStyle = { - animationName: { - to: { - transform: `translate3d(0, ${v.svgTranslatePosition[p.size]}, 0)`, - }, + '100%': { + transform: 'rotate(360deg) /* @noflip */', }, - animationDelay: '0s', - animationDirection: 'normal', - animationDuration: '2s', - animationFillMode: 'both', - animationPlayState: 'running', - animationTimingFunction: 'steps(60, end)', - animationIterationCount: 'infinite', - }; - - return { - ...outerAnimation, - - ':before': { - ...svgAnimation, - - backgroundImage: p.secondary ? v.secondarySvgContent : v.svgContent, - content: '" "', - display: 'block', - overflow: 'hidden', - - height: v.svgHeights[p.size], - width: v.svgWidths[p.size], + }, + width: v.svgWidths[p.size], + height: v.svgHeights[p.size], + }), + svgTrack: ({ + props: p, + variables: v, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + stroke: !p.secondary && v.svgTrackColor, + ...getCircleStyles(), + }), + svgTail: ({ + props: p, + variables: v, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + ...getCircleStyles(), + animation: '1.5s cubic-bezier(0.33,0,0.67,1) infinite', + strokeLinecap: 'round', + strokeDasharray: '283', + strokeDashoffset: '280', + transformOrigin: '50% 50%', + stroke: p.secondary ? v.svgSecondaryColor : v.svgTailColor, + animationName: { + '0%': { + strokeDashoffset: '283', + transform: 'rotate(0) /* @noflip */', }, - }; - }, + '25%': { + strokeDashoffset: '283', + transform: 'rotate(0) /* @noflip */', + }, + '50%': { + strokeDashoffset: '75', + transform: 'rotate(45deg) /* @noflip */', + }, + '75%': { + strokeDashoffset: '75', + transform: 'rotate(45deg) /* @noflip */', + }, + '100%': { + strokeDashoffset: '283', + transform: 'rotate(360deg) /* @noflip */', + }, + }, + }), label: () => ({ margin: pxToRem(10), }), diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSvgDataUrl.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSvgDataUrl.ts deleted file mode 100644 index a6913a681236df..00000000000000 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderSvgDataUrl.ts +++ /dev/null @@ -1 +0,0 @@ -export const loaderSvgDataUrl = `url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 80 4880\'%3E%3Cg role=\'presentation\'%3E%3Cpath fill=\'%236264a7\' d=\'M67.4 26.4c5.8-2 12.4 3.3 11.4 9.4-.4 6.5-8.8 10-13.8 6-5.6-3.6-4.2-13.5 2.4-15.3zM66.5 113.7c5.7-3.3 13.6 1.8 12.7 8.4 0 6.4-8 10.4-13.2 7-5.6-3.2-5.4-12.5.5-15.3z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M65.5 200.4c5.7-3.4 13.6 2 12.6 8.5 0 6-7 10.7-12.7 7.7-6.4-3-6-13.2.2-16.3z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M64.3 286.2c5-2 11.3 2.3 11.2 7.8 0 5.4-4.5 11.7-10.5 11-5.4-.3-9.2-6.3-7.3-11.2 1.2-3.2 3.2-6.5 6.6-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M59.4 372.5c5-2.6 11.6 1 12 6.5.8 5-3.4 8.6-7 11.3-4.5 3.2-11.7.2-12.6-5.3-1.4-5.5 3.6-9.7 7.6-12.5z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M54.3 457.4c4-2.2 9.6 0 11.2 4.2 1.7 3.7 0 8.4-3.5 10.5-3.7 2.5-8.2 5.6-12.8 4-4.3-1.6-6.5-6.8-4.8-11 1.5-4.2 6.4-5.4 10-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M48.6 540.7c4.4-2 10 1 11 5.7 1 4-1.4 8.4-5.4 9.7-4 1.6-8.5 3-13 2.5-5.6-.8-8.6-8-5.3-12.6 2.7-4.4 8.4-3.5 12.6-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M29.4 622.4c3-1.5 6.4 0 9.6 0 3.4.3 7.3-1 10.3 1.3 4.6 3 4.4 10.4-.2 13.3-3.7 2-8.2 1.7-12.4 1.5-3.6-.5-7.8-.7-10.2-4-3.2-3.7-1.6-10.2 3-12z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M20.3 698.3c4-2 7.8 1.3 11.4 2.8 4 2 9.6 1 12.2 5 3.3 4.7-.2 12-6 12.3-7 0-14-2.6-19.7-6.6-4.7-3.4-3.5-11.6 2-13.4z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M12.3 771.3c3-1.5 7-.6 9 2 3 3.8 6.7 6.7 11 8.3 3.3 1 5.7 4 5.5 7.4.2 4.8-4.8 8.7-9.3 7.4-7.7-2.2-14.5-7.2-19.3-13.6-2.8-3.7-1.2-9.8 3-11.5z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M7.5 841.7c4-2 9.2.3 10.3 4.6 1.7 5.4 5 10 9.7 13 4 2.5 4.6 8.4 1.4 11.6-2.5 2.6-7 3-10 1-7.4-5-13-12.6-15.5-21-1.2-3.6.5-8 4-9.3z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M6.5 910.8c3-1.6 7.3-.4 9 2.6 1.7 2.2 1 5 1.4 7.6 0 5.6 2.5 11 6 15 2.5 2.5 2.7 6.7.5 9.5-2.4 3.3-7.8 3.8-10.7 1-7.6-7.8-11.5-19-10.6-29.6.2-2.7 1.8-5.2 4.3-6.2z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M9.3 980c3.7-2 9 .3 10 4.4 1 2.4-.2 4.8-1 7-2.4 5.7-2.3 12.4.3 18 1 2.3 2.4 5 1.5 7.6-1 4-5.7 6.2-9.5 4.5-2.6-1-3.8-3.7-5-6-4.4-10-4.3-21.8.4-31.6.6-1.7 1.7-3 3.3-4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M16.3 1051.2c4-2.6 10 1 10 5.8.5 3-2 5.3-4 7.4-5.3 5.7-7 14-5.2 21.6 1 3.5-1 7.4-4.4 8.5-3.4 1.2-7.6-.8-8.7-4.3-4.2-13.8.7-30.2 12.3-39z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M26.4 1125.3c4.5-2.6 10.7 1.5 10 6.7-.4 3.3-3.3 5.2-6 6.3-8.2 3.4-14 11.8-14.2 20.6 0 2.6-.6 5.6-3.2 7-4 2.8-10 0-10.2-5-.8-15.3 9.2-30.3 23.6-35.7z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M35.3 1203.2c3.7-.3 8.6-1.2 11.2 2.3 2.7 3.2 1 8.8-3 10-3.7.8-7.7.3-11.3 1.7-8 2.6-13.8 9.5-15.8 17.5-1 4.7-7.6 6.2-10.8 2.7-2.8-2.7-1.7-7-.4-10 4.5-13 16.6-22.6 30-24.2z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M36.4 1283.3c7-.6 14.2.5 20.3 4 3.8 2.4 3.3 8.7-.8 10.6-3 1.5-6-.2-8.6-1-9.8-3.5-21.6.5-27.3 9-1.5 2.4-3 5.6-6 6-4.6 1-9-4.4-6.8-8.7 5.4-11 17-18.8 29.2-20z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M36.5 1363.5c11.6-1 23.8 3.6 31.3 12.7 2.7 3.6-.3 9.5-4.8 9.4-3.2.3-5-2.6-7.3-4.4-8.4-7.4-22.2-7.6-31-.4-2.3 1.8-4.3 5-7.7 4.7-4.7 0-7.5-6.3-4.4-9.8 6-7 14.8-11.3 24-12.2z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M31.4 1444.6c18-4.8 38.3 6.6 43.3 24.6 1 4-3.5 8-7.4 6.6-3.5-1-4-4.8-5.5-7.5-5.5-10.8-19.6-16-30.8-11.4-3.2 1-6.2 4.3-10 3-3.8-1.4-5-7.2-1.7-9.8 3.5-2.8 7.8-4.4 12-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M32.4 1524.6c15-3.4 31.8 4 39.2 17.8 3.5 6.5 5.3 14 4.3 21.5-1 4-6.7 5.5-9.5 2.4-2-2-1.4-5-1.6-7.4-.2-11.6-9.6-22-21-23.7-4.4-.8-8.8 0-13 1-4 1.2-7.7-3.5-6-7.2 1-3 4.6-3.7 7.4-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M36.3 1604.4c14-2 28.5 6 35 18.2 6 10.6 6 24.3 0 34.8-2 3.5-7.6 3-9-.6-1.8-3.5 1.4-6.8 2-10.2 3.8-12.4-4-26.7-16.3-30.5-4-1.6-8.3-.8-12.4-1.6-4.6-1.7-4-9 .7-10z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M43.3 1685.3c4-1.2 8.2 1 12 2.5 14.7 6.6 23.3 24.2 19.5 40-1.8 8-6.5 15.7-13.4 20.6-3 2.2-8-.6-7.7-4.4 0-2.3 1.8-3.7 3.3-5 7-6 10-16 7.8-24.7-1.8-8-7.6-15-15.3-18-2.2-.8-4.6-1-6.8-2-3.4-2-3-7.5.6-9z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M50.2 1768c1.4-.8 3.2-.8 4.7 0 13.2 5.7 21.7 20.5 20.3 35-1 15-12.6 28.5-27.3 31.4-3.4.6-6.4-3-5-6.3.6-2.6 3.7-3 6-4 8.2-2.8 14.5-10.4 16.2-19 2-9-1.5-18.8-8.6-24.6-2.2-2-5-3-7.2-4.8-2.2-2-1.7-6 .8-7.5z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M57.4 1852.2c3.7-1.8 6.6 2 9 4.5 11 12 11.7 31.6 1.7 44.5-6.8 9.3-18.5 14.6-30 14-2.4-.3-5.3-.2-7-2.2-1.6-2-1-5.4 1.3-6.8 1.7-1 3.8-.3 5.6-.4 9.8 1 20-4.5 24.7-13.2 4.6-8 4.3-18.7-.8-26.5-1.8-3-4.5-5-6.6-7.4-1.4-2.2-.4-5.4 2-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M62.3 1938.3c1.7-1 4.3-1 5.6.8 9 11.5 9.2 28.8.8 40.8-7 10.4-20 16.4-32.6 15-5.7-.7-11.3-2.7-16-6-2.6-1.8-2-6.4 1-7.5 2.2-1 4.2.6 6 1.5 8.6 5 20 4.4 28-1.5 7.7-5.4 12-15 10.8-24.3-.3-4.5-2.3-8.6-4.7-12.4-1.6-2-1-5 1-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M66.3 2025.2c2-1.2 4.8-.5 5.7 1.6 5.6 12.8 2.2 28.7-8 38.2-9.4 9.2-24.2 12.2-36.5 7.4-7-2.8-13.5-8-17.3-14.7-1.2-2.6 1-5.8 3.8-5.7 2.5 0 3.7 2.4 5 4 7 9.5 20.5 13 31.2 8.4 12-4.7 19-18.8 15.3-31-.8-2.7-2.3-6.5.8-8.2z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M68.6 2112.7c2-1 5 0 5.4 2.4 2.4 14.5-5.8 30-19.2 36-12.5 6.2-28.7 3.6-38.7-6.2-5.6-5.5-9.4-13-10-21-.4-4 6-5 7.2-1.2 1 5.5 3 11 7 15.3 7 7.8 19 11 28.8 7 10.7-3.6 18.4-14.7 17.7-26-.2-2.2-.6-5.3 2-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M8.4 2188.4c2-2 6-.3 6 2.6-.4 2-1 4-1.2 5.8-1 8.8 2.5 18 9.3 23.7 7 6 17.2 8 26 5 10-3 17-12.3 18.4-22.5.3-4 6.7-3.6 7 .3-1 15-13.3 28-28 30.3-13 2.5-27.4-3.6-34.6-15-5.2-7.8-6.8-17.8-4.6-27 .4-1 .6-2.4 1.6-3.2z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M15.3 2257c2-1 4.4 0 5 2.2.3 2-1.3 3.3-2.3 4.8-5.7 7.6-6.8 18.2-3 27 4.3 10 15 16.7 26 16.2 10-.3 19.4-6.6 23.7-15.6 1.2-3.4 6.7-2.2 6.4 1.4-.7 3.4-3 6.3-5 9-9.3 11-26 15-39.3 9.2C13.8 2306 5 2292 6 2278c.7-7.8 3.7-15.7 9.3-21z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M25.6 2329.6c1.8-1.2 4.5.2 4.6 2.5.2 2.7-2.8 3.4-4.6 4.7-12 7-16.6 23.5-10 35.7 5.8 12.2 21.6 18.4 34.2 13.2 3.6-1.2 6.4-3.6 9.5-5.7 2.8-2 6 2.5 3.6 4.7-11.4 11-30.5 12-43 2.4-12.8-9-17.4-27.3-10.5-41.3 3.3-7 9-13 16-16z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M33.2 2407.2c2.3-.4 4.6-.8 7-.6 2.4.5 3 4.2.6 5.4-4 .7-8.3 1-12 2.8-12.6 5.3-19.5 20.5-15.2 33.4 4 13.3 18.8 22 32.3 18.8 2-.6 6-2 6.7 1.3.7 3.7-4 4-6.6 4.6-15.4 3-32.3-6.4-37.4-21.4-5.3-13.8 0-30.6 12-39 3.8-2.6 8-4.4 12.6-5.4z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M37.4 2486.4c5.5-.4 11.3.4 16.3 3 2 1.6.8 5.3-2 5.4-3.5-.8-7-2.3-10.8-2.2-13-.7-25.2 9-27.8 21.4-3 12 3.4 25 14.4 30.5 3.4 2 7.3 2.3 11 3 2.7 1 2.3 5.6-.6 6-17.3-.3-32-16.3-31.7-33.5-.4-17 14-32.7 31-33.6z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M33.5 2566.7c10.8-2.2 22.7 1.3 30.5 9.3 1.8 1.6 1 5-1.3 5.6-2.3 1-4-1.5-5.6-2.7-9.6-8.4-25-8-34.6.3-8.6 7-12 19.7-8 30 2.3 6.4 7 11.4 12.7 14.8 3.2 2 .6 7.3-2.8 6-13.8-6.8-21.2-24-17-38.7 3-12.3 13.8-22.3 26.3-24.6z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M32.4 2646.7c15-3.7 32 4.3 38.3 18.5.8 2.3-1.4 4.8-3.8 4.5-2.2 0-3-2.2-4-3.7-5.6-9.7-17.8-14.8-28.6-12.4-9.8 2-18 10-20.5 19.6-2 7.2-.8 15.2 3.4 21.4 1 1.5 2.4 3.3 1.4 5.2-1 2.4-4.7 2.8-6 .7-9.2-11.7-9.2-29.2-.2-41 4.8-6.4 12-11 19.8-12.8z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M31.4 2726.7c14.6-4 31.3 3 38.5 16.3 1.7 3.3 3.4 7 3.7 10.8-.3 2.8-4 4.3-6 2.6-1.6-1-1.7-3-2.3-4.6-2.5-8.4-9.6-15-18-17.5-8.6-2.6-18.6-.3-25.2 5.8-6.5 6-10 15-8.6 23.5 0 1.8 1 4-.5 5.6-1.5 2.2-5.2 1.8-6.3-.7-5.2-17.5 7-37.5 24.7-41.6z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M36.4 2805.5c14.7-1.7 29.7 7 35.4 20.6 2 5 3.2 10.4 2.8 15.7-.5 4-6.7 4.5-7.8.7-.6-3.3-.3-6.8-1.5-10-3-10.4-12.7-18.2-23.4-18.8-11.8-1-23.7 6.8-27 18-1 2.2-1 5-3.4 6-2.7 1.2-6-1.4-5.6-4.3 2.6-14.6 15.7-26.5 30.4-27.8z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M33.5 2885.7c14-2.8 29.3 4 36.5 16.3 5 8.4 6.4 19 3.3 28.2-1 3-5.7 3.6-7.5 1-1.5-2.2 0-4.8 0-7 2.3-12-5-24.4-16.3-28.6-9.8-4-22-1.2-29 7-1.5 1.5-2.8 4-5.4 3.8-3.2 0-5.3-4-3.3-6.8 5-7.2 13-12.3 21.8-14z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M32.4 2965.7c15-3.5 31.4 4 38.5 17.4 5.8 10.8 5.6 24.7-1 35.2-1.6 3-6.4 2.6-7.8-.5-1.4-2.3.4-4.7 1.3-7 4.2-8.3 3-19-2.8-26.4-6-8-17-12-27-9.5-3 .6-5.7 2.6-8.8 3.3-4 .4-6.4-5-3.6-7.6 3.2-2.5 7.2-3.8 11-4.8z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M34.4 3045.4c14.2-3.4 29.8 4.8 36.7 17.5 7.7 13.5 5 32-6.5 42.5-2.5 2.2-7 .7-7.6-2.5-1-3.2 2-5.3 3.5-7.6 6-7.6 7-18.6 2.4-27-4.4-8.5-13.5-14.3-23-14-2-.2-4.6.4-6.3-1.2-2.5-2-2-6.3.7-7.8z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M48.2 3126c4.2-.4 8 2.2 11.5 4.2 13 8.3 19 25.5 14.5 40-2.6 8.7-8.6 16.4-16.5 20.7-3.2 2-7.7-1-7.4-4.8 0-2.7 2.5-4 4.5-5.5 7.5-5 11.6-14.7 10.5-23.6-1-9-7.2-17.2-15.7-20.5-1.8-1-4-1.5-4.8-3.6-1.3-2.8.5-6.3 3.4-7z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M58.3 3212.3c3.8-1.7 6.8 1.8 9 4.4 9.5 10.8 11.3 27.5 4.5 40-4.6 8.7-12.8 15.4-22.2 18-3.7 1-7.6-2.8-6.5-6.5 1-3.7 5-4 7.8-5.4 11.3-5 17.4-19.2 13-30.8-1.3-4.5-4.2-8.2-7.5-11.4-2.4-2.5-1.2-7 2-8.3z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M65.2 3302.3c2.8-1.5 6.5-.2 7.7 2.7 2.6 6 3.6 12.6 3 19-1.7 17.8-18.2 32.7-36 32-4.5 0-6.6-6.3-3.4-9.3 2.6-2.5 6.6-1.5 9.7-2.5 10.8-2.6 19-13 18.7-24.2 0-4-1.2-7.6-2.5-11.3-1-2.4.5-5.3 2.7-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M67.4 3394.4c3-2.2 8-.2 8.8 3.6 1.3 15-8.5 30.3-22.6 35.8-7.2 2.8-15.4 3.5-23 1.3-3.8-1.3-4.7-7.2-1.3-9.7 2.8-2.4 6.5-.6 9.7-.6 12 .8 23.8-8.7 25.4-20.7.6-3.3-.3-7.6 3-9.5z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M66.5 3485.7c4.3-1.7 9.2 2.8 7.7 7.2-5 14.3-20 24.2-35.2 23.6-6-.2-12-1.6-17-4.8-3.5-2.5-2.8-8.7 1.3-10.2 3-1.5 6 .6 8.7 1.5 10.6 4.2 23.8-.8 29.2-10.8 1.4-2.4 2.3-5.7 5.3-6.5z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M59.5 3575.7c3.7-1.5 8.3 1.4 8.4 5.4.3 4.4-4 7-6.8 9.2-13.7 10-34.2 8.6-46.3-3.2-3.4-3.2-1.5-9.6 3-10.4 3-1 5.4 1.3 7.6 3 7.4 5.7 18.3 6.3 26.4 1.5 2.8-1.3 4.8-4 7.5-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M11.4 3651.2c2.5-1.4 6-1 8 1.4 2 2.5 4 5.3 6.8 7 6.6 5 15.5 5.6 23 2.7 4.7-2.3 10.3 2.6 8.8 7.6-1 4-5.6 5-9 6-15 4-32-2.8-40-16-2-3-.7-7.2 2.4-8.8z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M9.5 3723.6c3.4-1 7 1.2 8 4.6 3 8.3 11 14.7 19.8 15.4 2.4.4 5.3 0 7.2 2 3 2.4 3 7.4 0 10-2.5 2.4-6.4 1.7-9.6 1.3C21 3755 9 3745 4.6 3732c-1.2-3.5 1-7.6 4.8-8.4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M6.4 3796.4c3.3-1.6 7.6-.2 9.3 3 1 2.7 1 5.5 2 8.2 2 6 6.3 11 12 13.6 2.5 1.2 5.2 2.8 5.6 5.8 1.2 4.7-3.6 9.4-8.3 8-13.5-4.5-23.5-17.8-24.4-32-.2-2.8 1.5-5.4 3.8-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M7.3 3868.4c3.3-1.3 7.3.3 9 3.5 1 1.8.4 4 .4 6-.7 7 2 13.7 6.7 18.6 2.4 2 3.4 5.8 1.8 8.7-1.8 4-7.5 5.2-10.8 2.3C5 3899.4.7 3886 2.8 3874c.4-2.6 2.2-4.7 4.5-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M8.5 3941.4c4.6-2.7 11 1.3 10.7 6.7-.7 4-2.7 7.8-2.4 12-.2 4 1.3 7.5 2.5 11 1.2 4-1.6 8.3-5.5 9-3.4.8-7-1-8.3-4.4-4.3-9.3-4.5-20.3-.7-29.8.7-1.8 2-3.5 3.7-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M12.5 4014.7c4.2-2.2 9.8.6 10.5 5.3 1 5-4 8.3-5 13-2 4.6.7 10.7-3.4 14.6-3.8 4-11.3 1.7-12.4-3.7-1.2-8.7 1.2-17.6 6-25 1-1.6 2.3-3.5 4.3-4.3z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M17.4 4089.3c4.7-2.6 11.3 1.2 11 6.7.5 5-5 7.3-7.3 11-2.7 3.7-2.6 9.7-7.5 11.4-5.3 2.3-11.6-2.8-10.4-8.4 2.2-8.2 7.3-16 14.4-20.7z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M25.4 4164.6c5.4-1.4 11 4 9.3 9.5-.7 4.2-5 5.6-8 7.7-4 2.3-5.7 7.7-10.7 7.8-6 .8-10.6-6.7-7.3-11.8 4-6 10-10.7 16.7-13z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M30.3 4242.6c4.3-1.7 10 0 11.3 4.8 1.8 4.7-1.7 10-6.6 10.6-5 .8-9 6-14.3 4.2-5.6-1.3-7.6-9-3.6-13 3.8-3.4 8.6-5.2 13.3-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M35.4 4321.5c4.2-.4 9.4-1 12.3 2.8 3.6 4.3 1.3 12-4.3 13l-11.4 1.2c-6 .3-10-6.8-7-11.8 1.7-4 6.5-4.7 10.4-5.2z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M39.3 4401.5c4.3-.8 8.7.2 12.7 1.6 5.2 2.3 6.2 10.2 2 13.8-4.4 3.8-10.4 1.2-15.3.4-7.2-2.4-6.6-14 .6-15.7z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M49.3 4483c4-.5 7.7 1.7 11 3.8 4.5 3.5 3.7 11.5-1.6 14-4.6 2.4-9.5-.6-13.4-3-5.3-4.2-2.7-13.8 4-14.7z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M56.3 4567.4c7-1.7 15 6.2 12 13.2-1.6 4.6-7.8 6.7-12 4-2.8-1.6-5.7-4-6.2-7.7-.6-4.2 2.2-8.6 6.3-9.6z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M61.4 4653.5c7-3 14.7 5.6 11.5 12.3-2.3 6-11 7-14.8 2-4.2-4.3-2.7-12.4 3-14.3z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M64.5 4740.3c5.7-3 13.2 2.2 12.4 8.6-.3 6.3-8.4 10.2-13.6 6.5-5.5-3.4-5-12.7 1-15.2zM67.3 4826.3c6.2-2.4 13 4 11.3 10.3-1 6-9.3 9-14 4.8-5.2-4-3.7-13.4 2.7-15z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")`; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderVariables.ts index 4f756be7c11243..4b59f09c9a7144 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderVariables.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Loader/loaderVariables.ts @@ -1,19 +1,18 @@ import { pxToRem, SizeValue } from '../../../../utils'; -import { loaderSvgDataUrl } from './loaderSvgDataUrl'; -import { loaderSecondarySvgDataUrl } from './loaderSecondarySvgDataUrl'; export interface LoaderVariables { containerHeights: Record; containerWidths: Record; - svgContent: string; - secondarySvgContent: string; svgHeights: Record; svgTranslatePosition: Record; svgWidths: Record; + svgTrackColor: string; + svgTailColor: string; + svgSecondaryColor: string; } -export const loaderVariables = (): LoaderVariables => ({ +export const loaderVariables = (siteVariables: any): LoaderVariables => ({ containerHeights: { smallest: pxToRem(24), smaller: pxToRem(24), @@ -33,16 +32,14 @@ export const loaderVariables = (): LoaderVariables => ({ largest: pxToRem(72), }, - svgContent: loaderSvgDataUrl, - secondarySvgContent: loaderSecondarySvgDataUrl, svgHeights: { - smaller: pxToRem(1464), - smallest: pxToRem(1464), - small: pxToRem(1464), - medium: pxToRem(2196), - large: pxToRem(4392), - larger: pxToRem(4392), - largest: pxToRem(4392), + smallest: pxToRem(24), + smaller: pxToRem(24), + small: pxToRem(24), + medium: pxToRem(36), + large: pxToRem(72), + larger: pxToRem(72), + largest: pxToRem(72), }, svgTranslatePosition: { smallest: pxToRem(-1440), @@ -62,4 +59,7 @@ export const loaderVariables = (): LoaderVariables => ({ larger: pxToRem(72), largest: pxToRem(72), }, + svgTrackColor: siteVariables.colorScheme.brand.border2, + svgTailColor: siteVariables.colorScheme.brand.foreground, + svgSecondaryColor: siteVariables.colorScheme.default.foreground3, });