Support baseStyle setting in theme

Author: simpletrontdip

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`__get should return correct value for given path 1`] = `
+Object {
+  "bg": "red.400",
+  "color": "black",
+}
+`;
+
+exports[`__get should return correct value for given path 2`] = `"red.400"`;
+
+exports[`__get should return correct value for given path 3`] = `"black"`;
+
+exports[`__get should return correct value for given path 4`] = `"#ff0000"`;
+
+exports[`__get should return correct value for given path 5`] = `
+Object {
+  "bg": "red.400",
+  "color": "black",
+}
+`;
+
+exports[`__get should return correct value for given path 6`] = `"red.400"`;
+
+exports[`__get should return correct value for given path 7`] = `"black"`;
+
+exports[`__get should return correct value for given path 8`] = `"#ff0000"`;

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css'
-import { composeSystem } from './styled-system'
+import { composeSystem, __get } from './styled-system'
 import { hasOwn, extractChakraAttrs } from './object'
 
 export const isVueComponent = (value) => {
-  return (!!value && !!value.$el)
+  return !!value && !!value.$el
 }
 
 /**
@@ -12,7 +12,7 @@ export const isVueComponent = (value) => {
  * for primitives with changes in the $parent $attrs
  * and $listeners objects
  * @param {String} property
-*/
+ */
 export function createWatcher (property) {
   return {
     handler (newVal, oldVal) {
@@ -32,8 +32,8 @@ export function createWatcher (property) {
 /**
  * Create mixin for style attributes
  * @param {String} name Component name
-*/
-export const createStyledAttrsMixin = (name, isPseudo) => ({
+ */
+export const createStyledAttrsMixin = name => ({
   name,
   inheritAttrs: false,
   inject: ['$chakraTheme', '$chakraColorMode'],
@@ -68,15 +68,24 @@ export const createStyledAttrsMixin = (name, isPseudo) => ({
         nativeAttrs
       }
     },
+    baseStyle () {
+      return __get(this.theme, `baseStyle.${name}`, {})
+    },
     className () {
       const { styleAttrs } = this.splitProps
-      const boxStylesObject = composeSystem(styleAttrs, this.theme)
+      const boxStylesObject = composeSystem(
+        {
+          ...this.baseStyle,
+          ...styleAttrs
+        },
+        this.theme
+      )
       return css(boxStylesObject)
     },
     /** Computed attributes object */
     computedAttrs () {
       return {
-        ...name && { 'data-chakra-component': name },
+        ...(name && { 'data-chakra-component': name }),
         ...this.splitProps.nativeAttrs
       }
     },

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

@@ -7,18 +7,13 @@ import { css } from '@chakra-ui/styled-system'
  * @param {Object} obj Theme property
  * @param {String} key Theme key
  * @param {String} def Definition if non-existent
- * @param {*} p
- * @param {*} undef
  */
-export const __get = (obj, key, def, p, undef) => {
-  key = key && key.split ? key.split('.') : [key]
+export const __get = (obj, key, def) => {
+  const keys = key && key.split ? key.split('.') : [key]
 
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef
-  }
-
-  return obj === undef ? def : obj
+  return (
+    keys.reduce((res, key) => res && res[key], obj) || def
+  )
 }
 
-export const composeSystem = (props = {}, theme = {}) =>
-  css(props)(theme)
+export const composeSystem = (props = {}, theme = {}) => css(props)(theme)

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

@@ -0,0 +1,55 @@
+import { __get } from './styled-system'
+
+describe('__get', () => {
+  it('should return correct value for given path', () => {
+    const theme = {
+      baseStyle: {
+        Button: {
+          bg: 'red.400',
+          color: 'black'
+        }
+      },
+      colors: {
+        red: {
+          400: '#ff0000'
+        }
+      }
+    }
+
+    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, 'baseStyle.Button')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyle.Button.bg')).toMatchSnapshot()
+    expect(__get(theme, 'baseStyle.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.colors, 'red.400')).toMatchSnapshot()
+  })
+
+  it('should return provide default value if specified', () => {
+    const theme = {
+      baseStyle: {
+        Button: {
+          bg: 'red.400',
+          color: 'black'
+        }
+      },
+      colors: {
+        red: {
+          400: '#ff0000'
+        }
+      }
+    }
+
+    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')
+  })
+})