@symbo.ls/scratch 0.7.1 → 0.7.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "files": [
     "src"
   ],

package/src/defaultConfig/timing.js

@@ -5,7 +5,7 @@ import { SEQUENCE } from '.'
 const defaultProps = {
   default: 150,
   base: 150,
-  type: 'duration',
+  type: 'timing',
   ratio: SEQUENCE['perfect-fourth'],
   range: [-3, +12],
   unit: 'ms',

package/src/system/theme.js

@@ -225,16 +225,13 @@ export const getMediaTheme = (val, mod, themeObj) => {
   if (isString(val) && val.slice(0, 2) === '--') val = getMediaTheme(val.slice(2))
 
   if (!val || !isString(val)) {
-    // if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- type for color is not valid')
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- theme is not string')
     return
   }
 
-  // console.group(val)
   const [name, ...modifier] = isArray(val) ? val : val.split(' ')
   let value = CONFIG.THEME[name]
   if (value && (modifier || mod)) value = findModifier(value, modifier.length ? modifier : mod)
-  // console.log('finalval', value)
-  // console.groupEnd(val)
   return recursiveTheme(value)
 }
 

package/src/system/timing.js

@@ -12,8 +12,10 @@ export const applyTimingSequence = () => {
   applySequenceVars(TIMING)
 }
 
+export const getTimingFunction = value => TIMING[value] || value
+
 export const getTimingByKey = value => getSequenceValuePropertyPair(
   value,
-  'duration',
+  'timing',
   TIMING
 )

package/src/utils/sequence.js

@@ -158,7 +158,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   if (!sequenceItem) return console.warn('can\'t find', sequence, absValue)
 
   if (unit === 'ms' || unit === 's') {
-    return isNegative + sequenceItem.value + unit
+    return isNegative + sequenceItem.val + unit
   }
 
   return isNegative + sequenceItem.scaling + unit

package/src/utils/var.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { MEDIA } from '../defaultConfig'
+import { MEDIA, TIMING } from '../defaultConfig'
 import { CONFIG, CSS_VARS } from '../factory'
 import { isObjectLike } from './object'
 
@@ -26,7 +26,7 @@ export const applySequenceVars = (props, mediaName, options = {}) => {
 
   for (const key in sequence) {
     const item = sequence[key]
-    const value = (props.type === 'duration' ? sequence[key].val : scales[key]) + unit
+    const value = (props.type === TIMING.type ? sequence[key].val : scales[key]) + unit
 
     if (mediaName) {
       const query = MEDIA[mediaName]