Add Fluent V9 theme for Fabric (#1821)

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -18,7 +18,7 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import DocumentsTab from "Explorer/Tabs/DocumentsTab";
-import { dataExplorerLightTheme } from "Explorer/Theme/ThemeUtil";
+import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
@@ -1480,9 +1480,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
     };
   }
   // ***************** Mongo ***************************
-
+  
   return (
-    <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
+    <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
       <div
         className="tab-pane active"
         /* data-bind="

src/Explorer/Theme/ThemeUtil.ts

@@ -1,7 +1,9 @@
 import { BrandVariants, Theme, createLightTheme } from "@fluentui/react-components";
+import { Platform } from "ConfigContext";
+import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
 
 // These are the theme colors for Fluent UI 9 React components
-const cosmosdb: BrandVariants = {
+const appThemePortalBrandRamp: BrandVariants = {
   10: "#020305",
   20: "#111723",
   30: "#16263D",
@@ -20,6 +22,10 @@ const cosmosdb: BrandVariants = {
   160: "#CDD8EF",
 };
 
-export const dataExplorerLightTheme: Theme = {
+export function getPlatformTheme (platform: Platform) : Theme {
-  ...createLightTheme(cosmosdb),
+  if (platform === Platform.Fabric) {
-};
+    return createLightTheme(appThemeFabricTealBrandRamp);
+  } else {
+    return createLightTheme(appThemePortalBrandRamp);
+  }
+}

src/Explorer/Tree2/ResourceTree.tsx

@@ -5,8 +5,9 @@ import {
   TreeOpenChangeData,
   TreeOpenChangeEvent,
 } from "@fluentui/react-components";
+import { configContext } from "ConfigContext";
 import { TreeNode2, TreeNode2Component } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
-import { dataExplorerLightTheme } from "Explorer/Theme/ThemeUtil";
+import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useDatabaseTreeNodes } from "Explorer/Tree2/useDatabaseTreeNodes";
 import * as React from "react";
 import shallow from "zustand/shallow";
@@ -88,7 +89,7 @@ export const ResourceTree2: React.FC<ResourceTreeProps> = ({ container }: Resour
 
   return (
     <>
-      <FluentProvider theme={dataExplorerLightTheme} style={{ overflow: "hidden" }}>
+      <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ overflow: "hidden" }}>
         <Tree
           aria-label="CosmosDB resources"
           openItems={openItems}

src/Platform/Fabric/FabricTheme.tsx

@@ -1,4 +1,5 @@
 import { Theme, createTheme } from "@fluentui/react";
+import { BrandVariants, createLightTheme } from "@fluentui/react-components";
 
 export const appThemeFabric: Theme = createTheme({
   palette: {
@@ -206,3 +207,24 @@ export const appThemeFabric: Theme = createTheme({
     greenLight: "#13a10e",
   },
 });
+
+export const appThemeFabricTealBrandRamp: BrandVariants = {
+  10: '#001919',
+  20: '#012826',
+  30: '#01322E',
+  40: '#033f38',
+  50: '#054d43',
+  60: '#0a5c50',
+  70: '#0c695a',
+  80: '#117865',
+  90: '#1f937e',
+  100: '#2aaC94',
+  110: '#3abb9f',
+  120: '#52c7aa',
+  130: '#78d3b9',
+  140: '#9ee0cb',
+  150: '#c0ecdd',
+  160: '#e3f7ef',
+};
+
+export const appThemeFabricV9 = createLightTheme(appThemeFabricTealBrandRamp);