@symbo.ls/scratch 0.4.1 → 0.4.4

package/package.json

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

package/src/utils/sequence.js

@@ -63,16 +63,23 @@ export const getSequenceValue = ({ type, prop, val = 'A', prefix = '--font-size-
 
   const letterVal = val.toUpperCase()
   const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
-  const simplyLetterVal = isNegative ? letterVal.slice(1) : letterVal
+  let pureVal = isNegative ? letterVal.slice(1) : letterVal
 
-  const value = type ? type[simplyLetterVal] : null
-  if (!value) return console.warn('can\'t find', type, simplyLetterVal)
+  let mediaName = ''
+  if (pureVal.includes('-')) {
+    mediaName = '-' + pureVal.split('-')[1].toLowerCase()
+    pureVal = pureVal.split('-')[0]
+  }
+
+  const value = type ? type[pureVal] : null
+  if (!value) return console.warn('can\'t find', type, pureVal)
 
   if (CONFIG.useVariable) {
+    const varVal = `var(${prefix}${pureVal}${mediaName})`
     return isNegative ? {
-      [prop]: `calc(var(${prefix}${simplyLetterVal}) * -1)`
+      [prop]: `calc(${varVal} * -1)`
     } : {
-      [prop]: `var(${prefix}${simplyLetterVal})`
+      [prop]: varVal
     }
   }
 

package/src/utils/var.js

@@ -30,9 +30,11 @@ export const applySequenceVars = (props, mediaName) => {
     if (mediaName) {
       let underMediaQuery = CSS_VARS[`@media ${query}`]
       if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
-      underMediaQuery[item.variable] = value
+      underMediaQuery[item.variable] = `var(${item.variable + '-' + mediaName})`
+      CSS_VARS[item.variable + '-' + mediaName] = value
     } else {
-      CSS_VARS[item.variable] = value
+      CSS_VARS[item.variable + '-default'] = value
+      CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
     }
   }
 }