@symbo.ls/scratch 3.2.3 → 3.2.8

package/package.json

@@ -2,32 +2,42 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.2.3",
+  "version": "3.2.8",
   "files": [
-    "src",
-    "dist"
+    "dist",
+    "*.js",
+    "src"
   ],
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
-  "module": "src/index.js",
-  "unpkg": "dist/iife/index.js",
-  "jsdelivr": "dist/iife/index.js",
-  "main": "src/index.js",
-  "exports": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
+  "main": "./dist/cjs/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "browser": "./dist/iife/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
   "source": "src/index.js",
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
-    "build:iife": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
-    "build": "npm run build:cjs",
-    "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild src/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild src/*.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=SmblsScratch --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build": "node ../../build/build.js",
+    "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
     "@domql/utils": "^3.2.3",
-    "@symbo.ls/utils": "^3.2.3",
+    "@symbo.ls/smbls-utils": "^3.2.3",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681"
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
+  "browser": "./dist/iife/index.js",
+  "sideEffects": false
 }

package/src/set.js

@@ -17,7 +17,7 @@ import {
   setShadow
 } from './system'
 
-import { isFunction } from '@domql/utils'
+import { isFunction, deepMerge } from '@domql/utils'
 
 const setCases = (val, key) => {
   if (isFunction(val)) return val()
@@ -129,22 +129,37 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}
 
   const keys = Object.keys(config)
-  keys.map(key => setEach(key, config[key]))
+  const keySet = new Set(keys)
+
+  // Pre-merge: fold UPPERCASE default keys into lowercase project keys
+  keys.forEach(key => {
+    const lower = key.toLowerCase()
+    if (lower !== key && keySet.has(lower)) {
+      deepMerge(config[lower], config[key])
+    }
+  })
+
+  // Process only lowercase keys (skip UPPERCASE when lowercase equivalent exists)
+  keys.map(key => {
+    const lower = key.toLowerCase()
+    if (lower !== key && keySet.has(lower)) return
+    return setEach(key, config[key])
+  })
 
   // apply generic configs
-  if (config.TYPOGRAPHY) {
+  if (config.TYPOGRAPHY || config.typography) {
     try { applyTypographySequence() } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
     }
   }
