@symbo.ls/scratch 3.8.8 → 3.14.0

package/src/system/color.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isObject, isArray, isString } from '@domql/utils'
+import { isObject, isArray, isString } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 
 import {
@@ -8,7 +8,7 @@ import {
   getRgbTone,
   isCSSVar,
   parseColorToken
-} from '../utils'
+} from '../utils/index.js'
 
 export const getColor = (value, key, config) => {
   const CONFIG = config || getActiveConfig()
@@ -99,11 +99,21 @@ export const getMediaColor = (value, globalTheme, config) => {
 
   if (isObj && val.value) return getColor(value, `@${globalTheme}`, config)
   else if (isObj) {
+    // Prefer the adaptive var (--color-NAME) when available so runtime theme
+    // switches via [data-theme] actually take effect. Without this, setting
+    // `globalTheme: 'dark'` in config would lock every color to the dark
+    // scheme-specific var (--color-NAME-dark), which never responds to
+    // runtime theme toggles.
+    if (CONFIG.useVariable && val.var) return `var(${val.var})`
     if (globalTheme) return getColor(value, `@${globalTheme}`, config)
     else {
+      // Legacy fallback when adaptive var is unavailable (useVariable: false).
+      // Only @-prefixed keys are scheme variants — skip metadata like `var`.
       const obj = {}
       for (const mediaName in val) {
+        if (mediaName.charCodeAt(0) !== 64 /* @ */) continue
         const query = CONFIG.media[mediaName.slice(1)]
+        if (!query) continue
         const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
         obj[media] = getColor(value, mediaName, config)
       }
@@ -128,7 +138,16 @@ export const setColor = (val, key, suffix) => {
     )) {
       // Handle space-separated format: '--colorName alpha' (e.g. '--gray1 1')
       const parts = rawRef.split(' ')
-      const refColor = CONFIG.color[parts[0]]
+      let refColor = CONFIG.color[parts[0]]
+      // Lazy resolution: composite colors (arrays/objects) often reference
+      // primitives by name. If iteration order processed the composite first,
+      // the primitive is still its raw input — process it now so this
+      // dereference works regardless of key order in CONFIG.color. setEach()
+      // also pre-sorts so primitives go first, but this is a safety net.
+      if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
+        CONFIG.color[parts[0]] = setColor(refColor, parts[0])
+        refColor = CONFIG.color[parts[0]]
+      }
       if (refColor && refColor.value) {
         let rgb = refColor.rgb
         const alpha = parts[1] !== undefined ? parts[1] : '1'
@@ -160,11 +179,10 @@ export const setColor = (val, key, suffix) => {
     }
   }
 
+  // Normalize array shorthand `[lightVal, darkVal]` to scheme-keyed object
+  // so the multi-scheme branch below handles both cases uniformly.
   if (isArray(val)) {
-    return {
-      '@light': setColor(val[0], key, 'light'),
-      '@dark': setColor(val[1], key, 'dark')
-    }
+    val = { '@light': val[0], '@dark': val[1] }
   }
 
   if (isObject(val)) {
@@ -176,17 +194,99 @@ export const setColor = (val, key, suffix) => {
         variant.slice(0, 1) === '@' ? variant.slice(1) : variant
       )
     }
+
+    // Generate a single adaptive `--color-${key}` CSS var so consumers can
+    // write `border-color: var(--color-${key})` and have it switch via
+    // `@media (prefers-color-scheme)` and `[data-theme]` automatically.
+    // Scheme-agnostic: works for @light/@dark plus arbitrary custom schemes
+    // (@ocean, @sunset, etc). Mirrors generateAutoVars() in system/theme.js.
+    //
+    // Without this, getMediaColor() falls into the @media-keyed-object branch
+    // (when globalTheme === 'auto'), which the CSS engine cannot serialize as
+    // a single CSS property value — emitting broken rules like
+    // `.classname borderrightcolor { }`.
+    if (CONFIG.useVariable) {
+      const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+      const adaptiveVar = `--${vp}color-${key}`
+      let fallbackValue
+      const schemeValues = {}
+
+      for (const variant in obj) {
+        if (variant.charCodeAt(0) !== 64 /* @ */) continue
+        const scheme = variant.slice(1)
+        const entry = obj[variant]
+        const value = entry && (entry.value || entry)
+        if (!value || typeof value !== 'string') continue
+        schemeValues[scheme] = value
+        // Prefer 'light' as the :root fallback; otherwise first resolved scheme.
+        if (scheme === 'light' || fallbackValue === undefined) fallbackValue = value
+      }
+
+      if (fallbackValue !== undefined) {
+        CONFIG.cssVars[adaptiveVar] = fallbackValue
+
+        if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {}
+        for (const scheme in schemeValues) {
+          // [data-theme] selector — works for ANY scheme (including custom ones)
+          const sel = `[data-theme="${scheme}"]`
+          if (!CONFIG.cssMediaVars[sel]) CONFIG.cssMediaVars[sel] = {}
+          CONFIG.cssMediaVars[sel][adaptiveVar] = schemeValues[scheme]
+
+          // prefers-color-scheme media query — only browsers know light/dark
+          if (scheme === 'light' || scheme === 'dark') {
+            const mq = `@media (prefers-color-scheme: ${scheme})`
+            if (!CONFIG.cssMediaVars[mq]) CONFIG.cssMediaVars[mq] = {}
+            CONFIG.cssMediaVars[mq][adaptiveVar] = schemeValues[scheme]
+          }
+        }
+
+        // Expose the adaptive var on the wrapper so getColor() returns it
+        // directly when called without an explicit @scheme key.
+        obj.var = adaptiveVar
+      }
+    }
+
     return obj
   }
 
-  const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : '')
-  const colorArr = colorStringToRgbaArray(val.value || val)
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+  const CSSVar = `--${vp}color-${key}` + (suffix ? `-${suffix}` : '')
+
+  // Resolve dot notation: 'green.08' → take green color at 8% opacity
+  let resolvedVal = val.value || val
+  if (isString(resolvedVal) && resolvedVal.includes('.') && !resolvedVal.includes('(')) {
+    const [colorRef, alphaStr] = resolvedVal.split('.')
+    const refColor = CONFIG.color[colorRef]
+    if (refColor && refColor.rgb) {
+      resolvedVal = `rgba(${refColor.rgb}, ${parseFloat('0.' + alphaStr) || 1})`
+    }
+  }
+
+  // Resolve token notation: 'gray-168' / 'gray+50' / 'gray=90' → apply tone to base
+  if (isString(resolvedVal) && !resolvedVal.includes('(') && !resolvedVal.startsWith('#')) {
+    const parsed = parseColorToken(resolvedVal)
+    if (parsed && parsed.name && !parsed.passthrough && !parsed.cssVar) {
+      const refColor = CONFIG.color[parsed.name]
+      if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
+        CONFIG.color[parsed.name] = setColor(refColor, parsed.name)
+      }
+      const baseColor = CONFIG.color[parsed.name]
+      if (baseColor && baseColor.rgb) {
+        let rgb = baseColor.rgb
+        if (parsed.tone) rgb = getRgbTone(rgb, parsed.tone)
+        const alphaVal = parsed.alpha ? parseFloat(parsed.alpha) : 1
+        resolvedVal = `rgba(${rgb}, ${alphaVal})`
+      }
+    }
+  }
+
+  const colorArr = colorStringToRgbaArray(resolvedVal)
   const [r, g, b, a = 1] = colorArr
   const alpha = parseFloat(a.toFixed(2))
   const rgb = `${r}, ${g}, ${b}`
   const value = `rgba(${rgb}, ${alpha})`
 
