@symbo.ls/atoms 2.29.5 → 2.29.7

package/Position.js

@@ -1,42 +0,0 @@
-'use strict'
-
-import { getSpacingByKey } from '@symbo.ls/scratch'
-
-export const Position = {
-  deps: { getSpacingByKey },
-
-  class: {
-    position: ({ props }) => props.position && ({ position: props.position }),
-    inset: ({ props, deps, context }) => {
-      const { inset } = props
-      if (context.utils.isNumber(inset)) return ({ inset })
-      if (!context.utils.isString(inset)) return
-      return { inset: inset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k).join(' ') }
-    },
-
-    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'),
-
-    verticalInset: ({ props, deps }) => {
-      const { verticalInset } = props
-      if (typeof verticalInset !== 'string') return
-      const vi = verticalInset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k)
-      return {
-        top: vi[0],
-        bottom: vi[1] || vi[0]
-      }
-    },
-
-    horizontalInset: ({ props, deps }) => {
-      const { horizontalInset } = props
-      if (typeof horizontalInset !== 'string') return
-      const vi = horizontalInset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k)
-      return {
-        left: vi[0],
-        right: vi[1] || vi[0]
-      }
-    }
-  }
-}

package/Pseudo.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export const Pseudo = {
-  class: {
-    content: ({ props }) => props.content && ({ content: props.content })
-  }
-}

package/Shape/index.js

@@ -1,43 +0,0 @@
-'use strict'
-
-import { exec, isString } from '@domql/utils'
-import { SHAPES } from './style'
-import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch'
-
-const transformBorderRadius = (radius, props, propertyName) => {
-  if (!isString(radius)) return
-  return {
-    borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ')
-  }
-}
-
-export const Shape = {
-  extend: 'Pseudo',
-
-  deps: { exec, getSpacingBasedOnRatio, getMediaColor, transformBorderRadius },
-
-  class: {
-    shape: ({ props, deps }) => {
-      const { shape } = props
-      return deps.exec(SHAPES[shape], ({ props, deps }))
-    },
-    shapeDirection: ({ props }) => {
-      const { shape, shapeDirection } = props
-      if (!shape || !shapeDirection) return
-      const shapeDir = SHAPES[shape + 'Direction']
-      return shape && shapeDir ? shapeDir[shapeDirection || 'left'] : null
-    },
-    shapeDirectionColor: ({ props, deps }) => {
-      const { background, backgroundColor } = props
-      const borderColor = {
-        borderColor: deps.getMediaColor(background || backgroundColor)
-      }
-      return props.shapeDirection ? borderColor : null
-    },
-
-    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')
-  }
-}
-
-export default Shape

package/Theme.js

@@ -1,204 +0,0 @@
-'use strict'
-
-import {
-  getMediaTheme,
-  getMediaColor,
-  transformTextStroke,
-  transformShadow,
-  transformBoxShadow,
-  transformBorder,
-  transformBackgroundImage
-} from '@symbo.ls/scratch'
-
-import { depth } from './Shape/style'
-import { isUndefined, isString } from '@domql/utils'
-
-export const getSystemGlobalTheme = ({ context, state }) => {
-  const rootState = state && state.root
-  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
-}
-
-export const Theme = {
-  deps: {
-    depth,
-    getSystemGlobalTheme,
-    getMediaTheme,
-    getMediaColor,
-    transformTextStroke,
-    transformShadow,
-    transformBoxShadow,
-    transformBorder,
-    transformBackgroundImage
-  },
-
-  class: {
-    depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth],
-
-    theme: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.theme) return
-      const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@')
-      const globalThemeForced = `@${props.themeModifier || globalTheme}`
-      if (hasSubtheme) {
-        const themeAppliedInVal = props.theme.split(' ')
-        themeAppliedInVal.splice(1, 0, globalThemeForced)
-        return deps.getMediaTheme(themeAppliedInVal)
-      } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced)
-      return deps.getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
-    },
-
-    color: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.color) return
-      return {
-        color: deps.getMediaColor(props.color, globalTheme)
-      }
-    },
-
-    background: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.background) return
-      return {
-        background: deps.getMediaColor(props.background, globalTheme)
-      }
-    },
-
-    backgroundColor: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.backgroundColor) return
-      return {
-        backgroundColor: deps.getMediaColor(props.backgroundColor, globalTheme)
-      }
-    },
-
-    backgroundImage: (element, s, context) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      let val = props.backgroundImage
-      if (!val) return
-      const file = context.files && context.files[val]
-      if (file && file.content) val = file.content.src
-      return ({
-        backgroundImage: deps.transformBackgroundImage(val, globalTheme)
-      })
-    },
-    backgroundSize: ({ props }) => !isUndefined(props.backgroundSize)
-      ? ({
-          backgroundSize: props.backgroundSize
-        })
-      : null,
-    backgroundPosition: ({ props }) => !isUndefined(props.backgroundPosition)
-      ? ({
-          backgroundPosition: props.backgroundPosition
-        })
-      : null,
-    backgroundRepeat: ({ props }) => !isUndefined(props.backgroundRepeat)
-      ? ({
-          backgroundRepeat: props.backgroundRepeat
-        })
-      : null,
-
-    textStroke: ({ props, deps }) => !isUndefined(props.textStroke)
-      ? ({
-          WebkitTextStroke: deps.transformTextStroke(props.textStroke)
-        })
-      : null,
-
-    outline: ({ props, deps }) => !isUndefined(props.outline) && ({
-      outline: deps.transformBorder(props.outline)
-    }),
-    outlineOffset: ({ props, deps }) => deps.transformSizeRatio('outlineOffset', props),
-
-    border: ({ props, deps }) => !isUndefined(props.border) && ({
-      border: deps.transformBorder(props.border)
-    }),
-
-    borderColor: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.borderColor) return
-      return {
-        borderColor: deps.getMediaColor(props.borderColor, globalTheme)
-      }
-    },
-    borderStyle: ({ props }) => !isUndefined(props.borderStyle) && ({
-      borderStyle: props.borderStyle
-    }),
-
-    borderLeft: ({ props, deps }) => !isUndefined(props.borderLeft) && ({
-      borderLeft: deps.transformBorder(props.borderLeft)
-    }),
-    borderTop: ({ props, deps }) => !isUndefined(props.borderTop) && ({
-      borderTop: deps.transformBorder(props.borderTop)
-    }),
-    borderRight: ({ props, deps }) => !isUndefined(props.borderRight) && ({
-      borderRight: deps.transformBorder(props.borderRight)
-    }),
-    borderBottom: ({ props, deps }) => !isUndefined(props.borderBottom) && ({
-      borderBottom: deps.transformBorder(props.borderBottom)
-    }),
-
-    shadow: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.backgroundImage) return
-      return ({
-        boxShadow: deps.transformShadow(props.shadow, globalTheme)
-      })
-    },
-
-    // boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({
-    //   boxShadow: deps.transformBoxShadow(props.boxShadow)
-    // }),
-
-    boxShadow: (element, state, context) => {
-      const { props, deps } = element
-      if (!isString(props.boxShadow)) return
-      const [val, hasImportant] = props.boxShadow.split('!importan')
-      const globalTheme = getSystemGlobalTheme(element)
-      const important = hasImportant ? ' !important' : ''
-      return {
-        boxShadow: deps.transformBoxShadow(val.trim(), globalTheme) + important
-      }
-    },
-
-    textShadow: ({ props, deps, context }) => !isUndefined(props.textShadow) && ({
-      textShadow: deps.transformBoxShadow(props.textShadow, context.designSystem.globalTheme)
-    }),
-
-    backdropFilter: ({ props, deps }) => !isUndefined(props.backdropFilter) && ({
-      backdropFilter: props.backdropFilter
-    }),
-
-    caretColor: ({ props }) => !isUndefined(props.caretColor) && ({
-      caretColor: props.caretColor
-    }),
-
-    opacity: ({ props }) => !isUndefined(props.opacity) && ({
-      opacity: props.opacity
-    }),
-    visibility: ({ props }) => !isUndefined(props.visibility) && ({
-      visibility: props.visibility
-    }),
-
-    columnRule: ({ props, deps }) => !isUndefined(props.columnRule) && ({
-      columnRule: deps.transformBorder(props.columnRule)
-    }),
-
-    filter: ({ props, deps }) => !isUndefined(props.filter) && ({
-      filter: props.filter
-    }),
-
-    mixBlendMode: ({ props, deps }) => !isUndefined(props.mixBlendMode) && ({
-      mixBlendMode: props.mixBlendMode
-    }),
-
-    appearance: ({ props }) => !isUndefined(props.appearance) && ({
-      appearance: props.appearance
-    })
-  }
-}

