adobe · snowystinger · May 29, 2025 · May 29, 2025 · May 30, 2025 · May 30, 2025
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -12,13 +12,14 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {AvatarContext} from './Avatar';
-import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };
+import {baseColor, focusRing, fontRelative, iconStyle, lightDark, style} from '../style' with { type: 'macro' };
 import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
+import {mergeStyles} from '../style/runtime';
 import {NotificationBadgeContext} from './NotificationBadge';
 import {pressScale} from './pressScale';
 import {SkeletonContext} from './Skeleton';
@@ -144,10 +145,6 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
       }
     }
   },
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  },
   outlineColor: {
     default: 'focus-ring',
     isStaticColor: 'transparent-overlay-1000',
@@ -287,7 +284,10 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
           [TextContext, {styles: style({order: 1, truncate: true})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            styles: mergeStyles(
+              iconStyle({color: 'currentColor'}),
+              style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            )
           }],
           [AvatarContext, {
             size: avatarSize[size],

diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -15,8 +15,9 @@ import {centerBaseline} from './CenterBaseline';
 import {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {filterDOMProps} from '@react-aria/utils';
-import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
+import {fontRelative, iconStyle, lightDark, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
+import {mergeStyles} from '../style/runtime';
 import React, {createContext, forwardRef, ReactNode} from 'react';
 import {SkeletonWrapper} from './Skeleton';
 import {Text, TextContext} from './Content';
@@ -155,10 +156,6 @@ const badge = style<BadgeStyleProps>({
         }
       }
     }
-  },
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
   }
 }, getAllowedOverrides());
 
@@ -194,7 +191,7 @@ export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HT
         [RACTextContext, {}],
         [IconContext, {
           render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-          styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+          styles: mergeStyles(iconStyle({color: 'currentColor'}), style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0}))
         }]
       ]}>
       <SkeletonWrapper>

diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, lightDark, linearGradient, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, iconStyle, lightDark, linearGradient, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
@@ -19,6 +19,7 @@ import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {SkeletonContext} from './Skeleton';
@@ -243,10 +244,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       }
     }
   },
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  },
   outlineColor: {
     default: 'focus-ring',
     isStaticColor: 'transparent-overlay-1000',
@@ -376,15 +373,17 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
             }],
             [IconContext, {
               render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-              styles: style({
-                size: fontRelative(20),
-                marginStart: '--iconMargin',
-                flexShrink: 0,
-                opacity: {
-                  default: 1,
-                  isProgressVisible: 0
-                }
-              })({isProgressVisible})
+              styles: mergeStyles(
+                iconStyle({color: 'currentColor'}),
+                style({
+                  size: fontRelative(20),
+                  marginStart: '--iconMargin',
+                  flexShrink: 0,
+                  opacity: {
+                    default: 1,
+                    isProgressVisible: 0
+                  }
+                })({isProgressVisible}))
             }]
           ]}>
           {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
@@ -458,7 +457,10 @@ export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps,
           }],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            styles: mergeStyles(
+              iconStyle({color: 'currentColor'}),
+              style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            )
           }]
         ]}>
         {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}

diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -33,7 +33,7 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
-import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, iconStyle, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
@@ -57,6 +57,7 @@ import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeRefs, useResizeObserver, useSlotId} from '@react-aria/utils';
+import {mergeStyles} from '../style/runtime';
 import {Node} from 'react-stately';
 import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
