OptionCategory: Use text.secondary for closed categories (#102925)

* OptionCategory: Design update

* Update

public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx

@@ -20,7 +20,9 @@ export function ElementEditPane({ element, editPane }: Props) {
   return (
     <div className={styles.wrapper}>
       <EditPaneHeader element={element} editPane={editPane} />
-      <ScrollContainer showScrollIndicators={true}>{categories.map((cat) => cat.render())}</ScrollContainer>
+      <ScrollContainer showScrollIndicators={true}>
+        <div className={styles.categories}>{categories.map((cat) => cat.render())}</div>
+      </ScrollContainer>
     </div>
   );
 }
@@ -33,5 +35,10 @@ function getStyles(theme: GrafanaTheme2) {
       flex: '1 1 0',
       height: '100%',
     }),
+    categories: css({
+      display: 'flex',
+      flexDirection: 'column',
+      borderBottom: `1px solid ${theme.colors.border.weak}`,
+    }),
   };
 }

public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx

@@ -107,7 +107,7 @@ export const OptionsPaneCategory = React.memo(
         {/* this just provides a better experience for mouse users */}
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div className={headerStyles} onClick={onToggle}>
-          <h6 id={`button-${id}`} className={styles.title}>
+          <h6 id={`button-${id}`} className={cx(styles.title, isExpanded && styles.titleExpanded)}>
             {renderTitle(isExpanded)}
           </h6>
 
@@ -149,6 +149,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     fontSize: '1rem',
     fontWeight: theme.typography.fontWeightMedium,
     margin: 0,
+    color: theme.colors.text.secondary,
+  }),
+  titleExpanded: css({
+    color: theme.colors.text.primary,
   }),
   header: css({
     display: 'flex',