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

@leaflink/design-system

v1.1.27

Published

Multi-brand design-system color tokens and Tailwind theme

Vulnerabilities

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

Links

Git

Maintainers

packagefixespackagefixesbrenton-cozbybrenton-cozbyleaflink_adminleaflink_adminmarkphilippleaflinkmarkphilippleaflink

Keywords

Readme

Table of Contents

@leaflink/design-system

Multi-brand design tokens for the new LeafLink design system: colors (--ds-color-*) plus a base corner radius (--ds-radius). Framework-agnostic CSS custom properties with adapters for Tailwind v4, shadcn/ui, Bootstrap/MDB, and Angular Material. The shadcn adapter maps --ds-radius; the other adapters map colors only.

The --ds-* prefix and the @leaflink/design-system name are placeholders. Renaming either later is a find-and-replace across this package and each consumer's mapping — treat it as its own small migration.

Tiers

  • Primitives — the raw OKLCH ramp (--ds-color-blue-500, …). Source of truth for hue values.
  • Semantic roles — what you build against (--ds-color-primary, --ds-color-surface, --ds-color-text, …), plus the non-color --ds-radius (base corner radius).
  • Data-viz — a categorical chart palette (--ds-color-viz-1 … -8), exempt from "use semantic".

Disabled is a state, not a role: there is no --ds-color-disabled-*. Style a disabled control by fading its enabled fill in the component layer, the way Bootstrap, MDB and shadcn/ui already do, so a disabled destructive button stays recognizably destructive instead of flattening to one shared neutral. Hover and active work the opposite way: they keep dedicated roles (--ds-color-primary-hover, --ds-color-secondary-active, …), because a translucent derived fill has no single contrast ratio the gate can hold. The reasoning is in the architecture doc.

Brands and dark mode

A brand is a full set of values for the shared roles. Pick one with data-brand; pick light/dark with a .dark class. Both go on the same element (usually <html>). Each product keeps its own look as a brand and shares only the structure (role names, dark-mode logic, contrast gate) — there is no forced reskin.

  • Default (unnamed). An unbranded :root resolves to it. This is the new design system's own look, for the new app.
  • stash. A frozen snapshot of today's Stash values. Opt in with <html data-brand="stash"> for a no-visual-change match to the current LeafLink apps. Light only: the Stash app has no dark mode.
  • dama. DamaFE's current colors, kept as-is. Opt in with <html data-brand="dama"> so DamaFE adopts the shared structure without changing its look. Light only: DamaFE has no dark mode.

Only the default brand ships dark values, so what .dark does on a light-only brand depends on the entry. On the all-brands ./tokens entry it falls back to the default dark look through the cascade. On a single-brand entry (./tokens/stash, ./tokens/dama) no dark values load at all, so it does nothing. Either way, don't toggle it.

The data-brand attribute and the .dark class both go on <html>. Each line below is one combination — they are alternatives, not nested:

<html>                                    default brand, light
<html class="dark">                       default brand, dark
<html data-brand="stash">                 stash brand,   light
<html data-brand="dama">                  dama brand,    light

Re-pointing a brand

A consumer only references roles and pins one data-brand, so a brand's look changes in one place — its token file — with no consumer change. For example, to re-point dama (edit brands/dama.css):

  • Match the stash look: replace its brand-specific literals with stash's role values (the var(--ds-color-<family>-<step>) references in brands/stash.css). dama then renders the current LeafLink look and stays frozen with it.
  • Follow the default: remove the overrides so [data-brand="dama"] resolves to :root, and dama tracks the design system's evolving look.

Usage

Pick one entry for the CSS variables:

@import '@leaflink/design-system/tokens/default'; /* one brand — also /stash, /dama */
@import '@leaflink/design-system/tokens'; /* all brands — only for switching brands at runtime */

@import '@leaflink/design-system/tailwind-theme'; /* Tailwind utilities: bg-primary, text-foreground, … */

A single-brand entry (./tokens/<brand>) is the common case — smaller and self-contained. It defines its roles under [data-brand="<brand>"] (except default, which is :root), so set data-brand on <html> (see the table above); there is no :root fallback once the other brands aren't loaded. Use the all-brands ./tokens only when one page switches brands at runtime.

The all-brands ./tokens entry already includes the chart palette. On a single-brand entry, add @import '@leaflink/design-system/tokens/data-viz' for it. Either way it follows the active brand's ramp, so pair it with a brand that carries the ramp (default or stash).

See each brand painted onto a sample UI in src/tokens/brands.

Framework adapters map the roles onto a library's own variable names — import one in place of the library's color block, after the library's CSS:

@import '@leaflink/design-system/shadcn-theme'; /* shadcn/ui: --background, --primary, --chart-1, … */
@import '@leaflink/design-system/bootstrap-theme'; /* Bootstrap & MDB: --bs-*/--mdb-primary, --bs-body-bg, … */
@import '@leaflink/design-system/angular-material-theme'; /* Angular Material: --mat-sys-primary, --mat-sys-surface, … */

Semantic utilities flip under .dark on their own — they read variables that change value, so no Tailwind dark: variant is required. To author explicit dark: overrides, add @custom-variant dark (&:where(.dark, .dark *)); at the top level of your own Tailwind entry (not inside a layer()-wrapped import).