@symbo.ls/scratch 0.3.18 → 0.3.21

package/package.json

@@ -2,12 +2,13 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "Symbols",
-  "version": "0.3.18",
+  "version": "0.3.21",
   "files": [
     "src"
   ],
   "repository": "https://github.com/rackai/scratch",
-  "main": "src/index.js",
+  "source": "src/index.js",
+  "main": "build/main.js",
   "publishConfig": {},
   "dependencies": {
     "color-contrast-checker": "^1.5.0"
@@ -19,19 +20,21 @@
     "bump": "npx np"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-0",
     "@babel/preset-env": "^7.18.9",
-    "babel-eslint": "^10.0.3",
     "babel-jest": "^27.0.2",
     "babel-preset-env": "^1.7.0",
     "coveralls": "^3.0.5",
-    "eslint": "^7.12.1",
     "eslint-plugin-jest": "^24.1.0",
     "jest": "^27.0.6",
     "nodemon": "^2.0.6",
     "np": "^7.2.0",
-    "parcel-bundler": "^1.12.4",
-    "standard": "^16.0.1"
+    "@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"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -47,5 +50,10 @@
   "browserslist": [
     "> 1%",
     "ie >= 9"
-  ]
+  ],
+  "targets": {
+    "context": "browser",
+    "outputFormat": "commonjs",
+    "includeNodeModules": true
+  }
 }

package/src/config/document.js

@@ -1,13 +1,13 @@
 'use strict'
 
 import { FONT_FAMILY, THEME, TYPOGRAPHY } from '.'
-import { merge } from '../utils'
+import { getDefaultOrFirstKey, merge } from '../utils'
 
 export const DOCUMENT = {}
 
 export const applyDocument = () => merge(DOCUMENT, {
   theme: THEME.document,
-  fontFamily: FONT_FAMILY[Object.keys(FONT_FAMILY)[0]],
+  fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
   fontSize: TYPOGRAPHY.base,
   lineHeight: TYPOGRAPHY.styles.lineHeight
 })

package/src/config/index.js

@@ -13,3 +13,4 @@ export * from './icons'
 export * from './timing'
 export * from './document'
 export * from './cases'
+export const RESET = {}

package/src/config/media.js

@@ -11,5 +11,6 @@ export const MEDIA = {
   mobileM: '(max-width: 560px)',
   mobileS: '(max-width: 480px)',
 
-  light: '(prefers-color-scheme: light)'
+  light: '(prefers-color-scheme: light)',
+  dark: '(prefers-color-scheme: dark)'
 }

package/src/config/spacing.js

@@ -7,7 +7,7 @@ const defaultProps = {
   base: TYPOGRAPHY.base,
   type: 'spacing',
   ratio: SEQUENCE.phi,
-  range: [-5, +7],
+  range: [-5, +15],
   subSequence: true,
   sequence: {},
   scales: {}

package/src/index.js

@@ -8,4 +8,4 @@ export * from './set'
 export * from './config'
 export * from './reset'
 
-export default CONFIG
+export { CONFIG }

package/src/reset.js

@@ -4,41 +4,45 @@ import * as CONFIG from './config'
 import { getTheme } from './set'
 import { deepMerge, merge } from './utils'
 
-export const RESET = {}
-
-export const applyReset = (reset = {}) => deepMerge(merge(RESET, reset), {
-  html: {
-    position: 'absolute',
-    overflow: 'hidden',
-    width: '100%',
-    height: '100%',
-    top: '0',
-    left: '0',
-    margin: '0',
-    WebkitFontSmoothing: 'antialiased',
-    transform: 'translate3d(0, 0, 1px)',
-    scrollBehavior: 'smooth',
-
-    fontFamily: CONFIG.DOCUMENT.fontFamily,
-
-    fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
-    lineHeight: CONFIG.DOCUMENT.lineHeight
-  },
-
-  body: {
-    boxSizing: 'border-box',
-    height: '100%',
-    margin: 0,
-
-    ...getTheme('document')
-  },
-
-  ...CONFIG.TYPOGRAPHY.styles,
-
-  // form elements
-  fieldset: {
-    border: 0,
-    padding: 0,
-    margin: 0
-  }
-})
+export const applyReset = (reset = {}) => {
+  return deepMerge(merge(CONFIG.RESET, reset), {
+    html: {
+      position: 'absolute',
+      overflow: 'hidden',
+      width: '100%',
+      height: '100%',
+      top: '0',
+      left: '0',
+      margin: '0',
+      WebkitFontSmoothing: 'antialiased',
+      transform: 'translate3d(0, 0, 1px)',
+      scrollBehavior: 'smooth',
+
+      fontFamily: CONFIG.DOCUMENT.fontFamily,
+      fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
+      lineHeight: CONFIG.DOCUMENT.lineHeight
+    },
+
+    body: {
+      boxSizing: 'border-box',
+      height: '100%',
+      margin: 0,
+      fontFamily: CONFIG.DOCUMENT.fontFamily,
+
+      ...getTheme('document')
+    },
+
+    ...CONFIG.TYPOGRAPHY.styles,
+
+    // form elements
+    fieldset: {
+      border: 0,
+      padding: 0,
+      margin: 0
+    },
+
+    select: {
+      fontFamily: CONFIG.DOCUMENT.fontFamily
+    }
+  })
+}

package/src/set.js

@@ -221,7 +221,7 @@ export const getFontFamily = (LIBRARY, key) => {
 const setFontFamily = (val, key) => {
   const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG
   const { value, type } = val
-  if (val.default) FONT_FAMILY.default = key
+  if (val.isDefault) FONT_FAMILY.default = key
 
   const CSSvar = `--font-family-${key}`
   const str = `${value.join(', ')}, ${FONT_FAMILY_TYPES[type]}`
@@ -296,8 +296,8 @@ export const set = recivedConfig => {
   // apply generic configs
   applyTypographySequence()
   applySpacingSequence()
-  applyDocument()
   applyTimingSequence()
+  applyDocument()
   applyReset()
 
   CONFIG.VARS = CSS_VARS

package/src/utils/font.js

@@ -3,30 +3,38 @@
 export const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value
   if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
-  return LIBRARY[Object.keys(LIBRARY)[0]].value
+  const hasValue = Object.keys(LIBRARY)[0]
+  return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
 }
 
 export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
 
-export const setCustomFont = (name, weight, url) => `@font-face {
+export const setCustomFont = (name, weight, url) => `
   font-family: '${name}';
   font-style: normal;
   font-weight: ${weight};
-  src: url('${url}') format('${getFontFormat(url)}');
+  src: url('${url}') format('${getFontFormat(url)}');`
+
+export const setCustomFontMedia = (name, weight, url) => `@font-face {
+  ${setCustomFont((name, weight, url))}
 }`
 // src: url('${url}') format('${getFontFormat(url)}');
 
 export const getFontFaceEach = (name, weightsObject) => {
   const keys = Object.keys(weightsObject)
-  const weightsJoint = keys.map(key => {
+  return keys.map(key => {
     const { fontWeight, url } = weightsObject[key]
     return setCustomFont(name, fontWeight, url)
   })
-  return weightsJoint.join('\n')
+}
+
+export const getFontFaceEachString = (name, weightsObject) => {
+  return getFontFaceEach(name, weightsObject).join('\n')
 }
 
 export const getFontFace = LIBRARY => {
   const keys = Object.keys(LIBRARY)
-  const fontsJoint = keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
-  return fontsJoint.join('\n')
+  return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
 }
+
+export const getFontFaceString = LIBRARY => getFontFace(LIBRARY).join('\n')