@symbo.ls/atoms 1.1.0

package/Animation.js

@@ -0,0 +1,53 @@
+'use strict'
+
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+import { isObject } from '@domql/utils'
+import { convertPropsToClass } from './Media' // eslint-disable-line no-unused-vars
+import { emotion } from '@symbo.ls/create-emotion'
+const { keyframes } = emotion
+
+const applyAnimationProps = (animation, element) => {
+  if (isObject(animation)) return { animationName: keyframes(animation) }
+  const { ANIMATION } = element.context && element.context.system
+  const record = ANIMATION[animation]
+  return keyframes(record)
+}
+
+export const Animation = {
+  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'),
+      animationFillMode: el.props.animationFillMode || 'both',
+      animationPlayState: el.props.animationPlayState,
+      animationDirection: el.props.animationDirection
+    },
+    animationName: (el) => el.props.animationName && {
+      animationName: applyAnimationProps(el.props.animationName, el)
+    },
+
+    animationDuration: ({ props }) => props.animationDuration && ({
+      animationDuration: getTimingByKey(props.animationDuration).timing
+    }),
+    animationDelay: ({ props }) => props.animationDelay && ({
+      animationDelay: getTimingByKey(props.animationDelay).timing
+    }),
+    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
+      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
+    }),
+    animationFillMode: ({ props }) => props.animationFillMode && ({
+      animationFillMode: props.animationFillMode
+    }),
+    animationPlayState: ({ props }) => props.animationPlayState && ({
+      animationPlayState: props.animationPlayState
+    }),
+    animationIterationCount: ({ props }) => props.animationIterationCount && ({
+      animationIterationCount: props.animationIterationCount || 1
+    }),
+    animationDirection: ({ props }) => props.animationDirection && ({
+      animationDirection: props.animationDirection
+    })
+  }
+}

package/Block.js

