open-index/open-npm huggingface dataset:
npm package: @palett/cards
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/cards

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/cards?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/cards.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/cards"><img src="https://img.shields.io/npm/v/@palett/cards.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/cards"><img src="https://img.shields.io/npm/l/@palett/cards.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/cards'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/color-algebra
Description: A color converter among RGB, HEX and HSL.
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/color-algebra

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/color-algebra?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/color-algebra.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/color-algebra"><img src="https://img.shields.io/npm/v/@palett/color-algebra.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/color-algebra"><img src="https://img.shields.io/npm/l/@palett/color-algebra.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/color-algebra'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/color-space
Description: A color space consists of RGB and HSL
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/presets

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/presets?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/presets.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/v/@palett/presets.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/l/@palett/presets.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/presets'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/convert
Description: A color converter among RGB, HEX and HSL.
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/convert

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/convert?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/convert.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/convert"><img src="https://img.shields.io/npm/v/@palett/convert.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/convert"><img src="https://img.shields.io/npm/l/@palett/convert.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/convert'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/dye
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/dye

A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)

[npm-image]: https://img.shields.io/npm/v/@palett/dye.svg?style=flat-square

[quality-image]: http://npm.packagequality.com/shield/@palett/dye.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/@palett/dye.svg?style=flat-square

[total-download-image]:https://img.shields.io/npm/dt/@palett/dye.svg?style=flat-square

[license-image]: https://img.shields.io/npm/l/@palett/dye.svg?style=flat-square

