@symbo.ls/scratch 0.2.26 → 0.3.0

package/package.json

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

package/src/config/document.js

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

package/src/config/spacing.js

@@ -6,14 +6,16 @@ import { Arrayize, fallBack, generateSequence } from '../utils'
 const defaultProps = {
   base: TYPOGRAPHY.base,
   type: 'spacing',
-  ratio: SEQUENCE['phi'],
+  ratio: SEQUENCE.phi,
   range: [-5, +7],
   subSequence: true,
   sequence: {},
   scales: {}
 }
 
-generateSequence(defaultProps)
+export const applySpacingSequence = () => {
+  generateSequence(defaultProps)
+}
 
 const getSequence = (props) => {
   if (!props) return

package/src/config/typography.js

@@ -17,14 +17,16 @@ const defaultProps = {
   scales: {}
 }
 
-generateSequence(defaultProps)
+export const applyTypographySequence = () => {
+  generateSequence(defaultProps)
 
-if (defaultProps.h1Matches) {
-  var HEADINGS = findHeadings(defaultProps)
-  const { styles } = defaultProps
-  for (const k in HEADINGS) {
-    styles[`h${parseInt(k) + 1}`] = {
-      fontSize: `${HEADINGS[k].scaling}em`
+  if (defaultProps.h1Matches) {
+    const HEADINGS = findHeadings(defaultProps)
+    const { styles } = defaultProps
+    for (const k in HEADINGS) {
+      styles[`h${parseInt(k) + 1}`] = {
+        fontSize: `${HEADINGS[k].scaling}em`
+      }
     }
   }
 }

package/src/methods/create.js

@@ -2,7 +2,7 @@
 
 import base from '../base'
 
-var create = (what, params, preset) => {
+const create = (what, params, preset) => {
   base[what] = preset(params)
 }
 

package/src/methods/generate.js

@@ -4,11 +4,11 @@ import { themeMap } from '../config/theme'
 
 // var pairAsInvert = (scheme, referenced) => cx(scheme, referenced)
 
-var mapThemeCSS = scheme => {
-  var str = ''
+const mapThemeCSS = scheme => {
+  let str = ''
   for (const prop in scheme) {
-    var mappedProp = themeMap[prop]
-    var value = scheme[prop]
+    const mappedProp = themeMap[prop]
+    const value = scheme[prop]
     if (mappedProp && value) {
       str += `${mappedProp}: ${value}`
     }
@@ -16,10 +16,10 @@ var mapThemeCSS = scheme => {
   return str
 }
 
-var generateTheme = scheme => {
-  var { helpers, inverse } = scheme
+const generateTheme = scheme => {
+  const { helpers, inverse } = scheme
 
-  var rule = `
+  let rule = `
     ${mapThemeCSS(scheme)}
   `
 
@@ -28,8 +28,8 @@ var generateTheme = scheme => {
   }
 
   if (helpers) {
-    for (var prop in helpers) {
-      var value = helpers[prop]
+    for (const prop in helpers) {
+      const value = helpers[prop]
       rule += `.${prop} { ${value} }`
     }
   }

package/src/methods/inject.js

@@ -1,5 +1,5 @@
 'use strict'
 
-var global = ''
+const global = ''
 
 export default global

package/src/methods/set.js

@@ -1,7 +1,7 @@
 'use strict'
 
+import { applyDocument, applySpacingSequence, applyTypographySequence } from '../config'
 import CONFIG, { CSS_VARS } from '../factory'
-// import { FONT, FONT_FAMILY_TYPES } from '../config'
 import {
   isArray,
   colorStringToRgbaArray,
@@ -87,6 +87,7 @@ const getThemeValue = theme => {
 
 export const getTheme = value => {
   const { THEME } = CONFIG
+  // console.log('theme', THEME, CONFIG)
   if (isObjectLike(value) && value[1]) {
     const themeName = value[0]
     const subThemeName = value[1]
@@ -195,12 +196,17 @@ const setFontFamily = (val, key) => {
   return { var: CSSvar, value: str, arr: value, type }
 }
 
+const setTypography = (val, key) => {
+  return val
+}
+
 export const SETTERS = {
   color: setColor,
   gradient: setGradient,
   font: setFont,
   font_family: setFontFamily,
-  theme: setTheme
+  theme: setTheme,
+  typography: setTypography
 }
 
 /**
@@ -223,12 +229,20 @@ export const setEach = (factoryName, props) => {
   const FACTORY_NAME = factoryName.toUpperCase()
   const keys = Object.keys(props)
   keys.map(key => setValue(FACTORY_NAME, props[key], key))
+
   return CONFIG[FACTORY_NAME]
 }
 
-export const set = config => {
+export const set = recivedConfig => {
+  const { version, ...config } = recivedConfig
   const keys = Object.keys(config)
   keys.map(key => setEach(key, config[key]))
+
+  // apply generic configs
+  applyTypographySequence()
+  applySpacingSequence()
+  applyDocument()
+
   return CONFIG
 }
 

package/src/reset.js

@@ -1,10 +1,13 @@
 'use strict'
 
 import * as CONFIG from './config'
+import { merge } from './utils'
 
-export const RESET = {
+export const RESET = {}
+
+export const applyReset = () => merge(RESET, {
   html: {
-    position: 'fixed',
+    position: 'absolute',
     overflow: 'hidden',
     width: '100%',
     height: '100%',
@@ -15,13 +18,14 @@ export const RESET = {
 
     fontFamily: CONFIG.DOCUMENT.fontFamily,
 
-    fontSize: CONFIG.TYPOGRAPHY.default / CONFIG.DOCUMENT.fontSize + CONFIG.UNIT.default,
+    fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
     lineHeight: CONFIG.DOCUMENT.lineHeight
   },
 
   body: {
     boxSizing: 'border-box',
-    height: '100%'
+    height: '100%',
+    margin: 0
   },
 
   ...CONFIG.TYPOGRAPHY.styles,
@@ -32,4 +36,4 @@ export const RESET = {
     padding: 0,
     margin: 0
   }
-}
+})

package/src/utils/index.js

@@ -257,6 +257,8 @@ export const generateSequence = ({ type, base, ratio, range, subSequence, ...sta
 export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-' }) => {
   if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
 
+  if (val === 'auto') return ({ [prop]: val })
+
   // const startsWithLetterRegex = /^[a-zA-Z]/i
   const startsWithLetterRegex = /^-?[a-zA-Z]/i
   // const hasLetter = /[A-Za-z]+/.test(val)