@symbo.ls/scratch - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

package.json

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

src/factory.js

 'use strict'
 
-import * as CONF from './config'
+import * as CONF from './defaultConfig'
 
@@ -5,0 +5,0 @@ export const CSS_VARS = {}

src/index.js

@@ -6,2 +6,2 @@ 'use strict'
 export * from './set'
-export * from './config'
+export * from './defaultConfig'

src/system/color.js

 'use strict'
 
-import { MEDIA } from '../config'
+import { MEDIA } from '../defaultConfig'
 import { CONFIG, CSS_VARS } from '../factory' // eslint-disable-line
@@ -35,3 +35,3 @@
   if (!val) {
-    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color', name)
+    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find color ', name)
     return value
@@ -76,2 +76,4 @@ }
 
+  if (value.slice(0, 2) === '--') return { [param]: `var(${value})` }
+
   const [name] = isArray(value) ? value : value.split(' ')
@@ -78,0 +80,0 @@

src/system/document.js

 'use strict'
 
-import { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } from '../config'
+import { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } from '../defaultConfig'
 import { getDefaultOrFirstKey, merge } from '../utils'
@@ -5,0 +5,0 @@

src/system/reset.js

 'use strict'
 
-import * as CONFIG from '../config'
+import * as CONFIG from '../defaultConfig'
 import { CSS_VARS } from '../factory'
@@ -5,0 +5,0 @@ import { getTheme } from '.'

src/system/spacing.js

 'use strict'
 
-import { SPACING } from '../config'
-import { applySequenceVars, Arrayize, generateSequence, getSequenceValue, merge } from '../utils'
+import { SPACING } from '../defaultConfig'
+import { applySequenceVars, arrayze, generateSequence, getSequenceValuePropertyPair, merge } from '../utils'
 
