@symbo.ls/scratch 0.4.2 → 0.5.0

package/package.json

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

package/src/config/document.js

@@ -1,13 +1,3 @@
 'use strict'
 
-import { FONT_FAMILY, THEME, TYPOGRAPHY } from '.'
-import { getDefaultOrFirstKey, merge } from '../utils'
-
 export const DOCUMENT = {}
-
-export const applyDocument = () => merge(DOCUMENT, {
-  theme: THEME.document,
-  fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
-  fontSize: TYPOGRAPHY.base,
-  lineHeight: TYPOGRAPHY.lineHeight
-})

package/src/config/index.js

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

package/src/config/spacing.js

@@ -1,7 +1,6 @@
 'use strict'
 
 import { SEQUENCE, TYPOGRAPHY } from '.'
-import { Arrayize, getSequenceValue, generateSequence, applySequenceVars, merge } from '../utils'
 
 const defaultProps = {
   base: TYPOGRAPHY.base,
@@ -15,93 +14,4 @@ const defaultProps = {
   vars: {}
 }
 
-const runThroughMedia = props => {
-  for (const prop in props) {
-    const mediaProps = props[prop]
-    if (prop.slice(0, 1) === '@') {
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
-
-      merge(mediaProps, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit,
-        sequence: {},
-        scales: {},
-        styles: {},
-        vars: {}
-      })
-
-      generateSequence(mediaProps)
-
-      const mediaName = prop.slice(1)
-      applySequenceVars(mediaProps, mediaName)
-    }
-  }
-}
-
-export const applySpacingSequence = () => {
-  generateSequence(defaultProps)
-  applySequenceVars(defaultProps)
-  runThroughMedia(defaultProps)
-}
-
-const getSequence = (props) => {
-  if (!props) return
-  const hasGenerated = Object.keys(props.sequence).length > 0
-  return hasGenerated ? props : generateSequence(props)
-}
-
-export const getSpacingByKey = (val, property = 'padding', props, unit) => {
-  const prefix = '--spacing-'
-
-  const generatedSequence = getSequence(props)
-  const type = (generatedSequence || defaultProps).sequence
-
-  const stack = Arrayize(val)
-  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'
-    suffix = 'Width'
-  }
-
-  if (length === 2) {
-    return [
-      wrapSequenceItem(property + 'Block' + suffix, 0),
-      wrapSequenceItem(property + 'Inline' + suffix, 1)
-    ]
-  }
-  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)
-    ]
-  }
-
-  return getSequenceValue({ type, prop: property, val, prefix, unit })
-}
-
 export const SPACING = defaultProps

package/src/config/timing.js

@@ -1,7 +1,6 @@
 'use strict'
 
 import { SEQUENCE } from '.'
