feat(vue-system): add StyleProvider

Author: koca

packages/system/src/composables/use-style-config.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef, inject, provide, ref } from 'vue'
+import { computed, ComputedRef } from 'vue'
 
 import { SystemStyleObject } from '@chakra-ui/styled-system'
 import { ChakraComponentName, ComponentThemeConfig } from '@chakra-ui/vue-theme'
@@ -83,18 +83,3 @@ export function useMultiStyleConfig(
 ) {
   return useStyleConfig(themeKey, themingProps, { isMultiPart: true })
 }
-
-/** Provides Chakra Multi-parted component styles to descendants */
-export const provideComponentStyles = (
-  component: AllThemedComponents,
-  styles: SystemStyleObject
-) => {
-  provide<SystemStyleObject>(`$chakra${component}Styles`, styles)
-}
-
-/** Injects Chakra Multi-parted component styles from ancestor */
-export const useComponentStyles = (component: AllThemedComponents) => {
-  return inject<Record<string, SystemStyleObject> & SystemStyleObject & any>(
-    `$chakra${component}Styles`
-  )
-}

packages/system/src/index.ts

@@ -1,4 +1,5 @@
 export * from './chakra'
+export * from './providers'
 export * from './system.attrs'
 export * from './system.types'
 export * from './system.utils'

packages/system/src/providers.ts

@@ -0,0 +1,10 @@
+import { createContext, Dict } from '@chakra-ui/vue-utils'
+import { SystemStyleObject } from '@chakra-ui/styled-system'
+
+const [StylesProvider, useStyles] = createContext<Dict<SystemStyleObject>>({
+  name: 'StylesContext',
+  errorMessage:
+    'useStyles: `styles` is undefined. Seems you forgot to provide `StylesProvider(...)` ',
+})
+
+export { StylesProvider, useStyles }