unocss-preset-chroma
TypeScript icon, indicating that this package has built-in type declarations

0.4.2 • Public • Published

unocss-preset-chroma

npm version node version

chroma-js gradient for UnoCSS

Installation

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

// 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)-<colors>

    Where <colors> is dash-separated hex color.

  • Stops only:

    chroma-stops-(rgb|lab|hsl|lch)-<color-1>-<color-2>-<color-n>

  • Shape:

    chroma-shape-[contour/size/potiion/direction/etc]

  • Base gradient function (background-image):

    chroma-(linear|radial|conic)

Type of ChromaOptions

export interface ChromaOptions {
  /**
   * Class prefix for matching gradient rules.
   *
   * @defaultValue `chroma-`
   */
  prefix?: string
  /**
   * Number of gradient steps to generate.
   *
   * @defaultValue 7
   */
  steps?: number
}

Acknowledgement

License

MIT

Demo

Clone the repo, run pnpm dev.

Package Sidebar

Install

npm i unocss-preset-chroma

Weekly Downloads

2

Version

0.4.2

License

MIT

Unpacked Size

4.1 kB

Total Files

3

Last publish

Collaborators

  • chu121su12