@descope/web-components-ui 1.0.94 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.94",
+	"version": "1.0.95",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/helpers/index.js

@@ -13,4 +13,14 @@ export const compose = (...fns) =>
 
 export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
 
-export const isFunction = (maybeFunc) => typeof maybeFunc === 'function'
+export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
+export const isUrl = (maybeUrl) => {
+	try {
+		new URL(maybeUrl)
+
+		return true;
+	} catch (e) {
+		return false;
+	}
+}

package/src/helpers/themeHelpers/index.js

@@ -1,7 +1,7 @@
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';
-import { kebabCase } from '..';
+import { isUrl, kebabCase } from '..';
 import { getComponentName, getCssVarName } from '../componentHelpers';
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
@@ -19,9 +19,20 @@ const transformTheme = (theme, path, getTransformation) => {
 const stringifyArray = (strArr) =>
 	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
+const getCssVarValue = (val) => {
+	switch (true) {
+		case Array.isArray(val):
+			return stringifyArray(val)
+		case isUrl(val):
+			return `url(${val})`
+		default:
+			return val
+	}
+}
+
 export const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
+		[getVarName(path)]: getCssVarValue(val)
 	}));
 
 export const getThemeRefs = (theme, prefix) =>