chu121su12 / unocss-preset-chroma Goto Github PK

View Code? Open in Web Editor NEW

51.0 2.0 0.0 64 KB

chroma-js gradient for UnoCSS

License: MIT License

TypeScript 46.21% JavaScript 7.61% HTML 46.19%

unocss-preset-chroma's Introduction

unocss-preset-chroma

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.

unocss-preset-chroma's People

Contributors

Stargazers

Watchers

unocss-preset-chroma's Issues

dist is not found

大佬，你dist目录没提交到npm

cannot find module 'unocss-preset-chroma' or its corresponding type declarations.ts(2307)

Clone of the repo works as expected. Installation via pnpm to typescript project following instructions

import { presetChroma } from 'unocss-preset-chroma'

missing .d.ts?

I make a replacement of this preset

Since the npm package is unavaliable because of the lost of dist, I make a forked repository and publish a copied preset of this preset named "unocss-preset-chroma-forked"
if the author fixed current error, please reply this issue and I will delete my forked repository and npm library
thks!

Getting closer to existing gradient class names

Hi @chu121su12,

I wanted to make such a preset and discovered yours. Thanks for making it. 😍 I also enjoyed reading the recent article from Josh.

After testing it, I have few remarks regarding the naming you adopted which seems a bit far from existing gradient utilities. As an example, in Tailwind or Windi, you would write bg-gradient-to-b from-blue-400 to-violet-400. The direction is attached to bg-gradient and the colors endings are separate classes.

I would suggest suggest few things:

To rely on from-<color>, via-<colo>, and to-<color> classes, so we can easily replace the initial bg-gradient-* class with yours.
To drop the chroma prefix and only have bg-gradient-<mode>-<direction> where the direction is the same from Tailwind and Windi.
To support Tailwind/Windi direction suffixes like to-b, to-tr…
To introduce angles in UnoCSS directly with something like: bg-gradient-deg-<angle>. What do you think?
To introduce conic and radial gradients in UnoCSS. SInce radial gradients support different shapes, it would require additional options.

Example:

bg-gradient-hsl-to-b from-blue-400 to-pink-300

Example with angle:

bg-gradient-hsl-deg-34 from-blue-400 to-pink-300

I think this is the right time to revise the preset before it's heavily used. Can't wait to get your feedback.