smbls 0.14.5 → 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.5",
+  "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/Button.js

@@ -18,6 +18,7 @@ export const Button = {
   props: {
     fontSize: 'A',
     type: 'button',
+    border: 'none',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -54,38 +55,7 @@ export const CircleButton = {
 
 export const KangorooButton = {
   extend: Button,
+  childExtend: IconText,
 
-  props: {
-    theme: 'quinary',
-    round: 'Z2',
-    padding: 'X1 X1 X1 A2',
-    size: 'A',
-    gap: 'A',
-    transition: 'A defaultBezier',
-    transitionProperty: 'background, color, opacity',
-
-    label: {
-      gap: 'X1',
-      text: 'Become PRO',
-      alignItems: 'center',
-      fontWeight: 'bold',
-      icon: {
-        name: 'star',
-        color: 'yellow'
-      }
-    },
-    child: {
-      theme: 'tertiary',
-      round: 'Z',
-      size: 'Z',
-      padding: 'Z A2',
-      text: '1 month free',
-      opacity: '.85'
-    },
-
-    style
-  },
-
-  label: { extend: IconText },
-  child: { extend: IconText }
+  props: { style }
 }

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/Field.js

@@ -1,9 +1,10 @@
 'use strict'
 
-import { IconText, Input } from '.'
+import { IconText, Input, Focusable } from '.'
 
 export const Field = {
-  extend: IconText,
+  extend: [IconText],
+
   props: (el, s) => ({
     value: s[el.key],
 
@@ -36,5 +37,5 @@ export const Field = {
     }
   }),
 
-  input: { extend: Input }
+  input: { extend: [Focusable, Input] }
 }

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/Input.js

@@ -1,13 +1,15 @@
 'use strict'
 
-import { Focusable } from './Interaction'
+import { Focusable } from './'
 
 export const Input = {
   extend: [Focusable],
   tag: 'input',
 
   props: {
+    border: 'none',
     type: 'input',
+    theme: 'quaternary',
     fontSize: 'A',
     round: 'C',
     lineHeight: 1,

package/src/Label.js

@@ -6,7 +6,7 @@ export const Label = {
   extend: Button,
 
   props: {
-    fontSize: 'Z',
+    fontSize: 'Z2',
     emoji: '👍',
     text: '3',
     padding: 'X2 Z',

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,11 +6,18 @@ 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' },
 
+    icon: {
+      icon: {
+        name: 'info outline'
+      }
+    },
+
     article: {
       flow: 'column',
       align: 'flex-start',
@@ -29,13 +36,12 @@ export const Notification = {
   },
 
   icon: {
-    extend: [IconText],
-    props: {
-      icon: {
-        name: 'info outline'
-      }
-    }
+    extend: [IconText]
   },
 
-  article: { extend: Flex }
+  article: {
+    extend: Flex,
+    title: {},
+    p: {}
+  }
 }

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

@@ -0,0 +1,33 @@
+'use strict'
+
+import { Button, Flex } from './'
+
+export const Tooltip = {
+  extend: [Button, Flex],
+  props: {
+    background: 'black',
+    color: 'white',
+    flow: 'column',
+    shape: 'tooltip',
+    shapeDirection: 'top',
+    padding: 'Z1 A',
+    round: 'Y2',
+    minWidth: 'D2',
+    gap: 'X',
+
+    title: {
+      color: 'gray12',
+      text: 'And tooltip is coming'
+    },
+    p: {
+      fontSize: 'Z2',
+      margin: '0',
+      color: 'gray6',
+      text: 'and winter too',
+      fontWeight: '400'
+    }
+  },
+
+  title: {},
+  p: {}
+}

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,28 +11,52 @@ 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',
-    ':before': {
+  tooltip: el => ({
+    position: el.props.position || 'relative',
+    '&:before': {
       content: '""',
       display: 'block',
       width: '0px',
       height: '0px',
-      border: `6px, solid`,
+      border: `.35em solid`,
+      borderColor: getComputedBackgroundColor(el),
       position: 'absolute',
-      borderRadius: 'X2'
+      borderRadius: '.15em'
     }
   }),
 
   tooltipDirection: {
     top: {
       '&:before': {
-        top: '2px',
+        top: '-.1em',
         left: '50%',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
@@ -40,13 +64,13 @@ export const SHAPES = {
     right: {
       '&:before': {
         top: '50%',
-        right: '-10px',
+        right: '-.1em',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     },
     bottom: {
       '&:before': {
-        bottom: '-10px',
+        bottom: '-.1em',
         left: '50%',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
@@ -54,20 +78,21 @@ export const SHAPES = {
     left: {
       '&:before': {
         top: '50%',
-        left: '2px',
+        left: '-.1em',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     }
   },
 
-  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,39 +1,20 @@
 'use strict'
 
-import './styles.js'
-
 export * from '@symbo.ls/init'
 
-export * from './styles'
-
-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'
-
+// atoms
+export * from './atoms'
 export * from './Box'
 
-export * from './SVG'
+// atoms
 export * from './Icon'
-export * from './Img'
 export * from './Link'
 export * from './IconText'
 export * from './Input'
 export * from './Field'
 export * from './Button'
 
+// components
 export * from './ButtonSet'
 export * from './User'
 export * from './Banner'

package/src/styles.js

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

package/src/Tooltip/index.js

@@ -1,13 +0,0 @@
-'use strict'
-
-import Shape from '../Shape'
-
-import style from './style'
-
-export const Tooltip = {
-  style,
-  extend: Shape,
-  props: { theme: 'purple2' },
-  caption: 'And tooltip is coming',
-  span: 'and winter too'
-}

package/src/Tooltip/style.js

@@ -1,12 +0,0 @@
-'use strict'
-
-export default {
-  textAlign: 'center',
-  padding: '1.2em',
-  caption: {
-    whiteSpace: 'nowrap'
-  },
-  span: {
-    opacity: '.5'
-  }
-}