npm - @symbo.ls/scratch - Versions diffs - 3.14.2 → 3.14.4 - Mend

@symbo.ls/scratch 3.14.2 → 3.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/CHANGELOG.md +19 -0
package/dist/cjs/index.js +1 -0
package/dist/cjs/package.json +1 -0
package/dist/cjs/src/defaultConfig/animation.js +1 -0
package/dist/cjs/src/defaultConfig/cases.js +1 -0
package/dist/cjs/src/defaultConfig/class.js +1 -0
package/dist/cjs/src/defaultConfig/color.js +1 -0
package/dist/cjs/src/defaultConfig/document.js +1 -0
package/dist/cjs/src/defaultConfig/font-family.js +1 -0
package/dist/cjs/src/defaultConfig/font.js +1 -0
package/dist/cjs/src/defaultConfig/grid.js +1 -0
package/dist/cjs/src/defaultConfig/icons.js +1 -0
package/dist/cjs/src/defaultConfig/index.js +1 -0
package/dist/cjs/src/defaultConfig/media.js +1 -0
package/dist/cjs/src/defaultConfig/responsive.js +1 -0
package/dist/cjs/src/defaultConfig/sequence.js +1 -0
package/dist/cjs/src/defaultConfig/shadow.js +1 -0
package/dist/cjs/src/defaultConfig/spacing.js +1 -0
package/dist/cjs/src/defaultConfig/svg.js +1 -0
package/dist/cjs/src/defaultConfig/templates.js +1 -0
package/dist/cjs/src/defaultConfig/theme.js +1 -0
package/dist/cjs/src/defaultConfig/timing.js +1 -0
package/dist/cjs/src/defaultConfig/typography.js +1 -0
package/dist/cjs/src/defaultConfig/unit.js +1 -0
package/dist/cjs/src/factory.js +1 -0
package/dist/cjs/src/index.js +1 -0
package/dist/cjs/src/set.js +1 -0
package/dist/cjs/src/system/color.js +1 -0
package/dist/cjs/src/system/document.js +1 -0
package/dist/cjs/src/system/font.js +1 -0
package/dist/cjs/src/system/index.js +1 -0
package/dist/cjs/src/system/reset.js +1 -0
package/dist/cjs/src/system/shadow.js +1 -0
package/dist/cjs/src/system/spacing.js +1 -0
package/dist/cjs/src/system/svg.js +1 -0
package/dist/cjs/src/system/theme.js +1 -0
package/dist/cjs/src/system/timing.js +1 -0
package/dist/cjs/src/system/typography.js +1 -0
package/dist/cjs/src/tests/index.js +1 -0
package/dist/cjs/src/transforms/index.js +1 -0
package/dist/cjs/src/utils/color.js +1 -0
package/dist/cjs/src/utils/font.js +9 -0
package/dist/cjs/src/utils/index.js +1 -0
package/dist/cjs/src/utils/sequence.js +1 -0
package/dist/cjs/src/utils/sprite.js +1 -0
package/dist/cjs/src/utils/theme.js +1 -0
package/dist/cjs/src/utils/unit.js +1 -0
package/dist/cjs/src/utils/var.js +1 -0
package/dist/esm/index.js +1 -0
package/dist/esm/src/defaultConfig/animation.js +1 -0
package/dist/esm/src/defaultConfig/cases.js +1 -0
package/dist/esm/src/defaultConfig/class.js +1 -0
package/dist/esm/src/defaultConfig/color.js +1 -0
package/dist/esm/src/defaultConfig/document.js +1 -0
package/dist/esm/src/defaultConfig/font-family.js +1 -0
package/dist/esm/src/defaultConfig/font.js +1 -0
package/dist/esm/src/defaultConfig/grid.js +1 -0
package/dist/esm/src/defaultConfig/icons.js +1 -0
package/dist/esm/src/defaultConfig/index.js +1 -0
package/dist/esm/src/defaultConfig/media.js +1 -0
package/dist/esm/src/defaultConfig/responsive.js +1 -0
package/dist/esm/src/defaultConfig/sequence.js +1 -0
package/dist/esm/src/defaultConfig/shadow.js +1 -0
package/dist/esm/src/defaultConfig/spacing.js +1 -0
package/dist/esm/src/defaultConfig/svg.js +1 -0
package/dist/esm/src/defaultConfig/templates.js +1 -0
package/dist/esm/src/defaultConfig/theme.js +1 -0
package/dist/esm/src/defaultConfig/timing.js +1 -0
package/dist/esm/src/defaultConfig/typography.js +1 -0
package/dist/esm/src/defaultConfig/unit.js +1 -0
package/dist/esm/src/factory.js +1 -0
package/dist/esm/src/index.js +1 -0
package/dist/esm/src/set.js +1 -0
package/dist/esm/src/system/color.js +1 -0
package/dist/esm/src/system/document.js +1 -0
package/dist/esm/src/system/font.js +1 -0
package/dist/esm/src/system/index.js +1 -0
package/dist/esm/src/system/reset.js +1 -0
package/dist/esm/src/system/shadow.js +1 -0
package/dist/esm/src/system/spacing.js +1 -0
package/dist/esm/src/system/svg.js +1 -0
package/dist/esm/src/system/theme.js +1 -0
package/dist/esm/src/system/timing.js +1 -0
package/dist/esm/src/system/typography.js +1 -0
package/dist/esm/src/tests/index.js +1 -0
package/dist/esm/src/transforms/index.js +1 -0
package/dist/esm/src/utils/color.js +1 -0
package/dist/esm/src/utils/font.js +9 -0
package/dist/esm/src/utils/index.js +1 -0
package/dist/esm/src/utils/sequence.js +1 -0
package/dist/esm/src/utils/sprite.js +1 -0
package/dist/esm/src/utils/theme.js +1 -0
package/dist/esm/src/utils/unit.js +1 -0
package/dist/esm/src/utils/var.js +1 -0
package/package.json +18 -17
package/index.js +0 -1
package/src/defaultConfig/animation.js +0 -3
package/src/defaultConfig/cases.js +0 -3
package/src/defaultConfig/class.js +0 -6
package/src/defaultConfig/color.js +0 -9
package/src/defaultConfig/document.js +0 -3
package/src/defaultConfig/font-family.js +0 -15
package/src/defaultConfig/font.js +0 -12
package/src/defaultConfig/grid.js +0 -5
package/src/defaultConfig/icons.js +0 -4
package/src/defaultConfig/index.js +0 -24
package/src/defaultConfig/media.js +0 -10
package/src/defaultConfig/responsive.js +0 -29
package/src/defaultConfig/sequence.js +0 -24
package/src/defaultConfig/shadow.js +0 -3
package/src/defaultConfig/spacing.js +0 -19
package/src/defaultConfig/svg.js +0 -4
package/src/defaultConfig/templates.js +0 -3
package/src/defaultConfig/theme.js +0 -13
package/src/defaultConfig/timing.js +0 -18
package/src/defaultConfig/typography.js +0 -22
package/src/defaultConfig/unit.js +0 -5
package/src/factory.js +0 -135
package/src/index.js +0 -24
package/src/set.js +0 -353
package/src/system/color.js +0 -327
package/src/system/document.js +0 -16
package/src/system/font.js +0 -66
package/src/system/index.js +0 -12
package/src/system/reset.js +0 -119
package/src/system/shadow.js +0 -107
package/src/system/spacing.js +0 -152
package/src/system/svg.js +0 -132
package/src/system/theme.js +0 -454
package/src/system/timing.js +0 -32
package/src/system/typography.js +0 -110
package/src/tests/index.js +0 -4
package/src/transforms/index.js +0 -270
package/src/utils/color.js +0 -269
package/src/utils/font.js +0 -116
package/src/utils/index.js +0 -9
package/src/utils/sequence.js +0 -386
package/src/utils/sprite.js +0 -107
package/src/utils/theme.js +0 -8
package/src/utils/unit.js +0 -72
package/src/utils/var.js +0 -129

