@symbo.ls/scratch 0.3.8 → 0.3.11

package/package.json

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

package/src/config/font-family.js

@@ -11,6 +11,7 @@ var defaultFont = { // eslint-disable-line
 export const FONT_FAMILY = {}
 export const FONT_FAMILY_TYPES = {
   serif: 'Helvetica, Arial, sans-serif, --system-default',
-  'sans-serif': 'Times New Roman, Georgia, serif, --system-default'
+  'sans-serif': 'Times New Roman, Georgia, serif, --system-default',
+  monospace: 'Courier New, monospace, --system-default'
 }
 export const FONT_FACE = getFontFace(FONT_FAMILY)

package/src/config/spacing.js

@@ -23,7 +23,7 @@ const getSequence = (props) => {
   return hasGenerated ? props : generateSequence(props)
 }
 
-export const mapSpacing = (val, property = 'padding', props) => {
+export const mapSpacing = (val, property = 'padding', props, unit) => {
   const prefix = '--spacing-'
 
   const generatedSequence = getSequence(props)
@@ -38,7 +38,8 @@ export const mapSpacing = (val, property = 'padding', props) => {
     type,
     prop,
     val: stack[i],
-    prefix
+    prefix,
+    unit
   })
 
   if (length === 2) {

package/src/methods/set.js

@@ -21,29 +21,6 @@ import {
 
 const ENV = process.env.NODE_ENV
 
-const setColor = (val, key) => {
-  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val)
-  const alpha = parseFloat(a.toFixed(2))
-  const CSSVar = `--color-${key}`
-  const rgb = `${r}, ${g}, ${b}`
-  const value = `rgba(${rgb}, ${alpha})`
-
-  return {
-    var: CSSVar,
-    rgb,
-    alpha,
-    value
-  }
-}
-
-const setGradient = (val, key) => {
-  const CSSVar = `--gradient-${key}`
-  return {
-    var: CSSVar,
-    value: val.value || val
-  }
-}
-
 export const getColor = value => {
   if (!isString(value)) {
     if (ENV === 'test' || ENV === 'development') console.warn(value, '- type for color is not valid')
@@ -84,6 +61,31 @@ export const getColor = value => {
   } else return val.value
 }
 
+const setColor = (val, key) => {
+  if (val.slice(0, 2) === '--') val = getColor(val.slice(2))
+
+  const CSSVar = `--color-${key}`
+  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val)
+  const alpha = parseFloat(a.toFixed(2))
+  const rgb = `${r}, ${g}, ${b}`
+  const value = `rgba(${rgb}, ${alpha})`
+
+  return {
+    var: CSSVar,
+    rgb,
+    alpha,
+    value
+  }
+}
+
+const setGradient = (val, key) => {
+  const CSSVar = `--gradient-${key}`
+  return {
+    var: CSSVar,
+    value: val.value || val
+  }
+}
+
 const setThemeValue = theme => {
   const value = {}
   const { state, variants, helpers, ...rest } = theme

package/src/utils/index.js

@@ -324,11 +324,11 @@ export const generateSequence = ({ type, base, ratio, range, subSequence, ...sta
   return state
 }
 
-export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-' }) => {
+export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-', unit = UNIT.default }) => {
   if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
 
   if (val === '-' || val === '') return ({ })
-  if (val === 'auto') return ({ [prop]: val })
+  if (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
@@ -344,7 +344,7 @@ export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-' }) =>
   if (!value) return console.warn('can\'t find', type, prefix + simplyLetterVal, simplyLetterVal)
 
   return ({
-    [prop]: isNegative + value.val + UNIT.default,
+    [prop]: isNegative + value.val + value.unit,
     [prop]: isNegative + value.scaling + 'em'
   })
 }