Add util for resolving a CSS custom property value

Author: adamwoodnz

projects/js-packages/charts/src/utils/index.ts

@@ -23,3 +23,6 @@ export { mergeThemes } from './merge-themes';
 
 // Color utilities
 export * from './color-utils';
+
+// CSS utilities
+export { resolveCssVariable } from './resolve-css-var';

projects/js-packages/charts/src/utils/resolve-css-var.ts

@@ -0,0 +1,27 @@
+/**
+ * Resolves a CSS custom property (variable) to its computed value
+ *
+ * @param cssVar - A CSS variable string like 'var(--my-color)'
+ * @return The computed value or null if invalid
+ */
+export const resolveCssVariable = ( cssVar: string ): string | null => {
+	if ( typeof window === 'undefined' || typeof document === 'undefined' ) {
+		return null;
+	}
+
+	// Extract the variable name from var(--variable-name)
+	const match = cssVar.match( /var\(\s*(--[^),\s]+)\s*(?:,\s*([^)]+))?\s*\)/ );
+	if ( ! match ) {
+		return null;
+	}
+
+	const varName = match[ 1 ];
+	const fallback = match[ 2 ];
+
+	// Get computed style from root element
+	const computedValue = getComputedStyle( document.documentElement )
+		.getPropertyValue( varName )
+		.trim();
+
+	return computedValue || fallback || null;
+};