@udixio/theme 0.3.0 → 0.3.1

package/index.cjs.js

@@ -1684,6 +1684,96 @@ class Variant {
     }
 }
 
+const tonalSpotVariant = {
+    name: 'tonalSpot',
+    palettes: {
+        primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
+        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
+        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
+        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
+        neutralVariant: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
+        },
+    },
+    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+};
+
+const getVibrantNeutralHue = (sourceColorHct) => {
+    return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
+};
+const getVibrantNeutralChroma = (sourceColorHct) => {
+    getVibrantNeutralHue(sourceColorHct);
+    return 28;
+};
+const vibrantVariant = {
+    name: 'vibrant',
+    palettes: {
+        primary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
+        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
+        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
+        neutralVariant: ({ sourceColorHct }) => {
+            const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
+            const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
+        },
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 80);
+        },
+    },
+    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+};
+
+const getExpressiveNeutralHue = (sourceColorHct) => {
+    const hue = getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
+    return hue;
+};
+const getExpressiveNeutralChroma = (sourceColorHct, isDark) => {
+    const neutralHue = getExpressiveNeutralHue(sourceColorHct);
+    return isDark ? (Hct.isYellow(neutralHue) ? 6 : 14) : 18;
+};
+const expressiveVariant = {
+    name: 'expressive',
+    palettes: {
+        primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 36 : 48),
+        secondary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-160, 155, -100, 96, -96, -156, -165, -160]), isDark ? 16 : 24),
+        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-165, 160, -105, 101, -101, -160, -170, -165]), 48),
+        neutral: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getExpressiveNeutralHue(sourceColorHct), getExpressiveNeutralChroma(sourceColorHct, isDark)),
+        neutralVariant: ({ sourceColorHct, isDark }) => {
+            const expressiveNeutralHue = getExpressiveNeutralHue(sourceColorHct);
+            const expressiveNeutralChroma = getExpressiveNeutralChroma(sourceColorHct, isDark);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(expressiveNeutralHue, expressiveNeutralChroma *
+                (expressiveNeutralHue >= 105 && expressiveNeutralHue < 125
+                    ? 1.6
+                    : 2.3));
+        },
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 64);
+        },
+    },
+    customPalettes: ({ colorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-160, 155, -100, 96, -96, -156, -165, -160]), isDark ? 16 : 24),
+};
+
+const neutralVariant = {
+    name: 'neutral',
+    palettes: {
+        primary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, Hct.isBlue(sourceColorHct.hue) ? 12 : 8),
+        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, Hct.isBlue(sourceColorHct.hue) ? 6 : 4),
+        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 161, 204, 278, 333, 360], [-32, 26, 10, -39, 24, -15, -32]), 20),
+        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4),
+        neutralVariant: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4 * 2.2),
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 50);
+        },
+    },
+    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, Hct.isBlue(colorHct.hue) ? 6 : 4),
+};
+
 const defaultColors = (colorService) => {
     const getColor = (key) => {
         return colorService.getColor(key).getMaterialColor();
@@ -2431,22 +2521,6 @@ const AppModule = {
     api: awilix.asClass(API).singleton(),
 };
 
-const tonalSpotVariant = {
-    name: 'tonalSpot',
-    palettes: {
-        primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
-        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
-        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
-        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
-        neutralVariant: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
-        error: ({ sourceColorHct }) => {
-            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
-            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
-        },
-    },
-    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
-};
-
 function defineConfig(configObject) {
     if (!configObject || typeof configObject !== 'object') {
         throw new Error('The configuration is missing or not an object');
@@ -3014,87 +3088,6 @@ const addAllNewComponents = ({ addComponents }, { statePrefix, disabledStyles, t
     addComponents(newComponents);
 };
 
-function createSubTheme({ name, darkMode, isDarkTheme, colors, }) {
-    const theme = {
-        name: isDarkTheme ? name + 'Dark' : name,
-        selectors: isDarkTheme && darkMode === 'class'
-            ? [
-                '.dark-mode .theme-' + name,
-                '.dark-mode.theme-' + name,
-                '[data-theme="dark"] .theme-' + name,
-                '[data-theme="dark"].theme-' + name,
-            ]
-            : [
-                '.theme-' + name,
-                `.theme-${name} .light-mode`,
-                `.theme-${name} [data-theme="light"]`,
-                `.light-mode .theme-${name}`,
-                `.light-mode.theme-${name}`,
-                `[data-theme="light"] .theme-${name}`,
-                `[data-theme="light"].theme-${name}`,
-            ],
-        mediaQuery: isDarkTheme && darkMode === 'media'
-            ? '@media (prefers-color-scheme: dark)'
-            : undefined,
-        extend: {
-            colors: colors,
-        },
-    };
-    return theme;
-}
-const themer = (args) => {
-    const api = args.api;
-    const options = {
-        defaultTheme: {
-            extend: {
-                colors: {},
-            },
-        },
-        themes: [
-            {
-                name: 'darkTheme',
-                extend: {
-                    colors: {},
-                },
-            },
-        ],
-    };
-    Object.entries(args.colors).forEach(([key, value]) => {
-        options.defaultTheme.extend.colors[key] = value.light;
-        options.themes[0].extend.colors[key] = value.dark;
-    });
-    options.themes[0].selectors =
-        args.darkMode === 'class'
-            ? ['.dark-mode', '[data-theme="dark"]']
-            : undefined;
-    options.themes[0].mediaQuery =
-        args.darkMode === 'media'
-            ? '@media (prefers-color-scheme: dark)'
-            : undefined;
-    if (args.subThemes) {
-        Object.entries(args.subThemes).forEach(([key, value]) => {
-            api.themes.update({ sourceColorHex: value });
-            for (const isDarkTheme of [true, false]) {
-                const colors = {};
-                api.themes.update({ isDark: isDarkTheme });
-                for (const [key, value] of api.colors.getColors().entries()) {
-                    const newKey = key
-                        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
-                        .toLowerCase();
-                    colors[newKey] = value.getHex();
-                }
-                options.themes.push(createSubTheme({
-                    name: key,
-                    isDarkTheme: isDarkTheme,
-                    darkMode: args.darkMode,
-                    colors: colors,
-                }));
-            }
-        });
-    }
-    return require('tailwindcss-themer')(options);
-};
-
 class TailwindPlugin extends PluginAbstract {
     constructor() {
         super(...arguments);
@@ -3119,8 +3112,8 @@ class TailwindImplPlugin extends PluginImplAbstract {
         if (!tailwindCssPath) {
             throw new Error('Tailwind plugin not found. Please use it first. (@plugin "@udixio/tailwind")');
         }
-        const searchPattern = /@plugin "@udixio\/tailwind"\s*{\s*}/;
-        const replacement = `@plugin "@udixio/tailwind" {\n}\n@import "./udixio.css";`;
+        const searchPattern = /@import 'tailwindcss';/;
+        const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
         if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
             replaceFileContent(tailwindCssPath, searchPattern, replacement);
         }
@@ -3217,10 +3210,14 @@ exports.bootstrapFromConfig = bootstrapFromConfig;
 exports.createTheme = createTheme;
 exports.defaultColors = defaultColors;
 exports.defineConfig = defineConfig;
+exports.expressiveVariant = expressiveVariant;
 exports.extendSpecVersion = extendSpecVersion;
+exports.font = font;
 exports.getPiecewiseHue = getPiecewiseHue;
 exports.getRotatedHue = getRotatedHue;
 exports.highestSurface = highestSurface;
 exports.importContainer = importContainer;
+exports.neutralVariant = neutralVariant;
 exports.state = state;
-exports.themer = themer;
+exports.tonalSpotVariant = tonalSpotVariant;
+exports.vibrantVariant = vibrantVariant;

package/index.esm.js

@@ -1663,6 +1663,96 @@ class Variant {
     }
 }
 
+const tonalSpotVariant = {
+    name: 'tonalSpot',
+    palettes: {
+        primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
+        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
+        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
+        neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
+        neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return TonalPalette.fromHueAndChroma(errorHue, 60);
+        },
+    },
+    customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+};
+
+const getVibrantNeutralHue = (sourceColorHct) => {
+    return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
+};
+const getVibrantNeutralChroma = (sourceColorHct) => {
+    getVibrantNeutralHue(sourceColorHct);
+    return 28;
+};
+const vibrantVariant = {
+    name: 'vibrant',
+    palettes: {
+        primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
+        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
+        neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
+        neutralVariant: ({ sourceColorHct }) => {
+            const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
+            const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
+            return TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
+        },
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return TonalPalette.fromHueAndChroma(errorHue, 80);
+        },
+    },
+    customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+};
+
+const getExpressiveNeutralHue = (sourceColorHct) => {
+    const hue = getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
+    return hue;
+};
+const getExpressiveNeutralChroma = (sourceColorHct, isDark) => {
+    const neutralHue = getExpressiveNeutralHue(sourceColorHct);
+    return isDark ? (Hct.isYellow(neutralHue) ? 6 : 14) : 18;
+};
+const expressiveVariant = {
+    name: 'expressive',
+    palettes: {
+        primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 36 : 48),
+        secondary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-160, 155, -100, 96, -96, -156, -165, -160]), isDark ? 16 : 24),
+        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-165, 160, -105, 101, -101, -160, -170, -165]), 48),
+        neutral: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(getExpressiveNeutralHue(sourceColorHct), getExpressiveNeutralChroma(sourceColorHct, isDark)),
+        neutralVariant: ({ sourceColorHct, isDark }) => {
+            const expressiveNeutralHue = getExpressiveNeutralHue(sourceColorHct);
+            const expressiveNeutralChroma = getExpressiveNeutralChroma(sourceColorHct, isDark);
+            return TonalPalette.fromHueAndChroma(expressiveNeutralHue, expressiveNeutralChroma *
+                (expressiveNeutralHue >= 105 && expressiveNeutralHue < 125
+                    ? 1.6
+                    : 2.3));
+        },
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return TonalPalette.fromHueAndChroma(errorHue, 64);
+        },
+    },
+    customPalettes: ({ colorHct, isDark }) => TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-160, 155, -100, 96, -96, -156, -165, -160]), isDark ? 16 : 24),
+};
+
+const neutralVariant = {
+    name: 'neutral',
+    palettes: {
+        primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, Hct.isBlue(sourceColorHct.hue) ? 12 : 8),
+        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, Hct.isBlue(sourceColorHct.hue) ? 6 : 4),
+        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 161, 204, 278, 333, 360], [-32, 26, 10, -39, 24, -15, -32]), 20),
+        neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4),
+        neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4 * 2.2),
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return TonalPalette.fromHueAndChroma(errorHue, 50);
+        },
+    },
+    customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, Hct.isBlue(colorHct.hue) ? 6 : 4),
+};
+
 const defaultColors = (colorService) => {
     const getColor = (key) => {
         return colorService.getColor(key).getMaterialColor();
@@ -2410,22 +2500,6 @@ const AppModule = {
     api: asClass(API).singleton(),
 };
 
-const tonalSpotVariant = {
-    name: 'tonalSpot',
-    palettes: {
-        primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
-        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
-        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
-        neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
-        neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
-        error: ({ sourceColorHct }) => {
-            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
-            return TonalPalette.fromHueAndChroma(errorHue, 60);
-        },
-    },
-    customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, 16),
-};
-
 function defineConfig(configObject) {
     if (!configObject || typeof configObject !== 'object') {
         throw new Error('The configuration is missing or not an object');
@@ -2993,87 +3067,6 @@ const addAllNewComponents = ({ addComponents }, { statePrefix, disabledStyles, t
     addComponents(newComponents);
 };
 
-function createSubTheme({ name, darkMode, isDarkTheme, colors, }) {
-    const theme = {
-        name: isDarkTheme ? name + 'Dark' : name,
-        selectors: isDarkTheme && darkMode === 'class'
-            ? [
-                '.dark-mode .theme-' + name,
-                '.dark-mode.theme-' + name,
-                '[data-theme="dark"] .theme-' + name,
-                '[data-theme="dark"].theme-' + name,
-            ]
-            : [
-                '.theme-' + name,
-                `.theme-${name} .light-mode`,
-                `.theme-${name} [data-theme="light"]`,
-                `.light-mode .theme-${name}`,
-                `.light-mode.theme-${name}`,
-                `[data-theme="light"] .theme-${name}`,
-                `[data-theme="light"].theme-${name}`,
-            ],
-        mediaQuery: isDarkTheme && darkMode === 'media'
-            ? '@media (prefers-color-scheme: dark)'
-            : undefined,
-        extend: {
-            colors: colors,
-        },
-    };
-    return theme;
-}
-const themer = (args) => {
-    const api = args.api;
-    const options = {
-        defaultTheme: {
-            extend: {
-                colors: {},
-            },
-        },
-        themes: [
-            {
-                name: 'darkTheme',
-                extend: {
-                    colors: {},
-                },
-            },
-        ],
-    };
-    Object.entries(args.colors).forEach(([key, value]) => {
-        options.defaultTheme.extend.colors[key] = value.light;
-        options.themes[0].extend.colors[key] = value.dark;
-    });
-    options.themes[0].selectors =
-        args.darkMode === 'class'
-            ? ['.dark-mode', '[data-theme="dark"]']
-            : undefined;
-    options.themes[0].mediaQuery =
-        args.darkMode === 'media'
-            ? '@media (prefers-color-scheme: dark)'
-            : undefined;
-    if (args.subThemes) {
-        Object.entries(args.subThemes).forEach(([key, value]) => {
-            api.themes.update({ sourceColorHex: value });
-            for (const isDarkTheme of [true, false]) {
-                const colors = {};
-                api.themes.update({ isDark: isDarkTheme });
-                for (const [key, value] of api.colors.getColors().entries()) {
-                    const newKey = key
-                        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
-                        .toLowerCase();
-                    colors[newKey] = value.getHex();
-                }
-                options.themes.push(createSubTheme({
-                    name: key,
-                    isDarkTheme: isDarkTheme,
-                    darkMode: args.darkMode,
-                    colors: colors,
-                }));
-            }
-        });
-    }
-    return require('tailwindcss-themer')(options);
-};
-
 class TailwindPlugin extends PluginAbstract {
     constructor() {
         super(...arguments);
@@ -3098,8 +3091,8 @@ class TailwindImplPlugin extends PluginImplAbstract {
         if (!tailwindCssPath) {
             throw new Error('Tailwind plugin not found. Please use it first. (@plugin "@udixio/tailwind")');
         }
-        const searchPattern = /@plugin "@udixio\/tailwind"\s*{\s*}/;
-        const replacement = `@plugin "@udixio/tailwind" {\n}\n@import "./udixio.css";`;
+        const searchPattern = /@import 'tailwindcss';/;
+        const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
         if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
             replaceFileContent(tailwindCssPath, searchPattern, replacement);
         }
@@ -3167,4 +3160,4 @@ const createTheme = () => {
     return plugin.load();
 };
 
-export { API, AppContainer, AppModule, ColorApi, ColorManager, ColorModule, ConfigModule, ConfigService, ConfigurableColor, ContrastCurve, DynamicColor, FontFamily, FontPlugin, PluginAbstract, PluginApi, PluginImplAbstract, PluginModule, Scheme, SchemeManager, TailwindPlugin, ThemeApi, ThemeModule, ToneDeltaPair, Variant, VariantManager, bootstrap, bootstrapFromConfig, createTheme, defaultColors, defineConfig, extendSpecVersion, getPiecewiseHue, getRotatedHue, highestSurface, importContainer, state, themer };
+export { API, AppContainer, AppModule, ColorApi, ColorManager, ColorModule, ConfigModule, ConfigService, ConfigurableColor, ContrastCurve, DynamicColor, FontFamily, FontPlugin, PluginAbstract, PluginApi, PluginImplAbstract, PluginModule, Scheme, SchemeManager, TailwindPlugin, ThemeApi, ThemeModule, ToneDeltaPair, Variant, VariantManager, bootstrap, bootstrapFromConfig, createTheme, defaultColors, defineConfig, expressiveVariant, extendSpecVersion, font, getPiecewiseHue, getRotatedHue, highestSurface, importContainer, neutralVariant, state, tonalSpotVariant, vibrantVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "./index.cjs.js",
   "module": "./index.esm.js",
   "dependencies": {

package/src/lib/plugins/tailwind/plugins-tailwind/index.d.ts

@@ -1,2 +1,2 @@
 export * from './state';
-export * from './themer';
+export * from './font';

package/src/lib/theme/index.d.ts

@@ -1,5 +1,5 @@
 export * from './theme.module';
-export * from './variant';
+export * from './variants';
 export * from './scheme.manager';
 export * from './scheme';
 export * from './theme.api';

package/src/lib/plugins/tailwind/plugins-tailwind/themer.d.ts

@@ -1,10 +0,0 @@
-import { API } from '../../../API';
-export declare const themer: (args: {
-    colors: Record<string, {
-        light: string;
-        dark: string;
-    }>;
-    darkMode: "class" | "media";
-    subThemes?: Record<string, string>;
-    api: API;
-}) => any;