Migrate existing (finished) base components

src/utils/parse-css-var.test.ts

@@ -0,0 +1,15 @@
+import parseCSSVar from './parse-css-var';
+
+describe('Utils / parseCSSVar', () => {
+	it('Wraps CSS variables in var()', () => {
+		const result = parseCSSVar('--red');
+
+		expect(result).toBe('var(--red)');
+	});
+
+	it('Passes through regular CSS', () => {
+		const result = parseCSSVar('#abcabc');
+
+		expect(result).toBe('#abcabc');
+	});
+});

src/utils/parse-css-var.ts

@@ -0,0 +1,6 @@
+// If the passed color string starts with --, it will be returned wrapped in `var()`, so it can be
+// used in CSS.
+export default function parseCSSVar(color: string): string {
+	if (color.startsWith('--')) return `var(${color})`;
+	return color;
+}