smbls 0.15.42 → 0.15.44

package/package.json

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

package/src/Button.js

@@ -11,8 +11,7 @@ export const Button = {
     type: 'button',
     border: 'none',
     display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    align: 'center center',
     textDecoration: 'none',
     lineHeight: '1',
     whiteSpace: 'nowrap',

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