Merge pull request #263 from ItsJonQ/fix/wrapped-theme-provider

fix: Wrapped ThemeProvider props

Author: sarayourfriend

packages/create-styles/src/components/theme-provider/theme-provider.js

@@ -26,17 +26,17 @@ import {
  * @typedef ThemeProviderProps
  * @property {import('react').ReactNode} children Children to render.
  * @property {import('../../create-compiler').Compiler} compiler The style compiler.
- * @property {string} className Optional className to render on the provider.
- * @property {boolean} isGlobal Determines if the theme styles are rendered globally or scoped locally.
+ * @property {string} [className] Optional className to render on the provider.
+ * @property {boolean} [isGlobal=false] Determines if the theme styles are rendered globally or scoped locally.
  * @property {import('../../create-style-system/generate-theme').GenerateThemeResults} globalStyles Styles to apply globally.
- * @property {boolean} isDark Determines if dark-mode styles should be rendered.
- * @property {boolean} isColorBlind Determines if color-blind-mode styles should be rendered.
- * @property {boolean} isReducedMotion Determines if reduced-motion-mode styles should be rendered.
- * @property {boolean} isHighContrast Determines if high-contrast-mode styles should be rendered.
- * @property {Record<string, string>} theme Custom theme properties.
- * @property {Record<string, string>} darkTheme Custom dark theme properties.
- * @property {Record<string, string>} highContrastTheme Custom high contrast theme properties.
- * @property {Record<string, string>} darkHighContrastTheme Custom dark & high contrast theme properties.
+ * @property {boolean} [isDark=false] Determines if dark-mode styles should be rendered.
+ * @property {boolean} [isColorBlind=false] Determines if color-blind-mode styles should be rendered.
+ * @property {boolean} [isReducedMotion=false] Determines if reduced-motion-mode styles should be rendered.
+ * @property {boolean} [isHighContrast=false] Determines if high-contrast-mode styles should be rendered.
+ * @property {Record<string, string>} [theme={}] Custom theme properties.
+ * @property {Record<string, string>} [darkTheme={}] Custom dark theme properties.
+ * @property {Record<string, string>} [highContrastTheme={}] Custom high contrast theme properties.
+ * @property {Record<string, string>} [darkHighContrastTheme={}] Custom dark & high contrast theme properties.
  */
 
 /**
@@ -64,10 +64,10 @@ function ThemeProvider(
 		className,
 		isGlobal = false,
 		globalStyles,
-		isDark,
-		isColorBlind,
-		isReducedMotion,
-		isHighContrast,
+		isDark = false,
+		isColorBlind = false,
+		isReducedMotion = false,
+		isHighContrast = false,
 		theme = {},
 		darkTheme = {},
 		highContrastTheme = {},

packages/create-styles/src/create-style-system/create-style-system.js

@@ -11,6 +11,8 @@ import { createToken, DEFAULT_STYLE_SYSTEM_OPTIONS } from './utils';
 
 const defaultOptions = DEFAULT_STYLE_SYSTEM_OPTIONS;
 
+/** @typedef {Omit<import('../components/theme-provider/theme-provider').ThemeProviderProps, 'compiler' | 'globalStyles'>} WrappedThemeProviderProps */
+
 /**
  * @template {Record<string, string | number>} TConfig
  * @template {Record<string, string | number>} TDarkConfig
@@ -27,7 +29,7 @@ const defaultOptions = DEFAULT_STYLE_SYSTEM_OPTIONS;
  * @property {(value: keyof (TConfig & TDarkConfig & THCConfig & TDarkHCConfig) | TGeneratedTokens) => string} get The primary function to retrieve Style system variables.
  * @property {import('./polymorphic-component').CreateStyled} styled A set of styled components.
  * @property {import('react').ComponentType} View The base <View /> component.
- * @property {import('react').ComponentType<import('react').ComponentProps<BaseThemeProvider>>} ThemeProvider The component (Provider) used to adjust design tokens.
+ * @property {import('react').ComponentType<WrappedThemeProviderProps>} ThemeProvider The component (Provider) used to adjust design tokens.
  * @property {import('../css-custom-properties').RootStore} rootStore
  */
 
@@ -129,9 +131,7 @@ export function createStyleSystem(options = defaultOptions) {
 	/**
 	 * An enhanced (base) ThemeProvider with injectGlobal from the custom Emotion instance.
 	 */
-	const ThemeProvider = (
-		/** @type {import('react').ComponentProps<BaseThemeProvider>} */ props,
-	) => (
+	const ThemeProvider = (/** @type {WrappedThemeProviderProps} */ props) => (
 		<BaseThemeProvider
 			{...props}
 			compiler={compiler}