package/Timing.js

@@ -1,39 +0,0 @@
-'use strict'
-
-import {
-  getTimingFunction,
-  splitTransition,
-  transformDuration
-} from '@symbo.ls/scratch'
-
-import { isUndefined } from '@domql/utils'
-
-export const Timing = {
-  deps: {
-    getTimingFunction,
-    splitTransition,
-    transformDuration
-  },
-
-  class: {
-    transition: ({ props, deps }) => !isUndefined(props.transition) && ({
-      transition: deps.splitTransition(props.transition)
-    }),
-    willChange: ({ props }) => !isUndefined(props.willChange) && ({
-      willChange: props.willChange
-    }),
-    transitionDuration: ({ props, deps }) => !isUndefined(props.transitionDuration) && ({
-      transitionDuration: deps.transformDuration(props.transitionDuration)
-    }),
-    transitionDelay: ({ props, deps }) => !isUndefined(props.transitionDelay) && ({
-      transitionDelay: deps.transformDuration(props.transitionDelay)
-    }),
-    transitionTimingFunction: ({ props, deps }) => !isUndefined(props.transitionTimingFunction) && ({
-      transitionTimingFunction: deps.getTimingFunction(props.transitionTimingFunction)
-    }),
-    transitionProperty: ({ props }) => !isUndefined(props.transitionProperty) && ({
-      transitionProperty: props.transitionProperty,
-      willChange: props.transitionProperty
-    })
-  }
-}

package/Transform.js

@@ -1,12 +0,0 @@
-'use strict'
-
-import { isUndefined } from '@domql/utils'
-
-export const Transform = {
-  class: {
-    zoom: ({ props }) => !isUndefined(props.zoom) && ({ zoom: props.zoom }),
-    transform: ({ props }) => !isUndefined(props.transform) && ({ transform: props.transform }),
-    transformOrigin: ({ props }) => !isUndefined(props.transformOrigin) && ({ transformOrigin: props.transformOrigin }),
-    backfaceVisibility: ({ props }) => !isUndefined(props.backfaceVisibility) && ({ backfaceVisibility: props.backfaceVisibility })
-  }
-}

package/XYZ.js

@@ -1,11 +0,0 @@
-'use strict'
-
-import { isUndefined } from '@domql/utils'
-
-export const XYZ = {
-  class: {
-    zIndex: ({ props }) => !isUndefined(props.zIndex) && ({ zIndex: props.zIndex }),
-    perspective: ({ props }) => !isUndefined(props.perspective) && ({ perspective: props.perspective }),
-    perspectiveOrigin: ({ props }) => !isUndefined(props.perspectiveOrigin) && ({ perspectiveOrigin: props.perspectiveOrigin })
-  }
-}