smbls 0.15.32 → 0.15.33

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.33",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/atoms/Media.js

@@ -16,7 +16,7 @@ const execClass = (key, props, result, element) => {
 
   if (typeof classnameExec !== 'function') return
 
-  let classExec = classnameExec({ props })
+  let classExec = classnameExec({ props, context: element.context })
   if (isArray(classExec)) {
     classExec = classExec.reduce((a, c) => merge(a, c), {})
   }
@@ -45,13 +45,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
+  console.log(context, element)
+  if (!context.SYSTEM || !context.SYSTEM.MEDIA) return
+  const { globalTheme, 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
@@ -113,8 +113,7 @@ const beforeClassAssign = (element, s) => {
 }
 
 export const initUpdate = element => {
-  const { props, class: className } = element
-  const rootState = element.__root ? element.__root.state : element.state
+  const { props, context, class: className } = element
 
   const parentProps = element.parent.props
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
@@ -127,7 +126,7 @@ export const initUpdate = element => {
     })
   }
 
-  const { globalTheme } = rootState
+  const { globalTheme } = context.SYSTEM
 
   if (globalTheme) {
     const CLASS_NAMES = {

package/src/atoms/Theme.js

@@ -50,14 +50,19 @@ export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
 
-    theme: ({ props, key }) => {
+    theme: ({ props, context }) => {
       if (!props.theme) return
-      return getMediaTheme(props.theme, props.themeModifier)
+      return getMediaTheme(props.theme, props.themeModifier || context.SYSTEM.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'),
+    color: ({ props, context }) => props.color && (
+      getMediaColor(props.color, 'color', context.SYSTEM.globalTheme)
+    ),
+    background: ({ props, context }) => {
+      if (!props.background) return
+      return getMediaColor(props.background, 'background', context.SYSTEM.globalTheme)
+    },
+    backgroundColor: ({ props, context }) => (props.backgroundColor) && getMediaColor(props.backgroundColor, 'backgroundColor', context.SYSTEM.globalTheme),
     backgroundImage: ({ props, context }) => (props.backgroundImage) && transformBackgroundImage(props.backgroundImage, context),
     backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
     backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,