fix(s2): Fix exceptions to baseColor in Button and Tag backgrounds (#8235)

Author: devongovett

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

@@ -12,7 +12,7 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {AvatarContext} from './Avatar';
-import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };
+import {baseColor, focusRing, fontRelative, 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' };
@@ -91,7 +91,12 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
     },
     isSelected: {
       default: baseColor('neutral'),
-      isEmphasized: baseColor('accent'),
+      isEmphasized: {
+        default: lightDark('accent-900', 'accent-700'),
+        isHovered: lightDark('accent-1000', 'accent-600'),
+        isPressed: lightDark('accent-1000', 'accent-600'),
+        isFocused: lightDark('accent-1000', 'accent-600')
+      },
       isDisabled: {
         default: 'gray-100',
         isQuiet: 'transparent'

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, 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'};
@@ -112,8 +112,18 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
         variant: {
           primary: baseColor('neutral'),
           secondary: baseColor('gray-100'),
-          accent: baseColor('accent'),
-          negative: baseColor('negative'),
+          accent: {
+            default: lightDark('accent-900', 'accent-700'),
+            isHovered: lightDark('accent-1000', 'accent-600'),
+            isPressed: lightDark('accent-1000', 'accent-600'),
+            isFocused: lightDark('accent-1000', 'accent-600')
+          },
+          negative: {
+            default: lightDark('negative-900', 'negative-700'),
+            isHovered: lightDark('negative-1000', 'negative-600'),
+            isPressed: lightDark('negative-1000', 'negative-600'),
+            isFocused: lightDark('negative-1000', 'negative-600')
+          },
           premium: 'gray-100',
           genai: 'gray-100'
         },

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, style} from '../style' with { type: 'macro' };
+import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
@@ -439,7 +439,10 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
     isSelected: {
       default: baseColor('neutral'),
       isEmphasized: {
-        default: baseColor('accent')
+        default: lightDark('accent-900', 'accent-700'),
+        isHovered: lightDark('accent-1000', 'accent-600'),
+        isPressed: lightDark('accent-1000', 'accent-600'),
+        isFocused: lightDark('accent-1000', 'accent-600')
       }
     },
     isDisabled: 'disabled',