@symbo.ls/scratch 2.11.430 → 2.11.439

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.11.430",
+  "version": "2.11.439",
   "files": [
     "src",
     "dist"
@@ -30,5 +30,5 @@
     "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "340f3f6f7aa8ebd812340008730e4490a607be19"
+  "gitHead": "b16ac3edce7fceb5e81d7cc7bbad51256e10b166"
 }

package/src/system/color.js

@@ -73,7 +73,7 @@ export const getMediaColor = (value, globalTheme, config) => {
       const obj = {}
       for (const mediaName in val) {
         const query = CONFIG.MEDIA[mediaName.slice(1)]
-        const media = `@media screen and ${query}`
+        const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
         obj[media] = getColor(value, mediaName, config)
       }
       return obj

package/src/system/shadow.js

@@ -88,7 +88,7 @@ export const getShadow = (value, globalTheme) => {
     const obj = {}
     for (const mediaName in val) {
       const query = CONFIG.MEDIA[mediaName.slice(1)]
-      const media = `@media screen and ${query}`
+      const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
       obj[media] = val.value
     }
     return obj

package/src/system/theme.js

@@ -192,7 +192,7 @@ const recursiveTheme = val => {
     if (isObjectLike(val[param])) {
       if (symb === '@') {
         const query = CONFIG.MEDIA[param.slice(1)]
-        const media = `@media screen and ${query}`
+        const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
         obj[media] = recursiveTheme(val[param])
       } else if (symb === ':') {
         obj[`&${param}`] = recursiveTheme(val[param])

package/src/system/typography.js

@@ -44,7 +44,8 @@ export const runThroughMedia = FACTORY => {
     })
 
     const query = MEDIA[mediaName]
-    TYPOGRAPHY.templates[`@media screen and ${query}`] = {
+    const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
+    TYPOGRAPHY.templates[media] = {
       fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
     }
 

package/src/transforms/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isNull, isString, isUndefined } from '@domql/utils'
+import { isNull, isString, isObject, isUndefined } from '@domql/utils'
 import { getActiveConfig } from '../factory'
 import {
   getSpacingByKey,
@@ -49,11 +49,15 @@ export const transformTextStroke = stroke => {
 
 export const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
 
-export const transformBoxShadow = shadows => shadows.split('|').map(shadow => {
-  return shadow.split(', ').map(v => {
+export const transformBoxShadow = (shadows, globalTheme) => shadows.split('|').map(shadow => {
+  return shadow.split(',').map(v => {
     v = v.trim()
     if (v.slice(0, 2) === '--') return `var(${v})`
-    if (getColor(v).length > 2) return getColor(v)
+    if (getColor(v).length > 2) {
+      const color = getMediaColor(v, globalTheme)
+      if (isObject(color)) return Object.values(color).filter(v => v.includes(': ' + globalTheme))[0]
+      return color
+    }
     if (v.includes('px') || v.slice(-2) === 'em') return v
     const arr = v.split(' ')
     if (!arr.length) return v