@symbo.ls/scratch 3.8.8 → 3.14.0

package/src/system/theme.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getColor } from './color'
+import { getColor } from './color.js'
 import { getActiveConfig } from '../factory.js'
 import { isCSSVar } from '../utils/color.js'
 
@@ -9,7 +9,7 @@ import {
   isString,
   isObjectLike,
   isArray
-} from '@domql/utils'
+} from '@symbo.ls/utils'
 
 // Common CSS named colors — used to distinguish valid CSS color names
 // from unresolved design-system tokens (e.g. 'blackRussian', 'grayMid')
@@ -43,6 +43,20 @@ const CSS_NAMED_COLORS = new Set([
   'whitesmoke', 'yellowgreen', 'rebeccapurple'
 ])
 
+// A theme param is treated as a color-producing property when its name
+// contains one of these substrings. Mirrors the check in `setThemeValue`
+// so the broken-scheme pre-scan skips non-color props like `borderStyle`,
+// `boxShadow`, `backdropFilter`, `cursor`, etc. that would otherwise trip
+// the `/^[a-z][a-zA-Z]+$/` heuristic with values like 'solid' or 'pointer'.
+const COLOR_PARAM_TOKENS = ['color', 'Color', 'background', 'Background', 'fill', 'Fill', 'stroke', 'Stroke']
+
+const isColorParam = (param) => {
+  for (let i = 0; i < COLOR_PARAM_TOKENS.length; i++) {
+    if (param.includes(COLOR_PARAM_TOKENS[i])) return true
+  }
+  return false
+}
+
 const setThemeValue = theme => {
   const value = {}
   const { state, media, helpers, ...rest } = theme
@@ -159,7 +173,8 @@ export const setTheme = (val, key) => {
 
   const { state, media, helpers } = val
   const value = setThemeValue(val, key)
-  const CSSvar = `--theme-${key}`
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+  const CSSvar = `--${vp}theme-${key}`
 
   setSelectors(val, value)
   setMedia(val, value)
@@ -185,9 +200,9 @@ const keySetters = { // eslint-disable-line
  * @param {Object} CONFIG - active config
  */
 const generateAutoVars = (schemes, varPrefix, CONFIG) => {
-  const { CSS_VARS } = CONFIG
-  if (!CONFIG.CSS_MEDIA_VARS) CONFIG.CSS_MEDIA_VARS = {}
-  const MEDIA_VARS = CONFIG.CSS_MEDIA_VARS
+  const { cssVars: CSS_VARS } = CONFIG
+  if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {}
+  const MEDIA_VARS = CONFIG.cssMediaVars
   const globalTheme = CONFIG.globalTheme !== undefined ? CONFIG.globalTheme : 'auto'
 
   const result = {}
@@ -198,23 +213,28 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
     if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k)
   }
 
-  // Pre-scan: detect schemes with unresolvable color values
-  // If any color in a scheme fails to resolve, skip the ENTIRE scheme
-  // to avoid partial theme application (e.g. white text without dark background)
+  // Pre-scan: detect schemes with unresolvable color values. If any color in
+  // a scheme fails to resolve, skip the ENTIRE scheme to avoid partial theme
+  // application (e.g. white text without a dark background). Runs regardless
+  // of `globalTheme` because every scheme is always emitted now.
+  //
+  // Only check params whose names indicate colors — otherwise legitimate
+  // non-color values like `borderStyle: 'solid'` or `cursor: 'pointer'`
+  // match the `/^[a-z][a-zA-Z]+$/` heuristic and falsely break the scheme,
+  // which would silently drop the entire theme's CSS vars.
   const brokenSchemes = new Set()
-  if (globalTheme === 'auto') {
-    for (const param of allKeys) {
-      const symb = param.slice(0, 1)
-      if (symb === '@' || symb === '.' || symb === ':') continue
-      for (const scheme in schemes) {
-        if (brokenSchemes.has(scheme)) continue
-        const val = schemes[scheme]?.[param]
-        if (val === undefined) continue
-        const color = getColor(val, `@${scheme}`)
-        if (color === undefined) continue
-        if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
-          brokenSchemes.add(scheme)
-        }
+  for (const param of allKeys) {
+    const symb = param.slice(0, 1)
+    if (symb === '@' || symb === '.' || symb === ':') continue
+    if (!isColorParam(param)) continue
+    for (const scheme in schemes) {
+      if (brokenSchemes.has(scheme)) continue
+      const val = schemes[scheme]?.[param]
+      if (val === undefined) continue
+      const color = getColor(val, `@${scheme}`)
+      if (color === undefined) continue
+      if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
+        brokenSchemes.add(scheme)
       }
     }
   }
@@ -242,51 +262,53 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
       }
       result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG)
     } else if (symb !== '@' && symb !== '.' && symb !== ':') {
-      // Regular CSS param — generate auto-switching var
-      const autoVar = `--theme-${varPrefix}-${param}`
-
-      if (globalTheme === 'auto') {
-        let fallbackColor
-        for (const scheme in schemes) {
-          if (brokenSchemes.has(scheme)) continue
-          const val = schemes[scheme]?.[param]
-          if (val === undefined) continue
-          const color = getColor(val, `@${scheme}`)
-          if (color === undefined) continue
-
-          // Use 'light' scheme (or first resolved) as base fallback
-          if (scheme === 'light' || fallbackColor === undefined) {
-            fallbackColor = color
-          }
-
-          // [data-theme] selector for ALL schemes (custom + standard)
-          const selector = `[data-theme="${scheme}"]`
-          if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {}
-          MEDIA_VARS[selector][autoVar] = color
-
-          // prefers-color-scheme media query only for dark/light
-          if (scheme === 'dark' || scheme === 'light') {
-            const mq = `@media (prefers-color-scheme: ${scheme})`
-            if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {}
-            MEDIA_VARS[mq][autoVar] = color
-          }
-        }
+      // Regular CSS param — generate auto-switching var.
+      //
+      // We always emit the FULL switch table — `:root` fallback + one
+      // rule per scheme on `[data-theme="X"]` + `@media
+      // (prefers-color-scheme: dark|light)` — regardless of whether the
+      // user provided an initial `globalTheme`. A forced initial theme
+      // only decides which value lands in the `:root` fallback; runtime
+      // switching (via `changeGlobalTheme` → `data-theme` attribute)
+      // must always work, and OS preference must still drive auto mode.
+      const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+      const autoVar = `--${vp}theme-${varPrefix}-${param}`
+      const forced = globalTheme && globalTheme !== 'auto'
+        ? String(globalTheme).replace(/^'|'$/g, '')
+        : null
+
+      let fallbackColor
+      for (const scheme in schemes) {
+        if (brokenSchemes.has(scheme)) continue
+        const val = schemes[scheme]?.[param]
+        if (val === undefined) continue
+        const color = getColor(val, `@${scheme}`)
+        if (color === undefined) continue
 
-        // Set fallback default (light or first scheme) so the variable
-        // always resolves even without a matching media query
-        if (fallbackColor !== undefined) {
-          CSS_VARS[autoVar] = fallbackColor
+        // Pick the `:root` fallback: prefer the user's forced scheme if
+        // any, else `light`, else the first resolved scheme.
+        if ((forced && scheme === forced) ||
+            (!forced && (scheme === 'light' || fallbackColor === undefined))) {
+          fallbackColor = color
         }
-      } else {
-        // Force specific theme — set non-suffixed var directly
-        const forced = String(globalTheme).replace(/^'|'$/g, '')
-        const source = schemes[forced]?.[param]
-        if (source !== undefined) {
-          const color = getColor(source, `@${forced}`)
-          if (color !== undefined) CSS_VARS[autoVar] = color
+
+        // `[data-theme="X"]` selector — works for any scheme incl. custom.
+        const selector = `[data-theme="${scheme}"]`
+        if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {}
+        MEDIA_VARS[selector][autoVar] = color
+
+        // `prefers-color-scheme` media query only for standard light/dark.
+        if (scheme === 'dark' || scheme === 'light') {
+          const mq = `@media (prefers-color-scheme: ${scheme})`
+          if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {}
+          MEDIA_VARS[mq][autoVar] = color
         }
       }
 
+      if (fallbackColor !== undefined) {
+        CSS_VARS[autoVar] = fallbackColor
+      }
+
       result[param] = `var(${autoVar})`
       result[`.${param}`] = { [param]: result[param] }
     }
@@ -304,7 +326,7 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
 
 export const setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG = getActiveConfig()
-  const { CSS_VARS } = CONFIG
+  const { cssVars: CSS_VARS } = CONFIG
   const theme = { value: val }
   const isTopLevel = !suffix && !prefers
 
@@ -334,7 +356,8 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
         const color = getColor(value, prefers)
         const metaSuffixes = [...new Set([prefers, suffix].filter(v => v).map(v => v.slice(1)))]
         const varmetaSuffixName = metaSuffixes.length ? '-' + metaSuffixes.join('-') : ''
-        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`
+        const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+        const CSSVar = `--${vp}theme-${key}${varmetaSuffixName}-${param}`
         if (CONFIG.useVariable) {
           // Suffixed vars (--theme-key-dark-param) only when opted in
           if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color

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
   }