cmat 0.0.3

package/styles/tailwind.scss

@@ -0,0 +1,86 @@
+@tailwind base;
+
+@layer base {
+
+    * {
+        text-rendering: optimizeLegibility;
+        -o-text-rendering: optimizeLegibility;
+        -ms-text-rendering: optimizeLegibility;
+        -moz-text-rendering: optimizeLegibility;
+        -webkit-text-rendering: optimizeLegibility;
+        -webkit-tap-highlight-color: transparent;
+
+        &:focus {
+            outline: none !important;
+        }
+    }
+
+    html,
+    body {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        min-height: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+
+    html {
+        font-size: 16px;
+    }
+
+    body {
+        font-size: 0.875rem;
+    }
+
+    body {
+        font-feature-settings: 'salt';
+    }
+
+    hr {
+        margin: 32px 0;
+        border-bottom-width: 1px;
+    }
+
+    input[disabled] {
+        opacity: 1;
+        -webkit-text-fill-color: currentColor;
+    }
+
+
+    body, .dark, .light {
+        @apply text-default bg-default #{!important};
+    }
+
+
+    *, *::before, *::after {
+        --tw-border-opacity: 1 !important;
+        border-color: rgba(var(--cmat-border-rgb), var(--tw-border-opacity));
+
+        .dark & {
+            --tw-border-opacity: 0.12 !important;
+        }
+    }
+
+    [disabled] * {
+        @apply text-disabled #{!important};
+    }
+
+    @media print {
+
+        html {
+            font-size: 12px !important;
+        }
+
+        body, .dark, .light {
+            background: none !important;
+        }
+    }
+
+    .scrollbar-custom {
+		@apply transition-colors scrollbar-thin scrollbar-thumb-primary-300 scrollbar-track-gray-300 scrollbar-thumb-rounded-md hover:scrollbar-thumb-primary-600 dark:scrollbar-track-gray-600;
+    }
+}
+
+@tailwind components;

package/styles/themes.scss

@@ -0,0 +1,164 @@
+@use "sass:map";
+@use '@angular/material' as mat;
+@use "user-themes" as userThemes;
+
+/* Set the base colors for light themes */
+$light-base: (
+    foreground: (
+        base: #000000,
+        divider: #E2E8F0, /* slate.200 */
+        dividers: #E2E8F0, /* slate.200 */
+        disabled: #94A3B8, /* slate.400 */
+        disabled-button: #94A3B8, /* slate.400 */
+        disabled-text: #94A3B8, /* slate.400 */
+        elevation: #000000,
+        hint-text: #94A3B8, /* slate.400 */
+        secondary-text: #64748B, /* slate.500 */
+        icon: #64748B, /* slate.500 */
+        icons: #64748B, /* slate.500 */
+        mat-icon: #64748B, /* slate.500 */
+        text: #1E293B, /* slate.800 */
+        slider-min: #1E293B, /* slate.800 */
+        slider-off: #CBD5E1, /* slate.300 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #CBD5E1, /* slate.300 */
+        app-bar: #FFFFFF,
+        background: #F1F5F9, /* slate.100 */
+        hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
+        card: #FFFFFF,
+        dialog: #FFFFFF,
+        disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
+        raised-button: #FFFFFF,
+        focused-button: #64748B, /* slate.500 */
+        selected-button: #E2E8F0, /* slate.200 */
+        selected-disabled-button: #E2E8F0, /* slate.200 */
+        disabled-button-toggle: #CBD5E1, /* slate.300 */
+        unselected-chip: #E2E8F0, /* slate.200 */
+        disabled-list-option: #CBD5E1, /* slate.300 */
+        tooltip: #1E293B /* slate.800 */
+    )
+);
+
+/* Set the base colors for dark themes */
+$dark-base: (
+    foreground: (
+        base: #FFFFFF,
+        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        disabled: #475569, /* slate.600 */
+        disabled-button: #1E293B, /* slate.800 */
+        disabled-text: #475569, /* slate.600 */
+        elevation: #000000,
+        hint-text: #64748B, /* slate.500 */
+        secondary-text: #94A3B8, /* slate.400 */
+        icon: #F1F5F9, /* slate.100 */
+        icons: #F1F5F9, /* slate.100 */
+        mat-icon: #94A3B8, /* slate.400 */
+        text: #FFFFFF,
+        slider-min: #FFFFFF,
+        slider-off: #64748B, /* slate.500 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #0F172A, /* slate.900 */
+        app-bar: #0F172A, /* slate.900 */
+        background: #0F172A, /* slate.900 */
+        hover: rgba(255, 255, 255, 0.05),
+        card: #1E293B, /* slate.800 */
+        dialog: #1E293B, /* slate.800 */
+        disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
+        raised-button: #0F172A, /* slate.900 */
+        focused-button: #E2E8F0, /* slate.200 */
+        selected-button: rgba(255, 255, 255, 0.05),
+        selected-disabled-button: #1E293B, /* slate.800 */
+        disabled-button-toggle: #0F172A, /* slate.900 */
+        unselected-chip: #475569, /* slate.600 */
+        disabled-list-option: #E2E8F0, /* slate.200 */
+        tooltip: #64748B /* slate.500 */
+    )
+);
+
+/* Include the core Angular Material styles */
+@include mat.core();
+
+/* Create a base theme without any color to set the density and typography */
+@include mat.all-component-themes((
+    color: null,
+    density: 0,
+    typography: mat.define-typography-config(
+        $font-family: theme('fontFamily.sans'),
+        $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+        $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+        $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+        $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+        $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+        $button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+        $overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
+    )
+));
+
+/* Loop through user themes and generate Angular Material themes */
+@each $name, $theme in userThemes.$user-themes {
+
+    /* Generate the palettes */
+    $palettes: ();
+    @each $name in (primary, accent, warn) {
+
+        /* Define the Angular Material theme */
+        $palette: mat.define-palette(map.get($theme, $name));
+
+        /* Replace the default colors on the defined Material palette */
+        $palette: map.merge($palette, (
+            default: map.get(map.get($theme, $name), DEFAULT),
+            lighter: map.get(map.get($theme, $name), 100),
+            darker: map.get(map.get($theme, $name), 700),
+            text: map.get(map.get($theme, $name), DEFAULT),
+            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
+            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
+            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
+        ));
+
+        $palettes: map.merge($palettes, (#{$name}: $palette));
+    }
+
+    /* Define a light & dark Angular Material theme with the generated palettes */
+    $light-theme: mat.define-light-theme((
+        color: ($palettes)
+    ));
+
+    $dark-theme: mat.define-dark-theme((
+        color: ($palettes)
+    ));
+
+    /* Merge the custom base colors with the generated themes */
+    $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
+    $light-theme: map.merge(
+            (color: $light-theme-colors),
+            $light-theme-colors
+    );
+
+    $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
+    $dark-theme: map.merge(
+            (color: $dark-theme-colors),
+            $dark-theme-colors
+    );
+
+    /* Generate and encapsulate Angular Material themes */
+    #{map.get($theme, selector)} .light,
+    #{map.get($theme, selector)}.light {
+        @include mat.all-component-colors($light-theme);
+    }
+
+    #{map.get($theme, selector)} .dark,
+    #{map.get($theme, selector)}.dark {
+        @include mat.all-component-colors($dark-theme);
+    }
+}

package/styles/user-themes.scss

@@ -0,0 +1 @@
+$user-themes: (default: (selector: ".theme-default", primary: (50: #eef2ff, 100: #e0e7ff, 200: #c7d2fe, 300: #a5b4fc, 400: #818cf8, 500: #6366f1, 600: #4f46e5, 700: #4338ca, 800: #3730a3, 900: #312e81, 950: #1e1b4b, DEFAULT: #6366f1, contrast: (50: #1e1b4b, 100: #1e1b4b, 200: #1e1b4b, 300: #1e1b4b, 400: #1e1b4b, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), accent: (50: #fdf2f8, 100: #fce7f3, 200: #fbcfe8, 300: #f9a8d4, 400: #f472b6, 500: #ec4899, 600: #db2777, 700: #be185d, 800: #9d174d, 900: #831843, 950: #500724, DEFAULT: #ec4899, contrast: (50: #500724, 100: #500724, 200: #500724, 300: #500724, 400: #500724, 500: #500724, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #500724)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), sky: (selector: ".theme-sky", primary: (50: #f0f9ff, 100: #e0f2fe, 200: #bae6fd, 300: #7dd3fc, 400: #38bdf8, 500: #0ea5e9, 600: #0284c7, 700: #0369a1, 800: #075985, 900: #0c4a6e, 950: #082f49, DEFAULT: #0ea5e9, contrast: (50: #082f49, 100: #082f49, 200: #082f49, 300: #082f49, 400: #082f49, 500: #082f49, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #082f49)), accent: (50: #f8fafc, 100: #f1f5f9, 200: #e2e8f0, 300: #cbd5e1, 400: #94a3b8, 500: #64748b, 600: #475569, 700: #334155, 800: #1e293b, 900: #0f172a, 950: #020617, DEFAULT: #475569, contrast: (50: #020617, 100: #020617, 200: #020617, 300: #020617, 400: #020617, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), teal: (selector: ".theme-teal", primary: (50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf, 500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e, DEFAULT: #0d9488, contrast: (50: #042f2e, 100: #042f2e, 200: #042f2e, 300: #042f2e, 400: #042f2e, 500: #042f2e, 600: #042f2e, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #042f2e)), accent: (50: #fff7ed, 100: #ffedd5, 200: #fed7aa, 300: #fdba74, 400: #fb923c, 500: #f97316, 600: #ea580c, 700: #c2410c, 800: #9a3412, 900: #7c2d12, 950: #431407, DEFAULT: #ea580c, contrast: (50: #431407, 100: #431407, 200: #431407, 300: #431407, 400: #431407, 500: #431407, 600: #431407, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #431407)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), rose: (selector: ".theme-rose", primary: (50: #fff1f2, 100: #ffe4e6, 200: #fecdd3, 300: #fda4af, 400: #fb7185, 500: #f43f5e, 600: #e11d48, 700: #be123c, 800: #9f1239, 900: #881337, 950: #4c0519, DEFAULT: #f43f5e, contrast: (50: #4c0519, 100: #4c0519, 200: #4c0519, 300: #4c0519, 400: #4c0519, 500: #4c0519, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #4c0519)), accent: (50: #eef2ff, 100: #e0e7ff, 200: #c7d2fe, 300: #a5b4fc, 400: #818cf8, 500: #6366f1, 600: #4f46e5, 700: #4338ca, 800: #3730a3, 900: #312e81, 950: #1e1b4b, DEFAULT: #6366f1, contrast: (50: #1e1b4b, 100: #1e1b4b, 200: #1e1b4b, 300: #1e1b4b, 400: #1e1b4b, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), violet: (selector: ".theme-violet", primary: (50: #f5f3ff, 100: #ede9fe, 200: #ddd6fe, 300: #c4b5fd, 400: #a78bfa, 500: #8b5cf6, 600: #7c3aed, 700: #6d28d9, 800: #5b21b6, 900: #4c1d95, 950: #2e1065, DEFAULT: #7c3aed, contrast: (50: #2e1065, 100: #2e1065, 200: #2e1065, 300: #2e1065, 400: #2e1065, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), accent: (50: #ecfdf5, 100: #d1fae5, 200: #a7f3d0, 300: #6ee7b7, 400: #34d399, 500: #10b981, 600: #059669, 700: #047857, 800: #065f46, 900: #064e3b, 950: #022c22, DEFAULT: #059669, contrast: (50: #022c22, 100: #022c22, 200: #022c22, 300: #022c22, 400: #022c22, 500: #022c22, 600: #022c22, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #022c22)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), amber: (selector: ".theme-amber", primary: (50: #fffbeb, 100: #fef3c7, 200: #fde68a, 300: #fcd34d, 400: #fbbf24, 500: #f59e0b, 600: #d97706, 700: #b45309, 800: #92400e, 900: #78350f, 950: #451a03, DEFAULT: #f59e0b, contrast: (50: #451a03, 100: #451a03, 200: #451a03, 300: #451a03, 400: #451a03, 500: #451a03, 600: #451a03, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #451a03)), accent: (50: #f5f3ff, 100: #ede9fe, 200: #ddd6fe, 300: #c4b5fd, 400: #a78bfa, 500: #8b5cf6, 600: #7c3aed, 700: #6d28d9, 800: #5b21b6, 900: #4c1d95, 950: #2e1065, DEFAULT: #8b5cf6, contrast: (50: #2e1065, 100: #2e1065, 200: #2e1065, 300: #2e1065, 400: #2e1065, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))));

package/tailwind/plugins/icon-size.js

@@ -0,0 +1,49 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+    ({
+         matchUtilities,
+         theme
+     }) => {
+        matchUtilities(
+            {
+                'icon-size': (value) => ({
+                    width: value,
+                    height: value,
+                    minWidth: value,
+                    minHeight: value,
+                    fontSize: value,
+                    lineHeight: value,
+                    [`svg`]: {
+                        width: value,
+                        height: value
+                    }
+                })
+            },
+            {
+                values: theme('iconSize')
+            });
+    },
+    {
+        theme: {
+            iconSize: {
+                3: '0.75rem',
+                3.5: '0.875rem',
+                4: '1rem',
+                4.5: '1.125rem',
+                5: '1.25rem',
+                6: '1.5rem',
+                7: '1.75rem',
+                8: '2rem',
+                10: '2.5rem',
+                12: '3rem',
+                14: '3.5rem',
+                16: '4rem',
+                18: '4.5rem',
+                20: '5rem',
+                22: '5.5rem',
+                24: '6rem'
+            }
+        }
+    }
+);

package/tailwind/plugins/theming.js

@@ -0,0 +1,256 @@
+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;

package/tailwind/plugins/utilities.js

@@ -0,0 +1,66 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(({
+    addComponents
+}) => {
+    /*
+    * Add base components. These are very important for everything to look
+    * correct. We are adding these to the 'components' layer because they must
+    * 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'
+            },
+            '.text-secondary': {
+                '--tw-text-opacity': '1 !important',
+                color: 'rgba(var(--cmat-text-secondary-rgb), var(--tw-text-opacity)) !important'
+            },
+            '.text-hint': {
+                '--tw-text-opacity': '1 !important',
+                color: 'rgba(var(--cmat-text-hint-rgb), var(--tw-text-opacity)) !important'
+            },
+            '.text-disabled': {
+                '--tw-text-opacity': '0.5 !important',
+                color: 'rgba(var(--cmat-text-disabled-rgb), var(--tw-text-opacity)) !important'
+            },
+            '.divider': {
+                color: 'var(--cmat-divider) !important'
+            },
+            '.bg-card': {
+                '--tw-bg-opacity': '1 !important',
+                backgroundColor: 'rgba(var(--cmat-bg-card-rgb), var(--tw-bg-opacity)) !important'
+            },
+            '.bg-default': {
+                '--tw-bg-opacity': '1 !important',
+                backgroundColor: 'rgba(var(--cmat-bg-default-rgb), var(--tw-bg-opacity)) !important'
+            },
+            '.bg-dialog': {
+                '--tw-bg-opacity': '1 !important',
+                backgroundColor: 'rgba(var(--cmat-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
+            },
+            '.ring-bg-default': {
+                '--tw-ring-opacity': '1 !important',
+                '--tw-ring-color': 'rgba(var(--cmat-bg-default-rgb), var(--tw-ring-opacity)) !important'
+            },
+            '.ring-bg-card': {
+                '--tw-ring-opacity': '1 !important',
+                '--tw-ring-color': 'rgba(var(--cmat-bg-card-rgb), var(--tw-ring-opacity)) !important'
+            }
+        }
+    );
+
+    addComponents(
+        {
+            '.bg-hover': {
+                backgroundColor: 'var(--cmat-bg-hover) !important'
+            }
+        }
+    );
+});

package/tailwind/utils/generate-contrasts.js

@@ -0,0 +1,29 @@
+const chroma = require('chroma-js');
+const _ = require('lodash');
+
+/**
+ * Generates contrasting counterparts of the given palette.
+ * The provided palette must be in the same format with
+ * default Tailwind color palettes.
+ *
+ * @param palette
+ * @private
+ */
+const generateContrasts = (palette) => {
+    const lightColor = '#FFFFFF';
+    let darkColor = '#FFFFFF';
+
+    // Iterate through the palette to find the darkest color
+    _.forEach(palette, ((color) => {
+        darkColor = chroma.contrast(color, '#FFFFFF') > chroma.contrast(darkColor, '#FFFFFF') ? color : darkColor;
+    }));
+
+    // Generate the contrasting colors
+    return _.fromPairs(_.map(palette, ((color, hue) => [
+        hue,
+        chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor
+    ]
+    )));
+};
+
+module.exports = generateContrasts;