@symbo.ls/scratch 0.3.0 → 0.3.3

package/package.json

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

package/src/methods/set.js

@@ -15,6 +15,8 @@ import {
   getFontFaceEach
 } from '../utils'
 
+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))
@@ -39,14 +41,17 @@ const setGradient = (val, key) => {
 }
 
 export const getColor = value => {
-  if (!isString(value)) return console.warn(value, '- type for color is not valid')
+  if (!isString(value)) {
+    if (ENV === 'test' || ENV === 'development') console.warn(value, '- type for color is not valid')
+    return
+  }
 
   const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
   const { COLOR, GRADIENT } = CONFIG
   const val = COLOR[name] || GRADIENT[name]
 
   if (!val) {
-    console.warn('Can\'t find color', name)
+    if (ENV === 'test' || ENV === 'development') console.warn('Can\'t find color', name)
     return value
   }
 
@@ -97,7 +102,8 @@ export const getTheme = value => {
     if (state && state[subThemeName]) return getThemeValue(state[subThemeName])
   } else if (isObject(value)) return setThemeValue(value)
   else if (isString(value) && THEME[value]) return getThemeValue(THEME[value])
-  console.warn('Can\'t find theme', value)
+
+  if (ENV === 'test' || ENV === 'development') console.warn('Can\'t find theme', value)
 }
 
 const setPrefersScheme = (theme, key, variant, themeValue) => {
@@ -196,7 +202,7 @@ const setFontFamily = (val, key) => {
   return { var: CSSvar, value: str, arr: value, type }
 }
 
-const setTypography = (val, key) => {
+const setSameValue = (val, key) => {
   return val
 }
 
@@ -206,7 +212,9 @@ export const SETTERS = {
   font: setFont,
   font_family: setFontFamily,
   theme: setTheme,
-  typography: setTypography
+  typography: setSameValue,
+  spacing: setSameValue,
+  responsive: setSameValue
 }
 
 /**

package/src/reset.js

@@ -1,11 +1,11 @@
 'use strict'
 
 import * as CONFIG from './config'
-import { merge } from './utils'
+import { deepMerge, merge } from './utils'
 
 export const RESET = {}
 
-export const applyReset = () => merge(RESET, {
+export const applyReset = (reset = {}) => deepMerge(merge(RESET, reset), {
   html: {
     position: 'absolute',
     overflow: 'hidden',

package/src/utils/index.js

@@ -2,6 +2,8 @@
 
 import { UNIT } from '../config'
 
+const ENV = process.env.NODE_ENV
+
 export const isString = arg => typeof arg === 'string'
 
 export const isArray = arg => Array.isArray(arg)
@@ -27,6 +29,19 @@ export const merge = (obj, original) => {
   return obj
 }
 
+export const deepMerge = (obj, obj2) => {
+  for (const e in obj2) {
+    const objProp = obj[e]
+    const obj2Prop = obj2[e]
+    if (objProp === undefined) {
+      obj[e] = obj2Prop
+    } else if (isObjectLike(objProp) && isObject(obj2Prop)) {
+      deepMerge(objProp, obj2Prop)
+    }
+  }
+  return obj
+}
+
 export const colorStringToRgbaArray = color => {
   if (color === '') return
   if (color.toLowerCase() === 'transparent') return [0, 0, 0, 0]
@@ -140,7 +155,10 @@ export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
 
 export const opacify = (color, opacity) => {
   const arr = colorStringToRgbaArray(color)
-  if (!arr) return console.warn(color + 'color is not rgba')
+  if (!arr) {
+    if (ENV === 'test' || ENV === 'development') console.warn(color + 'color is not rgba')
+    return
+  }
   arr[3] = opacity
   return `rgba(${arr})`
 }