@@ -389,7 +390,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
               values={[
                 [IconContext, {
                   slots: {
-                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
+                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: mergeStyles(iconStyle({color: 'currentColor'}), icon)}
                   }
                 }],
                 [TextContext, {

diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -28,7 +28,7 @@ import {
   Separator,
   SeparatorProps
 } from 'react-aria-components';
-import {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, fontRelative, iconStyle, size, space, style} from '../style' with {type: 'macro'};
 import {box, iconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -221,11 +221,7 @@ export let icon = style({
   size: fontRelative(20),
   // 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',
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  }
+  marginEnd: 'text-to-visual'
 });
 
 export let iconCenterWrapper = style({
@@ -305,11 +301,7 @@ let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
 
 let descriptor = style({
   gridArea: 'descriptor',
-  marginStart: 8,
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  }
+  marginStart: 8
 });
 
 let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({
@@ -486,8 +478,8 @@ export function MenuItem(props: MenuItemProps): ReactNode {
               values={[
                 [IconContext, {
                   slots: {
-                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon},
-                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor})} // TODO: remove once we have default?
+                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: mergeStyles(iconStyle({color: 'currentColor'}), icon)},
+                    descriptor: {render: centerBaseline({slot: 'descriptor', styles: descriptor}), styles: iconStyle({color: 'currentColor'})} // TODO: remove once we have default?
                   }
                 }],
                 [TextContext, {
@@ -517,6 +509,10 @@ export function MenuItem(props: MenuItemProps): ReactNode {
                         direction: {
                           rtl: -1
                         }
+                      },
+                      '--iconPrimary': {
+                        type: 'fill',
+                        value: 'currentColor'
                       }
                     })({direction})} />
                 </div>
@@ -530,6 +526,10 @@ export function MenuItem(props: MenuItemProps): ReactNode {
                         direction: {
                           rtl: -1
                         }
+                      },
+                      '--iconPrimary': {
+                        type: 'fill',
+                        value: 'currentColor'
                       }
                     })({direction})} />
                 </div>

diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -32,7 +32,7 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, FocusableRef, FocusableRefValue, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
-import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, iconStyle, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {
   checkmark,
@@ -64,6 +64,7 @@ import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
@@ -515,7 +516,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                         slots: {
                           icon: {
                             render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
-                            styles: icon
+                            styles: mergeStyles(iconStyle({color: 'currentColor'}), icon)
                           }
                         }
                       }],
@@ -581,7 +582,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
           <DefaultProvider
             context={IconContext}
             value={{slots: {
-              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
+              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: mergeStyles(iconStyle({color: 'currentColor'}), icon)}
             }}}>
             <DefaultProvider
               context={TextContext}

diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -11,7 +11,7 @@
  */
 
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
-import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, iconStyle, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -90,10 +90,6 @@ const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
   userSelect: 'none',
   backgroundColor: 'transparent',
   borderStyle: 'none',
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  },
   // The selected item has lower z-index so that the sliding background
   // animation does not cover other items.
   zIndex: {
@@ -264,7 +260,8 @@ export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedC
           <Provider
             values={[
               [IconContext, {
-                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})
+                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})}),
+                styles: iconStyle({color: 'currentColor'})
               }],
               [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],
               [TextContext, {styles: style({order: 1, truncate: true})}]

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -25,14 +25,15 @@ import {
   TabListStateContext,
   TabRenderProps
 } from 'react-aria-components';
-import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, iconStyle, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
 import {CollectionBuilder} from '@react-aria/collections';
 import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {mergeStyles} from '../style/runtime';
 import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
@@ -358,11 +359,7 @@ const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavi
 
 const icon = style({
   display: 'block',
-  flexShrink: 0,
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  }
+  flexShrink: 0
 });
 
 export function Tab(props: TabProps): ReactNode {
@@ -402,7 +399,7 @@ export function Tab(props: TabProps): ReactNode {
                 }],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-                  styles: icon
+                  styles: mergeStyles(iconStyle({color: 'currentColor'}), icon)
                 }]
               ]}>
               {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}

diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -23,7 +23,7 @@ import {
   Provider,
   SelectValue
 } from 'react-aria-components';
-import {baseColor, edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, iconStyle, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {
   checkmark,
@@ -44,6 +44,7 @@ import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-ty
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
+import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {pressScale} from './pressScale';
@@ -207,7 +208,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                           slots: {
                             icon: {
                               render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
-                              styles: icon
+                              styles: mergeStyles(iconStyle({color: 'currentColor'}), icon)
                             }
                           }
                         }],

diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -28,7 +28,7 @@ import {
   useSlottedContext
 } from 'react-aria-components';
 import {AvatarContext} from './Avatar';
-import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };
+import {baseColor, focusRing, fontRelative, iconStyle, lightDark, style} from '../style' with { type: 'macro' };
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
@@ -44,6 +44,7 @@ import {ImageContext} from './Image';
 import {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -473,10 +474,6 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
   cursor: {
     default: 'default',
     isLink: 'pointer'
-  },
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
   }
 });
 
@@ -530,7 +527,7 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
             [TextContext, {styles: style({order: 1, truncate: true})}],
             [IconContext, {
               render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+              styles: mergeStyles(iconStyle({color: 'currentColor'}), style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0}))
             }],
             [AvatarContext, {
               size: avatarSize[size],