chore: Update icon sizes with new design intent

[snowystinger]

Closes

Updates from design. Testing for chromatic and checking breadth of changes. The intent of design was to have the icon match the line height of the text. This works perfectly with the widely available lh unit. I had to make a few small changes to Avatar to also support it, but overall it simplifies our code.

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1285

The question we'll need to answer, is this breaking, from a design point of view. It's not breaking any APIs since I'm not changing how fontRelative works. I did add to our existing API for Avatar, but that should be non-breaking. The question about breaking is, does anyone use fontRelative(20) already and will it be noticeable next to our components.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:Avatar

 Avatar {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) = 24
+}) | `${number}lh` = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

/@react-spectrum/s2:AvatarProps

 AvatarProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) = 24
+}) | `${number}lh` = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

---

[rspbot]

Agent Skills Changes

Modified (3)

• react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Avatar.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/4fcc6cdb7e96a4f9978aa3a387f4b1ee5be59c62/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/4fcc6cdb7e96a4f9978aa3a387f4b1ee5be59c62/