-const runThroughMedia = props => {
-  for (const prop in props) {
-    const mediaProps = props[prop]
+const runThroughMedia = sequenceProps => {
+  for (const prop in sequenceProps) {
+    const mediaProps = sequenceProps[prop]
     if (prop.slice(0, 1) === '@') {
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps
 
@@ -40,55 +40,79 @@ merge(mediaProps, {
 
-const getSequence = (props) => {
-  if (!props) return
-  const hasGenerated = Object.keys(props.sequence).length > 0
-  return hasGenerated ? props : generateSequence(props)
+const getSequence = (sequenceProps) => {
+  if (!sequenceProps) return SPACING
+  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
+  return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
 }
 
-export const getSpacingByKey = (val, property = 'padding', props, unit) => {
-  const prefix = '--spacing-'
+export const getSpacingByKey = (
+  value,
+  propertyName = 'padding',
+  sequenceProps
+) => {
+  const sequence = getSequence(sequenceProps)
 
-  const generatedSequence = getSequence(props)
-  const type = (generatedSequence || SPACING).sequence
-
-  const stack = Arrayize(val)
+  const stack = arrayze(value)
   if (!stack) return
 
-  const length = stack.length
-
-  const wrapSequenceItem = (prop, i) => getSequenceValue({
-    type,
-    prop,
-    val: stack[i],
-    prefix,
-    unit
-  })
-
   let suffix = ''
-  if (property === 'borderWidth') {
-    property = 'border'
+  if (propertyName === 'borderWidth') {
+    propertyName = 'border'
     suffix = 'Width'
   }
 
-  if (length === 2) {
-    return [
-      wrapSequenceItem(property + 'Block' + suffix, 0),
-      wrapSequenceItem(property + 'Inline' + suffix, 1)
-    ]
+  const directions = {
+    2: ['Block', 'Inline'],
+    3: ['BlockStart', 'Inline', 'BlockEnd'],
+    4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
   }
-  if (length === 3) {
-    return [
-      wrapSequenceItem(property + 'BlockStart' + suffix, 0),
-      wrapSequenceItem(property + 'Inline' + suffix, 1),
-      wrapSequenceItem(property + 'BlockEnd' + suffix, 2)
-    ]
-  } else if (length === 4) {
-    return [
-      wrapSequenceItem(property + 'BlockStart' + suffix, 0),
-      wrapSequenceItem(property + 'InlineStart' + suffix, 3),
-      wrapSequenceItem(property + 'BlockEnd' + suffix, 2),
-      wrapSequenceItem(property + 'InlineEnd' + suffix, 1)
-    ]
+
+  const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
+    stack[i],
+    propertyName + direction + suffix,
+    sequence
+  )
+
+  if (stack.length > 1) {
+    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key))
   }
 
-  return getSequenceValue({ type, prop: property, val, prefix, unit })
+  return getSequenceValuePropertyPair(
+    value,
+    propertyName,
+    sequence
+  )
 }
+
+export const getSpacingBasedOnRatio = (props, propertyName, val) => {
+  const { spacingRatio, unit } = props
+  const value = val || props[propertyName]
+
+  if (spacingRatio) {
+    let sequenceProps = SPACING[spacingRatio]
+
+    if (!sequenceProps) {
+      const { type, base, range, subSequence } = SPACING
+
+      sequenceProps = SPACING[spacingRatio] = merge({
+        ratio: spacingRatio,
+        type: type + '-' + spacingRatio,
+        unit,
+        sequence: {},
+        scales: {},
+        styles: {},
+        vars: {}
+      }, {
+        base,
+        range,
+        subSequence,
+        ratio: SPACING.ratio,
+        unit: SPACING.unit
+      })
+    }
+
+    applySequenceVars(sequenceProps, null, { useDefault: false })
+
+    return getSpacingByKey(value, propertyName, sequenceProps)
+  }
+  return getSpacingByKey(value, propertyName)
+}

src/system/theme.js

@@ -13,3 +13,3 @@ 'use strict'
 
-const ENV = process.env.NODE_ENV
+const ENV = process.env.NODE_ENV // eslint-disable-line
 
@@ -57,3 +57,3 @@ const setThemeValue = theme => {
 
-  if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
+  // if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find theme', value)
 }
@@ -166,6 +166,21 @@
         }
+        theme[`.${param}`] = { [param]: theme[param] }
       }
     }
+
+    if (theme['background'] || theme['color'] || theme['backgroundColor']) {
+      theme['.inversed'] = {
+        color: theme['background'] || theme['backgroundColor'],
+        background: theme['color']
+      }
+    }
   }
 
+  if (isString(val) && val.slice(0, 2) === '--') {
+    const { THEME } = CONFIG
+    const value = THEME[val.slice(2)]
+    const getReferenced = getMediaTheme(value)
+    return getReferenced
+  }
+
   return theme
@@ -191,11 +206,40 @@ }
 
-export const getMediaTheme = (val, key, themeObj) => {
+const findModifierFromArray = (val, modifierArray) => {
+  const currentMod = modifierArray.shift()
+  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray)
+  return val
+}
+
+const findModifier = (val, modifier) => {
+  // console.log(val)
+  // console.log(modifier)
+  if (isArray(modifier)) return findModifierFromArray(val, modifier)
+  else if (isString(modifier)) return val[modifier]
+  else return val
+}
+
+const checkForReference = (val, callback) => {
+  if (isString(val) && val.slice(0, 2) === '--') return getMediaTheme(val.slice(2))
+  return val
+}
+
+const checkThemeReference = (val) => checkForReference(val, checkThemeReference) // eslint-disable-line
+
+export const getMediaTheme = (val, mod, themeObj) => {
+  if (isString(val) && val.slice(0, 2) === '--') val = getMediaTheme(val.slice(2))
+
   if (!val || !isString(val)) {
-    if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- type for color is not valid')
+    // if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn(val, '- type for color is not valid')
     return
   }
-  const [name, modifier] = isArray(val) ? val : val.split(' ')
+
+  // console.group(val)
+  const [name, ...modifier] = isArray(val) ? val : val.split(' ')
   let value = CONFIG.THEME[name]
-  if (value && modifier && value[modifier]) value = value[modifier]
+  if (value && (modifier || mod)) value = findModifier(value, modifier.length ? modifier : mod)
+  // console.log('finalval', value)
+  // console.groupEnd(val)
   return recursiveTheme(value)
 }
+
+window.getMediaTheme = getMediaTheme

src/system/timing.js

 'use strict'
 
-import { TIMING } from '../config'
+import { TIMING } from '../defaultConfig'
 import {
   applySequenceVars,
   generateSequence,
-  getSequenceValue
+  getSequenceValuePropertyPair
 } from '../utils'
@@ -15,8 +15,6 @@
 
-export const getTimingByKey = val => getSequenceValue({
-  type: TIMING.sequence,
-  prop: 'duration',
-  val,
-  unit: 'ms',
-  prefix: '--duration-'
-})
+export const getTimingByKey = value => getSequenceValuePropertyPair(
+  value,
+  'duration',
+  TIMING
+)

src/system/typography.js

 'use strict'
 
-import { MEDIA, TYPOGRAPHY } from '../config'
+import { MEDIA, TYPOGRAPHY } from '../defaultConfig'
 import { CONFIG } from '../factory'
@@ -9,3 +9,3 @@ import {
   generateSequence,
-  getSequenceValue,
+  getSequenceValuePropertyPair,
   merge
@@ -67,8 +67,6 @@ } from '../utils'
 
-export const getFontSizeByKey = val => getSequenceValue({
-  type: TYPOGRAPHY.sequence,
-  prop: 'fontSize',
-  val,
-  unit: TYPOGRAPHY.unit,
-  prefix: '--font-size-'
-})
+export const getFontSizeByKey = value => getSequenceValuePropertyPair(
+  value,
+  'fontSize',
+  TYPOGRAPHY
+)

src/utils/object.js

@@ -41,3 +41,3 @@ 'use strict'
 
-export const Arrayize = val => {
+export const arrayze = val => {
   const isString = typeof val === 'string'
@@ -44,0 +44,0 @@ if (isString) return val.split(' ')

src/utils/sequence.js

 'use strict'
 
-import { UNIT } from '../config'
+import { UNIT } from '../defaultConfig'
 import { CONFIG } from '../factory'
+import { isString } from './object'
 
@@ -35,4 +36,5 @@ export const numToLetterMap = {
 
-const setSequenceValue = ({ key, variable, value, scaling, state, index }) => {
-  state.sequence[key] = {
+const setSequenceValue = (props, sequenceProps) => {
+  const { key, variable, value, scaling, index } = props
+  sequenceProps.sequence[key] = {
     key,
@@ -45,62 +47,13 @@ decimal: Math.round(value * 100) / 100,
   }
-  state.scales[key] = scaling
-  state.vars[variable] = scaling + state.unit
+  sequenceProps.scales[key] = scaling
+  sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
-export const getSequenceValue = ({
-  type,
-  prop,
-  val = 'A',
-  prefix = '--font-size-',
-  unit = UNIT.default,
-  useVariable
-}) => {
-  if (typeof val !== 'string') console.warn(prop, val, 'is not a string')
+const dashize = val => val
+  .replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
+  .replace('.', '-')
 
-  if (val === '-' || val === '') return ({ })
-  if (
-    val === 'none' ||
-    val === 'auto' ||
-    val === 'fit-content' ||
-    val === 'min-content' ||
-    val === 'max-content'
-  ) return ({ [prop]: val })
+export const generateSubSequence = (props, sequenceProps) => {
+  const { key, base, value, ratio, variable, index } = props
 
-  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('-')) {
-    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 (useVariable || 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 }) => {
   const next = value * ratio
@@ -114,6 +67,6 @@ const smallscale = (next - value) / ratio
   let arr = []
-  const first = next - smallscale
-  const second = value + smallscale
+  const first = value + smallscale
+  const second = next - smallscale
   const middle = (first + second) / 2
-  if (diffRounded > 100) arr = [first, middle, second]
+  if (diffRounded > 16) arr = [first, middle, second]
   else arr = [first, second]
@@ -125,9 +78,18 @@
 
-    return setSequenceValue({ key: key + (k + 1), variable: newVar, value: v, scaling, state, index: index + (k + 1) / 10 })
+    const props = {
+      key: key + (k + 1),
+      variable: newVar,
+      value: v,
+      scaling,
+      index: index + (k + 1) / 10
+    }
+
+    return setSequenceValue(props, sequenceProps)
   })
 }
 
-export const generateSequence = ({ type, base, ratio, range, subSequence, ...state }) => {
+export const generateSequence = (sequenceProps) => {
+  const { type, base, ratio, range, subSequence } = sequenceProps
   const n = Math.abs(range[0]) + Math.abs(range[1])
-  const prefix = '--' + type + '-'
+  const prefix = '--' + type.replace('.', '-') + '-'
 
@@ -141,11 +103,80 @@ for (let i = 0; i <= n; i++) {
 
-    setSequenceValue({ key: letterKey, variable, value, scaling, state, index: key })
+    const props = {
+      key: letterKey,
+      variable,
+      value,
+      base,
+      scaling,
+      ratio,
+      index: key
+    }
 
-    if (subSequence) generateSubSequence({ key: letterKey, base, value, ratio, variable, state, index: key })
+    setSequenceValue(props, sequenceProps)
+
+    if (subSequence) generateSubSequence(props, sequenceProps)
   }
-  return state
+  return sequenceProps
 }
 
-export const findHeadings = props => {
-  const { h1Matches, sequence } = props
+export const getSequenceValue = (value = 'A', sequenceProps) => {
+  const {
+    sequence,
+    unit = UNIT.default,
+    useVariable
+  } = sequenceProps
+
+  if (isString(value) && value.slice(0, 2) === '--') {
+    return `var(${value})`
+  }
+
+  const prefix = `--${dashize(sequenceProps.type.replace('.', '-'))}-`
+
+  const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i
+  const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value)
+
+  if (
+    value === 'none' ||
+    value === 'auto' ||
+    value === 'fit-content' ||
+    value === 'min-content' ||
+    value === 'max-content' ||
+    !startsWithDashOrLetter
+  ) return value
+
+  const letterVal = value.toUpperCase()
+  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
+  let absValue = isNegative ? letterVal.slice(1) : letterVal
+
+  let mediaName = ''
+  if (absValue.includes('-')) {
+    mediaName = '-' + absValue.split('-')[1].toLowerCase()
+    absValue = absValue.split('-')[0]
+  }
+
+  if (useVariable || CONFIG.useVariable) {
+    const varValue = `var(${prefix}${absValue}${mediaName})`
+    return isNegative ? `calc(${varValue} * -1)` : varValue
+  }
+
+  const sequenceItem = sequence ? sequence[absValue] : null
+  if (!sequenceItem) return console.warn('can\'t find', sequence, absValue)
+
+  if (unit === 'ms' || unit === 's') {
+    return isNegative + sequenceItem.value + unit
+  }
+
+  return isNegative + sequenceItem.scaling + unit
+}
+
+export const getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+  if (typeof value !== 'string') {
+    console.warn(propertyName, value, 'is not a string')
+    return ({})
+  }
+  if (value === '-' || value === '') return ({})
+  return { [propertyName]: getSequenceValue(value, sequenceProps) }
+}
+
+export const findHeadings = propertyNames => {
+  const { h1Matches, sequence } = propertyNames
   return new Array(6).fill(null).map((_, i) => {
@@ -152,0 +183,0 @@ const findLetter = numToLetterMap[h1Matches - i]

src/utils/var.js

 'use strict'
 
-import { MEDIA } from '../config'
+import { MEDIA } from '../defaultConfig'
 import { CONFIG, CSS_VARS } from '../factory'
 import { isObjectLike } from './object'
 
+const ENV = process.env.NODE_ENV
+
 export const setVariables = (result, key) => {
@@ -21,3 +23,3 @@ // CSS_VARS[result.var] =
 
-export const applySequenceVars = (props, mediaName) => {
+export const applySequenceVars = (props, mediaName, options = {}) => {
   const unit = props.unit || CONFIG.UNIT.default
@@ -29,5 +31,8 @@ const { sequence, scales } = props
     const value = (props.type === 'duration' ? sequence[key].val : scales[key]) + unit
-    const query = MEDIA[mediaName]
 
     if (mediaName) {
+      const query = MEDIA[mediaName]
+      if (!query) {
+        if ((ENV === 'test' || ENV === 'development') && CONFIG.verbose) console.warn('Can\'t find query ', query)
+      }
       let underMediaQuery = CSS_VARS[`@media ${query}`]
@@ -38,6 +43,10 @@ if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
     } else {
-      CSS_VARS[item.variable + '-default'] = value
-      CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
+      if (options.useDefault === false) {
+        CSS_VARS[item.variable] = value
+      } else {
+        CSS_VARS[item.variable + '-default'] = value
+        CSS_VARS[item.variable] = `var(${item.variable + '-default'})`
+      }
     }
   }
 }

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

41121

increased by7.98%

Lines of code

1269

increased by7%

Worsened metrics

Number of low supply chain risk alerts

5

increased by25%

No dependency changes