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

@bluealba/pae-design-tokens

v0.0.0-integration-css.403

Published

Blue Alba Platform design tokens, cascade layer contract and base styles

Vulnerabilities

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

Links

Maintainers

bluealbabluealba

Keywords

Readme

@bluealba/pae-design-tokens

Single source of truth for the Blue Alba Platform CSS architecture: design tokens, the cascade layer contract and base styles.

Artifacts

| File | Purpose | Where it loads | |---|---|---| | dist/platform-tokens.css | Layer order declaration + all --platform-*/--pae-shell-* tokens (light & dark) + minimal document base | Inlined first in the document <head> by the gateway (index.hbs) | | dist/shell-reset.css | Full preflight-style reset for the shell | Injected inside the shell shadow root only — never into the document |

Cascade layer contract

@layer pae.tokens, pae.base, pae.customization;
  • pae.tokens — token definitions (:root custom properties, [data-theme='dark'] overrides).
  • pae.base — minimal document base (html/body) + defensive defaults scoped to [data-pae-ui] (the marker initializeMicroFrontend() puts on every micro-frontend root).
  • pae.customization — tenant/customization overrides. Always wins over the layers above regardless of stylesheet load order (this is what makes customization deterministic).

What the contract guarantees

  • Deterministic priority between platform layers, independent of load order.
  • A micro-frontend using its own layers (e.g. Tailwind v4) declares them later in the document, so its CSS wins over platform layers inside its own tree.
  • Tokens are consumed as CSS custom properties: they inherit into the shell shadow root and into every micro-frontend.

What it does NOT guarantee

  • Un-layered CSS beats layered CSS at equal specificity. The shell is immune to hostile global CSS via Shadow DOM, not via layers.
  • Isolation between micro-frontends in the light DOM. A micro-frontend loading a global reset (e.g. an unscoped Tailwind preflight) can affect sibling micro-frontends — scope your preflight to your own container (#pae-app:<module-name>).

Customization

Tenant customization stylesheets are wrapped in @layer pae.customization automatically by usePlatformCustomization / useDynamicStyleSheet (@bluealba/pae-ui-react-core). They should only re-declare custom properties:

:root {
  --platform-color-primary-red: 5;
  --platform-color-primary-green: 35;
  --platform-color-primary-blue: 100;
}