@symbo.ls/scratch 2.11.225 → 2.11.227

package/src/system/spacing.js

@@ -5,36 +5,45 @@ import { isString, merge } from '@domql/utils'
 
 import { getActiveConfig } from '../factory.js'
 import {
+  applyMediaSequenceVars,
   applySequenceVars,
   generateSequence,
   getSequenceValuePropertyPair
 } from '../utils'
 
-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 } = sequenceProps
-
-      merge(mediaProps, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      })
-
-      generateSequence(mediaProps)
-
-      const mediaName = prop.slice(1)
-      applySequenceVars(mediaProps, mediaName)
-    }
+const runThroughMedia = FACTORY => {
+  for (const prop in FACTORY) {
+    const mediaProps = FACTORY[prop]
+
+    const isMediaName = prop.slice(0, 1) === '@'
+    if (!isMediaName) continue
+
+    const {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit
+    } = FACTORY
+
+    merge(mediaProps, {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit,
+      sequence: {},
+      scales: {},
+      templates: {},
+      vars: {}
+    })
+
+    generateSequence(mediaProps)
+    applyMediaSequenceVars(FACTORY, prop)
   }
 }
 
@@ -127,7 +136,7 @@ export const getSpacingBasedOnRatio = (props, propertyName, val) => {
       })
     }
 
-    applySequenceVars(sequenceProps, null, { useDefault: false })
+    applySequenceVars(sequenceProps, { useDefault: false })
 
     return getSpacingByKey(value, propertyName, sequenceProps)
   }

package/src/system/typography.js

@@ -4,45 +4,62 @@ import { merge } from '@domql/utils'
 import { getActiveConfig } from '../factory.js'
 
 import {
+  applyMediaSequenceVars,
   applySequenceVars,
   findHeadings,
   generateSequence,
   getSequenceValuePropertyPair
 } from '../utils'
 
-export const runThroughMedia = props => {
+export const runThroughMedia = FACTORY => {
   const CONFIG = getActiveConfig()
   const { TYPOGRAPHY, MEDIA } = CONFIG
 
-  for (const prop in props) {
-    const mediaProps = props[prop]
-    if (prop.slice(0, 1) === '@') {
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = props
+  for (const prop in FACTORY) {
+    const isPropMedia = prop.slice(0, 1) === '@'
+    const mediaValue = FACTORY[prop]
+    if (!isPropMedia) continue
 
-      merge(mediaProps, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      })
+    const { mediaRegenerate } = FACTORY
+    const mediaName = prop.slice(1)
 
-      generateSequence(mediaProps)
+    const {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit
+    } = FACTORY
 
-      const mediaName = prop.slice(1)
-      applySequenceVars(mediaProps, mediaName)
+    merge(mediaValue, {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit,
+      sequence: {},
+      scales: {},
+      templates: {},
+      vars: {}
+    })
 
-      const query = MEDIA[mediaName]
-      TYPOGRAPHY.templates[`@media screen and ${query}`] = {
-        fontSize: mediaProps.base / TYPOGRAPHY.browserDefault + unit
-      }
+    const query = MEDIA[mediaName]
+    TYPOGRAPHY.templates[`@media screen and ${query}`] = {
+      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
+    }
+
+    if (!mediaRegenerate) {
+      applyMediaSequenceVars(FACTORY, prop)
+      continue
     }
+
+    generateSequence(mediaValue)
+
+    applyMediaSequenceVars(FACTORY, prop)
   }
 }
 

package/src/transforms/index.js

@@ -46,11 +46,19 @@ export const transformTextStroke = stroke => {
   }).join(' ')
 }
 
-export const transformShadow = (sh, globalTheme) => {
-  return sh.split(',').map(shadow => getShadow(shadow, globalTheme)).join(',')
-}
+export const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
 
