cmat 0.0.21 → 0.0.22

package/tailwind/plugins/theming.js

@@ -1,256 +1,257 @@
-const chroma = require('chroma-js');
-const _ = require('lodash');
-const fs = require('fs');
-const path = require('path');
-const colors = require('tailwindcss/colors');
-const plugin = require('tailwindcss/plugin');
-const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
-const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
-const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
-
-// -----------------------------------------------------------------------------------------------------
-// @ Utilities
-// -----------------------------------------------------------------------------------------------------
-
-/**
- * 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
- */
-const normalizeTheme = (theme) => {
-    return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)),
-        (palette, paletteName) => [
-            paletteName,
-            {
-                ...palette,
-                DEFAULT: palette['DEFAULT'] || palette[500]
-            }
-        ]
-    ));
-};
-
-// -----------------------------------------------------------------------------------------------------
-// @ cmat TailwindCSS Main Plugin
-// -----------------------------------------------------------------------------------------------------
-const theming = plugin.withOptions((options) => ({
-    addComponents,
-    e,
-    theme
-}) => {
-    /**
-     * Create user themes object by going through the provided themes and
-     * merging them with the provided "default" so, we can have a complete
-     * set of color palettes for each user theme.
-     */
-    const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-        themeName,
-        _.defaults({}, theme, options.themes['default'])
-    ]));
-
-    /**
-     * Normalize the themes and assign it to the themes object. This will
-     * be the final object that we create a SASS map from
-     */
-    let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
-        themeName,
-        normalizeTheme(theme)
-    ]));
-
-    /**
-     * Go through the themes to generate the contrasts and filter the
-     * palettes to only have "primary", "accent" and "warn" objects.
-     */
-    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
-        themeName,
-        _.pick(
-            _.fromPairs(_.map(theme, (palette, paletteName) => [
-                paletteName,
-                {
-                    ...palette,
-                    contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
-                        hue,
-                        _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
-                    ]))
-                }
-            ])),
-            ['primary', 'accent', 'warn']
-        )
-    ]));
-
-    /**
-     * Go through the themes and attach appropriate class selectors so,
-     * we can use them to encapsulate each theme.
-     */
-    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
-        themeName,
-        {
-            selector: `".theme-${themeName}"`,
-            ...theme
-        }
-    ]));
-
-    /* Generate the SASS map using the themes object */
-    const sassMap = jsonToSassMap(JSON.stringify({ 'user-themes': themes }));
-
-    /* Get the file path */
-    const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
-
-    /* Read the file and get its data */
-    let data;
-    try {
-        data = fs.readFileSync(filename, { encoding: 'utf8' });
-    }
-    catch (err) {
-        console.error(err);
-    }
-
-    /* Write the file if the map has been changed */
-    if (data !== sassMap) {
-        try {
-            fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
-        }
-        catch (err) {
-            console.error(err);
-        }
-    }
-
-    /**
-     * Iterate through the user's themes and build Tailwind components containing
-     * CSS Custom Properties using the colors from them. This allows switching
-     * 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)}`,
-            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
-                [
-                    e(paletteName),
-                    palette
-                ],
-                [
-                    `on-${e(paletteName)}`,
-                    _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
-                ]
-            ])
-            ))), (value, key) => [[`--cmat-${e(key)}`, value], [`--cmat-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
-        ]))
-    );
-
-    /**
-     * Generate scheme based css custom properties and utility classes
-     */
-    const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => {
-        const isDark = colorScheme === 'dark';
-        const background = theme(`cmat.customProps.background.${colorScheme}`);
-        const foreground = theme(`cmat.customProps.foreground.${colorScheme}`);
-        const lightSchemeSelectors = 'body.light, .light, .dark .light';
-        const darkSchemeSelectors = 'body.dark, .dark, .light .dark';
-
-        return {
-            [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: {
-
-                /**
-                 * If a custom property is not available, browsers will use
-                 * the fallback value. In this case, we want to use '--is-dark'
-                 * as the indicator of a dark theme so, we can use it like this:
-                 * background-color: var(--is-dark, red);
-                 *
-                 * If we set '--is-dark' as "true" on dark themes, the above rule
-                 * 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
-                 * at all on dark themes so that the fallback value can be used on
-                 * dark themes.
-                 *
-                 * On light themes, since '--is-dark' exists, the above rule will be
-                 * interpolated as:
-                 * "background-color: false"
-                 *
-                 * On dark themes, since '--is-dark' doesn't exist, the fallback value
-                 * will be used ('red' in this case) and the rule will be interpolated as:
-                 * "background-color: red"
-                 *
-                 * It's easier to understand and remember like this.
-                 */
-                ...(!isDark ? { '--is-dark': 'false' } : {}),
-
-                /* Generate custom properties from customProps */
-                ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--cmat-${e(key)}`, value], [`--cmat-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-                ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--cmat-${e(key)}`, value], [`--cmat-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
-            }
-        };
-    });
-
-    const schemeUtilities = (() => {
-        /* Generate general styles & utilities */
-        return {};
-    })();
-
-    addComponents(schemeCustomProps);
-    addComponents(schemeUtilities);
-},
-    (options) => {
-        return {
-            theme: {
-                extend: {
-                    /**
-                     * 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(--cmat-${name}-rgb), <alpha-value>)`],
-                        [`on-${name}`, `rgba(var(--cmat-on-${name}-rgb), <alpha-value>)`]
-                    ])))
-                },
-                cmat: {
-                    customProps: {
-                        background: {
-                            light: {
-                                'bg-app-bar': '#FFFFFF',
-                                'bg-card': '#FFFFFF',
-                                'bg-default': colors.slate[100],
-                                'bg-dialog': '#FFFFFF',
-                                'bg-hover': chroma(colors.slate[400]).alpha(0.12).css(),
-                                'bg-status-bar': colors.slate[300]
-                            },
-                            dark: {
-                                'bg-app-bar': colors.slate[900],
-                                'bg-card': colors.slate[800],
-                                'bg-default': colors.slate[900],
-                                'bg-dialog': colors.slate[800],
-                                'bg-hover': 'rgba(255, 255, 255, 0.05)',
-                                'bg-status-bar': colors.slate[900]
-                            }
-                        },
-                        foreground: {
-                            light: {
-                                'text-default': colors.slate[800],
-                                'text-secondary': colors.slate[500],
-                                'text-hint': colors.slate[400],
-                                'text-disabled': colors.slate[400],
-                                'border': colors.slate[200],
-                                'divider': colors.slate[200],
-                                'icon': colors.slate[500],
-                                'mat-icon': colors.slate[500]
-                            },
-                            dark: {
-                                'text-default': '#FFFFFF',
-                                'text-secondary': colors.slate[400],
-                                'text-hint': colors.slate[500],
-                                'text-disabled': colors.slate[600],
-                                'border': chroma(colors.slate[100]).alpha(0.12).css(),
-                                'divider': chroma(colors.slate[100]).alpha(0.12).css(),
-                                'icon': colors.slate[400],
-                                'mat-icon': colors.slate[400]
-                            }
-                        }
-                    }
-                }
-            }
-        };
-    }
-);
-
-module.exports = theming;
+const chroma = require('chroma-js');
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+const colors = require('tailwindcss/colors');
+const plugin = require('tailwindcss/plugin');
+const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
+const { importDefault } = require(path.resolve(__dirname, ('./helpers')));
+const flattenColorPalette = importDefault(flattenColorPaletteImport);
+const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
+const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
+
+// -----------------------------------------------------------------------------------------------------
+// @ Utilities
+// -----------------------------------------------------------------------------------------------------
+
+/**
+ * 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
+ */
+const normalizeTheme = (theme) => {
+    return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)),
+        (palette, paletteName) => [
+            paletteName,
+            {
+                ...palette,
+                DEFAULT: palette['DEFAULT'] || palette[500]
+            }
+        ]
+    ));
+};
+
+// -----------------------------------------------------------------------------------------------------
+// @ cmat TailwindCSS Main Plugin
+// -----------------------------------------------------------------------------------------------------
+const theming = plugin.withOptions((options) => ({
+    addComponents,
+    theme
+}) => {
+    /**
+     * Create user themes object by going through the provided themes and
+     * merging them with the provided "default" so, we can have a complete
+     * set of color palettes for each user theme.
+     */
+    const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+        themeName,
+        _.defaults({}, theme, options.themes['default'])
+    ]));
+
+    /**
+     * Normalize the themes and assign it to the themes object. This will
+     * be the final object that we create a SASS map from
+     */
+    let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
+        themeName,
+        normalizeTheme(theme)
+    ]));
+
+    /**
+     * Go through the themes to generate the contrasts and filter the
+     * palettes to only have "primary", "accent" and "warn" objects.
+     */
+    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+        themeName,
+        _.pick(
+            _.fromPairs(_.map(theme, (palette, paletteName) => [
+                paletteName,
+                {
+                    ...palette,
+                    contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
+                        hue,
+                        _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
+                    ]))
+                }
+            ])),
+            ['primary', 'accent', 'warn']
+        )
+    ]));
+
+    /**
+     * Go through the themes and attach appropriate class selectors so,
+     * we can use them to encapsulate each theme.
+     */
+    themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+        themeName,
+        {
+            selector: `".theme-${themeName}"`,
+            ...theme
+        }
+    ]));
+
+    /* Generate the SASS map using the themes object */
+    const sassMap = jsonToSassMap(JSON.stringify({ 'user-themes': themes }));
+
+    /* Get the file path */
+    const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
+
+    /* Read the file and get its data */
+    let data;
+    try {
+        data = fs.readFileSync(filename, { encoding: 'utf8' });
+    }
+    catch (err) {
+        console.error(err);
+    }
+
+    /* Write the file if the map has been changed */
+    if (data !== sassMap) {
+        try {
+            fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+
+    /**
+     * Iterate through the user's themes and build Tailwind components containing
+     * CSS Custom Properties using the colors from them. This allows switching
+     * themes by simply replacing a class name as well as nesting them.
+     */
+    addComponents(
+        _.fromPairs(_.map(options.themes, (theme, themeName) => [
+            themeName === 'default' ? '.theme-default' : `.theme-${themeName}`,
+            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
+                [
+                    paletteName,
+                    palette
+                ],
+                [
+                    `on-${paletteName}`,
+                    _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
+                ]
+            ])
+            ))), (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
+        ]))
+    );
+
+    /**
+     * Generate scheme based css custom properties and utility classes
+     */
+    const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => {
+        const isDark = colorScheme === 'dark';
+        const background = theme(`cmat.customProps.background.${colorScheme}`);
+        const foreground = theme(`cmat.customProps.foreground.${colorScheme}`);
+        const lightSchemeSelectors = 'body.light, .light, .dark .light';
+        const darkSchemeSelectors = 'body.dark, .dark, .light .dark';
+
+        return {
+            [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: {
+
+                /**
+                 * If a custom property is not available, browsers will use
+                 * the fallback value. In this case, we want to use '--is-dark'
+                 * as the indicator of a dark theme so, we can use it like this:
+                 * background-color: var(--is-dark, red);
+                 *
+                 * If we set '--is-dark' as "true" on dark themes, the above rule
+                 * 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
+                 * at all on dark themes so that the fallback value can be used on
+                 * dark themes.
+                 *
+                 * On light themes, since '--is-dark' exists, the above rule will be
+                 * interpolated as:
+                 * "background-color: false"
+                 *
+                 * On dark themes, since '--is-dark' doesn't exist, the fallback value
+                 * will be used ('red' in this case) and the rule will be interpolated as:
+                 * "background-color: red"
+                 *
+                 * It's easier to understand and remember like this.
+                 */
+                ...(!isDark ? { '--is-dark': 'false' } : {}),
+
+                /* Generate custom properties from customProps */
+                ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]]))),
+                ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--cmat-${key}`, value], [`--cmat-${key}-rgb`, chroma(value).rgb().join(',')]])))
+            }
+        };
+    });
+
+    const schemeUtilities = (() => {
+        /* Generate general styles & utilities */
+        return {};
+    })();
+
+    addComponents(schemeCustomProps);
+    addComponents(schemeUtilities);
+},
+    (options) => {
+        return {
+            theme: {
+                extend: {
+                    /**
+                     * 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(--cmat-${name}-rgb), <alpha-value>)`],
+                        [`on-${name}`, `rgba(var(--cmat-on-${name}-rgb), <alpha-value>)`]
+                    ])))
+                },
+                cmat: {
+                    customProps: {
+                        background: {
+                            light: {
+                                'bg-app-bar': '#FFFFFF',
+                                'bg-card': '#FFFFFF',
+                                'bg-default': colors.slate[100],
+                                'bg-dialog': '#FFFFFF',
+                                'bg-hover': chroma(colors.slate[400]).alpha(0.12).css(),
+                                'bg-status-bar': colors.slate[300]
+                            },
+                            dark: {
+                                'bg-app-bar': colors.slate[900],
+                                'bg-card': colors.slate[800],
+                                'bg-default': colors.slate[900],
+                                'bg-dialog': colors.slate[800],
+                                'bg-hover': 'rgba(255, 255, 255, 0.05)',
+                                'bg-status-bar': colors.slate[900]
+                            }
+                        },
+                        foreground: {
+                            light: {
+                                'text-default': colors.slate[800],
+                                'text-secondary': colors.slate[500],
+                                'text-hint': colors.slate[400],
+                                'text-disabled': colors.slate[400],
+                                'border': colors.slate[200],
+                                'divider': colors.slate[200],
+                                'icon': colors.slate[500],
+                                'mat-icon': colors.slate[500]
+                            },
+                            dark: {
+                                'text-default': '#FFFFFF',
+                                'text-secondary': colors.slate[400],
+                                'text-hint': colors.slate[500],
+                                'text-disabled': colors.slate[600],
+                                'border': chroma(colors.slate[100]).alpha(0.12).css(),
+                                'divider': chroma(colors.slate[100]).alpha(0.12).css(),
+                                'icon': colors.slate[400],
+                                'mat-icon': colors.slate[400]
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    }
+);
+
+module.exports = theming;

package/tailwind/plugins/utilities.js

@@ -9,49 +9,36 @@ module.exports = plugin(({
     * be defined before pretty much everything else.
     */
     addComponents(
-        {
-            '.mat-icon': {
-                '--tw-text-opacity': '1',
-                color: 'rgba(var(--cmat-icon-rgb), var(--tw-text-opacity))'
-            },
+        {           
             '.text-default': {
-                '--tw-text-opacity': '1 !important',
-                color: 'rgba(var(--cmat-text-default-rgb), var(--tw-text-opacity)) !important'
+                color: 'rgba(var(--cmat-text-default-rgb), 1)'
             },
             '.text-secondary': {
-                '--tw-text-opacity': '1 !important',
-                color: 'rgba(var(--cmat-text-secondary-rgb), var(--tw-text-opacity)) !important'
+                color: 'rgba(var(--cmat-text-secondary-rgb), 1)'
             },
             '.text-hint': {
-                '--tw-text-opacity': '1 !important',
-                color: 'rgba(var(--cmat-text-hint-rgb), var(--tw-text-opacity)) !important'
+                color: 'rgba(var(--cmat-text-hint-rgb), 1)'
             },
             '.text-disabled': {
-                '--tw-text-opacity': '0.8 !important',
-                color: 'rgba(var(--cmat-text-disabled-rgb), var(--tw-text-opacity)) !important'
+                color: 'rgba(var(--cmat-text-disabled-rgb), 1)'
             },
             '.divider': {
-                color: 'var(--cmat-divider) !important'
+                color: 'var(--cmat-divider)'
             },
             '.bg-card': {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor: 'rgba(var(--cmat-bg-card-rgb), var(--tw-bg-opacity)) !important'
+                backgroundColor: 'rgba(var(--cmat-bg-card-rgb), 1)'
             },
             '.bg-default': {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor: 'rgba(var(--cmat-bg-default-rgb), var(--tw-bg-opacity)) !important'
+                backgroundColor: 'rgba(var(--cmat-bg-default-rgb), 1)'
             },
             '.bg-dialog': {
-                '--tw-bg-opacity': '1 !important',
-                backgroundColor: 'rgba(var(--cmat-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
+                backgroundColor: 'rgba(var(--cmat-bg-dialog-rgb), 1)'
             },
             '.ring-bg-default': {
-                '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color': 'rgba(var(--cmat-bg-default-rgb), var(--tw-ring-opacity)) !important'
+                '--tw-ring-color': 'rgba(var(--cmat-bg-default-rgb), 1)'
             },
             '.ring-bg-card': {
-                '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color': 'rgba(var(--cmat-bg-card-rgb), var(--tw-ring-opacity)) !important'
+                '--tw-ring-color': 'rgba(var(--cmat-bg-card-rgb), 1)'
             }
         }
     );
@@ -59,7 +46,7 @@ module.exports = plugin(({
     addComponents(
         {
             '.bg-hover': {
-                backgroundColor: 'var(--cmat-bg-hover) !important'
+                backgroundColor: 'var(--cmat-bg-hover)'
             }
         }
     );