@brightspace-ui/core 3.234.0 → 3.234.2

package/components/colors/colors.js

@@ -217,6 +217,10 @@ function formatCSSVariable([key, value]) {
 	else return `${key}: ${value};`;
 }
 
+function isCustomPropertyDefined(rule, name) {
+	return rule.style.getPropertyValue(name).trim() !== '';
+}
+
 function resolvePrimitive(variableName, variables) {
 	const value = variables.get(variableName);
 	if (!value) return;
@@ -232,7 +236,7 @@ function replaceSemanticVariables(value, semanticVariables) {
 	});
 }
 
-let style;
+let style, lightRule, darkRule, osRule;
 if (globalThis.document !== undefined && !globalThis.document.head.querySelector('#d2l-colors')) {
 	style = globalThis.document.createElement('style');
 	style.id = 'd2l-colors';
@@ -248,9 +252,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 			/* primary accent */
 			--d2l-color-primary-accent-action: var(--d2l-color-celestine);
 			--d2l-color-primary-accent-indicator: var(--d2l-color-carnelian);
-		}
 
-		html {
 			${lightCSS}
 		}
 		html[data-color-mode="dark"] {
@@ -268,19 +270,24 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		}
 	`;
 	globalThis.document.head.appendChild(style);
+
+	lightRule = style.sheet.cssRules[0];
+	darkRule = style.sheet.cssRules[1];
+	osRule = style.sheet.cssRules[2].cssRules[0];
 }
 
 export function registerSemanticVariableForSvgImageUrl(name, value) {
 	if (!name || typeof value !== 'string') {
 		throw new TypeError('registerSemanticVariableForSvgImageUrl requires both a name and value');
 	}
+	if (isCustomPropertyDefined(lightRule, name)) {
+		console.warn(`registerSemanticVariableForSvgImageUrl called for ${name} but a custom property is already defined with this name`);
+	}
 
 	const replacedLightValue = svgToCSS(replaceSemanticVariables(value, lightVariables));
-	style.sheet.insertRule(`html { ${ name }: ${ replacedLightValue } }`, 0);
+	lightRule.style.setProperty(name, replacedLightValue);
 
 	const replacedDarkValue = svgToCSS(replaceSemanticVariables(value, darkVariables));
-	style.sheet.insertRule(`html[data-color-mode="dark"] { ${ name }: ${ replacedDarkValue } }`, 1);
-	style.sheet.insertRule(`@media (prefers-color-scheme: dark) {
-		html[data-color-mode="os"] { ${ name }: ${ replacedDarkValue } }
-	}`, 2);
+	darkRule.style.setProperty(name, replacedDarkValue);
+	osRule.style.setProperty(name, replacedDarkValue);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.234.0",
+  "version": "3.234.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",