first commit

node_modules/@fluentui/react/dist/sass/Fabric.Scoped.scss

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// Core styles scoped to the current major version of Fabric
+
+// Variable is set during gulp task as comma seperated list. i.e. 5,1,0
+$ms-fabric-version: 11,0,1;
+
+@import './References';
+@import './mixins/ScopedStyles.Mixins';
+
+// Sets a global flag to enable scoped styles within certain files
+$do-scope-styles: true;
+
+// Scope all core styles under a helper class for the current major version.
+// This produces styles of the form .ms-Fabric-{version #} .ms-font-m.
+
+@include scope-fabric {
+  @import './Animation';
+  @import './BrandIcon';
+  @import './Color';
+  @import './Font';
+  @import './Grid';
+  @import './Icon';
+  @import './Responsive';
+  @import './Utility';
+  @import './Wrapper';
+}
+
+// @font-face definitions do not need to be scoped
+  @import './Font.Definitions';
+  @import './Icon.Definitions';

node_modules/@fluentui/react/dist/sass/Fabric.scss

@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// OSS Framework Design Language
+// --------------------------------------------------
+// Fabric Core Module Loader (LTR)
+
+// Variables and mixins
+@import './References';
+
+// Partials that output CSS
+@import './Animation';
+@import './BrandIcon';
+@import './Color';
+@import './Color.Background';
+@import './Color.Border';
+@import './Color.Font';
+@import './Depth';
+@import './Font';
+@import './Font.Definitions';
+@import './Grid';
+@import './Icon';
+@import './Icon.Definitions';
+@import './Responsive';
+@import './Utility';
+@import './Wrapper';

node_modules/@fluentui/react/dist/sass/ThemingSass.scss

@@ -0,0 +1,6 @@
+/** Imports all theming-related SASS files. */
+@import './effects';
+@import './legacyThemePalette';
+@import './semanticSlots';
+@import './themeOverrides';
+@import './themeVariables';

node_modules/@fluentui/react/dist/sass/_Animation.MDL2.scss

@@ -0,0 +1,170 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These classes are deprecated and will be removed in a future release.
+
+// Output all @keyframes needed for the animations
+@include ms-animation-keyframes;
+
+// Slide
+.ms-slideRightIn10 {
+  @include ms-slideRightIn10;
+}
+
+.ms-slideRightIn20 {
+  @include ms-slideRightIn20;
+}
+
+.ms-slideRightIn40 {
+  @include ms-slideRightIn40;
+}
+
+.ms-slideRightIn400 {
+  @include ms-slideRightIn400;
+}
+
+.ms-slideRightOut40 {
+  @include ms-slideRightOut40;
+}
+
+.ms-slideRightOut400 {
+  @include ms-slideRightOut400;
+}
+
+.ms-slideLeftIn10 {
+  @include ms-slideLeftIn10;
+}
+
+.ms-slideLeftIn20 {
+  @include ms-slideLeftIn20;
+}
+
+.ms-slideLeftIn40 {
+  @include ms-slideLeftIn40;
+}
+
+.ms-slideLeftIn400 {
+  @include ms-slideLeftIn400;
+}
+
+.ms-slideLeftOut40 {
+  @include ms-slideLeftOut40;
+}
+
+.ms-slideLeftOut400 {
+  @include ms-slideLeftOut400;
+}
+
+.ms-slideUpIn10 {
+  @include ms-slideUpIn10;
+}
+
+.ms-slideUpIn20 {
+  @include ms-slideUpIn20;
+}
+
+.ms-slideDownIn10 {
+  @include ms-slideDownIn10;
+}
+
+.ms-slideDownIn20 {
+  @include ms-slideDownIn20;
+}
+
+.ms-slideUpOut10 {
+  @include ms-slideUpOut10;
+}
+
+.ms-slideUpOut20 {
+  @include ms-slideUpOut20;
+}
+
+.ms-slideDownOut10 {
+  @include ms-slideDownOut10;
+}
+
+.ms-slideDownOut20 {
+  @include ms-slideDownOut20;
+}
+
+// Scale
+.ms-scaleUpIn100 {
+  @include ms-scaleUpIn100;
+}
+
+.ms-scaleUpOut103 {
+  @include ms-scaleUpOut103;
+}
+
+.ms-scaleDownOut98 {
+  @include ms-scaleDownOut98;
+}
+
+.ms-scaleDownIn100 {
+  @include ms-scaleDownIn100;
+}
+
+// Fade
+
+.ms-fadeIn100 {
+  @include ms-fadeIn100;
+}
+
+.ms-fadeIn200 {
+  @include ms-fadeIn200;
+}
+
+.ms-fadeIn400 {
+  @include ms-fadeIn400;
+}
+
+.ms-fadeIn500 {
+  @include ms-fadeIn500;
+}
+
+.ms-fadeOut100 {
+  @include ms-fadeOut100;
+}
+
+.ms-fadeOut200 {
+  @include ms-fadeOut200;
+}
+
+.ms-fadeOut400 {
+  @include ms-fadeOut400;
+}
+
+.ms-fadeOut500 {
+  @include ms-fadeOut500;
+}
+
+// Expand-collapse
+
+.ms-expandCollapse100 {
+  @include ms-expandCollapse100;
+}
+
+.ms-expandCollapse200 {
+  @include ms-expandCollapse200;
+}
+
+.ms-expandCollapse400 {
+  @include ms-expandCollapse400;
+}
+
+// Delay
+.ms-delay100 {
+  @include ms-delay100;
+}
+
+.ms-delay200 {
+  @include ms-delay200;
+}
+
+// Rotate
+.ms-rotate90deg {
+  @include ms-rotate90deg;
+}
+
+.ms-rotateN90deg {
+  @include ms-rotateN90deg;
+}

node_modules/@fluentui/react/dist/sass/_Animation.scss

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Output all keyframes used by the motion classes.
+@include ms-motion-keyframes;
+
+// Fades.
+.ms-motion-fadeIn {
+  @include ms-motion-fadeIn;
+}
+
+.ms-motion-fadeOut {
+  @include ms-motion-fadeOut;
+}
+
+// Scales.
+.ms-motion-scaleDownIn {
+  @include ms-motion-scaleDownIn;
+}
+
+.ms-motion-scaleDownOut {
+  @include ms-motion-scaleDownOut;
+}
+
+// Slides.
+.ms-motion-slideLeftOut {
+  @include ms-motion-slideLeftOut;
+}
+
+.ms-motion-slideRightOut {
+  @include ms-motion-slideRightOut;
+}
+
+.ms-motion-slideLeftIn {
+  @include ms-motion-slideLeftIn;
+}
+
+.ms-motion-slideRightIn {
+  @include ms-motion-slideRightIn;
+}
+
+.ms-motion-slideUpOut {
+  @include ms-motion-slideUpOut;
+}
+
+.ms-motion-slideDownOut {
+  @include ms-motion-slideDownOut;
+}
+
+.ms-motion-slideUpIn {
+  @include ms-motion-slideUpIn;
+}
+
+.ms-motion-slideDownIn {
+  @include ms-motion-slideDownIn;
+}

node_modules/@fluentui/react/dist/sass/_BrandIcon.scss

@@ -0,0 +1,108 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+@include ms-brand-icon-classes('1');
+@include ms-brand-icon-size-classes();
+
+// Pixel Ratio 1.5
+@media only screen and (min-resolution: 144dpi) {
+  @include ms-brand-icon-classes('1_5');
+}
+
+// Pixel Ratio 2
+@media only screen and (min-resolution: 192dpi)  {
+  @include ms-brand-icon-classes('2');
+}
+
+// Pixel Ratio 3
+@media only screen and (min-resolution: 288dpi) {
+  @include ms-brand-icon-classes('3');
+}
+
+// The 'onepkg' and 'xls' icons have been deprecated. These classes will be removed in
+// a future release. Until then, they are mapped to 'one' and 'xlsx'.
+
+.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png);
+}
+.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png);
+}
+.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png);
+}
+
+.ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png);
+}
+.ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png);
+}
+.ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+  background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png);
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png);
+  }
+
+  .ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png);
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png);
+  }
+
+  .ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png);
+  }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) {
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png);
+  }
+  .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png);
+  }
+
+  .ms-BrandIcon--xls.ms-BrandIcon--icon16 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon48 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png);
+  }
+  .ms-BrandIcon--xls.ms-BrandIcon--icon96 {
+    background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png);
+  }
+}

node_modules/@fluentui/react/dist/sass/_Color.Background.scss