-import { applySequenceVars, generateSequence, getSequenceValue } from '../utils'
 
 const defaultProps = {
   default: 150,
@@ -15,17 +14,4 @@ const defaultProps = {
   vars: {}
 }
 
-export const applyTimingSequence = () => {
-  generateSequence(defaultProps)
-  applySequenceVars(defaultProps)
-}
-
-export const getTimingByKey = val => getSequenceValue({
-  type: defaultProps.sequence,
-  prop: 'duration',
-  val,
-  unit: 'ms',
-  prefix: '--duration-'
-})
-
 export const TIMING = defaultProps

package/src/config/typography.js

@@ -1,8 +1,6 @@
 'use strict'
 
-import { CONFIG } from '../factory'
-import { SEQUENCE, MEDIA } from '.'
-import { getSequenceValue, generateSequence, findHeadings, merge, applySequenceVars } from '../utils'
+import { SEQUENCE } from './sequence'
 
 const defaultProps = {
   browserDefault: 16,
@@ -19,65 +17,4 @@ const defaultProps = {
   vars: {}
 }
 
-const runThroughMedia = props => {
-  for (const prop in props) {
-    const mediaProps = props[prop]
-    if (prop.slice(0, 1) === '@') {
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
-
-      merge(mediaProps, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit,
-        sequence: {},
-        scales: {},
-        styles: {},
-        vars: {}
-      })
-
-      generateSequence(mediaProps)
-
-      const mediaName = prop.slice(1)
-      applySequenceVars(mediaProps, mediaName)
-
-      const query = MEDIA[mediaName]
-      defaultProps.styles[`@media screen and ${query}`] = {
-        fontSize: mediaProps.base / defaultProps.browserDefault + unit
-      }
-    }
-  }
-}
-
-const applyHeadings = (props) => {
-  if (props.h1Matches) {
-    const unit = props.unit
-    const HEADINGS = findHeadings(props)
-    const { styles } = props
-    for (const k in HEADINGS) {
-      styles[`h${parseInt(k) + 1}`] = {
-        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`
-      }
-    }
-  }
-}
-
-export const applyTypographySequence = () => {
-  generateSequence(defaultProps)
-  applyHeadings(defaultProps)
-  applySequenceVars(defaultProps)
-  runThroughMedia(defaultProps)
-}
-
-export const getFontSizeByKey = val => getSequenceValue({
-  type: defaultProps.sequence,
-  prop: 'fontSize',
-  val,
-  unit: defaultProps.unit,
-  prefix: '--font-size-'
-})
-
 export const TYPOGRAPHY = defaultProps

package/src/index.js

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

package/src/set.js

@@ -1,13 +1,20 @@
 'use strict'
 
-import { applyDocument, applySpacingSequence, applyTimingSequence, applyTypographySequence } from './config'
 import { CONFIG, CSS_VARS } from './factory' // eslint-disable-line no-unused-vars
-import { applyReset } from './reset'
-import { setColor, setGradient, setFont, setFontFamily, setTheme } from './system'
 import {
-  setVariables,
-  isFunction
-} from './utils'
+  setColor,
+  setGradient,
+  setFont,
+  setFontFamily,
+  setTheme,
+  applyTypographySequence,
+  applySpacingSequence,
+  applyReset,
+  applyTimingSequence,
+  applyDocument
+} from './system'
+
+import { isFunction } from './utils'
 
 const ENV = process.env.NODE_ENV
 
@@ -52,7 +59,7 @@ export const setValue = (FACTORY_NAME, value, key) => {
   }
 
   FACTORY[key] = result
-  setVariables(result, key)
+  // setVariables(result, key)
 
   return FACTORY
 }

package/src/system/color.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { MEDIA } from '../config'
 import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
 
 import {
@@ -10,26 +11,34 @@ import {
   hexToRgbArray,
   rgbArrayToHex,
   hslToRgb,
-  getColorShade
+  getColorShade,
+  isObject
 } from '../utils'
 
 const ENV = process.env.NODE_ENV
 
-export const getColor = value => {
+export const getColor = (value, key) => {
   if (!isString(value)) {
     if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
   }
 
+  if (key && value[key]) value = value[key]
   const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
   const { COLOR, GRADIENT } = CONFIG
-  const val = COLOR[name] || GRADIENT[name]
+
+  let val = (COLOR[name] || GRADIENT[name])
 
   if (!val) {
     if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color', name)
     return value
   }
 
+  if (key) {
+    if (val[key]) val = val[key]
+    else if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(value, ' - does not have ', key)
+  }
+
   // TODO: support variables
   // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})`
 
@@ -52,18 +61,62 @@ export const getColor = value => {
     }
     if (alpha) return `rgba(${rgb}, ${alpha})`
     return `rgb(${rgb})`
-  } else return val.value
+  } else return CONFIG.useVariable ? `var(${val.var})` : val.value
 }
 
-export const setColor = (val, key) => {
+export const getMediaColor = (value, param) => {
+  if (!isString(value)) {
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(value, '- type for color is not valid')
+    return
+  }
+
+  const [name] = isArray(value) ? value : value.split(' ')
+
+  const { COLOR, GRADIENT } = CONFIG
+  const val = COLOR[name] || GRADIENT[name]
+
+  const isObj = isObject(val)
+  if (isObj && val.value) return { [param]: getColor(value) }
+  else if (isObj) {
+    const obj = {}
+
+    for (const mediaName in val) {
+      const query = MEDIA[mediaName.slice(1)]
+      const media = `@media screen and ${query}`
+      obj[media] = { [param]: getColor(value, mediaName) }
+    }
+
+    return obj
+  } else {
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color', value)
+    return { [param]: value }
+  }
+}
+
+export const setColor = (val, key, suffix) => {
   if (val.slice(0, 2) === '--') val = getColor(val.slice(2))
 
-  const CSSVar = `--color-${key}`
+  if (isArray(val)) {
+    return {
+      '@light': setColor(val[0], key, 'light'),
+      '@dark': setColor(val[0], key, 'dark')
+    }
+  }
+
+  if (isObject(val)) {
+    const obj = {}
+    for (const variant in val) obj[variant] = setColor(val[variant], key, variant.slice(0, 1) === '@' ? variant.slice(1) : variant)
+    return obj
+  }
+
+  const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : '')
   const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val)
   const alpha = parseFloat(a.toFixed(2))
   const rgb = `${r}, ${g}, ${b}`
   const value = `rgba(${rgb}, ${alpha})`
 
+  if (CONFIG.useVariable) { CSS_VARS[CSSVar] = value }
+
   return {
     var: CSSVar,
     rgb,
@@ -72,8 +125,26 @@ export const setColor = (val, key) => {
   }
 }
 
-export const setGradient = (val, key) => {
-  const CSSVar = `--gradient-${key}`
+export const setGradient = (val, key, suffix) => {
+  if (isArray(val)) {
+    return {
+      '@light': setGradient(val[0], key, 'light'),
+      '@dark': setGradient(val[0], key, 'dark')
+    }
+  }
+
+  if (isObject(val)) {
+    const obj = {}
+    for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === '@' ? variant.slice(1) : variant)
+    return obj
+  }
+
+  const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : '')
+
+  if (CONFIG.useVariable) {
+    CSS_VARS[CSSVar] = val.value || val
+  }
+
   return {
     var: CSSVar,
     value: val.value || val

package/src/system/document.js

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

package/src/system/index.js

@@ -3,3 +3,8 @@
 export * from './color'
 export * from './theme'
 export * from './font'
+export * from './typography'
+export * from './spacing'
+export * from './timing'
+export * from './document'
+export * from './reset'

package/src/{reset.js → system/reset.js}

@@ -1,9 +1,9 @@
 'use strict'
 
-import * as CONFIG from './config'
-import { CSS_VARS } from './factory'
-import { getTheme } from './system'
-import { deepMerge, merge } from './utils'
+import * as CONFIG from '../config'
+import { CSS_VARS } from '../factory'
+import { getTheme } from '.'
+import { deepMerge, merge } from '../utils'
 
 export const applyReset = (reset = {}) => {
   return deepMerge(merge(CONFIG.RESET, reset), {

package/src/system/spacing.js

@@ -0,0 +1,93 @@
+'use strict'
+
+import { SPACING } from '../config'
+import { applySequenceVars, Arrayize, generateSequence, getSequenceValue, merge } from '../utils'
+
+const runThroughMedia = props => {
+  for (const prop in props) {
+    const mediaProps = props[prop]
+    if (prop.slice(0, 1) === '@') {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      })
+
+      generateSequence(mediaProps)
+
+      const mediaName = prop.slice(1)
+      applySequenceVars(mediaProps, mediaName)
+    }
+  }
+}
+
+export const applySpacingSequence = () => {
+  generateSequence(SPACING)
+  applySequenceVars(SPACING)
+  runThroughMedia(SPACING)
+}
+
+const getSequence = (props) => {
+  if (!props) return
+  const hasGenerated = Object.keys(props.sequence).length > 0
+  return hasGenerated ? props : generateSequence(props)
+}
+
+export const getSpacingByKey = (val, property = 'padding', props, unit) => {
+  const prefix = '--spacing-'
+
+  const generatedSequence = getSequence(props)
+  const type = (generatedSequence || SPACING).sequence
+
+  const stack = Arrayize(val)
+  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'
+    suffix = 'Width'
+  }
+
+  if (length === 2) {
+    return [
+      wrapSequenceItem(property + 'Block' + suffix, 0),
+      wrapSequenceItem(property + 'Inline' + suffix, 1)
+    ]
+  }
+  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)
+    ]
+  }
+
+  return getSequenceValue({ type, prop: property, val, prefix, unit })
+}

