smbls 0.15.16 → 0.15.18

package/package.json

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

package/src/atoms/Block.js

@@ -52,7 +52,48 @@ export const Block = {
     borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
 
     padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
+    paddingInline: ({ props }) => {
+      if (typeof props.paddingInline !== 'string') return
+      const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
+      return {
+        ...getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
+        ...getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
+      }
+    },
+    paddingBlock: ({ props }) => {
+      if (typeof props.paddingBlock !== 'string') return
+      const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
+      return {
+        ...getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
+        ...getSpacingByKey(paddingBlockEnd || paddingBlockStart, 'paddingBlockEnd')
+      }
+    },
+    paddingInlineStart: ({ props }) => props.paddingInlineStart ? getSpacingBasedOnRatio(props, 'paddingInlineStart') : null,
+    paddingInlineEnd: ({ props }) => props.paddingInlineEnd ? getSpacingBasedOnRatio(props, 'paddingInlineEnd') : null,
+    paddingBlockStart: ({ props }) => props.paddingBlockStart ? getSpacingBasedOnRatio(props, 'paddingBlockStart') : null,
+    paddingBlockEnd: ({ props }) => props.paddingBlockEnd ? getSpacingBasedOnRatio(props, 'paddingBlockEnd') : null,
+
     margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
+    marginInline: ({ props }) => {
+      if (typeof props.marginInline !== 'string') return
+      const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
+      return {
+        ...getSpacingByKey(marginInlineStart, 'marginInlineStart'),
+        ...getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
+      }
+    },
+    marginBlock: ({ props }) => {
+      if (typeof props.marginBlock !== 'string') return
+      const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
+      return {
+        ...getSpacingByKey(marginBlockStart, 'marginBlockStart'),
+        ...getSpacingByKey(marginBlockEnd || marginBlockStart, 'marginBlockEnd')
+      }
+    },
+    marginInlineStart: ({ props }) => props.marginInlineStart ? getSpacingBasedOnRatio(props, 'marginInlineStart') : null,
+    marginInlineEnd: ({ props }) => props.marginInlineEnd ? getSpacingBasedOnRatio(props, 'marginInlineEnd') : null,
+    marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
+    marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
     gap: ({ props }) => props.gap ? getSpacingBasedOnRatio(props, 'gap') : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),

package/src/atoms/Shape/style.js

@@ -17,22 +17,22 @@ const getComputedBackgroundColor = el => {
   // const propsTheme = getTheme(props.theme)
 
   if (!propsColor) {
-    const computedStyle = window.getComputedStyle(node)
-    // if (props.shapeDirection) {
-    //   console.group(el.parent.parent.parent.key + ' - ' + el.parent.key)
-    //   console.log(propsTheme)
-    //   console.log(getColor(props.borderColor))
-    //   console.log(getColor(props.backgroundColor))
-    //   console.log(getColor(props.background))
-    //   console.log(computedStyle.getPropertyValue('border-color'))
-    //   console.log(computedStyle.getPropertyValue('background'))
-    //   console.log(computedStyle.getPropertyValue('background-color'))
-    //   console.log(el)
-    //   console.groupEnd(el.parent.parent.parent.key + ' - ' + el.parent.key)
-    // }
-    return computedStyle.getPropertyValue('border-color') ||
-      computedStyle.getPropertyValue('background') ||
-      computedStyle.getPropertyValue('background-color')
+    // const computedStyle = window.getComputedStyle(node)
+    // // if (props.shapeDirection) {
+    // //   console.group(el.parent.parent.parent.key + ' - ' + el.parent.key)
+    // //   console.log(propsTheme)
+    // //   console.log(getColor(props.borderColor))
+    // //   console.log(getColor(props.backgroundColor))
+    // //   console.log(getColor(props.background))
+    // //   console.log(computedStyle.getPropertyValue('border-color'))
+    // //   console.log(computedStyle.getPropertyValue('background'))
+    // //   console.log(computedStyle.getPropertyValue('background-color'))
+    // //   console.log(el)
+    // //   console.groupEnd(el.parent.parent.parent.key + ' - ' + el.parent.key)
+    // // }
+    // return computedStyle.getPropertyValue('border-color') ||
+    //   computedStyle.getPropertyValue('background') ||
+    //   computedStyle.getPropertyValue('background-color')
   }
 
   return propsColor