@symbo.ls/scratch 3.14.2 → 3.14.3

package/src/system/font.js

@@ -1,66 +0,0 @@
-'use strict'
-
-import { isObject, isArray } from '@symbo.ls/utils'
-import { arrayzeValue } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-
-import {
-  getDefaultOrFirstKey,
-  getFontFaceEach,
-  isGoogleFontsUrl,
-  setCustomFontMedia,
-  setFontImport,
-  resolveFileUrl
-} from '../utils/index.js'
-
-export const setFont = (val, key) => {
-  const CONFIG = getActiveConfig()
-  const CSSvar = `--font-${key}`
-
-  if (!val || (isArray(val) && !val[0])) return
-
-  let fontFace
-  if (val.isVariable) {
-    const url = resolveFileUrl(val.url, CONFIG.files) || val.url
-    if (isGoogleFontsUrl(url)) {
-      fontFace = setFontImport(url)
-    } else {
-      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
-        fontStretch: val.fontStretch,
-        fontDisplay: val.fontDisplay || 'swap'
-      })
-    }
-  } else if (val[0]) {
-    fontFace = getFontFaceEach(key, val, CONFIG.files)
-  } else {
-    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 }
-}
-
-export const getFontFamily = (key, factory) => {
-  const CONFIG = getActiveConfig()
-  const { fontFamily: FONT_FAMILY } = CONFIG
-  return getDefaultOrFirstKey(factory || FONT_FAMILY, key)
-}
-
-export const setFontFamily = (val, key) => {
-  const CONFIG = getActiveConfig()
-  const { fontFamily: FONT_FAMILY, fontFamilyTypes: FONT_FAMILY_TYPES } = CONFIG
-  let { value, type } = val
-  if (val.isDefault) FONT_FAMILY.default = key
-
-  if (isObject(value)) value = arrayzeValue(value)
-
-  const CSSvar = `--font-family-${key}`
-  const str = `${value.join(', ')}, ${FONT_FAMILY_TYPES[type]}`
-  return { var: CSSvar, value: str, arr: value, type }
-}

package/src/system/index.js

@@ -1,12 +0,0 @@
-'use strict'
-
-export * from './color.js'
-export * from './theme.js'
-export * from './font.js'
-export * from './typography.js'
-export * from './spacing.js'
-export * from './shadow.js'
-export * from './timing.js'
-export * from './document.js'
-export * from './svg.js'
-export * from './reset.js'

package/src/system/reset.js

@@ -1,119 +0,0 @@
-'use strict'
-
-import { deepMerge, merge, overwriteDeep } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-import { getMediaTheme } from './theme.js'
-
-export const applyReset = (reset = {}) => {
-  const CONFIG = getActiveConfig()
-
-  const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG
-
-  if (RESET) {
-    if (RESET[':root']) {
-      const configReset = RESET
-      const configTemplates = TYPOGRAPHY.templates
-
-      configReset.body = {
-        ...(CONFIG.useDocumentTheme
-          ? getMediaTheme('document')
-          : {}),
-        ...configTemplates.body
-      }
-      configReset.h1 = configTemplates.h1
-      configReset.h2 = configTemplates.h2
-      configReset.h3 = configTemplates.h3
-      configReset.h4 = configTemplates.h4
-      configReset.h5 = configTemplates.h5
-      configReset.h6 = configTemplates.h6
-    }
-
-    const { body, ...templates } = TYPOGRAPHY.templates
-    const globalTheme = CONFIG.useDocumentTheme
-      ? getMediaTheme('document')
-      : {}
-    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',
-        width: '100%',
-        height: '100%',
-        top: '0',
-        left: '0',
-        margin: '0',
-        WebkitFontSmoothing: 'subpixel-antialiased',
-        scrollBehavior: 'smooth',
-
-        ...globalTheme,
-
-        fontSize: TYPOGRAPHY.unit
-          ? (TYPOGRAPHY.base / TYPOGRAPHY.browserDefault) + TYPOGRAPHY.unit
-          : TYPOGRAPHY.browserDefault + 'px',
-
-        fontFamily: DOCUMENT.fontFamily,
-        lineHeight: DOCUMENT.lineHeight
-      },
-
-      body: {
-        boxSizing: 'border-box',
-        height: '100%',
-        margin: 0,
-        fontFamily: DOCUMENT.fontFamily,
-
-        fontSize:
-          TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.unit.default,
-
-        ...templates,
-        ...body
-      },
-
-      a: {
-        color: 'currentColor'
-      },
-
-      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
-      }
-    })
-  }
-}

package/src/system/shadow.js

