@symbo.ls/scratch 3.14.1 → 3.14.3

package/src/system/theme.js

@@ -1,454 +0,0 @@
-'use strict'
-
-import { getColor } from './color.js'
-import { getActiveConfig } from '../factory.js'
-import { isCSSVar } from '../utils/color.js'
-
-import {
-  isObject,
-  isString,
-  isObjectLike,
-  isArray
-} from '@symbo.ls/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'
-])
-
-// 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
-  const keys = Object.keys(rest)
-  keys.map(key => {
-    const conditions = ['color', 'Color', 'background', 'border']
-    const isColor = conditions.some(k => key.includes(k))
-    return (value[key] = isColor ? getColor(theme[key]) : theme[key])
-  })
-  return value
-}
-
-const getThemeValue = theme => {
-  if (theme.value) return theme.value
-  theme.value = setThemeValue(theme)
-  return theme.value
-}
-
-export const getTheme = (value, modifier) => {
-  const CONFIG = getActiveConfig()
-  if (CONFIG.useVariable) return getMediaTheme(value, modifier)
-  const THEME = CONFIG.theme
-
-  if (isString(value)) {
-    const [theme, subtheme] = value.split(' ')
-    const isOurTheme = THEME[theme]
-    if (isOurTheme) {
-      if (!subtheme && !modifier) return getThemeValue(isOurTheme)
-      value = [theme, subtheme || modifier]
-    }
-  }
-
-  if (isObjectLike(value) && value[1]) {
-    const themeName = value[0]
-    const subThemeName = value[1]
-    const { helpers, media, state } = THEME[themeName]
-
-    if (media && media[subThemeName]) return getThemeValue(media[subThemeName])
-    if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName])
-    if (state && state[subThemeName]) return getThemeValue(state[subThemeName])
-  } else if (isObject(value)) return setThemeValue(value)
-}
-
-const setInverseTheme = (theme, variant, value) => {
-  if (isObject(variant)) {
-    theme.variants.inverse.value = setThemeValue(variant)
-  } else if (variant === true) {
-    const { color, background } = value
-    theme.variants.inverse = {
-      value: {
-        color: background,
-        background: color
-      }
-    }
-  }
-}
-
-const setPseudo = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant)
-  themeValue[`&:${key}`] = result
-  if (isObject(variant) && !variant.value) variant.value = result
-}
-
-const setSelectors = (theme, value) => {
-  const { state } = theme
-  if (!state) return
-  const keys = Object.keys(state)
-  keys.map(key => {
-    const variant = state[key]
-    setPseudo(theme, key, variant, value)
-    return theme
-  })
-  return theme
-}
-
-const setPrefersScheme = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant)
-  themeValue[`@media (prefers-color-scheme: ${key})`] = result
-  if (isObject(variant) && !variant.value) variant.value = result
-}
-
-const setMedia = (theme, value) => {
-  const { media } = theme
-  if (!media) return
-  const keys = Object.keys(media)
-  keys.map(key => {
-    const variant = media[key]
-    if (key === 'dark' || key === 'light') setPrefersScheme(theme, key, variant, value)
-    if (key === 'inverse') setInverseTheme(theme, variant, value)
-    return theme
-  })
-  return theme
-}
-
-const setHelpers = (theme, value) => {
-  const CONFIG = getActiveConfig()
-  const { helpers } = theme
-  if (!helpers) return
-  const keys = Object.keys(helpers)
-  keys.map(key => {
-    const helper = helpers[key]
-    if (isString(helper)) helpers[key] = CONFIG.theme[helper]
-    else getThemeValue(helpers[key])
-    return theme
-  })
-  return theme
-}
-
-
-
-export const setTheme = (val, key) => {
-  const CONFIG = getActiveConfig()
-  if (CONFIG.useVariable) return setMediaTheme(val, key)
-
-  const { state, media, helpers } = val
-  const value = setThemeValue(val, key)
-  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
-  const CSSvar = `--${vp}theme-${key}`
-
-  setSelectors(val, value)
-  setMedia(val, value)
-  setHelpers(val, value)
-
-  return { var: CSSvar, value, state, media, helpers }
-}
-
-const keySetters = { // eslint-disable-line
-  '@': (theme, value) => setMedia(theme, value),
-  ':': (theme, value) => setSelectors(theme, value),
-  '.': (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 { cssVars: CSS_VARS } = CONFIG
-  if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {}
-  const MEDIA_VARS = CONFIG.cssMediaVars
-  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)
-  }
-
-  // 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()
-  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)
-      }
-    }
-  }
-
-  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.
-      //
-      // 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
-
-        // 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
-        }
-
-        // `[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] }
-    }
-  }
-
-  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 { cssVars: 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 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 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
-          theme[param] = `var(${CSSVar})`
-        } else {
-          theme[param] = color
-        }
-        theme[`.${param}`] = { [param]: theme[param] }
-      }
-    }
-
-    // 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
-      }
-    }
-  }
-
-  if (isString(val) && isCSSVar(val)) {
-    const THEME = CONFIG.theme
-    const value = THEME[val.slice(2)]
-    const getReferenced = getMediaTheme(value, prefers)
-    return getReferenced
-  }
-
-  return theme
-}
-
-const recursiveTheme = val => {
-  const CONFIG = getActiveConfig()
-  const obj = {}
-  for (const param in val) {
-    const symb = param.slice(0, 1)
-    if (isObjectLike(val[param])) {
-      if (symb === '@') {
-        // Skip all @-schemes — CSS vars + data-theme handle switching
-        continue
-      } else if (symb === ':') {
-        obj[`&${param}`] = recursiveTheme(val[param])
-      } else if (symb === '.') {
-        obj[`&${param}`] = recursiveTheme(val[param])
-      }
-    } else obj[param] = val[param]
-  }
-  return obj
-}
-
-const findModifierFromArray = (val, modifierArray) => {
-  const currentMod = modifierArray.shift()
-  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray)
-  return val
-}
-
-const findModifier = (val, modifier) => {
-  if (isArray(modifier)) return findModifierFromArray(val, modifier)
-  else if (isString(modifier) && val[modifier]) return val[modifier]
-  else return val
-}
-
-const checkForReference = (val, callback) => {
-  if (isString(val) && isCSSVar(val)) return getMediaTheme(val.slice(2))
-  return val
-}
-
-const checkThemeReference = (val) => checkForReference(val, checkThemeReference) // eslint-disable-line
-
-export const getMediaTheme = (value, modifier) => {
-  const activeConfig = getActiveConfig()
-
-  if (isString(value) && isCSSVar(value)) {
-    value = getMediaTheme(value.slice(2))
-  }
-
-  if (!value || !isString(value)) {
-    if (activeConfig.verbose) {
-      console.warn(`${value} - Theme is not a string`)
-    }
-    return
-  }
-
-  const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(' ')
-  let themeValue = activeConfig.theme[themeName]
-
-  if (themeValue && themeModifiers.length) {
-    themeValue = findModifier(themeValue, themeModifiers)
-  } else if (themeValue && modifier) {
-    themeValue = findModifier(themeValue, modifier)
-  }
-
-  const resolvedTheme = recursiveTheme(themeValue)
-  return resolvedTheme
-}

