smbls 0.15.32 → 0.15.34

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.15.32",
+  "version": "0.15.34",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/atoms/Media.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { merge, isArray } from '@domql/utils'
+import { getSystemTheme } from './Theme'
 
 const keySetters = {
   '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
@@ -16,7 +17,11 @@ const execClass = (key, props, result, element) => {
 
   if (typeof classnameExec !== 'function') return
 
-  let classExec = classnameExec({ props })
+  let classExec = classnameExec({
+    props,
+    context: element.context,
+    state: element.state
+  })
   if (isArray(classExec)) {
     classExec = classExec.reduce((a, c) => merge(a, c), {})
   }
@@ -45,13 +50,13 @@ const convertPropsToClass = (props, result, element) => {
 }
 
 const applyMediaProps = (key, props, result, element) => {
-  if (!element.context.SYSTEM || !element.context.SYSTEM.MEDIA) { return }
-  const { MEDIA } = element.context.SYSTEM
+  const { context } = element
+  if (!context.SYSTEM || !context.SYSTEM.MEDIA) return
+  const globalTheme = getSystemTheme(element)
+  const { MEDIA } = context.SYSTEM
   const mediaName = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 
-  const rootState = element.__root ? element.__root.state : element.state
-  const { globalTheme } = rootState
   const name = key.slice(1)
   const isTheme = ['dark', 'light'].includes(name)
   const matchesGlobal = name === globalTheme
@@ -114,7 +119,7 @@ const beforeClassAssign = (element, s) => {
 
 export const initUpdate = element => {
   const { props, class: className } = element
-  const rootState = element.__root ? element.__root.state : element.state
+  const globalTheme = getSystemTheme(element)
 
   const parentProps = element.parent.props
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
@@ -127,8 +132,6 @@ export const initUpdate = element => {
     })
   }
 
-  const { globalTheme } = rootState
-
   if (globalTheme) {
     const CLASS_NAMES = {
       media: {},

package/src/atoms/Theme.js

@@ -36,29 +36,60 @@ const transformShadow = shadows => shadows.split('|').map(shadow => {
   }).join(' ')
 }).join(',')
 
-const transformBackgroundImage = (backgroundImage, ctx) => ({
+const transformBackgroundImage = (backgroundImage, ctx, globalTheme) => ({
   backgroundImage: backgroundImage.split(', ').map(v => {
     if (v.includes('url') || v.includes('gradient')) return v
     else if (ctx.SYSTEM.GRADIENT[backgroundImage]) {
-      return getMediaColor(backgroundImage, 'backgroundImage')
+      return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
     }
     return `url(${v})`
   }).join(' ')
 })
 
+export const getSystemTheme = (element, state) => {
+  const { context } = element
+  const rootState = element.__root ? element.__root.state : element.state
+  return rootState.globalTheme || context.SYSTEM.globalTheme
+}
+
 export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
 
-    theme: ({ props, key }) => {
+    theme: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
       if (!props.theme) return
-      return getMediaTheme(props.theme, props.themeModifier)
+      return getMediaTheme(props.theme, props.themeModifier || globalTheme)
     },
 
-    color: ({ props }) => (props.color) && getMediaColor(props.color, 'color'),
-    background: ({ props }) => (props.background) && getMediaColor(props.background, 'background'),
-    backgroundColor: ({ props }) => (props.backgroundColor) && getMediaColor(props.backgroundColor, 'backgroundColor'),
-    backgroundImage: ({ props, context }) => (props.backgroundImage) && transformBackgroundImage(props.backgroundImage, context),
+    color: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.color) return
+      return getMediaColor(props.color, 'color', globalTheme)
+    },
+
+    background: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.background) return
+      return getMediaColor(props.background, 'background', globalTheme)
+    },
+
+    backgroundColor: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundColor) return
+      return getMediaColor(props.backgroundColor, 'backgroundColor', globalTheme)
+    },
+
+    backgroundImage: (element) => {
+      const { props, context } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundImage) return
+      return transformBackgroundImage(props.backgroundImage, context, globalTheme)
+    },
     backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
     backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,