@northslopetech/altitude-ui 2.8.1 → 3.0.0-alpha.10

package/README.md

@@ -5,11 +5,26 @@ React UI components for the Altitude design system, built on top of [shadcn/ui](
 ## Installation
 
 ```bash
-npm install @northslopetech/altitude-ui
-# or
 pnpm add @northslopetech/altitude-ui
 ```
 
+`@northslopetech/altitude-tokens` is installed automatically as a dependency.
+
+Then import the stylesheet once at your app's entry point:
+
+```ts
+import "@northslopetech/altitude-ui/styles.css";
+```
+
+This single import provides design tokens, typography utilities, and semantic color utilities. No Tailwind preset is required.
+
+Fonts (`Hanken Grotesk Variable` and `JetBrains Mono Variable`) are bundled with this package — `styles.css` `@import`s them via `@fontsource-variable`, so consumers don't need to install or load fonts separately. (`@northslopetech/altitude-tokens` declares the family names but deliberately leaves font loading to the rendering layer; this package is that rendering layer.)
+
+### Requirements
+
+- **Tailwind CSS v4** — the stylesheet uses `@theme` and `@utility` directives.
+- **Peer dependencies** — `react`, `react-dom`.
+
 ## Architecture
 
 This package combines the best of both worlds:
@@ -64,7 +79,7 @@ function Example() {
       <Button size="sm">Small</Button>
       <Button size="lg">Large</Button>
       <Button size="xl">Extra Large</Button>
-      <Button size="icon">🎯</Button>
+      <Button size="default">🎯</Button>
     </div>
   );
 }
@@ -167,7 +182,7 @@ pnpm check-types
 npx shadcn@latest add [component-name]
 ```
 
-> **Note**: The package includes a prebuild script that automatically builds tokens, but for development mode you should build tokens manually first.
+> **Note**: The package includes a prebuild script that automatically builds tokens. For watch mode (`pnpm dev`), build tokens manually first with `pnpm tokens:build` from the repo root.
 
 ## Adding New Components
 
@@ -287,7 +302,7 @@ import { Typography } from "@northslopetech/altitude-ui";
 function Example() {
   return (
     <div>
-      <Typography variant="display-xl">Large Display Text</Typography>
+      <Typography variant="display-3xl">Large Display Text</Typography>
       <Typography variant="heading-lg">Section Heading</Typography>
       <Typography variant="body-md">Body paragraph text</Typography>
       <Typography variant="label-sm-bold">Form Label</Typography>