@@ -0,0 +1,271 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+.ms-bgColor-communicationShade30,
+.ms-bgColor-communicationShade30--hover:hover {
+  @include ms-bgColor-communicationShade30;
+}
+.ms-bgColor-communicationShade20,
+.ms-bgColor-communicationShade20--hover:hover {
+  @include ms-bgColor-communicationShade20;
+}
+.ms-bgColor-communicationShade10,
+.ms-bgColor-communicationShade10--hover:hover {
+  @include ms-bgColor-communicationShade10;
+}
+.ms-bgColor-communicationPrimary,
+.ms-bgColor-communicationPrimary--hover:hover {
+  @include ms-bgColor-communicationPrimary;
+}
+.ms-bgColor-communicationTint10,
+.ms-bgColor-communicationTint10--hover:hover {
+  @include ms-bgColor-communicationTint10;
+}
+.ms-bgColor-communicationTint20,
+.ms-bgColor-communicationTint20--hover:hover {
+  @include ms-bgColor-communicationTint20;
+}
+.ms-bgColor-communicationTint30,
+.ms-bgColor-communicationTint30--hover:hover {
+  @include ms-bgColor-communicationTint30;
+}
+.ms-bgColor-communicationTint40,
+.ms-bgColor-communicationTint40--hover:hover {
+  @include ms-bgColor-communicationTint40;
+}
+
+// Neutral
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+  @include ms-bgColor-black;
+}
+.ms-bgColor-gray220,
+.ms-bgColor-gray220--hover:hover {
+  @include ms-bgColor-gray220;
+}
+.ms-bgColor-gray210,
+.ms-bgColor-gray210--hover:hover {
+  @include ms-bgColor-gray210;
+}
+.ms-bgColor-gray200,
+.ms-bgColor-gray200--hover:hover {
+  @include ms-bgColor-gray200;
+}
+.ms-bgColor-gray190,
+.ms-bgColor-gray190--hover:hover {
+  @include ms-bgColor-gray190;
+}
+.ms-bgColor-gray180,
+.ms-bgColor-gray180--hover:hover {
+  @include ms-bgColor-gray180;
+}
+.ms-bgColor-gray170,
+.ms-bgColor-gray170--hover:hover {
+  @include ms-bgColor-gray170;
+}
+.ms-bgColor-gray160,
+.ms-bgColor-gray160--hover:hover {
+  @include ms-bgColor-gray160;
+}
+.ms-bgColor-gray150,
+.ms-bgColor-gray150--hover:hover {
+  @include ms-bgColor-gray150;
+}
+.ms-bgColor-gray140,
+.ms-bgColor-gray140--hover:hover {
+  @include ms-bgColor-gray140;
+}
+.ms-bgColor-gray130,
+.ms-bgColor-gray130--hover:hover {
+  @include ms-bgColor-gray130;
+}
+.ms-bgColor-gray120,
+.ms-bgColor-gray120--hover:hover {
+  @include ms-bgColor-gray120;
+}
+.ms-bgColor-gray110,
+.ms-bgColor-gray110--hover:hover {
+  @include ms-bgColor-gray110;
+}
+.ms-bgColor-gray100,
+.ms-bgColor-gray100--hover:hover {
+  @include ms-bgColor-gray100;
+}
+.ms-bgColor-gray90,
+.ms-bgColor-gray90--hover:hover {
+  @include ms-bgColor-gray90;
+}
+.ms-bgColor-gray80,
+.ms-bgColor-gray80--hover:hover {
+  @include ms-bgColor-gray80;
+}
+.ms-bgColor-gray70,
+.ms-bgColor-gray70--hover:hover {
+  @include ms-bgColor-gray70;
+}
+.ms-bgColor-gray60,
+.ms-bgColor-gray60--hover:hover {
+  @include ms-bgColor-gray60;
+}
+.ms-bgColor-gray50,
+.ms-bgColor-gray50--hover:hover {
+  @include ms-bgColor-gray50;
+}
+.ms-bgColor-gray40,
+.ms-bgColor-gray40--hover:hover {
+  @include ms-bgColor-gray40;
+}
+.ms-bgColor-gray30,
+.ms-bgColor-gray30--hover:hover {
+  @include ms-bgColor-gray30;
+}
+.ms-bgColor-gray20,
+.ms-bgColor-gray20--hover:hover {
+  @include ms-bgColor-gray20;
+}
+.ms-bgColor-gray10,
+.ms-bgColor-gray10--hover:hover {
+  @include ms-bgColor-gray10;
+}
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+  @include ms-bgColor-white;
+}
+
+// Shared
+.ms-bgColor-sharedPinkRed10,
+.ms-bgColor-sharedPinkRed10--hover:hover {
+  @include ms-bgColor-sharedPinkRed10;
+}
+.ms-bgColor-sharedRed20,
+.ms-bgColor-sharedRed20--hover:hover {
+  @include ms-bgColor-sharedRed20;
+}
+.ms-bgColor-sharedRed10,
+.ms-bgColor-sharedRed10--hover:hover {
+  @include ms-bgColor-sharedRed10;
+}
+.ms-bgColor-sharedRedOrange20,
+.ms-bgColor-sharedRedOrange20--hover:hover {
+  @include ms-bgColor-sharedRedOrange20;
+}
+.ms-bgColor-sharedRedOrange10,
+.ms-bgColor-sharedRedOrange10--hover:hover {
+  @include ms-bgColor-sharedRedOrange10;
+}
+.ms-bgColor-sharedOrange30,
+.ms-bgColor-sharedOrange30--hover:hover {
+  @include ms-bgColor-sharedOrange30;
+}
+.ms-bgColor-sharedOrange20,
+.ms-bgColor-sharedOrange20--hover:hover {
+  @include ms-bgColor-sharedOrange20;
+}
+.ms-bgColor-sharedOrange10,
+.ms-bgColor-sharedOrange10--hover:hover {
+  @include ms-bgColor-sharedOrange10;
+}
+.ms-bgColor-sharedYellow10,
+.ms-bgColor-sharedYellow10--hover:hover {
+  @include ms-bgColor-sharedYellow10;
+}
+.ms-bgColor-sharedOrangeYellow20,
+.ms-bgColor-sharedOrangeYellow20--hover:hover {
+  @include ms-bgColor-sharedOrangeYellow20;
+}
+.ms-bgColor-sharedOrangeYellow10,
+.ms-bgColor-sharedOrangeYellow10--hover:hover {
+  @include ms-bgColor-sharedOrangeYellow10;
+}
+.ms-bgColor-sharedYellowGreen10,
+.ms-bgColor-sharedYellowGreen10--hover:hover {
+  @include ms-bgColor-sharedYellowGreen10;
+}
+.ms-bgColor-sharedGreen20,
+.ms-bgColor-sharedGreen20--hover:hover {
+  @include ms-bgColor-sharedGreen20;
+}
+.ms-bgColor-sharedGreen10,
+.ms-bgColor-sharedGreen10--hover:hover {
+  @include ms-bgColor-sharedGreen10;
+}
+.ms-bgColor-sharedGreenCyan10,
+.ms-bgColor-sharedGreenCyan10--hover:hover {
+  @include ms-bgColor-sharedGreenCyan10;
+}
+.ms-bgColor-sharedCyan40,
+.ms-bgColor-sharedCyan40--hover:hover {
+  @include ms-bgColor-sharedCyan40;
+}
+.ms-bgColor-sharedCyan30,
+.ms-bgColor-sharedCyan30--hover:hover {
+  @include ms-bgColor-sharedCyan30;
+}
+.ms-bgColor-sharedCyan20,
+.ms-bgColor-sharedCyan20--hover:hover {
+  @include ms-bgColor-sharedCyan20;
+}
+.ms-bgColor-sharedCyan10,
+.ms-bgColor-sharedCyan10--hover:hover {
+  @include ms-bgColor-sharedCyan10;
+}
+.ms-bgColor-sharedCyanBlue20,
+.ms-bgColor-sharedCyanBlue20--hover:hover {
+  @include ms-bgColor-sharedCyanBlue20;
+}
+.ms-bgColor-sharedCyanBlue10,
+.ms-bgColor-sharedCyanBlue10--hover:hover {
+  @include ms-bgColor-sharedCyanBlue10;
+}
+.ms-bgColor-sharedBlue10,
+.ms-bgColor-sharedBlue10--hover:hover {
+  @include ms-bgColor-sharedBlue10;
+}
+.ms-bgColor-sharedBlueMagenta40,
+.ms-bgColor-sharedBlueMagenta40--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta40;
+}
+.ms-bgColor-sharedBlueMagenta30,
+.ms-bgColor-sharedBlueMagenta30--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta30;
+}
+.ms-bgColor-sharedBlueMagenta20,
+.ms-bgColor-sharedBlueMagenta20--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta20;
+}
+.ms-bgColor-sharedBlueMagenta10,
+.ms-bgColor-sharedBlueMagenta10--hover:hover {
+  @include ms-bgColor-sharedBlueMagenta10;
+}
+.ms-bgColor-sharedMagenta20,
+.ms-bgColor-sharedMagenta20--hover:hover {
+  @include ms-bgColor-sharedMagenta20;
+}
+.ms-bgColor-sharedMagenta10,
+.ms-bgColor-sharedMagenta10--hover:hover {
+  @include ms-bgColor-sharedMagenta10;
+}
+.ms-bgColor-sharedMagentaPink20,
+.ms-bgColor-sharedMagentaPink20--hover:hover {
+  @include ms-bgColor-sharedMagentaPink20;
+}
+.ms-bgColor-sharedMagentaPink10,
+.ms-bgColor-sharedMagentaPink10--hover:hover {
+  @include ms-bgColor-sharedMagentaPink10;
+}
+.ms-bgColor-sharedGray40,
+.ms-bgColor-sharedGray40--hover:hover {
+  @include ms-bgColor-sharedGray40;
+}
+.ms-bgColor-sharedGray30,
+.ms-bgColor-sharedGray30--hover:hover {
+  @include ms-bgColor-sharedGray30;
+}
+.ms-bgColor-sharedGray20,
+.ms-bgColor-sharedGray20--hover:hover {
+  @include ms-bgColor-sharedGray20;
+}
+.ms-bgColor-sharedGray10,
+.ms-bgColor-sharedGray10--hover:hover {
+  @include ms-bgColor-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/_Color.Border.scss

@@ -0,0 +1,271 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+.ms-borderColor-communicationShade30,
+.ms-borderColor-communicationShade30--hover:hover {
+  @include ms-borderColor-communicationShade30;
+}
+.ms-borderColor-communicationShade20,
+.ms-borderColor-communicationShade20--hover:hover {
+  @include ms-borderColor-communicationShade20;
+}
+.ms-borderColor-communicationShade10,
+.ms-borderColor-communicationShade10--hover:hover {
+  @include ms-borderColor-communicationShade10;
+}
+.ms-borderColor-communicationPrimary,
+.ms-borderColor-communicationPrimary--hover:hover {
+  @include ms-borderColor-communicationPrimary;
+}
+.ms-borderColor-communicationTint10,
+.ms-borderColor-communicationTint10--hover:hover {
+  @include ms-borderColor-communicationTint10;
+}
+.ms-borderColor-communicationTint20,
+.ms-borderColor-communicationTint20--hover:hover {
+  @include ms-borderColor-communicationTint20;
+}
+.ms-borderColor-communicationTint30,
+.ms-borderColor-communicationTint30--hover:hover {
+  @include ms-borderColor-communicationTint30;
+}
+.ms-borderColor-communicationTint40,
+.ms-borderColor-communicationTint40--hover:hover {
+  @include ms-borderColor-communicationTint40;
+}
+
+// Neutral
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+  @include ms-borderColor-black;
+}
+.ms-borderColor-gray220,
+.ms-borderColor-gray220--hover:hover {
+  @include ms-borderColor-gray220;
+}
+.ms-borderColor-gray210,
+.ms-borderColor-gray210--hover:hover {
+  @include ms-borderColor-gray210;
+}
+.ms-borderColor-gray200,
+.ms-borderColor-gray200--hover:hover {
+  @include ms-borderColor-gray200;
+}
+.ms-borderColor-gray190,
+.ms-borderColor-gray190--hover:hover {
+  @include ms-borderColor-gray190;
+}
+.ms-borderColor-gray180,
+.ms-borderColor-gray180--hover:hover {
+  @include ms-borderColor-gray180;
+}
+.ms-borderColor-gray170,
+.ms-borderColor-gray170--hover:hover {
+  @include ms-borderColor-gray170;
+}
+.ms-borderColor-gray160,
+.ms-borderColor-gray160--hover:hover {
+  @include ms-borderColor-gray160;
+}
+.ms-borderColor-gray150,
+.ms-borderColor-gray150--hover:hover {
+  @include ms-borderColor-gray150;
+}
+.ms-borderColor-gray140,
+.ms-borderColor-gray140--hover:hover {
+  @include ms-borderColor-gray140;
+}
+.ms-borderColor-gray130,
+.ms-borderColor-gray130--hover:hover {
+  @include ms-borderColor-gray130;
+}
+.ms-borderColor-gray120,
+.ms-borderColor-gray120--hover:hover {
+  @include ms-borderColor-gray120;
+}
+.ms-borderColor-gray110,
+.ms-borderColor-gray110--hover:hover {
+  @include ms-borderColor-gray110;
+}
+.ms-borderColor-gray100,
+.ms-borderColor-gray100--hover:hover {
+  @include ms-borderColor-gray100;
+}
+.ms-borderColor-gray90,
+.ms-borderColor-gray90--hover:hover {
+  @include ms-borderColor-gray90;
+}
+.ms-borderColor-gray80,
+.ms-borderColor-gray80--hover:hover {
+  @include ms-borderColor-gray80;
+}
+.ms-borderColor-gray70,
+.ms-borderColor-gray70--hover:hover {
+  @include ms-borderColor-gray70;
+}
+.ms-borderColor-gray60,
+.ms-borderColor-gray60--hover:hover {
+  @include ms-borderColor-gray60;
+}
+.ms-borderColor-gray50,
+.ms-borderColor-gray50--hover:hover {
+  @include ms-borderColor-gray50;
+}
+.ms-borderColor-gray40,
+.ms-borderColor-gray40--hover:hover {
+  @include ms-borderColor-gray40;
+}
+.ms-borderColor-gray30,
+.ms-borderColor-gray30--hover:hover {
+  @include ms-borderColor-gray30;
+}
+.ms-borderColor-gray20,
+.ms-borderColor-gray20--hover:hover {
+  @include ms-borderColor-gray20;
+}
+.ms-borderColor-gray10,
+.ms-borderColor-gray10--hover:hover {
+  @include ms-borderColor-gray10;
+}
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+  @include ms-borderColor-white;
+}
+
+// Shared
+.ms-borderColor-sharedPinkRed10,
+.ms-borderColor-sharedPinkRed10--hover:hover {
+  @include ms-borderColor-sharedPinkRed10;
+}
+.ms-borderColor-sharedRed20,
+.ms-borderColor-sharedRed20--hover:hover {
+  @include ms-borderColor-sharedRed20;
+}
+.ms-borderColor-sharedRed10,
+.ms-borderColor-sharedRed10--hover:hover {
+  @include ms-borderColor-sharedRed10;
+}
+.ms-borderColor-sharedRedOrange20,
+.ms-borderColor-sharedRedOrange20--hover:hover {
+  @include ms-borderColor-sharedRedOrange20;
+}
+.ms-borderColor-sharedRedOrange10,
+.ms-borderColor-sharedRedOrange10--hover:hover {
+  @include ms-borderColor-sharedRedOrange10;
+}
+.ms-borderColor-sharedOrange30,
+.ms-borderColor-sharedOrange30--hover:hover {
+  @include ms-borderColor-sharedOrange30;
+}
+.ms-borderColor-sharedOrange20,
+.ms-borderColor-sharedOrange20--hover:hover {
+  @include ms-borderColor-sharedOrange20;
+}
+.ms-borderColor-sharedOrange10,
+.ms-borderColor-sharedOrange10--hover:hover {
+  @include ms-borderColor-sharedOrange10;
+}
+.ms-borderColor-sharedYellow10,
+.ms-borderColor-sharedYellow10--hover:hover {
+  @include ms-borderColor-sharedYellow10;
+}
+.ms-borderColor-sharedOrangeYellow20,
+.ms-borderColor-sharedOrangeYellow20--hover:hover {
+  @include ms-borderColor-sharedOrangeYellow20;
+}
+.ms-borderColor-sharedOrangeYellow10,
+.ms-borderColor-sharedOrangeYellow10--hover:hover {
+  @include ms-borderColor-sharedOrangeYellow10;
+}
+.ms-borderColor-sharedYellowGreen10,
+.ms-borderColor-sharedYellowGreen10--hover:hover {
+  @include ms-borderColor-sharedYellowGreen10;
+}
+.ms-borderColor-sharedGreen20,
+.ms-borderColor-sharedGreen20--hover:hover {
+  @include ms-borderColor-sharedGreen20;
+}
+.ms-borderColor-sharedGreen10,
+.ms-borderColor-sharedGreen10--hover:hover {
+  @include ms-borderColor-sharedGreen10;
+}
+.ms-borderColor-sharedGreenCyan10,
+.ms-borderColor-sharedGreenCyan10--hover:hover {
+  @include ms-borderColor-sharedGreenCyan10;
+}
+.ms-borderColor-sharedCyan40,
+.ms-borderColor-sharedCyan40--hover:hover {
+  @include ms-borderColor-sharedCyan40;
+}
+.ms-borderColor-sharedCyan30,
+.ms-borderColor-sharedCyan30--hover:hover {
+  @include ms-borderColor-sharedCyan30;
+}
+.ms-borderColor-sharedCyan20,
+.ms-borderColor-sharedCyan20--hover:hover {
+  @include ms-borderColor-sharedCyan20;
+}
+.ms-borderColor-sharedCyan10,
+.ms-borderColor-sharedCyan10--hover:hover {
+  @include ms-borderColor-sharedCyan10;
+}
+.ms-borderColor-sharedCyanBlue20,
+.ms-borderColor-sharedCyanBlue20--hover:hover {
+  @include ms-borderColor-sharedCyanBlue20;
+}
+.ms-borderColor-sharedCyanBlue10,
+.ms-borderColor-sharedCyanBlue10--hover:hover {
+  @include ms-borderColor-sharedCyanBlue10;
+}
+.ms-borderColor-sharedBlue10,
+.ms-borderColor-sharedBlue10--hover:hover {
+  @include ms-borderColor-sharedBlue10;
+}
+.ms-borderColor-sharedBlueMagenta40,
+.ms-borderColor-sharedBlueMagenta40--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta40;
+}
+.ms-borderColor-sharedBlueMagenta30,
+.ms-borderColor-sharedBlueMagenta30--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta30;
+}
+.ms-borderColor-sharedBlueMagenta20,
+.ms-borderColor-sharedBlueMagenta20--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta20;
+}
+.ms-borderColor-sharedBlueMagenta10,
+.ms-borderColor-sharedBlueMagenta10--hover:hover {
+  @include ms-borderColor-sharedBlueMagenta10;
+}
+.ms-borderColor-sharedMagenta20,
+.ms-borderColor-sharedMagenta20--hover:hover {
+  @include ms-borderColor-sharedMagenta20;
+}
+.ms-borderColor-sharedMagenta10,
+.ms-borderColor-sharedMagenta10--hover:hover {
+  @include ms-borderColor-sharedMagenta10;
+}
+.ms-borderColor-sharedMagentaPink20,
+.ms-borderColor-sharedMagentaPink20--hover:hover {
+  @include ms-borderColor-sharedMagentaPink20;
+}
+.ms-borderColor-sharedMagentaPink10,
+.ms-borderColor-sharedMagentaPink10--hover:hover {
+  @include ms-borderColor-sharedMagentaPink10;
+}
+.ms-borderColor-sharedGray40,
+.ms-borderColor-sharedGray40--hover:hover {
+  @include ms-borderColor-sharedGray40;
+}
+.ms-borderColor-sharedGray30,
+.ms-borderColor-sharedGray30--hover:hover {
+  @include ms-borderColor-sharedGray30;
+}
+.ms-borderColor-sharedGray20,
+.ms-borderColor-sharedGray20--hover:hover {
+  @include ms-borderColor-sharedGray20;
+}
+.ms-borderColor-sharedGray10,
+.ms-borderColor-sharedGray10--hover:hover {
+  @include ms-borderColor-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/_Color.Font.scss

@@ -0,0 +1,272 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+
+// Communication
+.ms-fontColor-communicationShade30,
+.ms-fontColor-communicationShade30--hover:hover {
+  @include ms-fontColor-communicationShade30;
+}
+.ms-fontColor-communicationShade20,
+.ms-fontColor-communicationShade20--hover:hover {
+  @include ms-fontColor-communicationShade20;
+}
+.ms-fontColor-communicationShade10,
+.ms-fontColor-communicationShade10--hover:hover {
+  @include ms-fontColor-communicationShade10;
+}
+.ms-fontColor-communicationPrimary,
+.ms-fontColor-communicationPrimary--hover:hover {
+  @include ms-fontColor-communicationPrimary;
+}
+.ms-fontColor-communicationTint10,
+.ms-fontColor-communicationTint10--hover:hover {
+  @include ms-fontColor-communicationTint10;
+}
+.ms-fontColor-communicationTint20,
+.ms-fontColor-communicationTint20--hover:hover {
+  @include ms-fontColor-communicationTint20;
+}
+.ms-fontColor-communicationTint30,
+.ms-fontColor-communicationTint30--hover:hover {
+  @include ms-fontColor-communicationTint30;
+}
+.ms-fontColor-communicationTint40,
+.ms-fontColor-communicationTint40--hover:hover {
+  @include ms-fontColor-communicationTint40;
+}
+
+// Neutral
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+  @include ms-fontColor-black;
+}
+.ms-fontColor-gray220,
+.ms-fontColor-gray220--hover:hover {
+  @include ms-fontColor-gray220;
+}
+.ms-fontColor-gray210,
+.ms-fontColor-gray210--hover:hover {
+  @include ms-fontColor-gray210;
+}
+.ms-fontColor-gray200,
+.ms-fontColor-gray200--hover:hover {
+  @include ms-fontColor-gray200;
+}
+.ms-fontColor-gray190,
+.ms-fontColor-gray190--hover:hover {
+  @include ms-fontColor-gray190;
+}
+.ms-fontColor-gray180,
+.ms-fontColor-gray180--hover:hover {
+  @include ms-fontColor-gray180;
+}
+.ms-fontColor-gray170,
+.ms-fontColor-gray170--hover:hover {
+  @include ms-fontColor-gray170;
+}
+.ms-fontColor-gray160,
+.ms-fontColor-gray160--hover:hover {
+  @include ms-fontColor-gray160;
+}
+.ms-fontColor-gray150,
+.ms-fontColor-gray150--hover:hover {
+  @include ms-fontColor-gray150;
+}
+.ms-fontColor-gray140,
+.ms-fontColor-gray140--hover:hover {
+  @include ms-fontColor-gray140;
+}
+.ms-fontColor-gray130,
+.ms-fontColor-gray130--hover:hover {
+  @include ms-fontColor-gray130;
+}
+.ms-fontColor-gray120,
+.ms-fontColor-gray120--hover:hover {
+  @include ms-fontColor-gray120;
+}
+.ms-fontColor-gray110,
+.ms-fontColor-gray110--hover:hover {
+  @include ms-fontColor-gray110;
+}
+.ms-fontColor-gray100,
+.ms-fontColor-gray100--hover:hover {
+  @include ms-fontColor-gray100;
+}
+.ms-fontColor-gray90,
+.ms-fontColor-gray90--hover:hover {
+  @include ms-fontColor-gray90;
+}
+.ms-fontColor-gray80,
+.ms-fontColor-gray80--hover:hover {
+  @include ms-fontColor-gray80;
+}
+.ms-fontColor-gray70,
+.ms-fontColor-gray70--hover:hover {
+  @include ms-fontColor-gray70;
+}
+.ms-fontColor-gray60,
+.ms-fontColor-gray60--hover:hover {
+  @include ms-fontColor-gray60;
+}
+.ms-fontColor-gray50,
+.ms-fontColor-gray50--hover:hover {
+  @include ms-fontColor-gray50;
+}
+.ms-fontColor-gray40,
+.ms-fontColor-gray40--hover:hover {
+  @include ms-fontColor-gray40;
+}
+.ms-fontColor-gray30,
+.ms-fontColor-gray30--hover:hover {
+  @include ms-fontColor-gray30;
+}
+.ms-fontColor-gray20,
+.ms-fontColor-gray20--hover:hover {
+  @include ms-fontColor-gray20;
+}
+.ms-fontColor-gray10,
+.ms-fontColor-gray10--hover:hover {
+  @include ms-fontColor-gray10;
+}
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+  @include ms-fontColor-white;
+}
+
+// Shared
+.ms-fontColor-sharedPinkRed10,
+.ms-fontColor-sharedPinkRed10--hover:hover {
+  @include ms-fontColor-sharedPinkRed10;
+}
+.ms-fontColor-sharedRed20,
+.ms-fontColor-sharedRed20--hover:hover {
+  @include ms-fontColor-sharedRed20;
+}
+.ms-fontColor-sharedRed10,
+.ms-fontColor-sharedRed10--hover:hover {
+  @include ms-fontColor-sharedRed10;
+}
+.ms-fontColor-sharedRedOrange20,
+.ms-fontColor-sharedRedOrange20--hover:hover {
+  @include ms-fontColor-sharedRedOrange20;
+}
+.ms-fontColor-sharedRedOrange10,
+.ms-fontColor-sharedRedOrange10--hover:hover {
+  @include ms-fontColor-sharedRedOrange10;
+}
+.ms-fontColor-sharedOrange30,
+.ms-fontColor-sharedOrange30--hover:hover {
+  @include ms-fontColor-sharedOrange30;
+}
+.ms-fontColor-sharedOrange20,
+.ms-fontColor-sharedOrange20--hover:hover {
+  @include ms-fontColor-sharedOrange20;
+}
+.ms-fontColor-sharedOrange10,
+.ms-fontColor-sharedOrange10--hover:hover {
+  @include ms-fontColor-sharedOrange10;
+}
+.ms-fontColor-sharedYellow10,
+.ms-fontColor-sharedYellow10--hover:hover {
+  @include ms-fontColor-sharedYellow10;
+}
+.ms-fontColor-sharedOrangeYellow20,
+.ms-fontColor-sharedOrangeYellow20--hover:hover {
+  @include ms-fontColor-sharedOrangeYellow20;
+}
+.ms-fontColor-sharedOrangeYellow10,
+.ms-fontColor-sharedOrangeYellow10--hover:hover {
+  @include ms-fontColor-sharedOrangeYellow10;
+}
+.ms-fontColor-sharedYellowGreen10,
+.ms-fontColor-sharedYellowGreen10--hover:hover {
+  @include ms-fontColor-sharedYellowGreen10;
+}
+.ms-fontColor-sharedGreen20,
+.ms-fontColor-sharedGreen20--hover:hover {
+  @include ms-fontColor-sharedGreen20;
+}
+.ms-fontColor-sharedGreen10,
+.ms-fontColor-sharedGreen10--hover:hover {
+  @include ms-fontColor-sharedGreen10;
+}
+.ms-fontColor-sharedGreenCyan10,
+.ms-fontColor-sharedGreenCyan10--hover:hover {
+  @include ms-fontColor-sharedGreenCyan10;
+}
+.ms-fontColor-sharedCyan40,
+.ms-fontColor-sharedCyan40--hover:hover {
+  @include ms-fontColor-sharedCyan40;
+}
+.ms-fontColor-sharedCyan30,
+.ms-fontColor-sharedCyan30--hover:hover {
+  @include ms-fontColor-sharedCyan30;
+}
+.ms-fontColor-sharedCyan20,
+.ms-fontColor-sharedCyan20--hover:hover {
+  @include ms-fontColor-sharedCyan20;
+}
+.ms-fontColor-sharedCyan10,
+.ms-fontColor-sharedCyan10--hover:hover {
+  @include ms-fontColor-sharedCyan10;
+}
+.ms-fontColor-sharedCyanBlue20,
+.ms-fontColor-sharedCyanBlue20--hover:hover {
+  @include ms-fontColor-sharedCyanBlue20;
+}
+.ms-fontColor-sharedCyanBlue10,
+.ms-fontColor-sharedCyanBlue10--hover:hover {
+  @include ms-fontColor-sharedCyanBlue10;
+}
+.ms-fontColor-sharedBlue10,
+.ms-fontColor-sharedBlue10--hover:hover {
+  @include ms-fontColor-sharedBlue10;
+}
+.ms-fontColor-sharedBlueMagenta40,
+.ms-fontColor-sharedBlueMagenta40--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta40;
+}
+.ms-fontColor-sharedBlueMagenta30,
+.ms-fontColor-sharedBlueMagenta30--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta30;
+}
+.ms-fontColor-sharedBlueMagenta20,
+.ms-fontColor-sharedBlueMagenta20--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta20;
+}
+.ms-fontColor-sharedBlueMagenta10,
+.ms-fontColor-sharedBlueMagenta10--hover:hover {
+  @include ms-fontColor-sharedBlueMagenta10;
+}
+.ms-fontColor-sharedMagenta20,
+.ms-fontColor-sharedMagenta20--hover:hover {
+  @include ms-fontColor-sharedMagenta20;
+}
+.ms-fontColor-sharedMagenta10,
+.ms-fontColor-sharedMagenta10--hover:hover {
+  @include ms-fontColor-sharedMagenta10;
+}
+.ms-fontColor-sharedMagentaPink20,
+.ms-fontColor-sharedMagentaPink20--hover:hover {
+  @include ms-fontColor-sharedMagentaPink20;
+}
+.ms-fontColor-sharedMagentaPink10,
+.ms-fontColor-sharedMagentaPink10--hover:hover {
+  @include ms-fontColor-sharedMagentaPink10;
+}
+.ms-fontColor-sharedGray40,
+.ms-fontColor-sharedGray40--hover:hover {
+  @include ms-fontColor-sharedGray40;
+}
+.ms-fontColor-sharedGray30,
+.ms-fontColor-sharedGray30--hover:hover {
+  @include ms-fontColor-sharedGray30;
+}
+.ms-fontColor-sharedGray20,
+.ms-fontColor-sharedGray20--hover:hover {
+  @include ms-fontColor-sharedGray20;
+}
+.ms-fontColor-sharedGray10,
+.ms-fontColor-sharedGray10--hover:hover {
+  @include ms-fontColor-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/_Color.MDL2.scss

@@ -0,0 +1,694 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These classes are deprecated and will be removed in a future release.
+
+//== Theme colors
+//
+
+// Background
+.ms-bgColor-themeDark,
+.ms-bgColor-themeDark--hover:hover {
+  @include ms-bgColor-themeDark;
+}
+.ms-bgColor-themeDarkAlt,
+.ms-bgColor-themeDarkAlt--hover:hover {
+  @include ms-bgColor-themeDarkAlt;
+}
+.ms-bgColor-themeDarker,
+.ms-bgColor-themeDarker--hover:hover {
+  @include ms-bgColor-themeDarker;
+}
+.ms-bgColor-themePrimary,
+.ms-bgColor-themePrimary--hover:hover {
+  @include ms-bgColor-themePrimary;
+}
+.ms-bgColor-themeSecondary,
+.ms-bgColor-themeSecondary--hover:hover {
+  @include ms-bgColor-themeSecondary;
+}
+.ms-bgColor-themeTertiary,
+.ms-bgColor-themeTertiary--hover:hover {
+  @include ms-bgColor-themeTertiary;
+}
+.ms-bgColor-themeLight,
+.ms-bgColor-themeLight--hover:hover {
+  @include ms-bgColor-themeLight;
+}
+.ms-bgColor-themeLighter,
+.ms-bgColor-themeLighter--hover:hover {
+  @include ms-bgColor-themeLighter;
+}
+.ms-bgColor-themeLighterAlt,
+.ms-bgColor-themeLighterAlt--hover:hover {
+  @include ms-bgColor-themeLighterAlt;
+}
+
+// Border
+.ms-borderColor-themeDark,
+.ms-borderColor-themeDark--hover:hover {
+  @include ms-borderColor-themeDark;
+}
+.ms-borderColor-themeDarkAlt,
+.ms-borderColor-themeDarkAlt--hover:hover {
+  @include ms-borderColor-themeDarkAlt;
+}
+.ms-borderColor-themeDarker,
+.ms-borderColor-themeDarker--hover:hover {
+  @include ms-borderColor-themeDarker;
+}
+.ms-borderColor-themePrimary,
+.ms-borderColor-themePrimary--hover:hover {
+  @include ms-borderColor-themePrimary;
+}
+.ms-borderColor-themeSecondary,
+.ms-borderColor-themeSecondary--hover:hover {
+  @include ms-borderColor-themeSecondary;
+}
+.ms-borderColor-themeTertiary,
+.ms-borderColor-themeTertiary--hover:hover {
+  @include ms-borderColor-themeTertiary;
+}
+.ms-borderColor-themeLight,
+.ms-borderColor-themeLight--hover:hover {
+  @include ms-borderColor-themeLight;
+}
+.ms-borderColor-themeLighter,
+.ms-borderColor-themeLighter--hover:hover {
+  @include ms-borderColor-themeLighter;
+}
+.ms-borderColor-themeLighterAlt,
+.ms-borderColor-themeLighterAlt--hover:hover {
+  @include ms-borderColor-themeLighterAlt;
+}
+
+// Font
+.ms-fontColor-themeDarker,
+.ms-fontColor-themeDarker--hover:hover {
+  @include ms-fontColor-themeDarker;
+}
+.ms-fontColor-themeDark,
+.ms-fontColor-themeDark--hover:hover {
+  @include ms-fontColor-themeDark;
+}
+.ms-fontColor-themeDarkAlt,
+.ms-fontColor-themeDarkAlt--hover:hover {
+  @include ms-fontColor-themeDarkAlt;
+}
+.ms-fontColor-themePrimary,
+.ms-fontColor-themePrimary--hover:hover {
+  @include ms-fontColor-themePrimary;
+}
+.ms-fontColor-themeSecondary,
+.ms-fontColor-themeSecondary--hover:hover {
+  @include ms-fontColor-themeSecondary;
+}
+.ms-fontColor-themeTertiary,
+.ms-fontColor-themeTertiary--hover:hover {
+  @include ms-fontColor-themeTertiary;
+}
+.ms-fontColor-themeLight,
+.ms-fontColor-themeLight--hover:hover {
+  @include ms-fontColor-themeLight;
+}
+.ms-fontColor-themeLighter,
+.ms-fontColor-themeLighter--hover:hover {
+  @include ms-fontColor-themeLighter;
+}
+.ms-fontColor-themeLighterAlt,
+.ms-fontColor-themeLighterAlt--hover:hover {
+  @include ms-fontColor-themeLighterAlt;
+}
+
+//== Neutral colors
+//
+
+// Background
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+  @include ms-bgColor-black;
+}
+.ms-bgColor-neutralDark,
+.ms-bgColor-neutralDark--hover:hover {
+  @include ms-bgColor-neutralDark;
+}
+.ms-bgColor-neutralPrimary,
+.ms-bgColor-neutralPrimary--hover:hover {
+  @include ms-bgColor-neutralPrimary;
+}
+.ms-bgColor-neutralPrimaryAlt,
+.ms-bgColor-neutralPrimaryAlt--hover:hover {
+  @include ms-bgColor-neutralPrimaryAlt;
+}
+.ms-bgColor-neutralSecondary,
+.ms-bgColor-neutralSecondary--hover:hover {
+  @include ms-bgColor-neutralSecondary;
+}
+.ms-bgColor-neutralSecondaryAlt,
+.ms-bgColor-neutralSecondaryAlt--hover:hover {
+  @include ms-bgColor-neutralSecondaryAlt;
+}
+.ms-bgColor-neutralTertiary,
+.ms-bgColor-neutralTertiary--hover:hover {
+  @include ms-bgColor-neutralTertiary;
+}
+.ms-bgColor-neutralTertiaryAlt,
+.ms-bgColor-neutralTertiaryAlt--hover:hover {
+  @include ms-bgColor-neutralTertiaryAlt;
+}
+.ms-bgColor-neutralQuaternary,
+.ms-bgColor-neutralQuaternary--hover:hover {
+  @include ms-bgColor-neutralQuaternary;
+}
+.ms-bgColor-neutralQuaternaryAlt,
+.ms-bgColor-neutralQuaternaryAlt--hover:hover {
+  @include ms-bgColor-neutralQuaternaryAlt;
+}
+.ms-bgColor-neutralLight,
+.ms-bgColor-neutralLight--hover:hover {
+  @include ms-bgColor-neutralLight;
+}
+.ms-bgColor-neutralLighter,
+.ms-bgColor-neutralLighter--hover:hover {
+  @include ms-bgColor-neutralLighter;
+}
+.ms-bgColor-neutralLighterAlt,
+.ms-bgColor-neutralLighterAlt--hover:hover {
+  @include ms-bgColor-neutralLighterAlt;
+}
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+  @include ms-bgColor-white;
+}
+
+// Border
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+  @include ms-borderColor-black;
+}
+.ms-borderColor-neutralDark,
+.ms-borderColor-neutralDark--hover:hover {
+  @include ms-borderColor-neutralDark;
+}
+.ms-borderColor-neutralPrimary,
+.ms-borderColor-neutralPrimary--hover:hover {
+  @include ms-borderColor-neutralPrimary;
+}
+.ms-borderColor-neutralPrimaryAlt,
+.ms-borderColor-neutralPrimaryAlt--hover:hover {
+  @include ms-borderColor-neutralPrimaryAlt;
+}
+.ms-borderColor-neutralSecondary,
+.ms-borderColor-neutralSecondary--hover:hover {
+  @include ms-borderColor-neutralSecondary;
+}
+.ms-borderColor-neutralSecondaryAlt,
+.ms-borderColor-neutralSecondaryAlt--hover:hover {
+  @include ms-borderColor-neutralSecondaryAlt;
+}
+.ms-borderColor-neutralTertiary,
+.ms-borderColor-neutralTertiary--hover:hover {
+  @include ms-borderColor-neutralTertiary;
+}
+.ms-borderColor-neutralTertiaryAlt,
+.ms-borderColor-neutralTertiaryAlt--hover:hover {
+  @include ms-borderColor-neutralTertiaryAlt;
+}
+.ms-borderColor-neutralQuaternary,
+.ms-borderColor-neutralQuaternary--hover:hover {
+  @include ms-borderColor-neutralQuaternary;
+}
+.ms-borderColor-neutralQuaternaryAlt,
+.ms-borderColor-neutralQuaternaryAlt--hover:hover {
+  @include ms-borderColor-neutralQuaternaryAlt;
+}
+.ms-borderColor-neutralLight,
+.ms-borderColor-neutralLight--hover:hover {
+  @include ms-borderColor-neutralLight;
+}
+.ms-borderColor-neutralLighter,
+.ms-borderColor-neutralLighter--hover:hover {
+  @include ms-borderColor-neutralLighter;
+}
+.ms-borderColor-neutralLighterAlt,
+.ms-borderColor-neutralLighterAlt--hover:hover {
+  @include ms-borderColor-neutralLighterAlt;
+}
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+  @include ms-borderColor-white;
+}
+
+// Font
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+  @include ms-fontColor-black;
+}
+.ms-fontColor-neutralDark,
+.ms-fontColor-neutralDark--hover:hover {
+  @include ms-fontColor-neutralDark;
+}
+.ms-fontColor-neutralPrimary,
+.ms-fontColor-neutralPrimary--hover:hover {
+  @include ms-fontColor-neutralPrimary;
+}
+.ms-fontColor-neutralPrimaryAlt,
+.ms-fontColor-neutralPrimaryAlt--hover:hover {
+  @include ms-fontColor-neutralPrimaryAlt;
+}
+.ms-fontColor-neutralSecondary,
+.ms-fontColor-neutralSecondary--hover:hover {
+  @include ms-fontColor-neutralSecondary;
+}
+.ms-fontColor-neutralSecondaryAlt,
+.ms-fontColor-neutralSecondaryAlt--hover:hover {
+  @include ms-fontColor-neutralSecondaryAlt;
+}
+.ms-fontColor-neutralTertiary,
+.ms-fontColor-neutralTertiary--hover:hover {
+  @include ms-fontColor-neutralTertiary;
+}
+.ms-fontColor-neutralTertiaryAlt,
+.ms-fontColor-neutralTertiaryAlt--hover:hover {
+  @include ms-fontColor-neutralTertiaryAlt;
+}
+.ms-fontColor-neutralQuaternary,
+.ms-fontColor-neutralQuaternary--hover:hover {
+  @include ms-fontColor-neutralQuaternary;
+}
+.ms-fontColor-neutralQuaternaryAlt,
+.ms-fontColor-neutralQuaternaryAlt--hover:hover {
+  @include ms-fontColor-neutralQuaternaryAlt;
+}
+.ms-fontColor-neutralLight,
+.ms-fontColor-neutralLight--hover:hover {
+  @include ms-fontColor-neutralLight;
+}
+.ms-fontColor-neutralLighter,
+.ms-fontColor-neutralLighter--hover:hover {
+  @include ms-fontColor-neutralLighter;
+}
+.ms-fontColor-neutralLighterAlt,
+.ms-fontColor-neutralLighterAlt--hover:hover {
+  @include ms-fontColor-neutralLighterAlt;
+}
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+  @include ms-fontColor-white;
+}
+
+//== Brand and accent colors
+//
+
+// Background
+.ms-bgColor-yellow,
+.ms-bgColor-yellow--hover:hover {
+  @include ms-bgColor-yellow;
+}
+.ms-bgColor-yellowLight,
+.ms-bgColor-yellowLight--hover:hover {
+  @include ms-bgColor-yellowLight;
+}
+.ms-bgColor-orange,
+.ms-bgColor-orange--hover:hover {
+  @include ms-bgColor-orange;
+}
+.ms-bgColor-orangeLight,
+.ms-bgColor-orangeLight--hover:hover {
+  @include ms-bgColor-orangeLight;
+}
+.ms-bgColor-orangeLighter,
+.ms-bgColor-orangeLighter--hover:hover {
+  @include ms-bgColor-orangeLighter;
+}
+.ms-bgColor-redDark,
+.ms-bgColor-redDark--hover:hover {
+  @include ms-bgColor-redDark;
+}
+.ms-bgColor-red,
+.ms-bgColor-red--hover:hover {
+  @include ms-bgColor-red;
+}
+.ms-bgColor-magentaDark,
+.ms-bgColor-magentaDark--hover:hover {
+  @include ms-bgColor-magentaDark;
+}
+.ms-bgColor-magenta,
+.ms-bgColor-magenta--hover:hover {
+  @include ms-bgColor-magenta;
+}
+.ms-bgColor-magentaLight,
+.ms-bgColor-magentaLight--hover:hover {
+  @include ms-bgColor-magentaLight;
+}
+.ms-bgColor-purpleDark,
+.ms-bgColor-purpleDark--hover:hover {
+  @include ms-bgColor-purpleDark;
+}
+.ms-bgColor-purple,
+.ms-bgColor-purple--hover:hover {
+  @include ms-bgColor-purple;
+}
+.ms-bgColor-purpleLight,
+.ms-bgColor-purpleLight--hover:hover {
+  @include ms-bgColor-purpleLight;
+}
+.ms-bgColor-blueDark,
+.ms-bgColor-blueDark--hover:hover {
+  @include ms-bgColor-blueDark;
+}
+.ms-bgColor-blueMid,
+.ms-bgColor-blueMid--hover:hover {
+  @include ms-bgColor-blueMid;
+}
+.ms-bgColor-blue,
+.ms-bgColor-blue--hover:hover {
+  @include ms-bgColor-blue;
+}
+.ms-bgColor-blueLight,
+.ms-bgColor-blueLight--hover:hover {
+  @include ms-bgColor-blueLight;
+}
+.ms-bgColor-tealDark,
+.ms-bgColor-tealDark--hover:hover {
+  @include ms-bgColor-tealDark;
+}
+.ms-bgColor-teal,
+.ms-bgColor-teal--hover:hover {
+  @include ms-bgColor-teal;
+}
+.ms-bgColor-tealLight,
+.ms-bgColor-tealLight--hover:hover {
+  @include ms-bgColor-tealLight;
+}
+.ms-bgColor-greenDark,
+.ms-bgColor-greenDark--hover:hover {
+  @include ms-bgColor-greenDark;
+}
+.ms-bgColor-green,
+.ms-bgColor-green--hover:hover {
+  @include ms-bgColor-green;
+}
+.ms-bgColor-greenLight,
+.ms-bgColor-greenLight--hover:hover {
+  @include ms-bgColor-greenLight;
+}
+
+// Border
+.ms-borderColor-yellow,
+.ms-borderColor-yellow--hover:hover {
+  @include ms-borderColor-yellow;
+}
+.ms-borderColor-yellowLight,
+.ms-borderColor-yellowLight--hover:hover {
+  @include ms-borderColor-yellowLight;
+}
+.ms-borderColor-orange,
+.ms-borderColor-orange--hover:hover {
+  @include ms-borderColor-orange;
+}
+.ms-borderColor-orangeLight,
+.ms-borderColor-orangeLight--hover:hover {
+  @include ms-borderColor-orangeLight;
+}
+.ms-borderColor-orangeLighter,
+.ms-borderColor-orangeLighter--hover:hover {
+  @include ms-borderColor-orangeLighter;
+}
+.ms-borderColor-redDark,
+.ms-borderColor-redDark--hover:hover {
+  @include ms-borderColor-redDark;
+}
+.ms-borderColor-red,
+.ms-borderColor-red--hover:hover {
+  @include ms-borderColor-red;
+}
+.ms-borderColor-magentaDark,
+.ms-borderColor-magentaDark--hover:hover {
+  @include ms-borderColor-magentaDark;
+}
+.ms-borderColor-magenta,
+.ms-borderColor-magenta--hover:hover {
+  @include ms-borderColor-magenta;
+}
+.ms-borderColor-magentaLight,
+.ms-borderColor-magentaLight--hover:hover {
+  @include ms-borderColor-magentaLight;
+}
+.ms-borderColor-purpleDark,
+.ms-borderColor-purpleDark--hover:hover {
+  @include ms-borderColor-purpleDark;
+}
+.ms-borderColor-purple,
+.ms-borderColor-purple--hover:hover {
+  @include ms-borderColor-purple;
+}
+.ms-borderColor-purpleLight,
+.ms-borderColor-purpleLight--hover:hover {
+  @include ms-borderColor-purpleLight;
+}
+.ms-borderColor-blueDark,
+.ms-borderColor-blueDark--hover:hover {
+  @include ms-borderColor-blueDark;
+}
+.ms-borderColor-blueMid,
+.ms-borderColor-blueMid--hover:hover {
+  @include ms-borderColor-blueMid;
+}
+.ms-borderColor-blue,
+.ms-borderColor-blue--hover:hover {
+  @include ms-borderColor-blue;
+}
+.ms-borderColor-blueLight,
+.ms-borderColor-blueLight--hover:hover {
+  @include ms-borderColor-blueLight;
+}
+.ms-borderColor-tealDark,
+.ms-borderColor-tealDark--hover:hover {
+  @include ms-borderColor-tealDark;
+}
+.ms-borderColor-teal,
+.ms-borderColor-teal--hover:hover {
+  @include ms-borderColor-teal;
+}
+.ms-borderColor-tealLight,
+.ms-borderColor-tealLight--hover:hover {
+  @include ms-borderColor-tealLight;
+}
+.ms-borderColor-greenDark,
+.ms-borderColor-greenDark--hover:hover {
+  @include ms-borderColor-greenDark;
+}
+.ms-borderColor-green,
+.ms-borderColor-green--hover:hover {
+  @include ms-borderColor-green;
+}
+.ms-borderColor-greenLight,
+.ms-borderColor-greenLight--hover:hover {
+  @include ms-borderColor-greenLight;
+}
+
+// Font
+.ms-fontColor-yellow,
+.ms-fontColor-yellow--hover:hover {
+  @include ms-fontColor-yellow;
+}
+.ms-fontColor-yellowLight,
+.ms-fontColor-yellowLight--hover:hover {
+  @include ms-fontColor-yellowLight;
+}
+.ms-fontColor-orange,
+.ms-fontColor-orange--hover:hover {
+  @include ms-fontColor-orange;
+}
+.ms-fontColor-orangeLight,
+.ms-fontColor-orangeLight--hover:hover {
+  @include ms-fontColor-orangeLight;
+}
+.ms-fontColor-orangeLighter,
+.ms-fontColor-orangeLighter--hover:hover {
+  @include ms-fontColor-orangeLighter;
+}
+.ms-fontColor-redDark,
+.ms-fontColor-redDark--hover:hover {
+  @include ms-fontColor-redDark;
+}
+.ms-fontColor-red,
+.ms-fontColor-red--hover:hover {
+  @include ms-fontColor-red;
+}
+.ms-fontColor-magentaDark,
+.ms-fontColor-magentaDark--hover:hover {
+  @include ms-fontColor-magentaDark;
+}
+.ms-fontColor-magenta,
+.ms-fontColor-magenta--hover:hover {
+  @include ms-fontColor-magenta;
+}
+.ms-fontColor-magentaLight,
+.ms-fontColor-magentaLight--hover:hover {
+  @include ms-fontColor-magentaLight;
+}
+.ms-fontColor-purpleDark,
+.ms-fontColor-purpleDark--hover:hover {
+  @include ms-fontColor-purpleDark;
+}
+.ms-fontColor-purple,
+.ms-fontColor-purple--hover:hover {
+  @include ms-fontColor-purple;
+}
+.ms-fontColor-purpleLight,
+.ms-fontColor-purpleLight--hover:hover {
+  @include ms-fontColor-purpleLight;
+}
+.ms-fontColor-blueDark,
+.ms-fontColor-blueDark--hover:hover {
+  @include ms-fontColor-blueDark;
+}
+.ms-fontColor-blueMid,
+.ms-fontColor-blueMid--hover:hover {
+  @include ms-fontColor-blueMid;
+}
+.ms-fontColor-blue,
+.ms-fontColor-blue--hover:hover {
+  @include ms-fontColor-blue;
+}
+.ms-fontColor-blueLight,
+.ms-fontColor-blueLight--hover:hover {
+  @include ms-fontColor-blueLight;
+}
+.ms-fontColor-tealDark,
+.ms-fontColor-tealDark--hover:hover {
+  @include ms-fontColor-tealDark;
+}
+.ms-fontColor-teal,
+.ms-fontColor-teal--hover:hover {
+  @include ms-fontColor-teal;
+}
+.ms-fontColor-tealLight,
+.ms-fontColor-tealLight--hover:hover {
+  @include ms-fontColor-tealLight;
+}
+.ms-fontColor-greenDark,
+.ms-fontColor-greenDark--hover:hover {
+  @include ms-fontColor-greenDark;
+}
+.ms-fontColor-green,
+.ms-fontColor-green--hover:hover {
+  @include ms-fontColor-green;
+}
+.ms-fontColor-greenLight,
+.ms-fontColor-greenLight--hover:hover {
+  @include ms-fontColor-greenLight;
+}
+
+//== Message colors
+//
+
+// Background
+.ms-bgColor-info,
+.ms-bgColor-info--hover:hover {
+  @include ms-bgColor-info;
+}
+.ms-bgColor-success,
+.ms-bgColor-success--hover:hover {
+  @include ms-bgColor-success;
+}
+.ms-bgColor-severeWarning,
+.ms-bgColor-severeWarning--hover:hover {
+  @include ms-bgColor-severeWarning;
+}
+.ms-bgColor-warning,
+.ms-bgColor-warning--hover:hover {
+  @include ms-bgColor-warning;
+}
+.ms-bgColor-error,
+.ms-bgColor-error--hover:hover {
+  @include ms-bgColor-error;
+}
+
+// Border
+// Classes were never provided for message color borders.
+
+// Font
+.ms-fontColor-info,
+.ms-fontColor-info--hover:hover {
+  @include ms-fontColor-info;
+}
+.ms-fontColor-success,
+.ms-fontColor-success--hover:hover {
+  @include ms-fontColor-success;
+}
+.ms-fontColor-alert,
+.ms-fontColor-alert--hover:hover {
+  // Deprecated: Use ms-fontColor-severeWarning
+  @include ms-fontColor-alert;
+}
+.ms-fontColor-warning,
+.ms-fontColor-warning--hover:hover {
+  @include ms-fontColor-warning;
+}
+.ms-fontColor-severeWarning,
+.ms-fontColor-severeWarning--hover:hover {
+  @include ms-fontColor-severeWarning;
+}
+.ms-fontColor-error,
+.ms-fontColor-error--hover:hover {
+  @include ms-fontColor-error;
+}
+
+//== High contrast colors
+//
+
+// Background
+.ms-bgColor-contrastBlackDisabled,
+.ms-bgColor-contrastBlackDisabled--hover:hover {
+  @include ms-bgColor-contrastBlackDisabled;
+}
+.ms-bgColor-contrastWhiteDisabled,
+.ms-bgColor-contrastWhiteDisabled--hover:hover {
+  @include ms-bgColor-contrastWhiteDisabled;
+}
+.ms-bgColor-contrastBlackSelected,
+.ms-bgColor-contrastBlackSelected--hover:hover {
+  @include ms-bgColor-contrastBlackSelected;
+}
+.ms-bgColor-contrastWhiteSelected,
+.ms-bgColor-contrastWhiteSelected--hover:hover {
+  @include ms-bgColor-contrastWhiteSelected;
+}
+
+// Font
+.ms-fontColor-contrastBlackDisabled,
+.ms-fontColor-contrastBlackDisabled--hover:hover {
+  @include ms-fontColor-contrastBlackDisabled;
+}
+.ms-fontColor-contrastWhiteDisabled,
+.ms-fontColor-contrastWhiteDisabled--hover:hover {
+  @include ms-fontColor-contrastWhiteDisabled;
+}
+.ms-fontColor-contrastBlackSelected,
+.ms-fontColor-contrastBlackSelected--hover:hover {
+  @include ms-fontColor-contrastBlackSelected;
+}
+.ms-fontColor-contrastWhiteSelected,
+.ms-fontColor-contrastWhiteSelected--hover:hover {
+  @include ms-fontColor-contrastWhiteSelected;
+}
+
+// Border
+.ms-borderColor-contrastBlackDisabled,
+.ms-borderColor-contrastBlackDisabled--hover:hover {
+  @include ms-borderColor-contrastBlackDisabled;
+}
+.ms-borderColor-contrastWhiteDisabled,
+.ms-borderColor-contrastWhiteDisabled--hover:hover {
+  @include ms-borderColor-contrastWhiteDisabled;
+}
+.ms-borderColor-contrastBlackSelected,
+.ms-borderColor-contrastBlackSelected--hover:hover {
+  @include ms-borderColor-contrastBlackSelected;
+}
+.ms-borderColor-contrastWhiteSelected,
+.ms-borderColor-contrastWhiteSelected--hover:hover {
+  @include ms-borderColor-contrastWhiteSelected;
+}

