smbls 2.6.3 → 2.6.5

package/package.json

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

package/src/__/Media copy.js

@@ -83,7 +83,7 @@ const init = (element, s) => {
 }
 
 export const initUpdate = el => {
-  // FORCE STATE UPDATE:
+  // FORCE CLIENT_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_STATE = props.theme
+        className.MEDIA_FORCED_BY_CLIENT_STATE = props.theme
       }
     }
   }

package/src/atoms/Block.js

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

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.CLIENT_SYSTEM.GRADIENT[backgroundImage]) {
       return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
     }
     return `url(${v})`