@symbo.ls/scratch 0.2.26

package/README.md

@@ -0,0 +1,9 @@
+# Φ / Scratch framework
+Scratch is CSS framework and methodology to build web, mobile and TV applications with one code base. Using it means to follow some practices to manage design system and make configuration based cascading styles.
+
+[![npm version](https://badge.fury.io/js/%40rackai%2Fscratch.svg)](https://badge.fury.io/js/%40rackai%2Fscratch)
+
+### TODO:
+- [ ] Generate CSS variables
+- [ ] Accessibility (WCAG) automated  tests
+- [ ] Scratch on `node`

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@symbo.ls/scratch",
+  "description": "Φ / CSS framework and methodology.",
+  "author": "Symbols",
+  "version": "0.2.26",
+  "files": [
+    "src"
+  ],
+  "repository": "https://github.com/rackai/scratch",
+  "main": "src/index.js",
+  "publishConfig": {},
+  "dependencies": {
+    "color-contrast-checker": "^1.5.0"
+  },
+  "scripts": {
+    "standard": "npx standard \"src/**/*.js\"",
+    "test": "yarn standard && jest --coverage --coverageReporters=text-lcov | coveralls",
+    "test-watch": "jest --watch",
+    "bump": "npx np"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^27.0.2",
+    "babel-preset-env": "^1.7.0",
+    "coveralls": "^3.0.5",
+    "eslint": "^7.12.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "jest": "^27.0.6",
+    "nodemon": "^2.0.6",
+    "np": "^7.2.0",
+    "parcel-bundler": "^1.12.4",
+    "standard": "^16.0.1"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ]
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "env": [
+      "jest"
+    ]
+  },
+  "browserslist": [
+    "> 1%",
+    "ie >= 9"
+  ]
+}

package/src/config/color.js

@@ -0,0 +1,10 @@
+'use strict'
+
+var proto = { // eslint-disable-line
+  name: '',
+  value: '',
+  themes: {}
+}
+
+export const COLOR = {}
+export const GRADIENT = {}

package/src/config/document.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { FONT_FAMILY, THEME, TYPOGRAPHY } from '.'
+
+export const DOCUMENT = {
+  theme: THEME.document,
+  fontFamily: FONT_FAMILY[Object.keys(FONT_FAMILY)[0]],
+  fontSize: TYPOGRAPHY.base,
+  lineHeight: TYPOGRAPHY.styles.lineHeight
+}

package/src/config/font-family.js

@@ -0,0 +1,16 @@
+'use strict'
+
+import { getFontFace } from '../utils'
+
+var defaultFont = { // eslint-disable-line
+  name: '',
+  family: '',
+  type: ''
+}
+
+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'
+}
+export const FONT_FACE = getFontFace(FONT_FAMILY)

package/src/config/font.js

@@ -0,0 +1,12 @@
+'use strict'
+
+var defFont = { // eslint-disable-line
+  name: '',
+  url: '',
+  fontStyle: '',
+  fontWeight: 500,
+  fontStretch: 'normal',
+  fontOpticalSizing: 'auto'
+}
+
+export const FONT = {}

package/src/config/index.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export * from './sequence'
+export * from './unit'
+
+export * from './typography'
+export * from './font'
+export * from './font-family'
+
+export * from './spacing'
+
+export * from './color'
+export * from './theme'
+
+export * from './responsive'
+
+export * from './document'

package/src/config/responsive.js

@@ -0,0 +1,13 @@
+'use strict'
+
+export const RESPONSIVE = {
+  screenL: 1920,
+  screenD: 1680,
+  screenS: 1440,
+  tabletL: 1366,
+  tabletM: 1280,
+  tabletS: 1024,
+  mobileL: 768,
+  mobileM: 560,
+  mobileS: 480
+}

package/src/config/sequence.js

