@symbo.ls/scratch 0.3.14 → 0.3.17

package/package.json

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

package/src/config/cases.js

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

package/src/config/icons.js

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

package/src/config/index.js

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

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

@@ -104,7 +104,6 @@ const getThemeValue = theme => {
 
 export const getTheme = value => {
   const { THEME } = CONFIG
-  // console.log('theme', THEME, CONFIG)
   if (isObjectLike(value) && value[1]) {
     const themeName = value[0]
     const subThemeName = value[1]
@@ -214,6 +213,10 @@ const setFontFamily = (val, key) => {
   return { var: CSSvar, value: str, arr: value, type }
 }
 
+const setCases = (val, key) => {
+  return val()
+}
+
 const setSameValue = (val, key) => val
 
 export const SETTERS = {
@@ -224,7 +227,9 @@ export const SETTERS = {
   theme: setTheme,
   typography: setSameValue,
   spacing: setSameValue,
-  responsive: setSameValue
+  media: setSameValue,
+  cases: setCases,
+  icons: setSameValue
 }
 
 /**
@@ -262,8 +267,8 @@ export const set = recivedConfig => {
   applyDocument()
 
   CONFIG.verbose = verbose
+  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.log(CONFIG)
 
-  console.log(CONFIG)
   return CONFIG
 }