@symbo.ls/atoms 2.10.134 → 2.10.158

package/Animation.js

@@ -7,7 +7,7 @@ const { keyframes } = emotion
 
 const applyAnimationProps = (animation, element) => {
   if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.system
+  const { ANIMATION } = element.context && element.context.designSystem
   const record = ANIMATION[animation]
   return keyframes(record)
 }

package/Media.js

@@ -53,9 +53,9 @@ const convertPropsToClass = (props, result, element) => {
 
 const applyMediaProps = (key, props, result, element) => {
   const { context } = element
-  if (!context.system || !context.system.MEDIA) return
+  if (!context.designSystem || !context.designSystem.MEDIA) return
   const globalTheme = getSystemTheme(element)
-  const { MEDIA } = context.system
+  const { MEDIA } = context.designSystem
   const mediaName = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 
@@ -80,7 +80,7 @@ const applySelectorProps = (key, props, result, element) => {
 }
 
 const applyCaseProps = (key, props, result, element) => {
-  const { CASES } = element.context && element.context.system
+  const { CASES } = element.context && element.context.designSystem
   const caseKey = key.slice(1)
   const isPropTrue = element.props[caseKey]
   if (!CASES[caseKey] && !isPropTrue) return
@@ -121,7 +121,7 @@ const beforeClassAssign = (element, s) => {
 
 export const initUpdate = element => {
   const { props, context, class: className } = element
-  const globalTheme = context.system.globalTheme
+  const globalTheme = context.designSystem.globalTheme
 
   const parentProps = element.parent.props
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {

package/Picture.js

@@ -10,7 +10,7 @@ export const Picture = {
     attr: {
       media: element => {
         const { props, key, context } = element
-        const { MEDIA } = context.system
+        const { MEDIA } = context.designSystem
         const globalTheme = getSystemTheme(element)
         const mediaName = (props.media || key).slice(1)
 

package/Svg.js

@@ -13,9 +13,9 @@ export const Svg = {
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'
   },
   html: ({ key, props, context, ...el }) => {
-    const { system, packages } = context
-    const SVG = system && system.SVG
-    const useSvgSprite = props.spriteId || (context.system && context.system.useSvgSprite)
+    const { designSystem, packages } = context
+    const SVG = designSystem && designSystem.SVG
+    const useSvgSprite = props.spriteId || (context.designSystem && context.designSystem.useSvgSprite)
     const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
 
     const init = (packages && packages.init) || require('@symbo.ls/init').init
@@ -30,12 +30,14 @@ export const Svg = {
     if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
 
     SVGKey = SVG[symbolId] = Math.random()
-    init({
-      svg: { [SVGKey]: props.src }
-    }, {
-      document: context.document,
-      emotion: context.emotion
-    })
+    if (props.src) {
+      init({
+        svg: { [SVGKey]: props.src }
+      }, {
+        document: context.document,
+        emotion: context.emotion
+      })
+    }
 
     return useSVGSymbol(SVGKey)
   }

package/Theme.js

@@ -43,17 +43,16 @@ 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]) {
+    else if (ctx.designSystem.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 ? rootState.globalTheme : context.system && context.system.globalTheme
+export const getSystemTheme = ({ context, state }) => {
+  const rootState = state && state.__root
+  return rootState ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
 }
 
 export const Theme = {
@@ -63,6 +62,8 @@ export const Theme = {
     theme: (element) => {
       const { props } = element
       const globalTheme = getSystemTheme(element)
+      console.log('globalTheme')
+      console.log(globalTheme)
       if (!props.theme) return
       return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
     },

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.10.134",
+  "version": "2.10.158",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "ca88f67b0c989938a8118a539f75608bcbacc26a",
+  "gitHead": "3a847545c01796c874758c2c2a91e2417bcd29d6",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/create-emotion": "latest",