@symbo.ls/scratch 0.7.8 → 0.7.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "files": [
     "src"
   ],
@@ -11,6 +11,8 @@
   "main": "src/index.js",
   "publishConfig": {},
   "dependencies": {
+    "@domql/utils": "latest",
+    "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
   "scripts": {
@@ -20,18 +22,18 @@
     "bump": "npx np"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.5",
     "@babel/preset-env": "^7.18.9",
+    "@emotion/css": "^11.5.0",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^27.0.2",
     "babel-preset-env": "^1.7.0",
     "coveralls": "^3.0.5",
+    "eslint": "^6.1.0",
     "eslint-plugin-jest": "^24.1.0",
     "jest": "^27.0.6",
     "nodemon": "^2.0.6",
     "np": "^7.2.0",
-    "@babel/core": "^7.11.5",
-    "@emotion/css": "^11.5.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.1.0",
     "parcel-bundler": "^1.12.3",
     "parcel-plugin-svg-sprite": "^1.4.1",
     "standard": "^13.1.0"

package/src/set.js

@@ -16,7 +16,7 @@ import {
 
 import { isFunction } from './utils'
 
-const ENV = process.env.NODE_ENV
+const ENV = process.env.NODE_ENV // eslint-disable-line no-unused-vars
 
 const setCases = (val, key) => {
   if (isFunction(val)) return val()

package/src/system/reset.js

@@ -35,11 +35,11 @@ export const applyReset = (reset = {}) => {
 
       ...getTheme('document'),
 
-      fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
-
-      ...CONFIG.TYPOGRAPHY.styles
+      fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default
     },
 
+    ...CONFIG.TYPOGRAPHY.styles,
+
     // form elements
     fieldset: {
       border: 0,

package/src/system/typography.js

@@ -49,8 +49,13 @@ export const applyHeadings = (props) => {
     const HEADINGS = findHeadings(props)
     const { styles } = props
     for (const k in HEADINGS) {
-      styles[`h${parseInt(k) + 1}`] = {
-        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`
+      const headerName = `h${parseInt(k) + 1}`
+      const headerStyle = styles[headerName]
+      styles[headerName] = {
+        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+        margin: headerStyle?.margin || 0,
+        lineHeight: headerStyle?.lineHeight || props.lineHeight,
+        fontWeight: headerStyle?.fontWeight || 900 - (k * 100)
       }
     }
   }

package/src/utils/sequence.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { toDashCase } from '@symbo.ls/utils'
 import { UNIT } from '../defaultConfig'
 import { CONFIG } from '../factory'
 import { isString } from './object'
@@ -47,10 +48,6 @@ const setSequenceValue = (props, sequenceProps) => {
   sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
-const dashize = val => val
-  .replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
-  .replace('.', '-')
-
 export const generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props
 
@@ -125,7 +122,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     return `var(${value})`
   }
 
-  const prefix = `--${dashize(sequenceProps.type.replace('.', '-'))}-`
+  const prefix = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
 
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value)
@@ -149,6 +146,14 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     absValue = absValue.split('-')[0]
   }
 
+  if (absValue.includes('+')) {
+    const args = absValue.split('+')
+    const varValue = v => `var(${prefix}${v}${mediaName})`
+    const [first, second] = args
+    const joint = `${varValue(first)} + ${varValue(second)}`
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
+  }
+
   // if subsequence is not set but value is applied
   if (!sequence[absValue] && absValue.length === 2) {
     if (CONFIG.verbose) console.warn(absValue, '- value is not found because `subSequence` is set to false')