@symbo.ls/uikit 2.10.253 → 2.10.267

package/Atoms/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.designSystem
+        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/Atoms/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/Atoms/Pseudo.js

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

package/Atoms/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: ({ props }) => {
+      const { shape } = props
+      return exec(SHAPES[shape], ({ props }))
+    },
+    shapeDirection: ({ props }) => {
+      const { shape, shapeDirection } = props
+      if (!shape || !shapeDirection) return
+      const shapeDir = SHAPES[shape + 'Direction']
+      return shape && shapeDir ? shapeDir[shapeDirection || 'left'] : null
+    },
+    shapeDirectionColor: ({ props }) => {
+      const { background, backgroundColor } = props
+      const borderColor = {
+        borderColor: 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')
+  }
+}
+
+export default Shape

package/Atoms/Shape/style.js

@@ -0,0 +1,207 @@
+'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.shapeDirectionColor) ||
+    getColor(props.borderColor) ||
+    getColor(props.backgroundColor) ||
+    getColor(props.background)
+}
+
+const inheritTransition = ({ props }) => {
+  const exec = Timing.class.transition({ props })
+  return exec && exec.transition
+}
+
+export const SHAPES = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tv: {
+    borderRadius: '1.15em/2.5em'
+  },
+
+  tooltip: ({ props }) => ({
+    position: props.position || 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: '.35em solid',
+      borderColor: getComputedBackgroundColor({ props }),
+      transition: inheritTransition({ props }),
+      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 }) => ({
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      background: getComputedBackgroundColor({ props }),
+      transition: inheritTransition({ props }),
+      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 }) => ({
+    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 }),
+      transition: inheritTransition({ props }),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      left: '0',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    },
+    '&:after': {
+      left: '100%',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    }
+  }),
+
+  chevron: ({ props }) => ({
+    position: 'relative',
+    // overflow: 'hidden',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      transition: inheritTransition({ props }),
+      transitionProperty: 'background'
+
+    },
+    '&:before': {
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props })} 25%, transparent 25%)`
+    },
+    '&:after': {
+      background: getComputedBackgroundColor({ props }),
+      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,44 @@
+'use strict'
+
+// import { init } from '@symbo.ls/init'
+
+// 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, context, ...el }) => {
+    const { designSystem, utils } = 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 spriteId = props.spriteId
+    if (spriteId) return useSVGSymbol(spriteId)
+
+    const symbolId = Symbol.for(props.src)
+    let SVGKey = SVG[symbolId]
+    if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
+
+    SVGKey = SVG[symbolId] = Math.random()
+    if (props.src) {
+      init({
+        svg: { [SVGKey]: props.src }
+      }, {
+        document: context.document,
+        emotion: context.emotion
+      })
+    }
+
+    return useSVGSymbol(SVGKey)
+  }
+}

package/Atoms/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/Atoms/Theme.js

@@ -0,0 +1,128 @@
+'use strict'
+
+import {
+  getMediaTheme,
+  getMediaColor,
+  transformTextStroke,
+  transformShadow,
+  transformBorder,
+  transformBackgroundImage
+} from '@symbo.ls/scratch'
+
+import { depth } from './Shape/style'
+
+export const getSystemTheme = ({ context, state }) => {
+  const rootState = state && state.__root
+  return rootState ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
+}
+
+export const Theme = {
+  class: {
+    depth: ({ props }) => props.depth && 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 {
+        color: getMediaColor(props.color, globalTheme)
+      }
+    },
+
+    background: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.background) return
+      return {
+        background: getMediaColor(props.background, globalTheme)
+      }
+    },
+
+    backgroundColor: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundColor) return
+      return {
+        backgroundColor: getMediaColor(props.backgroundColor, globalTheme)
+      }
+    },
+
+    backgroundImage: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundImage) return
+      return ({
+        backgroundImage: transformBackgroundImage(props.backgroundImage, globalTheme)
+      })
+    },
+    backgroundSize: ({ props }) => props.backgroundSize
+      ? ({
+          backgroundSize: props.backgroundSize
+        })
+      : null,
+    backgroundPosition: ({ props }) => props.backgroundPosition
+      ? ({
+          backgroundPosition: props.backgroundPosition
+        })
+      : null,
+
+    textStroke: ({ props }) => props.textStroke
+      ? ({
+          WebkitTextStroke: transformTextStroke(props.textStroke)
+        })
+      : null,
+
+    outline: ({ props }) => props.outline && ({
+      outline: transformBorder(props.outline)
+    }),
+
+    border: ({ props }) => props.border && ({
+      border: transformBorder(props.border)
+    }),
+    borderColor: ({ props }) => props.borderColor && ({
+      borderColor: getMediaColor(props.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
+    }),
+
+    columnRule: ({ props }) => props.columnRule && ({
+      columnRule: transformBorder(props.columnRule)
+    })
+  }
+}

package/Atoms/Timing.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import {
+  getTimingFunction,
+  splitTransition,
+  transformDuration
+} from '@symbo.ls/scratch'
+
+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/Atoms/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/Atoms/XYZ.js

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

package/Atoms/index.js

@@ -0,0 +1,25 @@
+'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 './Collection'
+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/Atoms/node_modules/@symbo.ls/default-config/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 symbo.ls
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Atoms/node_modules/@symbo.ls/default-config/README.md

@@ -0,0 +1,2 @@
+# Default Config
+This is a default repository for Symbols Design Systems. It shows how it works and provides some default propoerties. Check out the [docs page](http://docs.symbols.app/intro#configuration) to learn more.

package/Atoms/node_modules/@symbo.ls/default-config/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@symbo.ls/default-config",
+  "version": "2.10.259",
+  "source": "src/index.js",
+  "main": "src/index.js",
+  "license": "MIT",
+  "gitHead": "c454826279438617c85a5f8d8e7b3a6938d94dea"
+}

package/Atoms/node_modules/@symbo.ls/default-config/src/color.js

@@ -0,0 +1,44 @@
+'use strict'
+
+export const COLOR = {
+  transparent: 'rgba(0, 0, 0, 0)',
+  black: 'black',
+  blue: '#0079FD',
+  indigo: '#50E1FF',
+  green: '#59AC56',
+  red: '#FE5B47',
+  yellow: '#EDCB38',
+  orange: '#E2862F',
+  brown: '#7D6755',
+  pink: '#FD8ABF',
+  purple: '#7345AF',
+  white: 'white'
+}
+
+export const GRADIENT = {
+  'gradient-dark': `linear-gradient(0deg,
+    rgba(0,0,0,0.06) 0%,
+    rgba(0,0,0,0.07) 100%
+  )`,
+  'gradient-dark-active': `linear-gradient(0deg,
+    rgba(0,0,0,0.09) 0%,
+    rgba(0,0,0,0.1) 100%
+  )`,
+  'gradient-light': `linear-gradient(
+    0deg,
+    rgba(255,255,255,0.05) 0%,
+    rgba(255,255,255,0.06) 100%
+  )`,
+  'gradient-light-active': `linear-gradient(
+    0deg,
+    rgba(255,255,255,0.09) 0%,
+    rgba(255,255,255,0.10) 100%
+  )`,
+  'gradient-colorful': `linear-gradient(60deg,
+    #00A2E7 0%,
+    #185DF3 31%,
+    #1E54F0 36%,
+    #8B4CCA 69%,
+    #C66894 100%
+  )`
+}