# @codenhub/styles

> CSS-only Codenhub design tokens, reset, typography, layout and content utilities, component classes, native-element styling, and Tailwind CSS v4 source entrypoints.

Use compiled entrypoints for ready-to-import CSS or `/tw` entrypoints in a
Tailwind CSS v4 build. The package has no JavaScript behavior. Supported behavior
is what the public docs describe and the demo at https://demo.codenhub.dev/styles/ shows.

## Documentation

- [Introduction](./docs/index.md): Primary entrypoint: what the package is for, what it does not do, versioning, and the reading order.
- [README](./README.md): Installation, a first example, requirements, and license.
- [Setup](./docs/setup.md): Installing, choosing compiled CSS or Tailwind source, requirements, every entrypoint, classless HTML, cascade layers, and what to check when nothing is styled.
- [Integrating](./docs/integrating/index.md): How the stylesheet loads in a framework build, and which guide to follow.
  - [Tailwind CSS v4](./docs/integrating/tailwind.md): Using the `/tw` source entrypoints in a Tailwind CSS v4 build, focused entrypoints, the `dark:` variant, and troubleshooting.
  - [Next.js](./docs/integrating/nextjs.md): Importing the stylesheet in a Next.js or React app.
  - [Vue](./docs/integrating/vue.md): Importing the stylesheet in a Vue or Vite app.
  - [Svelte](./docs/integrating/svelte.md): Importing the stylesheet in a Svelte or SvelteKit app.
  - [Astro](./docs/integrating/astro.md): Importing the stylesheet in an Astro app.
  - [Without a bundler](./docs/integrating/without-a-bundler.md): Linking the compiled files from plain HTML, Rails, Django, or a CDN.
- [Building a screen](./docs/concepts.md): Layout, type, cards, and buttons, and the model behind them: intent, fill, edge, aesthetic, and what passes down to children.
- [Usage overview](./docs/usage/index.md): The task guides in order, then the lookup pages.
  - [Buttons](./docs/usage/buttons.md): Destructive and secondary actions, icon buttons, sizes, link buttons, disabled states, and loading icons.
  - [Forms](./docs/usage/forms.md): Labeled fields, hints and errors, icons and fixed prefixes, selects, and checkbox, radio, and switch toggles.
  - [Feedback](./docs/usage/feedback.md): A saving button, alerts, badges, skeletons, progress bars, and motion that keeps running.
  - [Tooltips](./docs/usage/tooltips.md): Field help on hover and focus, the ARIA wiring and Escape handler, and where a tooltip gets clipped.
  - [Theming](./docs/usage/theming.md): Light and dark mode, brand colors, custom intents, and every color, intent, foundation, and font token with its default.
  - [Aesthetics](./docs/usage/aesthetics.md): The six optional looks, what each changes, its knobs, and its limits.
  - [Solo classes](./docs/usage/solo.md): Painting an aesthetic onto one element from another library, and what a solo class reads and ignores.
  - [Composing](./docs/usage/composing.md): Lookup for combining classes, every component's default look, presentation rules, the component axis matrix, and elevation.
  - [Customizing](./docs/usage/customizing.md): Lookup for presentation and material tokens, aesthetic knobs, the six public component variables, the generated palette, and composition helpers.
  - [Content and layout](./docs/usage/content-and-layout.md): Lookup for layout helpers, the type scale, cards and panels, tables, quotes, code, and keys.
- [Accessibility](./docs/accessibility.md): What the CSS provides for focus, states, motion, contrast, forced colors, and right-to-left text, and what the application must add.
- [Changelog](./docs/changelog/index.md): Release history, including breaking changes.
