@symbo.ls/scratch 0.7.27 → 0.7.29

package/package.json

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

package/src/set.js

@@ -52,17 +52,13 @@ export const SETTERS = {
 export const setValue = (FACTORY_NAME, value, key) => {
   const factoryName = FACTORY_NAME.toLowerCase()
   const FACTORY = CONFIG[FACTORY_NAME]
-  const result = SETTERS[factoryName](value, key)
 
-  // console.log(CONFIG.verbose)
-  if (CONFIG.verbose && FACTORY[key]) {
-    // console.warn('Replacing ', key, ' as ', FACTORY[key], ' in ', factoryName)
+  if (SETTERS[factoryName]) {
+    const result = SETTERS[factoryName](value, key)
+    FACTORY[key] = result
+    return FACTORY
   }
-
-  FACTORY[key] = result
-  // setVariables(result, key)
-
-  return FACTORY
+  if (CONFIG.verbose) console.warn('Can not find', factoryName, 'method in scratch')
 }
 
 export const setEach = (factoryName, props) => {
@@ -74,11 +70,12 @@ export const setEach = (factoryName, props) => {
 }
 
 export const set = recivedConfig => {
-  const { version, verbose, useVariable, useReset, ...config } = recivedConfig
+  const { version, verbose, useVariable, useReset, globalTheme, ...config } = recivedConfig
 
   if (verbose !== undefined) CONFIG.verbose = verbose
   if (useVariable !== undefined) CONFIG.useVariable = useVariable
   if (useReset !== undefined) CONFIG.useReset = useReset
+  if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
   if (CONFIG.verbose) console.log(CONFIG)
 
   const keys = Object.keys(config)

package/src/system/color.js

@@ -64,13 +64,13 @@ export const getColor = (value, key) => {
   } else return CONFIG.useVariable ? `var(${val.var})` : val.value
 }
 
-export const getMediaColor = (value, param) => {
+export const getMediaColor = (value, property, globalTheme = CONFIG.globalTheme) => {
   if (!isString(value)) {
     if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
   }
 
-  if (value.slice(0, 2) === '--') return { [param]: `var(${value})` }
+  if (value.slice(0, 2) === '--') return { [property]: `var(${value})` }
 
   const [name] = isArray(value) ? value : value.split(' ')
 
@@ -78,18 +78,18 @@ export const getMediaColor = (value, param) => {
   const val = COLOR[name] || GRADIENT[name]
 
   const isObj = isObject(val)
-  if (isObj && val.value) return { [param]: getColor(value) }
+  if (isObj && val.value) return { [property]: getColor(value, globalTheme) }
   else if (isObj) {
     const obj = {}
     for (const mediaName in val) {
-      const query = MEDIA[mediaName.slice(1)]
+      const query = MEDIA[globalTheme || mediaName.slice(1)]
       const media = `@media screen and ${query}`
-      obj[media] = { [param]: getColor(value, mediaName) }
+      obj[media] = { [property]: getColor(value, globalTheme || mediaName) }
     }
     return obj
   } else {
     if (CONFIG.verbose) console.warn('Can\'t find color', value)
-    return { [param]: value }
+    return { [property]: value }
   }
 }
 

package/src/system/reset.js

@@ -2,55 +2,78 @@
 
 import * as CONFIG from '../defaultConfig'
 import { CSS_VARS } from '../factory'
-import { getTheme } from '.'
-import { deepMerge, merge } from '../utils'
+import { getMediaTheme } from '.'
+import { deepMerge, merge, overwriteDeep } from '@domql/utils' // eslint-disable-line no-unused-vars
 
 export const applyReset = (reset = {}) => {
-  return deepMerge(merge(CONFIG.RESET, reset), {
-    ':root': CSS_VARS,
-
-    html: {
-      position: 'absolute',
-      overflow: 'hidden',
-      width: '100%',
-      height: '100%',
-      top: '0',
-      left: '0',
-      margin: '0',
-      WebkitFontSmoothing: 'antialiased',
-      transform: 'translate3d(0, 0, 1px)',
-      scrollBehavior: 'smooth',
-
-      fontSize: CONFIG.TYPOGRAPHY.browserDefault + 'px',
-
-      fontFamily: CONFIG.DOCUMENT.fontFamily,
-      lineHeight: CONFIG.DOCUMENT.lineHeight
-    },
-
-    ...CONFIG.TYPOGRAPHY.styles,
-
-    body: {
-      boxSizing: 'border-box',
-      height: '100%',
-      margin: 0,
-      fontFamily: CONFIG.DOCUMENT.fontFamily,
-
-      ...getTheme('document'),
-
-      fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
-
-      ...CONFIG.TYPOGRAPHY.styles.body
-    },
-
-    // form elements
-    fieldset: {
-      border: 0,
-      padding: 0,
-      margin: 0
-    },
-
-    'select, input': {
-      fontFamily: CONFIG.DOCUMENT.fontFamily
+  if (CONFIG.RESET) {
+    // if (CONFIG.RESET[':root']) {
+    //   overwriteDeep(CONFIG.TYPOGRAPHY.styles, CONFIG.RESET)
+    //   console.log(CONFIG.RESET)
+    //   CONFIG.RESET[':root'] = CSS_VARS
+    // }
+    if (CONFIG.RESET[':root']) {
+      const configReset = CONFIG.RESET
+      const configStyles = CONFIG.TYPOGRAPHY.styles
+      configReset[':root'] = CSS_VARS
+      configReset.body = {
+        ...getMediaTheme('document', CONFIG.globalTheme),
+        ...configStyles.body
+      }
+      configReset.h1 = configStyles.h1
+      configReset.h2 = configStyles.h2
+      configReset.h3 = configStyles.h3
+      configReset.h4 = configStyles.h4
+      configReset.h5 = configStyles.h5
+      configReset.h6 = configStyles.h6
     }
-  })
+
+    return deepMerge(merge(CONFIG.RESET, reset), {
+      ':root': CSS_VARS,
+
+      html: {
+        position: 'absolute',
+        overflow: 'hidden',
+        width: '100%',
+        height: '100%',
+        top: '0',
+        left: '0',
+        margin: '0',
+        WebkitFontSmoothing: 'antialiased',
+        transform: 'translate3d(0, 0, 1px)',
+        scrollBehavior: 'smooth',
+
+        fontSize: CONFIG.TYPOGRAPHY.browserDefault + 'px',
+
+        fontFamily: CONFIG.DOCUMENT.fontFamily,
+        lineHeight: CONFIG.DOCUMENT.lineHeight
+      },
+
+      ...CONFIG.TYPOGRAPHY.styles,
+
+      body: {
+        boxSizing: 'border-box',
+        height: '100%',
+        margin: 0,
+        fontFamily: CONFIG.DOCUMENT.fontFamily,
+
+        fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+
+        ...getMediaTheme('document', CONFIG.globalTheme),
+
+        ...CONFIG.TYPOGRAPHY.styles.body
+      },
+
+      // form elements
+      fieldset: {
+        border: 0,
+        padding: 0,
+        margin: 0
+      },
+
+      'select, input': {
+        fontFamily: CONFIG.DOCUMENT.fontFamily
+      }
+    })
+  }
 }

package/src/system/theme.js

@@ -205,8 +205,6 @@ const findModifierFromArray = (val, modifierArray) => {
 }
 
 const findModifier = (val, modifier) => {
-  // console.log(val)
-  // console.log(modifier)
   if (isArray(modifier)) return findModifierFromArray(val, modifier)
   else if (isString(modifier) && val[modifier]) return val[modifier]
   else return val
@@ -229,7 +227,9 @@ export const getMediaTheme = (val, mod) => {
 
   const [name, ...modifier] = isArray(val) ? val : val.split(' ')
   let value = CONFIG.THEME[name]
-  if (value && (modifier || mod)) value = findModifier(value, modifier.length ? modifier : mod)
+  if (value && (modifier || mod)) {
+    value = findModifier(value, modifier.length ? modifier : mod)
+  }
   return recursiveTheme(value)
 }