https://github.com/ryelle/postcss-palettize-colors

PostCSS plugin to replace colors in a stylesheet with colors from a given palette.
https://github.com/ryelle/postcss-palettize-colors

Last synced: about 2 months ago
JSON representation

PostCSS plugin to replace colors in a stylesheet with colors from a given palette.

• Host: GitHub
• URL: https://github.com/ryelle/postcss-palettize-colors
• Owner: ryelle
• License: mit
• Created: 2021-01-27T17:54:12.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-04T22:27:00.000Z (3 months ago)
• Last Synced: 2024-10-09T23:21:00.565Z (3 months ago)
• Language: JavaScript
• Size: 61.5 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Palettize Colors

This is a postCSS plugin used to reduce the colors used in a CSS file down to a set of "valid" colors - a color palette. It uses a basic [color difference algorithm](https://en.wikipedia.org/wiki/Color_difference) to convert any color to the closest color in the palette.

Files with the comment `/* @no-color-match */` as the first item in the file will be skipped. In WordPress, we want this for the about.css file, since those colors are intentionally unique per release.

---------------------------------

## Options

### `colors`

- Type: `Object`

- Default: `{}`

A list of colors in key -> value pairs. The keys are not used currently, but are required by the `getClosestColor` matching function. Example:

```json

{

    "white": "#fff",

    "black": "#000",

    "red": "#8c1717",

    "blue": "#0ebfe9"

}

```

## Usage

```js

const options = {

	colors: {

		"white": "#fff",

		"black": "#000",

		"red": "#8c1717",

		"blue": "#0ebfe9"

	},

};

postcss( [ require( 'postcss-palettize-colors' )( options ) ] )

```

## Example

```css

.foo {

  /* Input example */

  color: #f00;

  background-image: linear-gradient(to bottom right, #eee, #111);

}

```

```css

.foo {

  /* Output example */

  color: #8c1717;

  background-image: linear-gradient(to bottom right, #fff, #000);

}

```