@namche/css
v0.2.1
Published
NAMCHE classed CSS components — the design system for server-rendered HTML, no build step, no framework
Downloads
571
Readme
@namche/css
NAMCHE classed CSS components — the design system for server-rendered HTML. No build step, no framework, no JavaScript: one stylesheet that makes plain markup look like NAMCHE, in light and dark.
This is the zero-build lane of the system. The React lane is the
@namche shadcn registry (NamcheAI/ui); both lanes
read the same @namche/design-tokens
semantic variables, so they cannot drift at the colour level. Use this package
for Hono apps, Astro content pages, internal tools, and anything else that
writes ordinary HTML; use the registry when you need real interactive
components.
Install
npm install @namche/cssWith a bundler (Vite, Astro, …), one import brings tokens, theme and components:
@import "@namche/css";Without a build step, inline the resolved files into your page <style> (or
serve them statically): styles.css lists the layers in order —
@namche/design-tokens/styles.css, @namche/design-tokens/shadcn, then
components.css. Apps that already load the tokens and the bridge import
@namche/css/components.css alone.
Use
<button class="btn">Save</button>
<a class="btn btn-outline btn-sm" href="/edit">Edit</a>
<div class="card">
<div class="card-header">
<div class="card-title">Expedition</div>
<div class="card-description">Eight members, two routes.</div>
</div>
<div class="card-content prose"><p>…</p></div>
</div>
<div class="field">
<label class="label" for="name">Name</label>
<input class="input" id="name" placeholder="Ang Tharkay">
</div>Vocabulary: .btn (variants -outline -secondary -ghost -destructive
-link, sizes -xs -sm -lg -icon), .badge (-secondary -outline
-destructive), .card family, .input .textarea .select .label
.field, .table (+ .table-container), .separator, .kbd, .alert
family, .prose.
Dark mode
Same contract as the React lane: add the dark class to <html>. Every
colour is a variable that flips with the class.
Fonts
The package ships no font binaries; the tokens' @font-face rules load the
faces from cdn.namche.ai — Namche Shadow always, and Geist too since
@namche/design-tokens 1.2.0. On older token versions Geist is the
consumer's job: self-host it or accept the system-font fallback the token
stacks provide.
The namespace is owned
styles.css defines the shadcn semantic namespace on :root — --primary,
--secondary, --muted, --accent, --card, --border, --ring and
friends. A page that repurposes those generic names for its own vocabulary
collides with the lane the moment both load: namche.ai's marketing aliases
briefly turned the admin button into the marketing accent and rendered muted
text in a surface colour. Site-local aliases must either use the canonical
token names (--text-muted, not --muted) or live scoped inside the page's
own container — never on :root or body.
Rules
- The React components in NamcheAI/ui are canonical. If this package renders a component differently, this package has the bug.
- Colours come only from the semantic bridge variables (
--primary,--border,--ring, …) — never from raw palette values. - Interactive behaviour stays out. Style platform elements (
<dialog>,popover,<details>) with the tokens instead of shipping scripts.