[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/dye?style=flat-square

[size]: https://packagephobia.now.sh/badge?p=@palett/dye

[//]: <> (Link)

[npm-url]: https://npmjs.org/package/@palett/dye

[quality-url]: http://packagequality.com/#?package=@palett/dye

[github-url]: https://github.com/hoyeungw/@palett/dye

[size-url]: https://packagephobia.now.sh/result?p=@palett/dye

## Features

- ES2015 syntax

## Install

```console
$ npm install @palett/dye
```

## Usage

```js
import { Temp } from '@palett/dye'
```

## Meta

[LICENSE (MIT)](/LICENSE)
npm package: @palett/dye-factory
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.9.15

## @palett/dye-factory
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/dye-factory.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/dye-factory.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/dye-factory.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/dye-factory.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/dye-factory.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/dye-factory?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/dye-factory

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/dye-factory
[quality-url]: http://packagequality.com/#?package=@palett/dye-factory
[github-url]: https://github.com/hoyeungw/@palett/dye-factory
[size-url]: https://packagephobia.now.sh/result?p=@palett/dye-factory

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/dye-factory
```

## Usage
```js
import { Temp } from '@palett/dye-factory'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/enum-ansi-codes
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/enum-ansi-codes
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/enum-ansi-codes.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/enum-ansi-codes.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/enum-ansi-codes.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/enum-ansi-codes.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/enum-ansi-codes.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/enum-ansi-codes?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/enum-ansi-codes

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/enum-ansi-codes
[quality-url]: http://packagequality.com/#?package=@palett/enum-ansi-codes
[github-url]: https://github.com/hoyeungw/@palett/enum-ansi-codes
[size-url]: https://packagephobia.now.sh/result?p=@palett/enum-ansi-codes

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/enum-ansi-codes
```

## Usage
```js
import { Temp } from '@palett/enum-ansi-codes'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/enum-color-cards
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/enum-color-cards
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/enum-color-cards.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/enum-color-cards.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/enum-color-cards.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/enum-color-cards.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/enum-color-cards.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/enum-color-cards?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/enum-color-cards

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/enum-color-cards
[quality-url]: http://packagequality.com/#?package=@palett/enum-color-cards
[github-url]: https://github.com/hoyeungw/@palett/enum-color-cards
[size-url]: https://packagephobia.now.sh/result?p=@palett/enum-color-cards

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/enum-color-cards
```

## Usage
```js
import { Temp } from '@palett/enum-color-cards'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/enum-color-space
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/enum-color-space
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/enum-color-space.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/enum-color-space.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/enum-color-space.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/enum-color-space.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/enum-color-space.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/enum-color-space?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/enum-color-space

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/enum-color-space
[quality-url]: http://packagequality.com/#?package=@palett/enum-color-space
[github-url]: https://github.com/hoyeungw/@palett/enum-color-space
[size-url]: https://packagephobia.now.sh/result?p=@palett/enum-color-space

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/enum-color-space
```

## Usage
```js
import { Temp } from '@palett/enum-color-space'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/enum-colorant-modes
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/enum-colorant-modes
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/enum-colorant-modes.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/enum-colorant-modes.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/enum-colorant-modes.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/enum-colorant-modes.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/enum-colorant-modes.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/enum-colorant-modes?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/enum-colorant-modes

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/enum-colorant-modes
[quality-url]: http://packagequality.com/#?package=@palett/enum-colorant-modes
[github-url]: https://github.com/hoyeungw/@palett/enum-colorant-modes
[size-url]: https://packagephobia.now.sh/result?p=@palett/enum-colorant-modes

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/enum-colorant-modes
```

## Usage
```js
import { Temp } from '@palett/enum-colorant-modes'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/enum-font-effects
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/enum-font-effects
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/enum-font-effects.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/enum-font-effects.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/enum-font-effects.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/enum-font-effects.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/enum-font-effects.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/enum-font-effects?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/enum-font-effects

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/enum-font-effects
[quality-url]: http://packagequality.com/#?package=@palett/enum-font-effects
[github-url]: https://github.com/hoyeungw/@palett/enum-font-effects
[size-url]: https://packagephobia.now.sh/result?p=@palett/enum-font-effects

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/enum-font-effects
```

## Usage
```js
import { Temp } from '@palett/enum-font-effects'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/flopper
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/flopper

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/flopper?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/flopper.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/flopper"><img src="https://img.shields.io/npm/v/@palett/flopper.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/flopper"><img src="https://img.shields.io/npm/l/@palett/flopper.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/flopper'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/fluo
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/fluoMatrix

A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)

[npm-image]: https://img.shields.io/npm/v/@palett/fluo.svg?style=flat-square

[quality-image]: http://npm.packagequality.com/shield/@palett/fluo.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/@palett/fluo.svg?style=flat-square

[total-download-image]:https://img.shields.io/npm/dt/@palett/fluo.svg?style=flat-square

[license-image]: https://img.shields.io/npm/l/@palett/fluo.svg?style=flat-square

[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/fluo?style=flat-square

[size]: https://packagephobia.now.sh/badge?p=@palett/fluo

[//]: <> (Link)

[npm-url]: https://npmjs.org/package/@palett/fluo

[quality-url]: http://packagequality.com/#?package=@palett/fluo

[github-url]: https://github.com/hoyeungw/@palett/fluo

[size-url]: https://packagephobia.now.sh/result?p=@palett/fluo

## Features

- ES2015 syntax

## Install

```console
$ npm install @palett/fluoMatrix
```

## Usage

```js
import { Temp } from '@palett/fluoMatrix'
```

## Meta

[LICENSE (MIT)](/LICENSE)
npm package: @palett/fluo-entries
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/fluoMatrix-entries

A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)

[npm-image]: https://img.shields.io/npm/v/@palett/fluo-entries.svg?style=flat-square

[quality-image]: http://npm.packagequality.com/shield/@palett/fluo-entries.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/@palett/fluo-entries.svg?style=flat-square

[total-download-image]:https://img.shields.io/npm/dt/@palett/fluo-entries.svg?style=flat-square

[license-image]: https://img.shields.io/npm/l/@palett/fluo-entries.svg?style=flat-square

[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/fluo-entries?style=flat-square

[size]: https://packagephobia.now.sh/badge?p=@palett/fluo-entries

[//]: <> (Link)

[npm-url]: https://npmjs.org/package/@palett/fluo-entries

[quality-url]: http://packagequality.com/#?package=@palett/fluo-entries

[github-url]: https://github.com/hoyeungw/@palett/fluo-entries

[size-url]: https://packagephobia.now.sh/result?p=@palett/fluo-entries

## Features

- ES2015 syntax

## Install

```console
$ npm install @palett/fluoMatrix-entries
```

## Usage

```js
import { Temp } from '@palett/fluoMatrix-entries'
```

## Meta

[LICENSE (MIT)](/LICENSE)
npm package: @palett/fluo-matrix
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/fluoMatrix-matrix

A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)

[npm-image]: https://img.shields.io/npm/v/@palett/fluo-matrix.svg?style=flat-square

[quality-image]: http://npm.packagequality.com/shield/@palett/fluo-matrix.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/@palett/fluo-matrix.svg?style=flat-square

[total-download-image]:https://img.shields.io/npm/dt/@palett/fluo-matrix.svg?style=flat-square

[license-image]: https://img.shields.io/npm/l/@palett/fluo-matrix.svg?style=flat-square

[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/fluo-matrix?style=flat-square

[size]: https://packagephobia.now.sh/badge?p=@palett/fluo-matrix

[//]: <> (Link)

[npm-url]: https://npmjs.org/package/@palett/fluo-matrix

[quality-url]: http://packagequality.com/#?package=@palett/fluo-matrix

[github-url]: https://github.com/hoyeungw/@palett/fluo-matrix

[size-url]: https://packagephobia.now.sh/result?p=@palett/fluo-matrix

## Features

- ES2015 syntax

## Install

```console
$ npm install @palett/fluoMatrix-matrix
```

## Usage

```js
import { Temp } from '@palett/fluoMatrix-matrix'
```

## Meta

[LICENSE (MIT)](/LICENSE)
npm package: @palett/fluo-vector
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/fluoMatrix-vector

A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)

[npm-image]: https://img.shields.io/npm/v/@palett/fluo-vector.svg?style=flat-square

[quality-image]: http://npm.packagequality.com/shield/@palett/fluo-vector.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/@palett/fluo-vector.svg?style=flat-square

[total-download-image]:https://img.shields.io/npm/dt/@palett/fluo-vector.svg?style=flat-square

[license-image]: https://img.shields.io/npm/l/@palett/fluo-vector.svg?style=flat-square

[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/fluo-vector?style=flat-square

[size]: https://packagephobia.now.sh/badge?p=@palett/fluo-vector

[//]: <> (Link)

[npm-url]: https://npmjs.org/package/@palett/fluo-vector

[quality-url]: http://packagequality.com/#?package=@palett/fluo-vector

[github-url]: https://github.com/hoyeungw/@palett/fluo-vector

[size-url]: https://packagephobia.now.sh/result?p=@palett/fluo-vector

## Features

- ES2015 syntax

## Install

```console
$ npm install @palett/fluoMatrix-vector
```

## Usage

```js
import { Temp } from '@palett/fluoMatrix-vector'
```

## Meta

[LICENSE (MIT)](/LICENSE)
npm package: @palett/munsell
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/presets

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/presets?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/presets.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/v/@palett/presets.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/l/@palett/presets.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/presets'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/nuance-lotone
Description: @palett color chart - lotone
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/nuance-lotone
@palett color chart - lotone

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/nuance-lotone.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/nuance-lotone.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/nuance-lotone.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/nuance-lotone.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/nuance-lotone.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/nuance-lotone?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/nuance-lotone

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/nuance-lotone
[quality-url]: http://packagequality.com/#?package=@palett/nuance-lotone
[github-url]: https://github.com/hoyeungw/@palett/nuance-lotone
[size-url]: https://packagephobia.now.sh/result?p=@palett/nuance-lotone

## Features

- Object of hex color code to color name.
- Refined color collection.
- Out-of-the-box ready to use.
- ES module support only (export/import syntax).

## Install
```console
$ npm install @palett/nuance-lotone
```

## Usage
```js
import { Temp } from '@palett/nuance-lotone'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/nuance-midtone
Description: @palett color chart - midtone
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/nuance-midtone
@palett color chart - midtone

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/nuance-midtone.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/nuance-midtone.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/nuance-midtone.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/nuance-midtone.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/nuance-midtone.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/nuance-midtone?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/nuance-midtone

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/nuance-midtone
[quality-url]: http://packagequality.com/#?package=@palett/nuance-midtone
[github-url]: https://github.com/hoyeungw/@palett/nuance-midtone
[size-url]: https://packagephobia.now.sh/result?p=@palett/nuance-midtone

## Features

- Object of hex color code to color name.
- Refined color collection.
- Out-of-the-box ready to use.
- ES module support only (export/import syntax).

## Install
```console
$ npm install @palett/nuance-midtone
```

## Usage
```js
import { Temp } from '@palett/nuance-midtone'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/nuance-ubitone
Description: @palett color chart - ubitone
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/nuance-ubitone
@palett color chart - ubitone

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/nuance-ubitone.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/nuance-ubitone.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/nuance-ubitone.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/nuance-ubitone.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/nuance-ubitone.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/nuance-ubitone?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/nuance-ubitone

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/nuance-ubitone
[quality-url]: http://packagequality.com/#?package=@palett/nuance-ubitone
[github-url]: https://github.com/hoyeungw/@palett/nuance-ubitone
[size-url]: https://packagephobia.now.sh/result?p=@palett/nuance-ubitone

## Features

- Object of hex color code to color name.
- Refined color collection.
- Out-of-the-box ready to use.
- ES module support only (export/import syntax).

## Install
```console
$ npm install @palett/nuance-ubitone
```

## Usage
```js
import { Temp } from '@palett/nuance-ubitone'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palett/pres
Description: <p align="center">   <a href="https://npmcharts.com/compare/@palett/presets?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/presets.svg" alt="Downloads"></a>   <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.s
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/presets

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/presets?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/presets.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/v/@palett/presets.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/l/@palett/presets.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/presets'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/presets
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/presets

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/presets?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/presets.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/v/@palett/presets.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/presets"><img src="https://img.shields.io/npm/l/@palett/presets.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/presets'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/projector
Description: Projector projects input number to color within pre-defined bound
Author: Hoyeung Wong
Latest version: 0.12.28

## says

### A light and simple debug tool.

<p align="center">
  <a href="https://npmcharts.com/compare/says?minimal=true"><img src="https://img.shields.io/npm/dm/says.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/v/says.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/l/says.svg" alt="License"></a>
</p>

## Highlights

- A debug tool.

## Install

```console
$ npm install says
```

## Usage

### Simple

```js
import { Says } from '@palett/projector'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)

debug.says('client', '\'Shakespeare\'')
debug.says('server', '\'Dickens\'')
```

### Factorial with pipeline operator

```js
import { Says } from '@palett/projector'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)
const says = {
  client: debug.credit('chef'),
  server: debug.credit('aboyeur')
}
'Shakespeare' |> says.client
'Dickens' |> says.server
```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/projector-config
Description: A debug tool
Author: Hoyeung Wong
Latest version: 0.9.16

## says
### A light and simple debug tool.

<p align="center">
  <a href="https://npmcharts.com/compare/says?minimal=true"><img src="https://img.shields.io/npm/dm/says.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/v/says.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/l/says.svg" alt="License"></a>
</p>

## Highlights

- A debug tool.

## Install

```console
$ npm install says
```

## Usage

### Simple
```js
import { Says } from '@palett/projector-config'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)

debug.says('client', '\'Shakespeare\'')
debug.says('server', '\'Dickens\'')
```

### Factorial with pipeline operator
```js
import { Says } from '@palett/projector-config'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)
const says = {
  client: debug.credit('chef'),
  server: debug.credit('aboyeur')
}
'Shakespeare' |> says.client
'Dickens' |> says.server
```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang (Vincent) Wang
npm package: @palett/projector-factory
Description: A debug tool
Author: Hoyeung Wong
Latest version: 0.9.16

## says
### A light and simple debug tool.

<p align="center">
  <a href="https://npmcharts.com/compare/says?minimal=true"><img src="https://img.shields.io/npm/dm/says.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/v/says.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/l/says.svg" alt="License"></a>
</p>

## Highlights

- A debug tool.

## Install

```console
$ npm install says
```

## Usage

### Simple
```js
import { Says } from '@palett/projector-factory'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)

debug.says('client', '\'Shakespeare\'')
debug.says('server', '\'Dickens\'')
```

### Factorial with pipeline operator
```js
import { Says } from '@palett/projector-factory'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)
const says = {
  client: debug.credit('chef'),
  server: debug.credit('aboyeur')
}
'Shakespeare' |> says.client
'Dickens' |> says.server
```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang (Vincent) Wang
npm package: @palett/says
Description: A debug tool
Author: Hoyeung Wong
Latest version: 0.9.10

## says
### A light and simple debug tool.

<p align="center">
  <a href="https://npmcharts.com/compare/says?minimal=true"><img src="https://img.shields.io/npm/dm/says.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/v/says.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/says"><img src="https://img.shields.io/npm/l/says.svg" alt="License"></a>
</p>

## Highlights

- A debug tool.

## Install

```console
$ npm install says
```

## Usage

### Simple
```js
import { Says } from '@palett/says'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)

