Add Fabric specific styles and Fluent theme

documentDBFabric.less contains all styles for Fabric.
We use React.lazy to import them conditionally at
runtime preventing webpack from preprocessing
them into main.css.

less/Common/Constants.less

@@ -10,6 +10,7 @@
 @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
 @SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
 @GrayScale: "grayscale()";
+@NoColor: "brightness(0) saturate(100%)";
 
 @xSmallFontSize: 4px;
 @smallFontSize: 8px;
@@ -147,14 +148,39 @@
 // CommandBar
 @CommandBarButtonHeight: 40px;
 
+/**********************************************************************************
+                              Portal Consts
+/**********************************************************************************/
+
+@PortalAccentMediumHigh: #0058ad;
+@PortalAccentMedium: #004e87;
+@PortalAccentLight: #eef7ff;
+@PortalAccentAccentExtra: #ddf0ff;
+
+/**********************************************************************************
+                              Fabric Consts
+/**********************************************************************************/
+
+@FabricBoxBorderRadius: 8px;
+@FabricBoxBorderShadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+@FabricBoxMargin: 8px;
+
+@FabricAccentMediumHigh: #0c695a;
+@FabricAccentMedium: #117865;
+@FabricAccentLight: #f5f5f5;
+@FabricAccentExtra: #ebebeb;
+
+@FabricButtonBorderRadius: 4px;
+
+
 /**********************************************************************************
                               Common Flex Property
 /**********************************************************************************/
 
 .flex-display(@display: flex) {
-  display: ~"-webkit-@{display}";
-  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-  display: ~"-ms-@{display}"; // IE11
+  display:~"-webkit-@{display}";
+  display:~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  display:~"-ms-@{display}"; // IE11
   display: @display;
 }
 
@@ -168,13 +194,15 @@
                                  High contrast mode active
 **************************************************************************************/
 
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
+
   .selectedRadio,
   .selectedRadio:hover,
   .selectedRadio:active,
   .selectedRadio.dirty,
-  .tab [type="radio"]:checked ~ label,
-  .tab [type="radio"]:checked ~ label:hover {
+  .tab [type="radio"]:checked~label,
+  .tab [type="radio"]:checked~label:hover {
     -ms-high-contrast-adjust: none;
     -webkit-text-fill-color: HighlightText;
     color: HighlightText;
@@ -183,6 +211,7 @@
   }
 
   .queryMetricsSummaryTuple {
+
     th,
     td {
       &:nth-child(2) {
@@ -302,4 +331,4 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
-}
+}

less/documentDBFabric.less

@@ -0,0 +1,144 @@
+@import "./Common/Constants";
+
+body {
+  background-color: #f5f5f5;
+}
+
+#divExplorer {
+  background-color: #f5f5f5;
+}
+
+.resourceTreeAndTabs {
+  border-radius: @FabricBoxBorderRadius;
+  box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
+  margin-top: 4px;
+  background-color: #ffffff;
+}
+
+.tabsManagerContainer {
+  background-color: #fafafa
+}
+
+.nav-tabs-margin {
+  padding-top: 8px;
+  background-color: #fafafa
+}
+
+.commandBarContainer {
+  background-color: #ffffff;
+  border-bottom: none;
+  border-radius: @FabricBoxBorderRadius;
+  box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
+  padding-top: 2px;
+}
+
+.dividerContainer {
+  padding: @SmallSpace 0px @SmallSpace 0px;
+  .flex-display();
+
+  span {
+    border-left: @ButtonBorderWidth solid @BaseMedium;
+    margin: 0 10px 0 10px;
+  }
+}
+
+.nav-tabs>li.active>.tabNavContentContainer,
+.nav-tabs>li.active>.tabNavContentContainer:focus,
+.nav-tabs>li.active>.tabNavContentContainer:hover {
+  color: #555;
+  cursor: default;
+  background-color: @BaseLight;
+  border-color: @BaseMedium;
+  border-bottom-color: @BaseLight;
+  border-style: solid;
+  border-width: 1px;
+  height: @ActiveTabHeight;
+  width: @ActiveTabWidth;
+}
+
+
+.resourceTree {
+  padding: 12px;
+}
+
+.accordion {
+  .accordionItemContainer {
+    .accordionItemHeader {
+      border-radius: 4px;
+    }
+  }
+}
+
+.treeComponent {
+  .nodeItem {
+    &:focus {
+      outline: 2px @FabricAccentMedium;
+    }
+
+    .treeNodeHeader {
+      padding: 5px 5px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: @FabricAccentLight;
+
+        .treeMenuEllipsis {
+          opacity: 1;
+        }
+      }
+
+      &.showingMenu {
+        background-color: #eee;
+      }
+    }
+
+    .selected {
+      &>.treeNodeHeader {
+        background-color: @FabricAccentExtra;
+      }
+    }
+  }
+}
+
+
+.dataExplorerErrorConsoleContainer {
+  border-radius: @FabricBoxBorderRadius;
+  box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
+  width: auto;
+  align-self: auto;
+}
+
+
+
+.filterbtnstyle {
+  background: #fff;
+  color: #000;
+  border: solid 1px #d1d1d1;
+  border-radius: 4px;
+}
+
+.filterbtnstyle:hover {
+  background: @FabricAccentLight;
+  color: #000;
+  border: solid 1px #d1d1d1;
+}
+
+.filterbtnstyle:active {
+  background: @FabricAccentLight;
+  color: #000;
+  border: solid 1px #d1d1d1;
+}
+
+.filterbtnstyle:focus {
+  background: #fff;
+  color: #000;
+  border: solid 1px #d1d1d1;
+}
+
+
+.gridRowSelected .tabdocumentsGridElement:hover {
+  background-color: @FabricAccentLight !important;
+}