-  if (config.SPACING) {
+  if (config.SPACING || config.spacing) {
     try { applySpacingSequence() } catch (e) {
-      if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
+      if (CONFIG.verbose) console.warn('Error applying spacing sequence', e)
     }
   }
-  if (config.TIMING) {
+  if (config.TIMING || config.timing) {
     try { applyTimingSequence() } catch (e) {
-      if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
+      if (CONFIG.verbose) console.warn('Error applying timing sequence', e)
     }
   }
   applyDocument()

package/src/system/color.js

@@ -5,7 +5,9 @@ import { getActiveConfig } from '../factory.js'
 
 import {
   colorStringToRgbaArray,
-  getRgbTone
+  getRgbTone,
+  isCSSVar,
+  parseColorToken
 } from '../utils'
 
 export const getColor = (value, key, config) => {
@@ -15,10 +17,23 @@ export const getColor = (value, key, config) => {
     return
   }
 
-  if (value.slice(0, 2) === '--') return `var(${value})`
+  if (isCSSVar(value)) return `var(${value})`
 
   if (key && value[key]) value = value[key]
-  const [name, alpha, tone] = isArray(value) ? value : value.split(' ')
+
+  let name, alpha, tone
+  if (isArray(value)) {
+    [name, alpha, tone] = value
+  } else {
+    const parsed = parseColorToken(value)
+    if (!parsed) return value
+    if (parsed.passthrough) return parsed.passthrough
+    if (parsed.cssVar) return `var(${parsed.cssVar})`
+    name = parsed.name
+    alpha = parsed.alpha
+    tone = parsed.tone
+  }
+
   const { COLOR, GRADIENT } = CONFIG
 
   let val = (COLOR[name] || GRADIENT[name])
@@ -47,20 +62,30 @@ export const getColor = (value, key, config) => {
   if (val[tone]) rgb = val[tone].rgb
 
   if (alpha) return `rgba(${rgb}, ${alpha})`
+  if (tone) return `rgba(${rgb}, 1)`
   return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`
 }
 
 export const getMediaColor = (value, globalTheme, config) => {
   const CONFIG = config || getActiveConfig()
-  if (!globalTheme) globalTheme = CONFIG.globalTheme
+  if (!globalTheme) globalTheme = CONFIG.globalTheme === 'auto' ? null : CONFIG.globalTheme
   if (!isString(value)) {
     if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
   }
 
-  if (value.slice(0, 2) === '--') return `var(${value})`
+  if (isCSSVar(value)) return `var(${value})`
 
-  const [name] = isArray(value) ? value : value.split(' ')
+  let name
+  if (isArray(value)) {
+    name = value[0]
+  } else {
+    const parsed = parseColorToken(value)
+    if (!parsed) return value
+    if (parsed.passthrough) return parsed.passthrough
+    if (parsed.cssVar) return `var(${parsed.cssVar})`
+    name = parsed.name
+  }
 
   const { COLOR, GRADIENT } = CONFIG
   const val = COLOR[name] || GRADIENT[name]
@@ -87,15 +112,27 @@ export const getMediaColor = (value, globalTheme, config) => {
 export const setColor = (val, key, suffix) => {
   const CONFIG = getActiveConfig()
 
-  if (isString(val) && val.slice(0, 2) === '--') {
-    val = getColor(val.slice(2))
+  if (isString(val) && isCSSVar(val)) {
+    const rawRef = val.slice(2)
+    val = getColor(rawRef)
     if (!(
       val.includes('rgb') ||
       val.includes('var') ||
       val.includes('#')
     )) {
-      if (CONFIG.verbose) console.warn(val, '- referred but does not exist')
-      val = val.split(' ')[0]
+      // Handle space-separated format: '--colorName alpha' (e.g. '--gray1 1')
+      const parts = rawRef.split(' ')
+      const refColor = CONFIG.COLOR[parts[0]]
+      if (refColor && refColor.value) {
+        if (parts[1] !== undefined) {
+          val = `rgba(${refColor.rgb}, ${parts[1]})`
+        } else {
+          val = refColor.value
+        }
+      } else {
+        if (CONFIG.verbose) console.warn(val, '- referred but does not exist')
+        val = parts[0]
+      }
     }
   }
 
@@ -137,7 +174,7 @@ export const setColor = (val, key, suffix) => {
 
 export const setGradient = (val, key, suffix) => {
   const CONFIG = getActiveConfig()
-  if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
+  if (isString(val) && isCSSVar(val)) val = getColor(val.slice(2))
 
   if (isArray(val)) {
     return {

package/src/system/font.js

@@ -1,13 +1,15 @@
 'use strict'
 
 import { isObject, isArray } from '@domql/utils'
-import { arrayzeValue } from '@symbo.ls/utils'
+import { arrayzeValue } from '@symbo.ls/smbls-utils'
 import { getActiveConfig } from '../factory.js'
 
 import {
   getDefaultOrFirstKey,
   getFontFaceEach,
-  setCustomFontMedia
+  isGoogleFontsUrl,
+  setCustomFontMedia,
+  setFontImport
 } from '../utils'
 
 export const setFont = (val, key) => {
@@ -15,9 +17,21 @@ export const setFont = (val, key) => {
 
   if (!val || (isArray(val) && !val[0])) return
 
-  const fontFace = val[0]
-    ? getFontFaceEach(key, val)
-    : setCustomFontMedia(key, val.url)
+  let fontFace
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url)
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || 'swap'
+      })
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val)
+  } else {
+    fontFace = setCustomFontMedia(key, val.url)
+  }
 
   return { var: CSSvar, value: val, fontFace }
 }

package/src/system/reset.js

@@ -15,7 +15,9 @@ export const applyReset = (reset = {}) => {
       const configTemplates = TYPOGRAPHY.templates
 
       configReset.body = {
-        ...(CONFIG.useDocumentTheme ? getMediaTheme('document', `@${CONFIG.globalTheme}`) : {}),
+        ...(CONFIG.useDocumentTheme
+          ? getMediaTheme('document', `@${CONFIG.globalTheme}`)
+          : {}),
         ...configTemplates.body
       }
       configReset.h1 = configTemplates.h1
@@ -27,7 +29,9 @@ export const applyReset = (reset = {}) => {
     }
 
     const { body, ...templates } = TYPOGRAPHY.templates
-    const globalTheme = (CONFIG.useDocumentTheme ? getMediaTheme('document', `@${CONFIG.globalTheme}`) : {})
+    const globalTheme = CONFIG.useDocumentTheme
+      ? getMediaTheme('document', `@${CONFIG.globalTheme}`)
+      : {}
     if (RESET.html) overwriteDeep(RESET.html, globalTheme)
 
     return deepMerge(merge(RESET, reset), {
@@ -56,12 +60,17 @@ export const applyReset = (reset = {}) => {
         margin: 0,
         fontFamily: DOCUMENT.fontFamily,
 
-        fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+        fontSize:
+          TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
 
         ...templates,
         ...body
       },
 
+      a: {
+        color: 'currentColor'
+      },
+
       // form elements
       fieldset: {
         border: 0,

package/src/system/shadow.js

@@ -3,6 +3,7 @@
 import { getActiveConfig } from '../factory.js'
 import { getColor } from './color.js'
 import { getSpacingByKey } from './spacing.js'
+import { isResolvedColor, isCSSVar, splitTopLevelCommas, CSS_NATIVE_COLOR_REGEX } from '../utils/color.js'
 
 import {
   isObject,
@@ -12,8 +13,6 @@ import {
 
 export const setShadow = (value, key, suffix, prefers) => {
   const CONFIG = getActiveConfig()
-  // const { CSS_VARS } = CONFIG
-  // const theme = { valueue: value }
 
   if (isArray(value)) {
     return {
@@ -34,16 +33,24 @@ export const setShadow = (value, key, suffix, prefers) => {
     return obj
   }
 
-  if (isString(value) && value.includes(',')) {
-    value = value.split(',').map(v => {
-      v = v.trim()
-      if (v.startsWith('--')) 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(' ')
+  if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
+    // Split multiple shadows by commas (CSS standard), respecting parentheses
+    value = splitTopLevelCommas(value).map(shadow => {
+      shadow = shadow.trim()
+      // Each shadow: space-separated tokens
+      return shadow.split(/\s+/).map(v => {
+        v = v.trim()
+        if (!v) return ''
+        if (v.startsWith('--')) return `var(${v})`
+        const color = getColor(v)
+        if (isResolvedColor(color)) return color
+        if (/^\d/.test(v) || v === '0' || v.includes('px') || v.slice(-2) === 'em') return v
+        if (v === 'inset' || v === 'none') return v
+        const spacing = getSpacingByKey(v, 'shadow')
+        if (spacing && spacing.shadow) return spacing.shadow
+        return v
+      }).join(' ')
+    }).join(', ')
   }
 
   const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : '')
@@ -64,7 +71,7 @@ export const getShadow = (value, globalTheme) => {
     return
   }
 
-  if (value.slice(0, 2) === '--') return `var(${value})`
+  if (isCSSVar(value)) return `var(${value})`
 
   const [name] = isArray(value) ? value : value.split(' ')
 

package/src/system/spacing.js

@@ -1,32 +1,26 @@
 'use strict'
 
-import { arrayzeValue } from '@symbo.ls/utils'
+import { arrayzeValue } from '@symbo.ls/smbls-utils'
 import { isArray, isString, merge } from '@domql/utils'
 
 import { getActiveConfig } from '../factory.js'
 import {
+  CSS_UNITS,
   applyMediaSequenceVars,
   applySequenceVars,
   generateSequence,
+  getFnPrefixAndValue,
   getSequenceValuePropertyPair
 } from '../utils'
 
-const runThroughMedia = FACTORY => {
+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
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY
 
     merge(mediaProps, {
       type,
@@ -47,6 +41,13 @@ const runThroughMedia = FACTORY => {
   }
 }
 
+export const checkIfBoxSize = (propertyName) => {
+  const prop = propertyName.toLowerCase()
+  const includesWidth = prop.includes('width') || prop.includes('height')
+  const includesBorder = prop.includes('border') || prop.includes('outline')
+  return includesWidth && !includesBorder
+}
+
 export const applySpacingSequence = () => {
   const CONFIG = getActiveConfig()
   const { SPACING } = CONFIG
@@ -58,7 +59,7 @@ export const applySpacingSequence = () => {
 const getSequence = (sequenceProps) => {
   const CONFIG = getActiveConfig()
   const { SPACING } = CONFIG
-  if (!sequenceProps) return SPACING
+  if (!sequenceProps || !sequenceProps.sequence) return SPACING
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
 }
@@ -66,15 +67,20 @@ const getSequence = (sequenceProps) => {
 export const getSpacingByKey = (
   value,
   propertyName = 'padding',
-  sequenceProps
+  sequenceProps,
+  fnPrefix
 ) => {
   const sequence = getSequence(sequenceProps)
 
-  if (isString(value) && (value.includes('calc') || value.includes('var'))) {
-    return { [propertyName]: value }
+  if (isString(value)) {
+    if (!fnPrefix && value.includes('(')) {
+      const fnArray = getFnPrefixAndValue(value)
+      fnPrefix = fnArray[0]
+      value = fnArray[1]
+    }
   }
 
-  const stack = arrayzeValue(value)
+  const stack = fnPrefix ? [value] : arrayzeValue(value)
   if (!isArray(stack)) return
 
   if (stack.length > 1) {
@@ -90,56 +96,57 @@ export const getSpacingByKey = (
       4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
     }
 
-    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
-      stack[i],
-      propertyName + direction + suffix,
-      sequence
-    )
+    const wrapSequenceValueByDirection = (direction, i) =>
+      getSequenceValuePropertyPair(
+        stack[i],
+        propertyName + direction + suffix,
+        sequence,
+        fnPrefix
+      )
 
-    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key))
+    return directions[stack.length].map((dir, key) =>
+      wrapSequenceValueByDirection(dir, key)
+    )
   }
 
-  return getSequenceValuePropertyPair(
-    value,
-    propertyName,
-    sequence
-  )
+  return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix)
 }
 
-export const getSpacingBasedOnRatio = (props, propertyName, val) => {
+export const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG = getActiveConfig()
   const { SPACING } = CONFIG
 
-  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: {},
-        templates: {},
-        vars: {}
-      }, {
-        base,
-        range,
-        subSequence,
-        ratio: SPACING.ratio,
-        unit: SPACING.unit
-      })
-    }
+  let value = val || props[propertyName]
 
-    applySequenceVars(sequenceProps, { useDefault: false })
+  if (!fnPrefix && isString(value) && value.includes('(')) {
+    const fnArr = getFnPrefixAndValue(value)
+    fnPrefix = fnArr[0]
+    value = fnArr[1]
+  }
 
-    return getSpacingByKey(value, propertyName, sequenceProps)
+  if (props.spacingRatio) {
+    const sequenceProps = applyCustomSequence(props)
+    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix)
   }
 
-  return getSpacingByKey(value, propertyName)
+  return getSpacingByKey(value, propertyName, SPACING, fnPrefix)
+}
+
+export const splitSpacedValue = (val) => {
+  const addDefault = (v) => {
+    const isSymbol = ['+', '-', '*', '/'].includes(v)
+    const hasUnits = CSS_UNITS.some((unit) => val.includes(unit))
+    if (isSymbol || hasUnits) return v
+    const isSingleLetter = v.length < 3 && /[A-Z]/.test(v)
+    if (isSingleLetter) return v + '_default'
+    return v
+  }
+  return val
+    .split(',')
+    .map((v) => v.trim())
+    .map(addDefault)
+    .join(',')
+    .split(' ')
+    .map(addDefault)
+    .join(' ')
 }

package/src/system/theme.js

@@ -2,6 +2,7 @@
 
 import { getColor } from './color'
 import { getActiveConfig } from '../factory.js'
+import { isCSSVar } from '../utils/color.js'
 
 import {
   isObject,
@@ -174,7 +175,7 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
     }
   }
 
-  if (isString(val) && val.slice(0, 2) === '--') {
+  if (isString(val) && isCSSVar(val)) {
     const { THEME } = CONFIG
     const value = THEME[val.slice(2)]
     const getReferenced = getMediaTheme(value, prefers)
@@ -215,7 +216,7 @@ const findModifier = (val, modifier) => {
 }
 
 const checkForReference = (val, callback) => {
-  if (isString(val) && val.slice(0, 2) === '--') return getMediaTheme(val.slice(2))
+  if (isString(val) && isCSSVar(val)) return getMediaTheme(val.slice(2))
   return val
 }
 
@@ -224,7 +225,7 @@ const checkThemeReference = (val) => checkForReference(val, checkThemeReference)
 export const getMediaTheme = (value, modifier) => {
   const activeConfig = getActiveConfig()
 
-  if (isString(value) && value.slice(0, 2) === '--') {
+  if (isString(value) && isCSSVar(value)) {
     value = getMediaTheme(value.slice(2))
   }
 

package/src/system/timing.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { toCamelCase } from '@symbo.ls/utils'
+import { toCamelCase } from '@symbo.ls/smbls-utils'
 import { getActiveConfig } from '../factory.js'
 import {
   applySequenceVars,