@symbo.ls/uikit 3.7.3 → 3.7.5

package/Atoms/Block.js

@@ -0,0 +1,29 @@
+'use strict'
+
+export const Block = {
+  display: 'block'
+}
+
+export const Inline = {
+  display: 'inline'
+}
+
+export const Flex = {
+  display: 'flex'
+}
+
+export const InlineFlex = {
+  display: 'inline-flex'
+}
+
+export const Grid = {
+  display: 'grid'
+}
+
+export const InlineGrid = {
+  display: 'inline-grid'
+}
+
+export const Gutter = {
+  boxSize: 'C1'
+}

package/Atoms/Box.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { useCssInProps } from 'css-in-props'
+
+// Main class assignment handler
+const onBeforeClassAssign = (element) => {
+  if (!element.context) return
+  const { props, __ref: ref } = element
+  const result = useCssInProps(props, element, { unpack: false })
+  ref.__class = result
+}
+
+export const Box = {
+  extends: [
+    'Shape',
+    'Theme'
+  ],
+
+  boxSizing: 'border-box',
+
+  onBeforeClassAssign
+}
+
+export const Hr = {
+  tag: 'hr',
+  margin: 'C1 0'
+}
+export const Br = { tag: 'br' }
+export const Li = { tag: 'li' }
+export const Ul = {
+  tag: 'ul',
+  childExtends: { extends: 'Li' }
+}
+export const Ol = {
+  tag: 'ol',
+  childExtends: { extends: 'Li' }
+}

package/Atoms/Form.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+}

package/Atoms/Grid.js

@@ -0,0 +1,37 @@
+'use strict'
+
+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
+  }
+}

package/Atoms/Hgroup.js

@@ -0,0 +1,57 @@
+'use strict'
+
+export const Hgroup = {
+  display: 'flex',
+  tag: 'hgroup',
+
+  flow: 'y',
+  gap: 'Y2',
+
+  H: {
+    color: 'title',
+    tag: 'h3',
+    lineHeight: '1em',
+    margin: '0'
+  },
+  P: {
+    margin: '0',
+    color: 'paragraph'
+  }
+}
+
+export const HgroupRows = {
+  extends: 'Hgroup',
+
+  H: {
+    display: 'flex',
+    color: 'title',
+    align: 'center space-between'
+  },
+
+  P: {
+    color: 'paragraph',
+    align: 'center space-between'
+  }
+}
+
+export const HgroupButton = {
+  extends: 'HgroupRows',
+
+  H: {
+    justifyContent: 'space-between',
+
+    Span: {},
+
+    Button: {
+      background: 'transparent',
+      color: 'currentColor',
+      padding: '0',
+      Icon: {
+        name: 'x',
+        fontSize: 'C'
+      }
+    }
+  },
+
+  P: {}
+}

package/Atoms/Iframe.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  position: 'relative',
+  minWidth: 'H',
+  minHeight: 'H'
+}

package/Atoms/Img.js

@@ -0,0 +1,22 @@
+'use strict'
+
+import { resolvePropValue } from 'attrs-in-props'
+
+export const Img = {
+  tag: 'img',
+
+  attr: {
+    src: (el) => {
+      const { props, context } = el
+      let src = (props.preSrc || '') + resolvePropValue(el, props.src)
+
+      let isUrl
+      try { isUrl = new URL(src) } catch (e) { }
+      if (isUrl) return src
+      const fileSrc = src && src.startsWith('/files/') ? src.slice(7) : src
+      const file = context.files && (context.files[src] || context.files[fileSrc])
+      if (file) return file.content && file.content.src
+    },
+    title: ({ props }) => props.title || props.alt
+  }
+}

package/Atoms/InteractiveComponent.js

@@ -0,0 +1,66 @@
+'use strict'
+
+const style = {
+  appearance: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit'
+}
+
+export const Hoverable = {
+  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 = {
+  extends: 'Hoverable',
+  ':active': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  },
+  '.active': {
+    opacity: 1
+  }
+}
+
+export const Focusable = {
+  border: 'none',
+  outline: 'solid 0 blue.3',
+  ':focus-visible': {
+    opacity: 1,
+    outline: 'solid X blue.3'
+  },
+
+  attr: {
+    tabIndex: ({ props }) => props.tabIndex
+  }
+}
+
+export const FocusableComponent = {
+  extends: 'Focusable',
+  tag: 'button',
+  fontSize: 'A',
+  type: 'button',
+  border: 'none',
+  textDecoration: 'none',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  fontFamily: 'inherit',
+  style
+}

package/Atoms/Picture.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { getSystemGlobalTheme } from './Theme.js'
+
+export const Picture = {
+  deps: { getSystemGlobalTheme },
+  tag: 'picture',
+
+  childExtends: {
+    deps: { getSystemGlobalTheme },
+    tag: 'source',
+    attr: {
+      media: (element) => {
+        const { props, key, context, deps } = element
+        const { media: MEDIA } = context.designSystem
+        const globalTheme = deps.getSystemGlobalTheme(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]
+      }
+    }
+  },
+
+  Img: {
+    width: 'inherit',
+    ignoreChildExtends: true,
+    height: 'inherit',
+    src: (element, state) => element.parent.props?.src || element.parent.src || state.src
+  }
+}

