@symbo.ls/scratch 0.6.3 → 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.3",
+  "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/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)`