diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx index 970dd19c044..db540c117f0 100644 --- a/packages/@react-spectrum/s2/src/ActionButton.tsx +++ b/packages/@react-spectrum/s2/src/ActionButton.tsx @@ -280,7 +280,7 @@ export const btnStyles = style< }, '--iconWidth': { type: 'width', - value: fontRelative(20) + value: fontRelative(18) }, '--badgePosition': { type: 'width', @@ -310,9 +310,9 @@ export const btnStyles = style< const avatarSize: Record, number> = { XS: 14, S: 16, - M: 20, - L: 22, - XL: 26 + M: 18, + L: 20, + XL: 22 } as const; interface ActionButtonContextProps extends Partial { @@ -402,7 +402,7 @@ export const ActionButton = forwardRef(function ActionButton( { render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}), styles: style({ - size: fontRelative(20), + size: fontRelative(18), marginStart: '--iconMargin', visibility: { isProgressVisible: 'hidden' diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx index 9bdb65e0b14..1bcd382b716 100644 --- a/packages/@react-spectrum/s2/src/Badge.tsx +++ b/packages/@react-spectrum/s2/src/Badge.tsx @@ -234,7 +234,7 @@ export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx index 061a671d755..c7b444a18de 100644 --- a/packages/@react-spectrum/s2/src/Button.tsx +++ b/packages/@react-spectrum/s2/src/Button.tsx @@ -478,7 +478,7 @@ export const Button = forwardRef(function Button( { render: centerBaseline({slot: 'icon', styles: style({order: 0})}), styles: style({ - size: fontRelative(20), + size: fontRelative(18), 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: fontRelative(18), marginStart: '--iconMargin', flexShrink: 0 }) diff --git a/packages/@react-spectrum/s2/src/DragPreview.tsx b/packages/@react-spectrum/s2/src/DragPreview.tsx index 1836f505404..78e2a0b0b60 100644 --- a/packages/@react-spectrum/s2/src/DragPreview.tsx +++ b/packages/@react-spectrum/s2/src/DragPreview.tsx @@ -63,7 +63,7 @@ export let iconCenterWrapper = style({ export let icon = style({ display: 'block', - size: fontRelative(20), + size: fontRelative(18), marginEnd: 'text-to-visual', '--iconPrimary': { type: 'fill', diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx index 5709090d61f..69296e3602d 100644 --- a/packages/@react-spectrum/s2/src/Field.tsx +++ b/packages/@react-spectrum/s2/src/Field.tsx @@ -294,7 +294,7 @@ export const FieldGroup = forwardRef(function FieldGroup( IconContext, { styles: style({ - size: fontRelative(20), + size: fontRelative(18), '--iconPrimary': {type: 'fill', value: 'currentColor'} }) } @@ -490,7 +490,7 @@ export function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode { }) }), styles: style({ - size: fontRelative(20), + size: fontRelative(18), marginStart: 'text-to-visual', marginEnd: fontRelative(-2), flexShrink: 0 diff --git a/packages/@react-spectrum/s2/src/ListView.tsx b/packages/@react-spectrum/s2/src/ListView.tsx index 41d69a077b5..dae3ea84a84 100644 --- a/packages/@react-spectrum/s2/src/ListView.tsx +++ b/packages/@react-spectrum/s2/src/ListView.tsx @@ -235,7 +235,7 @@ const listView = style { IconContext, { render: centerBaseline({slot: 'icon', styles: treeIcon}), - styles: style({size: fontRelative(20), flexShrink: 0}) + styles: style({size: fontRelative(18), 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: fontRelative(18), flexShrink: 0}) } ] ]}> diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx index c7a1f3f1e39..7bb2c2d295d 100644 --- a/packages/@react-spectrum/s2/src/TagGroup.tsx +++ b/packages/@react-spectrum/s2/src/TagGroup.tsx @@ -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: fontRelative(18), marginStart: '--iconMargin', flexShrink: 0 }) @@ -647,7 +647,7 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas ImageContext, { styles: style({ - size: fontRelative(20), + size: fontRelative(18), flexShrink: 0, order: 0, aspectRatio: 'square', diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx index cb8b897f33e..1dcafc106c2 100644 --- a/packages/@react-spectrum/s2/src/ToggleButton.tsx +++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx @@ -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: fontRelative(18), marginStart: '--iconMargin', flexShrink: 0}) } ] ]}> diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx index 4573d2d5331..da901cff669 100644 --- a/packages/@react-spectrum/s2/src/TreeView.tsx +++ b/packages/@react-spectrum/s2/src/TreeView.tsx @@ -703,7 +703,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode IconContext, { render: centerBaseline({slot: 'icon', styles: treeIcon}), - styles: style({size: fontRelative(20), flexShrink: 0}) + styles: style({size: fontRelative(18), flexShrink: 0}) } ], [ActionButtonGroupContext, {styles: treeActions, isDisabled}], diff --git a/packages/@react-spectrum/s2/style/index.ts b/packages/@react-spectrum/s2/style/index.ts index 02d768a2a05..2685ce16742 100644 --- a/packages/@react-spectrum/s2/style/index.ts +++ b/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; /**