refactor: multi-theme plugin with options
This commit is contained in:
parent
649fce7b67
commit
d3080c8774
|
@ -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}]`]: {
|
||||||
|
|
|
@ -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 })],
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue