Postcss-material-colors NPM

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)
}

More about args