@symbo.ls/scratch 3.8.9 → 3.14.0

package/src/system/timing.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { toCamelCase } from '@symbo.ls/smbls-utils'
+import { toCamelCase } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 import {
   applySequenceVars,
   generateSequence,
   getSequenceValuePropertyPair
-} from '../utils'
+} from '../utils/index.js'
 
 export const applyTimingSequence = () => {
   const CONFIG = getActiveConfig()

package/src/system/typography.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { merge } from '@domql/utils'
+import { merge } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 
 import {
@@ -9,7 +9,7 @@ import {
   findHeadings,
   generateSequence,
   getSequenceValuePropertyPair
-} from '../utils'
+} from '../utils/index.js'
 
 export const runThroughMedia = FACTORY => {
   const CONFIG = getActiveConfig()
@@ -35,14 +35,23 @@ export const runThroughMedia = FACTORY => {
       unit
     })
 
+    const VIEWPORT_UNITS = new Set(['vw', 'vh', 'vmin', 'vmax', 'svw', 'svh', 'lvw', 'lvh', 'dvw', 'dvh'])
+    const inheritedUnit = mediaValue.unit || unit
+    const mediaUnit = (!mediaValue.unit && VIEWPORT_UNITS.has(unit)) ? 'rem' : inheritedUnit
     const query = MEDIA[mediaName]
     const media =
       '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
     TYPOGRAPHY.templates[media] = {
-      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
+      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + mediaUnit
     }
 
     if (!mediaRegenerate) {
+      merge(mediaValue, {
+        sequence: {},
+        scales: {},
+        vars: {}
+      })
+      generateSequence(mediaValue)
       applyMediaSequenceVars(FACTORY, prop)
       continue
     }

package/src/transforms/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isString, isObject, exec } from '@domql/utils'
-import { getActiveConfig } from '../factory'
+import { isString, isObject, exec } from '@symbo.ls/utils'
+import { getActiveConfig } from '../factory.js'
 import {
   getSpacingByKey,
   getColor,
@@ -12,7 +12,7 @@ import {
   getSpacingBasedOnRatio,
   checkIfBoxSize,
   splitSpacedValue
-} from '../system'
+} from '../system/index.js'
 import {
   getFnPrefixAndValue,
   isResolvedColor,
@@ -20,7 +20,7 @@ import {
   CSS_NATIVE_COLOR_REGEX,
   splitTopLevelCommas,
   parseColorToken
-} from '../utils'
+} from '../utils/index.js'
 
 const BORDER_STYLES = new Set([
   'none', 'hidden', 'dotted', 'dashed', 'solid', 'double',

package/src/utils/color.js

@@ -6,7 +6,7 @@ import {
   isString,
   isNumber,
   isNotProduction
-} from '@domql/utils'
+} from '@symbo.ls/utils'
 
 export const colorStringToRgbaArray = color => {
   if (color === '') return [0, 0, 0, 0]
@@ -175,6 +175,7 @@ export const isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45
 export const CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/
 
 // Regex for Symbols color token: colorName[.opacity][+/-/=tone]
+// Supports hyphenated names like 'highlight-reversed', 'canvas-card', 'line-highlight'
 // +N or -N = relative shade, =N = absolute lightness percentage
 const COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/
 

package/src/utils/font.js

@@ -16,6 +16,9 @@ export const getDefaultOrFirstKey = (LIBRARY, key) => {
 }
 
 export const getFontFormat = (url) => {
+  // Tolerate missing urls — a font weight entry without a `url` should produce
+  // no `format(...)` hint rather than crashing the entire CSS pipeline.
+  if (typeof url !== 'string' || !url) return null
   const ext = url.split(/[#?]/)[0].split('.').pop().trim()
   if (['woff2', 'woff', 'ttf', 'otf', 'eot'].includes(ext)) return ext
   return null
@@ -30,7 +33,10 @@ export const setFontImport = (url) => `@import url('${url}');`
 export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
 
 export const setCustomFont = (name, url, weight, options = {}) => {
-  const urls = Array.isArray(url) ? url : [url]
+  // Filter out undefined / empty entries so a missing weight URL doesn't
+  // emit a broken `url('undefined')` rule or crash on .split downstream.
+  const rawUrls = Array.isArray(url) ? url : [url]
+  const urls = rawUrls.filter((u) => typeof u === 'string' && u)
   const srcList = urls.map((u) => {
     const format = getFontFormat(u)
     const formatStr = format ? ` format('${format}')` : ''

package/src/utils/sequence.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isString } from '@domql/utils'
-import { toDashCase } from '@symbo.ls/smbls-utils'
+import { isString } from '@symbo.ls/utils'
+import { toDashCase } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 import { CSS_UNITS, isScalingUnit } from './unit.js'
 import { isCSSVar } from './color.js'
@@ -47,7 +47,8 @@ const setSequenceValue = (props, sequenceProps) => {
     variable
   }
   sequenceProps.scales[key] = scaling
-  sequenceProps.vars[variable] = scaling + sequenceProps.unit
+  const varUnit = VIEWPORT_UNITS.has(sequenceProps.unit) ? 'rem' : sequenceProps.unit
+  sequenceProps.vars[variable] = scaling + varUnit
 }
 
 export const getFnPrefixAndValue = (val) => {
@@ -57,14 +58,18 @@ export const getFnPrefixAndValue = (val) => {
   return [prefix, value]
 }
 
+const VIEWPORT_UNITS = new Set(['vw', 'vh', 'vmin', 'vmax', 'svw', 'svh', 'lvw', 'lvh', 'dvw', 'dvh'])
+
 export const setScalingVar = (key, sequenceProps) => {
-  const { base, type, unit } = sequenceProps
+  const { base, type, unit: rawUnit } = sequenceProps
+  const unit = VIEWPORT_UNITS.has(rawUnit) ? 'rem' : rawUnit
 
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit
 
   if (key === 0) return defaultVal
 
-  const prefix = '--' + (type && type.replace('.', '-'))
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
+  const prefix = '--' + vp + (type && type.replace('.', '-'))
   const ratioVar = `${prefix}-ratio`
 
   if (key > 0) {
@@ -73,6 +78,15 @@ export const setScalingVar = (key, sequenceProps) => {
   }
   if (key < 0) {
     const nextLetterKey = numToLetterMap[key + 1]
+    const absKey = Math.abs(key)
+    const phiPow = Math.pow(PHI, 2 * absKey)
+    const prevAscKey = numToLetterMap[absKey]
+    // Clamp: max(current / ratio, normalized * ratio^n / phi^2n)
+    // current chain: A / ratio^n
+    // normalized: A * ratio^n / phi^(2n) = ASC mirror / phi^(2n)
+    if (prevAscKey) {
+      return `max(calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar})), calc(var(${prefix}-${prevAscKey}) / ${phiPow.toFixed(4)}))`
+    }
     return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`
   }
 }
@@ -82,7 +96,8 @@ export const setSubScalingVar = (index, arr, variable, sequenceProps) => {
   const skipMiddle = index === 2 && arr.length === 2
   const indexMapWithLength = skipMiddle ? index + 1 : index
 
-  const prefix = '--' + (type && type.replace('.', '-'))
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
+  const prefix = '--' + vp + (type && type.replace('.', '-'))
   const subRatioVarPrefix = `${prefix}-sub-ratio-`
 
   return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`
@@ -136,24 +151,25 @@ export const generateSubSequence = (props, sequenceProps) => {
   })
 }
 
+const PHI = 1.618
+
 const switchSequenceOnNegative = (key, base, ratio) => {
-  // const values = Object.values(SEQUENCE)
-  // const index = values.indexOf(ratio)
-  // const diffRatio = ratio / SPACING.ratio
-  // const total = values[values.length - 1] - values[0]
-  // const avg = total / 2
-  // const diff = avg - ratio
-  // const scale = total / ratio
-  // const finalDiff = avg + avg / diffRatio
-
-  // if (key < 0) return base * Math.pow(avg, key)
-  return base * Math.pow(ratio, key)
+  if (key >= 0) return base * Math.pow(ratio, key)
+
+  // DESC: clamp between current and normalized to preserve proportions
+  // Below golden ratio: use current (1/ratio^n) — nothing changes
+  // Above golden ratio: use normalized (ratio^n / phi^2n) — proportion stays constant
+  const absKey = Math.abs(key)
+  const current = base * Math.pow(ratio, key)                          // base / ratio^n
+  const normalized = base * Math.pow(ratio, absKey) / Math.pow(PHI, 2 * absKey) // base * ratio^n / phi^(2n)
+  return Math.max(current, normalized)
 }
 
 export const generateSequence = (sequenceProps) => {
   const { type, base, ratio, range, subSequence } = sequenceProps
   const n = Math.abs(range[0]) + Math.abs(range[1])
-  const prefix = '--' + (type && type.replace('.', '-')) + '-'
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
+  const prefix = '--' + vp + (type && type.replace('.', '-')) + '-'
 
   for (let i = 0; i <= n; i++) {
     const key = range[1] - i
@@ -204,7 +220,8 @@ export const generateSequencePosition = (sequenceProps, position = 0) => {
 
   const value = base * Math.pow(ratio, index)
   const scaling = ~~((value / base) * 100) / 100
-  const prefix = '--' + (type && type.replace('.', '-')) + '-'
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
+  const prefix = '--' + vp + (type && type.replace('.', '-')) + '-'
   const variable = prefix + letterKey
   const scalingVariable = setScalingVar(index, sequenceProps)
 
@@ -256,7 +273,8 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   ]
   if (skipArr.includes(value)) return value
 
-  const prefix = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
+  const prefix = `--${vp}${toDashCase(sequenceProps.type.replace('.', '-'))}-`
   const letterVal = value.toUpperCase()
   const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
   let absValue = isNegative ? letterVal.slice(1) : letterVal
@@ -316,15 +334,14 @@ export const getSequenceValueBySymbols = (value, sequenceProps) => {
   )
   if (!mathArr.length) return value
 
-  return mathArr
-    .map((symbol) => {
-      const valuesArr = value.split(symbol + ' ').map((v) => v.trim())
-      const transformedValues = valuesArr.map((v) => {
-        return getSequenceValue(v, sequenceProps)
-      })
-      return transformedValues.join(' ' + symbol + ' ')
-    })
-    .join('')
+  // Tokenize the expression preserving all operators, then resolve each token
+  const symbolRegex = /(\s*[+\-*/,]\s*)/
+  const tokens = value.split(symbolRegex)
+  return tokens.map((token) => {
+    const trimmed = token.trim()
+    if (!trimmed || ['+', '-', '*', '/', ','].includes(trimmed)) return token
+    return getSequenceValue(trimmed, sequenceProps)
+  }).join('')
 }
 
 export const getSequenceValuePropertyPair = (

package/src/utils/sprite.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isArray, isNotProduction, isString } from '@domql/utils'
-import { getActiveConfig } from '../factory'
+import { isArray, isNotProduction, isString } from '@symbo.ls/utils'
+import { getActiveConfig } from '../factory.js'
 
 const isDev = isNotProduction()
 
@@ -11,8 +11,8 @@ export const generateSprite = (icons) => {
   let sprite = ''
 
   for (const key in icons) {
-    if (CONFIG.__svg_cache[key]) continue
-    else CONFIG.__svg_cache[key] = true
+    if (CONFIG.__svgCache[key]) continue
+    else CONFIG.__svgCache[key] = true
     sprite += icons[key]
   }
 
@@ -75,5 +75,16 @@ export const convertSvgToSymbol = (key, code) => {
   symbol = symbol.replace(/width="[^"]*"/, '')
   symbol = symbol.replace(/height="[^"]*"/, '')
   symbol = symbol.replace('</svg', '</symbol')
+  symbol = expandSvgSelfClosing(symbol)
   return symbol
 }
+
+// SVG elements that are void in SVG but not in HTML.
+// HTML parser treats <line .../> as <line ...> (ignores /), nesting siblings.
+// Fix: expand self-closing tags to explicit open+close for HTML parser compat.
+const SVG_VOID_TAGS = 'line|circle|ellipse|rect|polyline|polygon|path|stop|use|image'
+const SVG_SELF_CLOSING_RE = new RegExp(
+  `<(${SVG_VOID_TAGS})\\b([^>]*?)\\s*/>`,
+  'g'
+)
+const expandSvgSelfClosing = (str) => str.replace(SVG_SELF_CLOSING_RE, '<$1$2></$1>')

package/src/utils/var.js

@@ -1,13 +1,13 @@
 'use strict'
 
-import { isObjectLike } from '@domql/utils'
+import { isObjectLike } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 import { getSubratio } from './sequence.js'
 import { isScalingUnit } from './unit.js'
 
 export const setVariables = (result, key) => {
   const CONFIG = getActiveConfig()
-  const { CSS_VARS } = CONFIG
+  const { cssVars: CSS_VARS } = CONFIG
   if (isObjectLike(result.value)) {
     // TODO: handle nested object variables
   } else {
@@ -20,7 +20,8 @@ export const applySequenceGlobalVars = (vars, obj, options) => {
   const { unit: UNIT } = CONFIG
   const unit = obj.unit || UNIT.default
   const { base, ratio, type } = obj
-  const prefix = '--' + (type && type.replace('.', '-'))
+  const vp = obj.varPrefix ? obj.varPrefix + '-' : ''
+  const prefix = '--' + vp + (type && type.replace('.', '-'))
   vars[`${prefix}-base`] = base
   vars[`${prefix}-unit`] = unit
   const ratioVar = `${prefix}-ratio`
@@ -36,11 +37,15 @@ export const applySequenceGlobalVars = (vars, obj, options) => {
   // vars[`${prefix}-sub-ratio-3`] = second
 }
 
+// Viewport units are applied to root fontSize only; tokens use 'rem' instead
+const VIEWPORT_UNITS = new Set(['vw', 'vh', 'vmin', 'vmax', 'svw', 'svh', 'lvw', 'lvh', 'dvw', 'dvh'])
+
 export const applySequenceVars = (FACTORY, options = {}) => {
   const CONFIG = getActiveConfig()
-  const { unit: UNIT, timing: TIMING, CSS_VARS } = CONFIG
+  const { unit: UNIT, timing: TIMING, cssVars: CSS_VARS } = CONFIG
 
-  const unit = FACTORY.unit || UNIT.default
+  const rawUnit = FACTORY.unit || UNIT.default
+  const unit = VIEWPORT_UNITS.has(rawUnit) ? 'rem' : rawUnit
   const { mediaRegenerate, sequence, scales } = FACTORY
 
   if (!mediaRegenerate) {
@@ -72,13 +77,15 @@ export const applySequenceVars = (FACTORY, options = {}) => {
 
 export const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
   const CONFIG = getActiveConfig()
-  const { unit: UNIT, media: MEDIA, CSS_VARS } = CONFIG
+  const { unit: UNIT, media: MEDIA, cssVars: CSS_VARS } = CONFIG
 
   const mediaName = media.slice(1)
 
-  const unit = FACTORY.unit || UNIT.default
+  const mediaConfig = FACTORY[media]
+  const rawMediaUnit = mediaConfig.unit || FACTORY.unit || UNIT.default
+  const unit = VIEWPORT_UNITS.has(rawMediaUnit) ? 'rem' : rawMediaUnit
   const { mediaRegenerate } = FACTORY
-  const { sequence, scales } = FACTORY[media]
+  const { sequence, scales } = mediaConfig
 
   const query = MEDIA[mediaName]
   if (!query && CONFIG.verbose) console.warn('Can\'t find media query ', query)
@@ -88,7 +95,18 @@ export const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
   if (!mediaRegenerate) {
     let underMediaQuery = CSS_VARS[`@media ${query}`]
     if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
-    applySequenceGlobalVars(underMediaQuery, FACTORY[media], options)
+    applySequenceGlobalVars(underMediaQuery, mediaConfig, options)
+
+    // If unit changed, override token vars with new unit values
+    const parentUnit = FACTORY.unit || UNIT.default
+    if (unit !== parentUnit && sequence) {
+      for (const key in sequence) {
+        const item = sequence[key]
+        const value = scales[key] + unit
+        underMediaQuery[item.variable + '_default'] = value
+        underMediaQuery[item.variable] = value
+      }
+    }
     return
   }