postcss-material-colors
v0.6.2
Published
PostCSS plugin for generating Material Design 3 color palette as variables
Downloads
7
Maintainers
Readme
postcss-material-colors. Inspired by tailwind-material-colors
A PostCSS plugin to use the Material Design 3 Color System with PostCSS.
usage
npm install --save-dev postcss-material-colors
- in postcss config:
import theme from "postcss-material-colors"
...
plugins: [
theme({ darkModeStragety: "class" /* "class" (default) | "data" | "media" */ }),
...
],
...
- in css (usually your root file):
/* defaults for variant and contrast are shown */
@postcss-material-colors (primary: #ff0000, variant: tonalSpot, contrast: 0.0, green: #00ff00); /* add any extra colors you want */
[!WARNING] actual types look different
export interface ThemeOptions {
primary: string; // hex
variant?:
| "content"
| "expressive"
| "fidelity"
| "fruitSalad"
| "monochrome"
| "neutral"
| "ranbow"
| "tonalSpot"
| "vibrant";
contrast?: number; // between -1.0 and 1.0
[key: string]: string; // hex (extra colors)
}
soon
- extra colors