Theme: Updates gf-form & form-field to better match new form styles (#23345)

* Theme: Updates old gf-form-styles

* Removed margin buttom

* updated

* updated

* This will take some time

* More style tweaks to both light and dark theme

* Minor change

* Tweaked table styles

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = `
                     className="css-payll4"
                   >
                     <li
-                      className="css-1aiaexb"
+                      className="css-1lu9djy"
                       onClick={[Function]}
                     >
                       <i

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

@@ -11,7 +11,7 @@ interface Props {
 export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) => {
   const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true);
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, isExpanded);
 
   return (
     <div className={styles.box}>
@@ -26,7 +26,7 @@ export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) =>
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, isExpanded: boolean) => {
   return {
     box: css`
       border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
@@ -41,6 +41,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       justify-content: space-between;
       align-items: center;
       padding: ${theme.spacing.sm} ${theme.spacing.md};
+      color: ${isExpanded ? theme.colors.text : theme.colors.formLabel};
       font-weight: ${theme.typography.weight.semibold};
 
       &:hover {

public/app/features/variables/pickers/PickerRenderer.tsx

@@ -19,7 +19,7 @@ export const PickerRenderer: FunctionComponent<Props> = props => {
     <div className="gf-form">
       {props.variable.hide === VariableHide.dontHide && (
         <label
-          className="gf-form-label template-variable"
+          className="gf-form-label gf-form-label--variable"
           aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemLabels(labelOrName)}
         >
           {labelOrName}