npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@umbra.ui/colors

v0.5.0

Published

Color system for Umbra UI

Downloads

280

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

void.primordiavoid.primordia

Keywords

colorsdesign-systemui

Readme

@umbra.ui/colors

Color tokens for Umbra UI.

This package provides:

  • 30 color families with 12-step scales
  • light + dark tokens
  • opaque + alpha variants
  • sRGB + Display P3 values
  • a semantic token layer (semantic-colors.css)
  • fully typed JavaScript/TypeScript exports

Installation

Install with your preferred package manager:

npm install @umbra.ui/colors
pnpm add @umbra.ui/colors
yarn add @umbra.ui/colors
bun add @umbra.ui/colors

Quick start

  1. Install the package.
  2. Import semantic tokens once in your app entry.
  3. Toggle .light or .dark on a root container.
// main.ts
import "@umbra.ui/colors/semantic-colors.css";
<body class="light">
  <div id="app"></div>
</body>
.panel {
  background: var(--background-1);
  color: var(--text-1);
  border: 1px solid var(--border-2);
}

.panel a {
  color: var(--link);
}
// Optional: use raw scales from JS/TS
import { blue, blueDark } from "@umbra.ui/colors";

const brandLight = blue.blue9;
const brandDark = blueDark.blue9;

How the color system is structured

Each family follows a consistent naming model:

  • blue1 ... blue12 for opaque scale steps
  • blueA1 ... blueA12 for alpha scale steps
  • blueDark1 ... does not exist as flattened keys; dark tokens are exposed as separate objects like blueDark
  • blueP3 / blueP3A (and dark P3 variants) contain Display P3 values

In CSS variables:

  • Opaque tokens are --blue-1 ... --blue-12
  • Alpha tokens are --blue-a1 ... --blue-a12

Available families

Neutral families

  • gray
  • mauve
  • slate
  • sage
  • olive
  • sand

Chromatic families

  • tomato, red, ruby, crimson, pink, plum, purple, violet
  • iris, indigo, blue, cyan, teal, jade, green, grass
  • brown, bronze, gold, sky, mint, lime, yellow, amber, orange

Utility alpha families

  • blackA / blackP3A
  • whiteA / whiteP3A

Theme behavior

The CSS files are authored to respond to standard theme selectors:

  • Light selectors: :root, .light, .light-theme
  • Dark selectors: .dark, .dark-theme

This means you can switch token values by toggling a theme class on a parent element.

Using the package

1) Use tokens in JS/TS

import { blue, blueDark, blueA, blueDarkA } from "@umbra.ui/colors";

const buttonBgLight = blue.blue9;
const buttonBgDark = blueDark.blue9;
const focusRing = blueA.blueA8;
const focusRingDark = blueDarkA.blueA8;

2) Use semantic CSS tokens

Import once:

import "@umbra.ui/colors/semantic-colors.css";

Then consume semantic variables in your styles:

.card {
  background: var(--background-1);
  border: 1px solid var(--border-2);
  color: var(--text-1);
}

.card a {
  color: var(--link);
}

semantic-colors.css includes:

  • Accent and neutral ramps (--accent-*, --neutral-*)
  • Surface/control/border/text aliases
    • --background-0..2
    • --control-1..3
    • --border-1..3
    • --text-1..3
  • Status/intent aliases
    • --link, --info, --success, --warning, --error

Scale guidance (1-12)

The 12-step ramp is intentionally role-based:

| Step | Typical use | | --- | --- | | 1 | App/page background | | 2 | Subtle background areas | | 3 | Component background (rest) | | 4 | Component background (hover) | | 5 | Component background (active/selected) | | 6 | Subtle borders and separators | | 7 | Interactive borders | | 8 | Stronger interactive borders / focus rings | | 9 | Solid fills (primary color block) | | 10 | Hovered solid fills | | 11 | Lower-contrast text | | 12 | High-contrast text |

Notes:

  • Steps 9 and 10 are for strong fills and accents.
  • Steps 11 and 12 are text-oriented values.
  • On a step 2 background from the same scale, steps 11 and 12 are designed for readable text contrast targets.

Palette composition guidance

Choose an accent scale

Scales generally suited for light foreground text on step 9/10:

  • bronze, gold, brown, orange, tomato, red, ruby, crimson
  • pink, plum, purple, violet, iris, indigo, blue, cyan
  • teal, jade, green, grass

Scales generally suited for dark foreground text on step 9/10:

  • sky, mint, lime, yellow, amber

Choose a neutral scale

  • gray: pure neutral
  • mauve: purple-leaning neutral
  • slate: blue-leaning neutral
  • sage: green-leaning neutral
  • olive: yellow-green-leaning neutral
  • sand: warm yellow-leaning neutral

Practical rule:

  • Use gray for a cleaner, less saturated foundation.
  • Use a tinted neutral (for example slate with blue accents) when you want a more atmospheric palette.

Choose semantic scales

Common pairings:

  • Error: red, ruby, tomato, crimson
  • Success: green, teal, jade, grass, mint
  • Warning: yellow, amber, orange
  • Info: blue, indigo, sky, cyan

API surface summary

  • Root JS/TS import: @umbra.ui/colors
    • Exposes all token objects (blue, blueA, blueP3, blueDark, blueDarkA, blueDarkP3, etc.)
    • Exposes blackA, blackP3A, whiteA, whiteP3A
  • CSS semantic entry: @umbra.ui/colors/semantic-colors.css

Tips and best practices

  • Prefer semantic tokens (--text-1, --border-2, --error) in component code.
  • Use raw scale tokens (--blue-9, blue.blue9) for brand/accent-specific UI.
  • Keep neutral backgrounds conservative if your UI already has many saturated badges/labels.
  • Treat token ramps as system primitives; if you need brand-specific colors, add custom tokens alongside Umbra tokens rather than modifying these scales directly.