@@ -0,0 +1,24 @@
+'use strict'
+
+export const SEQUENCE = {
+  'minor-second': 1.067,
+  'major-second': 1.125,
+  'minor-third': 1.2,
+  'major-third': 1.25,
+  'perfect-fourth': 1.333,
+  'augmented-fourth': 1.414,
+  'perfect-fifth': 1.5,
+  'minor-sixth': 1.6,
+  phi: 1.618, // golden-ratio
+  'major-sixth': 1.667,
+  'square-root-3': 1.732, // theodorus
+  'minor-seventh': 1.778,
+  'major-seventh': 1.875,
+  octave: 2,
+  'square-root-5': 2.23, // pythagoras
+  'major-tenth': 2.5,
+  'major-eleventh': 2.667,
+  'major-twelfth': 3,
+  pi: 3.14, // archimedes
+  'double-octave': 4
+}

package/src/config/spacing.js

@@ -0,0 +1,66 @@
+'use strict'
+
+import { SEQUENCE, TYPOGRAPHY } from '.'
+import { Arrayize, fallBack, generateSequence } from '../utils'
+
+const defaultProps = {
+  base: TYPOGRAPHY.base,
+  type: 'spacing',
+  ratio: SEQUENCE['phi'],
+  range: [-5, +7],
+  subSequence: true,
+  sequence: {},
+  scales: {}
+}
+
+generateSequence(defaultProps)
+
+const getSequence = (props) => {
+  if (!props) return
+  const hasGenerated = Object.keys(props.sequence).length > 0
+  return hasGenerated ? props : generateSequence(props)
+}
+
+export const mapSpacing = (val, property = 'padding', props) => {
+  const prefix = '--spacing-'
+
+  const generatedSequence = getSequence(props)
+  const type = (generatedSequence || defaultProps).sequence
+
+  const stack = Arrayize(val)
+  if (!stack) return
+
+  const length = stack.length
+
+  const wrapFallBack = (prop, i) => fallBack({
+    type,
+    prop,
+    val: stack[i],
+    prefix
+  })
+
+  if (length === 2) {
+    return [
+      wrapFallBack(property + 'Block', 0),
+      wrapFallBack(property + 'Inline', 1)
+    ]
+  }
+  if (length === 3) {
+    return [
+      wrapFallBack(property + 'BlockStart', 0),
+      wrapFallBack(property + 'Inline', 1),
+      wrapFallBack(property + 'BlockEnd', 2)
+    ]
+  } else if (length === 4) {
+    return [
+      wrapFallBack(property + 'BlockStart', 0),
+      wrapFallBack(property + 'InlineStart', 3),
+      wrapFallBack(property + 'BlockEnd', 2),
+      wrapFallBack(property + 'InlineEnd', 1)
+    ]
+  }
+
+  return fallBack({ type, prop: property, val, prefix })
+}
+
+export const SPACING = defaultProps

package/src/config/theme.js

@@ -0,0 +1,20 @@
+'use strict'
+
+const themeA = { // eslint-disable-line no-unused-vars
+  text: 'blue',
+  background: 'white',
+  border: 'black', // .opacity(0.2),
+  active: {},
+  helpers: [],
+  themes: {},
+  inverse: {} // schemeAInverse
+}
+
+export const THEME = {}
+
+export const returnSubThemeOrDefault = (orig, theme) => {
+  if (!orig) return
+  if (orig.themes && orig.themes[theme]) return orig.themes[theme]
+  if (orig[theme]) return [orig, orig[theme]]
+  return orig
+}

package/src/config/timing.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export const TIMING = {
+  base: 16
+}

package/src/config/typography.js