node_modules/@fluentui/react/dist/sass/_Color.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Classes for specific properties.
+@import './Color.Background';
+@import './Color.Border';
+@import './Color.Font';
+
+// Deprecated MDL2 color classes.
+@import "./Color.MDL2";

node_modules/@fluentui/react/dist/sass/_Depth.scss

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+.ms-depth-0 {
+  @include ms-depth-0;
+}
+.ms-depth-4 {
+  @include ms-depth-4;
+}
+.ms-depth-8 {
+  @include ms-depth-8;
+}
+.ms-depth-16 {
+  @include ms-depth-16;
+}
+.ms-depth-64 {
+  @include ms-depth-64;
+}

node_modules/@fluentui/react/dist/sass/_Font.Definitions.scss

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Produce @font-face definitions for each of the web fonts.
+@include ms-font-face('Leelawadee UI Web', 'leelawadeeui-thai', 'leelawadeeui');
+@include ms-font-face('Segoe UI Web (Arabic)', 'segoeui-arabic');
+@include ms-font-face('Segoe UI Web (Cyrillic)', 'segoeui-cyrillic');
+@include ms-font-face('Segoe UI Web (East European)', 'segoeui-easteuropean');
+@include ms-font-face('Segoe UI Web (Greek)', 'segoeui-greek');
+@include ms-font-face('Segoe UI Web (Hebrew)', 'segoeui-hebrew');
+@include ms-font-face('Segoe UI Web (Vietnamese)', 'segoeui-vietnamese');
+@include ms-font-face('Segoe UI Web (West European)', 'segoeui-westeuropean');
+@include ms-font-face('Selawik Web', 'selawik', 'selawik');
+
+
+// Leelawadee UI (Thai and Lao) does not have a 'light' weight, so we override
+// the font-face generated above to use the 'semilight' weight instead.
+@font-face {
+  font-family: 'Leelawadee UI Web';
+  src: url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'),
+       url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+
+// Leelawadee UI (Thai and Lao) does not have a 'semibold' weight, so we override
+// the font-face generated above to use the 'bold' weight instead.
+@font-face {
+  font-family: 'Leelawadee UI Web';
+  src: url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'),
+       url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}

node_modules/@fluentui/react/dist/sass/_Font.MDL2.scss

@@ -0,0 +1,128 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These classes are deprecated and will be removed in a future release.
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+.ms-font-su {
+  @include ms-font-su;
+}
+// No touch class for Super
+
+// Extra-Extra-Large
+// Allowed weights: Light, SemiLight
+.ms-font-xxl {
+  @include ms-font-xxl;
+}
+
+// Extra-Large Plus Styles
+// Allowed weights: Light, SemiLight
+.ms-font-xl-plus {
+  @include ms-font-xl-plus;
+}
+
+// Extra-Large Styles
+// Allowed weights: Light, SemiLight
+.ms-font-xl {
+  @include ms-font-xl;
+}
+
+// Large Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-l {
+  @include ms-font-l;
+}
+
+// Medium Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m-plus {
+  @include ms-font-m-plus;
+}
+
+// Medium Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m {
+  @include ms-font-m;
+}
+
+// Small Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s-plus {
+  @include ms-font-s-plus;
+}
+
+// Small Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s {
+  @include ms-font-s;
+}
+
+// XS Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-xs {
+  @include ms-font-xs;
+}
+
+// Micro Styles (LIMITED USE)
+// Weights: Semibold
+.ms-font-mi {
+  @include ms-font-mi;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+.ms-fontWeight-light {
+  @include ms-fontWeight-light;
+}
+
+.ms-fontWeight-semilight {
+  @include ms-fontWeight-semilight;
+}
+
+// Font sizes
+.ms-fontSize-su {
+  @include ms-fontSize-su;
+}
+
+.ms-fontSize-xxl {
+  @include ms-fontSize-xxl;
+}
+
+.ms-fontSize-xlPlus {
+  @include ms-fontSize-xlPlus;
+}
+
+.ms-fontSize-xl {
+  @include ms-fontSize-xl;
+}
+
+.ms-fontSize-l {
+  @include ms-fontSize-l;
+}
+
+.ms-fontSize-mPlus {
+  @include ms-fontSize-mPlus;
+}
+
+.ms-fontSize-m {
+  @include ms-fontSize-m;
+}
+
+.ms-fontSize-sPlus {
+  @include ms-fontSize-sPlus;
+}
+
+.ms-fontSize-s {
+  @include ms-fontSize-s;
+}
+
+.ms-fontSize-xs {
+  @include ms-fontSize-xs;
+}
+
+.ms-fontSize-mi {
+  @include ms-fontSize-mi;
+}

node_modules/@fluentui/react/dist/sass/_Font.scss

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Font color classes.
+//
+
+//== Sizes.
+//
+
+.ms-fontSize-68 {
+  @include ms-fontSize-68;
+}
+.ms-fontSize-42 {
+  @include ms-fontSize-42;
+}
+.ms-fontSize-32 {
+  @include ms-fontSize-32;
+}
+.ms-fontSize-28 {
+  @include ms-fontSize-28;
+}
+.ms-fontSize-24 {
+  @include ms-fontSize-24;
+}
+.ms-fontSize-20 {
+  @include ms-fontSize-20;
+}
+.ms-fontSize-18 {
+  @include ms-fontSize-18;
+}
+.ms-fontSize-16 {
+  @include ms-fontSize-16;
+}
+.ms-fontSize-14 {
+  @include ms-fontSize-14;
+}
+.ms-fontSize-12 {
+  @include ms-fontSize-12;
+}
+.ms-fontSize-10 {
+  @include ms-fontSize-10;
+}
+
+//== Weights.
+//
+
+.ms-fontWeight-regular {
+  @include ms-fontWeight-regular;
+}
+.ms-fontWeight-semibold {
+  @include ms-fontWeight-semibold;
+}
+.ms-fontWeight-bold {
+  @include ms-fontWeight-bold;
+}
+
+// Deprecated MDL2 font classes.
+@import "./Font.MDL2";

node_modules/@fluentui/react/dist/sass/_Grid.scss

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+//== Grid container (same for all sizes)
+//
+.ms-Grid {
+  @include ms-Grid;
+}
+
+//== Grid rows (pull first and last column out)
+//
+.ms-Grid-row {
+  @include ms-Grid-row;
+}
+
+//== Grid cells
+//
+.ms-Grid-col {
+  @include ms-Grid-col;
+}

node_modules/@fluentui/react/dist/sass/_Icon.Definitions.scss

@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon font-family definition
+
+/*
+  Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+// Font-face definition for the 'FabricMDL2Icons' icon font
+@font-face {
+  $icon-font-family: 'FabricMDL2Icons';
+  $icon-font-name: 'fabricmdl2icons';
+  $icon-font-version: '3.70';
+
+  @if variable_exists(do-scope-styles) {
+    $icon-font-family: 'FabricMDL2Icons-' + $ms-fabric-version-major; 
+    $icon-font-name: 'scoped/fabricmdl2icons-' + $ms-fabric-version-major; 
+  }
+
+  font-family: $icon-font-family;
+  src: url('#{$ms-icon-cdn-path}/#{$icon-font-name}-#{$icon-font-version}.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

node_modules/@fluentui/react/dist/sass/_Icon.scss

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon class definitions
+
+
+// Base icon definition
+.ms-Icon {
+  @include ms-Icon;
+}
+
+// Modifier: Place the icon in a circle
+.ms-Icon--circle {
+  @include ms-Icon--circle;
+}
+
+// Modifiers: Size classes
+.ms-Icon--xs {
+  @include ms-Icon--xs;
+}
+
+.ms-Icon--s {
+  @include ms-Icon--s;
+}
+
+.ms-Icon--m {
+  @include ms-Icon--m;
+}
+
+.ms-Icon--l {
+  @include ms-Icon--l;
+}
+
+// Modifiers: Each of the icons.
+@include ms-icon-classes($ms-icon-map);

node_modules/@fluentui/react/dist/sass/_References.scss

@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Variables and mixins that can be referenced without outputting any CSS.
+
+// Variables
+@import "./variables/Animation.Variables";
+@import "./variables/BrandIcon.Variables";
+@import "./variables/Color.Variables";
+@import "./variables/Color.Variables.MDL2";
+@import "./variables/Depth.Variables";
+@import "./variables/Font.Variables";
+@import "./variables/Font.Variables.MDL2";
+@import "./variables/General.Variables";
+@import "./variables/Icon.Variables";
+@import "./variables/Responsive.Variables";
+@import "./variables/ZIndex.Variables";
+
+// Mixins
+@import "./mixins/Animation.Mixins";
+@import "./mixins/BrandIcon.Mixins";
+@import "./mixins/Color.Background.Mixins";
+@import "./mixins/Color.Border.Mixins";
+@import "./mixins/Color.Font.Mixins";
+@import "./mixins/Color.Mixins";
+@import "./mixins/Color.Mixins.MDL2";
+@import "./mixins/Depth.Mixins";
+@import "./mixins/Directionality.Mixins";
+@import "./mixins/Font.Mixins";
+@import "./mixins/Font.Mixins.MDL2";
+@import "./mixins/General.Mixins";
+@import "./mixins/Grid.Mixins";
+@import "./mixins/Icon.Mixins";
+@import "./mixins/Responsive.Mixins";

node_modules/@fluentui/react/dist/sass/_Utility.scss

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Some mixins are output to CSS classes as utilities.
+
+// The best box is a border box.
+.ms-borderBox, .ms-borderBox::before, .ms-borderBox::after {
+  @include ms-borderBox;
+}
+
+// To apply border base settings
+.ms-borderBase {
+  @include ms-borderBase;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+.ms-clearfix {
+  @include ms-clearfix;
+}
+
+// Basic border-box, margin, and padding reset.
+.ms-normalize {
+  @include ms-normalize;
+}
+
+// Text alignments.
+.ms-textAlignLeft {
+  @include ms-text-align(left);
+}
+
+.ms-textAlignRight {
+  @include ms-text-align(right);
+}
+
+.ms-textAlignCenter {
+  text-align: center;
+}
+
+// Use to hide content while still making it readable by screen reader (Accessibility)
+.ms-screenReaderOnly {
+  @include ms-screenReaderOnly;
+}
+
+// Use to add truncation with ellipsis
+.ms-textTruncate {
+  @include ms-textTruncate;
+}
+
+// Use to disable text wrapping
+.ms-noWrap{
+  @include ms-noWrap;
+}

node_modules/@fluentui/react/dist/sass/_Wrapper.scss

@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Wrapper component to set base typography.
+
+.ms-Fabric {
+  @include ms-Fabric;
+}
+
+// Create overrides for each language that has an alternate font-family.
+@include ms-font-family-language-override('ar', $ms-font-family-arabic);
+@include ms-font-family-language-override('bg', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('cs', $ms-font-family-east-european);
+@include ms-font-family-language-override('el', $ms-font-family-greek);
+@include ms-font-family-language-override('et', $ms-font-family-east-european);
+@include ms-font-family-language-override('he', $ms-font-family-hebrew);
+@include ms-font-family-language-override('hi', $ms-font-family-hindi);
+@include ms-font-family-language-override('hr', $ms-font-family-east-european);
+@include ms-font-family-language-override('hu', $ms-font-family-east-european);
+@include ms-font-family-language-override('ja', $ms-font-family-japanese);
+@include ms-font-family-language-override('kk', $ms-font-family-east-european);
+@include ms-font-family-language-override('ko', $ms-font-family-korean);
+@include ms-font-family-language-override('lo', $ms-font-family-lao);
+@include ms-font-family-language-override('lt', $ms-font-family-east-european);
+@include ms-font-family-language-override('lv', $ms-font-family-east-european);
+@include ms-font-family-language-override('pl', $ms-font-family-east-european);
+@include ms-font-family-language-override('ru', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('sk', $ms-font-family-east-european);
+@include ms-font-family-language-override('sr-latn', $ms-font-family-east-european);
+@include ms-font-family-language-override('th', $ms-font-family-thai);
+@include ms-font-family-language-override('tr', $ms-font-family-east-european);
+@include ms-font-family-language-override('uk', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('vi', $ms-font-family-vietnamese);
+@include ms-font-family-language-override('zh-hans', $ms-font-family-chinese-simplified);
+@include ms-font-family-language-override('zh-hant', $ms-font-family-chinese-traditional);
+
+// Modifier: Use Selawik as an open source alternative to Segoe UI.
+.ms-Fabric--selawik {
+  font-family: $ms-font-family-selawik;
+}

node_modules/@fluentui/react/dist/sass/_effects.scss

@@ -0,0 +1,8 @@
+$elevation4: '[theme:elevation4, default: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)]';
+$elevation8: '[theme:elevation8, default: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)]';
+$elevation16: '[theme:elevation16, default: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)]';
+$elevation64: '[theme:elevation64, default: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)]';
+
+$roundedCorner2: '[theme:roundedCorner2, default: 2px]';
+$roundedCorner4: '[theme:roundedCorner4, default: 4px]';
+$roundedCorner6: '[theme:roundedCorner6, default: 6px]';

node_modules/@fluentui/react/dist/sass/_highContrast.scss

@@ -0,0 +1,34 @@
+@mixin high-contrast {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    @content;
+  }
+}
+
+@mixin high-contrast-black-on-white {
+  @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light) {
+   @content;
+  }
+}
+
+@mixin high-contrast-white-on-black {
+  @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark) {
+   @content;
+  }
+}
+
+@mixin high-contrast-no-adjust {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}
+
+/**
+ * The style which turns off high contrast adjustment in (only) Edge Chromium browser.
+ */
+@mixin high-contrast-edge-chromium-no-adjust {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}

node_modules/@fluentui/react/dist/sass/_i18n.scss

@@ -0,0 +1,296 @@
+// Some things copied from WinJS with <3
+
+
+// LTR mixin definition
+@mixin LTR {
+    html[dir='ltr'] & {
+        @content;
+    }
+}
+
+// RTL mixin definition
+@mixin RTL {
+    html[dir='rtl'] & {
+        @content;
+    }
+}
+
+// Use baseRTL for a root element of a control that needs rtl support
+@mixin baseRtl {
+    @include RTL {
+        direction: rtl;
+        unicode-bidi: bidi-override;
+    }
+}
+
+/*
+    Common CSS property mixins with support for RTL.
+    Use these mixins when you want to automatically create RTL versions of your properties.
+    They are in alphabetical order (a-z).
+*/
+
+@mixin border-color($top, $right, $bottom, $left) {
+    border-color: $top $right $bottom $left;
+    @include RTL {
+        border-color: $top $left $bottom $right;
+    }
+}
+
+@mixin border-left($width, $style, $color) {
+    @include LTR {
+        border-left: $width $style $color;
+    }
+    @include RTL {
+        border-right: $width $style $color;
+    }
+}
+
+@mixin border-left-color($color) {
+    @include LTR {
+        border-left-color: $color;
+    }
+    @include RTL {
+        border-right-color: $color;
+    }
+}
+
+@mixin border-left-style($style) {
+    @include LTR {
+        border-left-style: $style;
+    }
+    @include RTL {
+        border-right-style: $style;
+    }
+}
+
+@mixin border-left-width($width) {
+    @include LTR {
+        border-left-width: $width;
+    }
+    @include RTL {
+        border-right-width: $width;
+    }
+}
+
+@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+    border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+    @include RTL {
+        border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+    }
+}
+
+@mixin border-right($width, $style, $color) {
+    @include LTR {
+        border-right: $width $style $color;
+    }
+    @include RTL {
+        border-left: $width $style $color;
+    }
+}
+
+@mixin border-right-color($color) {
+    @include LTR {
+        border-right-color: $color;
+    }
+    @include RTL {
+        border-left-color: $color;
+    }
+}
+
+@mixin border-right-style($style) {
+    @include LTR {
+         border-right-style: $style;
+    }
+    @include RTL {
+        border-left-style: $style;
+    }
+}
+
+@mixin border-right-width($width) {
+    @include LTR {
+        border-right-width: $width;
+    }
+    @include RTL {
+        border-left-width: $width;
+    }
+}
+
+@mixin clear($side) {
+    @if $side == left {
+        @include LTR {
+            clear: $side;
+        }
+        @include RTL {
+            clear: right;
+        }
+    } @else if $side == right {
+        @include LTR {
+            clear: $side;
+        }
+
+        @include RTL {
+            clear: left;
+        }
+    } @else {
+        clear: $side;
+    }
+}
+
+@mixin float($direction) {
+    @if $direction == left {
+        @include LTR {
+            float: left;
+        }
+        @include RTL {
+            float: right;
+        }
+    } @else {
+        @include LTR {
+            float: right;
+        }
+        @include RTL {
+            float: left;
+        }
+    }
+}
+
+@mixin left($distance) {
+    @include LTR {
+        left: $distance;
+    }
+    @include RTL {
+        right: $distance;
+    }
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+    margin: $top $right $bottom $left;
+    @include RTL {
+        margin: $top $left $bottom $right;
+    }
+}
+
+@mixin margin-left($distance) {
+    @include LTR {
+        margin-left: $distance;
+    }
+    @include RTL {
+        margin-right: $distance;
+    }
+}
+
+@mixin margin-right($distance) {
+    @include LTR {
+        margin-right: $distance;
+    }
+    @include RTL {
+        margin-left: $distance;
+    }
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+    padding: $top $right $bottom $left;
+    @include RTL {
+        padding: $top $left $bottom $right;
+    }
+}
+
+@mixin padding-left($distance) {
+    @include LTR {
+        padding-left: $distance;
+    }
+    @include RTL {
+        padding-right: $distance;
+    }
+}
+
+@mixin padding-right($distance) {
+    @include LTR {
+        padding-right: $distance;
+    }
+    @include RTL {
+        padding-left: $distance;
+    }
+}
+
+@mixin right($distance) {
+    @include LTR {
+        right: $distance;
+    }
+    @include RTL {
+        left: $distance;
+    }
+}
+
+@mixin text-align($direction) {
+    @if $direction == left {
+        @include LTR {
+            text-align: left;
+        }
+        @include RTL {
+            text-align: right;
+        }
+    } @else {
+        @include LTR {
+            text-align: right;
+        }
+        @include RTL {
+            text-align: left;
+        }
+    }
+}
+
+@mixin box-shadow($left, $etc) {
+    @include LTR {
+        box-shadow: $left $etc;
+    }
+
+    @include RTL {
+        box-shadow: -$left $etc;
+    }
+}
+
+@mixin transform-scaleX($scaleX: 1) {
+    @include LTR {
+        transform: scaleX($scaleX);
+    }
+    @include RTL {
+        transform: scaleX(-$scaleX);
+    }
+}
+
+@mixin transform-translateX($distance) {
+    @include LTR {
+        transform: translateX($distance);
+    }
+    @include RTL {
+        transform: translateX(-$distance);
+    }
+}
+
+// only supported when ONLY left/right are declared
+@mixin transition-property($direction) {
+    @if $direction == left {
+        @include LTR {
+            transition-property: left;
+        }
+        @include RTL {
+            transition-property: right;
+        }
+    } @else {
+        @include LTR {
+            transition-property: right;
+        }
+        @include RTL {
+            transition-property: left;
+        }
+    }
+}
+
+// Disables high contrast color adjusts for Edge/IE11
+@mixin highContrastAdjust {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}