src/Common/StyleConstants.ts

@@ -1,2 +1,17 @@
+import { Platform, configContext } from "../ConfigContext";
+
 export let StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
 
+export function updateStyles(): void {
+  if (configContext.platform == Platform.Fabric) {
+    StyleConstants.AccentMediumHigh = StyleConstants.FabricAccentMediumHigh;
+    StyleConstants.AccentMedium = StyleConstants.FabricAccentMedium;
+    StyleConstants.AccentLight = StyleConstants.FabricAccentLight;
+    StyleConstants.AccentAccentExtra = StyleConstants.FabricAccentMediumHigh;
+  } else {
+    StyleConstants.AccentMediumHigh = StyleConstants.PortalAccentMediumHigh;
+    StyleConstants.AccentMedium = StyleConstants.PortalAccentMedium;
+    StyleConstants.AccentLight = StyleConstants.PortalAccentLight;
+    StyleConstants.AccentAccentExtra = StyleConstants.PortalAccentMediumHigh;
+  }
+}

src/Main.tsx

@@ -1,5 +1,5 @@
 // CSS Dependencies
-import { initializeIcons } from "@fluentui/react";
+import { initializeIcons, loadTheme } from "@fluentui/react";
 import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
 import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
 import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
@@ -26,6 +26,8 @@ import "../less/TableStyles/CustomizeColumns.less";
 import "../less/TableStyles/EntityEditor.less";
 import "../less/TableStyles/fulldatatables.less";
 import "../less/TableStyles/queryBuilder.less";
+import * as StyleConstants from "./Common/StyleConstants";
+import { configContext, Platform } from "ConfigContext";
 import "../less/documentDB.less";
 import "../less/forms.less";
 import "../less/infobox.less";
@@ -57,6 +59,7 @@ import "./Libs/jquery";
 import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
+import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 
 initializeIcons();
 
