smbls 0.15.43 → 0.15.45

package/package.json

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

package/src/Input.js

@@ -13,7 +13,7 @@ export const Input = {
     fontSize: 'A',
     round: 'C',
     lineHeight: 1,
-    padding: 'Z A',
+    padding: 'Z A'
   },
 
   attr: {

package/src/atoms/Form.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+  props: {},
+  attr: {
+    action: ({ props }) => props.action,
+    method: ({ props }) => props.method,
+    enctype: ({ props }) => props.enctype
+  }
+}

package/src/atoms/Iframe.js

@@ -0,0 +1,16 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  props: {
+    position: 'relative',
+    minWidth: 'H',
+    minHeight: 'H'
+  },
+  attr: {
+    src: ({ props }) => props.src,
+    loading: ({ props }) => props.loading,
+    allowfullscreen: ({ props }) => props.allowfullscreen,
+    referrerpolicy: ({ props }) => props.referrerpolicy
+  }
+}

package/src/atoms/Text.js

@@ -31,7 +31,7 @@ export const P = { tag: 'p' }
 export const Caption = { tag: 'caption' }
 export const Strong = {
   tag: 'strong',
-  props: { fontWeight: '900' }
+  props: { fontWeight: '700' }
 }
 export const Underline = { tag: 'u' }
 export const Italic = { tag: 'i' }

package/src/atoms/Theme.js

@@ -11,7 +11,8 @@ const transformBorder = border => {
   const arr = border.split(', ')
   return arr.map(v => {
     v = v.trim()
-    if (isBorderStyle(v)) return v || 'solid'
+    if (v.slice(0, 2) === '--') return `var(${v})`
+    else if (isBorderStyle(v)) return v || 'solid'
     else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
     else if (getColor(v).length > 2) return getColor(v)
     return getSpacingByKey(v, 'border').border
@@ -20,14 +21,16 @@ const transformBorder = border => {
 
 const transformTextStroke = stroke => ({
   WebkitTextStroke: stroke.split(', ').map(v => {
+    if (v.slice(0, 2) === '--') return `var(${v})`
     if (v.includes('px')) return v
     else if (getColor(v)) return getColor(v)
   }).join(' ')
 })
 
-const transformShadow = shadows => shadows.split('|').map(shadow => {
+export const transformShadow = shadows => shadows.split('|').map(shadow => {
   return shadow.split(', ').map(v => {
     v = v.trim()
+    if (v.slice(0, 2) === '--') return `var(${v})`
     if (getColor(v).length > 2) return getColor(v)
     if (v.includes('px') || v.slice(-2) === 'em') return v
     const arr = v.split(' ')
@@ -38,6 +41,7 @@ const transformShadow = shadows => shadows.split('|').map(shadow => {
 
 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]) {
       return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
@@ -122,6 +126,10 @@ export const Theme = {
       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 })
   }

package/src/atoms/Timing.js

@@ -9,6 +9,7 @@ export const transformTransition = transition => {
   if (!arr.length) return transition
 
   return arr.map(v => {
+    if (v.slice(0, 2) === '--') return `var(${v})`
     if (v.length < 3 || v.includes('ms')) {
       const mapWithSequence = getTimingByKey(v)
       return mapWithSequence.timing || v

package/src/atoms/index.js

@@ -5,7 +5,9 @@ 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 './Overflow'
 export * from './Position'