windy-radix-palette

Options

Plugin options for windy-radix-palette

Colors

By default, CSS properties will be created for all colors from the version of Radix Colors that is installed in your project. If you would rather only include the properties for colors that you are planning to use, you can pass these as an option to the plugin. 

const radixColors = require('@radix-ui/colors');

module.exports = {
  plugins: [
    require('windy-radix-palette')({
      colors: {
        mauveA: radixColors.mauveA,
        mauveDarkA: radixColors.mauveDarkA,
        red: radixColors.red,
        redDark: radixColors.redDark,
      },
    }),
  ],
};

Root Selector

By default, this plugin will add CSS properties to the :root CSS pseudo-class. The selector where these properties are placed can be customized via the rootSelector option. For example, when working with shadow DOM you might want to put the properties under the :host selector. 

const radixColors = require('@radix-ui/colors');

module.exports = {
  plugins: [
    require('windy-radix-palette')({
      rootSelector: ':host'
    }),
  ],
};