@symbo.ls/scratch 3.14.2 → 3.14.3

package/src/transforms/index.js

@@ -1,270 +0,0 @@
-'use strict'
-
-import { isString, isObject, exec } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-import {
-  getSpacingByKey,
-  getColor,
-  getShadow,
-  getMediaColor,
-  getTimingByKey,
-  getTimingFunction,
-  getSpacingBasedOnRatio,
-  checkIfBoxSize,
-  splitSpacedValue
-} from '../system/index.js'
-import {
-  getFnPrefixAndValue,
-  isResolvedColor,
-  isCSSVar,
-  CSS_NATIVE_COLOR_REGEX,
-  splitTopLevelCommas,
-  parseColorToken
-} from '../utils/index.js'
-
-const BORDER_STYLES = new Set([
-  'none', 'hidden', 'dotted', 'dashed', 'solid', 'double',
-  'groove', 'ridge', 'inset', 'outset', 'initial'
-])
-
-const GRADIENT_KEYWORDS = new Set([
-  'to', 'top', 'bottom', 'left', 'right', 'center', 'at',
-  'circle', 'ellipse', 'closest-side', 'farthest-side',
-  'closest-corner', 'farthest-corner'
-])
-const isBorderStyle = (str) => BORDER_STYLES.has(str)
-
-export const transformBorder = (border) => {
-  const str = border + ''
-
-  // CSS passthrough: native CSS color syntax
-  if (CSS_NATIVE_COLOR_REGEX.test(str)) return str
-
-  // Simple CSS keywords
-  const trimmed = str.trim()
-  if (trimmed === 'none' || trimmed === '0' || trimmed === 'initial' || trimmed === 'inherit' || trimmed === 'unset') return str
-
-  // Space-separated tokens (CSS-like syntax)
-  const tokens = str.split(/\s+/)
-
-  return tokens
-    .map((v) => {
-      v = v.trim()
-      if (!v) return ''
-      if (isCSSVar(v)) return `var(${v})`
-      if (isBorderStyle(v)) return v
-      if (/^\d/.test(v) || v === '0') return v
-      // Try color resolution
-      const color = getColor(v)
-      if (isResolvedColor(color)) return color
-      // Try spacing key
-      const spacing = getSpacingByKey(v, 'border')
-      if (spacing && spacing.border) return spacing.border
-      return v
-    })
-    .join(' ')
-}
-
-export const transformTextStroke = (stroke) => {
-  // CSS passthrough
-  if (CSS_NATIVE_COLOR_REGEX.test(stroke)) return stroke
-
-  return stroke
-    .split(/\s+/)
-    .map((v) => {
-      v = v.trim()
-      if (!v) return ''
-      if (isCSSVar(v)) return `var(${v})`
-      if (/^\d/.test(v) || v.includes('px') || v === '0') return v
-      const color = getColor(v)
-      if (isResolvedColor(color)) return color
-      return v
-    })
-    .join(' ')
-}
-
-export const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
-
-export const transformBoxShadow = (shadows, globalTheme) => {
-  // CSS passthrough: native CSS color syntax
-  if (CSS_NATIVE_COLOR_REGEX.test(shadows)) return shadows
-
-  // Split multiple shadows by commas (CSS standard), respecting parentheses
-  return splitTopLevelCommas(shadows)
-    .map((shadow) => {
-      shadow = shadow.trim()
-      if (!shadow) return ''
-
-      // Each shadow: space-separated tokens
-      return shadow.split(/\s+/)
-        .map((v) => {
-          v = v.trim()
-          if (!v) return ''
-          if (isCSSVar(v)) return `var(${v})`
-          if (v === 'inset' || v === 'none') return v
-
-          // Try color resolution
-          const color = getColor(v)
-          if (isResolvedColor(color)) {
-            const mediaColor = getMediaColor(v, globalTheme)
-            if (isObject(mediaColor))
-              return Object.values(mediaColor).filter((c) =>
-                c.includes(': ' + globalTheme)
-              )[0]
-            return mediaColor
-          }
-
-          // CSS unit values
-          if (/^\d/.test(v) || v === '0' || v.includes('px') || v.slice(-2) === 'em') return v
-
-          // Spacing key
-          const spacing = getSpacingByKey(v, 'shadow')
-          if (spacing && spacing.shadow) return spacing.shadow
-
-          return v
-        })
-        .join(' ')
-    })
-    .join(', ')
-}
-
-/**
- * Resolve Symbols color tokens inside a CSS gradient string.
- * e.g. 'linear-gradient(to bottom, white.97 65%, white.0 100%)'
- * →    'linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 65%, rgba(255, 255, 255, 0.0) 100%)'
- */
-export const resolveColorsInGradient = (gradient, globalTheme) => {
-  // Find the opening paren after the gradient type
-  const parenStart = gradient.indexOf('(')
-  if (parenStart === -1) return gradient
-
-  const prefix = gradient.slice(0, parenStart + 1)
-  const inner = gradient.slice(parenStart + 1, gradient.lastIndexOf(')'))
-  const suffix = ')'
-
-  // Split by top-level commas (respects nested rgba() etc.)
-  const segments = splitTopLevelCommas(inner)
-
-  const resolved = segments.map((segment) => {
-    segment = segment.trim()
-    // Split segment into space-separated tokens
-    const tokens = segment.split(/\s+/)
-
-    return tokens.map((token) => {
-      if (!token) return token
-      // Skip CSS values: percentages, degrees, direction keywords, native colors
-      if (/^\d/.test(token) || token === '0') return token
-      if (GRADIENT_KEYWORDS.has(token)) return token
-      if (token === 'transparent') return token
-      if (CSS_NATIVE_COLOR_REGEX.test(token)) return token
-
-      // Try to resolve as a Symbols color token
-      const color = getColor(token)
-      if (isResolvedColor(color)) return color
-
-      return token
-    }).join(' ')
-  })
-
-  return prefix + resolved.join(', ') + suffix
-}
-
-export const transformBackgroundImage = (backgroundImage, globalTheme) => {
-  const CONFIG = getActiveConfig()
-  return backgroundImage
-    .split(', ')
-    .map((v) => {
-      if (isCSSVar(v)) return `var(${v})`
-      if (v.includes('url')) return v
-      if (v.includes('gradient')) return resolveColorsInGradient(v, globalTheme)
-      else if (CONFIG.gradient[backgroundImage]) {
-        return {
-          backgroundImage: getMediaColor(
-            backgroundImage,
-            globalTheme || CONFIG.globalTheme
-          )
-        }
-      } else if (v.includes('/') || v.startsWith('http') || (v.includes('.') && !parseColorToken(v)))
-        return `url(${v})`
-      return v
-    })
-    .join(' ')
-}
-
-export const transfromGap = (gap) =>
-  isString(gap) &&
-  gap
-    .split(' ')
-    .map((v) => getSpacingByKey(v, 'gap').gap)
-    .join(' ')
-
-export const transformTransition = (transition) => {
-  const arr = transition.split(' ')
-
-  if (!arr.length) return transition
-
-  return arr
-    .map((v) => {
-      if (isCSSVar(v)) return `var(${v})`
-      if (v.length < 3 || v.includes('ms')) {
-        const mapWithSequence = getTimingByKey(v)
-        return mapWithSequence.timing || v
-      }
-      if (getTimingFunction(v)) return getTimingFunction(v)
-      return v
-    })
-    .join(' ')
-}
-
-export const transformDuration = (duration, props, propertyName) => {
-  if (!isString(duration)) return
-  return duration
-    .split(',')
-    .map((v) => getTimingByKey(v).timing || v)
-    .join(',')
-}
-
-export const splitTransition = (transition) => {
-  const arr = transition.split(',')
-  if (!arr.length) return
-  return arr.map(transformTransition).join(',')
-}
-
-export function transformSize(propertyName, val, props = {}, opts = {}) {
-  let value = exec.call(this, val || props[propertyName])
-
-  if (value === undefined || value === null) return
-
-  let fnPrefix
-  if (isString(value)) {
-    // has function prefix
-    if (value.includes('(')) {
-      const fnArr = getFnPrefixAndValue(value)
-      fnPrefix = fnArr[0]
-      value = fnArr[1]
-    }
-
-    const shouldScaleBoxSize = props.scaleBoxSize
-    const isBoxSize = checkIfBoxSize(propertyName)
-    if (!shouldScaleBoxSize && isBoxSize && !opts.ratio) {
-      value = splitSpacedValue(value)
-    }
-  }
-
-  return opts.ratio
-    ? getSpacingBasedOnRatio(props, propertyName, value, fnPrefix)
-    : getSpacingByKey(value, propertyName, undefined, fnPrefix)
-}
-
-export const transformSizeRatio = (propertyName, val = null, props) => {
-  return transformSize(propertyName, val, props, {
-    ratio: true
-  })
-}
-
-export const transformBorderRadius = (radius, props, propertyName) => {
-  if (!isString(radius)) return
-  return {
-    borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ')
-  }
-}

package/src/utils/color.js

@@ -1,269 +0,0 @@
-'use strict'
-
-import {
-  document,
-  window,
-  isString,
-  isNumber,
-  isNotProduction
-} from '@symbo.ls/utils'
-
-export const colorStringToRgbaArray = color => {
-  if (color === '') return [0, 0, 0, 0]
-  if (color.toLowerCase() === 'transparent') return [0, 0, 0, 0]
-
-  // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
-  if (color[0] === '#') {
-    if (color.length < 7) {
-      color =
-        '#' +
-        color[1] +
-        color[1] +
-        color[2] +
-        color[2] +
-        color[3] +
-        color[3] +
-        (color.length > 4 ? color[4] + color[4] : '')
-    }
-    return [
-      parseInt(color.substr(1, 2), 16),
-      parseInt(color.substr(3, 2), 16),
-      parseInt(color.substr(5, 2), 16),
-      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
-    ]
-  }
-
-  // convert named colors
-  if (color.indexOf('rgb') === -1) {
-    if (document && window) {
-      // intentionally use unknown tag to lower chances of css rule override with !important
-      const elem = document.body.appendChild(document.createElement('fictum'))
-      // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
-      const flag = 'rgb(1, 2, 3)'
-      elem.style.color = flag
-      // color set failed - some monstrous css rule is probably taking over the color of our object
-      if (elem.style.color !== flag) {
-        document.body.removeChild(elem)
-        return
-      }
-      elem.style.color = color
-      if (elem.style.color === flag || elem.style.color === '') {
-        document.body.removeChild(elem)
-        return [0, 0, 0, 0] // color parse failed
-      }
-      color = window.getComputedStyle(elem).color
-      document.body.removeChild(elem)
-    }
-  }
-
-  // convert 'rgb(R,G,B)' to 'rgb(R,G,B,A)' which looks awful but will pass the regxep below
-  if (color.indexOf('rgb') === 0) {
-    if (color.indexOf('rgba') === -1) color = `${color}, 1`
-    return color.match(/[\.\d]+/g).map(a => +a) // eslint-disable-line
-  }
-
-  return [0, 0, 0, 0]
-}
-
-export const mixTwoColors = (colorA, colorB, range = 0.5) => {
-  colorA = colorStringToRgbaArray(colorA)
-  colorB = colorStringToRgbaArray(colorB)
-  return mixTwoRgba(colorA, colorB, range)
-}
-
-export const hexToRgb = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
-  return `rgb(${r},${g},${b})`
-}
-
-export const hexToRgbArray = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
-  return [r, g, b]
-}
-
-export const rgbToHex = (r, g, b) => {
-  return '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)
-}
-
-export const rgbArrayToHex = ([r, g, b]) => {
-  return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
-}
-
-export const hexToRgba = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16))
-  return `rgba(${r},${g},${b},${alpha})`
-}
-
-export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
-  const arr = []
-  for (let i = 0; i < 3; i++) {
-    arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range)
-  }
-  return `rgb(${arr})`
-}
-
-export const changeLightness = (delta, hsl) => {
-  const [hue, saturation, lightness] = hsl
-
-  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)))
-
-  return [hue, saturation, newLightness]
-}
-
-export const rgbToHSL = (r, g, b) => {
-  const a = Math.max(r, g, b)
-  const n = a - Math.min(r, g, b)
-  const f = 1 - Math.abs(a + a - n - 1)
-  const h =
-    n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n) //eslint-disable-line
-  return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
-}
-
-export const hslToRgb = (
-  h,
-  s,
-  l,
-  a = s * Math.min(l, 1 - l),
-  f = (n, k = (n + h / 30) % 12) =>
-    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
-) => [f(0), f(8), f(4)]
-
-export const getColorShade = (col, amt) => {
-  const num = parseInt(col, 16)
-
-  let r = (num >> 16) + amt
-
-  if (r > 255) r = 255
-  else if (r < 0) r = 0
-
-  let b = ((num >> 8) & 0x00ff) + amt
-
-  if (b > 255) b = 255
-  else if (b < 0) b = 0
-
-  let g = (num & 0x0000ff) + amt
-
-  if (g > 255) g = 255
-  else if (g < 0) g = 0
-
-  return ((g | (b << 8) | (r << 16)) + 0x1000000).toString(16).slice(1)
-}
-
-export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
-  const arr = []
-  for (let i = 0; i < 4; i++) {
-    const round = i === 3 ? x => x : Math.round
-    arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range)
-  }
-  return `rgba(${arr})`
-}
-
-export const opacify = (color, opacity) => {
-  const arr = colorStringToRgbaArray(color)
-  if (!arr) {
-    if (isNotProduction()) console.warn(color + ' color is not rgba')
-    return
-  }
-  arr[3] = opacity
-  return `rgba(${arr})`
-}
-
-// Check if value is a CSS custom property reference (starts with --)
-export const isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45
-
-// Regex for CSS native color values - signals passthrough
-export const CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/
-
-// Regex for Symbols color token: colorName[.opacity][+/-/=tone]
-// Supports hyphenated names like 'highlight-reversed', 'canvas-card', 'line-highlight'
-// +N or -N = relative shade, =N = absolute lightness percentage
-const COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/
-
-/**
- * Parse a color token string into its components.
- * Returns { name, alpha, tone } for valid tokens,
- * { passthrough: value } for CSS native values,
- * or null for non-color tokens (e.g. '10px', '0')
- *
- * Tone prefixes:
- *   +N  relative shade (add N to RGB)
- *   -N  relative shade (subtract N from RGB)
- *   =N  absolute lightness (set HSL lightness to N%)
- */
-export const parseColorToken = (value) => {
-  if (!isString(value)) return null
-
-  // CSS native color passthrough
-  if (CSS_NATIVE_COLOR_REGEX.test(value)) return { passthrough: value }
-
-  // CSS var passthrough
-  if (isCSSVar(value)) return { cssVar: value }
-
-  const match = value.match(COLOR_TOKEN_REGEX)
-  if (!match) return null
-
-  const [, name, alphaDigits, rawTone] = match
-  const alpha = alphaDigits !== undefined ? `0.${alphaDigits}` : undefined
-  // Strip '=' prefix for absolute tones — getRgbTone handles unsigned values as absolute
-  const tone = rawTone && rawTone[0] === '=' ? rawTone.slice(1) : rawTone
-
-  return { name, alpha, tone }
-}
-
-/**
- * Check if a getColor() result is a resolved CSS color
- * (as opposed to the original unresolved value being returned)
- */
-export const isResolvedColor = (result) => {
-  return isString(result) && (
-    result.includes('rgb') ||
-    result.includes('var(') ||
-    result.includes('#')
-  )
-}
-
-/**
- * Split a string by commas, respecting parenthesized groups.
- * e.g. 'rgba(0,0,0,0.1), white.5 0 A' → ['rgba(0,0,0,0.1)', ' white.5 0 A']
- */
-export const splitTopLevelCommas = (value) => {
-  const result = []
-  let current = ''
-  let depth = 0
-
-  for (const char of value) {
-    if (char === '(') depth += 1
-    else if (char === ')' && depth > 0) depth -= 1
-
-    if (char === ',' && depth === 0) {
-      result.push(current)
-      current = ''
-      continue
-    }
-
-    current += char
-  }
-
-  if (current.length || !result.length) result.push(current)
-  return result
-}
-
-export const getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes('rgb'))
-    rgb = colorStringToRgbaArray(rgb).join(', ')
-  if (isString(rgb)) rgb = rgb.split(',').map(v => parseFloat(v.trim()))
-  if (isNumber(tone)) tone += ''
-  const toHex = rgbArrayToHex(rgb)
-  const abs = tone.slice(0, 1)
-
-  if (abs === '-' || abs === '+') {
-    const colorShade = getColorShade(toHex, parseFloat(tone))
-    return hexToRgbArray(colorShade).join(', ')
-  } else {
-    const [r, g, b] = rgb
-    const hsl = rgbToHSL(r, g, b)
-    const [h, s, l] = hsl // eslint-disable-line
-    const newRgb = hslToRgb(h, s, (parseFloat(tone) / 100) * 255)
-    return newRgb
-  }
-}

package/src/utils/font.js

@@ -1,116 +0,0 @@
-'use strict'
-
-export const resolveFileUrl = (url, files) => {
-  if (!url || !files) return null
-  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
-}
-
-export const getDefaultOrFirstKey = (LIBRARY, key) => {
-  if (LIBRARY[key]) return LIBRARY[key].value
-  if (LIBRARY.default) return LIBRARY[LIBRARY.default].value
-  const hasValue = Object.keys(LIBRARY)[0]
-  return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
-}
-
-export const getFontFormat = (url) => {
-  // Tolerate missing urls — a font weight entry without a `url` should produce
-  // no `format(...)` hint rather than crashing the entire CSS pipeline.
-  if (typeof url !== 'string' || !url) return null
-  const ext = url.split(/[#?]/)[0].split('.').pop().trim()
-  if (['woff2', 'woff', 'ttf', 'otf', 'eot'].includes(ext)) return ext
-  return null
-}
-
-export const isGoogleFontsUrl = (url) =>
-  url &&
-  (url.includes('fonts.googleapis.com') || url.includes('fonts.gstatic.com'))
-
-export const setFontImport = (url) => `@import url('${url}');`
-
-export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
-
-export const setCustomFont = (name, url, weight, options = {}) => {
-  // Filter out undefined / empty entries so a missing weight URL doesn't
-  // emit a broken `url('undefined')` rule or crash on .split downstream.
-  const rawUrls = Array.isArray(url) ? url : [url]
-  const urls = rawUrls.filter((u) => typeof u === 'string' && u)
-  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: ${options.fontStyle || 'normal'};${
-    weight
-      ? `
-  font-weight: ${weight};`
-      : ''
-  }${
-    options.fontStretch
-      ? `
-  font-stretch: ${options.fontStretch};`
-      : ''
-  }${
-    options.fontDisplay
-      ? `
-  font-display: ${options.fontDisplay};`
-      : ''
-  }
-  src: ${srcList};`
-}
-
-export const setCustomFontMedia = (
-  name,
-  url,
-  weight,
-  options
-) => `@font-face {${setCustomFont(name, url, weight, options)}
-}`
-
-export const getFontFaceEach = (name, weights, files) => {
-  const keys = Object.keys(weights)
-  return keys.map((key) => {
-    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 })
-  })
-}
-
-export const getFontFace = (LIBRARY) => {
-  const keys = Object.keys(LIBRARY)
-  return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value))
-}
-
-export const getFontFaceEachString = (name, weights, files) => {
-  if (weights && weights.isVariable) {
-    const url = resolveFileUrl(weights.url, files) || weights.url
-    if (isGoogleFontsUrl(url)) {
-      return setFontImport(url)
-    }
-    return setCustomFontMedia(name, url, weights.fontWeight, {
-      fontStretch: weights.fontStretch,
-      fontDisplay: weights.fontDisplay || 'swap'
-    })
-  }
-  const isArr = weights[0]
-  if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia)
-  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) => {
-  const keys = Object.keys(LIBRARY)
-  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files))
-}

package/src/utils/index.js

@@ -1,9 +0,0 @@
-'use strict'
-
-export * from './unit.js'
-export * from './color.js'
-export * from './theme.js'
-export * from './font.js'
-export * from './sequence.js'
-export * from './var.js'
-export * from './sprite.js'