unocss-postprocessor-colors

Transform alias for UnoCSS shortcuts.

Install

pnpm i -D unocss-postprocessor-colors

// uno.config.ts
import { defineConfig } from 'unocss'
import postprocessorColors from 'unocss-postprocessor-colors'

export default defineConfig({
  // ...
  postprocess: [
    // ...
    postprocessorColors(),
  ],
})

Usage

<div class="text-red-5 bg-[rgba(var(--un-color),0.7)]">
  content
</div>

This is similar to:

<div class="text-red-5 bg-red-5 bg-opacity-70">
  content
</div>

This way we can use corresponding colors on other common styles

<div class="w-20 h-10 rounded-md grid place-items-center bg-blue-5 ripple text-white">
  button
</div>
<div class="w-20 h-10 rounded-md grid place-items-center bg-red-5 ripple text-white">
  button
</div>

.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: rgba(var(--un-bg-color), 1) radial-gradient(circle, transparent 1%, rgba(var(--un-bg-color), 1) 1%) center/15000%;
}
.ripple:active {
  background-color: rgba(var(--un-bg-color), 0.5);
  background-size: 100%;
  transition: background 0s;
}

Options

Can customize the corresponding variable name

postprocessorColors({
  /**
   * default
   * {
   *    'background-color': '--un-bg-color',
   *    'color': '--un-color',
   *    'text-decoration-color': '--un-text-decoration-color',
   *    'border-color': '--un-border-color',
   *    'caret-color': '--un-caret-color',
   *    'shadow-color': '--un-sh-color',
   * }
   */
  key: {
    'background-color': '--un-b-color',
  }
})

Other

Thanks to @zyyv for the solution

License

MIT License © 2023-PRESENT Amihhs