@@ -0,0 +1,39 @@
+'use strict'
+
+import { SEQUENCE } from '.'
+import { fallBack, generateSequence, findHeadings } from '../utils'
+
+const defaultProps = {
+  default: 16,
+  base: 16,
+  type: 'font-size',
+  ratio: SEQUENCE['minor-third'],
+  range: [-3, +12],
+  h1Matches: +6,
+  styles: {
+    lineHeight: 1.5
+  },
+  sequence: {},
+  scales: {}
+}
+
+generateSequence(defaultProps)
+
+if (defaultProps.h1Matches) {
+  var HEADINGS = findHeadings(defaultProps)
+  const { styles } = defaultProps
+  for (const k in HEADINGS) {
+    styles[`h${parseInt(k) + 1}`] = {
+      fontSize: `${HEADINGS[k].scaling}em`
+    }
+  }
+}
+
+export const mapFontSize = val => fallBack({
+  type: defaultProps.sequence,
+  prop: 'fontSize',
+  val,
+  prefix: '--font-size-'
+})
+
+export const TYPOGRAPHY = defaultProps

package/src/config/unit.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export const UNIT = {
+  default: 'em'
+}

package/src/factory.js

@@ -0,0 +1,6 @@
+'use strict'
+
+import * as CONFIG from './config'
+
+export const CSS_VARS = {}
+export default CONFIG

package/src/index.js

@@ -0,0 +1,11 @@
+'use strict'
+
+import CONFIG from './factory'
+
+export * from './factory'
+export * from './utils'
+export * from './methods'
+export * from './config'
+export * from './reset'
+
+export default CONFIG

package/src/methods/create.js

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

package/src/methods/generate.js

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

package/src/methods/index.js

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

package/src/methods/inject.js

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

package/src/methods/set.js

@@ -0,0 +1,235 @@
+'use strict'
+
+import CONFIG, { CSS_VARS } from '../factory'
+// import { FONT, FONT_FAMILY_TYPES } from '../config'
+import {
+  isArray,
+  colorStringToRgbaArray,
+  isObject,
+  isString,
+  isObjectLike,
+  getColorShade,
+  hexToRgbArray,
+  rgbArrayToHex,
+  getDefaultOrFirstKey,
+  getFontFaceEach
+} from '../utils'
+
+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)) return console.warn(value, '- type for color is not valid')
+
+  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)
+    return value
+  }
+
+  // TODO: support variables
+  // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})`
+
+  let rgb = val.rgb
+  if (rgb) {
+    if (tone) {
+      if (!val[tone]) {
+        const toHex = rgbArrayToHex(rgb.split(', '))
+        rgb = hexToRgbArray(getColorShade(toHex, tone)).join(', ')
+        val[tone] = { rgb, var: `${val.var}-${tone}` }
+      } else rgb = val[tone].rgb
+    }
+    if (alpha) return `rgba(${val.rgb}, ${alpha})`
+    return `rgb(${rgb})`
+  } else return val.value
+}
+
+const setThemeValue = theme => {
+  const value = {}
+  const { state, variants, helpers, ...rest } = theme
+  const keys = Object.keys(rest)
+  keys.map(key => {
+    const conditions = ['color', 'Color', 'background', 'border']
+    const isColor = conditions.some(k => key.includes(k))
+    return (value[key] = isColor ? getColor(theme[key]) : theme[key])
+  })
+  return value
+}
+
+const getThemeValue = theme => {
+  if (theme.value) return theme.value
+  theme.value = setThemeValue(theme)
+  return theme.value
+}
+
+export const getTheme = value => {
+  const { THEME } = CONFIG
+  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])
+  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)
+  } else if (variant === true) {
+    const { color, background } = value
+    theme.variants.inverse = {
+      value: {
+        color: background,
+        background: color
+      }
+    }
+  }
+}
+
+const goThroughHelpers = (theme, value) => {
+  const { helpers } = theme
+  if (!helpers) return
+  const keys = Object.keys(helpers)
+  keys.map(key => {
+    const helper = helpers[key]
+    if (isString(helper)) helpers[key] = CONFIG.THEME[helper]
+    else getThemeValue(helpers[key])
+    return theme
+  })
+  return theme
+}
+
+const goThroughVariants = (theme, value) => {
+  const { variants } = theme
+  if (!variants) return
+  const keys = Object.keys(variants)
+  keys.map(key => {
+    const variant = variants[key]
+    if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value)
+    if (key === 'inverse') setInverseTheme(theme, variant, value)
+    return theme
+  })
+  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)
+  keys.map(key => {
+    const variant = state[key]
+    setPseudo(theme, key, variant, value)
+    return theme
+  })
+  return theme
+}
+
+const setTheme = (val, key) => {
+  const { state, variants, helpers } = val
+  const value = setThemeValue(val, key)
+  const CSSvar = `--theme-${key}`
+
+  goThroughInteractiveStates(val, value)
+  goThroughVariants(val, value)
+  goThroughHelpers(val, value)
+
+  return { var: CSSvar, value, state, variants, helpers }
+}
+
+const setFont = (val, key) => {
+  const CSSvar = `--font-${key}`
+  const fontFace = getFontFaceEach(key, val)
+  return { var: CSSvar, value: val, fontFace }
+}
+
+export const getFontFamily = (LIBRARY, key) => {
+  return getDefaultOrFirstKey(LIBRARY, key)
+}
+
+const setFontFamily = (val, key) => {
+  const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG
+  const { value, type } = val
+  if (val.default) FONT_FAMILY.default = key
+
+  const CSSvar = `--font-family-${key}`
+  const str = `${value.join(', ')}, ${FONT_FAMILY_TYPES[type]}`
+  return { var: CSSvar, value: str, arr: value, type }
+}
+
+export const SETTERS = {
+  color: setColor,
+  gradient: setGradient,
+  font: setFont,
+  font_family: setFontFamily,
+  theme: setTheme
+}
+
+/**
+ *
+ * @param {Object} FACTORY_NAME Defines which factory it goes to
+ * @param {*} value Value of the property
+ * @param {String} key Key, or the name of the property
+ * @returns {Object} Factory
+ */
+export const setValue = (FACTORY_NAME, value, key) => {
+  const factoryName = FACTORY_NAME.toLowerCase()
+  const FACTORY = CONFIG[FACTORY_NAME]
+  const result = SETTERS[factoryName](value, key)
+  FACTORY[key] = result
+  CSS_VARS[result.var] = result.value
+  return FACTORY
+}
+
+export const setEach = (factoryName, props) => {
+  const FACTORY_NAME = factoryName.toUpperCase()
+  const keys = Object.keys(props)
+  keys.map(key => setValue(FACTORY_NAME, props[key], key))
+  return CONFIG[FACTORY_NAME]
+}
+
+export const set = config => {
+  const keys = Object.keys(config)
+  keys.map(key => setEach(key, config[key]))
+  return CONFIG
+}
+
+export default set

