@symbo.ls/scratch 0.7.0 → 0.7.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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/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

@@ -55,15 +55,16 @@ export const generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props
 
   const next = value * ratio
-  const smallscale = (next - value) / ratio
+  const diff = next - value
+  const smallscale = diff / 1.618
 
   const valueRounded = Math.round(value)
   const nextRounded = Math.round(next)
   const diffRounded = nextRounded - valueRounded
 
   let arr = []
-  const first = value + smallscale
-  const second = next - smallscale
+  const first = next - smallscale
+  const second = value + smallscale
   const middle = (first + second) / 2
   if (diffRounded > 16) arr = [first, middle, second]
   else arr = [first, second]
@@ -157,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]