smbls 0.15.38 → 0.15.40

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.15.38",
+  "version": "0.15.40",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/atoms/Media.js

@@ -143,7 +143,7 @@ export const initUpdate = element => {
       const setter = keySetters[key.slice(0, 1)]
       if (key === 'theme') {
         props.update({
-          themeModifier: `@${globalTheme}`
+          themeModifier: globalTheme
         }, { preventRecursive: true, ignoreInitUpdate: true })
       } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
 

package/src/atoms/Picture.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getSystemTheme } from './Theme' // eslint-disable-line no-unused-vars
+import { getSystemTheme } from './Theme'
 
 export const Picture = {
   tag: 'picture',
@@ -11,12 +11,21 @@ export const Picture = {
       media: element => {
         const { props, key, context } = element
         const { MEDIA } = context.SYSTEM
-        // getSystemTheme(element)
-        return MEDIA[(props.media || key).slice(1)]
+        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 }) => ({ src: props.src })
+  Img: ({ props }) => ({
+    width: 'inherit',
+    height: 'inherit',
+    src: props.src
+  })
 }

package/src/atoms/Theme.js

@@ -60,7 +60,7 @@ export const Theme = {
       const { props } = element
       const globalTheme = getSystemTheme(element)
       if (!props.theme) return
-      return getMediaTheme(props.theme, props.themeModifier || globalTheme)
+      return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
     },
 
     color: (element) => {