GitHub
213
Created 2 years ago, last commit a month ago
6 contributors
86 commits
Stars added on GitHub, month by month
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
11
12
1
2
3
4
5
6
7
8
9
10
2022
2023
Stars added on GitHub, per day, on average
Yesterday
=
Last week
+0.3 /day
Last month
+0.5 /day
Package on NPM
Monthly downloads on NPM
11
12
1
2
3
4
5
6
7
8
9
10
2022
2023
README

Windy Radix Palette

Brings Radix Colors to Tailwind.

Features an automatic dark mode palette switch and Typography plugin.

Installation

npm install --save-dev windy-radix-palette @radix-ui/colors

Usage

Add the plugin to your Tailwind config:

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

Then you can use the classes in your markup!

<button class="bg-tomato-4 hover:bg-tomato-5 text-tomatoA-11">Button</button>

Options

Colors

By default, this plugin will add CSS properties for all of the available Radix Colors. If you would rather only include the properties for colors that you are actually using, 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:

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

Dark mode

Thanks to the design of the Radix Colors palettes, you don't actually need to do anything to make dark mode work! The colors in this palette will automatically switch to the light/dark variant based on your Tailwind dark mode settings:

  • When darkMode is not set, or is set to 'media', the palette will change based on the user's preferred color scheme (prefers-color-scheme)
  • When darkMode is set to 'class', the palette will change based on the presence of the dark mode selector (defaults to .dark), note that you can customize the dark mode selector if required

Unlike the default Tailwind palette, Radix Colors come in light and dark variants, and the palettes are meant to be used only in light and dark mode respectively (in order to meet WCAG color contrast guidelines). This means that you don't need to prefix any of your classes with dark:—the palettes are designed to just work when switching between light and dark mode.

Typography

The typography plugin creates a set of themes for Tailwind Typography, based on the Radix Colors gray scales.

Installation

npm install --save-dev windy-radix-typography @tailwindcss/typography

Usage

Add it to your Tailwind config:

module.exports = {
	plugins: [
		require("windy-radix-palette"),
		require("@tailwindcss/typography"),
		require("windy-radix-typography"),
	],
};

Now you can use the prose themes in your markup:

<div class="prose prose-mauve">...</div>

Check out the docs and demo here.

Forms

Here is an example of a simple plugin that makes use of the Radix Colors palette to override the @tailwindcss/forms colors:

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

function resolveColor(color, opacityVariableName) {
  return color.replace('<alpha-value>', `var(${opacityVariableName}, 1)`)
}

module.exports = {
	// ...
	plugins: [
		require("windy-radix-palette"),
		require("@tailwindcss/forms"),
		plugin(({ addBase, theme }) => {
			addBase({
				[[
					"[type='text']",
					"input:where(:not([type]))",
					"[type='email']",
					"[type='url']",
					"[type='password']",
					"[type='number']",
					"[type='date']",
					"[type='datetime-local']",
					"[type='month']",
					"[type='search']",
					"[type='tel']",
					"[type='time']",
					"[type='week']",
					"[multiple]",
					"textarea",
					"select",
				]]: {
					borderColor: resolveColor(
						theme("colors.slate.7"),
						"--tw-border-opacity",
					),
					"&:focus": {
						"--tw-ring-color": resolveColor(
							theme("colors.blue.7"),
							"--tw-ring-opacity",
						),
						"border-color": resolveColor(
							theme("colors.blue.7"),
							"--tw-border-opacity",
						),
					},
				},
				[["input::placeholder", "textarea::placeholder"]]: {
					color: resolveColor(theme("colors.slate.9"), "--tw-text-opacity"),
				},
				[[`[type='checkbox']`, `[type='radio']`]]: {
					color: resolveColor(theme("colors.blue.9"), "--tw-text-opacity"),
					borderColor: resolveColor(
						theme("colors.slate.7"),
						"--tw-border-opacity",
					),
					"&:focus": {
						"--tw-ring-color": resolveColor(
							theme("colors.blue.7"),
							"--tw-ring-opacity",
						),
					},
				},
			});
		}),
	],
};

Attributions

  • Radix UI team for creating these wonderful color palettes