smbls 0.9.5 → 0.9.8

package/package.json

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

package/src/Button.js

@@ -7,7 +7,7 @@ const style = {
   border: 'none',
   outline: 0,
   cursor: 'pointer',
-  fontFamily: 'default'
+  fontFamily: 'inherit'
 }
 
 export const Button = {
@@ -23,6 +23,7 @@ export const Button = {
     lineHeight: '1',
     whiteSpace: 'nowrap',
     padding: 'Z A1',
+    fontFamily: 'inherit',
     round: 'C2',
     style
   },

package/src/Flex.js

@@ -12,7 +12,7 @@ export const Flex = {
     flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
     alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
-    wrap: ({ props }) => props.wrap && ({ wrap: props.wrap }),
+    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
     gap: ({ props }) => props.gap && mapBasedOnRatio(props, 'gap'),

package/src/Theme.js

@@ -8,7 +8,7 @@ import { depth } from './Shape/style'
 const isBorderStyle = str =>
   ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
 
-const diffBorder = (border, key = 'border') => {
+const transformBorder = (border, key = 'border') => {
   const obj = {}
   const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
   arr.map(v => {
@@ -19,21 +19,23 @@ const diffBorder = (border, key = 'border') => {
   return obj
 }
 
-const diffStroke = stroke => {
-  const WebkitTextStroke = stroke.split(', ').map(v => {
+const transformTextStroke = stroke => ({
+  WebkitTextStroke: stroke.split(', ').map(v => {
     if (v.includes('px')) return v
     else if (getColor(v)) return getColor(v)
   }).join(' ')
-  return { WebkitTextStroke }
-}
+})
 
-const diffShadow = stroke => {
-  const boxShadow = stroke.split(', ').map(v => {
+const transformShadow = shadow => ({
+  boxShadow: shadow.split(', ').map(v => {
+    if (v !== getColor(v)) return getColor(v)
     if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
+
+    const arr = v.split(' ')
+    if (!arr.length) return v
+    return arr.map(v => mapSpacing(v, 'shadow').shadow ).join(' ')
   }).join(' ')
-  return { boxShadow }
-}
+})
 
 export const Theme = {
   class: {
@@ -49,18 +51,18 @@ export const Theme = {
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
     background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
 
-    textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : null,
+    textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
 
-    border: ({ props }) => props.border ? diffBorder(props.border) : null,
+    border: ({ props }) => props.border ? transformBorder(props.border) : null,
     borderColor: ({ props }) => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
     borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
 
-    borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
-    borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
-    borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
-    borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+    borderLeft: ({ props }) => props.borderLeft ? transformBorder(props.borderLeft, 'borderLeft') : null,
+    borderTop: ({ props }) => props.borderTop ? transformBorder(props.borderTop, 'borderTop') : null,
+    borderRight: ({ props }) => props.borderRight ? transformBorder(props.borderRight, 'borderRight') : null,
+    borderBottom: ({ props }) => props.borderBottom ? transformBorder(props.borderBottom, 'borderBottom') : null,
 
-    shadow: ({ props }) => props.shadow ? diffShadow(props.shadow) : null,
+    boxShadow: ({ props }) => props.boxShadow ? transformShadow(props.boxShadow) : null,
 
     opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
     visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })

package/src/Transition.js

@@ -2,7 +2,7 @@
 
 import { mapTiming } from '@symbo.ls/scratch'
 
-const diffTransition = transition => {
+const transformTransition = transition => {
   const arr = transition.split(' ')
 
   if (!arr.length) return transition
@@ -20,7 +20,7 @@ const splitTransition = transition => {
   const arr = transition.split(',')
   if (!arr.length) return
   return {
-    transition: arr.map(diffTransition).join(',')
+    transition: arr.map(transformTransition).join(',')
   }
 }