fix(theme): update types for ThemeProvider to accept output of createTheme (#3071)

Author: dbanksdesign

.changeset/popular-pigs-glow.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+fix(theme): update types for `ThemeProvider` to accept output of `createTheme`

packages/react/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx

@@ -1,9 +1,11 @@
 import { render, screen } from '@testing-library/react';
-import { Theme } from '@aws-amplify/ui';
+import { renderHook } from '@testing-library/react-hooks';
+import { Theme, createTheme } from '@aws-amplify/ui';
 import * as React from 'react';
 
 import { ThemeProvider } from '../index';
 import { Heading } from '../../../primitives';
+import { useTheme } from '../../../hooks';
 
 const App = () => {
   return <Heading>Howdy</Heading>;
@@ -21,6 +23,31 @@ describe('ThemeProvider', () => {
     expect(heading.nodeName).toBe('H6');
   });
 
+  it('should accept the output of createTheme to allow for extending themes', async () => {
+    const studioTheme = createTheme();
+    const extendedTheme = createTheme(
+      {
+        name: 'extended-theme',
+        tokens: {
+          colors: {
+            font: {
+              primary: { value: 'hotpink' },
+            },
+          },
+        },
+      },
+      studioTheme
+    );
+
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => (
+        <ThemeProvider theme={extendedTheme}>{children}</ThemeProvider>
+      ),
+    });
+
+    expect(result.current.tokens.colors.font.primary.value).toBe('hotpink');
+  });
+
   it('wraps the App in [data-amplify-theme="default-theme"]', () => {
     const { container } = render(
       <ThemeProvider>

packages/react/src/components/ThemeProvider/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DirectionProvider } from '@radix-ui/react-direction';
 
-import { createTheme, Theme } from '@aws-amplify/ui';
+import { createTheme, Theme, WebTheme } from '@aws-amplify/ui';
 
 import { AmplifyContext } from './AmplifyContext';
 
@@ -28,7 +28,7 @@ interface ThemeProviderProps {
   /**
    * Custom theme
    */
-  theme?: Theme;
+  theme?: Theme | WebTheme;
 }
 
 export function AmplifyProvider({

packages/ui/src/theme/createTheme.ts

@@ -31,7 +31,7 @@ const setupToken: SetupToken<WebDesignToken> = ({ token, path }) => {
  * const myOtherTheme = createTheme({}, myTheme);
  */
 export function createTheme(
-  theme?: Theme,
+  theme?: Theme | WebTheme,
   DefaultTheme: DefaultTheme | WebTheme = defaultTheme
 ): WebTheme {
   // merge theme and DefaultTheme to get a complete theme