chore: Update icon sizes with new design intent

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -280,7 +280,7 @@ export const btnStyles = style<
     },
     '--iconWidth': {
       type: 'width',
-      value: fontRelative(20)
+      value: '1lh'
     },
     '--badgePosition': {
       type: 'width',
@@ -306,15 +306,6 @@ export const btnStyles = style<
   getAllowedOverrides()
 );
 
-// Matching icon sizes. TBD.
-const avatarSize: Record<NonNullable<ActionButtonStyleProps['size']>, number> = {
-  XS: 14,
-  S: 16,
-  M: 20,
-  L: 22,
-  XL: 26
-} as const;
-
 interface ActionButtonContextProps extends Partial<ActionButtonProps> {
   holdAffordance?: boolean;
 }
@@ -402,7 +393,7 @@ export const ActionButton = forwardRef(function ActionButton(
                 {
                   render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}),
                   styles: style({
-                    size: fontRelative(20),
+                    size: '1lh',
                     marginStart: '--iconMargin',
                     visibility: {
                       isProgressVisible: 'hidden'
@@ -413,7 +404,7 @@ export const ActionButton = forwardRef(function ActionButton(
               [
                 AvatarContext,
                 {
-                  size: avatarSize[size],
+                  size: '1lh',
                   styles: style({
                     marginStart: '--iconMargin',
                     gridArea: 'icon'

packages/@react-spectrum/s2/src/Avatar.tsx

@@ -38,7 +38,23 @@ export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {
    *
    * @default 24
    */
-  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {});
+  size?:
+    | 16
+    | 20
+    | 24
+    | 28
+    | 32
+    | 36
+    | 40
+    | 44
+    | 48
+    | 56
+    | 64
+    | 80
+    | 96
+    | 112
+    | (number & {})
+    | `${number}lh`;
   /** Whether the avatar is over a color background. */
   isOverBackground?: boolean;
 }
@@ -59,7 +75,9 @@ const imageStyles = style(
     outlineColor: '--s2-container-bg',
     outlineWidth: {
       default: 1,
-      isLarge: 2
+      isLarge: 2,
+      // if bigger than 64px, use 2px outline, otherwise use 1px outline
+      isLH: 'min(2px, max(1px, calc((((1lh / 64) - 1px) * 9999) + 1px)))'
     }
   },
   getAllowedOverrides({width: false})
@@ -90,8 +108,16 @@ export const Avatar = forwardRef(function Avatar(
   const domProps = filterDOMProps(otherProps);
 
   // In the docs build, we need to be able to simulate font scaling.
-  let remSize = isDocsEnv() ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
-  let isLarge = size >= 64;
+  let remSize;
+  let isLarge = false;
+  let isLH = false;
+  if (typeof size === 'string') {
+    remSize = size;
+    isLH = size.endsWith('lh');
+  } else {
+    remSize = isDocsEnv() ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
+    isLarge = size >= 64;
+  }
   return (
     <Image
       {...domProps}
@@ -104,7 +130,7 @@ export const Avatar = forwardRef(function Avatar(
         height: remSize
       }}
       UNSAFE_className={UNSAFE_className + ' ' + centerBaselineBefore}
-      styles={imageStyles({isOverBackground, isLarge}, props.styles)}
+      styles={imageStyles({isOverBackground, isLarge, isLH}, props.styles)}
       src={src}
     />
   );

packages/@react-spectrum/s2/src/Badge.tsx

@@ -15,8 +15,8 @@ import {centerBaseline} from './CenterBaseline';
 import {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
+import {lightDark, style} from '../style' with {type: 'macro'};
 import {TextContext as RACTextContext} from 'react-aria-components/Text';
 import React, {createContext, forwardRef, ReactNode} from 'react';
 import {SkeletonWrapper} from './Skeleton';
@@ -234,7 +234,7 @@ export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HT
           IconContext,
           {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            styles: style({size: '1lh', marginStart: '--iconMargin', flexShrink: 0})
           }
         ]
       ]}>

packages/@react-spectrum/s2/src/Button.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};
 import {
   ButtonRenderProps,
   Button as RACButton,
@@ -478,7 +478,7 @@ export const Button = forwardRef(function Button(
                 {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
                   styles: style({
-                    size: fontRelative(20),
+                    size: '1lh',
                     marginStart: '--iconMargin',
                     flexShrink: 0,
                     visibility: {
@@ -593,7 +593,7 @@ export const LinkButton = forwardRef(function LinkButton(
                 {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
                   styles: style({
-                    size: fontRelative(20),
+                    size: '1lh',
                     marginStart: '--iconMargin',
                     flexShrink: 0
                   })

packages/@react-spectrum/s2/src/DragPreview.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
+import {baseColor, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {controlFont} from './style-utils' with {type: 'macro'};
 import {DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
@@ -63,7 +63,7 @@ export let iconCenterWrapper = style({
 
 export let icon = style({
   display: 'block',
-  size: fontRelative(20),
+  size: '1lh',
   marginEnd: 'text-to-visual',
   '--iconPrimary': {
     type: 'fill',

packages/@react-spectrum/s2/src/Field.tsx

@@ -294,7 +294,7 @@ export const FieldGroup = forwardRef(function FieldGroup(
               IconContext,
               {
                 styles: style({
-                  size: fontRelative(20),
+                  size: '1lh',
                   '--iconPrimary': {type: 'fill', value: 'currentColor'}
                 })
               }
@@ -490,7 +490,7 @@ export function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {
               })
             }),
             styles: style({
-              size: fontRelative(20),
+              size: '1lh',
               marginStart: 'text-to-visual',
               marginEnd: fontRelative(-2),
               flexShrink: 0

packages/@react-spectrum/s2/src/ListView.tsx

@@ -12,15 +12,7 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {ActionMenuContext} from './ActionMenu';
-import {
-  baseColor,
-  color,
-  colorMix,
-  focusRing,
-  fontRelative,
-  space,
-  style
-} from '../style' with {type: 'macro'};
+import {baseColor, color, colorMix, focusRing, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import {CheckboxContext} from 'react-aria-components/Checkbox';
@@ -235,7 +227,7 @@ const listView = style<GridListRenderProps & {isQuiet?: boolean; isDropTarget?:
     type: 'width',
     value: {
       default: 'auto',
-      [hasTrailingIconRows]: fontRelative(20)
+      [hasTrailingIconRows]: '1lh'
     }
   }
 });

packages/@react-spectrum/s2/src/Menu.tsx

@@ -281,7 +281,7 @@ export let checkbox = style({
 
 export let icon = style({
   display: 'block',
-  size: fontRelative(20),
+  size: '1lh',
   // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes
   // reminder, size of WF is applied via font size
   marginEnd: 'text-to-visual',

packages/@react-spectrum/s2/src/NotificationBadge.tsx

@@ -93,7 +93,7 @@ const badge = style(
           isIndicatorOnly: 8
         },
         M: {
-          default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible
+          default: '1lh', // sort of arbitrary? tried to get as close to the figma designs as possible
           isIndicatorOnly: 8
         },
         L: {

packages/@react-spectrum/s2/src/SearchField.tsx

@@ -163,7 +163,7 @@ export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(
                       })
                     }),
                     styles: style({
-                      size: fontRelative(20),
+                      size: '1lh',
                       marginStart: '--iconMargin'
                     })
                   }

packages/@react-spectrum/s2/src/SideNav.tsx

@@ -12,7 +12,7 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {ActionMenuContext} from './ActionMenu';
-import {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {Button, ButtonContext} from 'react-aria-components/Button';
 import {centerBaseline} from './CenterBaseline';
 import {
@@ -543,7 +543,7 @@ const SideNavItemContentInner = props => {
               IconContext,
               {
                 render: centerBaseline({slot: 'icon', styles: treeIcon}),
-                styles: style({size: fontRelative(20), flexShrink: 0})
+                styles: style({size: '1lh', flexShrink: 0})
               }
             ],
             [ActionButtonGroupContext, {styles: treeActions, isDisabled, size: 'S'}],
@@ -697,7 +697,7 @@ export const SideNavItemLink = (props: SideNavItemLinkProps): ReactNode => {
             IconContext,
             {
               render: centerBaseline({slot: 'icon', styles: treeIcon}),
-              styles: style({size: fontRelative(20), flexShrink: 0})
+              styles: style({size: '1lh', flexShrink: 0})
             }
           ]
         ]}>

packages/@react-spectrum/s2/src/TagGroup.tsx

@@ -23,7 +23,7 @@ import {
   TagRenderProps
 } from 'react-aria-components/TagGroup';
 import {AvatarContext} from './Avatar';
-import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {CollectionBuilder} from 'react-aria/CollectionBuilder';
@@ -630,7 +630,7 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
                 {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
                   styles: style({
-                    size: fontRelative(20),
+                    size: '1lh',
                     marginStart: '--iconMargin',
                     flexShrink: 0
                   })
@@ -647,7 +647,7 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
                 ImageContext,
                 {
                   styles: style({
-                    size: fontRelative(20),
+                    size: '1lh',
                     flexShrink: 0,
                     order: 0,
                     aspectRatio: 'square',

packages/@react-spectrum/s2/src/ToggleButton.tsx

@@ -16,14 +16,14 @@ import {ContextValue, Provider, useSlottedContext} from 'react-aria-components/s
 import CornerTriangle from '../ui-icons/CornerTriangle';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
-import {fontRelative, space, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {
   ToggleButton as RACToggleButton,
   ToggleButtonProps as RACToggleButtonProps
 } from 'react-aria-components/ToggleButton';
 import {SkeletonContext} from './Skeleton';
+import {space, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils';
 import {Text, TextContext} from './Content';
 import {ToggleButtonGroupContext} from './ToggleButtonGroup';
@@ -126,7 +126,7 @@ export const ToggleButton = forwardRef(function ToggleButton(
             IconContext,
             {
               render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+              styles: style({size: '1lh', marginStart: '--iconMargin', flexShrink: 0})
             }
           ]
         ]}>

packages/@react-spectrum/s2/src/TreeView.tsx

@@ -12,14 +12,7 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {ActionMenuContext} from './ActionMenu';
-import {
-  baseColor,
-  color,
-  colorMix,
-  focusRing,
-  fontRelative,
-  style
-} from '../style' with {type: 'macro'};
+import {baseColor, color, colorMix, focusRing, style} from '../style' with {type: 'macro'};
 import {Button, ButtonContext} from 'react-aria-components/Button';
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
@@ -703,7 +696,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
                   IconContext,
                   {
                     render: centerBaseline({slot: 'icon', styles: treeIcon}),
-                    styles: style({size: fontRelative(20), flexShrink: 0})
+                    styles: style({size: '1lh', flexShrink: 0})
                   }
                 ],
                 [ActionButtonGroupContext, {styles: treeActions, isDisabled}],

packages/@react-spectrum/s2/stories/Avatar.stories.tsx

@@ -40,3 +40,32 @@ type Story = StoryObj<typeof Avatar>;
 export const Example: Story = {
   render: args => <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" {...args} />
 };
+
+export const ExtremelyLargeHeader: Story = {
+  render: args => (
+    <div
+      className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8})}>
+      <div className={style({font: 'heading-3xl', display: 'flex', alignItems: 'center', gap: 8})}>
+        <Avatar
+          alt="design provided"
+          src="https://i.imgur.com/xIe7Wlb.png"
+          size={'1lh'}
+          {...args}
+        />
+        <span>Person</span>
+      </div>
+      <div className={style({font: 'heading-2xl', display: 'flex', alignItems: 'center', gap: 8})}>
+        <Avatar
+          alt="design provided"
+          src="https://i.imgur.com/xIe7Wlb.png"
+          size={'1lh'}
+          {...args}
+        />
+        <span>Person</span>
+      </div>
+    </div>
+  ),
+  argTypes: {
+    size: {control: false}
+  }
+};

packages/@react-spectrum/s2/style/index.ts

@@ -149,9 +149,9 @@ export interface IconStyle {
 const iconSizes = {
   XS: 14,
   S: 16,
-  M: 20,
-  L: 22,
-  XL: 26
+  M: 18,
+  L: 20,
+  XL: 22
 } as const;
 
 /**