@symbo.ls/scratch 0.6.1 → 0.6.4

package/package.json

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

package/src/config/index.js

@@ -14,6 +14,7 @@ export * from './theme'
 export * from './icons'
 export * from './timing'
 export * from './document'
+export * from './responsive'
 export * from './cases'
 
 export const RESET = {}

package/src/config/responsive.js

@@ -2,7 +2,7 @@
 
 export const BREAKPOINTS = {
   screenL: 1920,
-  screenD: 1680,
+  screenM: 1680,
   screenS: 1440,
   tabletL: 1366,
   tabletM: 1280,

package/src/system/color.js

@@ -23,6 +23,8 @@ export const getColor = (value, key) => {
     return
   }
 
+  if (value.slice(0, 2) === '--') return `var(${value})`
+
   if (key && value[key]) value = value[key]
   const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
   const { COLOR, GRADIENT } = CONFIG

package/src/system/theme.js

@@ -186,12 +186,12 @@ const recursiveTheme = val => {
 }
 
 export const getMediaTheme = (val, key, themeObj) => {
-  if (!isString(val)) {
+  if (!val || !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]
+  if (value && modifier && value[modifier]) value = value[modifier]
   return recursiveTheme(value)
 }

package/src/utils/sequence.js

@@ -45,7 +45,14 @@ const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
   state.vars[variable] = scaling + state.unit
 }
 
-export const getSequenceValue = ({ type, prop, val = 'A', prefix = '--font-size-', unit = UNIT.default }) => {
+export const getSequenceValue = ({
+  type,
+  prop,
+  val = 'A',
+  prefix = '--font-size-',
+  unit = UNIT.default,
+  useVariable
+}) => {
   if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
 
   if (val === '-' || val === '') return ({ })
@@ -74,7 +81,7 @@ export const getSequenceValue = ({ type, prop, val = 'A', prefix = '--font-size-
   const value = type ? type[pureVal] : null
   if (!value) return console.warn('can\'t find', type, pureVal)
 
-  if (CONFIG.useVariable) {
+  if (useVariable || CONFIG.useVariable) {
     const varVal = `var(${prefix}${pureVal}${mediaName})`
     return isNegative ? {
       [prop]: `calc(${varVal} * -1)`