From 0cd9f55909ad2440b93c5655413e362fa225d675 Mon Sep 17 00:00:00 2001
From: Vsevolod Kukol <sevoku@microsoft.com>
Date: Fri, 26 Apr 2024 14:21:07 +0200
Subject: [PATCH] Add Fluent V9 theme for Fabric (#1821)

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    |  6 ++---
 src/Explorer/Theme/ThemeUtil.ts               | 14 ++++++++----
 src/Explorer/Tree2/ResourceTree.tsx           |  5 +++--
 src/Platform/Fabric/FabricTheme.tsx           | 22 +++++++++++++++++++
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index bf7afaa7b..2bd91001b 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/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="
diff --git a/src/Explorer/Theme/ThemeUtil.ts b/src/Explorer/Theme/ThemeUtil.ts
index 32b11a0f2..b0d3d763b 100644
--- a/src/Explorer/Theme/ThemeUtil.ts
+++ b/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 = {
-  ...createLightTheme(cosmosdb),
-};
+export function getPlatformTheme (platform: Platform) : Theme {
+  if (platform === Platform.Fabric) {
+    return createLightTheme(appThemeFabricTealBrandRamp);
+  } else {
+    return createLightTheme(appThemePortalBrandRamp);
+  }
+}
diff --git a/src/Explorer/Tree2/ResourceTree.tsx b/src/Explorer/Tree2/ResourceTree.tsx
index 71b7973d8..45e3ba5d4 100644
--- a/src/Explorer/Tree2/ResourceTree.tsx
+++ b/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}
diff --git a/src/Platform/Fabric/FabricTheme.tsx b/src/Platform/Fabric/FabricTheme.tsx
index 5288d91c4..18d84a127 100644
--- a/src/Platform/Fabric/FabricTheme.tsx
+++ b/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);
\ No newline at end of file