@dotnaos/design

Shared design tokens, CSS assets, and low-level utilities used by the DotNaos UI packages.

Install

bun add @dotnaos/design

Import

import { designTokens, getSize } from "@dotnaos/design";

@import "tailwindcss";
@import "@dotnaos/design/tokens.css";
@import "@dotnaos/design/theme.css";
@import "@dotnaos/design/styles.css";
@import "@dotnaos/design/tailwind-theme.css";

tailwind-theme.css overrides Tailwind's native spacing, radius, typography, shadow, transition, and color variables with DotNaos defaults. Semantic roles such as --color-accent, --color-text, and --color-control live directly in Tailwind's --color-* namespace. tokens.css only contains corner-shape values that have no Tailwind equivalent, while theme.css overrides the same color and shadow variables for light and dark appearances.

Keep tailwind-theme.css last among framework theme imports so DotNaos wins when another library uses the same Tailwind namespace.

Build

bun --filter @dotnaos/design build

Licensing

This package is published under the MIT license and includes LICENSE and THIRD_PARTY_NOTICES.md in the npm tarball.

The published output only uses open-source HeroUI packages. No HeroUI Pro code, templates, assets, or components are included.