@symbo.ls/scratch 0.7.28 → 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.28",
+  "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,7 +2,7 @@
 
 import * as CONFIG from '../defaultConfig'
 import { CSS_VARS } from '../factory'
-import { getTheme } from '.'
+import { getMediaTheme } from '.'
 import { deepMerge, merge, overwriteDeep } from '@domql/utils' // eslint-disable-line no-unused-vars
 
 export const applyReset = (reset = {}) => {
@@ -16,7 +16,10 @@ export const applyReset = (reset = {}) => {
       const configReset = CONFIG.RESET
       const configStyles = CONFIG.TYPOGRAPHY.styles
       configReset[':root'] = CSS_VARS
-      configReset.body = configStyles.body
+      configReset.body = {
+        ...getMediaTheme('document', CONFIG.globalTheme),
+        ...configStyles.body
+      }
       configReset.h1 = configStyles.h1
       configReset.h2 = configStyles.h2
       configReset.h3 = configStyles.h3
@@ -54,10 +57,10 @@ export const applyReset = (reset = {}) => {
         margin: 0,
         fontFamily: CONFIG.DOCUMENT.fontFamily,
 
-        ...getTheme('document'),
-
         fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
 
+        ...getMediaTheme('document', CONFIG.globalTheme),
+
         ...CONFIG.TYPOGRAPHY.styles.body
       },
 

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)
 }