package/src/set.js DELETED Viewed

@@ -1,353 +0,0 @@
-'use strict'
-import { FACTORY, getActiveConfig, setActiveConfig, toCamel } from './factory.js' // eslint-disable-line no-unused-vars
-import {
-  setColor,
-  setGradient,
-  setFont,
-  setFontFamily,
-  setTheme,
-  setSvgIcon,
-  setSVG,
-  applyTypographySequence,
-  applySpacingSequence,
-  applyReset,
-  applyTimingSequence,
-  applyDocument,
-  setShadow
-} from './system/index.js'
-import { deepMerge, isObject, isArray } from '@symbo.ls/utils'
-const setVars = (val, key) => {
-  const CONFIG = getActiveConfig()
-  const { cssVars } = CONFIG
-  const varName = key.startsWith('--') ? key : `--${key}`
-  cssVars[varName] = val
-  return val
-}
-const asIs = (val) => val
-// `toCamel` (imported above) normalises snake_case designSystem keys
-// (e.g. `font_family` → `fontFamily`) before transformer dispatch — callers
-// can use either casing without needing to register both variants here.
-export const VALUE_TRANSFORMERS = {
-  color: setColor,
-  gradient: setGradient,
-  font: setFont,
-  fontFamily: setFontFamily,
-  fontfamily: setFontFamily,
-  theme: setTheme,
-  icons: setSvgIcon,
-  semanticIcons: asIs,
-  semanticicons: asIs,
-  svg: setSVG,
-  svgData: asIs,
-  typography: asIs,
-  shadow: setShadow,
-  spacing: asIs,
-  media: asIs,
-  grid: asIs,
-  class: asIs,
-  timing: asIs,
-  reset: asIs,
-  unit: asIs,
-  animation: asIs,
-  vars: setVars
-}
-/**
- *
- * @param {Object} FACTORY_NAME Defines which factory it goes to
- * @param {*} value Value of the property
- * @param {String} key Key, or the name of the property
- * @returns {Object} Factory
- */
-export const setValue = (factoryName, value, key) => {
-  const CONFIG = getActiveConfig()
-  const camelName = toCamel(factoryName)
-  const lowerName = camelName.toLowerCase()
-  const FACTORY = CONFIG[camelName] || CONFIG[lowerName] || CONFIG[factoryName]
-  const transformer = VALUE_TRANSFORMERS[camelName] || VALUE_TRANSFORMERS[lowerName]
-  if (transformer) {
-    try {
-      const result = transformer(value, key)
-      if (FACTORY) FACTORY[key] = result
-      return FACTORY
-    } catch (error) {
-      if (CONFIG.verbose)
-        console.warn('Error setting', lowerName, 'value', value, key, error)
-    }
-  }
-  if (CONFIG.verbose)
-    console.warn('Can not find', lowerName, 'method in scratch')
-}
-export const setEach = (factoryName, props) => {
-  const CONFIG = getActiveConfig()
-  const lowerName = factoryName.toLowerCase()
-  // Process primitive (string/number) values before composite (array/object)
-  // ones so composite values can dereference primitives by name. Without this
-  // ordering, a color like `selectedDay: ['--blue .12', '--blue .18']` could
-  // be processed before `blue` itself was registered in CONFIG.color, leaving
-  // refColor undefined and falling back to CSS keyword resolution.
-  const keys = Object.keys(props).sort((a, b) => {
-    const aComposite = isObject(props[a]) || isArray(props[a]) ? 1 : 0
-    const bComposite = isObject(props[b]) || isArray(props[b]) ? 1 : 0
-    return aComposite - bComposite
-  })
-  keys.forEach((key) => {
-    try {
-      return setValue(lowerName, props[key], key)
-    } catch (error) {
-      if (CONFIG.verbose)
-        console.warn(
-          'Error setting',
-          lowerName,
-          'value',
-          props[key],
-          key,
-          error
-        )
-    }
-  })
-  return CONFIG[lowerName] || CONFIG[factoryName]
-}
-export const changeGlobalTheme = (newTheme, targetConfig) => {
-  // Accept an explicit config so scoped code (inside pushConfig) can
-  // target the right app's theme without relying on the stack timing.
-  const CONFIG = targetConfig || getActiveConfig()
-  CONFIG.globalTheme = newTheme
-  // Apply the theme on the scope root. For a single-design-system page we
-  // write to `<html>`; multiple design systems on the same page each carry
-  // their own root element (set by the caller on CONFIG.themeRoot), so the
-  // attribute is applied there and leaves the rest of the document alone.
-  //
-  // `'auto'` switches to OS-driven mode: we resolve the current
-  // `prefers-color-scheme` and register (once) a listener so later OS
-  // changes flip the attribute live.
-  // Resolve the target document from the config, not the global `document`.
-  // In a multi-app setup the CONFIG belongs to an iframe — its themeRoot is
-  // inside iframe doc, and its stylesheets live in iframe doc. Reading
-  // global `document` here flips the parent's data-theme attribute instead.
-  // `CONFIG.document` is also a factory bucket (font/theme defaults consumed
-  // by `applyDocument`); only treat it as a DOM document override if it
-  // actually looks like one.
-  const configDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null
-  const targetDoc = configDoc || (typeof document !== 'undefined' ? document : null)
-  const targetWin = (targetDoc && targetDoc.defaultView) || (typeof window !== 'undefined' ? window : null)
-  if (targetDoc) {
-    const root = CONFIG.themeRoot || targetDoc.documentElement
-    const forced = newTheme && newTheme !== 'auto'
-    if (forced) {
-      root.setAttribute('data-theme', newTheme)
-      // Mirror `data-theme` into CSS `color-scheme` so Chrome stops
-      // forcibly re-rendering form controls (buttons, inputs, selects) in
-      // the opposite scheme of the design system. Only the standard
-      // `dark`/`light` schemes map to a UA color-scheme; custom schemes
-      // (sepia etc.) fall back to `light dark` so the browser picks by OS.
-      if (newTheme === 'dark' || newTheme === 'light') {
-        root.style.colorScheme = newTheme
-      } else {
-        root.style.colorScheme = 'light dark'
-      }
-    } else if (targetWin && targetWin.matchMedia) {
-      const apply = (mq) => { root.setAttribute('data-theme', mq.matches ? 'dark' : 'light') }
-      const mq = targetWin.matchMedia('(prefers-color-scheme: dark)')
-      apply(mq)
-      root.style.colorScheme = 'light dark'
-      if (!CONFIG.__prefersListener) {
-        CONFIG.__prefersListener = apply
-        try { mq.addEventListener('change', apply) } catch (e) { mq.addListener(apply) }
-      }
-    } else {
-      root.setAttribute('data-theme', 'light')
-      root.style.colorScheme = 'light'
-    }
-  }
-  // Clear theme-related CSS vars (with or without varPrefix)
-  const themeVarPrefix = CONFIG.varPrefix ? `--${CONFIG.varPrefix}-theme-` : '--theme-'
-  for (const key in CONFIG.cssVars) {
-    if (key.startsWith(themeVarPrefix)) delete CONFIG.cssVars[key]
-  }
-  // Clear all cssMediaVars (media queries + data-theme selectors)
-  for (const key in CONFIG.cssMediaVars) {
-    delete CONFIG.cssMediaVars[key]
-  }
-  // Apply updated CSS vars to the config's scoped stylesheet rule
-  // (`:root` for the primary app, `[data-smbls-app="<key>"]` for secondary apps).
-  if (targetDoc && CONFIG.cssVars) {
-    const targetSelector = CONFIG.scopeSelector || ':root'
-    const sheets = targetDoc.styleSheets
-    for (let i = 0; i < sheets.length; i++) {
-      try {
-        const rules = sheets[i].cssRules
-        for (let j = 0; j < rules.length; j++) {
-          if (rules[j].selectorText === targetSelector) {
-            for (const key in CONFIG.cssVars) {
-              rules[j].style.setProperty(key, CONFIG.cssVars[key])
-            }
-            return CONFIG
-          }
-        }
-      } catch (e) {
-        /* cross-origin stylesheet */
-      }
-    }
-  }
-  return CONFIG
-}
-const SET_OPTIONS = {}
-export const set = (recivedConfig, options = SET_OPTIONS) => {
-  // Accept an explicit config instance via options.config so callers
-  // (e.g. renderProject for an embedded app) can operate on an isolated
-  // config without touching the global singleton.
-  let CONFIG = options.config || getActiveConfig()
-  const {
-    version,
-    verbose,
-    useVariable,
-    useReset,
-    useSvgSprite,
-    useFontImport,
-    useIconSprite,
-    globalTheme,
-    themeRoot,
-    useDocumentTheme,
-    useDefaultConfig,
-    semanticIcons,
-    files,
-    assets,
-    ...config
-  } = recivedConfig
-  if (options.newConfig) {
-    CONFIG = setActiveConfig(options.newConfig)
-  }
-  if (files !== undefined) CONFIG.files = files
-  if (assets !== undefined) CONFIG.assets = assets
-  if (verbose !== undefined) CONFIG.verbose = verbose
-  if (useVariable !== undefined) CONFIG.useVariable = useVariable
-  if (useReset !== undefined) CONFIG.useReset = useReset
-  if (useFontImport !== undefined) CONFIG.useFontImport = useFontImport
-  if (useSvgSprite !== undefined) CONFIG.useSvgSprite = useSvgSprite
-  if (useIconSprite !== undefined) CONFIG.useIconSprite = useIconSprite
-  if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
-  if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
-  if (themeRoot !== undefined) CONFIG.themeRoot = themeRoot
-  if (recivedConfig.useThemeSuffixedVars !== undefined)
-    CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
-  if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
-  if (semanticIcons !== undefined) CONFIG.semanticIcons = semanticIcons
-  if (CONFIG.verbose) console.log(CONFIG)
-  // Apply `data-theme` to the scope root so CSS selectors resolve correctly.
-  // `auto` means "follow the OS": we read `prefers-color-scheme` and install
-  // a one-time listener so a later OS toggle flips `data-theme` live without
-  // reloading the page. Forced themes (`'dark'`, `'light'`, or any custom
-  // scheme name like `'ocean'`) stick until the user calls
-  // `changeGlobalTheme(...)` again.
-  // `CONFIG.document` is also a factory bucket (font/theme defaults consumed
-  // by `applyDocument`); only treat it as a DOM document override if it
-  // actually looks like one.
-  const setConfigDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null
-  const setTargetDoc = setConfigDoc || (typeof document !== 'undefined' ? document : null)
-  const setTargetWin = (setTargetDoc && setTargetDoc.defaultView) || (typeof window !== 'undefined' ? window : null)
-  const setRoot = setTargetDoc && (CONFIG.themeRoot || setTargetDoc.documentElement)
-  if (setRoot && typeof setRoot.setAttribute === 'function') {
-    const forced = CONFIG.globalTheme && CONFIG.globalTheme !== 'auto'
-    if (forced) {
-      setRoot.setAttribute('data-theme', CONFIG.globalTheme)
-      if (CONFIG.globalTheme === 'dark' || CONFIG.globalTheme === 'light') {
-        setRoot.style.colorScheme = CONFIG.globalTheme
-      } else {
-        setRoot.style.colorScheme = 'light dark'
-      }
-    } else if (setTargetWin && setTargetWin.matchMedia) {
-      const apply = (mq) => { setRoot.setAttribute('data-theme', mq.matches ? 'dark' : 'light') }
-      const mq = setTargetWin.matchMedia('(prefers-color-scheme: dark)')
-      apply(mq)
-      setRoot.style.colorScheme = 'light dark'
-      if (!CONFIG.__prefersListener) {
-        CONFIG.__prefersListener = apply
-        try { mq.addEventListener('change', apply) } catch (e) { mq.addListener(apply) }
-      }
-    } else {
-      setRoot.setAttribute('data-theme', 'light')
-      setRoot.style.colorScheme = 'light'
-    }
-  }
-  if (!CONFIG.__svgCache) CONFIG.__svgCache = {}
-  const keys = Object.keys(config)
-  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])
-  })
-  // Propagate varPrefix to sequence sub-configs for CSS variable name isolation
-  if (CONFIG.varPrefix) {
-    if (CONFIG.typography) CONFIG.typography.varPrefix = CONFIG.varPrefix
-    if (CONFIG.spacing) CONFIG.spacing.varPrefix = CONFIG.varPrefix
-    if (CONFIG.timing) CONFIG.timing.varPrefix = CONFIG.varPrefix
-  }
-  // apply generic configs
-  if (config.typography) {
-    try {
-      applyTypographySequence()
-    } catch (e) {
-      if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
-    }
-  }
-  if (config.spacing) {
-    try {
-      applySpacingSequence()
-    } catch (e) {
-      if (CONFIG.verbose) console.warn('Error applying spacing sequence', e)
-    }
-  }
-  if (config.timing) {
-    try {
-      applyTimingSequence()
-    } catch (e) {
-      if (CONFIG.verbose) console.warn('Error applying timing sequence', e)
-    }
-  }
-  applyDocument()
-  // Capture so init.js injects the full html/body reset (with default
-  // font-family); dropping the return leaves CONFIG.reset as the bare seed.
-  const computedReset = applyReset()
-  if (computedReset) CONFIG.reset = computedReset
-  return CONFIG
-}

