Updates label and legend styles for Checkbox, Radio, CheckboxGroup, and RadioGroup

.changeset/smart-parrots-beam.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+---
+
+- Makes {Checkbox|Radio}Group `<legend>` bold and default font size
+- Makes Checkbox and Radio `<label>` default font weight

packages/react/src/FormControl/FormControl.tsx

@@ -172,17 +172,15 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
                 {slots.leadingVisual}
               </Box>
             )}
-            {!slots.label?.props.visuallyHidden || slots.caption ? (
-              <Box display="flex" flexDirection="column" sx={{'> *': {paddingLeft: 'var(--stack-gap-condensed)'}}}>
-                {slots.label}
-                {slots.caption}
-              </Box>
-            ) : (
-              <>
-                {slots.label}
-                {slots.caption}
-              </>
-            )}
+            <Box
+              sx={{
+                '> *': {paddingLeft: 'var(--stack-gap-condensed)'},
+                '> label': {fontWeight: 'var(--base-text-weight-normal)'},
+              }}
+            >
+              {slots.label}
+              {slots.caption}
+            </Box>
           </Box>
         ) : (
           <Box

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css

@@ -35,7 +35,8 @@
 
 .RadioGroupLabel {
   display: block;
-  font-size: var(--text-body-size-large);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
 
   &:where([data-label-disabled]) {
     color: var(--fgColor-muted);

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx

@@ -76,7 +76,8 @@ const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadi
       sx={{
         display: 'block',
         color: disabled ? 'fg.muted' : undefined,
-        fontSize: 2,
+        fontSize: 1,
+        fontWeight: 'bold',
         ...sx,
       }}
     >

packages/react/src/internal/components/InputLabel.tsx

@@ -54,7 +54,6 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
         display: 'block',
         color: disabled ? 'fg.muted' : 'fg.default',
         cursor: disabled ? 'not-allowed' : 'pointer',
-        alignSelf: 'flex-start',
         ...sx,
       }}
       {...props}