@symbo.ls/atoms 2.10.257 → 2.10.259

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'
@@ -60,16 +62,22 @@ export const Theme = {
         backgroundSize: 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/Timing.js

@@ -1,34 +1,10 @@
 'use strict'
 
-import { isString } from '@domql/utils'
-import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
-
-export const transformTransition = transition => {
-  const arr = transition.split(' ')
-
-  if (!arr.length) return transition
-
-  return arr.map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = getTimingByKey(v)
-      return mapWithSequence.timing || v
-    }
-    if (getTimingFunction(v)) return getTimingFunction(v)
-    return v
-  }).join(' ')
-}
-
-export const transformDuration = (duration, props, propertyName) => {
-  if (!isString(duration)) return
-  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
-}
-
-export const splitTransition = transition => {
-  const arr = transition.split(',')
-  if (!arr.length) return
-  return arr.map(transformTransition).join(',')
-}
+import {
+  getTimingFunction,
+  splitTransition,
+  transformDuration
+} from '@symbo.ls/scratch'
 
 export const Timing = {
   class: {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.10.257",
+  "version": "2.10.259",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "3c16c123fa0b6cf00a16e2178bbbfd1049d4c0cc",
+  "gitHead": "c454826279438617c85a5f8d8e7b3a6938d94dea",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/create-emotion": "latest",