npm package: @rose-pine/palette
Description: Color palette tool for Rosé Pine
Author: Rosé Pine
Latest version: 4.0.1

<p align="center">
    <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
    <h2 align="center">Rosé Pine Palette</h2>
</p>

<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>

<p align="center">
    <a href="https://github.com/rose-pine/rose-pine-theme">
        <img src="https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=&style=for-the-badge" />
    </a>
</p>

> Color palette tool for Rosé Pine

- [Usage](#usage)
  - [CSS variables](#css-variables)
  - [Tailwind CSS](#tailwind-css)
  - [JavaScript](#javascript)
- [Specification](#specification)
  - [Variants](#variants)
  - [Roles](#roles)
- [Related](#related)

## Usage

### CSS variables

**Media**

> See `dist/css/rose-pine-media{-rgb,-hsl}.css`

Useful for light/dark theming. Values follow the user's system theme, using
the dawn variant when light and main variant when dark. Moon values can be
uncommented and used instead.

**Classes**

> See `dist/css/rose-pine-class{-rgb,-hsl}.css`

Useful for theming with more than two options. Values are set based on a
wrapping class of `.theme-rp{-moon,-dawn}`.

```css
body {
	color: var(--rp-text);
	background: var(--rp-base);
}
```

**Static**

> See `dist/css/rose-pine{-rgb,-hsl}.css`

Useful when flexibility is desired. Values include their variant's name for moon and
dawn, allowing all variants to be individually referenced.

```css
.link-main {
	color: var(--rp-iris);
}
.link-moon {
	color: var(--rp-moon-iris);
}
.link-dawn {
	color: var(--rp-dawn-iris);
}
```

### Tailwind CSS

**Preset configuration**

> See `dist/tailwind/rose-pine{-media}.js`

```js
// tailwind.config.js
module.exports = {
	presets: [require("./rose-pine.js")],
};
```

If using `rose-pine-media.js`, see the section below to include the necessary
CSS variables.

**CSS variables**

> See `dist/css/rose-pine-media-tailwind.css`

This method sets CSS variables to raw HSL values to support alpha values in
classes, e.g. `bg-rose/50`.

### JavaScript

Starting with v4, colour values are unformatted. Formatted values can be found
in our `dist` folder. For creating new themes, it is recommended to use our
[build tool](https://github.com/rose-pine/build).

```js
import {variants, roles} from "@rose-pine/palette";

variants.moon.colors.highlightLow.hsl;
// => [245, 22, 20]

variants.moon.colors.highlightLow.alpha.hsl;
// => [249, 14%, 55%, 0.08]

variants.main.id;
// => rose-pine

variants.moon.key;
// => moon

variants.dawn.name;
// => Rosé Pine Dawn

roles.base.colors.main.hex;
// => '191724'

roles.surface.colors.dawn.rgb;
// => [255, 250, 243]

roles.highlightLow.id;
// => highlight-low

roles.highlightMed.key;
// => highlightMed

roles.highlightHigh.key;
// => Highlight High
```

## Specification

### Variants

Rosé Pine includes three variants. These are referenced as Rosé Pine, Rosé
Pine Moon, and Rosé Pine Dawn. Their codenames are main, moon, and dawn
respectively. Naming does not include "main" unless necessary. When used as
file names, prefer snake-case. E.g. rose-pine, rose-pine-moon, and
rose-pine-dawn.

### Roles

**Neutral**

| Role            | Description                               | Usage                                                                                                               |
| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `base`          | Primary background                        | inactive tabs, sidebars                                                                                             |
| `surface`       | Low contrast background atop `base`       | text inputs, panels                                                                                                 |
| `overlay`       | Medium contrast background atop `surface` | text inputs, panels, active tabs                                                                                    |
| `muted`         | Low contrast foreground                   | comments, git ignored                                                                                               |
| `subtle`        | Medium contrast foreground                | non-selected results, inactive tabs, punctuation, operators                                                         |
| `text`          | High contrast foreground                  | cursor text, selected results, selection foreground (paired with `highlightMed` background), active tabs, variables |
| `highlightLow`  | Low contrast highlight                    | cursor line                                                                                                         |
| `highlightMed`  | Medium contrast highlight                 | selection background (paired with `text` foreground)                                                                |
| `highlightHigh` | High contrast highlight                   | cursor background, borders                                                                                          |

**Accent**

| Role   | Usage                                                            |
| ------ | ---------------------------------------------------------------- |
| `love` | terminal red, builtins, errors, git delete                       |
| `gold` | terminal yellow, strings, warnings                               |
| `rose` | terminal cyan, booleans, git change, git dirty, git text         |
| `pine` | terminal green, functions, git rename                            |
| `foam` | terminal blue, object keys, info, git add                        |
| `iris` | terminal magenta, parameters, links, hints, git merge, git stage |

## Related

- [rosepinetheme.com/palette](https://rosepinetheme.com/palette)
- [@rose-pine/build](https://github.com/rose-pine/build)