@@ -1,107 +0,0 @@
-'use strict'
-
-import { getActiveConfig } from '../factory.js'
-import { getColor } from './color.js'
-import { getSpacingByKey } from './spacing.js'
-import { isResolvedColor, isCSSVar, splitTopLevelCommas, CSS_NATIVE_COLOR_REGEX } from '../utils/color.js'
-
-import {
-  isObject,
-  isString,
-  isArray
-} from '@symbo.ls/utils'
-
-export const setShadow = (value, key, suffix, prefers) => {
-  const CONFIG = getActiveConfig()
-
-  if (isArray(value)) {
-    return {
-      '@light': setShadow(value[0], key, 'light'),
-      '@dark': setShadow(value[1], key, 'dark')
-    }
-  }
-
-  if (isObject(value)) {
-    const obj = {}
-    for (const variant in value) {
-      obj[variant] = setShadow(
-        value[variant],
-        key,
-        variant.startsWith('@') ? variant.slice(1) : variant
-      )
-    }
-    return obj
-  }
-
-  if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
-    // Split multiple shadows by commas (CSS standard), respecting parentheses
-    value = splitTopLevelCommas(value).map(shadow => {
-      shadow = shadow.trim()
-      // Each shadow: space-separated tokens
-      return shadow.split(/\s+/).map(v => {
-        v = v.trim()
-        if (!v) return ''
-        if (v.startsWith('--')) return `var(${v})`
-        const color = getColor(v)
-        if (isResolvedColor(color)) return color
-        if (/^\d/.test(v) || v === '0' || v.includes('px') || v.slice(-2) === 'em') return v
-        if (v === 'inset' || v === 'none') return v
-        const spacing = getSpacingByKey(v, 'shadow')
-        if (spacing && spacing.shadow) return spacing.shadow
-        return v
-      }).join(' ')
-    }).join(', ')
-  }
-
-  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + '-' : ''
-  const CSSVar = `--${vp}shadow-${key}` + (suffix ? `-${suffix}` : '')
-
-  if (CONFIG.useVariable) { CONFIG.cssVars[CSSVar] = value }
-
-  return {
-    var: CSSVar,
-    value
-  }
-}
-
-export const getShadow = (value, globalTheme) => {
-  const CONFIG = getActiveConfig()
-  if (!globalTheme) globalTheme = CONFIG.globalTheme
-  if (!isString(value)) {
-    if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
-    return
-  }
-
-  if (isCSSVar(value)) return `var(${value})`
-
-  const [name] = isArray(value) ? value : value.split(' ')
-
-  const SHADOW = CONFIG.shadow
-  const val = SHADOW[name]
-  const isObj = isObject(val)
-
-  if (!val) {
-    if (CONFIG.verbose) console.warn('Can\'t find color ', name)
-    return value
-  }
-
-  if (globalTheme) {
-    if (val[globalTheme]) return val[globalTheme].value
-    else if (CONFIG.verbose) console.warn(value, ' - does not have ', globalTheme)
-  }
-
-  if (isObj && val.value) return val.value
-
-  if (isObj) {
-    const obj = {}
-    for (const mediaName in val) {
-      const query = CONFIG.media[mediaName.slice(1)]
-      const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
-      obj[media] = val.value
-    }
-    return obj
-  }
-
-  if (CONFIG.verbose) console.warn('Can\'t find color', value)
-  return value
-}

package/src/system/spacing.js

