@symbo.ls/scratch 0.3.20 → 0.3.23

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
-  "author": "Symbols",
-  "version": "0.3.20",
+  "author": "symbo.ls",
+  "version": "0.3.23",
   "files": [
     "src"
   ],
-  "repository": "https://github.com/rackai/scratch",
+  "repository": "https://github.com/symbo-ls/scratch",
+  "source": "src/index.js",
   "main": "src/index.js",
   "publishConfig": {},
   "dependencies": {
@@ -19,19 +20,21 @@
     "bump": "npx np"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-0",
     "@babel/preset-env": "^7.18.9",
-    "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"
+    "@babel/core": "^7.11.5",
+    "@emotion/css": "^11.5.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.1.0",
+    "parcel-bundler": "^1.12.3",
+    "parcel-plugin-svg-sprite": "^1.4.1",
+    "standard": "^13.1.0"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -47,5 +50,10 @@
   "browserslist": [
     "> 1%",
     "ie >= 9"
-  ]
+  ],
+  "targets": {
+    "context": "browser",
+    "outputFormat": "commonjs",
+    "includeNodeModules": true
+  }
 }

package/src/config/document.js

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

package/src/config/index.js

@@ -13,3 +13,4 @@ export * from './icons'
 export * from './timing'
 export * from './document'
 export * from './cases'
+export const RESET = {}

package/src/config/spacing.js

@@ -7,7 +7,7 @@ const defaultProps = {
   base: TYPOGRAPHY.base,
   type: 'spacing',
   ratio: SEQUENCE.phi,
-  range: [-5, +7],
+  range: [-5, +15],
   subSequence: true,
   sequence: {},
   scales: {}

package/src/index.js

@@ -8,4 +8,4 @@ export * from './set'
 export * from './config'
 export * from './reset'
 
-export default CONFIG
+export { CONFIG }

package/src/reset.js

@@ -1,44 +1,48 @@
 'use strict'
 
 import * as CONFIG from './config'
-import { getTheme } from './set'
+import { getTheme } from './system'
 import { deepMerge, merge } from './utils'
 
-export const RESET = {}
-
-export const applyReset = (reset = {}) => deepMerge(merge(RESET, reset), {
-  html: {
-    position: 'absolute',
-    overflow: 'hidden',
-    width: '100%',
-    height: '100%',
-    top: '0',
-    left: '0',
-    margin: '0',
-    WebkitFontSmoothing: 'antialiased',
-    transform: 'translate3d(0, 0, 1px)',
-    scrollBehavior: 'smooth',
-
-    fontFamily: CONFIG.DOCUMENT.fontFamily,
-
-    fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
-    lineHeight: CONFIG.DOCUMENT.lineHeight
-  },
-
-  body: {
-    boxSizing: 'border-box',
-    height: '100%',
-    margin: 0,
-
-    ...getTheme('document')
-  },
-
-  ...CONFIG.TYPOGRAPHY.styles,
-
-  // form elements
-  fieldset: {
-    border: 0,
-    padding: 0,
-    margin: 0
-  }
-})
+export const applyReset = (reset = {}) => {
+  return deepMerge(merge(CONFIG.RESET, reset), {
+    html: {
+      position: 'absolute',
+      overflow: 'hidden',
+      width: '100%',
+      height: '100%',
+      top: '0',
+      left: '0',
+      margin: '0',
+      WebkitFontSmoothing: 'antialiased',
+      transform: 'translate3d(0, 0, 1px)',
+      scrollBehavior: 'smooth',
+
+      fontFamily: CONFIG.DOCUMENT.fontFamily,
+      fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
+      lineHeight: CONFIG.DOCUMENT.lineHeight
+    },
+
+    body: {
+      boxSizing: 'border-box',
+      height: '100%',
+      margin: 0,
+      fontFamily: CONFIG.DOCUMENT.fontFamily,
+
+      ...getTheme('document')
+    },
+
+    ...CONFIG.TYPOGRAPHY.styles,
+
+    // form elements
+    fieldset: {
+      border: 0,
+      padding: 0,
+      margin: 0
+    },
+
+    '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.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 }
-}
-
 const setCases = (val, key) => {
-  return val()
+  if (isFunction(val)) return val()
+  return val
 }
 
 const setSameValue = (val, key) => val
@@ -296,10 +80,12 @@ export const set = recivedConfig => {
   // apply generic configs
   applyTypographySequence()
   applySpacingSequence()
-  applyDocument()
   applyTimingSequence()
+  applyDocument()
   applyReset()
 
   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

@@ -2,32 +2,39 @@
 
 export const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value
-  if (LIBRARY.isDefault) return LIBRARY[LIBRARY.isDefault].value
+  if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
   const hasValue = Object.keys(LIBRARY)[0]
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
 }
 
 export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
 
-export const setCustomFont = (name, weight, url) => `@font-face {
+export const setCustomFont = (name, weight, url) => `
   font-family: '${name}';
   font-style: normal;
   font-weight: ${weight};
-  src: url('${url}') format('${getFontFormat(url)}');
+  src: url('${url}') format('${getFontFormat(url)}');`
+
+export const setCustomFontMedia = (name, weight, url) => `@font-face {
+  ${setCustomFont((name, weight, url))}
 }`
 // src: url('${url}') format('${getFontFormat(url)}');
 
 export const getFontFaceEach = (name, weightsObject) => {
   const keys = Object.keys(weightsObject)
-  const weightsJoint = keys.map(key => {
+  return keys.map(key => {
     const { fontWeight, url } = weightsObject[key]
     return setCustomFont(name, fontWeight, url)
   })
-  return weightsJoint.join('\n')
+}
+
+export const getFontFaceEachString = (name, weightsObject) => {
+  return getFontFaceEach(name, weightsObject).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')
+  return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
 }
+
+export const getFontFaceString = LIBRARY => getFontFace(LIBRARY).join('\n')

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'