Add Tailwind plugin for CSS colour variables

opensafely-core · Sep 6, 2024 · 0d516a1 · 0d516a1
1 parent c7b2288
commit 0d516a1
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -187,5 +187,23 @@ export default {
   plugins: [
     tailwindTypography,
     tailwindForms,
+    ({ addBase, theme }) => {
+      function extractColorVars(colorObj, colorGroup = "") {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey];
+
+          const newVars =
+            typeof value === "string"
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`);
+
+          return { ...vars, ...newVars };
+        }, {});
+      }
+
+      addBase({
+        ":root": extractColorVars(theme("colors")),
+      });
+    },
   ],
 };