smbls 0.8.39 → 0.9.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.39",
+  "version": "0.9.0",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -20,14 +20,14 @@
     "reinstall": "rm yarn.lock && rm -rf node_modules/rackai && yarn",
     "bump": "npx np"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@domql/utils": "latest",
+    "@symbo.ls/scratch": "latest"
+  },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "babel-eslint": "^10.0.3",
-    "emotion": "^10.0.27",
-    "np": "^7.2.0",
-    "parcel-bundler": "^1.12.3",
-    "parcel-plugin-svg-sprite": "^1.4.1",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "babel-eslint": "^10.1.0",
     "standard": "^13.1.0"
   },
   "standard": {

package/src/Button.js

@@ -51,5 +51,3 @@ export const KangorooButton = {
   iconText: { proto: IconText },
   child: { proto: IconText }
 }
-
-export default Button

package/src/Media.js

@@ -47,13 +47,15 @@ const convertPropsToClass = (props, result, element) => {
 const applyMediaProps = (key, props, result, element) => {
   const mediaName = CONFIG_MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
+
   const rootState = element.__root ? element.__root.state : element.state
   const { globalTheme } = rootState
   const name = key.slice(1)
+  const isTheme = ['dark', 'light'].includes(name)
   const matchesGlobal = name === globalTheme
 
-  if (globalTheme) {
-    if (matchesGlobal) merge(result, generatedClass)
+  if (globalTheme && isTheme) {
+    if (matchesGlobal) return merge(result, generatedClass)
     return
   }
 

package/src/Pseudo.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export const Pseudo = {
+  class: {
+    content: ({ props }) => props.content && ({ content: props.content })
+  }
+}

package/src/Slider/index.js

@@ -1,42 +1,57 @@
 'use strict'
 
 import style from './style'
-import { set, opacify } from '@symbo.ls/scratch'
+import { opacify } from '@symbo.ls/scratch'
 import { isFunction } from '@domql/utils'
 
-import { SquareButton, Shape } from '..'
+import { SquareButton } from '..'
 
-set({
-  theme: {
-    sliderThumb: {
-      background: 'white 0.2',
+const theme = {
+  '@dark': {
+    background: 'white 0.2',
 
-      '&::-webkit-slider-thumb': {
-        background: '#232526',
-        borderColor: opacify('#454646', 0.75)
-      },
+    '::-webkit-slider-thumb': {
+      background: '#232526',
+      borderColor: opacify('#454646', 0.75)
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: opacify('#fff', 0.35)
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: '#3C6AC0'
+      }
+    }
+  },
+  '@light': {
+    background: 'gray9',
 
-      '&:hover': {
-        '&::-webkit-slider-thumb': {
-          borderColor: opacify('#fff', 0.35)
-        }
-      },
+    '::-webkit-slider-thumb': {
+      background: 'white',
+      borderColor: 'gray9'
+    },
 
-      '&:focus, &:active': {
-        '&::-webkit-slider-thumb': {
-          borderColor: '#3C6AC0'
-        }
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'gray7'
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'blue'
       }
     }
   }
-})
+}
 
 export const RangeSlider = {
   style,
-  proto: Shape,
-  props: {
-    theme: 'sliderThumb'
-  },
+  props: theme,
 
   tag: 'input',
   attr: { type: 'range' }
@@ -45,7 +60,6 @@ export const RangeSlider = {
 const listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop]
   const r = (isFunction(val) ? val() : val) || (def !== undefined ? def : 50)
-  // if (prop === 'value') console.log(r)
   return r
 }
 

package/src/Theme.js

@@ -27,6 +27,14 @@ const diffStroke = stroke => {
   return { WebkitTextStroke }
 }
 
+const diffShadow = stroke => {
+  const boxShadow = stroke.split(', ').map(v => {
+    if (v.includes('px')) return v
+    else if (getColor(v)) return getColor(v)
+  }).join(' ')
+  return { boxShadow }
+}
+
 export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
@@ -52,6 +60,8 @@ export const Theme = {
     borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
     borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
 
+    shadow: ({ props }) => props.shadow ? diffShadow(props.shadow) : null,
+
     opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
     visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
   }

package/src/Tooltip/style.js

@@ -4,7 +4,7 @@ export default {
   textAlign: 'center',
   padding: '1.2em',
   caption: {
-    whiteSpace: 'nowrap',
+    whiteSpace: 'nowrap'
   },
   span: {
     opacity: '.5'

package/src/index.js

@@ -2,6 +2,8 @@
 
 import './styles.js'
 
+export * from '@symbo.ls/init'
+
 export * from './styles'
 
 export * from './Text'
@@ -10,6 +12,7 @@ export * from './Shape'
 export * from './Theme'
 export * from './Flex'
 export * from './Grid'
+export * from './Pseudo'
 export * from './Direction'
 export * from './Position'
 export * from './Overflow'