@codenhub/styles

CSS-only Codenhub design tokens, base styles, and composable UI helper classes.

Installation

pnpm add @codenhub/styles

Usage

Import the compiled stylesheet for the complete token, reset, utility, and component-class surface:

@import "@codenhub/styles";

<main class="stack">
  <p class="text-label">Status</p>
  <h1 class="text-title">Ready to publish</h1>
  <button class="btn primary">Continue</button>
</main>

For the Tailwind CSS v4 entrypoint, theme selection, the intent/presentation axes, and opt-in aesthetics, see Setup, Concepts, and Usage.

Documentation

• Documentation overview: What the package is, what it does and does not do, and where to go next.
• Setup: Installation, entrypoints, and configuration.
• Concepts: The three-axis model and the token system.
• Usage: Composing, theming, customizing, aesthetics, and each component family.
• Integrating: Wiring the stylesheet into Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
• Accessibility: CSS accessibility hooks and non-goals.
• Changelog: Release history, including breaking changes.

Requirements

| Requirement | Details | | ------------- | -------------------------------------------------------------------------------------------------------------- | | CSS imports | Consumer tooling must resolve package CSS imports. | | Browsers | Chrome 123, Safari 17.5, or Firefox 121 and newer (light-dark() theming; :has() for .input-group state). | | Tailwind CSS | Version 4 or newer is required only for /tw source entrypoints. | | Accessibility | Consumers provide semantic HTML, ARIA, keyboard behavior, and focus management. |

Notes

This package has no JavaScript behavior; no version provides compatibility aliases for a removed class or token. 0.2.0 removes .btn.loading (compose a disabled .btn with a .loader child instead) and .alert.icon's built-in glyph (drop a consumer-supplied icon into .alert-icon instead), and .tooltip now requires a .tooltip-bubble child element rather than a data-tooltip attribute. See the changelog for the complete history.

License

Licensed under Apache-2.0. Embedded SVG icons derived from Lucide are ISC-licensed, and loaders derived from svg-spinners are MIT-licensed. See NOTICE for the required notices.