@symbo.ls/scratch 0.3.12 → 0.3.15

package/package.json

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

package/src/config/spacing.js

@@ -42,24 +42,30 @@ export const mapSpacing = (val, property = 'padding', props, unit) => {
     unit
   })
 
+  let suffix = ''
+  if (property === 'borderWidth') {
+    property = 'border'
+    suffix = 'Width'
+  }
+
   if (length === 2) {
     return [
-      wrapFallBack(property + 'Block', 0),
-      wrapFallBack(property + 'Inline', 1)
+      wrapFallBack(property + 'Block' + suffix, 0),
+      wrapFallBack(property + 'Inline' + suffix, 1)
     ]
   }
   if (length === 3) {
     return [
-      wrapFallBack(property + 'BlockStart', 0),
-      wrapFallBack(property + 'Inline', 1),
-      wrapFallBack(property + 'BlockEnd', 2)
+      wrapFallBack(property + 'BlockStart' + suffix, 0),
+      wrapFallBack(property + 'Inline' + suffix, 1),
+      wrapFallBack(property + 'BlockEnd' + suffix, 2)
     ]
   } else if (length === 4) {
     return [
-      wrapFallBack(property + 'BlockStart', 0),
-      wrapFallBack(property + 'InlineStart', 3),
-      wrapFallBack(property + 'BlockEnd', 2),
-      wrapFallBack(property + 'InlineEnd', 1)
+      wrapFallBack(property + 'BlockStart' + suffix, 0),
+      wrapFallBack(property + 'InlineStart' + suffix, 3),
+      wrapFallBack(property + 'BlockEnd' + suffix, 2),
+      wrapFallBack(property + 'InlineEnd' + suffix, 1)
     ]
   }
 

package/src/utils/index.js

@@ -160,7 +160,7 @@ export const changeLightness = (delta, hsl) => {
 
 export const rgbToHSL = (r, g, b) => {
   const a = Math.max(r, g, b); const n = a - Math.min(r, g, b); const f = (1 - Math.abs(a + a - n - 1))
-  const h = n && ((a == r) ? (g - b) / n : ((a == g) ? 2 + (b - r) / n : 4 + (r - g) / n))
+  const h = n && ((a == r) ? (g - b) / n : ((a == g) ? 2 + (b - r) / n : 4 + (r - g) / n)) //eslint-disable-line
   return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
 }
 
@@ -282,7 +282,7 @@ const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
   state.scales[variable] = scaling
 }
 
-export const generateSubSequence = ({ key, base, value, ratio, variable, state }) => {
+export const generateSubSequence = ({ key, base, value, ratio, variable, state, index }) => {
   const next = value * ratio
   const smallscale = (next - value) / ratio
 
@@ -303,7 +303,7 @@ export const generateSubSequence = ({ key, base, value, ratio, variable, state }
     const scaling = Math.round(v / base * 1000) / 1000
     const newVar = variable + (k + 1)
 
-    return setSequenceValue({ key: key + (k + 1), variable: newVar, value: v, scaling, state })
+    return setSequenceValue({ key: key + (k + 1), variable: newVar, value: v, scaling, state, index: index + (k + 1) / 10 })
   })
 }
 
@@ -319,7 +319,7 @@ export const generateSequence = ({ type, base, ratio, range, subSequence, ...sta
 
     setSequenceValue({ key: letterKey, variable, value, scaling, state, index: key })
 
-    if (subSequence) generateSubSequence({ key: letterKey, base, value, ratio, variable, state })
+    if (subSequence) generateSubSequence({ key: letterKey, base, value, ratio, variable, state, index: key })
   }
   return state
 }
@@ -328,7 +328,7 @@ export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-', unit
   if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
 
   if (val === '-' || val === '') return ({ })
-  if (val === 'auto' || val === 'fit-content' || val === 'min-content' || val === 'max-content') return ({ [prop]: val })
+  if (val === 'none' || val === 'auto' || val === 'fit-content' || val === 'min-content' || val === 'max-content') return ({ [prop]: val })
 
   // const startsWithLetterRegex = /^[a-zA-Z]/i
   const startsWithLetterRegex = /^-?[a-zA-Z]/i