@@ -1,152 +0,0 @@
-'use strict'
-
-import { arrayzeValue } from '@symbo.ls/utils'
-import { isArray, isString, merge } from '@symbo.ls/utils'
-
-import { getActiveConfig } from '../factory.js'
-import {
-  CSS_UNITS,
-  applyMediaSequenceVars,
-  applySequenceVars,
-  generateSequence,
-  getFnPrefixAndValue,
-  getSequenceValuePropertyPair
-} from '../utils/index.js'
-
-const runThroughMedia = (FACTORY) => {
-  for (const prop in FACTORY) {
-    const mediaProps = FACTORY[prop]
-
-    const isMediaName = prop.slice(0, 1) === '@'
-    if (!isMediaName) continue
-
-    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY
-
-    merge(mediaProps, {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit,
-      sequence: {},
-      scales: {},
-      templates: {},
-      vars: {}
-    })
-
-    generateSequence(mediaProps)
-    applyMediaSequenceVars(FACTORY, prop)
-  }
-}
-
-export const checkIfBoxSize = (propertyName) => {
-  const prop = propertyName.toLowerCase()
-  const includesWidth = prop.includes('width') || prop.includes('height')
-  const includesBorder = prop.includes('border') || prop.includes('outline')
-  return includesWidth && !includesBorder
-}
-
-export const applySpacingSequence = () => {
-  const CONFIG = getActiveConfig()
-  const { spacing: SPACING } = CONFIG
-  generateSequence(SPACING)
-  applySequenceVars(SPACING)
-  runThroughMedia(SPACING)
-}
-
-const getSequence = (sequenceProps) => {
-  const CONFIG = getActiveConfig()
-  const { spacing: SPACING } = CONFIG
-  if (!sequenceProps || !sequenceProps.sequence) return SPACING
-  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0
-  return hasGenerated ? sequenceProps : generateSequence(sequenceProps)
-}
-
-export const getSpacingByKey = (
-  value,
-  propertyName = 'padding',
-  sequenceProps,
-  fnPrefix
-) => {
-  const sequence = getSequence(sequenceProps)
-
-  if (isString(value)) {
-    if (!fnPrefix && value.includes('(')) {
-      const fnArray = getFnPrefixAndValue(value)
-      fnPrefix = fnArray[0]
-      value = fnArray[1]
-    }
-  }
-
-  const stack = fnPrefix ? [value] : arrayzeValue(value)
-  if (!isArray(stack)) return
-
-  if (stack.length > 1) {
-    let suffix = ''
-    if (propertyName === 'borderWidth') {
-      propertyName = 'border'
-      suffix = 'Width'
-    }
-
-    const directions = {
-      2: ['Block', 'Inline'],
-      3: ['BlockStart', 'Inline', 'BlockEnd'],
-      4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
-    }
-
-    const wrapSequenceValueByDirection = (direction, i) =>
-      getSequenceValuePropertyPair(
-        stack[i],
-        propertyName + direction + suffix,
-        sequence,
-        fnPrefix
-      )
-
-    return directions[stack.length].map((dir, key) =>
-      wrapSequenceValueByDirection(dir, key)
-    )
-  }
-
-  return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix)
-}
-
-export const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
-  const CONFIG = getActiveConfig()
-  const { spacing: SPACING } = CONFIG
-
-  let value = val || props[propertyName]
-
-  if (!fnPrefix && isString(value) && value.includes('(')) {
-    const fnArr = getFnPrefixAndValue(value)
-    fnPrefix = fnArr[0]
-    value = fnArr[1]
-  }
-
-  if (props.spacingRatio) {
-    const sequenceProps = applyCustomSequence(props)
-    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix)
-  }
-
-  return getSpacingByKey(value, propertyName, SPACING, fnPrefix)
-}
-
-export const splitSpacedValue = (val) => {
-  const addDefault = (v) => {
-    const isSymbol = ['+', '-', '*', '/'].includes(v)
-    const hasUnits = CSS_UNITS.some((unit) => val.includes(unit))
-    if (isSymbol || hasUnits) return v
-    const isSingleLetter = v.length < 3 && /[A-Z]/.test(v)
-    if (isSingleLetter) return v + '_default'
-    return v
-  }
-  return val
-    .split(',')
-    .map((v) => v.trim())
-    .map(addDefault)
-    .join(',')
-    .split(' ')
-    .map(addDefault)
-    .join(' ')
-}

package/src/system/svg.js

@@ -1,132 +0,0 @@
-'use strict'
-
-import { document } from '@symbo.ls/utils'
-import { generateSprite, convertSvgToSymbol } from '../utils/index.js'
-import { getActiveConfig } from '../factory.js'
-
-const DEF_OPTIONS = {
-  document
-}
-
-export const setSVG = (val, key) => {
-  const CONFIG = getActiveConfig()
-  if (!val) {
-    if (CONFIG.verbose) console.warn('setSVG: val is not defined', key)
-    return
-  }
-  if (CONFIG.useSvgSprite) {
-    return convertSvgToSymbol(key, val)
-  } return val
-}
-
-export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-  const CONFIG = getActiveConfig()
-
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.svg
-  for (const key in LIBRARY) lib[key] = LIBRARY[key]
-
-  appendSVG(lib, options)
-}
-
-export const setSvgIcon = (val, key) => {
-  const CONFIG = getActiveConfig()
-  if (CONFIG.useIconSprite && !CONFIG.semanticIcons?.[key]) {
-    return setSVG(val, key)
-  } return val
-}
-
-export const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-  const CONFIG = getActiveConfig()
-
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.icons
-  for (const key in LIBRARY) lib[key] = LIBRARY[key]
-
-  appendSVG(lib, options)
-}
-
-const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
-  if (!doc || !doc.createElementNS) return
-  const svgElem = doc.createElementNS('http://www.w3.org/2000/svg', 'svg')
-  if (options.isRoot) {
-    svgElem.setAttribute('aria-hidden', 'true')
-    svgElem.setAttribute('width', '0')
-    svgElem.setAttribute('height', '0')
-    svgElem.setAttribute('style', 'position:absolute')
-    svgElem.setAttribute('id', 'svgSprite')
-  }
-  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
-
-  if (!doc || !doc.documentElement) {
-    if (CONFIG.verbose) {
-      console.warn('To append SVG sprites it should be run in browser environment')
-    }
-    return generateSprite(lib)
-  }
-
-  const exists = doc.querySelector('#svgSprite')
-  const SVGsprite = generateSprite(lib)
-
-  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 (parsed) {
-      moveChildren(doc, parsed, exists)
-    } else if (doc.body.insertAdjacentHTML) {
-      exists.insertAdjacentHTML('beforeend', SVGsprite)
-    } else {
-      const tempSVG = createSVGSpriteElement(doc, { isRoot: false })
-      tempSVG.innerHTML = SVGsprite
-      exists.append(...tempSVG.children)
-    }
-  } else {
-    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)
-      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-        svgSpriteDOM.innerHTML = SVGsprite
-        doc.body.prepend(svgSpriteDOM)
-      }
-    }
-  }
-
-}