@symbo.ls/scratch 0.7.20 → 0.7.22

package/package.json

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

package/src/system/font.js

@@ -1,17 +1,21 @@
 'use strict'
 
+import { isObject } from '@domql/utils'
 import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
 
 import {
   getDefaultOrFirstKey,
-  getFontFaceEach
+  getFontFaceEach,
+  setCustomFontMedia
 } from '../utils'
 
 // const ENV = process.env.NODE_ENV
 
 export const setFont = (val, key) => {
   const CSSvar = `--font-${key}`
-  const fontFace = getFontFaceEach(key, val)
+  const fontFace = isObject(val)
+    ? setCustomFontMedia(key, val.url)
+    : getFontFaceEach(key, val)
   return { var: CSSvar, value: val, fontFace }
 }
 

package/src/utils/font.js

@@ -1,5 +1,7 @@
 'use strict'
 
+import { isObject } from '@domql/utils'
+
 export const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value
   if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
@@ -11,22 +13,22 @@ export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
 
 export const setInCustomFontMedia = str => `@font-face { ${str} }`
 
-export const setCustomFont = (name, weight, url) => `
+export const setCustomFont = (name, url, weight) => `
   font-family: '${name}';
   font-style: normal;
-  font-weight: ${weight};
+  ${weight && `font-weight: ${weight};`}
   src: url('${url}') format('${getFontFormat(url)}');`
 
-export const setCustomFontMedia = (name, weight, url) => `@font-face {
-  ${setCustomFont((name, weight, url))}
+export const setCustomFontMedia = (name, url, weight) => `@font-face {
+  ${setCustomFont(name, url, weight)}
 }`
 // src: url('${url}') format('${getFontFormat(url)}');
 
-export const getFontFaceEach = (name, weightsObject) => {
-  const keys = Object.keys(weightsObject)
+export const getFontFaceEach = (name, weights) => {
+  const keys = Object.keys(weights)
   return keys.map(key => {
-    const { fontWeight, url } = weightsObject[key]
-    return setCustomFont(name, fontWeight, url)
+    const { url, fontWeight } = weights[key]
+    return setCustomFont(name, url, fontWeight)
   })
 }
 
@@ -35,8 +37,10 @@ export const getFontFace = LIBRARY => {
   return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
 }
 
-export const getFontFaceEachString = (name, weightsObject) => {
-  return getFontFaceEach(name, weightsObject).map(setInCustomFontMedia)
+export const getFontFaceEachString = (name, weights) => {
+  const isObj = isObject(weights)
+  if (isObj) return setCustomFontMedia(name, weights.url)
+  return getFontFaceEach(name, weights).map(setInCustomFontMedia)
 }
 
 export const getFontFaceString = LIBRARY => {

package/src/utils/sequence.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { toDashCase } from '@symbo.ls/utils'
-import { SEQUENCE, SPACING, UNIT } from '../defaultConfig'
+import { UNIT } from '../defaultConfig'
 import { CONFIG } from '../factory'
 import { isString } from './object'
 
@@ -83,14 +83,14 @@ export const generateSubSequence = (props, sequenceProps) => {
 }
 
 const switchSequenceOnNegative = (key, base, ratio) => {
-  const values = Object.values(SEQUENCE)
-  const index = values.indexOf(ratio)
-  const diffRatio = ratio / SPACING.ratio
-  const total = values[values.length - 1] - values[0]
-  const avg = total / 2
-  const diff = avg - ratio
-  const scale = total / ratio
-  const finalDiff = avg + avg / diffRatio
+  // const values = Object.values(SEQUENCE)
+  // const index = values.indexOf(ratio)
+  // const diffRatio = ratio / SPACING.ratio
+  // const total = values[values.length - 1] - values[0]
+  // const avg = total / 2
+  // const diff = avg - ratio
+  // const scale = total / ratio
+  // const finalDiff = avg + avg / diffRatio
 
   // if (key < 0) return base * Math.pow(avg, key)
   return base * Math.pow(ratio, key)