Skip to content

Latest commit

 

History

History
88 lines (63 loc) · 1.77 KB

README.md

File metadata and controls

88 lines (63 loc) · 1.77 KB
Raw

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.