@@ -67,6 +70,10 @@ const App: React.FunctionComponent = () => {
   const shouldShowModal = useQueryCopilot((state) => state.showFeedbackModal);
 
   const config = useConfig();
+  if (config?.platform == Platform.Fabric) {
+    loadTheme(appThemeFabric);
+  }
+  StyleConstants.updateStyles();
   const explorer = useKnockoutExplorer(config?.platform);
 
   const toggleLeftPaneExpanded = () => {
@@ -84,6 +91,7 @@ const App: React.FunctionComponent = () => {
 
   return (
     <div className="flexContainer" aria-hidden="false">
+      <LoadFabricOverrides />
       <div id="divExplorer" className="flexContainer hideOverflows">
         <div id="freeTierTeachingBubble"> </div>
         {/* Main Command Bar - Start */}
@@ -135,6 +143,18 @@ const App: React.FunctionComponent = () => {
 
 ReactDOM.render(<App />, document.body);
 
+function LoadFabricOverrides(): JSX.Element {
+
+  if (configContext.platform == Platform.Fabric) {
+    const FabricStyle = React.lazy(() => import("./Platform/Fabric/FabricPlatform"));
+    return (
+      <React.Suspense fallback={<div></div>}><FabricStyle /></React.Suspense>
+    )
+  } else {
+    return (<></>);
+  }
+}
+
 function LoadingExplorer(): JSX.Element {
   return (
     <div className="splashLoaderContainer">

src/Platform/Fabric/FabricPlatform.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import "../../../less/documentDBFabric.less";
+export default function InitFabric() {
+  return (
+    <></>
+  );
+}

src/Platform/Fabric/FabricTheme.tsx

@@ -0,0 +1,208 @@
+import { Theme, createTheme } from "@fluentui/react";
+
+export const appThemeFabric: Theme = createTheme({
+    palette: {
+        /**
+         * Color code for themeDarker.
+         */
+        themeDarker: "#033f38",
+        /**
+         * Color code for themeDark.
+         */
+        themeDark: "#0a5c50",
+        /**
+         * Color code for themeDarkAlt.
+         */
+        themeDarkAlt: "#0c695a",
+        /**
+         * Color code for themePrimary.
+         */
+        themePrimary: "#117865",
+        /**
+         * Color code for themeSecondary.
+         */
+        themeSecondary: "#1f937e",
+        /**
+         * Color code for themeTertiary.
+         */
+        themeTertiary: "#52c7aa",
+        /**
+         * Color code for themeLight.
+         */
+        themeLight: "#9ee0cb",
+        /**
+         * Color code for themeLighter.
+         */
+        themeLighter: "#c0ecdd",
+        /**
+         * Color code for themeLighterAlt.
+         */
+        themeLighterAlt: "#e3f7ef",
+        /**
+         * Color code for the strongest color, which is black in the default theme.
+         * This is a very light color in inverted themes.
+         */
+        black: "#000000",
+        /**
+         * Color code for blackTranslucent40.
+         */
+        blackTranslucent40: "rgba(0, 0, 0, 0.4)",
+        /**
+         * Color code for neutralDark.
+         */
+        neutralDark: "#141414",
+        /**
+         * Color code for neutralPrimary.
+         */
+        neutralPrimary: "#242424",
+        /**
+         * Color code for neutralPrimaryAlt.
+         */
+        neutralPrimaryAlt: "#383838",
+        /**
+         * Color code for neutralSecondary.
+         */
+        neutralSecondary: "#5c5c5c",
+        /**
+         * Color code for neutralSecondaryAlt.
+         */
+        neutralSecondaryAlt: "#858585",
+        /**
+         * Color code for neutralTertiary.
+         */
+        neutralTertiary: "#9e9e9e",
+        /**
+         * Color code for neutralTertiaryAlt.
+         */
+        neutralTertiaryAlt: "#c7c7c7",
+        /**
+         * Color code for neutralQuaternary.
+         */
+        neutralQuaternary: "#d1d1d1",
+        /**
+         * Color code for neutralQuaternaryAlt.
+         */
+        neutralQuaternaryAlt: "#e0e0e0",
+        /**
+         * Color code for neutralLight.
+         */
+        neutralLight: "#ebebeb",
+        /**
+         * Color code for neutralLighter.
+         */
+        neutralLighter: "#f5f5f5",
+        /**
+         * Color code for neutralLighterAlt.
+         */
+        neutralLighterAlt: "#fafafa",
+        /**
+         * Color code for the accent.
+         */
+        accent: "#117865",
+        /**
+         * Color code for the softest color, which is white in the default theme. This is a very dark color in dark themes.
+         * This is the page background.
+         */
+        white: "#ffffff",
+        /**
+         * Color code for whiteTranslucent40
+         */
+        whiteTranslucent40: "rgba(255, 255, 255, 0.4)",
+        /**
+         * Color code for yellowDark.
+         */
+        yellowDark: "#d39300",
+        /**
+         * Color code for yellow.
+         */
+        yellow: "#fde300",
+        /**
+         * Color code for yellowLight.
+         */
+        yellowLight: "#fef7b2",
+        /**
+         * Color code for orange.
+         */
+        orange: "#f7630c",
+        /**
+         * Color code for orangeLight.
+         */
+        orangeLight: "#f98845",
+        /**
+         * Color code for orangeLighter.
+         */
+        orangeLighter: "#fdcfb4",
+        /**
+         * Color code for redDark.
+         */
+        redDark: "#750b1c",
+        /**
+         * Color code for red.
+         */
+        red: "#d13438",
+        /**
+         * Color code for magentaDark.
+         */
+        magentaDark: "#6b0043",
+        /**
+         * Color code for magenta.
+         */
+        magenta: "#bf0077",
+        /**
+         * Color code for magentaLight.
+         */
+        magentaLight: "#d957a8",
+        /**
+         * Color code for purpleDark.
+         */
+        purpleDark: "#401b6c",
+        /**
+         * Color code for purple.
+         */
+        purple: "#5c2e91",
+        /**
+         * Color code for purpleLight.
+         */
+        purpleLight: "#c6b1de",
+        /**
+         * Color code for blueDark.
+         */
+        blueDark: "#003966",
+        /**
+         * Color code for blueMid.
+         */
+        blueMid: "#004e8c",
+        /**
+         * Color code for blue.
+         */
+        blue: "#0078d4",
+        /**
+         * Color code for blueLight.
+         */
+        blueLight: "#3a96dd",
+        /**
+         * Color code for tealDark.
+         */
+        tealDark: "#006666",
+        /**
+         * Color code for teal.
+         */
+        teal: "#038387",
+        /**
+         * Color code for tealLight.
+         */
+        tealLight: "#00b7c3",
+        /**
+         * Color code for greenDark.
+         */
+        greenDark: "#0b6a0b",
+        /**
+         * Color code for green.
+         */
+        green: "#107c10",
+        /**
+         * Color code for greenLight.
+         */
+        greenLight: "#13a10e",
+    }
+});