[Emotion] Convert EuiFormLabel and EuiFormLegend

packages/eui/src/components/form/form_fieldset/_form_legend.scss

@@ -1,6 +1,4 @@
 .euiFormLegend {
-  @include euiFormLabel;
-
   &:not(.euiFormLegend-isHidden) {
     margin-bottom: $euiSizeS;
 

packages/eui/src/components/form/form_fieldset/form_legend.styles.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { euiFormLabel } from '../form_label/form_label.styles';
+
+export const euiFormLegendStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    euiFormLegend: css`
+      ${euiFormLabel(euiThemeContext)}
+    `,
+  };
+};

packages/eui/src/components/form/form_fieldset/form_legend.tsx

@@ -7,10 +7,14 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
-import { CommonProps } from '../../common';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { CommonProps } from '../../common';
 import { EuiScreenReaderOnly } from '../../accessibility';
 
+import { euiFormLegendStyles } from './form_legend.styles';
+
 export type EuiFormLegendProps = HTMLAttributes<HTMLLegendElement> &
   CommonProps & {
     /**
@@ -32,6 +36,10 @@ export const EuiFormLegend: FunctionComponent<EuiFormLegendProps> = ({
   ...rest
 }) => {
   const isLegendHidden = display === 'hidden';
+
+  const styles = useEuiMemoizedStyles(euiFormLegendStyles);
+  const cssStyles = [styles.euiFormLegend];
+
   const classes = classNames(
     'euiFormLegend',
     {
@@ -42,7 +50,7 @@ export const EuiFormLegend: FunctionComponent<EuiFormLegendProps> = ({
   );
 
   return (
-    <legend className={classes} {...rest}>
+    <legend css={cssStyles} className={classes} {...rest}>
       {isLegendHidden ? (
         <EuiScreenReaderOnly>
           <span>{children}</span>

packages/eui/src/components/form/form_label/_form_label.scss

@@ -3,7 +3,6 @@
  * 2. Disabled state overrides pointer.
  */
 .euiFormLabel {
-  @include euiFormLabel;
   display: inline-block;
   transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
 

packages/eui/src/components/form/form_label/form_label.styles.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { serializeStyles, type CSSObject } from '@emotion/serialize';
+
+import { UseEuiTheme } from '../../../services';
+import { euiTextBreakWord } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+
+export const euiFormLabel = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  const { fontWeight: _, ..._titleStyles } = euiTitle(euiThemeContext, 'xxxs');
+  // Since we're not returning a css`` string (to avoid generating an extra Emotion
+  // className), we need to manually serialize the style object into a string
+  const titleStyles = serializeStyles([_titleStyles as CSSObject]).styles;
+
+  return `
+    ${titleStyles}
+    font-weight: ${euiTheme.font.weight.semiBold};
+    ${euiTextBreakWord()}
+  `;
+};
+
+export const euiFormLabelStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    euiFormLabel: css`
+      ${euiFormLabel(euiThemeContext)}
+    `,
+  };
+};

packages/eui/src/components/form/form_label/form_label.tsx

@@ -12,8 +12,12 @@ import React, {
   HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
+import { euiFormLabelStyles } from './form_label.styles';
+
 interface EuiFormLabelCommonProps {
   isFocused?: boolean;
   isInvalid?: boolean;
@@ -54,6 +58,9 @@ export const EuiFormLabel: FunctionComponent<EuiFormLabelProps> = ({
   className,
   ...rest
 }: EuiFormLabelProps) => {
+  const styles = useEuiMemoizedStyles(euiFormLabelStyles);
+  const cssStyles = [styles.euiFormLabel];
+
   const classes = classNames('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,
@@ -63,6 +70,7 @@ export const EuiFormLabel: FunctionComponent<EuiFormLabelProps> = ({
   if (type === 'legend') {
     return (
       <legend
+        css={cssStyles}
         className={classes}
         {...(rest as HTMLAttributes<HTMLLegendElement>)}
       >
@@ -72,6 +80,7 @@ export const EuiFormLabel: FunctionComponent<EuiFormLabelProps> = ({
   } else {
     return (
       <label
+        css={cssStyles}
         className={classes}
         {...(rest as LabelHTMLAttributes<HTMLLabelElement>)}
       >

packages/eui/src/global_styling/mixins/_form.scss

@@ -1,11 +1,3 @@
-// Labels
-@mixin euiFormLabel {
-  @include euiFontSizeXS;
-  @include euiTextBreakWord;
-  color: $euiTitleColor;
-  font-weight: $euiFontWeightSemiBold;
-}
-
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
   $iconSize: $euiSize;
   $iconPadding: $euiFormControlPadding;