Colors

Learn how to set and customize the colors of your app.

Kõsori UI uses Radix UI colors and is built on top of Tailwind CSS, which means that you can customize the colors by changing the colors object in the tailwind.config.ts file.

Structure

Kõsori UI is composed of 6 main colors and their aliases.

Name	Class
Primary	`primary-[alias]`
Grey	`grey-[alias]`
Info	`info-[alias]`
Success	`success-[alias]`
Warning	`warning-[alias]`
Error	`error-[alias]`

Semantic aliases

As Radix UI recommends using semantic color names based on use cases, in Kõsori UI we use the following aliases:

Step	Class	Use Case
1	`[color]-base`	App background
2	`[color]-bg-subtle`	Subtle background
3	`[color]-bg`	UI background
4	`[color]-bg-hover`	Hovered UI element background
5	`[color]-bg-active`	Active / Selected UI element background
6	`[color]-line`	Subtle borders and separators
7	`[color]-border`	UI element border and focus rings
8	`[color]-border-hover \| focus-ring`	Hovered UI element border
9	`[color]-solid \| placeholder-text`	Solid backgrounds
10	`[color]-solid-hover`	Hovered solid backgrounds
11	`[color]-text`	Low-contrast text
12	`[color]-text-contrast`	High-contrast text

Check out the "Understanding the scale" documentation of Radix UI for more details.

Palette

You can choose any of the Radix UI colors as you want. By default, the colors that Kõsori UI uses are the following:

Type	Color
Primary	Dark Mauve
Grey	Mauve
Info	Blue
Success	Green
Warning	Yellow
Error	Red

Radix UI colors

Some colors can be used in multiple types. For example the Tomato color can be used in Error and Primary types.

Name	Color	Type
Gray	Gray	Grey
Mauve	Mauve	Grey
Slate	Slate	Grey
Olive	Olive	Grey
Sand	Sand	Grey
Bronze	Bronze	Primary
Gold	Gold	Primary
Brown	Brown	Primary
Pink	Pink	Primary
Plum	Plum	Primary
Purple	Purple	Primary
Violet	Violet	Primary
Iris	Iris	Primary
Indigo	Indigo	Primary \| Info
Blue	Blue	Primary \| Info
Cyan	Cyan	Primary \| Info
Sky	Sky	Primary \| Info
Mint	Mint	Primary \| Success
Teal	Teal	Primary \| Success
Jade	Jade	Primary \| Success
Green	Green	Primary \| Success
Grass	Grass	Primary \| Success
Lime	Lime	Primary
Amber	Amber	Primary \| Warning
Yellow	Yellow	Primary \| Warning
Orange	Orange	Primary \| Warning
Tomato	Tomato	Primary \| Error
Red	Red	Primary \| Error
Ruby	Ruby	Primary \| Error
Crimson	Crimson	Primary \| Error

Use the theme builder to preview the colors in different components and copy them into your app.

Radix UI lets you create custom colors by using their "Create custom palette" tool. I used to create the Dark [Grey] colors to have a similar look of the zinc, slate, stone, gray and neutral colors by Shadcn.

Name	Color
Dark Gray
Dark Mauve
Dark Slate
Dark Sage
Dark Olive
Dark Sand

Custom colors

Using the "Create custom palette" tool, you can create your own custom colors. You will need to convert the colors to HSL format.

Please read "Using CSS variables" to learn more about how to define your colors as CSS variables.

globals.css

:root {
  --grey-1: 300 20% 99%; 
  /* ... */
 
  --primary-1: 240 20% 99%; 
  /* ... */
}
 
.dark {
  :root {
    --grey-1: 300 4.2% 9.4%; 
    /* ... */
 
    --primary-1: 260 8.11% 7.25%; 
    /* ... */
  }
}

Dark mode

You need to set the darkMode strategy to class in your Tailwind CSS config file.

tailwind.config.ts

import type { Config } from 'tailwindcss';
 
const config: Config = {
  darkMode: 'class', 
  // ...
};

With this strategy, we can use the light class to apply light mode styles and the dark class to apply dark mode styles.

<html class="ligh | dark" />

Using the colors

These are some little examples of how to use the colors in Kõsori UI.

<button className='bg-primary-solid text-grey-base hover:bg-primary-solid-hover focus-visible:outline-primary-focus-ring'>
  Hello
</button>

<hr className='border-t border-grey-line' />

<input className='border border-grey-border placeholder:text-grey-placeholder-text hover:border-grey-border-hover' />