@symbo.ls/scratch 3.8.9 → 3.14.1

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 = {
@@ -30,7 +30,7 @@ export const appendSVGSprite = (LIBRARY, options = DEF_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
 }
@@ -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) => {
       }
     }
   }
+
 }

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