refactor: use a multi-theme plugin for colours

pages/index.js

@@ -6,7 +6,7 @@ export default function Home() {
         <div data-theme="blue" className="mx-auto max-w-6xl">
           <h2 className="sr-only">Featured case study</h2>
           <section className="font-sans text-black">
-            <div className="lg:flex lg:items-center [ ] fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
+            <div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
               <div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
                 <div className="h-full">
                   <article className="h-full">
@@ -42,7 +42,7 @@ export default function Home() {
                   </p>
                   <p>
                     <a
-                      className="mt-4 button button--secondary"
+                      className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
                       href="https://inviqa.com/cxcon-experience-transformation"
                     >
                       Explore this event

styles/globals.css

@@ -3,22 +3,6 @@
 @tailwind utilities;
 
 @layer components {
-  .button {
-    @apply px-5 py-2 inline-block text-lg font-bold border-2 duration-200 transition-colors ease-in-out;
-  }
-
-  [data-theme="blue"] .button--secondary {
-    @apply bg-red border-red text-white hover:bg-white hover:text-red;
-  }
-
-  [data-theme="purple"] .button--secondary {
-    @apply bg-orange border-orange text-purple hover:bg-white hover:text-purple hover:border-purple;
-  }
-
-  [data-theme="teal"] .button--secondary {
-    @apply bg-pink border-pink text-white hover:bg-white hover:text-pink;
-  }
-
   .fancy-corners {
     position: relative;
     background-color: #fff;
@@ -30,21 +14,11 @@
     position: absolute;
     width: 8em;
     height: 8em;
+    background-color: theme('colors.primary');
     background-size: 100% 100%;
     background-position: 0 0;
     transform: translateZ(-1px);
     z-index: -1;
-    @apply bg-purple;
-  }
-
-  [data-theme="blue"] .fancy-corners:after,
-  [data-theme="blue"] .fancy-corners:before {
-    @apply bg-blue;
-  }
-
-  [data-theme="teal"] .fancy-corners:after,
-  [data-theme="teal"] .fancy-corners:before {
-    @apply bg-teal;
   }
 
   .fancy-corners[class*="--bottom"]:after,

tailwind.config.js

@@ -1,11 +1,6 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    colors: {
+let plugin = require("tailwindcss/plugin");
+
+let colors = {
   black: "#333333",
   blue: "#334982",
   grey: "#f3f3f3",
@@ -15,8 +10,80 @@ module.exports = {
   red: "#dd372f",
   teal: "#00857d",
   white: "#fff",
-    },
-    extend: {},
-  },
-  plugins: [],
+};
+
+let themes = {
+  blue: {
+    quaternary: colors.red,
+    quinary: colors.red,
+    primary: colors.blue,
+    secondary: colors.red,
+    tertiary: colors.white,
+  },
+
+  purple: {
+    quaternary: colors.white,
+    quinary: colors.purple,
+    primary: colors.purple,
+    secondary: colors.orange,
+    tertiary: colors.purple,
+  },
+
+  teal: {
+    quaternary: colors.pink,
+    quinary: colors.pink,
+    primary: colors.teal,
+    secondary: colors.pink,
+    tertiary: colors.white,
+  },
+};
+
+let multiThemePlugin = plugin(function ({ addBase }) {
+  addBase(generateForRoot());
+
+  Object.keys(themes).forEach((themeName) => {
+    addBase(generateForTheme(themeName));
+  });
+});
+
+function generateForRoot() {
+  let defaultThemeName = Object.keys(themes)[0];
+
+  return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
+    return {
+      ":root": {
+        [`--color-${colourName}`]: value,
+      },
+    };
+  });
+}
+
+function generateForTheme(themeName) {
+  return Object.entries(themes[themeName]).map(([colourName, value]) => {
+    return {
+      [`[data-theme=${themeName}]`]: {
+        [`--color-${colourName}`]: value,
+      },
+    };
+  });
+}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    colors: {
+      ...colors,
+
+      quaternary: "var(--color-quaternary)",
+      quinary: "var(--color-quinary)",
+      primary: "var(--color-primary)",
+      secondary: "var(--color-secondary)",
+      tertiary: "var(--color-tertiary)",
+    },
+  },
+  plugins: [multiThemePlugin],
 };