@symbo.ls/scratch 0.3.22 → 0.3.25

package/README.md

@@ -4,6 +4,5 @@ Scratch is CSS framework and methodology to build web, mobile and TV application
 [![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

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

package/src/reset.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import * as CONFIG from './config'
-import { getTheme } from './set'
+import { getTheme } from './system'
 import { deepMerge, merge } from './utils'
 
 export const applyReset = (reset = {}) => {
@@ -41,7 +41,7 @@ export const applyReset = (reset = {}) => {
       margin: 0
     },
 
-    select: {
+    'select, input': {
       fontFamily: CONFIG.DOCUMENT.fontFamily
     }
   })

package/src/set.js

@@ -3,233 +3,17 @@
 import { applyDocument, applySpacingSequence, applyTimingSequence, applyTypographySequence } from './config'
 import CONFIG, { CSS_VARS } from './factory'
 import { applyReset } from './reset'
+import { setColor, setGradient, setFont, setFontFamily, setTheme } from './system'
 import {
-  isArray,
-  colorStringToRgbaArray,
-  isObject,
-  isString,
-  isObjectLike,
-  rgbToHSL,
-  hexToRgbArray,
-  rgbArrayToHex,
-  getDefaultOrFirstKey,
-  getFontFaceEach,
-  hslToRgb,
-  getColorShade,
-  setVariables
+  setVariables,
+  isFunction
 } from './utils'
 
 const ENV = process.env.NODE_ENV
 
-export const getColor = value => {
-  if (!isString(value)) {
-    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(value, '- type for color is not valid')
-    return
-  }
-
-  const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
-  const { COLOR, GRADIENT } = CONFIG
-  const val = COLOR[name] || GRADIENT[name]
-
-  if (!val) {
-    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) 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(', ').map(v => parseFloat(v)))
-        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 => 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)
-          rgb = newRgb
-        }
-        val[tone] = { rgb, var: `${val.var}-${tone}` }
-      } else rgb = val[tone].rgb
-    }
-    if (alpha) return `rgba(${rgb}, ${alpha})`
-    return `rgb(${rgb})`
-  } else return val.value
-}
-
-const setColor = (val, key) => {
-  if (val.slice(0, 2) === '--') val = getColor(val.slice(2))
-
-  const CSSVar = `--color-${key}`
-  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})`
-
-  return {
-    var: CSSVar,
-    rgb,
-    alpha,
-    value
-  }
-}
-
-const setGradient = (val, key) => {
-  const CSSVar = `--gradient-${key}`
-  return {
-    var: CSSVar,
-    value: val.value || val
-  }
-}
-
-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 (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)
-
-  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
-}
-
-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 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 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
-  })
-  return theme
-}
-
-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 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.isDefault) 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 }
-}
-
 const setCases = (val, key) => {
-  return val()
+  if (isFunction(val)) return val()
+  return val
 }
 
 const setSameValue = (val, key) => val
@@ -303,3 +87,5 @@ export const set = recivedConfig => {
   CONFIG.VARS = CSS_VARS
   return CONFIG
 }
+
+export * from './system'

package/src/system/color.js

@@ -0,0 +1,81 @@
+'use strict'
+
+import CONFIG, { CSS_VARS } from '../factory' // eslint-disable-line
+
+import {
+  isArray,
+  colorStringToRgbaArray,
+  isString,
+  rgbToHSL,
+  hexToRgbArray,
+  rgbArrayToHex,
+  hslToRgb,
+  getColorShade
+} from '../utils'
+
+const ENV = process.env.NODE_ENV
+
+export const getColor = value => {
+  if (!isString(value)) {
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(value, '- type for color is not valid')
+    return
+  }
+
+  const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
+  const { COLOR, GRADIENT } = CONFIG
+  const val = COLOR[name] || GRADIENT[name]
+
+  if (!val) {
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) 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(', ').map(v => parseFloat(v)))
+        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 => 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)
+          rgb = newRgb
+        }
+        val[tone] = { rgb, var: `${val.var}-${tone}` }
+      } else rgb = val[tone].rgb
+    }
+    if (alpha) return `rgba(${rgb}, ${alpha})`
+    return `rgb(${rgb})`
+  } else return val.value
+}
+
+export const setColor = (val, key) => {
+  if (val.slice(0, 2) === '--') val = getColor(val.slice(2))
+
+  const CSSVar = `--color-${key}`
+  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})`
+
+  return {
+    var: CSSVar,
+    rgb,
+    alpha,
+    value
+  }
+}
+
+export const setGradient = (val, key) => {
+  const CSSVar = `--gradient-${key}`
+  return {
+    var: CSSVar,
+    value: val.value || val
+  }
+}

package/src/system/font.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import CONFIG, { CSS_VARS } from '../factory' // eslint-disable-line
+
+import {
+  getDefaultOrFirstKey,
+  getFontFaceEach
+} from '../utils'
+
+// const ENV = process.env.NODE_ENV
+
+export 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)
+}
+
+export const setFontFamily = (val, key) => {
+  const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG
+  const { value, type } = val
+  if (val.isDefault) 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 }
+}

package/src/system/index.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export * from './color'
+export * from './theme'
+export * from './font'

package/src/system/theme.js

@@ -0,0 +1,134 @@
+'use strict'
+
+import { getColor } from './color'
+import CONFIG, { CSS_VARS } from '../factory' // eslint-disable-line
+
+import {
+  isObject,
+  isString,
+  isObjectLike
+} from '../utils'
+
+const ENV = process.env.NODE_ENV
+
+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, modifier) => {
+  const { THEME } = CONFIG
+
+  if (isString(value)) {
+    const [theme, subtheme] = value.split(' ')
+    const isOurTheme = THEME[theme]
+    if (isOurTheme) {
+      if (!subtheme && !modifier) return getThemeValue(isOurTheme)
+      value = [theme, subtheme || modifier]
+    }
+  } // else value = [value, modifier]
+
+  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)
+
+  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
+}
+
+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 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 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
+  })
+  return theme
+}
+
+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
+}
+
+export 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 }
+}

package/src/utils/font.js

@@ -9,6 +9,8 @@ export const getDefaultOrFirstKey = (LIBRARY, key) => {
 
 export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
 
+export const setInCustomFontMedia = str => `@font-face { ${str} }`
+
 export const setCustomFont = (name, weight, url) => `
   font-family: '${name}';
   font-style: normal;
@@ -28,13 +30,16 @@ export const getFontFaceEach = (name, weightsObject) => {
   })
 }
 
-export const getFontFaceEachString = (name, weightsObject) => {
-  return getFontFaceEach(name, weightsObject).join('\n')
-}
-
 export const getFontFace = LIBRARY => {
   const keys = Object.keys(LIBRARY)
   return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
 }
 
-export const getFontFaceString = LIBRARY => getFontFace(LIBRARY).join('\n')
+export const getFontFaceEachString = (name, weightsObject) => {
+  return getFontFaceEach(name, weightsObject).map(setInCustomFontMedia)
+}
+
+export const getFontFaceString = LIBRARY => {
+  const keys = Object.keys(LIBRARY)
+  return keys.map(key => getFontFaceEachString(key, LIBRARY[key].value))
+}

package/src/utils/object.js

@@ -44,3 +44,5 @@ export const Arrayize = val => {
   if (isObject(val)) return Object.keys(val).map(v => val[v])
   if (isArray(val)) return val
 }
+
+export const isFunction = arg => typeof arg === 'function'