@@ -0,0 +1,151 @@
+'use strict'
+
+import { getSpacingBasedOnRatio, getSpacingByKey, isString } from '@symbo.ls/scratch'
+
+const transfromGap = gap => isString(gap) && ({
+  gap: gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
+})
+
+export const Block = {
+  class: {
+    boxSizing: ({ props }) => props.boxSizing ? ({ boxSizing: props.boxSizing }) : {
+      boxSizing: 'border-box'
+    },
+
+    display: ({ props }) => props.display && ({ display: props.display }),
+
+    hide: ({ props }) => props.hide && ({ display: 'none' }),
+
+    width: ({ props }) => props.width && getSpacingBasedOnRatio(props, 'width'),
+    height: ({ props }) => props.height && getSpacingBasedOnRatio(props, 'height'),
+    boxSize: ({ props }) => {
+      if (typeof props.boxSize !== 'string') return
+      const [height, width] = props.boxSize.split(' ')
+      return {
+        ...getSpacingByKey(height, 'height'),
+        ...getSpacingByKey(width || height, 'width')
+      }
+    },
+
+    maxWidth: ({ props }) => props.maxWidth && getSpacingBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props }) => props.minWidth && getSpacingBasedOnRatio(props, 'minWidth'),
+    widthRange: ({ props }) => {
+      if (typeof props.widthRange !== 'string') return
+      const [minWidth, maxWidth] = props.widthRange.split(' ')
+      return {
+        ...getSpacingByKey(minWidth, 'minWidth'),
+        ...getSpacingByKey(maxWidth || minWidth, 'maxWidth')
+      }
+    },
+
+    maxHeight: ({ props }) => props.maxHeight && getSpacingBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props }) => props.minHeight && getSpacingBasedOnRatio(props, 'minHeight'),
+    heightRange: ({ props }) => {
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...getSpacingByKey(minHeight, 'minHeight'),
+        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+      }
+    },
+
+    direction: ({ props }) => props.direction && ({ direction: props.direction }),
+
+    aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
+
+    borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
+
+    padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
+    paddingInline: ({ props }) => {
+      if (typeof props.paddingInline !== 'string') return
+      const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
+      return {
+        ...getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
+        ...getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
+      }
+    },
+    paddingBlock: ({ props }) => {
+      if (typeof props.paddingBlock !== 'string') return
+      const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
+      return {
+        ...getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
+        ...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,
+
+    margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
+    marginInline: ({ props }) => {
+      if (typeof props.marginInline !== 'string') return
+      const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
+      return {
+        ...getSpacingByKey(marginInlineStart, 'marginInlineStart'),
+        ...getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
+      }
+    },
+    marginBlock: ({ props }) => {
+      if (typeof props.marginBlock !== 'string') return
+      const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
+      return {
+        ...getSpacingByKey(marginBlockStart, 'marginBlockStart'),
+        ...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,
+
+    gap: ({ props }) => props.gap ? transfromGap(props.gap) : null,
+    gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
+
+    flex: ({ props }) => props.flex && ({ flex: props.flex }),
+    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
+    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
+    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
+    justifyItems: ({ props }) => props.justifyItems && ({ justifyItems: props.justifyItems }),
+    alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
+    order: ({ props }) => props.order && ({ order: props.order }),
+
+    flexWrap: ({ props }) => props.flexWrap && ({
+      display: 'flex',
+      flexFlow: props.flexWrap
+    }),
+    flexFlow: ({ props }) => props.flexFlow && ({
+      display: 'flex',
+      flexFlow: props.flexFlow
+    }),
+    flexAlign: ({ props }) => {
+      if (typeof props.flexAlign !== 'string') return
+      const [alignItems, justifyContent] = props.flexAlign.split(' ')
+      return {
+        display: 'flex',
+        alignItems: alignItems,
+        justifyContent: justifyContent
+      }
+    },
+
+    gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
+    gridColumnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
+    gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
+    gridRowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
+
+    size: ({ props }) => {
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...getSpacingByKey(minHeight, 'minHeight'),
+        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+      }
+    },
+
+    columns: ({ props }) => props.columns && ({ columns: props.columns })
+  }
+}
+
+export const Span = { tag: 'span' }
+// export const Article = { tag: 'article' }

package/Direction.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const Direction = {
+  props: {
+    direction: 'ltr'
+  },
+  class: {
+    direction: ({ props }) => ({ direction: props.direction })
+  }
+}

package/Flex.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export const Flex = {
+  props: {
+    display: 'flex'
+  },
+
+  class: {
+    flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
+    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
+    align: ({ props }) => {
+      if (typeof props.align !== 'string') return
+      const [alignItems, justifyContent] = props.align.split(' ')
+      return { alignItems, justifyContent }
+    }
+  }
+}

package/Form.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+  props: {},
+  attr: {
+    action: ({ props }) => props.action,
+    method: ({ props }) => props.method,
+    enctype: ({ props }) => props.enctype
+  }
+}

package/Grid.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
+
+export const Grid = {
+  props: { display: 'grid' },
+
+  class: {
+    area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
+    template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
+    templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+
+    column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null,
+    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
+    templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
+    autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
+    columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
+
+    row: ({ props }) => props.row ? ({ gridRow: props.row }) : null,
+    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
+    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
+    rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
+
+    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
+
+    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
+  }
+}

package/Iframe.js

@@ -0,0 +1,16 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  props: {
+    position: 'relative',
+    minWidth: 'H',
+    minHeight: 'H'
+  },
+  attr: {
+    src: ({ props }) => props.src,
+    loading: ({ props }) => props.loading,
+    allowfullscreen: ({ props }) => props.allowfullscreen,
+    referrerpolicy: ({ props }) => props.referrerpolicy
+  }
+}

package/Img.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export const Img = {
+  tag: 'img',
+
+  props: {
+    src: '',
+    alt: '',
+    title: ''
+  },
+
+  attr: {
+    src: ({ props }) => props.src,
+    alt: ({ props }) => props.alt,
+    title: ({ props }) => props.title || props.alt
+  }
+}

package/Interaction.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export const Interaction = {
+  class: {
+    userSelect: ({ props }) => props.userSelect && ({ userSelect: props.userSelect }),
+    pointerEvents: ({ props }) => props.pointerEvents && ({ pointerEvents: props.pointerEvents }),
+    cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
+  }
+}

