Rosé Pine Bloom

All natural pine, faux fur and a bit of soho vibes for the classy minimalist

Bloom new Rosé Pine themes

About

Bloom is an opinionated theme generator, matching the Rosé Pine style guide.

Install

brew install rose-pine/tap/bloom

Usage

Start by creating a template file. This will look similar to your desired theme file, replacing colour values with Rosé Pine variables. For example, #ebbcba would now be $rose. Already have a theme? You can create a template from an existing theme.

$ bloom --help

  🌱 Bloom v2.2.0 - The Rosé Pine theme generator

  Usage
    $ bloom [options] <template>

  Options
    -o, --output <path>     Directory for generated files (default: dist)
    -p, --prefix <string>   Color variable prefix (default: $)
    -f, --format <format>   Color output format (default: hex)
    -c, --create <variant>  Create template from existing theme (default: main)
                            Variants: main, moon, dawn

    --plain                 Remove decorators from color values
    --no-commas             Remove commas from color values
    --no-spaces             Remove spaces from color values

    -h, --help              Show help
    -v, --version           Show bloom version

  Formats
    hex                     #ebbcba
    hex --plain             ebbcba
    hsl                     hsl(2, 55%, 83%)
    hsl --plain             2, 55%, 83%
    hsl-css                 hsl(2deg 55% 83%)
    hsl-css --plain         2deg 55% 83%
    hsl-array               [2, 0.55, 0.83]
    hsl-array --plain       2, 0.55, 0.83
    rgb                     rgb(235, 188, 186)
    rgb --plain             235, 188, 186
    rgb-css                 rgb(235 188 186)
    rgb-css --plain         235 188 186
    rgb-array               [235, 188, 186]
    rgb-array --plain       235, 188, 186
    ansi                    235;188;186

  Examples
    $ bloom template.yaml
    $ bloom --format hsl --output ./themes template.json
    $ bloom --create dawn my-theme.toml

Create a template

If you have an existing theme:

rose-pine-bloom --create dawn --format hex my-theme.toml

Variables

By default, variables are prefixed with $

Our palette is available by name, e.g. "love" or "highlightMed", as well as metadata related values mentioned below.

Variable	Value <main,moon,dawn>
id	rose-pine<-moon,-dawn>
name	Rosé Pine <Moon,Dawn>
appearance	<dark,dark,light>
description	All natural pine, faux fur and a bit of soho vibes for the classy minimalist

Accents

Specify an $accent or $accentname variable to generate a theme for every accent:

// template.json
{ "accent": "$accent", "name": "$accentname" }

// rose-pine-love.json
{ "accent": "#eb6f92", "name": "love" }

// rose-pine-gold.json
{ "accent": "#f6c177", "name": "gold" }

...

// rose-pine-moon-rose.json
{ "accent": "#ea9a97", "name": "rose" }

// rose-pine-moon-pine.json
{ "accent": "#3e8fb0", "name": "pine" }

...

// rose-pine-dawn-foam.json
{ "accent": "#56949f", "name": "foam" }

// rose-pine-dawn-iris.json
{ "accent": "#907aa9", "name": "iris" }

Using custom values per variant

Use different values for each variant, formatted as $(main|moon|dawn):

// template.json
{ "order": "$(Caffè|Cappuccino|Marocchino)" }

// rose-pine.json
{ "order": "Caffè" }

// rose-pine-moon.json
{ "order": "Cappuccino" }

// rose-pine-dawn.json
{ "order": "Marocchino" }

It is possible to use variables inside of this syntax as well:

{ "background": "$($rose|$foam|$iris)" }

Contributing

We welcome and appreciate contributions of any kind. Please create an issue for any proposed changes.

Build documentation

make docs

Related

• rose-pine/build - Node.js-based theme generator for Rosé Pine