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

@cueplusplus/theme-dusk

v1.0.3

Published

The dusk theme for @cueplusplus/ui.

Vulnerabilities

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

Links

Git

Maintainers

cloudpixelcloudpixel

Keywords

cue-theme

Readme

@cueplusplus/theme-dusk

The dusk palette for @cueplusplus/ui — corale's ink-teal ground under an amber lamp accent that never fills a button, over a warm tinted scrim. A palette is a package here precisely so that it is not the only one: install several, register several, and a theme switcher is an array with more than one entry in it.

Install

The @cueplusplus scope is public on npm and resolves there by default, so there is nothing to configure and no credential to supply — it installs like any other package.

pnpm add @cueplusplus/theme-dusk @cueplusplus/theme-base

@cueplusplus/theme-base is the one peer this package declares, and it carries the token contract the palette is written against. A palette on its own paints nothing: install it beside @cueplusplus/ui and its own peers — §2 has that line.

Quick start

The theme stylesheet is the third import, and its position is load-bearing rather than tidy. A theme declares its colours under [data-theme="dusk"], which ties with the blank base's bare :root at the same specificity, so the one declared later wins. Put it before styles.css and the blank base paints over it.

/* app/globals.css */
@import "tailwindcss";
@import "@cueplusplus/ui/styles.css";
@import "@cueplusplus/theme-dusk/theme.css";

Then register the manifest. themes is the registry the provider may switch between; theme names the one that paints.

import dusk from "@cueplusplus/theme-dusk";
import { ThemeProvider } from "@cueplusplus/ui/system";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider themes={[dusk]} theme="dusk">
      {children}
    </ThemeProvider>
  );
}

Importing the package from its root, rather than reaching for its manifest.json subpath, also closes ThemeName to the themes you actually installed — so a misspelt theme value is a type error rather than a page that silently paints the blank base. Add prepaintScript() to <head> with the same themes array, so the first frame is not the defaults flashing past: §4 has it.

What it ships

| Subpath | What it is | | --- | --- | | @cueplusplus/theme-dusk | the manifest, as both the default export and manifest | | @cueplusplus/theme-dusk/theme.css | the palette — the only file a browser needs | | @cueplusplus/theme-dusk/variants.css | the density rungs and font pairings this theme adds. Empty: it adds none | | @cueplusplus/theme-dusk/manifest.json | the same manifest as JSON, for a tool that reads rather than imports | | @cueplusplus/theme-dusk/package.json | |

Both modes. The manifest is complete with supportsLight: true, so theme.css writes the whole colour contract four times over: [data-theme="dusk"] for dark, [data-theme="dusk"][data-mode="light"] for light, and both again for [data-mode="system"] inside a prefers-color-scheme query.

Fonts: one, the monospace. The theme block sets its own stack and then hands it to the pairing axis:

--cue-font-theme-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));

The second line is the handshake, and it is why the first is safe: a data-font pairing stamped on an ancestor wins over the theme's stack, which in turn wins over the base's.

Sources are src/dusk.{dark,light}.tokens.json, colour and type only — no geometry token may appear in a theme. theme.css, variants.css, manifest.json, index.js and index.d.ts are written by cue-theme build and committed; prepack runs cue-theme check, which rebuilds all five in memory and refuses to publish if anything on disk has drifted.

@cueplusplus/tokens no longer emits any palette: this package is where the dusk colours live. packages/release/test/theme-packages.test.mjs holds this directory's theme.css against packages/release/test/fixtures/pre-migration/dusk.css — the stylesheet @cueplusplus/[email protected] actually shipped — byte for byte after the banner, so "the migration moved no colour" stays a thing a gate proves rather than a thing a changelog claims.

Where the rest is

  • The theming guide — https://ui.cueplusplus.com/docs/theming. The token vocabulary, the density and mode axes, the other nine presets, and createTheme() for a palette of your own.
  • docs/CONSUMING.md — registry access in full, the peer matrix per subpath, and the table of what a failed install means.
  • CHANGELOG.md, in this package — one entry per release, addressed to you rather than to the diff, with a Migrating section on anything that needs an edit. Read it before an upgrade; the version number alone does not say what moved.