@symbo.ls/scratch 0.3.10 → 0.3.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "Symbols",
-  "version": "0.3.10",
+  "version": "0.3.13",
   "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,16 +14,14 @@ import {
   getDefaultOrFirstKey,
   getFontFaceEach,
   hslToRgb,
-  getColorShade,
-  pSBC,
-  changeLightness
+  getColorShade
 } from '../utils'
 
 const ENV = process.env.NODE_ENV
 
 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
   }
 
@@ -32,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
   }
 
@@ -49,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
         }
@@ -117,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) => {
@@ -254,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]))
 
@@ -263,6 +261,8 @@ export const set = recivedConfig => {
   applySpacingSequence()
   applyDocument()
 
+  CONFIG.verbose = verbose
+
   console.log(CONFIG)
   return CONFIG
 }

package/src/utils/index.js

@@ -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
 }