purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 12:05:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(@fuse/tailwind/plugins/theming) Simplified the plugin and added more detailed comments

Browse Source
This commit is contained in:
Sercan Yemen 2022-07-25 15:17:55 +03:00
parent 72a63b30ca
commit 82ed80e35d
1 changed files with 36 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/@fuse/tailwind/plugins/theming.js
View File

@ -11,7 +11,9 @@ const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-co
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
/** /**
* Normalize the provided theme * Normalizes the provided theme by omitting empty values and values that
* start with "on" from each palette. Also sets the correct DEFAULT value
* of each palette.
* *
* @param theme * @param theme
*/ */
@ -28,67 +30,6 @@ const normalizeTheme = (theme) =>
)); ));
}; };
/**
* Generates variable colors for the 'colors'
* configuration from the provided theme
*
* @param theme
*/
const generateVariableColors = (theme) =>
{
// https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
const customPropertiesWithOpacity = (name) => ({
opacityVariable,
opacityValue
}) =>
{
if ( opacityValue )
{
return `rgba(var(--fuse-${name}-rgb), ${opacityValue})`;
}
if ( opacityVariable )
{
return `rgba(var(--fuse-${name}-rgb), var(${opacityVariable}, 1))`;
}
return `rgb(var(--fuse-${name}-rgb))`;
};
return _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(theme))), (name) => [
[name, customPropertiesWithOpacity(name)],
[`on-${name}`, customPropertiesWithOpacity(`on-${name}`)]
])));
};
/**
* Generate and return themes object with theme name and colors/
* This is useful for accessing themes from Angular (Typescript).
*
* @param themes
* @returns {unknown[]}
*/
function generateThemesObject(themes)
{
const normalizedDefaultTheme = normalizeTheme(themes.default);
return _.map(_.cloneDeep(themes), (value, key) =>
{
const theme = normalizeTheme(value);
const primary = (theme && theme.primary && theme.primary.DEFAULT) ? theme.primary.DEFAULT : normalizedDefaultTheme.primary.DEFAULT;
const accent = (theme && theme.accent && theme.accent.DEFAULT) ? theme.accent.DEFAULT : normalizedDefaultTheme.accent.DEFAULT;
const warn = (theme && theme.warn && theme.warn.DEFAULT) ? theme.warn.DEFAULT : normalizedDefaultTheme.warn.DEFAULT;
return _.fromPairs([
[
key,
{
primary,
accent,
warn
}
]
]);
});
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ FUSE TailwindCSS Main Plugin // @ FUSE TailwindCSS Main Plugin
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -98,10 +39,13 @@ const theming = plugin.withOptions((options) => ({
theme theme
}) => }) =>
{ {
// ----------------------------------------------------------------------------------------------------- /**
// @ Map variable colors * Iterate through the user's themes and build Tailwind components containing
// ----------------------------------------------------------------------------------------------------- * CSS Custom Properties using the colors from them. This allows switching
const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [ * themes by simply replacing a class name as well as nesting them.
*/
addComponents(
_.fromPairs(_.map(options.themes, (theme, themeName) => [
themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`, themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [ _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
[ [
@ -114,9 +58,8 @@ const theming = plugin.withOptions((options) => ({
] ]
]) ])
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))) ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
])); ]))
);
addComponents(mapVariableColors);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Generate scheme based css custom properties and utility classes // @ Generate scheme based css custom properties and utility classes
@ -141,7 +84,7 @@ const theming = plugin.withOptions((options) => ({
* If we set '--is-dark' as "true" on dark themes, the above rule * If we set '--is-dark' as "true" on dark themes, the above rule
* won't work because of the said "fallback value" logic. Therefore, * won't work because of the said "fallback value" logic. Therefore,
* we set the '--is-dark' to "false" on light themes and not set it * we set the '--is-dark' to "false" on light themes and not set it
* all on dark themes so that the fallback value can be used on * at all on dark themes so that the fallback value can be used on
* dark themes. * dark themes.
* *
* On light themes, since '--is-dark' exists, the above rule will be * On light themes, since '--is-dark' exists, the above rule will be
@ -177,7 +120,15 @@ const theming = plugin.withOptions((options) => ({
return { return {
theme: { theme: {
extend: { extend: {
colors: generateVariableColors(options.themes.default) /**
* Add 'Primary', 'Accent' and 'Warn' palettes as colors so all color utilities
* are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
* This will also allow using arbitrary values with them such as opacity and such.
*/
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
])))
}, },
fuse : { fuse : {
customProps: { customProps: {
@ -221,8 +172,7 @@ const theming = plugin.withOptions((options) => ({
'mat-icon' : colors.slate[400] 'mat-icon' : colors.slate[400]
} }
} }
}, }
themes : generateThemesObject(options.themes)
} }
} }
}; };