endigma/unocss-preset-radix

A preset for UnoCSS to let you use Radix color palette

unocss-preset-radix

Installation

pnpm add -D unocss-preset-radix

Usage

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. 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:

<div class="hue-red bg-hue4" />
<div class="bg-red4" />

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

unocss-preset-radix's Issues

Extend does not default to true

Hi,

The docs say extend defaults to true. In the code, it defaults to false:

unocss-preset-radix/src/index.ts

Lines 32 to 36 in b9d809f

	/**
	* Extend instead of override the default theme
	* @default false
	*/
	extend?: boolean;

option to choose between normal / alpha

I find myself using either the regular OR the alpha palette, not both.

Being able to choose would save css file size + would allow for simple use of colors: just use color7, color12 etc and in 1 toggle switch the whole website from normal to alpha.

I feel like alpha is best in modern/glassy websites. The regular palette is better for more 'standard' sites

1.0

• Finish Radix UI wrappers
• Create preset code
• Figure out a nice way to add colors
• Look into optimizing the emitted css
• Full docs for hue
• Properly support alphas (?)

Light/Dark Alpha and overlay colors are not included

I see that you are excluding alpha and overlay (whiteA/blackA) colors and some code are commented.

Is there a reasons why you didn't include them?

Can we add back? I can make PR.

allow - between name and number

The original radix color palettes are like this:

--yellow-1
--yellow-2
// etc

This preset uses the following:

--yellow1
--yellow2
// etc

I'm wondering why. Also, I would like to have the choice set it to include a - (or maybe any other character.
It could be a setting just like prefix, maybe called divider or something.

I'm willing to commit a PR. Can you let me know once you've cleaned up the codebase which you planned to do please? :)

Feature request: use 'dark' instead of 'dark-theme'

Would be a nice little feature!

Add option to extend the colours instead of replacing them

I want to use the default theme colours alonside with radix colours.

I have tried to extend the theme manually, but those colours are also replaced, so I can't even add a custom ones (or I don't know how to do it).

Aliases as rules / Hues as aliases

It could be useful to be able to define aliases inline, which would also perhaps be used to power hue functionality.

something like alias-danger-red as a rulename. This would more or less replace hue in-place if a shortcut for hue- -> alias-hue- was set up, and would allow stuff like hue5-blue or etc if multiple hues are required to power a hue combination.

Extend theme will make radix colors unavailable when matching Uno preset is equivalent.

Right now we only have 2 options, either extend or remove all defaults. The issue is this line:

       ...(extend ? theme.colors : []),

It's applied after adding the radix colors, meaning for colors like mauve, Uno will prefer the default theme colors. I suggest a way to add this at the start, or similarly a way to not only prefix css variables but also prefix the generated color matchers so I can write bg-radix-<color> and keep the default uno colors for themselves.

Scale ruby, iris and jade missing

Don't know if it's just the types, or the package, but I get the following error:

Type '"jade"' is not assignable to type '"gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "grass" | ... 8 more ... | "sky"'

Get the same error for ruby and iris

Media Query Dark mode support

It seems that it uses dark and light selector and there is no media option. I think it would be nice if it follows the Mini preset for dark mode setting.

Typescript error with docs config

I use the exact same config as the readme/docs show and immediately get the following typescript error:

Type 'Preset<{}>' is not assignable to type 'Preset<Theme> | Preset<Theme>[]'.
  Type 'Preset<{}>' is not assignable to type 'Preset<Theme>'.
    Types of property 'rules' are incompatible.
      Type 'Rule<{}>[] | undefined' is not assignable to type 'Rule<Theme>[] | undefined'.
        Type 'Rule<{}>[]' is not assignable to type 'Rule<Theme>[]'.
          Type 'Rule<{}>' is not assignable to type 'Rule<Theme>'.
            Type '[RegExp, DynamicMatcher<{}>]' is not assignable to type 'Rule<Theme>'.
              Type '[RegExp, DynamicMatcher<{}>]' is not assignable to type '[string, CSSObject | CSSEntries] | [RegExp, DynamicMatcher<Theme>]'.
                Type '[RegExp, DynamicMatcher<{}>]' is not assignable to type '[string, CSSObject | CSSEntries]'.
                  Type at position 0 in source is not compatible with type at position 0 in target.
                    Type 'RegExp' is not assignable to type 'string'.ts(2322)
(alias) presetRadix(options: PresetRadixOptions): Preset<{}>
import presetRadix

uno.config.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'
			}
		})
	]
});

Any plans to include alpha palette?

Keep running into the issue of there not being alpha values included in this package. Is there any chance this is on your radar with plans to implement? If not, all good but would be very helpful to know so we can pivot. Thanks

Auto generate palette from usage?

Could probably omit the requirement for defining the palette upfront and generate the whole thing then pare it down with postprocessing.

Transform hex to hsl so opacity/etc work properly

Default unocss colors are like hsl(--var-whatever, --uno-opacity or something, this is similar to tailwind. I should somehow transform the radix colors into a format like this and update the color alias to work with opacity properly.

black / white as 0 value

I really like the addition of hue-fg. I would also like a 0 (zero) value, which would be the same for all palettes; white is light mode, black in dark mode.

hue-... does not work with variants

The following examples do not work

[&_.button]:hue-primary
sm:hue-primary

While the following does work:

[&_.button]:hue-red9
sm:hue-red9

Plugin breaks regular colors theme settings

When using this plugin the regular theme.colors does not work anymore.

The following does not work:

    theme: {
      colors: {
        hello: 'red',
      },
    },

When removing the plugin it works instantly

Add foreground color

Some radix scales use black on hue9, some use white. A selector for this would be great.

Just sharing my personal fix for this:

    theme: {
      colors: {
        foreground: 'var(--un-preset-theme-fg)',
        'foreground-base': getForeground(options.colors.base),
        'foreground-primary': getForeground(options.colors.primary),
        'foreground-secondary': getForeground(options.colors.secondary),
      },
    },
    rules: [
      [
        'hue-base',
        {
          '--un-preset-theme-fg': getForeground(options.colors.base),
        },
      ],
      [
        'hue-primary',
        {
          '--un-preset-theme-fg': getForeground(options.colors.primary),
        },
      ],
      [
        'hue-secondary',
        {
          '--un-preset-theme-fg': getForeground(options.colors.secondary),
        },
      ],
    ],