node_modules/@fluentui/react/dist/sass/_legacyThemePalette.scss

@@ -0,0 +1,19 @@
+$ms-color-error: "[theme:error, default: #a80000]";
+$ms-color-errorText: "[theme:warningText, default: #333333]";
+$ms-color-errorBackground: "[theme:errorBackground, default: rgba(232,17,35,.2)]";
+$ms-color-success: "[theme:success, default: #107c10]";
+$ms-color-successText: "[theme:successText, default: #333333]";
+$ms-color-successBackground: "[theme:successBackground, default: #dff6dd]";
+$ms-color-alert: "[theme:alert, default: #d83b01]";
+$ms-color-alertText: "[theme:alertText, default: #333333]";
+$ms-color-alertBackground: "[theme:alertBackground, default: #deecf9]";
+$ms-color-warning: "[theme:warning, default: #767676]";
+$ms-color-warningText: "[theme:warningText, default: #333333]";
+$ms-color-warningBackground: "[theme:warningBackground, default: #fff4ce]";
+$ms-color-severeWarning: "[theme:severeWarning, default: #a80000]";
+$ms-color-severeWarningText: "[theme:severeWarningText, default: #333333]";
+$ms-color-severeWarningBackground: "[theme:severeWarningBackground, default: #fed9cc]";
+$ms-color-info: "[theme:info, default: #666666]";
+$ms-color-infoText: "[theme:infoText, default: #333333]";
+$ms-color-infoBackground: "[theme:infoBackground, default: #f4f4f4]";
+$ms-color-themeAccent: "[theme:accent, default:#0078d4]";

node_modules/@fluentui/react/dist/sass/_semanticSlots.scss

@@ -0,0 +1,104 @@
+/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */
+$bodyBackgroundColor: '[theme:bodyBackground, default: #ffffff]';
+$bodyBackgroundHoveredColor: '[theme:bodyBackgroundHovered, default: #f3f2f1]';
+$bodyBackgroundCheckedColor: '[theme:bodyBackgroundChecked, default: #edebe9]';
+$bodyStandoutBackgroundColor: '[theme:bodyStandoutBackground, default: #faf9f8]';
+$bodyFrameBackgroundColor: '[theme:bodyFrameBackground, default: #ffffff]';
+$bodyFrameDividerColor: '[theme:bodyFrameDivider, default: #edebe9]';
+$bodyTextColor: '[theme:bodyText, default: #323130]';
+$bodyTextCheckedColor: '[theme:bodyTextChecked, default: #000000]';
+$bodySubtextColor: '[theme:bodySubtext, default: #605e5c]';
+$bodyDividerColor: '[theme:bodyDivider, default: #edebe9]';
+$disabledBodyTextColor: '[theme:disabledBodyText, default: #a19f9d]';
+$disabledBodySubtextColor: '[theme:disabledBodySubtext, default: #c8c6c4]';
+$disabledBorderColor: '[theme:disabledBorder, default: #c8c6c4]';
+$focusBorderColor: '[theme:focusBorder, default: #605e5c]';
+$cardStandoutBackgroundColor: '[theme:cardStandoutBackground, default: #ffffff]';
+$cardShadowColor: '[theme:cardShadow, default: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)]';
+$cardShadowHoveredColor: '[theme:cardShadowHovered, default: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)]';
+$variantBorderColor: '[theme:variantBorder, default: #edebe9]';
+$variantBorderHoveredColor: '[theme:variantBorderHovered, default: #a19f9d]';
+$defaultStateBackgroundColor: '[theme:defaultStateBackground, default: #faf9f8]';
+$actionLinkColor: '[theme:actionLink, default: #323130]';
+$actionLinkHoveredColor: '[theme:actionLinkHovered, default: #201f1e]';
+$linkColor: '[theme:link, default: #0078d4]';
+$linkHoveredColor: '[theme:linkHovered, default: #004578]';
+$buttonBackgroundColor: '[theme:buttonBackground, default: #ffffff]';
+$buttonBackgroundCheckedColor: '[theme:buttonBackgroundChecked, default: #c8c6c4]';
+$buttonBackgroundHoveredColor: '[theme:buttonBackgroundHovered, default: #f3f2f1]';
+$buttonBackgroundCheckedHoveredColor: '[theme:buttonBackgroundCheckedHovered, default: #edebe9]';
+$buttonBackgroundPressedColor: '[theme:buttonBackgroundPressed, default: #edebe9]';
+$buttonBackgroundDisabledColor: '[theme:buttonBackgroundDisabled, default: #f3f2f1]';
+$buttonBorderColor: '[theme:buttonBorder, default: #8a8886]';
+$buttonTextColor: '[theme:buttonText, default: #323130]';
+$buttonTextHoveredColor: '[theme:buttonTextHovered, default: #201f1e]';
+$buttonTextCheckedColor: '[theme:buttonTextChecked, default: #201f1e]';
+$buttonTextCheckedHoveredColor: '[theme:buttonTextCheckedHovered, default: #000000]';
+$buttonTextPressedColor: '[theme:buttonTextPressed, default: #201f1e]';
+$buttonTextDisabledColor: '[theme:buttonTextDisabled, default: #a19f9d]';
+$buttonBorderDisabledColor: '[theme:buttonBorderDisabled, default: #f3f2f1]';
+$primaryButtonBackgroundColor: '[theme:primaryButtonBackground, default: #0078d4]';
+$primaryButtonBackgroundHoveredColor: '[theme:primaryButtonBackgroundHovered, default: #106ebe]';
+$primaryButtonBackgroundPressedColor: '[theme:primaryButtonBackgroundPressed, default: #005a9e]';
+$primaryButtonBackgroundDisabledColor: '[theme:primaryButtonBackgroundDisabled, default: #f3f2f1]';
+$primaryButtonBorderColor: '[theme:primaryButtonBorder, default: transparent]';
+$primaryButtonTextColor: '[theme:primaryButtonText, default: #ffffff]';
+$primaryButtonTextHoveredColor: '[theme:primaryButtonTextHovered, default: #ffffff]';
+$primaryButtonTextPressedColor: '[theme:primaryButtonTextPressed, default: #ffffff]';
+$primaryButtonTextDisabledColor: '[theme:primaryButtonTextDisabled, default: #d2d0ce]';
+$accentButtonBackgroundColor: '[theme:accentButtonBackground, default: #0078d4]';
+$accentButtonTextColor: '[theme:accentButtonText, default: #ffffff]';
+$inputBorderColor: '[theme:inputBorder, default: #605e5c]';
+$inputBorderHoveredColor: '[theme:inputBorderHovered, default: #323130]';
+$inputBackgroundColor: '[theme:inputBackground, default: #ffffff]';
+$inputBackgroundCheckedColor: '[theme:inputBackgroundChecked, default: #0078d4]';
+$inputBackgroundCheckedHoveredColor: '[theme:inputBackgroundCheckedHovered, default: #005a9e]';
+$inputPlaceholderBackgroundCheckedColor: '[theme:inputPlaceholderBackgroundChecked, default: #deecf9]';
+$inputForegroundCheckedColor: '[theme:inputForegroundChecked, default: #ffffff]';
+$inputIconColor: '[theme:inputIcon, default: #0078d4]';
+$inputIconHoveredColor: '[theme:inputIconHovered, default: #005a9e]';
+$inputIconDisabledColor: '[theme:inputIconDisabled, default: #a19f9d]';
+$inputFocusBorderAltColor: '[theme:inputFocusBorderAlt, default: #0078d4]';
+$smallInputBorderColor: '[theme:smallInputBorder, default: #605e5c]';
+$inputTextColor: '[theme:inputText, default: #323130]';
+$inputTextHoveredColor: '[theme:inputTextHovered, default: #201f1e]';
+$inputPlaceholderTextColor: '[theme:inputPlaceholderText, default: #605e5c]';
+$disabledBackgroundColor: '[theme:disabledBackground, default: #f3f2f1]';
+$disabledTextColor: '[theme:disabledText, default: #a19f9d]';
+$disabledSubtextColor: '[theme:disabledSubtext, default: #d2d0ce]';
+$listBackgroundColor: '[theme:listBackground, default: #ffffff]';
+$listTextColor: '[theme:listText, default: #323130]';
+$listItemBackgroundHoveredColor: '[theme:listItemBackgroundHovered, default: #f3f2f1]';
+$listItemBackgroundCheckedColor: '[theme:listItemBackgroundChecked, default: #edebe9]';
+$listItemBackgroundCheckedHoveredColor: '[theme:listItemBackgroundCheckedHovered, default: #e1dfdd]';
+$listHeaderBackgroundHoveredColor: '[theme:listHeaderBackgroundHovered, default: #f3f2f1]';
+$listHeaderBackgroundPressedColor: '[theme:listHeaderBackgroundPressed, default: #edebe9]';
+$menuBackgroundColor: '[theme:menuBackground, default: #ffffff]';
+$menuDividerColor: '[theme:menuDivider, default: #c8c6c4]';
+$menuIconColor: '[theme:menuIcon, default: #0078d4]';
+$menuHeaderColor: '[theme:menuHeader, default: #0078d4]';
+$menuItemBackgroundHoveredColor: '[theme:menuItemBackgroundHovered, default: #f3f2f1]';
+$menuItemBackgroundPressedColor: '[theme:menuItemBackgroundPressed, default: #edebe9]';
+$menuItemTextColor: '[theme:menuItemText, default: #323130]';
+$menuItemTextHoveredColor: '[theme:menuItemTextHovered, default: #201f1e]';
+$errorTextColor: '[theme:errorText, default: #a4262c]';
+$messageTextColor: '[theme:messageText, default: #323130]';
+$messageLinkColor: '[theme:messageLink, default: #005A9E]';
+$messageLinkHoveredColor: '[theme:messageLinkHovered, default: #004578]';
+$infoIconColor: '[theme:infoIcon, default: #605e5c]';
+$errorIconColor: '[theme:errorIcon, default: #A80000]';
+$blockingIconColor: '[theme:blockingIcon, default: #FDE7E9]';
+$warningIconColor: '[theme:warningIcon, default: #797775]';
+$severeWarningIconColor: '[theme:severeWarningIcon, default: #D83B01]';
+$successIconColor: '[theme:successIcon, default: #107C10]';
+$infoBackgroundColor: '[theme:infoBackground, default: #f3f2f1]';
+$errorBackgroundColor: '[theme:errorBackground, default: #FDE7E9]';
+$blockingBackgroundColor: '[theme:blockingBackground, default: #FDE7E9]';
+$warningBackgroundColor: '[theme:warningBackground, default: #FFF4CE]';
+$severeWarningBackgroundColor: '[theme:severeWarningBackground, default: #FED9CC]';
+$successBackgroundColor: '[theme:successBackground, default: #DFF6DD]';
+$warningHighlightColor: '[theme:warningHighlight, default: #ffb900]';  /* @deprecated */
+$warningTextColor: '[theme:warningText, default: #323130]';  /* @deprecated */
+$successTextColor: '[theme:successText, default: #107C10]';  /* @deprecated */
+$listTextColorColor: '[theme:listTextColor, default: #323130]';  /* @deprecated */
+$menuItemBackgroundCheckedColor: '[theme:menuItemBackgroundChecked, default: #edebe9]';  /* @deprecated */

