@symbo.ls/scratch 3.8.0 → 3.8.6

package/src/set.js

@@ -17,14 +17,17 @@ import {
   setShadow
 } from './system'
 
-import { isFunction, deepMerge } from '@domql/utils'
+import { deepMerge } from '@domql/utils'
 
-const setCases = (val, key) => {
-  if (isFunction(val)) return val()
+const setVars = (val, key) => {
+  const CONFIG = getActiveConfig()
+  const { CSS_VARS } = CONFIG
+  const varName = key.startsWith('--') ? key : `--${key}`
+  CSS_VARS[varName] = val
   return val
 }
 
-const setSameValue = (val, key) => val
+const asIs = (val) => val
 
 export const VALUE_TRANSFORMERS = {
   color: setColor,
@@ -34,21 +37,21 @@ export const VALUE_TRANSFORMERS = {
   fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
-  semantic_icons: setSameValue,
-  semanticicons: setSameValue,
+  semantic_icons: asIs,
+  semanticicons: asIs,
   svg: setSVG,
-  svg_data: setSameValue,
-  typography: setSameValue,
-  cases: setCases,
+  svg_data: asIs,
+  typography: asIs,
   shadow: setShadow,
-  spacing: setSameValue,
-  media: setSameValue,
-  grid: setSameValue,
-  class: setSameValue,
-  timing: setSameValue,
-  reset: setSameValue,
-  unit: setSameValue,
-  animation: setSameValue
+  spacing: asIs,
+  media: asIs,
+  grid: asIs,
+  class: asIs,
+  timing: asIs,
+  reset: asIs,
+  unit: asIs,
+  animation: asIs,
+  vars: setVars
 }
 
 /**
@@ -69,11 +72,13 @@ export const setValue = (factoryName, value, key) => {
       FACTORY[key] = result
       return FACTORY
     } catch (error) {
-      if (CONFIG.verbose) console.warn('Error setting', lowerName, 'value', value, key, 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')
+  if (CONFIG.verbose)
+    console.warn('Can not find', lowerName, 'method in scratch')
 }
 
 export const setEach = (factoryName, props) => {
@@ -85,7 +90,15 @@ export const setEach = (factoryName, props) => {
     try {
       return setValue(lowerName, props[key], key)
     } catch (error) {
-      if (CONFIG.verbose) console.warn('Error setting', lowerName, 'value', props[key], key, error)
+      if (CONFIG.verbose)
+        console.warn(
+          'Error setting',
+          lowerName,
+          'value',
+          props[key],
+          key,
+          error
+        )
     }
   })
 
@@ -131,7 +144,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     useDocumentTheme,
     useDefaultConfig,
     semanticIcons,
-    SEMANTIC_ICONS,
+    SEMANTIC_ICONS, // deprecated
     semantic_icons,
     files,
     ...config
@@ -150,7 +163,8 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== undefined) CONFIG.useIconSprite = useIconSprite
   if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
-  if (recivedConfig.useThemeSuffixedVars !== undefined) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
+  if (recivedConfig.useThemeSuffixedVars !== undefined)
+    CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
   if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
   const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons
   if (_semanticIcons !== undefined) {
@@ -166,7 +180,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   const keySet = new Set(keys)
 
   // Pre-merge: fold UPPERCASE default keys into lowercase project keys
-  keys.forEach(key => {
+  keys.forEach((key) => {
     const lower = key.toLowerCase()
     if (lower !== key && keySet.has(lower)) {
       deepMerge(config[lower], config[key])
@@ -174,25 +188,31 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   })
 
   // Process only lowercase keys (skip UPPERCASE when lowercase equivalent exists)
-  keys.map(key => {
+  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 || config.TYPOGRAPHY) {
-    try { applyTypographySequence() } catch (e) {
+  if (config.typography || config.TYPOGRAPHY) { // UPPERCASE deprecated
+    try {
+      applyTypographySequence()
+    } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying typography sequence', e)
     }
   }
-  if (config.spacing || config.SPACING) {
-    try { applySpacingSequence() } catch (e) {
+  if (config.spacing || config.SPACING) { // UPPERCASE deprecated
+    try {
+      applySpacingSequence()
+    } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying spacing sequence', e)
     }
   }
-  if (config.timing || config.TIMING) {
-    try { applyTimingSequence() } catch (e) {
+  if (config.timing || config.TIMING) { // UPPERCASE deprecated
+    try {
+      applyTimingSequence()
+    } catch (e) {
       if (CONFIG.verbose) console.warn('Error applying timing sequence', e)
     }
   }

package/src/system/color.js

@@ -26,7 +26,13 @@ export const getColor = (value, key, config) => {
     [name, alpha, tone] = value
   } else {
     const parsed = parseColorToken(value)
-    if (!parsed) return 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

package/src/system/font.js

@@ -33,8 +33,14 @@ export const setFont = (val, key) => {
   } else if (val[0]) {
     fontFace = getFontFaceEach(key, val, CONFIG.files)
   } else {
-    const url = resolveFileUrl(val.url, CONFIG.files) || val.url
-    fontFace = setCustomFontMedia(key, url)
+    const url = Array.isArray(val.url)
+      ? val.url.map((u) => resolveFileUrl(u, CONFIG.files) || u)
+      : resolveFileUrl(val.url, CONFIG.files) || val.url
+    fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+      fontStyle: val.fontStyle,
+      fontDisplay: val.fontDisplay,
+      fontStretch: val.fontStretch
+    })
   }
 
   return { var: CSSvar, value: val, fontFace }

package/src/system/theme.js

@@ -11,6 +11,38 @@ import {
   isArray
 } from '@domql/utils'
 
+// Common CSS named colors — used to distinguish valid CSS color names
+// from unresolved design-system tokens (e.g. 'blackRussian', 'grayMid')
+const CSS_NAMED_COLORS = new Set([
+  'black', 'white', 'red', 'green', 'blue', 'yellow', 'orange', 'purple',
+  'pink', 'brown', 'gray', 'grey', 'cyan', 'magenta', 'lime', 'olive',
+  'navy', 'teal', 'aqua', 'maroon', 'silver', 'fuchsia', 'transparent',
+  'currentColor', 'currentcolor', 'inherit', 'initial', 'unset', 'none',
+  'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque',
+  'blanchedalmond', 'blueviolet', 'burlywood', 'cadetblue', 'chartreuse',
+  'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'darkblue',
+  'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki',
+  'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred',
+  'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey',
+  'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey',
+  'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite',
+  'gold', 'goldenrod', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo',
+  'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon',
+  'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray',
+  'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen',
+  'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow',
+  'limegreen', 'linen', 'mediumaquamarine', 'mediumblue', 'mediumorchid',
+  'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen',
+  'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose',
+  'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid',
+  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip',
+  'peachpuff', 'peru', 'plum', 'powderblue', 'rosybrown', 'royalblue',
+  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna',
+  'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen',
+  'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat',
+  'whitesmoke', 'yellowgreen', 'rebeccapurple'
+])
+
 const setThemeValue = theme => {
   const value = {}
   const { state, media, helpers, ...rest } = theme
@@ -166,6 +198,27 @@ 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)
+  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)
 
@@ -193,12 +246,19 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
       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] = {}
@@ -211,6 +271,12 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
             MEDIA_VARS[mq][autoVar] = color
           }
         }
+
+        // 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
+        }
       } else {
         // Force specific theme — set non-suffixed var directly
         const forced = String(globalTheme).replace(/^'|'$/g, '')
@@ -310,6 +376,8 @@ const recursiveTheme = val => {
         continue
       } else if (symb === ':') {
         obj[`&${param}`] = recursiveTheme(val[param])
+      } else if (symb === '.') {
+        obj[`&${param}`] = recursiveTheme(val[param])
       }
     } else obj[param] = val[param]
   }

package/src/utils/font.js

@@ -2,7 +2,7 @@
 
 export const resolveFileUrl = (url, files) => {
   if (!url || !files) return null
-  try { new URL(url); return null } catch (e) { }
+  try { new URL(url); return null } catch (e) { } // expected: src is not an absolute URL, treating as relative path
   const file = files[url]
   if (file) return file.content && file.content.src
   return null
@@ -30,11 +30,15 @@ export const setFontImport = (url) => `@import url('${url}');`
 export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
 
 export const setCustomFont = (name, url, weight, options = {}) => {
-  const format = getFontFormat(url)
-  const formatStr = format ? ` format('${format}')` : ''
+  const urls = Array.isArray(url) ? url : [url]
+  const srcList = urls.map((u) => {
+    const format = getFontFormat(u)
+    const formatStr = format ? ` format('${format}')` : ''
+    return `url('${u}')${formatStr}`
+  }).join(',\n       ')
   return `
   font-family: '${name}';
-  font-style: normal;${
+  font-style: ${options.fontStyle || 'normal'};${
     weight
       ? `
   font-weight: ${weight};`
@@ -50,7 +54,7 @@ export const setCustomFont = (name, url, weight, options = {}) => {
   font-display: ${options.fontDisplay};`
       : ''
   }
-  src: url('${url}')${formatStr};`
+  src: ${srcList};`
 }
 
 export const setCustomFontMedia = (
@@ -64,9 +68,11 @@ export const setCustomFontMedia = (
 export const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights)
   return keys.map((key) => {
-    const { url, fontWeight } = weights[key]
-    const resolvedUrl = resolveFileUrl(url, files) || url
-    return setCustomFont(name, resolvedUrl, fontWeight)
+    const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key]
+    const resolvedUrl = Array.isArray(url)
+      ? url.map((u) => resolveFileUrl(u, files) || u)
+      : resolveFileUrl(url, files) || url
+    return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch })
   })
 }
 
@@ -88,8 +94,14 @@ export const getFontFaceEachString = (name, weights, files) => {
   }
   const isArr = weights[0]
   if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia)
-  const url = resolveFileUrl(weights.url, files) || weights.url
-  return setCustomFontMedia(name, url)
+  const url = Array.isArray(weights.url)
+    ? weights.url.map((u) => resolveFileUrl(u, files) || u)
+    : resolveFileUrl(weights.url, files) || weights.url
+  return setCustomFontMedia(name, url, weights.fontWeight, {
+    fontStyle: weights.fontStyle,
+    fontDisplay: weights.fontDisplay,
+    fontStretch: weights.fontStretch
+  })
 }
 
 export const getFontFaceString = (LIBRARY, files) => {