debug.says('client', '\'Shakespeare\'')
debug.says('server', '\'Dickens\'')
```

### Factorial with pipeline operator
```js
import { Says } from '@palett/says'
import { greys, palette } from 'spettro'

const castList = {
  client: palette.Red.base,
  server: palette.Purple.base,
  stranger: greys.Grey.base
}

const debug = Says.build(castList)
const says = {
  client: debug.credit('chef'),
  server: debug.credit('aboyeur')
}
'Shakespeare' |> says.client
'Dickens' |> says.server
```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang (Vincent) Wang
npm package: @palett/stringify
Description: A color converter among RGB, HEX and HSL.
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/stringify

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/stringify?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/stringify.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/stringify"><img src="https://img.shields.io/npm/v/@palett/stringify.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/stringify"><img src="https://img.shields.io/npm/l/@palett/stringify.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/stringify'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/table
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/table

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/table?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/table.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/table"><img src="https://img.shields.io/npm/v/@palett/table.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/table"><img src="https://img.shields.io/npm/l/@palett/table.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/table'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/toner-hex
Description: A color converter among RGB, HEX and HSL.
Author: Hoyeung Wong
Latest version: 0.9.11

## @palett/toner-hex
### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/toner-hex?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/toner-hex.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/toner-hex"><img src="https://img.shields.io/npm/v/@palett/toner-hex.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/toner-hex"><img src="https://img.shields.io/npm/l/@palett/toner-hex.svg" alt="License"></a>
</p>

## Usage
    
### ES6
    import { Rgb, Hsl } from '@palett/toner-hex'
    
### CommonJS

### Browser
    
## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang (Vincent) Wang
npm package: @palett/toner-hsl
Description: A color converter among RGB, HEX and HSL.
Author: Hoyeung Wong
Latest version: 0.9.11

## @palett/toner-hsl
### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/toner-hsl?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/toner-hsl.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/toner-hsl"><img src="https://img.shields.io/npm/v/@palett/toner-hsl.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/toner-hsl"><img src="https://img.shields.io/npm/l/@palett/toner-hsl.svg" alt="License"></a>
</p>

## Usage
    
### ES6
    import { Rgb, Hsl } from '@palett/toner-hsl'
    
### CommonJS

### Browser
    
## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang (Vincent) Wang
npm package: @palett/util-ansi
Description: A color converter
Author: Hoyeung Wong
Latest version: 0.12.28

## @palett/util-ansi

### A color converter.

<p align="center">
  <a href="https://npmcharts.com/compare/@palett/util-ansi?minimal=true"><img src="https://img.shields.io/npm/dm/@palett/util-ansi.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@palett/util-ansi"><img src="https://img.shields.io/npm/v/@palett/util-ansi.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@palett/util-ansi"><img src="https://img.shields.io/npm/l/@palett/util-ansi.svg" alt="License"></a>
</p>

## Usage

### ES6

    import { Rgb, Hsl } from '@palett/util-ansi'

### CommonJS

### Browser

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Haoyang Wang
npm package: @palett/util-fluo
Description: A colorant to string
Author: Hoyeung Wong
Latest version: 0.11.6

## @palett/util-fluoMatrix
A colorant to string

[![npm version][npm-image]][npm-url]
[![npm quality][quality-image]][quality-url]
[![npm download][download-image]][npm-url]
[![npm total-download][total-download-image]][npm-url]
[![size][size]][size-url]
[![github commit activity][commit-image]][github-url]
[![npm license][license-image]][npm-url]

[//]: <> (Shields)
[npm-image]: https://img.shields.io/npm/v/@palett/util-fluo.svg?style=flat-square
[quality-image]: http://npm.packagequality.com/shield/@palett/util-fluo.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@palett/util-fluo.svg?style=flat-square
[total-download-image]:https://img.shields.io/npm/dt/@palett/util-fluo.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/@palett/util-fluo.svg?style=flat-square
[commit-image]: https://img.shields.io/github/commit-activity/y/hoyeungw/@palett/util-fluo?style=flat-square
[size]: https://packagephobia.now.sh/badge?p=@palett/util-fluo

[//]: <> (Link)
[npm-url]: https://npmjs.org/package/@palett/util-fluo
[quality-url]: http://packagequality.com/#?package=@palett/util-fluo
[github-url]: https://github.com/hoyeungw/@palett/util-fluo
[size-url]: https://packagephobia.now.sh/result?p=@palett/util-fluo

## Features

- ES2015 syntax

## Install
```console
$ npm install @palett/util-fluoMatrix
```

## Usage
```js
import { Temp } from '@palett/util-fluoMatrix'
```

## Meta
[LICENSE (MIT)](/LICENSE)
npm package: @palettebro/color-picker
Description: A versatile color picker component library for React applications, supporting multiple color formats and providing an intuitive interface for color selection.
Latest version: 0.2.1

# @palettebro/color-picker

A versatile color picker component library for React applications, supporting multiple color formats and providing an intuitive interface for color selection.

## Features

- Multiple color format support:
  - RGB
  - HSL
  - LCH
  - CSS (Hex, RGB, HSL)
  - Tailwind colors
  - Pantone colors
  - RAL colors

## Installation

```bash
pnpm add @palettebro/color-picker
```

## Usage

```tsx
import { ColorPicker } from '@palettebro/color-picker';
import { useState } from 'react';

