@proj-airi/unocss-preset-chromatic
v1.1.1
Published
Readability enhanced, clean, nice looking colors palette we used across our Project AIRI https://github.com/moeru-ai/airi projects!
Keywords
Readme
@proj-airi/unocss-preset-chromatic
ni -D @proj-airi/unocss-preset-chromatic # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
pnpm i -D @proj-airi/unocss-preset-chromatic
yarn i -D @proj-airi/unocss-preset-chromatic
npm i -D @proj-airi/unocss-preset-chromaticRefer to README.md for more information.
Brightness and Saturation Modifiers
Chromatic supports a combined suffix syntax for runtime color tuning:
<utility>-<color>-<shade>/<opacity>~<saturation>*<brightness>/opacity in percent (UnoCSS standard color opacity, e.g./50)~saturation/chroma in percent (100= unchanged)*brightness in percent (100= unchanged)
Examples:
<div class="bg-primary-500/50~10*115" />
<div class="hover:bg-primary-500/60~80*120" />
<div class="text-primary-600~120" />
<div class="border-primary-400*70" />Notes:
- Modifier order is strict:
/<opacity>~<saturation>*<brightness>. *and~are optional.- Supported color utilities default to
bg-*,text-*,border-*,ring-*,fill-*, andstroke-*. - You can customize utility matching via
modifierUtilityPrefixes.
License
MIT
