smbls 0.14.6 → 0.14.7

package/package.json

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

package/src/Box.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Responsive, Interaction, XYZ } from '.'
+import { Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, Interaction, XYZ } from './atoms'
 
 const PropsCSS = {
   class: {
@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  extend: [Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Responsive, PropsCSS, Interaction, XYZ]
+  extend: [Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, PropsCSS, Interaction, XYZ]
 }

package/src/ButtonSet.js

@@ -1,7 +1,6 @@
 'use strict'
 
-import { SquareButton } from './Button'
-import { Flex } from './Flex'
+import { SquareButton, Flex } from './'
 
 export const ButtonSet = {
   tag: 'nav',

package/src/Icon.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { SVG } from '.'
+import { SVG } from './atoms'
 
 import { ICONS } from '@symbo.ls/scratch'
 import { camelize } from '@symbo.ls/utils'

package/src/Link.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { exec } from '@domql/utils'
-import { Focusable } from './Interaction'
+import { Focusable } from './atoms'
 
 export const Link = {
   extend: [Focusable],

package/src/Notification.js

@@ -6,8 +6,9 @@ export const Notification = {
   extend: Flex,
 
   props: {
+    theme: 'alert',
     padding: 'Z1 B Z1 A1',
-    round: 'A',
+    round: 'A A A Y2',
     gap: 'X2',
     style: { cursor: 'pointer' },
 

package/src/Pills.js

@@ -1,26 +1,25 @@
 'use strict'
 
+import { Flex } from './'
+
 export const Pills = {
-  style: {
+  extend: Flex,
+  props: (el, s) => ({
     display: 'flex',
-    div: {
-      width: '6px',
-      height: '6px',
-      background: 'white'
-    },
-    'div:not(:last-child)': {
-      marginRight: '10px'
-    },
-    'div:first-child': { opacity: '.5' },
-    'div:nth-child(2)': { opacity: '.3' },
-    'div:nth-child(3)': { opacity: '.3' }
-  },
-  childExtend: {
-    tag: 'div',
-    props: {
-      round: 42,
-      theme: 'White'
+    gap: 'Y2',
+
+    childProps: {
+      background: 'gray6',
+      width: 'Y2',
+      height: 'Y2',
+      round: 'A',
+
+      '.active': {
+        background: 'gray9'
+      }
     }
-  },
-  ...[{}, {}, {}]
+  }),
+  childExtend: {
+    props: (el, s) => ({ active: parseInt(el.key) === s.active })
+  }
 }

package/src/Tooltip.js

@@ -10,10 +10,10 @@ export const Tooltip = {
     flow: 'column',
     shape: 'tooltip',
     shapeDirection: 'top',
-    padding: 'Z2',
-    round: 'X2',
+    padding: 'Z1 A',
+    round: 'Y2',
     minWidth: 'D2',
-    gap: 'X1',
+    gap: 'X',
 
     title: {
       color: 'gray12',

package/src/{Media copy.js → __/Media copy.js }

@@ -99,7 +99,6 @@ export const initUpdate = el => {
         className.MEDIA_FORCED_BY_STATE = props.theme
       }
     }
-    // console.groupEnd(props.theme)
   }
 
   for (const screen in props) {

package/src/{Media.js → atoms/Media.js}

@@ -144,6 +144,6 @@ export const initUpdate = element => {
   className.case = CLASS_NAMES.case
 }
 
-export const Responsive = {
+export const Media = {
   on: { beforeClassAssign, initUpdate }
 }

package/src/{Position.js → atoms/Position.js}

@@ -10,7 +10,7 @@ export const Position = {
     inset: ({ props }) => {
       const { inset } = props
       if (typeof inset !== 'string') return
-      return { inset: inset.split(' ').map(v => getSpacingByKey(v,'k').k).join(' ') }
+      return { inset: inset.split(' ').map(v => getSpacingByKey(v, 'k').k).join(' ') }
     },
 
     left: ({ props }) => getSpacingByKey(props.left, 'left'),

package/src/{Shape → atoms/Shape}/style.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { UNIT, getColor, getTheme } from '@symbo.ls/scratch'
+import { UNIT, getColor, getTheme } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
 
 export const depth = {
   4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
@@ -11,20 +11,43 @@ export const depth = {
   42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
 }
 
+const getComputedBackgroundColor = el => {
+  const { props, node } = el
+  const propsColor = getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
+
+  if (!propsColor) {
+    const computedStyle = window.getComputedStyle(node)
+    // console.group(el.key)
+    // console.log(getColor(props.borderColor))
+    // console.log(getColor(props.backgroundColor))
+    // console.log(getColor(props.background))
+    // console.log(computedStyle.getPropertyValue('border-color'))
+    // console.log(computedStyle.getPropertyValue('background'))
+    // console.log(computedStyle.getPropertyValue('background-color'))
+    // console.log(el)
+    // console.groupEnd(el.key)
+    return computedStyle.getPropertyValue('border-color') ||
+      computedStyle.getPropertyValue('background') ||
+      computedStyle.getPropertyValue('background-color')
+  }
+
+  return propsColor
+}
+
 export const SHAPES = {
   rectangle: {},
   circle: { borderRadius: '100%' },
   bubble: {},
 
-  tooltip: ({ props }) => ({
-    position: props.position || 'relative',
+  tooltip: el => ({
+    position: el.props.position || 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0px',
       height: '0px',
       border: `.35em solid`,
-      borderColor: getColor(props.background) || getColor(props.backgroundColor),
+      borderColor: getComputedBackgroundColor(el),
       position: 'absolute',
       borderRadius: '.15em'
     }
@@ -61,14 +84,15 @@ export const SHAPES = {
     }
   },
 
-  tag: ({ props }) => ({
+  tag: el => ({
     position: 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0',
       height: '0',
-      border: `16px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).backgroundColor)}`,
+      border: `16px solid`,
+      borderColor: getComputedBackgroundColor(el),
       borderRadius: '6px',
       position: 'absolute'
     }

package/src/atoms/index.js

@@ -0,0 +1,19 @@
+'use strict'
+
+export * from './Block'
+export * from './Direction'
+export * from './Flex'
+export * from './Grid'
+export * from './Img'
+export * from './Media'
+export * from './Interaction'
+export * from './Overflow'
+export * from './Position'
+export * from './Pseudo'
+export * from './SVG'
+export * from './Shape'
+export * from './Theme'
+export * from './Text'
+export * from './Timing'
+export * from './Transform'
+export * from './XYZ'

package/src/index.js

@@ -1,35 +1,13 @@
 'use strict'
 
-import './styles.js'
-
 export * from '@symbo.ls/init'
 
-export * from './styles'
-
 // atoms
-export * from './Text'
-export * from './Block'
-export * from './Shape'
-export * from './Theme'
-export * from './Flex'
-export * from './Grid'
-export * from './Pseudo'
-export * from './Direction'
-export * from './Position'
-export * from './Overflow'
-export * from './Transform'
-export * from './Timing'
-
-export * from './Media'
-export * from './Interaction'
-export * from './XYZ'
-
+export * from './atoms'
 export * from './Box'
 
 // atoms
-export * from './SVG'
 export * from './Icon'
-export * from './Img'
 export * from './Link'
 export * from './IconText'
 export * from './Input'

package/src/styles.js

@@ -3,5 +3,4 @@
 export const clickable = {
   cursor: 'pointer',
   userSelect: 'none'
-  //
 }