Dark theme for Explorer (#2185)

* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -193,7 +193,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     <div className="throughputInputContainer throughputInputSpacing">
       <Stack horizontal>
         <span className="mandatoryStar">*&nbsp;</span>
-        <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+        <Text
+          aria-label="Throughput header"
+          variant="small"
+          style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+        >
           {getThroughputLabelText()}
         </Text>
         <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@@ -236,14 +240,17 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text style={{ marginTop: -2, fontSize: 12 }}>
+          <Text style={{ marginTop: -2, fontSize: 12, color: "var(--colorNeutralForeground1)" }}>
             Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
             of that value.
           </Text>
           <Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+                <Text
+                  variant="small"
+                  style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+                >
                   Minimum RU/s
                 </Text>
                 <InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@@ -260,6 +267,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
+                  color: "var(--colorNeutralForeground1)",
                 }}
               >
                 {Math.round(throughput / 10).toString()}
@@ -272,6 +280,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 fontSize: 12,
                 fontWeight: 400,
                 paddingBottom: 6,
+                color: "var(--colorNeutralForeground1)",
               }}
             >
               x 10 =
@@ -279,7 +288,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+                <Text
+                  variant="small"
+                  style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+                >
                   Maximum RU/s
                 </Text>
                 <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -290,7 +302,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 type="number"
                 styles={{
                   fieldGroup: { width: 100, height: 27, flexShrink: 0 },
-                  field: { fontSize: 14, fontWeight: 400 },
+                  field: { fontSize: 14, fontWeight: 400, color: "var(--colorNeutralForeground1)" },
                 }}
                 onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
                 step={AutoPilotUtils.autoPilotIncrementStep}
@@ -306,7 +318,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
           <CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
           <Stack className="throughputInputSpacing">
-            <Text variant="small" aria-label="ruDescription">
+            <Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
               Estimate your required RU/s with&nbsp;
               <Link
                 className="underlinedLink"
@@ -325,7 +337,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {!isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
             Estimate your required RU/s with&nbsp;
             <Link
               className="underlinedLink"
@@ -338,7 +350,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             .
           </Text>
           <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
+            <Text
+              variant="small"
+              style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+              aria-label="maxRUDescription"
+            >
               {isDatabase ? "Database" : getCollectionName()} Required RU/s
             </Text>
             <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>