chore: use color mode

.storybook/config.js

@@ -2,7 +2,7 @@ import { configure, addDecorator, addParameters } from '@storybook/vue';
 import Vue from 'vue'
 import VueLive from 'vue-live'
 import Lorem from 'vue-lorem-ipsum'
-import Chakra from '../packages/chakra-ui-core/src'
+import Chakra, { mode } from '../packages/chakra-ui-core/src'
 import Canvas from './components/Canvas.vue'
 import storyBookTheme from './theme'
 
@@ -29,16 +29,15 @@ import {
   feSend,
   feServer
 } from 'feather-icons-paths'
-import { mode } from '../packages/chakra-ui-core/src/utils/color-mode-observer';
 
 Vue.use(Chakra, {
   extendTheme: {
-    baseStyle: {
-      CButton: ({ colorMode, theme }) => ({
-        bg: mode('tomato', 'hotpink'),
-        borderRadius: "lg",
-        shadow: 'xl'
-      })
+    baseStyles: {
+      // CButton: ({ colorMode, theme }) => ({
+      //   bg: mode('tomato', 'hotpink'),
+      //   borderRadius: "lg",
+      //   shadow: 'xl'
+      // })
     }
   },
   icons: {

package.json

@@ -107,9 +107,10 @@
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-modules-commonjs": "^7.7.4",
     "@babel/plugin-transform-parameters": "^7.7.4",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-env": "^7.15.0",
     "@babel/runtime-corejs2": "^7.8.7",
     "@changesets/changelog-github": "^0.2.7",
     "@changesets/cli": "^2.7.1",
@@ -159,7 +160,6 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-testing-library": "^3.3.1",
     "jest": "^25.1.0",
-    "node-sass": "4.13",
     "prettier": "^1.19.1",
     "rimraf": "^3.0.2",
     "rollup": "^1.31.1",

packages/chakra-ui-core/src/CColorModeProvider/CColorModeProvider.js

@@ -16,7 +16,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CColorModePovider/CColorModePovider.js
  */
 
-import { colorModeObserver } from '../utils/color-mode-observer'
+import { colorModeObserverEventBus } from '../utils/color-mode-observer'
 
 /**
  * CColorModeProvider component
@@ -51,16 +51,16 @@ const CColorModeProvider = {
       }
     }
   },
-  watch: {
-    _colorMode: {
-      immediate: true,
-      handler (newVal) {
-        colorModeObserver.colorMode = newVal
-      }
-    }
+  created () {
+    colorModeObserverEventBus.$emit('change:colorMode', this._colorMode)
+    this.$watch(() => this._colorMode, (newColorMode) => {
+      colorModeObserverEventBus.$emit('change:colorMode', newColorMode)
+    })
+    colorModeObserverEventBus.$on('command:toggleColorMode', this.toggleColorMode)
   },
   methods: {
     toggleColorMode () {
+      /** Toggles colorMode */
       this._colorMode = this._colorMode === 'light' ? 'dark' : 'light'
     }
   },

packages/chakra-ui-core/src/CToast/CToast.d.ts

@@ -9,6 +9,8 @@ interface ChakraToastOptions {
   isClosable?: boolean
 }
 
-function useToast(): (options: ChakraToastOptions) => void
+export type ToastFactory = (options: ChakraToastOptions) => void
+
+export function useToast(): ToastFactory
 
 export default useToast

packages/chakra-ui-core/src/Chakra/index.js

@@ -7,16 +7,17 @@ import { parsePackIcons } from '../utils/icons'
 import internalIcons from '../lib/internal-icons'
 import { createClientDirective } from '../directives'
 import useToast from '../CToast'
+import { colorModeObserver, mode } from '../utils'
 
 /**
  * Chakra-ui Component library plugin
- * @type {import("../../types").default}
+ * @type {import("../../types").ChakraPlugin}
  */
 const Chakra = {
   /**
    *
    * @param {Vue} Vue
-   * @param {Options} options
+   * @param {import("../../types").Options} options
    */
   install (Vue, options = {}) {
     let packIcons = {}
@@ -48,7 +49,23 @@ const Chakra = {
 
     /** Install dependent plugins */
     Vue.use(VScrollLock)
+
+    Vue.mixin({
+      computed: {
+        chakraColorMode () {
+          return colorModeObserver.colorMode
+        },
+        chakraTheme () {
+          return colorModeObserver.theme
+        },
+        chakraToggleColorMode () {
+          return colorModeObserver.toggleColorMode
+        },
+        $mode: vm => (lightValue, darkValue) => mode(lightValue, darkValue, colorModeObserver)
+      }
+    })
   }
 }
 
 export default Chakra
+export { mode } from '../utils/color-mode-observer'

packages/chakra-ui-core/src/index.js

@@ -124,6 +124,7 @@ export { default as defaultTheme } from '@chakra-ui/theme-vue'
 
 // Internal icons
 export { parsePackIcons } from './utils/icons'
+export { mode, defineColorModeObserver } from './utils/color-mode-observer'
 export { default as internalIcons } from './lib/internal-icons'
 
 // Directives

packages/chakra-ui-core/src/utils/__snapshots__/color-mode-observer.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`colorModeObserver \`colorModeObserver\` should provide and observe values 1`] = `
 Object {
-  "baseStyle": Object {
+  "baseStyles": Object {
     "CButton": Object {
       "bg": "success",
       "borderRadius": "200px",

packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 1`] = `
+exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 1`] = `
 <DocumentFragment>
   .emotion-0 {
   background: var(--colors-blue-200);
@@ -17,7 +17,7 @@ exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function
 </DocumentFragment>
 `;
 
-exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 2`] = `
+exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 2`] = `
 <DocumentFragment>
   .emotion-0 {
   background: var(--colors-vue-200);
@@ -34,7 +34,7 @@ exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function
 </DocumentFragment>
 `;
 
-exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
+exports[`createStyledAttrsMixin baseStyles should be overiden by props 1`] = `
 <DocumentFragment>
   .emotion-0 {
   background: var(--colors-blue-200);
@@ -50,7 +50,7 @@ exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`createStyledAttrsMixin baseStyle should use theme.baseStyle if given 1`] = `
+exports[`createStyledAttrsMixin baseStyles should use theme.baseStyles if given 1`] = `
 <DocumentFragment>
   .emotion-0 {
   background: var(--colors-red-400);

packages/chakra-ui-core/src/utils/color-mode-observer.js

@@ -1,16 +1,19 @@
 import Vue from 'vue'
 
-export const defineColorModeObserver = ({ colorMode, theme, icons } = {}) => Vue.observable({
+export const defineColorModeObserver = ({ colorMode, theme, icons, toggleColorMode } = {}) => Vue.observable({
   colorMode,
   theme,
-  icons
+  icons,
+  toggleColorMode
 })
 
 /**
  * This observed store object observed the colorMode and stores it in an
  * observed object that other components can consume.
  */
-export const colorModeObserver = defineColorModeObserver()
+export const colorModeObserver = defineColorModeObserver({
+  toggleColorMode: emitToggleColorMode
+})
 
 /**
  * Utility function that returns a value based on the colorMode
@@ -23,3 +26,18 @@ export const mode = (lightValue, darkValue, observer) => {
   const { colorMode } = observer || colorModeObserver
   return colorMode === 'dark' ? darkValue : lightValue
 }
+
+const changeColorModeListeners = []
+
+export const colorModeObserverEventBus = new Vue()
+
+colorModeObserverEventBus.$on('change:colorMode', (newVal) => {
+  colorModeObserver.colorMode = newVal
+  changeColorModeListeners.forEach(handler => handler(newVal))
+})
+
+export function emitToggleColorMode () {
+  colorModeObserverEventBus.$emit('command:toggleColorMode')
+}
+
+export const onUpdateColorMode = fn => changeColorModeListeners.push(fn)

packages/chakra-ui-core/src/utils/color-mode-observer.test.js

@@ -12,7 +12,7 @@ describe('colorModeObserver', () => {
         outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
         inner: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)'
       },
-      baseStyle: {
+      baseStyles: {
         CButton: {
           bg: 'success',
           borderRadius: '200px',

packages/chakra-ui-core/src/utils/component.test.js

@@ -19,7 +19,7 @@ describe('createStyledAttrsMixin', () => {
     }
   }
 
-  describe('baseStyle', () => {
+  describe('baseStyles', () => {
     const renderFakeComponent = ({ theme, colorMode, ...props }) => {
       const inlineAttrs = (props && props.inlineAttrs) || ''
       return render({
@@ -35,11 +35,11 @@ describe('createStyledAttrsMixin', () => {
       })
     }
 
-    it('should use theme.baseStyle if given', () => {
+    it('should use theme.baseStyles if given', () => {
       const { asFragment } = renderFakeComponent({
         theme: {
           ...defaultTheme,
-          baseStyle: {
+          baseStyles: {
             FakeComponent: {
               bg: 'red.400',
               color: 'gray.200'
@@ -55,7 +55,7 @@ describe('createStyledAttrsMixin', () => {
         inlineAttrs: 'bg="blue.200"',
         theme: {
           ...defaultTheme,
-          baseStyle: {
+          baseStyles: {
             FakeComponent: {
               bg: 'red.400',
               color: 'gray.200'
@@ -66,10 +66,10 @@ describe('createStyledAttrsMixin', () => {
       expect(asFragment()).toMatchSnapshot()
     })
 
-    it('should accept baseStyle as a function', () => {
+    it('should accept baseStyles as a function', () => {
       const theme = {
         ...defaultTheme,
-        baseStyle: {
+        baseStyles: {
           FakeComponent: ({ colorMode, theme }) => ({
             bg: colorMode === 'light' ? 'red.400' : 'red.200',
             color: colorMode === 'light' ? 'black' : 'white',

packages/chakra-ui-core/src/utils/components.js

@@ -69,7 +69,7 @@ export const createStyledAttrsMixin = name => ({
       }
     },
     baseStyle () {
-      const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyle.${name}`)
+      const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyles.${name}`)
       return componentBaseStyleObjectOrFunction ? (
         runIfFn(componentBaseStyleObjectOrFunction, {
           theme: this.theme,

packages/chakra-ui-core/src/utils/index.js

@@ -11,4 +11,5 @@ export * from './generators'
 export * from './validators'
 export * from './functions'
 export * from './components'
+export * from './color-mode-observer'
 export * from './styled-system'

packages/chakra-ui-core/src/utils/styled-system.test.js

@@ -3,7 +3,7 @@ import { __get } from './styled-system'
 describe('__get', () => {
   it('should return correct value for given path', () => {
     const theme = {
-      baseStyle: {
+      baseStyles: {
         Button: {
           bg: 'red.400',
           color: 'black'
@@ -19,22 +19,22 @@ describe('__get', () => {
     expect(__get(theme, 1)).toBeUndefined()
     expect(__get(theme, 'someRandomKey')).toBeUndefined()
     expect(__get(theme, 'colors.red.500')).toBeUndefined()
-    expect(__get(theme, 'baseStyle.Button.bg._focus')).toBeUndefined()
+    expect(__get(theme, 'baseStyles.Button.bg._focus')).toBeUndefined()
 
-    expect(__get(theme, 'baseStyle.Button')).toMatchSnapshot()
-    expect(__get(theme, 'baseStyle.Button.bg')).toMatchSnapshot()
-    expect(__get(theme, 'baseStyle.Button.color')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyles.Button')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyles.Button.bg')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyles.Button.color')).toMatchSnapshot()
     expect(__get(theme, 'colors.red.400')).toMatchSnapshot()
 
-    expect(__get(theme.baseStyle, 'Button')).toMatchSnapshot()
-    expect(__get(theme.baseStyle, 'Button.bg')).toMatchSnapshot()
-    expect(__get(theme.baseStyle, 'Button.color')).toMatchSnapshot()
+    expect(__get(theme.baseStyles, 'Button')).toMatchSnapshot()
+    expect(__get(theme.baseStyles, 'Button.bg')).toMatchSnapshot()
+    expect(__get(theme.baseStyles, 'Button.color')).toMatchSnapshot()
     expect(__get(theme.colors, 'red.400')).toMatchSnapshot()
   })
 
   it('should return provide default value if specified', () => {
     const theme = {
-      baseStyle: {
+      baseStyles: {
         Button: {
           bg: 'red.400',
           color: 'black'
@@ -50,6 +50,6 @@ describe('__get', () => {
     expect(__get(theme, 1, 'default')).toEqual('default')
     expect(__get(theme, 'someRandomKey', 'default')).toEqual('default')
     expect(__get(theme, 'colors.red.500', 'default')).toEqual('default')
-    expect(__get(theme, 'baseStyle.Button.bg._focus', 'default')).toEqual('default')
+    expect(__get(theme, 'baseStyles.Button.bg._focus', 'default')).toEqual('default')
   })
 })

packages/chakra-ui-core/types/chakra.d.ts

@@ -9,12 +9,11 @@ export type Icon = {
 }
 
 export type Options = {
-  theme: Theme
   extendTheme: Theme
   icons: {
-      extend: { [name: string]: Icon }
-      iconPack: string
-      iconSet: IconPack
+    extend: { [name: string]: Icon }
+    iconPack: string
+    iconSet: IconPack
   }
 }
 

packages/chakra-ui-core/types/index.d.ts

@@ -1,16 +1,22 @@
 import Chakra, { Icon } from "./chakra"
 import { Theme } from "../../chakra-ui-theme/types"
 import useToast from "../src/CToast"
+import { ToastFactory } from '../src/CToast/CToast'
 
 declare module 'vue/types/vue' {
-  interface Vue {
-    $toast: ReturnType<typeof useToast>
+  export interface Vue {
+    $toast: ToastFactory
     $chakra: {
       theme: Theme
       icons: { [name: string]: Icon }
     }
+    chakraColorMode: string
+    chakraToggleColorMode: string
   }
 }
 
+export const useToast: typeof useToast
+export const defaultTheme: Theme
 export * from './component'
+export { ChakraPlugin, Options } from './chakra'
 export default Chakra