package/src/system/color.js DELETED Viewed

@@ -1,327 +0,0 @@
-'use strict'
-import { isObject, isArray, isString } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-import {
-  colorStringToRgbaArray,
-  getRgbTone,
-  isCSSVar,
-  parseColorToken
-} from '../utils/index.js'
-export const getColor = (value, key, config) => {
-  const CONFIG = config || getActiveConfig()
-  if (!isString(value)) {
-    if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
-    return
-  }
-  if (isCSSVar(value)) return `var(${value})`
-  if (key && value[key]) value = value[key]
-  let name, alpha, tone
-  if (isArray(value)) {
-    [name, alpha, tone] = value
-  } else {
-    const parsed = parseColorToken(value)
-    if (!parsed) {
-      // Direct lookup for hyphenated names (e.g. 'gradient-light', 'gradient-dark-active')
-      const { color: COLOR, gradient: GRADIENT } = CONFIG
-      const directVal = GRADIENT[value] || COLOR[value]
-      if (directVal) return CONFIG.useVariable ? `var(${directVal.var})` : directVal.value
-      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: COLOR, gradient: GRADIENT } = CONFIG
-  let val = (COLOR[name] || GRADIENT[name])
-  if (!val) {
-    if (CONFIG.verbose) console.warn('Can\'t find color ', name)
-    return value
-  }
-  if (key) {
-    if (val[key]) val = val[key]
-    else if (CONFIG.verbose) console.warn(value, ' - does not have ', key)
-  }
-  // TODO: support variables
-  // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})`
-  let rgb = val.rgb
-  if (!rgb) {
-    return CONFIG.useVariable ? `var(${val.var})` : val.value
-  }
-  if (tone && !val[tone]) {
-    rgb = getRgbTone(rgb, tone)
-    val[tone] = { rgb, var: `${val.var}-${tone}` }
-  }
-  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 === 'auto' ? null : CONFIG.globalTheme
-  if (!isString(value)) {
-    if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
-    return
-  }
-  if (isCSSVar(value)) return `var(${value})`
-  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: COLOR, gradient: GRADIENT } = CONFIG
-  const val = COLOR[name] || GRADIENT[name]
-  const isObj = isObject(val)
-  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)
-      }
-      return obj
-    }
-  } else {
-    if (CONFIG.verbose) console.warn('Can\'t find color', value)
-    return value
-  }
-}
-export const setColor = (val, key, suffix) => {
-  const CONFIG = getActiveConfig()
-  if (isString(val) && isCSSVar(val)) {
-    const rawRef = val.slice(2)
-    val = getColor(rawRef)
-    if (!(
-      val.includes('rgb') ||
-      val.includes('var') ||
-      val.includes('#')
-    )) {
-      // Handle space-separated format: '--colorName alpha' (e.g. '--gray1 1')
-      const parts = rawRef.split(' ')
-      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'
-        const tone = parts[2]
-        if (tone) {
-          rgb = getRgbTone(rgb, tone)
-        }
-        val = `rgba(${rgb}, ${alpha})`
-      } else {
-        // Try to resolve as CSS keyword color with tone modifier
-        const tone = parts[2]
-        const alpha = parts[1] !== undefined ? parts[1] : '1'
-        if (tone) {
-          try {
-            const rgb = colorStringToRgbaArray(parts[0])
-            if (rgb && rgb.length >= 3) {
-              const tonedRgb = getRgbTone(rgb.slice(0, 3).join(', '), tone)
-              val = `rgba(${tonedRgb}, ${alpha})`
-            } else {
-              val = parts[0]
-            }
-          } catch (e) {
-            val = parts[0]
-          }
-        } else {
-          val = parts[0]
-        }
-      }
-    }
-  }
-  // Normalize array shorthand `[lightVal, darkVal]` to scheme-keyed object
-  // so the multi-scheme branch below handles both cases uniformly.
-  if (isArray(val)) {
-    val = { '@light': val[0], '@dark': val[1] }
-  }
-  if (isObject(val)) {
-    const obj = {}
-    for (const variant in val) {
-      obj[variant] = setColor(
-        val[variant],
-        key,
-        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 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.cssVars[CSSVar] = value }
-  return {
-    var: CSSVar,
-    rgb,
-    alpha,
-    value
-  }
-}
-export const setGradient = (val, key, suffix) => {
-  const CONFIG = getActiveConfig()
-  if (isString(val) && isCSSVar(val)) val = getColor(val.slice(2))
-  if (isArray(val)) {
-    return {
-      '@light': setGradient(val[0], key, 'light'),
-      '@dark': setGradient(val[0], key, 'dark')
-    }
-  }
-  if (isObject(val)) {
-    const obj = {}
-    for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === '@' ? variant.slice(1) : variant)
-    return obj
-  }
-  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
-  const CSSVar = `--${vp}gradient-${key}` + (suffix ? `-${suffix}` : '')
-  if (CONFIG.useVariable) {
-    CONFIG.cssVars[CSSVar] = val.value || val
-  }
-  return {
-    var: CSSVar,
-    value: val.value || val
-  }
-}

package/src/system/document.js DELETED Viewed

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