@symbo.ls/scratch - npm Package Compare versions

Comparing version 0.3.35 to 0.4.0

package.json

@@ -5,3 +5,3 @@ {
   "author": "symbo.ls",
-  "version": "0.3.35",
+  "version": "0.4.0",
   "files": [
@@ -8,0 +8,0 @@ "src"

src/config/document.js

@@ -12,3 +12,3 @@ 'use strict'
   fontSize: TYPOGRAPHY.base,
-  lineHeight: TYPOGRAPHY.styles.lineHeight
+  lineHeight: TYPOGRAPHY.lineHeight
 })

src/config/index.js

 'use strict'
 
+import { CSS_VARS } from '../factory'
+
 export * from './sequence'
@@ -16,2 +18,3 @@ export * from './unit'
 export * from './cases'
+
 export const RESET = {}

src/config/media.js

 'use strict'
 
 export const MEDIA = {
+  tv: '(min-width: 2780px)',
+
   screenL: '(max-width: 1920px)',
@@ -5,0 +7,0 @@ screenM: '(max-width: 1680px)',

src/config/spacing.js

 'use strict'
 
 import { SEQUENCE, TYPOGRAPHY } from '.'
-import { Arrayize, fallBack, generateSequence } from '../utils'
+import { Arrayize, getSequenceValue, generateSequence, applySequenceVars, merge } from '../utils'
 
@@ -12,8 +12,40 @@ const defaultProps = {
   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)
 }
@@ -27,3 +59,3 @@
 
-export const mapSpacing = (val, property = 'padding', props, unit) => {
+export const getSpacingByKey = (val, property = 'padding', props, unit) => {
   const prefix = '--spacing-'
@@ -38,4 +70,5 @@
   const length = stack.length
+  console.log(stack)
 
-  const wrapFallBack = (prop, i) => fallBack({
+  const wrapSequenceItem = (prop, i) => getSequenceValue({
     type,
@@ -56,4 +89,4 @@ prop,
     return [
-      wrapFallBack(property + 'Block' + suffix, 0),
-      wrapFallBack(property + 'Inline' + suffix, 1)
+      wrapSequenceItem(property + 'Block' + suffix, 0),
+      wrapSequenceItem(property + 'Inline' + suffix, 1)
     ]
@@ -63,18 +96,18 @@ }
     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

src/config/timing.js

 'use strict'
 
 import { SEQUENCE } from '.'
-import { fallBack, generateSequence } from '../utils'
+import { applySequenceVars, generateSequence, getSequenceValue } from '../utils'
 
@@ -12,4 +12,6 @@ const defaultProps = {
   range: [-3, +12],
+  unit: 'ms',
   sequence: {},
-  scales: {}
+  scales: {},
+  vars: {}
 }
@@ -19,5 +21,6 @@
   generateSequence(defaultProps)
+  applySequenceVars(defaultProps)
 }
 
-export const mapTiming = val => fallBack({
+export const getTimingByKey = val => getSequenceValue({
   type: defaultProps.sequence,
@@ -24,0 +27,0 @@ prop: 'duration',

src/config/typography.js

 '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,
@@ -13,18 +14,51 @@ type: 'font-size',
   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
 
-  if (defaultProps.h1Matches) {
-    const HEADINGS = findHeadings(defaultProps)
-    const { styles } = defaultProps
+      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
+      }
+    }
+  }
+}
+
+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}`
       }
@@ -35,9 +69,19 @@ }
 
-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-'
 })
 
+console.log(defaultProps)
+
 export const TYPOGRAPHY = defaultProps

src/factory.js

@@ -8,3 +8,3 @@ 'use strict'
   verbose: false,
-  useVariable: false,
+  useVariable: true,
   useReset: true,
@@ -14,3 +14,1 @@ VARS: CSS_VARS,
 }
-
-

src/reset.js

 'use strict'
 
 import * as CONFIG from './config'
+import { CSS_VARS } from './factory'
 import { getTheme } from './system'
@@ -9,2 +10,4 @@ import { deepMerge, merge } from './utils'
   return deepMerge(merge(CONFIG.RESET, reset), {
+    ':root': CSS_VARS,
+
     html: {
@@ -22,4 +25,5 @@ position: 'absolute',
 
+      fontSize: CONFIG.TYPOGRAPHY.browserDefault + 'px',
+
       fontFamily: CONFIG.DOCUMENT.fontFamily,
-      fontSize: CONFIG.DOCUMENT.fontSize / CONFIG.TYPOGRAPHY.default + CONFIG.UNIT.default,
       lineHeight: CONFIG.DOCUMENT.lineHeight
@@ -34,7 +38,9 @@ },
 
-      ...getTheme('document')
+      ...getTheme('document'),
+
+      fontSize: CONFIG.TYPOGRAPHY.base / CONFIG.TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+
+      ...CONFIG.TYPOGRAPHY.styles
     },
 
-    ...CONFIG.TYPOGRAPHY.styles,
-
     // form elements
@@ -41,0 +47,0 @@ fieldset: {

src/set.js

 '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'
@@ -33,3 +33,4 @@ import { setColor, setGradient, setFont, setFontFamily, setTheme } from './system'
   icons: setSameValue,
-  reset: setSameValue
+  reset: setSameValue,
+  unit: setSameValue
 }
@@ -88,3 +89,5 @@
 }
+console.log(CONFIG.RESET)
+console.log(CSS_VARS)
 
 export * from './system'

src/system/font.js

@@ -18,4 +18,5 @@ 'use strict'
 
-export const getFontFamily = (LIBRARY, key) => {
-  return getDefaultOrFirstKey(LIBRARY, key)
+export const getFontFamily = key => {
+  const { FONT_FAMILY } = CONFIG
+  return getDefaultOrFirstKey(FONT_FAMILY, key)
 }
@@ -22,0 +23,0 @@

src/utils/index.js

@@ -7,2 +7,2 @@ 'use strict'
 export * from './sequence'
-export * from './setVariables'
+export * from './var'

src/utils/sequence.js

 'use strict'
 
 import { UNIT } from '../config'
+import { CONFIG } from '../factory'
 
@@ -35,3 +36,3 @@ export const numToLetterMap = {
 const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
-  state.sequence[variable] = {
+  state.sequence[key] = {
     key,
@@ -41,7 +42,50 @@ decimal: Math.round(value * 100) / 100,
     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) === '-' ? '-' : ''
+  const simplyLetterVal = isNegative ? letterVal.slice(1) : letterVal
+
+  const value = type ? type[simplyLetterVal] : null
+  if (!value) return console.warn('can\'t find', type, simplyLetterVal)
+
+  if (CONFIG.useVariable) {
+    return isNegative ? {
+      [prop]: `calc(var(${prefix}${simplyLetterVal}) * -1)`
+    } : {
+      [prop]: `var(${prefix}${simplyLetterVal})`
+    }
+  }
+
+  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 }) => {
@@ -61,4 +105,2 @@ const next = value * ratio
   else arr = [first, second]
-  // else if (diffRounded > 2) arr = [first, second]
-  // else if (diffRounded > 1) arr = [middle]
 
@@ -76,2 +118,3 @@ arr.map((v, k) => {
   const prefix = '--' + type + '-'
+
   for (let i = 0; i <= n; i++) {
@@ -91,36 +134,8 @@ const key = range[1] - i
 
-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]
   })
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33389

increased by9.98%

Lines of code

1034

increased by11.78%

No dependency changes