function App() {
  const [color, setColor] = useState('#FF0000');
  return (
    <ColorPicker
      value={color}
      onChange={(newColor) => setColor(newColor)}
    />
  );
}

export default App;
```


## Props

### ColorPicker

| Prop | Type | Description |
|------|------|-------------|
| value | `string` | The current color value (hex, rgb, hsl, or lch format) |
| onChange | `(value: string) => void` | Callback function when color changes. Returns the new color in HEX format |

## Color Formats

### RGB Picker
Uses RGB sliders (0-255) for Red, Green, and Blue channels.

### HSL Picker
Provides HSL sliders for:
- Hue (0-360°)
- Saturation (0-100%)
- Lightness (0-100%)

### LCH Picker
Offers LCH sliders for:
- Lightness (0-100)
- Chroma (0-100)
- Hue (0-360°)

### CSS Color Picker
Accepts any valid CSS color format:
- Hex (#RRGGBB)
- RGB (rgb(r, g, b))
- HSL (hsl(h, s%, l%))

### Tailwind Colors
Provides a grid of Tailwind CSS default colors.

### Pantone Colors
Offers a selection of Pantone color swatches.

### RAL Colors
Includes a collection of RAL color standards.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT
npm package: @palettebro/tailwind
Description: [![License: MIT][license-image]][license-url] [![CI][ci-image]][ci-url] [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
Latest version: 2.0.5

# @palettebro/tailwind

[![License: MIT][license-image]][license-url]
[![CI][ci-image]][ci-url]
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]

A Tailwind 4 plugin for adding `@palettebro/generator` colors to Tailwind color utilities.

## Installation

```bash
npm install @palettebro/tailwind
# or
yarn add @palettebro/tailwind
```

## Usage

See [Demo](../../apps/demo-tailwind/README.md)

### Example

Add the plugin to your `css`:

```css
@plugin '@palettebro/tailwind' {
  reverseLightDarkShades: true;
  primary: #412f9c;
}
```

Use classes as:

```jsx
<MyComponent className="bg-surface-container text-on-surface">
```

Or CSS variables as:

```jsx
<MyComponent className="bg-(--color-surface-container) text-(--color--on-surface)">
```

## License

MIT

[license-image]: https://img.shields.io/badge/License-MIT-brightgreen.svg?style=flat-square
[license-url]: https://opensource.org/licenses/MIT
[ci-image]: https://img.shields.io/github/actions/workflow/status/matteolc/-palettebro/ci.yml?branch=main&logo=github&style=flat-square
[ci-url]: https://github.com/matteolc/-palettebro/actions/workflows/ci.yml
[npm-image]: https://img.shields.io/npm/v/@palettebro%2Ftailwind.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@palettebro%2Ftailwind
[downloads-image]: https://img.shields.io/npm/dm/@palettebro%2Ftailwind.svg?style=flat-square
npm package: @palettebro/tailwind-theme
Description: A powerful Tailwind CSS plugin for managing color themes with OKLCH color space support.
Latest version: 1.0.0

# @palettebro/tailwind-theme

A powerful Tailwind CSS plugin for managing color themes with OKLCH color space support.

## Features

- 🎨 Dynamic theme switching with CSS custom properties
- 🌗 Built-in dark mode support
- 🎯 Semantic color tokens (primary, secondary, accent, etc.)
- 🔧 Utility classes for common design patterns
- 🎭 Support for multiple themes
- 📱 Automatic dark theme detection

## Installation

```bash
pnpm add @palettebro/tailwind-theme
```

## Usage

Define your themes:

```ts
// themes.ts
import type { Themes } from '@palettebro/theme-generator/types';
import { ThemeVariantEnum, StaticThemePresetEnum } from '@palettebro/theme-generator/types';

