smbls 0.15.27 → 0.15.29

package/package.json

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

package/src/{Range/index.js → Range.js}

@@ -1,12 +1,38 @@
 'use strict'
 
-import style from './style'
 import { opacify } from '@symbo.ls/scratch'
 import { isFunction } from '@domql/utils'
 
-import { SquareButton } from '..'
+import { SquareButton } from '.'
+
+const props = {
+  appearance: 'none',
+  width: '100%',
+  height: '2px',
+  outline: 'none',
+  flex: 1,
+
+  style: {
+    appearance: 'none'
+  },
+
+  '::-webkit-slider-thumb': {
+    boxSizing: 'content-box',
+    width: '8px',
+    height: '8px',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderRadius: '100%',
+    opacity: '.8',
+
+    style: {
+      appearance: 'none'
+    }
+  },
+
+  '::-webkit-slider-runnable-track': {
+  },
 
-const theme = {
   '@dark': {
     background: 'white 0.2',
 
@@ -27,6 +53,7 @@ const theme = {
       }
     }
   },
+
   '@light': {
     background: 'gray9',
 
@@ -50,8 +77,7 @@ const theme = {
 }
 
 export const Range = {
-  style,
-  props: theme,
+  props,
 
   tag: 'input',
   attr: { type: 'range' }
@@ -59,8 +85,8 @@ export const Range = {
 
 const listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop]
-  const r = (isFunction(val) ? val(el, el.state) : val) || (def !== undefined ? def : 50)
-  return r
+  const r = (isFunction(val) ? val(el, el.state) : val !== undefined ? val : def !== undefined ? def : 50)
+  return r + ''
 }
 
 export const RangeWithButtons = {

package/src/atoms/Animation.js

@@ -3,8 +3,8 @@
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 import { isObject } from '@domql/utils'
 import { convertPropsToClass } from './Media' // eslint-disable-line no-unused-vars
-import createEmotion from '@symbo.ls/create-emotion'
-const { keyframes } = createEmotion
+import { emotion } from '@symbo.ls/create-emotion'
+const { keyframes } = emotion
 
 const applyAnimationProps = (animation, element) => {
   if (isObject(animation)) return { animationName: keyframes(animation) }

package/src/atoms/Interaction.js

@@ -23,7 +23,10 @@ export const Hoverable = {
       transform: 'scale(1.015)'
     },
     '.active': {
-      opacity: 1
+      opacity: 1,
+      transform: 'scale(1.015)',
+
+      ':hover': { opacity: 1 }
     }
   }
 }

package/src/atoms/Media.js

@@ -45,7 +45,8 @@ const convertPropsToClass = (props, result, element) => {
 }
 
 const applyMediaProps = (key, props, result, element) => {
-  const { MEDIA } = element.context && element.context.SYSTEM
+  if (!element.context.SYSTEM || !element.context.SYSTEM.MEDIA) { return }
+  const { MEDIA } = element.context.SYSTEM
   const mediaName = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 

package/src/atoms/Text.js

@@ -12,10 +12,11 @@ export const Text = {
     textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
     textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
     whiteSpace: ({ props }) => props.whiteSpace && ({ whiteSpace: props.whiteSpace }),
+    letterSpacing: ({ props }) => props.letterSpacing && ({ letterSpacing: props.letterSpacing }),
     textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),
     fontWeight: ({ props }) => props.fontWeight && ({
       fontWeight: props.fontWeight,
-      fontVariationSettings: '"wdth" ' + props.fontWeight
+      fontVariationSettings: '"wght" ' + props.fontWeight
     })
   }
 }

package/src/Range/style.js

@@ -1,19 +0,0 @@
-'use strict'
-
-export default {
-  appearance: 'none',
-  width: '100%',
-  height: '2px',
-  outline: 'none',
-  flex: 1,
-  '&::-webkit-slider-thumb': {
-    boxSizing: 'content-box',
-    appearance: 'none',
-    width: '8px',
-    height: '8px',
-    borderWidth: '2px',
-    borderStyle: 'solid',
-    borderRadius: '100%',
-    opacity: '.8'
-  }
-}