brattonross / windy-radix-palette

Bring Radix Colors to Tailwind CSS
https://windy-radix-palette.vercel.app
MIT License
237 stars 9 forks source link

Mutable alias on an entire color scale doesn't work #27

Closed cdebotton closed 1 year ago

cdebotton commented 1 year ago

Hello! First of all, fantastic plugin! I've noticed that the example for a mutable alias on a scale doesn't work:

const { createPlugin } = require("windy-radix-palette");

const colors = createPlugin();

module.exports = {
    theme: {
        extend: {
            colors: {
                overlay: colors.alias({
                    light: "blackA",
                    dark: "whiteA",
                }),
            },
        },
    },
};

It seems as though the css variables aren't properly generated:

Screenshot 2023-10-26 at 7 15 42 PM

The generated variable name doesn't exist in the scope of the CSS file. All other forms of aliasing seem to work properly.

I'm using version 2.0.0-beta.5 of the plugin.

UPDATE: Instead of adding colors.plugin to the plugins array, everything seems to work as expected when I added colors.plugin.handler.

eg)

const config: Config = {
  darkMode: 'class',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  // Theme config...
-  plugins: [colors.plugin],
+  plugins: [colors.plugin.handler],
};
brattonross commented 1 year ago

Thanks for spotting this! Looks like it was a copy-paste error on my part. Should be fixed in beta.6 :)