node_modules/@fluentui/react/dist/sass/_themeOverrides.scss

@@ -0,0 +1,51 @@
+/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */
+$ms-color-themeDarker: "[theme:themeDarker, default: #004578]";
+$ms-color-themeDark: "[theme:themeDark, default: #005a9e]";
+$ms-color-themeDarkAlt: "[theme:themeDarkAlt, default: #106ebe]";
+$ms-color-themePrimary: "[theme:themePrimary, default: #0078d4]";
+$ms-color-themeSecondary: "[theme:themeSecondary, default: #2b88d8]";
+$ms-color-themeTertiary: "[theme:themeTertiary, default: #71afe5]";
+$ms-color-themeLight: "[theme:themeLight, default: #c7e0f4]";
+$ms-color-themeLighter: "[theme:themeLighter, default: #deecf9]";
+$ms-color-themeLighterAlt: "[theme:themeLighterAlt, default: #eff6fc]";
+$ms-color-black: "[theme:black, default: #000000]";
+$ms-color-blackTranslucent40: "[theme:blackTranslucent40, default: rgba(0,0,0,.4)]";
+$ms-color-neutralDark: "[theme:neutralDark, default: #201f1e]";
+$ms-color-neutralPrimary: "[theme:neutralPrimary, default: #323130]";
+$ms-color-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default: #3b3a39]";
+$ms-color-neutralSecondary: "[theme:neutralSecondary, default: #605e5c]";
+$ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #8a8886]";
+$ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a19f9d]";
+$ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c6c4]";
+$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d2d0ce]";
+$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #e1dfdd]";
+$ms-color-neutralLight: "[theme:neutralLight, default: #edebe9]";
+$ms-color-neutralLighter: "[theme:neutralLighter, default: #f3f2f1]";
+$ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #faf9f8]";
+$ms-color-accent: "[theme:accent, default: #0078d4]";
+$ms-color-white: "[theme:white, default: #ffffff]";
+$ms-color-whiteTranslucent40: "[theme:whiteTranslucent40, default: rgba(255,255,255,.4)]";
+$ms-color-yellowDark: "[theme:yellowDark, default: #d29200]";
+$ms-color-yellow: "[theme:yellow, default: #ffb900]";
+$ms-color-yellowLight: "[theme:yellowLight, default: #fff100]";
+$ms-color-orange: "[theme:orange, default: #d83b01]";
+$ms-color-orangeLight: "[theme:orangeLight, default: #ea4300]";
+$ms-color-orangeLighter: "[theme:orangeLighter, default: #ff8c00]";
+$ms-color-redDark: "[theme:redDark, default: #a4262c]";
+$ms-color-red: "[theme:red, default: #e81123]";
+$ms-color-magentaDark: "[theme:magentaDark, default: #5c005c]";
+$ms-color-magenta: "[theme:magenta, default: #b4009e]";
+$ms-color-magentaLight: "[theme:magentaLight, default: #e3008c]";
+$ms-color-purpleDark: "[theme:purpleDark, default: #32145a]";
+$ms-color-purple: "[theme:purple, default: #5c2d91]";
+$ms-color-purpleLight: "[theme:purpleLight, default: #b4a0ff]";
+$ms-color-blueDark: "[theme:blueDark, default: #002050]";
+$ms-color-blueMid: "[theme:blueMid, default: #00188f]";
+$ms-color-blue: "[theme:blue, default: #0078d4]";
+$ms-color-blueLight: "[theme:blueLight, default: #00bcf2]";
+$ms-color-tealDark: "[theme:tealDark, default: #004b50]";
+$ms-color-teal: "[theme:teal, default: #008272]";
+$ms-color-tealLight: "[theme:tealLight, default: #00b294]";
+$ms-color-greenDark: "[theme:greenDark, default: #004b1c]";
+$ms-color-green: "[theme:green, default: #107c10]";
+$ms-color-greenLight: "[theme:greenLight, default: #bad80a]";

node_modules/@fluentui/react/dist/sass/_themeVariables.scss

