fix(designer-ui): Migrate ConnectorSummaryCard from LESS to Fluent UI v9 makeStyles for dark theme (#8674)

* Initial plan

* Fix dark theme connector title visibility by increasing CSS specificity

Co-authored-by: hartra344 <13208452+hartra344@users.noreply.github.com>

* fix(designer-ui): fix ConnectorSummaryCard dark theme in portal-rendered panels

Migrate theme-sensitive styles from LESS to Fluent UI v9 makeStyles with
design tokens. The previous LESS-based dark theme (.msla-theme-dark cascade)
broke when the card rendered inside overlay Drawer portals (e.g., MCP
connector selector), since portal content is outside the themed DOM tree.

Using tokens (colorNeutralBackground1, colorNeutralForeground1, etc.)
resolves this because FluentProvider context works through React portals.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: hartra344 <13208452+hartra344@users.noreply.github.com>
Co-authored-by: Carlos Castro <ccastrotrejo@microsoft.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: 4 people

libs/designer-ui/src/lib/connectorsummarycard/connectorsummarycard.less

@@ -1,6 +1,5 @@
 .msla-connector-summary-card {
   position: relative;
-  background-color: #fff;
   border-radius: 2px;
   border: none;
   outline: none;
@@ -22,11 +21,6 @@
   border: 2px solid #ffffff00;
   &:focus {
     outline: 0;
-    border: 2px solid rgba(96, 94, 92, 1);
-  }
-
-  &:active {
-    border: 2px solid rgba(0, 120, 212, 1);
   }
 }
 
@@ -96,20 +90,3 @@
   }
 }
 
-.msla-theme-dark {
-  .msla-connector-summary-card {
-    background: @ms-color-primaryBackground;
-
-    &:focus {
-      outline: 1px solid #fff;
-    }
-
-    &:hover {
-      background: @ms-color-primaryBackgroundHover;
-    }
-  }
-
-  .msla-connector-summary-title {
-    color: @ms-color-black;
-  }
-}

libs/designer-ui/src/lib/connectorsummarycard/connectorsummarycard.styles.ts

@@ -0,0 +1,40 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+
+export const useConnectorSummaryCardStyles = makeStyles({
+  card: {
+    position: 'relative',
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: '2px',
+    ...shorthands.border('2px', 'solid', 'transparent'),
+    outline: 'none',
+    boxShadow: '0px 0.3px 4px 0px rgba(0, 0, 0, 0.1), 0px 1.6px 4px 0px rgba(0, 0, 0, 0.14)',
+    cursor: 'pointer',
+    alignItems: 'center',
+    padding: '8px',
+    width: '100%',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground1,
+
+    '&:focus, &:hover': {
+      boxShadow: '0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13)',
+    },
+
+    '&:hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+    },
+
+    '&:focus': {
+      outline: '0',
+      ...shorthands.borderColor(tokens.colorNeutralStroke1),
+    },
+
+    '&:active': {
+      ...shorthands.borderColor(tokens.colorBrandStroke1),
+    },
+  },
+
+  title: {
+    color: tokens.colorNeutralForeground1,
+  },
+});

libs/designer-ui/src/lib/connectorsummarycard/index.tsx

@@ -8,6 +8,7 @@ import { OperationRuntimeBadges } from './operationRuntimeBadges';
 import { useCallback } from 'react';
 import { ChevronRight12Regular } from '@fluentui/react-icons';
 import { FavoriteButton } from '../panel';
+import { useConnectorSummaryCardStyles } from './connectorsummarycard.styles';
 
 export interface ConnectorSummaryCardProps {
   connector: Connector | OperationApi;
@@ -20,6 +21,7 @@ export interface ConnectorSummaryCardProps {
 export const ConnectorSummaryCard = (props: ConnectorSummaryCardProps) => {
   const { connector, onClick, isCard = true, displayRuntimeInfo, hideFavorites } = props;
   const { id } = connector;
+  const styles = useConnectorSummaryCardStyles();
 
   const connectorName = getDisplayNameFromConnector(connector);
   const description = getDescriptionFromConnector(connector);
@@ -37,7 +39,7 @@ export const ConnectorSummaryCard = (props: ConnectorSummaryCardProps) => {
     <>
       <div className="msla-connector-summary-header">
         {isCard ? <ConnectorImage /> : null}
-        <Text className="msla-connector-summary-title">{connectorName}</Text>
+        <Text className={mergeClasses('msla-connector-summary-title', styles.title)}>{connectorName}</Text>
         <InfoDot
           title={connectorName}
           description={description}
@@ -66,7 +68,7 @@ export const ConnectorSummaryCard = (props: ConnectorSummaryCardProps) => {
   if (isCard) {
     return (
       <div
-        className="msla-connector-summary-card"
+        className={mergeClasses('msla-connector-summary-card', styles.card)}
         onClick={handleClick}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {