@symbo.ls/scratch 2.11.5 → 2.11.17

package/src/system/color.js

@@ -12,8 +12,8 @@ import {
   getColorShade
 } from '../utils'
 
-export const getColor = (value, key) => {
-  const CONFIG = getActiveConfig()
+export const getColor = (value, key, config) => {
+  const CONFIG = config || getActiveConfig()
   if (!isString(value)) {
     if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
     return
@@ -41,33 +41,31 @@ export const getColor = (value, key) => {
   // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})`
 
   let rgb = val.rgb
-  if (rgb) {
-    if (tone) {
-      if (!val[tone]) {
-        const toHex = rgbArrayToHex(rgb.split(', ').map(v => parseFloat(v)))
-        const abs = tone.slice(0, 1)
-        if (abs === '-' || abs === '+') {
-          rgb = hexToRgbArray(
-            getColorShade(toHex, parseFloat(tone))
-          ).join(', ')
-        } else {
-          const [r, g, b] = [...rgb.split(', ').map(v => parseInt(v))]
-          const hsl = rgbToHSL(r, g, b)
-          const [h, s, l] = hsl // eslint-disable-line
-          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
-          rgb = newRgb
-        }
-        val[tone] = { rgb, var: `${val.var}-${tone}` }
-      } else rgb = val[tone].rgb
+  if (!rgb) return CONFIG.useVariable ? `var(${val.var})` : val.value
+  if (tone && !val[tone]) {
+    const toHex = rgbArrayToHex(rgb.split(', ').map(v => parseFloat(v)))
+    const abs = tone.slice(0, 1)
+    if (abs === '-' || abs === '+') {
+      rgb = hexToRgbArray(
+        getColorShade(toHex, parseFloat(tone))
+      ).join(', ')
+    } else {
+      const [r, g, b] = [...rgb.split(', ').map(v => parseInt(v))]
+      const hsl = rgbToHSL(r, g, b)
+        const [h, s, l] = hsl // eslint-disable-line
+      const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
+      rgb = newRgb
     }
+    val[tone] = { rgb, var: `${val.var}-${tone}` }
+  }
+  if (val[tone]) rgb = val[tone].rgb
 
-    if (alpha) return `rgba(${rgb}, ${alpha})`
-    return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`
-  } else return CONFIG.useVariable ? `var(${val.var})` : val.value
+  if (alpha) return `rgba(${rgb}, ${alpha})`
+  return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`
 }
 
-export const getMediaColor = (value, globalTheme) => {
-  const CONFIG = getActiveConfig()
+export const getMediaColor = (value, globalTheme, config) => {
+  const CONFIG = config || getActiveConfig()
   if (!globalTheme) globalTheme = CONFIG.globalTheme
   if (!isString(value)) {
     if (CONFIG.verbose) console.warn(value, '- type for color is not valid')
@@ -82,15 +80,15 @@ export const getMediaColor = (value, globalTheme) => {
   const val = COLOR[name] || GRADIENT[name]
   const isObj = isObject(val)
 
-  if (isObj && val.value) return getColor(value, `@${globalTheme}`)
+  if (isObj && val.value) return getColor(value, `@${globalTheme}`, config)
   else if (isObj) {
-    if (globalTheme) return getColor(value, `@${globalTheme}`)
+    if (globalTheme) return getColor(value, `@${globalTheme}`, config)
     else {
       const obj = {}
       for (const mediaName in val) {
         const query = CONFIG.MEDIA[mediaName.slice(1)]
         const media = `@media screen and ${query}`
-        obj[media] = getColor(value, mediaName)
+        obj[media] = getColor(value, mediaName, config)
       }
       return obj
     }

package/src/system/reset.js

@@ -35,7 +35,7 @@ export const applyReset = (reset = {}) => {
         top: '0',
         left: '0',
         margin: '0',
-        WebkitFontSmoothing: 'antialiased',
+        WebkitFontSmoothing: 'subpixel-antialiased',
         scrollBehavior: 'smooth',
 
         fontSize: TYPOGRAPHY.browserDefault + 'px',

package/src/utils/sprite.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isString } from '@domql/utils'
+import { isArray, isString } from '@domql/utils'
 import { getActiveConfig } from '../factory'
 
 export const generateSprite = (icons) => {
@@ -36,16 +36,35 @@ const parseRootAttributes = (htmlString) => {
   }, {})
 }
 
+const replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/
+  const urlRegex = /url\(#([^)]*)\)/g
+  const matches = code.match(/id="([^"]*)"/g)
+  let replacedCode = code
+  if (isArray(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 100000)
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`)
+    })
+  }
+  return replacedCode
+}
+
 export const convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code)
   const { width, height } = extractAttrs
 
+  console.log(extractAttrs)
+
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`
   const xmlns = 'http://www.w3.org/2000/svg'
 
-  let symbol = code.replace('<svg',
+  const replacedCode = replaceIdsAndUrls(code, key)
+
+  let symbol = replacedCode.replace('<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )
+
   symbol = symbol.replace(/width="[^"]*"/, '')
   symbol = symbol.replace(/height="[^"]*"/, '')
   symbol = symbol.replace('</svg', '</symbol')