@symbo.ls/scratch 3.5.0 → 3.6.1

package/src/system/theme.js

@@ -140,25 +140,136 @@ const keySetters = { // eslint-disable-line
   '.': (theme, value) => setHelpers(theme, value)
 }
 
+/**
+ * Recursively generates auto-switching CSS vars from all @-scheme content.
+ * - @dark/@light: uses prefers-color-scheme media queries + [data-theme] selectors
+ * - Custom @schemes (@ocean, @sunset, etc.): uses [data-theme] selectors only
+ * - globalTheme forced: sets non-suffixed vars directly in CSS_VARS
+ *
+ * @param {Object} schemes - { dark: {...}, light: {...}, ocean: {...} }
+ * @param {string} varPrefix - var name prefix (e.g. 'document', 'primary-child')
+ * @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 globalTheme = CONFIG.globalTheme !== undefined ? CONFIG.globalTheme : 'auto'
+
+  const result = {}
+
+  // Collect union of all keys across all schemes
+  const allKeys = new Set()
+  for (const scheme in schemes) {
+    if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k)
+  }
+
+  for (const param of allKeys) {
+    const symb = param.slice(0, 1)
+
+    // Check if any scheme has an object value for this param
+    const hasObject = Object.values(schemes).some(s => isObjectLike(s?.[param]))
+
+    if (symb === '.' && hasObject) {
+      // Dot helper (.color-only, .child, etc.) — recurse
+      const helperName = param.slice(1)
+      const subSchemes = {}
+      for (const scheme in schemes) {
+        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param]
+      }
+      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG)
+    } else if (symb === ':' && hasObject) {
+      // Pseudo selector (:hover, ::placeholder) — recurse
+      const pseudoName = param.replace(/^:+/, '')
+      const subSchemes = {}
+      for (const scheme in schemes) {
+        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param]
+      }
+      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') {
+        for (const scheme in schemes) {
+          const val = schemes[scheme]?.[param]
+          if (val === undefined) continue
+          const color = getColor(val, `@${scheme}`)
+          if (color === undefined) continue
+
+          // [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
+          }
+        }
+      } 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
+        }
+      }
+
+      result[param] = `var(${autoVar})`
+      result[`.${param}`] = { [param]: result[param] }
+    }
+  }
+
+  if (result.background || result.color || result.backgroundColor) {
+    result['.inversed'] = {
+      color: result.background || result.backgroundColor,
+      background: result.color
+    }
+  }
+
+  return result
+}
+
 export const setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG = getActiveConfig()
   const { CSS_VARS } = CONFIG
   const theme = { value: val }
+  const isTopLevel = !suffix && !prefers
 
   if (isObjectLike(val)) {
+    // At top level: collect all @-schemes and generate auto-switching vars
+    if (isTopLevel && CONFIG.useVariable) {
+      const schemes = {}
+      for (const param in val) {
+        if (param.startsWith('@') && isObjectLike(val[param])) {
+          schemes[param.slice(1)] = val[param]
+        }
+      }
+
+      if (Object.keys(schemes).length) {
+        const autoResult = generateAutoVars(schemes, key, CONFIG)
+        Object.assign(theme, autoResult)
+      }
+    }
+
     for (const param in val) {
       const symb = param.slice(0, 1)
       const value = val[param]
       if (symb === '@' || symb === ':' || symb === '.') {
         const hasPrefers = symb === '@' && param
         theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers)
-      } else {
+      } else if (!isTopLevel) {
         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}`
         if (CONFIG.useVariable) {
-          CSS_VARS[CSSVar] = color
+          // Suffixed vars (--theme-key-dark-param) only when opted in
+          if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color
           theme[param] = `var(${CSSVar})`
         } else {
           theme[param] = color
@@ -167,7 +278,8 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
       }
     }
 
-    if (theme.background || theme.color || theme.backgroundColor) {
+    // Only add .inversed if not already set by generateAutoVars
+    if (!theme['.inversed'] && (theme.background || theme.color || theme.backgroundColor)) {
       theme['.inversed'] = {
         color: theme.background || theme.backgroundColor,
         background: theme.color
@@ -192,9 +304,8 @@ const recursiveTheme = val => {
     const symb = param.slice(0, 1)
     if (isObjectLike(val[param])) {
       if (symb === '@') {
-        const query = CONFIG.MEDIA[param.slice(1)]
-        const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
-        obj[media] = recursiveTheme(val[param])
+        // Skip all @-schemes — CSS vars + data-theme handle switching
+        continue
       } else if (symb === ':') {
         obj[`&${param}`] = recursiveTheme(val[param])
       }
@@ -239,8 +350,10 @@ export const getMediaTheme = (value, modifier) => {
   const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(' ')
   let themeValue = activeConfig.THEME[themeName]
 
-  if (themeValue && (themeModifiers || modifier)) {
-    themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier)
+  if (themeValue && themeModifiers.length) {
+    themeValue = findModifier(themeValue, themeModifiers)
+  } else if (themeValue && modifier) {
+    themeValue = findModifier(themeValue, modifier)
   }
 
   const resolvedTheme = recursiveTheme(themeValue)

package/src/transforms/index.js

@@ -246,7 +246,7 @@ export function transformSize(propertyName, val, props = {}, opts = {}) {
 
     const shouldScaleBoxSize = props.scaleBoxSize
     const isBoxSize = checkIfBoxSize(propertyName)
-    if (!shouldScaleBoxSize && isBoxSize) {
+    if (!shouldScaleBoxSize && isBoxSize && !opts.ratio) {
       value = splitSpacedValue(value)
     }
   }

package/src/utils/font.js

@@ -1,5 +1,13 @@
 'use strict'
 
+export const resolveFileUrl = (url, files) => {
+  if (!url || !files) return null
+  try { new URL(url); return null } catch (e) { }
+  const file = files[url]
+  if (file) return file.content && file.content.src
+  return null
+}
+
 export const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value
   if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
@@ -53,11 +61,12 @@ export const setCustomFontMedia = (
 ) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`
 
-export const getFontFaceEach = (name, weights) => {
+export const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights)
   return keys.map((key) => {
     const { url, fontWeight } = weights[key]
-    return setCustomFont(name, url, fontWeight)
+    const resolvedUrl = resolveFileUrl(url, files) || url
+    return setCustomFont(name, resolvedUrl, fontWeight)
   })
 }
 
@@ -66,22 +75,24 @@ export const getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value))
 }
 
-export const getFontFaceEachString = (name, weights) => {
+export const getFontFaceEachString = (name, weights, files) => {
   if (weights && weights.isVariable) {
-    if (isGoogleFontsUrl(weights.url)) {
-      return setFontImport(weights.url)
+    const url = resolveFileUrl(weights.url, files) || weights.url
+    if (isGoogleFontsUrl(url)) {
+      return setFontImport(url)
     }
-    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+    return setCustomFontMedia(name, url, weights.fontWeight, {
       fontStretch: weights.fontStretch,
       fontDisplay: weights.fontDisplay || 'swap'
     })
   }
   const isArr = weights[0]
-  if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia)
-  return setCustomFontMedia(name, weights.url)
+  if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia)
+  const url = resolveFileUrl(weights.url, files) || weights.url
+  return setCustomFontMedia(name, url)
 }
 
-export const getFontFaceString = (LIBRARY) => {
+export const getFontFaceString = (LIBRARY, files) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files))
 }