package/InteractiveComponent.js

@@ -0,0 +1,78 @@
+'use strict'
+
+const style = {
+  appearance: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit'
+}
+
+export const Hoverable = {
+  props: {
+    transition: 'C defaultBezier',
+    transitionProperty: 'opacity, transform',
+    opacity: 0.85,
+
+    ':hover': {
+      opacity: 0.9,
+      transform: 'scale(1.015)'
+    },
+    ':active': {
+      opacity: 1,
+      transform: 'scale(1.015)'
+    },
+    '.active': {
+      opacity: 1,
+      transform: 'scale(1.015)',
+
+      ':hover': { opacity: 1 }
+    }
+  }
+}
+
+export const Clickable = {
+  extend: Hoverable,
+  props: {
+    ':active': {
+      opacity: 1,
+      transform: 'scale(1.015)'
+    },
+    '.active': {
+      opacity: 1
+    }
+  }
+}
+
+export const Focusable = {
+  props: {
+    border: 'none',
+    outline: 'solid, 0, blue .3',
+    ':focus-visible': {
+      opacity: 1,
+      outline: 'solid, X, blue .3'
+    }
+  },
+
+  attr: {
+    placeholder: ({ props }) => props.placeholder,
+    tabIndex: ({ props }) => props.tabIndex
+  }
+}
+
+export const FocusableComponent = {
+  extend: Focusable,
+  tag: 'button',
+  props: {
+    fontSize: 'A',
+    type: 'button',
+    border: 'none',
+    textDecoration: 'none',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontFamily: 'inherit',
+    style
+  },
+  attr: {
+    type: ({ props }) => props.type
+  }
+}

package/Media.js

@@ -0,0 +1,164 @@
+'use strict'
+
+import { merge, isArray } from '@domql/utils'
+import { getSystemTheme } from './Theme'
+
+const keySetters = {
+  '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
+  ':': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
+  '[': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
+  '&': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
+  $: (key, props, result, element, isSubtree) => applyCaseProps(key, props, isSubtree ? result : result.case, element),
+  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(key, props, isSubtree ? result : result.case, element),
+  '!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps(key, props, isSubtree ? result : result.case, element)
+}
+
+const execClass = (key, props, result, element) => {
+  const { class: className } = element
+  const classnameExec = className[key]
+
+  if (typeof classnameExec !== 'function') return
+
+  let classExec = classnameExec({
+    props,
+    context: element.context,
+    state: element.state
+  })
+  if (isArray(classExec)) {
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
+  }
+
+  for (const finalProp in classExec) {
+    result[finalProp] = classExec[finalProp]
+  }
+
+  return classExec
+}
+
+const convertPropsToClass = (props, result, element) => {
+  const propsClassObj = {}
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) {
+      setter(key, props[key], propsClassObj, element, true)
+      continue
+    } else {
+      execClass(key, props, propsClassObj, element)
+    }
+  }
+
+  return propsClassObj
+}
+
+const applyMediaProps = (key, props, result, element) => {
+  const { context } = element
+  if (!context.system || !context.system.MEDIA) return
+  const globalTheme = getSystemTheme(element)
+  const { MEDIA } = context.system
+  const mediaName = MEDIA[key.slice(1)]
+  const generatedClass = convertPropsToClass(props, result, element)
+
+  const name = key.slice(1)
+  const isTheme = ['dark', 'light'].includes(name)
+  const matchesGlobal = name === globalTheme
+
+  if (globalTheme && isTheme) {
+    if (matchesGlobal) return merge(result, generatedClass)
+    return
+  }
+
+  const mediaKey = `@media screen and ${mediaName}`
+  result[mediaKey] = generatedClass
+  return result[mediaKey]
+}
+
+const applySelectorProps = (key, props, result, element) => {
+  const selectorKey = `&${key}`
+  result[selectorKey] = convertPropsToClass(props, result, element)
+  return result[selectorKey]
+}
+
+const applyCaseProps = (key, props, result, element) => {
+  const { CASES } = element.context && element.context.system
+  const caseKey = key.slice(1)
+  const isPropTrue = element.props[caseKey]
+  if (!CASES[caseKey] && !isPropTrue) return
+  return merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyConditionalCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  const isPropTrue = element.props[caseKey] || element.state[caseKey] === true
+  if (!isPropTrue) return // remove classname if not here
+  return merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyConditionalFalsyProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  const isPropTrue = element.props[caseKey] || element.state[caseKey] === true
+  if (!isPropTrue) return merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element))
+
+const beforeClassAssign = (element, s) => {
+  const { props, class: className } = element
+
+  const CLASS_NAMES = {
+    media: {},
+    selector: {},
+    case: {}
+  }
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) setter(key, props[key], CLASS_NAMES, element)
+  }
+
+  merge(className, CLASS_NAMES)
+}
+
+export const initUpdate = element => {
+  const { props, class: className } = element
+  const globalTheme = getSystemTheme(element)
+
+  const parentProps = element.parent.props
+  if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
+    element.setProps({
+      spacingRatio: parentProps.spacingRatio,
+      inheritSpacingRatio: true
+    }, {
+      preventRecursive: true,
+      ignoreInitUpdate: true
+    })
+  }
+
+  if (globalTheme) {
+    const CLASS_NAMES = {
+      media: {},
+      selector: {},
+      case: {}
+    }
+
+    for (const key in props) {
+      const setter = keySetters[key.slice(0, 1)]
+      if (key === 'theme') {
+        props.update({
+          themeModifier: globalTheme
+        }, { preventRecursive: true, ignoreInitUpdate: true, preventDefineUpdate: '$setStateCollection' })
+      } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
+      if (setter) setter(key, props[key], CLASS_NAMES, element)
+    }
+
+    if (Object.keys(CLASS_NAMES.media).length) {
+      className.media = CLASS_NAMES.media
+    }
+    className.selector = CLASS_NAMES.selector
+    className.case = CLASS_NAMES.case
+  }
+}
+
+export const Media = {
+  on: { beforeClassAssign, initUpdate }
+}

