Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/endigma/unocss-preset-radix
A preset for UnoCSS to let you use Radix color palette
https://github.com/endigma/unocss-preset-radix
radix radix-ui radix-ui-colors unocss unocss-preset
Last synced: 17 days ago
JSON representation
A preset for UnoCSS to let you use Radix color palette
- Host: GitHub
- URL: https://github.com/endigma/unocss-preset-radix
- Owner: endigma
- License: mit
- Created: 2023-02-26T04:08:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-17T21:09:57.000Z (about 1 year ago)
- Last Synced: 2024-09-19T18:07:24.171Z (about 2 months ago)
- Topics: radix, radix-ui, radix-ui-colors, unocss, unocss-preset
- Language: TypeScript
- Homepage: https://endigma.github.io/unocss-preset-radix/
- Size: 199 KB
- Stars: 31
- Watchers: 2
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-unocss - unocss-preset-radix - Use the Radix UI color palette with UnoCSS. (Presets)
- awesome-unocss - unocss-preset-radix - Use the Radix UI color palette with UnoCSS. (Presets)
README
# unocss-preset-radix
## Installation
```
pnpm add -D unocss-preset-radix
```
## Usage
```ts
import { defineConfig, presetUno } from "unocss";
import { presetRadix } from "unocss-preset-radix";
export default defineConfig({
presets: [
presetUno(),
presetRadix({
palette: ["blue", "green", "red"],
aliases: {
primary: "green",
base: "slate",
},
}),
],
});
```
## Alphas
Alphas are available as extra shades in each scale. For example `bg-blue5` for solid, `bg-blue5A` for alpha.
## Foregrounds
The optimized foreground colors are available as `-fg` shades. For example `text-blue-fg` for white `text-amber-fg` for white. These colors are based on [the Radix docs](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette#choosing-a-brand-scale). This also works with hues and aliases.
## Options
### palette
An array of the Radix UI Colors you'd like to include. Dark mode and alpha variants are automatic. Overlay colors are added by default.
### prefix
The prefix used for the CSS variables generated by the preset. Default is `--un-preset-radix`.
### darkSelector
The selector used for dark mode palette. Default is `.dark-theme`.
### lightSelector
The selector used for dark mode palette. Default is `:root, .light-theme`.
### aliases
A key value object of color aliases in the format `alias: target` that allows you to set aliases for the color palette. You cannot set aliases to other aliases. Alpha variants for aliases are generated automatically, so for then given alias `brand: blue`, an alias `brandA: blueA` will also be generated.
### extend
A boolean that sets whether or not the preset will completely overwrite or merge with the previous palette. Default is `true`.
## `hue`
With any scale included in your palette, you can use the utility `hue-{scale}` like `hue-red` or `hue-sand`. This sets a series of CSS variables that allow usage of `hue` in place of a color. For example:
```html
```
are equivilant.
This allows you to add all the `hues` you'd like to use to your safelist, and be able to dynamically choose the colorway of an element using JS or whatever your poison of choice is.
This feature is heavily inspired by [Imba's `hue`](https://imba.io/docs/css/properties/hue)