refactor: multi-theme plugin with options

This commit is contained in:
Oliver Davies 2022-09-09 18:00:00 +01:00
parent 649fce7b67
commit d3080c8774
2 changed files with 45 additions and 45 deletions

View file

@ -1,52 +1,26 @@
let plugin = require("tailwindcss/plugin"); let plugin = require("tailwindcss/plugin");
let colors = { let multiThemePlugin = plugin.withOptions(
black: "#333333", function (options) {
blue: "#334982", return function ({ addBase }) {
grey: "#f3f3f3", let themes = options?.themes ?? [];
orange: "#fdb913",
pink: "#e40087",
purple: "#782b8f",
red: "#dd372f",
teal: "#00857d",
white: "#fff",
};
let themes = { addBase(generateForRoot(themes));
blue: {
quaternary: colors.red, Object.keys(themes).forEach((themeName) => {
quinary: colors.red, addBase(generateForTheme(themes, themeName));
primary: colors.blue, });
secondary: colors.red, };
tertiary: colors.white,
}, },
purple: { function (options) {
quaternary: colors.white, return {
quinary: colors.purple, themes: options?.themes ?? [],
primary: colors.purple, };
secondary: colors.orange, }
tertiary: colors.purple, );
},
teal: { function generateForRoot(themes) {
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]; let defaultThemeName = Object.keys(themes)[0];
return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => { 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 Object.entries(themes[themeName]).map(([colourName, value]) => {
return { return {
[`[data-theme=${themeName}]`]: { [`[data-theme=${themeName}]`]: {

View file

@ -13,6 +13,32 @@ let colors = {
white: "#fff", 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} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: [
@ -30,5 +56,5 @@ module.exports = {
tertiary: "var(--color-tertiary)", tertiary: "var(--color-tertiary)",
}, },
}, },
plugins: [flexBasisPlugin, multiThemePlugin], plugins: [flexBasisPlugin, multiThemePlugin({ themes })],
}; };