@symbo.ls/atoms 2.11.150 → 2.11.160

package/Block.js

@@ -163,7 +163,7 @@ export const Hr = {
 }
 export const Br = { tag: 'br' }
 export const Span = { tag: 'span' }
-export const List = {
+export const Ul = {
   tag: 'ul',
   childExtend: { tag: 'li' }
 }

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/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

@@ -9,9 +9,12 @@ export const Text = {
     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,60 @@ 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 +84,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 +132,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/package.json

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