fix: globalAppearance usage

Author: alexcarpenter

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -50,10 +50,13 @@ export const OrganizationProfileProvider = (props: OrganizationProfileProviderPr
     customPages: [],
   };
 
+  const globalAppearance = clerk.__internal_getOption('appearance');
+
   return (
     <StyleCacheProvider>
       <AppearanceProvider
         appearanceKey='organizationProfile'
+        globalAppearance={globalAppearance}
         appearance={appearance}
       >
         <FlowMetadataProvider flow='organizationProfile'>

packages/ui/src/composed/UserProfile/UserProfileProvider.tsx

@@ -49,10 +49,13 @@ export const UserProfileProvider = (props: UserProfileProviderProps): ReactNode
     customPages: [],
   };
 
+  const globalAppearance = clerk.__internal_getOption('appearance');
+
   return (
     <StyleCacheProvider>
       <AppearanceProvider
         appearanceKey='userProfile'
+        globalAppearance={globalAppearance}
         appearance={appearance}
       >
         <FlowMetadataProvider flow='userProfile'>

packages/ui/src/composed/__tests__/composed-provider-wiring.test.tsx

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useModuleManager } from '@/ui/contexts';
+import { useAppearance } from '@/ui/customizables/AppearanceContext';
 import { useRouter } from '@/ui/router';
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, screen } from '@/test/utils';
@@ -119,6 +120,44 @@ describe('UserProfileProvider wiring', () => {
     expect(screen.queryByTestId('should-not-render')).not.toBeInTheDocument();
   });
 
+  it('cascades globalAppearance from ClerkProvider into composed theme', async () => {
+    setModuleManager({ import: vi.fn(() => Promise.resolve(undefined)) });
+
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'], first_name: 'Test', last_name: 'User' });
+    });
+    patchEnvironment(fixtures.clerk, fixtures.environment);
+
+    // Simulate ClerkProvider setting appearance with colorPrimary
+    fixtures.clerk.__internal_getOption = vi.fn((key: string) => {
+      if (key === 'appearance') {
+        return { variables: { colorPrimary: '#ff0000' } };
+      }
+      return undefined;
+    });
+
+    function AppearanceProbe() {
+      const { parsedInternalTheme } = useAppearance();
+      return (
+        <div
+          data-testid='appearance-probe'
+          data-color-primary={parsedInternalTheme.colors.$primary500}
+        />
+      );
+    }
+
+    render(
+      <UserProfileProvider>
+        <AppearanceProbe />
+      </UserProfileProvider>,
+      { wrapper },
+    );
+
+    const probe = screen.getByTestId('appearance-probe');
+    // #ff0000 = hsla(0, 100%, 50%, 1) — the global appearance should cascade
+    expect(probe.dataset.colorPrimary).toBe('hsla(0, 100%, 50%, 1)');
+  });
+
   it('returns null when environment is missing', async () => {
     setModuleManager({ import: vi.fn(() => Promise.resolve(undefined)) });