@symbo.ls/atoms 2.10.258 → 2.10.263

package/Block.js

@@ -4,9 +4,11 @@ import { getSpacingBasedOnRatio, getSpacingByKey, transfromGap } from '@symbo.ls
 
 export const Block = {
   class: {
-    boxSizing: ({ props }) => props.boxSizing ? ({ boxSizing: props.boxSizing }) : {
-      boxSizing: 'border-box'
-    },
+    boxSizing: ({ props }) => props.boxSizing
+      ? ({ boxSizing: props.boxSizing })
+      : {
+          boxSizing: 'border-box'
+        },
 
     display: ({ props }) => props.display && ({ display: props.display }),
 
@@ -95,9 +97,11 @@ export const Block = {
     marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
     marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
-    gap: ({ props }) => props.gap ? ({
-      gap: transfromGap(props.gap)
-    }) : null,
+    gap: ({ props }) => props.gap
+      ? ({
+          gap: transfromGap(props.gap)
+        })
+      : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
@@ -122,15 +126,17 @@ export const Block = {
       const [alignItems, justifyContent] = props.flexAlign.split(' ')
       return {
         display: 'flex',
-        alignItems: alignItems,
-        justifyContent: justifyContent
+        alignItems,
+        justifyContent
       }
     },
 
     gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
-    gridColumnStart: ({ props }) => props.columnStart ? ({
-      gridColumnStart: props.columnStart
-    }) : null,
+    gridColumnStart: ({ props }) => props.columnStart
+      ? ({
+          gridColumnStart: props.columnStart
+        })
+      : null,
     gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
     gridRowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
 
@@ -152,8 +158,8 @@ export const Block = {
 }
 
 export const Span = { tag: 'span' }
-export const List = { 
-  tag: 'ul' ,
+export const List = {
+  tag: 'ul',
   childExtend: { tag: 'li' }
 }
 // export const Article = { tag: 'article' }

package/Collection.js

@@ -13,9 +13,11 @@ export const Collection = {
         for (const obj in param) { data.push(param[obj]) }
       }
 
-      data = data.map(item => !isObjectLike(item) ? {
-        props: { value: item }
-      } : item)
+      data = data.map(item => !isObjectLike(item)
+        ? {
+            props: { value: item }
+          }
+        : item)
 
       if (data.length) {
         const t = setTimeout(() => {

package/Shape/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isString, isFunction } from '@domql/utils'
+import { exec, isString } from '@domql/utils'
 import { SHAPES } from './style'
 import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch'
 import { Pseudo } from '../Pseudo'

package/Shape/style.js

@@ -13,15 +13,15 @@ export const depth = {
 }
 
 const getComputedBackgroundColor = ({ props }) => {
-  return getColor(props.shapeDirectionColor) || 
-    getColor(props.borderColor) || 
-    getColor(props.backgroundColor) || 
+  return getColor(props.shapeDirectionColor) ||
+    getColor(props.borderColor) ||
+    getColor(props.backgroundColor) ||
     getColor(props.background)
 }
 
 const inheritTransition = ({ props }) => {
   const exec = Timing.class.transition({ props })
-  return exec && exec['transition']
+  return exec && exec.transition
 }
 
 export const SHAPES = {
@@ -39,7 +39,7 @@ export const SHAPES = {
       display: 'block',
       width: '0px',
       height: '0px',
-      border: `.35em solid`,
+      border: '.35em solid',
       borderColor: getComputedBackgroundColor({ props }),
       transition: inheritTransition({ props }),
       transitionProperty: 'border-color',
@@ -128,7 +128,7 @@ export const SHAPES = {
     }
   },
 
-  hexagon: el => ({
+  hexagon: ({ props }) => ({
     position: 'relative',
     '&:before, &:after': {
       content: '""',
@@ -154,7 +154,7 @@ export const SHAPES = {
     }
   }),
 
-  chevron: el => ({
+  chevron: ({ props }) => ({
     position: 'relative',
     // overflow: 'hidden',
     '&:before, &:after': {

package/Theme.js

@@ -4,7 +4,9 @@ import {
   getMediaTheme,
   getMediaColor,
   transformTextStroke,
-  transformShadow
+  transformShadow,
+  transformBorder,
+  transformBackgroundImage
 } from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
@@ -57,19 +59,25 @@ export const Theme = {
       const globalTheme = getSystemTheme(element)
       if (!props.backgroundImage) return
       return ({
-        backgroundSize: transformBackgroundImage(props.backgroundImage, globalTheme)
+        backgroundImage: transformBackgroundImage(props.backgroundImage, globalTheme)
       })
     },
-    backgroundSize: ({ props }) => props.backgroundSize ? ({
-      backgroundSize: props.backgroundSize
-    }) : null,
-    backgroundPosition: ({ props }) => props.backgroundPosition ? ({
-      backgroundPosition: props.backgroundPosition
-    }) : null,
-
-    textStroke: ({ props }) => props.textStroke ? ({
-      WebkitTextStroke: transformTextStroke(props.textStroke)
-     }) : null,
+    backgroundSize: ({ props }) => props.backgroundSize
+      ? ({
+          backgroundSize: props.backgroundSize
+        })
+      : null,
+    backgroundPosition: ({ props }) => props.backgroundPosition
+      ? ({
+          backgroundPosition: props.backgroundPosition
+        })
+      : null,
+
+    textStroke: ({ props }) => props.textStroke
+      ? ({
+          WebkitTextStroke: transformTextStroke(props.textStroke)
+        })
+      : null,
 
     outline: ({ props }) => props.outline && ({
       outline: transformBorder(props.outline)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.10.258",
+  "version": "2.10.263",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "988320990c3bd3a293df5c9dce5419ef4551d29e",
+  "gitHead": "4f775c652016ffa5e35f6f374b1c902a7716d5b3",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/create-emotion": "latest",