smbls 2.6.6 → 2.6.8

package/package.json

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

package/src/Icon.js

@@ -6,7 +6,7 @@ import { toCamelCase } from '@symbo.ls/utils'
 export const Icon = {
   extend: SVG,
   props: ({ key, props, parent, context }) => {
-    const { ICONS } = context && context.SYSTEM
+    const { ICONS } = context && context.system
     const iconName = props.inheritedString || props.name || props.icon || key
     const camelCase = toCamelCase(iconName)
 

package/src/__/Media copy.js

@@ -83,7 +83,7 @@ const init = (element, s) => {
 }
 
 export const initUpdate = el => {
-  // FORCE CLIENT_STATE UPDATE:
+  // FORCE PROJECT_STATE UPDATE:
   const { props, class: className } = el
   const rootState = el.__root ? el.__root.state : el.state
   // if (el.key !== 'app') return
@@ -96,7 +96,7 @@ export const initUpdate = el => {
         if (rootState.globalTheme === parse) {
           props.theme = getTheme(theme[key])
         } else props.theme = theme
-        className.MEDIA_FORCED_BY_CLIENT_STATE = props.theme
+        className.MEDIA_FORCED_BY_PROJECT_STATE = props.theme
       }
     }
   }

package/src/atoms/Animation.js

@@ -8,7 +8,7 @@ const { keyframes } = emotion
 
 const applyAnimationProps = (animation, element) => {
   if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.SYSTEM
+  const { ANIMATION } = element.context && element.context.system
   const record = ANIMATION[animation]
   return keyframes(record)
 }

package/src/atoms/Media.js

@@ -53,9 +53,9 @@ const convertPropsToClass = (props, result, element) => {
 
 const applyMediaProps = (key, props, result, element) => {
   const { context } = element
-  if (!context.SYSTEM || !context.SYSTEM.MEDIA) return
+  if (!context.system || !context.system.MEDIA) return
   const globalTheme = getSystemTheme(element)
-  const { MEDIA } = context.SYSTEM
+  const { MEDIA } = context.system
   const mediaName = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 
@@ -80,7 +80,7 @@ const applySelectorProps = (key, props, result, element) => {
 }
 
 const applyCaseProps = (key, props, result, element) => {
-  const { CASES } = element.context && element.context.SYSTEM
+  const { CASES } = element.context && element.context.system
   const caseKey = key.slice(1)
   const isPropTrue = element.props[caseKey]
   if (!CASES[caseKey] && !isPropTrue) return

package/src/atoms/Picture.js

@@ -10,7 +10,7 @@ export const Picture = {
     attr: {
       media: element => {
         const { props, key, context } = element
-        const { MEDIA } = context.SYSTEM
+        const { MEDIA } = context.system
         const globalTheme = getSystemTheme(element)
         const mediaName = (props.media || key).slice(1)
 

package/src/atoms/Theme.js

@@ -43,7 +43,7 @@ const transformBackgroundImage = (backgroundImage, ctx, globalTheme) => ({
   backgroundImage: backgroundImage.split(', ').map(v => {
     if (v.slice(0, 2) === '--') return `var(${v})`
     if (v.includes('url') || v.includes('gradient')) return v
-    else if (ctx.SYSTEM.GRADIENT[backgroundImage]) {
+    else if (ctx.system.GRADIENT[backgroundImage]) {
       return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
     }
     return `url(${v})`
@@ -53,7 +53,7 @@ const transformBackgroundImage = (backgroundImage, ctx, globalTheme) => ({
 export const getSystemTheme = (element, state) => {
   const { context } = element
   const rootState = element.__root ? element.__root.state : element.state
-  return rootState.globalTheme || context.SYSTEM.globalTheme
+  return rootState.globalTheme || context.system.globalTheme
 }
 
 export const Theme = {