const themes = {
  light: {
    'color-scheme': 'light' as const,
    variant: ThemeVariantEnum.static,
    preset: StaticThemePresetEnum.tetrad,
    baseColors: {
      primary: '#8E55F7',
    },
  },
  dark: {
    'color-scheme': 'dark' as const,
    variant: ThemeVariantEnum.static,
    preset: StaticThemePresetEnum.tetrad,
    baseColors: {
      primary: '#8E55F7',
    },
  },
} satisfies Themes;
```

Add the plugin to your Tailwind config:

```ts
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import { themes } from './themes';

const config: Config = {
    darkMode: 'class',
    content: [
        // ...your content configuration
    ],
    plugins: [
        require('@palettebro/tailwind-theme')({
            themes,
            utils: true,
            darkTheme: true,
        }),
    ],
};

export default config;
```


## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `themes` | `Themes` | Required | Theme configurations |
| `utils` | `boolean` | `false` | Enable utility classes |
| `darkTheme` | `boolean` | `false` | Enable automatic dark theme detection |

## Available Color Tokens

The plugin provides semantic color tokens that can be used in your Tailwind classes:

- `primary` - Primary brand color
- `secondary` - Secondary brand color
- `accent` - Accent color
- `error` - Error color

Each color token includes variants:

- Default (e.g., `bg-primary`)
- Content (e.g., `text-primary-content`)
- Foreground (e.g., `text-primary-foreground`)
- Container (e.g., `bg-primary-container`)
- Light/Base/Dark (e.g., `bg-primary-light`)
- Shades (50-900) (e.g., `bg-primary-100`)

And many more (TBD)

## Utility Classes

When `utils: true` is enabled, the plugin provides additional utility classes.

## Theme Switching

Themes can be switched using the `data-theme` attribute:

```html
<div data-theme="light">Light theme content</div>
<div data-theme="dark">Dark theme content</div>
```

## License

MIT