package/Atoms/Shape/index.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { exec } from '@domql/utils'
+import { SHAPES } from './style'
+import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch'
+
+export const Shape = {
+  deps: { exec, getSpacingBasedOnRatio, getMediaColor },
+
+  classlist: {
+    shape: ({ props, deps }) => {
+      const { shape } = props
+      return deps.exec(SHAPES[shape], ({ props, deps }))
+    },
+    // TODO: replace with this
+    // shape: (el) => {
+    //   const { shape } = el.props
+    //   return el.call('exec', SHAPES[shape], el)
+    // },
+    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
+    }
+  }
+}
+
+export const Circle = {
+  round: '100%'
+}
+
+export default Shape

package/Atoms/Shape.js

@@ -0,0 +1,226 @@
+'use strict'
+
+import { getActiveConfig, getColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
+import { TIMING_PROPS } from 'css-in-props/src/props'
+
+const CONFIG = getActiveConfig()
+
+export const depth = {
+  4: {
+    boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}`
+  },
+  6: {
+    boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.UNIT.default} 6${CONFIG.UNIT.default}`
+  },
+  10: {
+    boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.UNIT.default} 10${CONFIG.UNIT.default}`
+  },
+  16: {
+    boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.UNIT.default} 16${CONFIG.UNIT.default}`
+  },
+  26: {
+    boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}`
+  },
+  42: {
+    boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}`
+  }
+}
+
+const getComputedBackgroundColor = ({ props }) => {
+  return (
+    getColor(props.shapeDirectionColor) ||
+    getColor(props.borderColor) ||
+    getColor(props.backgroundColor) ||
+    getColor(props.background)
+  )
+}
+
+const inheritTransition = ({ props, deps }) => {
+  const exec = TIMING_PROPS.transition(props.transition, { props, deps })
+  return exec && exec.transition
+}
+
+export const SHAPES = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tv: {
+    borderRadius: '1.15em/2.5em'
+  },
+
+  tooltip: ({ props, deps }) => ({
+    position: props.position || 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: '.35em solid',
+      borderColor: getComputedBackgroundColor({ props, deps }),
+      transition: inheritTransition({ props, deps }),
+      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: ({ props, deps }) => ({
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      background: getComputedBackgroundColor({ props, deps }),
+      transition: inheritTransition({ props, deps }),
+      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: ({ props, deps }) => ({
+    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({ props, deps }),
+      transition: inheritTransition({ props, deps }),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      left: '0',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    },
+    '&:after': {
+      left: '100%',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    }
+  }),
+
+  chevron: ({ props, deps }) => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      transition: inheritTransition({ props, deps }),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({
+        props,
+        deps
+      })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(
+        { props, deps }
+      )} 25%, transparent 25%)`
+    },
+    '&:after': {
+      background: getComputedBackgroundColor({ props, deps }),
+      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/Atoms/Svg.js

@@ -0,0 +1,43 @@
+'use strict'
+
+// create SVG symbol
+export const Svg = {
+  tag: 'svg',
+  attr: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+  },
+  html: (el) => {
+    const { props, context } = el
+    if (props.semantic_symbols) return
+    if (props.html) return el.call('exec', props.html, el)
+
+    const { designSystem, utils } = context
+    const SVG = designSystem && designSystem.svg
+    const useSvgSprite = props.spriteId || (context.designSystem && context.designSystem.useSvgSprite)
+
+    const src = el.call('exec', props.src, el)
+    if (!useSvgSprite && src) return src
+
+    const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
+
+    const spriteId = props.spriteId
+    if (spriteId) return useSVGSymbol(spriteId)
+
+    const symbolId = Symbol.for(src)
+    let SVGKey = SVG[symbolId]
+    if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
+
+    SVGKey = SVG[symbolId] = Math.random()
+    if (src) {
+      utils.init({
+        svg: { [SVGKey]: src }
+      }, {
+        document: context.document,
+        emotion: context.emotion
+      })
+    }
+
+    return useSVGSymbol(SVGKey)
+  }
+}

package/Atoms/Text.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const Text = {}
+
+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',
+  fontWeight: '700'
+}
+export const U = { tag: 'u' }
+export const Underline = { tag: 'u' }
+export const Italic = { tag: 'i' }
+
+export const Title = {}
+
+export const Headline = {
+  tag: 'h6',
+  fontSize: 'B',
+  fontWeight: 500
+}
+
+export const Subhead = {
+  tag: 'span',
+  fontSize: 'Z1'
+}
+
+export const Footnote = {
+  tag: 'span',
+  fontSize: 'Z'
+}
+
+export const B = { tag: 'b' }
+
+export const I = { tag: 'i' }
+
+export const Data = { tag: 'data' }

package/Atoms/Theme.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { depth } from './Shape'
+import { isUndefined } from '@domql/utils'
+
+export const getSystemGlobalTheme = ({ context, state }) => {
+  const rootState = state && state.root
+  const theme = (rootState && rootState.globalTheme) || (context.designSystem && context.designSystem.globalTheme)
+  return theme === 'auto' ? null : theme
+}
+
+export const Theme = {
+  deps: {
+    depth
+  },
+
+  classlist: {
+    depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth]
+  }
+}

package/Atoms/Video.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Video = {
+  tag: 'video',
+
+  controls: true,
+
+  childExtends: {
+    tag: 'source'
+  }
+}

package/Avatar.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const Avatar = {
+  extends: 'Img',
+  display: 'block',
+  avatarType: 'adventurer-neutral',
+  borderRadius: '100%',
+  boxSize: 'C+X C+X',
+  src: el => `https://api.dicebear.com/7.x/${el.props.avatarType || 'initials'}/svg?seed=${el.props.key || el.key || 'no-avatar'}`
+}