feat(colormode): add injection of global styles

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2021-07-16T08:32:18.292Z
+ * This file was generated on 2021-07-16T10:09:49.527Z
  */
 
 import { ChakraProps } from '@chakra-ui/vue-system'

packages/c-color-mode/src/color-mode-provider.ts

@@ -1,22 +1,22 @@
 import { __DEV__ } from '@chakra-ui/utils'
 import { inject, isRef, ref, watchEffect } from 'vue'
-import { ColorMode } from './color-mode.utils'
+import { ColorModeRef } from './color-mode.utils'
 
-export type { ColorMode }
+export type { ColorModeRef }
 
 export interface ColorModeOptions {
-  initialColorMode?: ColorMode
+  initialColorMode?: ColorModeRef
   useSystemColorMode?: boolean
 }
 
 export type ColorModeContext = {
-  colorMode: ColorMode
+  colorMode: ColorModeRef
   toggleColorMode: () => void
 }
 
 /** Injects color mode into component instance */
 export const useColorMode = (): ColorModeContext => {
-  const _colorMode = inject('$chakraColorMode') as ColorMode
+  const _colorMode = inject('$chakraColorMode') as ColorModeRef
   const colorMode = isRef(_colorMode) ? _colorMode : ref(_colorMode)
 
   const toggleColorMode = () => {
@@ -36,8 +36,8 @@ export const useColorMode = (): ColorModeContext => {
 /**
  * Change value based on color mode.
  *
- * @param light the light mode value
- * @param dark the dark mode value
+ * @param lightValue the light mode value
+ * @param darkValue the dark mode value
  *
  * @example
  *
@@ -46,14 +46,14 @@ export const useColorMode = (): ColorModeContext => {
  * ```
  */
 export function useColorModeValue<TLight = unknown, TDark = unknown>(
-  light: TLight,
-  dark: TDark
+  lightValue: TLight,
+  darkValue: TDark
 ) {
   const { colorMode } = useColorMode()
   const modeValue = ref()
 
   watchEffect(() => {
-    modeValue.value = colorMode.value === 'dark' ? dark : light
+    modeValue.value = colorMode.value === 'dark' ? darkValue : lightValue
   })
 
   return modeValue

packages/c-color-mode/src/color-mode.utils.ts

@@ -6,7 +6,7 @@ const classNames = {
   dark: 'chakra-ui-dark',
 }
 
-export type ColorMode = Ref<'light' | 'dark'>
+export type ColorModeRef = Ref<'light' | 'dark'>
 
 /**
  * SSR: Graceful fallback for the `body` element
@@ -45,7 +45,7 @@ export const queries = {
 export const lightQuery = queries.light
 export const darkQuery = queries.dark
 
-export function getColorScheme(fallback?: ColorMode) {
+export function getColorScheme(fallback?: ColorModeRef) {
   const isDark = getMediaQuery(queries.dark) ?? fallback?.value === 'dark'
   return isDark ? 'dark' : 'light'
 }
@@ -77,8 +77,8 @@ export const root = {
   get: () =>
     document.documentElement.style.getPropertyValue(
       '--chakra-ui-color-mode'
-    ) as ColorMode['value'],
-  set: (mode: ColorMode) => {
+    ) as ColorModeRef['value'],
+  set: (mode: ColorModeRef) => {
     if (isBrowser) {
       document.documentElement.style.setProperty(
         '--chakra-ui-color-mode',

packages/c-color-mode/src/storage-manager.ts

@@ -1,14 +1,14 @@
 import { __DEV__ } from '@chakra-ui/utils'
-import { ColorMode } from './color-mode.utils'
+import { ColorModeRef } from './color-mode.utils'
 
 const hasSupport = () => typeof Storage !== 'undefined'
 export const storageKey = 'chakra-ui-color-mode'
 
-type MaybeColorMode = ColorMode['value'] | undefined
+type MaybeColorMode = ColorModeRef['value'] | undefined
 
 export interface StorageManager {
-  get(init?: ColorMode['value']): MaybeColorMode
-  set(value: ColorMode['value']): void
+  get(init?: ColorModeRef['value']): MaybeColorMode
+  set(value: ColorModeRef['value']): void
   type: 'cookie' | 'localStorage'
 }
 
@@ -49,7 +49,7 @@ export const cookieStorageManager = (cookies = ''): StorageManager => ({
     const match = cookies.match(new RegExp(`(^| )${storageKey}=([^;]+)`))
 
     if (match) {
-      return match[2] as ColorMode['value']
+      return match[2] as ColorModeRef['value']
     }
 
     return init

packages/core/src/helpers/css-reset.ts

@@ -2,9 +2,8 @@ import { injectGlobal } from '@chakra-ui/vue-system'
 import { cssResetStyles } from '@chakra-ui/c-reset'
 import { ThemeOverride } from '../extend-theme'
 import { get, runIfFn } from '@chakra-ui/utils'
-import { ColorMode } from '@chakra-ui/c-color-mode'
+import { ColorModeRef } from '@chakra-ui/c-color-mode'
 import { css } from '@chakra-ui/styled-system'
-import { Ref } from 'vue'
 
 /** Injects CSS reset styles */
 export function injectResetStyles() {
@@ -14,7 +13,7 @@ export function injectResetStyles() {
 /** Injects styles from `theme.styles.global` property */
 export function injectThemeGlobalStyles(
   theme: ThemeOverride,
-  colorMode: Ref<ColorMode>
+  colorMode: ColorModeRef
 ) {
   const styleObjectOrFn = get(theme, 'styles.global')
   const globalStyles = runIfFn(styleObjectOrFn, {
@@ -23,4 +22,5 @@ export function injectThemeGlobalStyles(
   })
   if (!globalStyles) return undefined
   const styles = css(globalStyles)(theme)
+  injectGlobal(styles)
 }

packages/core/src/helpers/plugin.types.ts

@@ -1,4 +1,5 @@
-import { ColorMode } from '@chakra-ui/c-color-mode'
+import { ColorModeRef } from '@chakra-ui/c-color-mode'
+import { UnwrapRef } from 'vue-demi'
 import { ThemeOverride } from '../extend-theme'
 
 interface ExtendIconsPath {
@@ -15,5 +16,5 @@ export interface ChakraPluginOptions {
   cssReset?: boolean
   extendTheme?: ThemeOverride
   icons?: IconsOptions
-  defaultColorMode?: ColorMode
+  defaultColorMode?: UnwrapRef<ColorModeRef>
 }

packages/core/src/index.ts

@@ -1,16 +1,18 @@
-import { computed, Plugin, Ref, ref, watch } from 'vue'
-import defaultTheme, { ColorMode } from '@chakra-ui/vue-theme'
+import { computed, Plugin, Ref, ref, UnwrapRef } from 'vue'
+import defaultTheme from '@chakra-ui/vue-theme'
+import type { ColorModeRef } from '@chakra-ui/c-color-mode'
 import { toCSSVar, WithCSSVar } from '@chakra-ui/styled-system'
 import { chakra, injectGlobal, css } from '@chakra-ui/vue-system'
 import internalIcons from './icon.internals'
 import { extendTheme, ThemeOverride } from './extend-theme'
 import { MergedIcons, parseIcons } from './parse-icons'
+import { injectResetStyles, injectThemeGlobalStyles } from './helpers/css-reset'
 import { mode } from '@chakra-ui/vue-theme-tools'
 import { ChakraPluginOptions } from './helpers/plugin.types'
 
 /**
  * Helper function to extend Chakra plugin with options
- * It just returns its arguments
+ * It just returns its arguments with typescript types added
  */
 export function extendChakra(
   options: ChakraPluginOptions = { cssReset: true }
@@ -27,25 +29,34 @@ const ChakraUIVuePlugin: Plugin = {
     const computedTheme = computed<WithCSSVar<ThemeOverride>>(() =>
       toCSSVar(theme)
     )
+
+    // Inject Chakra CSS variables
     injectGlobal({
       ':root': computedTheme.value.__cssVars,
     })
 
-    let libraryIcons = options.icons?.library || {}
-    let extendedIcons = options.icons?.extend || {}
-
     // Initialize colormode
-    const colorMode: ColorMode = theme.config?.initialColorMode || 'light'
+    const colorMode: UnwrapRef<ColorModeRef> =
+      theme.config?.initialColorMode || 'light'
+
+    // Provide initial colormode
+    app.config.globalProperties.$initialColorMode = colorMode
+
+    const colorModeRef = ref(colorMode) as ColorModeRef
+    app.provide<ColorModeRef>('$chakraColorMode', colorModeRef)
 
+    if (options.cssReset) {
+      injectResetStyles()
+    }
+    // Inject `styles.global` in document
+    injectThemeGlobalStyles(computedTheme.value, colorModeRef)
+
+    let libraryIcons = options.icons?.library || {}
+    let extendedIcons = options.icons?.extend || {}
     // Bind theme to application global properties and provide to application
     app.config.globalProperties.$chakraTheme = computedTheme.value
     app.provide('$chakraTheme', computedTheme.value as ThemeOverride)
 
-    // Provide initial colormode
-    app.config.globalProperties.$initialColorMode = colorMode
-    const colorModeRef = ref<ColorMode>(colorMode)
-    app.provide<Ref<ColorMode>>('$chakraColorMode', colorModeRef)
-
     libraryIcons = parseIcons(libraryIcons)
 
     // Merge internal icons and library icons