package/src/system/timing.js

@@ -1,32 +0,0 @@
-'use strict'
-
-import { toCamelCase } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-import {
-  applySequenceVars,
-  generateSequence,
-  getSequenceValuePropertyPair
-} from '../utils/index.js'
-
-export const applyTimingSequence = () => {
-  const CONFIG = getActiveConfig()
-  const { timing: TIMING } = CONFIG
-  generateSequence(TIMING)
-  applySequenceVars(TIMING)
-}
-
-export const getTimingFunction = value => {
-  const CONFIG = getActiveConfig()
-  const { timing: TIMING } = CONFIG
-  return TIMING[value] || TIMING[toCamelCase(value)] || value
-}
-
-export const getTimingByKey = (value, property = 'timing') => {
-  const CONFIG = getActiveConfig()
-  const { timing: TIMING } = CONFIG
-  return getSequenceValuePropertyPair(
-    value,
-    property,
-    TIMING
-  )
-}

package/src/system/typography.js

@@ -1,110 +0,0 @@
-'use strict'
-
-import { merge } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-
-import {
-  applyMediaSequenceVars,
-  applySequenceVars,
-  findHeadings,
-  generateSequence,
-  getSequenceValuePropertyPair
-} from '../utils/index.js'
-
-export const runThroughMedia = FACTORY => {
-  const CONFIG = getActiveConfig()
-  const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG
-
-  for (const prop in FACTORY) {
-    const isPropMedia = prop.slice(0, 1) === '@'
-    const mediaValue = FACTORY[prop]
-    if (!isPropMedia) continue
-
-    const { mediaRegenerate } = FACTORY
-    const mediaName = prop.slice(1)
-
-    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY
-
-    merge(mediaValue, {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    })
-
-    const VIEWPORT_UNITS = new Set(['vw', 'vh', 'vmin', 'vmax', 'svw', 'svh', 'lvw', 'lvh', 'dvw', 'dvh'])
-    const inheritedUnit = mediaValue.unit || unit
-    const mediaUnit = (!mediaValue.unit && VIEWPORT_UNITS.has(unit)) ? 'rem' : inheritedUnit
-    const query = MEDIA[mediaName]
-    const media =
-      '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
-    TYPOGRAPHY.templates[media] = {
-      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + mediaUnit
-    }
-
-    if (!mediaRegenerate) {
-      merge(mediaValue, {
-        sequence: {},
-        scales: {},
-        vars: {}
-      })
-      generateSequence(mediaValue)
-      applyMediaSequenceVars(FACTORY, prop)
-      continue
-    }
-
-    merge(mediaValue, {
-      sequence: {},
-      scales: {},
-      templates: {},
-      vars: {}
-    })
-
-    generateSequence(mediaValue)
-
-    applyMediaSequenceVars(FACTORY, prop)
-  }
-}
-
-export const applyHeadings = props => {
-  const CONFIG = getActiveConfig()
-  if (props.h1Matches) {
-    const unit = props.unit
-    const HEADINGS = findHeadings(props)
-    const { templates } = props
-    for (const k in HEADINGS) {
-      const headerName = `h${parseInt(k) + 1}`
-      const headerStyle = templates[headerName]
-      templates[headerName] = {
-        fontSize: CONFIG.useVariable
-          ? `var(${HEADINGS[k]?.variable})`
-          : `${HEADINGS[k]?.scaling}${unit}`,
-        margin: headerStyle ? headerStyle.margin : 0,
-        lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
-        letterSpacing: headerStyle
-          ? headerStyle.letterSpacing
-          : props.letterSpacing,
-        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
-      }
-    }
-  }
-}
-
-export const applyTypographySequence = () => {
-  const CONFIG = getActiveConfig()
-  const { typography: TYPOGRAPHY } = CONFIG
-
-  generateSequence(TYPOGRAPHY)
-  applyHeadings(TYPOGRAPHY)
-  applySequenceVars(TYPOGRAPHY)
-  runThroughMedia(TYPOGRAPHY)
-}
-
-export const getFontSizeByKey = value => {
-  const CONFIG = getActiveConfig()
-  const { typography: TYPOGRAPHY } = CONFIG
-  return getSequenceValuePropertyPair(value, 'fontSize', TYPOGRAPHY)
-}

package/src/tests/index.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export const testWCAGAA = (colorA, colorB) => {}
-export const testWCAGAAA = (colorA, colorB) => {}