@symbo.ls/scratch 0.5.0 → 0.6.0

package/package.json

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

package/src/system/color.js

@@ -60,7 +60,7 @@ export const getColor = (value, key) => {
       } else rgb = val[tone].rgb
     }
     if (alpha) return `rgba(${rgb}, ${alpha})`
-    return `rgb(${rgb})`
+    return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`
   } else return CONFIG.useVariable ? `var(${val.var})` : val.value
 }
 
@@ -94,7 +94,7 @@ export const getMediaColor = (value, param) => {
 }
 
 export const setColor = (val, key, suffix) => {
-  if (val.slice(0, 2) === '--') val = getColor(val.slice(2))
+  if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
 
   if (isArray(val)) {
     return {
@@ -126,6 +126,8 @@ export const setColor = (val, key, suffix) => {
 }
 
 export const setGradient = (val, key, suffix) => {
+  if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
+
   if (isArray(val)) {
     return {
       '@light': setGradient(val[0], key, 'light'),

package/src/system/theme.js

@@ -1,19 +1,21 @@
 'use strict'
 
-import { getColor } from './color'
+import { getColor, getMediaColor } from './color'
 import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
 
 import {
   isObject,
   isString,
-  isObjectLike
+  isObjectLike,
+  merge,
+  isArray
 } from '../utils'
 
 const ENV = process.env.NODE_ENV
 
 const setThemeValue = theme => {
   const value = {}
-  const { state, variants, helpers, ...rest } = theme
+  const { state, media, helpers, ...rest } = theme
   const keys = Object.keys(rest)
   keys.map(key => {
     const conditions = ['color', 'Color', 'background', 'border']
@@ -30,6 +32,7 @@ const getThemeValue = theme => {
 }
 
 export const getTheme = (value, modifier) => {
+  if (CONFIG.useVariable) return getMediaTheme(value, modifier)
   const { THEME } = CONFIG
 
   if (isString(value)) {
@@ -44,9 +47,9 @@ export const getTheme = (value, modifier) => {
   if (isObjectLike(value) && value[1]) {
     const themeName = value[0]
     const subThemeName = value[1]
-    const { helpers, variants, state } = THEME[themeName]
+    const { helpers, media, state } = THEME[themeName]
 
-    if (variants && variants[subThemeName]) return getThemeValue(variants[subThemeName])
+    if (media && media[subThemeName]) return getThemeValue(media[subThemeName])
     if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName])
     if (state && state[subThemeName]) return getThemeValue(state[subThemeName])
   } else if (isObject(value)) return setThemeValue(value)
@@ -74,7 +77,7 @@ const setPseudo = (theme, key, variant, themeValue) => {
   if (isObject(variant) && !variant.value) variant.value = result
 }
 
-const goThroughInteractiveStates = (theme, value) => {
+const setSelectors = (theme, value) => {
   const { state } = theme
   if (!state) return
   const keys = Object.keys(state)
@@ -92,12 +95,12 @@ const setPrefersScheme = (theme, key, variant, themeValue) => {
   if (isObject(variant) && !variant.value) variant.value = result
 }
 
-const goThroughVariants = (theme, value) => {
-  const { variants } = theme
-  if (!variants) return
-  const keys = Object.keys(variants)
+const setMedia = (theme, value) => {
+  const { media } = theme
+  if (!media) return
+  const keys = Object.keys(media)
   keys.map(key => {
-    const variant = variants[key]
+    const variant = media[key]
     if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value)
     if (key === 'inverse') setInverseTheme(theme, variant, value)
     return theme
@@ -105,7 +108,7 @@ const goThroughVariants = (theme, value) => {
   return theme
 }
 
-const goThroughHelpers = (theme, value) => {
+const setHelpers = (theme, value) => {
   const { helpers } = theme
   if (!helpers) return
   const keys = Object.keys(helpers)
@@ -119,13 +122,77 @@ const goThroughHelpers = (theme, value) => {
 }
 
 export const setTheme = (val, key) => {
-  const { state, variants, helpers } = val
+  if (CONFIG.useVariable) return setMediaTheme(val, key)
+
+  const { state, media, helpers } = val
   const value = setThemeValue(val, key)
   const CSSvar = `--theme-${key}`
 
-  goThroughInteractiveStates(val, value)
-  goThroughVariants(val, value)
-  goThroughHelpers(val, value)
+  setSelectors(val, value)
+  setMedia(val, value)
+  setHelpers(val, value)
+
+  return { var: CSSvar, value, state, media, helpers }
+}
+
+const keySetters = { // eslint-disable-line
+  '@': (theme, value) => setMedia(theme, value),
+  ':': (theme, value) => setSelectors(theme, value),
+  '.': (theme, value) => setHelpers(theme, value)
+}
+
+export const setMediaTheme = (val, key, suffix, prefers) => {
+  const theme = {}
+
+  if (isObject(val)) {
+    for (const param in val) {
+      const symb = param.slice(0, 1)
+      const value = val[param]
+      if (symb === '@' || symb === ':' || symb === '.') {
+        const hasPrefers = symb === '@' && param
+        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers)
+      } else {
+        const color = getColor(value, prefers)
+        const metaSuffixes = [...new Set([prefers, suffix].filter(v => v).map(v => v.slice(1)))]
+        const varmetaSuffixName = metaSuffixes.length ? '-' + metaSuffixes.join('-') : ''
+        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`
+        if (CONFIG.useVariable) {
+          CSS_VARS[CSSVar] = color
+          theme[param] = `var(${CSSVar})`
+        } else {
+          theme[param] = color
+        }
+      }
+    }
+  }
 
-  return { var: CSSvar, value, state, variants, helpers }
+  return theme
+}
+
+const recursiveTheme = val => {
+  const obj = {}
+  for (const param in val) {
+    const symb = param.slice(0, 1)
+    if (isObject(val[param])) {
+      if (symb === '@') {
+        const query = CONFIG.MEDIA[param.slice(1)]
+        const media = `@media screen and ${query}`
+        obj[media] = recursiveTheme(val[param])
+      } else if (symb === ':') {
+        obj[`&${param}`] = recursiveTheme(val[param])
+      }
+    } else obj[param] = val[param]
+  }
+  return obj
+}
+
+export const getMediaTheme = (val, key, themeObj) => {
+  if (!isString(val)) {
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- type for color is not valid')
+    return
+  }
+  const [name, modifier] = isArray(val) ? val : val.split(' ')
+  let value = CONFIG.THEME[name]
+  if (modifier && value[modifier]) value = value[modifier]
+  return recursiveTheme(value)
 }