smbls 0.14.4 → 0.14.5

package/package.json

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

package/src/Button.js

@@ -1,11 +1,10 @@
 'use strict'
 
-import { IconText } from '.'
+import { IconText, Focusable } from '.'
 
 const style = {
   appearance: 'none',
   border: 'none',
-  outline: 0,
   cursor: 'pointer',
   fontFamily: 'inherit',
   '& > *': {
@@ -14,7 +13,7 @@ const style = {
 }
 
 export const Button = {
-  extend: IconText,
+  extend: [Focusable, IconText],
   tag: 'button',
   props: {
     fontSize: 'A',

package/src/Input.js

@@ -1,6 +1,9 @@
 'use strict'
 
+import { Focusable } from './Interaction'
+
 export const Input = {
+  extend: [Focusable],
   tag: 'input',
 
   props: {

package/src/Interaction.js

@@ -6,3 +6,37 @@ export const Interaction = {
     cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
   }
 }
+
+export const Hoverable = {
+  props: {
+    transition: 'B',
+    transitionProperty: 'opacity, transform',
+    opacity: 0.85,
+
+    ':hover': {
+      opacity: 0.9,
+      transform: 'scale(1.015)'
+    },
+    ':active': {
+      opacity: 1,
+      transform: 'scale(1.015)'
+    },
+    '.active': {
+      opacity: 1
+    }
+  }
+}
+
+export const Focusable = {
+  props: {
+    outline: 'none',
+    ':focus-visible': {
+      opacity: 1,
+      outline: 'solid, X, blue .3'
+    }
+  },
+
+  attr: {
+    placeholder: ({ props }) => props.placeholder
+  }
+}

package/src/Label.js

@@ -1,20 +1,25 @@
 'use strict'
-import { Block } from './Block'
-import { Shape } from './Shape'
-import { Text } from './Text'
 
-export const Label = {
-  extend: [Shape, Block, Text],
+import { Button } from '.'
 
-  style: { lineHeight: 1 },
+export const Label = {
+  extend: Button,
 
   props: {
+    fontSize: 'Z',
     emoji: '👍',
     text: '3',
     padding: 'X2 Z',
     round: 'C',
-    depth: 16
+    lineHeight: 1,
+    gap: 'X2',
+    depth: 16,
+    fontWeight: '500',
+    background: 'blue .3',
+    color: 'white'
   },
 
-  emoji: ({ props }) => props.emoji
+  emoji: {
+    props: ({ parent }) => ({ text: parent.props.emoji })
+  }
 }

package/src/Link.js

@@ -1,8 +1,10 @@
 'use strict'
 
 import { exec } from '@domql/utils'
+import { Focusable } from './Interaction'
 
 export const Link = {
+  extend: [Focusable],
   tag: 'a',
   props: {
     aria: {},

package/src/Theme.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import { isArray, isObject } from '@domql/utils'
 import { getSpacingByKey, getMediaTheme, getColor, getMediaColor } from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
@@ -8,15 +7,14 @@ 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 transformBorder = (border, key = 'border') => {
-  const obj = {}
-  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
-  arr.map(v => {
-    if (v.slice(-2) === 'px' || v.slice(-2) === 'em') obj[`${key}Width`] = v // TODO: add map spacing
-    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
-    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
-  })
-  return obj
+const transformBorder = border => {
+  const arr = border.split(', ')
+  return arr.map(v => {
+    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
+  }).join(' ')
 }
 
 const transformTextStroke = stroke => ({
@@ -65,14 +63,28 @@ export const Theme = {
 
     textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
 
-    border: ({ props }) => props.border ? transformBorder(props.border) : null,
+    outline: ({ props }) => props.outline && ({
+      outline: transformBorder(props.outline)
+    }),
+
+    border: ({ props }) => props.border && ({
+      border: transformBorder(props.border)
+    }),
     borderColor: ({ props }) => (props.borderColor) && getMediaColor(props.borderColor, 'borderColor'),
     borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
 
-    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,
+    borderLeft: ({ props }) => props.borderLeft && ({
+      borderLeft: transformBorder(props.borderLeft)
+    }),
+    borderTop: ({ props }) => props.borderTop && ({
+      borderTop: transformBorder(props.borderTop)
+    }),
+    borderRight: ({ props }) => props.borderRight && ({
+      borderRight: transformBorder(props.borderRight)
+    }),
+    borderBottom: ({ props }) => props.borderBottom && ({
+      borderBottom: transformBorder(props.borderBottom)
+    }),
 
     boxShadow: ({ props }) => props.boxShadow ? transformShadow(props.boxShadow) : null,
 

package/src/index.js

@@ -18,6 +18,7 @@ export * from './Position'
 export * from './Overflow'
 export * from './Transform'
 export * from './Timing'
+
 export * from './Media'
 export * from './Interaction'
 export * from './XYZ'