-  if (CONFIG.useVariable) { CONFIG.CSS_VARS[CSSVar] = value }
+  if (CONFIG.useVariable) { CONFIG.cssVars[CSSVar] = value }
 
   return {
     var: CSSVar,
@@ -213,10 +313,11 @@ export const setGradient = (val, key, suffix) => {
     return obj
   }
 
-  const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : '')
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+  const CSSVar = `--${vp}gradient-${key}` + (suffix ? `-${suffix}` : '')
 
   if (CONFIG.useVariable) {
-    CONFIG.CSS_VARS[CSSVar] = val.value || val
+    CONFIG.cssVars[CSSVar] = val.value || val
   }
 
   return {

package/src/system/document.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { merge } from '@domql/utils'
+import { merge } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
-import { getDefaultOrFirstKey } from '../utils'
+import { getDefaultOrFirstKey } from '../utils/index.js'
 
 export const applyDocument = () => {
   const CONFIG = getActiveConfig()
-  const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG
+  const { document: DOCUMENT, fontFamily: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG
   return merge(DOCUMENT, {
     theme: THEME.document,
     fontFamily: getDefaultOrFirstKey(FONT_FAMILY),

package/src/system/font.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isObject, isArray } from '@domql/utils'
-import { arrayzeValue } from '@symbo.ls/smbls-utils'
+import { isObject, isArray } from '@symbo.ls/utils'
+import { arrayzeValue } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 
 import {
@@ -11,7 +11,7 @@ import {
   setCustomFontMedia,
   setFontImport,
   resolveFileUrl
-} from '../utils'
+} from '../utils/index.js'
 
 export const setFont = (val, key) => {
   const CONFIG = getActiveConfig()
@@ -48,13 +48,13 @@ export const setFont = (val, key) => {
 
 export const getFontFamily = (key, factory) => {
   const CONFIG = getActiveConfig()
-  const { font_family: FONT_FAMILY } = CONFIG
+  const { fontFamily: FONT_FAMILY } = CONFIG
   return getDefaultOrFirstKey(factory || FONT_FAMILY, key)
 }
 
 export const setFontFamily = (val, key) => {
   const CONFIG = getActiveConfig()
-  const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG
+  const { fontFamily: FONT_FAMILY, fontFamilyTypes: FONT_FAMILY_TYPES } = CONFIG
   let { value, type } = val
   if (val.isDefault) FONT_FAMILY.default = key
 

package/src/system/reset.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { deepMerge, merge, overwriteDeep } from '@domql/utils'
+import { deepMerge, merge, overwriteDeep } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
 import { getMediaTheme } from './theme.js'
 
@@ -34,10 +34,31 @@ export const applyReset = (reset = {}) => {
       : {}
     if (RESET.html) overwriteDeep(RESET.html, globalTheme)
 
+    // Generate html fontSize overrides for typography media breakpoints
+    if (TYPOGRAPHY.unit) {
+      const { media: MEDIA } = CONFIG
+      for (const key in TYPOGRAPHY) {
+        if (key.charAt(0) !== '@') continue
+        const mediaTypo = TYPOGRAPHY[key]
+        if (!mediaTypo) continue
+        // Only override html fontSize if this media explicitly changes the unit
+        if (mediaTypo.unit === TYPOGRAPHY.unit || !mediaTypo.unit) continue
+        const mediaUnit = mediaTypo.unit
+        const mediaBase = mediaTypo.base || TYPOGRAPHY.base
+        const mediaBrowserDefault = mediaTypo.browserDefault || TYPOGRAPHY.browserDefault
+        const mediaName = key.slice(1)
+        const query = MEDIA[mediaName]
+        if (!query) continue
+        const mediaKey = '@media ' + (query === 'print' ? query : 'screen and ' + query)
+        if (!RESET[mediaKey]) RESET[mediaKey] = {}
+        if (!RESET[mediaKey].html) RESET[mediaKey].html = {}
+        RESET[mediaKey].html.fontSize = (mediaBase / mediaBrowserDefault) + mediaUnit
+      }
+    }
+
     return deepMerge(merge(RESET, reset), {
       html: {
         position: 'absolute',
-        // overflow: 'hidden',
         width: '100%',
         height: '100%',
         top: '0',
@@ -48,7 +69,9 @@ export const applyReset = (reset = {}) => {
 
         ...globalTheme,
 
-        fontSize: TYPOGRAPHY.browserDefault + 'px',
+        fontSize: TYPOGRAPHY.unit
+          ? (TYPOGRAPHY.base / TYPOGRAPHY.browserDefault) + TYPOGRAPHY.unit
+          : TYPOGRAPHY.browserDefault + 'px',
 
         fontFamily: DOCUMENT.fontFamily,
         lineHeight: DOCUMENT.lineHeight
@@ -71,15 +94,25 @@ export const applyReset = (reset = {}) => {
         color: 'currentColor'
       },
 
-      // form elements
+      button: {
+        color: 'inherit',
+        font: 'inherit',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        appearance: 'none',
+        WebkitAppearance: 'none'
+      },
+
+      'input, select, textarea': {
+        color: 'inherit',
+        font: 'inherit'
+      },
+
       fieldset: {
         border: 0,
         padding: 0,
         margin: 0
-      },
-
-      'select, input': {
-        fontFamily: DOCUMENT.fontFamily
       }
     })
   }

package/src/system/shadow.js

@@ -9,7 +9,7 @@ import {
   isObject,
   isString,
   isArray
-} from '@domql/utils'
+} from '@symbo.ls/utils'
 
 export const setShadow = (value, key, suffix, prefers) => {
   const CONFIG = getActiveConfig()
@@ -53,9 +53,10 @@ export const setShadow = (value, key, suffix, prefers) => {
     }).join(', ')
   }
 
-  const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : '')
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
+  const CSSVar = `--${vp}shadow-${key}` + (suffix ? `-${suffix}` : '')
 
-  if (CONFIG.useVariable) { CONFIG.CSS_VARS[CSSVar] = value }
+  if (CONFIG.useVariable) { CONFIG.cssVars[CSSVar] = value }
 
   return {
     var: CSSVar,

package/src/system/spacing.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { arrayzeValue } from '@symbo.ls/smbls-utils'
-import { isArray, isString, merge } from '@domql/utils'
+import { arrayzeValue } from '@symbo.ls/utils'
+import { isArray, isString, merge } from '@symbo.ls/utils'
 
 import { getActiveConfig } from '../factory.js'
 import {
@@ -11,7 +11,7 @@ import {
   generateSequence,
   getFnPrefixAndValue,
   getSequenceValuePropertyPair
-} from '../utils'
+} from '../utils/index.js'
 
 const runThroughMedia = (FACTORY) => {
   for (const prop in FACTORY) {

package/src/system/svg.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { document } from '@domql/utils'
-import { generateSprite, convertSvgToSymbol } from '../utils'
+import { document } from '@symbo.ls/utils'
+import { generateSprite, convertSvgToSymbol } from '../utils/index.js'
 import { getActiveConfig } from '../factory.js'
 
 const DEF_OPTIONS = {
@@ -23,14 +23,14 @@ export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.svg
-  for (const key in LIBRARY) lib[key] = CONFIG.svg[key]
+  for (const key in LIBRARY) lib[key] = LIBRARY[key]
 
   appendSVG(lib, options)
 }
 
 export const setSvgIcon = (val, key) => {
   const CONFIG = getActiveConfig()
-  if (CONFIG.useIconSprite && !CONFIG.semantic_icons?.[key]) {
+  if (CONFIG.useIconSprite && !CONFIG.semanticIcons?.[key]) {
     return setSVG(val, key)
   } return val
 }
@@ -39,7 +39,7 @@ export const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.icons
-  for (const key in LIBRARY) lib[key] = CONFIG.icons[key]
+  for (const key in LIBRARY) lib[key] = LIBRARY[key]
 
   appendSVG(lib, options)
 }
@@ -57,6 +57,32 @@ const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
   return svgElem
 }
 
+// Parse SVG sprite string using XML parser to correctly handle self-closing tags.
+// HTML parser treats <line .../> as <line ...> (ignores /), nesting siblings.
+const parseSVGSprite = (doc, svgString) => {
+  const DOMParserCtor = (typeof DOMParser !== 'undefined') ? DOMParser : null
+  if (DOMParserCtor) {
+    const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${svgString}</svg>`
+    const parser = new DOMParserCtor()
+    const parsed = parser.parseFromString(wrapped, 'image/svg+xml')
+    // Check for parse errors — if the SVG is malformed, fall back to innerHTML
+    if (parsed.querySelector('parsererror')) return null
+    return parsed.documentElement
+  }
+  return null
+}
+
+// Move all children from a parsed SVG element into a target element.
+// Uses importNode to cross document boundaries, then removes the source child
+// so the loop terminates.
+const moveChildren = (doc, from, to) => {
+  while (from.firstChild) {
+    const child = from.firstChild
+    to.appendChild(doc.importNode(child, true))
+    child.remove()
+  }
+}
+
 const appendSVG = (lib, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
   const doc = options.document || document
@@ -73,8 +99,12 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
 
   const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`
 
+  const parsed = parseSVGSprite(doc, SVGsprite)
+
   if (exists) {
-    if (doc.body.insertAdjacentHTML) {
+    if (parsed) {
+      moveChildren(doc, parsed, exists)
+    } else if (doc.body.insertAdjacentHTML) {
       exists.insertAdjacentHTML('beforeend', SVGsprite)
     } else {
       const tempSVG = createSVGSpriteElement(doc, { isRoot: false })
@@ -82,7 +112,13 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
       exists.append(...tempSVG.children)
     }
   } else {
-    if (doc.body.insertAdjacentHTML) {
+    if (parsed) {
+      const svgSpriteDOM = createSVGSpriteElement(doc)
+      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+        moveChildren(doc, parsed, svgSpriteDOM)
+        doc.body.prepend(svgSpriteDOM)
+      }
+    } else if (doc.body.insertAdjacentHTML) {
       doc.body.insertAdjacentHTML('afterbegin', spriteHtml)
     } else {
       const svgSpriteDOM = createSVGSpriteElement(doc)
@@ -92,4 +128,5 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
       }
     }
   }
+
 }