smbls 2.6.7 → 2.6.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "2.6.7",
+  "version": "2.6.9",
   "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/Block.js

@@ -1,6 +1,10 @@
 'use strict'
 
-import { getSpacingBasedOnRatio, getSpacingByKey } from '@symbo.ls/scratch'
+import { getSpacingBasedOnRatio, getSpacingByKey, isString } from '@symbo.ls/scratch'
+
+const transfromGap = gap => isString(gap) && ({
+  gap: gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
+})
 
 export const Block = {
   class: {
@@ -95,7 +99,7 @@ export const Block = {
     marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
     marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
-    gap: ({ props }) => props.gap ? getSpacingBasedOnRatio(props, 'gap') : null,
+    gap: ({ props }) => props.gap ? transfromGap(props.gap) : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),

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 = {