@symbo.ls/atoms 2.11.150 → 2.11.162

package/Animation.js

@@ -3,9 +3,10 @@
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 import { isObject } from '@domql/utils'
 import { emotion } from '@symbo.ls/emotion'
-const { keyframes } = emotion
 
 const applyAnimationProps = (animation, element) => {
+  const { emotion: ctxEmotion } = element.context
+  const { keyframes } = ctxEmotion || emotion
   if (isObject(animation)) return { animationName: keyframes(animation) }
   const { ANIMATION } = element.context && element.context.designSystem
   const record = ANIMATION[animation]
@@ -13,28 +14,29 @@ const applyAnimationProps = (animation, element) => {
 }
 
 export const Animation = {
+  deps: { isObject, getTimingByKey, getTimingFunction, applyAnimationProps },
   class: {
     animation: (el) => el.props.animation && {
-      animationName: applyAnimationProps(el.props.animation, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
+      animationName: el.deps.applyAnimationProps(el.props.animation, el),
+      animationDuration: el.deps.getTimingByKey(el.props.animationDuration || 'A').timing,
+      animationDelay: el.deps.getTimingByKey(el.props.animationDelay || '0s').timing,
+      animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || 'ease'),
       animationFillMode: el.props.animationFillMode || 'both',
       animationPlayState: el.props.animationPlayState,
       animationDirection: el.props.animationDirection
     },
     animationName: (el) => el.props.animationName && {
-      animationName: applyAnimationProps(el.props.animationName, el)
+      animationName: el.deps.applyAnimationProps(el.props.animationName, el)
     },
 
-    animationDuration: ({ props }) => props.animationDuration && ({
-      animationDuration: getTimingByKey(props.animationDuration).timing
+    animationDuration: ({ props, deps }) => props.animationDuration && ({
+      animationDuration: deps.getTimingByKey(props.animationDuration).timing
     }),
-    animationDelay: ({ props }) => props.animationDelay && ({
-      animationDelay: getTimingByKey(props.animationDelay).timing
+    animationDelay: ({ props, deps }) => props.animationDelay && ({
+      animationDelay: deps.getTimingByKey(props.animationDelay).timing
     }),
-    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
-      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
+    animationTimingFunction: ({ props, deps }) => props.animationTimingFunction && ({
+      animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
     }),
     animationFillMode: ({ props }) => props.animationFillMode && ({
       animationFillMode: props.animationFillMode

package/Block.js

@@ -3,6 +3,8 @@
 import { getSpacingBasedOnRatio, getSpacingByKey, transfromGap } from '@symbo.ls/scratch'
 
 export const Block = {
+  deps: { getSpacingBasedOnRatio, getSpacingByKey, transfromGap },
+
   class: {
     boxSizing: ({ props }) => props.boxSizing
       ? ({ boxSizing: props.boxSizing })
@@ -14,36 +16,36 @@ export const Block = {
 
     hide: ({ props }) => props.hide && ({ display: 'none !important' }),
 
-    width: ({ props }) => props.width && getSpacingBasedOnRatio(props, 'width'),
-    height: ({ props }) => props.height && getSpacingBasedOnRatio(props, 'height'),
-    boxSize: ({ props }) => {
+    width: ({ props, deps }) => props.width && deps.getSpacingBasedOnRatio(props, 'width'),
+    height: ({ props, deps }) => props.height && deps.getSpacingBasedOnRatio(props, 'height'),
+    boxSize: ({ props, deps }) => {
       if (typeof props.boxSize !== 'string') return
       const [height, width] = props.boxSize.split(' ')
       return {
-        ...getSpacingByKey(height, 'height'),
-        ...getSpacingByKey(width || height, 'width')
+        ...deps.getSpacingByKey(height, 'height'),
+        ...deps.getSpacingByKey(width || height, 'width')
       }
     },
 
-    maxWidth: ({ props }) => props.maxWidth && getSpacingBasedOnRatio(props, 'maxWidth'),
-    minWidth: ({ props }) => props.minWidth && getSpacingBasedOnRatio(props, 'minWidth'),
-    widthRange: ({ props }) => {
+    maxWidth: ({ props, deps }) => props.maxWidth && deps.getSpacingBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props, deps }) => props.minWidth && deps.getSpacingBasedOnRatio(props, 'minWidth'),
+    widthRange: ({ props, deps }) => {
       if (typeof props.widthRange !== 'string') return
       const [minWidth, maxWidth] = props.widthRange.split(' ')
       return {
-        ...getSpacingByKey(minWidth, 'minWidth'),
-        ...getSpacingByKey(maxWidth || minWidth, 'maxWidth')
+        ...deps.getSpacingByKey(minWidth, 'minWidth'),
+        ...deps.getSpacingByKey(maxWidth || minWidth, 'maxWidth')
       }
     },
 
-    maxHeight: ({ props }) => props.maxHeight && getSpacingBasedOnRatio(props, 'maxHeight'),
-    minHeight: ({ props }) => props.minHeight && getSpacingBasedOnRatio(props, 'minHeight'),
-    heightRange: ({ props }) => {
+    maxHeight: ({ props, deps }) => props.maxHeight && deps.getSpacingBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props, deps }) => props.minHeight && deps.getSpacingBasedOnRatio(props, 'minHeight'),
+    heightRange: ({ props, deps }) => {
       if (typeof props.heightRange !== 'string') return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
-        ...getSpacingByKey(minHeight, 'minHeight'),
-        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+        ...deps.getSpacingByKey(minHeight, 'minHeight'),
+        ...deps.getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
     },
 
@@ -51,58 +53,58 @@ export const Block = {
 
     aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
 
-    borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
+    borderWidth: ({ props, deps }) => props.borderWidth ? deps.getSpacingBasedOnRatio(props, 'borderWidth') : null,
 
-    padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
-    paddingInline: ({ props }) => {
+    padding: ({ props, deps }) => props.padding ? deps.getSpacingBasedOnRatio(props, 'padding') : null,
+    paddingInline: ({ props, deps }) => {
       if (typeof props.paddingInline !== 'string') return
       const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
       return {
-        ...getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
-        ...getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
+        ...deps.getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
+        ...deps.getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
       }
     },
-    paddingBlock: ({ props }) => {
+    paddingBlock: ({ props, deps }) => {
       if (typeof props.paddingBlock !== 'string') return
       const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
       return {
-        ...getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
-        ...getSpacingByKey(paddingBlockEnd || paddingBlockStart, 'paddingBlockEnd')
+        ...deps.getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
+        ...deps.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,
+    paddingInlineStart: ({ props, deps }) => props.paddingInlineStart ? deps.getSpacingBasedOnRatio(props, 'paddingInlineStart') : null,
+    paddingInlineEnd: ({ props, deps }) => props.paddingInlineEnd ? deps.getSpacingBasedOnRatio(props, 'paddingInlineEnd') : null,
+    paddingBlockStart: ({ props, deps }) => props.paddingBlockStart ? deps.getSpacingBasedOnRatio(props, 'paddingBlockStart') : null,
+    paddingBlockEnd: ({ props, deps }) => props.paddingBlockEnd ? deps.getSpacingBasedOnRatio(props, 'paddingBlockEnd') : null,
 
-    margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
-    marginInline: ({ props }) => {
+    margin: ({ props, deps }) => props.margin ? deps.getSpacingBasedOnRatio(props, 'margin') : null,
+    marginInline: ({ props, deps }) => {
       if (typeof props.marginInline !== 'string') return
       const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
       return {
-        ...getSpacingByKey(marginInlineStart, 'marginInlineStart'),
-        ...getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
+        ...deps.getSpacingByKey(marginInlineStart, 'marginInlineStart'),
+        ...deps.getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
       }
     },
-    marginBlock: ({ props }) => {
+    marginBlock: ({ props, deps }) => {
       if (typeof props.marginBlock !== 'string') return
       const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
       return {
-        ...getSpacingByKey(marginBlockStart, 'marginBlockStart'),
-        ...getSpacingByKey(marginBlockEnd || marginBlockStart, 'marginBlockEnd')
+        ...deps.getSpacingByKey(marginBlockStart, 'marginBlockStart'),
+        ...deps.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,
+    marginInlineStart: ({ props, deps }) => props.marginInlineStart ? deps.getSpacingBasedOnRatio(props, 'marginInlineStart') : null,
+    marginInlineEnd: ({ props, deps }) => props.marginInlineEnd ? deps.getSpacingBasedOnRatio(props, 'marginInlineEnd') : null,
+    marginBlockStart: ({ props, deps }) => props.marginBlockStart ? deps.getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
+    marginBlockEnd: ({ props, deps }) => props.marginBlockEnd ? deps.getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
     gap: ({ props }) => props.gap
       ? ({
           gap: transfromGap(props.gap)
         })
       : null,
-    gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
+    gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
@@ -140,17 +142,17 @@ export const Block = {
     gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
     gridRowStart: ({ props }) => props.gridRowStart ? ({ gridRowStart: props.gridRowStart }) : null,
 
-    size: ({ props }) => {
+    size: ({ props, deps }) => {
       if (typeof props.heightRange !== 'string') return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
-        ...getSpacingByKey(minHeight, 'minHeight'),
-        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+        ...deps.getSpacingByKey(minHeight, 'minHeight'),
+        ...deps.getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
     },
 
     columns: ({ props }) => props.columns && ({ columns: props.columns }),
-    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
+    columnGap: ({ props, deps }) => props.columnGap ? deps.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 })
@@ -163,23 +165,24 @@ export const Hr = {
 }
 export const Br = { tag: 'br' }
 export const Span = { tag: 'span' }
-export const List = {
+export const Ul = {
   tag: 'ul',
   childExtend: { tag: 'li' }
 }
 // export const Article = { tag: 'article' }
 
 export const Gutter = {
+  deps: { getSpacingByKey },
   props: {
     size: 'C1'
   },
   class: {
-    size: ({ props }) => {
+    size: ({ props, deps }) => {
       if (typeof props.size !== 'string') return
       const [height, width] = props.size.split(' ')
       return {
-        ...getSpacingByKey(height, 'height'),
-        ...getSpacingByKey(width || height, 'width')
+        ...deps.getSpacingByKey(height, 'height'),
+        ...deps.getSpacingByKey(width || height, 'width')
       }
     }
   }

package/Grid.js

@@ -3,6 +3,8 @@
 import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
 
 export const Grid = {
+  deps: { getSpacingBasedOnRatio },
+
   props: { display: 'grid' },
 
   class: {
@@ -24,7 +26,7 @@ export const Grid = {
 
     autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
 
-    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
-    rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
+    columnGap: ({ props, deps }) => props.columnGap ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props, deps }) => props.rowGap ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null
   }
 }

package/Media.js

@@ -40,7 +40,7 @@ const execClass = (key, props, result, element) => {
     props,
     context: element.context,
     state: element.state,
-    deps: element.deps,
+    deps: element.deps
   })
   if (isArray(classExec)) {
     classExec = classExec.reduce((a, c) => merge(a, c), {})

package/Picture.js

@@ -3,15 +3,16 @@
 import { getSystemTheme } from './Theme'
 
 export const Picture = {
+  deps: { getSystemTheme },
   tag: 'picture',
 
   childExtend: {
     tag: 'source',
     attr: {
       media: (element) => {
-        const { props, key, context } = element
+        const { props, key, context, deps } = element
         const { MEDIA } = context.designSystem
-        const globalTheme = getSystemTheme(element)
+        const globalTheme = deps.getSystemTheme(element)
         const mediaName = (props.media || key).slice(1)
 
         if (mediaName === globalTheme) return '(min-width: 0px)'

package/Position.js

@@ -3,19 +3,21 @@
 import { getSpacingByKey } from '@symbo.ls/scratch'
 
 export const Position = {
+  deps: { getSpacingByKey },
+
   props: {},
 
   class: {
     position: ({ props }) => props.position && ({ position: props.position }),
-    inset: ({ props }) => {
+    inset: ({ props, deps }) => {
       const { inset } = props
       if (typeof inset !== 'string') return
-      return { inset: inset.split(' ').map(v => getSpacingByKey(v, 'k').k).join(' ') }
+      return { inset: inset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k).join(' ') }
     },
 
-    left: ({ props }) => getSpacingByKey(props.left, 'left'),
-    top: ({ props }) => getSpacingByKey(props.top, 'top'),
-    right: ({ props }) => getSpacingByKey(props.right, 'right'),
-    bottom: ({ props }) => getSpacingByKey(props.bottom, 'bottom')
+    left: ({ props, deps }) => deps.getSpacingByKey(props.left, 'left'),
+    top: ({ props, deps }) => deps.getSpacingByKey(props.top, 'top'),
+    right: ({ props, deps }) => deps.getSpacingByKey(props.right, 'right'),
+    bottom: ({ props, deps }) => deps.getSpacingByKey(props.bottom, 'bottom')
   }
 }

package/Shape/index.js

@@ -15,10 +15,12 @@ const transformBorderRadius = (radius, props, propertyName) => {
 export const Shape = {
   extend: Pseudo,
 
+  deps: { exec, getSpacingBasedOnRatio, getMediaColor, transformBorderRadius },
+
   class: {
-    shape: ({ props }) => {
+    shape: ({ props, deps }) => {
       const { shape } = props
-      return exec(SHAPES[shape], ({ props }))
+      return deps.exec(SHAPES[shape], ({ props }))
     },
     shapeDirection: ({ props }) => {
       const { shape, shapeDirection } = props
@@ -26,16 +28,16 @@ export const Shape = {
       const shapeDir = SHAPES[shape + 'Direction']
       return shape && shapeDir ? shapeDir[shapeDirection || 'left'] : null
     },
-    shapeDirectionColor: ({ props }) => {
+    shapeDirectionColor: ({ props, deps }) => {
       const { background, backgroundColor } = props
       const borderColor = {
-        borderColor: getMediaColor(background || backgroundColor)
+        borderColor: deps.getMediaColor(background || backgroundColor)
       }
       return props.shapeDirection ? borderColor : null
     },
 
-    round: ({ props, key, ...el }) => transformBorderRadius(props.round || props.borderRadius, props, 'round'),
-    borderRadius: ({ props, key, ...el }) => transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
+    round: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.round || props.borderRadius, props, 'round'),
+    borderRadius: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
   }
 }
 

package/Svg.js

@@ -1,10 +1,11 @@
 'use strict'
 
-// import { init } from '@symbo.ls/init'
+import { init } from '@symbo.ls/init'
 
 // create SVG symbol
 export const Svg = {
   tag: 'svg',
+  deps: { init },
   props: {
     style: { '*': { fill: 'currentColor' } }
   },
@@ -12,16 +13,15 @@ export const Svg = {
     xmlns: 'http://www.w3.org/2000/svg',
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'
   },
-  html: ({ key, props, context, ...el }) => {
-    const { designSystem, utils } = context
+  html: ({ key, props, context, deps, ...el }) => {
+    const { designSystem } = context
     const SVG = designSystem && designSystem.SVG
     const useSvgSprite = props.spriteId || (context.designSystem && context.designSystem.useSvgSprite)
-    const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
-
-    const init = utils && utils.init
 
     if (!useSvgSprite && props.src) return props.src
 
+    const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
+
     const spriteId = props.spriteId
     if (spriteId) return useSVGSymbol(spriteId)
 
@@ -31,7 +31,7 @@ export const Svg = {
 
     SVGKey = SVG[symbolId] = Math.random()
     if (props.src) {
-      init({
+      deps.init({
         svg: { [SVGKey]: props.src }
       }, {
         document: context.document,

package/Text.js

@@ -4,14 +4,19 @@ import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
 
 export const Text = {
   deps: { getFontSizeByKey, getFontFamily },
+
   text: ({ key, props, state, deps }) => {
     if (props.text === true) return (state && state[key]) || (props && props[key])
     return props.text
   },
+
   class: {
-    fontSize: ({ props, deps }) => props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null,
+    fontSize: (el) => {
+      const { props, deps } = el
+      return props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null
+    },
     fontFamily: ({ props, deps }) => props.fontFamily && ({
-      fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily 
+      fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily
     }),
     lineHeight: ({ props }) => props.lineHeight && ({ lineHeight: props.lineHeight }),
     // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),

package/Theme.js

@@ -17,49 +17,61 @@ export const getSystemTheme = ({ context, state }) => {
 }
 
 export const Theme = {
+  deps: {
+    depth,
+    getSystemTheme,
+    getMediaTheme,
+    getMediaColor,
+    transformTextStroke,
+    transformShadow,
+    transformBorder,
+    transformBackgroundImage
+  },
+
   class: {
-    depth: ({ props }) => props.depth && depth[props.depth],
+    depth: ({ props, deps }) => props.depth && deps.depth[props.depth],
 
     theme: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
+      const { props, deps } = element
+      const globalTheme = deps.getSystemTheme(element)
       if (!props.theme) return
-      return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
+      const getMediaTheme = deps.getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
+      return getMediaTheme
     },
 
     color: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
+      const { props, deps } = element
+      const globalTheme = deps.getSystemTheme(element)
       if (!props.color) return
       return {
-        color: getMediaColor(props.color, globalTheme)
+        color: deps.getMediaColor(props.color, globalTheme)
       }
     },
 
     background: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
+      const { props, deps } = element
+      const globalTheme = deps.getSystemTheme(element)
       if (!props.background) return
       return {
-        background: getMediaColor(props.background, globalTheme)
+        background: deps.getMediaColor(props.background, globalTheme)
       }
     },
 
     backgroundColor: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
+      const { props, deps } = element
+      const globalTheme = deps.getSystemTheme(element)
       if (!props.backgroundColor) return
       return {
-        backgroundColor: getMediaColor(props.backgroundColor, globalTheme)
+        backgroundColor: deps.getMediaColor(props.backgroundColor, globalTheme)
       }
     },
 
     backgroundImage: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
+      const { props, deps } = element
+      const globalTheme = deps.getSystemTheme(element)
       if (!props.backgroundImage) return
       return ({
-        backgroundImage: transformBackgroundImage(props.backgroundImage, globalTheme)
+        backgroundImage: deps.transformBackgroundImage(props.backgroundImage, globalTheme)
       })
     },
     backgroundSize: ({ props }) => props.backgroundSize
@@ -73,45 +85,45 @@ export const Theme = {
         })
       : null,
 
-    textStroke: ({ props }) => props.textStroke
+    textStroke: ({ props, deps }) => props.textStroke
       ? ({
-          WebkitTextStroke: transformTextStroke(props.textStroke)
+          WebkitTextStroke: deps.transformTextStroke(props.textStroke)
         })
       : null,
 
-    outline: ({ props }) => props.outline && ({
-      outline: transformBorder(props.outline)
+    outline: ({ props, deps }) => props.outline && ({
+      outline: deps.transformBorder(props.outline)
     }),
 
-    border: ({ props }) => props.border && ({
-      border: transformBorder(props.border)
+    border: ({ props, deps }) => props.border && ({
+      border: deps.transformBorder(props.border)
     }),
-    borderColor: ({ props }) => props.borderColor && ({
-      borderColor: getMediaColor(props.borderColor)
+    borderColor: ({ props, deps }) => props.borderColor && ({
+      borderColor: deps.getMediaColor(props.borderColor)
     }),
     borderStyle: ({ props }) => props.borderStyle && ({
       borderStyle: props.borderStyle
     }),
 
-    borderLeft: ({ props }) => props.borderLeft && ({
-      borderLeft: transformBorder(props.borderLeft)
+    borderLeft: ({ props, deps }) => props.borderLeft && ({
+      borderLeft: deps.transformBorder(props.borderLeft)
     }),
-    borderTop: ({ props }) => props.borderTop && ({
-      borderTop: transformBorder(props.borderTop)
+    borderTop: ({ props, deps }) => props.borderTop && ({
+      borderTop: deps.transformBorder(props.borderTop)
     }),
-    borderRight: ({ props }) => props.borderRight && ({
-      borderRight: transformBorder(props.borderRight)
+    borderRight: ({ props, deps }) => props.borderRight && ({
+      borderRight: deps.transformBorder(props.borderRight)
     }),
-    borderBottom: ({ props }) => props.borderBottom && ({
-      borderBottom: transformBorder(props.borderBottom)
+    borderBottom: ({ props, deps }) => props.borderBottom && ({
+      borderBottom: deps.transformBorder(props.borderBottom)
     }),
 
-    boxShadow: ({ props }) => props.boxShadow && ({
-      boxShadow: transformShadow(props.boxShadow)
+    boxShadow: ({ props, deps }) => props.boxShadow && ({
+      boxShadow: deps.transformShadow(props.boxShadow)
     }),
 
-    textShadow: ({ props }) => props.textShadow && ({
-      textShadow: transformShadow(props.textShadow)
+    textShadow: ({ props, deps }) => props.textShadow && ({
+      textShadow: deps.transformShadow(props.textShadow)
     }),
 
     opacity: ({ props }) => props.opacity && ({
@@ -121,8 +133,8 @@ export const Theme = {
       visibility: props.visibility
     }),
 
-    columnRule: ({ props }) => props.columnRule && ({
-      columnRule: transformBorder(props.columnRule)
+    columnRule: ({ props, deps }) => props.columnRule && ({
+      columnRule: deps.transformBorder(props.columnRule)
     }),
 
     appearance: ({ props }) => props.appearance && ({

package/Timing.js

@@ -7,21 +7,27 @@ import {
 } from '@symbo.ls/scratch'
 
 export const Timing = {
+  deps: {
+    getTimingFunction,
+    splitTransition,
+    transformDuration
+  },
+
   class: {
-    transition: ({ props }) => props.transition && ({
-      transition: splitTransition(props.transition)
+    transition: ({ props, deps }) => props.transition && ({
+      transition: deps.splitTransition(props.transition)
     }),
     willChange: ({ props }) => props.willChange && ({
       willChange: props.willChange
     }),
-    transitionDuration: ({ props }) => props.transitionDuration && ({
-      transitionDuration: transformDuration(props.transitionDuration)
+    transitionDuration: ({ props, deps }) => props.transitionDuration && ({
+      transitionDuration: deps.transformDuration(props.transitionDuration)
     }),
-    transitionDelay: ({ props }) => props.transitionDelay && ({
-      transitionDelay: transformDuration(props.transitionDelay)
+    transitionDelay: ({ props, deps }) => props.transitionDelay && ({
+      transitionDelay: deps.transformDuration(props.transitionDelay)
     }),
-    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({
-      transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
+    transitionTimingFunction: ({ props, deps }) => props.transitionTimingFunction && ({
+      transitionTimingFunction: deps.getTimingFunction(props.transitionTimingFunction)
     }),
     transitionProperty: ({ props }) => props.transitionProperty && ({
       transitionProperty: props.transitionProperty,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.150",
+  "version": "2.11.162",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "cd6667cfdf36c4f26203167255e870c26ca36bf1",
+  "gitHead": "fe3359a1d6c14d38f45f5e5db10ef2056947a228",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",