package/src/reset.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import * as CONFIG from './config'
+
+export const RESET = {
+  html: {
+    position: 'fixed',
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+    top: '0',
+    left: '0',
+    margin: '0',
+    WebkitFontSmoothing: 'antialiased',
+
+    fontFamily: CONFIG.DOCUMENT.fontFamily,
+
+    fontSize: CONFIG.TYPOGRAPHY.default / CONFIG.DOCUMENT.fontSize + CONFIG.UNIT.default,
+    lineHeight: CONFIG.DOCUMENT.lineHeight
+  },
+
+  body: {
+    boxSizing: 'border-box',
+    height: '100%'
+  },
+
+  ...CONFIG.TYPOGRAPHY.styles,
+
+  // form elements
+  fieldset: {
+    border: 0,
+    padding: 0,
+    margin: 0
+  }
+}

package/src/tests/index.js

@@ -0,0 +1,4 @@
+'use strict'
+
+export const testWCAGAA = (colorA, colorB) => {}
+export const testWCAGAAA = (colorA, colorB) => {}

package/src/utils/index.js

@@ -0,0 +1,292 @@
+'use strict'
+
+import { UNIT } from '../config'
+
+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 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 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) return console.warn(color + 'color is not rgba')
+  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 }) => {
+  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 })
+  })
+}
+
+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 })
+  }
+  return state
+}
+
+export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-' }) => {
+  if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
+
+  // 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 + UNIT.default,
+    [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}`]
+  })
+}