@symbo.ls/scratch 0.7.35 → 0.7.36

package/package.json

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

package/src/defaultConfig/index.js

@@ -1,7 +1,5 @@
 'use strict'
 
-import { CSS_VARS } from '../factory' // eslint-disable-line
-
 export * from './sequence'
 export * from './unit'
 export * from './typography'

package/src/factory.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { deepClone, isDefined } from '@domql/utils'
 import * as CONF from './defaultConfig'
 
 export const CSS_VARS = {}
@@ -7,6 +8,26 @@ export const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
-  VARS: CSS_VARS,
+  CSS_VARS,
   ...CONF
 }
+
+const cachedConfig = deepClone(CONFIG)
+
+export const FACTORY = {
+  active: '0',
+  0: CONFIG
+}
+
+export const activateConfig = (def) => {
+  if (isDefined(def)) { FACTORY.active = def }
+  return FACTORY[def || FACTORY.active]
+}
+
+export const getActiveConfig = (def) => {
+  if (isDefined(def) && !FACTORY[def]) {
+    FACTORY[def] = deepClone(cachedConfig)
+    return FACTORY[def]
+  }
+  return FACTORY[def || FACTORY.active]
+}

package/src/set.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { CONFIG, CSS_VARS } from './factory' // eslint-disable-line no-unused-vars
+import { FACTORY, getActiveConfig } from './factory' // eslint-disable-line no-unused-vars
 import {
   setColor,
   setGradient,
@@ -50,6 +50,7 @@ export const SETTERS = {
  * @returns {Object} Factory
  */
 export const setValue = (FACTORY_NAME, value, key) => {
+  const CONFIG = getActiveConfig()
   const factoryName = FACTORY_NAME.toLowerCase()
   const FACTORY = CONFIG[FACTORY_NAME]
 
@@ -62,6 +63,7 @@ export const setValue = (FACTORY_NAME, value, key) => {
 }
 
 export const setEach = (factoryName, props) => {
+  const CONFIG = getActiveConfig()
   const FACTORY_NAME = factoryName.toUpperCase()
   const keys = Object.keys(props)
   keys.map(key => setValue(FACTORY_NAME, props[key], key))
@@ -69,9 +71,17 @@ export const setEach = (factoryName, props) => {
   return CONFIG[FACTORY_NAME]
 }
 
-export const set = recivedConfig => {
+const SET_OPTIONS = {}
+
+export const set = (recivedConfig, options = SET_OPTIONS) => {
+  let CONFIG = getActiveConfig()
   const { version, verbose, useVariable, useReset, globalTheme, ...config } = recivedConfig
 
+  if (options.newConfig) {
+    FACTORY['active'] = options.newConfig
+    CONFIG = getActiveConfig(options.newConfig)
+  }
+
   if (verbose !== undefined) CONFIG.verbose = verbose
   if (useVariable !== undefined) CONFIG.useVariable = useVariable
   if (useReset !== undefined) CONFIG.useReset = useReset

package/src/system/color.js

@@ -1,7 +1,6 @@
 'use strict'
 
-import { MEDIA } from '../defaultConfig'
-import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
+import { getActiveConfig } from '../factory'
 
 import {
   isArray,
@@ -16,6 +15,7 @@ import {
 } from '../utils'
 
 export const getColor = (value, key) => {
+  const CONFIG = getActiveConfig()
   if (!isString(value)) {
     if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
@@ -64,7 +64,9 @@ export const getColor = (value, key) => {
   } else return CONFIG.useVariable ? `var(${val.var})` : val.value
 }
 
-export const getMediaColor = (value, property, globalTheme = CONFIG.globalTheme) => {
+export const getMediaColor = (value, property, globalTheme) => {
+  const CONFIG = getActiveConfig()
+  if (!globalTheme) globalTheme = CONFIG.globalTheme
   if (!isString(value)) {
     if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
@@ -84,7 +86,7 @@ export const getMediaColor = (value, property, globalTheme = CONFIG.globalTheme)
     else {
       const obj = {}
       for (const mediaName in val) {
-        const query = MEDIA[mediaName.slice(1)]
+        const query = CONFIG.MEDIA[mediaName.slice(1)]
         const media = `@media screen and ${query}`
         obj[media] = { [property]: getColor(value, mediaName) }
       }
@@ -97,6 +99,8 @@ export const getMediaColor = (value, property, globalTheme = CONFIG.globalTheme)
 }
 
 export const setColor = (val, key, suffix) => {
+  const CONFIG = getActiveConfig()
+
   if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
 
   if (isArray(val)) {
@@ -118,7 +122,7 @@ export const setColor = (val, key, suffix) => {
   const rgb = `${r}, ${g}, ${b}`
   const value = `rgba(${rgb}, ${alpha})`
 
-  if (CONFIG.useVariable) { CSS_VARS[CSSVar] = value }
+  if (CONFIG.useVariable) { CONFIG.CSS_VARS[CSSVar] = value }
 
   return {
     var: CSSVar,
@@ -129,6 +133,7 @@ export const setColor = (val, key, suffix) => {
 }
 
 export const setGradient = (val, key, suffix) => {
+  const CONFIG = getActiveConfig()
   if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
 
   if (isArray(val)) {
@@ -147,7 +152,7 @@ export const setGradient = (val, key, suffix) => {
   const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : '')
 
   if (CONFIG.useVariable) {
-    CSS_VARS[CSSVar] = val.value || val
+    CONFIG.CSS_VARS[CSSVar] = val.value || val
   }
 
   return {

package/src/system/document.js

@@ -1,11 +1,15 @@
 'use strict'
 
-import { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } from '../defaultConfig'
+import { getActiveConfig } from '../factory'
 import { getDefaultOrFirstKey, merge } from '../utils'
 
-export const applyDocument = () => merge(DOCUMENT, {
-  theme: THEME.document,
-  fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
-  fontSize: TYPOGRAPHY.base,
-  lineHeight: TYPOGRAPHY.lineHeight
-})
+export const applyDocument = () => {
+  const CONFIG = getActiveConfig()
+  const { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } = CONFIG
+  return merge(DOCUMENT, {
+    theme: THEME.document,
+    fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
+    fontSize: TYPOGRAPHY.base,
+    lineHeight: TYPOGRAPHY.lineHeight
+  })
+}

package/src/system/font.js

@@ -1,9 +1,10 @@
 'use strict'
 
 import { isObject } from '@domql/utils'
-import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
+import { getActiveConfig } from '../factory'
 
 import {
+  arrayze,
   getDefaultOrFirstKey,
   getFontFaceEach,
   setCustomFontMedia
@@ -13,22 +14,26 @@ import {
 
 export const setFont = (val, key) => {
   const CSSvar = `--font-${key}`
-  const fontFace = isObject(val)
-    ? setCustomFontMedia(key, val.url)
-    : getFontFaceEach(key, val)
+  const fontFace = val[0]
+    ? getFontFaceEach(key, val)
+    : setCustomFontMedia(key, val.url)
   return { var: CSSvar, value: val, fontFace }
 }
 
 export const getFontFamily = (key, factory) => {
+  const CONFIG = getActiveConfig()
   const { FONT_FAMILY } = CONFIG
   return getDefaultOrFirstKey(factory || FONT_FAMILY, key)
 }
 
 export const setFontFamily = (val, key) => {
+  const CONFIG = getActiveConfig()
   const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG
-  const { value, type } = val
+  let { value, type } = val
   if (val.isDefault) FONT_FAMILY.default = key
 
+  if (isObject(value)) value = arrayze(value)
+
   const CSSvar = `--font-family-${key}`
   const str = `${value.join(', ')}, ${FONT_FAMILY_TYPES[type]}`
   return { var: CSSvar, value: str, arr: value, type }

package/src/system/reset.js

@@ -1,14 +1,16 @@
 'use strict'
 
-import { CONFIG, CSS_VARS } from '../factory'
+import { getActiveConfig } from '../factory'
 import { getMediaTheme } from '.'
-import { deepMerge, merge, overwriteDeep } from '@domql/utils' // eslint-disable-line no-unused-vars
+import { deepMerge, merge } from '@domql/utils' // eslint-disable-line no-unused-vars
 
 export const applyReset = (reset = {}) => {
-  if (CONFIG.RESET) {
-    if (CONFIG.RESET[':root']) {
-      const configReset = CONFIG.RESET
-      const configStyles = CONFIG.TYPOGRAPHY.styles
+  const CONFIG = getActiveConfig()
+  const { CSS_VARS, RESET, TYPOGRAPHY, DOCUMENT } = CONFIG
+  if (RESET) {
+    if (RESET[':root']) {
+      const configReset = RESET
+      const configStyles = TYPOGRAPHY.styles
 
       configReset[':root'] = CSS_VARS
       configReset.body = {
@@ -23,7 +25,7 @@ export const applyReset = (reset = {}) => {
       configReset.h6 = configStyles.h6
     }
 
-    return deepMerge(merge(CONFIG.RESET, reset), {
+    return deepMerge(merge(RESET, reset), {
       ':root': CSS_VARS,
 
       html: {
@@ -38,25 +40,25 @@ export const applyReset = (reset = {}) => {
         transform: 'translate3d(0, 0, 1px)',
         scrollBehavior: 'smooth',
 
-        fontSize: CONFIG.TYPOGRAPHY.browserDefault + 'px',
+        fontSize: TYPOGRAPHY.browserDefault + 'px',
 
-        fontFamily: CONFIG.DOCUMENT.fontFamily,
-        lineHeight: CONFIG.DOCUMENT.lineHeight
+        fontFamily: DOCUMENT.fontFamily,
+        lineHeight: DOCUMENT.lineHeight
       },
 
-      ...CONFIG.TYPOGRAPHY.styles,
+      ...TYPOGRAPHY.styles,
 
       body: {
         boxSizing: 'border-box',
         height: '100%',
         margin: 0,
-        fontFamily: CONFIG.DOCUMENT.fontFamily,
+        fontFamily: DOCUMENT.fontFamily,
 
-        fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+        fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
 
         ...getMediaTheme('document', `@${CONFIG.globalTheme}`),
 
-        ...CONFIG.TYPOGRAPHY.styles.body
+        ...TYPOGRAPHY.styles.body
       },
 
       // form elements
@@ -67,7 +69,7 @@ export const applyReset = (reset = {}) => {
       },
 
       'select, input': {
-        fontFamily: CONFIG.DOCUMENT.fontFamily
+        fontFamily: DOCUMENT.fontFamily
       }
     })
   }

package/src/system/spacing.js

@@ -1,7 +1,14 @@
 'use strict'
 
-import { SPACING } from '../defaultConfig'
-import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, isString, merge } from '../utils'
+import { getActiveConfig } from '../factory'
+import {
+  applySequenceVars,
+  arrayze,
+  generateSequence,
+  getSequenceValuePropertyPair,
+  isString,
+  merge
+} from '../utils'
 
 const runThroughMedia = sequenceProps => {
   for (const prop in sequenceProps) {
@@ -32,12 +39,16 @@ const runThroughMedia = sequenceProps => {
 }
 
 export const applySpacingSequence = () => {
+  const CONFIG = getActiveConfig()
+  const { SPACING } = CONFIG
   generateSequence(SPACING)
   applySequenceVars(SPACING)
   runThroughMedia(SPACING)
 }
 
 const getSequence = (sequenceProps) => {
+  const CONFIG = getActiveConfig()
+  const { SPACING } = CONFIG
   if (!sequenceProps) return SPACING
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
@@ -87,6 +98,9 @@ export const getSpacingByKey = (
 }
 
 export const getSpacingBasedOnRatio = (props, propertyName, val) => {
+  const CONFIG = getActiveConfig()
+  const { SPACING } = CONFIG
+
   const { spacingRatio, unit } = props
   const value = val || props[propertyName]
 

package/src/system/theme.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { getColor } from './color'
-import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
+import { getActiveConfig } from '../factory'
 
 import {
   isObject,
@@ -31,6 +31,7 @@ const getThemeValue = theme => {
 }
 
 export const getTheme = (value, modifier) => {
+  const CONFIG = getActiveConfig()
   if (CONFIG.useVariable) return getMediaTheme(value, modifier)
   const { THEME } = CONFIG
 
@@ -106,6 +107,7 @@ const setMedia = (theme, value) => {
 }
 
 const setHelpers = (theme, value) => {
+  const CONFIG = getActiveConfig()
   const { helpers } = theme
   if (!helpers) return
   const keys = Object.keys(helpers)
@@ -119,6 +121,7 @@ const setHelpers = (theme, value) => {
 }
 
 export const setTheme = (val, key) => {
+  const CONFIG = getActiveConfig()
   if (CONFIG.useVariable) return setMediaTheme(val, key)
 
   const { state, media, helpers } = val
@@ -139,6 +142,8 @@ const keySetters = { // eslint-disable-line
 }
 
 export const setMediaTheme = (val, key, suffix, prefers) => {
+  const CONFIG = getActiveConfig()
+  const { CSS_VARS } = CONFIG
   const theme = { value: val }
 
   if (isObject(val)) {
@@ -182,6 +187,7 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
 }
 
 const recursiveTheme = val => {
+  const CONFIG = getActiveConfig()
   const obj = {}
   for (const param in val) {
     const symb = param.slice(0, 1)
@@ -218,6 +224,7 @@ const checkForReference = (val, callback) => {
 const checkThemeReference = (val) => checkForReference(val, checkThemeReference) // eslint-disable-line
 
 export const getMediaTheme = (val, mod) => {
+  const CONFIG = getActiveConfig()
   if (isString(val) && val.slice(0, 2) === '--') val = getMediaTheme(val.slice(2))
 
   if (!val || !isString(val)) {

package/src/system/timing.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { TIMING } from '../defaultConfig'
+import { toCamelCase } from '@symbo.ls/utils'
+import { getActiveConfig } from '../factory'
 import {
   applySequenceVars,
   generateSequence,
@@ -8,14 +9,24 @@ import {
 } from '../utils'
 
 export const applyTimingSequence = () => {
+  const CONFIG = getActiveConfig()
+  const { TIMING } = CONFIG
   generateSequence(TIMING)
   applySequenceVars(TIMING)
 }
 
-export const getTimingFunction = value => TIMING[value] || value
+export const getTimingFunction = value => {
+  const CONFIG = getActiveConfig()
+  const { TIMING } = CONFIG
+  return TIMING[value] || TIMING[toCamelCase(value)] || value
+}
 
-export const getTimingByKey = (value, property = 'timing') => getSequenceValuePropertyPair(
-  value,
-  property,
-  TIMING
-)
+export const getTimingByKey = (value, property = 'timing') => {
+  const CONFIG = getActiveConfig()
+  const { TIMING } = CONFIG
+  return getSequenceValuePropertyPair(
+    value,
+    property,
+    TIMING
+  )
+}

package/src/system/typography.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { MEDIA, TYPOGRAPHY } from '../defaultConfig'
-import { CONFIG } from '../factory'
+import { getActiveConfig } from '../factory'
+
 import {
   applySequenceVars,
   findHeadings,
@@ -11,6 +11,9 @@ import {
 } from '../utils'
 
 export const runThroughMedia = props => {
+  const CONFIG = getActiveConfig()
+  const { TYPOGRAPHY, MEDIA } = CONFIG
+
   for (const prop in props) {
     const mediaProps = props[prop]
     if (prop.slice(0, 1) === '@') {
@@ -44,6 +47,7 @@ export const runThroughMedia = props => {
 }
 
 export const applyHeadings = (props) => {
+  const CONFIG = getActiveConfig()
   if (props.h1Matches) {
     const unit = props.unit
     const HEADINGS = findHeadings(props)
@@ -63,14 +67,21 @@ export const applyHeadings = (props) => {
 }
 
 export const applyTypographySequence = () => {
+  const CONFIG = getActiveConfig()
+  const { TYPOGRAPHY } = CONFIG
+
   generateSequence(TYPOGRAPHY)
   applyHeadings(TYPOGRAPHY)
   applySequenceVars(TYPOGRAPHY)
   runThroughMedia(TYPOGRAPHY)
 }
 
-export const getFontSizeByKey = value => getSequenceValuePropertyPair(
-  value,
-  'fontSize',
-  TYPOGRAPHY
-)
+export const getFontSizeByKey = value => {
+  const CONFIG = getActiveConfig()
+  const { TYPOGRAPHY } = CONFIG
+  return getSequenceValuePropertyPair(
+    value,
+    'fontSize',
+    TYPOGRAPHY
+  )
+}

package/src/utils/font.js

@@ -1,7 +1,5 @@
 'use strict'
 
-import { isObject } from '@domql/utils'
-
 export const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value
   if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
@@ -38,9 +36,9 @@ export const getFontFace = LIBRARY => {
 }
 
 export const getFontFaceEachString = (name, weights) => {
-  const isObj = isObject(weights)
-  if (isObj) return setCustomFontMedia(name, weights.url)
-  return getFontFaceEach(name, weights).map(setInCustomFontMedia)
+  const isArr = weights[0]
+  if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia)
+  return setCustomFontMedia(name, weights.url)
 }
 
 export const getFontFaceString = LIBRARY => {

package/src/utils/sequence.js

@@ -1,8 +1,7 @@
 'use strict'
 
+import { getActiveConfig } from '../factory'
 import { toDashCase } from '@symbo.ls/utils'
-import { UNIT } from '../defaultConfig'
-import { CONFIG } from '../factory'
 import { isString } from './object'
 
 export const numToLetterMap = {
@@ -126,6 +125,9 @@ export const generateSequence = (sequenceProps) => {
 }
 
 export const getSequenceValue = (value = 'A', sequenceProps) => {
+  const CONFIG = getActiveConfig()
+  const { UNIT } = CONFIG
+
   const {
     sequence,
     unit = UNIT.default,

package/src/utils/var.js

@@ -1,12 +1,13 @@
 'use strict'
 
-import { MEDIA, TIMING } from '../defaultConfig'
-import { CONFIG, CSS_VARS } from '../factory'
+import { getActiveConfig } from '../factory'
 import { isObjectLike } from './object'
 
 const ENV = process.env.NODE_ENV // eslint-disable-line
 
 export const setVariables = (result, key) => {
+  const CONFIG = getActiveConfig()
+  const { CSS_VARS } = CONFIG
   // CSS_VARS[result.var] =
   if (isObjectLike(result.value)) {
     // console.group(key)
@@ -21,7 +22,10 @@ export const setVariables = (result, key) => {
 }
 
 export const applySequenceVars = (props, mediaName, options = {}) => {
-  const unit = props.unit || CONFIG.UNIT.default
+  const CONFIG = getActiveConfig()
+  const { UNIT, MEDIA, TIMING, CSS_VARS } = CONFIG
+
+  const unit = props.unit || UNIT.default
   const { sequence, scales } = props
 
   for (const key in sequence) {