@@ -0,0 +1,118 @@
+/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */
+$ms-font-tinyFontFamily: "[theme:tinyFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-tinyMozOsxFontSmoothing: "[theme:tinyMozOsxFontSmoothing, default: grayscale]";
+$ms-font-tinyWebkitFontSmoothing: "[theme:tinyWebkitFontSmoothing, default: antialiased]";
+$ms-font-tinyFontSize: "[theme:tinyFontSize, default: 10px]";
+$ms-font-tinyFontWeight: "[theme:tinyFontWeight, default: 400]";
+@mixin tinyFontBasic {
+    font-size: $ms-font-tinyFontSize;
+    font-weight: $ms-font-tinyFontWeight;
+}
+$ms-font-xSmallFontFamily: "[theme:xSmallFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xSmallMozOsxFontSmoothing: "[theme:xSmallMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xSmallWebkitFontSmoothing: "[theme:xSmallWebkitFontSmoothing, default: antialiased]";
+$ms-font-xSmallFontSize: "[theme:xSmallFontSize, default: 10px]";
+$ms-font-xSmallFontWeight: "[theme:xSmallFontWeight, default: 400]";
+@mixin xSmallFontBasic {
+    font-size: $ms-font-xSmallFontSize;
+    font-weight: $ms-font-xSmallFontWeight;
+}
+$ms-font-smallFontFamily: "[theme:smallFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-smallMozOsxFontSmoothing: "[theme:smallMozOsxFontSmoothing, default: grayscale]";
+$ms-font-smallWebkitFontSmoothing: "[theme:smallWebkitFontSmoothing, default: antialiased]";
+$ms-font-smallFontSize: "[theme:smallFontSize, default: 12px]";
+$ms-font-smallFontWeight: "[theme:smallFontWeight, default: 400]";
+@mixin smallFontBasic {
+    font-size: $ms-font-smallFontSize;
+    font-weight: $ms-font-smallFontWeight;
+}
+$ms-font-smallPlusFontFamily: "[theme:smallPlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-smallPlusMozOsxFontSmoothing: "[theme:smallPlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-smallPlusWebkitFontSmoothing: "[theme:smallPlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-smallPlusFontSize: "[theme:smallPlusFontSize, default: 12px]";
+$ms-font-smallPlusFontWeight: "[theme:smallPlusFontWeight, default: 400]";
+@mixin smallPlusFontBasic {
+    font-size: $ms-font-smallPlusFontSize;
+    font-weight: $ms-font-smallPlusFontWeight;
+}
+$ms-font-mediumFontFamily: "[theme:mediumFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-mediumMozOsxFontSmoothing: "[theme:mediumMozOsxFontSmoothing, default: grayscale]";
+$ms-font-mediumWebkitFontSmoothing: "[theme:mediumWebkitFontSmoothing, default: antialiased]";
+$ms-font-mediumFontSize: "[theme:mediumFontSize, default: 14px]";
+$ms-font-mediumFontWeight: "[theme:mediumFontWeight, default: 400]";
+@mixin mediumFontBasic {
+    font-size: $ms-font-mediumFontSize;
+    font-weight: $ms-font-mediumFontWeight;
+}
+$ms-font-mediumPlusFontFamily: "[theme:mediumPlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-mediumPlusMozOsxFontSmoothing: "[theme:mediumPlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-mediumPlusWebkitFontSmoothing: "[theme:mediumPlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-mediumPlusFontSize: "[theme:mediumPlusFontSize, default: 16px]";
+$ms-font-mediumPlusFontWeight: "[theme:mediumPlusFontWeight, default: 400]";
+@mixin mediumPlusFontBasic {
+    font-size: $ms-font-mediumPlusFontSize;
+    font-weight: $ms-font-mediumPlusFontWeight;
+}
+$ms-font-largeFontFamily: "[theme:largeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-largeMozOsxFontSmoothing: "[theme:largeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-largeWebkitFontSmoothing: "[theme:largeWebkitFontSmoothing, default: antialiased]";
+$ms-font-largeFontSize: "[theme:largeFontSize, default: 18px]";
+$ms-font-largeFontWeight: "[theme:largeFontWeight, default: 400]";
+@mixin largeFontBasic {
+    font-size: $ms-font-largeFontSize;
+    font-weight: $ms-font-largeFontWeight;
+}
+$ms-font-xLargeFontFamily: "[theme:xLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xLargeMozOsxFontSmoothing: "[theme:xLargeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xLargeWebkitFontSmoothing: "[theme:xLargeWebkitFontSmoothing, default: antialiased]";
+$ms-font-xLargeFontSize: "[theme:xLargeFontSize, default: 20px]";
+$ms-font-xLargeFontWeight: "[theme:xLargeFontWeight, default: 600]";
+@mixin xLargeFontBasic {
+    font-size: $ms-font-xLargeFontSize;
+    font-weight: $ms-font-xLargeFontWeight;
+}
+$ms-font-xLargePlusFontFamily: "[theme:xLargePlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xLargePlusMozOsxFontSmoothing: "[theme:xLargePlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xLargePlusWebkitFontSmoothing: "[theme:xLargePlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-xLargePlusFontSize: "[theme:xLargePlusFontSize, default: 24px]";
+$ms-font-xLargePlusFontWeight: "[theme:xLargePlusFontWeight, default: 600]";
+@mixin xLargePlusFontBasic {
+    font-size: $ms-font-xLargePlusFontSize;
+    font-weight: $ms-font-xLargePlusFontWeight;
+}
+$ms-font-xxLargeFontFamily: "[theme:xxLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xxLargeMozOsxFontSmoothing: "[theme:xxLargeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xxLargeWebkitFontSmoothing: "[theme:xxLargeWebkitFontSmoothing, default: antialiased]";
+$ms-font-xxLargeFontSize: "[theme:xxLargeFontSize, default: 28px]";
+$ms-font-xxLargeFontWeight: "[theme:xxLargeFontWeight, default: 600]";
+@mixin xxLargeFontBasic {
+    font-size: $ms-font-xxLargeFontSize;
+    font-weight: $ms-font-xxLargeFontWeight;
+}
+$ms-font-xxLargePlusFontFamily: "[theme:xxLargePlusFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-xxLargePlusMozOsxFontSmoothing: "[theme:xxLargePlusMozOsxFontSmoothing, default: grayscale]";
+$ms-font-xxLargePlusWebkitFontSmoothing: "[theme:xxLargePlusWebkitFontSmoothing, default: antialiased]";
+$ms-font-xxLargePlusFontSize: "[theme:xxLargePlusFontSize, default: 32px]";
+$ms-font-xxLargePlusFontWeight: "[theme:xxLargePlusFontWeight, default: 600]";
+@mixin xxLargePlusFontBasic {
+    font-size: $ms-font-xxLargePlusFontSize;
+    font-weight: $ms-font-xxLargePlusFontWeight;
+}
+$ms-font-superLargeFontFamily: "[theme:superLargeFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-superLargeMozOsxFontSmoothing: "[theme:superLargeMozOsxFontSmoothing, default: grayscale]";
+$ms-font-superLargeWebkitFontSmoothing: "[theme:superLargeWebkitFontSmoothing, default: antialiased]";
+$ms-font-superLargeFontSize: "[theme:superLargeFontSize, default: 42px]";
+$ms-font-superLargeFontWeight: "[theme:superLargeFontWeight, default: 600]";
+@mixin superLargeFontBasic {
+    font-size: $ms-font-superLargeFontSize;
+    font-weight: $ms-font-superLargeFontWeight;
+}
+$ms-font-megaFontFamily: "[theme:megaFontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
+$ms-font-megaMozOsxFontSmoothing: "[theme:megaMozOsxFontSmoothing, default: grayscale]";
+$ms-font-megaWebkitFontSmoothing: "[theme:megaWebkitFontSmoothing, default: antialiased]";
+$ms-font-megaFontSize: "[theme:megaFontSize, default: 68px]";
+$ms-font-megaFontWeight: "[theme:megaFontWeight, default: 600]";
+@mixin megaFontBasic {
+    font-size: $ms-font-megaFontSize;
+    font-weight: $ms-font-megaFontWeight;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Animation.Mixins.MDL2.scss

@@ -0,0 +1,447 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+// Outputs the keyframes used by the animation classes
+@mixin ms-animation-keyframes() {
+  // Set a default value for the version-scoped variable if it isn't assigned
+  $ms-fabric-version-suffix: '' !default;
+
+  @keyframes ms-slideRightIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-10px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-20px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-40px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-400px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightOut40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0px, 0px); }
+    to { transform: translate3d(40px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightOut400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(400px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(10px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(20px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(40px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(400px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftOut40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(-40px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftOut400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(-400px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 10px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 20px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideDownIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, -10px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideDownIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, -20px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpOut10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, -10px, 0px); }
+  }
+
+  @keyframes ms-slideUpOut20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, -20px, 0px); }
+  }
+
+  @keyframes ms-slideDownOut10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, 10px, 0px); }
+  }
+
+  @keyframes ms-slideDownOut20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, 20px, 0px); }
+  }
+
+  @keyframes ms-scaleUp100#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(.98, .98, 1); }
+    to { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes ms-scaleUp103#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(1.03, 1.03, 1); }
+  }
+
+  @keyframes ms-scaleDown98#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(0.98, 0.98, 1); }
+  }
+
+  @keyframes ms-scaleDown100#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1.03, 1.03, 1); }
+    to { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes ms-fadeIn#{$ms-fabric-version-suffix} {
+    from {
+      opacity: 0;
+      animation-timing-function: $ms-animation-ease-2;
+    }
+    to { opacity: 1; }
+  }
+
+  @keyframes ms-fadeOut#{$ms-fabric-version-suffix} {
+    from {
+      opacity: 1;
+      animation-timing-function: $ms-animation-ease-2;
+    }
+    to { opacity: 0; }
+  }
+
+  @keyframes ms-rotate90#{$ms-fabric-version-suffix} {
+    from { transform: rotateZ(0deg); }
+    to { transform: rotateZ(90deg); }
+  }
+
+  @keyframes ms-rotateN90#{$ms-fabric-version-suffix} {
+    from { transform: rotateZ(90deg); }
+    to { transform: rotateZ(0deg); }
+  }
+}
+
+// Wraps content in a 'prefers-reduced-motion' media query, so that it will only be
+// applied where the user has opted to reduce motion. This is currently supported by
+// Safari on iOS and macOS, and will likely be coming to other browsers in the future.
+//
+// See this article: https://css-tricks.com/introduction-reduced-motion-media-query/
+@mixin ms-prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// Outputs the properties for an animation.
+@mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
+  // Set a default value for the version-scoped variable if it isn't assigned.
+  $ms-fabric-version-suffix: '' !default;
+
+  // Append the scoping suffix to each animation name.
+  $namelist: ();
+  @each $name in $names {
+    $newname: $name#{$ms-fabric-version-suffix};
+    $namelist: append($namelist, $newname, 'comma');
+  }
+
+  // Output the animation's properties.
+  animation-name: $namelist;
+  animation-duration: $duration;
+  animation-timing-function: $timing;
+  animation-fill-mode: $fillMode;
+
+  // Make the animation instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    animation: none;
+  }
+}
+
+// Ouptuts the properties for a transition.
+@mixin ms-transition($transition) {
+  transition: $transition;
+
+  // Make the transition instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    transition: none;
+  }
+}
+
+// Slide
+@mixin ms-slideRightIn10 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn20 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightOut40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideRightOut400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideLeftIn10 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn20 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftOut40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideLeftOut400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideUpIn10 {
+  @include ms-animation((ms-fadeIn, ms-slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpIn20 {
+  @include ms-animation((ms-fadeIn, ms-slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideDownIn10 {
+  @include ms-animation((ms-fadeIn, ms-slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownIn20 {
+  @include ms-animation((ms-fadeIn, ms-slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideUpOut10 {
+  @include ms-animation((ms-fadeOut, ms-slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpOut20 {
+  @include ms-animation((ms-fadeOut, ms-slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut10 {
+  @include ms-animation((ms-fadeOut, ms-slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut20 {
+  @include ms-animation((ms-fadeOut, ms-slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+// Scale
+@mixin ms-scaleUpIn100 {
+  @include ms-animation((ms-fadeIn, ms-scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-scaleUpOut103 {
+  @include ms-animation((ms-fadeOut, ms-scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownOut98 {
+  @include ms-animation((ms-fadeOut, ms-scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownIn100 {
+  @include ms-animation((ms-fadeIn, ms-scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+// Rotate
+// @todo: These durations should use a variable, likely $ms-animation-duration-1
+@mixin ms-rotate90deg {
+  @include ms-LTR {
+    @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-rotateN90deg {
+  @include ms-LTR {
+    @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
+  }
+}
+
+// Fade
+@mixin ms-fadeIn100 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-1);
+}
+
+@mixin ms-fadeIn200 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-2);
+}
+
+@mixin ms-fadeIn400 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-3);
+}
+
+@mixin ms-fadeIn500 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-4);
+}
+
+@mixin ms-fadeOut100 {
+  @include ms-animation(ms-fadeOut, 0.1s); // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-fadeOut200 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-1); // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-fadeOut400 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-3); // @todo: Based on class name, likely intended to be 0.4s
+}
+
+@mixin ms-fadeOut500 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-4); // @todo: Based on class name, likely intended to be 0.5s
+}
+
+// Expand-collapse
+@mixin ms-expandCollapse100 {
+  @include ms-transition(height 0.1s $ms-animation-ease-2); // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-expandCollapse200 {
+  @include ms-transition(height $ms-animation-duration-1 $ms-animation-ease-2); // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-expandCollapse400 {
+  @include ms-transition(height $ms-animation-duration-3 $ms-animation-ease-2); // @todo: Based on class name, likely intended to be 0.4s
+}
+
+// Utilities to set the animation delay property.
+@mixin ms-delay100 {
+  animation-delay: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
+}
+
+@mixin ms-delay200 {
+  animation-delay: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
+}

node_modules/@fluentui/react/dist/sass/mixins/_Animation.Mixins.scss

@@ -0,0 +1,201 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Outputs the keyframes used by the animation classes
+@mixin ms-motion-keyframes() {
+  @keyframes ms-motion-fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ms-motion-fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ms-motion-scaleDownIn {
+    from {
+      transform: scale3d(1.15, 1.15, 1);
+    }
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes ms-motion-scaleDownOut {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    to {
+      transform: scale3d(0.9, 0.9, 1);
+    }
+  }
+
+  @keyframes ms-motion-slideLeftOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(-48px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideRightOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(48px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideLeftIn {
+    from {
+      transform: translate3d(48px, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideRightIn {
+    from {
+      transform: translate3d(-48px, 0, 0);
+    }
+    to {
+      transform: translate3d(0px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideUpOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -48px, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideDownOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 48px, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideUpIn {
+    from {
+      transform: translate3d(0, 48px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideDownIn {
+    from {
+      transform: translate3d(0, -48px, 0);
+    }
+    to {
+      transform: translate3d(0px, 0, 0);
+    }
+  }
+}
+
+// Fades.
+@mixin ms-motion-fadeIn {
+  animation: ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-fadeOut {
+  animation: ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+// Scales.
+@mixin ms-motion-scaleDownIn {
+  animation: ms-motion-scaleDownIn $ms-motion-duration-3 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-scaleDownOut {
+  animation: ms-motion-scaleDownOut $ms-motion-duration-3 $ms-motion-timing-decelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+// Slides.
+@mixin ms-motion-slideLeftOut {
+  @include ms-LTR {
+    animation: ms-motion-slideLeftOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideRightOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideRightOut {
+  @include ms-LTR {
+    animation: ms-motion-slideRightOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideLeftOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideLeftIn {
+  @include ms-LTR {
+    animation: ms-motion-slideLeftIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideRightIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideRightIn {
+  @include ms-LTR {
+    animation: ms-motion-slideRightIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideLeftIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideUpOut {
+  animation: ms-motion-slideUpOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideDownOut {
+  animation: ms-motion-slideDownOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideUpIn {
+  animation: ms-motion-slideUpIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideDownIn {
+  animation: ms-motion-slideDownIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}

node_modules/@fluentui/react/dist/sass/mixins/_BrandIcon.Mixins.scss

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Generate classes for product and document icons
+@mixin ms-brand-icon-classes($retina) {
+	@each $icon in $ms-brand-icon-product-icons {
+		.ms-BrandIcon--#{$icon} {
+			@include ms-brand-icon-product-sizes($icon, $retina, $ms-brand-icon-product-images-path);
+		}
+	}
+
+	@each $icon in $ms-brand-icon-document-icons {
+		.ms-BrandIcon--#{$icon} {
+			@include ms-brand-icon-document-sizes($icon, $retina, $ms-brand-icon-document-images-path);
+		}
+	}
+}
+
+// Generate size classes for each product icon
+@mixin ms-brand-icon-product-sizes($icon, $retina, $images-path) {
+	@each $size in $ms-brand-icon-sizes {
+		&.ms-BrandIcon--icon#{$size} {
+			background-image: url(#{$images-path}/#{$icon}_#{$size}x#{$retina}.png);
+		}
+	}
+}
+
+// Generate size classes for each document icon
+@mixin ms-brand-icon-document-sizes($icon, $retina, $images-path) {
+	$scaleSuffix: '';
+	@if $retina == '1' {
+		$scaleSuffix: '';
+	} @else if $retina == '1_5' {
+		$scaleSuffix: '_1.5x';
+	} @else {
+		$scaleSuffix: '_#{$retina}x';
+	}
+
+	@each $size in $ms-brand-icon-sizes {
+		&.ms-BrandIcon--icon#{$size} {
+			background-image: url(#{$images-path}/#{$size}#{$scaleSuffix}/#{$icon}.png);
+		}
+	}
+}
+
+// Generate generic icon size classes
+@mixin ms-brand-icon-size-classes() {
+	@each $size in $ms-brand-icon-sizes {
+		.ms-BrandIcon--icon#{$size} {
+			background-size: 100% 100%;
+			width: #{$size}px;
+			height: #{$size}px;
+		}
+	}
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Background.Mixins.scss

@@ -0,0 +1,205 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+@mixin ms-bgColor-communicationShade30 {
+  background-color: $ms-color-communicationShade30;
+}
+@mixin ms-bgColor-communicationShade20 {
+  background-color: $ms-color-communicationShade20;
+}
+@mixin ms-bgColor-communicationShade10 {
+  background-color: $ms-color-communicationShade10;
+}
+@mixin ms-bgColor-communicationPrimary {
+  background-color: $ms-color-communicationPrimary;
+}
+@mixin ms-bgColor-communicationTint10 {
+  background-color: $ms-color-communicationTint10;
+}
+@mixin ms-bgColor-communicationTint20 {
+  background-color: $ms-color-communicationTint20;
+}
+@mixin ms-bgColor-communicationTint30 {
+  background-color: $ms-color-communicationTint30;
+}
+@mixin ms-bgColor-communicationTint40 {
+  background-color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-bgColor-black {
+  background-color: $ms-color-black;
+}
+@mixin ms-bgColor-gray220 {
+  background-color: $ms-color-gray220;
+}
+@mixin ms-bgColor-gray210 {
+  background-color: $ms-color-gray210;
+}
+@mixin ms-bgColor-gray200 {
+  background-color: $ms-color-gray200;
+}
+@mixin ms-bgColor-gray190 {
+  background-color: $ms-color-gray190;
+}
+@mixin ms-bgColor-gray180 {
+  background-color: $ms-color-gray180;
+}
+@mixin ms-bgColor-gray170 {
+  background-color: $ms-color-gray170;
+}
+@mixin ms-bgColor-gray160 {
+  background-color: $ms-color-gray160;
+}
+@mixin ms-bgColor-gray150 {
+  background-color: $ms-color-gray150;
+}
+@mixin ms-bgColor-gray140 {
+  background-color: $ms-color-gray140;
+}
+@mixin ms-bgColor-gray130 {
+  background-color: $ms-color-gray130;
+}
+@mixin ms-bgColor-gray120 {
+  background-color: $ms-color-gray120;
+}
+@mixin ms-bgColor-gray110 {
+  background-color: $ms-color-gray110;
+}
+@mixin ms-bgColor-gray100 {
+  background-color: $ms-color-gray100;
+}
+@mixin ms-bgColor-gray90 {
+  background-color: $ms-color-gray90;
+}
+@mixin ms-bgColor-gray80 {
+  background-color: $ms-color-gray80;
+}
+@mixin ms-bgColor-gray70 {
+  background-color: $ms-color-gray70;
+}
+@mixin ms-bgColor-gray60 {
+  background-color: $ms-color-gray60;
+}
+@mixin ms-bgColor-gray50 {
+  background-color: $ms-color-gray50;
+}
+@mixin ms-bgColor-gray40 {
+  background-color: $ms-color-gray40;
+}
+@mixin ms-bgColor-gray30 {
+  background-color: $ms-color-gray30;
+}
+@mixin ms-bgColor-gray20 {
+  background-color: $ms-color-gray20;
+}
+@mixin ms-bgColor-gray10 {
+  background-color: $ms-color-gray10;
+}
+@mixin ms-bgColor-white {
+  background-color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-bgColor-sharedPinkRed10 {
+  background-color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-bgColor-sharedRed20 {
+  background-color: $ms-color-sharedRed20;
+}
+@mixin ms-bgColor-sharedRed10 {
+  background-color: $ms-color-sharedRed10;
+}
+@mixin ms-bgColor-sharedRedOrange20 {
+  background-color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-bgColor-sharedRedOrange10 {
+  background-color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-bgColor-sharedOrange30 {
+  background-color: $ms-color-sharedOrange30;
+}
+@mixin ms-bgColor-sharedOrange20 {
+  background-color: $ms-color-sharedOrange20;
+}
+@mixin ms-bgColor-sharedOrange10 {
+  background-color: $ms-color-sharedOrange10;
+}
+@mixin ms-bgColor-sharedYellow10 {
+  background-color: $ms-color-sharedYellow10;
+}
+@mixin ms-bgColor-sharedOrangeYellow20 {
+  background-color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-bgColor-sharedOrangeYellow10 {
+  background-color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-bgColor-sharedYellowGreen10 {
+  background-color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-bgColor-sharedGreen20 {
+  background-color: $ms-color-sharedGreen20;
+}
+@mixin ms-bgColor-sharedGreen10 {
+  background-color: $ms-color-sharedGreen10;
+}
+@mixin ms-bgColor-sharedGreenCyan10 {
+  background-color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-bgColor-sharedCyan40 {
+  background-color: $ms-color-sharedCyan40;
+}
+@mixin ms-bgColor-sharedCyan30 {
+  background-color: $ms-color-sharedCyan30;
+}
+@mixin ms-bgColor-sharedCyan20 {
+  background-color: $ms-color-sharedCyan20;
+}
+@mixin ms-bgColor-sharedCyan10 {
+  background-color: $ms-color-sharedCyan10;
+}
+@mixin ms-bgColor-sharedCyanBlue20 {
+  background-color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-bgColor-sharedCyanBlue10 {
+  background-color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-bgColor-sharedBlue10 {
+  background-color: $ms-color-sharedBlue10;
+}
+@mixin ms-bgColor-sharedBlueMagenta40 {
+  background-color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-bgColor-sharedBlueMagenta30 {
+  background-color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-bgColor-sharedBlueMagenta20 {
+  background-color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-bgColor-sharedBlueMagenta10 {
+  background-color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-bgColor-sharedMagenta20 {
+  background-color: $ms-color-sharedMagenta20;
+}
+@mixin ms-bgColor-sharedMagenta10 {
+  background-color: $ms-color-sharedMagenta10;
+}
+@mixin ms-bgColor-sharedMagentaPink20 {
+  background-color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-bgColor-sharedMagentaPink10 {
+  background-color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-bgColor-sharedGray40 {
+  background-color: $ms-color-sharedGray40;
+}
+@mixin ms-bgColor-sharedGray30 {
+  background-color: $ms-color-sharedGray30;
+}
+@mixin ms-bgColor-sharedGray20 {
+  background-color: $ms-color-sharedGray20;
+}
+@mixin ms-bgColor-sharedGray10 {
+  background-color: $ms-color-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Border.Mixins.scss

@@ -0,0 +1,205 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+@mixin ms-borderColor-communicationShade30 {
+  border-color: $ms-color-communicationShade30;
+}
+@mixin ms-borderColor-communicationShade20 {
+  border-color: $ms-color-communicationShade20;
+}
+@mixin ms-borderColor-communicationShade10 {
+  border-color: $ms-color-communicationShade10;
+}
+@mixin ms-borderColor-communicationPrimary {
+  border-color: $ms-color-communicationPrimary;
+}
+@mixin ms-borderColor-communicationTint10 {
+  border-color: $ms-color-communicationTint10;
+}
+@mixin ms-borderColor-communicationTint20 {
+  border-color: $ms-color-communicationTint20;
+}
+@mixin ms-borderColor-communicationTint30 {
+  border-color: $ms-color-communicationTint30;
+}
+@mixin ms-borderColor-communicationTint40 {
+  border-color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-borderColor-black {
+  border-color: $ms-color-black;
+}
+@mixin ms-borderColor-gray220 {
+  border-color: $ms-color-gray220;
+}
+@mixin ms-borderColor-gray210 {
+  border-color: $ms-color-gray210;
+}
+@mixin ms-borderColor-gray200 {
+  border-color: $ms-color-gray200;
+}
+@mixin ms-borderColor-gray190 {
+  border-color: $ms-color-gray190;
+}
+@mixin ms-borderColor-gray180 {
+  border-color: $ms-color-gray180;
+}
+@mixin ms-borderColor-gray170 {
+  border-color: $ms-color-gray170;
+}
+@mixin ms-borderColor-gray160 {
+  border-color: $ms-color-gray160;
+}
+@mixin ms-borderColor-gray150 {
+  border-color: $ms-color-gray150;
+}
+@mixin ms-borderColor-gray140 {
+  border-color: $ms-color-gray140;
+}
+@mixin ms-borderColor-gray130 {
+  border-color: $ms-color-gray130;
+}
+@mixin ms-borderColor-gray120 {
+  border-color: $ms-color-gray120;
+}
+@mixin ms-borderColor-gray110 {
+  border-color: $ms-color-gray110;
+}
+@mixin ms-borderColor-gray100 {
+  border-color: $ms-color-gray100;
+}
+@mixin ms-borderColor-gray90 {
+  border-color: $ms-color-gray90;
+}
+@mixin ms-borderColor-gray80 {
+  border-color: $ms-color-gray80;
+}
+@mixin ms-borderColor-gray70 {
+  border-color: $ms-color-gray70;
+}
+@mixin ms-borderColor-gray60 {
+  border-color: $ms-color-gray60;
+}
+@mixin ms-borderColor-gray50 {
+  border-color: $ms-color-gray50;
+}
+@mixin ms-borderColor-gray40 {
+  border-color: $ms-color-gray40;
+}
+@mixin ms-borderColor-gray30 {
+  border-color: $ms-color-gray30;
+}
+@mixin ms-borderColor-gray20 {
+  border-color: $ms-color-gray20;
+}
+@mixin ms-borderColor-gray10 {
+  border-color: $ms-color-gray10;
+}
+@mixin ms-borderColor-white {
+  border-color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-borderColor-sharedPinkRed10 {
+  border-color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-borderColor-sharedRed20 {
+  border-color: $ms-color-sharedRed20;
+}
+@mixin ms-borderColor-sharedRed10 {
+  border-color: $ms-color-sharedRed10;
+}
+@mixin ms-borderColor-sharedRedOrange20 {
+  border-color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-borderColor-sharedRedOrange10 {
+  border-color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-borderColor-sharedOrange30 {
+  border-color: $ms-color-sharedOrange30;
+}
+@mixin ms-borderColor-sharedOrange20 {
+  border-color: $ms-color-sharedOrange20;
+}
+@mixin ms-borderColor-sharedOrange10 {
+  border-color: $ms-color-sharedOrange10;
+}
+@mixin ms-borderColor-sharedYellow10 {
+  border-color: $ms-color-sharedYellow10;
+}
+@mixin ms-borderColor-sharedOrangeYellow20 {
+  border-color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-borderColor-sharedOrangeYellow10 {
+  border-color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-borderColor-sharedYellowGreen10 {
+  border-color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-borderColor-sharedGreen20 {
+  border-color: $ms-color-sharedGreen20;
+}
+@mixin ms-borderColor-sharedGreen10 {
+  border-color: $ms-color-sharedGreen10;
+}
+@mixin ms-borderColor-sharedGreenCyan10 {
+  border-color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-borderColor-sharedCyan40 {
+  border-color: $ms-color-sharedCyan40;
+}
+@mixin ms-borderColor-sharedCyan30 {
+  border-color: $ms-color-sharedCyan30;
+}
+@mixin ms-borderColor-sharedCyan20 {
+  border-color: $ms-color-sharedCyan20;
+}
+@mixin ms-borderColor-sharedCyan10 {
+  border-color: $ms-color-sharedCyan10;
+}
+@mixin ms-borderColor-sharedCyanBlue20 {
+  border-color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-borderColor-sharedCyanBlue10 {
+  border-color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-borderColor-sharedBlue10 {
+  border-color: $ms-color-sharedBlue10;
+}
+@mixin ms-borderColor-sharedBlueMagenta40 {
+  border-color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-borderColor-sharedBlueMagenta30 {
+  border-color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-borderColor-sharedBlueMagenta20 {
+  border-color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-borderColor-sharedBlueMagenta10 {
+  border-color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-borderColor-sharedMagenta20 {
+  border-color: $ms-color-sharedMagenta20;
+}
+@mixin ms-borderColor-sharedMagenta10 {
+  border-color: $ms-color-sharedMagenta10;
+}
+@mixin ms-borderColor-sharedMagentaPink20 {
+  border-color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-borderColor-sharedMagentaPink10 {
+  border-color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-borderColor-sharedGray40 {
+  border-color: $ms-color-sharedGray40;
+}
+@mixin ms-borderColor-sharedGray30 {
+  border-color: $ms-color-sharedGray30;
+}
+@mixin ms-borderColor-sharedGray20 {
+  border-color: $ms-color-sharedGray20;
+}
+@mixin ms-borderColor-sharedGray10 {
+  border-color: $ms-color-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Font.Mixins.scss

@@ -0,0 +1,206 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+
+// Communication
+@mixin ms-fontColor-communicationShade30 {
+  color: $ms-color-communicationShade30;
+}
+@mixin ms-fontColor-communicationShade20 {
+  color: $ms-color-communicationShade20;
+}
+@mixin ms-fontColor-communicationShade10 {
+  color: $ms-color-communicationShade10;
+}
+@mixin ms-fontColor-communicationPrimary {
+  color: $ms-color-communicationPrimary;
+}
+@mixin ms-fontColor-communicationTint10 {
+  color: $ms-color-communicationTint10;
+}
+@mixin ms-fontColor-communicationTint20 {
+  color: $ms-color-communicationTint20;
+}
+@mixin ms-fontColor-communicationTint30 {
+  color: $ms-color-communicationTint30;
+}
+@mixin ms-fontColor-communicationTint40 {
+  color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+@mixin ms-fontColor-gray220 {
+  color: $ms-color-gray220;
+}
+@mixin ms-fontColor-gray210 {
+  color: $ms-color-gray210;
+}
+@mixin ms-fontColor-gray200 {
+  color: $ms-color-gray200;
+}
+@mixin ms-fontColor-gray190 {
+  color: $ms-color-gray190;
+}
+@mixin ms-fontColor-gray180 {
+  color: $ms-color-gray180;
+}
+@mixin ms-fontColor-gray170 {
+  color: $ms-color-gray170;
+}
+@mixin ms-fontColor-gray160 {
+  color: $ms-color-gray160;
+}
+@mixin ms-fontColor-gray150 {
+  color: $ms-color-gray150;
+}
+@mixin ms-fontColor-gray140 {
+  color: $ms-color-gray140;
+}
+@mixin ms-fontColor-gray130 {
+  color: $ms-color-gray130;
+}
+@mixin ms-fontColor-gray120 {
+  color: $ms-color-gray120;
+}
+@mixin ms-fontColor-gray110 {
+  color: $ms-color-gray110;
+}
+@mixin ms-fontColor-gray100 {
+  color: $ms-color-gray100;
+}
+@mixin ms-fontColor-gray90 {
+  color: $ms-color-gray90;
+}
+@mixin ms-fontColor-gray80 {
+  color: $ms-color-gray80;
+}
+@mixin ms-fontColor-gray70 {
+  color: $ms-color-gray70;
+}
+@mixin ms-fontColor-gray60 {
+  color: $ms-color-gray60;
+}
+@mixin ms-fontColor-gray50 {
+  color: $ms-color-gray50;
+}
+@mixin ms-fontColor-gray40 {
+  color: $ms-color-gray40;
+}
+@mixin ms-fontColor-gray30 {
+  color: $ms-color-gray30;
+}
+@mixin ms-fontColor-gray20 {
+  color: $ms-color-gray20;
+}
+@mixin ms-fontColor-gray10 {
+  color: $ms-color-gray10;
+}
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-fontColor-sharedPinkRed10 {
+  color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-fontColor-sharedRed20 {
+  color: $ms-color-sharedRed20;
+}
+@mixin ms-fontColor-sharedRed10 {
+  color: $ms-color-sharedRed10;
+}
+@mixin ms-fontColor-sharedRedOrange20 {
+  color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-fontColor-sharedRedOrange10 {
+  color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-fontColor-sharedOrange30 {
+  color: $ms-color-sharedOrange30;
+}
+@mixin ms-fontColor-sharedOrange20 {
+  color: $ms-color-sharedOrange20;
+}
+@mixin ms-fontColor-sharedOrange10 {
+  color: $ms-color-sharedOrange10;
+}
+@mixin ms-fontColor-sharedYellow10 {
+  color: $ms-color-sharedYellow10;
+}
+@mixin ms-fontColor-sharedOrangeYellow20 {
+  color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-fontColor-sharedOrangeYellow10 {
+  color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-fontColor-sharedYellowGreen10 {
+  color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-fontColor-sharedGreen20 {
+  color: $ms-color-sharedGreen20;
+}
+@mixin ms-fontColor-sharedGreen10 {
+  color: $ms-color-sharedGreen10;
+}
+@mixin ms-fontColor-sharedGreenCyan10 {
+  color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-fontColor-sharedCyan40 {
+  color: $ms-color-sharedCyan40;
+}
+@mixin ms-fontColor-sharedCyan30 {
+  color: $ms-color-sharedCyan30;
+}
+@mixin ms-fontColor-sharedCyan20 {
+  color: $ms-color-sharedCyan20;
+}
+@mixin ms-fontColor-sharedCyan10 {
+  color: $ms-color-sharedCyan10;
+}
+@mixin ms-fontColor-sharedCyanBlue20 {
+  color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-fontColor-sharedCyanBlue10 {
+  color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-fontColor-sharedBlue10 {
+  color: $ms-color-sharedBlue10;
+}
+@mixin ms-fontColor-sharedBlueMagenta40 {
+  color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-fontColor-sharedBlueMagenta30 {
+  color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-fontColor-sharedBlueMagenta20 {
+  color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-fontColor-sharedBlueMagenta10 {
+  color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-fontColor-sharedMagenta20 {
+  color: $ms-color-sharedMagenta20;
+}
+@mixin ms-fontColor-sharedMagenta10 {
+  color: $ms-color-sharedMagenta10;
+}
+@mixin ms-fontColor-sharedMagentaPink20 {
+  color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-fontColor-sharedMagentaPink10 {
+  color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-fontColor-sharedGray40 {
+  color: $ms-color-sharedGray40;
+}
+@mixin ms-fontColor-sharedGray30 {
+  color: $ms-color-sharedGray30;
+}
+@mixin ms-fontColor-sharedGray20 {
+  color: $ms-color-sharedGray20;
+}
+@mixin ms-fontColor-sharedGray10 {
+  color: $ms-color-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Mixins.MDL2.scss

@@ -0,0 +1,545 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+//== Theme colors
+//
+
+// Background
+@mixin ms-bgColor-themeDark {
+  background-color: $ms-color-themeDark;
+}
+@mixin ms-bgColor-themeDarkAlt {
+  background-color: $ms-color-themeDarkAlt;
+}
+@mixin ms-bgColor-themeDarker {
+  background-color: $ms-color-themeDarker;
+}
+@mixin ms-bgColor-themePrimary {
+  background-color: $ms-color-themePrimary;
+}
+@mixin ms-bgColor-themeSecondary {
+  background-color: $ms-color-themeSecondary;
+}
+@mixin ms-bgColor-themeTertiary {
+  background-color: $ms-color-themeTertiary;
+}
+@mixin ms-bgColor-themeLight {
+  background-color: $ms-color-themeLight;
+}
+@mixin ms-bgColor-themeLighter {
+  background-color: $ms-color-themeLighter;
+}
+@mixin ms-bgColor-themeLighterAlt {
+  background-color: $ms-color-themeLighterAlt;
+}
+
+// Border
+@mixin ms-borderColor-themeDark {
+  border-color: $ms-color-themeDark;
+}
+@mixin ms-borderColor-themeDarkAlt {
+  border-color: $ms-color-themeDarkAlt;
+}
+@mixin ms-borderColor-themeDarker {
+  border-color: $ms-color-themeDarker;
+}
+@mixin ms-borderColor-themePrimary {
+  border-color: $ms-color-themePrimary;
+}
+@mixin ms-borderColor-themeSecondary {
+  border-color: $ms-color-themeSecondary;
+}
+@mixin ms-borderColor-themeTertiary {
+  border-color: $ms-color-themeTertiary;
+}
+@mixin ms-borderColor-themeLight {
+  border-color: $ms-color-themeLight;
+}
+@mixin ms-borderColor-themeLighter {
+  border-color: $ms-color-themeLighter;
+}
+@mixin ms-borderColor-themeLighterAlt {
+  border-color: $ms-color-themeLighterAlt;
+}
+
+// Font
+@mixin ms-fontColor-themeDarker {
+  color: $ms-color-themeDarker;
+}
+@mixin ms-fontColor-themeDark {
+  color: $ms-color-themeDark;
+}
+@mixin ms-fontColor-themeDarkAlt {
+  color: $ms-color-themeDarkAlt;
+}
+@mixin ms-fontColor-themePrimary {
+  color: $ms-color-themePrimary;
+}
+@mixin ms-fontColor-themeSecondary {
+  color: $ms-color-themeSecondary;
+}
+@mixin ms-fontColor-themeTertiary {
+  color: $ms-color-themeTertiary;
+}
+@mixin ms-fontColor-themeLight {
+  color: $ms-color-themeLight;
+}
+@mixin ms-fontColor-themeLighter {
+  color: $ms-color-themeLighter;
+}
+@mixin ms-fontColor-themeLighterAlt {
+  color: $ms-color-themeLighterAlt;
+}
+
+//== Neutral colors
+//
+
+// Background
+@mixin ms-bgColor-black {
+  background-color: $ms-color-black;
+}
+@mixin ms-bgColor-neutralDark {
+  background-color: $ms-color-neutralDark;
+}
+@mixin ms-bgColor-neutralPrimary {
+  background-color: $ms-color-neutralPrimary;
+}
+@mixin ms-bgColor-neutralPrimaryAlt {
+  background-color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-bgColor-neutralSecondary {
+  background-color: $ms-color-neutralSecondary;
+}
+@mixin ms-bgColor-neutralSecondaryAlt {
+  background-color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-bgColor-neutralTertiary {
+  background-color: $ms-color-neutralTertiary;
+}
+@mixin ms-bgColor-neutralTertiaryAlt {
+  background-color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-bgColor-neutralQuaternary {
+  background-color: $ms-color-neutralQuaternary;
+}
+@mixin ms-bgColor-neutralQuaternaryAlt {
+  background-color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-bgColor-neutralLight {
+  background-color: $ms-color-neutralLight;
+}
+@mixin ms-bgColor-neutralLighter {
+  background-color: $ms-color-neutralLighter;
+}
+@mixin ms-bgColor-neutralLighterAlt {
+  background-color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-bgColor-white {
+  background-color: $ms-color-white;
+}
+
+// Border
+@mixin ms-borderColor-black {
+  border-color: $ms-color-black;
+}
+@mixin ms-borderColor-neutralDark {
+  border-color: $ms-color-neutralDark;
+}
+@mixin ms-borderColor-neutralPrimary {
+  border-color: $ms-color-neutralPrimary;
+}
+@mixin ms-borderColor-neutralPrimaryAlt {
+  border-color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-borderColor-neutralSecondary {
+  border-color: $ms-color-neutralSecondary;
+}
+@mixin ms-borderColor-neutralSecondaryAlt {
+  border-color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-borderColor-neutralTertiary {
+  border-color: $ms-color-neutralTertiary;
+}
+@mixin ms-borderColor-neutralTertiaryAlt {
+  border-color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-borderColor-neutralQuaternary {
+  border-color: $ms-color-neutralQuaternary;
+}
+@mixin ms-borderColor-neutralQuaternaryAlt {
+  border-color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-borderColor-neutralLight {
+  border-color: $ms-color-neutralLight;
+}
+@mixin ms-borderColor-neutralLighter {
+  border-color: $ms-color-neutralLighter;
+}
+@mixin ms-borderColor-neutralLighterAlt {
+  border-color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-borderColor-white {
+  border-color: $ms-color-white;
+}
+
+// Font
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+@mixin ms-fontColor-neutralDark {
+  color: $ms-color-neutralDark;
+}
+@mixin ms-fontColor-neutralPrimary {
+  color: $ms-color-neutralPrimary;
+}
+@mixin ms-fontColor-neutralPrimaryAlt {
+  color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-fontColor-neutralSecondary {
+  color: $ms-color-neutralSecondary;
+}
+@mixin ms-fontColor-neutralSecondaryAlt {
+  color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-fontColor-neutralTertiary {
+  color: $ms-color-neutralTertiary;
+}
+@mixin ms-fontColor-neutralTertiaryAlt {
+  color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-fontColor-neutralQuaternary {
+  color: $ms-color-neutralQuaternary;
+}
+@mixin ms-fontColor-neutralQuaternaryAlt {
+  color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-fontColor-neutralLight {
+  color: $ms-color-neutralLight;
+}
+@mixin ms-fontColor-neutralLighter {
+  color: $ms-color-neutralLighter;
+}
+@mixin ms-fontColor-neutralLighterAlt {
+  color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+//== Brand and accent colors
+//
+
+// Background
+@mixin ms-bgColor-yellow {
+  background-color: $ms-color-yellow;
+}
+@mixin ms-bgColor-yellowLight {
+  background-color: $ms-color-yellowLight;
+}
+@mixin ms-bgColor-orange {
+  background-color: $ms-color-orange;
+}
+@mixin ms-bgColor-orangeLight {
+  background-color: $ms-color-orangeLight;
+}
+@mixin ms-bgColor-orangeLighter {
+  background-color: $ms-color-orangeLighter;
+}
+@mixin ms-bgColor-redDark {
+  background-color: $ms-color-redDark;
+}
+@mixin ms-bgColor-red {
+  background-color: $ms-color-red;
+}
+@mixin ms-bgColor-magentaDark {
+  background-color: $ms-color-magentaDark;
+}
+@mixin ms-bgColor-magenta {
+  background-color: $ms-color-magenta;
+}
+@mixin ms-bgColor-magentaLight {
+  background-color: $ms-color-magentaLight;
+}
+@mixin ms-bgColor-purpleDark {
+  background-color: $ms-color-purpleDark;
+}
+@mixin ms-bgColor-purple {
+  background-color: $ms-color-purple;
+}
+@mixin ms-bgColor-purpleLight {
+  background-color: $ms-color-purpleLight;
+}
+@mixin ms-bgColor-blueDark {
+  background-color: $ms-color-blueDark;
+}
+@mixin ms-bgColor-blueMid {
+  background-color: $ms-color-blueMid;
+}
+@mixin ms-bgColor-blue {
+  background-color: $ms-color-blue;
+}
+@mixin ms-bgColor-blueLight {
+  background-color: $ms-color-blueLight;
+}
+@mixin ms-bgColor-tealDark {
+  background-color: $ms-color-tealDark;
+}
+@mixin ms-bgColor-teal {
+  background-color: $ms-color-teal;
+}
+@mixin ms-bgColor-tealLight {
+  background-color: $ms-color-tealLight;
+}
+@mixin ms-bgColor-greenDark {
+  background-color: $ms-color-greenDark;
+}
+@mixin ms-bgColor-green {
+  background-color: $ms-color-green;
+}
+@mixin ms-bgColor-greenLight {
+  background-color: $ms-color-greenLight;
+}
+
+// Border
+@mixin ms-borderColor-yellow {
+  border-color: $ms-color-yellow;
+}
+@mixin ms-borderColor-yellowLight {
+  border-color: $ms-color-yellowLight;
+}
+@mixin ms-borderColor-orange {
+  border-color: $ms-color-orange;
+}
+@mixin ms-borderColor-orangeLight {
+  border-color: $ms-color-orangeLight;
+}
+@mixin ms-borderColor-orangeLighter {
+  border-color: $ms-color-orangeLighter;
+}
+@mixin ms-borderColor-redDark {
+  border-color: $ms-color-redDark;
+}
+@mixin ms-borderColor-red {
+  border-color: $ms-color-red;
+}
+@mixin ms-borderColor-magentaDark {
+  border-color: $ms-color-magentaDark;
+}
+@mixin ms-borderColor-magenta {
+  border-color: $ms-color-magenta;
+}
+@mixin ms-borderColor-magentaLight {
+  border-color: $ms-color-magentaLight;
+}
+@mixin ms-borderColor-purpleDark {
+  border-color: $ms-color-purpleDark;
+}
+@mixin ms-borderColor-purple {
+  border-color: $ms-color-purple;
+}
+@mixin ms-borderColor-purpleLight {
+  border-color: $ms-color-purpleLight;
+}
+@mixin ms-borderColor-blueDark {
+  border-color: $ms-color-blueDark;
+}
+@mixin ms-borderColor-blueMid {
+  border-color: $ms-color-blueMid;
+}
+@mixin ms-borderColor-blue {
+  border-color: $ms-color-blue;
+}
+@mixin ms-borderColor-blueLight {
+  border-color: $ms-color-blueLight;
+}
+@mixin ms-borderColor-tealDark {
+  border-color: $ms-color-tealDark;
+}
+@mixin ms-borderColor-teal {
+  border-color: $ms-color-teal;
+}
+@mixin ms-borderColor-tealLight {
+  border-color: $ms-color-tealLight;
+}
+@mixin ms-borderColor-greenDark {
+  border-color: $ms-color-greenDark;
+}
+@mixin ms-borderColor-green {
+  border-color: $ms-color-green;
+}
+@mixin ms-borderColor-greenLight {
+  border-color: $ms-color-greenLight;
+}
+
+// Font
+@mixin ms-fontColor-yellow {
+  color: $ms-color-yellow;
+}
+@mixin ms-fontColor-yellowLight {
+  color: $ms-color-yellowLight;
+}
+@mixin ms-fontColor-orange {
+  color: $ms-color-orange;
+}
+@mixin ms-fontColor-orangeLight {
+  color: $ms-color-orangeLight;
+}
+@mixin ms-fontColor-orangeLighter {
+  color: $ms-color-orangeLighter;
+}
+@mixin ms-fontColor-redDark {
+  color: $ms-color-redDark;
+}
+@mixin ms-fontColor-red {
+  color: $ms-color-red;
+}
+@mixin ms-fontColor-magentaDark {
+  color: $ms-color-magentaDark;
+}
+@mixin ms-fontColor-magenta {
+  color: $ms-color-magenta;
+}
+@mixin ms-fontColor-magentaLight {
+  color: $ms-color-magentaLight;
+}
+@mixin ms-fontColor-purpleDark {
+  color: $ms-color-purpleDark;
+}
+@mixin ms-fontColor-purple {
+  color: $ms-color-purple;
+}
+@mixin ms-fontColor-purpleLight {
+  color: $ms-color-purpleLight;
+}
+@mixin ms-fontColor-blueDark {
+  color: $ms-color-blueDark;
+}
+@mixin ms-fontColor-blueMid {
+  color: $ms-color-blueMid;
+}
+@mixin ms-fontColor-blue {
+  color: $ms-color-blue;
+}
+@mixin ms-fontColor-blueLight {
+  color: $ms-color-blueLight;
+}
+@mixin ms-fontColor-tealDark {
+  color: $ms-color-tealDark;
+}
+@mixin ms-fontColor-teal {
+  color: $ms-color-teal;
+}
+@mixin ms-fontColor-tealLight {
+  color: $ms-color-tealLight;
+}
+@mixin ms-fontColor-greenDark {
+  color: $ms-color-greenDark;
+}
+@mixin ms-fontColor-green {
+  color: $ms-color-green;
+}
+@mixin ms-fontColor-greenLight {
+  color: $ms-color-greenLight;
+}
+
+//== Message colors
+//
+
+// Background
+@mixin ms-bgColor-info {
+  background-color: $ms-color-infoBackground;
+}
+@mixin ms-bgColor-success {
+  background-color: $ms-color-successBackground;
+}
+@mixin ms-bgColor-severeWarning {
+  background-color: $ms-color-severeWarningBackground;
+}
+@mixin ms-bgColor-warning {
+  background-color: $ms-color-warningBackground;
+}
+@mixin ms-bgColor-error {
+  background-color: $ms-color-errorBackground;
+}
+
+// Border
+@mixin ms-borderColor-info {
+  border-color: $ms-color-info;
+}
+@mixin ms-borderColor-success {
+  border-color: $ms-color-success;
+}
+@mixin ms-borderColor-alert {
+  border-color: $ms-color-alert;
+}
+@mixin ms-borderColor-error {
+  border-color: $ms-color-error;
+}
+
+// Font
+@mixin ms-fontColor-info {
+  color: $ms-color-info;
+}
+@mixin ms-fontColor-success {
+  color: $ms-color-success;
+}
+@mixin ms-fontColor-alert {
+  // @todo: Deprecated: Use ms-fontColor-severeWarning
+  color: $ms-color-alert;
+}
+@mixin ms-fontColor-warning {
+  color: $ms-color-warning;
+}
+@mixin ms-fontColor-severeWarning {
+  color: $ms-color-severeWarning;
+}
+@mixin ms-fontColor-error {
+  color: $ms-color-error;
+}
+
+
+//== High contrast colors
+//
+
+// Background
+@mixin ms-bgColor-contrastBlackDisabled {
+  background-color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-bgColor-contrastWhiteDisabled {
+  background-color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-bgColor-contrastBlackSelected {
+  background-color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-bgColor-contrastWhiteSelected {
+  background-color: $ms-color-contrastWhiteSelected;
+}
+
+// Border
+@mixin ms-borderColor-contrastBlackDisabled {
+  border-color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-borderColor-contrastWhiteDisabled {
+  border-color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-borderColor-contrastBlackSelected {
+  border-color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-borderColor-contrastWhiteSelected {
+  border-color: $ms-color-contrastWhiteSelected;
+}
+
+// Font
+@mixin ms-fontColor-contrastBlackDisabled {
+  color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-fontColor-contrastWhiteDisabled {
+  color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-fontColor-contrastBlackSelected {
+  color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-fontColor-contrastWhiteSelected {
+  color: $ms-color-contrastWhiteSelected;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Mixins.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Mixins for specific properties.
+@import './Color.Background.Mixins';
+@import './Color.Border.Mixins';
+@import './Color.Font.Mixins';
+
+// Deprecated MDL2 color mixins.
+@import "./Color.Mixins.MDL2";

node_modules/@fluentui/react/dist/sass/mixins/_Depth.Mixins.scss

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+@mixin ms-depth-0 {
+  box-shadow: $ms-depth-shadow-0;
+}
+@mixin ms-depth-4 {
+  box-shadow: $ms-depth-shadow-4;
+}
+@mixin ms-depth-8 {
+  box-shadow: $ms-depth-shadow-8;
+}
+@mixin ms-depth-16 {
+  box-shadow: $ms-depth-shadow-16;
+}
+@mixin ms-depth-64 {
+  box-shadow: $ms-depth-shadow-64;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Directionality.Mixins.scss

@@ -0,0 +1,362 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Directionality mixins to generate LTR and RTL-specific styles
+
+// Base left-to-right mixin definition.
+@mixin ms-LTR {
+  [dir='ltr'] & {
+    @content;
+  }
+}
+
+// Base right-to-left mixin definition.
+@mixin ms-RTL {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+// Use baseRTL to set the default direction to right-to-left on
+// a root element (e.g. page or region) that needs RTL support.
+@mixin ms-base-RTL {
+  @include ms-RTL {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+}
+
+
+// Common CSS property mixins with support for RTL.
+// Use to automatically create RTL versions of your properties.
+
+// Background direction.
+@mixin ms-background-position($alignment) {
+  @if $alignment == left {
+    @include ms-LTR {
+      background-position: left;
+    }
+
+    @include ms-RTL {
+      background-position: right;
+    }
+  } @else if $alignment == right {
+    @include ms-LTR {
+      background-position: right;
+    }
+
+    @include ms-RTL {
+      background-position: left;
+    }
+  } @else {
+    background-position: $alignment;
+  }
+}
+
+// Border styles.
+@mixin ms-border-color($top, $right, $bottom, $left) {
+  border-color: $top $right $bottom $left;
+
+  @include ms-RTL {
+    border-color: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-border-left($width, $style, $color) {
+  @include ms-LTR {
+    border-left: $width $style $color;
+  }
+
+  @include ms-RTL {
+    border-right: $width $style $color;
+  }
+}
+
+@mixin ms-border-left-color($color) {
+  @include ms-LTR {
+    border-left-color: $color;
+  }
+
+  @include ms-RTL {
+    border-right-color: $color;
+  }
+}
+
+@mixin ms-border-left-style($style) {
+  @include ms-LTR {
+    border-left-style: $style;
+  }
+
+  @include ms-RTL {
+    border-right-style: $style;
+  }
+}
+
+@mixin ms-border-left-width($width) {
+  @include ms-LTR {
+    border-left-width: $width;
+  }
+
+  @include ms-RTL {
+    border-right-width: $width;
+  }
+}
+
+@mixin ms-border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+  border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+
+  @include ms-RTL {
+    border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+  }
+}
+
+@mixin ms-border-right($width, $style, $color) {
+  @include ms-LTR {
+    border-right: $width $style $color;
+  }
+
+  @include ms-RTL {
+    border-left: $width $style $color;
+  }
+}
+
+@mixin ms-border-right-color($color) {
+  @include ms-LTR {
+      border-right-color: $color;
+  }
+
+  @include ms-RTL {
+      border-left-color: $color;
+  }
+}
+
+@mixin ms-border-right-style($style) {
+  @include ms-LTR {
+    border-right-style: $style;
+  }
+  
+  @include ms-RTL {
+    border-left-style: $style;
+  }
+}
+
+@mixin ms-border-right-width($width) {
+  @include ms-LTR {
+    border-right-width: $width;
+  }
+
+  @include ms-RTL {
+    border-left-width: $width;
+  }
+}
+
+// Floats.
+@mixin ms-clear($side) {
+  @if $side == left {
+    @include ms-LTR {
+      clear: $side;
+    }
+
+    @include ms-RTL {
+      clear: right;
+    }
+  } @else if $side == right {
+    @include ms-LTR {
+      clear: $side;
+    }
+
+    @include ms-RTL {
+      clear: left;
+    }
+  } @else {
+      clear: $side;
+  }
+}
+
+@mixin ms-float($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      float: left;
+    }
+
+    @include ms-RTL {
+      float: right;
+    }
+  } @else {
+    @include ms-LTR {
+      float: right;
+    }
+
+    @include ms-RTL {
+      float: left;
+    }
+  }
+}
+
+// Positioning.
+@mixin ms-left($distance) {
+  @include ms-LTR {
+    left: $distance;
+  }
+
+  @include ms-RTL {
+    right: $distance;
+  }
+}
+
+@mixin ms-right($distance) {
+  @include ms-LTR {
+    right: $distance;
+  }
+
+  @include ms-RTL {
+    left: $distance;
+  }
+}
+
+// Margins.
+@mixin ms-margin($top, $right, $bottom, $left) {
+  margin: $top $right $bottom $left;
+
+  @include ms-RTL {
+    margin: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-margin-left($distance) {
+  @include ms-LTR {
+    margin-left: $distance;
+  }
+
+  @include ms-RTL {
+    margin-right: $distance;
+  }
+}
+
+@mixin ms-margin-right($distance) {
+  @include ms-LTR {
+    margin-right: $distance;
+  }
+  @include ms-RTL {
+    margin-left: $distance;
+  }
+}
+
+// Padding.
+@mixin ms-padding($top, $right, $bottom, $left) {
+  padding: $top $right $bottom $left;
+
+  @include ms-RTL {
+    padding: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-padding-left($distance) {
+  @include ms-LTR {
+    padding-left: $distance;
+  }
+
+  @include ms-RTL {
+    padding-right: $distance;
+  }
+}
+
+@mixin ms-padding-right($distance) {
+  @include ms-LTR {
+    padding-right: $distance;
+  }
+
+  @include ms-RTL {
+    padding-left: $distance;
+  }
+}
+
+// Text-alignment.
+@mixin ms-text-align($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      text-align: left;
+    }
+
+    @include ms-RTL {
+      text-align: right;
+    }
+  } @else {
+    @include ms-LTR {
+      text-align: right;
+    }
+
+    @include ms-RTL {
+      text-align: left;
+    }
+  }
+}
+
+// Box-shadow.
+@mixin ms-box-shadow($left, $etc) {
+  @if $left != 0 {
+    @include ms-LTR {
+      box-shadow: $left $etc;
+    }
+
+    @include ms-RTL {
+      box-shadow: -$left $etc;
+    }
+  } @else {
+    box-shadow: 0 $etc;
+  }
+}
+
+// Transforms.
+@mixin ms-transform-scaleX($scaleX: 1) {
+  @include ms-LTR {
+    transform: scaleX($scaleX);
+  }
+
+  @include ms-RTL {
+    transform: scaleX(-$scaleX);
+  }
+}
+
+@mixin ms-transform-translateX($distance) {
+  @include ms-LTR {
+    transform: translateX($distance);
+  }
+
+  @include ms-RTL {
+    transform: translateX(-$distance);
+  }
+}
+
+@mixin ms-transform-rotate($degrees) {
+  @include ms-LTR {
+    transform: rotate($degrees);
+  }
+
+  @include ms-RTL {
+    transform: rotate(-$degrees);
+  }
+}
+
+// Transitions. Only supported when ONLY left/right are declared
+@mixin ms-transition-property($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      transition-property: left;
+    }
+
+    @include ms-RTL {
+      transition-property: right;
+    }
+  } @else {
+    @include ms-LTR {
+      transition-property: right;
+    }
+
+    @include ms-RTL {
+      transition-property: left;
+    }
+  }
+}

node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.MDL2.scss

@@ -0,0 +1,127 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+// Super Styles (LIMITED USE)
+@mixin ms-font-su {
+  font-size: $ms-font-size-su;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Extra-Large
+@mixin ms-font-xxl {
+  font-size: $ms-font-size-xxl;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Large Styles
+@mixin ms-font-xl-plus {
+  font-size: $ms-font-size-xl-plus;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Large Styles
+@mixin ms-font-xl {
+  font-size: $ms-font-size-xl;
+  font-weight: $ms-font-weight-light;
+}
+
+// Large Styles
+@mixin ms-font-l {
+  font-size: $ms-font-size-l;
+  font-weight: $ms-font-weight-semilight;
+}
+
+// Medium Plus Styles
+@mixin ms-font-m-plus {
+  font-size: $ms-font-size-m-plus;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Medium Styles
+@mixin ms-font-m {
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Small Plus Styles
+@mixin ms-font-s-plus {
+  font-size: $ms-font-size-s-plus;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Small Styles
+@mixin ms-font-s {
+  font-size: $ms-font-size-s;
+  font-weight: $ms-font-weight-regular;
+}
+
+// XS Styles
+@mixin ms-font-xs {
+  font-size: $ms-font-size-xs;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Micro Styles (LIMITED USE)
+@mixin ms-font-mi {
+  font-size: $ms-font-size-mi;
+  font-weight: $ms-font-weight-semibold;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+@mixin ms-fontWeight-light {
+  font-weight: $ms-font-weight-light;
+}
+
+@mixin ms-fontWeight-semilight {
+  font-weight: $ms-font-weight-semilight;
+}
+
+// Font sizes
+@mixin ms-fontSize-su {
+  font-size: $ms-font-size-su;
+}
+
+@mixin ms-fontSize-xxl {
+  font-size: $ms-font-size-xxl;
+}
+
+@mixin ms-fontSize-xlPlus {
+  font-size: $ms-font-size-xl-plus;
+}
+
+@mixin ms-fontSize-xl {
+  font-size: $ms-font-size-xl;
+}
+
+@mixin ms-fontSize-l {
+  font-size: $ms-font-size-l;
+}
+
+@mixin ms-fontSize-mPlus {
+  font-size: $ms-font-size-m-plus;
+}
+
+@mixin ms-fontSize-m {
+  font-size: $ms-font-size-m;
+}
+
+@mixin ms-fontSize-sPlus {
+  font-size: $ms-font-size-s-plus;
+}
+
+@mixin ms-fontSize-s {
+  font-size: $ms-font-size-s;
+}
+
+@mixin ms-fontSize-xs {
+  font-size: $ms-font-size-xs;
+}
+
+@mixin ms-fontSize-mi {
+  font-size: $ms-font-size-mi;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.scss

@@ -0,0 +1,123 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//== Font definitions.
+//
+
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+
+// Produce @font-face definitions for the web fonts.
+@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: "segoeui") {
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff")
+        format("woff");
+    font-weight: $ms-font-weight-light;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff")
+        format("woff");
+    font-weight: $ms-font-weight-semilight;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff")
+        format("woff");
+    font-weight: $ms-font-weight-regular;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff")
+        format("woff");
+    font-weight: $ms-font-weight-semibold;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff")
+        format("woff");
+    font-weight: $ms-font-weight-bold;
+    font-style: normal;
+  }
+}
+
+// Generate overrides to set font-family based on the lang attribute.
+@mixin ms-font-family-language-override($language-code, $font-family) {
+  *[lang^="#{$language-code}"] .ms-Fabric,
+  .ms-Fabric *[lang^="#{$language-code}"],
+  .ms-Fabric[lang^="#{$language-code}"] {
+    font-family: $font-family;
+  }
+}
+
+//== Font weight.
+//
+
+@mixin ms-fontWeight-regular {
+  font-weight: $ms-font-weight-regular;
+}
+@mixin ms-fontWeight-semibold {
+  font-weight: $ms-font-weight-semibold;
+}
+@mixin ms-fontWeight-bold {
+  font-weight: $ms-font-weight-bold;
+}
+
+//== Font size.
+//
+
+@mixin ms-fontSize-68 {
+  font-size: $ms-font-size-68;
+}
+@mixin ms-fontSize-42 {
+  font-size: $ms-font-size-42;
+}
+@mixin ms-fontSize-32 {
+  font-size: $ms-font-size-32;
+}
+@mixin ms-fontSize-28 {
+  font-size: $ms-font-size-28;
+}
+@mixin ms-fontSize-24 {
+  font-size: $ms-font-size-24;
+}
+@mixin ms-fontSize-20 {
+  font-size: $ms-font-size-20;
+}
+@mixin ms-fontSize-18 {
+  font-size: $ms-font-size-18;
+}
+@mixin ms-fontSize-16 {
+  font-size: $ms-font-size-16;
+}
+@mixin ms-fontSize-14 {
+  font-size: $ms-font-size-14;
+}
+@mixin ms-fontSize-12 {
+  font-size: $ms-font-size-12;
+}
+@mixin ms-fontSize-10 {
+  font-size: $ms-font-size-10;
+}
+
+// Deprecated MDL2 font mixins.
+@import "./Font.Mixins.MDL2";

node_modules/@fluentui/react/dist/sass/mixins/_General.Mixins.scss

@@ -0,0 +1,222 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Vendor-prefixed mixins
+
+// Border radius.
+@mixin ms-border-radius($radius: 5px) {
+  border-radius: $radius;
+  background-clip: padding-box;
+}
+
+// Drop shadow.
+@mixin ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4) {
+  @include ms-box-shadow($x-offset, $y-offset $blur $spread rgba(0, 0, 0, $alpha));
+}
+
+// Background gradient.
+@mixin ms-background-gradient($origin: left, $start: #000, $start-location: 0%, $stop: #FFF, $stop-location: 100%) {
+
+  // To maintain compatibility with the old arguments, reverse
+  // the $origin direction and set it as $destination.
+  $destination: null;
+  @if $origin == top {
+    $destination: bottom;
+  }
+  @if $origin == right {
+    $destination: left;
+  }
+  @if $origin == bottom {
+    $destination: top;
+  }
+  @if $origin == left {
+    $destination: right;
+  }
+
+  background-color: $start;
+  background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
+}
+
+// Rotation.
+@mixin ms-rotate($degrees) {
+  @include ms-transform-rotate($degrees);
+}
+
+// Prevents user selection of text elements.
+@mixin ms-user-select ($val) {
+    -webkit-touch-callout:  $val;
+    -webkit-user-select:    $val;
+    -khtml-user-select:     $val;
+    -moz-user-select:       $val;
+    -ms-user-select:        $val;
+    user-select:            $val;
+}
+
+// Prevents the text within a block element from wrapping to second line.
+@mixin ms-no-wrap() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Flexbox
+@mixin ms-flex-box() {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+@mixin ms-alignItems($mode) {
+    -webkit-box-align: $mode;
+    -moz-box-align: $mode;
+    -ms-flex-align: $mode;
+    -webkit-align-items: $mode;
+    align-items: $mode;
+}
+
+// Base/wrapper component to set typography throughout the app.
+@mixin ms-Fabric {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  @include ms-inherit-font-family();
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-west-european;
+  font-size: $ms-font-size-m;
+}
+
+// Set the font-family to 'inherit' for elements where the browser
+// styles commonly conflict with the font-family that we want.
+@mixin ms-inherit-font-family() {
+  button,
+  input,
+  textarea {
+    font-family: inherit;
+  }
+}
+
+// Overrides the browser's default focus outline style.
+@mixin ms-focus-outline($inset: 0, $color: $ms-focus-border-color) {
+  // Only do this when it's a child of ms-Fabric in a focusVisible state.
+  .ms-Fabric.is-focusVisible &:focus {
+    outline: $ms-focus-border-width $ms-focus-border-style $color;
+    outline-offset: -$inset;
+  }
+}
+
+// Simulates a focus outline using an absolutely-positioned pseudo-element.
+@mixin ms-focus-border($inset: 0, $color: $ms-focus-border-color) {
+  // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.
+  outline: transparent;
+
+  // Requirement because pseudo-element is absolutely positioned.
+  position: relative;
+
+  // Clear the focus border in Firefox.
+  // Reference: http://stackoverflow.com/a/199319/1436671
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  // When the element that uses this mixin is in a :focus state, add a pseudo-element to
+  // create a border. Only do this when it's a child of ms-Fabric in a focusVisible state.
+  .ms-Fabric.is-focusVisible &:focus::after {
+    // Wrap the parent element with $padding.
+    content: '';
+    position: absolute;
+    top: $inset;
+    right: $inset;
+    bottom: $inset;
+    left: $inset;
+
+    // Add focus border of specified $color.
+    border: $ms-focus-border-width $ms-focus-border-style $color;
+
+    // Make the content not respond to mouse/touch events.
+    // Reference: https://css-tricks.com/almanac/properties/p/pointer-events/
+    pointer-events: none;
+  }
+}
+
+// The best box is a border box.
+@mixin ms-borderBox {
+  box-sizing: border-box;
+}
+
+// For setting the border base width
+@mixin ms-borderBase {
+  border: 1px solid;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+@mixin ms-clearfix {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: '';
+    line-height: 0;
+  }
+  &::after {
+    clear: both;
+  }
+}
+
+// Basic border-box, margin, and padding reset.
+@mixin ms-normalize {
+  @include ms-borderBox;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+}
+
+// Generate text alignment classes, such as .ms-textAlignLeft 
+// @param [variable list] $alignments
+@mixin ms-textAlign($alignments...) {
+  @warn 'The ms-textAlign mixin has been deprecated and will be removed in a future release of Fabric Core.';
+  @each $align in $alignments {
+    $alignStr: inspect($align);
+    .ms-textAlign#{to-upper-case(str-slice($alignStr, 1, 1)) + str-slice($alignStr, 2)} {
+      @include ms-text-align($align);
+    }
+  }
+}
+
+// To hide content while still making it readable by screen readers (Accessibility)
+@mixin ms-screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// To add truncation with ellipsis
+@mixin ms-textTruncate {
+	overflow: hidden; 
+	text-overflow: ellipsis; 
+	white-space: nowrap; 
+	word-wrap: normal; // Fix for IE 8/9 in case 'word-wrap: break-word' is set on parent nodes
+}
+
+// To disable text wrapping
+@mixin ms-noWrap {
+	white-space: nowrap; 
+}
+
+// Replace or remove a portion of a string.
+// Thanks to https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function ms-string-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + ms-string-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Grid.Mixins.scss

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+//== Grid container (same for all sizes)
+//
+@mixin ms-Grid {
+  @include ms-borderBox;
+  @include ms-clearfix;
+  padding: 0 8px;
+}
+
+//== Grid rows (pull first and last column out)
+//
+@mixin ms-Grid-row {
+  margin: 0 -8px;
+  @include ms-borderBox;
+  @include ms-clearfix;
+}
+
+//== Grid cells
+//
+@mixin ms-Grid-col {
+  @include ms-float(left);
+  position: relative;
+  min-height: 1px;
+  padding-left: 8px;
+  padding-right: 8px;
+  @include ms-borderBox;
+
+  // For nested grids (a grid inside a column), removing the padding
+  // so that the nested grid's columns go to the edge of the parent's.
+  .ms-Grid {
+    padding: 0;
+  }
+}

node_modules/@fluentui/react/dist/sass/mixins/_ScopedStyles.Mixins.scss

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+
+$ms-fabric-version-major: nth($ms-fabric-version, 1);
+$ms-fabric-version-minor: nth($ms-fabric-version, 2);
+$ms-fabric-version-patch: nth($ms-fabric-version, 3);
+
+// The CSS class for scoping styles to the current version of Fabric.
+$ms-fabric-version-suffix: '--v' + $ms-fabric-version-major + '-' + $ms-fabric-version-minor + '-' + $ms-fabric-version-patch;
+$ms-fabric-scope-class: '.ms-Fabric' + $ms-fabric-version-suffix;
+
+// A mixin to scope styles to the current version of Fabric.
+// Produces styles of the form .ms-Fabric-{version #} @content.
+@mixin scope-fabric {
+  #{$ms-fabric-scope-class} {
+    @content;
+  }
+}

node_modules/@fluentui/react/dist/sass/variables/_Animation.Variables.MDL2.scss

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These variables are deprecated and will be removed in a future release.
+
+// Easings
+$ms-animation-ease-1: cubic-bezier(0.1,0.9,0.2,1) !default;
+$ms-animation-ease-2: cubic-bezier(0.1,0.25,0.75,0.9) !default;
+
+// Durations
+$ms-animation-duration-1: 0.167s !default;
+$ms-animation-duration-2: 0.267s !default;
+$ms-animation-duration-3: 0.367s !default;
+$ms-animation-duration-4: 0.467s !default;

node_modules/@fluentui/react/dist/sass/variables/_Animation.Variables.scss

@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Timing curves.
+$ms-motion-timing-accelerate: cubic-bezier(0.9, 0.1, 1, 0.2);
+$ms-motion-timing-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
+$ms-motion-timing-linear: cubic-bezier(0, 0, 1, 1);
+$ms-motion-timing-standard: cubic-bezier(0.8, 0, 0.2, 1);
+
+// Durations.
+$ms-motion-duration-1: 100ms;
+$ms-motion-duration-2: 200ms;
+$ms-motion-duration-3: 300ms;
+$ms-motion-duration-4: 400ms;
+
+// Deprecated MDL2 animation variables.
+@import "./Animation.Variables.MDL2";

node_modules/@fluentui/react/dist/sass/variables/_BrandIcon.Variables.scss

@@ -0,0 +1,12 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Image paths
+$ms-brand-icon-product-images-path:   'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png';
+$ms-brand-icon-document-images-path:  'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent';
+
+// Names
+$ms-brand-icon-product-icons:  access excel infopath office onedrive onenote outlook powerpoint project sharepoint teams visio word;
+$ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt odp ods odt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip;
+
+// Sizes
+$ms-brand-icon-sizes: 16 48 96;

node_modules/@fluentui/react/dist/sass/variables/_Color.Variables.MDL2.scss

@@ -0,0 +1,77 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These variables are deprecated and will be removed in a future release.
+
+// Theme
+$ms-color-themeDarker: $ms-color-communicationShade30 !default;
+$ms-color-themeDark: $ms-color-communicationShade20 !default;
+$ms-color-themeDarkAlt: $ms-color-communicationShade10 !default;
+$ms-color-themePrimary: $ms-color-communicationPrimary !default;
+$ms-color-themeSecondary: $ms-color-communicationTint10 !default;
+$ms-color-themeTertiary: #71afe5 !default;
+$ms-color-themeLight: $ms-color-communicationTint20 !default;
+$ms-color-themeLighter: $ms-color-communicationTint30 !default;
+$ms-color-themeLighterAlt: $ms-color-communicationTint40 !default;
+
+// Neutral
+// The original colors have been overridden by the new palette, with warmer grays.
+$ms-color-black: #000000 !default;
+$ms-color-neutralDark: $ms-color-gray190 !default;
+$ms-color-neutralPrimary: $ms-color-gray160 !default;
+$ms-color-neutralPrimaryAlt: $ms-color-gray150 !default;
+$ms-color-neutralSecondary: $ms-color-gray130 !default;
+$ms-color-neutralSecondaryAlt: $ms-color-gray120 !default;
+$ms-color-neutralTertiary: $ms-color-gray90 !default;
+$ms-color-neutralTertiaryAlt: $ms-color-gray60 !default;
+$ms-color-neutralQuaternary: $ms-color-gray50 !default;
+$ms-color-neutralQuaternaryAlt: $ms-color-gray40 !default;
+$ms-color-neutralLight: $ms-color-gray30 !default;
+$ms-color-neutralLighter: $ms-color-gray20 !default;
+$ms-color-neutralLighterAlt: $ms-color-gray10 !default;
+$ms-color-white: #ffffff !default;
+
+// Accent
+// Where possible, these colors have been mapped to the new palette.
+$ms-color-yellow:        #ffb900 !default;
+$ms-color-yellowLight:   #fff100 !default;
+$ms-color-orange:        #d83b01 !default;
+$ms-color-orangeLight:   #ea4300 !default;
+$ms-color-orangeLighter: #ff8c00 !default;
+$ms-color-redDark:       #a80000 !default;
+$ms-color-red:           #e81123 !default;
+$ms-color-magentaDark:   #5c005c !default;
+$ms-color-magenta:       #b4009e !default;
+$ms-color-magentaLight:  $ms-color-sharedMagentaPink10 !default;
+$ms-color-purpleDark:    #32145a !default;
+$ms-color-purple:        #5c2d91 !default;
+$ms-color-purpleLight:   #b4a0ff !default;
+$ms-color-blueDark:      #002050 !default;
+$ms-color-blueMid:       #00188f !default;
+$ms-color-blue:          #0078d4 !default;
+$ms-color-blueLight:     #00bcf2 !default;
+$ms-color-tealDark:      #004b50 !default;
+$ms-color-teal:          #008272 !default;
+$ms-color-tealLight:     #00b294 !default;
+$ms-color-greenDark:     #004b1c !default;
+$ms-color-green:         #107c10 !default;
+$ms-color-greenLight:    #bad80a !default;
+
+// Message
+$ms-color-info: $ms-color-neutralSecondaryAlt !default;
+$ms-color-infoBackground: $ms-color-neutralLighter !default;
+$ms-color-success: $ms-color-green !default;
+$ms-color-successBackground: #dff6dd !default;
+$ms-color-severeWarning: $ms-color-orange !default;
+$ms-color-severeWarningBackground: #fed9cc !default;
+$ms-color-alert: $ms-color-severeWarning !default; // Deprecated: Use $ms-color-severeWarning
+$ms-color-alertBackground: $ms-color-severeWarningBackground !default; // Deprecated: Use $ms-color-severeWarningBackground
+$ms-color-warning: $ms-color-neutralSecondaryAlt !default;
+$ms-color-warningBackground: #fff4ce !default;
+$ms-color-error: $ms-color-redDark !default;
+$ms-color-errorBackground: #fde7e9 !default;
+
+// High contrast
+$ms-color-contrastBlackDisabled: #00ff00 !default;
+$ms-color-contrastWhiteDisabled: #600000 !default;
+$ms-color-contrastBlackSelected: #1aebff !default;
+$ms-color-contrastWhiteSelected: #37006e !default;

node_modules/@fluentui/react/dist/sass/variables/_Color.Variables.scss

@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+$ms-color-communicationShade30: #004578 !default;
+$ms-color-communicationShade20: #005a9e !default;
+$ms-color-communicationShade10: #106ebe !default;
+$ms-color-communicationPrimary: #0078d4 !default;
+$ms-color-communicationTint10: #2b88d8 !default;
+$ms-color-communicationTint20: #c7e0f4 !default;
+$ms-color-communicationTint30: #deecf9 !default;
+$ms-color-communicationTint40: #eff6fc !default;
+
+// Neutrals
+$ms-color-black: #000000 !default;
+$ms-color-gray220: #11100f !default;
+$ms-color-gray210: #161514 !default;
+$ms-color-gray200: #1b1a19 !default;
+$ms-color-gray190: #201f1e !default;
+$ms-color-gray180: #252423 !default;
+$ms-color-gray170: #292827 !default;
+$ms-color-gray160: #323130 !default;
+$ms-color-gray150: #3b3a39 !default;
+$ms-color-gray140: #484644 !default;
+$ms-color-gray130: #605e5c !default;
+$ms-color-gray120: #797775 !default;
+$ms-color-gray110: #8a8886 !default;
+$ms-color-gray100: #979593 !default;
+$ms-color-gray90: #a19f9d !default;
+$ms-color-gray80: #b3b0ad !default;
+$ms-color-gray70: #bebbb8 !default;
+$ms-color-gray60: #c8c6c4 !default;
+$ms-color-gray50: #d2d0ce !default;
+$ms-color-gray40: #e1dfdd !default;
+$ms-color-gray30: #edebe9 !default;
+$ms-color-gray20: #f3f2f1 !default;
+$ms-color-gray10: #faf9f8 !default;
+$ms-color-white: #ffffff !default;
+
+// Shared
+$ms-color-sharedPinkRed10: #750b1c !default;
+$ms-color-sharedRed20: #a4262c !default;
+$ms-color-sharedRed10: #d13438 !default;
+$ms-color-sharedRedOrange20: #603d30 !default;
+$ms-color-sharedRedOrange10: #da3b01 !default;
+$ms-color-sharedOrange30: #8e562e !default;
+$ms-color-sharedOrange20: #ca5010 !default;
+$ms-color-sharedOrange10: #ffaa44 !default;
+$ms-color-sharedYellow10: #fce100 !default;
+$ms-color-sharedOrangeYellow20: #986f0b !default;
+$ms-color-sharedOrangeYellow10: #c19c00 !default;
+$ms-color-sharedYellowGreen10: #8cbd18 !default;
+$ms-color-sharedGreen20: #0b6a0b !default;
+$ms-color-sharedGreen10: #498205 !default;
+$ms-color-sharedGreenCyan10: #00ad56 !default;
+$ms-color-sharedCyan40: #005e50 !default;
+$ms-color-sharedCyan30: #005b70 !default;
+$ms-color-sharedCyan20: #038387 !default;
+$ms-color-sharedCyan10: #00b7c3 !default;
+$ms-color-sharedCyanBlue20: #004e8c !default;
+$ms-color-sharedCyanBlue10: #0078d4 !default;
+$ms-color-sharedBlue10: #4f6bed !default;
+$ms-color-sharedBlueMagenta40: #373277 !default;
+$ms-color-sharedBlueMagenta30: #5c2e91 !default;
+$ms-color-sharedBlueMagenta20: #8764b8 !default;
+$ms-color-sharedBlueMagenta10: #8378de !default;
+$ms-color-sharedMagenta20: #881798 !default;
+$ms-color-sharedMagenta10: #c239b3 !default;
+$ms-color-sharedMagentaPink20: #9b0062 !default;
+$ms-color-sharedMagentaPink10: #e3008c !default;
+$ms-color-sharedGray40: #393939 !default;
+$ms-color-sharedGray30: #7a7574 !default;
+$ms-color-sharedGray20: #69797e !default;
+$ms-color-sharedGray10: #a0aeb2 !default;
+
+// Deprecated MDL2 color variables.
+@import "./Color.Variables.MDL2";

node_modules/@fluentui/react/dist/sass/variables/_Depth.Variables.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+$ms-depth-shadow-0: 0 0 0 0 transparent !default;
+$ms-depth-shadow-4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108) !default;
+$ms-depth-shadow-8: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108) !default;
+$ms-depth-shadow-16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108) !default;
+$ms-depth-shadow-64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18) !default;

node_modules/@fluentui/react/dist/sass/variables/_Font.Variables.MDL2.scss

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These variables are deprecated and will be removed in a future release.
+
+// Weights
+$ms-font-weight-light:     100 !default;
+$ms-font-weight-semilight: 300 !default;
+
+// Sizes
+$ms-font-size-su:       42px !default;
+$ms-font-size-xxl:      28px !default;
+$ms-font-size-xl-plus:  24px !default;
+$ms-font-size-xl:       21px !default;
+$ms-font-size-l:        17px !default;
+$ms-font-size-m-plus:   15px !default;
+$ms-font-size-m:        14px !default;
+$ms-font-size-s-plus:   13px !default;
+$ms-font-size-s:        12px !default;
+$ms-font-size-xs:       11px !default;
+$ms-font-size-mi:       10px !default;

node_modules/@fluentui/react/dist/sass/variables/_Font.Variables.scss

@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Font directory and paths
+$ms-font-cdn-path: 'https://static2.sharepointonline.com/files/fabric/assets/fonts' !default;
+
+// Fallback fonts, if specified system or web fonts are unavailable.
+$ms-font-family-fallbacks: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
+
+// Language-specific font stacks.
+$ms-font-family-arabic:              'Segoe UI Web (Arabic)', $ms-font-family-fallbacks !default;
+$ms-font-family-chinese-simplified:  'Microsoft Yahei UI', Verdana, Simsun, $ms-font-family-fallbacks !default;
+$ms-font-family-chinese-traditional: 'Microsoft Jhenghei UI', Pmingliu, $ms-font-family-fallbacks !default;
+$ms-font-family-cyrillic:            'Segoe UI Web (Cyrillic)', $ms-font-family-fallbacks !default;
+$ms-font-family-east-european:       'Segoe UI Web (East European)', $ms-font-family-fallbacks !default;
+$ms-font-family-greek:               'Segoe UI Web (Greek)', $ms-font-family-fallbacks !default;
+$ms-font-family-hebrew:              'Segoe UI Web (Hebrew)', $ms-font-family-fallbacks !default;
+$ms-font-family-hindi:               'Nirmala UI', $ms-font-family-fallbacks !default;
+$ms-font-family-japanese:            'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-family-fallbacks !default;
+$ms-font-family-korean:              'Malgun Gothic', Gulim, $ms-font-family-fallbacks !default;
+$ms-font-family-lao:                 'Leelawadee UI Web', 'Lao UI', DokChampa, $ms-font-family-fallbacks !default;
+$ms-font-family-selawik:             'Selawik Web', $ms-font-family-fallbacks !default;
+$ms-font-family-thai:                'Leelawadee UI Web', 'Kmer UI', $ms-font-family-fallbacks !default;
+$ms-font-family-vietnamese:          'Segoe UI Web (Vietnamese)', $ms-font-family-fallbacks !default;
+$ms-font-family-west-european:       'Segoe UI Web (West European)', $ms-font-family-fallbacks !default;
+
+// Weights.
+$ms-font-weight-regular: 400 !default;
+$ms-font-weight-semibold: 600 !default;
+$ms-font-weight-bold: 700 !default;
+
+// Sizes.
+$ms-font-size-68: 68px !default;
+$ms-font-size-42: 42px !default;
+$ms-font-size-32: 32px !default;
+$ms-font-size-28: 28px !default;
+$ms-font-size-24: 24px !default;
+$ms-font-size-20: 20px !default;
+$ms-font-size-18: 18px !default;
+$ms-font-size-16: 16px !default;
+$ms-font-size-14: 14px !default;
+$ms-font-size-12: 12px !default;
+$ms-font-size-10: 10px !default;
+
+// Deprecated MDL2 font variables.
+@import "./Font.Variables.MDL2";

node_modules/@fluentui/react/dist/sass/variables/_General.Variables.scss

@@ -0,0 +1,6 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Default focus border style.
+$ms-focus-border-width: 1px;
+$ms-focus-border-color: $ms-color-neutralSecondary;
+$ms-focus-border-style: solid;

node_modules/@fluentui/react/dist/sass/variables/_Responsive.Variables.scss

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Minimum widths for each breakpoint.
+$ms-screen-min-sm: 320px !default;
+$ms-screen-min-md: 480px !default;
+$ms-screen-min-lg: 640px !default;
+$ms-screen-min-xl: 1024px !default;
+$ms-screen-min-xxl: 1366px !default;
+$ms-screen-min-xxxl: 1920px !default;
+
+// Maximum widths for each breakpoint. These are set to values like 479.99999px to prevent an issue where a browser's
+// width may not be a whole pixel value, creating the potential for multiple media queries to apply simultaneously.
+// See: http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem
+$ms-screen-max-sm: ($ms-screen-min-md - 0.00001);
+$ms-screen-max-md: ($ms-screen-min-lg - 0.00001);
+$ms-screen-max-lg: ($ms-screen-min-xl - 0.00001);
+$ms-screen-max-xl: ($ms-screen-min-xxl - 0.00001);
+$ms-screen-max-xxl: ($ms-screen-min-xxxl - 0.00001);

node_modules/@fluentui/react/dist/sass/variables/_ZIndex.Variables.scss

@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Large ranges
+$ms-zIndex-0: 0 !default;
+$ms-zIndex-1: 100 !default;
+$ms-zIndex-2: 200 !default;
+$ms-zIndex-3: 300 !default;
+$ms-zIndex-4: 400 !default;
+$ms-zIndex-5: 500 !default;
+
+// Small ranges
+$ms-zIndex-back:   0 !default;
+$ms-zIndex-middle: 5 !default;
+$ms-zIndex-front:  10 !default;