@symbo.ls/atoms 2.10.256 → 2.10.257

package/Block.js

@@ -1,11 +1,6 @@
 'use strict'
 
-import { isString } from '@domql/utils'
-import { getSpacingBasedOnRatio, getSpacingByKey } from '@symbo.ls/scratch'
-
-const transfromGap = gap => isString(gap) && ({
-  gap: gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
-})
+import { getSpacingBasedOnRatio, getSpacingByKey, transfromGap } from '@symbo.ls/scratch'
 
 export const Block = {
   class: {
@@ -100,7 +95,9 @@ export const Block = {
     marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
     marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
-    gap: ({ props }) => props.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 }),
@@ -131,7 +128,9 @@ export const Block = {
     },
 
     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,
 
@@ -145,7 +144,7 @@ export const Block = {
     },
 
     columns: ({ props }) => props.columns && ({ columns: props.columns }),
-    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props.columnGap, 'columnGap') : null,
+    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
     columnSpan: ({ props }) => props.columnSpan && ({ columns: props.columnSpan }),
     columnFill: ({ props }) => props.columnFill && ({ columns: props.columnFill }),
     columnCount: ({ props }) => props.columnCount && ({ columns: props.columnCount })

package/Shape/index.js

@@ -28,7 +28,9 @@ export const Shape = {
     },
     shapeDirectionColor: ({ props }) => {
       const { background, backgroundColor } = props
-      const borderColor = getMediaColor(background || backgroundColor, 'borderColor')
+      const borderColor = {
+        borderColor: getMediaColor(background || backgroundColor)
+      }
       return props.shapeDirection ? borderColor : null
     },
 

package/Theme.js

@@ -1,56 +1,14 @@
 'use strict'
 
-import { getSpacingByKey, getMediaTheme, getColor, getMediaColor } from '@symbo.ls/scratch'
+import {
+  getMediaTheme,
+  getMediaColor,
+  transformTextStroke,
+  transformShadow
+} from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
 
-const isBorderStyle = str =>
-  ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
-
-const transformBorder = border => {
-  const arr = border.split(', ')
-  return arr.map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    else if (isBorderStyle(v)) return v || 'solid'
-    else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
-    else if (getColor(v).length > 2) return getColor(v)
-    return getSpacingByKey(v, 'border').border
-  }).join(' ')
-}
-
-const transformTextStroke = stroke => ({
-  WebkitTextStroke: stroke.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
-  }).join(' ')
-})
-
-export const transformShadow = shadows => shadows.split('|').map(shadow => {
-  return shadow.split(', ').map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (getColor(v).length > 2) return getColor(v)
-    if (v.includes('px') || v.slice(-2) === 'em') return v
-    const arr = v.split(' ')
-    if (!arr.length) return v
-    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
-  }).join(' ')
-}).join(',')
-
-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.designSystem.GRADIENT[backgroundImage]) {
-      return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
-    }
-    else if (v.includes('/') || v.includes('http')) return `url(${v})`
-    return v
-  }).join(' ')
-})
-
 export const getSystemTheme = ({ context, state }) => {
   const rootState = state && state.__root
   return rootState ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
@@ -58,7 +16,7 @@ export const getSystemTheme = ({ context, state }) => {
 
 export const Theme = {
   class: {
-    depth: ({ props }) => depth[props.depth],
+    depth: ({ props }) => props.depth && depth[props.depth],
 
     theme: (element) => {
       const { props } = element
@@ -71,33 +29,47 @@ export const Theme = {
       const { props } = element
       const globalTheme = getSystemTheme(element)
       if (!props.color) return
-      return getMediaColor(props.color, 'color', globalTheme)
+      return {
+        color: getMediaColor(props.color, globalTheme)
+      }
     },
 
     background: (element) => {
       const { props } = element
       const globalTheme = getSystemTheme(element)
       if (!props.background) return
-      return getMediaColor(props.background, 'background', globalTheme)
+      return {
+        background: getMediaColor(props.background, globalTheme)
+      }
     },
 
     backgroundColor: (element) => {
       const { props } = element
       const globalTheme = getSystemTheme(element)
       if (!props.backgroundColor) return
-      return getMediaColor(props.backgroundColor, 'backgroundColor', globalTheme)
+      return {
+        backgroundColor: getMediaColor(props.backgroundColor, globalTheme)
+      }
     },
 
     backgroundImage: (element) => {
-      const { props, context } = element
+      const { props } = element
       const globalTheme = getSystemTheme(element)
       if (!props.backgroundImage) return
-      return transformBackgroundImage(props.backgroundImage, context, globalTheme)
+      return ({
+        backgroundSize: transformBackgroundImage(props.backgroundImage, globalTheme)
+      })
     },
-    backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
-    backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,
+    backgroundSize: ({ props }) => props.backgroundSize ? ({
+      backgroundSize: props.backgroundSize
+    }) : null,
+    backgroundPosition: ({ props }) => props.backgroundPosition ? ({
+      backgroundPosition: props.backgroundPosition
+    }) : null,
 
-    textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
+    textStroke: ({ props }) => props.textStroke ? ({
+      WebkitTextStroke: transformTextStroke(props.textStroke)
+     }) : null,
 
     outline: ({ props }) => props.outline && ({
       outline: transformBorder(props.outline)
@@ -106,8 +78,12 @@ export const Theme = {
     border: ({ props }) => props.border && ({
       border: transformBorder(props.border)
     }),
-    borderColor: ({ props }) => (props.borderColor) && getMediaColor(props.borderColor, 'borderColor'),
-    borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
+    borderColor: ({ props }) => props.borderColor && ({
+      borderColor: getMediaColor(props.borderColor)
+    }),
+    borderStyle: ({ props }) => props.borderStyle && ({
+      borderStyle: props.borderStyle
+    }),
 
     borderLeft: ({ props }) => props.borderLeft && ({
       borderLeft: transformBorder(props.borderLeft)
@@ -130,8 +106,12 @@ export const Theme = {
       textShadow: transformShadow(props.textShadow)
     }),
 
-    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
-    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility }),
+    opacity: ({ props }) => props.opacity && ({
+      opacity: props.opacity
+    }),
+    visibility: ({ props }) => props.visibility && ({
+      visibility: props.visibility
+    }),
 
     columnRule: ({ props }) => props.columnRule && ({
       columnRule: transformBorder(props.columnRule)

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.10.256",
+  "version": "2.10.257",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "04de430b9c394947cfeafcc8ac966281fff4a6a6",
+  "gitHead": "3c16c123fa0b6cf00a16e2178bbbfd1049d4c0cc",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/create-emotion": "latest",
     "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest"
   },
-  "source": "src/index.js"
+  "source": "src/index.js",
+  "devDependencies": {
+    "@babel/core": "^7.12.0"
+  }
 }