Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chu121su12/unocss-preset-chroma
chroma-js gradient for UnoCSS
https://github.com/chu121su12/unocss-preset-chroma
Last synced: 3 months ago
JSON representation
chroma-js gradient for UnoCSS
- Host: GitHub
- URL: https://github.com/chu121su12/unocss-preset-chroma
- Owner: chu121su12
- License: mit
- Created: 2022-01-07T07:47:05.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-08T02:37:49.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T12:39:44.423Z (4 months ago)
- Language: TypeScript
- Size: 62.5 KB
- Stars: 53
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-unocss - unocss-preset-chroma - Gradient Preset. (Presets)
README
# unocss-preset-chroma
> chroma-js gradient for UnoCSS
## Installation
```sh
npm i unocss-preset-chroma unocss --save-dev # with npm
yarn add unocss-preset-chroma unocss -D # with yarn
pnpm add unocss-preset-chroma unocss -D # with pnpm
```
## Usage
```js
// unocss.config.js
import { presetUno, defineConfig } from 'unocss'
import { presetChroma } from 'unocss-preset-chroma'
export default defineConfig({
presets: [
presetUno(), // for color theme
presetChroma(),
],
})
```
## Utilities
- Shorthand gradient + stops:
`chroma-(linear|radial|conic)-(rgb|lab|hsl|lch)-`
Where `` is dash-separated hex color.
- Stops only:
`chroma-stops-(rgb|lab|hsl|lch)---`
- Shape:
`chroma-shape-[contour/size/potiion/direction/etc]`
- Base gradient function (`background-image`):
`chroma-(linear|radial|conic)`
### Type of `ChromaOptions`
```ts
export interface ChromaOptions {
/**
* Class prefix for matching gradient rules.
*
* @defaultValue `chroma-`
*/
prefix?: string
/**
* Number of gradient steps to generate.
*
* @defaultValue 7
*/
steps?: number
}
```
## Acknowledgement
- [Polychroma](https://polychroma.app/)
- [chroma.js](https://vis4.net/chromajs/)
- [Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/) by Josh Comeau
## License
MIT
## Demo
Clone the repo, run `pnpm dev`.