fix(s2): Make gradient buttons have an animated transition

[devongovett]

This enables animated transitions on gradient buttons in the hover state like the other variants. It works by using registered custom properties via the @property rule, which allows defining the syntax that variables should use (<color> in this case). Then, you can add these custom properties to transition-property and they'll animate. The linearGradient macro now generates these variable definitions on demand.

Unfortunately, due to yet another Safari bug the gradient must be on a separate element from the button itself otherwise it causes layout flickering (reproduction).

Also fixes the static color issue (closes #7574) by simply setting the color-scheme to light so it doesn't change in dark mode. I'd rather not add a bunch of new tokens to the theme if they are only going to be used here. Changed the angle to be corner to corner instead of a hard coded value as well (checked with design on that).

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[yihuiliao]

Are the gradient buttons supposed to retain their background when pending or should it go gray like the other buttons?

[devongovett]

oops yeah, updated

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

## API Changes

react-aria-components

/react-aria-components:useFilter

-useFilter {
-  options?: Intl.CollatorOptions
-  returnVal: undefined
-}

---

@react-aria/overlays

/@react-aria/overlays:AriaPositionProps

 AriaPositionProps {
   arrowBoundaryOffset?: number = 0
   arrowSize?: number = 0
   boundaryElement?: Element = document.body
   containerPadding?: number = 12
   crossOffset?: number = 0
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 0
-  onClose?: () => void | null
+  onClose?: () => void
   overlayRef: RefObject<Element | null>
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   targetRef: RefObject<Element | null>
 }

---