@symbo.ls/scratch 0.3.17 → 0.3.20

package/package.json

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

package/src/config/index.js

@@ -2,20 +2,14 @@
 
 export * from './sequence'
 export * from './unit'
-
 export * from './typography'
 export * from './font'
 export * from './font-family'
-
+export * from './media'
 export * from './spacing'
-
 export * from './color'
 export * from './theme'
-
 export * from './icons'
-
-export * from './media'
-
+export * from './timing'
 export * from './document'
-
 export * from './cases'

package/src/config/media.js

@@ -11,5 +11,6 @@ export const MEDIA = {
   mobileM: '(max-width: 560px)',
   mobileS: '(max-width: 480px)',
 
-  light: '(prefers-color-scheme: light)'
+  light: '(prefers-color-scheme: light)',
+  dark: '(prefers-color-scheme: dark)'
 }

package/src/config/timing.js

@@ -1,5 +1,28 @@
 'use strict'
 
-export const TIMING = {
-  base: 16
+import { SEQUENCE } from '.'
+import { fallBack, generateSequence } from '../utils'
+
+const defaultProps = {
+  default: 150,
+  base: 150,
+  type: 'timing',
+  ratio: SEQUENCE['minor-third'],
+  range: [-3, +12],
+  sequence: {},
+  scales: {}
+}
+
+export const applyTimingSequence = () => {
+  generateSequence(defaultProps)
 }
+
+export const mapTiming = val => fallBack({
+  type: defaultProps.sequence,
+  prop: 'timing',
+  val,
+  unit: 'ms',
+  prefix: '--duration-'
+})
+
+export const TIMING = defaultProps

package/src/index.js

@@ -4,7 +4,7 @@ import CONFIG from './factory'
 
 export * from './factory'
 export * from './utils'
-export * from './methods'
+export * from './set'
 export * from './config'
 export * from './reset'
 

package/src/reset.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import * as CONFIG from './config'
+import { getTheme } from './set'
 import { deepMerge, merge } from './utils'
 
 export const RESET = {}
@@ -27,7 +28,9 @@ export const applyReset = (reset = {}) => deepMerge(merge(RESET, reset), {
   body: {
     boxSizing: 'border-box',
     height: '100%',
-    margin: 0
+    margin: 0,
+
+    ...getTheme('document')
   },
 
   ...CONFIG.TYPOGRAPHY.styles,

package/src/{methods/set.js → set.js}

@@ -1,7 +1,8 @@
 'use strict'
 
-import { applyDocument, applySpacingSequence, applyTypographySequence } from '../config'
-import CONFIG, { CSS_VARS } from '../factory'
+import { applyDocument, applySpacingSequence, applyTimingSequence, applyTypographySequence } from './config'
+import CONFIG, { CSS_VARS } from './factory'
+import { applyReset } from './reset'
 import {
   isArray,
   colorStringToRgbaArray,
@@ -14,8 +15,9 @@ import {
   getDefaultOrFirstKey,
   getFontFaceEach,
   hslToRgb,
-  getColorShade
-} from '../utils'
+  getColorShade,
+  setVariables
+} from './utils'
 
 const ENV = process.env.NODE_ENV
 
@@ -45,7 +47,7 @@ export const getColor = value => {
         if (tone.slice(0, 1) === '-' || tone.slice(0, 1) === '+') {
           rgb = hexToRgbArray(getColorShade(toHex, parseFloat(tone))).join(', ')
         } else {
-          const [r, g, b] = [...rgb.split(', ').map(v => parseFloat(v))]
+          const [r, g, b] = [...rgb.split(', ').map(v => parseInt(v))]
           const hsl = rgbToHSL(r, g, b)
           const [h, s, l] = hsl // eslint-disable-line
           const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
@@ -104,25 +106,29 @@ const getThemeValue = theme => {
 
 export const getTheme = value => {
   const { THEME } = CONFIG
+
+  if (isString(value)) {
+    const [theme, subtheme] = value.split(' ')
+    const isOurTheme = THEME[theme]
+    if (isOurTheme) {
+      if (!subtheme) return getThemeValue(isOurTheme)
+      value = [theme, subtheme]
+    }
+  }
+
   if (isObjectLike(value) && value[1]) {
     const themeName = value[0]
     const subThemeName = value[1]
     const { helpers, variants, state } = THEME[themeName]
+
     if (variants && variants[subThemeName]) return getThemeValue(variants[subThemeName])
     if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName])
     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])
 
   if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
 }
 
-const setPrefersScheme = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant)
-  themeValue[`@media (prefers-color-scheme: ${key})`] = result
-  if (isObject(variant) && !variant.value) variant.value = result
-}
-
 const setInverseTheme = (theme, variant, value) => {
   if (isObject(variant)) {
     theme.variants.inverse.value = setThemeValue(variant)
@@ -137,25 +143,39 @@ const setInverseTheme = (theme, variant, value) => {
   }
 }
 
-const goThroughHelpers = (theme, value) => {
-  const { helpers } = theme
-  if (!helpers) return
-  const keys = Object.keys(helpers)
+const setPseudo = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant)
+  themeValue[`&:${key}`] = result
+  if (isObject(variant) && !variant.value) variant.value = result
+}
+
+const goThroughInteractiveStates = (theme, value) => {
+  const { state } = theme
+  if (!state) return
+  const keys = Object.keys(state)
   keys.map(key => {
-    const helper = helpers[key]
-    if (isString(helper)) helpers[key] = CONFIG.THEME[helper]
-    else getThemeValue(helpers[key])
+    const variant = state[key]
+    setPseudo(theme, key, variant, value)
     return theme
   })
   return theme
 }
 
+const setPrefersScheme = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant)
+  // console.log(variant)
+  themeValue[`@media (prefers-color-scheme: ${key})`] = result
+  if (isObject(variant) && !variant.value) variant.value = result
+}
+
 const goThroughVariants = (theme, value) => {
   const { variants } = theme
   if (!variants) return
   const keys = Object.keys(variants)
   keys.map(key => {
     const variant = variants[key]
+    // console.log('=========')
+    // console.log(theme, key, variant, value)
     if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value)
     if (key === 'inverse') setInverseTheme(theme, variant, value)
     return theme
@@ -163,19 +183,14 @@ const goThroughVariants = (theme, value) => {
   return theme
 }
 
-const setPseudo = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant)
-  themeValue[`&:${key}`] = result
-  if (isObject(variant) && !variant.value) variant.value = result
-}
-
-const goThroughInteractiveStates = (theme, value) => {
-  const { state } = theme
-  if (!state) return
-  const keys = Object.keys(state)
+const goThroughHelpers = (theme, value) => {
+  const { helpers } = theme
+  if (!helpers) return
+  const keys = Object.keys(helpers)
   keys.map(key => {
-    const variant = state[key]
-    setPseudo(theme, key, variant, value)
+    const helper = helpers[key]
+    if (isString(helper)) helpers[key] = CONFIG.THEME[helper]
+    else getThemeValue(helpers[key])
     return theme
   })
   return theme
@@ -226,10 +241,12 @@ export const SETTERS = {
   font_family: setFontFamily,
   theme: setTheme,
   typography: setSameValue,
+  cases: setCases,
   spacing: setSameValue,
   media: setSameValue,
-  cases: setCases,
-  icons: setSameValue
+  timing: setSameValue,
+  icons: setSameValue,
+  reset: setSameValue
 }
 
 /**
@@ -243,8 +260,15 @@ export const setValue = (FACTORY_NAME, value, key) => {
   const factoryName = FACTORY_NAME.toLowerCase()
   const FACTORY = CONFIG[FACTORY_NAME]
   const result = SETTERS[factoryName](value, key)
+
+  // console.log(CONFIG.verbose)
+  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose && FACTORY[key]) {
+    // console.warn('Replacing ', key, ' as ', FACTORY[key], ' in ', factoryName)
+  }
+
   FACTORY[key] = result
-  CSS_VARS[result.var] = result.value
+  setVariables(result, key)
+
   return FACTORY
 }
 
@@ -257,7 +281,15 @@ export const setEach = (factoryName, props) => {
 }
 
 export const set = recivedConfig => {
-  const { version, verbose, ...config } = recivedConfig
+  const { version, verbose, useVariable, ...config } = recivedConfig
+
+  // console.log('=========')
+  // console.log(verbose)
+  CONFIG.verbose = verbose
+  CONFIG.useVariable = useVariable
+  // console.log(recivedConfig)
+  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.log(CONFIG)
+
   const keys = Object.keys(config)
   keys.map(key => setEach(key, config[key]))
 
@@ -265,11 +297,9 @@ export const set = recivedConfig => {
   applyTypographySequence()
   applySpacingSequence()
   applyDocument()
+  applyTimingSequence()
+  applyReset()
 
-  CONFIG.verbose = verbose
-  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.log(CONFIG)
-
+  CONFIG.VARS = CSS_VARS
   return CONFIG
 }
-
-export default set

package/src/utils/color.js

@@ -0,0 +1,148 @@
+'use strict'
+
+const ENV = process.env.NODE_ENV
+
+export const colorStringToRgbaArray = color => {
+  if (color === '') return
+  if (color.toLowerCase() === 'transparent') return [0, 0, 0, 0]
+
+  // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
+  if (color[0] === '#') {
+    if (color.length < 7) {
+      color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '')
+    } return [parseInt(color.substr(1, 2), 16),
+      parseInt(color.substr(3, 2), 16),
+      parseInt(color.substr(5, 2), 16),
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1]
+  }
+
+  // convert named colors
+  if (color.indexOf('rgb') === -1) {
+    // intentionally use unknown tag to lower chances of css rule override with !important
+    const elem = document.body.appendChild(document.createElement('fictum'))
+    // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
+    const flag = 'rgb(1, 2, 3)'
+    elem.style.color = flag
+    // color set failed - some monstrous css rule is probably taking over the color of our object
+    if (elem.style.color !== flag) return
+    elem.style.color = color
+    if (elem.style.color === flag || elem.style.color === '') return // color parse failed
+    color = window.getComputedStyle(elem).color
+    document.body.removeChild(elem)
+  }
+
+  // convert 'rgb(R,G,B)' to 'rgb(R,G,B,A)' which looks awful but will pass the regxep below
+  if (color.indexOf('rgb') === 0) {
+    if (color.indexOf('rgba') === -1) color = `${color}, 1`
+    return color.match(/[\.\d]+/g).map(a => +a) // eslint-disable-line
+  }
+}
+
+export const mixTwoColors = (colorA, colorB, range = 0.5) => {
+  colorA = colorStringToRgbaArray(colorA)
+  colorB = colorStringToRgbaArray(colorB)
+  return mixTwoRgba(colorA, colorB, range)
+}
+
+export const hexToRgb = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
+  return `rgb(${r},${g},${b})`
+}
+
+export const hexToRgbArray = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
+  return [r, g, b]
+}
+
+export const rgbToHex = (r, g, b) => {
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+}
+
+export const rgbArrayToHex = ([r, g, b]) => {
+  return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+}
+
+export const hexToRgba = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
+  return `rgba(${r},${g},${b},${alpha})`
+}
+
+export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
+  const arr = []
+  for (let i = 0; i < 3; i++) {
+    arr[i] = Math.round(
+      colorA[i] + (
+        (colorB[i] - colorA[i]) * range
+      )
+    )
+  }
+  return `rgb(${arr})`
+}
+
+export const changeLightness = (delta, hsl) => {
+  const [hue, saturation, lightness] = hsl
+
+  const newLightness = Math.max(
+    0,
+    Math.min(100, lightness + parseFloat(delta))
+  )
+
+  return [hue, saturation, newLightness]
+}
+
+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)) //eslint-disable-line
+  return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
+}
+
+export const hslToRgb = (h, s, l,
+  a = s * Math.min(l, 1 - l),
+  f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
+    Math.min(k - 3, 9 - k, 1), -1
+  )
+) => [f(0), f(8), f(4)]
+
+export const getColorShade = (col, amt) => {
+  const num = parseInt(col, 16)
+
+  let r = (num >> 16) + amt
+
+  if (r > 255) r = 255
+  else if (r < 0) r = 0
+
+  let b = ((num >> 8) & 0x00FF) + amt
+
+  if (b > 255) b = 255
+  else if (b < 0) b = 0
+
+  let g = (num & 0x0000FF) + amt
+
+  if (g > 255) g = 255
+  else if (g < 0) g = 0
+
+  return (g | (b << 8) | (r << 16)).toString(16)
+}
+
+export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
+  const arr = []
+  for (let i = 0; i < 4; i++) {
+    const round = (i === 3) ? x => x : Math.round
+    arr[i] = round(
+      (colorA[i] + (
+        (colorB[i] - colorA[i]) * range
+      ))
+    )
+  }
+  return `rgba(${arr})`
+}
+
+export const opacify = (color, opacity) => {
+  const arr = colorStringToRgbaArray(color)
+  if (!arr) {
+    if (ENV === 'test' || ENV === 'development') console.warn(color + 'color is not rgba')
+    return
+  }
+  arr[3] = opacity
+  return `rgba(${arr})`
+}

package/src/utils/font.js

@@ -0,0 +1,33 @@
+'use strict'
+
+export const getDefaultOrFirstKey = (LIBRARY, key) => {
+  if (LIBRARY[key]) return LIBRARY[key].value
+  if (LIBRARY.isDefault) return LIBRARY[LIBRARY.isDefault].value
+  const hasValue = Object.keys(LIBRARY)[0]
+  return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
+}
+
+export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
+
+export const setCustomFont = (name, weight, url) => `@font-face {
+  font-family: '${name}';
+  font-style: normal;
+  font-weight: ${weight};
+  src: url('${url}') format('${getFontFormat(url)}');
+}`
+// src: url('${url}') format('${getFontFormat(url)}');
+
+export const getFontFaceEach = (name, weightsObject) => {
+  const keys = Object.keys(weightsObject)
+  const weightsJoint = keys.map(key => {
+    const { fontWeight, url } = weightsObject[key]
+    return setCustomFont(name, fontWeight, url)
+  })
+  return weightsJoint.join('\n')
+}
+
+export const getFontFace = LIBRARY => {
+  const keys = Object.keys(LIBRARY)
+  const fontsJoint = keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
+  return fontsJoint.join('\n')
+}

package/src/utils/index.js

@@ -1,365 +1,7 @@
 'use strict'
 
-import { UNIT } from '../config'
-
-const ENV = process.env.NODE_ENV
-
-export const isString = arg => typeof arg === 'string'
-
-export const isArray = arg => Array.isArray(arg)
-
-export const isObject = arg => {
-  if (arg === null) return false
-  return (typeof arg === 'object') && (arg.constructor === Object)
-}
-
-export const isObjectLike = arg => {
-  if (arg === null) return false
-  return (typeof arg === 'object')
-}
-
-export const merge = (obj, original) => {
-  for (const e in original) {
-    const objProp = obj[e]
-    const originalProp = original[e]
-    if (objProp === undefined) {
-      obj[e] = originalProp
-    }
-  }
-  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]
-
-  // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
-  if (color[0] === '#') {
-    if (color.length < 7) {
-      color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '')
-    } return [parseInt(color.substr(1, 2), 16),
-      parseInt(color.substr(3, 2), 16),
-      parseInt(color.substr(5, 2), 16),
-      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1]
-  }
-
-  // convert named colors
-  if (color.indexOf('rgb') === -1) {
-    // intentionally use unknown tag to lower chances of css rule override with !important
-    const elem = document.body.appendChild(document.createElement('fictum'))
-    // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
-    const flag = 'rgb(1, 2, 3)'
-    elem.style.color = flag
-    // color set failed - some monstrous css rule is probably taking over the color of our object
-    if (elem.style.color !== flag) return
-    elem.style.color = color
-    if (elem.style.color === flag || elem.style.color === '') return // color parse failed
-    color = window.getComputedStyle(elem).color
-    document.body.removeChild(elem)
-  }
-
-  // convert 'rgb(R,G,B)' to 'rgb(R,G,B,A)' which looks awful but will pass the regxep below
-  if (color.indexOf('rgb') === 0) {
-    if (color.indexOf('rgba') === -1) color = `${color}, 1`
-    return color.match(/[\.\d]+/g).map(a => +a) // eslint-disable-line
-  }
-}
-
-export const mixTwoColors = (colorA, colorB, range = 0.5) => {
-  colorA = colorStringToRgbaArray(colorA)
-  colorB = colorStringToRgbaArray(colorB)
-  return mixTwoRgba(colorA, colorB, range)
-}
-
-export const hexToRgb = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
-  return `rgb(${r},${g},${b})`
-}
-
-export const hexToRgbArray = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
-  return [r, g, b]
-}
-
-export const rgbToHex = (r, g, b) => {
-  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
-}
-
-export const rgbArrayToHex = ([r, g, b]) => {
-  return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
-}
-
-export const hexToRgba = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
-  return `rgba(${r},${g},${b},${alpha})`
-}
-
-export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
-  const arr = []
-  for (let i = 0; i < 3; i++) {
-    arr[i] = Math.round(
-      colorA[i] + (
-        (colorB[i] - colorA[i]) * range
-      )
-    )
-  }
-  return `rgb(${arr})`
-}
-
-// export const rgbToHSL = (r, g, b) => {
-//   console.log(r, g, b)
-//   r /= 255
-//   g /= 255
-//   b /= 255
-//   const l = Math.max(r, g, b)
-//   const s = l - Math.min(r, g, b)
-//   const h = s
-//     ? l === r
-//         ? (g - b) / s
-//         : l === g
-//           ? 2 + (b - r) / s
-//           : 4 + (r - g) / s
-//     : 0
-//   return [
-//     60 * h < 0 ? 60 * h + 360 : 60 * h,
-//     100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
-//     (100 * (2 * l - s)) / 2
-//   ]
-// }
-
-// export const hslToRgb = (h, s, l) => {
-//   console.log(h, s, l)
-//   const a = s * Math.min(l, 1 - l)
-//   const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
-//   return [f(0), f(8), f(4)].map(v => v * 1000)
-// }
-
-export const changeLightness = (delta, hsl) => {
-  const [hue, saturation, lightness] = hsl
-
-  const newLightness = Math.max(
-    0,
-    Math.min(100, lightness + parseFloat(delta))
-  )
-
-  return [hue, saturation, newLightness]
-}
-
-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)) //eslint-disable-line
-  return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
-}
-
-export const hslToRgb = (h, s, l,
-  a = s * Math.min(l, 1 - l),
-  f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
-    Math.min(k - 3, 9 - k, 1), -1
-  )
-) => [f(0), f(8), f(4)]
-
-export const getColorShade = (col, amt) => {
-  const num = parseInt(col, 16)
-
-  let r = (num >> 16) + amt
-
-  if (r > 255) r = 255
-  else if (r < 0) r = 0
-
-  let b = ((num >> 8) & 0x00FF) + amt
-
-  if (b > 255) b = 255
-  else if (b < 0) b = 0
-
-  let g = (num & 0x0000FF) + amt
-
-  if (g > 255) g = 255
-  else if (g < 0) g = 0
-
-  return (g | (b << 8) | (r << 16)).toString(16)
-}
-
-export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
-  const arr = []
-  for (let i = 0; i < 4; i++) {
-    const round = (i === 3) ? x => x : Math.round
-    arr[i] = round(
-      (colorA[i] + (
-        (colorB[i] - colorA[i]) * range
-      ))
-    )
-  }
-  return `rgba(${arr})`
-}
-
-export const opacify = (color, opacity) => {
-  const arr = colorStringToRgbaArray(color)
-  if (!arr) {
-    if (ENV === 'test' || ENV === 'development') console.warn(color + 'color is not rgba')
-    return
-  }
-  arr[3] = opacity
-  return `rgba(${arr})`
-}
-
-export const getDefaultOrFirstKey = (LIBRARY, key) => {
-  if (LIBRARY[key]) return LIBRARY[key].value
-  if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
-  return LIBRARY[Object.keys(LIBRARY)[0]].value
-}
-
-export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
-
-export const setCustomFont = (name, weight, url) => `@font-face {
-  font-family: '${name}';
-  font-style: normal;
-  font-weight: ${weight};
-  src: url('${url}') format('${getFontFormat(url)}');
-}`
-// src: url('${url}') format('${getFontFormat(url)}');
-
-export const getFontFaceEach = (name, weightsObject) => {
-  const keys = Object.keys(weightsObject)
-  const weightsJoint = keys.map(key => {
-    const { fontWeight, url } = weightsObject[key]
-    return setCustomFont(name, fontWeight, url)
-  })
-  return weightsJoint.join('\n')
-}
-
-export const getFontFace = LIBRARY => {
-  const keys = Object.keys(LIBRARY)
-  const fontsJoint = keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
-  return fontsJoint.join('\n')
-}
-
-export const numToLetterMap = {
-  '-6': 'U',
-  '-5': 'V',
-  '-4': 'W',
-  '-3': 'X',
-  '-2': 'Y',
-  '-1': 'Z',
-  0: 'A',
-  1: 'B',
-  2: 'C',
-  3: 'D',
-  4: 'E',
-  5: 'F',
-  6: 'G',
-  7: 'H',
-  8: 'I',
-  9: 'J',
-  10: 'K',
-  11: 'L',
-  12: 'M',
-  13: 'N',
-  14: 'O',
-  15: 'P'
-}
-
-const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
-  state.sequence[variable] = {
-    key,
-    decimal: Math.round(value * 100) / 100,
-    val: Math.round(value),
-    scaling,
-    index
-  }
-  state.scales[variable] = scaling
-}
-
-export const generateSubSequence = ({ key, base, value, ratio, variable, state, index }) => {
-  const next = value * ratio
-  const smallscale = (next - value) / ratio
-
-  const valueRounded = Math.round(value)
-  const nextRounded = Math.round(next)
-  const diffRounded = nextRounded - valueRounded
-
-  let arr = []
-  const first = next - smallscale
-  const second = value + smallscale
-  const middle = (first + second) / 2
-  if (diffRounded > 100) arr = [first, middle, second]
-  else arr = [first, second]
-  // else if (diffRounded > 2) arr = [first, second]
-  // else if (diffRounded > 1) arr = [middle]
-
-  arr.map((v, k) => {
-    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, index: index + (k + 1) / 10 })
-  })
-}
-
-export const generateSequence = ({ type, base, ratio, range, subSequence, ...state }) => {
-  const n = Math.abs(range[0]) + Math.abs(range[1])
-  const prefix = '--' + type + '-'
-  for (let i = 0; i <= n; i++) {
-    const key = range[1] - i
-    const letterKey = numToLetterMap[key]
-    const value = base * Math.pow(ratio, key)
-    const scaling = Math.round(value / base * 1000) / 1000
-    const variable = prefix + letterKey
-
-    setSequenceValue({ key: letterKey, variable, value, scaling, state, index: key })
-
-    if (subSequence) generateSubSequence({ key: letterKey, base, value, ratio, variable, state, index: key })
-  }
-  return state
-}
-
-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 === '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
-  // const hasLetter = /[A-Za-z]+/.test(val)
-  const startsWithLetter = startsWithLetterRegex.test(val)
-  if (!startsWithLetter) return ({ [prop]: val })
-
-  const letterVal = val.toUpperCase()
-  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
-  const simplyLetterVal = isNegative ? letterVal.slice(1) : letterVal
-
-  const value = type ? type[prefix + simplyLetterVal] : null
-  if (!value) return console.warn('can\'t find', type, prefix + simplyLetterVal, simplyLetterVal)
-
-  return ({
-    [prop]: isNegative + value.val + value.unit,
-    [prop]: isNegative + value.scaling + 'em'
-  })
-}
-
-export const Arrayize = val => {
-  const isString = typeof val === 'string'
-  if (isString) return val.split(' ')
-  if (isObject(val)) return Object.keys(val).map(v => val[v])
-  if (isArray(val)) return val
-}
-
-export const findHeadings = (TYPOGRAPHY) => {
-  const { h1Matches, type, sequence } = TYPOGRAPHY
-  return new Array(6).fill(null).map((_, i) => {
-    const findLetter = numToLetterMap[h1Matches - i]
-    return sequence[`--${type}-${findLetter}`]
-  })
-}
+export * from './object'
+export * from './color'
+export * from './font'
+export * from './sequence'
+export * from './setVariables'

package/src/utils/object.js

@@ -0,0 +1,46 @@
+'use strict'
+
+export const isString = arg => typeof arg === 'string'
+
+export const isArray = arg => Array.isArray(arg)
+
+export const isObject = arg => {
+  if (arg === null) return false
+  return (typeof arg === 'object') && (arg.constructor === Object)
+}
+
+export const isObjectLike = arg => {
+  if (arg === null) return false
+  return (typeof arg === 'object')
+}
+
+export const merge = (obj, original) => {
+  for (const e in original) {
+    const objProp = obj[e]
+    const originalProp = original[e]
+    if (objProp === undefined) {
+      obj[e] = originalProp
+    }
+  }
+  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 Arrayize = val => {
+  const isString = typeof val === 'string'
+  if (isString) return val.split(' ')
+  if (isObject(val)) return Object.keys(val).map(v => val[v])
+  if (isArray(val)) return val
+}

package/src/utils/sequence.js

@@ -0,0 +1,117 @@
+'use strict'
+
+import { UNIT } from '../config'
+
+export const numToLetterMap = {
+  '-6': 'U',
+  '-5': 'V',
+  '-4': 'W',
+  '-3': 'X',
+  '-2': 'Y',
+  '-1': 'Z',
+  0: 'A',
+  1: 'B',
+  2: 'C',
+  3: 'D',
+  4: 'E',
+  5: 'F',
+  6: 'G',
+  7: 'H',
+  8: 'I',
+  9: 'J',
+  10: 'K',
+  11: 'L',
+  12: 'M',
+  13: 'N',
+  14: 'O',
+  15: 'P'
+}
+
+const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
+  state.sequence[variable] = {
+    key,
+    decimal: Math.round(value * 100) / 100,
+    val: Math.round(value),
+    scaling,
+    index
+  }
+  state.scales[variable] = scaling
+}
+
+export const generateSubSequence = ({ key, base, value, ratio, variable, state, index }) => {
+  const next = value * ratio
+  const smallscale = (next - value) / ratio
+
+  const valueRounded = Math.round(value)
+  const nextRounded = Math.round(next)
+  const diffRounded = nextRounded - valueRounded
+
+  let arr = []
+  const first = next - smallscale
+  const second = value + smallscale
+  const middle = (first + second) / 2
+  if (diffRounded > 100) arr = [first, middle, second]
+  else arr = [first, second]
+  // else if (diffRounded > 2) arr = [first, second]
+  // else if (diffRounded > 1) arr = [middle]
+
+  arr.map((v, k) => {
+    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, index: index + (k + 1) / 10 })
+  })
+}
+
+export const generateSequence = ({ type, base, ratio, range, subSequence, ...state }) => {
+  const n = Math.abs(range[0]) + Math.abs(range[1])
+  const prefix = '--' + type + '-'
+  for (let i = 0; i <= n; i++) {
+    const key = range[1] - i
+    const letterKey = numToLetterMap[key]
+    const value = base * Math.pow(ratio, key)
+    const scaling = Math.round(value / base * 1000) / 1000
+    const variable = prefix + letterKey
+
+    setSequenceValue({ key: letterKey, variable, value, scaling, state, index: key })
+
+    if (subSequence) generateSubSequence({ key: letterKey, base, value, ratio, variable, state, index: key })
+  }
+  return state
+}
+
+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 === '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
+  // const hasLetter = /[A-Za-z]+/.test(val)
+  const startsWithLetter = startsWithLetterRegex.test(val)
+  if (!startsWithLetter) return ({ [prop]: val })
+
+  const letterVal = val.toUpperCase()
+  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
+  const simplyLetterVal = isNegative ? letterVal.slice(1) : letterVal
+
+  const value = type ? type[prefix + simplyLetterVal] : null
+  if (!value) return console.warn('can\'t find', type, prefix + simplyLetterVal, simplyLetterVal)
+
+  if (unit === 'ms' || unit === 's') {
+    return ({ [prop]: isNegative + value.val + value.unit })
+  }
+  return ({
+    [prop]: isNegative + value.val + value.unit,
+    [prop]: isNegative + value.scaling + 'em'
+  })
+}
+
+export const findHeadings = (TYPOGRAPHY) => {
+  const { h1Matches, type, sequence } = TYPOGRAPHY
+  return new Array(6).fill(null).map((_, i) => {
+    const findLetter = numToLetterMap[h1Matches - i]
+    return sequence[`--${type}-${findLetter}`]
+  })
+}

package/src/utils/setVariables.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { CSS_VARS } from '../factory'
+import { isObjectLike } from './object'
+
+export const setVariables = (result, key) => {
+  // CSS_VARS[result.var] =
+  if (isObjectLike(result.value)) {
+    // console.group(key)
+    // for (const key in result.value) {
+    // console.log(key, result.value[key])
+    // }
+    // console.log(result)
+    // console.groupEnd(key)
+  } else {
+    CSS_VARS[result.var] = result.value
+  }
+}

package/src/methods/create.js

@@ -1,9 +0,0 @@
-'use strict'
-
-import base from '../base'
-
-const create = (what, params, preset) => {
-  base[what] = preset(params)
-}
-
-export default { create }

package/src/methods/generate.js

@@ -1,40 +0,0 @@
-'use strict'
-
-import { themeMap } from '../config/theme'
-
-// var pairAsInvert = (scheme, referenced) => cx(scheme, referenced)
-
-const mapThemeCSS = scheme => {
-  let str = ''
-  for (const prop in scheme) {
-    const mappedProp = themeMap[prop]
-    const value = scheme[prop]
-    if (mappedProp && value) {
-      str += `${mappedProp}: ${value}`
-    }
-  }
-  return str
-}
-
-const generateTheme = scheme => {
-  const { helpers, inverse } = scheme
-
-  let rule = `
-    ${mapThemeCSS(scheme)}
-  `
-
-  if (inverse) {
-    rule += `&.inverse { ${inverse} }`
-  }
-
-  if (helpers) {
-    for (const prop in helpers) {
-      const value = helpers[prop]
-      rule += `.${prop} { ${value} }`
-    }
-  }
-
-  return rule
-}
-
-export default { generateTheme }

package/src/methods/index.js

@@ -1,3 +0,0 @@
-'use strict'
-
-export * from './set'

package/src/methods/inject.js

@@ -1,5 +0,0 @@
-'use strict'
-
-const global = ''
-
-export default global