-export const transformBoxShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
+export const transformBoxShadow = shadows => shadows.split('|').map(shadow => {
+  return shadow.split(', ').map(v => {
+    v = v.trim()
+    if (v.slice(0, 2) === '--') return `var(${v})`
+    if (getColor(v).length > 2) return getColor(v)
+    if (v.includes('px') || v.slice(-2) === 'em') return v
+    const arr = v.split(' ')
+    if (!arr.length) return v
+    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
+  }).join(' ')
+}).join(',')
 
 export const transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG = getActiveConfig()

package/src/utils/sequence.js

@@ -34,50 +34,88 @@ export const numToLetterMap = {
 }
 
 const setSequenceValue = (props, sequenceProps) => {
-  const { key, variable, value, scaling, index } = props
+  const { key, variable, value, scaling, index, scalingVariable } = props
   sequenceProps.sequence[key] = {
     key,
     decimal: ~~(value * 100) / 100,
     val: ~~(value),
     scaling,
     index,
+    scalingVariable,
     variable
   }
   sequenceProps.scales[key] = scaling
   sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
+export const setScalingVar = (key, sequenceProps) => {
+  const { type } = sequenceProps
+  if (key === 0) return '1em'
+
+  const prefix = '--' + (type && type.replace('.', '-'))
+  const ratioVar = `${prefix}-ratio`
+
+  if (key > 0) {
+    const prevLetterKey = numToLetterMap[key - 1]
+    return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`
+  }
+  if (key < 0) {
+    const nextLetterKey = numToLetterMap[key + 1]
+    return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`
+  }
+}
+
+export const setSubScalingVar = (index, arr, variable, sequenceProps) => {
+  const { type } = sequenceProps
+  const skipMiddle = index === 2 && arr.length === 2
+  const indexMapWithLength = skipMiddle ? index + 1 : index
+
+  const prefix = '--' + (type && type.replace('.', '-'))
+  const subRatioVarPrefix = `${prefix}-sub-ratio-`
+
+  return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`
+}
+
+export const getSubratioDifference = (base, ratio) => {
+  const diff = (base * ratio - base)
+  const subRatio = diff / 1.618
+  const first = (base * ratio - subRatio)
+  const second = base + subRatio
+  const middle = (first + second) / 2
+  return [first, middle, second]
+}
+
+export const getSubratio = (base, ratio) => {
+  return getSubratioDifference(base, ratio).map(v => v / base)
+}
+
 export const generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props
 
   const next = value * ratio
-  const diff = next - value
-  const smallscale = diff / 1.618
-
-  const valueRounded = ~~(value)
-  const nextRounded = ~~(next)
-  const diffRounded = nextRounded - valueRounded
+  const diffRounded = ~~next - ~~value
 
-  let arr = []
-  const first = next - smallscale
-  const second = value + smallscale
-  const middle = (first + second) / 2
+  let arr
+  const [first, middle, second] = getSubratioDifference(value, ratio)
   if (diffRounded > 16) arr = [first, middle, second]
   else arr = [first, second]
 
-  arr.map((v, k) => {
+  arr.forEach((v, k) => {
     const scaling = ~~(v / base * 1000) / 1000
     const newVar = variable + (k + 1)
+    const newIndex = index + (k + 1) / 10
+    const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps)
 
     const props = {
       key: key + (k + 1),
       variable: newVar,
       value: v,
       scaling,
-      index: index + (k + 1) / 10
+      scalingVariable,
+      index: newIndex
     }
 
-    return setSequenceValue(props, sequenceProps)
+    setSequenceValue(props, sequenceProps)
   })
 }
 
@@ -106,6 +144,7 @@ export const generateSequence = (sequenceProps) => {
     const value = switchSequenceOnNegative(key, base, ratio)
     const scaling = ~~(value / base * 100) / 100
     const variable = prefix + letterKey
+    const scalingVariable = setScalingVar(key, sequenceProps)
 
     const props = {
       key: letterKey,
@@ -113,6 +152,7 @@ export const generateSequence = (sequenceProps) => {
       value,
       base,
       scaling,
+      scalingVariable,
       ratio,
       index: key
     }

package/src/utils/var.js

@@ -2,6 +2,7 @@
 
 import { isObjectLike } from '@domql/utils'
 import { getActiveConfig } from '../factory.js'
+import { getSubratio } from './sequence.js'
 
 export const setVariables = (result, key) => {
   const CONFIG = getActiveConfig()
@@ -14,33 +15,95 @@ export const setVariables = (result, key) => {
   }
 }
 
-export const applySequenceVars = (props, mediaName, options = {}) => {
+export const applyGlobalVars = (vars, obj, options) => {
   const CONFIG = getActiveConfig()
-  const { UNIT, MEDIA, TIMING, CSS_VARS } = CONFIG
+  const { UNIT } = CONFIG
+  const unit = obj.unit || UNIT.default
+  const { base, ratio, type } = obj
+  const prefix = '--' + (type && type.replace('.', '-'))
+  vars[`${prefix}-base`] = base
+  vars[`${prefix}-unit`] = unit
+  const ratioVar = `${prefix}-ratio`
+  vars[ratioVar] = ratio
+
+  const [first, middle, second] = getSubratio(base, ratio)
+  vars[`${prefix}-sub-ratio-1`] = first
+  vars[`${prefix}-sub-ratio-2`] = middle
+  vars[`${prefix}-sub-ratio-3`] = second
+}
+
+export const applySequenceVars = (FACTORY, options = {}) => {
+  const CONFIG = getActiveConfig()
+  const { UNIT, TIMING, CSS_VARS } = CONFIG
+
+  const unit = FACTORY.unit || UNIT.default
+  const { mediaRegenerate, sequence, scales } = FACTORY
 
-  const unit = props.unit || UNIT.default
-  const { sequence, scales } = props
+  if (!mediaRegenerate) {
+    applyGlobalVars(CSS_VARS, FACTORY, options)
+  }
 
   for (const key in sequence) {
     const item = sequence[key]
-    const value = (props.type === TIMING.type ? sequence[key].val : scales[key]) + unit
-
-    if (mediaName) {
-      const query = MEDIA[mediaName]
-      if (!query) {
-        if (CONFIG.verbose) console.warn('Can\'t find query ', query)
-      }
-      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
+
+    const value = (FACTORY.type === TIMING.type
+      ? sequence[key].val
+      : scales[key]
+    ) + unit
+
+    if (!mediaRegenerate) {
+      CSS_VARS[item.variable + '_default'] = value
+      CSS_VARS[item.variable] = item.scalingVariable
+      continue
+    }
+
+    if (options.useDefault === false) {
+      CSS_VARS[item.variable] = value
     } else {
-      if (options.useDefault === false) {
-        CSS_VARS[item.variable] = value
-      } else {
-        CSS_VARS[item.variable + '_default'] = value
-        CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
-      }
+      CSS_VARS[item.variable + '_default'] = value
+      CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
     }
   }
 }
+
+export const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
+  const CONFIG = getActiveConfig()
+  const { UNIT, MEDIA, TIMING, CSS_VARS } = CONFIG
+
+  const mediaName = media.slice(1)
+
+  const unit = FACTORY.unit || UNIT.default
+  const { mediaRegenerate } = FACTORY
+  const { sequence, scales } = FACTORY[media]
+
+  const query = MEDIA[mediaName]
+  if (!query && CONFIG.verbose) console.warn('Can\'t find media query ', query)
+
+  // if mediaRegenerate is not applied ratio and and sequence sizes
+  // will be applied using CSS vars
+  if (!mediaRegenerate) {
+    let underMediaQuery = CSS_VARS[`@media ${query}`]
+    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
+    applyGlobalVars(underMediaQuery, FACTORY[media], options)
+    return
+  }
+
+  for (const key in sequence) {
+    const item = sequence[key]
+
+    const value = (FACTORY.type === TIMING.type
+      ? sequence[key].val
+      : scales[key]
+    ) + unit
+
+    if (!query && CONFIG.verbose) console.warn('Can\'t find query ', query)
+
+    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
+  }
+
+  console.log(CSS_VARS)
+}