@symbo.ls/scratch 0.3.9 → 0.3.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "Symbols",
-  "version": "0.3.9",
+  "version": "0.3.12",
   "files": [
     "src"
   ],
@@ -19,8 +19,8 @@
     "bump": "npx np"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
+    "@babel/core": "^7.0.0-0",
+    "@babel/preset-env": "^7.18.9",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^27.0.2",
     "babel-preset-env": "^1.7.0",

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/methods/set.js

@@ -14,39 +14,14 @@ import {
   getDefaultOrFirstKey,
   getFontFaceEach,
   hslToRgb,
-  getColorShade,
-  pSBC,
-  changeLightness
+  getColorShade
 } 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))
-  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')
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
   }
 
@@ -55,7 +30,7 @@ export const getColor = value => {
   const val = COLOR[name] || GRADIENT[name]
 
   if (!val) {
-    if (ENV === 'test' || ENV === 'development') console.warn('Can\'t find color', name)
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color', name)
     return value
   }
 
@@ -72,7 +47,7 @@ export const getColor = value => {
         } else {
           const [r, g, b] = [...rgb.split(', ').map(v => parseFloat(v))]
           const hsl = rgbToHSL(r, g, b)
-          const [h, s, l] = hsl
+          const [h, s, l] = hsl // eslint-disable-line
           const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
           rgb = newRgb
         }
@@ -84,6 +59,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
@@ -115,7 +115,7 @@ export const getTheme = value => {
   } else if (isObject(value)) return setThemeValue(value)
   else if (isString(value) && THEME[value]) return getThemeValue(THEME[value])
 
-  if (ENV === 'test' || ENV === 'development') console.warn('Can\'t find theme', value)
+  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
 }
 
 const setPrefersScheme = (theme, key, variant, themeValue) => {
@@ -252,7 +252,7 @@ export const setEach = (factoryName, props) => {
 }
 
 export const set = recivedConfig => {
-  const { version, ...config } = recivedConfig
+  const { version, verbose, ...config } = recivedConfig
   const keys = Object.keys(config)
   keys.map(key => setEach(key, config[key]))
 
@@ -261,6 +261,8 @@ export const set = recivedConfig => {
   applySpacingSequence()
   applyDocument()
 
+  CONFIG.verbose = verbose
+
   console.log(CONFIG)
   return CONFIG
 }