package/Overflow.js

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

package/Picture.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import { getSystemTheme } from './Theme'
+
+export const Picture = {
+  tag: 'picture',
+
+  childExtend: {
+    tag: 'source',
+    attr: {
+      media: element => {
+        const { props, key, context } = element
+        const { MEDIA } = context.system
+        const globalTheme = getSystemTheme(element)
+        const mediaName = (props.media || key).slice(1)
+
+        if (mediaName === globalTheme) return '(min-width: 0px)'
+        else if (mediaName === 'dark' || mediaName === 'light') return '(max-width: 0px)'
+
+        return MEDIA[mediaName]
+      },
+      srcset: ({ props }) => props.srcset
+    }
+  },
+
+  // Img: ({ props }) => ({
+  //   width: 'inherit',
+  //   height: 'inherit',
+  //   src: props.src
+  // })
+}

package/Position.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { getSpacingByKey } from '@symbo.ls/scratch'
+
+export const Position = {
+  props: {},
+
+  class: {
+    position: ({ props }) => props.position && ({ position: props.position }),
+    inset: ({ props }) => {
+      const { inset } = props
+      if (typeof inset !== 'string') return
+      return { inset: inset.split(' ').map(v => 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')
+  }
+}

package/Pseudo.js

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

package/SVG.js

@@ -0,0 +1,16 @@
+'use strict'
+
+const useSVGSymbol = file => `<use xlink:href="${file}" />`
+
+// create SVG symbol
+export const SVG = {
+  tag: 'svg',
+  props: {
+    style: { '*': { fill: 'currentColor' } }
+  },
+  attr: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+  },
+  html: ({ key, props }) => useSVGSymbol(props.src)
+}

package/Shape/index.js

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

package/Shape/style.js

@@ -0,0 +1,204 @@
+'use strict'
+
+import { UNIT, getColor, getTheme } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
+import { Timing } from '../Timing'
+
+export const depth = {
+  4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
+  6: { boxShadow: `rgba(0,0,0,.10) 0 3${UNIT.default} 6${UNIT.default}` },
+  10: { boxShadow: `rgba(0,0,0,.10) 0 4${UNIT.default} 10${UNIT.default}` },
+  16: { boxShadow: `rgba(0,0,0,.10) 0 8${UNIT.default} 16${UNIT.default}` },
+  26: { boxShadow: `rgba(0,0,0,.10) 0 14${UNIT.default} 26${UNIT.default}` },
+  42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
+}
+
+const getComputedBackgroundColor = ({ props }) => {
+  return getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
+}
+
+const inheritTransition = (el) => {
+  const exec = Timing.class.transition(el)
+  return exec && exec['transition']
+}
+
+export const SHAPES = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tv: {
+    borderRadius: '1.15em/2.5em'
+  },
+
+  tooltip: el => ({
+    position: el.props.position || 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: `.35em solid`,
+      borderColor: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'border-color',
+      position: 'absolute',
+      borderRadius: '.15em'
+    }
+  }),
+
+  tooltipDirection: {
+    top: {
+      '&:before': {
+        top: '0',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        right: '0',
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        bottom: '0',
+        left: '50%',
+        transform: 'translate(-50%, 50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        left: '0',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  tag: el => ({
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background',
+      borderRadius: '.25em',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%'
+    }
+  }),
+
+  tagDirection: {
+    top: {
+      '&:before': {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translate(-50%, 50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        left: '100%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        top: '100%',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        right: '100%',
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  hexagon: el => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      borderRadius: '.25em',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      left: '0',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    },
+    '&:after': {
+      left: '100%',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    }
+  }),
+
+  chevron: el => ({
+    position: 'relative',
+    // overflow: 'hidden',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+
+    },
+    '&:before': {
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%)`
+    },
+    '&:after': {
+      background: getComputedBackgroundColor(el),
+      borderRadius: '.25em'
+    }
+  }),
+
+  chevronDirection: {
+    left: {
+      '&:before': {
+        height: '100%',
+        left: '100%',
+        transform: 'translate3d(-1%, -50%, 1px) scale(-1, 1)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '0',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        height: '100%',
+        left: '0',
+        transform: 'translate3d(-99%, -50%, 1px)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '100%',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    }
+  }
+}

package/Text.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
+
+export const Text = {
+  text: ({ key, props, state }) => {
+    if (props.text === true) return (state && state[key]) || (props && props[key])
+    return props.text
+  },
+  class: {
+    fontSize: ({ props }) => props.fontSize ? getFontSizeByKey(props.fontSize) : null,
+    fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(props.fontFamily) || props.fontFamily }),
+    lineHeight: ({ props }) => props.lineHeight && ({ lineHeight: props.lineHeight }),
+    // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
+    textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
+    textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
+    whiteSpace: ({ props }) => props.whiteSpace && ({ whiteSpace: props.whiteSpace }),
+    letterSpacing: ({ props }) => props.letterSpacing && ({ letterSpacing: props.letterSpacing }),
+    textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),
+    fontWeight: ({ props }) => props.fontWeight && ({
+      fontWeight: props.fontWeight,
+      fontVariationSettings: '"wght" ' + props.fontWeight
+    })
+  }
+}
+
+export const H1 = { tag: 'h1' }
+export const H2 = { tag: 'h2' }
+export const H3 = { tag: 'h3' }
+export const H4 = { tag: 'h4' }
+export const H5 = { tag: 'h5' }
+export const H6 = { tag: 'h6' }
+export const P = { tag: 'p' }
+export const Caption = { tag: 'caption' }
+export const Strong = {
+  tag: 'strong',
+  props: { fontWeight: '700' }
+}
+export const Underline = { tag: 'u' }
+export const Italic = { tag: 'i' }

package/Theme.js

@@ -0,0 +1,136 @@
+'use strict'
+
+import { getSpacingByKey, getMediaTheme, getColor, getMediaColor } 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.system.GRADIENT[backgroundImage]) {
+      return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
+    }
+    return `url(${v})`
+  }).join(' ')
+})
+
+export const getSystemTheme = (element, state) => {
+  const { context } = element
+  const rootState = element.__root ? element.__root.state : element.state
+  return rootState.globalTheme || context.system.globalTheme
+}
+
+export const Theme = {
+  class: {
+    depth: ({ props }) => depth[props.depth],
+
+    theme: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.theme) return
+      return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
+    },
+
+    color: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.color) return
+      return getMediaColor(props.color, 'color', globalTheme)
+    },
+
+    background: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.background) return
+      return getMediaColor(props.background, 'background', globalTheme)
+    },
+
+    backgroundColor: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundColor) return
+      return getMediaColor(props.backgroundColor, 'backgroundColor', globalTheme)
+    },
+
+    backgroundImage: (element) => {
+      const { props, context } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundImage) return
+      return transformBackgroundImage(props.backgroundImage, context, globalTheme)
+    },
+    backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
+    backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,
+
+    textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
+
+    outline: ({ props }) => props.outline && ({
+      outline: transformBorder(props.outline)
+    }),
+
+    border: ({ props }) => props.border && ({
+      border: transformBorder(props.border)
+    }),
+    borderColor: ({ props }) => (props.borderColor) && getMediaColor(props.borderColor, 'borderColor'),
+    borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
+
+    borderLeft: ({ props }) => props.borderLeft && ({
+      borderLeft: transformBorder(props.borderLeft)
+    }),
+    borderTop: ({ props }) => props.borderTop && ({
+      borderTop: transformBorder(props.borderTop)
+    }),
+    borderRight: ({ props }) => props.borderRight && ({
+      borderRight: transformBorder(props.borderRight)
+    }),
+    borderBottom: ({ props }) => props.borderBottom && ({
+      borderBottom: transformBorder(props.borderBottom)
+    }),
+
+    boxShadow: ({ props }) => props.boxShadow && ({
+      boxShadow: transformShadow(props.boxShadow)
+    }),
+
+    textShadow: ({ props }) => props.textShadow && ({
+      textShadow: transformShadow(props.textShadow)
+    }),
+
+    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
+    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
+  }
+}

package/Timing.js

@@ -0,0 +1,55 @@
+'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(',')
+}
+
+export const Timing = {
+  class: {
+    transition: ({ props }) => props.transition && ({
+      transition: splitTransition(props.transition)
+    }),
+    willChange: ({ props }) => props.willChange && ({
+      willChange: props.willChange
+    }),
+    transitionDuration: ({ props }) => props.transitionDuration && ({
+      transitionDuration: transformDuration(props.transitionDuration)
+    }),
+    transitionDelay: ({ props }) => props.transitionDelay && ({
+      transitionDelay: transformDuration(props.transitionDelay)
+    }),
+    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({
+      transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
+    }),
+    transitionProperty: ({ props }) => props.transitionProperty && ({
+      transitionProperty: props.transitionProperty,
+      willChange: props.transitionProperty
+    })
+  }
+}

package/Transform.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export const Transform = {
+  class: {
+    transform: ({ props }) => props.transform && ({ transform: props.transform }),
+    transformOrigin: ({ props }) => props.transformOrigin && ({ transformOrigin: props.transformOrigin })
+  }
+}

package/XYZ.js

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

package/index.js

@@ -0,0 +1,24 @@
+'use strict'
+
+export * from './Block'
+export * from './Direction'
+export * from './Flex'
+export * from './Grid'
+export * from './Img'
+export * from './Form'
+export * from './Media'
+export * from './Iframe'
+export * from './Interaction'
+export * from './InteractiveComponent'
+export * from './Overflow'
+export * from './Position'
+export * from './Picture'
+export * from './Pseudo'
+export * from './SVG'
+export * from './Shape'
+export * from './Theme'
+export * from './Text'
+export * from './Timing'
+export * from './Transform'
+export * from './XYZ'
+export * from './Animation'

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@symbo.ls/atoms",
+  "version": "1.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@domql/utils": "latest",
+    "@symbo.ls/scratch": "latest",
+    "@symbo.ls/create-emotion": "latest"
+  },
+  "source": "src/index.js"
+}