From d3080c8774a0221edf4e850f3c6fa3943b07f8d7 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 9 Sep 2022 18:00:00 +0100
Subject: [PATCH] refactor: multi-theme plugin with options
---
plugins/multi-theme-plugin.js | 62 ++++++++++-------------------------
tailwind.config.js | 28 +++++++++++++++-
2 files changed, 45 insertions(+), 45 deletions(-)
diff --git a/plugins/multi-theme-plugin.js b/plugins/multi-theme-plugin.js
index d98a3df..9d31f27 100644
--- a/plugins/multi-theme-plugin.js
+++ b/plugins/multi-theme-plugin.js
@@ -1,52 +1,26 @@
let plugin = require("tailwindcss/plugin");
-let colors = {
- black: "#333333",
- blue: "#334982",
- grey: "#f3f3f3",
- orange: "#fdb913",
- pink: "#e40087",
- purple: "#782b8f",
- red: "#dd372f",
- teal: "#00857d",
- white: "#fff",
-};
+let multiThemePlugin = plugin.withOptions(
+ function (options) {
+ return function ({ addBase }) {
+ let themes = options?.themes ?? [];
-let themes = {
- blue: {
- quaternary: colors.red,
- quinary: colors.red,
- primary: colors.blue,
- secondary: colors.red,
- tertiary: colors.white,
+ addBase(generateForRoot(themes));
+
+ Object.keys(themes).forEach((themeName) => {
+ addBase(generateForTheme(themes, themeName));
+ });
+ };
},
- purple: {
- quaternary: colors.white,
- quinary: colors.purple,
- primary: colors.purple,
- secondary: colors.orange,
- tertiary: colors.purple,
- },
+ function (options) {
+ return {
+ themes: options?.themes ?? [],
+ };
+ }
+);
- 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() {
+function generateForRoot(themes) {
let defaultThemeName = Object.keys(themes)[0];
return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
@@ -58,7 +32,7 @@ function generateForRoot() {
});
}
-function generateForTheme(themeName) {
+function generateForTheme(themes, themeName) {
return Object.entries(themes[themeName]).map(([colourName, value]) => {
return {
[`[data-theme=${themeName}]`]: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 0718b7c..94bc694 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,32 @@ let colors = {
white: "#fff",
};
+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,
+ },
+};
+
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
@@ -30,5 +56,5 @@ module.exports = {
tertiary: "var(--color-tertiary)",
},
},
- plugins: [flexBasisPlugin, multiThemePlugin],
+ plugins: [flexBasisPlugin, multiThemePlugin({ themes })],
};