chore: fix React Aria home page "bring your styles" button in light mode (#10242)

* chore: fix React Aria home page "bring your styles" button in light mode

* fix button color

* fix for transparency

* add chromatic story for auto

* fix chromatic issue

* remove static color from original powerset

* get rid of color pickers

---------

Co-authored-by: Rob Snow <rsnow@adobe.com>

Author: LFDanLu

packages/@react-spectrum/s2/chromatic/Button.stories.tsx

@@ -50,6 +50,18 @@ let genaiStates = [{isDisabled: true}, {size: ['S', 'M', 'L', 'XL']}];
 
 let genaiCombinations = generatePowerset(genaiStates);
 
+let staticColorAutoStates = [
+  {isQuiet: true},
+  {isDisabled: true},
+  {size: ['S', 'M', 'L', 'XL']},
+  {staticColor: ['auto']},
+  {variant: ['accent', 'negative', 'primary', 'secondary']}
+];
+
+let staticColorAutoCombinations = generatePowerset(staticColorAutoStates).filter(
+  c => c.staticColor != null
+);
+
 const Template = (args: ButtonProps & {combos?: any[]}): ReactNode => {
   let {children, combos = combinations, variant, ...otherArgs} = args;
   return (
@@ -82,7 +94,11 @@ const Template = (args: ButtonProps & {combos?: any[]}): ReactNode => {
           </Button>
         );
         if (c.staticColor != null) {
-          return <StaticColorProvider staticColor={c.staticColor}>{button}</StaticColorProvider>;
+          return (
+            <StaticColorProvider key={`static-${key}`} staticColor={c.staticColor} hideColorPicker>
+              {button}
+            </StaticColorProvider>
+          );
         }
 
         return button;
@@ -95,6 +111,10 @@ export const Default: StoryObj<typeof Button> = {
   render: args => <Template {...args} />
 };
 
+export const StaticColorAuto: StoryObj<typeof Button> = {
+  render: args => <Template {...args} combos={staticColorAutoCombinations} />
+};
+
 export const WithIcon: StoryObj<typeof Button> = {
   render: args => <Template {...args} />,
   args: {

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

@@ -253,7 +253,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
           fill: {
             variant: {
               primary: 'auto',
-              secondary: 'white',
+              secondary: {
+                default: 'transparent-overlay-1000',
+                isHovered: 'transparent-overlay-1000',
+                isFocusVisible: 'transparent-overlay-1000',
+                isPressed: 'transparent-overlay-1000'
+              },
               premium: 'white',
               genai: 'white'
             }
@@ -263,7 +268,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
               premium: 'white',
               genai: 'white'
             },
-            default: 'white'
+            default: {
+              default: 'transparent-overlay-1000',
+              isHovered: 'transparent-overlay-1000',
+              isFocusVisible: 'transparent-overlay-1000',
+              isPressed: 'transparent-overlay-1000'
+            }
           }
         },
         isDisabled: 'transparent-overlay-400'

packages/@react-spectrum/s2/stories/utils.tsx

@@ -35,6 +35,7 @@ function getBackgroundColor(staticColor: StaticColor) {
 export function StaticColorProvider(props: {
   children: ReactNode;
   staticColor?: StaticColor;
+  hideColorPicker?: boolean;
 }): ReactElement {
   let [autoBg, setAutoBg] = useState('#5131c4');
   return (
@@ -48,7 +49,7 @@ export function StaticColorProvider(props: {
         }}>
         {props.children}
       </div>
-      {props.staticColor === 'auto' && (
+      {props.staticColor === 'auto' && !props.hideColorPicker && (
         <label
           className={style({
             display: 'flex',

packages/dev/s2-docs/pages/react-aria/index.mdx

@@ -29,7 +29,7 @@ import {LinkButton} from '../../src/Link';
 import HomeHeader from './HomeHeader';
 import {Video} from '../../src/Video';
 import videoUrl from 'url:./assets/website.mp4';
-import {SettingsContextProvider} from '../../src/SettingsProvider';
+import {RACSettingsProvider} from '../../src/SettingsProvider';
 
 export const section = 'Overview';
 export const title = 'Home';
@@ -76,7 +76,7 @@ export const description = 'Accessible, high quality UI components and hooks for
         )}} />
     </head>
     <body className="m-0" style={{'--s2-container-bg': 'light-dark(white, black)'}}>
-      <SettingsContextProvider>
+      <RACSettingsProvider>
       <header className="relative header-background isolate pt-20 md:pt-32">
         <HomeHeader />
         <section className="p-4 md:p-6 box-border overflow-clip bg-white dark:bg-zinc-800/80 dark:backdrop-saturate-200 card-shadow w-fit max-w-[calc(100%-40px)] mx-auto rounded-xl flex items-center flex-col xl:flex-row gap-8">
@@ -648,7 +648,7 @@ export const description = 'Accessible, high quality UI components and hooks for
           <li><a href="//www.adobe.com/privacy/ca-rights.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Do not sell my personal information</a></li>
         </ul>
       </footer>
-      </SettingsContextProvider>
+      </RACSettingsProvider>
     </body>
   </Provider>
 </RouterWrapperServer>

packages/dev/s2-docs/src/SettingsProvider.tsx

@@ -77,6 +77,21 @@ export function SettingsContextProvider({children, elementType, locale}: Setting
   );
 }
 
+export function RACSettingsProvider({children}: Pick<SettingsProviderProps, 'children'>) {
+  let {colorScheme, toggleColorScheme, systemColorScheme} = useSettingsState();
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        colorScheme,
+        toggleColorScheme,
+        systemColorScheme
+      }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
 export function SettingsProvider({children}: SettingsProviderProps) {
   let {colorScheme, toggleColorScheme, systemColorScheme, providerColorScheme} = useSettingsState();