@symbo.ls/scratch 0.3.13 → 0.3.16

package/package.json

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

package/src/config/icons.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const ICONS = {}

package/src/config/index.js

@@ -12,6 +12,8 @@ export * from './spacing'
 export * from './color'
 export * from './theme'
 
-export * from './responsive'
+export * from './icons'
+
+export * from './media'
 
 export * from './document'

package/src/config/media.js

@@ -0,0 +1,15 @@
+'use strict'
+
+export const MEDIA = {
+  screenL: '(max-width: 1920px)',
+  screenD: '(max-width: 1680px)',
+  screenS: '(max-width: 1440px)',
+  tabletL: '(max-width: 1366px)',
+  tabletM: '(max-width: 1280px)',
+  tabletS: '(max-width: 1024px)',
+  mobileL: '(max-width: 768px)',
+  mobileM: '(max-width: 560px)',
+  mobileS: '(max-width: 480px)',
+
+  light: '(prefers-color-scheme: light)'
+}

package/src/config/responsive.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export const RESPONSIVE = {
+export const BREAKPOINTS = {
   screenL: 1920,
   screenD: 1680,
   screenS: 1440,

package/src/config/spacing.js

@@ -42,24 +42,30 @@ export const mapSpacing = (val, property = 'padding', props, unit) => {
     unit
   })
 
+  let suffix = ''
+  if (property === 'borderWidth') {
+    property = 'border'
+    suffix = 'Width'
+  }
+
   if (length === 2) {
     return [
-      wrapFallBack(property + 'Block', 0),
-      wrapFallBack(property + 'Inline', 1)
+      wrapFallBack(property + 'Block' + suffix, 0),
+      wrapFallBack(property + 'Inline' + suffix, 1)
     ]
   }
   if (length === 3) {
     return [
-      wrapFallBack(property + 'BlockStart', 0),
-      wrapFallBack(property + 'Inline', 1),
-      wrapFallBack(property + 'BlockEnd', 2)
+      wrapFallBack(property + 'BlockStart' + suffix, 0),
+      wrapFallBack(property + 'Inline' + suffix, 1),
+      wrapFallBack(property + 'BlockEnd' + suffix, 2)
     ]
   } else if (length === 4) {
     return [
-      wrapFallBack(property + 'BlockStart', 0),
-      wrapFallBack(property + 'InlineStart', 3),
-      wrapFallBack(property + 'BlockEnd', 2),
-      wrapFallBack(property + 'InlineEnd', 1)
+      wrapFallBack(property + 'BlockStart' + suffix, 0),
+      wrapFallBack(property + 'InlineStart' + suffix, 3),
+      wrapFallBack(property + 'BlockEnd' + suffix, 2),
+      wrapFallBack(property + 'InlineEnd' + suffix, 1)
     ]
   }
 

package/src/methods/set.js

@@ -224,7 +224,8 @@ export const SETTERS = {
   theme: setTheme,
   typography: setSameValue,
   spacing: setSameValue,
-  responsive: setSameValue
+  media: setSameValue,
+  icons: setSameValue
 }
 
 /**
@@ -262,8 +263,8 @@ export const set = recivedConfig => {
   applyDocument()
 
   CONFIG.verbose = verbose
+  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.log(CONFIG)
 
-  console.log(CONFIG)
   return CONFIG
 }
 

package/src/utils/index.js

@@ -160,7 +160,7 @@ export const changeLightness = (delta, hsl) => {
 
 export const rgbToHSL = (r, g, b) => {
   const a = Math.max(r, g, b); const n = a - Math.min(r, g, b); const f = (1 - Math.abs(a + a - n - 1))
-  const h = n && ((a == r) ? (g - b) / n : ((a == g) ? 2 + (b - r) / n : 4 + (r - g) / n))
+  const h = n && ((a == r) ? (g - b) / n : ((a == g) ? 2 + (b - r) / n : 4 + (r - g) / n)) //eslint-disable-line
   return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
 }
 
@@ -328,7 +328,7 @@ export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-', unit
   if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
 
   if (val === '-' || val === '') return ({ })
-  if (val === 'auto' || val === 'fit-content' || val === 'min-content' || val === 'max-content') return ({ [prop]: val })
+  if (val === 'none' || val === 'auto' || val === 'fit-content' || val === 'min-content' || val === 'max-content') return ({ [prop]: val })
 
   // const startsWithLetterRegex = /^[a-zA-Z]/i
   const startsWithLetterRegex = /^-?[a-zA-Z]/i