package/src/system/timing.js

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

package/src/system/typography.js

@@ -0,0 +1,72 @@
+'use strict'
+
+import { MEDIA, TYPOGRAPHY } from '../config'
+import { CONFIG } from '../factory'
+import {
+  applySequenceVars,
+  findHeadings,
+  generateSequence,
+  getSequenceValue,
+  merge
+} from '../utils'
+
+export const runThroughMedia = props => {
+  for (const prop in props) {
+    const mediaProps = props[prop]
+    if (prop.slice(0, 1) === '@') {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      })
+
+      generateSequence(mediaProps)
+
+      const mediaName = prop.slice(1)
+      applySequenceVars(mediaProps, mediaName)
+
+      const query = MEDIA[mediaName]
+      TYPOGRAPHY.styles[`@media screen and ${query}`] = {
+        fontSize: mediaProps.base / TYPOGRAPHY.browserDefault + unit
+      }
+    }
+  }
+}
+
+export const applyHeadings = (props) => {
+  if (props.h1Matches) {
+    const unit = props.unit
+    const HEADINGS = findHeadings(props)
+    const { styles } = props
+    for (const k in HEADINGS) {
+      styles[`h${parseInt(k) + 1}`] = {
+        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`
+      }
+    }
+  }
+}
+
+export const applyTypographySequence = () => {
+  generateSequence(TYPOGRAPHY)
+  applyHeadings(TYPOGRAPHY)
+  applySequenceVars(TYPOGRAPHY)
+  runThroughMedia(TYPOGRAPHY)
+}
+
+export const getFontSizeByKey = val => getSequenceValue({
+  type: TYPOGRAPHY.sequence,
+  prop: 'fontSize',
+  val,
+  unit: TYPOGRAPHY.unit,
+  prefix: '--font-size-'
+})

package/src/utils/sequence.js

@@ -67,7 +67,6 @@ export const getSequenceValue = ({ type, prop, val = 'A', prefix = '--font-size-
 
   let mediaName = ''
   if (pureVal.includes('-')) {
-    console.log(pureVal)
     mediaName = '-' + pureVal.split('-')[1].toLowerCase()
     pureVal = pureVal.split('-')[0]
   }