@react-spectrum/s2 3.0.0-nightly-d87cc4422-250109 → 3.0.0-nightly-e4497fdb6-250110

package/src/Button.tsx

@@ -138,24 +138,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       isDisabled: 'GrayText'
     }
   },
-  backgroundImage: {
-    variant: {
-      premium: {
-        default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
-        isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
-        isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
-        isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
-      },
-      genai: {
-        default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
-        isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
-        isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
-        isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
-      }
-    },
-    isDisabled: 'none',
-    forcedColors: 'none'
-  },
   backgroundColor: {
     fillStyle: {
       fill: {
@@ -296,6 +278,42 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
   disableTapHighlight: true
 }, getAllowedOverrides());
 
+// Put the gradient background on a separate element from the button to work around a Safari
+// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣
+// https://bugs.webkit.org/show_bug.cgi?id=285622
+const gradient = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: -1,
+  transition: 'default',
+  borderRadius: '[inherit]',
+  backgroundImage: {
+    variant: {
+      premium: {
+        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
+        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
+      },
+      genai: {
+        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
+        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
+      }
+    },
+    isDisabled: 'none',
+    forcedColors: 'none'
+  },
+  // Force gradient colors to remain static between light and dark theme.
+  colorScheme: {
+    variant: {
+      premium: 'light',
+      genai: 'light'
+    }
+  }
+});
+
 /**
  * Buttons allow users to perform an action.
  * They have multiple styles for various needs, and are ideal for calling attention to
@@ -350,65 +368,79 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
         staticColor,
         isStaticColor: !!staticColor
       }, props.styles)}>
-      <Provider
-        values={[
-          [SkeletonContext, null],
-          [TextContext, {
-            styles: style({
-              paddingY: '--labelPadding',
-              order: 1,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible}),
-            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
-            'data-rsp-slot': 'text'
-          }],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({
-              size: fontRelative(20),
-              marginStart: '--iconMargin',
-              flexShrink: 0,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible})
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-        {isPending &&
-          <div
-            className={style({
-              position: 'absolute',
-              top: '[50%]',
-              left: '[50%]',
-              transform: 'translate(-50%, -50%)',
-              opacity: {
-                default: 0,
-                isProgressVisible: 1
-              }
-            })({isProgressVisible, isPending})}>
-            <ProgressCircle
-              isIndeterminate
-              aria-label={stringFormatter.format('button.pending')}
-              size="S"
-              staticColor={staticColor}
-              styles={style({
-                size: {
+      {(renderProps) => (<>
+        {variant === 'genai' || variant === 'premium' 
+          ? (
+            <span
+              className={gradient({
+                ...renderProps,
+                // Retain hover styles when an overlay is open.
+                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+                isDisabled: renderProps.isDisabled || isProgressVisible,
+                variant
+              })} />
+             )
+          : null}
+        <Provider
+          values={[
+            [SkeletonContext, null],
+            [TextContext, {
+              styles: style({
+                paddingY: '--labelPadding',
+                order: 1,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible}),
+              // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+              'data-rsp-slot': 'text'
+            }],
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+              styles: style({
+                size: fontRelative(20),
+                marginStart: '--iconMargin',
+                flexShrink: 0,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible})
+            }]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+          {isPending &&
+            <div
+              className={style({
+                position: 'absolute',
+                top: '[50%]',
+                left: '[50%]',
+                transform: 'translate(-50%, -50%)',
+                opacity: {
+                  default: 0,
+                  isProgressVisible: 1
+                }
+              })({isProgressVisible, isPending})}>
+              <ProgressCircle
+                isIndeterminate
+                aria-label={stringFormatter.format('button.pending')}
+                size="S"
+                staticColor={staticColor}
+                styles={style({
                   size: {
-                    S: 14,
-                    M: 18,
-                    L: 20,
-                    XL: 24
+                    size: {
+                      S: 14,
+                      M: 18,
+                      L: 20,
+                      XL: 24
+                    }
                   }
-                }
-              })({size})} />
-          </div>
-        }
-      </Provider>
+                })({size})} />
+            </div>
+          }
+        </Provider>
+      </>)}
     </RACButton>
   );
 });

package/src/CloseButton.tsx

@@ -65,6 +65,10 @@ const styles = style({
       isStaticColor: {
         default: baseColor('transparent-overlay-800'),
         isDisabled: 'transparent-overlay-400'
+      },
+      forcedColors: {
+        default: 'ButtonText',
+        isDisabled: 'GrayText'
       }
     }
   },

package/style/dist/spectrum-theme.cjs

@@ -492,7 +492,24 @@ function $7dddb03c6ef7d79c$export$9b476054b78b89cd(a, b, percent) {
     return `[color-mix(in srgb, ${$7dddb03c6ef7d79c$var$parseColor(a)}, ${$7dddb03c6ef7d79c$var$parseColor(b)} ${percent}%)]`;
 }
 function $7dddb03c6ef7d79c$export$46def8197cf4dd4c(angle, ...tokens) {
-    return `linear-gradient(${angle}, ${tokens.map(([color, stop])=>`${$7dddb03c6ef7d79c$var$parseColor(color)} ${stop}%`)})`;
+    // Generate @property rules for each gradient stop color. This allows the gradient to be animated.
+    let propertyDefinitions = [];
+    for(let i = 0; i < tokens.length; i++)propertyDefinitions.push(`@property --g${i} {
+  syntax: '<color>';
+  initial-value: #0000;
+  inherits: false;
+}`);
+    if (this && typeof this.addAsset === 'function') this.addAsset({
+        type: 'css',
+        content: propertyDefinitions.join('\n\n')
+    });
+    return [
+        {
+            type: 'linear-gradient',
+            angle: angle,
+            stops: tokens
+        }
+    ];
 }
 function $7dddb03c6ef7d79c$var$generateSpacing(px) {
     let res = {};
@@ -671,8 +688,10 @@ let $7dddb03c6ef7d79c$var$gridTrackSize = (value)=>{
     return value in $7dddb03c6ef7d79c$var$baseSpacing ? $7dddb03c6ef7d79c$var$baseSpacing[value] : value;
 };
 const $7dddb03c6ef7d79c$var$transitionProperty = {
-    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+    // var(--gp) is generated by the backgroundImage property when setting a gradient.
+    // It includes a list of all of the custom properties used for each color stop.
+    default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+    colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
     opacity: 'opacity',
     shadow: 'box-shadow',
     transform: 'transform, translate, scale, rotate',
@@ -1343,7 +1362,26 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'dark',
             'light dark'
         ],
-        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
+        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value, property)=>{
+            if (typeof value === 'string') return {
+                [property]: value
+            };
+            else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
+                let values = {
+                    [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i)=>`var(--g${i}) ${stop}%`)})`
+                };
+                // Create a CSS var for each color stop so the gradient can be transitioned.
+                // These are registered via @property in the `linearGradient` macro.
+                let properties = [];
+                value[0].stops.forEach(([color], i)=>{
+                    properties.push(`--g${i}`);
+                    values[`--g${i}`] = $7dddb03c6ef7d79c$var$parseColor(color);
+                });
+                // This is used by transition-property so we automatically transition all of the color stops.
+                values['--gp'] = properties.join(', ');
+                return values;
+            } else throw new Error('Unexpected backgroundImage value: ' + JSON.stringify(value));
+        }),
         // TODO: do we need separate x and y properties?
         backgroundPosition: [
             'bottom',