CSS foundation for the Nanoo Labs ecosystem. Design tokens, resets, and utility components built on LightningCSS.
pnpm LightningCSS CSS Custom Properties OKLCH Design Tokens
This package provides the core visual identity for Nanoo Labs: minimal CSS reset, design tokens as CSS custom properties (OKLCH color space), and essential UI components. Dark-first, zero runtime, framework-agnostic.
- Build: LightningCSS CLI (
lightningcss-cli) for bundling, minification, and autoprefixing - Tokens: CSS custom properties with OKLCH color space (pure neutral grays)
- Components: BEM-like
nl-*classes for container, button, card, typography - Themes: Dark-first with light override via
@media+[data-theme] - Zero runtime: No pre-processor, no framework. Output is static CSS
pnpm add @nlbs/css/* Tokens only (Tailwind v4, custom styling) */
@import '@nlbs/css';
/* Full package (reset + tokens + typography + components) */
@import '@nlbs/css/full';<link rel="stylesheet" href="https://unpkg.com/@nlbs/css" />| Import | Output | Use Case |
|---|---|---|
@import '@nlbs/css' |
dist/tokens.min.css |
Tailwind v4, tokens only |
@import '@nlbs/css/full' |
dist/nanoo.min.css |
Full package |
src/
├── tokens.css # Entry: variables + themes only
├── main.css # Entry: full package (reset + tokens + components)
├── reset.css # Minimal reset
├── variables.css # Primitives: gray scale, spacing, radius, typography
├── aliases.css # Backward compatibility (--nl-* tokens)
├── themes/
│ ├── dark.css # Semantic tokens (default)
│ └── light.css # Light overrides
├── typography.css # Headings, text utils, links
├── layout.css # Container classes
├── button.css # Button variants
└── card.css # Card component
Pure neutral grays with zero chroma (no color tint):
--gray-0: oklch(0.99 0 0); /* near white */
--gray-6: oklch(0.64 0 0); /* mid gray */
--gray-12: oklch(0.1 0 0); /* near black */Theme-aware tokens that reference primitives:
--color-text: var(--gray-2); /* body text */
--color-bg: var(--gray-12); /* page background */
--color-border: var(--gray-9); /* default borders */Backward compatibility with old --nl-* tokens:
--nl-color-primary: var(--color-brand);
--nl-color-ink: var(--color-text);
--nl-canvas: var(--color-bg);
--nl-space-xs: var(--spacing-xs);Dark by default. Light mode via @media (prefers-color-scheme) or [data-theme="light"].
<html data-theme="light"></html>| Command | Description |
|---|---|
pnpm build |
Minified prod bundles |
pnpm dev |
Watch + unminified |
pnpm format:check |
Check formatting |
pnpm format |
Fix formatting |
Part of the nanoolabs.dev ecosystem. Keep design tokens and component contracts in sync with consuming repos.
- Branch from
mainwithrefactor/namenaming - Commit messages follow Conventional Commits
- Rebuild before pushing:
pnpm build
ISC © Nanoo Labs