@symbo.ls/scratch 0.6.3 → 0.7.0

package/package.json

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

package/src/{config → defaultConfig}/index.js

@@ -14,6 +14,7 @@ export * from './theme'
 export * from './icons'
 export * from './timing'
 export * from './document'
+export * from './responsive'
 export * from './cases'
 
 export const RESET = {}

package/src/{config → defaultConfig}/responsive.js

@@ -2,7 +2,7 @@
 
 export const BREAKPOINTS = {
   screenL: 1920,
-  screenD: 1680,
+  screenM: 1680,
   screenS: 1440,
   tabletL: 1366,
   tabletM: 1280,

package/src/factory.js

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

package/src/index.js

@@ -3,4 +3,4 @@
 export * from './factory'
 export * from './utils'
 export * from './set'
-export * from './config'
+export * from './defaultConfig'

package/src/system/color.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { MEDIA } from '../config'
+import { MEDIA } from '../defaultConfig'
 import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
 
 import {
@@ -23,6 +23,8 @@ export const getColor = (value, key) => {
     return
   }
 
+  if (value.slice(0, 2) === '--') return `var(${value})`
+
   if (key && value[key]) value = value[key]
   const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
   const { COLOR, GRADIENT } = CONFIG
@@ -30,7 +32,7 @@ export const getColor = (value, key) => {
   let val = (COLOR[name] || GRADIENT[name])
 
   if (!val) {
-    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color', name)
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color ', name)
     return value
   }
 
@@ -70,6 +72,8 @@ export const getMediaColor = (value, param) => {
     return
   }
 
+  if (value.slice(0, 2) === '--') return { [param]: `var(${value})` }
+
   const [name] = isArray(value) ? value : value.split(' ')
 
   const { COLOR, GRADIENT } = CONFIG

package/src/system/document.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } from '../config'
+import { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } from '../defaultConfig'
 import { getDefaultOrFirstKey, merge } from '../utils'
 
 export const applyDocument = () => merge(DOCUMENT, {

package/src/system/reset.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import * as CONFIG from '../config'
+import * as CONFIG from '../defaultConfig'
 import { CSS_VARS } from '../factory'
 import { getTheme } from '.'
 import { deepMerge, merge } from '../utils'

package/src/system/spacing.js

@@ -1,13 +1,13 @@
 'use strict'
 
-import { SPACING } from '../config'
-import { applySequenceVars, Arrayize, generateSequence, getSequenceValue, merge } from '../utils'
+import { SPACING } from '../defaultConfig'
+import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, merge } from '../utils'
 
-const runThroughMedia = props => {
-  for (const prop in props) {
-    const mediaProps = props[prop]
+const runThroughMedia = sequenceProps => {
+  for (const prop in sequenceProps) {
+    const mediaProps = sequenceProps[prop]
     if (prop.slice(0, 1) === '@') {
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps
 
       merge(mediaProps, {
         type,
@@ -37,57 +37,81 @@ export const applySpacingSequence = () => {
   runThroughMedia(SPACING)
 }
 
-const getSequence = (props) => {
-  if (!props) return
-  const hasGenerated = Object.keys(props.sequence).length > 0
-  return hasGenerated ? props : generateSequence(props)
+const getSequence = (sequenceProps) => {
+  if (!sequenceProps) return SPACING
+  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
+  return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
 }
 
-export const getSpacingByKey = (val, property = 'padding', props, unit) => {
-  const prefix = '--spacing-'
+export const getSpacingByKey = (
+  value,
+  propertyName = 'padding',
+  sequenceProps
+) => {
+  const sequence = getSequence(sequenceProps)
 
-  const generatedSequence = getSequence(props)
-  const type = (generatedSequence || SPACING).sequence
-
-  const stack = Arrayize(val)
+  const stack = arrayze(value)
   if (!stack) return
 
-  const length = stack.length
-
-  const wrapSequenceItem = (prop, i) => getSequenceValue({
-    type,
-    prop,
-    val: stack[i],
-    prefix,
-    unit
-  })
-
   let suffix = ''
-  if (property === 'borderWidth') {
-    property = 'border'
+  if (propertyName === 'borderWidth') {
+    propertyName = 'border'
     suffix = 'Width'
   }
 
-  if (length === 2) {
-    return [
-      wrapSequenceItem(property + 'Block' + suffix, 0),
-      wrapSequenceItem(property + 'Inline' + suffix, 1)
-    ]
+  const directions = {
+    2: ['Block', 'Inline'],
+    3: ['BlockStart', 'Inline', 'BlockEnd'],
+    4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
   }
-  if (length === 3) {
-    return [
-      wrapSequenceItem(property + 'BlockStart' + suffix, 0),
-      wrapSequenceItem(property + 'Inline' + suffix, 1),
-      wrapSequenceItem(property + 'BlockEnd' + suffix, 2)
-    ]
-  } else if (length === 4) {
-    return [
-      wrapSequenceItem(property + 'BlockStart' + suffix, 0),
-      wrapSequenceItem(property + 'InlineStart' + suffix, 3),
-      wrapSequenceItem(property + 'BlockEnd' + suffix, 2),
-      wrapSequenceItem(property + 'InlineEnd' + suffix, 1)
-    ]
+
+  const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+    stack[i],
+    propertyName + direction + suffix,
+    sequence
+  )
+
+  if (stack.length > 1) {
+    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key))
   }
 
-  return getSequenceValue({ type, prop: property, val, prefix, unit })
+  return getSequenceValuePropertyPair(
+    value,
+    propertyName,
+    sequence
+  )
+}
+
+export const getSpacingBasedOnRatio = (props, propertyName, val) => {
+  const { spacingRatio, unit } = props
+  const value = val || props[propertyName]
+
+  if (spacingRatio) {
+    let sequenceProps = SPACING[spacingRatio]
+
+    if (!sequenceProps) {
+      const { type, base, range, subSequence } = SPACING
+
+      sequenceProps = SPACING[spacingRatio] = merge({
+        ratio: spacingRatio,
+        type: type + '-' + spacingRatio,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      }, {
+        base,
+        range,
+        subSequence,
+        ratio: SPACING.ratio,
+        unit: SPACING.unit
+      })
+    }
+
+    applySequenceVars(sequenceProps, null, { useDefault: false })
+
+    return getSpacingByKey(value, propertyName, sequenceProps)
+  }
+  return getSpacingByKey(value, propertyName)
 }

package/src/system/theme.js

@@ -10,7 +10,7 @@ import {
   isArray
 } from '../utils'
 
-const ENV = process.env.NODE_ENV
+const ENV = process.env.NODE_ENV // eslint-disable-line
 
 const setThemeValue = theme => {
   const value = {}
@@ -53,7 +53,7 @@ export const getTheme = (value, modifier) => {
     if (state && state[subThemeName]) return getThemeValue(state[subThemeName])
   } else if (isObject(value)) return setThemeValue(value)
 
-  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
+  // if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
 }
 
 const setInverseTheme = (theme, variant, value) => {
@@ -161,8 +161,23 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
         } else {
           theme[param] = color
         }
+        theme[`.${param}`] = { [param]: theme[param] }
       }
     }
+
+    if (theme['background'] || theme['color'] || theme['backgroundColor']) {
+      theme['.inversed'] = {
+        color: theme['background'] || theme['backgroundColor'],
+        background: theme['color']
+      }
+    }
+  }
+
+  if (isString(val) && val.slice(0, 2) === '--') {
+    const { THEME } = CONFIG
+    const value = THEME[val.slice(2)]
+    const getReferenced = getMediaTheme(value)
+    return getReferenced
   }
 
   return theme
@@ -185,13 +200,42 @@ const recursiveTheme = val => {
   return obj
 }
 
-export const getMediaTheme = (val, key, themeObj) => {
+const findModifierFromArray = (val, modifierArray) => {
+  const currentMod = modifierArray.shift()
+  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray)
+  return val
+}
+
+const findModifier = (val, modifier) => {
+  // console.log(val)
+  // console.log(modifier)
+  if (isArray(modifier)) return findModifierFromArray(val, modifier)
+  else if (isString(modifier)) return val[modifier]
+  else return val
+}
+
+const checkForReference = (val, callback) => {
+  if (isString(val) && val.slice(0, 2) === '--') return getMediaTheme(val.slice(2))
+  return val
+}
+
+const checkThemeReference = (val) => checkForReference(val, checkThemeReference) // eslint-disable-line
+
+export const getMediaTheme = (val, mod, themeObj) => {
+  if (isString(val) && val.slice(0, 2) === '--') val = getMediaTheme(val.slice(2))
+
   if (!val || !isString(val)) {
-    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- type for color is not valid')
+    // if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- type for color is not valid')
     return
   }
-  const [name, modifier] = isArray(val) ? val : val.split(' ')
+
+  // console.group(val)
+  const [name, ...modifier] = isArray(val) ? val : val.split(' ')
   let value = CONFIG.THEME[name]
-  if (value && modifier && value[modifier]) value = value[modifier]
+  if (value && (modifier || mod)) value = findModifier(value, modifier.length ? modifier : mod)
+  // console.log('finalval', value)
+  // console.groupEnd(val)
   return recursiveTheme(value)
 }
+
+window.getMediaTheme = getMediaTheme

package/src/system/timing.js

@@ -1,10 +1,10 @@
 'use strict'
 
-import { TIMING } from '../config'
+import { TIMING } from '../defaultConfig'
 import {
   applySequenceVars,
   generateSequence,
-  getSequenceValue
+  getSequenceValuePropertyPair
 } from '../utils'
 
 export const applyTimingSequence = () => {
@@ -12,10 +12,8 @@ export const applyTimingSequence = () => {
   applySequenceVars(TIMING)
 }
 
-export const getTimingByKey = val => getSequenceValue({
-  type: TIMING.sequence,
-  prop: 'duration',
-  val,
-  unit: 'ms',
-  prefix: '--duration-'
-})
+export const getTimingByKey = value => getSequenceValuePropertyPair(
+  value,
+  'duration',
+  TIMING
+)

package/src/system/typography.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { MEDIA, TYPOGRAPHY } from '../config'
+import { MEDIA, TYPOGRAPHY } from '../defaultConfig'
 import { CONFIG } from '../factory'
 import {
   applySequenceVars,
   findHeadings,
   generateSequence,
-  getSequenceValue,
+  getSequenceValuePropertyPair,
   merge
 } from '../utils'
 
@@ -63,10 +63,8 @@ export const applyTypographySequence = () => {
   runThroughMedia(TYPOGRAPHY)
 }
 
-export const getFontSizeByKey = val => getSequenceValue({
-  type: TYPOGRAPHY.sequence,
-  prop: 'fontSize',
-  val,
-  unit: TYPOGRAPHY.unit,
-  prefix: '--font-size-'
-})
+export const getFontSizeByKey = value => getSequenceValuePropertyPair(
+  value,
+  'fontSize',
+  TYPOGRAPHY
+)

package/src/utils/object.js

@@ -38,7 +38,7 @@ export const deepMerge = (obj, obj2) => {
   return obj
 }
 
-export const Arrayize = val => {
+export const arrayze = val => {
   const isString = typeof val === 'string'
   if (isString) return val.split(' ')
   if (isObject(val)) return Object.keys(val).map(v => val[v])

package/src/utils/sequence.js

@@ -1,7 +1,8 @@
 'use strict'
 
-import { UNIT } from '../config'
+import { UNIT } from '../defaultConfig'
 import { CONFIG } from '../factory'
+import { isString } from './object'
 
 export const numToLetterMap = {
   '-6': 'U',
@@ -32,8 +33,9 @@ export const numToLetterMap = {
   19: 'T'
 }
 
-const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
-  state.sequence[key] = {
+const setSequenceValue = (props, sequenceProps) => {
+  const { key, variable, value, scaling, index } = props
+  sequenceProps.sequence[key] = {
     key,
     decimal: Math.round(value * 100) / 100,
     val: Math.round(value),
@@ -41,59 +43,17 @@ const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
     index,
     variable
   }
-  state.scales[key] = scaling
-  state.vars[variable] = scaling + state.unit
+  sequenceProps.scales[key] = scaling
+  sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
-export const getSequenceValue = ({ type, prop, val = 'A', prefix = '--font-size-', unit = UNIT.default }) => {
-  if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
+const dashize = val => val
+  .replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
+  .replace('.', '-')
 
-  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 startsWithLetter = startsWithLetterRegex.test(val)
-  if (!startsWithLetter) return ({ [prop]: val })
-
-  const letterVal = val.toUpperCase()
-  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
-  let pureVal = isNegative ? letterVal.slice(1) : letterVal
-
-  let mediaName = ''
-  if (pureVal.includes('-')) {
-    mediaName = '-' + pureVal.split('-')[1].toLowerCase()
-    pureVal = pureVal.split('-')[0]
-  }
-
-  const value = type ? type[pureVal] : null
-  if (!value) return console.warn('can\'t find', type, pureVal)
+export const generateSubSequence = (props, sequenceProps) => {
+  const { key, base, value, ratio, variable, index } = props
 
-  if (CONFIG.useVariable) {
-    const varVal = `var(${prefix}${pureVal}${mediaName})`
-    return isNegative ? {
-      [prop]: `calc(${varVal} * -1)`
-    } : {
-      [prop]: varVal
-    }
-  }
-
-  if (unit === 'ms' || unit === 's') {
-    return ({ [prop]: isNegative + value.val + unit })
-  }
-
-  return ({
-    [prop]: isNegative + value.val + value.unit,
-    [prop]: isNegative + value.scaling + unit
-  })
-}
-
-export const generateSubSequence = ({ key, base, value, ratio, variable, state, index }) => {
   const next = value * ratio
   const smallscale = (next - value) / ratio
 
@@ -102,23 +62,32 @@ export const generateSubSequence = ({ key, base, value, ratio, variable, state,
   const diffRounded = nextRounded - valueRounded
 
   let arr = []
-  const first = next - smallscale
-  const second = value + smallscale
+  const first = value + smallscale
+  const second = next - smallscale
   const middle = (first + second) / 2
-  if (diffRounded > 100) arr = [first, middle, second]
+  if (diffRounded > 16) arr = [first, middle, second]
   else arr = [first, second]
 
   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 })
+    const props = {
+      key: key + (k + 1),
+      variable: newVar,
+      value: v,
+      scaling,
+      index: index + (k + 1) / 10
+    }
+
+    return setSequenceValue(props, sequenceProps)
   })
 }
 
-export const generateSequence = ({ type, base, ratio, range, subSequence, ...state }) => {
+export const generateSequence = (sequenceProps) => {
+  const { type, base, ratio, range, subSequence } = sequenceProps
   const n = Math.abs(range[0]) + Math.abs(range[1])
-  const prefix = '--' + type + '-'
+  const prefix = '--' + type.replace('.', '-') + '-'
 
   for (let i = 0; i <= n; i++) {
     const key = range[1] - i
@@ -127,15 +96,84 @@ export const generateSequence = ({ type, base, ratio, range, subSequence, ...sta
     const scaling = Math.round(value / base * 1000) / 1000
     const variable = prefix + letterKey
 
-    setSequenceValue({ key: letterKey, variable, value, scaling, state, index: key })
+    const props = {
+      key: letterKey,
+      variable,
+      value,
+      base,
+      scaling,
+      ratio,
+      index: key
+    }
+
+    setSequenceValue(props, sequenceProps)
+
+    if (subSequence) generateSubSequence(props, sequenceProps)
+  }
+  return sequenceProps
+}
+
+export const getSequenceValue = (value = 'A', sequenceProps) => {
+  const {
+    sequence,
+    unit = UNIT.default,
+    useVariable
+  } = sequenceProps
+
+  if (isString(value) && value.slice(0, 2) === '--') {
+    return `var(${value})`
+  }
+
+  const prefix = `--${dashize(sequenceProps.type.replace('.', '-'))}-`
+
+  const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i
+  const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value)
+
+  if (
+    value === 'none' ||
+    value === 'auto' ||
+    value === 'fit-content' ||
+    value === 'min-content' ||
+    value === 'max-content' ||
+    !startsWithDashOrLetter
+  ) return value
+
+  const letterVal = value.toUpperCase()
+  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
+  let absValue = isNegative ? letterVal.slice(1) : letterVal
+
+  let mediaName = ''
+  if (absValue.includes('-')) {
+    mediaName = '-' + absValue.split('-')[1].toLowerCase()
+    absValue = absValue.split('-')[0]
+  }
+
+  if (useVariable || CONFIG.useVariable) {
+    const varValue = `var(${prefix}${absValue}${mediaName})`
+    return isNegative ? `calc(${varValue} * -1)` : varValue
+  }
+
+  const sequenceItem = sequence ? sequence[absValue] : null
+  if (!sequenceItem) return console.warn('can\'t find', sequence, absValue)
+
+  if (unit === 'ms' || unit === 's') {
+    return isNegative + sequenceItem.value + unit
+  }
+
+  return isNegative + sequenceItem.scaling + unit
+}
 
-    if (subSequence) generateSubSequence({ key: letterKey, base, value, ratio, variable, state, index: key })
+export const getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+  if (typeof value !== 'string') {
+    console.warn(propertyName, value, 'is not a string')
+    return ({})
   }
-  return state
+  if (value === '-' || value === '') return ({})
+  return { [propertyName]: getSequenceValue(value, sequenceProps) }
 }
 
-export const findHeadings = props => {
-  const { h1Matches, sequence } = props
+export const findHeadings = propertyNames => {
+  const { h1Matches, sequence } = propertyNames
   return new Array(6).fill(null).map((_, i) => {
     const findLetter = numToLetterMap[h1Matches - i]
     return sequence[findLetter]

package/src/utils/var.js

@@ -1,9 +1,11 @@
 'use strict'
 
-import { MEDIA } from '../config'
+import { MEDIA } from '../defaultConfig'
 import { CONFIG, CSS_VARS } from '../factory'
 import { isObjectLike } from './object'
 
+const ENV = process.env.NODE_ENV
+
 export const setVariables = (result, key) => {
   // CSS_VARS[result.var] =
   if (isObjectLike(result.value)) {
@@ -18,23 +20,30 @@ export const setVariables = (result, key) => {
   }
 }
 
-export const applySequenceVars = (props, mediaName) => {
+export const applySequenceVars = (props, mediaName, options = {}) => {
   const unit = props.unit || CONFIG.UNIT.default
   const { sequence, scales } = props
 
   for (const key in sequence) {
     const item = sequence[key]
     const value = (props.type === 'duration' ? sequence[key].val : scales[key]) + unit
-    const query = MEDIA[mediaName]
 
     if (mediaName) {
+      const query = MEDIA[mediaName]
+      if (!query) {
+        if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find query ', query)
+      }
       let underMediaQuery = CSS_VARS[`@media ${query}`]
       if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
       underMediaQuery[item.variable] = `var(${item.variable + '-' + mediaName})`
       CSS_VARS[item.variable + '-' + mediaName] = value
     } else {
-      CSS_VARS[item.variable + '-default'] = value
-      CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
+      if (options.useDefault === false) {
+        CSS_VARS[item.variable] = value
+      } else {
+        CSS_VARS[item.variable + '-default'] = value
+        CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
+      }
     }
   }
 }