palette

Two palettes, named for the bounds of a lattice: join, the light one, and meet, the dark one. Each carries a five-step monochrome scale from background to foreground, and seven hues in spectral order.

import { join, meet, palettes, polarityOf } from "@mariovagomarzal/lattice";

meet.colors.orange; // "#cf8542"
palettes[polarityOf.dark] === meet; // true

join

Join (∨), the upper bound.

base#f2ede0

surface#e9e2cf

border#cfcdc1

muted#6a7268

text#17271f

red#a53c2c

orange#b96f28

yellow#85630e

green#4f7340

teal#2f7565

blue#3d6485

purple#7c4f79

meet

Meet (∧), the lower bound.

base#151b17

surface#1e2620

border#3b3f38

muted#949285

text#e8e1cf

red#d0654e

orange#cf8542

yellow#cba55a

green#8cab72

teal#72ad9c

blue#7fa8c9

purple#b391b8

Syntax roles

A role names a color of the palette, and each port resolves it to whichever polarity it is asked for. The code on this page is highlighted with these.

commentmuted

punctuationmuted

operatormuted

variabletext

keywordpurple

functionblue

stringgreen

constantorange

typeyellow

propertyteal

tagred

Ports

subpath	export	what it is
lattice.css	`@import`	The stylesheet, ready to use. 12 custom properties per polarity, with color-scheme alongside them, and the dark one behind data-theme="dark".
palette/css	`latticeCss(options?)`	The generator behind it, for any other property prefix, scheme attribute, and gate. Gating on media takes prefers-color-scheme instead of the attribute.
palette/shiki	`shikiThemes`	The syntax roles as two Shiki registrations, keyed by scheme for a dual theme setup.