@symbo.ls/scratch 0.3.35 → 0.4.2

package/package.json

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

package/src/config/document.js

@@ -9,5 +9,5 @@ export const applyDocument = () => merge(DOCUMENT, {
   theme: THEME.document,
   fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
   fontSize: TYPOGRAPHY.base,
-  lineHeight: TYPOGRAPHY.styles.lineHeight
+  lineHeight: TYPOGRAPHY.lineHeight
 })

package/src/config/index.js

@@ -1,5 +1,7 @@
 'use strict'
 
+import { CSS_VARS } from '../factory'
+
 export * from './sequence'
 export * from './unit'
 export * from './typography'
@@ -13,4 +15,5 @@ export * from './icons'
 export * from './timing'
 export * from './document'
 export * from './cases'
+
 export const RESET = {}

package/src/config/media.js

@@ -1,6 +1,8 @@
 'use strict'
 
 export const MEDIA = {
+  tv: '(min-width: 2780px)',
+
   screenL: '(max-width: 1920px)',
   screenM: '(max-width: 1680px)',
   screenS: '(max-width: 1440px)',

package/src/config/spacing.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { SEQUENCE, TYPOGRAPHY } from '.'
-import { Arrayize, fallBack, generateSequence } from '../utils'
+import { Arrayize, getSequenceValue, generateSequence, applySequenceVars, merge } from '../utils'
 
 const defaultProps = {
   base: TYPOGRAPHY.base,
@@ -9,12 +9,44 @@ const defaultProps = {
   ratio: SEQUENCE.phi,
   range: [-5, +15],
   subSequence: true,
+  unit: 'em',
   sequence: {},
-  scales: {}
+  scales: {},
+  vars: {}
+}
+
+const runThroughMedia = props => {
+  for (const prop in props) {
+    const mediaProps = props[prop]
+    if (prop.slice(0, 1) === '@') {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      })
+
+      generateSequence(mediaProps)
+
+      const mediaName = prop.slice(1)
+      applySequenceVars(mediaProps, mediaName)
+    }
+  }
 }
 
 export const applySpacingSequence = () => {
   generateSequence(defaultProps)
+  applySequenceVars(defaultProps)
+  runThroughMedia(defaultProps)
 }
 
 const getSequence = (props) => {
@@ -23,7 +55,7 @@ const getSequence = (props) => {
   return hasGenerated ? props : generateSequence(props)
 }
 
-export const mapSpacing = (val, property = 'padding', props, unit) => {
+export const getSpacingByKey = (val, property = 'padding', props, unit) => {
   const prefix = '--spacing-'
 
   const generatedSequence = getSequence(props)
@@ -34,7 +66,7 @@ export const mapSpacing = (val, property = 'padding', props, unit) => {
 
   const length = stack.length
 
-  const wrapFallBack = (prop, i) => fallBack({
+  const wrapSequenceItem = (prop, i) => getSequenceValue({
     type,
     prop,
     val: stack[i],
@@ -50,26 +82,26 @@ export const mapSpacing = (val, property = 'padding', props, unit) => {
 
   if (length === 2) {
     return [
-      wrapFallBack(property + 'Block' + suffix, 0),
-      wrapFallBack(property + 'Inline' + suffix, 1)
+      wrapSequenceItem(property + 'Block' + suffix, 0),
+      wrapSequenceItem(property + 'Inline' + suffix, 1)
     ]
   }
   if (length === 3) {
     return [
-      wrapFallBack(property + 'BlockStart' + suffix, 0),
-      wrapFallBack(property + 'Inline' + suffix, 1),
-      wrapFallBack(property + 'BlockEnd' + suffix, 2)
+      wrapSequenceItem(property + 'BlockStart' + suffix, 0),
+      wrapSequenceItem(property + 'Inline' + suffix, 1),
+      wrapSequenceItem(property + 'BlockEnd' + suffix, 2)
     ]
   } else if (length === 4) {
     return [
-      wrapFallBack(property + 'BlockStart' + suffix, 0),
-      wrapFallBack(property + 'InlineStart' + suffix, 3),
-      wrapFallBack(property + 'BlockEnd' + suffix, 2),
-      wrapFallBack(property + 'InlineEnd' + suffix, 1)
+      wrapSequenceItem(property + 'BlockStart' + suffix, 0),
+      wrapSequenceItem(property + 'InlineStart' + suffix, 3),
+      wrapSequenceItem(property + 'BlockEnd' + suffix, 2),
+      wrapSequenceItem(property + 'InlineEnd' + suffix, 1)
     ]
   }
 
-  return fallBack({ type, prop: property, val, prefix })
+  return getSequenceValue({ type, prop: property, val, prefix, unit })
 }
 
 export const SPACING = defaultProps

package/src/config/timing.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { SEQUENCE } from '.'
-import { fallBack, generateSequence } from '../utils'
+import { applySequenceVars, generateSequence, getSequenceValue } from '../utils'
 
 const defaultProps = {
   default: 150,
@@ -9,15 +9,18 @@ const defaultProps = {
   type: 'duration',
   ratio: SEQUENCE['perfect-fourth'],
   range: [-3, +12],
+  unit: 'ms',
   sequence: {},
-  scales: {}
+  scales: {},
+  vars: {}
 }
 
 export const applyTimingSequence = () => {
   generateSequence(defaultProps)
+  applySequenceVars(defaultProps)
 }
 
-export const mapTiming = val => fallBack({
+export const getTimingByKey = val => getSequenceValue({
   type: defaultProps.sequence,
   prop: 'duration',
   val,

package/src/config/typography.js

@@ -1,40 +1,82 @@
 'use strict'
 
-import { SEQUENCE } from '.'
-import { fallBack, generateSequence, findHeadings } from '../utils'
+import { CONFIG } from '../factory'
+import { SEQUENCE, MEDIA } from '.'
+import { getSequenceValue, generateSequence, findHeadings, merge, applySequenceVars } from '../utils'
 
 const defaultProps = {
-  default: 16,
+  browserDefault: 16,
   base: 16,
   type: 'font-size',
   ratio: SEQUENCE['minor-third'],
   range: [-3, +12],
   h1Matches: +6,
-  styles: {
-    lineHeight: 1.5
-  },
+  lineHeight: 1.5,
+  unit: 'em',
+  styles: {},
   sequence: {},
-  scales: {}
+  scales: {},
+  vars: {}
 }
 
-export const applyTypographySequence = () => {
-  generateSequence(defaultProps)
+const runThroughMedia = props => {
+  for (const prop in props) {
+    const mediaProps = props[prop]
+    if (prop.slice(0, 1) === '@') {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      })
+
+      generateSequence(mediaProps)
+
+      const mediaName = prop.slice(1)
+      applySequenceVars(mediaProps, mediaName)
+
+      const query = MEDIA[mediaName]
+      defaultProps.styles[`@media screen and ${query}`] = {
+        fontSize: mediaProps.base / defaultProps.browserDefault + unit
+      }
+    }
+  }
+}
 
-  if (defaultProps.h1Matches) {
-    const HEADINGS = findHeadings(defaultProps)
-    const { styles } = defaultProps
+const applyHeadings = (props) => {
+  if (props.h1Matches) {
+    const unit = props.unit
+    const HEADINGS = findHeadings(props)
+    const { styles } = props
     for (const k in HEADINGS) {
       styles[`h${parseInt(k) + 1}`] = {
-        fontSize: `${HEADINGS[k].scaling}em`
+        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`
       }
     }
   }
 }
 
-export const mapFontSize = val => fallBack({
+export const applyTypographySequence = () => {
+  generateSequence(defaultProps)
+  applyHeadings(defaultProps)
+  applySequenceVars(defaultProps)
+  runThroughMedia(defaultProps)
+}
+
+export const getFontSizeByKey = val => getSequenceValue({
   type: defaultProps.sequence,
   prop: 'fontSize',
   val,
+  unit: defaultProps.unit,
   prefix: '--font-size-'
 })
 

package/src/factory.js

@@ -5,10 +5,8 @@ import * as CONF from './config'
 export const CSS_VARS = {}
 export const CONFIG = {
   verbose: false,
-  useVariable: false,
+  useVariable: true,
   useReset: true,
   VARS: CSS_VARS,
   ...CONF
 }
-
-

package/src/reset.js

@@ -1,11 +1,14 @@
 'use strict'
 
 import * as CONFIG from './config'
+import { CSS_VARS } from './factory'
 import { getTheme } from './system'
 import { deepMerge, merge } from './utils'
 
 export const applyReset = (reset = {}) => {
   return deepMerge(merge(CONFIG.RESET, reset), {
+    ':root': CSS_VARS,
+
     html: {
       position: 'absolute',
       overflow: 'hidden',
@@ -18,8 +21,9 @@ export const applyReset = (reset = {}) => {
       transform: 'translate3d(0, 0, 1px)',
       scrollBehavior: 'smooth',
 
+      fontSize: CONFIG.TYPOGRAPHY.browserDefault + 'px',
+
       fontFamily: CONFIG.DOCUMENT.fontFamily,
-      fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
       lineHeight: CONFIG.DOCUMENT.lineHeight
     },
 
@@ -29,10 +33,12 @@ export const applyReset = (reset = {}) => {
       margin: 0,
       fontFamily: CONFIG.DOCUMENT.fontFamily,
 
-      ...getTheme('document')
-    },
+      ...getTheme('document'),
 
-    ...CONFIG.TYPOGRAPHY.styles,
+      fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+
+      ...CONFIG.TYPOGRAPHY.styles
+    },
 
     // form elements
     fieldset: {

package/src/set.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { applyDocument, applySpacingSequence, applyTimingSequence, applyTypographySequence } from './config'
-import { CONFIG, CSS_VARS } from './factory'
+import { CONFIG, CSS_VARS } from './factory' // eslint-disable-line no-unused-vars
 import { applyReset } from './reset'
 import { setColor, setGradient, setFont, setFontFamily, setTheme } from './system'
 import {
@@ -30,7 +30,8 @@ export const SETTERS = {
   media: setSameValue,
   timing: setSameValue,
   icons: setSameValue,
-  reset: setSameValue
+  reset: setSameValue,
+  unit: setSameValue
 }
 
 /**

package/src/system/font.js

@@ -15,8 +15,9 @@ export const setFont = (val, key) => {
   return { var: CSSvar, value: val, fontFace }
 }
 
-export const getFontFamily = (LIBRARY, key) => {
-  return getDefaultOrFirstKey(LIBRARY, key)
+export const getFontFamily = key => {
+  const { FONT_FAMILY } = CONFIG
+  return getDefaultOrFirstKey(FONT_FAMILY, key)
 }
 
 export const setFontFamily = (val, key) => {

package/src/system/theme.js

@@ -88,7 +88,6 @@ const goThroughInteractiveStates = (theme, value) => {
 
 const setPrefersScheme = (theme, key, variant, themeValue) => {
   const result = getTheme(variant)
-  // console.log(variant)
   themeValue[`@media (prefers-color-scheme: ${key})`] = result
   if (isObject(variant) && !variant.value) variant.value = result
 }
@@ -99,8 +98,6 @@ const goThroughVariants = (theme, value) => {
   const keys = Object.keys(variants)
   keys.map(key => {
     const variant = variants[key]
-    // console.log('=========')
-    // console.log(theme, key, variant, value)
     if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value)
     if (key === 'inverse') setInverseTheme(theme, variant, value)
     return theme

package/src/utils/index.js

@@ -4,4 +4,4 @@ export * from './object'
 export * from './color'
 export * from './font'
 export * from './sequence'
-export * from './setVariables'
+export * from './var'

package/src/utils/sequence.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { UNIT } from '../config'
+import { CONFIG } from '../factory'
 
 export const numToLetterMap = {
   '-6': 'U',
@@ -32,14 +33,65 @@ export const numToLetterMap = {
 }
 
 const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
-  state.sequence[variable] = {
+  state.sequence[key] = {
     key,
     decimal: Math.round(value * 100) / 100,
     val: Math.round(value),
     scaling,
-    index
+    index,
+    variable
   }
-  state.scales[variable] = scaling
+  state.scales[key] = scaling
+  state.vars[variable] = scaling + state.unit
+}
+
+export const getSequenceValue = ({ type, prop, val = 'A', prefix = '--font-size-', unit = UNIT.default }) => {
+  if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
+
+  if (val === '-' || val === '') return ({ })
+  if (
+    val === 'none' ||
+    val === 'auto' ||
+    val === 'fit-content' ||
+    val === 'min-content' ||
+    val === 'max-content'
+  ) return ({ [prop]: val })
+
+  const startsWithLetterRegex = /^-?[a-zA-Z]/i
+  const startsWithLetter = startsWithLetterRegex.test(val)
+  if (!startsWithLetter) return ({ [prop]: val })
+
+  const letterVal = val.toUpperCase()
+  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
+  let pureVal = isNegative ? letterVal.slice(1) : letterVal
+
+  let mediaName = ''
+  if (pureVal.includes('-')) {
+    console.log(pureVal)
+    mediaName = '-' + pureVal.split('-')[1].toLowerCase()
+    pureVal = pureVal.split('-')[0]
+  }
+
+  const value = type ? type[pureVal] : null
+  if (!value) return console.warn('can\'t find', type, pureVal)
+
+  if (CONFIG.useVariable) {
+    const varVal = `var(${prefix}${pureVal}${mediaName})`
+    return isNegative ? {
+      [prop]: `calc(${varVal} * -1)`
+    } : {
+      [prop]: varVal
+    }
+  }
+
+  if (unit === 'ms' || unit === 's') {
+    return ({ [prop]: isNegative + value.val + unit })
+  }
+
+  return ({
+    [prop]: isNegative + value.val + value.unit,
+    [prop]: isNegative + value.scaling + unit
+  })
 }
 
 export const generateSubSequence = ({ key, base, value, ratio, variable, state, index }) => {
@@ -56,8 +108,6 @@ export const generateSubSequence = ({ key, base, value, ratio, variable, state,
   const middle = (first + second) / 2
   if (diffRounded > 100) arr = [first, middle, second]
   else arr = [first, second]
-  // else if (diffRounded > 2) arr = [first, second]
-  // else if (diffRounded > 1) arr = [middle]
 
   arr.map((v, k) => {
     const scaling = Math.round(v / base * 1000) / 1000
@@ -70,6 +120,7 @@ export const generateSubSequence = ({ key, base, value, ratio, variable, state,
 export const generateSequence = ({ type, base, ratio, range, subSequence, ...state }) => {
   const n = Math.abs(range[0]) + Math.abs(range[1])
   const prefix = '--' + type + '-'
+
   for (let i = 0; i <= n; i++) {
     const key = range[1] - i
     const letterKey = numToLetterMap[key]
@@ -84,38 +135,10 @@ export const generateSequence = ({ type, base, ratio, range, subSequence, ...sta
   return state
 }
 
-export const fallBack = ({ type, prop, val = 'A', prefix = '--font-size-', unit = UNIT.default }) => {
-  if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
-
-  if (val === '-' || val === '') return ({ })
-  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
-  // const hasLetter = /[A-Za-z]+/.test(val)
-  const startsWithLetter = startsWithLetterRegex.test(val)
-  if (!startsWithLetter) return ({ [prop]: val })
-
-  const letterVal = val.toUpperCase()
-  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
-  const simplyLetterVal = isNegative ? letterVal.slice(1) : letterVal
-
-  const value = type ? type[prefix + simplyLetterVal] : null
-  if (!value) return console.warn('can\'t find', type, prefix + simplyLetterVal, simplyLetterVal)
-
-  if (unit === 'ms' || unit === 's') {
-    return ({ [prop]: isNegative + value.val + unit })
-  }
-  return ({
-    [prop]: isNegative + value.val + value.unit,
-    [prop]: isNegative + value.scaling + 'em'
-  })
-}
-
-export const findHeadings = (TYPOGRAPHY) => {
-  const { h1Matches, type, sequence } = TYPOGRAPHY
+export const findHeadings = props => {
+  const { h1Matches, sequence } = props
   return new Array(6).fill(null).map((_, i) => {
     const findLetter = numToLetterMap[h1Matches - i]
-    return sequence[`--${type}-${findLetter}`]
+    return sequence[findLetter]
   })
 }

package/src/utils/var.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { MEDIA } from '../config'
+import { CONFIG, CSS_VARS } from '../factory'
+import { isObjectLike } from './object'
+
+export const setVariables = (result, key) => {
+  // CSS_VARS[result.var] =
+  if (isObjectLike(result.value)) {
+    // console.group(key)
+    // for (const key in result.value) {
+    // console.log(key, result.value[key])
+    // }
+    // console.log(result)
+    // console.groupEnd(key)
+  } else {
+    CSS_VARS[result.var] = result.value
+  }
+}
+
+export const applySequenceVars = (props, mediaName) => {
+  const unit = props.unit || CONFIG.UNIT.default
+  const { sequence, scales } = props
+
+  for (const key in sequence) {
+    const item = sequence[key]
+    const value = (props.type === 'duration' ? sequence[key].val : scales[key]) + unit
+    const query = MEDIA[mediaName]
+
+    if (mediaName) {
+      let underMediaQuery = CSS_VARS[`@media ${query}`]
+      if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
+      underMediaQuery[item.variable] = `var(${item.variable + '-' + mediaName})`
+      CSS_VARS[item.variable + '-' + mediaName] = value
+    } else {
+      CSS_VARS[item.variable + '-default'] = value
+      CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
+    }
+  }
+}

package/src/utils/setVariables.js

@@ -1,18 +0,0 @@
-'use strict'
-
-import { CSS_VARS } from '../factory'
-import { isObjectLike } from './object'
-
-export const setVariables = (result, key) => {
-  // CSS_VARS[result.var] =
-  if (isObjectLike(result.value)) {
-    // console.group(key)
-    // for (const key in result.value) {
-    // console.log(key, result.value[key])
-    // }
-    // console.log(result)
-    // console.groupEnd(key)
-  } else {
-    CSS_VARS[result.var] = result.value
-  }
-}