https://github.com/wallpants/hsl-radix-colors

Radix UI Colors in hsl format for better compatibility with tailwind
https://github.com/wallpants/hsl-radix-colors

radix-ui-colors shadcn-ui tailwind tailwindcss

Last synced: 3 months ago
JSON representation

Radix UI Colors in hsl format for better compatibility with tailwind

• Host: GitHub
• URL: https://github.com/wallpants/hsl-radix-colors
• Owner: wallpants
• Created: 2024-05-16T00:39:47.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-24T05:33:50.000Z (8 months ago)
• Last Synced: 2024-07-08T10:19:08.610Z (6 months ago)
• Topics: radix-ui-colors, shadcn-ui, tailwind, tailwindcss
• Language: CSS
• Homepage:
• Size: 92.8 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# HSL Radix Colors

This repo contains CSS files with _Radix Colors_ converted to _hsl_ to support

[setting opacity in tailwind](https://tailwindcss.com/docs/customizing-colors#using-css-variables)

like so:

```html



  
Hello world



```


Helpful when using [shadcn/ui](https://ui.shadcn.com/) as they usually style

components with opacity.

To get a list of [all colors](https://www.radix-ui.com/colors) visit the

official Radix Colors website.

## Install

```sh

bun add hsl-radix-colors

```

## Usage example

### Add colors to _tailwind_

```ts

// tailwind.config.ts

import type { Config } from "tailwindcss";

function color(cssVar: string) {

  return `hsl(var(--${cssVar}) / )`;

}

export default {

  content: ["./app/**/*.{ts,tsx}"],

  theme: {

    extend: {

      colors: {

        primary: {

          DEFAULT: color("crimson-11"),

          foreground: color("crimson-1"),

        },

        secondary: {

          DEFAULT: color("blue-11"),

          foreground: color("blue-1"),

        },

      },

    },

  },

} satisfies Config;

```

### Import css files in your _global.css_

```css

/* global.css */

@import "hsl-radix-colors/crimson.css"; /* both light and dark included */

@import "hsl-radix-colors/blue.css"; /* both light and dark included */

@tailwind base;

@tailwind components;

@tailwind utilities;

```